PART 1 - Flash Data Connection Wizard

1) Open Flash MX 2004.

2) Create a New Document (you can use the default size).

3) Click Commands then select Data Connection Wizard.



4) The Data Connection Wizard window opens.



5) Select XML in the selectbox. If you want your datagrid to retrieve special web services such as Weather, you need to specify them (a .wsdl file) in the Web Services panel (under Development Panels).

6) Now you'll be asked to enter an XML file. For now, you can just try with this tutorial example. Type: http://pixel2life.com/twodded/staff/ngpixel/tutorials/FLA_Data_Connection_Wizard/twodded_set.xml



Contents of the XML file and how to make your own is explained in Part 2 of this tutorial.

7) Now click "Get Shema" button to retrieve the available fields in the XML file. You should get something similar to this (when all the tree objects are opened).



The Wizard will automatically determines where are the objects fields at. The red arrow is the one you must select. You can see below the XPath which is the "url" version inside the file. is /data/row in XPath format. There's no need to modify this line since its automatically displayed when you select an item in the schema. Now Click the Next button. This screen appears:



8) A list of all available fields appears. These items are actually the colums of the datagrid. Since we want all of them, click Select All. Then click Next.



9) Now you can rename fields like you want them to be displayed. But don't change the Path or it won't work. All fields are Strings as default, you can set them as numbers, boolean, date depending on how they are. For example, in this XML file, we do have a Date format. If you select the "date" format, you choose how the date is displayed.



10) Click Next, you will now be asked to enter a name for all the datagrid components. It's important to select "Create a Datagrid". The Get Data button is optional since you can trigger the data when the movie is loaded or during a specific events for example. this._parent.myTwoddedtutsReceiveXMLConnector.trigger();



11) Click Finish to exit the wizard. You should have the following items on your screen now.



The first icon is the XML Connector, this will connect to the XML file and retrieve data. The second icon is where the data is stored. The big table is the datagrid. The datagrid display the contents of the DataSet (second icon).

12) You can now test your movie. By default, rows are 20px height, you can modify the height in the properties of the Datagrid object.



13) Here's the final result!





PART 2 - Making your own XML file

Now that you know how to make a Datagrid using flash, you might want to put your own infos.

1) Open a Dreamweaver or Notepad

2) Create a new XML file

3) First type the tags, rows are going to be placed inside these tags.

<data>



</data>

4) Now type the tags to create a row in the databrid table.

<data>

<row></row>

</data>

5) Now, we can put infos inside that row. Each line correspond to a column value.

<data>

<row>

<DateAdded>10/09/2005</DateAdded>
<TutName>Tut 1</TutName>
<Description>A little description</Description>
<Author>Jay</Author>

</row>

</data>

In this example, DataAdded is the name and 10/09/05 is the value. You can add more rows by adding the same from to

<data>
<row>
<DateAdded>10/09/2005</DateAdded>
<TutName>Tut 1</TutName>
<Description>A little description</Description>
<Author>Jay</Author>
</row>
<row>
<DateAdded>10/09/2005</DateAdded>
<TutName>Tut 2</TutName>
<Description>A little description</Description>
<Author>Jay</Author>
</row>
<row>
<DateAdded>10/06/2005</DateAdded>
<TutName>Tut 3</TutName>
<Description>A little description</Description>
<Author>NGPixel</Author>
</row>
</data>

Live Example: (Click the button to retrieve data)