Test : Modifier l'aspect d'une application
Configuration requise
Niveau de l'utilisateur
Toutes
<?xml version="1.0" encoding="utf-8"?>
<s:Application ... backgroundColor="#F9F8E9">
<fx:Style source="TestDrive.css"/>
(...)
</s:Application>
TestDrive.css
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
global
{
font-family: Verdana;
font-size: 10;
chrome-color: #7F7364;
selection-color: #BFB59F;
roll-over-color: #E5DFC3;
focus-color: #7F7364;
}
s|Button
{
cornerRadius: 5;
color:#FFFFFF;
font-weight:bold;
}
s|Button:disabled{
color:#000000;
}
.navButton
{
fontSize: 12;
}
mx|DataGrid
{
alternating-item-colors:#F8F8F4,#FFFFFF;
header-style-name:titles;
}
.titles{
color:#FFFFFF;
font-weight:bold;
}
#xyz
{
color: #403029;
fontSize: 20;
fontWeight: bold;
}
Didacticiel
Dans les quatre modules précédents, vous avez appris à créer, déboguer et déployer une application Flex. Dans celui-ci, vous allez modifier l'aspect de l'application à l'aide de fonctions de mise en forme et d'habillage.
Avec les styles, vous pouvez définir des styles de composant en ligne dans un fichier MXML (comme celui dont vous disposez déjà) ou, de préférence, en utilisant des sélecteurs (règles de style) dans une feuille de style. Un nombre de styles restreint est défini pour chaque composant. Par exemple, pour un composant Label, vous pouvez définir des styles, notamment font-size (taille de la police), font-family (famille de la police) et color (couleur). Pour un composant Button, vous pouvez également définir un style corner-radius (rayon de l'angle). Si vous souhaitez modifier l'aspect d'un composant de manière plus radicale qu'avec les styles, vous devez créer ou modifier l'habillage associé au composant, c'est-à-dire le fichier qui détermine sa présentation.
Flex Framework comprend deux familles de composants : Spark et MX. Les balises dont le nom commence par la lettre s, (comme <s:Button>) sont de nouveaux composants Spark de Flex 4. Les balises dont le nom commence par mx (comme <mx:DataGrid>) sont les anciens composants Flex. C'est essentiellement par la mise en forme que vous définissez l'aspect des composants MX. En revanche, les nouveaux composants Spark ont été repensés pour utiliser principalement un modèle d'habillage (plutôt que de mise en forme) dans lequel le fichier d'habillage associé à chaque composant gère tous les éléments liés à son aspect, notamment les objets graphiques, la présentation et les états.
Dans ce didacticiel, vous allez créer une feuille de style et définir des règles de style que vous affecterez à votre application. Dans les didacticiels suivants, vous créerez des habillages de composant.
Étape 1 : Créer une feuille de style et un sélecteur global de feuilles de style CSS.
Après avoir sélectionné un objet en mode Création, affichez la vue Aspect et modifiez les styles de police et de couleur (voir Figure 1).
Si vous ne voulez pas choisir de valeurs, vous pouvez utiliser celles-ci : font-family : Verdana, font-size : 10, chrome-color : #7F7364, selection-color : #BFB59F, rollover-color : #E5DFC3 et focus-color : #7F7364.
Ces nouveaux styles sont appliqués aux composants de la zone de création. Même si la valeur du style font-size global n'est que de 10 pixels, le composant Label XYZ est toujours affiché en grands caractères car un style font-size est défini en ligne dans sa balise MXML. Les valeurs de style plus proches, ou plus spécifiques, sont prioritaires.
Passez en mode Source. Une nouvelle balise Style s'affiche sous la balise Application.
<fx:Style source="TestDrive.css"/>
Un nouveau fichier, TestDrive.css, doit figurer dans l'explorateur de packages. Ouvrez-le. Il contient un sélecteur global de feuilles de style CSS, dont les styles seront appliqués à tous les composants.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
global
{
font-family: Verdana;
font-size: 10;
chrome-color: #7F7364;
selection-color: #BFB59F;
roll-over-color: #E5DFC3;
focus-color: #7F7364;
}
Exécutez l'application et observez les différentes couleurs de chrome, de survol, de sélection et de focus des composants.
Étape 2 : Créez un sélecteur de type CSS.
En mode Création, sélectionnez l'un des boutons et remplacez la valeur de son rayon d'angle par 5 dans la vue Propriétés. Cliquez sur le bouton Convertir en CSS. Dans la boîte de dialogue Nouvelle règle de style, sélectionnez Composant spécifique (voir Figure 3).
Un sélecteur de type CSS est créé. Ses styles seront automatiquement appliqués à toutes les instances de composant de ce type (c'est-à-dire à tous les boutons, dans le cas présent).
Revenez dans le fichier TestDrive.css. Il contient un nouveau sélecteur de type CSS.
s|Button
{
cornerRadius: 5;
}
La lettre s au début de la balise Button indique qu'il s'agit du style des composants Button Spark, et non MX. Revenez dans TestDrive.mxml en mode Création ou exécutez l'application. Tous les boutons possèdent à présent des angles arrondis.
Étape 3 : Modifiez un sélecteur de feuille de style CSS.
Dans le fichier TestDrive.css, ajoutez une couleur blanche (#FFFFFF) et une épaisseur (font-weight) bold (gras) au sélecteur du composant Button.
Lors de la saisie des styles, appuyez sur Ctrl+espace pour forcer l'assistant de contenu à apparaître automatiquement et pouvoir ainsi sélectionner des styles (voir Figure 4).
Revenez dans TestDrive.mxml en mode Création ou exécutez l'application. Tous les boutons sont désormais affichés en caractères gras et blancs, mais les boutons désactivés sont difficilement lisibles (voir Figure 5).
Étape 4 : Créez un pseudo-sélecteur de feuille de style CSS.
Dans le fichier TestDrive.css, créez un pseudo-sélecteur pour l'état désactivé du composant Button et affectez-lui la couleur noire : #000000.
s|Button:disabled
{
color:#000000;
}
Examinez l'API d'un composant pour repérer les états définis (voir Figure 6). Rappelons que pour ouvrir l'API d'un composant, vous devez sélectionner Aide > Aide dynamique et cliquer sur une balise MXML, puis sur le lien vers l'API dans la vue Aide.
Revenez dans TestDrive.mxml en mode Création ou exécutez l'application. Les boutons désactivés doivent à présent être plus lisibles (voir Figure 7).
Étape 5 : Créez un sélecteur de classe CSS.
En mode Création, sélectionnez le bouton Departments et remplacez la valeur de son style font-size par 12 dans la vue Propriétés. Cliquez sur le bouton Convertir en CSS. Dans la boîte de dialogue Nouvelle règle de style, sélectionnez Tous les composants ayant le style et nommez le style navButton (voir Figure 8).
Revenez dans le fichier TestDrive.css. Il contient un nouveau sélecteur de classe CSS applicable aux composants au cas par cas.
.navButton
{
fontSize: 12;
}
Revenez dans TestDrive.mxml en mode Source et repérez le bouton deptBtn. Il possède à présent une propriété styleName (pour un seul état) dont la valeur correspond au nom du sélecteur de classe que vous venez de définir.
<s:Button x="124" y="85" label="Departments" id="deptBtn"
enabled.Departments="false" click="deptBtn_clickHandler(event)"
styleName.Employees="navButton"/>
Appliquez cette propriété à tous les états.
styleName="navButton"
Étape 6 : Affectez un sélecteur de classe CSS à un autre composant.
En mode Création, sélectionnez le bouton Employees, puis le style navButton dans la vue Propriétés (voir Figure 9). Déplacez les boutons afin qu'ils ne se chevauchent pas. Passez en mode Source et modifiez les balises Button afin que les nouvelles valeurs x, y et styleName soient utilisées dans tous les états.
Les styles applicables à ce composant apparaîtront dans la liste déroulante.
Les balises Button doivent se présenter comme suit :
<s:Button x="36" y="85" label="Employees" id="empBtn" enabled="false"
styleName="navButton" enabled.Departments="true"/>
<s:Button label="Departments" id="deptBtn"
click="deptBtn_clickHandler(event)"
styleName="navButton" x="138" y="85" enabled.Departments="false"/>
Ces deux boutons comportent désormais du texte plus grand que les autres. Le style navButton leur a en effet été appliqué de façon sélective.
Étape 7 : Mettez le composant DataGrid en forme.
Dans le fichier TestDrive.css, ajoutez un sélecteur de type pour le composant mx|DataGrid, et attribuez la valeur #F8F8F4, #FFFFFF au style alternating-item-colors et la valeur titles au style header-style-name. Créez ensuite un sélecteur de classe nommé titles avec le style color white et le style font-weight bold.
Ces deux sélecteurs doivent se présenter comme suit :
mx|DataGrid
{
alternating-item-colors:#F8F8F4,#FFFFFF;
header-style-name:titles;
}
.titles{
color:#FFFFFF;
font-weight:bold;
}
Revenez dans TestDrive.mxml en mode Création ou exécutez l'application. Le texte d'en-tête et les lignes du DataGrid doivent à présent être stylisés (voir Figure 10).
Étape 8 : Créez un sélecteur d'ID CSS.
En mode Source, attribuez au composant Label XYZ l'ID xyz et supprimez ses styles color, fontWeight et fontSize. Dans le fichier TestDrive.css, créez un sélecteur d'ID pour le composant Label en utilisant #xyz et attribuez la valeur #403029 au style color, la valeur bold au style font-weight et la valeur 20 au style font-size.
Le composant Label doit se présenter comme suit :
<s:Label id="xyz" x="36" y="36" text="XYZ Corporation Directory"/>
Par ailleurs, le sélecteur d'ID CSS doit se présenter comme suit :
#xyz
{
color: #403029;
fontSize: 20;
fontWeight: bold;
}
Revenez dans TestDrive.mxml en mode Création ou exécutez l'application et assurez-vous que le libellé XYZ est affiché en grands caractères marron et gras.
Étape 9 : Définissez la couleur d'arrière-plan de l'application.
Dans la balise Application, remplacez la couleur du style backgroundColor par #F9F8E9. Exécutez l’application.
Dans ce didacticiel, vous avez appris à créer une feuille de style et à définir des sélecteurs global, de type, de classe et d'ID CSS, ainsi qu'un pseudo-sélecteur, que vous avez affectés à l'application. Outre ces sélecteurs, vous pouvez créer des sélecteurs de classe propres à un composant et des sélecteurs descendants.
Dans le didacticiel suivant, vous allez apprendre à modifier plus radicalement l'aspect d'un composant en étendant un habillage de composant par défaut et en y ajoutant des composants.
Pour en savoir plus
Pour en savoir plus sur cette rubrique, consultez les ressources suivantes :