Programmation Flex/Utilisation des composants/Navigator
| Programmation_Flex |
|---|
 |
| Sommaire |
| Liens |
| Modifier ce modèle |
Accordion 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: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 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.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 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 : 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 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"
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 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[
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
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 : 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 modifier
<?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 modifier
<?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