Phonegap OrientationChange event

Currently phonegap doesn’t support raising the orientationchange javascript event that gets fired by most browsers. The result for my mobile web application is that it works nicely in Safari on the iPad, but once wrapped up in phonegap it’s unable to detect the device orientation being changed.

In the phonegap roadmap the orientationchange is marked as being fixed this month, but until that happens i needed a workaround.

There are quite a few posts on various forums that suggest using various permutations of window.onresize event and changing the panel width manually with panel.setSize() or calling panel.setOrientation().

E.G.

Unfortunately, it this code only works the first time the orientation is changed. For subsequent orientations, the event doesn’t fire.

 

The solution

After a couple of hours of tweaking and further searching i found this post, which details a solution which works perfectly.

Sencha touch : Ajax, Jsonp and scripttags

I started using the Sencha Touch javascript framework a number of weeks ago.  The basic plan for the application was to create a fully functioning web app, then using phonegap create a native iOS application.

The problem with this approach was that i ended up using Ext.Ajax.request to do all of the data calls without worrying about how phonegap would deal with ajax and the json objects that it was returning.  Needless to say the app didn’t work.  Any calls for data that go outside of the ipad are cross domain calls and need to be implemented with script and jsonp.

 Standard Ajax/Json request

 

JSONP Request

 

Asynchronous JSONP : The Problem

Now the problem with using the JSONP class is that it’s a singleton.  So by moving from
Ext.Ajax.request to Ext.util.JSONP.request we’ve not only lost the timeout capability, we’re also lost the ability to make asynchronous calls.

If you google it, you’ll find that one suggested approach is to set current to null before each jsonp request. It’s certainly been my experience from using Sencha 1.1 that this doesn’t work.

 

 

Asynchronous JSONP : The Solution

The solution is to use a store with a scripttag proxy. As all that’s actually happening is a scripttag being rendered to the page making the request, then you’ll be allowed as many calls as your browser can handle.

We then specify a callback parameter on the load method which allows us to interact with the actual response object rather than let the store fiddle with this json in preparation for it being wrapped up inside a data view.