jQuery Challenge - Part 2

14/05/2008 6:00 pm

Maxime THOMAS

It seems that the first version of the jQuery Who's Who library is finished. I present here what I've done and some feedbacks on the use of jQuery.

jQuery Who's Who 0.1

jquery_whoswho.zip 71.04 kB

How it works

It is very simple to use. You just have to include the javascript files (jquery and jquery.whoswho) and the stylesheet files (a CSS file I provided for the example). Then you must configure it :

IMAGE_ID : this the id of the image you would like to tag.
JSON_URL : URL which will provide content to the list. The format of this file must be :

{
 10:{"first_name" : "Kylie","last_name" : "Minogue"},
 20:{"first_name" : "Robbie","last_name" : "Williams"},
 30:{"first_name" : "Mickael","last_name" : "Jackson"},
 40:{"first_name" : "Madonna","last_name" : ""},
 50:{"first_name" : "Christina","last_name" : "Aguilera"},
...
}

SQUARE_BOUNDARY : size of the square. By default, I set it to 100px.

I have tested it a lot but some bugs may remain. Just tell me.

Structure of the package

This is how I have organized the package :

data : some data for the tests
lib : where the libs are placed : jQuery 1.2.3 and jQuery Dump Plugin (for debug and dev purpose only)
packed : the packed versions of the jQuery Who's Who library and the CSS file.
source : the source. :-D
LICENSE : the license : GPL 3.0.
pack.bat / pack.sh : a little script to easily pack the files (reduces the files size to 50%). It requires the YUI Compressor (BSD).
README : the readme file, describes how to install this plugin.
test.html / test.packed.html : a test file to demonstrate the use of the jQuery Who's Who library.

Best practices

And a little feedback of my jQuery's use.

It's very easy to use it and to bind functions to events, however, this tutorial recomands to bind a function to an event only when it is required.

It may occur that the DOM you would like to access doesn't exist at the moment you are running it. It means that if your code is appending HTML after a DOM node on a button click, you would like to access and manipulate this new fresh inserted code. It is not possible unless you call the bind function at the perfect moment.

$(document).ready( function(){


$("#button").click(function(){


$("#test").append('<div id="inner"></div>');

});


});

In this exemple, when we click on the button element (could be a real HTML input button, or not), jQuery inserts some HTML (a new div in this case) at the end of the inner HTML of the test element. So you have a new div which wasn't there before.

Then you can bind some event on this new element by adding code just after the append function has been called. The issue is that at each click, you will bind the event. Then after two clicks, the HTML code will be appended two times rather than one time as expected. The solution is to separate the functions adding content to the DOM and the functions that bind it. The way to do it is to concretely create a function outside the click bind and put our new bind inside it. Then, at the end of the click bind function, we just call the function we have created.

The other point is the way to develop and to debug your own application :

the visibility of the function and the variables is reduced to the anonymous function declared in the $(document).ready() call. So it's a bit difficult to access it from outside and to know what is the value of the variable. I've found the provided plugin on the net, it is very useful and allow to easily debug your application.

the use of FireBug allows to quickly test the javascript, line by line. Moreover, you can test a piece of script in the console command line and inspect it in the DOM Inspector.

Command line
DOM Inspector

Next Step

And finally, the next step is to integrate this library in eZPublish, I thought about some interesting features like a generic db connector to extract data from db and output JSON. By the way, it will use eZComponents...

Add comment

jQuery Challenge - Part1

05/05/2008 12:00 am

Maxime THOMAS

Tags: eZPublish , javascript , jQuery

During a mission, I discovered jQuery : a javascript library providing facilities and strong functionnalities to static web pages.

jQuery

The use of this library is very simple. It has been made to use the developper's life and specially the maintenance of functionnalities. The javascript entered is shorter and more simple. It has few concepts so it is very quick to learn.

There is only one entry point in jQuery : the $ function. It allows you to access some standard functions to select nodes in the DOM, to manipulate them or to handle events.

The selectors are very useful because you can select almost every item in the DOM using id, css class or javascript variable name. Then, if there is more than one occurence, the function will result an array. Moreover, you can use XPath expression as filters, to reduce the number of object returned.

The strength of jQuery is the chainability of the functions. It allows to increase readability and maintenance of a javascript. You can also combine jQuery with classical JavaScript scripts.

The Challenge

To test this library, I've decided to develop an eZPublish extension integrating the jQuery library.

As a user case, I've chosen the Facebook tagging functionnality : you choose a picture, you tag your friends, you save it, hovering the head of a friend, the name is shown...

I have first worked offline to design the javascript. Here's a snapshot of what I have done : image gallery

Conclusion : it's very easy to come to grips with jQuery and a bit hard to debug. So I've searched and found a plugin to debug my script. See below.

Other interresting libraries...

I also heard about the ExtJS library which is a professional javascript library providing user interface components to build professional applications. jQuery is also experimenting this way by launching jQuery UI. It will be at the end equivalent I guess, but you will be able to still use the jQuery library as an independant library.