Mobile Applications with TouchKit

22.5.4. NavigationButton

The NavigationButton is a special version of the regular Button designed for navigation inside a NavigationManager, as described in Section 22.5.3. Clicking the button will automatically navigate to the defined target view. The view change animation does not need to make a server request first, but starts immediately after clicking the button. If you leave the target view empty, an empty placeholder view is shown in the animation. The view is filled after it gets the content from the server.

You can give the target view either in the constructor or with setTargetView().

NavigationView view = new NavigationView("A View");

...

NavigationButton button = new NavigationButton("Click");

button.setTargetView(view);

...

Notice that the automatic navigation will only work if the button is inside a NavigationManager (in a view inside it). If you just want to use the button as a visual element, you can use it like a regular Button and handle the click events with a ClickListener.

Styling with CSS

.v-touchkit-navbutton { }

.v-touchkit-navbutton-desc { }

The component has an overall v-touchkit-navbutton style. If the component description is set with setDescription(), it is shown in a separate <span> element with the v-touchkit-navbutton-desc style.

22.5.5. Popover

Popover is much like a regular Vaadin sub-window, useful for quickly displaying some options or a small form related to an action. Unlike regular sub-windows, it does not support dragging or resizing by the user. It can have a caption, but usually does not. As sub-windows usually require a rather large screen size, the Popover is mainly applicable to tablet devices. When used on smaller devices, such as phones, the Popover automatically fills the entire screen.

488	NavigationButton

Mobile Applications with TouchKit

Figure 22.5. Popover in a Phone

In the following example, we extend Popover to use it. It is modal by default. Notice that the screen size is not available in the constructor, so we have to postpone using it to the attach() method.

Popover windows are added to an application-level Window object with addWindow(), just like sub-windows in a regular Vaadin application.

if (event.getButton() == emailButton) {

ComposeView composeView = new ComposeView(smartphone); getWindow().addWindow(composeView);

return;

}

The resulting user interface in a tablet device is shown in Figure 22.6, “Popover in a Tablet Device”.

Popover

489