Programmation Flex/Liste des composants
Composantes.
[ SCRIPT ] ActionScripts
<mx:Script>
 <![CDATA[
 import mx.controls.Alert;
</mx:Script>
[ CONTROLES ]
<mx:AdvancedDataGrid id="adg1" designViewDataType="tree">
 <mx:columns>
 <mx:AdvancedDataGridColumn headerText="Column 1" dataField="col1"/>
 <mx:AdvancedDataGridColumn headerText="Column 2" dataField="col2"/>
 <mx:AdvancedDataGridColumn headerText="Column 3" dataField="col3"/>
 </mx:columns>
</mx:AdvancedDataGrid>
<mx:Button label="Button"/>
<mx:CheckBox label="Checkbox"/>
</syntaxhighlight>
<mx:ColorPicker/>
<mx:ComboBox></mx:ComboBox>
<mx:DataGrid>
 <mx:dataProvider>
 <mx:Object Artist="Pavement" Price="11.99"
 Album="Slanted and Enchanted"/>
 <mx:Object Artist="Pavement"
 Album="Brighten the Corners" Price="11.99"/>
 </mx:dataProvider>
 <mx:columns>
 <mx:DataGridColumn dataField="Album"/>
 <mx:DataGridColumn dataField="Price"/>
 </mx:columns>
</mx:DataGrid>
</syntaxhighlight>
<mx:DateChooser id="dateChooser2" yearNavigationEnabled="true" disabledRanges="{[ {rangeEnd: new Date(2006, 5, 1)} ]}"/>
<mx:DateField id="dateField2" yearNavigationEnabled="true" disabledRanges="{[ {rangeEnd: new Date(2006, 5, 1)} ]}" />
<mx:HSlider x="117" y="158" />
<mx:HorizontalList x="73" y="154"></mx:HorizontalList>
<mx:Image x="70" y="156"/>
<mx:Label x="58" y="180" text="Label"/>
<mx:LinkButton x="78" y="212" label="LinkButton"/>
<mx:List x="40" y="203"></mx:List>
<mx:NumericStepper x="95" y="171"/>
<mx:OLAPDataGrid x="50" y="177"/>
<mx:PopUpButton x="79" y="190" label="PopUpButton"/>
<mx:PopUpMenuButton x="52" y="206" label="PopUpMenuButton"/>
<mx:ProgressBar x="77" y="227"/>
<mx:RadioButton x="71" y="148" label="Button 1" groupName="radiogroup1"/>
<mx:RadioButton x="71" y="174" label="Button 2" groupName="radiogroup1"/> 
<mx:RadioButtonGroup id="radiogroup1"/>
<mx:RichTextEditor x="107" y="287" title="Title"></mx:RichTextEditor>
<mx:SWFLoader x="32" y="230"/>
<mx:Text x="180" y="197" text="Text"/>
<mx:TextArea x="151" y="235"/>
<mx:TextInput x="272" y="108"/>
<mx:TileList x="218" y="174"></mx:TileList>
<mx:Tree x="22" y="287"></mx:Tree>
<mx:VSlider x="10" y="287"/>
<mx:VideoDisplay x="32" y="120"/>
[ LAYOUT ]
<mx:ApplicationControlBar x="66" y="139"></mx:ApplicationControlBar>
<mx:Canvas x="66" y="206" width="200" height="200"></mx:Canvas>
<mx:ControlBar x="10" y="166"></mx:ControlBar>
<mx:Form x="10" y="259"></mx:Form>
<mx:FormHeading x="10" y="318" label="Heading"/>
<mx:Grid x="10" y="152">
 <mx:GridRow width="100%" height="100%">
 <mx:GridItem width="100%" height="100%">
 </mx:GridItem>
 <mx:GridItem width="100%" height="100%">
 </mx:GridItem>
 <mx:GridItem width="100%" height="100%">
 </mx:GridItem>
 </mx:GridRow>
 <mx:GridRow width="100%" height="100%">
 <mx:GridItem width="100%" height="100%">
 </mx:GridItem>
 <mx:GridItem width="100%" height="100%">
 </mx:GridItem>
 <mx:GridItem width="100%" height="100%">
 </mx:GridItem>
 </mx:GridRow>
 <mx:GridRow width="100%" height="100%">
 <mx:GridItem width="100%" height="100%">
 </mx:GridItem>
 <mx:GridItem width="100%" height="100%">
 </mx:GridItem>
 <mx:GridItem width="100%" height="100%">
 </mx:GridItem>
 </mx:GridRow>
</mx:Grid>
<mx:HBox x="66" y="111" width="100%"></mx:HBox>
<mx:HDividedBox x="66" y="32" width="100%"></mx:HDividedBox>
<mx:HRule x="16" y="60"/>
<mx:ModuleLoader x="22" y="82"></mx:ModuleLoader>
<mx:Panel x="10" y="299" width="250" height="200" layout="absolute"></mx:Panel>
<mx:Spacer x="53" y="30"/>
<mx:Tile x="33" y="92"></mx:Tile>
<mx:TitleWindow x="33" y="159" width="250" height="200" layout="absolute"></mx:TitleWindow>
<mx:VBox x="10" y="120" height="100%"></mx:VBox>
<mx:VDividedBox x="53" y="38" height="100%"></mx:VDividedBox>
<mx:VRule x="153" y="38"/>
[ NAVIGATORS ]
<mx:Accordion x="81" y="88" width="200" height="200">
 <mx:Canvas label="Accordion Pane 1" width="100%" height="100%">
 </mx:Canvas>
</mx:Accordion>
<mx:ButtonBar x="29" y="73"></mx:ButtonBar>
<mx:LinkBar x="29" y="174"></mx:LinkBar>
<mx:MenuBar x="10" y="239"></mx:MenuBar>
<mx:TabBar x="10" y="301"></mx:TabBar>
<mx:TabNavigator x="30" y="339" width="200" height="200">
 <mx:Canvas label="Tab 1" width="100%" height="100%">
 </mx:Canvas>
</mx:TabNavigator>
<mx:ToggleButtonBar x="106" y="301"></mx:ToggleButtonBar>
<mx:ViewStack x="188" y="311" id="viewstack1" width="200" height="200">
 <mx:Canvas label="View 1" width="100%" height="100%">
 </mx:Canvas>
</mx:ViewStack>
[ CHARTS ]
<mx:AreaChart x="52" y="69" id="areachart1">
 <mx:series>
 <mx:AreaSeries displayName="Series 1" yField=""/>
 </mx:series>
</mx:AreaChart>
<mx:Legend dataProvider="{areachart1}"/>
<mx:BarChart x="10" y="183" id="µ">
 <mx:series>
 <mx:BarSeries displayName="Series 1" xField=""/>
 </mx:series>
</mx:BarChart>
<mx:Legend dataProvider="{µ}"/>
<mx:BubbleChart x="10" y="127" id="bubblechart1">
 <mx:series>
 <mx:BubbleSeries displayName="Series 1" yField="" radiusField=""/>
 </mx:series>
</mx:BubbleChart>
<mx:Legend dataProvider="{bubblechart1}"/>
<mx:CandlestickChart x="0" y="169" id="candlestickchart1">
 <mx:series>
 <mx:CandlestickSeries displayName="Series 1" openField="" closeField="" highField="" lowField=""/>
 </mx:series>
</mx:CandlestickChart>
<mx:Legend dataProvider="{candlestickchart1}"/>
<mx:ColumnChart x="19" y="92" id="columnchart1">
 <mx:series>
 <mx:ColumnSeries displayName="Series 1" yField=""/>
 </mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{columnchart1}"/>
<mx:HLOCChart x="10" y="92" id="hlocchart1">
 <mx:series>
 <mx:HLOCSeries displayName="Series 1" openField="" closeField="" highField="" lowField=""/>
 </mx:series>
</mx:HLOCChart>
<mx:Legend dataProvider="{hlocchart1}"/>
<mx:Legend x="34" y="69" dataProvider="{legend}"/>
<mx:LineChart x="0" y="146" id="linechart1">
 <mx:series>
 <mx:LineSeries displayName="Series 1" yField=""/>
 </mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{linechart1}"/>
<mx:PieChart x="153" y="103" id="piechart1">
 <mx:series>
 <mx:PieSeries displayName="Series 1" field=""/>
 </mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{piechart1}"/>
<mx:PlotChart x="137" y="69" id="plotchart1">
 <mx:series>
 <mx:PlotSeries displayName="Series 1" yField=""/>
 </mx:series>
</mx:PlotChart>
<mx:Legend dataProvider="{plotchart1}"/>
Propriétés.
Les balises ont pour attributs:

Programmation Flex/Utilisation des composants

= Débuter avec flex =
Une application flex comprend deux parties :
Quelques petites implémentations avec les composants de flex 3 présentés ici devraient vous donner une bonne base pour débuter avec flex.
Prenez le temps de bien tester et mixer données des mx:script et de les "binder" vers les objets MX. "Binder" est une notion importante dans flex, cela signifie que l'élément binder sera mis à jour automatiquement lorsqu'il y aura changement de valeurs. Ce tag reviendra souvent aux "flexeurs" : [Bindable]...
Dans Applications avancées, des exemples plus ambitieux seront présentés.
Je vous recommande par ailleurs d'installer le "Tour de Flex" (http://www.adobe.com/devnet/flex/tourdeflex.html) qui présente succinctement les différentes fonctionnalités de flex avec les codes sources.
Partie déclarative.
Celle-ci se construit avec le designer ou dans le code source. Elle peut être générée dynamiquement de manière impérative. Tout les objets de la vue peuvent être générés par le code.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication 
 xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute">
 <!-- DEBUT DE LA PARTIE DECLARATIVE -->
 <mx:TextArea x="10" y="40" width="200" height="200" id="textArea1"/>
 <!-- Commentaires
 <mx:TextArea x="10" y="15" width="100" height="20" id="textArea1"/>
 <mx:TextArea x="10" y="45" width="100" height="20" id="textArea2"/>
 <mx:TextArea x="10" y="75" width="100" height="20" id="textArea3"/>