Macromedia Flex DataGrid Example
Mar 14
Now that I have my non-commercial Flex license kickin’, I’m going to start providing some in depth information about Macromedia Flex. I plan on starting simple over the next few weeks and lead into some more complex RIA’s. I think it makes sence to demonstrate the flexibility of the Flex classes and components in standalone mode before throwing them together to build a robust RIA.
Let’s start with a simple Datagrid component and see how to populate it with a few users contained in an xml file. Here’s the output:
Now the truly amazing part is that I generated the above datagrid without ever opening the Flash IDE. Let’s take a quick look how. A file with a .mxml extension is compiled by Flex down to .swf bytecode. This is done when a request is made to the .mxml file. Another option is to compile the file from the command line which can be a tremendous help when implementing an automated build process (more on this in a future post).
So the .mxml file contains the following code:
Notice that the “Model” or “data” for the datagrid is stored in the users.xml file which looks like:
A binding is created telling the datagrid to map each user node to a row in the datagrid. Each childnode (name, phone, email) is then mapped to a column. This is a very basic example but goes to demonstrate how powerful this Flex presentation server really is.
If you have some experience with the Flash IDE then you’ll know that building the above example would take a bit more work. You’d have to drag the component to the stage, give it an instance name, load and parse XML, and set the dataprovider. I’m not complaining because this is the way I’ve always developed in Flash. But I’m also trying to be very open-minded in realizing the power of Flex and knowing this is an extremely powerful tool for building RIAs.
