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

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                            xmlns:s="library://ns.adobe.com/flex/spark" firstView="views.TweetDeckHomeView">
  <fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    s|IconItemRenderer{
      alternatingItemColors:#565556;
    }
  </fx:Style>
</s:ViewNavigatorApplication>

    s|IconItemRenderer{
      alternatingItemColors:#565556;
      color:#B5B6B5;
    }

return "<font size=\"" + fontSize + "\" face=\"Arial\" color=\"#FFFFFF\">" + value.replace(urlPattern, "<a href='$1$2$3'>$1$2$3</a>") + "</font>";

var styles:String = "a {color: #B5B6B5;}";

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

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

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

  }
}

AIR Mobile – Application Pokémon (16) – Réaliser une Skin de bouton générique

Les applications mobiles ne dérogent pas à la règle. Pour avoir une bonne application, il faut qu'elle soit fonctionnelle et agréable à l'oeil. Pour l'aspect fonctionnel, c'est souvent votre job en tant que développeur. Quant à l'aspect graphisme, c'est souvent réservé aux graphistes qui vous fournissent des maquettes. Mais on a pas toujours un graphiste sous la main, encore plus si vous faîtes une application perso avec des Pokémon dedans.

Heureusement, le look par défaut des composants Flex peut parfois être suffisant. Mais vous ne voulez pas que votre application ressemble à toutes les autres, il va donc falloir passer par l'étape du Skinning. Pas de panique, même si vous n'avez pas la fibre artistique, c'est très simple. Pour cela, pas besoin (on pourrait) de sortir des outils comme Photoshop ou Illustrator, on va tout faire dans le code.

Le résultat attendu

Si vous avez suivi tous les tutoriaux dans l'ordre, vous n'avez pas pu manquer le premier, celui sur l'étape de prototypage dans Balsamiq:

AIR Mobile – Application Pokémon (1) – Conception et maquettage

On avait définit le bouton comme ceci:

Plutôt simple, un texte et un icône à droite. D'ailleurs, le bouton "Evolution de …" y ressemble étrangement, on va pouvoir mutualiser les développements.

Utilisation des propriétés de Button par défaut

Il existe déjà une propriété "icon" sur button. Essayons donc le code suivant:

...
<s:Button id="soundButton" label="Ecouter le cri de {_p.nom}" click="onSoundClick(event)"
	icon="@Embed(source='/assets/sound_high.png')"/>
	...

Résultat:

L'icône est volontairement blanc car dans notre application, on a plutôt fait du "texte blanc sur fond noir" et pas l'inverse. Par la suite on changera ces couleurs.

Par défaut, l'icône est placé à gauche. Lors de la frappe dans Flash Builder, vous avez peut-être remarqué une autre propriété "iconPlacement":

Cela semble parfait, choisissons "right":

C'est mieux. Mais notre bouton ne prend pas toute la largeur et fait un peu tâche. On va lui donner une width="100%":

Hum, ce n'est pas vraiment le résultat espéré. Tous les éléments sont centrés par défaut alors que l'on voudrait avoir une partie à gauche et l'autre à droite. Pour nos besoins, les propriétés par défaut sont presque suffisantes mais pas vraiment. On peut faire beaucoup avec les propriétés par défaut mais on ne peut pas tout faire. Pour faire exactement ce que l'on veut, il faut faire une Skin.

Skin par défaut de Button : ButtonSkin

Je le dis souvent (peut-être pas assez) mais la meilleure manière d'apprendre le Flex est de s'inspirer des meilleurs exemples, de leurs techniques. Et ou trouve-t-on les meilleurs exemples? Si vous vous dîtes sur flex-tutorial.fr, cela me fait plaisir mais pas vraiment ^^.

Vous avez déjà tout ce qu'il faut sous la main, dans le code du SDK Flex. Flex est open source, profitez-en! Pour avoir passé pas mal de temps à fouiner dans les classes du framework, je peux vous assurez que l'on y trouve souvent la réponse à ses questions.

Pour commencer, allons voir le fichier CSS qui associé au thème mobile par défaut. Celui-ci se trouve sur votre disque, sous Windows il est ici:

C:\Program Files (x86)\Adobe\Adobe Flash Builder 4.5\sdks\4.5.0\frameworks\projects\mobiletheme\defaults.css

Pour un système Mac, c'est à peu près pareil sauf qu'il faut remplacer le début par Application (enfin vous savez vous servir de votre Mac). Dans ce fichier, on va chercher "Button", pour voir les styles et skins associés par défaut au composant Button. On trouve rapidement:

Button{
    fontWeight: "bold";
    skinClass: ClassReference("spark.skins.mobile.ButtonSkin");
}

On apprend déjà que la skin par défaut de tous les Button est spark.skins.mobile.ButtonSkin. Bon avec un peu de bouteille, vous auriez pu deviner cela, il est assez conventionnel en Flex de rajouter "Skin" à la suite du nom du composant pour symboliser la skin par défaut.

Retournons dans Flash Builder. Utilisez le raccourci Ctrl+T qui va vous permettre de consulter n'importe quelle classe du framework Flex. Tapez donc ButtonSkin puis Entrée pour consulter le code de cette classe. Prenez bien celle qui est dans le package "mobile", sinon vous tomberez sur la skin de base du thème classique (non-mobile):

Prenez 2 minutes pour bien comprendre comment fonctionne cette classe.

Analyse rapide du code de la classe ButtonSkin

Première partie, le constructeur. On y effectue un traitement suivant les DPI de l'application (densité de pixels). Suivant la classe DPI de l'appareil, on assigne différentes valeurs à upBorderSkin et downBorderSkin et différentes valeurs de paddings:

switch (applicationDPI){
	case DPIClassification.DPI_320:{
		upBorderSkin = spark.skins.mobile320.assets.Button_up;
		downBorderSkin = spark.skins.mobile320.assets.Button_down;

		layoutGap = 10;
		layoutCornerEllipseSize = 20;
		layoutPaddingLeft = 20;
		layoutPaddingRight = 20;
		layoutPaddingTop = 20;
		layoutPaddingBottom = 20;
		layoutBorderSize = 2;
		measuredDefaultWidth = 64;
		measuredDefaultHeight = 86;

		break;
	}
	...

On reviendra plus tard dans ce fil rouge sur ces problématiques de DPI.

<s:List width="100%" height="100%" dataProvider="{_dp}" labelField="nom">
    <s:itemRenderer>
      <fx:Component>
        <s:IconItemRenderer />
      </fx:Component>
    </s:itemRenderer>
  </s:List>

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.holrHomeView">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
 s|ActionBar
{
chromeColor: #990000;
}
</fx:Style>
</s:ViewNavigatorApplication>

s|ActionBar
{
  chromeColor: #990000;
  titleAlign: center;
}