Comment créer et personnaliser une Liste en AS3 ?

2 questions

Écrit le 15 septembre par Matthieu
Publié dans le(s) sujet(s) Framework AS3 Facile

Mots clés : , , , , , , , , ,

Dans ce tutoriel, nous allons créer et personnaliser le Composant AS3 List.

Vous verrez comment définir les méthodes de la classe List. Et comment la personnaliser avec l’utilisation des Skins graphiques.

I – Cahier Des Charges Fonctionnel de la List

Un composant de type List peut se comparer visuellement à une maison.

Dans une maison (en général), l’espace habitable ne se limite pas à ce que l’on peut distinguer par la fenêtre. Depuis l’extérieur, nous n’en voyons donc qu’une partie.

Le composant List est à la fois : la maison et la fenêtre.

Il peut contenir autant d’objets graphiques que l’on souhaite ( comme une maison peut contenir un certain nombre de meubles ). Toutefois, il ne pourra en afficher qu’une partie ( la fenêtre ).

Le Composant List innove par rapport à la maison. Effectivement, il est possible de faire défiler tous les objets graphiques qu’il contient par le biais d’une scrollBar ( verticale ou horizontale ). Ainsi, l’ensemble de son contenu pourra être visualisé.

C’est un peu comme si vous aviez une scrollBar sur la fenêtre de votre maison, qui déplacerait vos meubles, de sorte qu’ils arrivent automatiquement devant la fenêtre.

Maintenant que nous avons défini ce qu’est un composant List, nous allons pouvoir nous attaquer à sa conception.

Comme pour le Composant ScrollBar, le sujet augmente en difficulté, au fur et à mesure de la création des Composants AS3 Facile.

Nous allons ainsi nous simplifier la vie en implémentant un Composant List :

  • qui gère uniquement le scroll vertical.
  • qui va éditer pour nous les positions de l’ensemble des objets graphiques qu’il recevra. Dans le but que ceux-ci apparaissent à la “queue leu leu”.

Un Composant List est constitué de 4 entités :

  • Un clip conteneur ( la maison ), qui va se charger de réceptionner des objets graphiques. La taille du conteneur augmente et diminue en fonction du nombre d’objets graphiques qu’il contient.

 

  • Un clip masque ( la fenêtre ), qui nous servira à cacher une partie des objets graphiques.
  • Un clip background ( le papier peint ) qui servira juste de fond à notre composant, ceci est purement esthétique et vous n’êtes en aucun cas obligé de l’implémenter.

 

  • Une scrollBar verticale qui s’affichera uniquement lorsque la taille du conteneur dépassera les dimensions de la fenêtre.

Pour compléter notre CDCF, la taille du masque peut être éditée. De plus, le fond et la scrollBar sont personnalisables graphiquement.

Avec toutes ces informations dans notre CDCF (Cahier Des Charges Fonctionnel), nous pouvons passer à la rédaction du CDCT (Cahier Des Charges Technique).

II – Cahier Des Charges Techniques de la List

Nous allons donc traduire, en termes techniques, les spécifications fonctionnelles de notre composant List.

La Classe List

  • Un clip conteneur ( la maison ) va se charger de réceptionner des objets graphiques. La taille du conteneur augmente et diminue en fonction du nombre d’objets graphiques qu’il contient.

En lieu et place d’un clip, nous allons utiliser un objet Sprite.

  • Un clip masque ( la fenêtre ), qui nous servira à cacher une partie des objets graphiques.

Ici, un simple objet de type Shape suffira largement.

  • Un clip background ( le papier peint ) qui servira juste de fond à notre composant. Celui-ci est purement esthétique et vous n’êtes en aucun cas obligé de l’implémenter.

Un objet de type Sprite qui contiendra le fond du composant List.

  • Une scrollBar verticale qui ne s’affichera que lorsque la taille du conteneur dépassera les dimensions de la fenêtre.

Un objet de type com.actionscriptfacile.ui.scroll.components.VerticalScrollBar ( veuillez lire le Tutoriel 5 sur la Création du Composant Vertical ScrollBar ).

  • La taille du masque peut être éditée.

Pour cela, nous allons overrider la méthode de base resize de la classe parente UIComponent.

  • Le fond personnalisable graphiquement ainsi que la scrollBar.

Pour cette fonctionnalité, nous allons effectuer un override de la méthode de base applySkin de la classe parente UIComponent.

La classe UIMargins

Et comme toujours, nous allons ajouter une petite difficulté en intégrant une fonctionnalité supplémentaire à notre composant. J’ai nommé : les marges!

Le conteneur doit pouvoir appliquer des marges au contenu dans les 4 directions suivantes :

  • Haut
  • Bas
  • Gauche
  • Droite

La solution technique reste simple :

  • Pour respecter la marge gauche nous décalerons le masque et le conteneur vers la droite.
  • Pour respecter la marge haute nous décalerons le masque et le conteneur vers le bas.
  • Pour respecter la marge droite nous réduirons la largeur du masque.
  • Pour respecter la marge basse nous réduirons la hauteur du masque.

Pour définir nos marges, nous allons créer une classe nommée UIMargins. Elle se trouvera dans le package com.actionscriptfacile.ui.utils.

Conclusion

Et voila, notre composant List est terminé. Regardez le résultat ci-dessous.

Dans le prochain tutoriel AS3, nous attaquerons notre dernier composant : la ComboBox! ( ou liste déroulante ).

Évolutions des fonctionnalités

Pour améliorer notre Composant AS3 List, voici quelques exemples de fonctionnalités supplémentaires à implémenter. Proposez vos exemples dans les commentaires.

Allez, maintenant, c’est à vous de jouer !

List avec une ScrollBar Horizontale

Ajoutez au composant List la gestion d’une ScrollBar Horizontale.

Dans le tutoriel précédent (Création d’un Composant AS3 Vertical Scrollbar), un des exercices consistait à concevoir une ScrollBar Horizontale. Il suffit de réutiliser cette classe et de l’instancier / afficher (si besoin) par le composant List.

List avec des composants Button

Vous pouvez également remplacer les différents éléments de la List par des objets de type Button (lisez le Tutoriel 4 : Création du Composant AS3 Button).

Puis vous écoutez les évènements des objets Button. Et vous avez la possibilité de créer une action spécifique, en fonction du Button sélectionné par l’utilisateur.

Sources commentées

  • com.actionscriptfacile.ui.list.List.as
  • com.actionscriptfacile.ui.utils.UIMargins.as
  • ListExample.as
  • com.as3facileexemple.skin.classic.DefaultListSkin.as

Vous trouverez ci-dessous l’ensemble des classes créées. Elles sont commentées pour vous permettre de comprendre au mieux leur fonctionnement.

Vous pouvez télécharger le fichier zip :

Télécharger “Composant List du Framework AS3 Facile”

component_list_framework_actionscript-facile.zip – Téléchargé 1085 fois – 68,96 Ko

Et vous, quels graphismes avez-vous créé pour votre List ?

Je suis curieux de visualiser les différentes utilisations que vous avez utilisé pour le Composant AS3 List.

Ajoutez vos réalisations dans les commentaires juste en dessous.

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.list.List.as » bookmarkname= »com.actionscriptfacile.ui.list.List.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.actionscriptfacile.ui.utils.UIMargins.as » bookmarkname= »com.actionscriptfacile.ui.utils.UIMargins.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »ListExample.as » bookmarkname= »ListExample.as »]

[/codesyntax]

[codesyntax lang= »actionscript3″ title= »com.as3facileexemple.skin.classic.DefaultListSkin.as » bookmarkname= »com.as3facileexemple.skin.classic.DefaultListSkin.as »]

[/codesyntax]