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

Programmation Flex/Utilisation des composants/Navigator

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>
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>
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"},