Define navigation, title, and action controls in a mobile application

Configure the ActionBar control

The ViewNavigator container
defines the ActionBar control.
The ActionBar control provides a standard area for a title, and
for navigation and action controls. It lets you define global controls
that users can access from anywhere in the application, or in a
specific view. For example, you can use the ActionBar control to
add a home button, a search button, or other options.

For a mobile application with a single section, meaning a single
ViewNavigator container, all views share the same action bar. For
a mobile application with multiple sections, meaning one with multiple
ViewNavigator containers, each section defines its own action bar.

Use the ActionBar control to define the action bar area. The
ActionBar control defines three distinct areas, as the following
figure shows:

A. Navigation area B. Title area C. Action
area

Areas of the ActionBar

Navigation area

Contains
components that let the user navigate the section. For example,
you can define a home button in the navigation area.

Use
the navigationContent property to define the components
that appear in the navigation area. Use the navigationLayout property
to define the layout of the navigation area.

Title area

Contains either a String containing
title text, or components. If you specify components, you cannot
specify a title String.

Use the title property
to specify the String to appear in the title area. Use the titleContent property
to define the components that appear in the title area. Use the titleLayout property
to define the layout of the title area. If you specify a value for
the titleContent property, the ActionBar skin ignores
the title property.

Action area

Contains components that define
actions the user can take in a view. For example, you can define
a search or refresh button as part of the action area.

Use
the actionContent property to define the components
that appear in the action area. Use the actionLayout property
to define the layout of the action area.

While Adobe recommends that you use the navigation, title, and
action areas as described, there are no restrictions on the components
you place in these areas.

Set ActionBar properties in the ViewNavigatorApplication, ViewNavigator, or View container

You can set the properties that define the contents of the ActionBar
control in the ViewNavigatorApplication container,
in the ViewNavigator container, or in individual View containers.
The View container has the highest priority, followed by the ViewNavigator,
then the ViewNavigatorApplication container. Therefore, the properties
that you set in the ViewNavigatorApplication container apply to the
entire application, but you can override them in the ViewNavigator
or View container.

Note: An ActionBar control is associated with
a ViewNavigator, so it is specific to a single section of a mobile
application. Therefore, you cannot configure an ActionBar from the
TabbedViewNavigatorApplication and TabbedViewNavigator containers.

Example: Customize a Spark ActionBar control at the application level

The following example shows main application file of a
mobile application:

This example defines a Home button in the navigation content
area of the ActionBar control, and a Refresh button in the action
content area.

The following example defines the MobileViewHome View container
that defines the first view of the application. The View container
defines a title string, “Home View”, but does not override either
the navigation content or action content areas of the ActionBar
control:

Example: Customize an ActionBar control in a View container

This example uses a main application file with a single
section that defines a Home button in the navigation area of the
ViewNavigatorApplication container. It also defines a Search button
in the action area:

You can define a custom effect for the ActionBar when the ActionBar
is hidden, or when it is made visible. By default, the ActionBar
uses the Animate effect on a show or hide. Change the default effect
by overriding the ViewNavigator.createActionBarHideEffect() and ViewNavigator.createActionBarShowEffect() methods.
After playing an effect that hides the ActionBar, set its visible and includeInLayout properties
to false so that it is no longer included in the layout
of the view.

Twitter™ and Facebook posts are not covered under the terms of Creative Commons.