Dynamic addition of  MXML Component

Is it possible to add an MXML component through an ActionScript.
I have a situation where I display multiple checkboxes and on click of each I show a subform. I am planning to make that subform as MXML component and add/remove it based on the user's checking/unchecking the checkbox..Is this possible?
Thanks
Dharmesh

Hi Ben ..
     Appreciate your quick response. This is my first Flex app. In a nut sheel here is a sample similar to what I am trying to achieve.
Consider my Mxml component as follows
<?xml version="1.0" encoding="utf-8"?>
<!-- myComponents/TempComponent.mxml -->
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
    <mx:Button label="Hey there from component"/>
</mx:Canvas>
Now here he my app mxml file
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:temp="mycomponents.*">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            public function addRemove():void{
                //How do i add that component to the Panel?
        ]]>
    </mx:Script>
     <mx:Checkbox id="cb" change="addRemove()" label="Check or Uncheck"/>
     <mx:Panel  id="testPanel" x="0" y="0" width="100%" height="200" layout="absolute" borderThickness="0" borderThicknessBottom="0"/>
Can you guide me what should go in the listener to add the component to the panel?

Similar Messages

  • Loading MXML Component Dynamically

    Hi all,
    I am new to Flex and was trying out small things . I created
    a MXML Application and also MXML components.
    I tried loading MXML component to application using xmlns and
    it worked fine.(
    <mx:Application xmlns:mx="
    http://www.adobe.com/2006/mxml"
    layout="absolute" backgroundColor="#ffffff" xmlns:mi="com.*">
    <mi:base1 id="base1" />
    <mi:base2 id="base2" />
    This method is ok if we are loading 3-4 components .
    but , if i have to load a mxml component dynamically how do I
    do it?
    for example ,if base1 and base2 are two components and i want
    to load them based on some event performed.
    I have tried the method which uses ViewStack and code
    myViewStack.selectedChild=Container(myViewStack.getChildByName(selectedNode))
    ,where each child will have one component declared or initialized.
    Following this method is not a feasible when we have hundred
    of components to be loaded.
    Can anyone help me on this??

    "srirama.83" <[email protected]> wrote in
    message
    news:gpkoui$g3u$[email protected]..
    > Hi all,
    > I am new to Flex and was trying out small things . I
    created a MXML
    > Application and also MXML components.
    > I tried loading MXML component to application using
    xmlns and it worked
    > fine.(
    > <mx:Application xmlns:mx="
    http://www.adobe.com/2006/mxml"
    > layout="absolute"
    > backgroundColor="#ffffff" xmlns:mi="com.*">
    > <mi:base1 id="base1" />
    > <mi:base2 id="base2" />
    > )
    > This method is ok if we are loading 3-4 components .
    > but , if i have to load a mxml component dynamically how
    do I do it?
    > for example ,if base1 and base2 are two components and i
    want to load them
    > based on some event performed.
    >
    > I have tried the method which uses ViewStack and code
    >
    myViewStack.selectedChild=Container(myViewStack.getChildByName(selectedNode))
    > ,where each child will have one component declared or
    initialized.
    >
    > Following this method is not a feasible when we have
    hundred of components
    > to
    > be loaded.
    > Can anyone help me on this??
    >
    >
    http://www.magnoliamultimedia.com/flex_examples/Amys_Flex_FAQ.pdf
    Q4

  • Dynamically add custom MXML components in Actionscript

    As there's no constructor for custom MXML components, how to
    dynamically add it as a child using ActionScript?
    I'm looking for some alternative to avoid the need to rewrite
    the entire existent component in ActionScript just to add it this
    feature (a constructor). PopManager is not an alternative...
    Is there any way?
    The case/situation:
    I have a custom MXML component that needs to be dinamically
    added to a NativeWindow created using ActionScript.
    Thanks a lot!
    Vicente Junior
    Independent Web Developer
    http://teclandoalto.blogspot.com

    mxml classes get generated into AS classes with a default
    constructor.
    In fact, there is essentially no difference between an AS
    component and an mxml component, they can be used exactly the same
    way.
    Tracy

  • Open MXML component + button click

    Hi,
    I have an MXML component within my Flex 2 Application, and
    within this component I have a button which when clicked, I want to
    "go / link to" (open) another MXML component.... e.g.:
    <mx:Application.......>
    <mx:panel............>
    <mx:button label="open other page" click="open the other
    MXML component etc..."/>
    </mx:panel>
    </mx:Application>
    Additionally I want to be able to pass a variable (on the
    same button click) to the component that is being opened on the
    button click, and use this variable within the second
    component......
    Could anyone suggest the best method of going about this?
    Thanks,
    Jon.

    In general all of the components of an application are
    created at start up. You then use view states and navigation
    containers to display the component when needed. If you want to
    create a component then check out this subject 'Creating deferred
    components' in the docs. Primarily you worry about deferred
    creation of objects if you want to reduce the file size of your
    swf. View states would be one way to handle the display of the
    components.

  • Loading an "MXML Component" at run-time creates a null object.

    Hello!
    I have a simple Flex 3 project with an MXML application file (the parent) and an MXML component file (the child).
    At run-time I create childs of this component, and I add it to the stage using a simple "this.addChild()" call.
    Now, besides that, in the creation loop, after every
      newChild = new mcComp();
    I want to setup a few more custom parameters which belongs to this class. For example, now I want to set a label's text, this label is at the child.
    The issue is that the label isn't created until I exit the creation function, and actually, until my code returns control to the Flash Player.
    See my problem here?
    With custom classes which resides at .AS files, when I instantiate them with the "new" operator, they run their constructure's code and eveything is fine.
    But, when I do the same with those MXML components (which by the way are based over the Canvas class), their constructure do not execute and actually no other child of them is created.
    Can anyone please advise? I must be missing some keyword here.. hopefully.

    Hi Natasha thanks,
    The issue is that the creationComplete event doesn't dispatch even when I addChild() the object.
    var child:mcChild = null;
    for(var i:int; i < 3; i++)
         child = new mcChild();
         // setting some properties, labels' text etc'
         this.addChild(child);
    Try this and you'll see - the event doesn't dispatch until you got out of the code flow.
    Anyway after looking at Flex's documentation I solved it differently;
    After the addChild() call the child receives an "initialize" event. After that I could modify my label.
    Thank you though!

  • Interface not found in implements-attribute for MXML component

    Hi,
    I am trying to use the "implements" attribute for an
    MXML-component in order to implement an interface from a library
    like below (Flex 3). I get the error "Interface IClonable not
    found". The compiler does not complain about " import
    com.yworks.support.IClonable;", so the library is installed
    correctly. I use the library in many places in my project, it just
    does not find it in the "implements" tag. How can I fix this
    without reimplementing the component in ActionScript?
    <?xml version="1.0" encoding="utf-8"?>
    <mx:VBox xmlns:mx="
    http://www.adobe.com/2006/mxml"
    implements="com.yworks.support.IClonable">
    <mx:Script>
    <![CDATA[
    import com.yworks.support.IClonable;
    ]]>
    </mx:Script>
    </mx:VBox>

    "mavdzee" <[email protected]> wrote in
    message
    news:gldjg8$js8$[email protected]..
    > Hi,
    >
    > I am trying to use the "implements" attribute for an
    MXML-component in
    > order
    > to implement an interface from a library like below
    (Flex 3). I get the
    > error
    > "Interface IClonable not found". The compiler does not
    complain about "
    > import
    > com.yworks.support.IClonable;", so the library is
    installed correctly. I
    > use
    > the library in many places in my project, it just does
    not find it in the
    > "implements" tag. How can I fix this without
    reimplementing the component
    > in
    > ActionScript?
    >
    >
    > <?xml version="1.0" encoding="utf-8"?>
    > <mx:VBox xmlns:mx="
    http://www.adobe.com/2006/mxml"
    > implements="com.yworks.support.IClonable">
    >
    > <mx:Script>
    > <![CDATA[
    >
    > import com.yworks.support.IClonable;
    >
    > ]]>
    > </mx:Script>
    >
    > </mx:VBox>
    I don't see anything where you're actually _implementing_ the
    interface, but
    I'd expect to see a different error if that's the problem.
    Still, I'd go
    ahead and implement the properties and methods in the
    interface, just to
    make sure.
    HTH;
    Amy

  • Event Fired when a mxml component is shown on screen

    hello,
    I have following application structure nested up to 2/3 level.
    Application
         linkbar connected to viewstack
         viewstack
              NavigatorContent
                   mxml Component
              NavigatorContent
                   mxml Component
    mxml componet in turn has similar structure
    componet
         linkbar connected to viewstack
         viewstack
              NavigatorContent
                   mxml Component
              NavigatorContent
                   mxml Component
    and end component is form which is shown and actions performed
    I want to execute specific code when the form is first time shown
    which will collect data from server and will show for further actions.
    User will edit/delete/update data with various button clicks.
    I tried activate event on end component but it seems that it wont get
    fired at all. End components are enclosed in BorderContainer or Group.
    To test activate event I have used Alert.show only but popup is not shown
    when I select link button on penutimate linkbar.
    If I am doing something wrong please let me know as well please
    guide me which event shall I use so that whenever linkbutton is
    pressed on linkbar it will fire that event. In that event I can check
    whether it has been called earlier by checking some variable which
    will be null in creation complete and set in event fired when linkbutton is pressed.
    Thanks and regards
    Raja

    I think 'creationComplete' is the closest event to what you are looking for.

  • How to create custom MXML component accepting other MXML componenents as children

    How can I create an MXML component that when I use it in the "main" MXML, accepts other MXML components...
    For example:
    <s:WindowedApplication>
         <myComponent>
              <otherMXMLcomponent></otherMXMLcomponent>
              <otherMXMLcomponent></otherMXMLcomponent>
              <otherMXMLcomponent></otherMXMLcomponent>
              <otherMXMLcomponent></otherMXMLcomponent>
         </myComponent>
    <s:WindowedApplication>
    How do you declare such a component?
    Thanks in advance

    Bhè non so se ho capito .. ti spiego la prova che ho fatto io.. Dunque, io ho provato a creare un mio componente Custom e a metterci dentro degli oggetti miei di esempio.. Il componente di esempio si chiama mioComponenteCustom e all'interno è strutturato in questo modo:
    <?xml version="1.0" encoding="utf-8"?>
    <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">
    </s:Group>
    Al posto dei puntini ci metto quello che voglio.. nel tuo caso i tuoi 2 famosi pulsanti..
    All'esterno chiamerò :
    <mioComponenteCustom>
         <s:DataGrid>
         </s:DataGrid
    </mioComponenteCustom>
    Dove DataGrid è un componente a caso qualsiasi.. Ora, con questa struttura non ricevo errori e sembra andare bene..
    Dimmi se ho capito bene o volevi fare altro..
    Max

  • Dynamic datatable in custom component

    hi all,
    i'm working on a custom jsf component and this component will create a datatable dynamically. (you can see component details from http://www.jroller.com/page/hasant?entry=creating_dynamic_datatable_inside_of AND http://www.jroller.com/page/hasant?entry=jsf_question_for_community_what)
    the question is; when i want to add a selection column(dynamically), how can i handle its selected values?
    i mean, if i have created this datatable in a page with designer, i would bind an Integer[] to that selection column's checkboxes. But i have to add this selection column dynamically from my component. So, how can i GET and SET the selection columns values. Since this is a custom component, there is no backing bean for value binding to this component.
    when i resolve the request param string to get the selected rows, it's working(=i can see the selected rows somehow..) but, i can not set that values again while encoding that column after a submit.
    here is my row selection column encoding code;
         private void addSelectionColumnToTable(FacesContext context, UIData table) {
              UIColumn column = new UIColumn();
              HtmlInputRowSelect rowSelect = new HtmlInputRowSelect();
              rowSelect.setId("rowSelect1");
              rowSelect.setStyleClass("inputRowSelect");
              rowSelect.setValue(m_selectedRows);
              column.getChildren().add(rowSelect);
              table.getChildren().add(column);
         }In the code above, rowSelect.setValue(m_selectedRows); part not effecting anyhing. m_selectedRows variable includes row numbers(in an Integer array) that i want to see as selected.
    any solution/recommendation?

    Well if you are still interested in using a text component
    instead of a Button the way you would go about this is using
    textWidth. Here's how I've done it before using a text / label
    whatever you want that shows text.
    // => Set our text we got from database
    myText.text = "This is the text I got from the DB";
    // => Validate it so that way we make sure we get right
    numbers
    myText.validateNow();
    // => Find out how wide our text really is.
    var textWidth:Number = myText.textWidth
    // => Reset the width of our text component and add 20 for
    a little buffer
    myText.width = textWidth + 20;
    Now my suggestion is if your going to be dynamically creating
    these on the fly from a database call you throw it into a method /
    class and have that do all the work for you so all you have to do
    is pass the text to it and it resizes itself based on the example
    above.

  • How to import MXML Component in ActionScript

    Hello,
    I'm having a structure similar to this:
    root
       - components
           - subcomponents (MyCustomMXMLComponent)
       - views
    In views package I have a piece of AS where I want to instantiate an MXML Component from subcomponents.
    In Views:
    var data:DisplayObjectContainer=new components.subcomponents['MyCustomMXMLComponent'];
    But that throws an error.
    I need a syntax similar to the one above because I'm running a for loop and changing data variable to be a new MXML component on each iteration.
    Any idea how I can solve this?
    Thank you.

    OK, so:
    var length:int=arrSubcomponents.length;
    for(var i:uint=0;i<length;i++)
              //Decide parent
              var parent:IVisualElementContainer;
              if(arrSubcomponents[i].group && arrsUbcomponents[i].group==1){parent=firstGroup;}
        else{parent=secondGroup;}
              //Add to parent
              var childClassName:String='components.subcomponents.'+arrsUbcomponents[i].className;
              trace(childClassName);//So far so good the path is correct, I checked.
              var childClass:Class=Class(getDefinitionByName(childClassName));
              trace(childClass);//It breaks here with the error below
              var child:IVisualElement=new childClass() as IVisualElement;
              trace(child);
              parent.addElement(child);
    The error:
    ReferenceError: Error #1065: Variable FirstCustomMXMLComponent is not defined.
              at global/flash.utils::getDefinitionByName()

  • Mxml component application

    Hi all,
    I am converting a asp.net website to Flex, I have five web pages which I designed as Five mxml components have buttons, grid, combos, text boxes etc.
    my question is how do I move between these pages they are distinct in there looks and functionality. I read a lot about view states and I am confused whether view states will solve my issue.
    Please tell me how do we handle this usually in flex applications.

    Hi,
    Flex 4 or Flex 3 the answer remains the same, I have a state for each form then I place a container, be it a group a canvas or a panel, in each state to show how states work, the following is in flex 3
    The Application
    ============
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" currentState="form1" xmlns:ns1="*">
    <mx:states>
    <mx:State name="form1">
    <mx:AddChild position="lastChild">
    <ns1:form1 horizontalCenter="0" verticalCenter="0">
    </ns1:form1>
    </mx:AddChild>
    </mx:State>
    <mx:State name="form2">
    <mx:AddChild position="lastChild">
    <ns1:form2 horizontalCenter="0" verticalCenter="0">
    </ns1:form2>
    </mx:AddChild>
    </mx:State>
    <mx:State name="form3">
    <mx:AddChild position="lastChild">
    <ns1:form3 horizontalCenter="0" verticalCenter="0">
    </ns1:form3>
    </mx:AddChild>
    </mx:State>
    </mx:states>
    <mx:Button label="Form 1" click="currentState='form1'" top="10" horizontalCenter="-150"/>
    <mx:Button label="Form 2" click="currentState='form2'" top="10" horizontalCenter="0"/>
    <mx:Button label="Form 3" click="currentState='form3'" top="10" horizontalCenter="150"/>
    </mx:Application>
    The Mxml Component Container (which is exactly what you said you had)
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" title="First Form">
    </mx:Panel>
    You can navigate through your 'pages' however you want to, the first example I offered is pure flex the above code is pure flex only using the antiquated sdk which I would advise against for 'new' projects, flex 3 sdk maybe used in flashbuilder but I would only go to this for legacy purposes using the flex 4 sdk is by far the better option.
    I try to help where I can, there is no reward for doing this, but I did answer your initial question about states, I hope you get to understand flex a little better with time.
    David.

  • How to add interface to customlize MXML Component when use Flex Builder 3?

    How to add interface to customlize MXML Component when use
    Flex Builder 3?

    David,
    I don't believe you can add the interface via the creation
    dialog in FlexBuilder 3. You can always manually add the
    "implements" property to your MXML Component root tag. Something
    like this: <mx:VBox implements="com.mycorp.IMyInterface">
    If you want autogeneration of the interface, then create an
    ActionScript class with that interface and then copy the generated
    functions and setter/getters into the script block of your MXML
    component.

  • How to extend an AS3 class in an MXML Component

    Hello,
    I have a few MXML Components based on the Spark Group.
    They all use MXML for layouta and AS3 for logic.
    They all have the same logic and I would like all to extend an AS3 class to have the same methods and properties isteand of declaring the same exact ones for each MXML Component.
    How can this be done please?

    Hm, no, I'm not explaing this properly.
    I have an MXML component based on the Spark Group.
    It has a few form elements.
    There are many such components.
    I want all to have two public methods: getData() and setData() which get and set data from and to the input elements.
    I don't want to write the exact same method for all of them.
    I would like to at least interface the MXML components with an AS3 class forcing them to have those 2 methods.

  • Add change event to a custom MXML component

    I am building an MXML project in Flash Builder 4.5
    I have a custom MXML component that contains a TextInput field. I want the custom component to have a change event that triggers a function in the main application.
    I created a test project to try and solve this.  At the moment, it appears to trigger an event once and then stops.  Please take a look and let me know where I am going wrong. Many thanks.
    customComponent.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
               width="40" height="20">
        <mx:Script>
        <![CDATA[
            [Bindable]
            public var value:Number;
            protected function inputBox_clickHandler(event:KeyboardEvent):void
                if (event.keyCode == 38 ) {
                    keyUp();
                if (event.keyCode == 40 ) {
                    keyDown();
            protected function keyUp():void
                value = value++;
                dispatchEvent(new Event('change'))
            protected function keyDown():void
                value = value--;
                dispatchEvent(new Event('change'))
        ]]>
    </mx:Script>
    <mx:Metadata>
        [Event(name="change", type="flash.events.Event")]
    </mx:Metadata>
    <mx:TextInput id="inputBox" x="0" y="0" width="40" height="20"
                  text="{value}"
                  keyDown="inputBox_clickHandler(event)"
                  change="dispatchEvent(new Event('change'))"
                  />
    </mx:Canvas>
    main.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:CustomComponents="CustomComponents.*"
                minWidth="955" minHeight="600" layout="absolute">
    <mx:Script>
        <![CDATA[
            private function changeTestLabel():void
                testLabel.text = String(myComponent.value);
        ]]>
    </mx:Script>
    <CustomComponents:customComponent x="180" y="183"
        id="myComponent" value="0"
        change="changeTestLabel()">
    </CustomComponents:customComponent>
    <mx:Label id="testLabel" x="165" y="206" text="Test label"/>
    </mx:Application>

    I have found the solution to this...
    The clue was that it worked the first time a change was made, changing the value to the default '0'.
    The problem was that the var value is type Number and the inputBox.text is type String.
    I therefore added the following function:
      protected function textChange():void
       value = Number(inputBox.text);
       dispatchEvent(new Event('change'))
    I also changed the  change="dispatchEvent(new Event('change'))"  property to
       valueCommit="textChange()"
    ... and that fixed it..
    Thanks to all those who took the trouble to look at this

  • Refer to mxml component within the same package

    Hello
    How can I refer to the same mxml component both of which live in the same package?  For example, I have myHbox and myTabNav in the same package named ui.  I am already referring to the myHBox mxml class in the Application class through the line: xmlns:ui="ui.*" and that works fine.  However, I want to use myTabNav within the myHBox mxml component?
    Thanks in advance,
    K4Flex

    You can use the same namespace xmlns:ui="ui.*" in the myHbox.mxml too.

Maybe you are looking for

  • Page orientation in key note

    how do i change key note page format from landscape to portrait?

  • How to using the script tag in uix/jsp?

    Do i have to write in uix/jsp: <uix:rawText> <script type="text/javascript"> function doCheckForm() </script> </uix:rawText> Or exists another tag that handles the javascripts without the "rawText" script? Marc

  • HELP!!! Why does my music play through my speakers...

    Hey i was just windering if i could get some help. When ever i start a skype call my music starts playing through my speakers instead of my headset and i dont know why. Subject/title edited to add detail.

  • My Pavilion Dv-6 won't turn on. Power dissipated already.

    Hi everyone, My Pavilion dv-6 just won't turn on. I don't know why. It was never treated differently prior for this to happen. Turned the laptop off just as usual. I tried dissipating the remaining power already using the infamous method, by removing

  • Swing popup to close after X seconds

    How to show an another window (a popup or something) in main swing window which will close after about 10 seconds?