Cet article est le deuxième d’une série de tutoriaux sur les composants graphiques.   Dans le premier article nous avions vu comment cibler un nœud du DOM et interagir avec cet élément. Nous avions crée la classe custumInput qui permettait de modifier et d’ajouter des comportement a un élément Input.   Dans ce tutorial nous allons voir comment modifier intégralement l’aspect d’un bouton html Nous allons créer un composant graphique en javascript qui remplacera un bouton html.   Ce composant aura 3 images, pour chacun des 3 états (rollOver – rollOut et click) et devra récupérer l’action réalisé sur le click du bouton (l’appel de la fonction)   Le résultat est disponible ici.  

Sommaire :

Bien démarrer Le code HTML Création de l’objet graphique CustumButton remplacer le bouton par une image : La méthode init() Implementation des événements mouseOver et MouseOut Implémentation de l’évènement au click Conclusion Liens

Bien démarrer

On va toujours se baser sur les fonctions du fichier events.js a savoir: La fonction getElementbyClassName, qui permet de cibler un élément a partir de sa classe La fonction addEvent qui permet de d’implémenter un gestionnaire d’événement La fonction addLoadEvent qui est l’équivalent d’un body.onload.

Le code HTML :

Nous allons partir d’un code HTML très simple.

• Un bouton de type button qui va nous servir de témoins
• un Bouton de type button de classe custumButton
• Un bouton de type submit de classe custumButton

On différencie les boutons de type button et de type submit car les deux éléments ne réagissent pas de la même façon au click Pour un bouton de type submit, l’action effectuée au click est de type form.submit. Pour un bouton de type button, l’action effectué au click est de type onclick="maFonction ()" La classe "custumButton” sera utiliser pour définir les boutons a skinner

Création de l’objet graphique CustumButton

Ici nous allons créer notre pseudo objet, a partir de sa classe, lui attacher les 3 images correspondant aux 3 états, puis lancer sa méthode init().

remplacer le bouton par une image : La méthode init()

Ici, on va dans un premier temps replacer le button de class custumButton par un image

Implementation des événements mouseOver et MouseOut:

On va ensuite rajouter l’implémentation des états rollOver et rollOut, en s’appuyant sur la fonction Addevent du fichier DOMEvent.js :

Implémentation de l’évènement au click

La gestion du click est un peu différente du rollOver ou rollOut. En plus de changer l’image de notre composant graphique, il faut également effectué l’action associé au bouton html. Le bouton peut être de 2 types. Soit c’est un bouton de type « submit » et auquel cas l’action est de type form.submit Soit le bouton est de type « button » et auquel cas l’action est de type onclick="fonction()"

Conclusion

A travers ces deux premiers tutoriaux, nous avons abordé les bases de la création de composants graphiques. Nous avons vu comment manipuler un élément html. Nous avons récupéré et modifier ses attributs, ajouté des comportement, et modifier son aspects graphique. Cela constitue la base des composants graphiques. L’utilisation de ces techniques permet de mettre en place des composants graphiques puissants, permettant de réduire les temps de productions en intégration. Dans le prochain tutorial nous élaborerons un composant graphique plus sophistiqué, à partir d’un élément de type select. Nous verrons également comment rendre le composant graphique autonome et indépendant et comment constituer nos classes de composants en librairies.

Liens :

fichiers sources Tutorial 1 :Les composants graphiques :: étude de cas : le input