5 – Concevoir une interface utilisateur riche
© Groupe Eyrolles, 2008
67
Le panneau s’intègre correctement à l’emplacement désiré. Cependant,
les valeurs de style appliquées par défaut au panneau ne s’intègrent pas
esthétiquement au design défini pour le reste de l’interface utilisateur.
Nous pourrions ajuster l’aspect graphique en modifiant directement les
propriétés internes du panneau ainsi créé, mais nous procéderons différemment en paramétrant une feuille de style CSS, qui intégrera un style
graphique prédéfini, applicable à tous nos panneaux.
Mettre en forme l’interface grâce aux styles
L’objectif est donc de définir un style graphique unique pour tous les
panneaux. À cet effet, il est intéressant d’utiliser une feuille de style
CSS, tout comme le ferait un programmeur HTML.
Ajouter une feuille de style
1 Pour ajouter une feuille de style dans notre projet, il suffit de sélectionner le dossier /src dans la vue Flex Navigator – cliquez droit puis
choisissez New>CSS File (figure 5-4).
2 Ensuite, donnez un nom à votre fichier CSS (nous le nommons
MediaFoot.css).
Figure 5–4
Création d’un fichier CSS pour le projet
© Groupe Eyrolles, 2008
67
Le panneau s’intègre correctement à l’emplacement désiré. Cependant,
les valeurs de style appliquées par défaut au panneau ne s’intègrent pas
esthétiquement au design défini pour le reste de l’interface utilisateur.
Nous pourrions ajuster l’aspect graphique en modifiant directement les
propriétés internes du panneau ainsi créé, mais nous procéderons différemment en paramétrant une feuille de style CSS, qui intégrera un style
graphique prédéfini, applicable à tous nos panneaux.
Mettre en forme l’interface grâce aux styles
L’objectif est donc de définir un style graphique unique pour tous les
panneaux. À cet effet, il est intéressant d’utiliser une feuille de style
CSS, tout comme le ferait un programmeur HTML.
Ajouter une feuille de style
1 Pour ajouter une feuille de style dans notre projet, il suffit de sélectionner le dossier /src dans la vue Flex Navigator – cliquez droit puis
choisissez New>CSS File (figure 5-4).
2 Ensuite, donnez un nom à votre fichier CSS (nous le nommons
MediaFoot.css).
Figure 5–4
Création d’un fichier CSS pour le projet
