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

AIR Mobile – Application Pokémon (7) – Modifier le style de la liste

Dans le précédent tutorial, on a  vu comment filtrer notre liste de pokémons:

AIR Mobile – Application Pokémon (6) – Filtrer la liste des pokémons avec un champ de recherche

La liste est pour l'instant un peu morose, peu d'informations affichées et un thème de couleur très basique. Dans cette partie du tutorial, on va voir comment donner un peu plus de style à notre liste.

Utilisation du composant IconItemRenderer

De base, une liste Flex utilise le composant LabelItemRenderer qui n'affiche qu'une ligne de texte. Or, il en existe d'autres dans le SDK, notamment IconItemRenderer:

AIR Mobile – Les itemRenderer de List (LabelItemRenderer, IconItemRenderer, …)

Ces composants qui gèrent l'affichage de chaque ligne sont appelés "itemRenderer". Pour utiliser un iconRenderer différent de celui de base, il faut le définir comme valuer de la propriété "itemRenderer" du composant List. Un itemRenderer est un peu spécial car on va donner une référence vers un composant, il faudra donc encapsuler la déclaration dans une balise fx:Component. Notez que Flash Builder vous aidera beaucoup grâce à l'auto-complétion, apprenez à vous en servir à bon escient.

Pour définir un IconItemRenderer comme itemRenderer, vous allez entrer le code ci-dessous:

<s:List width="100%" height="100%" dataProvider="{_dp}" labelField="nom">
    <s:itemRenderer>
      <fx:Component>
        <s:IconItemRenderer />
      </fx:Component>
    </s:itemRenderer>
  </s:List>

Affichage d'une 2ème ligne de data

Le composant IconItemRenderer peut vous permettre d'afficher une deuxième ligne de donnée. Un peu comme on l'avait fait avec la propriété "labelField" de List, on va ici préciser un "messageField". Le "message" étant en fait la 2ème ligne.

Sur le composant IconItemRenderer, précisez que le messageField est "type", ce qui nous donnera le type du Pokemon. Lancer l'application pour obtenir ce résultat:

Ajout d'un "decorator" en fin de ligne

Dans les prochaines étapes de ce tutorial, on va pouvoir naviguer depuis cette liste vers une fiche détaillée des capacités du pokémon. L'affichage de la fiche du pokémon se fait lorsque l'on sélectionne un pokémon dans la liste. Quand une action utilisateur est possible, il est souvent conseillé d'afficher un icône sur la droite de chaque élément, le plus souvent une puce ou une flèche.

Le composant IconItemRenderer étant bien pensé, celui-ci vous permet d'assigner un icône qui sera affiché sur la droite de chaque ligne. Cet icône peut être défini grâce à la propriété "decorator" du composant IconItemRenderer.

Dans la partie 2 (préparation de l'application), vous avez du télécharger un dossier nommé assets que vous avez mis dans votre projet. Celui-ci contient l'icône que l'on va ajouter, il doit maintenant être présent dans les sources de votre projet.

On va utiliser une directive Embed qui va ordonner au compilateur d'embarquer l'image à la compilation. La référence sera donc statique, et plus rapide à l'exécution. Voici comment définir votre decorator:

<s:IconItemRenderer messageField="type" decorator="@Embed(source='/assets/br_next.png')" />

Si vous n'avez pas copié l'icône ou si vous l'avez mis au mauvais endroit, vous aurez une erreur dans la vue Problems de Flash Builder du type:

unable to resolve '/assets/br_next.png' for transcoding PokemonInfosHomeView.mxml /PokemonInfos/src/views Unknown Flex Problem

Si vous ne vous êtes pas trompé, voici le rendu:

Cela parait un peu "light" comme icône car en fait, l'icône a un léger dégradé d'opacité vertical et il sera plus visible sur un fond foncé que l'on va configurer tout de suite en CSS

Modification des CSS

Pour modifier certaines propriétés de style des composants que l'on a ajouté, on va utiliser du code CSS. Il existe 2 grands types de sélecteurs CSS.

• Le sélecteur de Type qui va appliquer un style CSS à tous les composants d'un certain Type.
• Les sélecteurs de classes qui vont appliquer le style CSS à tous les composants qui déclarent comme "styleName", le nom de la classe en question.

Voici un petit article qui devrait tout vous expliquer:

Flex Styles: Utilisation des CSS et des sélecteurs (Class / Type)

Pour notre exemple, on va utiliser des sélecteurs de Type pour éviter d'ajouter des "styleName" dans notre code existant. Les sélecteurs de Type doivent être définis au niveau de l'application, pas de la vue. Rendez-vous donc dans PokemonInfos.mxml et après la fin de la balise fx:Declarations, ajoutez une balise "fx:Style". Fermez la balise et Flash Builder va automatiquement ajouter les namespaces nécessaires:

...
  </fx:Declarations>
  <fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";

  </fx:Style>
</s:ViewNavigatorApplication>

Cliquez à l'intérieur du tag Style et pressez Ctrl+Espace pour amener l'auto-complétion. Une liste de tous les sélecteurs disponibles va s'afficher. Remarquez que les composants Flex sont préfixés de "s|":

Commencez à taper "iconi" et sélectionnez "s|IconItemRenderer". Dans le bloc que Flash Builder, vient de créer, ajoutez le lignes suivantes:

s|IconItemRenderer{
  alternatingItemColors:#3D4545,#333333;
  color:white;
}

Petit test de rendu:

Voilà un bon début. Il y a encore pas mal d'éléments à peaufiner, le fond des vues et des List par exemple ou la couleur du "message". Voici l'ensemble des directives CSS que l'on va utiliser:

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
s|IconItemRenderer{
  alternatingItemColors:#3D4545,#333333;
  color:white;
  messageStyleName:messageStyleClass;
}
s|ActionBar{
  chromeColor:#444444;
}
s|View{
  backgroundColor:#3D4545;
  backgroundAlpha:1;
}
s|List{
  contentBackgroundColor:#3D4545;
  contentBackgroundAlpha:1;
}
.messageStyleClass{
  color:white;
  fontSize:18;
}
</fx:Style>

Voici le résultat final:

Il y a de nombreuses autres propriétés CSS que vous pouvez modifier comme vous le souhaitez. Pour l'instant, on va s'arrêter là .

Télécharger les sources

Vous pouvez télécharger le projet au format FXP tel qu'il est à la fin de cette partie:

Télécharger le projet au format FXP