The following example shows how you can toggle FormItem containers in a Flex Form container by setting the includeInLayout and visible properties.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/03/toggling-form-item-visibility-in-a-form-container-in-flex/ -->
<mx:Application name="FormItem_includeInLayout_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
Form {
indicatorGap: 0;
paddingLeft: 0;
paddingRight: 0;
paddingTop: 0;
paddingBottom: 0;
}
</mx:Style>
<mx:ApplicationControlBar dock="true">
<mx:Button id="bccButton"
label="Show BCC"
toggle="true"
selected="false" />
<mx:Button id="fromButton"
label="Show From"
toggle="true"
selected="false" />
</mx:ApplicationControlBar>
<mx:HBox width="100%">
<mx:Button id="sendButton"
label="Send"
height="100%" />
<mx:Form width="100%">
<mx:FormItem label="From:"
includeInLayout="{fromButton.selected}"
visible="{fromButton.selected}"
width="100%">
<mx:ComboBox id="fromComboBox"
width="100%" />
</mx:FormItem>
<mx:FormItem label="To:" width="100%">
<mx:TextInput id="toTextInput"
width="100%" />
</mx:FormItem>
<mx:FormItem label="CC:" width="100%">
<mx:TextInput id="ccTextInput"
width="100%" />
</mx:FormItem>
<mx:FormItem label="BCC:"
includeInLayout="{bccButton.selected}"
visible="{bccButton.selected}"
width="100%">
<mx:TextInput id="bccTextInput"
width="100%" />
</mx:FormItem>
<mx:FormItem label="Subject:"
width="100%">
<mx:TextInput id="subjectTextInput"
width="100%" />
</mx:FormItem>
</mx:Form>
</mx:HBox>
<mx:TextArea id="bodyTextArea"
width="100%"
height="100%" />
</mx:Application>
View source is enabled in the following example.
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/03/toggling-form-item-visibility-in-a-form-container-in-flex/ -->
<mx:Application name="FormItem_includeInLayout_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.containers.ApplicationControlBar;
import mx.containers.Form;
import mx.containers.FormItem;
import mx.containers.HBox;
import mx.controls.Button;
import mx.controls.ComboBox;
import mx.controls.TextArea;
import mx.controls.TextInput;
private var bccButton:Button;
private var bccFormItem:FormItem;
private var bccTextInput:TextInput;
private var bodyTextArea:TextArea;
private var ccFormItem:FormItem;
private var ccTextInput:TextInput;
private var fromButton:Button;
private var fromComboBox:ComboBox;
private var fromFormItem:FormItem;
private var sendButton:Button;
private var subjectFormItem:FormItem;
private var subjectTextInput:TextInput;
private var toFormItem:FormItem;
private var toTextInput:TextInput;
private function init():void {
bccButton = new Button();
bccButton.label = "Show BCC";
bccButton.toggle = true;
bccButton.selected = true;
bccButton.addEventListener(Event.CHANGE,
bccButton_change);
fromButton = new Button();
fromButton.label = "Show From";
fromButton.toggle = true;
fromButton.selected = true;
fromButton.addEventListener(Event.CHANGE,
fromButton_change);
var appControlBar:ApplicationControlBar;
appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(bccButton);
appControlBar.addChild(fromButton);
addChildAt(appControlBar, 0);
sendButton = new Button();
sendButton.label = "Send";
sendButton.percentHeight = 100;
fromComboBox = new ComboBox();
fromComboBox.percentWidth = 100;
fromFormItem = new FormItem();
fromFormItem.label = "From:";
fromFormItem.includeInLayout = fromButton.selected;
fromFormItem.visible = fromButton.selected;
fromFormItem.percentWidth = 100;
fromFormItem.addChild(fromComboBox);
toTextInput = new TextInput();
toTextInput.percentWidth = 100;
toFormItem = new FormItem();
toFormItem.label = "To:";
toFormItem.percentWidth = 100;
toFormItem.addChild(toTextInput);
ccTextInput = new TextInput();
ccTextInput.percentWidth = 100;
ccFormItem = new FormItem();
ccFormItem.label = "CC:";
ccFormItem.percentWidth = 100;
ccFormItem.addChild(ccTextInput);
bccTextInput = new TextInput();
bccTextInput.percentWidth = 100;
bccFormItem = new FormItem();
bccFormItem.label = "BCC:";
bccFormItem.percentWidth = 100;
bccFormItem.addChild(bccTextInput);
subjectTextInput = new TextInput();
subjectTextInput.percentWidth = 100;
subjectFormItem = new FormItem();
subjectFormItem.label = "Subject:";
subjectFormItem.percentWidth = 100;
subjectFormItem.addChild(subjectTextInput);
var form:Form = new Form();
form.percentWidth = 100;
form.addChild(fromFormItem);
form.addChild(toFormItem);
form.addChild(ccFormItem);
form.addChild(bccFormItem);
form.addChild(subjectFormItem);
form.setStyle("indicatorGap", 0);
form.setStyle("paddingLeft", 0);
form.setStyle("paddingRight", 0);
form.setStyle("paddingTop", 0);
form.setStyle("paddingBottom", 0);
var hBox:HBox = new HBox();
hBox.percentWidth = 100;
hBox.addChild(sendButton);
hBox.addChild(form);
addChild(hBox);
bodyTextArea = new TextArea();
bodyTextArea.percentWidth = 100;
bodyTextArea.percentHeight = 100;
addChild(bodyTextArea);
}
private function bccButton_change(evt:Event):void {
bccFormItem.includeInLayout = bccButton.selected;
bccFormItem.visible = bccButton.selected;
}
private function fromButton_change(evt:Event):void {
fromFormItem.includeInLayout = fromButton.selected;
fromFormItem.visible = fromButton.selected;
}
]]>
</mx:Script>
</mx:Application>
{ 3 comments… read them below or add one }
Great site. Just beginning to explore Flex, and I’ve come across your site a few times now.
May I make a suggestion? Since the flex examples include large sections of GUI related code, it would help if the pertinent code to a specific post were easy to find. Maybe highlighted within the example?
Thank you!
Many, many thanks. I had serious issues into trying to find how to refer to dynamically generated formItems and your AS code saved the day!
Your example can be extended. The controls I wanted to put were coming from an external source, so I did not know what they were at design time. So I tried to remove the need to define bccTextInput and bccFormItem so they could ultimately come from variables:
private var aref:Object;
private function init():void {
[...]
aref = new Object();
aref['bccTextInput'] = new TextInput();
aref['bccTextInput'].percentWidth = 100;
aref['bccFormItem'] = new FormItem();
aref['bccFormItem'].label = “BCC:”;
aref['bccFormItem'].percentWidth = 100;
aref['bccFormItem'].addChild(aref['bccTextInput']);
[...]
Then replace all references of bccFormItem with aref['bccFormItem'].
How would I go about causing the container to become invisible when I pressed the button for the next?
As in I bring the BCC form up, but when I press the show form button not only would the show form container cause itself to show but also make the BCC form disappear. I’m having this problem when trying to use this technique to toggle multiple vbox/image containers.
Any help would be appreciated.