Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

AIR Mobile – Application TweetDeck (5) – Création d'un composant de défilement horizontal

Notre squelette d'application est bientôt complet, nous avons pour l'instant ajouté la barre de navigation et la barre de header:

AIR Mobile – Application TweetDeck (3) – Ajout de la barre de navigation

AIR Mobile – Application TweetDeck (4) – Création de la barre du haut (header)

Pour la partie centrale, c'est plus complexe. En effet, celle-ci n'est pas un composant "classique". Ce composant ressemble à une liste horizontale mais on ne pourra pas utiliser le composant List pour les raisons suivantes:

• Une List a tout un mécanisme d'itemRenderer très puissant, mais qui fait que l'affichage peut-être difficile à gérer, notamment à cause de la réutilisation des itemRenderers. Ici, la data est plus un "composant" qu'un "model", cela ne correspond pas vraiment au schéma habituel
• Un composant List ajoute automatiquement un Scroller. Celui-ci est arrive avec des effets de "bounce & pull" dont nous n'avons pas besoin et qui vont se mettre dans nos pattes. Le composant est au final, un contrôle fin du scroll de l'utilisateur.

Comme le composant List ne nous convient pas, on va créer notre propre composant. Pour nous faciliter la tâche, celui-ci sera un conteneur qui va hériter de HGroup. Cela va nous permettre de faire son intégration de manière très compréhensible en MXML comme ceci:

<comps:HorizontalComponentScroller id="listGroup">
  <s:List id="list1" />
  <s:List id="list2"  />
  <s:List id="list3"/>
  <s:List id="list4"/>
</comps:HorizontalComponentScroller>

On va donc avoir un HGroup, pour lequel on va contrôler à la main, le défilement horizontal à l'intérieur de ce HGroup. Comme de base, les conteneurs Flex 4 n'ajoutent pas automatiquement un Scroller, on va pouvoir faire notre traitement tranquille sans être embêté par certains comportements par défaut. On verra en fin de tutorial que l'on fait en fait une translation en X de ce HGroup à l'intérieur d'un Group pour des raisons pratiques.

Utilisation des Swipe?

Si vous avez un peu manipulé Flex, vous vous êtes peut-être dit : "il est pas très malin, moi je te le fais en 30 secondes en écoutant l'évènement de Swipe gauche / droite !". Ok, j'ai pensé la même chose en débutant le développement de ce composant et pourtant, cela enlève un des comportements intéressants de l'application TweetDeck.