Bgx Xml Serialization Classes (Flash MX 2004) : Binding data to the Macromedia DataGrid Component

Flash output

This example corresponds with the file DatagridExample.fla that is supplied with the component. The following code loads the XML file sample.xml, parses it using the BgxDesObject class and then displays the page label and URL of the pages within the Weather webservice folder in an instance of the DataGrid component called dgPages.

//import the class
import bgx.BgxDesObject;

//global variable to hold deserialized sample data
var SampleData:Object;

//load xml from external file
var sampleXML:XML = new XML();
sampleXML.ignoreWhite = true;
sampleXML.onLoad = parseSampleData;
sampleXML.load("sample.xml");

//parse sample data
function parseSampleData() {
    var rootNode:XMLNode = sampleXML.firstChild;
    SampleData = new BgxDesObject();
    SampleData.xmlNode = rootNode;
    SampleData.onParsed = populateGrid;
    SampleData.parse();
}

function populateGrid(){
    //identify the pages in the "Weather webservice" folder as the data
    //to be bound to the grid
    var pagesArray = SampleData.folder[1].folder[0].page;
    //identify the attributes that shall appear in the columns
    dgPages.columnNames= ["label", "URL"];
    //define some display parameters
    dgPages.getColumnAt(0).width = 170;
    dgPages.getColumnAt(0).headerText = "Page";
    dgPages.getColumnAt(1).headerText = "URL";

    //define an event listener that loads the page URL
    //when a row is clicked upon.
    var dgListener = new Object();
    dgListener.cellPress = function(event) {
        //you can use the itemIndex that is submitted by the event
        //to identify the page data within the SampleData Object
        var itemData = pagesArray[event.itemIndex];
        //you could also use:
        //var itemData = SampleData.folder[1].folder[0].page[event.itemIndex];
        //var itemData = dgPages.dataProvider[event.itemIndex];
        getURL(itemData.URL);
    };
    dgPages.addEventListener("cellPress", dgListener);

    //lets sort the data on the page name before binding it
    pagesArray.sortOn("label");
    //bind the data
    dgPages.dataProvider = pagesArray;
}

Note: In this example the local variable pagesArray is assigned to SampleData.folder[1].folder[0].page and later defined as dgPages.dataProvider. This means that there are now three different ways to access the very same data with the connection to the SampleData object always alive. This means e.g. if you use the local variable to change a value like

pagesArray[1].label = "Datatest";

also SampleData.folder[1].folder[0].page[1].label will now have the value "Datatest". This way you can build handy "DataHolders" to access and modify data, but when you want to save the changes you could simply use the BgxSerObject class to re-serialize the SampleData object which will produce an XML document reflecting all the changes you made.

For further information please contact info@bgxcomponents.com.