Problems transferring web application to telephone interchange

Question

I have what I consider to be a fairly standard configuration of an existing web application, and would like to advise on the best way to adapt it to create your own versions via PhoneGap so that we can continue developing the web application and updating the editions created using the phone, with minimal refinement.

I am new to PhoneGap. I searched around and tried various suggestions from StackOverflow, etc., No luck, at least for my setup.

The application is developed in GWT and consists of:

static resources in a shared folder for the entire application

/ static / with images, fonts, css. Css defines some font families by referring to font files in / fonts

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

static resources in several subfolders (per GWT FYI modules)

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

GWT-RPCs

These are mainly servlets where GWT performs serialization, etc., and are accessed from our client code via XHR under covers

PhoneGap Design

I started looking at creating a packaged application using PhoneGap and ran into some problems when I needed advice (Android example).

I created / assets / www and put the index.html file there and got it. I copied the version of our / static / folder and our / LoginGadget folder under this "root" to see, and started using

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

which is working.

In all our GWT files containing html and Javascript, we refer to static resources using both absolute (for example, "/ static / ....") and relative paths (for example, from the Javascript LoginGadget, it can refer to " css / some.css ").

Relative paths work because they are in the “folder” where the html / js that refer to them are located.

Problem 1

However, links to absolute paths do not work, even though PhoneGap starts with:

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

I was expecting links to "/static/images/file.png" from say index.html to be added to "baseUrl" to provide the file: ///android_asset/www/static/images/file.png and therefore work since the file is there.

I had to change index.html to use "static / image / file.png" to make it work. But I would have to recompile our entire GWT application with a different configuration in order to change all links to resources, and links from other files in subfolders to "/ static /" would not work if they were changed to be just "static /".

How can I get absolute links to "map" in / assets / www or the like? (See below, I looked at using the "base" tag ....)

Problem 2

GPC RPCs make an XHR request to the server to which html / js has been sent. This works great since the application does not have a host server name, hardcoded and actually deployed in many appengine applications / domains for testing, etc.

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

I tried to specify the "base" tag as documented, but then any link that I have in my html / js to a resource that does not indicate "file: //" seems to be done on the server specified in "base" .. ... so I no longer load my local resources, and I basically have a web application served from my server.

Want to

What I would like to do is to remove the (rather large) compiled and tested application from my wab-app war (/ static and all my / GWT modules) intact and copy them to / assets / www in my PhoneGap application, and then add some boiler plate or start code and run as is.

Sounds like a big request, but I think that if I could correctly point out two things:

• file path to use as "root" for absolute paths for resource requests that do not define the http / https protocol (or other protocols ..... which I already see, are processed in DroidGap.java)

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

Then everything comes out in the wash!

I thought it would be an unsuccessful “standard” setup and was already covered. Perhaps this is so, and I just missed something.

Comments? offers?

Thanks in advance for your help.

Answer 1

We solved these problems with two separate actions:

1) I wrote an ant target, which as part of our assembly takes a web application and replaces the paths in all the internal url links that it finds, which makes them suitable for working in the application. This still seems like a big mistake on the phone. Maybe it was fixed in newer versions?

2) We subclassed the RPC service class and modified it to have a static member, which is the service endpoint. When launching our phone call application, we modify the endpoint to point to the correct server and the preliminary one ... all our RPC GWTs point to the right place.

Answer 2

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

Its mobile infrastructure for GWT, created by a member of the GWT Steering Committee, also has telephone integration for GWT applications.

The projects have a lot of documents and a very friendly group of users.

Let me deal with your problems in more detail:

tasks1:

If you use the absolute path, you will get this inconsistent telephone behavior, as the browser builds these URLs locally and refers to / means the root entry on the phone. Using absolute URLs is a bad idea in most cases, and I would recommend that you change it in your application (as you already did).

tasks2:

To use the GWT RPC with a telephone recording, read this blog post I made to solve the problems: http://blog.daniel-kurka.de/2012/04/gwt-rpc-with-phonegap-revisited.html