Developer Snippets - An Embodiment for Developers

XML (Extensible Markup Language) is a flexible markup language, meant to store, carry, and exchange data. We can make use of XML as a simple database to store data and retrieve data.

This tutorial will teach you how to use the XMLConnector component to import an external XML document and then bind the data to a Combo box and text components. The XMLConnector lets you access any external data source that returns or receives XML through HTTP. Once loaded, the schema of your XML document will be broken down by structure giving you access to all of the data elements available.

I have created one simple xml file, which contains tags related to employee details, it’s a simple XML structure which depicts the details of an employee his/her id, name, job title and job profile. Let’s start with the application.

Here we go, open Flash and create a new document, just go a head and place the user interface components like the screen shot below, make sure that you have given instance name for each component that you have placed.

Now, open the components panel (Window > Components, or Ctrl+F7), you will see a window like the below, you will be seeing different types of components like Data, Media, User Interface and Video Components Under Data Components, double click (or) drag and drop the XMLConnector to your stage area and given an instance name (empXMLConnector) for that XMLConnector in the properties panel (Ctrl+F3). Now open the Component Inspector window (Window > Component Inspector, or Shift+F7 for Flash CS3 and for Flash 8 Alt+F7), in that you will be seeing three tabs Parameters, Bindings, Schema tabs. First click on the Parameters tab, in that for URL attribute enter the XML path (empdetails.xml), set the direction parameter to receive, and rest of the field should stay the same, ignoreWhite should be set to true by default.

Now switch over to the schema tab, select the results:XML field and then click on the import button (Image), browse to the location of your xml file (empdetails) and open/select it. You should now see a break down of the XML structure. We now have use off all the XML data in that file, after that what we do with it? Well for this particular tutorial we’re going to bind it to a combo box and some text area components. Now it’s time to bind the XML data to the respective text areas and to combo box.

Now just click select XML Connector which you have placed on stage and open the Component Inspector window. Go to Bindings tab, click on the add button you will be getting Add Binding window like the screen shot below.

In the add binding window, select employee : Array and click ok, you can see results.empDetails.employee got selected, and in the direction parameter select “�out”� as the value, then click on “�bound to”�, it will open a window called bound to – In that you will see two section towards your left Component Path and right Schema Location, in the Component Path select ComboBox, <empid_cmb> and in the Schema Location select dataprovider:Array then click ok, the bound to value should now read empid_cmb:dataProvider.

Now select the value field of the Formatter parameter. From the menu choose Rearrange Fields. This formatter creates a new array of objects based on the original [employee] array in your binding. Finally, for the formatter options parameter, click the value field and for the Fields definitions add the following to assign the array value to it’s own variable: label=id, now the formatter options value should now read as {fields:�label=id�}

Now again click on the add button to bind the things to remaining components, in the add binding window select name : Sting, now you can see results.empDetails.employee.[n].name , then go to set the direction value to “�out”�, in the bound to select the TextArea, <empname_txt> and text:String and click ok, the bound to value should now read empname_txt:text, and set the formatter value to none and go to the last option that is Index for “employee” click next to that to open Bound Index window, by default 0 will be the index uncheck the check box named Use constant value, the Component path: panel will be enabled, in that select ComboBox, <empid_cmb>, and in the Schema location: panel select selectedIndex : Number, then click ok, now the Index for “employee” will read as empid_cmb:selectedIndex. This procedure is for bindind the data to the Emp Name field, repeat the same to other fields (Emp JobTitle and Emp Profile).

After completing the above, One final step is to trigger the XMLConnector. Go to your main timeline, select frame 1, hit F9 to bring up the Actions panel and add the line: empXMLConnector.trigger();. That does exactly what it looks like, it triggers the XMLConnector to make the connection to the assigned XML file and import the data. If you test the movie now, you’ll see the empid’s poping up in combo box, and if you click on the same it will display respective details in the text area components, but the data won’t go anywhere since it hasn’t been assigned to anything.

Now check your application, by pressing ctrl + Enter Key.

If you want to download the stuff, here is the link: XMLConnector Example