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.
Associer un style CSS aux liens d'un texte HTML avec StyleSheet
Tutorial Flex écrit par Laurent Wroblewski (http://flex-ria.fr/)
Publiez vous aussi sur flex-tutorial!
Dans l'article précèdent, nous avions vu comment effectuer une action au clic sur une partie du texte d'un composant Label. Vous voilà donc heureux, avec votre texte qui déclenche une superbe action... Mais... Aucun utilisateur ne prend la peine de cliquer sur le texte. Pourquoi? Et bien, pour une raison bien simple : rien ne distingue le contenu interactif de votre composant du reste... Et donc, il n'est pas forcément intuitif ni évident pour un utilisateur potentiel de comprendre qu'un clic sur une portion donnée du texte aura un impact... Corrigeons donc cela.
Pour ce faire, nous allons appliquer une feuille de style à notre composant Label/Text/etc..., via la classe Stylesheet. L'affectation d'un objet de cette classe à un objet TextField va vous permettre d'appliquer des règles de formatage du texte suivant le standard CSS. La liste des propriétés CSS supportées par l'objet Stylesheet est visible à l'adresse suivante :
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/StyleSheet.html
Dans notre cas, nous allons donc appliquer un style aux liens de notre texte.
var styleSheet:StyleSheet = new StyleSheet();
styleSheet.setStyle('a:link', { color: '#FF0000', textDecoration: 'none' });
styleSheet.setStyle('a:hover', { textDecoration: 'underline' });
styleSheet.setStyle('a:active', { color: '#FF0000', textDecoration: 'underline' });
Les lignes ci-dessus définissent un nouvel objet Stylesheet, qui va attribuer aux liens de votre texte un style différent selon son état :
- Couleur rouge et aucune décoration de texte pour le style "de base" (a:link).
- Souligné quand le pointeur de la souris est au-dessus du lien (a:hover).
- Souligné et couleur jaune pour un lien qui est activé (a:active).
Ensuite, pour affecter votre objet Stylesheet à votre composant de texte, il ne vous reste plus qu'à renseigner la propriété styleSheet de celui-ci.
monText.styleSheet = styleSheet;
Attention, il est possible que la ligne ci-dessus ne compile pas. En effet, si vous disposez d'un SDK Flex relativement ancien (3.0 par exemple), la propriété styleSheet n'est pas accessible directement.
Vous devez alors utiliser la ligne suivante à la place :
import mx.core.mx_internal; this.txtExemple.mx_internal::styleSheet = styleSheet;
Dans la ligne ci-dessus, mx_internal est un namespace utilisé par le framework Flex pour désigner des propriétés de classes susceptibles d'être modifiées par le futur.
Libre à vous maintenant de définir un style pour vos liens!
Exemple d'application
Flex Source Code Download: Télécharger le code source complet de l'application
Flex Tips – Canvas, cornerRadius et coins arrondis (rounded corners)
Le composant Adobe Flex Canvas (mx:Canvas) contient une propriété de style "cornerRadius" qui prend une valeur numérique. Et justement, il me fallait un Canvas ayant des coins arrondis. J'ai donc tenté bêtement de mettre le cornerRadius à 10, mais là, aucun résultat.
Après quelques recherches, il apparait en fait qu'il faut aussi préciser la propriété de style "borderStyle" qu'il faut mettre à la valeur "solid", sinon vos coins arrondis ne seront jamais affichés à l'écran.
Si vous ne souhaitez pas de bordures, mettez la propriété "borderThickness" à 0.
Voici donc le code CSS pour le résultat souhaité:
borderStyle: solid; cornerRadius: 5; borderThickness: 0;
Si vous utilisez votre Flex Canvas en MXML, vous aurez quelque chose comme:
<mx:Canvas borderStyle="solid" cornerRadius="5" borderThickness="0"/>
Flex 4 – Différences entre Flex 3 et Flex 4 (2-Nouvelle architecture Flex 4)
Traduction de l'article Differences between Flex 3 and Flex 4 beta de Joan Lafferty.
Un des principaux aspects de Flex 4 et le workflow entre designers et développeurs. Pour cela, le framework apporte une séparation claire entre le visuel et le comportement d'un composant. Dans Flex 3, le code d'un composant comprenait son comportement, sa mise en page et ses changements visuels. Dans Flex 4, les composants sont séparés en différentes classes, chacune traitant d'un comportement spécifique.
Une nouvelle architecture autour du FXG
Comme spécifié dans le document officiel Gumbo Architecture Document:
La classe principale du composants, celle dont le nom correspond au tag MXML du composant, encapsule le comportement principal du composant. Cela comprend la définition des évènements propagés par le composant, la donnée que le composant représente, la liaison avec des sous-composants, la gestion et le suivi de l'état interne du composant.
On couple avec cette classe de composant, une classe de skin qui gère tout ce qui est lié à l'apparence visuelle du composant dont les éléments graphiques, la mise en page, la représentation de la data, le changement d'apparence entre les différents States et les transitions entre ces State. Dans le modèle Halo, les skins Flex étaient des éléments graphiques responsable seulement de l'aspect graphique du composant. Changer n'importe quel autre aspect de l'apparence d'un composant, comme la mise en page ou la visualisation des states obligeait à créer une sous-classe du composant et à éditer le code ActionScript directement. Dans le modèle Gumbo, tout cela est définit déclarativement dans une classe de skin, principalement à l'aide des tags graphiques FXG.
Voir les spécifications du format FXG 1.0
Pour illustrer cette nouvelle architecture, on va regarder le code de la classe spark.components.Button. Cette classe ne contient que la logique du comportement du bouton. Tous ce qui concerne le visuel du composant est défini dans la classe spark.skins.default.ButtonSkin.
Pour des raisons de performance, Flex 4 donne aux développeurs des briques qu'ils peuvent utiliser pour construire la fonctionnalité dont ils ont besoin. Des fonctionnalités lourdes telles que le scroll ou la virtualisation qui ne sont pas nécessaires à toutes les applications ne sont pas appliquées par défaut.
Namespaces et packages dans Flex 4
Les classes de Flex 4 sont dans les mêmes packages mx.*. Flex 4 introduit le package spark.* pour les composants et les classes de base, effects, filters, layouts, primitives, skins et utils.
Flex 4 apporte un nouvel ensemble de composants et d'effets ayant le même nom que ceux de Flex 3. Pour éviter les conflits MXML, Flex 4 comprend 4 namespaces différents: MXML 2006, MXML 2009, Spark et Halo.
Flex 4 – Différences entre Flex 3 et Flex 4 (1-Migration vers Flex 4)
Traduction de l'article Differences between Flex 3 and Flex 4 beta de Joan Lafferty.
Flex 4 (nom de code Gumbo) représente un changement majeur par rapport à Flex 3. Flex 4 introduit en effet une nouvelle architecture de composants et de skinning. En tant que développeur Flex 3, vous ne devriez cependant par rencontrer trop de difficultés pour compiler vos applications Flex 3 avec le SDK Flex 4, car la compatibilité descendante (backwards compatibility) avec Flex 3 est conservée.
Dans cette série d'articles, je vais donner d'ensemble des objectifs principaux de Flex 4, des différences d'architecture ainsi qu'une introduction aux changements de composants, de mise en pages mais aussi l'utilisation des States et des effets. On verra aussi comment compiler votre application Flex 3 avec le SDK Flex 4. Cet article ne couvre pas les nouvelles fonctionnalités de Flex 4.
Tout au long de cette série d'articles, le terme de "Composants Halo" réfère aux composants inclus dans Flex 3. Le terme "Composants Spark" réfère au nouvel ensemble de composant de Flex 4.
Migration d'applications vers Flex 4
Pour une migration d'application Flex 3 vers Flex 4, vous n'aurez que peu de choses à modifier. A part quelques résolutions de bugs et un changement du thème par défaut, attendez-vous à ce que votre application fonctionne de la même manière (voire mieux) qu'elle le faisait en Flex 3. Cependant, voici quelques points sur lequels vous devriez être attentifs.
Dépendance à Flash Player 10
Compilez bien pour Flash Player 10. Flex 4 impose la compilation en FP10.
Les Type Selector (style) ont besoin d'un namespace
Un type selector CSS lie une classe Flex à un style. Par exemple, les sélecteurs CSS suivant agissent sur Button et DateField:
Button {
cornerRadius: 10;
}
DateField {
color: #780800;
}
Dans Flex 4, quand une application utilise des Type Selector, un namespace est requis. Si vous utilisez uniquement le namespace MXML 2006 dans votre application Flex, ajouter la déclaration de namespace par défaut à votre CSS:
<mx:Style> @namespace "http://www.adobe.com/2006/mxml"; … </mx:Style>
Si vous utilisez plusieurs namespaces dans votre application, vous devrez les indiquer dans votre CSS (voir plus loin).
De plus, si votre application utilise une méthode comme StyleManager.getStyleDeclaration("Button"), le type selector devra inclure le package. Par exemple, l'appel à getStyleDeclaration() deviendrait StyleManager.getStyleDeclaration("mx.controls.Button")
Changement de theme
Le theme par défaut des composant Flex 3 (Halo) est maintenant le theme Spark. C'est pourquoi le look et les tailles de votre application pourraient être différent en utilisant Flex 3. Si vous voulez tout de même utiliser le look Flex 3, vous le pouvez car Flex 4 inclut toujours le thème Halo de Flex 3. Pour compiler en utilisant le thème Halo, utilise le flag -compatibility-version=3.0 dans les arguments du compilateur ou bien le flag -theme. Pour cela, dans Flash Builder 4, vous devez modifier le paramètre Additional Compiler Arguments dans la section Flex Compiler du panel de propriétés. Si vous utilisez ces arguments, assurez vous que le répertoire framework/themes/Halo est bien dans votre Source Path.
Mes projets (Open Source)
Autres
