Ça y est, l'heure est venue, 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 !
C'est donc le 2ème composant de notre « Bibliothèque de Composants Graphiques ».
Préparez-vous, le sujet est un peu plus compliqué que les articles précédents. Nous étudierons uniquement la scrollbar verticale. Rassurez-vous, le raisonnement est exactement le même dans le sens horizontal.
Dans ce chapitre, vous verrez comment établir un cahier des charges pour un composant de type VerticalScrollBar. 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 composant VerticalScrollBar
Pour continuer avec les bonnes habitudes, passons à la rédaction de l'indispensable CDCF (Cahier Des Charges Fonctionnel).
Nous allons commencer par un bref descriptif des fonctionnalités d'une VerticalScrollBar.
Une VerticalScrollBar 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 VerticalScrollBar 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 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 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'appellerons le background.
Comme pour le composant 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.
III. CDCT d'un composant VerticalScrollBar
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 à part qui se nommera ScrollManager. Cette classe se chargera de gérer le scrolling du content.
Le composant graphique (VerticalScrollBar), quant à 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 lorsque 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'appellerons 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 la fonction "applySkin" de base afin de mettre à jour le style de chacun des UIComponent composant 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.
IV. 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.
Évolutions des fonctionnalités
Maintenant c'est à vous de jouer !
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 Developpez.
HorizontalScrollBar
Essayez donc de créer une scrollbar horizontale, la tâche vous est simplifiée. Effectivement, notre ScrollManager (définit dans com.actionscriptfacile.ui.scroll.manager) laisse la possibilité de scroller un objet à l'horizontale.
Tween ScrollBar
Vous pouvez également essayer de d'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.
Le fichier zip contient le framework TweenMax : un ensemble de classes pour utiliser des tween plus facilement.