Blog RIA.do.be

La gestion du focus est un point important à considérer pour plusieurs raisons :

• La représentation du focus à l’utilisateur est un feedback pour aider au répérage.
• Cela augmente l’accessibilité des applications.
• Les designers qui ne sont pas habitués à de l’applicatif négligent souvent ce point.
• Ce détail fait partie intégrante d’une interface. Flex gère de façon native le focus. Il le donne par défaut au premier élément cliquable de la DisplayList. Il le propage ensuite de composant en composant en parcourant l’arbre. L’élément possédant le focus est identifiable grâce à un halo bleu autour de lui. On notera que si on veut enlever tout simplement cet effet, il suffit de spécifier la focusSkin du composant comme ceci :

Button {
focusSkin : ClassReference("mx.skin.ProgrammaticSkin");
}

Par contre, dans le cas d’une application entièrement reskinnée, il conviendra de prendre aussi en compte le design du focus (le bleu ciel d’Adobe s’intègrant mal avec un design recherché…)
 

Flex offre de grandes possibilités en matière de skinning.

Nous allons considérer, dans ce post,  l’utilisation des programmaticSkin par l’intermédiaire de la propriété borderSkin et également  l’utilisation des gradients. Il y a plusieurs avantages à réaliser des skins en AS plutôt qu’en CSS :

• Premièrement, skinner les composants à l’aide de programmaticSkin permet d’aller encore plus loin que les css classiques (impossible de contrôler finement le cornerRadius d’un bouton par exemple, l’actionScript va alors devenir indispensable).
• En deux, je dirais que mon point de vue de développeur m’aide à apprécier cette technique : je contrôle totalement l’affichage de mon composant, pas d’outil de design en plus.
• Dernier point : l’aspect graphique des composants peut être dynamique et s’adapter en fonction de l’état dans lequel il se trouve.