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

<input onclick="alert('toto')" type="button" value="mon bouton" />
<input class="custumButton" onclick="alert('toto')" type="button" value="mon bouton" />
<input class="custumButton" type="submit" value="mon bouton" />

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().

function Custum_Button(Classe,Img_MouseOut,Img_MouseOver,Img_onPress){
//on récupere un tableau avec tous les éléments de classe     Classe
var Buttons            =    getElementsByClassName(Classe, "*", document)
 
//on attribut les 3 paramètres d’image a une variable de notre objet
this.Img_MouseOver     =    Img_MouseOver;
this.Img_MouseOut     =    Img_MouseOut
this.Img_onPress     =    Img_onPress
 
for(var i=0; i<Buttons.length ; i++){
this.monButton        =    Buttons[i];
//on lance la function init
this.init(this.monButton,this.Img_MouseOver);
}
}

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

Custum_Button.prototype={
 
//fonction qui se lance au lancement
init : function(MonBouton,Img){
 
//on créer un nœud DOM de type image
var imgButton            =    document.createElement("img")
//on lui attache les valeurs
// ***balise alt = value du button
// ***src = parametre    2  de la fonction constructeur
imgButton.setAttribute("alt",MonBouton.value)
imgButton.setAttribute("src",imgButton.Img_MouseOut)
 
//on attache notre image sur la scene avant le bouton
var Parent    =    MonBouton.parentNode
Parent.insertBefore(imgButton,MonBouton)
 
//on masque le input Button
MonBouton.style.display = "none"
 
}
}

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 :

Custum_Button.prototype={
 
//fonction qui se lance au lancement
init : function(MonBouton,Img){
(…)
addEvent(imgButton, "mouseover", this.set_onMouseOver,false)
addEvent(imgButton, "mouseout", this.set_onMouseOut,false)
} ,
 
//action qui se lance au MouseOUt
set_onMouseOut : function(){
var theCaller=((this.style)?this:event.srcElement);
theCaller.setAttribute("src",theCaller.Img_MouseOut)
 
} ,
 
//action sur le mouse over
set_onMouseOver : function(){
var theCaller=((this.style)?this:event.srcElement);
theCaller.setAttribute("src",theCaller.Img_MouseOver)
}
}

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()”

Custum_Button.prototype={

//fonction qui se lance au lancement
init : function(MonBouton,Img){

(...)

//si c'est un bouton submit
if(MonBouton.getAttribute("type")=="submit"){

//on recupere le nom du noeud parent qui contient
//un attribut action ( donc un formulaire )
while(MonBouton.parentNode.getAttribute("action")==null){
MonBouton=MonBouton.parentNode
}
formTOsubmit=MonBouton.parentNode
imgButton.formTOsubmit=    formTOsubmit

//on attache l'evenement
this.addEvent(imgButton, "mousedown", this.set_onSubmit,false)
}else

//si c'est un bouton de type button
if(MonBouton.getAttribute("type")=="button"){
//on attache l'action au click du bouton sur le click du composant
imgButton.onclick    =    MonBouton.onclick

//on attache l'evenement
this.addEvent(imgButton, "mousedown", this.set_onClick,false)
}
},

//action sur le onclick pour les input button
set_onClick : function(){
var theCaller=((this.style)?this:event.srcElement);
theCaller.setAttribute("src",theCaller.Img_onPress)
} ,

//action sur le onsubmit sur les submit type
set_onSubmit : function(){
var theCaller=((this.style)?this:event.srcElement);
theCaller.setAttribute("src",theCaller.Img_onPress)
this.formTOsubmit.submit();

}

}

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