2 Replies Latest reply on Aug 17, 2010 2:05 AM by Abhin S

    How to add child

    Abhin S

      I am writing a code in which  i want to add child components i.e HBox6 to HBox4 on the click event of link button4

       

      code:

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application

      xmlns:fx="http://ns.adobe.com/mxml/2009"

          xmlns:mx="library://ns.adobe.com/flex/mx"

          xmlns:s="library://ns.adobe.com/flex/spark"

          >

       

        <mx:states >

          <mx:State name="si"/>

          <mx:State name="re"/>

          <mx:State name="de"/>

          <mx:State name="addchild"/>

        </mx:states>

       

        <fx:Script>

          <![CDATA[

            import mx.controls.Alert; 

            import mx.core.Container;

       

            public function myLabelFunc(item:Object):String

            {

                   return item.firstName + " " + item.lastName;

            }

            public function myLabel1Func(item:Object):String

            {

                   return item.firstName ;

            }

       

              ]]>

        </fx:Script>

       

       

      <mx:VBox

           id="VBox1"

           top="10" 

           borderSkin="skin.AppSkin">

         

         <mx:HBox

               id="HBox1"

                 horizontalAlign="center">

            

                <mx:ComboBox

                        id="ComboBox1"

                        includeIn="si"

                        labelFunction="myLabelFunc"

                        labelField="name"

                        prompt="Subject"

                        width="180" height="20">

                 <mx:dataProvider>

                 <mx:ArrayCollection>

                  <fx:Object firstName="Abhinav" lastName="Somal"/>

                  <fx:Object firstName="Adit" lastName="Kumar"/>

                  </mx:ArrayCollection>

                </mx:dataProvider> 

              </mx:ComboBox>

       

              <s:TextInput

                     id="textinput1"           

                  includeIn="re"

                  width="180" height="20"/>

       

              <mx:LinkButton

                  id="linkbutton1"

                   label="New Template"

                      click="currentState = 're'"

                      includeIn="si"/>

       

              <mx:LinkButton

                     id="linkbutton2"

                     label="Clear"

                     includeIn="si"/>

                 

             </mx:HBox>

       

             <mx:HBox

               id="HBox2"

               horizontalAlign="center">

       

              <mx:ComboBox

              id="ComboBox2"

              includeIn="si"

              labelFunction="myLabel1Func"

              labelField="name"

                prompt="Filter Class"

                  width="180" height="20">       

                  <mx:dataProvider >

                  <mx:ArrayCollection>

                  <fx:Object  />

                  <fx:Object firstName="B" />

                  </mx:ArrayCollection>

                  </mx:dataProvider>

       

              </mx:ComboBox>

                 

             

              <mx:LinkButton

              id="linkbutton3"

              label="New Filter Class"

              includeIn="si"

              click="currentState = 'de'" />

             

             </mx:HBox>

             <mx:HBox

              id="HBox3"

              horizontalAlign="center">

       

              <s:TextArea

              id="textarea"

              excludeFrom="de,addchild"

              text="The selected item is: {ComboBox1.selectedItem.firstName + ' '

              + ComboBox1.selectedItem.lastName};"/>

       

       

                <mx:Button

                     id="Button1"

                     label="Check Message"

                     includeIn="si"

                   click="Alert.show('Check Message Button is pressed','Alert Box',Alert.OK)" />

       

             </mx:HBox>

       

             <s:TextInput

                       id="textinput2"           

                      excludeFrom="re,si"

                  width="180" height="20"/>

       

            <mx:HBox

                id="HBox4"

                horizontalAlign="center">

                  <s:TextInput

                       id="textinput3"

                       excludeFrom="re,si"

                       width="50" height="20"/>

            

             <s:TextInput

             id="textinput4"

             excludeFrom="re,si"

             width="122" height="20"/>

            

             <mx:LinkButton

             id="linkbutton4"

             label="Add New"

             excludeFrom="re,si"

             click="currentState = 'addchild' ;

             "/>

            

             </mx:HBox>    

       

             <mx:HBox

             id="HBox6"

             horizontalAlign="center">

           <mx:TextInput

                id="textinput5"

                includeIn="addchild"

                width="50" height="20"/>

           <mx:TextInput

                id="textinput6"

                includeIn="addchild"

                width="122" height="20"/>

       

              </mx:HBox>  

         

              <mx:HBox

                id="HBox5"

                horizontalAlign="center">

       

           <mx:Button

                excludeFrom="de,addchild"

                id="Button2"

                label="SEND" 

                click="Alert.show('Send Button is pressed','Alert Box',Alert.OK)"/>

       

           <mx:Button

                id="Button3"

                label="Create"

                includeIn="de,addchild"

                click="Alert.show('Create Button is pressed','Alert Box',Alert.OK)"/>

       

           <mx:Button

                id="Button4"

                label="Cancel"

                click="currentState = 'si' ;

                Alert.show('Cancel Button is pressed','Alert Box',Alert.OK) "  />

       

         </mx:HBox>

       

      </mx:VBox>

       

      </mx:Application>

       

       

      Thnks...in advance

        • 1. Re: How to add child
          VRPDeveloper Level 3

          Then define hbox6 in state addchild... From your code it simple indicates that hbox 6 is already defined in base state... so there will be no effect...

           

          For EG

           

          <mx:State name="addChild">
                      <mx:AddChild relativeTo="{hbox4}" position="lastChild">
                         <mx:HBox

                 id="HBox6"

                 horizontalAlign="center">

           

           

           

             
                      </mx:AddChild>
                      <mx:AddChild relativeTo="{canvas1}" position="lastChild">
                          <mx:TextInput

                    id="textinput5"

                    includeIn="addchild"

                    width="50" height="20"/>


                      </mx:AddChild>

                 <mx:AddChild relativeTo="{hbox4}" position="lastChild">

                     <mx:TextInput  id="textinput6" width="122" height="20"/>

                 </mx:AddChild>
                
                  </mx:State>

           

          Just given you sample you can make it in this way...


          If this post answers your question or helps, please kindly mark it as such.

          • 2. Re: How to add child
            Abhin S Level 1

            thnks for ur reply

            but by doing like this following error is ocurring:-

            State overrides may no longer be explicitly declared. The legacy states syntax has been deprecated in flex