Need to react on touchstart event.

Vaadin 6 / 7 / 8 Framework UI
1

I have implemented a drop-dead simple page for use on mobile devices. However, I have realized that I need to react on the touchstart event, not on the touch end as is the default when dealing with a simulated click.

What is the easiest way to handle such a need (ontouchstart) ? I have seen the TouchScroll add-on, which uses touchstart as part of its processing. Is there a way to listen to relay client-side events such as touchstart to the server and attach a listener to a server-side component short of rolling my own GWT component ?

2

See
Touch onclick delay example
 for an interesting example (works only on webkit touch enabled devices such as Apple iP*s and Android tablets.

There is a 400ms delay (roughly) between a tap and the resulting onclick.
Worse obviously if the user just sits on the button.

In my application I need to register the actual tap, as soon as possible. It would have been cool if touchstart had been somehow mapped to onmousedown, as this would have given me a workaround using AbstractComponent events, but this does not seem to be the case (just reading the code quickly).

It seems that the two ways out are

  • roll your own widget coding
  • dirty hack using an HTML layout or some such to directly call my main servlet on a touchstart and dispatch from there (I have already had to extend it to handle ICEPush and MobileSafari gunk, one more hack won’t kill).
3

I found a possible solution for supporting touchstart at
http://jectbd.com/?p=1289
 that looked simpler than my initial failed attempt at using the TouchScroll addon as a basis.

Si I tried to integrate the code from http://development.lombardi.com/wp-content/uploads/2010/03/touch.tar.gz The file defines two tiny widget sets that add support for touch events.

I have created a new project based on the 1.3.3 archetype, and included the files from the above archive inside.

The bottom part of the MyWidgetset.gwt.xml is as follows after hand-editing the user agent and running the plugin and

	<set-property name="user.agent" value="safari"/>
	<inherits name="com.vaadin.terminal.gwt.DefaultWidgetSet" /> 
    <inherits name="com.google.gwt.user.MobileSafari" />
    <inherits name="com.lombardi.mobilesafari.MobileSafariEvents" />

The plugin is confused by the presence of several .gwt.xml files, so I have hand-edited the pom.xml to refer explicitly to refer explicity to my widget set.

              <modules>
              	<module>org.concordiainternational.touchdiv.gwt.MyWidgetSet</module>
              </modules>

My problems are two-fold

  1. everytime I run the goals vaadin:update-widgetset gwt:compile the MyWidgetSet.gwt.xml file keeps getting longer (the two MobileSafari inherits are added at the bottom)

  2. most importantly, I get the following errors in spite of explicity defining the user.agent

[INFO]
    Compile of permutations succeeded
[INFO]
 Linking into E:\dev\owlcms\touchdiv\target\touchdiv-0.0.1-SNAPSHOT\VAADIN\widgetsets\org.concordiainternational.touchdiv.gwt.MyWidgetSet.
[INFO]
    Link succeeded
[INFO]
    Compilation succeeded -- 34.469s
[INFO]
 Loading inherited module 'com.google.gwt.user.MobileSafari'
[INFO]
    [ERROR]
 Property 'user.agent' not found
[INFO]
    [ERROR]
 Failure while parsing XML

This is my first attempt at doing GWT mangling, kind help requested.

4

There used to be a bug (
#5026
) that caused this for non-Vaadin GWT modules, fixed in 6.4.0. Which Vaadin version are you using?

If it occurs with a later version, there has been a regression so please open a ticket.

Could it be that order matters here - not sure if it helps, but try setting the user.agent at the end of your widgetset. I cannot recall in which order things get overridden in a GWT module.

Also, check that the GWT version you are using is the correct one both for the Vaadin version and for MobileSafari.