Mobile Applications with TouchKit

Toolbar

A slot for an optional toolbar is located at the bottom of the NavigationView. The toolbar can be any component, but a Toolbar component made for this purpose is included in TouchKit. It is described in Section 22.5.2, “Toolbar”. You could also use a HorizontalLayout or CssLayout.

You usually fill the tool bar with Button components with an icon and no textual caption. You set the toolbar with setToolbar().

Styling with CSS

.v-touchkit-navview { }

.v-touchkit-navview-wrapper {}

.v-touchkit-navview-toolbar {}

.v-touchkit-navview .v-touchkit-navview-notoolbar {}

The root element has the v-touchkit-navview class. The content area is wrapped inside a v-touchkit-navview-wrapper element. If the view has a toolbar, the toolbar slot has the v-touchkit-navview-toolbar style, but if not, the top-level element has the v-touchkit-navview-notoolbar style.

22.5.2. Toolbar

The Toolbar is a layout component that extends CssLayout, usually containing Button components. The toolbar has by default 100% horizontal width and a fixed height. The components are spread evenly in the horizontal direction. Toolbar is typically used in a NavigationView, as described in Section 22.5.1.

For a description of the inherited features, please refer to Section 6.3, “VerticalLayout and HorizontalLayout”.

Styling with CSS

.v-touchkit-toolbar { }

The component has an overall v-touchkit-toolbar style in addition to the v-csslayout style of the superclass. Other style names are as for CssLayout.

22.5.3. NavigationManager

The NavigationManager is a visual effect component that gives sliding animation when switching between views. You can register three components: the currently displayed component, the previous one on the left, and the next component on the right. You can set these components with setCurrentComponent(), setPreviousComponent(), and setNextComponent(), respectively.

The NavigationManager component is illustrated in Figure 22.4, “NavigationManager with Three NavigationViews”.

486

Toolbar

Mobile Applications with TouchKit

Figure 22.4. NavigationManager with Three NavigationViews

The navigation manager is important for responsiveness, because the previous and next components are cached and the slide animation started before server is contacted to load the new next or previous views.

Switching between the views is done programmatically according to user interaction; swipe gestures are not supported at the moment.

Handling View Changes

While you can put any components in the manager, some special features are enabled when using the NavigationView. When a view becomes visible, the onBecomingVisible() method in the view is called. You can override it, just remember to call the superclass method.

@Override

protected void onBecomingVisible() { super.onBecomingVisible();

...

}

Tracking Breadcrumbs

NavigationManager also handles breadcrumb tracking.The navigateTo() pushes the current view on the top of the breadcrumb stack and navigateBack() can be called to return to the previous breadcrumb level.

Notice that calling navigateTo() with the "previous" component is equivalent to calling navigateBack().

NavigationManager

487