Sencha + PhoneGap

Question

I am about to develop an application for iPhone using Sencha Touch + PhoneGap and I have a few very basic questions:

1)I want to read an XML file which is at the location http://abc.om/app/a3/. I used Sencha to read this xml but its giving me the following error:

XMLHttpRequest cannot load the url. Origin is not allowed by Access-Control-Allow-Origin.

Is this the right method/approach to use Sencha for reading the XML? If yes, then how do I resolve the above issue? Someone said that Sencha is client side, and it cannot read the Xml out of the domain - is this true? What happens in a mobile application? Should I use Phonegap here?

2)As I am developing an app for the iPhone, how should I check the app - using Chrome? Or using phonegap each time and then check it on an iPhone?

Answer 1

In general, PhoneGap applications do not suffer from cross-domain security restrictions once they are deployed to a mobile device. The reasons for this are different depending on which platform you are developing for, but for iPhone, it is because the your local PhoneGap assets are loaded into the browser on the iPhone using the file:/// URI; this allows you to get around the cross-domain security restriction. If you are creating a regular web site that is being hosted on a server, then you are restricted by this security policy. It is one of the benefits of creating PhoneGap applications.

1. I am not 100% familiar with Sencha, but you can use whatever framework on top of the basic XMLHttpRequest object to do cross-domain communication in PhoneGap. Be it Sencha, jQuery, xui, MooTools, etc.

2. For testing PhoneGap applications, I usually use a combination of my desktop browsers and some extra tooling to help me. In your case, if you load your PhoneGap application locally on your computer into a browser like Safari (which allows you to make XHRs off the file:/// URI), you won't see the cross-domain problems. Safari is one of the few browsers that allows you to do this. Alternatively, you can use a proxy on your local computer and have your local web server make the network requests and proxy them back to your application. I tend to use an awesome tool called sleight, which is a node.js web server that will reverse-proxy requests to a target external domain if the server can't find the requested asset locally on your computer. I'll try to lay out an example use of sleight for you:

   • Let's assume your PhoneGap application assets are located under ~/src/www, with the app being in index.html
   • Also assuming you want to access the abc.com domain from your PhoneGap app

You would use sleight like this:

$ cd ~/src/www
$ sleight target=abc.com

Now you have a local web server running that serves up all content under your www directory. From your index.html page now you can dispatch XHRs to http://abc.om/app/a3/, and sleight will proxy those back to you. So you can point your browser to http://localhost:8088/index.html and you'll get your PhoneGap app's index.html.

Sleight is an awesome tool for PhoneGap development as it allows you to test your PhoneGap apps on-the-go locally on your computer.