. ♪
I. Introduction▲
Enfin nous allons attaquer les choses sérieuses avec la conception du 1er composant de notre « Bibliothèque de Composants Graphiques ».
Dans ce chapitre, nous allons établir un cahier des charges pour un composant de type Button. Vous aurez bien évidemment accès aux sources commentées afin de mettre en pratique tout ce que vous aurez appris.
II. CDCF d'un Bouton▲
Nous allons commencer par un bref descriptif des fonctionnalités de base d'un bouton avec le fameux Cahier Des Charges Fonctionnel.
Un bouton est un composant, qui peut être cliqué, survolé et qui dispose d'une apparence personnalisable pour chacun de ses états.
Comme vous pouvez le constater, il est facile de définir un composant bouton.
Le composant en lui-même reste simple à réaliser. Les prochains seront plus compliqués !
Commençons donc par lister tous les états que nous désirons obtenir sur notre bouton :
- Normal : le composant est « au repos », il n'est ni survolé, ni cliqué :
- Survol : l'utilisateur passe et laisse sa souris au-dessus du bouton sans toutefois cliquer dessus :
- Cliqué ou clic maintenu : l'utilisateur réalise un clic gauche et laisse le bouton de sa souris maintenu.
Nous possédons à présent un CDCF (Cahier Des Charges Fonctionnel) court et précis.
Le CDCF nous donne la marche à suivre pour la mise en place du CDCT (Cahier Des Charges Technique).
III. CDCT d'un bouton▲
Pour rédiger le Cahier Des Charges Technique, nous procédons comme pour la classe de base UIComponent (lisez le Chapitre 3 : Les fonctionnalités de base d'une bibliothèque de composants).
C'est-à-dire que nous reprenons le CDCF et nous nous chargeons de le « traduire » en langage technique, apportant ainsi plusieurs précisions utiles pour le développement.
Un bouton est un composant, qui peut être cliqué, survolé et qui dispose d'une apparence personnalisable pour chacun de ses états.
Voici la liste des états d'un bouton (déterminée dans le CDFC) : Normal, Survol, Cliqué.
Contraintes techniques
À partir des différents états d'un bouton, nous définissons les contraintes techniques suivantes :
-
Écouter les évènements de type :
- MouseEvent.MOUSE_DOWN : état Cliqué,
- MouseEvent.MOUSE_UP : état Survol,
- MouseEvent.ROLL_OVER : état Survol,
- MouseEvent.ROLL_OUT : état Normal ;
- Actualiser l'état graphique du bouton en fonction des évènements reçus ;
- Overrider la fonction (c'est-à-dire redéfinir son comportement) du composant de base UIComponent afin de mettre à jour chacun des états graphiques du Button.
Nous ajoutons également la contrainte technique suivante :
Ajout d'un champ texte qui se nommera « label » au sein du bouton et donner la possibilité d'y accéder depuis l'extérieur.
Pour cela, nous coderons deux getters et un setter :
- un getter labelField qui retournera directement le champ texte ;
- un getter label qui retournera le texte du champ texte ;
- un setter label qui permettra de définir le texte du champ texte.
Notre champ texte sera de type UITextfield, cette classe est définie dans le package com.actionscriptfacile.ui.text. Nous reviendrons sur son implémentation lors du chapitre dédié au composant UITextfield.
IV. Conclusion▲
Nous disposons maintenant d'un bel objet de type Button. Celui-ci nous sera utile pour les développements de nos futurs composants.
Le composant Button peut être cliqué, survolé et un état graphique nous permet de visualiser une réelle interaction.
Cliquez pour lire la vidéo
Évolutions des fonctionnalités
Dans les paragraphes suivants, vous trouverez des exemples de fonctionnalités à implémenter dans le « framework ActionScript Facile ».
N'hésitez pas à poster vos exemples sur le Forum AS3 DeveloppezForum AS3 Developpez. À vous de jouer !
Lock Button
Vous pouvez essayer de créer une classe permettant de gérer un groupe de plusieurs boutons. En fonction du bouton cliqué, des actions différentes sont lancées. Le bouton cliqué ne peut pas être de nouveau activé. Un peu comme la gestion d'un menu de « Lock Button ».
Skin
De plus, vous pouvez essayer de mettre à jour en direct l'apparence de vos boutons. Par exemple en cliquant sur 1 de vos « Lock Button », l'apparence du bouton est modifiée.
Sources commentées :
- com.actionscriptfacile.button.Button.as
- ButtonExample.as
- com.as3facileexemple.skin.classic.DefaultButtonSkin.as
Vous trouverez ci-dessous l'ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre leur fonctionnement.
Vous pouvez télécharger le fichier zip : Téléchargement Composant Button ActionScript Facile
Il contient l'ensemble du code source que nous venons de créer dans ce chapitre.
N'hésitez pas à poser vos questions sur le Forum AS3 DeveloppezForum AS3 Developpez.
package com.actionscriptfacile.ui.button
{
import com.actionscriptfacile.skin.ISkin;
import com.actionscriptfacile.ui.UIComponent;
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.MouseEvent;
import com.actionscriptfacile.ui.text.UITextField;
/**
* Un objet de type Button est un objet
* @author Matthieu
*/
public class Button extends UIComponent
{
/**
* Constantes qui vont nous servir à définir des styles dans les objets de skin par défaut @see com.as3facileexemple.skin.classic.DefaultButtonSkin
*/
static public const BUTTON_UP_SKIN:String = "BUTTON_UP_SKIN";
static public const BUTTON_DOWN_SKIN:String = "BUTTON_DOWN_SKIN";
static public const BUTTON_OVER_SKIN:String = "BUTTON_OVER_SKIN";
/**
* Constantes qui vont nous servir à changer l'état du bouton par le biais d'un appel à la méthode setState
*/
static protected const UP_STATE:String = "UP_STATE";
static protected const DOWN_STATE:String = "DOWN_STATE";
static protected const OVER_STATE:String = "OVER_STATE";
protected var m_overStyle:DisplayObject; // objet graphique représentant l'état OVER
protected var m_upStyle:DisplayObject; // objet graphique représentant l'état UP
protected var m_downStyle:DisplayObject; // objet graphique représentant l'état DOWN
protected var m_label:UITextField; // objet de type UITextField qui est en fait un champ texte un peu amélioré
public function Button()
{
/*
* ajout d'une méthode init pour gagner des ressources, en effet en AS3 tout ce qui se trouve dans le constructeur n'est
* pas optimisé à la compilation, on met donc toutes nos instructions dans une méthode privée init
* */
init();
}
/**
* Détruit proprement un objet de type Button
*/
override public function destroy():void
{
/**
* On s'extrait de la display list de notre parent, on détruit notre composant m_label de type UITextField ainsi
* que nos objets graphiques qui représentent les différents états et on appelle la méthode
* destroy() parente @see com.actionscriptfacile.ui.UIComponent
*/
if ( parent && parent.contains( this ) )
parent.removeChild( this );
m_label.destroy();
m_label = null;
m_upStyle = m_downStyle = m_overStyle = null;
super.destroy();
}
/**
* Initialise proprement les différents éléments du composant
*/
private function init():void
{
/**
* Création d'un objet de type UITextField que l'on assigne à la variable membre m_label.
* On aligne son texte par défaut en justifié et on indente le texte de 2 pixels.
* Ensuite nous mettons des valeurs totalement arbitraires pour les propriétés width, maxwidth, height
* et maxheight que l'on pourra changer par la suite.
*/
m_label = addChild( new UITextField() ) as UITextField;
m_label.alignJustify();
m_label.changeFormat( 'indent', 2 );
m_label.maxHeight = m_label.height = 30;
m_label.maxWidth = m_label.width = 80;
/**
* nos objets graphiques de style sont des sprites vides par défaut
*/
m_overStyle = addChild( new Sprite() );
m_upStyle = addChild( new Sprite() );
m_downStyle = addChild( new Sprite() );
setState( UP_STATE );
mouseChildren = false;
}
/**
* Quand on sort de la display list du stage on tue tous les events listeners ce qui économise des ressources
*/
override public function onRemovedFromStage():void
{
removeEventListener( MouseEvent.MOUSE_UP, overHandler, false );
removeEventListener( MouseEvent.ROLL_OUT, upStateHandler, false );
removeEventListener( MouseEvent.MOUSE_DOWN, downStateHandler, false );
removeEventListener( MouseEvent.ROLL_OVER, overHandler, false );
}
/**
* On initialise les events listeners uniquement lorsque le composant est ajouté à la displaylist du stage.
* En procédant de la sorte, on utilise les ressources uniquement lorsque cela s'avère nécessaire.
*/
override public function onAddedToStage():void
{
addEventListener( MouseEvent.MOUSE_UP, overHandler, false );
addEventListener( MouseEvent.ROLL_OUT, upStateHandler, false );
addEventListener( MouseEvent.MOUSE_DOWN, downStateHandler, false );
addEventListener( MouseEvent.ROLL_OVER, overHandler, false );
}
/**
* @see com.actionscriptfacile.ui.UIComponent
*/
override public function resize( p_width:Number, p_height:Number ):void
{
/*
* on redéfinit les maxWidth et maxHeight de notre m_label et on les définit à la taille de notre composant button.
* Ensuite on redéfinit la taille de nos composants m_overStyle, m_downStyle, m_upStyle.
* */
m_label.maxWidth = p_width;
m_label.maxHeight = p_height;
m_overStyle.width = m_label.width = m_downStyle.width = m_upStyle.width = p_width;
m_overStyle.height = m_label.height = m_downStyle.height = m_upStyle.height = p_height;
}
/**
* Au survol on affiche l'état OVER par le biais de la méthode setState
* @param e Evenement de type MouseEvent
*/
private function overHandler(e:MouseEvent):void { setState( OVER_STATE ); }
/**
* Au survol on affiche l'état DOWN par le biais de la méthode setState
* @param e Evenement de type MouseEvent
*/
private function downStateHandler(e:MouseEvent):void { setState ( DOWN_STATE ); }
/**
* Au survol on affiche l'état UP par le biais de la méthode setState
* @param e Evenement de type MouseEvent
*/
private function upStateHandler(e:MouseEvent):void { setState( UP_STATE ); }
/**
* Définit le texte du composant m_label de type UITextField @see com.actionscriptfacile.ui.text.UITextField
*/
public function set label( p_label:String ):void { m_label.text = p_label; }
/**
* Retourne le texte du composant m_label de type UITextField @see com.actionscriptfacile.ui.text.UITextField
*/
public function get label():String { return m_label.text; }
/**
* Retourne le composant m_label de type UITextField @see com.actionscriptfacile.ui.text.UITextField
*/
public function get labelField():UITextField { return m_label; }
/**
*
* Cette méthode applique la skin définie en paramètre au composant.
*
* @param p_skin Objet implémentant l'interface ISkin
*/
override public function applySkin(p_skin:ISkin):void
{
// on définit une variable de type Class qui servira à réceptionner toutes les définitions de notre objet skin
var definition:Class;
// on cherche la définition au sein de la skin qui répond au nom : BUTTON_OVER_SKIN
definition = p_skin.getSkin( BUTTON_OVER_SKIN ) as Class;
// si cette définition existe alors on crée une nouvelle instance et on l'assigne à l'élément m_overStyle
if ( definition != null )
m_overStyle = new definition();
/*
* On applique le même procédé pour tous les autres éléments du bouton
* */
definition = p_skin.getSkin( BUTTON_DOWN_SKIN ) as Class;
if ( definition != null )
m_downStyle = new definition();
definition = p_skin.getSkin( BUTTON_UP_SKIN ) as Class;
if ( definition != null )
m_upStyle = new definition();
// on ajoute nos styles à la display list
addChild( m_upStyle );
addChild( m_downStyle );
addChild( m_overStyle );
// on affiche l'état par défaut.
setState ( UP_STATE );
// Et on redimensionne proprement nos nouveaux objets graphiques / états
resize( width, height );
}
/**
*
* Change l'état graphique du bouton en fonction du paramètre p_state qui répresente l'id de l'état à afficher.
* Si l'état n'est pas valide, l'état par défaut est l'état UP_STATE.
*
* @param id de l'état à afficher
*/
protected function setState( p_state:String ):void
{
// on enlève tous les enfants de la display list
while ( numChildren > 0 )
removeChildAt( 0 );
// puis on ajoute celui qui représente notre état.
switch ( p_state )
{
case OVER_STATE:
addChild( m_overStyle );
break;
case DOWN_STATE:
addChild( m_downStyle );
break;
default:
addChild( m_upStyle );
break;
}
addChild( m_label );
}
}
}package
{
import com.actionscriptfacile.ui.button.Button;
import com.as3facileexemple.skin.classic.DefaultButtonSkin;// import du skin du bouton
import flash.display.Sprite;
/**
* Exemple d'utilisation du composant Button.
* @author Matthieu
*/
public class ButtonExample extends Sprite
{
public function ButtonExample():void
{
// création un objet de type Button
var button:Button = new Button();
// définition du texte
button.label = 'Button Component';
// Application de la skin par défaut
// [ Attention ! Cette skin utilise le fichier ui.swc qui doit être ajouté à la liste des composants à passer au compilateur ]
button.applySkin( new DefaultButtonSkin() );
// ajout à la displaylsit
addChild( button );
// définition de sa taille en 150 * 30 pixels
button.resize( 150, 30 );
// définition de la position du button sur la scène
button.x = 60;
button.y = 60;
// acccès au composant de type UITextField (labelField)
button.labelField.alignCenter(); // centre le texte
button.labelField.changeFormat("color", 0xffffff);// changement de la couleur du texte
button.labelField.changeFormat("size", 14);// changement de la taille de la police du texte
button.labelField.changeFormat("font", "Arial");// changement de la police du texte
}
}
}package com.as3facileexemple.skin.classic
{
// Import des classes gérant la partie graphique du composant dans le fla (movieclip)
// Provient de ui.swc (créé avec la compilation de UI.fla)
import com.as3facile.skin.button.ButtonDownSkin;
import com.as3facile.skin.button.ButtonOverSkin;
import com.as3facile.skin.button.ButtonUpSkin;
import com.actionscriptfacile.skin.Skin;
import com.actionscriptfacile.ui.button.Button;
/**
* Définition du skin utilisé pour un composant Button
*
* @author Matthieu
*/
public class DefaultButtonSkin extends Skin
{
public function DefaultButtonSkin()
{
// Affectation de chaque élément du bouton à un skin
setSkin( Button.BUTTON_DOWN_SKIN , ButtonDownSkin );// élément du bouton, classe graphique (movieclip) associée
setSkin( Button.BUTTON_OVER_SKIN, ButtonOverSkin );
setSkin( Button.BUTTON_UP_SKIN , ButtonUpSkin );
}
}
}V. Remerciements / Téléchargement▲
Je tiens ici à remercier La Rédactrice Kalyparker pour la mise au gabarit de l'article original au format Developpez.com.
Merci beaucoup à l'équipe Developpez.com de contribuer à la diffusion du Framework ActionScript-Facile.
TéléchargezTéléchargez le Framework AS3 Facile l'ensemble des classes commentées du Framework AS3 FacileTéléchargez le Framework AS3 Facile (avec le code source et les exemples de tous les Composants AS3).