Learning Flex – Lesson 13, Implementing Navigation

You could implement navigation of an app purely using states but Flex also has a ViewStack class container which is a collection of other containers, only one of which is visible at a time.

Note that all children of a ViewStack must be containers – a runtime error will be thrown otherwise.

The ViewStack class does not have any inherent capabilities to switch which child is visible. This must be done using other built in tools or by developing your own.

An example of a built in control is the LinkBar. If you set the dataProvider of a LinkBar to the id of a ViewStack, a link will appear for each child displaying the label of the child container.

If you want to do things yourself, the selectedIndex (zero based) property of the ViewStack determines which child is displayed. Alternatively you may use the selectedChild property and provide the id of the child component you wish to display.

The TabNavigator is an extension of ViewStack which builds tabs for each child container and uses the label property of the child to determine what to display in each tab. Clicking on a tab will display the relevant child.

By default, the first child of a ViewStack is displayed. Deferred instantiation (or lazy loading) means that the other children are not created until they are needed. This is important to note if other components reference values in a ViewStack child. You could avoid this by setting creationPolicy="all" on the ViewStack but this would be a bad idea as it eliminates the efficiency gains of the deferred instantiation process. It’s better to avoid links to child view values or disable the component requiring the data until the child view is visible.

Date Components

Flex has a DateChooser component which presents a calendar to the user who can then choose a day, month and year. The selectedDate property stores the chosen value in a Date object.

An alternative is the DateField component which looks like a text box with a calendar icon beside it. The user can click the icon to get a calendar or enter the date directly in the field. The date chosen is also stored in a selectedDate property.

Note that when accessing Date objects, the month value is zero indexed (ie 0=Jan, 11=Dec).