Identify Touch/Gesture Capable Devices using GWT

Question

I would like to know if it is possible to identify whether a device is capable of Touch/Gesture Events or not in GWT?

Devices like iPhone supports Multi-Touch Events to a huge extent. Similarly Google Chrome in Desktop also supports TouchEvents. And at present, Windows 8 has been designed with an IE that is responding to TouchEvents.

I am working on an Application where i want to restrict certain features to only Touch/Gesture Capable Devices! Any Solution, please help?

score 1 · Answer 1 · answered Dec 07 '12 at 06:52

1

I don't think there's any other way than UA sniffing.

answered Dec 07 '12 at 06:52

Thomas Broyer

64,353
7
91
164

[`Windows.Navigator`](http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/Window.Navigator.html) ? – Thomas Broyer Dec 14 '12 at 12:16

score 1 · Answer 2 · edited May 23 '17 at 12:04

1

GWT currently does not provide such utility.

Also, till gwt provides us a direct utlity api, it would make sense to write jsni over existing javascript techniques like these stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript .

For windows 8 the msdn document to refer is http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx

edited May 23 '17 at 12:04

Community

1
1

answered Dec 07 '12 at 10:12

appbootup

9,537
3
33
65

yeah, i saw this one. But this has problems when it comes to Windows 8. In Windows 8, it is simply accepting everything as touch.... – Vijay Sarin Dec 07 '12 at 11:18
Its classic Microsoft approach :( . We are stuck customizing code to specifically to work on IE10. – appbootup Dec 10 '12 at 08:37

Vijay Sarin · Accepted Answer · 2012-12-18T12:19:40.777

I did this with User Agent Check in Deferred Binding. I created a white list so that more devices can be added later.

Here is the Code,

<!-- Definitions for mobile -->
<define-property name="mobile.user.agent" values="android, ios, not_mobile" />
<property-provider name="mobile.user.agent"><![CDATA[
{
   var ua = window.navigator.userAgent.toLowerCase();
   if (ua.indexOf("android") != -1) { return "android"; }
   if (ua.indexOf("iphone") != -1) { return "ios"; }
   if (ua.indexOf("ipad") != -1) { return "ios"; }
     return 'not_mobile';
   }
]]></property-provider>

<!-- Constrain the value for non-webkit browsers -->
<set-property name="mobile.user.agent" value="not_mobile" >
  <none> <!-- Actually means NOR, in this case "not safari" -->
    <when-property-is name="user.agent" value="safari" />
  </none>
</set-property>

Then i defined my classes using the replace-with property in my Module file. Here for example, i have replaced flash player with HTML5 videos for devices like iPad.

<replace-with class="com.example.HTML5Player">
        <when-type-is class="com.example.FlashPlayer" />
        <any>
           <when-property-is name="mobile.user.agent" value="android" />
           <when-property-is name="mobile.user.agent" value="ios" />
        </any>
</replace-with>

Identify Touch/Gesture Capable Devices using GWT

3 Answers3