Monday, March 28, 2011

Getting Sencha Touch to work on Non Touch Blackberry 6 Devices

Recently I decided to begin researching the current batch of options for cross-platform mobile development with a primary target device being the Blackberry Bold.
The good news is the phone runs a WebKit browser, the bad news is that the phone still sucks. Nonetheless, without much digging a seemingly wonderful framework was brought to my attention from a company I'm familiar with, Sencha, the company behind the Ext-GWT framework.
Sencha Touch is probably the most powerful HTML5 mobile frameworks out today. However with all its greatness it has one shortcoming: Though they state they have Blackberry 6 support,  they really only support one Blackberry 6 device, the Torch.

So what happens when you try to access an app built using Sencha Touch on a non-touch Blackberry? It renders well but you can't click anything, making the app just eye candy.

Alas, there is a quick and dirty solution to it.

NOTE: There are two versions of Sencha Touch, the open source (GPLv3) and the paid commercial license. This solution involves modifying the Sencha Touch source. I only show it as a demonstration, use it as-is. 

Sencha Touch provides a wrapper for mouse & touch events to support gestures, dragging and touching. This modification involves making Sencha think of the Blackberry as if it were a standalone browser in terms of input. This may not be the best/only/right solution but it's a start. 

I looked at the sencha-touch-debug.js file since its detailed and I could understand what was going on. 

The three changes that need to be made are:
Line 4763:
Touch: ('ontouchstart' in window) && (!Ext.is.Desktop && !Ext.is.Blackberry),

Line 13964:
if (!Ext.desktop && !Ext.Blackberry) {...}

Line 18217:
if (Ext.is.Desktop || Ext.is.Blackberry) {...}

There you have it.

Hopefully future versions of Sencha Touch will implement support for non-touch Blackberry 6 devices through a much better way than my hack.

15 comments:

  1. This works pretty well for basic interaction. Swipe scrolling is a little... glitchy. So we're going to try to just avoid it altogether on our project. Nevertheless, thanks for this!

    ReplyDelete
  2. I'm going to try to look into scrolling in the next week and see what I can do. The issue is, it scrolls on a 'drag' motion instead of browser-based scrolling.

    Glad it's working out for you.

    ReplyDelete
  3. Thank you! This works great, you're a life saver.

    ReplyDelete
  4. Hi, which browser version is the minimum required? It does not render fine on my 8520

    ReplyDelete
  5. Is the 8520 running BB OS6? From what I can tell it's not. It needs to be running a WebKit browser to support Sencha Touch

    ReplyDelete
  6. Yea, Sencha Touch only works on BB OS6+ (WebKit)

    ReplyDelete
  7. I tried something like this a while back and while it let it work on non-touch phones, it stopped working for touch phones. Does this solution work around that?

    ReplyDelete
  8. This fix works fine on both touch and non-touch devices as well as PCs running WebKit

    ReplyDelete
  9. I posted this over on FUNKJED too...but if you undo all the things you did to the sencha-touch.js. Look for this line of code:
    onMouseEvent:function(a){if(!a.isSimulated)

    and add !Ext.is.Blackberry like so

    onMouseEvent:function(a){if(!a.isSimulated&&!Ext.is.Blackberry)
    It should allow for clicking with the trackpad as well as clicking with touch and scrolling with touch.

    To fix a scrolling bug in 1.1 with touch you'll also need to look for:
    onTouchEnd:function(g){

    and stick in if(Ext.is.Blackberry){g.preventDefault()} like so

    onTouchEnd:function(g){if(Ext.is.Blackberry){g.preventDefault()}

    ReplyDelete
  10. hi,
    I'm new in the blackberry development. i created a sencha application and i want to run it on blackberry simulator.
    How can i do it? where should i put model view, controller file of sencha project in blackberry phonegap(blackberry webwork )
    application.
    Can you suggest me how to do?

    ReplyDelete
  11. Hi,

    can you please help me to implement this in sencha touch 2 ?
    It will be very help full.

    Thanks.

    ReplyDelete
  12. Sencha development process always uses the external javascript that is more of use in development and advancement of web application

    ReplyDelete
  13. we use invoice generetaing software catsbill for invoices
    Visit Catsbill.com!

    ReplyDelete