Search code examples
gwtmobiletouchdevicejsni

Identify Touch/Gesture Capable Devices using GWT

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?

Solution

  • 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>