Flex 3 - Applications Internet riches
© Groupe Eyrolles, 2008
72
Le style du composant Panel est désormais défini et intégré dans notre
projet Flex via le fichier MediaFoot.css. Il faut désormais demander à
notre conteneur de type TitleWindow d’utiliser le style défini en CSS
portant le nom de panneauStyle.
Pour ce faire, il suffit simplement d’ajouter la propriété styleName dans
la balise TitleWindow et d’indiquer le nom du style à utiliser :
Utilisation d’un style dans TitleWindow
Compilez maintenant le projet et admirez le résultat dans votre navigateur Internet favori (figure 5-9).
Intégrer les autres panneaux
Procédons maintenant à l’intégration du second panneau Calendrier. Ce
panneau ne correspond pas à un module spécifique de notre étude de cas
mais nous allons le positionner juste en dessous du panneau Edito.
Rappelons que nous travaillons à l’intérieur d’un conteneur Canvas. Il est
donc indispensable de spécifier les coordonnées (x,y) de tous les conteneurs enfants. Nous souhaitons intégrer un nouveau conteneur VBox au
panneau Calendrier et nous devons donc fournir les valeurs de son abscisse
et de son ordonnée. Ceci peut être fait manuellement, directement dans le
code, mais il est plus pertinent d’utiliser les fonctionnalités d’assistance de
positionnement des composants du mode Design. Passez donc en mode
styleName ="panneauStyle"
ALLER PLUS LOIN Intégration d’une icône
dans l’en-tête d’un TitleWindow
Il est possible d’ajouter une icône dans l’en-tête de
votre panneau. Ceci n’est pas possible via la feuille
de style CSS. Il faut donc rajouter directement,
dans la balise TitleWindow, la propriété
titleIcon, suivie du chemin d’accès de l’icône
graphique pour insérer l’élément. L’effet est visible
sur la figure 5-9 (remarquez la petite étoile jaune
devant le titre) :
titleIcon="@Embed('assets/ui/
star_icon.png')"
Figure 5–9
Modification des propriétés
de style d’un composant
© Groupe Eyrolles, 2008
72
Le style du composant Panel est désormais défini et intégré dans notre
projet Flex via le fichier MediaFoot.css. Il faut désormais demander à
notre conteneur de type TitleWindow d’utiliser le style défini en CSS
portant le nom de panneauStyle.
Pour ce faire, il suffit simplement d’ajouter la propriété styleName dans
la balise TitleWindow et d’indiquer le nom du style à utiliser :
Utilisation d’un style dans TitleWindow
Compilez maintenant le projet et admirez le résultat dans votre navigateur Internet favori (figure 5-9).
Intégrer les autres panneaux
Procédons maintenant à l’intégration du second panneau Calendrier. Ce
panneau ne correspond pas à un module spécifique de notre étude de cas
mais nous allons le positionner juste en dessous du panneau Edito.
Rappelons que nous travaillons à l’intérieur d’un conteneur Canvas. Il est
donc indispensable de spécifier les coordonnées (x,y) de tous les conteneurs enfants. Nous souhaitons intégrer un nouveau conteneur VBox au
panneau Calendrier et nous devons donc fournir les valeurs de son abscisse
et de son ordonnée. Ceci peut être fait manuellement, directement dans le
code, mais il est plus pertinent d’utiliser les fonctionnalités d’assistance de
positionnement des composants du mode Design. Passez donc en mode
styleName ="panneauStyle"
ALLER PLUS LOIN Intégration d’une icône
dans l’en-tête d’un TitleWindow
Il est possible d’ajouter une icône dans l’en-tête de
votre panneau. Ceci n’est pas possible via la feuille
de style CSS. Il faut donc rajouter directement,
dans la balise TitleWindow, la propriété
titleIcon, suivie du chemin d’accès de l’icône
graphique pour insérer l’élément. L’effet est visible
sur la figure 5-9 (remarquez la petite étoile jaune
devant le titre) :
titleIcon="@Embed('assets/ui/
star_icon.png')"
Figure 5–9
Modification des propriétés
de style d’un composant