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

  <comps:ColumnHeaderIndicator width="100%" height="40" />
  <s:List width="100%" height="100%">

  </s:List>
  <comps:BottomBar width="100%" height="80" />

  <fx:Script>
    <![CDATA[
      protected function search(q:String):void
      {
        searchResult.token = twitter.search(q);
      }
    ]]>
  </fx:Script>

  <fx:Declarations>
    <s:CallResponder id="searchResult"/>
    <twitter:Twitter id="twitter"/>
  </fx:Declarations>

AIR Mobile – Créer une liste avec groupement (type liste de contacts iOS / Android)

Le framework Flex propose en standard, un composant List, qui réagit aux évènements touch pour une utilisation sur mobile. A cette liste, vous pouvez coupler un renderer comme par exemple un renderer de base de Flex, IconItemRenderer qui vous permet d'afficher une image + 2 lignes de texte pour chaque élément.

Mais il y a un autre type de rendu assez populaire sur mobile, qui est de créer une liste à "sections". Par exemple la liste de contacts sous Android ou iOS. Les contacts sont arrangés par ordre alphabétique et rassemblés par la première lettre de leur prénom:

Les sections ne sont pas cliquables, elles servent juste de décoration. Elles ont le plus souvent une taille différente de celle des items. Je ne suis pas un cador du développement natif mais je pense qu'il y a un composant tout prêt pour ce genre d'utilisation. En Flex, il vous faudra le faire vous-même.

Mais comme d'habitude, certains se sont posé la question avant vous (désolé) et on trouvé une solution. Voici quelques liens qui vous seront utiles:

http://corlan.org/2011/07/04/creating-flex-mobile-section-lists/

http://corlan.org/2011/07/11/creating-flex-mobile-lists-part-ii-using-virtualization/

http://www.tink.ws/blog/flex-4-excludeselectionlist/

http://code.google.com/p/tink/source/browse/trunk/flex4.5/spark/src/ws/tink/spark/controls/ExcludeSelectionList.as

http://flexponential.com/2011/06/27/extending-labelitemrenderer-to-look-like-itunes-on-the-ipad/

Voilà, je vous ai bien préparé le travail mais on va aller plus loin en regardant les techniques utilisées.

La technique générale

Pour intégrer ces sections, et que le rendu de la liste soit cohérent, on intègre ces sections directement dans le dataProvider de la liste. Au milieu de vos objets Contact, vous aurez donc d'autres items qui sont là pour la déco. Il faut ensuite déterminer dans votre liste quels sont ces éléments et leur donner un rendu différent.

Le composant ExcluseSelectionList

Le (très bon) blogger de tink.ws propose une implémentation de List.as (par héritage) qui permet d'indiquer au composant quels éléments sont "non-sélectionnables". Vous disposez donc de plusieurs propriétés pour définir cette restriction:

• excludeType / excludeTypes : Permet de donner une liste de type AS3 à exclure (ex: la classe Header)
• excludeIndex / excludeIndices : Permet de donner une liste d'index à exclure (ex 1, 10, 30)
• excludeFunction : Permet de passer une fonction qui va renvoyer un Boolean pour indiquer s'il faut exclure ou pas l'élément. Un peu comme une filterFunction.

Ce composant va se révéler très pratique mais on peut voir que l'itemRenderer créé par flexponential.com contient un petit "trick" qui permet de se passer de cette restriction. En effet, il se contente de ne pas passer l'itemRenderer en état "sélectionné" s'il est sur un header. Un couplage des 2 solutions semble le meilleur compromis.

Utilisation des itemRenderer

C'est la solution la plus naturelle et la plus élégante d'un point de vue code. Suivant l'item passé à l'itemRenderer, on va modifier le rendu.On peut faire ça facilement en MXML mais il vaut mieux le faire en AS3 pour avoir de meilleurs perfs sur mobile.

L'exemple de flexponential explique bien la technique:

http://flexponential.com/2011/06/27/extending-labelitemrenderer-to-look-like-itunes-on-the-ipad/

Ici, on utilise bien la propriété itemRenderer et pas une itemRendererFunction. C'est encore mieux car l'utilisation d'une itemRendererFunction empêche la ré-utilisation des renderers et devient donc moins performante en RAM. Dans l'exemple, le composant MusicLabelItemRenderer est taillé pour cette application puisqu'il connait le type d'item qu'il va afficher. Il peut donc facilement faire la distinction entre un item et un header. Très pratique si vous connaissez votre liste, moins si vous voulez être générique.

En l’occurrence, le renderer est assez complexe puisqu'il permet d'afficher les éléments de manière horizontale avec une ligne séparatrice.

La problématiques des layouts

Voici un problème que je n'avais même pas envisagé pendant la rédaction de cet article. De base, une List utilise un "layout" qui est un VerticalLayout. On obtient donc une liste verticale. Mais sur de plus grands écrans, vous voudrez peut-être utiliser un layout qui vous permet d'afficher plusieurs éléments par ligne, comme un TileLayout:

Si vous modifier votre itemRenderer, vous n'aurez pas un header sur une ligne complète, juste sur la taille d'un item. Le résultat sera donc mauvais. Les billets de corlan.org peuvent vous permettre de résoudre cette problématique en faisant en sorte que votre header prenne toute la largeur. C'est un cas assez exceptionnel mais au moins vous êtes prévenus .

Conclusion

Avec ces différents articles, vous avez assez d'informations pour pouvoir créer votre liste. Certaines subtilités comme le layout ou la manière par laquelle on rend les éléments non-sélectionnables sont optionnels, essayez de faire au plus simple.

Dans un futur tutorial, je vais peut-être partager un exemple complet de liste avec groupement avec en bonus le composant de scroll rapide comme sur Android. Pour ceux qui ne voient pas, c'est une liste alphabétique qui vient au dessus de la liste, permettant d'aller directement à la bonne lettre. Très pratique quand on a des dizaines / centaines d'éléments .

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

package model {
  import mx.collections.ArrayCollection;

  [RemoteClass]
  public class PokemonListPersist {

    public var dataProvider:ArrayCollection = null;

    public var verticalScrollPosition:Number = 0;

    public function PokemonListPersist() {
    }
  }
}

...
  protected function onViewDeactivate(event:ViewNavigatorEvent):void {
	if (data) {
	  var plp:PokemonListPersist = PokemonListPersist(data);
	  plp.verticalScrollPosition = list.dataGroup.verticalScrollPosition
	}
  }
  ...

...
_dp.filterFunction = filterByName;
list.dataGroup.verticalScrollPosition = plp.verticalScrollPosition;
return;
...

<s:List id="colorList" dataProvider="{colorsArray}" width="100%" itemRenderer="ColorRenderer" y="40" selectedIndex="0" verticalScrollPolicy="off">
  <s:layout>
    <s:HorizontalLayout  />
  </s:layout>
</s:List>