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

AIR Mobile – Application TweetDeck (8) – Création d'un itemRenderer pour l'objet Tweet

Dans le tutorial précédent, on a vu comment interroger le service Twitter et comment afficher une liste de Tweet dans une liste:

AIR Mobile – Application TweetDeck (7) – Afficher une liste de Tweet

Le résultat est un peu décevant car de base, on ne peut afficher qu'une ligne de texte. Voilà par exemple le rendu d'un tweet sur TweetDeck:

En gros, on a :

• Une photo toujours de la même taille, en haut à gauche
• Un texte multi-ligne (le tweet) avec potentiellement des liens URL
• Un texte sur une ligne (le nom de l'utilisateur)

Sur le screenshot, il y a aussi le nombre de likes et de commentaires, qui est propre à Facebook. On va se limiter à Twitter pour le moment

Classes d'itemRenderer disponibles avec Flex

A partir de là, la grosse erreur que l'on pourrait faire, c'est d'aller coder à la main son itemRenderer de 0. Alors qu'il y a peut-être des classes qui pourraient nous aider. J'avais écrit un article là-dessus sur flex-tutorial.fr:

AIR Mobile – Les itemRenderer de List (LabelItemRenderer, IconItemRenderer, …)

Le composant IconItemRenderer semble parfait pour la tâche puisqu'il a déjà deux labels et une image. Quelques points bloquants cependant:

• Le texte multi-ligne vient en second
• Le texte multi-ligne ne supporte pas les liens URL

On pourrait adapter simplement le design en mettant le texte multi-ligne en bas et ne pas s'en pré-occuper mais pendant qu'on est à faire un clone de TweetDeck, autant faire attention aux détails.

La prochaine partie du tutorial sera un peu "avancée", vous pouvez la sauter si cela vous semble trop complexe.

Création de l'itemRenderer

Pour notre itemRenderer, on va donc hériter de IconItemRenderer. Faites donc un clic droit sur le package "views" > New > ActionScript Class. Nommez cette classe "TweetRenderer", Based On IconItemRenderer puis finish. Pour pouvoir effectuer nos tests, on va directement l'assigner sur notre liste:

  <s:List width="100%" height="100%" dataProvider="{searchResult.lastResult.results}"
          labelField="from_user">
    <s:itemRenderer>
      <fx:Component>
        <views:TweetRenderer iconField="profile_image_url"
                             labelField="from_user"
                             messageField="text" />
      </fx:Component>
    </s:itemRenderer>
  </s:List>

Voici le rendu provisoire:

Première étape: inversion du label et du message

Pour commencer, on va inverser la position des deux textes. Il faut bien faire attention que le texte du message est multi-ligne, la hauteur de l'itemRenderer est donc conditionnée par ce composant. Tout se passe dans la méthode "layoutContents" qui fait le calcul des tailles et du placement des éléments. On va surcharger cette méthode et inverser la position des éléments.

Pour éviter de vous taper la signature de la méthode layoutContents, on va utiliser une fonctionnalité de Flash Builder. Sur l'éditeur de code de TweetRenderer, faites clic droit puis Source puis Override / Implements methods…:

Cochez la méthode layoutContents et validez. Moins de risques d'erreur de cette manière. Dans la classe de base, on va récupérer un bout de code qui nous sera utile:

var hasLabel:Boolean = labelDisplay && labelDisplay.text != "";
var hasMessage:Boolean = messageDisplay && messageDisplay.text != "";

Comme cela, on a la détection de la présence ou pas des composants. Dans notre cas, on cherche juste à faire le switch quand le renderer dessine les 2 composants:

package views{
  import spark.components.IconItemRenderer;

  public class TweetRenderer extends IconItemRenderer{
    public function TweetRenderer(){
      super();
    }

    override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void{
      super.layoutContents(unscaledWidth, unscaledHeight);

      var hasLabel:Boolean = labelDisplay && labelDisplay.text != "";
      var hasMessage:Boolean = messageDisplay && messageDisplay.text != "";

      if (hasLabel && hasMessage){
        var labelY:Number = labelDisplay.y;
        var messageY:Number = messageDisplay.y;
        messageDisplay.y = labelY;
        labelDisplay.y = labelY + messageDisplay.height;
      }
    }

  }
}

Voici le rendu:

Bon, voilà, c'était assez simple pour cette partie. Maintenant, on va essayer d'afficher les liens URL différemment.

Deuxième étape : Afficher les liens URL

Autant la première étape était simple, autant la 2ème est plus corsée. Le service Twitter vous renvoie un contenu texte brut. Ce n'est pas du html, par exemple on a "Woo! I got 100% on the Adobe Illustrator quiz. Try it!  http://t.co/mrE3QOo via @envatovectors". La première mission va être de détecter ces liens dans le texte pour pouvoir les afficher différemment.

Pour ce genre de mission (recherche de chaîne dans une chaîne), et dans tous les langages, vous devriez avoir un premier réflexe : les expressions régulières. C'est l'arme parfaite pour s'attaquer à ce genre de problèmes. Mais si comme moi, vous n'êtes pas un "regexp-wizard", même détecter une URL dans un texte devient difficile.

 

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

<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"
    />

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;
}

This is <b> Bold </ b> text.

<TEXTFORMAT LEADING="2">
<P ALIGN="LEFT">
<FONT FACE="Verdana" SIZE="10" COLOR="#0B333C" LETTERSPACING="0" KERNING="0">
This is <b> Bold </b>text.
</FONT>
</P>
</TEXTFORMAT>