Skip to content

Generate UI from XML, and re-save modified updates

March 11, 2009

Alright, so we’ll be dynamically generating a UI interface from an XML. So I’ll show you the XML first:

<mx:XML id="xml_save">
   <checkbox id="ebay" enabled="true" description="eBay"/>
   <checkbox id="wikipedia" enabled="false" description="wikipedia"/>
   <checkbox id="pandora" enabled="true" description="pandora"/>
   <checkbox id="flexr" enabled="false" description="flexr"/>

Now for each of the shortcut node in the XML above, we’re going to create a checkbox for each of them, style it, then see whether its checked or not (and display it), and then add it to a VBox called ‘p_CheckContainer‘.

private function updateForm(xml_result:XML):void {
   for each (var node:Object in xml_result.checkbox) {
       var checkBox:CheckBox = new CheckBox();        // new checkbox for each node
       checkBox.setStyle('paddingLeft', 30);          // style it 
       checkBox.label = node.@description;            // add it's label
       checkBox.selected = TypeConverter.parseBoolean*(node.@enabled); // un/checked = node.@id;                        // identify it
   p_CheckContainer.addChild(checkBox);               // display it

* TypeConverter is a class with static public method parseBoolean which returns a true/false boolean.


Now, After we generated the UI from the XML, we want to save any changes, say for example, the user un/checked one of these checkboxes, and we want to resave the new XML with the appropriate values:

private function saveChanges():void {
   var _numCheckboxes:Number = p_CheckContainer.numChildren; // Number of CheckBoxes
   m_modifiedXML = <cfg></cfg>;                              // member var of type XML
   for (var i:Number= 0; i <= _numCheckboxes - 1; i++) {
       var _checkBox:CheckBox = p_CheckContainer.getChildAt(i) as CheckBox;
       var _newNode:XML = <shortcut/>;
           _newNode.@enabled = _checkBox.selected;
    trace ("m_modifiedXML: " + m_modifiedXML);


From → Uncategorized

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: