Accueil du site > Jquery > Jquery 1.4 , approche RIA , Quick Element Construction
Jquery 1.4 , approche RIA , Quick Element Construction
dimanche 24 janvier 2010, par
"Quick Element Construction" sous se libellé est présenté dans les 14 jours de jquery une des évolutions de jquery 1.4. En lisant cet apport en début de semaine milles idées me sont venues !!! Et je ne résiste pas au plaisir de les partager avec vous car il s’agit plus d’une révolution que d’une évolution. En fait grâce à ce changement on peux mettre en place une approche , dite RIA .
Quick Element Construction
Concrètement voici le code que nous propose le site dédié a jquery :
Il s’interprète de la manière suivante : On construit un élément de type ’div’ avec les caractéristiques suivantes , un id foo , un style défini dans CSS et un évènement click. Une fois construit on le rajoute dans le DOM au tag Body. Bien entendu cela n’apporte pas grand chose , en apparence ..... Mais en y regardant de plus près on se rend compte que pour construire les propriétés de cette div on utilise un objet javascript. Et là tout s’éclaire .... si j’utilise des objets javascript , je peux facilement en créer et je peux également très facilement les décliner. C’est ce que nous allons de suite voir dans un exemple.
Faire de la RIA avec Jquery 1.4
Je vous propose dans un premier temps de voir un exemple , et ensuite, de voir le code et son interprétation , qui vous allez voir est vraiment très simple. Vous n’avez besoin au final de connaître que jquery , même les bases sont suffisantes , et la notation objet de javascript. NB : pour cet exemple et pour rendre cela plus ’fun’ j’utilise également jquery ui mais son utilisation n’est pas indispensable. Et comme d’habitude vous pouvez télécharger l’exemple au format zip en bas de page. ( You can download the exemple of jquery RIA at the bottom of the page )
N’hésitez pas , cliquer sur les éléments , déplacez les 2 derniers et double cliquer sur le dernier !!!
Voila nos 5 boites ... la première et la boite original , les 3 suivantes étendent ou modifient les propriétés de celle ci. Enfin la dernière ( draggable explode fan )est une extension de celle juste avant. Quand on clik sur les 2 premières on swich sur la couleur de fond , la troisième n’apprécie pas que l’on click dessus , les deux dernières sont draggables et si vous double-cliquer sur la dernière , elle explose !!! Passons maintenant au code et à son explication.
Créer des composants , et les étendre
Le code est vraiment très long mais la partie script proprement dit et au final assez courte car il y a énormément de commentaires. Ces derniers sont d’ailleurs en Français et en Anglais. J’ai également mis des numéros en chiffre romain pour faire l’explication de celui ci.
I : on montre les boites , rien de particulier ...
II : Il s’agit de la boite original. Comparé au code de démo $("<div/>",box).appendTo("#demo") ; est identique. La seule différence c’est que nous passons cet objet en paramètres à jquery.
III : c’est la partie la plus simple et ma foi la plus intéressante. Je crée un objet javascript (box_extension) qui contient d’autres objets, qui vont s’appuyer sur box . Par exemple ’fan’ est un objet qui surcharge une seule propriété de box , à savoir son text. Red fan , surcharge text et click mais il a aussi un groupe de propriétés en plus avec CSS. Cela va être une boite rouge ou on écrit plus gros. Draggable fan , lui surcharge plusieurs méthodes et rajoute notamment la méthode Mouse enter qui rend l’objet draggable. Enfin et c’est quand même bien intéressant Draggable explode va surcharger Draggable fan en rajoutant un évènement double click.
IV : il est temps de créer réellement ces objets avec la fonction extend_component().
V : extend_component(). est une fonction qui reçoit 2 paramètres. L’élément à étendre et son extension. J’utilise la fonction $.extend() de jquery pour fiare assez simplement cela. Concrètement quand j’écris var fan = extend_component(box , box_extension.fan ) ; fan va devenir un objet avec les attributs de box sauf si cela sont surchargés + les attributs spécifiques de box_extension.fan. Cela permet notamment d’étendre un composant déjà étendue , par exemple var draggable_explode = extend_component(draggable_fan , box_extension.draggable_explode ) ;
$(function(){
/* on affiche les composants une fois la page chargee */
/* we display the different box */
$("<div/>", box).appendTo("#demo");
$("<div/>", fan).appendTo("#demo");
$("<div/>", red_fan).appendTo("#demo");
$("<div/>", draggable_fan).appendTo("#demo");
$("<div/>", draggable_explode).appendTo("#demo");
})
---II : Objet boite original - Original Box object ---
/* notre boite mere , origine , matrice ... */
/* The original component have the class box , a text and one event 'click' registred */
var box = {
class : "box",
click: function() {
$(this).toggleClass("background");
},
text : 'Hello world'
}
---III : Les extensions de la boite - Extensions of the box ---
/* les différentes extensions de la boite ... */
/* box_extension have different extensions for the original component box*/
var box_extension = {
/* un extension qui ne modifie que le texte */
/* This extension modify only the text */
fan : {text : 'I m Jquery fan'},
/* une extension qui met la boite en rouge et qui vous avertit de ne pas la clicker */
/* This extension modify the text , the CSS and we override the click function */
red_fan : {
text : 'I m Jquery red fan',
css : {
backgroundColor: "red",
fontSize : "150%"
},
click: function() {
alert("Don't click the red fan !!! " );
}
},
/* Votre boite a un joli border .. et vous pouvez la déplacer */
/* This extension modify the text , the CSS , we disable the click function and we make this
box draggable using the event mouseenter */
draggable_fan : {
text : 'I m Jquery draggable fan , Drag me if you can',
css : {
border : "3px green solid"
},
mouseenter : function(){
$(this).draggable();
$(this).unbind('mouseenter');
},
click: function() {
$(this).unbind('click');
return;
}
},
/* Cet element va etendre l'element draggable_fan*/
/* We gone use this element to extend draggable_fan*/
draggable_explode : {
text : 'I m Jquery draggable explode fan , Double click !!',
dblclick : function(){
$(this).show("explode", { pieces: 16}, 2000);
}
}
}
---IV : Création des composants - Building new component ---
/* on cree les nouveaux composants */
/* we buid your new component based on box , using the fonction extend_component */
var fan = extend_component(box , box_extension.fan );
var red_fan = extend_component(box , box_extension.red_fan );
var draggable_fan = extend_component(box , box_extension.draggable_fan );
/* Ici on cree un element qui a deja etendu box*/
/* draggable_explode will extend draggable_fan , it's interesting to have a variation of an extended model */
var draggable_explode = extend_component(draggable_fan , box_extension.draggable_explode );
---V : fonction qui sert à étendre un composant - Extending function ---
/* fonction qui construit les nouveaux composant à partir d'un modele et d'une de ses extensions */
/* this fonction receive 2 parameters , the original model or a extended model( here box or draggable_fan) and
the component extending the original one */
function extend_component(model , extend){
var local = $.extend( true , {}, model );
$.extend( true, local , extend );
return local;
}
De l’intérêt d’utiliser des composants
Cette première démo vise simplement à faire découvrir une des possibilités offerte par la version 1.4 de jquery. Elle peux servir de base ou d’inspiration pour construire sa propre bibliothèques de composants. L’intérêt principal est de pouvoir simplement mettre en place des éléments dans le DOM et de pouvoir faire des variations très simplement.
Néanmoins nous ne sommes limités que par notre imagination et il ne tient qu’à nous de faire vivre un concept aussi novateur que riche. Par exemple nous pourrions développer d’autre méthodes que l’héritage en faisant de la composition. On pourrait également mettre en place des moyens plus simple pour désactiver une fonction comme le click sur l’élément étendu .
Un des autres intérêt est de pouvoir continuer à utiliser les avantages du trio HTML , CSS et javascript. Contrairement aux autres RIA, les styles et la mise en page sont beaucoup plus faciles à maitriser. Le fait de se construire une bibliothèque de composants par cette fonctionnalité de jquery donne une vertu supplémentaire au web. Il devient maintenant très facile de créer des composants , de les étendre et surtout de les exporter sur d’autres sites. Là vous n’avez qu’à créer des extensions pour pouvoir les adapter. Au final on pourra cumulé les avantages de l’approche des RIA en gardant la souplesse et la simplicité du web.
Conclusion : a vos claviers
Cette article essaye avant tout d’avoir une vertu pédagogique en exposant "Quick Element Construction" de jquery 1.4 . Il est certain que nous n’allons par tarder à voir débarquer sur le web les premières bibliothèques de composants. Jquery a crée par sa facilité et sa clarté une première révolution dans dans le web en démocratisant le javascript. Aujourd’hui il est est certain qu’une autre révolution est marche .... Camarades a vos claviers !!!!
Documents joints
- Jquery RIA (Zip – 88.4 ko)
5 Messages de forum
Dans la même rubrique
- Jquery 1.4 : Per-property Easing, setter avec fonctions sur les attributs , Event Multi-binding
- Jquery 1.4 : les nouveautès , live() ,detach(), unwrap() et delay()
- Jquery 1.4 , introduction a jQuery.proxy()
- Jquery 1.4 , approche RIA , Quick Element Construction
- Jquery 1.4 , attention incompatibilité ... JSON
- Jquery , sa documentation ,ses plugins , ses ressources , les indispensables
- Réaliser avec jquery un moteur ajax simple et efficace
- Les secrets caches de la librairie jquery ui
- Transmettre des tableaux (array) dans les requetes ajax
RSS 2.0