Adobe Flex Tutorial - Adobe Flex Tutorial

Flex Styles / Skins

Le Framework Flex contient de nombreuses fonctionnalités prédéfinies, ce qui simplifie le processus de création d'applications. Tous les composants de l'interface utilisateur sont déjà prêts sans avoir à écrire de code pour les faire fonctionner. Cependant, cela serait presque inutile dans la plupart des cas si vous ne pouviez pas personnaliser l'apparence de l'application. Comme vous allez le voir, la personnalisation de composants Flex est une autre fonctionnalité prédéfinie.

Il y a essentiellement deux manières de personnaliser l'apparence des composants:

Appliquer des Styles
Changer les Skins

Les Styles sont des paramètres tels que la couleur, la police d'écriture, les bordures, la taille des lignes etc … Ce sont des paramètres que vous pouvez changer par du code, aussi bien à la compilation qu'à l'exécution. Les Styles vous permettent de personnaliser une bonne partie de l'apparence des composants, même s'ils ont leur limites. Par exemple, si vous voulez changer la couleur de fond d'un bouton, vous pouvez le faire en utilisant les Styles, mais si vous voulez modifier la forme du bouton (passer d'un rectangle à un trapèze par exemple), vous devez utiliser une autre technique par laquelle vous changer la Skin du composant.

Les Skins peuvent être des éléments graphiques (images PNG par exemple) ou des éléments de code (classes), et ils vous donnent non seulement la possibilité de personnaliser les éléments d'un composant mais aussi de changer complètement quels éléments seront utilisés. De cette manière, l'utilisation des Skins vous permet de modifier complètement l'apparence des composants de telle sorte qu'ils ne soient même pas reconnaissables par rapport à leur apparence par défaut. Vous pouvez utiliser à la fois les Styles et les Skins, même si parfois l'application d'une Skin va annuler certains de vos Styles.

Vous allez apprendre ici comment utiliser ces techniques qui vous permettront de personnaliser le look de votre application Flex. Nous verrons aussi comment utiliser les Fonts (polices d'écritures), les CSS (Cascading Style Sheet), comment personnaliser le Preloader Flex et comment créer des thèmes pour vos applications RIA.

FLEX STYLES

Utilisation des Styles

Les Styles vous permettent de contrôler de nombreux aspects du look d'un application Flex, dont les couleurs, les polices, les espacements, les animations et bien d'autres. Vous pouvez définir et appliquer de Styles de nombreuses manières:

Les instances de Styles
Les Sélecteurs par Classe (feuilles de style CSS)
Les Sélecteurs par Type (feuilles de style CSS)
Les Styles Globaux

Puisqu'il y a plusieurs manières d'appliquer des styles, il est en fait possible d'appliquer différentes valeurs pour le même style à un composant. Par exemple, vous pouvez fixer la couleur d'un composant bouton (Button) en utilisant une instance de style en même temps qu'un sélecteur de type. Puisque c'est possible, il est nécessaire pour Flex d'avoir un ordre de préférence pour l'application des styles. Cet ordre, (en partant de la plus haute priorité jusqu'à la plus basse) est celui de la liste ci-dessus. Ce qui veut dire que si Flex doit décider entre une instance de Style ou un sélecteur de type, il utilisera la valeur de l'instance de style.

Valeurs et Types de Styles Flex

Il y a beaucoup de Styles différents, et chacun d'eux à un type de donnée pour sa valeur. Par exemple, le style utilisé pour indiquer la police (fontFamily) requiert une chaîne de caractères spécifiant le nom de la police à utiliser, alors que le style utilisé pour indiquer la taille de la police (fontSize) requiert une valeur numérique. En fait, tous les styles acceptent un de ces deux types de données: String et Number. Cependant, certains styles acceptent plus d'un type de valeur. Par exemple, le Style color peut être spécifié en utilisant une valeur numérique ou alors une chaîne comme red ou green. Ces valeurs sont transposées automatiquement par Flex. D'autres Styles requièrent une valeur numérique qui soit 0 ou 1, mais vous pouvez aussi spécifier un Boolean true ou false.

Cet exemple de code fixe la propriété dropShadowEnabled à 1 mais vous pourriez aussi utiliser la valeur true pour avoir le même effet:


	VBox {
		backgroundColor: green;
		borderStyle: solid;
		dropShadowEnabled: 1;
	}

Certains styles proposent de spécifier une unité de mesure. Cependant, Flex ignore toutes les unités de mesures et utilise seulement la partie numérique de la valeur.

Flex ignore toutes les unités de mesures et utilise seulement la partie numérique de la valeur

Par exemple, lorsque vous spécifiez une taille de police, vous pouvez spécifier une unité de mesure telle que le pixel ou les points, mais le résultat sera le même pour n'importe quel unité (ou même sans unité). Cela vous autorise à utiliser la même feuille de style pour vos applications RIA Flex que celle que vous utilisez pour du HTML.

L'exemple suivant fixe la propriété font-size d'un sélecteur de classe à 15px, qui sera interprété comme 15 par Flex:

.example {
	font-size:15px;
}

Flex Style Explorer

Le Flex Style Explorer vous permet de voir quels styles sont disponibles pour tous les composants Flex. Vous pouvez ajuster ces styles en temps réel et visionner le résultat immédiatement. Vous avez aussi accès à la feuille CSS générée pour créer ces Styles. Cet outil vous sera extrêmement pratique lorsque vous allez vouloir modifier l'apparence de votre application Flex puisque vous n'aurez pas à recompiler pour voir le résultat du changement effectué.

Abode Flex Style Explorer

Les Instances de Styles

Les instances de Style sont les styles fixés pour une instance spécifique d'un composant. Vous pouvez fixer ces instances de Style en utilisant du MXML ou de l'ActionScript. Fixer les instances de Style en utilisant du MXML est souvent appelé "inline style" car vous spécifiez simplement la valeur d'un attribut dans le tag du composant.

Suite de l'article sur les instances de style CSS avec Flex

Utilisation des CSS dans Flex

Vous pouvez utiliser les CSS pour définir des styles pour vos composants. Bien que vous pouviez utiliser les CSS à l'exécution, nous allons voir comment ils sont utilisés à la compilation Flex.

CSS est une méthode standard pour appliquer des styles à travers des plate-formes, langages et frameworks. La syntaxe des CSS en Flex est identique à celle utilisée pour le HTML.

Suite de l'article sur l'utilisation des CSS avec Flex

Utilisation du StyleManager et setStyleDeclaration

De manière transparente, Flex convertit tous le CSS à des instructions ActionScript qui sont gérées par une classe appelée mx.managers.StyleManager. Dans la plupart des cas, il n'est pas nécessaire de travailler directement avec la classe StyleManager. Cependant, dans le cas où vous voudriez avoir un contrôle plus précis sur les modification à l'exécution (modifications faites avec les sélecteurs de classe ou de type), vous devrez travailler avec le StyleManager.

Suite de l'article sur le StyleManager dans Flex

Styles Global et Priorités entre les Styles

Vous pouvez appliquer des styles globaux en utilisant le sélecteur "global". Vous pouvez utiliser ce sélecteur dans les feuilles CSS externes, les déclarations à l'intérieur des balises ou en utilisant le StyleManager. Les Styles globaux ont la priorité la plus basse, ce qui veut dire qu'il sera appliqué uniquement s'il n'est pas écrasé par un paramètre de plus haute priorité (sélecteur de type/class ou instance de style).

Suite de l'article sur le Style global et les priorités entre Styles

Quand vous voulez personnaliser la police (font) utilisée par des composants dans vos application RIA Flex, vous aurez besoin de savoir comment travailler avec ces polices, qui sont bien spécifiques. La première chose à connaître à ce propos est la manière dont Flex fait la différence entre plusieurs type de polices.

Flex et les polices d'écriture (fonts)

On peut différencier trois grands types de polices d'écriture dans Flex:

System Fonts: Ce sont les polices installées sur le système d'exploitation de l'utilisateur. Tout comme une page HTML peut afficher du texte en utilisant les polices installées sur le PC, Flex peut le faire
Device Fonts: Il existe trois device fonts, _sans, _serif et typewriter qui sont plutôt des catégories de polices en fait
Embedded Fonts: Les applications Flex vous permettent d'embarquer (embed) des contour de police avec le fichier .swf, vous pouvez donc garantir à tous les utilisateurs qu'ils verront la même police même s'il ne l'ont pas d'installée sur leur machine.

System Fonts

Quand vous utilisez des polices système, le poids de votre application flex ne grossit pas car vous n'embarquez rien de plus. Vous pouvez spécifier des polices système simplement en spécifiant le nom de la police à utiliser en tant que fontFamily (ou font-family) comme dans cet exemple:

font-family: Verdana;

Le problème avec les fonts système, est que l'utilisateur doit avoir la police sur sa machine. Sinon, l'application sera rendue avec la police par défaut du système. C'est pourquoi il est souvent une bonne idée de spécifier des polices system comme police de remplacement. Vous pouvez spécifier la valeur de font-family comme une liste séparée par des virgules. L'application flex essaiera d'utiliser la première police de la liste, si elle ne peut pas trouver la police système, il utilisera la prochaine sur la liste et ainsi de suite:

font-family: Verdana, Arial, Helvetica;

Device fonts

Les device fonts (polices de périphérique) ne sont pas des polices spécifiques, mais plutôt des noms de catégories de polices. Flex reconnaît 3 polices de périphérique: _sans, _serif et _typewriter qui sont en fait des catégories. Par exemple, _sans correspond à Arial ou Helvetica, _ serif correspond à Times New Roman alors que _typewriter correspond généralement à Courier ou Courier New. Utiliser des polices de périphérique garantit que le texte apparaitra dans un certain style. Quand vous utilisez une device font en CSS, vous devez mettre son nom entre guillemets:

font-family: "_sans";

Embedded Fonts

Même s'il y a plusieurs cas d'utilisation pour les system fonts et device fonts, les polices le plus fréquemment dans les application Flex sont les polices Embarquées (embedFonts). Les polices de texte embedded sont en fait les contours de police compilés avec le .swf, garantissant que tous les utilisateurs auront le même rendu. L'inconvénient avec les polices embedded est qu'elles peuvent augmenter la taille du fichier .swf. Cependant, puisqu'on considère que les applis Flex sont des RIA (Rich Internet Applications), cette augmentation de taille ne sera pas forcement un problème.

Suite de l'article sur comment embarquer une police dans Flex (embedded font)

FLEX SKINS

Utilisation des Skins Flex

Bien que les Styles soient un très bon moyen de personnaliser des composants, il ne peuvent pas faire beaucoup de modifications. Si vous voulez changer la couleur, la police, ou l'espacement des composants, les styles sont parfaits. Cependant, si vous voulez changer l'apparence d'un composant pour qu'il utilise une forme différente, vous devrez utiliser des Skins plutôt (ou en addition de) que des styles.

Les Skins de composants sont des éléments graphiques ou des classes que vous pouvez spécifier pour des états et/ou des parties d'un comosant dont vous voulez remplacer l'apparence standard. Chaque type de composant Flex a différentes Skin que vous pouvez fixer. Par exemple, les boutons ont des Skins telles que upSkin, overSkin et downSkin qui déterminent l'apparence d'un bouton dans ses différents états. Vous pouvez embarquer des éléments graphiques tels que des fichiers JPG ou PNG, ou utiliser des skins programmées en ActionScript.

Appliquer des Flex Skins

Vous pouvez appliquer des skins de la même manière que vous appliquez des styles: en utilisant les skins inline, setStyle(), CSS ou le StyleManager. Chaque type de composant à ses propres paramètres qui sont traités comme des styles. Les styles de skin pour chaque composant varient. Par exemple, les boutons ont des skins telles que upSkin, overSkin, downSkin et un TextInput aura une skin borderSkin. Les valeurs de skin doivent toujours référencer une classe. Pour les Skins graphiques, ces valeurs devront être une classe à partir d'une image embarquée (avec le tag metadata Embed). Pour les skins codées en AS3, la valeur devra toujours être une référence vers la classe de skin.

Utilisation des Skins Graphiques (jpg, png …) et Scale-9

Les Skins graphiques sont parfois le moyen le plus simple et le plus rapide pour créer des composants à l’apparence très personnalisée. Une skin graphique consiste à embarquer (embed) des images ou des composants SWF que seront substituées au dessin par défaut du composant.
Typiquement, il faut créer des éléments graphiques pour chaque skin (suivant celle qui sont disponibles pour le composant en question), exporter ces éléments sous une forme que Flex peut embarquer (.png, .jpg, .swf …), embarquer ces éléments, et fixer les styles de skins pour qu’ils pointent vers les bons éléments…

Suite de l'article sur l'utilisation des Skins Graphiques (jpg, png …) et Scale-9

Skinner des composants en ActionScript

Coder des Skins est bien plus complexe que d'utiliser des skins graphiques. Cependant, l'utilisation de skins codées en AS3 donne de nombreux avantages. Vous aurez plus de contrôle car vous pouvez répondre à tout ce qui touche à la skin à l'exécution, tels que les changements d'état ou un redimensionnement (scale). Puisque les skins programmées utilisent du code plutôt que des images, vous aurez des fichiers plus petits que pour l'équivalent graphique. De plus, le programmatic skinning permet d'utiliser des fonctionnalités bas-niveau telles que les filtres (display object filter): drop shadow, bevel, glow …

Suite de l'article sur comment Skinner des composants en ActionScript, Programmatic Skinning

Skins sur l'Application Background (fond de l'application Flex)

Dans presque toutes vos applications RIA Flex, vous voudrez personnaliser l'arrière plan de votre application. Vous pouvez utiliser une skin pour cela en utilisant le style backgroundImage. Vous pouvez utiliser aussibien des Skins graphique que des skins codées pour le background. Voici un exemple qui embarque un fichier PNG et tant que background de l'application Flex.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	backgroundImage="@Embed('/assets/application-background.png')">

Appliquer une Skin sur les ToolTip

Vous pouvez skinner les tool tip exactement comme vous le feriez pour n'importe quel composant (de manière graphique ou codée en AS3). Fixez simplement la valeur du sélecteur de type ToolTip pour le paramètre borderSkin pour pouvoir changer son apparence.

Suite de l'article Appliquer une Skin sur les ToolTip

Créer un Preloader personnalisé / Changer le Preload Flex par défaut

Par défaut, toutes les applications Flex utilisent un preloader standard avec une barre de progression (progress bar) pendant que l’application elle-même se télécharge. Le chargement standard comprend tous les aspects du préchargement, y compris les shared libraries, les polices, et toutes les classes utilisées dans les modules. Enfin, il s’occupe de l’initialisation de l’application Flex.

Suite de l'article Flex Preloader: Créer un Preloader personnalisé

FLEX THEMES

Utilisation des Thèmes

Les thèmes Flex permettent de compiler tous les fichier CSS ainsi que les éléments graphiques des skins et les classes se skin codées en AS3 dans un SWC que vous pouvez utiliser avec vos applications RIA Flex. Cette technique a deux avantages certains:

Cela permet de précompiler les styles / skins donc l'application sera compilée plus rapidement
Les thèmes Flex permettent d'être déployés sur plusieurs applications Flex de manière plus simple (un seul fichier SWC)

Utiliser un thème pour une application Flex est très simple. Il faut seulement ajouter l'option "-theme" au compilateur mxmlc.

Si vous compilez votre Flex en ligne de commande, ajoutez simplement "-theme fichierTheme.swc" dans les options du compilateur comme dans cet exemple:

mxmlc -theme corporate.swc Main.mxml

Si vous utilisez Flex Builder pour compiler votre application, vous devez ouvrir les propriétés du projet, l'option Flex Compiler, et ajouter "-theme fichierTheme.swc" sans les guillemets dans le champ réservé au arguments additionnels du compilateur.

Créer un Thème Flex

Pour utiliser un thème, il vous faut déjà avoir crée un thème Flex. Un thème doit contenir au moins un fichier CSS, et certainement des éléments graphiques comme des images ou des skins AS3. Un thème doit être précompilé en un fichier SWC. Vous pouvez compiler un SWC en utilisant compc, le compilateur en ligne de commande pour les composants. Lorsque vous compilez un thème, vous devez spécifier l'option "-include-file" pour chaque fichier CSS ou élément graphique que vous voulez ajouter au SWC. L'option "-include-file" requiert 2 paramètres: le nom par lequel vous référencez le fichier et le chemin du fichier

Suite de l'article sur la création de thème SWC Flex

Modifier les CSS à l'exécution

Dans Flex 2.0.1 ou supérieur, vous pouvez utiliser les CSS à l'exécution. Lorsque vous utilisez les CSS directement dans votre application, ceux-ci sont intégrés au moment de la compilation. On va maintenant voir comment charger et appliquer de nouvelles feuilles de style CSS à l'exécution, c'est à dire après le chargement de l'application Flex.

Puisque les styles Flex requièrent parfois des éléments graphiques, des skins, des classes ou des polices d'écriture, les CSS utilisés à l'exécution doivent être précompilés en SWF. Quand vous utilisez Flex 2.0.1, vous pouvez utiliser le compilateur mxmlc pour compiler un fichier CSS en fichier SWF qui inclut tous les éléments graphiques.

Suite de l'article sur la modification des CSS Flex à l'exécution