Displaying components dynamically.

Question

Hi All,
   I don't know how to fix this problem in Flex.
   I'm having questions and its responses in combo box.
   The main question is Q1 and user selects response as 'Yes' then I need to display 3 more questions. Those are Q2,Q3,Q4.
   When user selects response as 'I Dont Know' in Q3 then I need to display Q3.1 similarly for Q4 response is 'I Dont Know' then need to display Q4.1
   When user changes Q1 response to other than 'Yes' then I shouldn't display any of these questions.
   I tried adding all these questions in HBOX inside VBOX, but when it is showing initially all Q2,Q3,Q3.1,Q4,Q4.1 will be visible set to 'false' because of this it is leaving some much space and showing 'Submit' button.
  How to show these questions dynamically without pre-occupying spaces.
   Please find my code in attachment.
  Thanks in advance.
Regards,
Sharath.

Answer 1

I tried using states and found one small issue. I didn't know how to resolve this issue
say I defined states as follows
<mx:TitleWindow x="29" y="67" width="90%" height="685" layout="absolute" title="Create A New Report" fontWeight="normal" fontSize="13">
     <mx:Canvas width="787">
     <mx:VBox width="768">
         <mx:HBox>
             <mx:Label text="Information: " fontSize="12" fontWeight="bold" color="#34B05D"/>
         </mx:HBox>
         <mx:HBox>
             <mx:Label text="Report Type: " fontWeight="normal"/>            
         </mx:HBox>             
         <mx:HBox>
             <mx:Label  text="First Name:" fontWeight="normal"/>
             <mx:TextInput id="first_name"/>
             <mx:Label  text="Last Name:" fontWeight="normal"/>
             <mx:TextInput id="last_name"/>
         </mx:HBox>        
         <mx:HBox id="h1">
             <mx:Text  text="Question 1:" fontWeight="normal"/>
            <mx:ComboBox  width="152" id="Q1" dataProvider="{sel_list}" change="bb_service()" ></mx:ComboBox>
            <!--<mx:Button label="Change State" click="currentState = currentState=='NewButton' ? 'NextButton':'NewButton';"/>-->
         </mx:HBox>                
        <mx:HBox>
            <mx:Button label="Submit"/>
        </mx:HBox>
        </mx:VBox>
    </mx:Canvas>
    </mx:TitleWindow>
<mx:states>
        <mx:State name="basic">
                <mx:AddChild relativeTo="{h1}" position="after">
                <mx:VBox>            
                 <mx:HBox width="50%" borderStyle="none" height="36" id="hbox2">
                    <mx:Label text="Question 2:"/>
                    <mx:ComboBox  width="152" id="sel_Q2" dataProvider="{second_list}"></mx:ComboBox>
                </mx:HBox>
                <mx:HBox width="50%" borderStyle="none" height="36" id="hbox3" >
                    <mx:Label text="Question 3: "/>
                    <mx:ComboBox  width="152" id="sel_Q3" dataProvider="{third_list}" change="change_service3()"></mx:ComboBox>
                </mx:HBox>           
                <mx:HBox width="50%" borderStyle="none" height="36" id="hbox4" >
                    <mx:Label text="Question 4: "/>
                    <mx:ComboBox  width="152" id="sel_Q4" dataProvider="{fourth_list}" change="change_service4()"></mx:ComboBox>
                </mx:HBox>   
               </mx:VBox>
            </mx:AddChild>
        </mx:State>
        <mx:State id="ext31" name="extended31" basedOn="basic">
            <mx:AddChild id="child31" relativeTo="{hbox3}" position="after">
               <mx:HBox width="50%" borderStyle="none" height="36" id="hbox31" >
                    <mx:Label text="Question 3.1: "/>
                    <mx:ComboBox  width="152" id="sel_Q31" dataProvider="{fifth_list}"></mx:ComboBox>
                </mx:HBox>   
            </mx:AddChild>
        </mx:State>
        <mx:State id="ext41" name="extended41" basedOn="extended31">
            <mx:AddChild relativeTo="{hbox4}" position="after">
               <mx:HBox width="50%" borderStyle="none" height="36" id="hbox41" >
                    <mx:Label text="Question 4.1: "/>
                    <mx:ComboBox  width="152" id="sel_Q41" dataProvider="{sixth_list}"></mx:ComboBox>
                </mx:HBox>   
            </mx:AddChild>
        </mx:State>
    </mx:states>
<mx:Script>
    <![CDATA[
    import mx.controls.Alert;
    import mx.states.*;   
        public function bb_service():void {
            if(Q1.text.toString() =='Yes')
                this.currentState = "basic";   
            else
                this.currentState = "";
        public function change_service3():void {
            if(sel_Q3.text.toString() =='I Dont Know')
                this.currentState = "extended31";                   
            //else
                //this.hbox31.visible = false;   
            //    this.currentState = "basic";   
        public function change_service4():void {
            if(sel_Q4.text.toString() =='I Dont Know')
                this.currentState = "extended41";               
            //else
                //this.hbox41.visible = false;
            //    this.currentState = "basic";   
    ]]>
</mx:Script>
   Now my problem is say when user selects Q3 with 'I Dont Know' then I need to display 'extended31' state. State 'extended41' is  basedOn 'extended31' so when I select 'I Dont Know' in Q4 it is displaying Q3.1 because it is based on 'extended31'.
   Can we add multiple states rather than using basedOn clause?
   I'm attaching my code for your reference.
Thanks,
Sharath.