This chapter will do the following things:

• Introduce common uses of the Flex UI.
• Define frequently used Flex UI terminology.
• Provide working examples.

Introduction to Flex UI

The Flex UI provides an interface for creating applications that use simple components such as buttons, windows, and labels in their design. Though the display and behavior of these components may differ from device to device, the API and functionality will not.

The Flex UI also allows the programmer to customize the actions of these components. "Listener" objects can be added to components to monitor any interaction with the component. When the listener detects interaction, it calls the appropriate method or "handler" to carry out the command. For example, a calculator application may use a listener to monitor its buttons. The listener can respond to a button press with a handler, a different handler for adding, subtracting, multiplying, or dividing the numbers. It is up to the programmer to determine how the handler carries out the mathematical operation.

Using the Flex UI

The Flex UI library provides a hierarchy of object classes well-suited to carrying out common user interface tasks. As a result, using the Flex UI is easy. Each user interface component in the Flex UI is created through the UIFactory object, allowing the programmer to change the implementation of the user interface without requiring any changes to the application code. The UIFactory accomplishes this by calling into the specific UI library to create the object that corresponds to the specified look.

    FlexButton *helloButton = theUIFactory->CreateFlexButton(HINT_BUTTON_WITH_ROUNDED_CORNERS, title, length);

The Flex UI provides the ability to add components to other "container" components when building the user interface, allowing for easy management and grouping of similar objects.

    mainWindow->Add(helloButton);

In addition, you can tell FlexContainers (windows, frames, dialogs, etc.) to use a LayoutManager object. By adding objects to a LayoutManager, you can automate the on-screen placement of the objects. This allows the user interface to automatically re-arrange itself if the size of its components change.

    HorizontalFlowLayout *mainWindowLayout = new HorizontalFlowLayout(5);

The FlowLayout class controls the layout of the user interface, based on vertical or horizontal alignment. This code example creates a FlowLayout object that will center objects horizontally with a 5 pixel gap between objects.