♪
1. Définition de JxLib▲
JxLib est un framework JavaScript d'interfaçage utilisateur conçu avec MooTools. Il permet aux développeurs et aux graphistes de construire rapidement des interfaces utilisateur pour leurs applications. JxLib est basé sur du HTML valide et tâche d'être entièrement conforme au niveau des CSS.
Toute cette flexibilité est possible, dans sa majorité, grâce à l'utilisation de MooTools. La bibliothèque est fortement orientée objets et comporte un nombre important de classes héritant d'une base simple. Si vous savez comment utiliser le système de classe MooTools, vous allez vous en sortir facilement avec JxLib. En plus d'être basée sur du HTML et des CSS qui fournissent une extraordinaire flexibilité, l'architecture de la bibliothèque est conçue avec un système de plugins qui permet d'ajouter de nouvelles fonctionnalités à chaque composant, selon le choix du développeur.
2. Quelques exemples▲
Je souhaite montrer quelques exemples simples de ce que vous pouvez faire avec JxLib. Il y a une tonne de fonctionnalités possibles et pour avoir des exemples plus complets, vous pouvez regarder sur le site jxlib.orgjxlib.org. Voici trois exemples qui vous donneront un petit aperçu de ces fonctionnalités.
2-A. Exemple 1 : barre d'outils déroulante▲
Cet exemple montre une barre d'outils en cascade.
Ressources :
jxlib.standalone.uncompressed.js
locale.js
jxtheme.uncompressed.css
tests.css
Javascript :
HTML :
<div id="toolbarMenu" class="toolbarBox"></div>2-B. Exemple 2 : Jx.Form et champs de formulaire▲
Cet exemple montre une grande partie des champs que vous pouvez créer.
Ressources :
jxlib.standalone.uncompressed.js
locale.js
jxtheme.uncompressed.css
tests.css
Javascript :
HTML :
<div id="formBasic" class="formBox"></div>2-C. Exemple 3 : les nouvelles classes Jx.Container et Jx.LayoutManager▲
Celui-ci montre des nouveautés de JxLib 3.1.1. Il crée l'entièreté de la fenêtre en utilisant un simple objet JavaScript.
Ressources :
jxlib.standalone.uncompressed.js
locale.js
jxtheme.uncompressed.css
Javascript :
HTML :
<div id="containerBox"></div>
<div id="layoutOffsetElement1">
<p>This element has variable width and a fixed height, attached to the top of the container.</p>
</div>
<div id="layoutOffsetElement2">
<p>This element has fixed width, variable height, and is attached to the left of the container.</p>
</div>
<div id="layoutOffsetElement3">
<p>This element has variable width and height with fixed left, top, right and bottom offsets.</p>
</div>
<div id="layoutOffsetElement4">
<p>This element was pulled from the HTML and added to this form.</p>
</div>
<div id="layoutOffsetElement5">
<p>This element has variable width and fixed height, attached to the bottom of the container.</p>
</div>
<div id="starContent"><p>This tab just has an image.</p></div>
CSS :
.jxContainerContent {
background: #fff;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
margin: 2px;
}
.jxContainerContent .jxContainerContent {
margin: 0;
border: none;
}
#containerBox {
position: relative;
width: 1000px;
height: 500px;
margin: 0 auto;
border: 1px solid #ccc;
}3. Résultats du travail sur la compatibilité avec le Core 1.4.2▲
Je suis content de conclure que la conversion vers le Core 1.4.2 s'est avérée relativement facile. Ce qui m'a donné le plus grand mal de tête, c'est lorsque j'essayais avant tout d'obtenir la compatibilité avec le Core 1.3.2 - c'était un énorme travail. Nous avons utilisé la plupart des méthodes globales $ ($defined, $H et $A étant les plus grosses) et elles ont été un peu redéfinies librement. Je n'ai vraiment pas voulu employer la couche de compatibilité que les gens de MooTools ont chacun aimablement fournie parce que le téléchargement en était bien trop gros. Cette transformation a pris beaucoup de temps. Ce faisant, j'ai cependant appris quelques petites choses très intéressantes.
Premièrement, c'est mieux de remplacer $defined() avec une vérification pour les undefined et les null. Par exemple :
if ($defined(some_variable)) {
devient :
Je me rends compte que les documentations sur la conversion déclarent que vérifier les undefined devrait être suffisant, mais quand j'ai essayé cela, j'ai d'abord obtenu beaucoup d'erreurs étranges. Ce changement les a fixées.
L'autre chose que j'ai découverte est que Object.each et Object.keys ne sont pas vraiment utiles lorsque l'objet que vous utilisez est dans le même prototypage que leur classe. Par exemple, nous avons ce code dans JxLib 2.0 :
processElements: function(template, classes) {
var keys = classes.getValues();
elements = this.processTemplate(template, keys);
classes.each(function(value, key) {
if (key != 'elements' && elements.get(value)) {
this[key] = elements.get(value);
}
}, this);
return elements;
}
Il semble que ces deux fonctions utilisent hasOwnProperty() qui ne donnait aucune itération de la boucle ci-dessus parce que la variable des classes était en fait this.classes, qui se retrouve sur le prototype de la classe. En convertissant le Core 1.3.2 et ensuite le Core 1.4.2, nous avons dû employer ceci :
processElements: function(template, classes) {
var keys = [],
values = [];
for (var key in classes){
if (key !== undefined) {
values.push(classes[key]);
keys.push(key);
}
}
elements = this.processTemplate(template, values);
keys.each(function(key){
if (key != 'elements' && elements[classes[key]] !== undefined && elements[classes[key]] !== null) {
this[key] = elements[classes[key]];
}
},this);
return elements;
}
Une fois que cela était corrigé, et nous avions alors la pleine compatibilité avec le Core 1.3.2, la transformation jusqu'au Core 1.4.x était assez indolore. Pour plus d'information sur ce que j'ai appris pendant la conversion (tout ne concerne pas MooTools ni même le JavaScript) rendez-vous sur mon blogblog.solagratiadesigns.com.
4. Plus d'information▲
Vous pouvez obtenir plus d'information sur JxLib aux endroits suivants :
- Site Web JxLibSite Web JxLib ;
- JxLib githubJxLib github ;
- JxLib Google GroupJxLib Google Group ;
- JxLib sur LighthouseJxLib sur Lighthouse ;
- Blog sur comment débuter avec JxLibBlog sur comment débuter avec JxLib.
Si vous avez des questions ou des commentaires, n'hésitez pas à les faire sur le Google group (dont le lien est ci-dessus). De même, si vous avez apprécié cette présentation, vous pouvez apporter votre aide au projet pour améliorer JxLib. Nous avons plusieurs idées pour le futur et des mains supplémentaires sont les bienvenues.
5. Remerciements▲
Je tiens à remercier chaleureusement Jon Bomgardner de m'avoir autorisé à traduire son article.
Je remercie également jacques_jean pour sa relecture et ses conseils avisés.