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

AIR Mobile – Les composants et le thème Mobile Flex 4.5

L'avantage de pouvoir utiliser les composants Flex par rapport à une application pure AS3 est de simplifier le développement en vous donnant toute une bibliothèque de composants prêts à l'emploi. Certains composants sont de nouveaux composants, d'autres ont simplement une autre "Skin" optimisée pour le rendu mobile (plus gros, système de cache, etc.). Bien sûr, vous pouvez toujours faire vos propres composants mais on va voir ceux qui sortent directement du four. Dans ce billet, on va découvrir ces composants et leurs looks pour vous donner une idée.

Notez que les itemRenderer seront couverts dans un autre billet sur flex-tutorial.

Bouton

Ce n'est pas un nouveau composant, seulement le composant s:Button avec un look différent lorsque vous l'utilisez dans un projet de type Mobile:

Notez que le composant Spark Button a retrouvé sa propriété "icon" vous permettant d'ajouter un icône directement avec la Skin de base (il fallait faire sa propre Skin auparavant).

Checkbox

Ici aussi, vous pouvez utiliser la CheckBox Spark directement, une skin lui sera appliquée automatiquement pour un projet de type mobile:

La couleur du "tick" est par défaut grise. Vous pouvez la modifier grâce à la propriété "symbolColor".

ButtonBar

Le composant ButtonBar reprend la skin des Button, voici le rendu:

Image

Avant Flex 4.5, il fallait utiliser le composant Image MX de Flex 3. Le composant Image de Flex 4.5 est non seulement un composant Spark mais il apporte en plus plusieurs améliorations:

• Un système de cache local, qui permet de s'affranchir des composants "ImageCache" que l'on utilisait en Flex 3, notamment pour les itemRenderer
• La possibilité d'afficher un "progress" lors du chargement de l'image. Un composant BusyIndicator (voir plus loin) sera ajouté automatiquement si vous activez la propriété de style "enableLoadingState". Vous pouvez aussi donner une référence vers votre propre composant qui va afficher la progression du téléchargement

Voici le rendu (le 2ème est le rendu de l'une image 404):

BusyIndicator

Un composant bien pratique pour les interfaces mobiles, un "spinner" pour indiquer à votre utilisateur qu'un chargement est en cours. Comme pour la CheckBox, on peut changer la couleur du spinner par la propriété "symbolColor". Voici le rendu (il tourne en vrai):

Notez que ce composant est complètement optimisé pour mobiles, notamment la rotation est stoppée lorsque le composant n'est pas visible.

ActionBar

L'ActionBar est le composant qui est présent de base dans toutes les View comme expliqué dans cet article: AIR Mobile – Comprendre les composants ViewNavigator et View Certains composants ont une Skin spéciale lorsqu'ils sont ajouté dans l'ActionBar comme Button par exemple:

HSlider

Le composant HSlider a une Skin optimisée pour mobile. Bizarrement, le composant VSlider n'est pas optimisé pour mobile (vous pouvez faire votre propre Skin pour VSlider en allant voir celle de HSlider):

RadioButton

Voilà le rendu des RadioButton en mode mobile:

Spacer

Le composant Spacer existe maintenant dans Spark, vous permettant de régler les espacements dans votre application de manière fine

TextArea / TextInput

Voilà le rendu des composants TextArea et TextInput lorsqu'ils sont utilisés dans un contexte mobile:

Notez que ces composants ont désormais une propriété "prompt" vous permettant d'indiquer un texte qui sera affiché lorsque le champ texte est vide et qu'il n'a pas le focus. Encore une fois, cela vous évite d'utiliser le composant d'une librairie externe.

ViewMenu

Un nouveau composant adapté si vous voulez mimer le menu natif Android. Dans chaque View, vous pouvez donner un tableau de ViewMenuItem dans la propriété "viewMenuItems". Pour chaque ViewMenuItem, vous pouvez donner plusieurs propriétés:

• Un icône
• Un label qui sera affiché sous l'icône
• Un event handler sur l'évènement CLICK

L'affichage de ce composant est automatique lorsque vous appuyez sur la touche MENU de votre téléphone Android.

Désolé pour le screenshot de mauvaise qualité, il est tard:

StyleableTextField

Voilà un nouveau composant introduit par Flex 4.5. Celui-ci est composant héritant de TextField optimisé pour mobile. Celui-ci n'est pas disponible en MXML, pour l'utiliser, vous devez l'instancier en ActionScript. Cela vous sera utile si vous souhaitez votre propre itemRenderer complètement optimisé pour affichage sur mobile (scrolling perfs & co).

Voilà tous les composants qui me viennent en tête, j'en ai sûrement oublié un ou deux