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