Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

TouchMenu component

Mikael Grankvist
1 decade ago Feb 11, 2010 11:25am

Committed the TouchMenu component.
The component is a menu component panned for use with a "small" touch screen (7"-10").
The menu supprts dragging as well as navigation with directional arrows in the component.
Columns and rows are automatically restricted to as many as fits inside if sizes are not according to content (width = -1, height = -1), but defined as % or px.

Source
Demo
Video

A small sample with a couple of buttons:

import org.vaadin.touchmenu.TouchMenu;
import org.vaadin.touchmenu.TouchMenu.Command;
import org.vaadin.touchmenu.TouchMenu.TouchMenuButton;

import com.vaadin.Application;
import com.vaadin.ui.Window;

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

Styling "on the fly" is possible through the TouchMenu component with
setLeftStyle(String); for the left directional arrow
setRightStyle(String); for the right directional arrow and
setButtonStyle(String); to set style for all buttons.

Component is untested on mobile platforms. (dragging being the main problem)

Kim Leppänen
1 decade ago Feb 11, 2010 11:39am
Henri Sara
1 decade ago Feb 11, 2010 11:47am
Dmitri Livotov
1 decade ago Feb 11, 2010 12:31pm
Mikael Grankvist
1 decade ago Feb 11, 2010 12:32pm
Mikael Grankvist
1 decade ago Feb 11, 2010 1:45pm
Dmitry Tche
1 decade ago May 06, 2010 9:48am
Mike Grossenbacher
1 decade ago Nov 28, 2010 1:35pm
Daniel Valencia
1 decade ago Feb 17, 2011 5:37am
Mikael Grankvist
1 decade ago Feb 21, 2011 6:41am
Mikael Grankvist
1 decade ago Jun 21, 2011 6:52pm
Robert Loew
1 decade ago Sep 29, 2011 12:53pm
Hugh Wheeler
10 years ago Nov 16, 2011 2:55am
Mikael Grankvist
10 years ago Dec 09, 2011 12:18pm
Mikael Grankvist
10 years ago Dec 11, 2011 12:30pm
Chethan b d
9 years ago Apr 27, 2012 1:35pm
Claudio Pulerà
9 years ago Oct 10, 2012 8:52am
Vittorio Zapponi
9 years ago Nov 20, 2012 3:22pm
Mario Leggio
9 years ago Feb 12, 2013 8:24am
Mikael Grankvist
6 years ago Apr 20, 2015 7:53am
Andéol Claveau
6 years ago Jul 01, 2015 9:17am
Mikael Grankvist
6 years ago Jul 01, 2015 9:43am
Mikael Grankvist
6 years ago Sep 22, 2015 9:56am
Mohamet GUEYE
6 years ago Feb 19, 2016 4:48pm
Mikael Grankvist
6 years ago Feb 19, 2016 6:32pm
Mohamet GUEYE
6 years ago Feb 20, 2016 3:18pm