</mx:Script>
 <mx:PopUpButton id="popUpButton" label="PopUpButton"/>
</mx:WindowedApplication>
PopUpMenuButton.
<?xml version="1.0"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" >
 <mx:PopUpMenuButton labelField="@label" id="idTest" click="test1(idTest.label)">
 <mx:dataProvider>
 <mx:XMLListCollection>
 <mx:XMLList xmlns="">
 <item label="ActionScript">
 <item label="Classe"/>
 <item label="Interface"/>
 </item>
 <item label="MXML">
 <item label="Application" />
 <item label="Component"/>
 </item>
 </mx:XMLList>
 </mx:XMLListCollection>
 </mx:dataProvider>
 </mx:PopUpMenuButton>
 <mx:Text text="{idTest.label}"/>
 <mx:Script>
 <![CDATA[
 import mx.controls.Alert;
 private function test1(pString:String):void
 Alert.show(pString); 
 ]]>
 </mx:Script>
</mx:WindowedApplication>
Progress Bar.
<?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[
 private var j:uint = 0;
 // Event handler function to set the value of the 
 // Halo ProgressBar control.
 private function runit():void
 if (j < 100) {
 j += 10;
 } else if (j >= 100) {
 j = 0;
 bar.setProgress(j, 100);
 bar.label = "Current Progress: " + j + "%";
 ]]> 
 </fx:Script>
 <s:Panel title="exemple : Progress bar Control "
 width="75%" height="75%" 
 horizontalCenter="0" verticalCenter="0">
 <s:VGroup left="10" right="10" top="10" bottom="10">
 <s:Label width="100%" color="blue"
 text="Cliquez le bouton pour incrementer la progress bar." />
 <s:Button id="Speed" label="Run" click="runit();"/>
 <mx:ProgressBar id="bar" labelPlacement="bottom" chromeColor="red"
 minimum="0" visible="true" maximum="100" label="CurrentProgress 0%" 
 direction="right" mode="manual" width="100%"/>
 </s:VGroup>
 </s:Panel>
</mx:WindowedApplication>
RadioButton.
<?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>
 import mx.controls.Alert;
 </fx:Script>
 <s:Panel title="Exemple : Halo RadioButton Control "
 width="75%" height="75%" 
 horizontalCenter="0" verticalCenter="0">
 <s:VGroup left="10" right="10" top="10" bottom="10">
 <s:Label width="100%" color="blue"
 text="En quelle année les femmes furent permises à participer au Marathn de Bostom?"/>
 <mx:RadioButton groupName="year" id="option1" label="1942"/>
 <mx:RadioButton groupName="year" id="option2" label="1952"/>
 <mx:RadioButton groupName="year" id="option3" label="1962"/>
 <mx:RadioButton groupName="year" id="option4" label="1972"/>
 <s:Button label="Regardez la réponse" 
 click="Alert.show(option4.selected ? 'Correct Answer!':'Wrong Answer', 'Result');"/>
 </s:VGroup>
 </s:Panel>
</mx:WindowedApplication>
RadioButtonGroup.
<?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.controls.Alert;
 import mx.events.ItemClickEvent;
 // Event handler function to display the selected button
 // in a Halo Alert control.
 private function handleCard(evt:ItemClickEvent):void {
 var val;
 switch (val=evt.currentTarget.selectedValue) {
 case "v1":
 Alert.show(val);
 break;
 case "v2":
 Alert.show(val);
 break;
 case "v3":
 Alert.show(val);
 break;
 content.text = val;
 ]]>
 </fx:Script>
 <fx:Declarations>
 <s:RadioButtonGroup id="radiogroup1" itemClick="handleCard(event);"/>
 </fx:Declarations>
 <s:RadioButton label="Button 1" groupName="radiogroup1" value="v1"/>
 <s:RadioButton label="Button 2" groupName="radiogroup1" value="v2"/>
 <s:RadioButton label="Button 3" groupName="radiogroup1" value="v3"/>
 <mx:Text text="" id="content"/>
</mx:WindowedApplication>
RichEditableText.
<?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 flashx.textLayout.conversion.TextConverter;
 </fx:Script>
 <fx:Declarations>
 <fx:XML id="extTxtFlow" source="externalTextFlow.xml" />
 </fx:Declarations>
 <s:Panel title="RichText textFlow test"
 width="90%" height="90%"
 horizontalCenter="0" verticalCenter="0">
 <s:Scroller width="100%" height="100%">
 <s:VGroup paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20">
 <s:RichEditableText id="richTxt1" textAlign="justify" percentWidth="100">
 <s:textFlow>
 <s:TextFlow>
 <s:p fontSize="24">Inline TextFlow</s:p>
 <s:p>1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet tristique libero, vel mattis massa pellentesque nec. Maecenas non nulla nibh, et egestas ligula. Etiam massa mauris, elementum gravida rhoncus sit amet, blandit eu lacus. Proin nisi felis, accumsan at interdum eu, mattis at velit. Nulla at ipsum risus. Nullam non justo vel lacus vulputate mollis id quis libero.</s:p>
 <s:p>2) Cras posuere posuere sem, eu congue orci mattis quis. Morbi vitae est ut purus vestibulum iaculis malesuada quis metus. Donec feugiat sapien quis turpis porttitor vel mattis libero viverra. Sed nisl justo, fringilla eget ultrices ut, venenatis quis magna. Nulla feugiat egestas mattis. Phasellus sed dignissim justo. Etiam malesuada bibendum urna, id dapibus nulla posuere eu.</s:p>
 <s:p>3) Curabitur pulvinar tellus venenatis ipsum tempus lobortis. Vestibulum eros velit, bibendum at aliquet ut, placerat sed mauris.</s:p>
 </s:TextFlow>
 </s:textFlow>
 </s:RichEditableText>
 <s:RichEditableText id="richTxt2" textAlign="justify" width="100%"
 textFlow="{TextConverter.importToFlow(extTxtFlow, TextConverter.TEXT_LAYOUT_FORMAT)}" />
 </s:VGroup>
 </s:Scroller>
 </s:Panel>
</mx:WindowedApplication>
External Source
<?xml version="1.0" encoding="UTF-8"?>
<!-- externalTextFlow.xml -->
<TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
 <p fontSize="24">External TextFlow</p>
 <p>1) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquet tristique libero, vel mattis massa pellentesque nec. Maecenas non nulla nibh, et egestas ligula. Etiam massa mauris, elementum gravida rhoncus sit amet, blandit eu lacus. Proin nisi felis, accumsan at interdum eu, mattis at velit. Nulla at ipsum risus. Nullam non justo vel lacus vulputate mollis id quis libero.</p>
 <p>2) Cras posuere posuere sem, eu congue orci mattis quis. Morbi vitae est ut purus vestibulum iaculis malesuada quis metus. Donec feugiat sapien quis turpis porttitor vel mattis libero viverra. Sed nisl justo, fringilla eget ultrices ut, venenatis quis magna. Nulla feugiat egestas mattis. Phasellus sed dignissim justo. Etiam malesuada bibendum urna, id dapibus nulla posuere eu.</p>
 <p>3) Curabitur pulvinar tellus venenatis ipsum tempus lobortis. Vestibulum eros velit, bibendum at aliquet ut, placerat sed mauris.</p>
</TextFlow>
RichText.
<?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="Spark RichText Example"
 width="75%" height="75%"
 horizontalCenter="0" verticalCenter="0">
 <s:Group left="10" right="10" top="10" bottom="10">
 <s:RichText x="0" y="0" width="75" fontFamily="Times" fontSize="15" textRotation="rotate90">
 <s:content>Hello World!</s:content>
 </s:RichText>
 <s:Group x="100" y="0">
 <s:RichText width="100" textAlign="justify" paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
 <s:content>Hello World! Ceci est juste un paragraphe de texte dans un controle rich text. Il a un bord autour de lui qui dessine un rectangle autour du groupe.</s:content>
 </s:RichText>
 <s:Rect width="100%" height="100%">
 <s:stroke>
 <s:SolidColorStroke color="red"/>
 </s:stroke>
 </s:Rect>
 </s:Group>
 <s:Group x="225" y="0">
 <s:RichText width="140" height="120" columnCount="2" columnGap="10">
 <s:content><s:span fontWeight="bold">Hello World!</s:span> Ceci est un paragraphe de texte en 2 colonnes. Il a au moins 20 mots de long, 
 qui doit être suffisant pour causer un problème sur quelques lignes.</s:content>
 </s:RichText>
 <s:Rect width="100%" height="100%">
 <s:stroke>
 <s:SolidColorStroke color="red"/>
 </s:stroke>
 </s:Rect>
 </s:Group>
 </s:Group>
 </s:Panel>
</mx:WindowedApplication>
Spinner.
<?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">
 <!-- Panel utilisé comme container pour l'exemple du contrôle spinner -->
 <mx:Panel title="Spinner Control Example" height="75%" width="75%" paddingTop="10"
 paddingLeft="10" horizontalCenter="0" verticalCenter="0">
 <s:Group>
 <s:layout>
 <s:HorizontalLayout/>
 </s:layout>
 <mx:Text text="Utilisez les flèches pour changer de tableau"/> 
 <s:Spinner id="mySpinner" maximum="3"/> 
 </s:Group> 
 <!-- Deux façon de joindre est utilisée de telle façon que le changement au tableau reste syncronise avec la valeur du Spinner -->
 <mx:TabNavigator id="myTabNav" width="75%" height="75%" selectedIndex="@{mySpinner.value}" >
 <mx:HBox label="Tab 1">
 <mx:Text text="Text on Tab 1" fontSize="14" color="red"/>
 </mx:HBox> 
 <mx:HBox label="Tab 2">
 <mx:Text text="Text on Tab 2" fontSize="16" color="blue"/>
 </mx:HBox> 
 <mx:HBox label="Tab 3">
 <mx:Text text="Text on Tab 3" fontSize="18" color="green"/>
 </mx:HBox> 
 <mx:HBox label="Tab 4">
 <mx:Text text="Text on Tab 4" fontSize="20" color="purple"/>
 </mx:HBox> 
 </mx:TabNavigator> 
 <!-- Label qui montre la valeur courrante du Spinner Spark -->
 <mx:Label color="purple" text="Current Tab = {mySpinner.value+1}"/>
 </mx:Panel> 
</mx:WindowedApplication>
SWFLoader.
<?xml version="1.0"?>
<!-- Exemple Simple pour demontrer le contrôle SWFLoader. -->
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Panel title="Example : Controle SWFLoader" height="90%" width="90%"
 paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
 <mx:Label text="Le contrôle Label de l'application externe."/>
 <mx:SWFLoader id="Load" source="@Embed(source='Local.swf')" height="100" width="350"/>
 </mx:Panel>
</mx:WindowedApplication>
Locallement
<?xml version="1.0"?>
<!-- Application Flex chargée par le contrôle SWFLoader. -->
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" height="75" width="350">
 <mx:Label color="blue" text="Le controle Label de l'application encapsulée."/>
</mx:WindowedApplication>
TextArea.
<?xml version="1.0"?>
<!-- Simple example to demonstrate the TextArea control. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 <mx:Panel title="TextArea Control Example" height="75%" width="75%" 
 paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
 <mx:TextArea width="400" height="100">
 <mx:text>
 Ceci est un controle TextArea Editable multiligne. Si vous avez besoin d'un contrôle multiligne non éditable, utilisez le controle Text.
 </mx:text>
 </mx:TextArea>
 <mx:TextArea width="400" height="100">
 <mx:htmlText><![CDATA[Ceci est <span style="color: #FF0000">du texte HTML</span> dans un <b>contrôle TextArea</b>. 
 Utilisez la <u>propriété htmlText</u> du <span style="color: #008800">contrôle TextArea</span> 
 pour inclure des marqueurs HTML basiques dans votre texte.]]>
 </mx:htmlText>
 </mx:TextArea>
 </mx:Panel>
TextInput.
<?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="TextInput Control Example" height="75%" width="75%" 
 paddingTop="10" paddingLeft="10">
 <mx:TextInput id="src" text="Hello World!"/>
 <mx:Button label="Copy Text" click="dest.text = src.text"/>
 <mx:TextInput id="dest"/>
 </mx:Panel>
</mx:WindowedApplication>
ToggleButton.
<?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[
 // Event handler function qui imprime un message
 // decrivant l'état de sélection du ToggleButton Spark.
 // Bascule la taille du font du Label etre gras et normal
 private function printMessage(evt:Event):void {
 if (evt.target.selected){
 message.text += "Taille du font: bold" + "\n";
 lbl.setStyle("fontWeight", "bold");
 togBtn.label = "Bold";
 } else{
 message.text += "Taille du font: normal" + "\n";
 lbl.setStyle("fontWeight", "normal");
 togBtn.label = "Normal";
 </fx:Script>
 <s:Panel title="Exemple : Controle Spark ToggleButton"
 width="75%" height="75%" 
 horizontalCenter="0" verticalCenter="0">
 <s:VGroup left="10" right="10" top="10" bottom="10">
 <s:ToggleButton id="togBtn" label="Normal" click="printMessage(event);" />
 <s:Label id="lbl" text="Label" />
 <s:TextArea id="message" height="100%" width="100%" color="#0000FF" />
 </s:VGroup>
 </s:Panel>
</mx:WindowedApplication>
Tree.
<?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="creationCompleteHandler(event)">
 <fx:Script>
 <![CDATA[
 import mx.collections.ArrayCollection;
 private function creationCompleteHandler(event:Event):void{
 var array:Array = new Array(
 {label:"CA", children: new Array({label:"Los Angeles"},{label:"San Francisco"})},
 {label:"MA", children: new Array({label:"Boston"})});
 var collection:ArrayCollection = new ArrayCollection(array);
 tree.dataProvider= collection;
 ]]>
 </fx:Script>
 <mx:Tree id="tree" labelField="label" width="200"/>
</mx:WindowedApplication>
VideoDisplay.
<?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"