通过Flex中的ActionScript循环创建MXML组件

Question

I'm using Flash Builder 4.6 to create an app for a uni project. I have a custom Spark component, and I need to dynamically create a number of instances of that component at runtime depending on the number of XML elements returned via a PHP script.

That might be a bit confusing, so let me write the steps: 1) The application sends an HTTPService request to a PHP script hosted on the server. 2) The PHP accesses the SQL database and returns a series of XML data. 3) The ActionScript dynamically creates X instances of my custom Flex component, where X is the number of data in the XML.

Here's the code I've got so far (untidy because I'm trying to make it work):

ActionScript:

        [Bindable]
        public var holderArray:Array = new Array(100);

        public function createMenu(e:MouseEvent):void {
            var count:int = 0;
            var curMenuItem:menuItemContainer = new menuItemContainer();
            while (count < loadedMenu.length){
                curMenuItem.itemName = loadedMenu.getItemAt(count).name;
                curMenuItem.itemDesc = loadedMenu.getItemAt(count).description;
                curMenuItem.itemPrice = numForm.format(loadedMenu.getItemAt(count).price);                  
                curMenuItem.imageFile = loadedMenu.getItemAt(count).url;
                //curMenuItem.y = count * 120
                //menuItemGroup.addElement(curMenuItem);
                holderArray[count] = curMenuItem;
                count ++;
            }
            //testString = holderArray[1].itemName;
            var count2:int = 0;
            for each (var menuItem:menuItemContainer in holderArray){
                menuItem.name = "menuItem" + count2;
                menuItem.id = "menuItem" + count2;
                //testString += menuItem.name;
                menuItemGroup.addElement(menuItem);
                count2++;
            }
        }

MXML:

<s:VGroup id="menuItemGroup" x="40" y="150">
</s:VGroup>

What seems to be happening with that code is that each of my three XML data that get returned are being used in instances of menuItemContainer, but when each one is added to menuItemGroup, it's overwriting the one that's already there. I'm not sure if the item is actually getting overwritten, or if the new item is just sitting atop the earlier ones, but if the latter is true I can't find a way to arrange the components. I've tried setting menuItem.y in the loop (as a function of count2), but to no avail.

Thanks in advance for any and all suggestions/answers. Benjamin.

Answer 1

Put this line

var curMenuItem:menuItemContainer = new menuItemContainer();

inside your while loop. With your code as it is you are only creating one instance of menuItemContainer then continually changing the properties of that one menuItemContainer in your while loop. Instead you need to create a new, different instance of menuItemContainer with each iteration of the loop.