In the previous tutorials we had populated our combo boxes with the use of XML by using the tag <mx:XMLList id="statesXMLList"> in order to add data to our combo box. Also we had to identify that XML list also in the combo box itself like so:
CODE
<mx:FormItem label="State">
<mx:ComboBox id="State" toolTip="Enter the state you live in" prompt="Select a State..." selectedIndex="-1" dataProvider="{statesXMLList}" labelField="@label" tabIndex="9" />
</mx:FormItem>
<mx:ComboBox id="State" toolTip="Enter the state you live in" prompt="Select a State..." selectedIndex="-1" dataProvider="{statesXMLList}" labelField="@label" tabIndex="9" />
</mx:FormItem>
In which our dataProvider would check to see what states were added in XML List and display them and so now we are going to do the ActionScript version of this by using Bindable Array's in order for the combo boxes to display states and credit cards in the combo boxes.
To start off, I show you the code and then we will break down the parts from there.
CODE
<mx:Script>
<![CDATA[
[Bindable]
public var state: Array = [ {label:"Alabama", data:1},
{label:"Alaska", data:2},
{label:"Arizona", data:3},
{label:"Arkansas", data:4},
{label:"California", data:5},
{label:"Colorado", data:6},
{label:"Connecticut", data:7},
{label:"Delaware", data:8},
{label:"District of Columbia", data:9},
{label:"Florida", data:10},
{label:"Hawaii", data:11},
{label:"Idaho", data:12},
{label:"Illinois", data:13},
{label:"Indiana", data:14},
{label:"Iowa", data:15},
{label:"Kansas", data:16},
{label:"Kentucky", data:17},
{label:"Louisiana", data:18},
{label:"Maine", data:19},
{label:"Maryland", data:20},
{label:"Massachusetts", data:21},
{label:"Michigan", data:22},
{label:"Minnesota", data:23},
{label:"Mississippi", data:24},
{label:"Missouri", data:25},
{label:"Montana", data:26},
{label:"Nebraska", data:27},
{label:"Nevada", data:28},
{label:"New Hampshire", data:29},
{label:"New Jersey", data:30},
{label:"New Mexico", data:31},
{label:"New York", data:32},
{label:"North Carolina", data:33},
{label:"North Dakota", data:34},
{label:"Ohio", data:35},
{label:"Oklahoma", data:36},
{label:"Oregon", data:37},
{label:"Pennsylvania", data:38},
{label:"Rhode Island", data:39},
{label:"South Carolina", data:40},
{label:"South Dakota", data:41},
{label:"Tennessee", data:42},
{label:"Texas", data:43},
{label:"Utah", data:44},
{label:"Vermont", data:45},
{label:"Virginia", data:46},
{label:"Washington", data:47},
{label:"West Virginia", data:48},
{label:"Wisconsin", data:49},
{label:"Wyoming", data:50},
];
[Bindable]
public var credit: Array = [ {label:"American Express", data:1},
{label:"Discover", data:2},
{label:"MasterCard", data:3},
{label:"Visa", data:4}
];
]]>
</mx:Script>
The Combo Box will look like this:
CODE
<mx:FormItem label="State" id="State1">
<mx:ComboBox id="StateCombo" toolTip="Choose your State" prompt="Select State..." dataProvider="{state}"></mx:ComboBox>
</mx:FormItem>
<mx:ComboBox id="StateCombo" toolTip="Choose your State" prompt="Select State..." dataProvider="{state}"></mx:ComboBox>
</mx:FormItem>
First lets start with the <mx:Script> tag which basically is used to run a script either be ActionScript, JavaScript or some other kind of script. So what is a Bindable array? Well for you ActionScript programmers you already know but for those who do not, "Data binding lets you pass data between client-side objects in an Adobe® Flex® application. Binding automatically copies the value of a property of a source object to a property of a destination object when the source property changes." So in the case of Adobe Flex the client-side object would be the Combo box we are using to pass data of the 50 states through the use of an array.
As for the array itself, adobe mentions, "When working with arrays, such as Array or ArrayCollection objects, you can define the array as the source or destination of a data binding expression." I the case of the 50 states we are using the array as the source of data in order to populate the binding data into the combo box. That is how I can best explain it from the Adobe Flex Help file about data binding. Therefore, I recommend reading more from the following link http://livedocs.adobe.com/flex/3/html/help...abinding_8.html about binding data and how it is used in Adobe Flex.
Another way you could look at Bindable data is that is data that cannot be change except through the source code. If you look at the Help File, you will see various forms of Data Binding and if remember our validation code that we used, that is Bindable data as well and so basically it is forcing data regardless of the users input through the Flex Application.
The next part is the public var, meaning it is a public variable that can be seen by others, in this case the variable is called state. Most of the time you would be using this in one form or another depending on what data you want to make public or what data to make private such as credit card numbers or password.
As for Label and data1-50 basically we are giving labels to your data and in order to provide it in a list and give it separation we are providing it with a different number to be recognized independently from the rest of the data. Now if you look at the combo box we need to be able to populate the bindable data to that combo box. So how do we do this? you would type in dataProvider="" within the combox field and then in order to actually to display the data you would type in the variable state like so. dataProvider="{state}".
This is a brief tutorial on another way to provide data in Adobe Flex and after reading this tutorial, you should have a good understanding of what I have covered thanks to setting up validation in the first form. So what have we done up to this point? We redesign our contact form and used ActionScript and bindable array’s instead of XML to provide data to our combo box. So, check out the live demo below and look at the source code below to get idea what everything looks like and of course make sure to check out the live docs link for more ways to use bindable data.
Live Demo
http://www.saint-michael.trap17.com/flex/f...art2/form2.html
Sources
Foundation Flex for Designers
http://livedocs.adobe.com/flex/3/html/ - Adobe Flex Help File
Source Code
CODE
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalAlign="middle" pageTitle="Form v2">
<mx:Script>
<![CDATA[
[Bindable]
public var state: Array = [ {label:"Alabama", data:1},
{label:"Alaska", data:2},
{label:"Arizona", data:3},
{label:"Arkansas", data:4},
{label:"California", data:5},
{label:"Colorado", data:6},
{label:"Connecticut", data:7},
{label:"Delaware", data:8},
{label:"District of Columbia", data:9},
{label:"Florida", data:10},
{label:"Hawaii", data:11},
{label:"Idaho", data:12},
{label:"Illinois", data:13},
{label:"Indiana", data:14},
{label:"Iowa", data:15},
{label:"Kansas", data:16},
{label:"Kentucky", data:17},
{label:"Louisiana", data:18},
{label:"Maine", data:19},
{label:"Maryland", data:20},
{label:"Massachusetts", data:21},
{label:"Michigan", data:22},
{label:"Minnesota", data:23},
{label:"Mississippi", data:24},
{label:"Missouri", data:25},
{label:"Montana", data:26},
{label:"Nebraska", data:27},
{label:"Nevada", data:28},
{label:"New Hampshire", data:29},
{label:"New Jersey", data:30},
{label:"New Mexico", data:31},
{label:"New York", data:32},
{label:"North Carolina", data:33},
{label:"North Dakota", data:34},
{label:"Ohio", data:35},
{label:"Oklahoma", data:36},
{label:"Oregon", data:37},
{label:"Pennsylvania", data:38},
{label:"Rhode Island", data:39},
{label:"South Carolina", data:40},
{label:"South Dakota", data:41},
{label:"Tennessee", data:42},
{label:"Texas", data:43},
{label:"Utah", data:44},
{label:"Vermont", data:45},
{label:"Virginia", data:46},
{label:"Washington", data:47},
{label:"West Virginia", data:48},
{label:"Wisconsin", data:49},
{label:"Wyoming", data:50},
];
[Bindable]
public var credit: Array = [ {label:"American Express", data:1},
{label:"Discover", data:2},
{label:"MasterCard", data:3},
{label:"Visa", data:4}
];
]]>
</mx:Script>
<mx:Panel x="459" y="117" width="410" height="456" layout="absolute" horizontalAlign="center" title="Contact Form v2">
<mx:Accordion x="0" y="0" width="390" height="380">
<mx:Canvas label="Basic Info" width="100%" height="100%">
<mx:Form x="0" y="0" width="388" height="274">
<mx:FormItem label="First Name">
<mx:TextInput id="fname" width="150" toolTip="Enter your First Name" tabIndex="1" />
</mx:FormItem>
<mx:FormItem label="Middle Name">
<mx:TextInput id="mname" width="150" toolTip="Enter your Middle Name" tabIndex="2" />
</mx:FormItem>
<mx:FormItem label="Last Name">
<mx:TextInput id="lname" width="150" toolTip="Enter your Last Name" tabIndex="3" />
</mx:FormItem>
<mx:FormItem label="Date of Birth (mm/dd/yyyy)">
<mx:TextInput id="dob" width="150" toolTip="Enter your birthday mm/dd/yyyy" tabIndex="4" />
</mx:FormItem>
<mx:FormItem label="Age">
<mx:TextInput id="age" width="150" toolTip="Enter your Age" tabIndex="6" />
</mx:FormItem>
<mx:FormItem label="SSN">
<mx:TextInput id="ssn" width="150" toolTip="Enter your Social Security Number xxx-xx-xxxx" tabIndex="7" />
</mx:FormItem>
<mx:FormItem label="Gender">
<mx:HBox width="150">
<mx:RadioButton label="Male"/>
<mx:RadioButton label="Female"/>
</mx:HBox>
</mx:FormItem>
</mx:Form>
</mx:Canvas>
<mx:Canvas label="Contact Info" width="100%" height="100%">
<mx:Form x="0" y="0" width="388" height="274">
<mx:FormItem label="E-mail Address">
<mx:TextInput id="email" width="150" toolTip="Enter your E-mail Address" tabIndex="5" />
</mx:FormItem>
<mx:FormItem label="City">
<mx:TextInput id="city" width="150" toolTip="Enter the city you live in" tabIndex="8" />
</mx:FormItem>
<mx:FormItem label="State" id="State1">
<mx:ComboBox id="StateCombo" toolTip="Choose your State" prompt="Select State..." dataProvider="{state}"></mx:ComboBox>
</mx:FormItem>
<mx:FormItem label="Zip">
<mx:TextInput id="zip" width="150" toolTip="Enter your zip code" tabIndex="10" />
</mx:FormItem>
<mx:FormItem label="Phone">
<mx:TextInput id="phone0" width="150" toolTip="Enter your phone number 000-000-0000" tabIndex="11" />
</mx:FormItem>
</mx:Form>
</mx:Canvas>
<mx:Canvas label="Forum Registration" width="100%" height="100%">
<mx:Form x="0" y="0" width="388" height="142">
<mx:FormItem label="Forum Name">
<mx:TextInput id="forumname0" width="150" toolTip="Enter your First Name" tabIndex="1" />
</mx:FormItem>
<mx:FormItem label="Password">
<mx:TextInput id="forumname1" width="150" toolTip="Enter your First Name" tabIndex="1" displayAsPassword="true"/>
</mx:FormItem>
<mx:FormItem label="Re-Type Password">
<mx:TextInput id="forumname2" width="150" toolTip="Enter your First Name" tabIndex="1" displayAsPassword="true"/>
</mx:FormItem>
</mx:Form>
<mx:CheckBox label="Agree To Forum TOS" x="123.5" y="242"/>
</mx:Canvas>
<mx:Canvas label="Payment Options" width="100%" height="100%">
<mx:Form x="0" y="0" width="388" height="100">
<mx:FormItem label="Credit Card" id="creditbox">
<mx:ComboBox id="CreditCombo" toolTip="Choose your Credit card" prompt="Select a Credit Card..." dataProvider="{credit}"></mx:ComboBox>
</mx:FormItem>
<mx:FormItem label="Credit Card Number">
<mx:TextInput id="credit1" toolTip="Enter your credit card number" tabIndex="13" width="150"/>
</mx:FormItem>
</mx:Form>
</mx:Canvas>
<mx:Canvas label="Comment" width="100%" height="100%">
<mx:TextArea x="10" y="147" width="370" height="120"/>
<mx:Text x="10" y="5" text="Type any comments about how to improve are site or why you joined are website and forums." width="368" height="35" fontSize="12" textAlign="left" fontWeight="normal"/>
<mx:Image source="http://www.saint-michael.trap17.com/flex/formv2/banner.jpg" height="96" x="98.5" y="47" width="191"/>
</mx:Canvas>
</mx:Accordion>
<mx:Button label="Submit" x="132.5" height="22" y="388"/>
<mx:Button label="Reset" x="206.5" height="22" y="388"/>
</mx:Panel>
</mx:Application>
