Programmation Flex/Utilisation des composants/Layout
| Programmation_Flex |
|---|
 |
| Sommaire |
| Liens |
| Modifier ce modèle |
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