| Forms are important in most applications to collect information from users. You will be using the Form container to enable an administrator to update the inventory for the grocery store. The administrator can add new items, delete old items, and update existing items. The Form container in Flex handles the layout of controls in this Form, automating much of the routine work. With a Form container, you can designate fields as required or optional, handle error messages, and perform data checking and validation to be sure the administrator follows designated guidelines. A Form container uses three separate tags: an <mx:Form> tag, an <mx:FormHeading> tag, and an <mx:FormItem> tag for each item on the form.  | | 1. | Open DataEntry.mxml and switch to Source mode. After the <mx:Application> tag, add a new <mx:Model> tag, assign it an id of prodModel, and add the data structure as follows:
<mx:Model > <groceries> <catName>Dairy</catName> <prodName>Milk</prodName> <imageName>assets/dairy_milk.jpg</imageName> <cost>1.20</cost> <listPrice>1.99</listPrice> <isOrganic>true</isOrganic> <isLowFat>true</isLowFat> <description>Direct from California where cows are happiest!</description> </groceries> </mx:Model>
You will use this application to build an interface so administrators can update and add information in a database. Later in the book, you will use a server-side dataset from an actual database to populate the fields.
| 2. | Below the <mx:Model> tag, use the <mx:Form> tag to define the outermost container of the form.
<mx:Form> </mx:Form>
The Form container, which is the outermost tag of a Flex form, always arranges its children in a vertical fashion and left-aligns them. All your form elements will be defined within this container.
| 3. | Within the Form container, use the <mx:FormHeading> tag to define a heading for the current category. Use data binding to set up the binding between the label property and the catName property of the data model.
<mx:FormHeading label="{prodModel.catName}"/>
The <mx:FormHeading> tag enables you to specify a label for a group of FormItem containers. This is perfect for your application because the user will be updating items from a specific category such as produce or bakery. It is possible to have multiple <mx:FormHeading> tags, with the left side of the label in the <mx:FormHeading> aligning with the left side of the form.
| | | 4. | After the FormHeading container, use the <mx:FormItem> tag to define the product name. Inside of the <mx:FormItem> tag, add an <mx:TextInput> tag with an id of product that will be populated with the name of the actual item from the data model. Use data binding to reference the prodName property inside the model.
<mx:FormItem label="Product Name"> <mx:TextInput text="{prodModel.prodName}"/> </mx:FormItem>
The <mx:FormItem> tag will automatically specify one Label control with one or more form elements, such as TextInput controls. A label displaying 'Product Name' is automatically added with the appropriate spacing and alignment relative to the TextInput control.
| 5. | After the last <mx:FormItem> tag, use another <mx:FormItem> tag, set the label to ProductNameUnit, and specify the direction property as horizontal. Inside the FormItem container, place a ComboBox control and a TextInput control. Leave the ComboBox and TextInput controls blank for now; you will come back to them in a later lesson.
<mx:FormItem label="ProductNameUnit" direction="horizontal"> <mx:ComboBox/> <mx:TextInput/> </mx:FormItem>
By default, all the controls in a FormItem are laid out vertically to the right of the Label control. By using the direction attribute in the <mx:FormItem> tag, you can specify that the controls should be laid out horizontally instead of vertically. If the children are laid out horizontally and do not fit into a single row, they are divided into multiple rows with equal-sized columns.
| 6. | After the last <mx:FormItem> tag, add three more <mx:FormItem> tags that define the cost, the list price, and the description of the item. Place TextInput controls with the binding to the text property, inside of each FormItem container:
<mx:FormItem label="Cost"> <mx:TextInput text="{prodModel.cost}"/> </mx:FormItem> <mx:FormItem label="List Price"> <mx:TextInput text="{prodModel.listPrice}"/> </mx:FormItem> <mx:FormItem label="Description"> <mx:TextInput text="{prodModel.description}"/> </mx:FormItem>
This process will add more information to the form that the user needs to update, add, or delete a new product.
| | | 7. | After the last <mx:FormItem> tag, add two more <mx:FormItem> tags that define whether the product is organic or low fat. Use a CheckBox control with the selected attribute and be sure to get this data from the data model tag.
<mx:FormItem label="Organic"> <mx:CheckBox selected="{prodModel.isOrganic}"/> </mx:FormItem> <mx:FormItem label="Is Low Fat?"> <mx:CheckBox selected="{prodModel.isLowFat}"/> </mx:FormItem>
The CheckBox control can contain a check mark or be left unchecked (empty). When the user clicks the check box, the CheckBox control will change its state from checked to unchecked or vice versa. This is accessed through the selected property, which is a Boolean value (true or false).
| 8. | After the last <mx:FormItem> tag, add another <mx:FormItem> tag that will display two items in a horizontal box: the first is the path of the image in the data model in a TextInput control, and the second is a button that will allow the user to browse for the image.
<mx:FormItem label="Image Path"> <mx:TextInput text="{prodModel.imageName}"/> <mx:Button label="Browse"/> </mx:FormItem>
You will add functionality to the Browse button in the next step using the filereference class, so users can upload data from the client to a server.
| | | 9. | Add an <mx:Script> block to the top of the application, immediately after the existing <mx:Model> tag. Note that a CDATA tag is automatically added for you by Flex Builder. Import the filereference class and then create a function with the name of fileBrowse() that instantiates a new instance of the FileReference class and calls the browse() function.
<mx:Script> <![CDATA[ import flash.net.filereference; public function fileBrowse():void{ var myfileref:FileReferenceList = new FileReferenceList(); myfileref.browse(); } ]]> </mx:Script>
The file upload process will be completed in Lesson 17, "Accessing Server-side Objects."
You have used MXML to lay out your application and will now use ActionScript to add functionality and provide logic. The first line of code enables you to make use of the existing filereference class. The second line of code declares a new function. The void keyword indicates that the function is not expected to return a value to the caller. The first line of the function creates a new object: myFileRef from the FileReference class you imported. It is important to specify the type of all objects that you create. Here you type the object to FileReferenceList. By typing objects, you will receive better error messages to debug your application and get faster performance. The second line in the function calls the browse() method of the FileReference class, which will cause the following window to pop up when the user clicks the Browse button.
| 10. | Return to the Browse button and add a click event that will call the fileBrowse() you wrote in the last step.
<mx:Button label="Browse" click="fileBrowse()" />
This step will call the method that you wrote in the script block and cause the pop-up window to appear. You will learn later in the book how to send the data to a server.
| 11. | After the last <mx:FormItem> tag, add another <mx:FormItem> tag that will display two buttons, one with the label of Update and the other with the label of Delete, in an HBox.
<mx:FormItem> <mx:HBox> <mx:Button label="Update"/> <mx:Button label="Delete"/> </mx:HBox> </mx:FormItem>
| | | 12. | Save and run the application.
 Tip  | If you tab through the various components of the form, you might wonder whether there is a way to control which components receive the user focus. The form itself (and each top-level container), has a built-in focus manager. The focus manager contains a getFocus() method that will return the component that currently has the focus. You can use the setFocus() method to set the focus to another component. Using the Focus Manager class is the preferred method to control selection in a Flex application. |
| 13. | Close the current editor by clicking the X.
|
|
