Select the Right containers and Layout Managers
Flex offers quite a number of containers. Often developers may have trouble to pick the right containers for their UI. Pick the most appropriate containers by using this reference table for all the Flex containers with information on properties, comparisons, best usages and their Java/HTML counterparts:
| Type | Properties/behaviors | Best used for | HTML counterpart | Java counterpart |
|---|---|---|---|---|
| Layout Managers | ||||
| Canvas | Absolute (x=10, y=10) or constraint-based (left=20, top=20) layout for children | Creating complex UI combining both absolute and constraint-based layouts. | - | - Absolute: null (layout) - Constrainted base: GridBagConstraints |
| Box (HBox/VBox) | Lays out its children in a row or column. The sizes of the children laid out vary. | Laying out a group of size varying components, e.g., a group of control buttons. | Normal HTML rendering | FlowLayout |
| DividedBox (HDividedBox/VDividedBox) | HDividedBox: Lays out its children in a row separated by draggable deviders. The height of all the children is set to the same as the divided box. VDividedBox: similar. | Creating split panes | - | JSplitPane |
| Form [FormHeading, FormItem] | A single column form like a HTML form. | Data input form | HTML form (table) | - |
| Grid | HTML table like; The height of all cells in a row is the same, however, each row may have a different height; the width of all cells in a column is the same, however, each column may have a different width. Each cell may contain zero or one child, and a child may multiple cols/rows. | Organizing a large number of components in a tabular form | HTML table | GridBagLayout |
| Tile | Similar to Grid, but the size of all the cells is the same. | Tiling a number of children | - | GridLayout |
| ViewStack | Displays only one of its children at any time; need to work with a LinkBar, TabBar, ButtonBar or ToggleButtonBar to select the child to be displayed. | Stacking multiple children and showing only one selected by the user | - | CardLayout |
| TabNavigator | A ViewStack with a TabBar as its stack selection control | Creating tabbed panes | JTabbedPane | |
| Accordion | Behaves similarly to a ViewStack, but Accordion displays the title (label) for each child when the title (label) of a child is selected, it will be displayed and all other children will be hidden. | Creating multi-section data input forms | - | - |
| Windows | ||||
| Panel | A window with title bar, content pane and status message area. Three types of layouts: horizontal, vertical and absolute. | Wrapping self contained application modules | - | JFrame (the closest thing) |
| TitleWindow | A special Panel with a close button in the title bar that can be used for creating pop up windows. | Creating pop up windows | - | JDialog |
| Special components | ||||
| ApplicationControlBar | Lays out its children like a tool bar. | Creating a tool bar on the main application window. | JToolBar | |
| ControlBar | Summary/control bar for a Panel or TitleWindow at the bottom | Creating a summary/control bar at the bottom of a Panel or TitleWindow | - | |