Category Archives: PhoneGap

XHR Post in Sencha Touch 1 & PhoneGap

13 Feb 2012

Sencha Touch has built in support for JSONP via “GET”, but if you have a lot of data to send you may quickly run into the GET character limit which varies across browsers. For a lot of data, “POST” is the preferred method and may be even preferred over GET for security reasons. The rub is that form POSTs will reload a page meaning that your app will reload and you’ll lose whatever state you had. That means we’ll have to do the POST via AJAX.

The astute among you might first ask about the cross domain policy and how it would prevent such a thing from happening (which JSONP by definition allows but is not useful here because its essentially a GET). As PhoneGap loads your Sencha Touch project via the file:// protocol cross domain XHR (XMLHttpRequest) is thus possible. Files loaded in this manner a free of the same domain policy.

With that aside it appears that Sencha Touch 1 just doesn’t have AJAX form posts as part of its framework but we can use Ext.Ajax.request() which allows us to set the desired form method and gives us success and error callbacks and even a timeout – which Ext.util.JSONP.request() lacks (bonus!).

The only additional setup is to add android.permission.INTERNET to the android manifest and to add the domain that you’re posting to to the whitelist in iOS. There has been some discussion about whitelisting in PhoneGap, it might be worthwhile to see how its evolved.

Here is a code snippet showing how the Ext.Ajax.request() method can be utilized within Sencha Touch:

...
Ext.Ajax.request({
	url: 'http://www.somewhere.com',
	method:'POST',
	params: 'configuration object goes here',
	scope:this,
	timeout:15000,
	disableCaching:true,
	failure: function(responseObj, opts){
		// handle your error response object here
	},
	success: function(responseObj, opts){
		// handle your success response object here
	}
});
...

The configuration object is simply something along these lines: {name:value,name:value,name:value,……}

Set App Scaling in PhoneGap, Android

10 Feb 2012

One of the very first things any Android PhoneGap developer will run into is setting the appview scale to set the proper view size and prevent “zooming” within your app. The “zoom” could happen if the user taps a text field or pinches the screen. We want the scale set appropriately and zooming disabled.

Open up your main activity.java (located in your “src” directory) and compare it with what I have below:

package com.rickluna.myapp;

import com.phonegap.*;
import android.os.Bundle;
import android.view.WindowManager;
import android.webkit.WebSettings;

public class myAppActivity extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");

        /* lock scaling in android 2.2 code to be pasted right here */

    }
}

The fix for this is easy and tested on Android 2.2, Android 2.3.3, and Android 3.1:

...
        /* lock scaling in android 2.2 */
        appView.getSettings().setSupportZoom(false);
        appView.getSettings().setUseWideViewPort(false);
        WebSettings ws = appView.getSettings();
        ws.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
        appView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
        appView.setInitialScale(0);
        ws.setSupportZoom(false);
        ws.setBuiltInZoomControls(false);
        ws.setUseWideViewPort(false);
...

The thing that you may find good to know is that you can specify the zoom density to whatever you like. I find that MEDIUM and initialScale of “0” gives me something that looks great across Android phones and looks consistent with what happens on iPhones. That being said I have used FAR on one occasion with initialScale set to “100”.

According to the android docs FAR should have an initial scale of “100” and MEDIUM should be “150”, however, according to my testing, you want an initialScale of 0 for MEDIUM. The reason is that in Android 2.3.6 (which many current phones are running such as the popular Samsung Galaxy S2)  the webview zooms in when tapping a text field. To prevent that and get consistent behavior across the range of android versions I have to set the intialScale to “0”, so the final setting is initialscale 0 and ZoomDensity MEDIUM.