Refresh Browser v1.1

Just a bit of self promotion...

My iPad app that I built for the guys at Breakpoint IT, Refresh Browser, had its first maintenance release (v1.1)

http://itunes.apple.com/qa/app/refresh-browser/id442132171?mt=8

So check it out and support!

Sencha Touch Scrolling a Non Touch Blackberry OS 6 Device

This is a follow up to my first post about getting clicking to work on Non-Touch Blackberry OS 6 devices with the Sencha Touch framework.

I have come up with a way to get the components to scroll when you move your mouse to the edges. It is a bit rough around the edges and can use some polish but it's a working example and can be used.

This does not require any hacking of the Sencha Touch library which is both good and bad. The good is that you don't have to mess with the library risking something to get broken the bad is that you have to add this for every panel.

Without further ado here's an example Panel implementing a List:

var scrollList;

app.views.scrollList = Ext.extend(Ext.Panel, {
    listeners: {
        mousemove: {
            element: 'el',
            fn: function (evt, div, el) {
                if (scrollList.scroller.offsetBoundary.top == 0) {
                    scrollList.scroller.updateBoundary();
                }
                var maxOffset = scrollList.scroller.offsetBoundary[1] - 400;
                if (evt.xy[1] > 300 && scrollList.scroller.offset.y >= maxOffset) {
                    var offset = -1 * scrollList.scroller.offset.y + 10;
                    scrollList.scroller.scrollTo({
                        x: 0,
                        y: offset
                    });
                } else if (evt.xy[1] < 60 && scrollList.scroller.offset.y <= 0) {
                    scrollList.scroller.scrollTo({
                        x: 0,
                        y: (-1 * scrollList.scroller.offset.y) - 10
                    });
                }
            }
        }
    },
    dockedItems: [{
        xtype: 'toolbar',
        title: 'Scroll List'
    }],
    items: [{
        xtype: 'list',
        id: 'scrollList',
        height: 275,
        scroll: 'vertical',
        store: app.stores.scrollList,
        itemTpl: '{a}, {b}',
        onItemDisclosure: function (record) {

        }

    }],
    initComponent: function () {
        app.stores.scrollList.load();
        app.views.scrollList.superclass.initComponent.apply(this, arguments);
        scrollList = Ext.getCmp('scrollList');
    }

});

What we do here is we attach a mousemove listener to the underlying panel and call the scrollTo() function on the list's Ext.util.Scroller instance. If anyone has any improvements/suggestions/their own implementation I would love to hear it.
Here's a demo:

Hope this helps those who have hit this problem and hopefully Sencha will implement this the "right" way.

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.