Programmation Flex/Utilisation des composants/Layout

Programmation_Flex
Layout
Sommaire
Liste des composants Utilisation des composants Controles Layout Navigator Adobe Air Charts Applications avancées
Liens
Liens
Modifier ce modèle

BorderContainer

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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