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.
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”.
Mobile Applications with TouchKit
Figure 22.6. Popover in a Tablet Device
Alternatively, you can call the showRelativeTo(), which displays the sub-window relative to an existing component in the user interface.
Popover popover = new Popover(); popover.setContent(mailboxHierarchyView); popover.setClosable(true); popover.showRelativeTo(showMailboxHierarchyButton); popover.setHeight(getParent().getHeight() - 100, UNITS_PIXELS);
In this case, you should not call addWindow() explicitly.
Styling with CSS
.v-touchkit-popover .v-touchkit-fullscreen { }
.v-touchkit-popover .v-touchkit-relative { }
.v-touchkit-popover .v-touchkit-plain { }
The component has an overall v-touchkit-popover style. If full-screen, it also has the v-touchkit-fullscreen style, if positioned relatively it has v-touchkit-relative, and if not, the v-touchkit-plain style.
22.5.6. Switch
The Switch component is a CheckBox that looks like the switch button in Apple iOS.
Switch switch = new Switch(); switch.setCaption("Do I look like iOS?"); layout.addComponent(switch);
Styling with CSS
.v-touchkit-switch { }
.v-touchkit-switch-slider { }
The component has an overall v-touchkit-switch style. The slider element has v-touchkit-switch-slider style.
Mobile Applications with TouchKit
22.5.7. VerticalComponentGroup
The VerticalComponentGroup is a layout component for grouping components in the vertical stack. The most typical use of the VerticalComponentGroup is to make vertical navigation menus containing NavigationButtons for the mobile application.The VerticalComponentGroup and HorizontalComponentGroup both extend AbstractComponentGroup which is inherited from the AbstractComponentContainer. In the client side both component group widgets are extending the lightweigth FlowPanel.
Styling with CSS
.v-touchkit-verticalcomponentgroup { }
The component has an overall v-touchkit-verticalcomponentgroup style. If the component has a caption, the v-touchkit-has-caption style is added.
22.5.8. HorizontalComponentGroup
The HorizontalComponentGroup is mainly intended to group buttons inside the VerticalComponentGroup slots.
HorizontalComponentGroup horizontalCGroup = new HorizontalComponentGroup(); horizontalCGroup.addComponent(new Button("First")); horizontalCGroup.addComponent(new Button("Another"));
NavigationButton navButton = new NavigationButton(); button.setIcon(new ThemeResource("../runo/icons/32/ok.png"));
VerticalComponentGroup verticalCGroup = new VerticalComponentGroup(); verticalCGroup.setMargin(true);
verticalCGroup.addComponent(horizontalCGroup); verticalCGroup.addComponent(new Button("Button")); verticalCGroup.addComponent(new TextField("TF's caption")); verticalCGroup.addComponent(navButton);
22.5.9. TabBarView
The TabBarView is a layout component that consist of a tab bar and content area. Each tab will have it's own content area which will be displayed when a correspoding tab is selected. TabBarView is inherited from the ComponentContainer but uses it's own specialized API for monipulating tabs. removeComponent() and addComponent() will throw an UnsupportedOperationException if used.
TabBarView bar = new TabBarView();
//Create some Vaadin Component to use as content Label content = new Label("Really simple content");
//Create a tab for it
Tab tab = bar.addTab(label);
//Set tab name and/or icon tab.setCaption("tab name"); tab.setIcon(new ThemeResource(...));
//Programmatically modify tab bar
Tab selectedTab = bar.getSelectedTab(); bar.setSelectedTab(selectedTab); //same as user clicking the tab bar.removeTab(selectedTab);
VerticalComponentGroup |
491 |
