<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>SwellJS - another big fish in the sea</title>
	<atom:link href="http://blog.justswell.org/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.justswell.org</link>
	<description>well-minded javascript library</description>
	<lastBuildDate>Fri, 20 Aug 2010 20:48:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.4</generator>
		<item>
		<title>A new step ahead</title>
		<link>http://blog.justswell.org/a-new-step-ahead/</link>
		<comments>http://blog.justswell.org/a-new-step-ahead/#comments</comments>
		<pubDate>Wed, 11 Aug 2010 14:13:51 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Swell]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=319</guid>
		<description><![CDATA[Well, it&#8217;s been a while since the last post! We lately brainstormed about SwellJS (for once not about application design!) and came to the conclusion that we can&#8217;t continue anymore, too much work for two guys who can only work when it&#8217;s lunch break time. Christophe went to the dark side (Qt and C++) and [...]]]></description>
			<content:encoded><![CDATA[<p>Well, it&#8217;s been a while since the last post! We lately brainstormed about SwellJS (for once not about application design!) and came to the conclusion that we can&#8217;t continue anymore, too much work for two guys who can only work when it&#8217;s lunch break time.<br />
Christophe went to the dark side (Qt and C++) and I keep thinking on how making the best of my time, till the lunch break ends (these are too short).</p>
<p>As you can see this is a no-go, although we love Swell and its fish we will have to put an end to it, or at least to the framework itself: we will still remain in the open source community but will instead contribute to the other frameworks or libraries.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/a-new-step-ahead/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Back @work</title>
		<link>http://blog.justswell.org/back-work/</link>
		<comments>http://blog.justswell.org/back-work/#comments</comments>
		<pubDate>Tue, 17 Nov 2009 16:46:33 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Swell]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=315</guid>
		<description><![CDATA[Finally we are back at work on Swell after some inactivity period, we&#8217;ve been in a crazy workload lately&#8230; By the way, we are still waiting for motivated people to get in]]></description>
			<content:encoded><![CDATA[<p>Finally we are back at work on Swell after some inactivity period, we&#8217;ve been in a crazy workload lately&#8230;<br />
By the way, we are still waiting for motivated people to get in <img src='http://blog.justswell.org/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/back-work/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Even more Drag&amp;Drop coolness between your desktop and your browser!</title>
		<link>http://blog.justswell.org/even-more-dragdrop-coolness-with-event-delegation/</link>
		<comments>http://blog.justswell.org/even-more-dragdrop-coolness-with-event-delegation/#comments</comments>
		<pubDate>Fri, 04 Sep 2009 15:41:35 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[DD]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Swell]]></category>
		<category><![CDATA[drag&drop]]></category>
		<category><![CDATA[event delegation]]></category>
		<category><![CDATA[Events]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=305</guid>
		<description><![CDATA[We are making more &#38; more progress with the native DnD API, and being native means fully taking advantage of Event Bubbling. In essence this means that if you want to make for example a datatable with a lot of rows without attaching events to them (remember the flyweight pattern?) you&#8217;ll only need to set [...]]]></description>
			<content:encoded><![CDATA[<p>We are making more &amp; more progress with the native DnD API, and being native means fully taking advantage of <strong>Event Bubbling</strong>.</p>
<p>In essence this means that if you want to make for example a datatable with a lot of rows without attaching events to them (remember the flyweight pattern?) you&#8217;ll only need to set your draggable element at a higher level in the hierarchy to get the DnD behavior applied on all children nodes (marked with the draggable attribute), that&#8217;s powerful and of course, reduces a lot the memory footprint of your web application.</p>
<p>A lot of components could benefit of this approach, Treeview, Datatable, Listview and so on.</p>
<p><strong>Another part of the example shows another level of interaction between the browser and desktop, and we are sure this one will get a lot of attention and excitement!</strong></p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="581" height="363" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=6500920&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=c9ff23&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="581" height="363" src="http://vimeo.com/moogaloop.swf?clip_id=6500920&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=c9ff23&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p><a href="http://playground.justswell.org/drag-and-drop-event-delegation.html"><img class="aligncenter size-full wp-image-309" title="Swell drag&amp;drop in action" src="http://blog.justswell.org/wp-content/uploads/2009/09/dragging.png" alt="Swell drag&amp;drop in action" width="400" height="128" /></a>And the code <img src='http://blog.justswell.org/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> proxyElement <span style="color: #339933;">=</span> html.<span style="color: #660066;">div</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span> html.<span style="color: #660066;">span</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #3366CC;">'cls'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">'dd-proxy-icon'</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> html.<span style="color: #660066;">span</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'Moo'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> draggableRows <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Swell.<span style="color: #660066;">Lib</span>.<span style="color: #660066;">DD</span>.<span style="color: #660066;">Draggable</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'bleh'</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #3366CC;">'delegate'</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
    <span style="color: #3366CC;">'proxy'</span>  <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span>
    <span style="color: #3366CC;">'proxyOverride'</span>    <span style="color: #339933;">:</span> proxyElement<span style="color: #339933;">,</span>  
    <span style="color: #3366CC;">'dataCallback'</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>dt<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> _currentEl <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">getDragEl</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">current</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> _stdOut <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> _n <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> _l <span style="color: #339933;">=</span> _currentEl.<span style="color: #660066;">childNodes</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> _n <span style="color: #339933;">&lt;</span> _l<span style="color: #339933;">;</span> _n<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>_currentEl.<span style="color: #660066;">childNodes</span><span style="color: #009900;">&#91;</span>_n<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">nodeType</span> <span style="color: #339933;">===</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #003366; font-weight: bold;">var</span> _text <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>_currentEl.<span style="color: #660066;">childNodes</span><span style="color: #009900;">&#91;</span>_n<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">text</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                _stdOut.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">trim</span><span style="color: #009900;">&#40;</span>_text<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">setData</span><span style="color: #009900;">&#40;</span>dt<span style="color: #339933;">,</span> <span style="color: #3366CC;">'text/plain'</span><span style="color: #339933;">,</span> _stdOut.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\t</span>&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> dropTarget <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Swell.<span style="color: #660066;">Lib</span>.<span style="color: #660066;">DD</span>.<span style="color: #660066;">Droppable</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'moo'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
dropTarget.<span style="color: #660066;">ondrop</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #339933;">,</span> draggable<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!!</span>draggable<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        draggable.<span style="color: #660066;">getDragEl</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'moo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">current</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">tBodies</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/even-more-dragdrop-coolness-with-event-delegation/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Drag and drop files from your desktop to your browser</title>
		<link>http://blog.justswell.org/drag-and-drop-files-from-your-desktop-to-your-browser-using-javascript/</link>
		<comments>http://blog.justswell.org/drag-and-drop-files-from-your-desktop-to-your-browser-using-javascript/#comments</comments>
		<pubDate>Tue, 28 Jul 2009 14:45:00 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Swell]]></category>
		<category><![CDATA[desktop to browser drag & drop]]></category>
		<category><![CDATA[drag&drop]]></category>
		<category><![CDATA[playground]]></category>
		<category><![CDATA[showcase]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=274</guid>
		<description><![CDATA[Since the last post, we&#8217;ve received a huge number of requests and questions about drag&#38;dropping files onto your beloved browser. The mechanism behind is quite simple:  the Ajax library, the DOM element wrapper and the Asset component are assuring most of the work (handling the upload and the callback process), the DDM detects the dragged [...]]]></description>
			<content:encoded><![CDATA[<p>Since the last post, we&#8217;ve received a huge number of requests and questions about <strong>drag&amp;dropping files onto your beloved browser.</strong></p>
<p>The mechanism behind is quite simple:  the Ajax library, the DOM element wrapper and the Asset component are assuring most of the work (handling the upload and the callback process), the DDM detects the dragged files,  then your browser is doing the rest, defining the interaction between your desktop and the file input (nicely styled of course).</p>
<p>By now, two browsers are playing well with the demo (Safari 4, Chrome 2+)  while others degrades gracefully.</p>
<p><strong>Here&#8217;s the code :</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">Event</span>.<span style="color: #660066;">add</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'upload'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'change'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'loader'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'foorm'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">xhr</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> currentEl <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'upload'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">current</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'filelist'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">show</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> len <span style="color: #339933;">=</span> currentEl.<span style="color: #660066;">files</span>.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> len<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'filelist'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendHTML</span><span style="color: #009900;">&#40;</span>currentEl.<span style="color: #660066;">files</span>.<span style="color: #000066; font-weight: bold;">item</span><span style="color: #009900;">&#40;</span>i<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fileName</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'
'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
        <span style="color: #003366; font-weight: bold;">var</span> imgs <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">responseText</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'|'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #003366; font-weight: bold;">new</span> Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">Asset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">load</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #339933;">,</span> imgs<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>img<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'loader'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">hide</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            $<span style="color: #009900;">&#40;</span>img<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'image-container'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p style="text-align: left;">
<p style="text-align: left;"><strong>The demo:</strong></p>
<p style="text-align: left;">
<p style="text-align: left;"><a href="http://playground.justswell.org/drag-and-drop-file-upload.html"><img class="size-full wp-image-278 aligncenter" title="ddimages" src="http://blog.justswell.org/wp-content/uploads/2009/07/ddimages.png" alt="ddimages" width="400" height="402" /></a><strong>And the video:<br />
</strong></p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="581" height="363" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=5802353&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=c9ff23&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="581" height="363" src="http://vimeo.com/moogaloop.swf?clip_id=5802353&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=c9ff23&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/drag-and-drop-files-from-your-desktop-to-your-browser-using-javascript/feed/</wfw:commentRss>
		<slash:comments>37</slash:comments>
		</item>
		<item>
		<title>Bridging desktop and browser with Swell&#8217;s native Drag and Drop implementation</title>
		<link>http://blog.justswell.org/swell-javascript-native-dragdrop-implementation/</link>
		<comments>http://blog.justswell.org/swell-javascript-native-dragdrop-implementation/#comments</comments>
		<pubDate>Fri, 17 Jul 2009 11:05:08 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[DD]]></category>
		<category><![CDATA[Swell]]></category>
		<category><![CDATA[dataTransfer]]></category>
		<category><![CDATA[dd]]></category>
		<category><![CDATA[desktop to browser drag & drop]]></category>
		<category><![CDATA[drag&drop]]></category>
		<category><![CDATA[javascript dd]]></category>
		<category><![CDATA[native dd]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=263</guid>
		<description><![CDATA[Don&#8217;t miss the other article of our Drag&#38;Drop series http://blog.justswell.org/drag-and-drop-files-from-your-desktop-to-your-browser-using-javascript/ Today is a big step forward for us, we are proud to feature the first showcase of our Drag&#38;Drop implementation. This is not what you may think about, you may think about drag &#38; drop as being stuck inside your browser window but today what [...]]]></description>
			<content:encoded><![CDATA[<p>Don&#8217;t miss the other article of our Drag&amp;Drop series <a href="http://blog.justswell.org/drag-and-drop-files-from-your-desktop-to-your-browser-using-javascript/">http://blog.justswell.org/drag-and-drop-files-from-your-desktop-to-your-browser-using-javascript/</a></p>
<p>Today is a big step forward for us, we are proud to feature the first showcase of our Drag&amp;Drop implementation.</p>
<p>This is not what you may think about, you may think about drag &amp; drop as being stuck inside your browser window but today what we&#8217;re going to show is a new way of conceiving drag &amp; drop applications. The one you have always waiting for, imagine interacting with the browser chrome and your OS&#8230;</p>
<p>In the video, we are providing a simple yet powerful application to import a RSS feed in your webpage. The classical way is to type in the feed URL  and then getting redirected to it, which commonly takes 3 to 5 steps.  With this implementation you just have to drop the rss icon onto an appropriate target and that&#8217;s all folks!</p>
<p>We use YQL and JSONP to transform RSS into JSON and of course a Swell Element to dynamically attach the behavior to the webpage.</p>
<p>Here&#8217;s the Javascript code to handle this.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> dd2 <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Swell.<span style="color: #660066;">Lib</span>.<span style="color: #660066;">DD</span>.<span style="color: #660066;">Droppable</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'moo'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
dd2.<span style="color: #660066;">ondrop</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> file <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">getData</span><span style="color: #009900;">&#40;</span>e<span style="color: #339933;">,</span> <span style="color: #3366CC;">'DD_URL'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/^http\:\/\//i</span>.<span style="color: #660066;">test</span><span style="color: #009900;">&#40;</span>file<span style="color: #009900;">&#41;</span> <span style="color: #339933;">!==</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'debug'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">setHTML</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'loading…'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    e.<span style="color: #660066;">target</span>.<span style="color: #660066;">className</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #003366; font-weight: bold;">var</span> yqlRequest <span style="color: #339933;">=</span> <span style="color: #3366CC;">'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url=%22'</span><span style="color: #339933;">+</span>file<span style="color: #339933;">+</span><span style="color: #3366CC;">'%22&amp;amp;format=json&amp;amp;callback=moo'</span><span style="color: #339933;">;</span>
    html.<span style="color: #660066;">script</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
        <span style="color: #3366CC;">'type'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">'text/javascript'</span><span style="color: #339933;">,</span>
        <span style="color: #3366CC;">'src'</span>  <span style="color: #339933;">:</span> yqlRequest
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'head'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>And the full video.</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="581" height="363" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://vimeo.com/moogaloop.swf?clip_id=5637267&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=c9ff23&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="581" height="363" src="http://vimeo.com/moogaloop.swf?clip_id=5637267&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=c9ff23&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/swell-javascript-native-dragdrop-implementation/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>Swell update</title>
		<link>http://blog.justswell.org/swell-update/</link>
		<comments>http://blog.justswell.org/swell-update/#comments</comments>
		<pubDate>Thu, 02 Jul 2009 12:03:04 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Swell]]></category>
		<category><![CDATA[dd]]></category>
		<category><![CDATA[drag&drop]]></category>
		<category><![CDATA[news]]></category>
		<category><![CDATA[progress]]></category>
		<category><![CDATA[websockets]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=259</guid>
		<description><![CDATA[We&#8217;ve been hard at work for almost two months now on the Drag&#38;Drop Manager. The Swell guys tries to set high standards in terms of code quality and usability, but first and foremost, always think about the future of web appps and how they can ease the process of using these features in your fav [...]]]></description>
			<content:encoded><![CDATA[<p>We&#8217;ve been hard at work for almost two months now on the <strong>Drag&amp;Drop Manager</strong>.</p>
<p>The Swell guys tries to set high standards in terms of code quality and usability, but first and foremost, always think about the future of web appps and how they can ease the process of using these features in your fav browser today.<br />
That&#8217;s why we are working on the first native Drag &amp; drop implementation in a Javascript library, just think about the possibilities of making the web interacting with your desktop&#8230;</p>
<p>We are also working on WebSockets implementation in Swell using XMLHttp Streaming, this will talk to Comet fans <img src='http://blog.justswell.org/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/swell-update/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Swell Widget example: ImageZoom</title>
		<link>http://blog.justswell.org/swell-widget-example-imagezoom/</link>
		<comments>http://blog.justswell.org/swell-widget-example-imagezoom/#comments</comments>
		<pubDate>Mon, 11 May 2009 22:16:46 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Swell]]></category>
		<category><![CDATA[showcase]]></category>
		<category><![CDATA[widget]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=241</guid>
		<description><![CDATA[As Beta release is around the corner, we are glad today to provide the first swell widget. This widgets makes intensive use of Core components and shows how much power you have at your fingertips&#8230; This is a widget that ecommerce companies often look for, which enables to zoom on an image and view much [...]]]></description>
			<content:encoded><![CDATA[<p>As Beta release is around the corner, we are glad today to provide the first swell widget. This widgets makes intensive use of Core components and shows how much power you have at your fingertips&#8230;</p>
<p>This is a widget that ecommerce companies often look for, which enables to zoom on an image and view much more details than on a thumbnail, without having to display the entire image; providing better user experience.</p>
<p style="text-align: center;"><a href="http://playground.justswell.org/widget-example-image-zoom.html" target="_blank"><img class="size-full wp-image-250 aligncenter" title="imagezoom" src="http://blog.justswell.org/wp-content/uploads/2009/05/imagezoom.png" alt="imagezoom" width="400" height="243" /></a></p>
<p style="text-align: center;">
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/swell-widget-example-imagezoom/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>On Joining Swell</title>
		<link>http://blog.justswell.org/on-joining-swell/</link>
		<comments>http://blog.justswell.org/on-joining-swell/#comments</comments>
		<pubDate>Fri, 08 May 2009 16:26:26 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Swell]]></category>
		<category><![CDATA[Community]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=220</guid>
		<description><![CDATA[I consider myself quite lucky. Earlier this week I stumbled upon the Swell project, and shortly after, the project has been gracious enough to let me help. I&#8217;m glad to now be part of the project &#8211; to help create a piece of software that has the potential to help so many others. The Swell [...]]]></description>
			<content:encoded><![CDATA[<p>I consider myself quite lucky. Earlier this week I stumbled upon the Swell project, and shortly after, the project has been gracious enough to let me help. I&#8217;m glad to now be part of the project &#8211; to help create a piece of software that has the potential to help so many others.</p>
<p>The Swell team has done a phenomal job with their code. It is well documented and logical. It is exciting time to be on board and I am looking forward to contributing.</p>
<p>I am Ryan, and my handle for the Swell project is Cichlid. And from the newest contributor, welcome to the Swell project. We hope you enjoy your stay.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/on-joining-swell/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Trigger image loading with Javascript and Swell</title>
		<link>http://blog.justswell.org/trigger-image-loading-with-javascript-and-swell/</link>
		<comments>http://blog.justswell.org/trigger-image-loading-with-javascript-and-swell/#comments</comments>
		<pubDate>Thu, 07 May 2009 14:47:11 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Swell]]></category>
		<category><![CDATA[image loading]]></category>
		<category><![CDATA[Lazy loading]]></category>
		<category><![CDATA[showcase]]></category>
		<category><![CDATA[triggering image loading]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=214</guid>
		<description><![CDATA[As we are seeing growing interest for Swell, we now want to show how to use it and how cool it is , this is according to the milestones on our Trac a necessity and this will as well open up the project to a larger public. One of the Core component (Lazy loader) plays [...]]]></description>
			<content:encoded><![CDATA[<p>As we are seeing growing interest for Swell, we now want to show how to use it and how cool it is <img src='http://blog.justswell.org/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> , this is according to the milestones on our Trac a necessity and this will as well open up the project to a larger public.</p>
<p>One of the Core component (Lazy loader) plays well with another (Element) in this example.</p>
<p><a href="http://playground.justswell.org/lazy-loading-images-with-triggers.html" target="_blank"><img class="aligncenter size-full wp-image-215" title="playground" src="http://blog.justswell.org/wp-content/uploads/2009/05/playground.jpg" alt="playground" width="400" height="257" /></a></p>
<p>Enjoy!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/trigger-image-loading-with-javascript-and-swell/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Let&#8217;s start using Swell!</title>
		<link>http://blog.justswell.org/lets-start-using-swell/</link>
		<comments>http://blog.justswell.org/lets-start-using-swell/#comments</comments>
		<pubDate>Wed, 06 May 2009 19:11:13 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Swell]]></category>
		<category><![CDATA[CDN]]></category>
		<category><![CDATA[Swell Installation]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=206</guid>
		<description><![CDATA[If you&#8217;ve been following this blog (or are going to read some previous posts), you&#8217;ll most likely want to try out Swell for yourself. I posted a while ago about CDN technology allowing anyone to start using Swell while linking it on a Content Delivery Network, meaning visitors will always get the library from the [...]]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;ve been following this blog (or are going to read some previous posts), you&#8217;ll most likely want to try out Swell for yourself.</p>
<p>I posted a while ago <a href="http://blog.justswell.org/empowering-swelljs-adopters-with-cdn-technology/" target="_self">about CDN technology</a> allowing anyone to start using Swell while linking it on a Content Delivery Network, meaning visitors will always get the library from the closest point, and as the first milestone has been reached, I guess it&#8217;s time to do a little introduction on the way <strong>you</strong> will be able to make Swell-enabled applications.</p>
<p>At first, you need to determine which component you need. If you try to implement one of the examples in previous or future posts, you can get this information from the code snippet itself.</p>
<p>In our case, let&#8217;s say we want to use <em>setStyle()</em> to change our page&#8217;s background color. We want it black, the reason is irrelevant.</p>
<p>This will get our background black:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">body</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">setStyle</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>backgroundColor <span style="color: #339933;">:</span> <span style="color: #3366CC;">'#000'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>As <em>setStyle()</em> is part of the <em>Core.Element</em> Swell library, we&#8217;ll need it, but also its dependencies. &#8220;Core.Element&#8221; requires &#8220;Core.Hashtable&#8221; which requires &#8220;Core.CustomEvent&#8221; which requires &#8220;Core.Core&#8221;, who are all requiring the &#8220;Swell&#8221; namespace itself.<br />
Dependencies are a pain, so we&#8217;ll just ignore them and include &#8220;Element&#8221; (<em>Core.Element</em>&#8216;s alias name). The server-side system will automatically include everything we need in a very convenient way.</p>
<p><a href="http://get.swl.fr/1.0/Element.js" target="_blank">http://get.swl.fr/1.0/Element.js</a></p>
<p>Yep, that&#8217;s all. With this URL, I&#8217;ll include the Element lib from Swell, with all its dependencies, from the &#8220;1.0&#8243; stable branch. If you feel adventurous, you can replace &#8220;1.0&#8243; with &#8220;trunk&#8221; and get bleeding edge code.</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://get.swl.fr/1.0/Element.js&quot;</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">script</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;text/javascript&quot;</span>&gt;</span>
$(document.body).setStyle({backgroundColor : '#000'});
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">script</span>&gt;</span></pre></div></div>

<p>Looks simple, try it too!</p>
<p>Finally, you might want to include more than one library. This is also possible, and is really easy. Let&#8217;s say we want Ajax and Event too, the URL would become: <a href="http://get.swl.fr/1.0/Element/Ajax/Event.js" target="_blank">http://get.swl.fr/1.0/Element/Ajax/Event.js</a>. The (obvious) goal is to include everything you need without including tons of different files.</p>
<p>Just a final note: using Swell only to change your page&#8217;s background color is called overkill. Try out the other examples on the blog and start building rich web applications!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/lets-start-using-swell/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Swell&#8217;s current progress overview</title>
		<link>http://blog.justswell.org/swells-current-progress-overview/</link>
		<comments>http://blog.justswell.org/swells-current-progress-overview/#comments</comments>
		<pubDate>Tue, 05 May 2009 21:48:24 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Swell]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=174</guid>
		<description><![CDATA[We have recently completed the first milestone labelled under &#8220;alpha&#8221;, this first version is basically the framework itself, composed of: Core, which contains the whole OOP logic including mixins, inheritance and the basic methods; Browser, something you may need if you have no other choice but to rely on the user agent for building your [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img class="aligncenter size-full wp-image-201" title="1dotzero" src="http://blog.justswell.org/wp-content/uploads/2009/05/1dotzero.png" alt="1dotzero" width="158" height="68" /></p>
<p>We have recently completed the <a href="http://trac.justswell.org/milestone/(Core)%20Alpha">first milestone</a> labelled under &#8220;alpha&#8221;, this first version is basically the framework itself, composed of:</p>
<ul>
<li><span style="color: #008000;">Core</span>, which contains the whole OOP logic including mixins, inheritance and the basic methods;</li>
<li><span style="color: #008000;">Browser</span>, something you may need if you have no other choice but to rely on the user agent for building your application;
<ul>
<li><span style="color: #808080;">ran at load, this component identifies the browser family (trident, gecko, webkit, presto) and their version, the operating system, and if the site is accessed from a mobile device; every information is provided in multiple manners allowing boolean checks, or <em>switch case dancing</em>.</span></li>
</ul>
</li>
<li><span style="color: #008000;">Event</span>, splitted in three categories:
<ul>
<li><span style="color: #888888;">Event.js, provides a complete set of methods for Event manipulation in a cross-browser manner</span></li>
<li><span style="color: #888888;">CustomEvent.js, its name is self-explanatory: this class enables the use of custom events using the Dom Level 3 implementation when possible;</span></li>
<li><span style="color: #888888;">KeyListener.js, easy-to-use key listening abstraction for every class-A browser (including the troublemakers Opera and IE).</span></li>
</ul>
</li>
<li><span style="color: #008000;">Ajax</span>, ease the xhr process by providing a simple yet powerful API, a few highlights:
<ul>
<li> <span style="color: #888888;">headers manipulation;</span></li>
<li><span style="color: #888888;">form serialization;</span></li>
<li><span style="color: #888888;">asynchronous file upload;</span></li>
<li><span style="color: #888888;">automated JSON parsing when the X-JSON header is spotted, using native JSON methods when available.</span></li>
</ul>
</li>
<li><span style="color: #008000;">Hashtable</span>, provides advanced key/value manipulation;</li>
<li><span style="color: #008000;">Asset</span>, provides asynchronous loading for IMG/CSS/JS/JSONP components;</li>
<li><span style="color: #008000;">Element</span>, the component which ties together numerous of the aforementionned components and ease their usage:
<ul>
<li><span style="color: #888888;">automated batch process, you may use one or more elements in a single instance and then call a method which will be executed on each element of the stack, this modus operandi drops drastically the line count;</span></li>
<li><span style="color: #888888;">the html builder, enables simple yet powerful element creation with hierarchy, events, custom attributes&#8230;</span></li>
</ul>
</li>
</ul>
<p>Well, that&#8217;s about all, to be honest we are frankly amazed by the work we&#8217;ve done so far in three months, although we were working/brainstorming on our spare-time we still managed to deliver the alpha two weeks before the estimated time with two extras (Asset/Hashtable weren&#8217;t planned for the alpha).</p>
<h2 style="padding-top:10px;">So, what&#8217;s coming?</h2>
<p>And we&#8217;re already working on the beta, the <a href="http://trac.justswell.org/milestone/(Core)%20Beta">second milestone</a> estimated time is in six weeks, and includes:</p>
<ul>
<li><span style="color: #008000;">Position</span>, everything about position, size, areas&#8230; done; we&#8217;ll add some extra methods in there given enough time;</li>
<li> <span style="color: #008000;">Drag &amp; Drop</span>, currently in brainstorming state, we plan on using the Firefox 3.5 HTML5 DD native API and simulate on the others (Trident/Webkit APIs are not really convincing);</li>
<li> <span style="color: #008000;">Effects library</span>, obviously necessary, as people tend to like what&#8217;s sparkling (and we do!);</li>
<li> <span style="color: #008000;">History manager</span>, a prerequisite for the RC (tabs and therefore, the feedreader application);</li>
<li> <span style="color: #008000;">XML library</span>, also a prerequisite, but we may finally not need it&#8230; wait &amp; see!</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/swells-current-progress-overview/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Dazzling performance with JSONP and Swell</title>
		<link>http://blog.justswell.org/dazzling-performance-with-jsonp-and-swell/</link>
		<comments>http://blog.justswell.org/dazzling-performance-with-jsonp-and-swell/#comments</comments>
		<pubDate>Mon, 27 Apr 2009 15:42:23 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Swell]]></category>
		<category><![CDATA[json webservices]]></category>
		<category><![CDATA[jsonp]]></category>
		<category><![CDATA[lazyloading]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=154</guid>
		<description><![CDATA[For an upcoming work we figured it would be useful to add JSONP support in our Asset component in order to load the given URL and once loaded, passback the JSON to a handler with the content. What&#8217;s interesting with this approach is that we don&#8217;t rely on any hack to get the response such [...]]]></description>
			<content:encoded><![CDATA[<p>For an upcoming work we figured it would be useful to add JSONP support in our Asset component in order to load the given URL and once loaded, passback the JSON to a handler with the content.</p>
<p>What&#8217;s interesting with this approach is that we don&#8217;t rely on any hack to get the response such as evaluating all the script files in head or loading the content asynchronously then appending it.</p>
<p>There are numerous advantages using our solution :</p>
<ul>
<li>You can load the JSON from multiple sources but keep a single handler, each JSONP file processed will be passed back as an argument</li>
<li>You can have a single handler for the whole sequence or listen events of each JSONP file being loaded with CustomEvents</li>
<li>The tags are removed from the DOM once loaded, this avoid memleaks or JSONP collision</li>
<li>This approach is robust and works equally between browsers even on old ones like MSIE 5.5</li>
</ul>
<p>here&#8217;s a little example of what can be done:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">Asset</span>.<span style="color: #660066;">load</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'jsonp'</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#91;</span>
    <span style="color: #3366CC;">'http://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&amp;query=rideback&amp;output=json&amp;callback='</span><span style="color: #339933;">,</span>
    <span style="color: #3366CC;">'http://search.yahooapis.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&amp;query=saintseiya&amp;output=json&amp;callback='</span>
<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> _n <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> _n <span style="color: #339933;">&lt;</span> arguments.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> _n<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> yim <span style="color: #339933;">=</span> arguments<span style="color: #009900;">&#91;</span>_n<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> _i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> _im<span style="color: #339933;">;</span> _im <span style="color: #339933;">=</span> yim.<span style="color: #660066;">ResultSet</span>.<span style="color: #660066;">Result</span><span style="color: #009900;">&#91;</span>_i<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            html.<span style="color: #660066;">img</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
                <span style="color: #3366CC;">'src'</span>   <span style="color: #339933;">:</span> _im.<span style="color: #660066;">Thumbnail</span>.<span style="color: #660066;">Url</span><span style="color: #339933;">,</span>
                <span style="color: #3366CC;">'alt'</span>   <span style="color: #339933;">:</span> _im.<span style="color: #660066;">Title</span><span style="color: #339933;">,</span>
                <span style="color: #3366CC;">'title'</span> <span style="color: #339933;">:</span> _im.<span style="color: #660066;">Title</span><span style="color: #339933;">,</span>
                <span style="color: #3366CC;">'width'</span> <span style="color: #339933;">:</span> _im.<span style="color: #660066;">Thumbnail</span>.<span style="color: #660066;">Width</span><span style="color: #339933;">,</span>
                <span style="color: #3366CC;">'height'</span><span style="color: #339933;">:</span> _im.<span style="color: #660066;">Thumbnail</span>.<span style="color: #660066;">Height</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">appendTo</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'receiver'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/dazzling-performance-with-jsonp-and-swell/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Introducing Swell&#8217;s lazy loader utility</title>
		<link>http://blog.justswell.org/introducing-swells-lazy-loader-utility/</link>
		<comments>http://blog.justswell.org/introducing-swells-lazy-loader-utility/#comments</comments>
		<pubDate>Fri, 10 Apr 2009 13:23:02 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Swell]]></category>
		<category><![CDATA[lazy load css]]></category>
		<category><![CDATA[lazy load script]]></category>
		<category><![CDATA[lazyloading]]></category>
		<category><![CDATA[ondemand css]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=137</guid>
		<description><![CDATA[As we are preparing the upcoming release of Swell, we are actively working on a true and efficient dependency management system, and one of the key feature of the dependency manager is the ability to grab resources once the page is loaded. Swell&#8217;s Core should be the only resource you would ever need to get [...]]]></description>
			<content:encoded><![CDATA[<p>As we are preparing the upcoming release of Swell, we are actively working on a true and efficient dependency management system, and one of the key feature of the dependency manager is the ability to grab resources once the page is loaded.</p>
<p>Swell&#8217;s Core should be the only resource you would ever need to get started,  it is not an understatement to say that we&#8217;ll lose adopters if the system is too hard to build.<br />
Every component should be able to load its own UI definition, I mean being able to lazy load any css or  image resource it needs.</p>
<p>Separation of concerns will help us to build a better library,  that&#8217;s the way it should be, that&#8217;s the way we are !</p>
<p>We have looked at the various javascript lazyloading implementations on the web, some are interesting and well-minded, some others are just bloated.</p>
<h2 style="margin:20px 0;">Keep it simple stupid!</h2>
<p>Our lazy loading implementation is able to load and monitor script, css and image resources,  for example you want to use the Element component in your page and then want to use it when available into the global scope.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/** For a single script file without callback */</span>
Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">Asset</span>.<span style="color: #660066;">load</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Core/Element.js'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009966; font-style: italic;">/** For multiple script files with a callback when all resources are loaded */</span>
Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">Asset</span>.<span style="color: #660066;">load</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'script'</span><span style="color: #339933;">,</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'Core/Element.js'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'Core/Hashtable.js'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'foo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'meh'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009966; font-style: italic;">/** Custom event when a single file is loaded */</span>
Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">Asset</span>.<span style="color: #660066;">onResourceLoaded</span>.<span style="color: #660066;">subscribe</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>type<span style="color: #339933;">,</span> res<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>type <span style="color: #339933;">===</span> <span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// Do something</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009966; font-style: italic;">/** Advanced example */</span>
<span style="color: #003366; font-weight: bold;">var</span> _imgs <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">body</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getByClassName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'swell-image-asset'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'img'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">setAttribute</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'src'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">'blank.png'</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
    .<span style="color: #660066;">addEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'mouseover'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'loading'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">Asset</span>.<span style="color: #660066;">load</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'img'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'largeimage.jpg'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>collection<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> _i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> _i <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> collection.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> _i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">setAttribute</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span><span style="color: #3366CC;">'src'</span> <span style="color: #339933;">:</span> collection<span style="color: #009900;">&#91;</span>_i<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">src</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                collection<span style="color: #009900;">&#91;</span>_i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Have fun !</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/introducing-swells-lazy-loader-utility/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Ajax: Form Serialization</title>
		<link>http://blog.justswell.org/ajax-form-serialization/</link>
		<comments>http://blog.justswell.org/ajax-form-serialization/#comments</comments>
		<pubDate>Sun, 05 Apr 2009 11:26:29 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Swell]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[form]]></category>
		<category><![CDATA[JSON]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=121</guid>
		<description><![CDATA[When using Ajax to submit a form, you&#8217;ll have to attach as args the input fields name/value combination; this task can be very boring, especially if your form takes three pages&#8230; This is where the form serialization feature strikes, by simply specifying the form(s) name to your XHR handle, the serializer will parse through your [...]]]></description>
			<content:encoded><![CDATA[<p>When using Ajax to submit a form, you&#8217;ll have to attach as args the input fields name/value combination; this task can be very boring, especially if your form takes three pages&#8230;<br />
This is where the form serialization feature strikes, by simply specifying the form(s) name to your XHR handle, the serializer will parse through your form and assemble each content input field into an object that&#8217;ll be passed automatically to your request.</p>
<p>We made a choice that come very handy in our case, every serialized form is returned in a global object and once requested, &#8220;stringified&#8221;.<br />
Why using JSON?<br />
In some case, let&#8217;s say&#8230; in &#8220;multiples select&#8221;, we can come up with multiple values, and when using GET you&#8217;ll definitely do something like <em>key=val</em>, with multiple values, <em>key[]=val</em>, but how much server-side languages can handle this kind of GET property? not much&#8230; whereas much languages are now able to unserialize JSON.</p>
<p>PHP is able to &#8220;decipher&#8221; passed arrays in GET, but what about the others languages? If there&#8217;s Java/Ruby/ASP.NET folks out there, we would like to hear from you!</p>
<h2 style="padding-top:10px;">XHR in Element</h2>
<p>In order to save both time and lines, it was quite interesting to think of a way to implement XHR in our Element class, take a look at these working drafts:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// well, let's say we have two forms</span>
<span style="color: #003366; font-weight: bold;">var</span> forms <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'foo'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'bar'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// will send them separately asychronously</span>
forms.<span style="color: #660066;">xhr</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// this time we want to harmonize their form[method] value</span>
forms.<span style="color: #660066;">xhr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'POST'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// or their form[action] value</span>
forms.<span style="color: #660066;">xhr</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'foo.php'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// two concurrent ajax request is somehow too much, we'd better merge them!</span>
forms.<span style="color: #660066;">xhr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'POST'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'foo.php'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/ajax-form-serialization/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Cross browser key event handling with Javascript and Swell</title>
		<link>http://blog.justswell.org/key-event-handling-with-javascript/</link>
		<comments>http://blog.justswell.org/key-event-handling-with-javascript/#comments</comments>
		<pubDate>Tue, 31 Mar 2009 13:04:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Event]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Swell]]></category>
		<category><![CDATA[crossbrowser]]></category>
		<category><![CDATA[key handling]]></category>
		<category><![CDATA[keyboard events]]></category>
		<category><![CDATA[keyboard listener]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=115</guid>
		<description><![CDATA[Handling keyboard events with Javascript is an extremely difficult task considering each browser discrepancies. One guy compiled all the differences into a single page that he adequately called &#8220;Javascript madness :  Keyboard events&#8220;, and from there you can clearly see the real madness Of course we have directly experienced the aforementioned problems and found out [...]]]></description>
			<content:encoded><![CDATA[<p>Handling keyboard events with Javascript is an extremely difficult task considering each browser discrepancies.</p>
<p>One guy compiled all the differences into a single page that he adequately called &#8220;<a href="http://unixpapa.com/js/key.html" target="_blank">Javascript madness :  Keyboard events</a>&#8220;, and from there you can clearly see the real madness <img src='http://blog.justswell.org/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<p>Of course we have directly experienced the aforementioned problems and found out pretty smart solutions for almost any browser.</p>
<p>The two major headaches were IE not firing keypress event on specific keys and Opera not able to prevent default behavior of keydown event.</p>
<h3>HTMLEvents magic or how to fix messy browser implementation</h3>
<p>The special keys encompass all the keys that don&#8217;t cause a character to appear, but execute a certain function.  Among these keys we can find shift, escape, pageDown, enter and so on.</p>
<p><strong>Some general caveats (courtesy of quirksmode) :</strong></p>
<ul>
<li>IE doesn&#8217;t fire the keypress event for delete, end, enter, escape, function keys, home, insert, pageUp/Down and tab.</li>
<li>Onkeypress, Safari gives weird keyCode values in the 63200 range for delete, end, function keys, home and pageUp.Down. The  onkeydown and -up values are normal.</li>
<li>Alt, Cmd, Ctrl and Shift cannot be detected on Mac, except in Opera. However, you can always use the altKey,    ctrlKey, and shiftKey properties.</li>
</ul>
<p>For getting rid of this weird behavior we are capturing special keys on keydown and use a static property to hold the keyname (keymapper) and keycode that we use when keypress event is fired.</p>
<p>As we didn&#8217;t want to hack our code too much we just simulate the keypress event on IE when the unsupported special keys are pressed.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// Check if keypressed is a special key</span>
_specialKeyName <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">getSpecialKeyName</span><span style="color: #009900;">&#40;</span>e.<span style="color: #660066;">getKeyCode</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>_specialKeyName<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">this</span>._specialKey <span style="color: #339933;">=</span> _specialKeyName<span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">this</span>._keyCode    <span style="color: #339933;">=</span>  e.<span style="color: #660066;">getKeyCode</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #006600; font-style: italic;">// This is a special key, we know that IE will not fire</span>
    <span style="color: #006600; font-style: italic;">// keypress event, we'll do it for him :D</span>
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">Browser</span>.<span style="color: #660066;">isIE</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">simulate</span><span style="color: #009900;">&#40;</span>o<span style="color: #339933;">,</span> <span style="color: #3366CC;">'keypress'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">/**
 * Fires programmatically a native DOM event
 * @function simulate
 *
 * @param {String|HTMLElement|Array} o the object to assign the handler to
 * @param {String} type event type : click, change, keypress, etc, never prepend &quot;on&quot; keyword as Swell does this job for you
 *
 * @see https://developer.mozilla.org/en/DOM/element.dispatchEvent
 * @see http://msdn.microsoft.com/en-us/library/ms536390(VS.85).aspx
*/</span>
simulate <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>o<span style="color: #339933;">,</span> e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> _event<span style="color: #339933;">;</span>
    <span style="color: #006600; font-style: italic;">// Testing if o is an object or a string</span>
    <span style="color: #006600; font-style: italic;">// add is just dealing with DOM events, and is not meant to</span>
    <span style="color: #006600; font-style: italic;">// handle custom events of Swell Objects</span>
    <span style="color: #006600; font-style: italic;">// as Swell.Core.Dom is not part of the core distribution &amp;lt;~20K :D</span>
    <span style="color: #006600; font-style: italic;">// We will use the good old document.getElementById for element retrieval</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">isString</span><span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        o <span style="color: #339933;">=</span> _getById<span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">isArray</span><span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// Loop on function</span>
        <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> n <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> n <span style="color: #339933;">&amp;</span>lt<span style="color: #339933;">;</span> o.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> n<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">simulate</span><span style="color: #009900;">&#40;</span>o<span style="color: #009900;">&#91;</span>n<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> e<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
        o <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>o<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">createEventObject</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">// IE</span>
        _event <span style="color: #339933;">=</span> document.<span style="color: #660066;">createEventObject</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">return</span> o.<span style="color: #660066;">fireEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'on'</span> <span style="color: #339933;">+</span> e<span style="color: #339933;">,</span> _event<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #006600; font-style: italic;">// All other browsers</span>
        _event <span style="color: #339933;">=</span> document.<span style="color: #660066;">createEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'HTMLEvents'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        _event.<span style="color: #660066;">initEvent</span><span style="color: #009900;">&#40;</span>e<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//event type,bubbling,cancellable</span>
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #339933;">!</span>o.<span style="color: #660066;">dispatchEvent</span><span style="color: #009900;">&#40;</span>_event<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/key-event-handling-with-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Empowering SwellJS adopters with CDN technology</title>
		<link>http://blog.justswell.org/empowering-swelljs-adopters-with-cdn-technology/</link>
		<comments>http://blog.justswell.org/empowering-swelljs-adopters-with-cdn-technology/#comments</comments>
		<pubDate>Tue, 24 Mar 2009 10:39:25 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Swell]]></category>
		<category><![CDATA[CDN]]></category>
		<category><![CDATA[Swell Installation]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=111</guid>
		<description><![CDATA[One of our objectives is to make usage of SwellJS easy in order to maximize its adoption. Usually one of the major drawbacks is the installation. Most software you want to use on your website will require you to download it, extract it, upload it, and keep it up to date. One of the best [...]]]></description>
			<content:encoded><![CDATA[<p>One of our objectives is to make usage of SwellJS easy in order to maximize its adoption. Usually one of the major drawbacks is the installation.<br />
Most software you want to use on your website will require you to download it, extract it, upload it, and keep it up to date.</p>
<p>One of the best ways we found on SwellJS to reduce installation hassle is to remove the installation process. We will instead provide the library via a CDN.</p>
<p>So, what will a &#8220;CDN&#8221; do, and how does it helps to avoid installation of the SwellJS library?</p>
<p><span id="more-111"></span>A Content Delivery Network (CDN) is an architecture designed to make content available to anyone as fast as possible. This means that someone accessing a file on a CDN from New York will get it from a server located in New York, while someone accessing the same file from Tōkyō will get it from a server located in Tōkyō.</p>
<p>This will allow us to provide SwellJS by directly hosting it ourselves, without having to worry about the fact that it might make websites hosted in other countries than our own slower. This also means that when you use SwellJS via this method, someone accessing your website from a different country will load the SwellJS library faster than your own website.</p>
<p>We also have plans to optimize lazy loading of SwellJS components, effectively reducing number of HTTP queries required to make a page work.</p>
<p>Finally, SwellJS assets will also be available via CDN, meaning that a full-swell website will usually be faster than the same hosted directly.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/empowering-swelljs-adopters-with-cdn-technology/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Restrict field input with Javascript and Swell</title>
		<link>http://blog.justswell.org/restrict-field-input-javascript-swell/</link>
		<comments>http://blog.justswell.org/restrict-field-input-javascript-swell/#comments</comments>
		<pubDate>Fri, 20 Mar 2009 14:07:36 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Swell]]></category>
		<category><![CDATA[block chars]]></category>
		<category><![CDATA[restrict field input]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=107</guid>
		<description><![CDATA[Today, we are delivering the first page to play around with Swell and we are quite happy of the result. We wanted to show how easy it is to restrict the characters typed in form fields. By using the universal selector (*) built-in Swell&#8217;s Event library, you can catch any keystroke and of course retrieve [...]]]></description>
			<content:encoded><![CDATA[<p>Today, we are delivering the first page to play around with Swell and we are quite happy of the result. We wanted to show how easy it is to restrict the characters typed in form fields.</p>
<p>By using the universal selector (*) built-in Swell&#8217;s Event library, you can catch any keystroke and of course retrieve its text representation  in your event handler !</p>
<p>Be careful the code behind the Event library is still in early Alpha stage and far from being production ready, have fun !</p>
<p><a href="http://playground.justswell.org/restrictedinput.php" target="_blank">Restrict input chars playground page</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/restrict-field-input-javascript-swell/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Cross-browser getStyle with ease</title>
		<link>http://blog.justswell.org/almighty-element-for-all-your-dom-needs/</link>
		<comments>http://blog.justswell.org/almighty-element-for-all-your-dom-needs/#comments</comments>
		<pubDate>Tue, 17 Mar 2009 17:16:57 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Swell]]></category>
		<category><![CDATA[element]]></category>
		<category><![CDATA[style]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=77</guid>
		<description><![CDATA[As Element is one of the most important components, we wanted to be able to manipulate DOM, CSS and everything related to content manipulation. Our main goal is to make the user write a minimum of code while keeping the smallest codebase possible (yes, we are DRY hard fervents). To achieve this challenging goal, we [...]]]></description>
			<content:encoded><![CDATA[<p>As Element is one of the most important components, we wanted to be able to manipulate DOM, CSS and everything related to content manipulation. Our main goal is to make the user write a minimum of code while keeping the smallest codebase possible (yes, we are DRY hard fervents).</p>
<p>To achieve this challenging goal, we made a batch system that allows us to run a specific function without modifying it several times over given arguments.</p>
<p>So, to put it in a more comprehensive manner, by simply writing this snippet of code:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">foo<span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> _fn <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>arg<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">domEl</span>.<span style="color: #660066;">id</span> <span style="color: #339933;">+</span> arg<span style="color: #339933;">+</span> <span style="color: #3366CC;">'bar'</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">return</span> _delegate.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> _fn<span style="color: #339933;">,</span> arguments<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>If you execute <span style="color: #008000;">$(&#8216;foo&#8217;, &#8216;bar&#8217;, &#8216;baz&#8217;).foo(&#8216;baz&#8217;);</span> you&#8217;ll get<span style="color: #008000;"> ['foobazbar', 'barbazbar', 'bazbazbar']<span style="color: #000000;">.<br />
The <span style="color: #008000;">_delegate</span> method loops through the internal elements stack and executes on each element the given <span style="color: #008000;">_fn</span>.</span></span><br/><br/></p>
<h2 style="margin-bottom:20px;padding:0;">getStyle at work</h2>
<p>Another thing worth mentioning is the normalization process done backwards by getStyle, as properties may differ between browsers, which one should we choose? currentStyle or getComputedStyle? usually you would use chained if statements to address each possibility.</p>
<p>This is where our approach clearly gives better results by keeping trace of native properties  (e.g. under currentStyle &#8220;float&#8221; would be &#8220;styleFloat&#8221;, and getComputedStyle, &#8220;cssFloat&#8221;) as well as providing an abstraction layer for getting/setting values.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> _styleExceptions <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #3366CC;">'CURRENT_STYLE'</span> <span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #3366CC;">'float'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">'styleFloat'</span><span style="color: #339933;">,</span>
        <span style="color: #3366CC;">'opacity'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">'filter'</span><span style="color: #339933;">,</span>
        <span style="color: #3366CC;">'border'</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">null</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    <span style="color: #3366CC;">'DEFAULT_VIEW'</span>  <span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #3366CC;">'float'</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">'cssFloat'</span><span style="color: #339933;">,</span>
        <span style="color: #3366CC;">'border'</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">null</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
getStyle <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> _fn <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>style<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">var</span> _method <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>._domEl.<span style="color: #660066;">currentStyle</span> <span style="color: #339933;">?</span> <span style="color: #009900;">&#123;</span> o <span style="color: #339933;">:</span> <span style="color: #000066; font-weight: bold;">this</span>._domEl.<span style="color: #660066;">currentStyle</span><span style="color: #339933;">,</span> type <span style="color: #339933;">:</span> <span style="color: #3366CC;">'CURRENT_STYLE'</span> <span style="color: #009900;">&#125;</span> <span style="color: #339933;">:</span> <span style="color: #009900;">&#123;</span> o <span style="color: #339933;">:</span> document.<span style="color: #660066;">defaultView</span>.<span style="color: #660066;">getComputedStyle</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>._domEl<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> type <span style="color: #339933;">:</span> <span style="color: #3366CC;">'DEFAULT_VIEW'</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">var</span> _exceptions <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">Hashtable</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">inject</span><span style="color: #009900;">&#40;</span>_styleExceptions<span style="color: #009900;">&#91;</span>_method.<span style="color: #660066;">type</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        _exceptions.<span style="color: #660066;">defineGetter</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> val<span style="color: #339933;">,</span> arg<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> _oStyle <span style="color: #339933;">=</span> arg.<span style="color: #660066;">o</span><span style="color: #339933;">,</span>
                _isCurrentStyle <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>arg.<span style="color: #660066;">type</span> <span style="color: #339933;">===</span> <span style="color: #3366CC;">'CURRENT_STYLE'</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> <span style="color: #003366; font-weight: bold;">true</span> <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">switch</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'opacity'</span><span style="color: #339933;">:</span>
                    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>_isCurrentStyle<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009966; font-style: italic;">/opacity\s?=\s?([0-9]+)/</span>.<span style="color: #660066;">exec</span><span style="color: #009900;">&#40;</span>_oStyle<span style="color: #009900;">&#91;</span>val<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">/</span><span style="color: #CC0000;">100</span><span style="color: #339933;">;</span>
                    <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">case</span> <span style="color: #3366CC;">'border'</span><span style="color: #339933;">:</span>
                    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#91;</span>_oStyle<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'borderTopWidth'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> _oStyle<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'borderRightWidth'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> _oStyle<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'borderBottomWidth'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> _oStyle<span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'borderLeftWidth'</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                <span style="color: #003366; font-weight: bold;">default</span><span style="color: #339933;">:</span>
                    <span style="color: #000066; font-weight: bold;">return</span> _oStyle<span style="color: #009900;">&#91;</span>val<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> _method<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>_exceptions.<span style="color: #660066;">exists</span><span style="color: #009900;">&#40;</span>style<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000066; font-weight: bold;">return</span> _exceptions.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span>style<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">return</span> _method.<span style="color: #660066;">o</span><span style="color: #009900;">&#91;</span>style<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #000066; font-weight: bold;">return</span> _delegate.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">,</span> _fn<span style="color: #339933;">,</span> arguments<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>For example retrieving the opacity value without worrying about the browser.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">    &lt;div id=&quot;foo&quot; style=&quot;filter:alpha(opacity=50);&quot;&gt;&lt;/div&gt;
    <span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'foo'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getStyle</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'opacity'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// returns 0.5</span>
    <span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/almighty-element-for-all-your-dom-needs/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Painless publish/subscribe system with swell&#8217;s custom events</title>
		<link>http://blog.justswell.org/painless-publishsubscribe-system-with-swells-custom-events/</link>
		<comments>http://blog.justswell.org/painless-publishsubscribe-system-with-swells-custom-events/#comments</comments>
		<pubDate>Fri, 13 Mar 2009 16:21:04 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Swell]]></category>
		<category><![CDATA[Custom event]]></category>
		<category><![CDATA[Events]]></category>
		<category><![CDATA[Publish/subscribe pattern]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=58</guid>
		<description><![CDATA[Let me start with wikipedia&#8217;s own publish/subscribe pattern definition : Publish/subscribe (or pub/sub) is an asynchronous messaging paradigm where senders (publishers) of messages are not programmed to send their messages to specific receivers (subscribers). This decoupling of publishers and subscribers can allow for greater scalability&#8230; We absolutely wanted to have this pattern implemented into Swell [...]]]></description>
			<content:encoded><![CDATA[<p>Let me start with wikipedia&#8217;s own publish/subscribe pattern definition : Publish/subscribe (or pub/sub) is an asynchronous messaging paradigm where senders (publishers) of messages are not programmed to send their messages to specific receivers (subscribers). This decoupling of publishers and subscribers can allow for greater scalability&#8230;  We absolutely wanted to have this pattern implemented into Swell as we are fervent supporters of the SoC. The goal was to be able to hook the Custom event model to potentially any class as well as using custom events outside of a class context.</p>
<h3>Custom event model</h3>
<p>By inheriting the CustomEventModel class built-into swell, the children class is augmented with new methods and collections brought from the model.  Example :</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">    Swell.<span style="color: #660066;">Core</span>.<span style="color: #003366; font-weight: bold;">Class</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
        <span style="color: #000066;">name</span>        <span style="color: #339933;">:</span> <span style="color: #3366CC;">'Hashtable'</span><span style="color: #339933;">,</span>
        <span style="color: #003366; font-weight: bold;">namespace</span>   <span style="color: #339933;">:</span> <span style="color: #3366CC;">'Swell.Core'</span><span style="color: #339933;">,</span>
        inherits    <span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">Enumerable</span><span style="color: #339933;">,</span> Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">CustomEventModel</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
        ...</pre></div></div>

<p>Swell.Core.Hashtable class now have those methods :</p>
<ul>
<li><span style="color: #008000;"><strong>createEvent</strong></span><em><span style="color: #008000;"> </span><span style="color: #808080;">(creates a custom event that is bound to the class ex : onHashUpdated)</span></em></li>
<li><span style="color: #008000;"><strong>fireEvent</strong></span><em><span style="color: #008000;"><strong> </strong></span><span style="color: #808080;">(fires desired event and will notice all the subscribers aka execute callback functions)</span></em></li>
<li><span style="color: #008000;"><strong>subscribe</strong> </span><em><span style="color: #808080;">(subscribe to a custom event of the class from/outside the class)</span></em></li>
<li><span style="color: #008000;"><strong>unsubscribe</strong></span></li>
<li><span style="color: #008000;"><strong>getEvents</strong></span></li>
</ul>
<p>In the hashtable code, we use custom events to update a static property containing the length.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> _initEvents <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">/**
      * Initialization of the event
      * @event onChange fires when an item is added/updated in the hashtable
    */</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">createEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'onHashUpdated'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">subscribe</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'onHashUpdated'</span><span style="color: #339933;">,</span> _updateLength<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">//_updateLength is a private function of the class</span>
<span style="color: #009900;">&#125;</span>
...
<span style="color: #006600; font-style: italic;">/**
 * Now triggering the event
*/</span>
set <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> value<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>arguments.<span style="color: #660066;">length</span> <span style="color: #339933;">===</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        _hash<span style="color: #009900;">&#91;</span>Swell.<span style="color: #660066;">uniqueId</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> key<span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
        _hash<span style="color: #009900;">&#91;</span>key<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> value<span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">fireEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'onHashUpdated'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
...</pre></div></div>

<h3>Standalone custom events</h3>
<p>This is the simplest way of using the custom event system.<br />
In the example below we have created a basic object called button that makes use of custom events.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> button <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> value <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">setValue</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>val<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        value <span style="color: #339933;">=</span> val<span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">onValueChange</span>.<span style="color: #660066;">fire</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">onValueChange</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">CustomEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'onValueChange'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> handler <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #000066;">alert</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'button value has changed'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">var</span> btn <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> button<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
btn.<span style="color: #660066;">onValueChange</span>.<span style="color: #660066;">subscribe</span><span style="color: #009900;">&#40;</span>handler<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
btn.<span style="color: #660066;">setValue</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'toto'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>And the firebug DOM :</p>
<div id="attachment_70" class="wp-caption aligncenter" style="width: 580px"><img class="size-full wp-image-70" title="Firebug DOM" src="http://blog.justswell.org/wp-content/uploads/2009/03/btn.png" alt="Firebug DOM" width="570" height="237" /><p class="wp-caption-text">Firebug DOM</p></div>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/painless-publishsubscribe-system-with-swells-custom-events/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>A simple yet versatile hashtable with swell</title>
		<link>http://blog.justswell.org/a-simple-yet-versatile-hashtable-with-swell/</link>
		<comments>http://blog.justswell.org/a-simple-yet-versatile-hashtable-with-swell/#comments</comments>
		<pubDate>Tue, 10 Mar 2009 16:57:20 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Swell]]></category>
		<category><![CDATA[class]]></category>
		<category><![CDATA[hashtable]]></category>
		<category><![CDATA[objects as hashtable]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=46</guid>
		<description><![CDATA[Today we wanted to feature the hashtable object used internally by the core components and/or widgets in Swell. At first don &#8216;t get me wrong, objects used as hash-tables  is to date the most convenient way of storing static properties associated to a key, I just complain that it&#8217;s sometimes (not always) missing features you [...]]]></description>
			<content:encoded><![CDATA[<p>Today we wanted to feature the hashtable object used internally by the core components and/or widgets in Swell.</p>
<p>At first don &#8216;t get me wrong, objects used as hash-tables  is to date the most convenient way of storing static properties associated to a key, I just complain that it&#8217;s sometimes (not always) missing features you would find in other languages such as PHP.</p>
<p>Here&#8217;s the code :</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Swell.<span style="color: #660066;">Core</span>.<span style="color: #003366; font-weight: bold;">Class</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #000066;">name</span>        <span style="color: #339933;">:</span> <span style="color: #3366CC;">'Hashtable'</span><span style="color: #339933;">,</span>
    <span style="color: #003366; font-weight: bold;">namespace</span>   <span style="color: #339933;">:</span> <span style="color: #3366CC;">'Swell.Core'</span><span style="color: #339933;">,</span>
    inherits    <span style="color: #339933;">:</span> <span style="color: #009900;">&#91;</span>Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">Enumerable</span><span style="color: #339933;">,</span> Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">CustomEventModel</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span>
    functions   <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">var</span> _hash <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
        <span style="color: #003366; font-weight: bold;">var</span> _updateLength <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #003366; font-weight: bold;">var</span> _l <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> _n<span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>_hash.__count__<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">=</span> _hash.__count__<span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>_n <span style="color: #000066; font-weight: bold;">in</span> _hash<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    _l<span style="color: #339933;">++;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">length</span> <span style="color: #339933;">=</span> _l<span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #003366; font-weight: bold;">var</span> _initEvents <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #006600; font-style: italic;">/**
             * @event onChange fires when an item is added/updated in the hashtable
            */</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">createEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'change'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">subscribe</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'change'</span><span style="color: #339933;">,</span> _updateLength<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
&nbsp;
        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#123;</span>
&nbsp;
            length <span style="color: #339933;">:</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Constructor, initialize enumerable
             *
             * @function construct
             * @constructor
            */</span>
            construct <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">setEnumerable</span><span style="color: #009900;">&#40;</span>_hash<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                _initEvents.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Resets the hashtable
             *
             * @function dispose
            */</span>
            empty <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                _hash <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Add/Update an entry in the hashtable
             *
             * @function set
             * @param {String} key Key name
             * @return {Swell.Core.Hashtable}
            */</span>
            set <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> value<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>arguments.<span style="color: #660066;">length</span> <span style="color: #339933;">===</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    _hash<span style="color: #009900;">&#91;</span>Swell.<span style="color: #660066;">uniqueId</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> key<span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
                    _hash<span style="color: #009900;">&#91;</span>key<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> value<span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">fireEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'change'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Add an entry in the hashtable if the key does not exist
             *
             * @function set
             * @param {String} key Key name
             * @return {Swell.Core.Hashtable}
            */</span>
            add <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> value<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">exists</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">set</span><span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> value<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Update an entry in the hashtable if the key exists
             *
             * @function set
             * @param {String} key Key name
             * @return {Swell.Core.Hashtable}
            */</span>
            update <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> value<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">exists</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">set</span><span style="color: #009900;">&#40;</span>key<span style="color: #339933;">,</span> value<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Get the value of the corresponding key in the hashtable
             *
             * @function get
             * @param {String} key Key name
             * @return {Mixed/Boolean} value
            */</span>
            get <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>_hash.<span style="color: #660066;">hasOwnProperty</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #000066; font-weight: bold;">return</span> _hash<span style="color: #009900;">&#91;</span>key<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Exchanges all keys with their associated values in the hashtable
             *
             * @function flip
             * @return {Swell.Core.Hashtable}
            */</span>
            flip <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #003366; font-weight: bold;">var</span> _k<span style="color: #339933;">,</span> _tmp <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
&nbsp;
                <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span> _k <span style="color: #000066; font-weight: bold;">in</span> _hash <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    _tmp<span style="color: #009900;">&#91;</span>_hash<span style="color: #009900;">&#91;</span>_k<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> _k<span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                _hash <span style="color: #339933;">=</span> _tmp<span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Returns the first item of the hashtable
             *
             * @function first
             * @param {Boolean} [extended] Returns an array with the first item as key and second one as val (optional)
             * @return {Mixed}
            */</span>
            first <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>extended<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> _p <span style="color: #000066; font-weight: bold;">in</span> _hash<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">isUndefined</span><span style="color: #009900;">&#40;</span>extended<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                        <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#91;</span>_p<span style="color: #339933;">,</span> _hash<span style="color: #009900;">&#91;</span>_p<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                    <span style="color: #009900;">&#125;</span>
                    <span style="color: #000066; font-weight: bold;">return</span> _hash<span style="color: #009900;">&#91;</span>_p<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Returns the last item of the hashtable
             *
             * @function last
             * @param {Boolean} [extended] Returns an array with the last item as key and second one as val (optional)
             * @return {Mixed}
            */</span>
            last <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>extended<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #003366; font-weight: bold;">var</span> _lastitem <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> _p <span style="color: #000066; font-weight: bold;">in</span> _hash<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    _lastitem <span style="color: #339933;">=</span> _hash<span style="color: #009900;">&#91;</span>_p<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">isUndefined</span><span style="color: #009900;">&#40;</span>extended<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #009900;">&#91;</span>_p<span style="color: #339933;">,</span> _lastitem<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">return</span> _lastitem<span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Unsets an item from the hashtable
             *
             * @function remove
             * @return {Swell.Core.Hashtable}
            */</span>
            remove <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>_hash.<span style="color: #660066;">hasOwnProperty</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #000066; font-weight: bold;">delete</span> _hash<span style="color: #009900;">&#91;</span>key<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                    <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">fireEvent</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'change'</span><span style="color: #339933;">,</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Applies the callback to the elements of the hashtable
             *
             * @function map
             * @return {Swell.Core.Hashtable}
            */</span>
            map <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>fn<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #003366; font-weight: bold;">var</span> _p<span style="color: #339933;">,</span> _tmp <span style="color: #339933;">=</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">isFunction</span><span style="color: #009900;">&#40;</span>fn<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>_p <span style="color: #000066; font-weight: bold;">in</span> _hash<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                        _tmp<span style="color: #009900;">&#91;</span>_p<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> fn.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span> _hash<span style="color: #009900;">&#91;</span>_p<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #009900;">&#125;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">return</span> _tmp<span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Test if a property exists in the hash table
             *
             * @function exists
             * @return {Boolean}
            */</span>
            exists <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">return</span> _hash.<span style="color: #660066;">hasOwnProperty</span><span style="color: #009900;">&#40;</span>key<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Applies an user function on every member of the hashtable
             *
             * @function walk
             * @return {Swell.Core.Hashtable}
            */</span>
            walk <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>fn<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #003366; font-weight: bold;">var</span> _p<span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">isFunction</span><span style="color: #009900;">&#40;</span>fn<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>_p <span style="color: #000066; font-weight: bold;">in</span> _hash<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                        _hash<span style="color: #009900;">&#91;</span>_p<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> fn.<span style="color: #660066;">call</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span> _hash<span style="color: #009900;">&#91;</span>_p<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #009900;">&#125;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #000066; font-weight: bold;">this</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Returns an array of keys
             *
             * @function keys
             * @return {Mixed[]} keys
            */</span>
            keys <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #003366; font-weight: bold;">var</span> _k<span style="color: #339933;">,</span> _tmp <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>_k <span style="color: #000066; font-weight: bold;">in</span> _hash<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    _tmp.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>_k<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">return</span> _tmp<span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Pop the element off the end of array
             *
             * @function pop
             * @return {Mixed} value of the popped item
            */</span>
            pop <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #003366; font-weight: bold;">var</span> _item <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">last</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">delete</span> _item<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
                <span style="color: #000066; font-weight: bold;">return</span> _item<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Returns an array of values
             *
             * @function values
             * @return {Mixed[]} values
            */</span>
            values <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #003366; font-weight: bold;">var</span> _k<span style="color: #339933;">,</span> _tmp <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>_k <span style="color: #000066; font-weight: bold;">in</span> _hash<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    _tmp.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>_hash<span style="color: #009900;">&#91;</span>_k<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #000066; font-weight: bold;">return</span> _tmp<span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Returns the wrapped native object
             *
             * @function toObject
             * @return {Object}
            */</span>
            toObject <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">return</span> _hash<span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
&nbsp;
            <span style="color: #006600; font-style: italic;">/**
             * Returns a string representation of the wrapped native object
             *
             * @function toSource
             * @return {String}
            */</span>
            toSource <span style="color: #339933;">:</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>_hash.<span style="color: #660066;">toSource</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #000066; font-weight: bold;">return</span> _hash.<span style="color: #660066;">toSource</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
                    <span style="color: #003366; font-weight: bold;">var</span> _stack <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
                    <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> _n <span style="color: #000066; font-weight: bold;">in</span> _hash<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                        _stack.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&quot;'</span> <span style="color: #339933;">+</span> _n <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot; : &quot;'</span> <span style="color: #339933;">+</span> _hash<span style="color: #009900;">&#91;</span>_n<span style="color: #009900;">&#93;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'&quot;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #009900;">&#125;</span>
                    <span style="color: #000066; font-weight: bold;">return</span> <span style="color: #3366CC;">'({'</span> <span style="color: #339933;">+</span> _stack.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">','</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">'})'</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
            <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<h2>But how to use it ?</h2>
<p>A Swell class can be instantiated just like you would do with a classic object.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">    <span style="color: #003366; font-weight: bold;">var</span> ht <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">Hashtable</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// Put some stuff into the hashtable</span>
    ht.<span style="color: #660066;">set</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'foo'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'bar'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    ht.<span style="color: #660066;">set</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'baz'</span><span style="color: #339933;">,</span><span style="color: #3366CC;">'bleh'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">//Then walk every member of the hashtable to turn the value into uppercase</span>
    h.<span style="color: #660066;">walk</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>member<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> member.<span style="color: #660066;">toUpperCase</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// Output the hash, this will give us an object like : {foo : &quot;BAR&quot;, baz : &quot;BLEH&quot;}</span>
    h.<span style="color: #660066;">toObject</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/a-simple-yet-versatile-hashtable-with-swell/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Swell from the underneath</title>
		<link>http://blog.justswell.org/swell-architecture-proposal/</link>
		<comments>http://blog.justswell.org/swell-architecture-proposal/#comments</comments>
		<pubDate>Fri, 06 Mar 2009 13:17:39 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Swell]]></category>
		<category><![CDATA[architecture]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=36</guid>
		<description><![CDATA[Here&#8217;s our thoughts about Swell&#8217;s core architecture.]]></description>
			<content:encoded><![CDATA[<p>Here&#8217;s our thoughts about Swell&#8217;s core architecture.</p>
<div id="attachment_43" class="wp-caption alignleft" style="width: 568px"><img class="size-full wp-image-43" title="Core architecture" src="http://blog.justswell.org/wp-content/uploads/2009/03/cdmap1.png" alt="Swell's Core architecture" width="558" height="403" /><p class="wp-caption-text">Swell&#39;s Core architecture</p></div>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/swell-architecture-proposal/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>SVN post-commit hook, API doc autogeneration</title>
		<link>http://blog.justswell.org/svn-post-commit-hook-api-doc-autogeneration/</link>
		<comments>http://blog.justswell.org/svn-post-commit-hook-api-doc-autogeneration/#comments</comments>
		<pubDate>Thu, 05 Mar 2009 13:17:35 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Swell]]></category>
		<category><![CDATA[JSDoc]]></category>
		<category><![CDATA[SVN]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=22</guid>
		<description><![CDATA[Generating manually Swell&#8217;s API doc actually&#8217;s being a pain, we finally chose to generate it automatically through subversion&#8217;s repositories hooks. These hooks once enabled, allows you to listen specific SVN-based events (pre/start/post commit/lock&#8230;) and therefore execute your home-made script. In our case, we use JSDoc to generate the API doc and well, it took about [...]]]></description>
			<content:encoded><![CDATA[<p>Generating manually Swell&#8217;s API doc actually&#8217;s being a pain, we finally chose to generate it automatically through subversion&#8217;s repositories hooks.<br />
These hooks once enabled, allows you to listen specific SVN-based events (pre/start/post commit/lock&#8230;) and therefore execute your home-made script.</p>
<p>In our case, we use JSDoc to generate the API doc and well, it took about 6mins with one core (2ghz) fully-loaded to parse/generate the documentation for only 4 files…<br />
Let&#8217;s hope that we&#8217;ll not commit too often.</p>

<div class="wp_syntax"><div class="code"><pre class="bash" style="font-family:monospace;"><span style="color: #c20cb9; font-weight: bold;">svn</span> up <span style="color: #000000; font-weight: bold;">/</span>path<span style="color: #000000; font-weight: bold;">/</span>to<span style="color: #000000; font-weight: bold;">/</span>your<span style="color: #000000; font-weight: bold;">/</span>repository<span style="color: #000000; font-weight: bold;">/</span>api<span style="color: #000000; font-weight: bold;">/</span>src
java <span style="color: #660033;">-jar</span> <span style="color: #000000; font-weight: bold;">/</span>path<span style="color: #000000; font-weight: bold;">/</span>to<span style="color: #000000; font-weight: bold;">/</span>your<span style="color: #000000; font-weight: bold;">/</span>repository<span style="color: #000000; font-weight: bold;">/</span>api<span style="color: #000000; font-weight: bold;">/</span>jsdoc<span style="color: #000000; font-weight: bold;">/</span>jsrun.jar <span style="color: #000000; font-weight: bold;">/</span>path<span style="color: #000000; font-weight: bold;">/</span>to<span style="color: #000000; font-weight: bold;">/</span>your<span style="color: #000000; font-weight: bold;">/</span>repository<span style="color: #000000; font-weight: bold;">/</span>api<span style="color: #000000; font-weight: bold;">/</span>jsdoc<span style="color: #000000; font-weight: bold;">/</span>app<span style="color: #000000; font-weight: bold;">/</span>run.js <span style="color: #660033;">-r</span>=<span style="color: #000000;">1</span> <span style="color: #000000; font-weight: bold;">/</span>path<span style="color: #000000; font-weight: bold;">/</span>to<span style="color: #000000; font-weight: bold;">/</span>your<span style="color: #000000; font-weight: bold;">/</span>repository<span style="color: #000000; font-weight: bold;">/</span>api<span style="color: #000000; font-weight: bold;">/</span>src <span style="color: #660033;">-t</span>=<span style="color: #000000; font-weight: bold;">/</span>path<span style="color: #000000; font-weight: bold;">/</span>to<span style="color: #000000; font-weight: bold;">/</span>your<span style="color: #000000; font-weight: bold;">/</span>repository<span style="color: #000000; font-weight: bold;">/</span>api<span style="color: #000000; font-weight: bold;">/</span>jsdoc<span style="color: #000000; font-weight: bold;">/</span>templates<span style="color: #000000; font-weight: bold;">/</span>jsdoc</pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/svn-post-commit-hook-api-doc-autogeneration/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Swell makes javascript hot key event listeners a breeze&#8230;</title>
		<link>http://blog.justswell.org/swell-makes-hot-key-listeners-just-a-breeze/</link>
		<comments>http://blog.justswell.org/swell-makes-hot-key-listeners-just-a-breeze/#comments</comments>
		<pubDate>Thu, 05 Mar 2009 08:26:57 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Swell]]></category>
		<category><![CDATA[Event]]></category>
		<category><![CDATA[event listener]]></category>
		<category><![CDATA[Hot keys]]></category>
		<category><![CDATA[Key combination]]></category>
		<category><![CDATA[keyboard listener]]></category>

		<guid isPermaLink="false">http://blog.justswell.org/?p=14</guid>
		<description><![CDATA[These days the trend is to have a seamless desktop experience in your browser, that means pushing the boundaries of the web applications by trying to mimic the natural behavior of desktop hosted solutions. One of the must-have is undoubtedly a robust and easy-to-use event toolkit. That was one of the heaviest task and probably, [...]]]></description>
			<content:encoded><![CDATA[<p>These days the trend is to have a seamless desktop experience in your browser,  that means pushing the boundaries of the web applications by trying to mimic the natural behavior of desktop hosted solutions. One of the must-have is undoubtedly a robust and easy-to-use event toolkit. That was one of the heaviest task and probably, to date, one of the features we are most proud of.</p>
<p>We&#8217;ll try to make a bunch of articles on how to use the Event toolkit. Today we&#8217;ll talk about hot-keys, a hot-key is a key combination that you can use to trigger an action in your web-application, for example you are building a WYSIWYG editor and want to capture combination like Ctrl + B to turn the text in bold.</p>
<p>Here&#8217;s how you would create this keyboard event listener with Swell.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">Event</span>.<span style="color: #660066;">addKeyListener</span><span style="color: #009900;">&#40;</span>document<span style="color: #339933;">,</span> <span style="color: #3366CC;">'ctrl+b'</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #339933;">,</span> keys<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>event.<span style="color: #660066;">modifiers</span>.<span style="color: #660066;">ctrl</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>keys.<span style="color: #660066;">contains</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'b'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            Swell.<span style="color: #660066;">Lib</span>.<span style="color: #660066;">Selection</span>.<span style="color: #660066;">getCurrent</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">wrap</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'&lt;strong&gt;$1&lt;/strong&gt;'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">null</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/swell-makes-hot-key-listeners-just-a-breeze/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Clientside getElementsByClassName cross-browser implementation</title>
		<link>http://blog.justswell.org/clientside-getelementsbyclassname-cross-browser-implementation/</link>
		<comments>http://blog.justswell.org/clientside-getelementsbyclassname-cross-browser-implementation/#comments</comments>
		<pubDate>Wed, 04 Mar 2009 17:27:06 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Swell]]></category>
		<category><![CDATA[DOM]]></category>

		<guid isPermaLink="false">http://justswell.org/blog/?p=6</guid>
		<description><![CDATA[We just came up with a &#8220;getElementsByClassName&#8221; cross-browser implementation quite interesting. Most of the A-Grade browsers doesn&#8217;t support getElementsByClassName natively, and in this case you&#8217;ll have to write from scratch this method—excepted in one case: IE8. Although it&#8217;s kinda annoying for a recent browser (which is still in RC1) to not support this W3C recommandation [...]]]></description>
			<content:encoded><![CDATA[<p>We just came up with a &#8220;getElementsByClassName&#8221; cross-browser implementation quite interesting.</p>
<p>Most of the A-Grade browsers doesn&#8217;t support getElementsByClassName natively, and in this case you&#8217;ll have to write from scratch this method—excepted in one case: IE8.</p>
<p>Although it&#8217;s kinda annoying for a recent browser (which is still in RC1) to not support this W3C recommandation natively, it does at least support querySelectAll&#8230; in standards mode.<br />
So we ran several tests to check the difference between IE8 in quirks/standards mode, which is actually noteworthy: 500% gain when using querySelectorAll, but still about twice slower compared to the native getElementsByClassName implementation in Firefox 3.0.6 ; but well, we didn&#8217;t expect that much.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>className<span style="color: #339933;">,</span> root<span style="color: #339933;">,</span> tagName<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    root <span style="color: #339933;">=</span> root <span style="color: #339933;">||</span> document.<span style="color: #660066;">body</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>Swell.<span style="color: #660066;">Core</span>.<span style="color: #660066;">isString</span><span style="color: #009900;">&#40;</span>root<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        root <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span>root<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// for native implementations</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">getElementsByClassName</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> root.<span style="color: #660066;">getElementsByClassName</span><span style="color: #009900;">&#40;</span>className<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// at least try with querySelector (IE8 standards mode)</span>
    <span style="color: #006600; font-style: italic;">// about 5x quicker than below</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>root.<span style="color: #660066;">querySelectorAll</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        tagName <span style="color: #339933;">=</span> tagName <span style="color: #339933;">||</span> <span style="color: #3366CC;">''</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">return</span> root.<span style="color: #660066;">querySelectorAll</span><span style="color: #009900;">&#40;</span>tagName <span style="color: #339933;">+</span> <span style="color: #3366CC;">'.'</span> <span style="color: #339933;">+</span> className<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #006600; font-style: italic;">// and for others... IE7-, IE8 (quirks mode), Firefox 2-, Safari 3.1-, Opera 9-</span>
    <span style="color: #003366; font-weight: bold;">var</span> tagName <span style="color: #339933;">=</span> tagName <span style="color: #339933;">||</span> <span style="color: #3366CC;">'*'</span><span style="color: #339933;">,</span> _tags <span style="color: #339933;">=</span> root.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span>tagName<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span> _nodeList <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> _tag<span style="color: #339933;">;</span> _tag <span style="color: #339933;">=</span> _tags<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">++</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">hasClass</span><span style="color: #009900;">&#40;</span>_tag<span style="color: #339933;">,</span> className<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            _nodeList.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>_tag<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
    <span style="color: #000066; font-weight: bold;">return</span> _nodeList<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/clientside-getelementsbyclassname-cross-browser-implementation/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Yet another Javascript library ?!</title>
		<link>http://blog.justswell.org/yet-another-javascript-library/</link>
		<comments>http://blog.justswell.org/yet-another-javascript-library/#comments</comments>
		<pubDate>Wed, 04 Mar 2009 16:15:44 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Swell]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[JS]]></category>

		<guid isPermaLink="false">http://justswell.org/blog/?p=3</guid>
		<description><![CDATA[Well, I thought it would be easier to find words for this first post ! anyways thanks for visiting this blog, we’ll try to keep you up to date on the Swell Development progress through this blog and providing as well the day to day story of our successes and failures ^^ while building a [...]]]></description>
			<content:encoded><![CDATA[<p>Well, I thought it would be easier to find words for this first post ! anyways thanks for visiting this blog, we’ll try to keep you up to date on the Swell Development progress through this blog and providing as well the day to day story of our successes and failures ^^ while building a (Fully featured) javascript library.</p>
<p>By the way we are looking for talented developers to join the effort as there’s pretty much to accomplish (code, documentation, build tools, and so on…)</p>
<p>We’ll write more about our plans in the next post and will explain why there’s room for another player…</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.justswell.org/yet-another-javascript-library/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
