yannis assael | the blog

  • Home
  • About
  • Categories
    • Android
    • Computing
    • iOS
    • Machine Learning
    • MacOSX
  • GitHub
  • Mobile Apps
  • yannisassael.com


A little bit of Android, Phonegap and GWT (gwt-phonegap)

Written by iassael on 04/02/2012. Posted in android, general

This guide will demonstrate how to build the gwt-phonegap showcase application on Android
1) Checkout from here http://code.google.com/p/gwt-phonegap/source/browse/gwtphonegap.showcase.gwt/src/main/java/com/googlecode/gwtphonegap/?repo=showcase

(for more info http://code.google.com/p/gwt-phonegap/wiki/GettingStarted)

2) Edit your index.html so that it looks like this:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>index</title>
<script type="text/javascript" language="javascript" src="phonegap.js"></script>
<script type="text/javascript" language="javascript"
src="ChildBrowser.js"></script>
 
<script type="text/javascript">
document.addEventListener("deviceready", (function() {
PhoneGap.available = true;
}), false);
</script>
 
<script type="text/javascript" language="javascript"
src="showcase/showcase.nocache.js"></script>
</head>
 
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
style="position: absolute; width: 0; height: 0; border: 0"></iframe>
 
</body>
</html>

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>index</title> <script type="text/javascript" language="javascript" src="phonegap.js"></script> <script type="text/javascript" language="javascript" src="ChildBrowser.js"></script> <script type="text/javascript"> document.addEventListener("deviceready", (function() { PhoneGap.available = true; }), false); </script> <script type="text/javascript" language="javascript" src="showcase/showcase.nocache.js"></script> </head> <body> <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position: absolute; width: 0; height: 0; border: 0"></iframe> </body> </html>

3. Run GWT Compile

4. Create a new Android Project

5. Add Phonegap Lib as described here http://phonegap.com/start#android

6. Copy everything from the %SHOWCASE%\target\gwtphonegap-showcase-gwt-1.2.0.0-SNAPSHOT directory to the Android Project \asserts\www directory

7. Make your Activity look like this:

public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   super.loadUrl("file:///android_asset/www/index.html");
}

public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); }

8. Ready to go!

Sorry I was not that analytic about the process. Please feel free to contact me for any help!
J.

 

Tags: android, gwt, gwt-phoengap, phonegap

Trackback from your site.

Comments (5)

  • Avatar

    Alexandre

    24/04/2012 at 10:37 am | #

    Thanks for this tutorial. When i launch Android Project, i have an alert dialog “cannot load phonegap”… And i don’t see the link between gwt and phonegap. Can you explain how gwt communicates with phonegap ?

  • Avatar

    iassael

    24/04/2012 at 9:37 pm | #

    Hi Alexandre, did you follow the guide here?
    http://phonegap.com/start#android
    Does it work?
    If yes move all your generated GWT files in the /assets/www …
    and tell me if it works…

  • Avatar

    Alexandre

    25/04/2012 at 2:19 pm | #

    Thank you for your answer. I found the problem ! I forgot to rename cordoba-1.6.1.js to phonegap.js … So it couldn’t find phonegap and launched onPhoneGapTimeout.

  • Avatar

    komal

    12/06/2012 at 3:43 pm | #

    Hey thanks..I could get this working, but I also the server package in my gwt-phonegap project.. how should I go about with it so that my server asyncalls work as normally as they would?

  • Avatar

    iassael

    12/06/2012 at 3:45 pm | #

    why dont you create a 2nd project with your client side only?

Leave a comment