Search Flex Components Free

Custom Search
Showing posts with label Flex Data (Embedded). Show all posts
Showing posts with label Flex Data (Embedded). Show all posts

January 23, 2008

Embedding fonts from a Flash SWF file into a Flex application

The following examples show how you can embed a font from a Flash SWF into a Flex application using @font-face in a <<:Style />> block, or using the [Embed] metadata.




<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white"

applicationComplete="init()">



<mx:Script>

<![CDATA[

private function init():void {

var appInfo:LoaderInfo = Application.application.loaderInfo;

/* Just grab the filename from the SWF URL. */

var fileName:String = (appInfo.url).split("/").pop();

/* Convert bytes to kilobytes. */

var kbTotal:String = (appInfo.bytesTotal / 1024).toFixed(2);

info.text = fileName + " (" + kbTotal + "kb)";

}

]]>

</mx:Script>



<mx:Style>

@font-face{

src: url('./fonts/fromFlash.swf');

fontFamily: "Myriad Web Pro";

}



.myriadWebProFromSWF {

fontFamily: "Myriad Web Pro";

fontSize: 24;

}

</mx:Style>



<mx:ApplicationControlBar dock="true">

<mx:Label id="info" />

</mx:ApplicationControlBar>

<mx:Text styleName="myriadWebProFromSWF">

<mx:text>The quick brown fox jumped over the lazy dog.</mx:text>

</mx:Text>

</mx:Application>

December 27, 2007

Flex Miscellaneous Tooltips Source Code Example:

Creat a New mxml file:

tooltipdemo .mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0">

<mx:Label text="Mouse over this label to see a tool tip" toolTip="This is a tool tip"/>

</mx:Application>

Flex Miscellaneous Local Shared Objects Source Code Example:

sharedobjectdemo .mxml


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0"
horizontalAlign="center"
creationComplete="initApp()">

<mx:Script>

import mx.controls.Alert;
import flash.net.SharedObject;

private var lso:SharedObject;

private function initApp():void {
lso=SharedObject.getLocal("info");
if (lso == null)
{
Alert.show("Cannot create shared object", "Error");
}
else
{
if (lso.data.firstName != null) firstName.text = lso.data.firstName;
if (lso.data.lastName != null) lastName.text = lso.data.lastName;
if (lso.data.email != null) email.text = lso.data.email;
}
}

private function saveInfo():void
{
lso.data.firstName=firstName.text;
lso.data.lastName=lastName.text;
lso.data.email=email.text;
}

</mx:Script>

<mx:Text width="100%" textAlign="center">
<mx:text>
Fill in the form below and click the save button to save the information to the local shared object.
When you reload the application, the form is automatically populated with the data you saved.
</mx:text>
</mx:Text>

<mx:Form>

<mx:FormItem label="First Name">
<mx:TextInput id="firstName" width="200"/>
</mx:FormItem>

<mx:FormItem label="Last Name">
<mx:TextInput id="lastName" width="200"/>
</mx:FormItem>

<mx:FormItem label="Email">
<mx:TextInput id="email" width="200"/>
</mx:FormItem>

</mx:Form>

<mx:HBox>
<mx:Button label="Save to SharedObject" width="150" click="saveInfo()"/>
<mx:Button label="Clear SharedObject" width="150" click="lso.clear()"/>
</mx:HBox>

</mx:Application>

Flex Using a Custom Event Class Source Code Example:

popupwindow .mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0">

<mx:Script>

import mx.managers.PopUpManager;

private function showWindow(modal:Boolean):void
{
var logonWindow:LogonWindow = new LogonWindow();
logonWindow.addEventListener("logon", logonHandler);
PopUpManager.addPopUp(logonWindow, this, modal);
PopUpManager.centerPopUp(logonWindow);
}

public function logonHandler(event:LogonEvent):void
{
status.text="You entered userId: " + event.userId + " password: " + event.password;
}

</mx:Script>
<mx:Panel width="100%" height="100%" horizontalAlign="center" paddingTop="20">
<mx:Button label="Show Window" click="showWindow(false)" width="150"/>
<mx:Button label="Show Modal Window" click="showWindow(true)" width="150"/>

<mx:Label id="status"/>
</mx:Panel>

</mx:Application>

loginwindow.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="Logon" borderAlpha="1.0">

<mx:Script>

import mx.managers.PopUpManager;

private function logon():void
{
dispatchEvent(new LogonEvent(userId.text, password.text));
mx.managers.PopUpManager.removePopUp(this);
}

</mx:Script>

<mx:Metadata>
[Event("logon")]
</mx:Metadata>

<mx:Form>

<mx:FormItem label="UserId" required="true">
<mx:TextInput id="userId" width="150"/>
</mx:FormItem>

<mx:FormItem label="Password" required="true">
<mx:TextInput id="password" width="150"/>
</mx:FormItem>

<mx:FormItem>
<mx:HBox horizontalGap="30">
<mx:Button label="Logon" click="logon()"/>
<mx:Button label="Cancel" click="PopUpManager.removePopUp(this)"/>
</mx:HBox>
</mx:FormItem>

</mx:Form>

</mx:TitleWindow>

Flex Dispatching Custom Events Source Code Example:

Creat a New mxml file:

customeventdemo .mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" xmlns="*">

<OKCancel
okClicked="myLabel.text='OK clicked'"
cancelClicked="myLabel.text='Cancel clicked'"/>

<mx:Label id="myLabel"/>

</mx:Application>

okcancel.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Metadata>
[Event("okClicked")]
[Event("cancelClicked")]
</mx:Metadata>

<mx:Button label="OK" width="80" click="dispatchEvent(new Event('okClicked'))"/>
<mx:Button label="Cancel" width="80" click="dispatchEvent(new Event('cancelClicked'))"/>

</mx:HBox>

Flex Style Examples Accordion Source Code:


Creat a New mxml file:

Accordion .mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" >

<mx:Tile>

<mx:Accordion width="200" height="150">
<mx:VBox label="Tab 1"/>
<mx:VBox label="Tab 2"/>
<mx:VBox label="Tab 3"/>
</mx:Accordion>

<mx:Accordion width="200" height="150"
fillColors="[0x000033,0xFFFFFF]">
<mx:VBox label="Tab 1"/>
<mx:VBox label="Tab 2"/>
<mx:VBox label="Tab 3"/>
</mx:Accordion>

</mx:Tile>

</mx:Application>



Flex Style Examples Buttons Source Code:

Creat a New mxml file:

Buttonstyledemo .mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" >

<mx:Button label="Default Button"/>

<mx:Button label="Styled Button"
cornerRadius="12"
fillColors="[0x330000, 0x880000]"
themeColor="#FF0000"
color="#F0F0F0"/>

<mx:Button label="Styled Button"
cornerRadius="0"
fillColors="[0xFF0000, 0xFF0000]"
themeColor="#0000FF"
color="#0B33C3"/>

<mx:Button label="Styled Button"
cornerRadius="3"
fillColors="[0xDDFFFF, 0xDDFFFF]"
themeColor="#003333"
color="#0B333C"/>

</mx:Application>


Flex Style Examples VBox Source Code:

Creat a New mxml file:

Vboxstyledemo .mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" >

<mx:Tile>

<mx:VBox borderStyle="solid" width="150" height="150"
cornerRadius="5"/>

<mx:VBox borderStyle="solid" width="150" height="150"
cornerRadius="5"
borderThickness="5"/>

</mx:Tile>

</mx:Application>

Flex Data Collections List Examples Sample Source Code:

List .mxml


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="srv.send()" >

<mx:Script>
<![CDATA[

import mx.collections.*;

[Bindable]
public var airportCollection:ArrayCollection;

private function initList() : void
{
airportCollection = new ArrayCollection(srv.lastResult.airports.location);
}

]]>
</mx:Script>

<mx:XML id="source" format="e4x">
<topnode>
<product id="10907"><name>Dreamweaver</name></product>
<product id="20670"> <name>Premiere</name></product>
<product id="30078"><name>Contribute</name></product>
</topnode>
</mx:XML>

<mx:XMLListCollection id="col" source="{source.product}" />

<mx:HTTPService id="srv" url="../assets/airports.xml" result="initList()"/>

<mx:Label text="List bound to an ArrayCollection"/>
<mx:List dataProvider="{airportCollection}" labelField="name" width="200" />

<mx:Label text="List with an XMLCollection as its dataProvider and
labelField=@attribute set" />
<mx:List dataProvider="{col}" labelField="@id" width="200" />

<mx:Label text="List with an XMLCollection as its dataProvider and
labelField=childNode set" />
<mx:List dataProvider="{col}" labelField="name" width="200" />

</mx:Application>

airports.xml
<?xml version="1.0" encoding="utf-8"?>

<airports>
<location>
<abbreviation>IAH</abbreviation>
<name>Houston</name>
</location>
<location>
<abbreviation>BOS</abbreviation>
<name>Boston</name>
</location>
<location>
<abbreviation>MHT</abbreviation>
<name>Houston</name>
</location>
<location>
<abbreviation>JAX</abbreviation>
<name>Jacksonville</name>
</location>
<location>
<abbreviation>CVG</abbreviation>
<name>Cincinatti</name>
</location>
<location>
<abbreviation>ATL</abbreviation>
<name>Atlanta</name>
</location>
<location>
<abbreviation>CDG</abbreviation>
<name>Paris</name>
</location>
<location>
<abbreviation>JFK</abbreviation>
<name>New York</name>
</location>
<location>
<abbreviation>LAX</abbreviation>
<name>Los Angeles</name>
</location>
<location>
<abbreviation>HND</abbreviation>
<name>Tokyo</name>
</location>

</airports>

Flex Data Collections Filter Functions With MLListCollections

MLListCollections.mxml

<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundAlpha="0" >

<mx:Script>
<![CDATA[

import mx.collections.*;

private var airportCollection:ArrayCollection;

private function xmlFilterFunc(item:Object):Boolean
{
return
item.@label >= "Inbox" && item.@label <= "Memos";
}

]]>
</mx:Script>

<mx:XML format="e4x" id="source">
<topnode>
<nodes label="Mail" data="mail" />
<nodes label="Inbox" data="inbox" />
<nodes label="Drafts" data="drafts" />
<nodes label="Memos" data="memos" />
<nodes label="Faxes" data="faxes" />
</topnode>
</mx:XML>

<mx:XMLListCollection id="xmlC" source="{source.nodes}" filterFunction="xmlFilterFunc" />

<mx:Label text="A filterFunction is used with an XMLListCollection." />
<mx:Label text="You should only see items from Inbox - Memos." />

<mx:DataGrid id="xmlDG" dataProvider="{xmlC}" >
<mx:columns>
<mx:DataGridColumn dataField="@label" headerText="folders"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

Flex Data Collections Filter Functions With ArrayCollections Sample Source Code:

Create a new file:-

filterexamples.mxml

<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="srv.send();"

backgroundAlpha="0" >

<mx:Script>
<![CDATA[

import mx.collections.*;

private var originalCollection:ArrayCollection;
private var filteredCollection:ArrayCollection;

private function initList() : void
{
originalCollection = new ArrayCollection(srv.lastResult.airports.location);
filteredCollection = new ArrayCollection(srv.lastResult.airports.location);
originalGrid.dataProvider=originalCollection;
filteredGrid.dataProvider=filteredCollection;
filteredCollection.filterFunction = filterFunc;
filteredCollection.refresh();
}

private function filterFunc(item:Object):Boolean
{
return item.name >= "Boston" && item.name <= "Houston";
}

]]>
</mx:Script>

<mx:HTTPService id="srv" url="../assets/airports.xml" result="initList()"/>

<mx:Label text="A filterFunction is used with an ArrayCollection." />

<mx:HBox>
<mx:VBox>
<mx:Label text="DataGrid with original data." />
<mx:DataGrid id="originalGrid" />
</mx:VBox>
<mx:VBox>
<mx:Label text="DataGrid with filtered data." />
<mx:DataGrid id="filteredGrid" />
</mx:VBox>
</mx:HBox>

</mx:Application>

airpots.xml
<?xml version="1.0" encoding="utf-8"?>

<airports>
<location>
<abbreviation>IAH</abbreviation>
<name>Houston</name>
</location>
<location>
<abbreviation>BOS</abbreviation>
<name>Boston</name>
</location>
<location>
<abbreviation>MHT</abbreviation>
<name>Houston</name>
</location>
<location>
<abbreviation>JAX</abbreviation>
<name>Jacksonville</name>
</location>
<location>
<abbreviation>CVG</abbreviation>
<name>Cincinatti</name>
</location>
<location>
<abbreviation>ATL</abbreviation>
<name>Atlanta</name>
</location>
<location>
<abbreviation>CDG</abbreviation>
<name>Paris</name>
</location>
<location>
<abbreviation>JFK</abbreviation>
<name>New York</name>
</location>
<location>
<abbreviation>LAX</abbreviation>
<name>Los Angeles</name>
</location>
<location>
<abbreviation>HND</abbreviation>
<name>Tokyo</name>
</location>

</airports>

Flex Data Collections Sorting (AS) Sample Source Code:

Creat a File:
Sortexampleas.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();">

<mx:Script>
<![CDATA[

import mx.collections.*;

private function init():void
{
var xmlCollection:XMLListCollection = new XMLListCollection(complexData);
var sort:Sort = new Sort();
sort.fields = [new SortField("@first")];
xmlCollection.sort = sort;
xmlCollection.refresh();
xmlDG.dataProvider = xmlCollection;
}

private function setPhone(item:Object, dataField:Object):String
{
return String(item.contact.phone);
}

private var complexData:XMLList = <>
<person first="John" last="Doe" id="104" >
<contact>
<phone>415-832-7575</phone>
<fax>415-596-3699</fax>
</contact>
</person>
<person first="Jane" last="Smith" id="108" >
<contact>
<phone>415-832-1234</phone>
<fax>415-678-0877</fax>
</contact>
</person>
<person first="Ellen" last="Jones" id="116" >
<contact>
<phone>415-832-0987</phone>
<fax>415-357-4578</fax>
</contact>
</person>
</>;

]]>
</mx:Script>

<mx:Label text="The DataGrid should be sorted by first name." />

<mx:DataGrid id="xmlDG">
<mx:columns>
<mx:DataGridColumn dataField="@first" headerText="First"/>
<mx:DataGridColumn dataField="@last" headerText="Last"/>
<mx:DataGridColumn labelFunction="setPhone" headerText="Phone Number"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

Flex Data Collections Sorting (MXML) Sample Source Code:

Sorting.mxml

<?xml version="1.0" encoding="UTF-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="srv.send()">
<mx:ArrayCollection id="airportCollection">
<mx:source>{srv.lastResult.airports.location}</mx:source>
<mx:sort>
<mx:Sort>
<mx:fields>
<mx:Array>
<mx:SortField name="abbreviation" descending="true" />
</mx:Array>
</mx:fields>
</mx:Sort>
</mx:sort>
</mx:ArrayCollection>

<mx:HTTPService id="srv" url="../assets/airports.xml"
result="airportCollection.refresh()" />

<mx:Label text="The items in this datagrid should be in
descending order using the 'abbreviation' field." />
<mx:DataGrid id="dg" dataProvider="{airportCollection}" width="350" />

</mx:Application>

airports.xml
<?xml version="1.0" encoding="utf-8"?>

<airports>
<location>
<abbreviation>IAH</abbreviation>
<name>Houston</name>
</location>
<location>
<abbreviation>BOS</abbreviation>
<name>Boston</name>
</location>
<location>
<abbreviation>MHT</abbreviation>
<name>Houston</name>
</location>
<location>
<abbreviation>JAX</abbreviation>
<name>Jacksonville</name>
</location>
<location>
<abbreviation>CVG</abbreviation>
<name>Cincinatti</name>
</location>
<location>
<abbreviation>ATL</abbreviation>
<name>Atlanta</name>
</location>
<location>
<abbreviation>CDG</abbreviation>
<name>Paris</name>
</location>
<location>
<abbreviation>JFK</abbreviation>
<name>New York</name>
</location>
<location>
<abbreviation>LAX</abbreviation>
<name>Los Angeles</name>
</location>
<location>
<abbreviation>HND</abbreviation>
<name>Tokyo</name>
</location>

</airports>

December 25, 2007

Flex Find Functions Source Code


Flex Data Collections Sample Source Code:
Create a file:
FindExample .mxml

<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0"
creationComplete="srv.send()" >

<mx:Script>
<![CDATA[

import mx.collections.*;

[Bindable]
public var ac:ArrayCollection;

private function initList() : void
{
ac = new ArrayCollection(srv.lastResult.roster.player);
}

/**
* Note: Everytime we call one of the find functions, we set the SortField. This is
* to avoid the situation where a user clicks on a column header to sort the DataGrid. In
* this case, the Sort Field will get reset and therefore be undefined if you call a find
* function.
*/
private function createSort() : void
{
var sort:Sort = new Sort();
sort.fields = [new SortField("name", true)];
ac.sort = sort;
ac.refresh();
}

private function findFirst():void
{
createSort();
var cursor:IViewCursor = ac.createCursor();
var values:Object = {name: nameInput.text}
cursor.findFirst(values);
lbl.text = cursor.current.name + " " + cursor.current.lastname + ", " +
cursor.current.initials;
myGrid.setFocus();
}

private function findLast():void
{
createSort();
var cursor:IViewCursor = ac.createCursor();
var values:Object = {name: nameInput.text}
cursor.findLast(values);
lbl.text = cursor.current.name + " " + cursor.current.lastname + ", " +
cursor.current.initials;
}

private function findAny():void
{
createSort();
var cursor:IViewCursor = ac.createCursor();
var values:Object = {name: nameInput.text}
cursor.findAny(values);
lbl.text = cursor.current.name + " " + cursor.current.lastname + ", " +
cursor.current.initials;
}

]]>
</mx:Script>

<mx:HTTPService id="srv" url="../assets/players.xml" result="initList()"/>

<mx:DataGrid id="myGrid" width="400" dataProvider="{ac}" >
<mx:columns>
<mx:DataGridColumn dataField="initials" headerText="Initials"/>
<mx:DataGridColumn dataField="name" headerText="First Name"/>
<mx:DataGridColumn dataField="lastname" headerText="Last Name"/>
</mx:columns>
</mx:DataGrid>

<mx:HBox>
<mx:Label text="Search for name: " />
<mx:TextInput id="nameInput" width="150" text="Steve" />
</mx:HBox>

<mx:HBox>
<mx:Button label="Find First" click="findFirst();" />
<mx:Button label="Find Last" click="findLast();" />
<mx:Button label="Find Any" click="findAny();" />
</mx:HBox>

<mx:Label id="lbl" width="300" />

</mx:Application>

player.xml
<?xml version="1.0" encoding="utf-8"?>

<roster>

<player>
<initials>JAS</initials>
<name>John</name>
<lastname>Smith</lastname>
</player>
<player>
<initials>JBS</initials>
<name>Jason</name>
<lastname>Smith</lastname>
</player>
<player>
<initials>MHS</initials>
<name>Michael</name>
<lastname>Snow</lastname>
</player>
<player>
<initials>JAG</initials>
<name>John</name>
<lastname>Glass</lastname>
</player>
<player>
<initials>SVH</initials>
<name>Steve</name>
<lastname>Harris</lastname>
</player>
<player>
<initials>MW</initials>
<name>Michael</name>
<lastname>Wilkes</lastname>
</player>
<player>
<initials>JBS</initials>
<name>Jason</name>
<lastname>Soriano</lastname>
</player>
<player>
<initials>HTE</initials>
<name>Houston</name>
<lastname>Elss</lastname>
</player>
<player>
<initials>JBE</initials>
<name>John</name>
<lastname>Elk</lastname>
</player>
<player>
<initials>SJK</initials>
<name>Steve</name>
<lastname>Kim</lastname>
</player>
<player>
<initials>SLM</initials>
<name>Steve</name>
<lastname>Mai</lastname>
</player>
<player>
<initials>HK</initials>
<name>Harry</name>
<lastname>Kim</lastname>
</player>
<player>
<initials>SMG</initials>
<name>Steve</name>
<lastname>Gonzales</lastname>
</player>
</roster>

Flex Using the Cursor data Source Code

Flex Data Collections Sample Source Code:
Create a file:
CursorExample .mxml

<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp();" backgroundAlpha="0">

<mx:Script>
<![CDATA[
import mx.collections.*;

[Bindable]
public var cursor:IViewCursor;

private function initApp():void
{
cursor = col.createCursor();
}

private function seekFirst():void
{
cursor.seek(CursorBookmark.FIRST);
lbl.text = cursor.current.name + " (" + cursor.current.abbreviation + ")";
}

private function seekLast():void
{
cursor.seek(CursorBookmark.LAST);
lbl.text = cursor.current.name + " (" + cursor.current.abbreviation + ")";
}

private function forwardIteration():void
{
if (cursor.afterLast)
{
cursor.seek(CursorBookmark.FIRST);
}
lbl.text = cursor.current.name + " (" + cursor.current.abbreviation + ")";
cursor.moveNext();
}

private function backwardsIteration():void
{
if (cursor.beforeFirst)
{
cursor.seek(CursorBookmark.LAST);
}
lbl.text = cursor.current.name + " (" + cursor.current.abbreviation + ")";
cursor.movePrevious();
}

]]>
</mx:Script>

<mx:ArrayCollection id="col">
<mx:source>
<mx:Array>
<mx:Object abbreviation="IAH" name="Houston"/>
<mx:Object abbreviation="BOS" name="Boston"/>
<mx:Object abbreviation="MHT" name="Manchester"/>
<mx:Object abbreviation="JAX" name="Jacksonville"/>
<mx:Object abbreviation="CVG" name="Cincinatti"/>
<mx:Object abbreviation="ATL" name="Atlanta"/>
<mx:Object abbreviation="CDG" name="Paris"/>
<mx:Object abbreviation="JFK" name="New York"/>
<mx:Object abbreviation="LAX" name="Los Angeles"/>
<mx:Object abbreviation="HND" name="Tokyo"/>
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:DataGrid dataProvider="{col}" width="450"/>
<mx:Tile>
<mx:Button click="seekFirst();" label="seek first" width="140" />
<mx:Button click="seekLast();" label="seek last" width="140" />
<mx:Button click="forwardIteration();" label="forward iteration" width="140" />
<mx:Button click="backwardsIteration();" label="backward iteration" width="140" />
</mx:Tile>

<mx:Label id="lbl" width="300"/>

</mx:Application>

Flex HTTPService data Source Code

Flex Data Dynamic Sample Source Code:
Create a file:

HttpServiceDemo .mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0"
creationComplete="srv.send()">

<mx:Script>

import mx.collections.ArrayCollection;
import mx.rpc.events.*;
import mx.controls.Alert;

[Bindable]
public var catalog:ArrayCollection;

private function resultHandler(event:ResultEvent) : void
{
catalog = new ArrayCollection(srv.lastResult.catalog.product);
}

private function faultHandler(event:FaultEvent) : void
{
Alert.show(event.fault.faultstring, "Error requesting data");
}

</mx:Script>

<mx:HTTPService id="srv" url="../assets/catalog.xml" useProxy="false"
result="resultHandler(event)"
fault="faultHandler(event)"/>

<mx:Tile>
<mx:Repeater id="list" dataProvider="{catalog}">
<mx:VBox>
<mx:Image width="50" height="100" source="../{list.currentItem.image}"
toolTip="Our Price: {list.currentItem.price}"
visible="false" complete="Image(event.target).visible=true;"/>
<mx:Label text="{list.currentItem.name}"/>
</mx:VBox>
</mx:Repeater>
</mx:Tile>

</mx:Application>

Catalog .xml
<?xml version="1.0" encoding="utf-8"?>

<catalog>

<product productId="6">
<name>Casio W21CA</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>49.99</price>
<image>assets/products/Casio_W21CA.png</image>
<brand>Casio</brand>
<camera>true</camera>
<web>true</web>
<bluetooth>false</bluetooth>
</product>

<product productId="2">
<name>DoCoMo 901 IC</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>59.99</price>
<image>assets/products/DoCoMo_901_ic.png</image>
<brand>DoCoMo</brand>
<camera>false</camera>
<web>true</web>
<bluetooth>false</bluetooth>
</product>

<product productId="18">
<name>Siemens SX1</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>79.99</price>
<image>assets/products/Siemens_SX1.png</image>
<brand>Siemens</brand>
<camera>true</camera>
<web>true</web>
<bluetooth>false</bluetooth>
</product>

<product productId="10">
<name>DoCoMo F900 I</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>89.99</price>
<image>assets/products/DoCoMo_F900_i.png</image>
<brand>DoCoMo</brand>
<camera>true</camera>
<web>true</web>
<bluetooth>true</bluetooth>
</product>

<product productId="3">
<name>DoCoMo N900 I</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>99.99</price>
<image>assets/products/DoCoMo_N900_i.png</image>
<brand>DoCoMo</brand>
<camera>true</camera>
<web>false</web>
<bluetooth>false</bluetooth>
</product>

<product productId="1">
<name>DoCoMo SO506</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>129.99</price>
<image>assets/products/DoCoMo_SO506iC.png</image>
<brand>DoCoMo</brand>
<camera>true</camera>
<web>true</web>
<bluetooth>true</bluetooth>
</product>

<product productId="16">
<name>HP rz 1710</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>144.99</price>
<image>assets/products/HP_rz_1710.png</image>
<brand>HP</brand>
<camera>false</camera>
<web>true</web>
<bluetooth>false</bluetooth>
</product>

<product productId="7">
<name>KIDDI AU</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>199.99</price>
<image>assets/products/KIDDI_AU_penck.png</image>
<brand>KIDDI</brand>
<camera>false</camera>
<web>false</web>
<bluetooth>true</bluetooth>
</product>

<product productId="17">
<name>Nokia 6630</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>224.99</price>
<image>assets/products/Nokia_6630.png</image>
<brand>Nokia</brand>
<camera>true</camera>
<web>false</web>
<bluetooth>true</bluetooth>
</product>

<product productId="12">
<name>Nokia 6680</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>239.99</price>
<image>assets/products/Nokia_6680.png</image>
<brand>Nokia</brand>
<camera>false</camera>
<web>true</web>
<bluetooth>true</bluetooth>
</product>

<product productId="5">
<name>Nokia 7610</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>249.99</price>
<image>assets/products/Nokia_7610.png</image>
<brand>Nokia</brand>
<camera>true</camera>
<web>false</web>
<bluetooth>true</bluetooth>
</product>

<product productId="11">
<name>Nokia LGV</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>289.99</price>
<image>assets/products/Nokia_lg_v_keypad.png</image>
<brand>Nokia</brand>
<camera>true</camera>
<web>false</web>
<bluetooth>true</bluetooth>
</product>

<product productId="14">
<name>Nokia SMV</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>319.99</price>
<image>assets/products/Nokia_sm_v_keypad.png</image>
<brand>Nokia</brand>
<camera>false</camera>
<web>false</web>
<bluetooth>true</bluetooth>
</product>

<product productId="15">
<name>Samsung CEO</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>324.99</price>
<image>assets/products/Samsung_CEO_open.png</image>
<brand>Samsung</brand>
<camera>true</camera>
<web>false</web>
<bluetooth>false</bluetooth>
</product>

<product productId="4">
<name>Samsung Mini</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>329.99</price>
<image>assets/products/Samsung_Mini.png</image>
<brand>Samsung</brand>
<camera>false</camera>
<web>false</web>
<bluetooth>false</bluetooth>
</product>

<product productId="19">
<name>Sharp CG</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>329.99</price>
<image>assets/products/Sharp_cg_silicon.png</image>
<brand>Motorola</brand>
<camera>false</camera>
<web>false</web>
<bluetooth>true</bluetooth>
</product>

<product productId="8">
<name>Sony p900</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>359.99</price>
<image>assets/products/Sony_p900.png</image>
<brand>Sharp</brand>
<camera>true</camera>
<web>false</web>
<bluetooth>true</bluetooth>
</product>

<product productId="13">
<name>Talby</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>389.99</price>
<image>assets/products/Talby.png</image>
<brand>Talby</brand>
<camera>true</camera>
<web>true</web>
<bluetooth>false</bluetooth>
</product>

<product productId="20">
<name>CD 828</name>
<description>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget neque sit amet nulla volutpat rutrum. Aliquam venenatis. Ut tempor. Curabitur eros ligula, pharetra at, malesuada eget, pulvinar eget, urna.</description>
<price>399.99</price>
<image>assets/products/CD_828.png</image>
<brand>CD</brand>
<camera>true</camera>
<web>false</web>
<bluetooth>true</bluetooth>
</product>

</catalog>

Flex Embedding static xml data Source Code

Flex Data Static (Embedded) Sample Source Code:
Create a file:

XmlData .mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0">

<!--
The XML document is embedded in the SWF file.
For dynamic data, use one of the dynamic data services (HTTPService, WebService, RemoteObject)
-->
<mx:Model id="myEmployee" source="../assets/employee.xml"/>

<mx:Label id="fname" text="{myEmployee.phonebook.employee.name.first}"/>
<mx:Label id="lname" text="{myEmployee.phonebook.employee.name.last}"/>
<mx:Label id="phone" text="{myEmployee.phonebook.employee.phone}"/>

</mx:Application>

Flex Embedding inline data Source Code

Flex Data Static (Embedded) Sample Source Code:
Create a file:

EmbeddedData .mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" >

<mx:Model id="myEmployee">
<employee employeeId="5">
<firstName>John</firstName>
<lastName>Smith</lastName>
<phone>617-219-3345</phone>
</employee>
</mx:Model>

<mx:VBox>
<mx:Label id="empid" text="{myEmployee.employee.employeeId}"/>
<mx:Label id="fname" text="{myEmployee.employee.firstName}"/>
<mx:Label id="lname" text="{myEmployee.employee.lastName}"/>
<mx:Label id="phone" text="{myEmployee.employee.phone}"/>
</mx:VBox>

</mx:Application>

Related Flex Tutorials