Forms are a basic component of many applications. However, users have difficulty navigating through complex forms, or moving back and forth through multipage forms. Sometimes, forms can be so large that they do not fit onto a single screen.
Flex includes the Accordion navigator container, which can greatly improve the look and navigation of a form. The Accordion container defines a sequence of child panels, but displays only one panel at a time. The following figure shows an example of an Accordion container:
To navigate a container, the user clicks on the navigation button that corresponds to the child panel that they want to access. Accordion containers let users access the child panels in any order to move back and forth through the form. For example, when the user is at the Credit Card Information panel, they might decide to change the information on the Billing Address panel. To do so, they navigate to the Billing Address panel, edit the information, and then navigate back to the Credit Card Information panel.
In HTML, a form that contains shipping address, billing address, and credit card information is often implemented as three separate pages, which requires the user to submit each page to the server before moving on to the next. An Accordion container can organize the information on three child panels with a single submit button. This architecture minimizes server traffic and lets the user maintain a better sense of progress and context.
Although Accordion containers are useful for working with forms, you can use any Flex component within a child panel of an Accordion. For example, you could create a catalog of products in an Accordion container, where a each panel contains a group of similar products.
An Accordion container has the following default properties:
| Property | Default |
|---|---|
|
Preferred size |
The width and height of the currently active child. |
|
Container resizing rules |
Accordion containers are only sized once to fit the size of the first child container by default. They do not resize when you navigate to other child containers by default. To force Accordion containers to resize when you navigate to a different child container, set the You can ensure that all of your child containers fit in the Accordion container with the expected layout by setting the |
|
Child sizing rules |
Children are sized to their preferred size. The child is clipped if it is larger than the Accordion container. If the child is smaller than the Accordion container, it is aligned to the upper-left corner of the Accordion container. |
|
Default margins |
Top, bottom, left, right = -1 pixel |
Version 1.5
Send me an e-mail when comments are added to this page | Comment Report
Current page: http://livedocs.adobe.com/flex/15/flex_docs_en/00000408.htm