TouchMenu component

Flow
1

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)

2

This is a cool widget. May I make a small feature request, once I’ve dragged the icons as much as I want, I release the left mouse button. At this point the icons “jump” to their correct places. It would be nice if this transition (between the place where I dropped the icons and their actual still position) would be animated.

3

Nice component for a number of uses.

Two small bugs (seen on Chrome):

If you make the window smaller, some of the columns may disappear as expected. However, they do not reappear when making the window bigger again, but explicitly resetting the number of columns is required.

Sometimes the left arrow gets stuck in the enabled state (look) even when at the left edge of the menu. I have seen this in the sample application with three rows and e.g. turning off and on the arrows, scrolling back and forth with the arrows. This only happens every now and then, not sure how to reproduce.

4

Very interesting one.

The funny thing is that we also got a request earlier this week from one of our customers to design a new touch screen optimized interface for their library as they going to buy new touch screen terminals for the internal library reading hall :wink:

5

I’ve been thinking about the animation from release position to static position, but as of yet haven’t gotten my head around for the from position → to position movement amount. I’ll be adding it as soon as I get a grasp on it as it bothers me a little bit too.

I’ve so far only briefly tested the component on chrome.

For the columns I need to make a requested column amount so that the correct amount would come back when resized back. Loosing columns happens on all browsers right now.

For the dissabling arrows I have an inkling on what the problem might be.

6

Requested columns are now remembered and reappear on resize action.
Found the stuck on enabled state too and it should be fixed also.

Update.

Now positioning after dragging is animated and added/fixed button removal function. Remove button function
Video
.

Aslo fixed a bunch of other small things that came up.

7

Nice addon!
Is it possible to make ButtonSize enum public? No way to use it now…

8

Struggled with the same issue, why not make the ButtonSize enum public?

9

+1

we need the ButtonSize public !!

10

Changed ButtonSizes to public.
Will try to take time at some point to have the button sizes free.

11

TouchMenu now supports touch events and is usable with tablets and touch phones.
Functionality tested only with Android 2.2.1 and 3.0.1

12

Hi,

I am trying to use TouchMenu 0.4.0 with vaadin 6.6.7 but I am not able to compile the widgetset in eclipse (same with vaadin 6.6.6).

Is TouchMenu working with vaadin 6.6.7 / 6.6.6 ? Or should I switch to 6.5 ?

Error-Message :
[WARN]
Widget class org.vaadin.touchmenu.client.ui.VTouchMenu was not found. The component org.vaadin.touchmenu.TouchMenu will not be included in the widgetset.

Before this error GWT compiler shows :
Validating newly compiled units
[ERROR]
Errors in ‘jar:file:/D:/development/CoCoMaUI/WebContent/WEB-INF/lib/TouchMenu-0.4.0.jar!/com/google/gwt/mobile/client/TouchEvent.java’
[ERROR]
Line 33: The return type is incompatible with NativeEvent.getTouches()
[ERROR]
Line 33: Methods cannot be overridden in JavaScriptObject subclasses

gwt-dev.jar and gwt-user.jar are 2.3.0

Thanks

13

I am also getting this error. I notice the switch component also had this error and was fixed rather rapidly with a new version. Is there any chance of a fix for this soon?

Hugh

14

Hi.

Haven’t had too much time lately, but I’ll try to remember and get this fixed and updated asap.
Probably during the weekend. I’ll inform again when it’s done.

-Mikael

15

Updated the component to work with 6.6 and 6.7
Sadly the touch functionality broke during the update and finger swipe will not work on a tablet.
I’ll have to fix this when I get the time.

-Mikael

16

Hi All,

I need to Scroll both Vertically (using top_arrow.jpg, down_arrow.jpg) as well as Horizontally. What changes i can make in the Source Code.

Pls anyone guide me to do this.

Thanks & Regards,
Chethan

17

Hi All,
I have some troble to use this add on , because it not work on IE 8 , for test i try to use dirctly the code of the test application that i find in the jar, and if i run under firefox or IE 9 all work , but if i use IE 8, nothing was Show .
I try to watch the vaadin debug console and i found this error:

JavaScriptException: (Error): Invalid argument.
number: -2147024809
description: Invalid argument.Processing time was 31ms for 1642 characters of JSON
Referenced paintables: 3

can you help me , or fix it .

Thanks

P.S. I forgot , i use vaadin 6.6.6.

18

I’m trying to use your TouchMenu but doesn’t work. I receive this error when I try to run it:

Widgetset does not contain implementation for org.vaadin.touchmenu.TouchMenu. Check its @ClientWidget mapping, widgetsets GWT module description file and re-compile your widgetset

The compilation of widgets was made:

INFO: Widgetsets found from classpath:
com.vaadin.addon.touchkit.gwt.TouchKitWidgetSet in jar:file:/Users/vittorio/workspaceJuno/MostreNew/WebContent/WEB-INF/lib/vaadin-touchkit-cval-2.1.3.jar!/
com.vaadin.terminal.gwt.DefaultWidgetSet in jar:file:/Users/vittorio/workspaceJuno/MostreNew/WebContent/WEB-INF/lib/vaadin-6.8.4.jar!/
it.prismatdi.mostre.widgetset.MostrenewWidgetset in file:/Users/vittorio/workspaceJuno/MostreNew/src
org.vaadin.touchmenu.widgetset.TouchmenuWidgetset in jar:file:/Users/vittorio/workspaceJuno/MostreNew/WebContent/WEB-INF/lib/TouchMenu-0.5.0.jar!/
org.vaadin.simplegesture.SimplegestureWidgetset in jar:file:/Users/vittorio/workspaceJuno/MostreNew/WebContent/WEB-INF/lib/SimpleGesture-0.8.jar!/
com.invient.vaadin.charts.widgetset.InvientChartsWidgetset in jar:file:/Users/vittorio/workspaceJuno/MostreNew/WebContent/WEB-INF/lib/invientcharts-0.8.6.jar!/

Any ideas,please?

19

Cool add-on!
Please, is it possible to a method to enable or disable a single button?
In my opinion, best solution could be use a “MenuButton.setEnabled(boolean)” method
Regards

20

After a long silent period I finally got the time to remake the addon.
Now there is a updated version for Vaadin 7.

Buttons can now basically be any size and they are their own component TouchMenuButton that is added to the menu.
Buttons can now also be disabled with button.setEnabled(false);

Updated component works also on touch devices.

Problems and issues should now be marked to the issue tracker on GitHub.

Also to note thet the 6.x version will not be maintained anymore. (Sorry if this causes problems for you.)