AIR Mobile – Les composants et le thème Mobile Flex 4.5
L'avantage de pouvoir utiliser les composants Flex par rapport à une application pure AS3 est de simplifier le développement en vous donnant toute une bibliothèque de composants prêts à l'emploi. Certains composants sont de nouveaux composants, d'autres ont simplement une autre "Skin" optimisée pour le rendu mobile (plus gros, système de cache, etc.). Bien sûr, vous pouvez toujours faire vos propres composants mais on va voir ceux qui sortent directement du four. Dans ce billet, on va découvrir ces composants et leurs looks pour vous donner une idée.
Notez que les itemRenderer seront couverts dans un autre billet sur flex-tutorial.
Bouton
Ce n'est pas un nouveau composant, seulement le composant s:Button avec un look différent lorsque vous l'utilisez dans un projet de type Mobile:
Notez que le composant Spark Button a retrouvé sa propriété "icon" vous permettant d'ajouter un icône directement avec la Skin de base (il fallait faire sa propre Skin auparavant).
Flex 4 – Création d’une Skin pour le composant HSlider
Prenons tout d’abord le composant HSlider de base de Flex 4 :
Comme on l’a vu dans l'article précédent, dans la déclaration des SkinPart, on a "thumb" et "track" qui sont des boutons. On va laisser de côté, pour cet exemple, la Skin du DataTip. Pour créer une Skin, on va donc créer deux Skins de Button, un peu comme on l’a fait dans l’exemple précédent.
Pour la "track", on va simplement créer un rectangle arrondi avec un remplissage et une ombre portée. Ce fichier s’appellera MyTrackSkin.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Rect radiusX="2" radiusY="2" top="0" right="0" bottom="0"
left="0" height="3">
<s:fill>
<s:SolidColor color="0xFF3300"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x3E3E3E" weight="1" />
</s:stroke>
<s:filters>
<s:DropShadowFilter blurX="5" blurY="5"
alpha="0.32" distance="2" />
</s:filters>
</s:Rect>
</s:Skin>
Pour la "thumb", on va simplement créer une ellipse avec un remplissage. Ce fichier s’appellera MyThumbSkin:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Ellipse width="12" height="12">
<s:fill>
<s:SolidColor color="0xFF33FF"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x3E3E3E" weight="1" />
</s:stroke>
</s:Ellipse>
</s:Skin>
Il ne nous reste plus qu’à créer la Skin du Slider à proprement parler. Celle-ci sera constituée de nos deux composants. Notez leurs propriétés « id », liées aux SkinPart que l’on a décrit plus haut :
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Metadata>
[HostComponent("spark.components.HSlider")]
</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<s:Button id="track" left="3" right="3" top="3" bottom="3" skinClass="MyTrackSkin"/>
<s:Button id="thumb" top="0" bottom="0" width="12" height="5" skinClass="MyThumbSkin" />
</s:Skin>
Il ne nous reste plus qu’à donner notre Skin à notre composant dans l’application Flex principale :
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<s:HSlider skinClass="MySliderSkin" width="150"/>
</s:Application>
Voici le résultat de notre Skin très simpliste :
Mes projets (Open Source)
Autres
