tag:blogger.com,1999:blog-62738186848314543062024-03-18T11:48:25.542+02:00cat **/*Akshaalhttp://www.blogger.com/profile/05677582369584740657noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-6273818684831454306.post-42323063544377975982009-03-06T19:49:00.004+02:002009-03-08T14:02:10.967+02:00Async Related Posts WidgetI have finally implemented a feature I wanted to have on my blog. It is Related Posts Widget, but not just Yet Another Related Posts Widget. It differs form all other widgets that show related posts. It has features that no other widget has (yet at least):<br />1. It sorts related posts not only by date, but by <b>relevance</b>!<br />2. It is <b>small</b>. It is <b>fast</b>. It is <b>asynchronous</b>!. It is just AJAX :).<br />3. It is <b>easy</b> to install. It is very crucial point for me because I maintain a bunch of blogs and I don't want to waste my time doing coplicated setups for each blog over and over again.<br /><br />So, lets install the widget in a blog. The installation process constists of two simple modifications to the blog HTML Template. Go to <b>Settings -> Layout -> HTML Template</b>. But <i>Before</i> you start doing any modification, make a backup of your template (<b>Download full template</b>)! Now you are ready. The option <b>Expend Widget Templates</b> should be checked. Then follow the steps below:<br />1. Find string <b><data:post.body/></b> in your template code. Right <b>after(!)</b> this string, insert the snipped below:<pre><div caption='Related posts:' id='akRelatedPosts' max='8'/><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><script language='javascript' type='text/javascript'><br />(function(_1,_2){var _3={};var _4=_2.length;var _5=function(_6){var _7=&quot;([0-9]{4})(-([0-9]{2})(-([0-9]{2})(T([0-9]{2}):([0-9]{2})(:([0-9]{2})(.([0-9]+))?)?(Z|(([-+])([0-9]{2}):([0-9]{2})))?)?)?)?&quot;;var d=_6.match(new RegExp(_7));var _9=0;var _a=new Date(d[1],0,1);if(d[3]){_a.setMonth(d[3]-1)}if(d[5]){_a.setDate(d[5])}if(d[7]){_a.setHours(d[7])}if(d[8]){_a.setMinutes(d[8])}if(d[10]){_a.setSeconds(d[10])}if(d[12]){_a.setMilliseconds(Number(&quot;0.&quot;+d[12])*1000)}if(d[14]){_9=(Number(d[16])*60)+Number(d[17]);_9*=((d[15]==&quot;-&quot;)?1:-1)}_9-=_a.getTimezoneOffset();time=(Number(_a)+(_9*60*1000));return Number(time)};var _b=function(){var _c=[];for(var i in _3){_c.push(_3[i])}if(_c.length&lt;1){return}var _e=document.getElementById(&quot;akRelatedPosts&quot;);if(!_e){return}var _f=_e.getAttribute(&quot;max&quot;)||5;_c=_c.sort(function(a,b){var _12=b.weight-a.weight;if(_12!=0){return _12}return b.date-a.date});var s=&quot;&lt;ul&gt;&quot;;for(var i in _c){if(_f--&lt;1){break}var _14=_c[i];s+=&quot;&lt;li&gt;&lt;a href=&#39;&quot;+_14.href+&quot;&#39;&gt;&quot;+_14.title+&quot;&lt;/a&gt;&lt;/li&gt;&quot;}s+=&quot;&lt;/ul&gt;&quot;;var _15=_e.getAttribute(&quot;caption&quot;);s=&quot;&lt;span class=&#39;caption&#39;&gt;&quot;+_15+&quot;&lt;/span&gt;&quot;+s;_e.innerHTML=s};var _16=function(_17){for(var i in _17.feed.entry){var _19=_17.feed.entry[i];var _1a=_19.id[&quot;$t&quot;];var _1b=_3[_1a];if(_1b){_1b.weight++}else{var _1c;for(var _1d in _19.link){if(_19.link[_1d].rel==&quot;alternate&quot;){_1c=_19.link[_1d].href;break}}if(_1c==_1){continue}_1b={weight:1,title:_19.title[&quot;$t&quot;],date:_5(_19.published[&quot;$t&quot;]),href:_1c};_3[_1a]=_1b}}if(--_4==0){_b()}};var _1e=function(_1f){var _20;try{_20=new XMLHttpRequest()}catch(excp1){try{_20=new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;)}catch(excp2){try{_20=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;)}catch(excp3){_20=false}}}var _21=function(){if(_20.readyState==4){if(_20.status==200){_16(eval(&quot;(&quot;+_20.responseText+&quot;)&quot;))}}};_20.open(&quot;GET&quot;,_1f,true);_20.onreadystatechange=_21;_20.send(null)};for(var _22 in _2){_1e(_2[_22])}} <!-- = = = = = endoffunc = = = = = = --><br />)(&quot;<data:blog.url/>&quot;,[<br /><b:loop values='data:post.labels' var='label'><br /> &quot;/feeds/posts/default/-/<data:label.name/>?alt=json&amp;max-results=5&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><br /></b:loop><br />]);<br /></script><br /></b:if></pre><ad></ad>You should end up with something like this (click on the picture to open a full-size version):<br /><a href="http://picasaweb.google.com/lh/photo/vp8KXBOLZ3SC7Y_p36AILA?authkey=Gv1sRgCMTt-MKs5cTh6wE&feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3q3NHxW34YjmA35EHpexe9BZvAyCl-af4tq633xxbPR5kLd-S0BpSqB3eM4FstRTFvcXtFlX-ALyo3sxHWoyL96uiWOJ4FZMKdjJv-Jl_ZX9whJASjNrwMyS7o95woF-ZnExqYH5rsjVe/s400/eng.png" /></a> Pay attention to <i>caption='...'</i> and <i>max='8'</i> You may consider to edit these values. A value for <i>caption</i> defines text to be shown above a list of related posts. And <i>max</i> defines a number of displayed relevant posts. <br />2. This step is optional. Everything should start working without it, but the widget will not be nice-looking. That is why you may want to complete it. So find the string <b>]]></b:skin></b>. And insert the following css snippet <b>before(!)</b> the string:<pre>#akRelatedPosts {<br /> padding-top: 20px;<br />}<br /><br />#akRelatedPosts .caption {<br /> font-weight: bold;<br />}<br /><br />#akRelatedPosts ul {<br /> margin: 0;<br />}</pre>If you think you have knowledge of css, you can tweak the styles below as you like. Finally you should see a picture like the following (click on picture to see full-size version):<a href="http://picasaweb.google.com/lh/photo/1KWdAkPHB-8HbUACiKYfZA?authkey=Gv1sRgCMTt-MKs5cTh6wE&feat=embedwebsite"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyjUC7PMUS-G33pNZ6g9FWvIu_jZhI2Zc2s0DdmfELO4s9ppi47Sod_wRyLR9oNMozXCGGuVK0vC9T1GpT_FWq_r8C6qopR6PpL7Zel6XLm4z0J-cfjL6GQYicJmtZEypy4_jXvE1Slrp1/s400/css.png" /></a><br /><ad2></ad2>That is all. You can save your template and check your posts.Akshaalhttp://www.blogger.com/profile/05677582369584740657noreply@blogger.com0tag:blogger.com,1999:blog-6273818684831454306.post-45574568194997325712009-03-05T18:35:00.005+02:002009-03-05T18:50:16.141+02:00Cross-site requestIt is handy to test javascript snippets without uploading them on a production server. But it is hard to test AJAX request like that. The reason for it is that firefox doesn't allow a cross-site request for a sake of user's security.<pre>uncaught exception: Access to restricted URI denied (NS_ERROR_DOM_BAD_URI)</pre>But if you know what you are doing you can temporarley switch this behavior off. Open <b>about:config</b> page and set <b>signed.applets.codebase_principal_support</b> to <b>true</b>. Also your script must have the following line executed before any cross-site request:<pre>netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");</pre><ad2></ad2>And don't forget to set <b>signed.applets.codebase_principal_support</b> to <b>false</b> value back and remove the line above from script when you have done with testing!!Akshaalhttp://www.blogger.com/profile/05677582369584740657noreply@blogger.com3tag:blogger.com,1999:blog-6273818684831454306.post-68477254901231325732007-09-19T21:09:00.003+03:002009-02-22T17:40:54.451+02:00Web programmingIt is not as bad as I thought. I am even starting to get pleasure from using dojo (ajax framework) and firebug (plugin for firefox).<br /><br />Update: Only thing disappointing me is a lack of javascript support in eclipse.<ad2></ad2>Akshaalhttp://www.blogger.com/profile/05677582369584740657noreply@blogger.com0tag:blogger.com,1999:blog-6273818684831454306.post-7021316228230082792007-08-20T13:08:00.002+03:002009-02-22T17:40:33.420+02:00Portlets and AJAX: ZK, GWT, DOJOI've tried to leverage ZK in a portal environment. Yes, it's possible, but there can be only one ZK portlet within portal's page becouse ZK uses global javascript variables. So it's sux. Anyway, don't try to use DhtmlPortlet otherwise you will end up with exception from tomcat telling about SRV spec violations. Instead, just include zk page from your custom portlet class.<br /><br />The same is about GWT. It's pain to build a GWT project with maven. GWT plugin for maven looks immature and abandoned. The idea behind GWT is very hackish.<br /><ad></ad><br />DOJO is a lowlevel set of javascript functions. That makes possible to implement custom widgets suitable for portal environment. Besides, there is DIJIT widgets collection built on top of DOJO. Injection of dijit css styles to portat theme is required to start using DIJIT widgets. Lack of real documentation for DOJO/DIJIT is the only thing really disappointing.Akshaalhttp://www.blogger.com/profile/05677582369584740657noreply@blogger.com0