TouchMenu

A visual menu

View larger

Close

View larger

Close

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

• Old-Source
• Forum
• Old-Demo
• Demo
• Source
• Issue tracker

Compatibility