Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Détecter le click sur un lien dans un texte HTML (TextEvent.LINK)

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

Vous utilisez le composant Flex Label (ou les composants qui l'étendent, comme Text), et vous souhaitez pouvoir réagir à un clic sur une portion
de son contenu? Pas si simple!

Imaginons un label doté du texte suivant : "Ceci est un exemple de LIEN vers une image!". Vous souhaitez qu'un clic sur le mot "LIEN" entraîne l'affichage d'une image à l'écran. Pour ce faire, nous allons passer par la propriété htmlText du composant et utiliser des balises HTML <a> pour encadrer le mot "LIEN". Seul petit problème, en utilisant cette balise de manière traditionelle (ex : <a href='assets/test.jpg'>), un clic sur le texte redirigera la page vers le lien inséré (dans notre exemple, vers
l'image assets/test.jpg). Pas vraiment ce que nous voulons...

L'astuce ici est d'utiliser cette syntaxe :

<a href='event:assets/test.jpg'>

Ainsi, un clic sur le texte entraînera le dispatch d'un événement de type TextEvent.LINK depuis votre composant Label, que vous aurez tout loisir de capturer au sein d'un handler pour effectuer un traitement de votre choix.

IMPORTANT : pour qu'un événement de type TextEvent.LINK soit dispatché depuis un Label, la propriété selectable de celui-ci doit être à true.

<mx:Script>
    <![CDATA[
        private function txtExemple_LinkHandler(evt:TextEvent):void
        {
            trace(evt.text);
        }

        private function txtExemple_InitializeHandler(evt:Event):void
        {
            this.txtExemple.htmlText = "Ceci est un exemple de <a href='event:assets/test.jpeg'>LIEN</a> vers une image!";
        }
    ]]>
</mx:Script>

<mx:Text id="txtExemple"
    initialize="txtExemple_InitializeHandler(event)"
    link="txtExemple_LinkHandler(event)"
    selectable="true"
    />

Dans l'exemple ci-dessus, en imaginant que l'utilisateur clique sur le mot "lien" du texte du composant txtExemple, un événement de type TextEvent sera dispatché, dont la propriété text sera égale à assets/test.jpeg. Après, libre à vous d'effectuer le traitement que vous souhaitez.

L'exemple ci-dessous va créer une image dont l'url sera renseignée dans le lien, et l'afficher dans l'application à la position du pointeur de la souris.
Un second clic sur l'image fera disparaître celle-ci. Attention, pour que l'image se positionne correctement, il faut que son container (dans mon cas l'Application) ait un layout de type absolute (un Canvas par exemple).

private var _image:Image;

private function txtExemple_LinkHandler(evt:TextEvent):void
{
    if (!this._image)
    {
        this._image = new Image();
        this.addChild(this._image);
    }
    this._image.source = evt.text;
    this._image.x = this.contentMouseX;
    this._image.y = this.contentMouseY;
    this._image.visible = this._image.includeInLayout = true;
    this._image.useHandCursor = this._image.buttonMode = true;
    this._image.addEventListener(MouseEvent.CLICK, image_ClickHandler, false, 0, true);
}

private function image_ClickHandler(evt:MouseEvent):void
{
    this._image.visible = this._image.includeInLayout = false;
}

Exemple en ligne

Flex Source Code Download: Télécharger le code source complet de l'application