Directory

← Back

TouchMenu

A visual menu

Author

Rating

Popularity

<100

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);
}

Compatibility

(Loading compatibility data...)

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 menu TouchMenu - Vaadin Add-on Directory
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.
Old-Source
Forum
Old-Demo
Demo
Source
Issue tracker

TouchMenu version 0.3.5
null

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

Online