• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 717
  • Last Modified:

How do I control multiple States in Flex 3?

Hello,

Right now I have 3 states for a certain container and I would like each state to be added depending on whether a radio button was selected or not (the radio buttons are in three separate radio groups, so in other words, each section is independent).

I used to have it where if one state is added and if another gets selected, the first state goes away.  That's not what I wanted.  So, I added on the attribute "baseOn", but the problem with that is if a second state is selected based on a radio button selection, then the first state shows up as well...


Thank you very much in advance!!!!!!!!!!!

<mx:State name="added_state1" >

    	<mx:AddChild relativeTo="{speed}" position="after" creationPolicy="all">
    	<mx:FormItem label="Deliver to what Address:">
		            <mx:ComboBox id="DELPrimSec" width="200">
		              <mx:ArrayCollection>
		                 <mx:String>Primary</mx:String>
		                 <mx:String>Secondary</mx:String>
		              </mx:ArrayCollection>                     
		            </mx:ComboBox>
		        </mx:FormItem>
		        </mx:AddChild>
    	</mx:State>

<mx:State name="added_state2"  basedOn="added_state1">
    	
    	<mx:AddChild relativeTo="{selectCheese}" position="after" creationPolicy="all">
    			<mx:FormItem label="Select a Cheese:">
		            <mx:ComboBox prompt="Please Select"  dataProvider="{recievedData5}" labelField="{comboDisplay2}" id="DesCheese" width="200"/>
		        </mx:FormItem>
    		</mx:AddChild>

    	</mx:State>


...

<mx:FormItem label="Speed:" direction="vertical" id="speed" fontWeight="bold">
		            <mx:RadioButtonGroup id="radiogroup1"/>
		         <!--there are other buttons in here but this is the only one that triggers something-->
		            <mx:RadioButton label="I would like to request the delivery location" groupName="radiogroup1" click="currentState='added_state1'" value="I would like to request the date/time"/>
		            
		        </mx:FormItem>


</mx:FormItem>
		          <mx:FormItem label="Cheese:" direction="vertical" id="selectCheese" fontWeight="bold">
		            <mx:RadioButtonGroup id="radiogroup2"/>
		     <!--there are other buttons in here but this is the only one that triggers something, and no, selecting the type of cheese is not the real question hahaha-->
		            <mx:RadioButton label="I want to pick the Cheese" groupName="radiogroup2" click="currentState='added_state2'" value="I want to pick the Cheese"/>
		        </mx:FormItem>

Open in new window

0
stracqan
Asked:
stracqan
  • 5
  • 2
  • 2
2 Solutions
 
vindys80Commented:
Hi,

I think you just need visibility of the components according to radio button status. Then do you really need to use states? You can achieve the same with visible = true/false right?

Thanks,
Vindys
0
 
zzynxSoftware engineerCommented:
>> I would like each state to be added depending on whether a radio button was selected or not
>> (the radio buttons are in three separate radio groups, so in other words, each section is independent)
Given the above, why do you use radio buttons and not check boxes?
0
 
zzynxSoftware engineerCommented:
>> why do you use radio buttons and not check boxes?
Forget it. I think I see why.

I'm afraid you'll need to define your states in such a way that they take into acount what the previous states could have been.
eg. "added_state2" also needs - besides adding its own controls - to remove "added_state1" if present.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
stracqanAuthor Commented:
vindys80, thank you for your comment.  I cannot use the Visible = true/false and then use actionscript to turn it on or off because when the content is not visible it leaves a gap between the form elements that I do not wish to have.  Thank you for your suggestion though!!!!!

zzynx, I would like to thank you too for your comments.  In regards to your first question, I'm using radio buttons because I do not want users to be able to select more than one check box at a time.  As far as I know, I couldn't pull that off with just check boxes (I could be wrong though..).

In regards to your second comment, how do I define/add the logic to take into account if another state was there or not?
0
 
zzynxSoftware engineerCommented:
>> how do I define/add the logic to take into account if another state was there or not?
You probably can't do that in pure MXML.
But I think you can in action script.
There you could look for certain variables that are set (by the code of another state) or not and depending on that remove certain controls (added by another state)
0
 
vindys80Commented:
Hi,

You can avoid gap by making height as 0 when its not visible and height defined when its visible.

Thanks,
Vindys
0
 
zzynxSoftware engineerCommented:
Or you can set the properties includeInLayout and visible to false to hide a component and set them to true if you want it to be visible.
Something like this:

I suppose you initially "add" all different states once. Then you can write:
<mx:State name="added_state1" >
        <mx:AddChild relativeTo="{speed}" position="after" creationPolicy="all">
            <mx:FormItem id="fi1" label="Deliver to what Address:">
             ...
        </mx:AddChild>
</mx:State>

<mx:State name="added_state2"  basedOn="added_state1">
        <mx:AddChild relativeTo="{selectCheese}" position="after" creationPolicy="all">
               <mx:FormItem id="fi2" label="Select a Cheese:">
                            <mx:ComboBox prompt="Please Select"  dataProvider="{recievedData5}" labelField="{comboDisplay2}" id="DesCheese" width="200"/>
               </mx:FormItem>
        </mx:AddChild>
</mx:State>

...
<mx:RadioButton label="I would like to request the delivery location" groupName="radiogroup1" click="switchToState1()" value="I would like to request the date/time"/>
...
<mx:RadioButton label="I want to pick the Cheese" groupName="radiogroup2" click="switchToState2()" value="I want to pick the Cheese"/>
...

<mx:Script>
    <![CDATA[
          private function switchToState1():void {
                fi1.visible = true;
                fi1.includeInLayout = true;
                fi2.visible = false;
                fi2.includeInLayout = false;
          }

          private function switchToState2():void {
                fi1.visible = false;
                fi1.includeInLayout = false;
                fi2.visible = true;
                fi2.includeInLayout = true;
          }
       
	]]>
</mx:Script>

Open in new window

0
 
stracqanAuthor Commented:
I would like to thank you both for your great suggestions!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

In the end I ended up using a hybrid of what you guys gave me.  I used the actionscript from zzynx and the visibility idea from vindys80.

Thank you very very much!!!!!!!!!!
0
 
zzynxSoftware engineerCommented:
Thanx 4 axxepting
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 5
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now