Programmation Flex/Utilisation des composants/Layout
Un livre de Wikibooks.
| Programmation_Flex |
 |
| Sommaire |
| Liens |
| Modifier ce modèle |
Sections |
BorderContainer[modifier]
<?xml version="1.0"?> <mx:WindowedApplication 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:BorderContainer cornerRadius="10"> <s:layout> <s:HorizontalLayout paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"/> </s:layout> <s:backgroundFill> <s:SolidColor color="red" alpha="100"/> </s:backgroundFill> <s:borderStroke> <mx:SolidColorStroke color="black" weight="3"/> </s:borderStroke> <s:Button label="Button 1"/> <s:Button label="Button 2"/> <s:Button label="Button 3"/> <s:Button label="Button 4"/> </s:BorderContainer> </mx:WindowedApplication>
- BorderContainer rajoute une bordre autour du container
DataGroup[modifier]
<?xml version="1.0"?> <mx:WindowedApplication 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:DataGroup itemRenderer="spark.skins.spark.DefaultItemRenderer"> <s:layout> <s:VerticalLayout /> </s:layout> <s:dataProvider> <s:ArrayList> <fx:String>item 0</fx:String> <fx:String>item 1</fx:String> <fx:String>item 2</fx:String> <fx:String>item 3</fx:String> </s:ArrayList> </s:dataProvider> </s:DataGroup> </mx:WindowedApplication>
- Les items sont regroupés verticalement
Form[modifier]
<?xml version="1.0"?> <mx:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" > <mx:Form x="50" y="50" verticalGap="15"> <mx:FormHeading label="Envoyez nous des commentaires" /> <mx:FormItem label="Nom entier:"> <mx:TextInput id="fullName" /> </mx:FormItem> <mx:FormItem label="Email:"> <mx:TextInput id="email" /> </mx:FormItem> <mx:FormItem label="Commentaires:"> <mx:TextArea id="comments" /> </mx:FormItem> <mx:FormItem> <mx:Button id="submit" label="envoyer" /> </mx:FormItem> </mx:Form> </mx:WindowedApplication>
FormHeading[modifier]
<?xml version="1.0"?> <mx:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" > <mx:Form x="50" y="50" verticalGap="15"> <mx:FormHeading label="Etrez un valeur dans le formulaire."/> <mx:FormItem label="Nom entier:"> <mx:TextInput id="fullName" /> </mx:FormItem> </mx:Form> </mx:WindowedApplication>
- Met un entête au formulaire
Group[modifier]
<?xml version="1.0"?> <mx:WindowedApplication 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:Group> <s:Button label="Button 1" left="10" top="13" bottom="10"/> <s:Button label="Button 2" left="110" top="13" bottom="10"/> <s:Button label="Button 3" left="210" top="13" bottom="10"/> <s:Button label="Button 4" left="310" top="13" bottom="10" right="10"/> </s:Group> </mx:WindowedApplication>
- Opère un groupement dans le code.
HGroup[modifier]
<?xml version="1.0"?> <mx:WindowedApplication 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:HGroup width="200" height="200"> <s:Button label="Button 1" left="10" top="13" bottom="10"/> <s:Button label="Button 2" left="110" top="13" bottom="10"/> <s:Button label="Button 3" left="210" top="13" bottom="10"/> <s:Button label="Button 4" left="310" top="13" bottom="10" right="10"/> </s:HGroup> </mx:WindowedApplication>
- Opère un groupement horizontal
HRule[modifier]
<?xml version="1.0"?> <mx:WindowedApplication 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:Declarations> <mx:WipeLeft id="myWL"/> </fx:Declarations> <s:Panel id="myPanel" title="Halo HRule Control Example" horizontalCenter="0" verticalCenter="0"> <s:VGroup left="10" right="10" top="10" bottom="10"> <s:Label width="100%" color="blue" text="Déplacez la souris sur le controle HorizontalRule pour le redessiner."/> <mx:HRule rollOverEffect="{myWL}" width="100%" strokeWidth="1" strokeColor="red"/> </s:VGroup> </s:Panel> </mx:WindowedApplication>
- En passant avec la souris on redessine le HRule
Module Loader[modifier]
<?xml version="1.0"?> <mx:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" > <mx:Panel title="Module Example" height="90%" width="90%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" > <mx:Label width="100%" color="blue" text="Selectionnez le tableau pour changer le panneau."/> <mx:TabNavigator id="tn" width="100%" height="100%" creationPolicy="auto" > <mx:VBox id="vb1" label="Module : Graphique Colonne"> <mx:Label id="l1" text="ColumnChartModule.swf"/> <mx:ModuleLoader url="ColumnChartModule.swf"/> </mx:VBox> <mx:VBox id="vb2" label="Module : Graphique Bar"> <mx:Label id="l2" text="BarChartModule.swf"/> <mx:ModuleLoader url="BarChartModule.swf"/> </mx:VBox> </mx:TabNavigator> </mx:Panel> </mx:WindowedApplication>
- Le module serait ici en simulation un flashMovie
Panel[modifier]
<?xml version="1.0"?> <mx:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" > <mx:Panel title="Exemple Panneau" height="90%" width="90%" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10" > <mx:Text text="Ceci est le contenu du panneau" /> </mx:Panel> </mx:WindowedApplication>
- Le panneau est un élément de présentation
Scroller[modifier]
<?xml version="1.0"?> <mx:WindowedApplication 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:Scroller> <s:Group width="100" height="100"> <mx:Image width="300" height="400" source="@Embed(source='c:/_TMP_/frame.jpg')"/> </s:Group> </s:Scroller> </mx:WindowedApplication>
SkinnableContainer[modifier]
<?xml version="1.0"?> <mx:WindowedApplication 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:SkinnableContainer skinClass="MyBorderSkin" left="10" top="10"> <s:layout> <s:HorizontalLayout gap="10"/> </s:layout> <s:Button label="Button 1"/> <s:Button label="Button 2"/> <s:Button label="Button 3"/> <s:Button label="Button 4"/> </s:SkinnableContainer> </mx:WindowedApplication>
MyBorderSkin.mxml Ce document définit le skin du container appelé MyBorderSkin
<?xml version="1.0" encoding="utf-8"?> <!-- containers\spark\mySkins\MyBorderSkin.mxml --> <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"> <fx:Metadata> [HostComponent("spark.components.SkinnableContainer")] </fx:Metadata> <!-- Define the skin states. --> <s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states> <!-- Define a Rect to fill the area of the skin. --> <s:Rect x="0" y="0" radiusX="4" radiusY="4" height="100%" width="100%"> <s:stroke> <s:LinearGradientStroke weight="1"/> </s:stroke> <s:fill> <s:LinearGradient> <s:entries> <mx:GradientEntry color="0xdddddd"/> </s:entries> </s:LinearGradient> </s:fill> </s:Rect> <!-- Define the content area of the container. --> <s:Group id="contentGroup" left="5" right="5" top="5" bottom="5"> <s:layout> <s:VerticalLayout/> </s:layout> </s:Group> </s:Skin>
- La couleur du skin est définie ici : mx:GradientEntry
SkinnableDataContainer[modifier]
<?xml version="1.0"?> <mx:WindowedApplication 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:Script> <![CDATA[ // besoin d'importer l'afficheur d'item import spark.skins.spark.DefaultItemRenderer; import spark.skins.spark.DefaultComplexItemRenderer; import spark.components.Button; public function customItemRendererFunction(item:*):IFactory { if (item is Button) { return new ClassFactory(DefaultComplexItemRenderer); } else { return new ClassFactory(DefaultItemRenderer); } } ]]> </fx:Script> <s:Panel title="Exemple : Composant SkinnableDataContainer" width="75%" height="75%" horizontalCenter="0" verticalCenter="0"> <!-- Une fonction d'afficheur d'item peut être définie dans le but d'afficher unmix de données et des items graphiques. --> <s:SkinnableDataContainer itemRendererFunction="customItemRendererFunction" left="10" top="10"> <s:layout> <s:HorizontalLayout gap="1"/> </s:layout> <s:dataProvider> <s:ArrayCollection> <s:Button label="Button 1"/> <fx:String>primitive data string</fx:String> <s:Button label="Button 2"/> </s:ArrayCollection> </s:dataProvider> </s:SkinnableDataContainer> </s:Panel> </mx:WindowedApplication>
- Le SkinnableDataContainer contient une liste de données : dataProvider
- La liste de données est un tableau de collection d'objets mx (Button, String)
- La fonction "customItemRendererFunction" retourne l'afficher d'item pour chaque objet du tableau
Spacer[modifier]
<?xml version="1.0"?> <mx:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" > <mx:HBox> <mx:Button label="Premier"/> <mx:Spacer width="40"/> <mx:Button label="Second"/> <mx:Button label="Troisième"/> </mx:HBox> </mx:WindowedApplication>
- Le spacer fait un espacede 40 pixels
TileGroup[modifier]
<?xml version="1.0"?> <mx:WindowedApplication 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:Panel title="Exemple : Component TileGroup" width="75%" height="75%" horizontalCenter="0" verticalCenter="0"> <s:Group left="10" right="10" top="10" bottom="10"> <s:TileGroup horizontalGap="1" verticalGap="1"> <s:Button label="1" width="50" height="50" /> <s:Button label="2" width="50" height="50" /> <s:Button label="3" width="50" height="50" /> <s:Button label="4" width="50" height="50" /> <s:Button label="5" width="50" height="50" /> <s:Button label="6" width="50" height="50" /> <s:Button label="7" width="50" height="50" /> <s:Button label="8" width="50" height="50" /> <s:Button label="9" width="50" height="50" /> </s:TileGroup> </s:Group> </s:Panel> </mx:WindowedApplication>
- Le TileGroup organise les éléments en carreau
TitleWindow[modifier]
<?xml version="1.0"?> <mx:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" > <mx:Script> <![CDATA[ import mx.managers.PopUpManager; import mx.controls.TextArea; import mx.containers.TitleWindow; private var _window:TitleWindow; private function showWindow(event:MouseEvent):void { var textArea:TextArea = new TextArea; textArea.text = "Texte dans une TextArea qui va être ajouté à une PopUp utilisant TitleWindow"; textArea.height = 100; _window = TitleWindow(PopUpManager.createPopUp(this, TitleWindow)); _window.addChild(textArea); } ]]> </mx:Script> <mx:Button label="Ouvrir une PopUp avec PopUpManager" click="showWindow(event)"/> </mx:WindowedApplication>
- showWindw lance une titleWindow
VGroup[modifier]
<?xml version="1.0"?> <mx:WindowedApplication 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:VGroup width="200" height="200"> <s:Button label="Button 1" left="10" top="13" bottom="10"/> <s:Button label="Button 2" left="110" top="13" bottom="10"/> <s:Button label="Button 3" left="210" top="13" bottom="10"/> <s:Button label="Button 4" left="310" top="13" bottom="10" right="10"/> </s:VGroup> </mx:WindowedApplication>
- Opère un groupement vertical
VRule[modifier]
<?xml version="1.0"?> <mx:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" > <mx:Panel title="VRule Control Example" id="myPanel" horizontalAlign="center" paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10"> <mx:VRule rollOverEffect="WipeUp" strokeWidth="1" strokeColor="red"/> <mx:Label width="100%" color="blue" text="Déplacez la souris sur le controle VRule pour le redessiner."/> </mx:Panel> </mx:WindowedApplication>
- En déplaçant la souris dur le VRule on le redessine
