6 – Fonctionnalités avancées : états d’affichage, effets et transition
© Groupe Eyrolles, 2008
87
De notre côté, nous lui spécifions un identifiant (id="linkButtonEdito"),
un texte (label="+
en
savoir
plus"), un événement
click="currentState='edito_open_state'" et une position relative par
rapport à son conteneur, en bas à droite (right="0" bottom="0").
Compilez ensuite votre application et visualisez le résultat (figure 6-9).
Il suffit alors de cliquer sur le lien + en savoir plus pour déclencher la permutation d’états.
Nous constatons un premier problème : en élargissant le panneau Edito,
celui-ci est recouvert par les panneaux positionnés en dessous. Il faut
donc prévoir une translation verticale vers le bas de tous les panneaux
inférieurs.
Modifier les autres panneaux en conséquence
Dans notre cas, il est préférable de procéder à ces modifications en mode
Source. Mais il serait tout aussi aisé de le faire en mode Design.
Dans son état initial, notre panneau Edito possède une hauteur figée à
189 pixels. Après permutation, nous l’agrandissons à 300 pixels, ce qui
représente une augmentation de 111 pixels. Logiquement, nous devons
donc décaler vers le bas tous les panneaux concernés de 111 pixels.
Commençons par le panneau Calendrier. Dans son état initial, la valeur
de l’ordonnée du panneau est y=236. On obtient donc y=347 pixels en
selectionColor="0xB7F39B"
textRollOverColor="0x2B333C"
textSelectedColor="0x2B333C"
/>
Figure 6–9
Le panneau Edito s’est élargi, mais il est
couvert par les panneaux sous-jacents.
© Groupe Eyrolles, 2008
87
De notre côté, nous lui spécifions un identifiant (id="linkButtonEdito"),
un texte (label="+
en
savoir
plus"), un événement
click="currentState='edito_open_state'" et une position relative par
rapport à son conteneur, en bas à droite (right="0" bottom="0").
Compilez ensuite votre application et visualisez le résultat (figure 6-9).
Il suffit alors de cliquer sur le lien + en savoir plus pour déclencher la permutation d’états.
Nous constatons un premier problème : en élargissant le panneau Edito,
celui-ci est recouvert par les panneaux positionnés en dessous. Il faut
donc prévoir une translation verticale vers le bas de tous les panneaux
inférieurs.
Modifier les autres panneaux en conséquence
Dans notre cas, il est préférable de procéder à ces modifications en mode
Source. Mais il serait tout aussi aisé de le faire en mode Design.
Dans son état initial, notre panneau Edito possède une hauteur figée à
189 pixels. Après permutation, nous l’agrandissons à 300 pixels, ce qui
représente une augmentation de 111 pixels. Logiquement, nous devons
donc décaler vers le bas tous les panneaux concernés de 111 pixels.
Commençons par le panneau Calendrier. Dans son état initial, la valeur
de l’ordonnée du panneau est y=236. On obtient donc y=347 pixels en
selectionColor="0xB7F39B"
textRollOverColor="0x2B333C"
textSelectedColor="0x2B333C"
/>
Figure 6–9
Le panneau Edito s’est élargi, mais il est
couvert par les panneaux sous-jacents.