Using a Form Layout Container to Lay Out Simple Controls
Forms are important in most applications that collect information from users. You will be using the Form container to enable shoppers to check out their products from the grocery store. The Form container in Flex will handle the layout of the 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 tags: an <s:Form> tag, an <s:FormHeading> tag, and an <s:FormItem> tag for each item on the form. To start, the checkout form will be built into a separate application, but later in the book, it will be moved into the main application as a custom component.
- Create a new MXML application in your current project by choosing File > New > MXML Application. Name the application Checkout, and choose spark.layouts. BasicLayout as the Layout for the new application. Then click Finish.
- Switch to Design view, and drag a Form from the Layout folder of the Components view to the top left of the window. A dialog box will appear asking for the Width and Height of the form. Leave the default values and click OK.
- Drag a FormHeading component from the Layout folder in the Components view into the newly created form. Double-click the FormHeading,
and change it to Customer Information.
A FormHeading is just a specialized label for Forms.
- Drag a TextInput control from the Controls folder of the Components view and drop it just below the FormHeading. The TextInput
and a label to the right of the TextInput both appear. Double-click the label and change it to Customer Name.
When adding controls to a form in Design view, Flash Builder automatically surrounds the control in a FormItem, which is why a label is appearing to the left of the control. If you switch to Source view, you can see the FormItem surrounding the TextInput. Back in Design view, notice how the left edge of the text input’s label is aligned with the left edge of the FormHeading. As noted earlier, this is a feature of the Form and FormHeading classes, and it allows these items to always maintain the left alignment, regardless of the size of the FormItem labels.
- Drag four more TextInputs to the form from the Components view. Change the labels of these to Address, City, State, and Zip. Drag a button below the last TextInput, and set its label to be an empty string (simply remove the default text). Click
the button and change the button’s text to Continue.
Due to the Form layout, selecting a discrete control such as the Button can be difficult. In this case, it is easiest if you attempt to click the very left side of the button. Remember, if you can’t accomplish the desired effect in Design view, you can always do so in Source view.
Each control is surrounded in its own FormItem and has its own label. Since you don’t need a label next to the Continue button, you simply clear the text from the label on that form item.
- Save and run the application.