Sujets sur : Framework AS3 Facile
Comment créer une ScrollBar en AS3 ?
Nous sommes enfin prêt à attaquer le composant classique que tout développeur a développé au moins une fois dans sa vie. J’ai nommé la Scrollbar !
Nous étudierons dans un premier temps la scrollbar verticale. Rassurez-vous, le raisonnement est exactement le même dans le sens horizontal.
I – Cahier Des Charges Fonctionnel d’une ScrollBar
I – Cahier Des Charges Fonctionnel d’une ScrollBarNous allons commencer par un bref descriptif des fonctionnalités d’une ScrollBar Vertical.
Une ScrollBar Vertical est un composant graphique qui permet à l’utilisateur de faire défiler ( il s’agit de scroll, ou scrolling ) verticalement un objet graphique (autrement appelé le content) au sein d’une zone définie au préalable (la scrollArea).
Une ScrollBar Vertical est constituée de 4 entités :
- Un objet graphique, qui, lors d’un click, permet de scroller le content vers le haut.
- Un objet graphique, qui, lors d’un click, permet scroller le content vers le bas.
- Un objet graphique pouvant être glissé au sein d’une zone, le dit glissement ayant une répercussion directe sur le scroll du content. Nous l’appèlerons le scroller.
- Un objet graphique représentant la zone dans laquelle le scroller peut être déplacé. Lors d’un click sur cette zone, le scroller est déplacé à l’endroit du click entraînant ainsi le scrolling du content. Nous l’appelerons le background.
Comme pour le Composant AS3 Button, chacune des entités du composant VerticalScrollBar devra être personnalisable graphiquement.
De plus, le content doit pouvoir être redéfini à tout moment, ainsi que la scrollArea.
II – Cahier Des Charges Techniques d’une ScrollBar
Comme pour les composants précédents, nous traduisons le CDCF (Cahier Des Charges Fonctionnel) en termes techniques. Pour cela, nous rédigeons le CDCT (Cahier Des Charges Technique).
“Une VerticalScrollBar est un composant graphique qui permet à l’utilisateur de faire défiler ( on parle de scroll, ou scrolling ) verticalement un objet graphique ( autrement appelé le content ) au sein d’une zone définie au préalable ( la scrollArea ).”
La classe ScrollManager
Pour ce type de fonctionnement, nous allons créer une classe nommée ScrollManager. Cette classe se chargera de gérer le scrolling du content.
Le composant graphique VerticalScrollBar, quand à lui, se chargera :
- d’instancier la ScrollManager.
- d’envoyer les paramètres nécessaires à la ScrollManager.
- de mettre à jour la ScrollManager.
La classe VerticalScrollBar
“Une VerticalScrollBar est constituée de 4 entités.”
Nous allons donc créer une classe nommée VerticalScrollBar qui étendra la classe de base UIComponent. La classe VerticalScrollBar hérite ainsi de toutes les fonctionnalités de base d’un composant utilisateur telles que définies dans sa classe parente.
- “Un objet graphique, qui, lors d’un click, permet de scroller le content vers le haut.”
Un simple Button, qui, lors d’un click, demandera au scrollManager de scroller le content vers le haut.
- “Un objet graphique, qui, lors d’un click, permet scroller le content vers le bas.”
Un simple Button, qui, lors d’un click, demandera au scrollManager de scroller le content vers le bas.
- “Un objet graphique pouvant être glissé au sein d’une zone, le dit glissement ayant une répercussion directe sur le scroll du content. Nous l’appellerons le scroller.”
Un Button sur lequel nous appliquerons un startDrag() lors d’un clic maintenu, que nous désactiverons dès que l’utilisateur relâchera sa souris.
- “Un objet graphique représentant la zone dans laquelle le scroller peut être déplacé. Lors d’un click sur cette zone, le scroller est déplacé à l’endroit du click entraînant ainsi le scrolling du content. Nous l’appelerons le background.”
Un UIComponent sur lequel on écoutera les évènements de type MouseEvent.CLICK. Il se chargera de déplacer le scroller au niveau du point de click ce qui entraînera des modifications au niveau du ScrollManager.
- “Chacune des entités du composant devra être personnalisable graphiquement.”
Override de la fonction “applySkin” de base afin de mettre à jour le style de chacun des éléments composants la scrollBar.
- “Le content doit pouvoir être redéfini à tout moment, ainsi que la scrollArea.”
Nous créerons ainsi deux getters / setters au sein de la classe ScrollManager que nous laisserons accessibles depuis l’extérieur de la VerticalScrollBar.
Conclusion
Et voila, nous avons terminé de créer notre ScrollBar verticale.
Le composant VerticalScrollBar vous permet de scroller verticalement un objet graphique au sein d’une zone définie.
|
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/verticalscrollbar_exemple.swf |
Évolutions des fonctionnalités
Pour améliorer notre Composant AS3 ScrollBar, voici quelques exemples de fonctionnalités supplémentaires à implémenter. Postez vos exemples dans les commentaires.
Maintenant c’est à vous de jouer !
HorizontalScrollBar
Développez une scrollbar horizontale, la tâche vous est simplifiée. Effectivement, notre ScrollManager (définit dans com.actionscriptfacile.ui.scroll.manager) offre la possibilité de scroller un objet à l’horizontale.
Tween ScrollBar
Vous pouvez également ajouter un effet Tween (Elastic, Bounce…) lors du déplacement d’un contenu par les boutons de la ScrollBar. Lorsque l’utilisateur appuie sur le bouton ScrollUp par exemple, le contenu se déplace avec un léger effet Elastic.
Vous pouvez utiliser le framework TweenMax : un ensemble de classes pour utiliser des tween plus facilement.
Sources commentées
- com.actionscriptfacile.ui.scroll.manager.ScrollManager.as
- com.actionscriptfacile.ui.scroll.manager.IScrollManager.as
- com.actionscriptfacile.ui.scroll.components.VerticalScrollBar.as
- com.actionscriptfacile.ui.scroll.components.ScrollUpButton.as
- com.actionscriptfacile.ui.scroll.components.ScrollerButton.as
- com.actionscriptfacile.ui.scroll.components. ScrollDownButton.as
- VerticalScrollBarExample.as
- com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin.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écharger “Composant Vertical ScrollBar Framework AS3 Facile”
Allez, montrez moi votre code d’une ScrollBar horizontale…
Utilisez les commentaires ci-dessous, j’apporterais des corrections sur votre code si nécessaire.
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.manager.ScrollManager.as » bookmarkname= »com.actionscriptfacile.ui.scroll.manager.ScrollManager.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
package com.actionscriptfacile.ui.scroll.manager { import flash.geom.Rectangle; import flash.display.DisplayObject; import com.actionscriptfacile.ui.scroll.manager.IScrollManager; /** * Un ScrollManager permet de scroller n'importe quel DisplayObject définit par sa variable content verticalement * et horizontalement au sein d'une zone définie par sa propriété scrollArea. * * @author Matthieu */ public class ScrollManager implements IScrollManager { private var m_content:DisplayObject; // reference vers le contenu à scroller private var m_scrollV:Number; // pourcentage de scroll Vertical private var m_scrollH:Number; // pourcentage de scroll Horizontal private var m_scrollArea:Rectangle; // zone de scroll private var m_vertical:Boolean; // indique si le manager doit scroller l'objet à la verticale ou non private var m_horizontal:Boolean; // indique si le manager doit scroller l'objet à l'horizontale ou non public function ScrollManager() { m_scrollArea = new Rectangle(); m_scrollV = m_scrollH = 0; m_content = null; m_vertical = m_horizontal = false; } /** * Détruit proprement le ScrollManager */ public function destroy():void { m_content = null; m_scrollArea = null; delete this; } /** * Fonction qui actualise l'état graphique du composant et de tous ses éléments. */ private function replace():void { if ( m_content == null ) // Si le contenu n'est pas défini, on a pas besoin d'actualiser quoi que ce soit { return; } var diff:Number; if ( m_horizontal ) // si on scroll à l'horizontale { // la variable diff vaut la largeur du contenu - la largeur de la zone de scroll diff = m_content.width - m_scrollArea.width; if ( diff < 0 ) diff = 0; // on rédéfinit la position horizontale du contenu m_content.x = m_scrollArea.x - ( diff * m_scrollH ); } if ( m_vertical )// si on scroll à la verticale { // la variable diff vaut la hauteur du contenu - la hauteur de la zone de scroll diff = m_content.height - m_scrollArea.height; if ( diff < 0 ) diff = 0; // on rédéfinit la position verticale du contenu m_content.y = m_scrollArea.y - ( diff * m_scrollV ); } } /** * Permet de signaler au manager si le contenu doit être scrollé à la verticale ou pas */ public function get vertical():Boolean { return m_vertical; } public function set vertical(p_vertical:Boolean):void { m_vertical = p_vertical; } /** * Permet de signaler au manager si le contenu doit être scrollé à l'horizontale ou pas */ public function get horizontal():Boolean { return m_horizontal; } public function set horizontal(p_horizontal:Boolean):void { m_horizontal = p_horizontal; } /** * Permet de signaler au manager quel est le contenu à scroller */ public function set content(p_content:DisplayObject):void { m_content = p_content; replace(); } public function get content():DisplayObject{ return m_content; } /** * Récupère / définit le pourcentage de scrolling vertical du contenu */ public function set scrollV(p_scrollV:Number):void { m_scrollV = ( p_scrollV > 1 ) ? 1 : ( p_scrollV < 0 ) ? 0 : p_scrollV ; replace(); } public function get scrollV():Number { return m_scrollV; } /** * Récupère / définit le pourcentage de scrolling horizontal du contenu */ public function set scrollH(p_scrollH:Number):void { m_scrollH = ( p_scrollH > 1 ) ? 1 : ( p_scrollH < 0 ) ? 0 : p_scrollH ; replace(); } public function get scrollH():Number { return m_scrollH; } /** * Récupère / définit la zone de scroll du contenu */ public function set scrollArea(p_scrollArea : Rectangle) : void { m_scrollArea = p_scrollArea; replace(); } public function get scrollArea() : Rectangle { return m_scrollArea; } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.manager.IScrollManager.as » bookmarkname= »com.actionscriptfacile.ui.scroll.manager.IScrollManager.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
package com.actionscriptfacile.ui.scroll.manager { import flash.display.DisplayObject; import flash.geom.Rectangle; /** * ... * @author Matthieu */ public interface IScrollManager { function destroy():void; function set content( p_content:DisplayObject ):void; function get content():DisplayObject; function set scrollV( p_scrollV:Number ):void; function get scrollV():Number; function set scrollH( p_scrollH:Number ):void; function get scrollH():Number; function get vertical():Boolean; function set vertical( p_vertical:Boolean ):void; function get horizontal():Boolean; function set horizontal( p_horizontal:Boolean ):void; function set scrollArea( p_scrollArea:Rectangle ):void; function get scrollArea():Rectangle; } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.components.VerticalScrollBar.as » bookmarkname= »com.actionscriptfacile.ui.scroll.components.VerticalScrollBar.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 |
package com.actionscriptfacile.ui.scroll.components { import com.actionscriptfacile.skin.ISkin; import com.actionscriptfacile.ui.scroll.manager.ScrollManager; import com.actionscriptfacile.ui.UIComponent; import flash.display.DisplayObject; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.geom.Rectangle; /** * Une VerticalScrollBar est un composant graphique qui permet à l'utilisateur de faire défiler * verticalement un objet graphique au sein d'une zone définie au préalable. * * @author Matthieu */ public class VerticalScrollBar extends UIComponent { private var m_manager:ScrollManager; // reference vers le scrollManager private var m_scroller:ScrollerButton; // Le bouton scroller private var m_background:Sprite; // Le background de la barre de scroll private var m_upButton:ScrollUpButton; // L'UIComponent "scroll up" private var m_bottomButton:ScrollDownButton; // L'UIComponent "scroll down" private var m_scrollV:Number; /** * Constantes de skin */ static public const SCROLL_VERTICAL_BACKGROUND_SKIN :String = 'SCROLL_VERTICAL_BACKGROUND_SKIN'; public function VerticalScrollBar() { /* * on crée une méthode init pour gagner des ressources, * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est * pas optimisé à la compilation, * on met donc toutes nos instructions dans une méthode privée init * */ init(); } /** * Initialise proprement un objet de type VerticalScrollBar */ private function init():void { m_manager = new ScrollManager(); // on crée un nouveau ScrollManager m_manager.content = null; // on définit son content à null m_manager.vertical = true; // on lui précise que l'on souhaite scrolle à la verticale m_manager.scrollV = 0; // on initiliase le pourcentage de scrolling vertical à 0. // Nous créeons ici les différents éléments de la VerticalScrollBar m_scroller = new ScrollerButton(); m_background = new Sprite(); m_upButton = new ScrollUpButton(); m_bottomButton = new ScrollDownButton(); } /** * Récupère / définit le contenu à "scroller" */ public function set content( p_content:DisplayObject ):void { m_manager.content = p_content; } public function get content():DisplayObject { return m_manager.content; } /** * Récupère définit la scrollArea (la zone de scroll) */ public function set scrollArea( p_scrollArea:Rectangle):void { m_manager.scrollArea = p_scrollArea; } public function get scrollArea():Rectangle { return m_manager.scrollArea; } /** * Récupère / définit le pourcentage de scrolling vertical du "content" */ public function get scrollV():Number { return m_scrollV; } public function set scrollV( p_scrollV:Number):void { // si le paramètre est supérieur à 1 ou inférieur à 0 alors on recadre les valeurs m_scrollV = ( p_scrollV > 1 ) ? 1 : ( p_scrollV < 0 ) ? 0 : p_scrollV ; // calcule la position (y) maximum que peut prendre le scroller // puis on le repositionne en fonction de cette valeur et du pourcentage de scroll var maxV:Number = m_background.height - m_scroller.height; m_scroller.y = m_background.y + ( maxV * m_scrollV ); } /** * Fonction interne utilisée pour réinitialiser les états des éléments graphiques */ private function reset():void { /** * On ajoute à la display list nos éléments background, scroller, scrollUp, scrollDown */ addChild( m_background ); addChild( m_upButton ); addChild ( m_bottomButton ); addChild( m_scroller ); /** * On réinitialise leurs coordonnées */ m_scroller.y = m_background.y = m_upButton.height; m_bottomButton.y = m_background.y + m_background.height; } /** * Fonction qui récupère le click sur les éléments, background, scrollUp et scrollDown. * * @param e Objet de type MouseEvent */ private function clickHandler(e:MouseEvent):void { switch( e.currentTarget ) // Si la cible est ... { // le scrollUp alors décrémente le pourcentage de scrolling vertical case m_upButton: scrollV -= .15; break; // le scrollDown alors incrémente le pourcentage de scrolling vertical case m_bottomButton: scrollV += .15; break; // le background alors calcule le pourcentage de scrolling vertical en fonction // de la position en y du click sur le background case m_background: scrollV = ( ( e.localY * m_background.scaleY ) / m_background.height ); break; } } /** * Fonction qui gère l'utilisation de la molette de la souris * * @param e paramètre de type MouseEvent */ private function wheelHandler(e:MouseEvent):void { /* on récupère la propriété delta que l'on divise par dix, puis on soustrait le résultat * */ scrollV -= e.delta * .1; } /** * Fonction servant à mettre à jour en temps réel le pourcentage de scrolling vertical * du composant, à le corriger si cela s'avère nécéssaire puis à répercuter ces modifications * sur le scrolling vertical du ScrollManager * * @param e paramètre de type Event */ private function enterFrameHandler(e:Event):void { // on calcule le pourcentage de scrolling vertical en fonction de la position en y du scroller m_scrollV = ( m_scroller.y - m_background.y ) / ( m_background.height - m_scroller.height); // on arrondit la valeur si nécéssaire if ( m_scrollV > 0.99 ) m_scrollV = 1; // on attribue la même valeur au ScrollManager m_manager.scrollV = m_scrollV; } /** * Fonction interne servant à gérer le glisser / déposer ( on parle de drag ) du scroller. * * @param e paramètre de type Event */ private function toggleDragHandler(e:Event):void { // si l'utilisateur appuie sur le bouton clic gauche de sa souris alors ... if ( e.type == MouseEvent.MOUSE_DOWN ) { /* on définit la zone de drag du bouton scroller * puis on fait appel à startDrag */ var rectangle:Rectangle = m_background.getRect( this ); rectangle.height -= m_scroller.height; rectangle.width = 0; m_scroller.startDrag( false, rectangle ); } else // sinon ... { // on stop le "drag" du composant scroller m_scroller.stopDrag(); } } /** * Lorsqu'on est retirés de la display List du stage on tue tous les eventListeners */ override public function onRemovedFromStage():void { if ( m_manager.content ) m_manager.content.removeEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false ); m_scroller.removeEventListener( UIComponent.RELEASE_OUTSIDE, toggleDragHandler, false ); m_scroller.removeEventListener( MouseEvent.MOUSE_DOWN, toggleDragHandler, false ); m_scroller.removeEventListener( MouseEvent.MOUSE_UP, toggleDragHandler, false ); removeEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false ); m_background.removeEventListener( MouseEvent.CLICK, clickHandler, false ); m_upButton.removeEventListener( MouseEvent.CLICK, clickHandler, false ); m_bottomButton.removeEventListener( MouseEvent.CLICK, clickHandler, false ); removeEventListener( Event.ENTER_FRAME , enterFrameHandler, false ); } /** * Losqu'on est ajouté à la displayList du stage, on initialise les eventListeners */ override public function onAddedToStage():void { // si le contenu n'est pas nul alors on gère les événements de type "molette" qui émanent de lui. if( m_manager.content ) m_manager.content.addEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false ); /* * on écoute les évenements de type : * * RELEASE OUTSIDE ( que l'on a recodé dans le chapitre 3, lire la classe UIComponent ) * MOUSE_DOWN et MOUSE_UP sur le composant scroller * */ m_scroller.addEventListener( UIComponent.RELEASE_OUTSIDE, toggleDragHandler, false ); m_scroller.addEventListener( MouseEvent.MOUSE_DOWN, toggleDragHandler, false ); m_scroller.addEventListener( MouseEvent.MOUSE_UP, toggleDragHandler, false ); /* * On écoute les click souris sur les background, scrollUp et scrollDown */ m_background.addEventListener( MouseEvent.CLICK, clickHandler, false ); m_upButton.addEventListener( MouseEvent.CLICK, clickHandler, false ); m_bottomButton.addEventListener( MouseEvent.CLICK, clickHandler, false ); /* * On écoute enfin les événements de type molette sur le composant * VerticalScrollBar entier */ addEventListener( MouseEvent.MOUSE_WHEEL, wheelHandler, false ); /** * On écoute les enterFrame, la fonction écouteur permet d'actualiser l'état * graphique des différents éléments du composant */ addEventListener( Event.ENTER_FRAME , enterFrameHandler, false ); } /** * Tue proprement un objet de type VerticalScrollBar */ override public function destroy():void { /** * On enlève de la displayList les différents éléments du composant * puis on enlève ce dernier de la displayList de son parent */ removeChild( m_upButton ); removeChild( m_bottomButton ); removeChild( m_scroller ); removeChild( m_background ); if ( parent && parent.contains( this ) ) parent.removeChild( this ); // on détruit le ScrollManager, puis le passe à null ainsi que tous les éléments graphiques m_manager.destroy(); m_manager = null; m_upButton = null; m_background = null; m_scroller = null; m_bottomButton = null; // Enfin nous appelons la fonction destroy() parente ( UIComponent ) super.destroy(); } /** * Fonction permettant de gérer la customisation des différents éléments * graphiques d'un objet de type VerticalScrollBar * * @param p_skin Objet implémentant l'interface ISkin */ override public function applySkin(p_skin:ISkin):void { /** * on applique la skin aux boutons */ m_scroller.applySkin( p_skin ); m_upButton.applySkin( p_skin ); m_bottomButton.applySkin( p_skin ); var definition:Class = p_skin.getSkin( SCROLL_VERTICAL_BACKGROUND_SKIN ); // si on a la définiton pour le background if ( definition != null ) { // on le détruit if( contains( m_background ) ) removeChild( m_background ); m_background = null; // on le réinstancie m_background = new definition(); } // ensuite on repositionne tous les éléments reset(); } /** * Fonction permettant de gérer intelligemment le redimensionnement * d'un objet de type VerticalScrollBar * * @param p_width la nouvelle largeur ( en pixels ) du composant * @param p_height la nouvelle hauteur ( en pixels ) du composant */ override public function resize( p_width:Number, p_height:Number ):void { m_background.width = m_bottomButton.width = m_scroller.width = m_upButton.width = p_width; m_scroller.height = ( p_height - m_bottomButton.height - m_upButton.height ) * 0.3; m_background.height = p_height - m_bottomButton.height - m_upButton.height; m_upButton.y = 0; m_background.y = m_upButton.height; m_bottomButton.y = m_background.y + m_background.height; // on appelle la méthode parente super.resize( p_width, p_height ); } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.components.ScrollUpButton.as » bookmarkname= »com.actionscriptfacile.ui.scroll.components.ScrollUpButton.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
package com.actionscriptfacile.ui.scroll.components { import com.actionscriptfacile.skin.ISkin; import com.actionscriptfacile.ui.button.Button; /** * Gestion du bouton de Scroll vers le haut pour une ScrollBar * * @author Matthieu */ public class ScrollUpButton extends Button { public static const SCROLLUP_VERTICAL_OVER_SKIN:String = 'SCROLLUP_VERTICAL_SKIN'; public static const SCROLLUP_VERTICAL_UP_SKIN:String = 'SCROLLUP_UP_SKIN'; public static const SCROLLUP_VERTICAL_DOWN_SKIN:String = 'SCROLLUP_DOWN_SKIN'; public function ScrollUpButton() { } /** * on crée une méthode init pour gagner des ressources, * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est * pas optimisé à la compilation, * on met donc toutes nos instructions dans une méthode privée init * * Méthode appelée directement par le parent Button */ override protected function init():void { super.init(); removeChild( m_label );// supprime le texte du bouton } /** * Fonction permettant de gérer la customisation des différents éléments * graphiques d'un objet * * @param p_skin Objet implémentant l'interface ISkin */ override public function applySkin( p_skin:ISkin ):void { p_skin.setSkin( BUTTON_OVER_SKIN, p_skin.getSkin( SCROLLUP_VERTICAL_OVER_SKIN ) ); p_skin.setSkin( BUTTON_UP_SKIN, p_skin.getSkin( SCROLLUP_VERTICAL_UP_SKIN ) ); p_skin.setSkin( BUTTON_DOWN_SKIN, p_skin.getSkin( SCROLLUP_VERTICAL_DOWN_SKIN ) ); super.applySkin( p_skin ); } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.components.ScrollerButton.as » bookmarkname= »com.actionscriptfacile.ui.scroll.components.ScrollerButton.as « ]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
package com.actionscriptfacile.ui.scroll.components { import com.actionscriptfacile.skin.ISkin; import com.actionscriptfacile.ui.button.Button; /** * Gestion du bouton de Scroller (au milieu de la ScrollBar) pour déplacer le contenu vers le haut ou le bas * * @author Matthieu */ public class ScrollerButton extends Button { public static const SCROLLER_VERTICAL_OVER_SKIN:String = 'SCROLLER_VERTICAL_SKIN'; public static const SCROLLER_VERTICAL_UP_SKIN:String = 'SCROLLER_UP_SKIN'; public static const SCROLLER_VERTICAL_DOWN_SKIN:String = 'SCROLLER_DOWN_SKIN'; public function ScrollerButton() { } /** * on crée une méthode init pour gagner des ressources, * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est * pas optimisé à la compilation, * on met donc toutes nos instructions dans une méthode privée init * * Méthode appelée directement par le parent Button */ override protected function init():void { super.init(); removeChild( m_label ); } /** * Fonction permettant de gérer la customisation des différents éléments * graphiques d'un objet * * @param p_skin Objet implémentant l'interface ISkin */ override public function applySkin( p_skin:ISkin ):void { p_skin.setSkin( BUTTON_OVER_SKIN, p_skin.getSkin( SCROLLER_VERTICAL_OVER_SKIN ) ); p_skin.setSkin( BUTTON_UP_SKIN, p_skin.getSkin( SCROLLER_VERTICAL_UP_SKIN ) ); p_skin.setSkin( BUTTON_DOWN_SKIN, p_skin.getSkin( SCROLLER_VERTICAL_DOWN_SKIN ) ); super.applySkin( p_skin ); } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.scroll.components.ScrollDownButton.as » bookmarkname= »com.actionscriptfacile.ui.scroll.components.ScrollDownButton.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
package com.actionscriptfacile.ui.scroll.components { import com.actionscriptfacile.skin.ISkin; import com.actionscriptfacile.ui.button.Button; /** * Gestion du bouton de Scroll vers le bas pour une ScrollBar * * @author Matthieu */ public class ScrollDownButton extends Button { public static const SCROLLDOWN_VERTICAL_OVER_SKIN:String = 'SCROLLDOWN_VERTICAL_SKIN'; public static const SCROLLDOWN_VERTICAL_UP_SKIN:String = 'SCROLLDOWN_UP_SKIN'; public static const SCROLLDOWN_VERTICAL_DOWN_SKIN:String = 'SCROLLDOWN_DOWN_SKIN'; public function ScrollDownButton() { } /** * on crée une méthode init pour gagner des ressources, * en effet en AS3 tout ce qui se trouvre dans le constructeur n'est * pas optimisé à la compilation, * on met donc toutes nos instructions dans une méthode privée init * * Méthode appelée directement par le parent Button */ override protected function init():void { super.init(); removeChild( m_label );// supprime le texte du bouton } /** * Fonction permettant de gérer la customisation des différents éléments * graphiques d'un objet * * @param p_skin Objet implémentant l'interface ISkin */ override public function applySkin( p_skin:ISkin ):void { p_skin.setSkin( BUTTON_OVER_SKIN, p_skin.getSkin( SCROLLDOWN_VERTICAL_OVER_SKIN ) ); p_skin.setSkin( BUTTON_UP_SKIN, p_skin.getSkin( SCROLLDOWN_VERTICAL_UP_SKIN ) ); p_skin.setSkin( BUTTON_DOWN_SKIN, p_skin.getSkin( SCROLLDOWN_VERTICAL_DOWN_SKIN ) ); super.applySkin( p_skin ); } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »VerticalScrollBarExample.as » bookmarkname= »VerticalScrollBarExample.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
package { import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar; import com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin;// import du skin de la VerticalScrollBar import flash.display.Sprite; import flash.geom.Rectangle; /** * Exemple d'utilisation du composant VerticalScrollBar. * @author Matthieu */ public class VerticalScrollBarExample extends Sprite { public function VerticalScrollBarExample() { // définition de la hauteur de la zone de scroll var nHeightScrollArea:Number = 150; // création d'un objet de type Sprite, il nous servira de content var content:Sprite = new Sprite(); content.graphics.beginFill( 0XFF0000 ); content.graphics.drawRect( 0, 0, 300, 300 ); content.graphics.endFill(); // création d'une scrollbar verticale var barre:VerticalScrollBar = new VerticalScrollBar(); barre.content = content;// définition de son content et de sa scrollArea barre.scrollArea = new Rectangle( 0, 20, 100, nHeightScrollArea ); // 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 ] barre.applySkin( new DefaultVerticalScrollBarSkin() ); // ajout à la displaylist addChild( barre ); addChild( content ); // détermination de la position de la ScrollBar barre.x = 350; barre.y = 20; content.x = 50; // définition de la taille de la scrollbar pour lui donner la hauteur de la zone à scroller barre.resize( barre.width, nHeightScrollArea ); } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultVerticalScrollBarSkin.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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.scroll.ScrollBarBackgroundSkin; import com.as3facile.skin.scroll.ScrollBottomButtonSkin; import com.as3facile.skin.scroll.ScrollUpButtonSkin; import com.as3facile.skin.scroll.ScrollerButtonSkin; import com.actionscriptfacile.skin.Skin; import com.actionscriptfacile.ui.scroll.components.VerticalScrollBar; /** * Définition du skin utilisé pour un composant VerticalScrollBar * * @author Matthieu */ public class DefaultVerticalScrollBarSkin extends Skin { public function DefaultVerticalScrollBarSkin() { setSkin( VerticalScrollBar.SCROLL_VERTICAL_BACKGROUND_SKIN, ScrollBarBackgroundSkin ); setSkin( VerticalScrollBar.SCROLL_VERTICAL_BOTTOM_SKIN, ScrollBottomButtonSkin ); setSkin( VerticalScrollBar.SCROLL_VERTICAL_UP_SKIN, ScrollUpButtonSkin ); setSkin( VerticalScrollBar.SCROLL_VERTICAL_SCROLLER_SKIN, ScrollerButtonSkin ); } } } |
[/codesyntax]
Comment créer un Composant Bouton en AS3 ?
Enfin nous allons attaquer les choses sérieuses avec la conception du 1er composant de notre « Bibliothèque AS3 de Composants Graphiques« .
Dans ce tutoriel, nous allons concevoir un composant de type Button. Et avec la possibilité de le personnaliser graphiquement!
I – Cahier Des Charges Fonctionnel 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).
II – Cahier Des Charges Techniques 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 AS3 ).
C’est à dire que nous reprenons le CDCF et nous nous chargeons de le “traduire” en langage technique. Nous apportons également plusieurs précisions utiles.
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é dans le CDFC) : Normal, Survol, Cliqué.
Contraintes techniques
A 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.
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.
|
1 |
http://e6msyji6epr.exactdn.com/wp-content/uploads/2010/09/button_exemple.swf |
Évolutions des fonctionnalités
Pour améliorer notre Composant AS3 Button, voici quelques exemples de fonctionnalités supplémentaires à implémenter.
N’hésitez pas à poster vos exemples dans les commentaires.
A vous de jouer !
Lock Button
Vous pouvez 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
Implémentez la possibilité de mettre à jour en direct l’apparence de vos boutons. Par exemple en cliquant sur l’un 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écharger “Composant Button du Framework AS3 Facile”
Et vous : Comment concevez vous vos Boutons en Actionscript 3 ?
Proposez vos exemples de codes AS3 dans les commentaires juste en dessous.
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.button.Button.as » bookmarkname= »com.actionscriptfacile.ui.button.Button.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 |
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 tout 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 rédé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éfinit 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 en crées 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 tout 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 ); } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »ButtonExample.as » bookmarkname= »ButtonExample.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
package { import com.actionscriptfacile.ui.button.Button; import com.as3facileexemple.skin.classic.DefaultButtonSkin;// import du skin du boutton 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éfinission 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 } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultButtonSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultButtonSkin.as »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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 ); } } } |
[/codesyntax]
Quelles sont les Fonctionnalités d’une Bibliothèque de Composants ActionScript 3 ?
Dans ce tutoriel, nous allons enfin aborder la pratique!
Nous allons développer les fonctionnalités de base de notre Bibliothèque de Composants AS3.
Comme nous l’avons précédemment (Chapitre 2 : Comment créer des Composants AS3 ?), nous commençons déjà par décrire ces fonctionnalités au sein d’un Cahier des Charges Fonctionnels (CDCF).
I – Cahier Des Charges Fonctionnel d’une Bibliothèque de Composants AS3
Nous avons déjà clairement défini dans le « Chapitre 1 : Pourquoi créer des Composants Graphiques en AS3 ?« , les Composants Graphiques.
Voici le résumé d’un Composant Graphiques en AS3 :
“Un composant est un élément qui apporte une interaction avec l’utilisateur, il est possible de le faire apparaître ou disparaître à volonté et il se doit d’être personnalisable au niveau de l’apparence.”
C’est une description courte, qui résume au niveau fonctionnel, ce que doit être composant graphique.
Les points importants d’un composant :
- Le composant doit apporter une interaction avec l’utilisateur, il s’agira donc bien entendu d’un objet graphique.
- Il est possible de le faire apparaître et disparaître à volonté : en effet, un composant doit pouvoir être supprimé et ajouté à la display list (la liste d’affichage) sans aucun effort.
- Il doit être personnalisable au niveau de l’apparence : notre composant devra pouvoir changer de style graphique, et ce, de la manière la plus simple qui soit.
Notre CDCF (Cahier des Charges Fonctionnels) est certes un peu court, toutefois, nous n’avons pas besoin de plus de précisions, celles-ci seront données dans le CDCT (Cahier des Charges Techniques).
II – Cahier Des Charges Techniques d’une Bibliothèque de Composants AS3
C’est la partie la plus intéressante, la description technique des fonctionnalités communes à l’ensemble de nos composants. Commençons sans plus tarder en reprenant le CDCT (Cahier des Charges Techniques).
Le composant apporte une interaction avec l’utilisateur
Notre classe de base sera donc un objet graphique, nous choisissons d’étendre la classe graphique de base flash.display.Sprite.
Possibilité de le faire apparaître ou disparaître volonté
En as3, nous pouvons manipuler la liste d’affichage ( aussi appelée display list ) avec les méthodes classiques de chaque objet graphique. Cependant, nous allons ajouter quelques fonctionnalités supplémentaires.
- Une méthode hide, qui nous permettra de “cacher” notre objet graphique en le supprimant de la display list, tout en sauvegardant son ancien objet parent dans une propriété “lastParent”.
- Un getter lastParent qui nous permettra de récupérer le dernier parent du composant.
- Une méthode show qui nous permettra de rajouter notre objet graphique à la display list de son lastParent.
Avec ces fonctionnalités communes à tous les composants, nous pouvons cacher / supprimer et montrer / ajouter un objet à la display list de manière extrêmement simplifiée, avec une seule méthode.
Personnalisable au niveau de l’apparence
Les composants doivent pouvoir être customisables, en anglais nous appelons cela le “skin” ( skin = peau ).
Ainsi, nous allons donc créer un objet “Skin” qui permet d’associer des valeurs de constantes à des noms de classes.
Nous enverrons ensuite cet objet “Skin” à une méthode nommée “applySkin”, définie dans une interface Iskinnable. Cette interface sera implémentée par tous nos composants.
Ajout de quelques fonctionnalités supplémentaires :
- Une méthode destroy, qui permet de détruire proprement notre composant.
- Une méthode resize, qui permet de redimensionner proprement notre composant.
- Une méthode onAdded qui s’exécute lorsque le composant sera ajouté à la display list d’un objet graphique, pour le premier.
- Une méthode onAddedToStage qui s’exécute lorsque le composant ou son parent sera ajouté à la displaylist du stage. Pour simplifier, cette méthode est appelée dès que la propriété stage du composant est disponible.
- Une méthode onRemoved qui s’exécute lorsque le composant est enlevé de la display list de son parent.
- Une méthode onRemovedFromStage qui s’exécute lorsque le composant est enlevé de la displaylist du stage.
- Un getter / setter de type Tooltip, nous reviendrons sur ce point plus tard, lorsque nous aborderons le chapitre relatif au composant Tooltip.
- Nous redévelopperons également le comportement d’un évènement bien pratique qui a disparu lors du passage à l’as3. L’évènement onReleaseOutside, qui s’éxécute lorsque l’utilisateur relâche le clic gauche de la souris en dehors de l’objet dans lequel a été capturé le mouseDown.
Conclusion
Nous disposons désormais des bases essentielles pour coder nos différents composants, ceux-ci hériteront tous de la classe UIComponent.
Dans le prochain chapitre, nous allons attaquer notre premier vrai composant : le bouton.
Sources commentées
- com.actionscriptfacile.skin.ISkinnable
- com.actionscriptfacile.skin.Skin
- com.actionscriptfacile.skin.ISkin
- com.actionscriptfacile.ui.IComponent
- com.actionscriptfacile.ui.UIComponent
Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre leur fonctionnement.
Et vous, quelles sont les Fonctionnalités Communes à tous les Composants AS3 que vous souhaiteriez ?
Avez-vous d’autres idées ? Des fonctionnalités auxquelles je n’aurais pas pensé ?
Dites-moi cela dans les commentaires ci-dessous.
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.skin.ISkinnable » bookmarkname= »com.actionscriptfacile.skin.ISkinnable »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
package com.actionscriptfacile.skin { import com.actionscriptfacile.skin.ISkin; public interface ISkinnable { function applySkin( p_skin:ISkin ):void; } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.skin.Skin » bookmarkname= »com.actionscriptfacile.skin.Skin »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
package com.actionscriptfacile.skin { import com.actionscriptfacile.skin.ISkin; import flash.utils.Dictionary; import flash.utils.getDefinitionByName; import flash.utils.getQualifiedClassName; public class Skin implements ISkin { private var m_data:Dictionary; public function Skin() { m_data = new Dictionary(); } public function setSkin( p_skinName:String, p_skinDefinition:Class ):void { m_data[ p_skinName ] = p_skinDefinition; } public function getSkin(p_skinName:String) :Class { return m_data[ p_skinName ]; } public function clone():ISkin { var definition:Class = getDefinitionByName( getQualifiedClassName( this ) ) as Class; var skin:ISkin = new definition() as ISkin; skin.setSkins( m_data ); return skin; } public function setSkins(p_skins:Dictionary):void{ m_data = p_skins; } public function getSkins():Dictionary { return m_data; } public function destroy():void { m_data = null; delete this; } } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.skin.ISkin » bookmarkname= »com.actionscriptfacile.skin.ISkin »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
package com.actionscriptfacile.skin { import flash.utils.Dictionary; public interface ISkin { function setSkin( p_skinName:String, p_skinDefinition:Class ):void; function getSkin( p_skinName:String ):Class; function setSkins( p_skins:Dictionary ):void; function getSkins():Dictionary; function clone():ISkin; function destroy():void; } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.IComponent » bookmarkname= »com.actionscriptfacile.ui.IComponent »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
package com.actionscriptfacile.ui { import com.actionscriptfacile.skin.ISkinnable; import flash.display.DisplayObjectContainer; import com.actionscriptfacile.ui.tooltip.Tooltip; public interface IComponent extends ISkinnable { function destroy():void; function hide():void; function show():void; function onAdded():void; function onRemoved():void; function onAddedToStage():void; function onRemovedFromStage():void; function resize( p_width:Number , p_height:Number ):void; function set tooltip( p_toolTip:Tooltip ):void; function get tooltip():Tooltip; function get lastParent():DisplayObjectContainer; } } |
[/codesyntax]
[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.UIComponent » bookmarkname= »com.actionscriptfacile.ui.UIComponent »]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 |
package com.actionscriptfacile.ui { import com.actionscriptfacile.skin.ISkin; import com.actionscriptfacile.ui.tooltip.Tooltip; import flash.display.DisplayObject; import flash.display.DisplayObjectContainer; import flash.display.Sprite; import flash.events.Event; import com.actionscriptfacile.ui.IComponent; import flash.events.MouseEvent; /** * Classe de base de tous les composants * @author Matthieu */ public class UIComponent extends Sprite implements IComponent { private var m_lastParent:DisplayObjectContainer; // Le dernier parent connu de l'objet private var m_tooltip:Tooltip; // Un objet de type Tooltip static public const RELEASE_OUTSIDE:String = 'RELEASE_OUTSIDE'; // Constante utilisée pour les addEventListener /** * Constructeur */ public function UIComponent() { m_lastParent = null; m_tooltip = null; addEventListener( Event.ADDED, addedHandler ); addEventListener( Event.ADDED_TO_STAGE, addedHandler ); addEventListener( Event.REMOVED, removeHandler ); addEventListener( Event.REMOVED_FROM_STAGE, removeHandler ); addEventListener( MouseEvent.MOUSE_DOWN, downUpHandler ); addEventListener( MouseEvent.ROLL_OVER, overOutHandler ); addEventListener( MouseEvent.ROLL_OUT, overOutHandler ); } // events listeners /** * * Cette méthode est utilisée est utilisée pour afficher / cacher le tooltip si celui-ci est défini. * * @param e Un objet de type MouseEvent */ private function overOutHandler(e:MouseEvent):void { if ( m_tooltip == null ) { return; } if ( e.type == MouseEvent.ROLL_OUT ) { m_tooltip.hide(); } else { m_tooltip.show(); } } /** * @private utilisée pour détecter les RELEASE OUTSIDE * @param e */ private function downUpHandler(e:MouseEvent):void { if ( e.type == MouseEvent.MOUSE_DOWN ) { /* * Si on appuie sur le click de la souris alors on cherche à détecter le moment * ou on la relachera que l'on soit sur l'objet ou non. * * */ stage.addEventListener( MouseEvent.MOUSE_UP, downUpHandler ); stage.addEventListener( MouseEvent.MOUSE_UP, downUpHandler, true ); } else { /* * Si la souris est relâchée, nous n'avons plus besoin d'écouter les événements adéquats. * Nous vérifions ensuite que la souris ne se trouvait pas sur le composant à ce moment là et on dispatch un évenement. * */ stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler ); stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler, true ); if ( ! hitTestPoint( e.stageX, e.stageY , false ) ) { dispatchEvent( new Event( RELEASE_OUTSIDE, true, true ) ); } } } /** * * Détecte les évenements de type Event.ADDED et Event.ADDED_TO_STAGE et se charge d'appeller les méthodes onAdded ou onAddedToStage. * * @param e évenement de type Event */ private function addedHandler( e:Event ):void { if ( parent != null ) { m_lastParent = parent; } if ( e.type == Event.ADDED ) { onAdded(); } else { onAddedToStage(); } } /** * * Détecte les évenements de type Event.REMOVED et Event.REMOVED_FROM_STAGE et se charge d'appeller les méthodes onRemoved ou onRemovedFromStage. * * @param e évenement de type Event */ private function removeHandler( e:Event ):void { if ( parent != null ) { m_lastParent = parent; } if ( e.type == Event.REMOVED ) { onRemoved(); } else { onRemovedFromStage(); } } // fonctions publiques /** * Détruit proprement le composant */ public function destroy():void { // on cherche à sortir de la display list du parent if ( parent != null && parent.contains( this ) ) { parent.removeChild( this ); } // on supprime proprement tout les objets de note display list while ( numChildren > 0 ) { var child:DisplayObject = removeChildAt( 0 ); child = null; } // on passe la propriété lastParent à null m_lastParent = null; // Enfin, on détruit tout les event listeners removeEventListener( Event.ADDED, addedHandler ); removeEventListener( Event.ADDED_TO_STAGE, addedHandler ); removeEventListener( Event.REMOVED, removeHandler ); removeEventListener( Event.REMOVED_FROM_STAGE, removeHandler ); removeEventListener( MouseEvent.MOUSE_DOWN, downUpHandler ); removeEventListener( MouseEvent.ROLL_OVER, overOutHandler ); removeEventListener( MouseEvent.ROLL_OUT, overOutHandler ); stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler ); stage.removeEventListener( MouseEvent.MOUSE_UP, downUpHandler, true ); delete this; } /** * Supprime le composant de la display list de son lastParent */ public function hide():void { if ( parent != null && parent.contains( this ) ) { m_lastParent = parent; parent.removeChild( this ); } } /** * Ajoute le composant à la display list de son lastParent */ public function show():void { visible = true; if ( m_lastParent == null ) return; m_lastParent.addChild( this ); } // fonctions destinées à être overridées /** * Est éxécutée lorsque le composant est ajouté à la display list d'un DisplayObjectContainer, cette méthode prend tout sens dans le cas d'un override. */ public function onAdded():void { } /** * Est éxécutée lorsque le composant est supprimé de la display list d'un DisplayObjectContainer, cette méthode prend tout sens dans le cas d'un override. */ public function onRemoved():void { } /** * Est éxécutée lorsque le composant est ajouté à la display list du stage, cette méthode prend tout sens dans le cas d'un override. */ public function onAddedToStage():void { } /** * Est éxécutée lorsque le composant est supprimé de la display list du stage, , cette méthode prend tout sens dans le cas d'un override. */ public function onRemovedFromStage():void { } /** * Fonction qui sert à sert à réceptionner et appliquer une skin au composant, cette méthode prend tout son sens dans le cas d'un override. * * @param p_skin Objet qui implémente l'interface ISkin @see */ public function applySkin(p_skin:ISkin):void { } /** * Fonction qui sert à sert à changer la taille d'un composant de manière propre, cette méthode prend tout son sens dans le cas d'un override. * * @param p_width nouvelle largeur du composant * @param p_height nouvelle hauteur du composant */ public function resize(p_width:Number, p_height:Number):void { } // getters / setters /** * Définit un objet de type Tooltip */ public function set tooltip(p_toolTip:Tooltip):void { m_tooltip = addChild( p_toolTip ) as Tooltip; m_tooltip.hide(); } /** * Retourne le tooltip du composant */ public function get tooltip():Tooltip { return m_tooltip; } /** * Renvoie le dernier parent du composant. */ public function get lastParent():DisplayObjectContainer{ return m_lastParent; } } } |
[/codesyntax]
Comment créer des Composants en AS3 ?
Après avoir vu ensemble les différentes raisons (Chapitre 1 : Pourquoi créer des Composants Graphiques en AS3 ?), nous allons aborder le thème de leur conception.
La façon de concevoir des composants se doit d’être souple. Il est donc nécessaire d’adapter son processus de développement en fonction du type de projet sur lequel nous travaillons.
La méthode qui vous est décrite est basée sur l’expérience, un vécu de programmeur. Après la lecture de ce tutoriel, vous possèderez toutes les clés pour améliorer vos Composants AS3 selon vos besoins spécifiques. C’est un petit peu cela la magie du développement!
Si il n’y a qu’une seule et unique règle d’or à retenir c’est : « Soyez rigoureux, codez avec souplesse ! ».
I – Le Cahier Des Charges Fonctionnel
Ah le cahier des charges fonctionnel, aussi appelé CDCF, un vaste programme ô combien primordial ! Sachez que c’est l’une des étapes les plus importantes si ce n’est la plus importante de tout projet informatique.
Un CDCF correctement décrit et validé c’est des dizaines d’heures de code économisées.
Dans un monde idéal, tout projet informatique devrait démarrer avec un Cahier Des Charges Fonctionnel.
Concrètement, c’est quoi un CDCF ?
Un cahier des charges fonctionnel est un document qui décrit de la manière la plus exhaustive possible la liste des actions et fonctionnalités dont votre programme devra être dôté en fin de production.
Comprenez par là que toute personne, et surtout non versée dans le développement, sera à même de vous décrire le fonctionnement détaillé de votre future application sous réserve d’avoir lu ce fameux CDCF.
Pour vous donner un exemple plus concret, cela ressemble à un story-board au cinéma. Un story-board va vous décrire l’enchaînement des actions, de la scène, le placement, l’attitude des acteurs. Et bien un CDCF est un story-board informatique.
Imaginons un instant la scène suivante :
- Eh Tom !
- Oui chef ?
- Laisses tomber ce que tu fais et viens voir un peu là, on a nouveau projet à démarrer !
- Ah ? Très bien de quel genre de projet s’agit-il ?
- Il s’agit d’un site e-commerce.
- Mmmh ok, je t’écoute.
- Le client veut quelque chose de classe et sobre, une vitrine en somme, seulement les clients devront pouvoir acheter ses produits par le biais d’une boutique en ligne.Ah et j’oubliais de préciser il ne veut pas que son site soit développé en PHP et n’aime pas Flash ! Alors tu te sens d’attaque ?
- Mmmh j’aurais besoin d’un peu plus de précision, pourquoi ne veux-t-il pas de PHP sur son site ? Quelle plateforme de paiement désire-t-il utiliser ? Ce que je veux dire c’est qu’il me faudrait un peu plus de renseignements que ça.
- Oui enfin bon, le truc c’est qu’il est assez pressé vois-tu, il a besoin d’une démo pour se décider, je compte sur toi pour faire au mieux et pour les précisions je te les donnerai au fur et à mesure, là tu as l’essentiel. Tu penses que la démo peut être prête pour demain midi afin que je lui soumette ?
- Je vais faire de mon mieux, seulement je ne peux pas te garantir que cela va lui plaire.
- N’oublies pas que je compte sur toi, t’es le meilleur !
Alors ? Un air de déjà vu ? Si non, ça ne saurait tarder ! En effet, il s’agit là d’un dialogue classique entre un développeur et un commercial / chef de projet.
Pauvre Tom… Il va être bien embêté pour réaliser sa démo. Eh oui, à aucun moment son chef ne lui a donné de direction précise vers laquelle s’orienter, comptant sur le seul talent de son employé.
Seulement voilà, Tom est développeur, pas magicien! Il ne peut deviner ce à quoi pense le client, il a donc 90% de chance de se planter!
Sa seule consolation, c’est qu’il y a peu de chance que ses concurrents possèdent plus d’informations.
Maintenant vous avez saisi l’importance de la rédaction d’un bon CDCF. Un Cahier Des Charges Fonctionnel contient la liste des fonctionnalités et des actions de votre programme.
Ensuite, nous passons à la rédaction du Cahier Des Charges Technique que nous abrègerons par CDCT.
II – Le Cahier Des Charges Technique
Le CDCT est un chantier aussi vaste que le CDCF, toutefois sa conception est nettement plus simple. En général il est réalisé par des programmeurs pour des programmeurs! C’est un avantage certain, en effet, tous les protagonistes « parlent » le même langage.
Le CDCT est un élément intermédiaire, à cheval entre le CDCF et la production. Il permet aux développeurs d’avoir une référence sur laquelle s’appuyer pour implémenter telle ou telle fonctionnalité.
Le Cahier Des Charges Technique existe pour décrire l’ensemble des librairies, frameworks, méthodes de développement qui seront employées en production. Il apporte également quelques précisions qui ne rentrent pas dans le cadre du Cahier Des Charges Fonctionnel ( par exemple le fait que le site devra être développé en Java et non en PHP ).
De plus le CDCT a également une autre utilité. Il permet de préparer le terrain pour l’élaboration du schéma architectural de l’application que nous verrons un peu plus loin.
Dans le cadre du développement d’un composant graphique, le Cahier Des Charges Technique servira à décrire la manière de développer les fonctionnalités que nous estimons génériques ou non.
Prenons un exemple tout simple et retrouvons notre ami Tom :
- Eh Tom ! Laisses-donc ce site e-commerce, de toute façon la démo n’a pas plus au client ! Viens voir un peu.
- Oui ?
- J’aimerais que tu développes une bibliothèque de composants graphiques génériques dont on pourra se resservir à loisir ! Le client est très exigeant et nous a fourni la liste des fonctionnalités qu’il souhaite trouver sur les différents éléments de cette bibliothèque.
- Très bien, dois-je coder de manière à pouvoir l’étendre facilement plus tard ? Pour les skins, est-ce que je fais un module à part ou directement dépendant de la bibliothèque ? Ai-je le droit d’utiliser des librairies externes comme des librairies de Tween ?
- Euuhhhh …. Fais comme tu le sens ! Au mieux !
- Disons qu’il est un peu difficile de dire ce qui est le mieux, tout dépend de ce que l’on souhaite en faire et de comment la bibliothèque est censée évoluer.
- Je te fais confiance, tu es le meilleur ! Et n’oublies pas que je compte sur toi !
Ahlala, décidément ce Tom a l’art de s’attirer des ennuis, ou peut être que sont-ce les aléas courants du métier, allez savoir…
Toujours est-il qu’il va être obligé de passer pas mal de temps à réfléchir à ce qui sera le mieux pour le futur de cette bibliothèque de composants. Et qui plus est, sans connaître les exigences particulières des équipes techniques du client.
Il est donc fort probable qu’à terme, il perde une bonne partie de son temps à redévelopper des fonctionnalités mais cette fois-ci, d’une manière qui convienne au client.
D’où l’importance de la rédaction d’un Cahier Des Charges Technique qui permet au développeur de développer plutôt telle ou telle fonctionnalité et d’en laisser une autre de côté (car inutile pour le client).
Maintenant, nous allons découvrir la création du schéma architectural de l’application.
III – Le schéma architectural de l’application
Le schéma architectural d’une application est, disons, INDISPENSABLE.
En effet, lorsque nous abordons pour la première fois une nouvelle librairie, nous disposons en général d’une documentation. Cependant, celle-ci nous renseigne rarement sur la façon dont les différents éléments interagissent entre eux.
Il s’agit donc d’une représentation imagée de l’emboîtement des différentes briques fonctionnelles du projet. Ainsi, nous connaissons, par exemple, que telle ou telle classe à des dépendances avec telle ou telle autre. Et nous pouvons déterminer assez aisément que cette classe à droite hérite de celle qui se trouve juste au dessus.
Le but de cet article n’étant pas de faire un cours magistral sur les méthodes de conception de ces schémas, en voici une : UML.
Et je vous invite grandement à approfondir vos connaissances sur le sujet. La documentation sur internet est nombreuse et qualitative pour que je me permette de vous laisser choisir vos propres sources.
Voici à titre d’exemple, ce à quoi peut ressembler un schéma UML, il s’agit d’un exemple pris sur internet au hasard des couloirs…
Comme vous pouvez le constater, l’application semble complexe. Toutefois grâce à notre schéma, nous pouvons aisément dissocier certains éléments. Nous pouvons même comprendre, grâce au sens des flèches, comment s’effectue la communication entre les différents éléments.
IV – Conclusion
Dans ce chapitre, nous avons vu que pour entamer un développement de la manière la plus sereine possible, il nous fallait au préalable préparer le terrain avec la rédaction :
- du Cahier Des Charges Fonctionnel (CDCF).
- du Cahier Des Charges Technique (CDCT).
- du Schéma Architectural.
Et cela, en étant le plus rigoureux possible afin de gagner du temps plus tard sur le développement.
Certes, au début tout cela peut vous paraître superflu voire franchement casse-pieds. Ces différentes méthodes ont fait leurs preuves maintes et maintes fois. Et elles continuent chaque jour, pour chaque application, de les faire.
Dans le prochain chapitre nous aborderons enfin la pratique avec le développement des fonctionnalités de base de notre bibliothèque de Composants AS3.
Et vous, comment effectuez-vous l’analyse de vos projets ActionScript ?
Avant le développement pur et dur, utilisez-vous des outils / logiciels spécifiques ?
Partagez votre expérience dans les commentaires ci-dessous.
Pourquoi créer des Composants Graphiques en AS3 ?
Mais pourquoi donc prendre le temps de créer des Composants AS3 Graphiques ?
Après tout, ce qui est graphique est censé revenir de droit aux graphistes non ? Alors pourquoi un développeur irait s’ennuyer avec cela ?
Il existe une multitude de bonnes raisons de développer des Composants Graphiques génériques et réutilisables.
I – Réutilisation du code source
Commençons par la définition d’un Composant Graphique en ActionScript.
Un composant graphique est un morceau de code source qui va nous permettre d’offrir à l’utilisateur une information ou une interaction sous forme graphique. Cela peut aller de l’infobulle à la barre de défilement ( scrollbar ). Ce code source se veut réutilisable et en général skinnable, c’est à dire que l’on peut personnaliser son apparence et donc changer le côté graphique autant de fois qu’on le désire.
Maintenant que nous avons fixé les limites d’un composant graphique, nous allons nous intéresser à son utilité.
Pour cela nous allons nous figurer une scène classique de début de projet :
Tom est développeur, il doit mettre en place un formulaire permettant à ses utilisateurs de créer leur CV en ligne. Son chef de projet vient le voir et lui demande de commencer le développement de l’application tout de suite. Le problème c’est qu’aucune charte graphique n’a été fournie etque le code qui permet d’enregistrer les CV en base de données est déjà prêt. Il se demande donc à juste titre ce qu’il va pouvoir faire car il a pris l’habitude de reprendre les chartes des graphistes et développer ses fonctionnalités en mélangeant le fond et la forme.
Voilà un problème que rencontre tout programmeur débutant, en effet, il n’est pas naturel de dissocier les éléments graphiques du code. Cela demande une certaine pratique de raisonnement dans l’abstrait, or raisonner dans l’abstrait c’est comme tout, ça se travaille.
Voyons comment Tom peut se sortir de ce pétrin et avancer le développement sans charte graphique et ce, de manière intelligente.
Il a obtenu une liste des fonctionnalités de ce formulaire, il prend donc une feuille et un crayon et remarque qu’il va devoir coder au moins 3 ou 4 boutons, d’aspects différents certes, mais les fonctionnalités resteront les mêmes.
Il se rend compte également que toutes les informations doivent tenir sur une page mais que si l’on est un peu pointilleux, les champs de texte libre peuvent prendre énormément de place. Il va donc falloir masquer le contenu qui sort des limites et le faire défiler à l’aide d’une barre.
Tom va donc coder les fonctionnalités, comme le défilement et les différents états d’un bouton, toutefois son code ne devra dépendre d’aucun graphisme tout en laissant une possibilité de personnaliser l’apparence du composant. Ainsi, quelque soit la charte graphique qu’on lui fournira, il aura juste à l’intégrer sur chaque bouton et sur chaque scrollbar.
Voici donc le premier intérêt des composants graphiques, la possibilité de les réutiliser. Ils permettent de gagner du temps car une fois créés, il n’y a plus matière à revenir dessus. Cela demande du temps et de l’expérience pour créer des composants efficaces réutilisables partout.
En général, les composants sont efficaces lorsque vous arrivez à les utiliser sur 3 ou 4 projets différents sans aucune retouche à réaliser.
Nous allons maintenant aborder brièvement la deuxième bonne raison de créer des composants graphiques qui découle inévitablement de la première, la facilité de développement d’interfaces utilisateurs.
II – Le développement d’interfaces avec des Composants
Les interfaces utilisateur sont parmi les choses les plus pénibles à réaliser pour un développeur.
Et cela pour plusieurs raisons, les voici :
- En général il nous est souvent demandé de changer telle ou telle chose à la dernière minute et ce, de façon répétée.
- Le rendu fonctionnel, de manière générale, n’est pas aussi bon que ce à quoi l’on s’attendait ce qui entraîne des ajustements de bouts de chandelles. Nous avons tous vécu la scène du graphiste qui vient se poser à côté de vous « pour 5mn » et qui repart une heure après, tout content d’avoir bataillé sur chaque pixel. Notez cependant que cela ne l’empêchera pas de reprendre entièrement le concept visuel et ce, dès le lendemain.
- Il y a clairement un manque de défi technique dans les interfaces utilisateur, en général quand on en a fait deux ou trois on les a toutes faites et les suivantes nous paraissent insipides. Raison de plus pour y passer le moins de temps possible et occuper son esprit avec des choses plus motivantes.
Nous avons déjà vu qu’une fois correctement développés, les composants graphiques peuvent être réutilisés à l’infini et personnalisés à souhait. Ce qui résulte en un gain de temps considérable dans le développement d’une application.
Pour reprendre l’exemple de Tom, admettons qu’il ait déjà crée ses composants “scrollbar” et “boutons” lors d’un projet précédent, il pourra raisonnablement répondre à son responsable : « écoutes, j’ai déjà une liste de composants graphiques prêt à l’emploi, je vais plutôt passer du temps sur autre chose ».
Et voilà, Tom a gagné du temps, son responsable est content et lui aussi.
III – Conclusion
En conclusion, nous pouvons affirmer qu’il y a énormément d’avantages à créer des Composants Graphiques en ActionScript. Et ce, quel que soit le type de projet pour lequel nous sommes amenés à travailler.
Nous avons vu que les composants représentent une manière élégante et astucieuse de développer des interfaces utilisateur.
De par leur nature réutilisable, ils permettent de gagner un temps de développement considérable.
Dans les prochains tutoriels, nous verrons ensemble :
- Comment créer des Composants en AS3.
- Comment penser leur organisation, fonctionnalités.
- Et Comment les utiliser très simplement dans nos Applications Flash.
Et vous, utilisez vous des Composants AS3 réutilisables pour concevoir vos applications Flash ?
Avez-vous développé votre propre Framework de Composants AS3 ?
Si non, quel Framework de Composants Graphiques utilisez-vous ?
Développement Facile