<?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 &#187; Swell</title>
	<atom:link href="http://blog.justswell.org/tag/swell/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>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>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>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>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>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>2</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>2</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>

