Home / Articles / Adobe Flex 4: Training from the Source, Volume 1 - Using Simple Controls

Adobe Flex 4: Training from the Source, Volume 1 - Using Simple Controls

Chapter Description

An important part of any application is the user interface, and Adobe Flex contains elements such as buttons, text fields, and radio buttons that make building interfaces easier. This lesson shows you how to add user interface elements to enable the customer to find more details about the grocery items and begin the checkout process.

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 the shopper 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 <mx:Form> tag, an <mx:FormHeading> tag, and an <mx: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.

  1. 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.
  2. 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 as they are.
  3. 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.
  4. A FormHeading is a specialized label. Its left edge always aligns with the left side of the form controls (not the labels of the form items.)

  5. 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.
  6. 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 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.

  7. Drag four more TextInputs to the form from the Components view. Change the labels of these to Address, City, State, and Zip. Drag a DateField below all the TextInputs, and change its label to Delivery Date. Drag a button below the DateField, and set its label to be an empty string (simply remove the default text). Double-click the button and change the button’s text to Continue.
  8. 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.

  9. Save and run the application.
6. What You Have Learned | Next Section Previous Section