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>
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’].