Develop Reference

Serve static files over http within an android app with WebView

I have a nuxt.js 3 generated javascript app, which is just some html, JS & other assets. My issue is that passing a file://<path>/index.html as a url to a web_view means that assets are broken since all addresses are origin-relative, e.g. /home/index.html, /_nuxt/entry.123456.css, not path-relative like home/index.html. (i think it would not work for subpages anyway, being path-relative)
How to overcome this?
is there any way to set the web_view to know where to get the static files from? there are no other requests from the web_view other than GETs for static assets & changes of location. I'm thinking something like request interception and rewriting the path or even the response. but that sounds just like a server, so:
I guess I'm gonna need a http server. Can you suggest me some simple up-to-date library that can serve files within an android app? Or can you point me to some API from android native toolbox to open a socket and serve static files via http response? Also, will such a server be accessible for other apps, for the whole android device on localhost? I would like to avert that; the only consumer of the files should be the web_view.
To avoid obvious counter-question - but why? It's that I intend to build a hybrid android app, that does simply open a web_view full-screen. I am aware of limitations of such solution and I'm fine with that. The android part is where I'm not well experienced. If this gets too over-complicated, I'm gonna just change the way how to produce the js app in the first place. but nuxt.js is my best option for now.

ng-include not work in PhoneGap

I am trying to build my angularjs app into an android app using PhoneGap Build, but got stucked with the issue of the src of ng-include.
The code below tries to render a html of subheader into the view. It works perfectly in chrome browser, however after I convert the code with phonegap, it does not work. I also tried other path like '../templates/subheader.html' and '/templates/subheader.html', none of them work.
<div class="bar bar-subheader bar-stable" ng-include="'templates/subheader.html'">
</div>
Any suggestions?

It is embarrassing to always answer my own question...
However I finally figured it out.
1. The path inside the ng-include should not have the "/" on its left most.
2. The key of this issue is not the ng-include. It is because I was trying to fetch a variable stored in the $cookieStore:
For some reason I don't know, the data stored in $cookieStore can't persist between page transition. It impact many components in my page. So I have to change the $cookieStore to another local storage service https://github.com/grevory/angular-local-storage.

I had the same problem, that my include was not shown on the device.
But my problem was that I put the template in an folder which's name started with an underscore _.
This is ignored in the build-process. Renaming the folder helped!

Did you have a chance to look at Ionic Framework ? It works on phonegap and has build in AngularJS support. It also has some mobile ready components.

Android UI : from html to XML

I've developped an application using XML Eclipse tool too build my UI.
Now, i'd like to use a tool like Axure to create a "nicer" interface.
My problem is : is there an easy way to switch from XML to HTML (because Axure is producting HTML file from Wireframe design) ?
And if not, how to "plug" HTML file to the existing application (which is using R.layout.xxx or R.id.xxx to access displayed elements).
I'm quite new in Android by the way...
thanks !

You can't really do what you describe. The way Android layout is specified in XML cannot be compared at all to HTML for websites. Besides, Axure is a mock-up tool. It creates interactive mockups and prototypes - not final solutions for anything.
If you really want to use Axure, perhaps you would want to go for web apps with something like PhoneGap - they are written in HTML and JavaScript, but have less possibilities.

path problems porting web-app to phonegap

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.

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

We solved these problems with two separate actions:
1) I wrote an ant target that as part of our build takes the web-app, and replaces the paths in all internal url references it finds, making them fit what's needed for them to work within the app. It still seems a major bug in phonegap to me. Maybe it's been fixed in newer versions?
2) We subclassed the RPC service class and modified it to have a static member that is the service endpoint. At the start-up of our phonegap app we modify the end-point to point to the desired server and presto.... all our GWT RPCs point to the right place.

Webview vs. Native Client

I was trying to display a webpage of a url on a plain WebView, and some of the images are not showing. However, everything shows up fine in the browser for the simulator.
Is there a difference between the rendering via WebView vs. the Android 2.3 Browser?

There are several things added to the Android browser. They add things in to handle JavaScript, to handle switching to native functionality for videos, etc. Luckily the Browser is open source so you can get the Android code base and see what they do.

Yes could be a difference. If you are passing the web text-plain to the webview directly it doesn't understand the images which are references depending the local path instead the goblal path reference.
I mean, if you have a <img src="/images/image.png" /> here you are referencing depending on your directory, and the browser try to look up image.png into your root, and if you have <img src="http://www.whatever.com/images/image.png" /> then you are referencing it globaly. So I think this is the main that you could have.