Adobe Flex Tutorial - Adobe Flex Tutorial

8déc/100

Associer un style CSS aux liens d'un texte HTML avec StyleSheet

Tutorial Flex écrit par Laurent Wroblewski (http://flex-ria.fr/)
Publiez vous aussi sur flex-tutorial!

Dans l'article précèdent, nous avions vu comment effectuer une action au clic sur une partie du texte d'un composant Label. Vous voilà donc heureux, avec votre texte qui déclenche une superbe action... Mais... Aucun utilisateur ne prend la peine de cliquer sur le texte. Pourquoi? Et bien, pour une raison bien simple : rien ne distingue le contenu interactif de votre composant du reste... Et donc, il n'est pas forcément intuitif ni évident pour un utilisateur potentiel de comprendre qu'un clic sur une portion donnée du texte aura un impact... Corrigeons donc cela.

Pour ce faire, nous allons appliquer une feuille de style à notre composant Label/Text/etc..., via la classe Stylesheet. L'affectation d'un objet de cette classe à un objet TextField va vous permettre d'appliquer des règles de formatage du texte suivant le standard CSS. La liste des propriétés CSS supportées par l'objet Stylesheet est visible à l'adresse suivante :

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/StyleSheet.html

Dans notre cas, nous allons donc appliquer un style aux liens de notre texte.

var styleSheet:StyleSheet = new StyleSheet();

styleSheet.setStyle('a:link', { color: '#FF0000', textDecoration: 'none' });

styleSheet.setStyle('a:hover', { textDecoration: 'underline' });

styleSheet.setStyle('a:active', { color: '#FF0000', textDecoration: 'underline' });

Les lignes ci-dessus définissent un nouvel objet Stylesheet, qui va attribuer aux liens de votre texte un style différent selon son état :

Couleur rouge et aucune décoration de texte pour le style "de base" (a:link).

Souligné quand le pointeur de la souris est au-dessus du lien (a:hover).

Souligné et couleur jaune pour un lien qui est activé (a:active).

Ensuite, pour affecter votre objet Stylesheet à votre composant de texte, il ne vous reste plus qu'à renseigner la propriété styleSheet de celui-ci.

monText.styleSheet = styleSheet;

Attention, il est possible que la ligne ci-dessus ne compile pas. En effet, si vous disposez d'un SDK Flex relativement ancien (3.0 par exemple), la propriété styleSheet n'est pas accessible directement.

Vous devez alors utiliser la ligne suivante à la place :

import mx.core.mx_internal;

this.txtExemple.mx_internal::styleSheet = styleSheet;

Dans la ligne ci-dessus, mx_internal est un namespace utilisé par le framework Flex pour désigner des propriétés de classes susceptibles d'être modifiées par le futur.
Libre à vous maintenant de définir un style pour vos liens!