Professional Adobe® Flex® 3

Chapter 14. User Interface Integration

This chapter covers creating forms in MXML and uses an example of dynamically creating forms from sources such as XML data.

Pop-ups are common ways to get input from users. Flex is unique in that nearly every Flex control or container can be used as a pop-up. Examples of some common and not so common uses are shown. This chapter also shows how to exchange data with pop-ups in the Flex asynchronous event model.

The custom styling of tooltips and error strings, and using custom cursors created with Flash are also covered.

Creating Forms

A form is a neatly arranged collection of labeled input fields. HTML has had a tag to create forms since its beginning. Flex also has the ability to lay out forms using the Form class, either as the MXML <mx:Form> tag or the ActionScript class mx.containers.Form.

A Flex form makes it easy to line up the labels. Figure 14-1 is an example of part of an insurance claim form.

Figure 14-1. Figure 14-1

You can see that the labels are aligned by their right edges, and the input controls are aligned to their left edges. If you add another field, the labels and input controls realign themselves automatically.

The Flex application code for this example is shown here:

<mx:Form x="47" y="368"> <mx:FormItem label="Your Name:"> <mx:TextInput/> </mx:FormItem> <mx:FormItem label="Accident Location:"> <mx:TextArea/> </mx:FormItem> <mx:FormItem ...