SwellJS – another big fish in the sea

by SleepyCod

17 Nov 09

Back @work

Posted in Swell

Finally we are back at work on Swell after some inactivity period, we’ve been in a crazy workload lately…
By the way, we are still waiting for motivated people to get in

No Comments

by SleepyCod

4 Sep 09

Even more Drag&Drop coolness between your desktop and your browser!

Posted in DD, Javascript, Swell

We are making more & 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’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’s powerful and of course, reduces a lot the memory footprint of your web application.

A lot of components could benefit of this approach, Treeview, Datatable, Listview and so on.

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!

And the code

var proxyElement = html.div(null, html.span({
    'cls' : 'dd-proxy-icon'
}), html.span('Moo'));
 
 
var draggableRows = new Swell.Lib.DD.Draggable('bleh', {
    'delegate' : true,
    'proxy'  : true,
    'proxyOverride'    : proxyElement,  
    'dataCallback' : function(dt) {
        var _currentEl = this.getDragEl().current(), _stdOut = [];
 
        for(var _n = 0, _l = _currentEl.childNodes.length; _n < _l; _n++) {
            if(_currentEl.childNodes[_n].nodeType === 1) {
                var _text = $(_currentEl.childNodes[_n]).text();
                _stdOut.push(Swell.Core.trim(_text));
            }
        }
        this.setData(dt, 'text/plain', _stdOut.join("\t"));
    }
});
 
var dropTarget = new Swell.Lib.DD.Droppable('moo');
 
dropTarget.ondrop = function(e, draggable) {
    if(!!draggable) {
        draggable.getDragEl().appendTo($('moo').current().tBodies[0]);
    }
}

2 Comments , Tags: drag&drop, event delegation, Events, Javascript, Swell

by Butterfish

28 Jul 09

Drag and drop files from your desktop to your browser

Posted in Javascript, Swell

Since the last post, we’ve received a huge number of requests and questions about drag&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 files, then your browser is doing the rest, defining the interaction between your desktop and the file input (nicely styled of course).

By now, two browsers are playing well with the demo (Safari 4, Chrome 2+) while others degrades gracefully.

Here’s the code :

Swell.Core.Event.add('upload', 'change', function() {
    $('loader').show();
    $('foorm').xhr(function() {
        var currentEl = $('upload').current();
        $('filelist').show();
        for (var i = 0, len = currentEl.files.length; i &lt; len; i++) {
            $('filelist').appendHTML(currentEl.files.item(i).fileName + '
');
        }
        var imgs = this.responseText.split('|');
        new Swell.Core.Asset().load('img', imgs, function(img) {
            $('loader').hide();
            $(img).appendTo('image-container');
        });
    });
});

The demo:

And the video:

24 Comments , Tags: desktop to browser drag & drop, drag&drop, Javascript, playground, showcase

by SleepyCod

17 Jul 09

Bridging desktop and browser with Swell’s native Drag and Drop implementation

Posted in DD, Swell

Today is a big step forward for us, we are proud to feature the first showcase of our Drag&Drop implementation.

This is not what you may think about, you may think about drag & drop as being stuck inside your browser window but today what we’re going to show is a new way of conceiving drag & drop applications. The one you have always waiting for, imagine interacting with the browser chrome and your OS…

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’s all folks!

We use YQL and JSONP to transform RSS into JSON and of course a Swell Element to dynamically attach the behavior to the webpage.

Here’s the Javascript code to handle this.

var dd2 = new Swell.Lib.DD.Droppable('moo');
 
dd2.ondrop = function(e) {
    var file = this.getData(e, 'DD_URL').split("\n")[0];
    if (/^http\:\/\//i.test(file) !== true) {
        return false;
    }
    $('debug').setHTML('loading…');
    e.target.className = '';
 
    var yqlRequest = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url=%22'+file+'%22&amp;format=json&amp;callback=moo';
    html.script({
        'type' : 'text/javascript',
        'src'  : yqlRequest
    }).appendTo(document.getElementsByTagName('head')[0]);
}

And the full video.

12 Comments , Tags: dataTransfer, dd, desktop to browser drag & drop, drag&drop, javascript dd, native dd

by SleepyCod

2 Jul 09

Swell update

Posted in Swell

We’ve been hard at work for almost two months now on the Drag&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 browser today.
That’s why we are working on the first native Drag & drop implementation in a Javascript library, just think about the possibilities of making the web interacting with your desktop…

We are also working on WebSockets implementation in Swell using XMLHttp Streaming, this will talk to Comet fans

3 Comments , Tags: dd, drag&drop, news, progress, Swell, websockets

by Butterfish

11 May 09

Swell Widget example: ImageZoom

Posted in Javascript, Swell

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…

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.

1 Comment , Tags: Javascript, showcase, Swell, widget

by Cichlid

8 May 09

On Joining Swell

Posted in Swell

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’m glad to now be part of the project – to help create a piece of software that has the potential to help so many others.

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.

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.

2 Comments , Tags: Community

by SleepyCod

7 May 09

Trigger image loading with Javascript and Swell

Posted in Javascript, Swell

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 well with another (Element) in this example.

Enjoy!

No Comments , Tags: image loading, Javascript, Lazy loading, showcase, Swell, triggering image loading

by FlagBlenny

6 May 09

Let’s start using Swell!

Posted in Swell

If you’ve been following this blog (or are going to read some previous posts), you’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 closest point, and as the first milestone has been reached, I guess it’s time to do a little introduction on the way you will be able to make Swell-enabled applications.

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.

In our case, let’s say we want to use setStyle() to change our page’s background color. We want it black, the reason is irrelevant.

This will get our background black:

$(document.body).setStyle({backgroundColor : '#000'});

As setStyle() is part of the Core.Element Swell library, we’ll need it, but also its dependencies. “Core.Element” requires “Core.Hashtable” which requires “Core.CustomEvent” which requires “Core.Core”, who are all requiring the “Swell” namespace itself.
Dependencies are a pain, so we’ll just ignore them and include “Element” (Core.Element’s alias name). The server-side system will automatically include everything we need in a very convenient way.

http://get.swl.fr/1.0/Element.js

Yep, that’s all. With this URL, I’ll include the Element lib from Swell, with all its dependencies, from the “1.0″ stable branch. If you feel adventurous, you can replace “1.0″ with “trunk” and get bleeding edge code.

<script type="text/javascript" src="http://get.swl.fr/1.0/Element.js"></script>
<script type="text/javascript">
$(document.body).setStyle({backgroundColor : '#000'});
</script>

Looks simple, try it too!

Finally, you might want to include more than one library. This is also possible, and is really easy. Let’s say we want Ajax and Event too, the URL would become: http://get.swl.fr/1.0/Element/Ajax/Event.js. The (obvious) goal is to include everything you need without including tons of different files.

Just a final note: using Swell only to change your page’s background color is called overkill. Try out the other examples on the blog and start building rich web applications!

No Comments , Tags: CDN, Swell, Swell Installation

by Butterfish

5 May 09

Swell’s current progress overview

Posted in Swell

1dotzero

We have recently completed the first milestone labelled under “alpha”, 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 application;
- 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 switch case dancing.
Event, splitted in three categories:
- Event.js, provides a complete set of methods for Event manipulation in a cross-browser manner
- CustomEvent.js, its name is self-explanatory: this class enables the use of custom events using the Dom Level 3 implementation when possible;
- KeyListener.js, easy-to-use key listening abstraction for every class-A browser (including the troublemakers Opera and IE).
Ajax, ease the xhr process by providing a simple yet powerful API, a few highlights:
- headers manipulation;
- form serialization;
- asynchronous file upload;
- automated JSON parsing when the X-JSON header is spotted, using native JSON methods when available.
Hashtable, provides advanced key/value manipulation;
Asset, provides asynchronous loading for IMG/CSS/JS/JSONP components;
Element, the component which ties together numerous of the aforementionned components and ease their usage:
- 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;
- the html builder, enables simple yet powerful element creation with hierarchy, events, custom attributes…

Well, that’s about all, to be honest we are frankly amazed by the work we’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’t planned for the alpha).

So, what’s coming?

And we’re already working on the beta, the second milestone estimated time is in six weeks, and includes:

Position, everything about position, size, areas… done; we’ll add some extra methods in there given enough time;
Drag & Drop, 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);
Effects library, obviously necessary, as people tend to like what’s sparkling (and we do!);
History manager, a prerequisite for the RC (tabs and therefore, the feedreader application);
XML library, also a prerequisite, but we may finally not need it… wait & see!

No Comments , Tags: Swell