Data Binding with XML Data Model in Flex4

Home Tutorial Flex Flex4 Components Data Binding with XML Data Model in Flex4

Data Binding with XML Data Model in Flex4
Posted on: June 1, 2010 at 12:00 AM

The tag contains a data in tree format. It is just like a tag.

Data Binding with XML DataModel in Flex4:

The <fx:XML> tag contains a data in tree format. It is just like a <fx:Model> tag.
The flex builder compiles the <fx:XML> tag into literal XML data. You can use this data in a component by using dataprovider property.
The tag is <fx:XML>.

The Syntax is given below.

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<fx:Declarations>

<fx:XML id="employee" format="e4x">

<name>

<first>{firstName.text}</first>

<last>{lastName.text}</last>

</name>

<department>{department.text}</department>

<email>{email.text}</email>

<phoneno>{phone.text}</phoneno>

</employee>

</fx:XML>

</fx:Declarations>

Example:

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

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<fx:Declarations>

<fx:XML id="employee" format="e4x">

<name>

<first>{firstName.text}</first>

<last>{lastName.text}</last>

</name>

<department>{department.text}</department>

<email>{email.text}</email>

<phoneno>{phone.text}</phoneno>

</employee>

</fx:XML>

</fx:Declarations>

<s:Panel title="Data Binding with XML DataModel" width="316" height="283">

<mx:Form x="14" y="14">

<mx:FormHeading label="Employee Information" textAlign="center"/>

<mx:FormItem label="First Name">

<s:TextInput id="firstName" width="134"/>

</mx:FormItem>

<mx:FormItem label="Last Name">

<s:TextInput id="lastName" width="134"/>

</mx:FormItem>

<mx:FormItem label="Department">

<s:TextInput id="department" width="134"/>

</mx:FormItem>

<mx:FormItem label="Email-id">

<s:TextInput id="email" width="134"/>

</mx:FormItem>

<mx:FormItem label="PhoneNo">

<s:TextInput id="phone" width="134"/>

</mx:FormItem>

<mx:FormItem direction="horizontal">

<s:Button id="Submitbtn" label="Submit" width="64"/>

<s:Button id="cancelbtn" label="Cancel" width="63"/>

</mx:FormItem>

</mx:Form>

</s:Panel>

</s:Application>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Related Tags for Data Binding with XML Data Model in Flex4:

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics