Adding components dynamically using Action Script

Question

Just started learning Flex. But I am struck up with basic code. I am trying to check how to add components (say button) to the Application container by Action Script. But I am not able to see the buttons in the output. Below is my code,

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
             creationComplete="init()">
<fx:Script>
    <![CDATA[

             import mx.controls.Alert;

             import spark.components.Button;
             import spark.layouts.BasicLayout;

             private function init():void{
                 var bl:BasicLayout = new BasicLayout();
                 var app:Application = new Application();
                 var button1:Button = new Button();
                 var button2:Button = new Button();

                 button1.label ="Button one";
                 button1.x = 100;
                 button2.label = "Two";
                 button2.x = 30;
                 layout = bl;
                 addChild(button1);
                 addChild(button2);


             }
    ]]>
</fx:Script>
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>

What is the mistake I am doing here?

Thanks

maybe you should tell us what does not work ?

Adrian Pirvulescu
– Adrian Pirvulescu

2012-09-17 08:22:35 +00:00
Commented Sep 17, 2012 at 8:22 — Adrian Pirvulescu
– Adrian Pirvulescu, Commented Sep 17, 2012 at 8:22

RIAstar · Accepted Answer · 2012-09-17 09:12:55Z

4

This code should even throw a runtime error, because you're not allowed to use addChild here.
Since Flex 4 there is a new component set (called Spark). When adding visual items to Spark containers, you must use the addElement method. And since s:Application is a Spark container, you should do it here too. So simply replace addChild with addElement in your code and it will work.

You might ask: if I can't use it, why is "addChild" still there?
Well, the answer is: legacy. All Flex components (i.e. both mx and Spark) inherit from UIComponent, which implements the addChild method for the Flex framework (addChild is actually a pure ActionScript method of the DisplayObjectContainer class). addElement does some additional stuff (I won't get too technical here), which is why you can't use addChild anymore. But addChild is still there (inherited from UIComponent) and will throw an error telling you that you can't use this method.

This is the relevant code from SkinnableComponent:

override public function addChild(child:DisplayObject):DisplayObject
{
    throw(new Error(resourceManager.getString("components", "addChildError")));
}

answered Sep 17, 2012 at 9:12

RIAstar

11.9k22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

droidsites Over a year ago

Thanks. You are right. I checked it in debug mode and clearly said to use addElement instead of addChild. But not sure why it is and came to know the reason from ur answer now.

Josh Over a year ago

It's worth adding that the UIComponent addChild() method is not entirely useless at this point. For its children, it is. But you can use UIComponent to add Sprites or its children to a Flex UI, which is not possible using UIComponent children.

Guoliang · Accepted Answer · 2012-09-17 09:59:18Z

0

I'm not familar with BasicLayOut, but I think you can see the button if you keep the code simple:

 private function init():void{
            // var bl:BasicLayout = new BasicLayout(); 
            // var app:Application = new Application();
// 1. Create button
             var button1:Button = new Button();
             var button2:Button = new Button();
// 2. customize button
             button1.label ="Button one";
             button1.x = 100;
             button2.label = "Two";
             button2.x = 30;
// 3. add button into the container, 'this' is Applciation
           //  layout = bl;
             addElement(button1); // addChild for Flex3
             addElement(button2);
         }

Modify your code and try again, good luck!

edited Sep 17, 2012 at 9:59

answered Sep 17, 2012 at 8:19

Guoliang

8952 gold badges12 silver badges21 bronze badges

Collectives™ on Stack Overflow

Adding components dynamically using Action Script

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related