Programmation Flex/Utilisation des composants/Controles
| Programmation_Flex |
|---|
 |
| Sommaire |
| Liens |
| Modifier ce modèle |
AdvancedDataGrid modifier
<?xml version="1.0"?>
<mx:WindowedApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="http://www.adobe.com/2006/mxml" width="800" height="400">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dpFlat:ArrayCollection = new ArrayCollection([
{Region:"Southwest", Territoire:"Arizona", Republique:"Barbara Jennings", Actual:38865, Estimer:40000},
{Region:"Southwest", Territoire:"Arizona", Republique:"Dana Binn", Actual:29885, Estimer:30000},
{Region:"Belgique", Territoire:"Wallonie", Republique:"néant", Actual:100050, Estimer:25000},
]);
]]>
</mx:Script>
<!-- height="300" width="300" layout="horizontal" -->
<mx:Panel title="AdvancedDataGrid Control Exemple"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:AdvancedDataGrid id="myADG"
width="100%" height="100%"
initialize="gc.refresh();">
<mx:dataProvider>
<mx:GroupingCollection id="gc" source="{dpFlat}">
<mx:Grouping>
<mx:GroupingField name="Region"/>
<!--
<mx:GroupingField name="Territoire"/>
-->
</mx:Grouping>
</mx:GroupingCollection>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Region"/>
<mx:AdvancedDataGridColumn dataField="Territoire"/>
<mx:AdvancedDataGridColumn dataField="Republique" headerText="Republique"/>
<mx:AdvancedDataGridColumn dataField="Actual"/>
<mx:AdvancedDataGridColumn dataField="Estimer"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Panel>
</mx:WindowedApplication>
- L'instruction [Bindable] indique que l'on peut utiliser la variable en bing dans les objets.
- Le tableau comprend la liste du tableau "dpFlat" dans les lignes et les colonnes du datagrid. Les régions sont groupées sous la colonne région.
- Essayer de décommenter le deuxième "GroupingField" pour voir ce qu'il se passe.
Bouton modifier
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="initialiser()">
<mx:Script>
<![CDATA[
import mx.controls.Alert ;
public function alerter(pString:String):void
{
Alert.show(pString,"message du bouton");
}
]]>
</mx:Script>
<mx:Button x="10" y="30" label="Button" id="bouton1" click="alerter(textInput1.text)"/>
<mx:TextInput x="83" y="30" id="textInput1" />
<mx:Button id="alertButton" label="Show Alert"
click="alertButton.label = 'Nouveau Label';mx.controls.Alert.show('Exemple');" x="10" y="60"/>
</mx:WindowedApplication>
- Le bouton "Button" affiche une alerte avec le contenu de "textInput1"
- Le bouton "Show Alert" change son label et affiche "Exemple"
CheckBox modifier
Avec FlashBuilder, il y a un nouveau namespace ou bibliotheque de fonctionnalités :
- xmlns:fx="http://ns.adobe.com/mxml/2009"
Celui-ci permet d'utiliser "fx:Script" à la place de "mx:Script"
<?xml version="1.0" encoding="utf-8"?>
<s: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>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
private function changeComboLabel()
{
if(checkbox1.selected == true)
checkbox1.label = "déselectionné";
else
checkbox1.label = "sélectionné";
}
]]>
</fx:Script>
<s:CheckBox click="changeComboLabel()" id="checkbox1" x="10" y="10" label="CheckBox"/>
<s:Button x="82" y="54" label="Button" click="{checkbox1.selected=true}"/>
</s:WindowedApplication>
Cette application a deu actions :
- Quand on clique sur le checkbox, son label change.
- Quand on clique sur le bouton, on active le checkbox
ColorPicker modifier
<?xml version="1.0" encoding="utf-8"?>
<s: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>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
// pas de script ici
]]>
</fx:Script>
<s:Button x="25" y="21" label="Button" click="{colorPicker1.selectedColor=0xFFFF00}"/>
<mx:ColorPicker id="colorPicker1" x="103" y="21"/>
</s:WindowedApplication>
- En cliquant sur le bouton on change la couleur du color picker
ComboBox modifier
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the Halo ComboBox control. -->
<s: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.collections.ArrayCollection;
import mx.events.DropdownEvent;
[Bindable]
public var cards:ArrayCollection = new ArrayCollection(
[ {label:"Visa", data:1},
{label:"MasterCard", data:2},
{label:"American Express", data:3}
]);
private function closeHandler(evt:DropdownEvent):void {
myLabel.text = "Vous avez sélectionné : " + ComboBox(evt.target).selectedItem.label;
myData.text = "Donnée : " + ComboBox(evt.target).selectedItem.data;
}
]]>
</fx:Script>
<s:HGroup left="10" right="10" top="10" bottom="10">
<mx:ComboBox dataProvider="{cards}" width="150" close="closeHandler(event);"/>
<s:VGroup width="250">
<s:Label width="200" color="blue" text="Sélectionnez un type de carte de crédit."/>
<s:Label id="myLabel" text="Vous avez sélectionné : "/>
<s:Label id="myData" text="Donnée : "/>
</s:VGroup>
</s:HGroup>
</s:WindowedApplication>
- La variable cards rempli le ComboBox par binding.
- La fonction closeHandler rempli myLabel, myData
Datagrid modifier
<?xml version="1.0"?>
<!-- DataGrid control example. -->
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:XMLList id="employees">
<employee>
<name>Christina Coenraets</name>
<phone>555-219-2270</phone>
<email>ccoenraets@fictitious.com</email>
<active>true</active>
</employee>
<employee>
<name>Joanne Wall</name>
<phone>555-219-2012</phone>
<email>jwall@fictitious.com</email>
<active>true</active>
</employee>
<employee>
<name>Maurice Smith</name>
<phone>555-219-2012</phone>
<email>maurice@fictitious.com</email>
<active>false</active>
</employee>
<employee>
<name>Mary Jones</name>
<phone>555-219-2000</phone>
<email>mjones@fictitious.com</email>
<active>true</active>
</employee>
</mx:XMLList>
<mx:Panel title="DataGrid Control Example" height="100%" width="100%" paddingTop="10" paddingLeft="10" paddingRight="10">
<mx:Label width="100%" color="blue" text="Select a row in the DataGrid control."/>
<mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="phone" headerText="Phone"/>
<mx:DataGridColumn dataField="email" headerText="Email"/>
</mx:columns>
</mx:DataGrid>
<mx:Form width="100%" height="100%">
<mx:FormItem label="Name">
<mx:Label text="{dg.selectedItem.name}"/>
</mx:FormItem>
<mx:FormItem label="Email">
<mx:Label text="{dg.selectedItem.email}"/>
</mx:FormItem>
<mx:FormItem label="Phone">
<mx:Label text="{dg.selectedItem.phone}"/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
</mx:WindowedApplication>
- {employees} fait référence à la liste xml définie plus haut et injecte les données dans le datagrid par binding
- {dg.selectedItem.name} et ... introduisent les données cliquées du datagrid dans les labels du Form, dynamiquement
Il est intéressant de noter que les événements on click et autres sont actifs par défaut dans le formulaire flex
DateChooser modifier
<?xml version="1.0"?>
<!-- Simple example to demonstrate DateChooser control. -->
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// Event handler function to write the selected
// date to the Label control.
private function displayDate(date:Date):void {
if (date == null)
selection.text = "Date selected: ";
else
selection.text = "Date selected: " + date.getFullYear().toString() +
'/' + (date.getMonth()+1).toString() + '/' + date.getDate();
}
]]>
</mx:Script>
<mx:DateFormatter id="df"/>
<mx:Panel title="DateChooser Control Example" height="75%" width="75%"
paddingTop="10" paddingLeft="10" paddingRight="10">
<mx:Label width="100%" color="blue"
text="Selectionnez une date dans le controle DateChooser."/>
<mx:HBox horizontalGap="25">
<mx:VBox>
<mx:Label text="Simple DateChooser control."/>
<mx:DateChooser id="dateChooser1" yearNavigationEnabled="true"
change="displayDate(DateChooser(event.target).selectedDate)"/>
<mx:Label id="selection" color="blue" text="Date selected:"/>
</mx:VBox>
</mx:HBox>
</mx:Panel>
</mx:WindowedApplication>
- displayDate() change le texte de selection sur l'événement click du dateChooser
DateField modifier
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate the DateField control. -->
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:DateFormatter id="df"/>
<mx:Panel title="DateField Control Example" height="75%" width="75%"
paddingTop="10" paddingLeft="10" paddingRight="10">
<mx:Label text="Disable dates before June 1, 2006."/>
<mx:DateField id="dateField2" yearNavigationEnabled="true"
disabledRanges="{[ {rangeEnd: new Date(2010, 12, 1)} ]}" />
<mx:Label color="blue" text="Date selected: {df.format(dateField2.selectedDate)}"/>
</mx:Panel>
</mx:WindowedApplication>
- disabledRanges désactive les dates du calendrier inférieures au 1/12/2010
- {df.format(...)} prends le format de la date et l'injecte au text du Label
HorizontalList modifier
<?xml version="1.0"?>
<!-- Simple example to demonstrate the HorizontalList Control. -->
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
[Embed(source="C:/_ADM_/_IMG/Nokia1.jpg")]
public var phone1:Class;
[Bindable]
[Embed(source="C:/_ADM_/_IMG/Nokia2.jpg")]
public var phone2:Class;
]]>
</mx:Script>
<mx:Panel title="HorizontalList Control Example" height="75%" width="75%"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:HorizontalList id="CameraSelection" height="250" columnCount="3" columnWidth="125">
<mx:dataProvider>
<mx:Array>
<mx:Object label="Nokia 6630" icon="{phone1}"/>
<mx:Object label="Nokia 6680" icon="{phone2}"/>
</mx:Array>
</mx:dataProvider>
</mx:HorizontalList>
</mx:Panel>
</mx:WindowedApplication>
- Embed encapsule la source dans la variable
- {phone1} et {phone2} injectent les images dans les Objets
- Les chemins prennent des / et non des \ (C:/_ADM_/_IMG/Nokia1.jpg)
HSlider modifier
<?xml version="1.0"?>
<!-- Simple example to demonstrate the HSlider control. -->
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private var imageWidth:Number=0;
private var imageHeight:Number=0;
// Event handler function to change the image size.
private function changeSize():void
{
phoneImage.width=uint(imageWidth*hSlider.value/100);
phoneImage.height=uint(imageHeight*hSlider.value/100);
}
]]>
</mx:Script>
<mx:Panel id="panel" title="Exemple Controle HSlider" height="100%" width="95%"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:HBox height="100%" width="100%">
<mx:Image id="phoneImage" source="@Embed('C:/_ADM_/_IMG/Ident.jpg')"
creationComplete="imageWidth=phoneImage.width; imageHeight=phoneImage.height;" />
</mx:HBox>
<mx:Label color="blue" text="Déplacez le slider pour redimensionner l'image."/>
<mx:HSlider id="hSlider" minimum="0" maximum="100" value="100"
dataTipPlacement="top"
tickColor="black"
snapInterval="1" tickInterval="10"
labels="['0%','100%']"
allowTrackClick="true"
liveDragging="true"
change="changeSize();"/>
</mx:Panel>
</mx:WindowedApplication>
- changeSize() change la taille de l'image sur un rapport de 1/100 à 100/100
- On remarque que l'encapsulation de l'image "Embed" s'effectue au sein de l'objet mx:Image
Image modifier
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Image control. -->
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel id="myPanel" title="Image Exemple"
height="75%" width="75%" horizontalAlign="center"
paddingTop="10" paddingLeft="10">
<mx:Label color="blue" text="Image encapsulée dans l'application."/>
<mx:Image source="@Embed('c:/_ADM_/_IMG/Ident.jpg')"/>
</mx:Panel>
</mx:WindowedApplication>
- mx:Image source="@Embed('c:/_ADM_/_IMG/Ident.jpg')", embed encapsule l'image
Label modifier
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Image control. -->
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="setLabel()"
>
<mx:Script>
<![CDATA[
private function setLabel()
{
iLabel.text = "nouveau texte";
}
]]>
</mx:Script>
<mx:Label id="iLabel" text="Label"/>
</mx:WindowedApplication>
- creationComplete du formulaire WindowedApplication lance setLabel à la fin de la création du formulaire
LinkButton modifier
<?xml version="1.0"?>
<!-- Simple example to demonstrate the LinkButton control. -->
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
import mx.controls.Alert;
</mx:Script>
<mx:Panel title="LinkButton Control Example"
height="75%" width="75%" horizontalAlign="center"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:LinkButton label="LinkButton control" color="#0000FF" fontWeight="bold"
click="Alert.show('LinkButton selectionné!');"/>
</mx:Panel>
</mx:WindowedApplication>
- Au click sur LinkButton on ouvre une alerte
List modifier
<?xml version="1.0"?>
<!-- Simple example to demonstrate the List Control -->
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
public var selectedItem:Object;
]]>
</mx:Script>
<mx:Model id="mystates">
<states>
<state label="Alabama" data="AL"/>
<state label="Alaska" data="AK"/>
<state label="Arizona" data="AZ"/>
<state label="Arkansas" data="AR"/>
<state label="California" data="CA"/>
<state label="Colorado" data="CO"/>
<state label="Connecticut" data="CT"/>
</states>
</mx:Model>
<mx:Panel title="List Control Example" height="75%" width="75%"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:List id="source" width="100%" color="blue"
dataProvider="{mystates.state}"
change="this.selectedItem=List(event.target).selectedItem"/>
<mx:VBox width="100%">
<mx:Label text="Selected State: {selectedItem.label}"/>
<mx:Label text="State abbreviation: {selectedItem.data}"/>
</mx:VBox>
</mx:Panel>
</mx:WindowedApplication>
- Model est un tag qui inclut une liste de données xml
- Il fournit les données par binding à "source"
- selectedItem est un nouvel objet de la racine de l'application
- Sur modification, List affecte le nœud XML sélectionné à selectedItem
- Le handler des label affecte à leur propriété text les attributs label et data du nœud pris par selectedItem
NumericStepper modifier
<?xml version="1.0"?>
<!-- Simple example to demonstrate the NumericStepper control. -->
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="NumericStepper Control Example" height="75%" width="75%"
paddingTop="10" paddingLeft="10">
<mx:NumericStepper id="ns"
minimum="10.00" maximum="40.00"
stepSize="0.01"
value="20.00"
width="65"/>
<mx:Label color="blue" text="Vous avez selectionné {ns.value}"/>
</mx:Panel>
</mx:WindowedApplication>
- Dynamiquement le handler du formulaire flex détecte un changement du NumericStepper
- Par binding ns.value change le texte du label
OLAPDataGrid modifier
Un article sur les cube OLAP et cette méthode d'analyse multidimensionnelle :
http://www.journaldunet.com/solutions/0301/030108_olap.shtml
<?xml version="1.0"?>
<s: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();">
<fx:Script>
<![CDATA[
import mx.rpc.AsyncResponder;
import mx.rpc.AsyncToken;
import mx.olap.OLAPQuery;
import mx.olap.OLAPSet;
import mx.olap.IOLAPQuery;
import mx.olap.IOLAPQueryAxis;
import mx.olap.IOLAPCube;
import mx.olap.OLAPResult;
import mx.events.CubeEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
//
// Format des Objects dans l'ArrayCollection:
//
// data:Object = {
// customer:"AAA",
// product:"ColdFusion",
// quarter:"Q1"
// revenue: "100.00"
// }
//
[Bindable]
private var flatData:ArrayCollection = new ArrayCollection(
[
{customer:"AAA", product:"ColdFusion", quarter:"Q1", revenue:210, cost:25},
{customer:"AAA", product:"Flex", quarter:"Q2", revenue:210, cost:25},
{customer:"AAA", product:"Dreamweaver", quarter:"Q3", revenue:250, cost:125},
{customer:"AAA", product:"Flash", quarter:"Q4", revenue:430, cost:75},
{customer:"BBB", product:"ColdFusion", quarter:"Q2", revenue:125, cost:20},
{customer:"BBB", product:"Flex", quarter:"Q3", revenue:210, cost:20},
{customer:"BBB", product:"Dreamweaver", quarter:"Q4", revenue:320, cost:120},
{customer:"BBB", product:"Flash", quarter:"Q1", revenue:280, cost:70},
{customer:"CCC", product:"ColdFusion", quarter:"Q3", revenue:375, cost:120},
{customer:"CCC", product:"Flex", quarter:"Q4", revenue:430, cost:120},
{customer:"CCC", product:"Dreamweaver", quarter:"Q1", revenue:470, cost:220},
{customer:"CCC", product:"Flash", quarter:"Q2", revenue:570, cost:170},
]);
private function creationCompleteHandler():void
{
// Vous devez initialiser le cube avant de pouvoir faire
// des requêtes dessus.
myMXMLCube.refresh();
}
// Création de la requête OLAP.
private function getQuery(cube:IOLAPCube):IOLAPQuery
{
// Creation d'une instance de OLAPQuery pour représenter la requête.
var query:OLAPQuery = new OLAPQuery;
// Prend l'axe ligne de l'instance de la requête.
var rowQueryAxis:IOLAPQueryAxis =
query.getAxis(OLAPQuery.ROW_AXIS);
// Crée une instance d'OLAPSet pour configurer l'axe.
var productSet:OLAPSet = new OLAPSet;
// Ajoute le "Product" à la ligne pour agréger les données
// de la dimension "Product".
productSet.addElements(
cube.findDimension("ProductDim").findAttribute("Product").children);
// Ajoute l'instance OLAPSet à l'axe.
rowQueryAxis.addSet(productSet);
// Prend l'axe colonne de l'instance de la requête, et le configure
// pour aggreger les colonnes de la dimension "Quarter".
var colQueryAxis:IOLAPQueryAxis =
query.getAxis(OLAPQuery.COLUMN_AXIS);
var quarterSet:OLAPSet= new OLAPSet;
quarterSet.addElements(
cube.findDimension("QuarterDim").findAttribute("Quarter").children);
colQueryAxis.addSet(quarterSet);
return query;
}
// Event handler pour executer la requête OLAP
// après l'initialisation du cube.
private function runQuery(event:CubeEvent):void
{
// Prend le cube.
var cube:IOLAPCube = IOLAPCube(event.currentTarget);
// Crée une instance de requête.
var query:IOLAPQuery = getQuery(cube);
// Execute la requête.
var token:AsyncToken = cube.execute(query);
// Setup des handlers pour les resultats de requête.
token.addResponder(new AsyncResponder(showResult, showFault));
}
// Tiend une erreur de requête.
private function showFault(result:Object, token:Object):void
{
Alert.show("Error in query.");
}
// Tiend une requête réussie en passant les résultats de requête au
// OLAPDataGrid control..
private function showResult(result:Object, token:Object):void
{
if (!result)
{
Alert.show("No results from query.");
return;
}
myOLAPDG.dataProvider= result as OLAPResult;
}
]]>
</fx:Script>
<fx:Declarations>
<mx:OLAPCube name="FlatSchemaCube" dataProvider="{flatData}" id="myMXMLCube" complete="runQuery(event);">
<mx:OLAPDimension name="CustomerDim">
<mx:OLAPAttribute name="Customer" dataField="customer"/>
<mx:OLAPHierarchy name="CustomerHier" hasAll="true">
<mx:OLAPLevel attributeName="Customer"/>
</mx:OLAPHierarchy>
</mx:OLAPDimension>
<mx:OLAPDimension name="ProductDim">
<mx:OLAPAttribute name="Product" dataField="product"/>
<mx:OLAPHierarchy name="ProductHier" hasAll="true">
<mx:OLAPLevel attributeName="Product"/>
</mx:OLAPHierarchy>
</mx:OLAPDimension>
<mx:OLAPDimension name="QuarterDim">
<mx:OLAPAttribute name="Quarter" dataField="quarter"/>
<mx:OLAPHierarchy name="QuarterHier" hasAll="true">
<mx:OLAPLevel attributeName="Quarter"/>
</mx:OLAPHierarchy>
</mx:OLAPDimension>
<mx:OLAPMeasure name="Revenue" dataField="revenue" aggregator="SUM"/>
</mx:OLAPCube>
</fx:Declarations>
<mx:OLAPDataGrid id="myOLAPDG" width="100%" height="100%"/>
</s:WindowedApplication>
- Ce composant est plus complexe que les autres et existe depuis Flex 3.
PopUpButton modifier
<?xml version="1.0"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="creationCompleteHandler(event)">
<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.controls.Menu;
private var menu:Menu = new Menu();
private var xmlList:XMLList = XMLList('<item label="ActionScript">
<item label="Classe"/>
<item label="Interface"/>
</item>
<item label="MXML">
<item label="Application"/>
<item label="Component"/>
</item>');
private function creationCompleteHandler(event:Event):void{
menu.dataProvider = new XMLListCollection(xmlList);
menu.labelField = "@label";
popUpButton.popUp = menu
}
]]>
</mx:Script>
<mx:PopUpButton id="popUpButton" label="PopUpButton"/>
</mx:WindowedApplication>
- xmlList est une liste xml d'éléments
- ils sont injectés dans le popUpButton
PopUpMenuButton modifier
<?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>
- en changeant l'item on change le texte de mx:Text
- en cliquant sur le PopUpMenuButton on alert le label de l'id
Progress Bar 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[
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>
- en cliquant sur le bouton run on incremente la progress bar
RadioButton 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>
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>
- en cliquant sur le quatrième radiobutton on active la réponse correcte
RadioButtonGroup 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.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>
- l'event handler handeCard check l'évenement ItemClick
- en cliquant une option on met a jour le texte et on déclenche une alerte
RichEditableText 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 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>
- À l'ouverture : TextConverter.importToFlow(extTxtFlow, TextConverter.TEXT_LAYOUT_FORMAT) importe le texte externe
RichText 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">
<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>
- À l'ouverture le texte se dispose dans les containers richtext
Spinner 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">
<!-- 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>
- En cliquant sur les flèches on change le tableau
- @{mySpinner.value} désigne l'index du tableau
SWFLoader modifier
<?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>
- Le deuxieme script doit être copié locallement comme Local.swf
- Il est chargé par la première application
TextArea modifier
<?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>
- Le premier texte area est simple
- Le deuxième texte area est formatté en HTML
TextInput 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="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>
- Le bouton copie le texte de src dans dest
ToggleButton 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[
// 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 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="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>
- creationCompleteHandler construit un array qui rempli "tree"
VideoDisplay 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="VideoDisplay Control Example" height="75%" width="75%"
horizontalAlign="center"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:VideoDisplay id="myVid" height="158" width="211" source="assets/phone.flv" autoPlay="false"
playheadUpdateInterval="150" bufferTime="1" idleTimeout="120000"
playheadUpdate="trace('headUpdated')" stateChange="trace('stateChanged')"
progress="trace('progressDownload')" metadataReceived="trace('onMetadata')"/>
<mx:HBox>
<mx:Button label="Play" click="myVid.play();"/>
<mx:Button label="Pause" click="myVid.pause();"/>
<mx:Button label="Stop" click="myVid.stop();"/>
</mx:HBox>
</mx:Panel>
</mx:WindowedApplication>
- utilisez les boutons pour lancer la vidéo
- la vidéo est en local dans cet exemple
VideoPlayer 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:Style source="/assets/skins/shadow.css" />
<mx:VBox>
<rf:VideoPlayer id="player" autoPlay="true"
url="video/Honey_Honey_-_Little_Toy_Gun.flv" />
</mx:VBox>
</mx:WindowedApplication>
- La vidéo est ici en local
VScrollBar 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.ScrollEvent;
// Event handler function to display the scroll location
// as you move the scroll thumb.
private function myScroll(event:ScrollEvent):void
{
showPosition.text = "VScrollBar properties summary:" + '\n' +
"------------------------------------" + '\n' +
"Current scroll position: " + event.currentTarget.scrollPosition + '\n' +
"The maximum scroll position: " + event.currentTarget.maxScrollPosition + '\n' +
"The minimum scroll position: " + event.currentTarget.minScrollPosition ;
}
]]>
</mx:Script>
<mx:Panel id="panel" title="Exemple : Controle VScrollBar" height="75%" width="75%"
paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
<mx:Label width="100%" color="blue"
text="Cliquez sur la scroll bar pour voir ses propriétés."/>
<mx:VScrollBar id="bar" height="100%"
minScrollPosition="0" maxScrollPosition="{panel.width - 20}"
lineScrollSize="50" pageScrollSize="100"
repeatDelay="1000" repeatInterval="500"
scroll="myScroll(event);"/>
<mx:TextArea height="100%" width="100%" id="showPosition" color="blue"/>
</mx:Panel>
</mx:WindowedApplication>
- myScroll rempli le texte area avec les positions
VSlider 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[
private var imageWidth:Number=0;
private var imageHeight:Number=0;
// Event handler function to change the image size.
private function changeSize():void
{
phoneImage.width=uint(imageWidth*hSlider.value/100);
phoneImage.height=uint(imageHeight*hSlider.value/100);
}
]]>
</mx:Script>
<mx:Panel id="panel" title="VSlider Control Example"
height="100%" width="100%"
layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:HBox width="50%">
<mx:Image id="phoneImage" source="@Embed('assets/Nokia_6630.png')"
creationComplete="imageWidth=phoneImage.width; imageHeight=phoneImage.height;" />
</mx:HBox>
<mx:VBox horizontalAlign="center">
<mx:Label color="blue" text="Déplacer le slider pour redimensionner l'image."/>
<mx:VSlider id="hSlider"
dataTipPlacement="top"
minimum="0" maximum="100" value="100"
tickColor="black"
snapInterval="1" tickInterval="10"
labels="['0%','100%']"
allowTrackClick="true"
liveDragging="true"
change="changeSize();"/>
</mx:VBox>
</mx:Panel>
</mx:WindowedApplication>
- le déplacement du sliderfait changer la taille ave changeSize