Flex 3 - Applications Internet riches
© Groupe Eyrolles, 2008
126
Nous utiliserons la propriété de style headerColors, dont les caractéristiques permettent d’atteindre le but recherché. En effet, cette propriété
définit un tableau de deux couleurs utilisées pour dessiner l’en-tête. La
première couleur est celle du sommet. La seconde est la couleur inférieure, celle du bas de l’en-tête. En définissant deux couleurs différentes,
vous créez ainsi un dégradé, ce qui produit toujours cet aspect bombé
que nous trouvons régulièrement dans le design de nombreux logiciels à
interface de bureau.
Le code CSS à intégrer dans la section panneauStyle est donc le
suivant :
Compilez et observez le résultat. S’il est différent de celui observé sur la
figure 8-4, prenez un café, détendez-vous et recommencez. La suite de
l’aventure s’annonce passionnante, puisque nous allons apprendre maintenant à « écouter » notre application Flex… Vaste programme !
Créez l’événement grâce à l’objet Event
Afin de mettre en œuvre la fonctionnalité désirée, précisons d’abord
quelques fondamentaux concernant le principe de propagation événementielle. En effet, toute application Flex sera principalement définie
par ses réactions aux différents événements qui pourront survenir. Pour
faire simple, chaque interaction peut produire un événement. Par
exemple, un clic de souris sur un panneau constituera un « événement »
et le programme devra le gérer en déclenchant un processus prédéfini.
L’objet Event est automatiquement instancié pour tout événement Flex.
Ainsi, vous avez déjà utilisé cet objet Event sans trop saisir le modèle
événementiel fonctionnant en arrière-plan. Par exemple, à chaque permutation entre deux états d’affichage, lorsque l’utilisateur clique sur un
Button ou LinkButton pour activer cette permutation, nous utilisons
cette interaction utilisateur pour déclencher un événement. C’est le cas
dans l’exemple ci-dessous, dans lequel nous déclenchions la permutation
vers un état faisant apparaître notre formulaire d’abonnement :
Script du bouton d’abonnement à la newsletter
headerColors:#000000, #111111;
label="Abonnement newsletter !"
click="currentState='abonnementState'"
styleName="boutonNormal"/>
EN SAVOIR PLUS Modèle événementiel
en ActionScript 3
En ActionScript 3, le modèle événementiel est tiré
d’un modèle de conception appelé « Observateur »
(Observer Design Pattern).
© Groupe Eyrolles, 2008
126
Nous utiliserons la propriété de style headerColors, dont les caractéristiques permettent d’atteindre le but recherché. En effet, cette propriété
définit un tableau de deux couleurs utilisées pour dessiner l’en-tête. La
première couleur est celle du sommet. La seconde est la couleur inférieure, celle du bas de l’en-tête. En définissant deux couleurs différentes,
vous créez ainsi un dégradé, ce qui produit toujours cet aspect bombé
que nous trouvons régulièrement dans le design de nombreux logiciels à
interface de bureau.
Le code CSS à intégrer dans la section panneauStyle est donc le
suivant :
Compilez et observez le résultat. S’il est différent de celui observé sur la
figure 8-4, prenez un café, détendez-vous et recommencez. La suite de
l’aventure s’annonce passionnante, puisque nous allons apprendre maintenant à « écouter » notre application Flex… Vaste programme !
Créez l’événement grâce à l’objet Event
Afin de mettre en œuvre la fonctionnalité désirée, précisons d’abord
quelques fondamentaux concernant le principe de propagation événementielle. En effet, toute application Flex sera principalement définie
par ses réactions aux différents événements qui pourront survenir. Pour
faire simple, chaque interaction peut produire un événement. Par
exemple, un clic de souris sur un panneau constituera un « événement »
et le programme devra le gérer en déclenchant un processus prédéfini.
L’objet Event est automatiquement instancié pour tout événement Flex.
Ainsi, vous avez déjà utilisé cet objet Event sans trop saisir le modèle
événementiel fonctionnant en arrière-plan. Par exemple, à chaque permutation entre deux états d’affichage, lorsque l’utilisateur clique sur un
Button ou LinkButton pour activer cette permutation, nous utilisons
cette interaction utilisateur pour déclencher un événement. C’est le cas
dans l’exemple ci-dessous, dans lequel nous déclenchions la permutation
vers un état faisant apparaître notre formulaire d’abonnement :
Script du bouton d’abonnement à la newsletter
headerColors:#000000, #111111;
label="Abonnement newsletter !"
click="currentState='abonnementState'"
styleName="boutonNormal"/>
EN SAVOIR PLUS Modèle événementiel
en ActionScript 3
En ActionScript 3, le modèle événementiel est tiré
d’un modèle de conception appelé « Observateur »
(Observer Design Pattern).