TouchMenu
A visual menu
A visual menu that supports navigation through directional buttons in the component and dragging.
- Percentual sizes according to Parent element
- Definite sizes in px
- undefined size according to rows and/or columns
- Animated movement (on/off) for directional arrows
- Item movement direction for directional arrows (From/towards arrow)
- If rows/columns would not fit inside drops to max amount that fits
- Touch event support.
- Horizontal or Vertical scrolling.
Sample code
public class TouchApplication extends Application { private Window mainWindow; public void init() { mainWindow = new Window("Application"); // Create menu with default size 800x400 TouchMenu touch = new TouchMenu(); touch.addButton("Coffee", null, menuCommand); touch.addButton("Sugar", null, menuCommand); touch.addButton("Honey", null, menuCommand); touch.addButton("Rain", null, menuCommand); touch.addButton("Movies", null, menuCommand); touch.setColumns(2); mainWindow.addComponent(touch); setMainWindow(mainWindow); } private TouchMenu.Command menuCommand = new Command() { private static final long serialVersionUID = 1L; @Override public void menuSelected(TouchMenuButton selectedButton) { mainWindow.showNotification("Clicked " + selectedButton.getCaption()); } }; }
package org.vaadin.demo; import com.vaadin.annotations.Theme; import com.vaadin.annotations.Title; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.data.Property; import com.vaadin.server.ThemeResource; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinServlet; import com.vaadin.ui.Notification; import com.vaadin.ui.UI; import com.vaadin.ui.VerticalLayout; import org.vaadin.touchmenu.TouchMenu; import org.vaadin.touchmenu.TouchMenuButton; import org.vaadin.touchmenu.client.Direction; import javax.servlet.annotation.WebServlet; @Theme("demo") @Title("MyComponent Add-on Demo") @SuppressWarnings("serial") public class DemoUI extends UI { private TouchMenu touchMenu; @WebServlet(value = "/*", asyncSupported = true) @VaadinServletConfiguration(productionMode = false, ui = DemoUI.class, widgetset = "org.vaadin.demo.DemoWidgetSet") public static class Servlet extends VaadinServlet { } @Override protected void init(VaadinRequest request) { touchMenu = new TouchMenu(2, 3); touchMenu.addTouchMenuListener(new TouchMenu.TouchMenuListener() { @Override public void buttonClicked(TouchMenuButton button) { Notification.show("Button clicked! " + button.getId()); } }); TouchMenuButton button = getButton("cake-48x48", "hundred", "position"); button.setCaption("Cake"); button.setWidth(100, Unit.PIXELS); button.setHeight(100, Unit.PIXELS); touchMenu.addComponent(button); button = getButton(); button.setIcon(null); touchMenu.addComponent(button); button = getButton("capsule-48x48", "hundred", "position"); button.setCaption("Capsule button"); button.setHeight(100, Unit.PIXELS); button.setWidth(100, Unit.PIXELS); touchMenu.addComponent(button); touchMenu.addComponent(getButton()); touchMenu.addComponent(getButton()); touchMenu.addComponent(getButton()); touchMenu.addComponent(getButton()); touchMenu.addComponent(getButton()); touchMenu.addComponent(getButton()); touchMenu.addComponent(getButton()); button = getButton(); button.setWidth(75, Unit.PIXELS); button.setStyleName("hundred"); touchMenu.addComponent(button); touchMenu.addComponent(getButton()); touchMenu.addComponent(getButton()); // Show it in the middle of the screen final VerticalLayout layout = new VerticalLayout(); layout.setStyleName("demoContentLayout"); layout.setSizeFull(); layout.addComponent(touchMenu); setContent(layout); } private TouchMenuButton getButton(String icon, String... styles) { TouchMenuButton button = getButton(icon); for (String style : styles) { button.addStyleName(style); } return button; } private TouchMenuButton getButton(String icon) { TouchMenuButton button = new TouchMenuButton(captions[next % captions.length], new ThemeResource("images/" + icon + ".png")); next++; return button; } private TouchMenuButton getButton() { TouchMenuButton button = new TouchMenuButton(captions[next % captions.length]); next++; return button; } private void editButton(TouchMenuButton button) { selection = button; buttonLayout.setVisible(true); updating = true; buttonHeight.setValue(button.getHeight() + "" + button.getHeightUnits()); buttonWidth.setValue(button.getWidth() + "" + button.getWidthUnits()); caption.setValue(button.getCaption()); updating = false; } String[] captions = new String[]{ "Cake", "Capsule button", "Coffee", "Sugar", "Honey", "Rain", "Movies" }; }
To change the navigation arrow images one just needs to override the background-image for the following styles: .c-touchmenu button.left-navigation { background-image: url(image/left-arrow.png); } .c-touchmenu button.right-navigation { background-image: url(image/right-arrow.png); } .c-touchmenu button.up-navigation { background-image: url(image/up-arrow.png); } .c-touchmenu button.down-navigation { background-image: url(image/down-arrow.png); }
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
- Updated to Vaadin 8.0.0
- Released
- 2017-03-03
- Maturity
- STABLE
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 8.0+
- Vaadin 7.4+ in 1.1.0
- Vaadin 6.6+ in 0.5.0
- Vaadin 6.5+ in 0.4.0
- Vaadin 6.0+ in 0.3.6
- Vaadin 6.2+ in 0.3.5
- Browser
- Firefox
- Opera
- Safari
- Google Chrome
- iOS Browser
- Android Browser
- Internet Explorer
- Microsoft Edge