Changer le style de la fenêtre active (focus)
2 mai 2008
Par Jean Marie Macé - Exemples Flex - Lien permanent
Certaines applications comportent plusieurs fenêtres(Panel ou TitleWindow par exemple). Pour une meilleure, visibilité, souvent la fenêtre active (celle qui a le focus) doit se démarquer des autres pour l'indiquer à l'utilisateur. Je vous propose donc de le faire rapidement.
Dans mon exemple, j'ai opté pour un focus obtenue par un clic souris sur la fenêtre mais on peut très bien attribuer le focus sur un autre évènement comme un mouse over par exemple.
La première étape consiste à écouter l'évènement que j'ai choisit sur chaque Panel, à savoir le MOUSE_DOWN (quand le bouton gauche de la souris en enfoncé).
[actionscript]
panel1.addEventListener(MouseEvent.MOUSE_DOWN, onFocus);
panel2.addEventListener(MouseEvent.MOUSE_DOWN, onFocus);
panel2.addEventListener(MouseEvent.MOUSE_DOWN, onFocus);
Ce bout de code doit être initialisé au lancement de la création on ajoute donc ceci dans la méthode qui écoute l'évènement CreationComplete de notre application. Puis, il faut créer la méthode qui traite le focus, la méthode onFocus. Pour cela, j'opte pour pointer sur un style CSS différent, soit le style focus soit le style normal.
[actionscript]
private function onFocus(e:MouseEvent):void{
panel1.styleName = "normalPanel";
panel2.styleName = "normalPanel";
panel3.styleName = "normalPanel";
e.currentTarget.styleName = "focusPanel";
}
Ensuite, il ne reste qu'a choisir le style à appliquer aux Panel:
[css]
.normalPanel{
title-style-name : myNormalTitleStyle;
rounded-bottom-corners : true;
border-alpha : 0.6;
}
.focusPanel{
title-style-name : myFocusTitleStyle;
rounded-bottom-corners : true;
border-alpha : 0.9;
}
.myNormalTitleStyle{
color : #db7109;
fontFamily : Arial;
fontWeight : normal;
}
.myFocusTitleStyle{
color : #ee7c0d;
fontFamily : Arial;
fontWeight : bold;
}
Voici donc le résultat (click droit pour les sources) :