loading flex components using xml

Question

How to load flex components using XML. The scenario is simple as like this, i need three buttons to appear in my panel, but the option true or false whether to appear should be in xml.

Answer 1

You're not exactly clear in your question, so I'll answer in two ways:

1. You need to have an external MXML

In this case, you need to compile the XML file with mxmlc.exe (or just rename it to .mxml and include it in Flex Builder) and use the SWFLoader component to access the file. I don't have a lot of experience with SWFLoader, so I'll leave it up to you to look it up.

2. You need to set the properties of the components through an external XML

Create a HTTPService, assign an ID to it, and use the url property to point it to your XML file. Do not assign a result format. Then, use the result event and point to a function that will execute when your XML is done loading. It should look like this:

<mx:HTTPService id="service" url="myXml.xml" result="Foo (event)" />

Lets say myXml looks like this:

<properties>
    <button1Enabled>false</button1Enabled>
    <button2Visible>true</button2Visible>
    <button3Text>"TEXT"</button3Text>
</properties>

This is what your function Foo should look like. It will be executed when the HTTPServices finishes loading myXml.xml.

private function Foo (e : ResultEvent) : void {
    myButton.enabled = e.result.properties.button1Enabled; // false
    myOtherButton.visible = e.result.properties.button2Visible; // true
    myLastButton.label = e.result.button3Text; // "TEXT"
}

This function gets the result of service and assigns various buttons some properties as defined in the XML. Alternatively, you can also use service.lastResult to access the most recent result from anywhere in the script.

Hope this helps!

Answer 2

Check out appcorelib for some nice XML manipulation tools for load static xml and converting xml to objects.

Answer 3

//ActionScript code

import mx.controls.Menu; import flash.events.MouseEvent;

        private var menu12:Menu;

        private function init():void {
            menu12 = new Menu();
            menu12.labelField = "@label";
            menu12.dataProvider = xmlDP;
            menu12.showRoot = false;
            menu12.width = popUpButton.width;
            popUpButton.popUp = menu12;
        }

// XML Info

        <menu1 label="Some introduction" />
        <menu2 label="Disabled State (disabled)." enabled="false" />
        <sep1 type="separator" />
        <menu3 label="parent">
            <menu4 label="child1" />
        </menu3>
        <menu5 label="parent (disabled)" enabled="false">
            <menu6 label="child1" />
            <menu7 label="child2" />
            <menu8 label="child3" />
        </menu5>
        <menu9 type="separator" />
        <menu10 type="separator" />
        <menu11 id="leftButton" label="Left" type="radio" groupName="radioGroup" toggled="true" enabled="true"  />
        <menu12 id="rightButton" label="Right" type="radio" groupName="radioGroup" enabled="false" />
        <menu13 id="popupButton" label="Popup" type="radio" groupName="radioGroup" enabled="false" />

    </root>

// component

<mx:PopUpButton id="popUpButton"
            label="Please select an item"
            openAlways="true"
            creationComplete="init();" />

Thanks for your help Aethex. Now how come i would addevents to the menus in the popupButton.

Answer 4

I'm not sure what you mean, but do you want to add event listeners to menus?

In that case, just add:

menu12.addEventListener (event, eventHandlerFunction);

Example:

menu12.addEventListener (MouseEvent.CLICK, menu12Clicked);

Flex automatically passes the event into the menu12Clicked function as an argument. If you wanted to have multiple arguments, you would use:

menu12.addEventListener (MouseEvent.CLICK, function (e : MouseEvent) : void {
    menu12Clicked (e, "argument");
});

I've no experience with PopUpButtons, but what you have in your code should work, although I assume that xmlDP points to the tag menu12. I'm also assuming that "@label" points to the label field defined inside the menu12. Personally, I like to nest my XML, so I wouldn't know what the "@label" is supposed to do. If you had the label nested inside the menu12 tag, you would use xmlDP.label.