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
Fixed widgetset problem with 6.6 and 6.7
- Released
- 2011-12-11
- Maturity
- BETA
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 6.6+
- Vaadin 6.2+ in 0.3.5
- Vaadin 6.0+ in 0.3.6
- Vaadin 6.5+ in 0.4.0
- Vaadin 7.4+ in 1.0.0
- Vaadin 8.0+ in 2.0.0
- Browser
- Firefox
- Opera
- Safari
- Google Chrome
- Internet Explorer
TouchMenu - Vaadin Add-on Directory
A visual menuForum
Old-Demo
Demo
Source
Issue tracker
TouchMenu version 0.3.6
Made ButtonSizes public.
TouchMenu version 0.4.0
Touch event support. Tested with Android 3.0.1 and Android 2.2.1
TouchMenu version 0.5.0
Fixed widgetset problem with 6.6 and 6.7
TouchMenu version 1.0.0
- Vaadin 7 version.
- Buttons are their own components.
- No more size constrained buttons.
- ClickListeners can be added directly to the button or to the TouchMenu that redirects all button click events
- Easier styling
TouchMenu version 1.1.0
Added support to choose scroll direction as Horizontal or Vertical.
TouchMenu version 2.0.0
- Updated to Vaadin 8.0.0