path problems porting web-app to phonegap

Question

I have what I think is a fairly standard set-up of an existing web-app and would like advice on how best to adapt it for creating native versions via PhoneGap, in a way that we can keep developing the web-app and updating the phonegap generated versions from it with minimal rework.

I am a PhoneGap novice. I have searched around and tried various suggestions from StackOverflow etc with no luck, at least for my set-up.

The app is developed in GWT and consists of:

static resources in a shared folder for all of the app

/static/ with images, fonts, css. The css define some font-families, referencing font files in /fonts

We refer to these static resources from html files and JavaScript code using absolute paths.

static resources in a number of sub-folders (by GWT modules FYI)

Such as /LoginGadget, which will have GWT generated html, Javascript and sometimes subfolders with css and css-images.

GWT-RPCs

These are basically servlets where GWT takes care of serialization etc, and are accessed from our client code via XHRs under the covers

PhoneGap Build

I have started looking at creating a packaged app using PhoneGap and run into some problems where I need advice (Android example).

I have created /assets/www and put an index.html file in there and got it going. I copied a version of our /static/ folder and our /LoginGadget folder under that "root" to see, and started it using

super.loadUrl("file:///android_asset/www/index.html");

which works.

In all our GWT generated html and Javascript files we have references to static resources using both absolute (e.g. "/static/....") and relative paths (e.g. from a LoginGadget Javascript, it might reference "css/some.css").

The relative paths work, as they reside "under" the folder where the html/js that references them lie.

Problem 1

However, references to absolute paths fail, despite PhoneGap starting by saying:

DroidGap: url=file:///android_asset/www/index.html baseUrl=file:///android_asset/www/

I expected a reference to "/static/images/file.png" from say index.html to be appended to the "baseUrl" to give file:///android_asset/www/static/images/file.png and hence work, as that is where the file lies.

I have had to modify index.html to use "static/image/file.png" for it to work. But I'd have to recompile all our GWT app with a different configuration to modify all references to resources, and references from other files in sub-folders back to "/static/" won't work if modified to be just "static/".

How can I get absolute path references to "map" to /assets/www or similar? (See below, I've looked at using the "base" tag....)

Problem 2

The GWT RPCs make the XHR request to the server the html/js was served from. This works great as the app doesn't have the host server name hard-coded, and is in fact deployed on many different appengine appids/domains for testing etc.

Here the html/js files are "served" from file:/// hence I need to specify the server somehow.

I tried specifying with the "base" tag as documented, but then any reference I have in my html/js to a resource that doesn't specify "file://" seems to be made to the server specified in "base"..... hence I am not loading my local resources anymore and I basically have a web-app served from my server.

Want

What I'd like to do, is to be able to take the (pretty large) compiled and tested app from my wab-app's war (/static and all my /GWT-Module folders) untouched and copy them into /assets/www on my PhoneGap app and then add some boiler plate or start-up code and run as is.

Sounds like a big request, but I think if I could properly specify two things:

• file path to use as "root" for absolute paths for resource requests that don't specify a http/https protocol (or other protocols.....which I already see are handled in DroidGap.java)

• server (protocol, hostname, port) to use for any XHR requests

Then everything would come out in the wash!

I thought this would be a faily "standard" setup and already covered. Maybe it is and I'm just missing something.

Comments? suggestions?

Thanks in advance for any help.

Answer 1

Do you know about mgwt? http://www.m-gwt.com

Its a mobile framework for GWT built by one of the GWT Steering Committee members and it has phonegap integration for GWT apps as well.

There is a lot of docs in the projects and a very friendly user group.

Let me address your problems with a little more detail:

Problem1:

If you are using absolute path you will get that inconsistent behavior with phonegap, since the browser builds those urls locally and a reference to / means the root entry on the phone. Using absolute URLs is a bad idea most of the times and I would recommend you to change that in your app (as you already did).

Problem2:

To use GWT RPC with phonegap read this blog post that I made to address the issues: http://blog.daniel-kurka.de/2012/04/gwt-rpc-with-phonegap-revisited.html