6 Replies Latest reply on Sep 10, 2009 5:00 PM by karnatis

    Displaying components dynamically.

    karnatis Level 1

      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.

        • 1. Re: Displaying components dynamically.
          babo_ya Level 3

          Set the height & and width = 0???

           

          hope this helps,

           

          BaBo,

          • 2. Re: Displaying components dynamically.
            karnatis Level 1

            It is not working...I tried that.

             

            Can you please take my code try this...

             

            Thanks,

            Sharath.

            • 3. Re: Displaying components dynamically.
              salem_b_a Level 2

              I think the best way do this is by states and transition.

               

              Try to draw you states separately, keep properties relative to every compnent in this state (x, y, visible, width , height, ...),

              for example,

              1)your default state would be Q1, Q2,Q3,Q4

              2) the user selects 'i don't know' in Q2, then you move to anew state in which you change Q3(x),  Q4(x) t leave some space to Q2.1( wich should be already in the exact position for example and visible set to false

              Do not forget to resize the All-container and the work is done!

               

              See on Tour De Flex the sample about transition.

              Hope that helps

               

              Regards,

              Salem

              • 4. Re: adding multiple states, is this possible in Flex.
                karnatis Level 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.

                • 5. Re: adding multiple states, is this possible in Flex.
                  babo_ya Level 3

                  Replace with bb_service with the following:

                   

                  public function bb_service():void {

                   

                  if(Q1.text.toString() =='Yes')

                  {

                  //this.hbox2.visible = true;

                  //this.hbox3.visible = true;

                  //this.hbox4.visible = true;

                   

                  this.currentState = "basic";

                  }

                  if(Q1.text.toString() == "No")

                  {

                  //this.hbox2.visible = false;

                  //this.hbox3.visible = false;

                  //this.hbox4.visible = false;

                   

                  this.currentState = "";

                  }

                   

                   

                   

                  if(Q1.selectedIndex == 3)

                  {

                  //this.hbox31.visible = true;

                   

                  trace("done??");

                   

                  this.currentState = "extended31";

                  }

                   

                  }

                   

                   

                  hope this helps,

                   

                  BaBo,

                  • 6. Re: adding multiple states, is this possible in Flex.
                    karnatis Level 1

                    Hi Babo,

                     

                        Can you please go through the code which I posted, I even attached my program.

                     

                        What I want is when I select 'I Dont Know' in Q4 then it needs to dispaly 'basic' state as well as 'extended41' but the problem is it is even displaying 'extended31' because we used 'extended41'  is basedOn 'extended31'.

                     

                        I did this because when we select Q3 with 'I Dont Know' it should display 'extended31' state. If we extend 'extended41' is basedOn 'basic' state then we loose Q3 selection.

                     

                       My question is: when we set currentstate to 'extended41' then it needs to check Q3. If Q3 is having 'I Dont Know' then it needs to display 'extended31', if not it should not display 'extended31'.

                     

                       How to do this when we are setting currentstate can validate another state values...basedOn should be validated before adding...

                     

                    Thanks,

                    Sharath.