Programmation Flex/Utilisation des composants/Navigator

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

Accordion

<?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:Accordion width="400" height="240">
		<mx:Form label="Nom" icon="@Embed(source='./application_form.png')">
			<mx:FormItem label="Prénom">
				<mx:TextInput id="first"/>
			</mx:FormItem>
			<mx:FormItem label="Middle Name">
				<mx:TextInput id="middle"/>
			</mx:FormItem>
			<mx:FormItem label="Last Name">
				<mx:TextInput id="last"/>
			</mx:FormItem>
		</mx:Form>
		<mx:Form label="Commentaires" width="100%" height="100%">
			<mx:FormItem label="Commentaires">
				<mx:TextArea width="200" height="100" id="comments"/>
			</mx:FormItem>
		</mx:Form>
	</mx:Accordion>
	
</mx:WindowedApplication>

• Il y a deux panneaux à cet accordéon

ButtonBar

<?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.events.ItemClickEvent;    
		
			// Fonction Event handler pour imprimer un message
			// descrivant le controle Boutton selectione.        
			private function clickHandler(event:ItemClickEvent):void 
			{
				myTA.text="Selected button index: " + String(event.index) + 
				"\n" + "Selected button label: " + event.label;
			}
		]]>
	</mx:Script>
	
	<mx:Panel title="Exemple : Controle ButtonBar" height="75%" width="75%" 
			  paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
		
		<mx:Label width="100%" color="blue"
				  text="Select a button in the ButtonBar control."/>
		
		<mx:TextArea id="myTA" width="100%" height="100%"/>
		
		<mx:ButtonBar horizontalGap="5" itemClick="clickHandler(event);">
			<mx:dataProvider>
				<mx:Array>
					<mx:String>Flash</mx:String>
					<mx:String>Director</mx:String>
					<mx:String>Dreamweaver</mx:String>
					<mx:String>ColdFusion</mx:String>
				</mx:Array>
			</mx:dataProvider>
		</mx:ButtonBar>
	</mx:Panel>
	
</mx:WindowedApplication>

LinkBar

<?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 : Control LinkBar" 
			  height="75%" width="75%" horizontalAlign="center"
			  paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
		
		<mx:Text width="100%" 
				 text="Selectionnez un lien dans le controle LinkBar pour mettre l'enfant actif du container ViewStack."/>
		
		<mx:LinkBar color="#0000FF" fontWeight="bold" dataProvider="{myViewStack}"/>        
		
		<!-- Definit le ViewStack et l'arbre de containers d'enfants. -->
		<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%">
			
			<mx:Canvas id="search" backgroundColor="#FFFFCC" label="Search" width="100%" height="100%">
				<mx:Label text="Search Screen" color="#000000"/>
			</mx:Canvas>
			
			<mx:Canvas id="custInfo" backgroundColor="#CCFFFF" label="Customer Info" width="100%" height="100%">
				<mx:Label text="Customer Info" color="#000000"/>
			</mx:Canvas>
			
			<mx:Canvas id="accountInfo" backgroundColor="#FFCCFF" label="Account Info" width="100%" height="100%">
				<mx:Label text="Account Info" color="#000000"/>
			</mx:Canvas>
		</mx:ViewStack>
		
	</mx:Panel>
	
</mx:WindowedApplication>

MenuBar

<?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"
	creationComplete="initCollections();" 
	>

	<fx:Script>
		<![CDATA[
		
		import mx.events.MenuEvent;
		import mx.controls.Alert;
		import mx.collections.*;
		
		[Bindable]
		public var menuBarCollection:XMLListCollection;
		
		private var menubarXML:XMLList =
		<>
		<menuitem label="Menu1">
			<menuitem label="MenuItem 1-A" data="1A"/>
			<menuitem label="MenuItem 1-B" data="1B"/>
		</menuitem>
		<menuitem label="Menu2">
			<menuitem label="MenuItem 2-A" type="check"  data="2A"/>
			<menuitem type="separator" />
			<menuitem label="MenuItem 2-B" >
				<menuitem label="SubMenuItem 3-A" type="radio" groupName="one" data="3A"/>
				<menuitem label="SubMenuItem 3-B" type="radio" groupName="one" data="3B"/>
			</menuitem>
		</menuitem>
		</>;
		
		// Event handler pour le controle MenuBar d'evenement itemClick .
		private function menuHandler(event:MenuEvent):void  
		{
			Alert.show("Label: " + event.item.@label + "\n" + 
			"Data: " + event.item.@data, "Clickez l'item du menu");
		}
		
		// Event handler pour initialiser le controle MenuBar.
		private function initCollections():void 
		{
			menuBarCollection = new XMLListCollection(menubarXML);
		}
		]]>
		
	</fx:Script>
	
	<mx:Panel title="Exemple : Controle MenuBar" height="75%" width="75%" 
			  paddingTop="10" paddingLeft="10">
		
		<mx:Label width="100%" color="blue"
				  text="Selectionnez un item du menu."/>
		
		<mx:MenuBar labelField="@label" itemClick="menuHandler(event);" 
					dataProvider="{menuBarCollection}" />
		
	</mx:Panel>
	
</mx:WindowedApplication>

• Le menu est ici chargé dynamiquement

TabBar

<?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[
		
		import mx.events.ItemClickEvent;
		import mx.controls.TabBar;
		
		[Bindable]
		public var STATE_ARRAY:Array = [{label:"Alabama", data:"Montgomery"},
			{label:"Alaska", data:"Juneau"},
			{label:"Arkansas", data:"LittleRock"}
			];
		
		private function clickEvt(event:ItemClickEvent):void 
			{
				// Accède la cible du controle TabBar.
				var targetComp:TabBar = TabBar(event.currentTarget);
				forClick.text="label is: " + event.label + ", index is: " + 
				event.index + ", capital is: " +
				targetComp.dataProvider[event.index].data;
			}                
		]]>
	</fx:Script>
	
	<mx:Panel title="Exemple : Controle TabBar" height="75%" width="75%" 
			  paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
		
		<mx:Label width="100%" color="blue" 
				  text="Selectionnez un tableau pour changer le paneau actuel."/>
		
		<mx:TabBar itemClick="clickEvt(event);">
			<mx:dataProvider>{STATE_ARRAY}</mx:dataProvider>
		</mx:TabBar>
		
		<mx:TextArea id="forClick" height="100%" width="100%"/>
		
	</mx:Panel>	
	
</mx:WindowedApplication>

• Un click sur le tableau rempli le textArea

TabNavigator

<?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 : Container TabNavigator" 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 paneau."/>
		
		<mx:TabNavigator id="tn"  width="100%" height="100%">
			<!-- Definit chaque paneau utilisant un container VBox. -->
			
			<mx:VBox label="Panel 1">
				<mx:Label text="Container TabNavigator panel 1"/>
			</mx:VBox>
			
			<mx:VBox label="Panel 2">
				<mx:Label text="Container TabNavigator panel 2"/>
			</mx:VBox>
			
			<mx:VBox label="Panel 3">
				<mx:Label text="Container TabNavigator panel 3"/>
			</mx:VBox>
		</mx:TabNavigator>
		
		<mx:Label width="100%" color="blue"
				  text="Programmatically select the panel using a Button control."/>
		
		<mx:HBox>
			<mx:Button label="Selectionnez Tab 1" click="tn.selectedIndex=0"/>
			<mx:Button label="Selectionnez Tab 2" click="tn.selectedIndex=1"/>
			<mx:Button label="Selectionnez Tab 3" click="tn.selectedIndex=2"/>
		</mx:HBox>
		
	</mx:Panel>

</mx:WindowedApplication>

• En cliquant sur le tableau on change le contenu
• En cliquant sur les bouton on selectionne le tableau

ToggleButtonBar

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication name="ToggleButtonBar_toggleOnClick_test"
				xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="vertical"
				verticalAlign="top"
				backgroundColor="white">
	
	<mx:ApplicationControlBar dock="true">
		<mx:Form styleName="plain">
			<mx:FormItem label="toggleOnClick:">
				<mx:CheckBox id="checkBox" />
			</mx:FormItem>
			<mx:FormItem label="selectedIndex:">
				<mx:Label text="{toggleButtonBar.selectedIndex}" />
			</mx:FormItem>
		</mx:Form>
	</mx:ApplicationControlBar>
	
	<mx:ToggleButtonBar id="toggleButtonBar"
						toggleOnClick="{checkBox.selected}"
						dataProvider="{viewStack}" />
	
	<mx:ViewStack id="viewStack"
				  width="100%"
				  height="100%">
		<mx:VBox label="Red" backgroundColor="red" />
		<mx:VBox label="Orange" backgroundColor="haloOrange" />
		<mx:VBox label="Yellow" backgroundColor="yellow" />
		<mx:VBox label="Green" backgroundColor="haloGreen" />
		<mx:VBox label="Blue" backgroundColor="haloBlue" />
	</mx:ViewStack>
	
	<mx:Label text="{Capabilities.version}" />
	
</mx:WindowedApplication>

• En cliquant sur les boutons du ToggleButtonBar on change la couleur

ViewStack

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication name="ToggleButtonBar_toggleOnClick_test"
				xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="vertical"
				verticalAlign="top"
				backgroundColor="white">
	
	<mx:VBox>
		<!-- Crée un controle LinkBar pour naviguer dans le container du ViewStack. -->
		<mx:LinkBar dataProvider="{myViewStack}" borderStyle="solid"/>
		
		<!-- Définit le ViewStack et un arbre d'enfant de containers. -->
		<mx:ViewStack id="myViewStack" 
					  borderStyle="solid" 
					  width="100%">
			
			<mx:Canvas id="search" label="Search">
				<mx:Label text="Search Screen"/>
			</mx:Canvas>
			
			<mx:Canvas id="custInfo" label="Customer Info">
				<mx:Label text="Customer Info"/>
			</mx:Canvas>
			
			<mx:Canvas id="accountInfo" label="Account Info">
				<mx:Label text="Account Info"/>
			</mx:Canvas>
		</mx:ViewStack>
	</mx:VBox>
	
</mx:WindowedApplication>

• En cliquant sur les boutons on active l'élément du stack