Java Flash Web Application need example of dynamic widgets

Question

Most definitely.

Reading the XML

var myLoader:URLLoader = new URLLoader();
myLoader.load(new URLRequest("ui.xml"));
myLoader.addEventListener(Event.COMPLETE, processXML);

function processXML(e:Event):void {
    var xml:XML = new XML(e.target.data);
    trace(xml.layout.widget[2].attribute.@value); // traces "picker.swf"
}

Reading an xml object is a lot like reading any other hierarchy, utilizing dot.notation, bracket[indexes], but with an added @attribute identifier for accessing properties on a node. It's also a little weird, as just identifying (generically) xml.layout.widget would in-fact return every instance of widget and its contents as a string.

Read these for thorough documentation:

Republic of Code: AS3 XML

Adobe Actionscript 3 Reference: XML

Rendering

Rendering those widgets is a matter of how you interpret the data. Technically, you could try a limited amount of HTML rendering via htmlwrapper or htmlText, but I doubt you'd want to go that way. More likely, you'll create your own representations of Widgets in Flash, and define generic deviations of those widgets in XML.

Consider the following XML:

<?xml version="1.0" encoding="utf-8"?>
<layout>
    <widget
        kind="Spinner"
        name="Alpha"
        color="0xFF0000"
        x="100"
        y="100"
        width="50"
        height="50"
        file="foo.jpg" />
    <widget
        kind="Slider"
        name="Beta"
        color="0x0000FF"
        file="bar.swf" />
</layout>

We could then implement two classes: Spinner and Slider which have predefined properties and event listeners.

package {
    import flash.display.*;

    public class Spinner extends Sprite {
        private var defaults:Object = {
            "x":10,
            "y":10,
            "width":50,
            "height":50,
            "color":0x000000
        };



        public function Spinner(settings:Object = null) {
            // Store the settings passed for any present defaults
            for (var attribute:String in settings) {
                if (defaults.hasOwnProperty(attribute)) {
                    defaults[attribute] = settings[attribute];
                }
            }

            // Update the appearance to match the settings.
            with (defaults) {
                graphics.beginFill(color, 1);
                graphics.drawRect(x, y, width, height);
                graphics.endFill();
            }

            if (settings.hasOwnProperty("name")) {
                this.name = settings.name
            }
        }
    }
}

When we read the XML, we'd go through each node and pull up the attributes of that node and apply it to the class constructors...

function processXML(e:Event):void {
    var layout:XML = new XML(e.target.data);

    for each (var widget:Object in layout) {
        switch (widget.kind) {
            case "Spinner":
                addChild(new Spinner(widget))
                break;
            case "Slider":
                addChild(new Slider(widget))
                break;
        }
    }
}

Disclaimer: accessing xml nodes this way is probably not correct. Consider it as psuedo-code. I always sanitize my xml as nested object/array hierarchies before using them, so I'm a little out of practice.

In short order, the XML dictates the appearance of our objects, but the Actionscript dictates what those objects are and when/how we add them to the screen.