XML in Flex

Flex uses the XML as the de facto standard for data communication between the server side and client side.

For an example let us consider this XML file .


                     <?xml version="1.0" encoding="iso-8859-1"?>
                     <students>
                                <student id='1'>
                                                       <name>Firzhan</name>
                                                       <age>25</age>
                                 </student>
                                   <student id='2'>

                                                       <name>Naqash</name>

                                                       <age>15</age>

                                 </student>
                      </students>

Now if this is the xml file that had to be read by the client side flex + action script code, Now we have to create a new flex project and do the necessary settings to make it work with remote servers. I hope to another separate post for it.

Now the Flex has to access the data in this xml file. Flex sees this xml file as "There is a students object. Within it it has multiple student objects.". All Flex needs to do is access the student object via students object.

I will be storing the static xml file in the assets folder in the project. Now in to the main.mxml file we have to add the HTTPService class. HTTPService class represents the HTTPService object. It has several methods and attributes with in itself. For the moment we will consider only the "id" and "url" attributes.

               <?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>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
                         
                                    <s:HTTPService id="studentData" url="../assets/students.xml"/>
                            </s:Application>

The HTTPService object can be invoked after a click event or when the swf file (Flex file) got loaded. Here I am going to consider the second scenario. In order to do this task creationComplete attribute has to be used in the main application start tag.

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

                                                   creationComplete="studentData.send()">

once the creatioComplete invokes the HTTPService object's send method, the returning XML file will be
handled by the HTTPService object itself. the resulting XML file will be converted in to ArrayCollection object. ArrayCollection wraps multiple array objects.

Therefore if you want to display the data of students in a data grid table


<mx:DataGrid x="56" y="250" width="950" 
                          dataProvider="{studentData.lastResult.students.student}"/>


"dataProvider" acts as the data source for the data grid table.
"lastResult" denotes the result of the last url invocation.


Tomorrow I will be blogging on how to do the same task using action script 3.0 code ....