Voici le premier article d’une série Sur les composants graphiques.
Les composants graphiques c’est quoi?

 

Les composants graphiques sont des objets javascript qui permettent de contrôler des interfaces graphiques

 

Ils consistent en objets javascript ( afin de faciliter le déploiement ) qui implémentent des méthodes aux différents éléments d’une page afin d’en modifier l’apparence, les propriété, ou les comportements face aux actions utilisateurs,
tout en modifiant au minimum le code de la page html.Un composant doit être autonome et portable.
(Pfiou on respire)

 

Parmi les composants graphiques les plus connu il y a swfIR ou CRIR

 

J’ai décidé de m’intéresser au composants graphiques le jour ou un graphiste m’a donné a intégré une maquette ou les “selects” étaient tellement jolis que « Même dans flash tu fais pas mieux / bordel comment je vais coder ça !»

 

Ce premier article va décrire les bases des composants graphiques en s’appuyant sur un cas simple: la manipulation et le contrôle d’un élément input. Ce tuto na va pas présenter des choses extraordinaires ( on va simplement réalisation un état visuel sur le focus et le blur !!), mais montrera les bases de la création d’un composant, et servira de base pour les autres tutos a venir.

 

voir le résultat

 

Les points qui vont etre abordées sont:

• le ciblage d’élements DOM en javascript

• la programmation objet en javascript

• la manipulation de propriété d’un élément du DOM via javascript

Sommaire:

• bien démarrer

• le code html

• création de l’objet MonComposant_Input

• création de la méthode setParameters

• création des méthodes setParametersFocus et setParametersBlur

• Attacher et appeler les méthodes

• conclusion

Bien démarrer :

Dans tous mes projets Js/DOm j’ai toujours un fichier DomEvent.js avec toute une série de fonctions qui permettent de faciliter la manipulation du DOM.
Pour ce tuto je vais utiliser 3 fonctions de ce fichier.

 

[javascript]
//fonction qui permet de lancer des actions au load de la page (équivalent a windows.onload)
addLoadEvent(maFunction)

//fonction qui permet de récupérer un tableau d’éléments DOM a partir d’un nom de classeet qui retourne un tableau avec tout les éléments DOM de classe “maClasse”
getElementsByClassName(”maClasse”, “*”, document)

//fonction crossbrowser pour appliquer des écouteurs aux objets
addEvent(maDiv, “click”, maFonction)

[/javascript]
le détail des fonctions est diponible dans les fichier sources .

Voila maintenant que l’on a toutes nos fonctions pour manipuler le DOm de nos pages, on va s’attaquer a notre composant graphique.

 

Le code html

On va partir d’un fichier tout simple, auquel on va attacher nos 2 fichier css domEvent.js et
Dans ce fichier on va mettre un input de classe ‘custumInput’.

[javascript]


[/javascript]

 

[javascript]

[/javascript]la class custumInput va nous permettre de cibler notre element en javascript.Le fait d’utiliser une classe permet de faciliter l’implémentation. 

Création de l’objet MonComposant_Input

C’est dans le fichier graphicComponent.js que va se faire le gros du boulot.

On va tout d’abord créer le pseudoObjet MonComposant_Input , puis l’implémenter sur toutes éléments de classe ‘custumInput’

[javascript]

/*creation de notre pseudoObjet MonComposant_Input*/
function MonComposant_Input(Input){
this.monInput=Input;
}

/* c’est dans cette fonction que l’on attache des occurence de MonComposant_Input et que l’on définira les différents paramètres de notre composant */
function InitconfigSelect(){
//tableau avec tout nos elements de classe “custumInput”
var Inputs=getElementsByClassName(”custumInput”, “*”, document)

for(var i=0; i<Inputs.length ; i++){
this.monInput=Inputs[i];
var MonComposantInput = new MonComposant_Input(this.monInput);
}
}

/*on lance la fonction au chargement de la page*/
addLoadEvent(InitconfigSelect);
[/javascript]

 

Implémentation de la méthode setParameters

Une fois que notre objet est crée, on va lui attacher des méthodes.
En javascript cela peut se faire grâce à prototype

On va créer une première méthode qui va recevoir tout les paramètres de configuration des focus

La fonction setParameters recevra nos couple de valeur, et aura pour mission de les stocker dans notre objet

• [ColorBlur,ColorFocus] // parametre color, au blur et au focus
• [BackgroundBlur,BackgoundFocus] // parametre background-color, au blur et au focus
• [BorderBlur,BorderFocus] // parametre border-color, au blur et au focus

[javascript]
MonComposant_Input.prototype={

setParameters:function(){
//fonction qu’on lance a l’initailisation de l’objet
this.monInput.ColorBlur = this.mesParametres["colorBlur"]
this.monInput.ColorFocus = this.mesParametres["colorFocus"]
this.monInput.BackgroundBlur = this.mesParametres["backgroundBlur"]
this.monInput.BackgoundFocus = this.mesParametres["backgroundFocus"]
this.monInput.BorderBlur = this.mesParametres["borderBlur"]
this.monInput.BorderFocus = this.mesParametres["borderFocus"]
this.monInput.style.borderStyle = “solid”
this.monInput.style.Color = this.monInput.ColorBlur;
this.monInput.style.backgroundColor = this.monInput.BackgroundBlur;
this.monInput.style.borderColor = this.monInput.BorderBlur;
},

}
[/javascript]

Implémentation des méthodes setParametersFocus et setParametersBlur

maintenant qu’on a stocké les paramètres on va créer des méthode pour les différents événements On va créer une méthode pour le focus et une pour le blur

[javascript]

MonComposant_Input.prototype={

setParameters:function(){
//fonction qu’on lance a l’initailisation de l’objet
…
},
//fonction qui s’applique au focus
setParametersFocus:function(){
//sous IE, this renvoye un objet.
//sous Fiorefox this renvoye un element de DOM
//donc si on est sous IE, on va cibler this.srcElement pour récupérer un element de DOM
//alors que sous Firefox on garde ‘this’
//>> merci a vincent Tavernier pour la bidouille
var theCaller=((this.style)?this:event.srcElement);
theCaller.style.Color = theCaller.ColorFocus;
theCaller.style.backgroundColor = theCaller.BackgoundFocus;
theCaller.style.borderColor = theCaller.BorderFocus;

},
//fonction qui s’applique au Blur
setParametersBlur:function(){

var theCaller=((this.style)?this:event.srcElement);
theCaller.style.Color = theCaller.ColorBlur;
theCaller.style.backgroundColor = theCaller.BackgroundBlur;
theCaller.style.borderColor = theCaller.BorderBlur;
}
}
[/javascript]

Attacher et appeler les méthodes

Une fois que nos 3 méthodes sont crées, il va falloir les appeler.

setParameters sera appelé a la création de l’occurrence de MonComposant_Input , dans la fonction configInput() ;

[javascript]

function configInput(){
//on cible tout les elements de class “custumInput”
var Inputs=getElementsByClassName(”custumInput”, “*”, document)
//on définit un tableau associatif avec nos parametres
var mesParametres={
“colorBlur” : “#000000″,
“colorFocus” : “#ffffff”,
“backgroundBlur” : “#ffffff”,
“backgroundFocus” : “#000000″,
“borderBlur” : “red”,
“borderFocus” : “blue”
}
//un boucle qui va initialiser tout nos objets
for(var i=0; i

this.monInput=Inputs[i];
var MonComposantInput = new MonComposant_Input(this.monInput,mesParametres);
} 

}

[/javascript]

setParametersFocus et setParametersBlur seront appelé au focus et au blur, grâce a la fonction addEvent (dans le fichier domEvent.js )

 

Pour attacher les événements à notre objet, on va appeler la fonction addEvent dans le constructeur.

[javascript]

function MonComposant_Input(Input,mesParametres){
this.monInput=Input;
this.mesParametres=mesParametres;
this.setParameters();

addEvent(this.monInput, “focus”, this.setParametersFocus)//implementation de l’evenement
addEvent(this.monInput, “blur”, this.setParametersBlur) //implementation de l’evenement
}

[/javascript]

Conclusion

L’utilisation de la programmation objet pour les exemples ci-dessus ne présente pas beaucoup d’intérêt en soi, mais permet de présenter les différentes mécaniques utilisées pour faire des composants graphiques.

Dans les prochains tutos nous irons plus loins dans la création de composants graphiques:
Nous verrons comment créer un nouvel element dans une page, et comment remplacer des elements existants.

Le dernier tuto de la série s’attachera a expliquer comment passer d’une série d’objets javascripts a une vrai librairie un composant graphique, autonome et modulaire.

LIENS

fichier sources