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).
Flex DataGrid – Sélection de lignes dans un Datagrid avec des Checkbox
Tutorial Flex écrit par Vincent Le Gallic (www.frianbiz.com). Publiez vous aussi sur flex-tutorial!
Un Datagrid supporte par défaut la multi-sélection grâce à la propriété allowMultipleSelection. Cependant l’utilisation du Ctrl+click pour sélectionner plus d'un item à la fois n’est pas toujours adaptée. Comme dans l’interface de Gmail (réputée conviviale et pratique) la multi sélection peut être gérée grâce à une case à cocher attribuée à chaque item de la liste. Voici une façon de mettre en place cette technique en Flex :
Tous les objets affichés dans le Datagrid doivent avoir une propriété qui vous permettra de savoir si la ligne est sélectionnée ou pas. Dans l’exemple ci-dessous cette propriété se nomme « selected »
<mx:Object songId="0" title="Astronaut" artist="David Byrne" selected="false"/>
Cette propriété est fixée et utilisée directement dans la donnée car les itemRenderer que l'on va utiliser ensuite ont un mécanisme de recyclage. Il nous faut donc un emplacement où garder cette valeur en mémoire. La donnée remplit parfaitement ce rôle.
Pour commencer il faut ajouter une colonne au Datagrid qui contiendra un inline item renderer. On peut ensuite ajouter notre Checkbox. La propriété selected de la Checkbox (qui définit si notre case est cochée ou pas) sera liée à la propriété selected des items du datagrid de la façon suivante :
<mx:CheckBox selected="{data.selected}"/>
Il faut ensuite écouter les changements d’état lorsqu’on clic sur la checkBox :
<mx:CheckBox selected="{data.selected}" click="{data.selected=!data.selected}"/>
On met à jour la propriété selected de l’item afin d’éviter tout affichage aléatoire du à l’utilisation d’un itemRenderer dans un Datagrid.
Flex Item Renderer – Item Renderer utilisant des composants personnalisés MXML (Inline)
Bien que les item renderer de type Drop-In soient très simples à implédmenter, ils sont aussi limités dans leur utilisation en termes de configuration. Par exemple, dans l'exemple de l'article: Flex Item Renderer – Item Renderer utilisant les composants Flex standard (Drop-In), vous pouvez afficher une CheckBox dans la colonne d'une DataGrid Flex, mais vous ne pourrez pas changer les propriétés du composant utilisé comme item renderer.
Les ItemRenderer Inline sont mieux que les Drop-In Renderer adns le sens que vous pouvez configurez les paramètres du composant utilisé pour l'affichage. Par exemple, vous pouvez utiliser un inline item renderer pour fixer la propriété "enabled" de la CheckBox pour la désactiver afin que l'utilisateur ne puisse pas cocher/décocher la CheckBox.
Les Item Renderer inline requièrent que vous leur spécifiez la valeur de "itemRenderer" en utilisant des blocs MXML imbriqués plutôt que des attributs. Vous devez ensuite insérer le tag mx:Component à l'intérieur du tag mx:itemrenderer pour créer votre composant utilisable comme itemRenderer.
Flex States: Création et application d'états simples
Vous pouvez créer des états aussi bien au niveau de l'application qu'au niveau d'un composant. Le processus de création d'états est le même dans les deux cas. Bien que l'on puisse créer des états en ActionScript, il est bien plus commun et pratique de créer ses states par le biais du MXML.
Création d'états Flex (Flex states)
Chaque application a une propriété states qui permet de définir un tableau d'états. Depuis le MXML, vous pouvez utiliser cette syntaxe pour peupler ce tableau d'états:
<mx:states>
<!-- State elements -->
</mx:states>
Les States sont des instances de la classe mx.states.State, et on crée un nouvel état en utilisant le tag MXML <mx:State>. Lorsque vous créez un nouvel état, vous devez, au minimum, lui spécifier la propriété "name". La propriété "name" d'un état est l'identifiant par lequel il sera référencé.
Mes projets (Open Source)
Autres
