Wrapping a MGWT Webapp with PhoneGap into a Native Android App

Here is an example how to make a simple MGWT Webapp and wrap it with PhoneGap into a native Android application. With MGWT to you can create fantastic mobile web applications with the look and feel of native mobile Android or iOS apps.

  • Install Eclipse IDE
  • Install GWT plugin into Eclipse
  • Download the MGWT jar file
  • Download the PhoneGap (Cordova) jar file
  • Create a new GWT project („HelloWorld“) with Eclipse (the official „Getting started“ documentation for GWT can be found here).
  • Add following jar files into the /libs folder of the newly created GWT project:
    mgwt.jar
    gwtphonegap.jar
  • Add these lines of code into the HelloWorld.gwt.xml file:
    <br />
    <!-- Other module inherits --><br />
    <inherits name="com.googlecode.mgwt.MGWT"/><br />
    <inherits name='com.googlecode.gwtphonegap.PhoneGap' /><set-property name="user.agent" value="safari" /><br />
    <set-configuration-property name="mgwt.css" value="pretty" /><br />
    
  • Develop your GWT app as you wish using the MGWT library (the MGWT „Getting started“ documentation to be found here). Here is a simple and easy example:
    <br />
    public class HelloWorld implements EntryPoint {public void onModuleLoad() {<br />
    // set viewport and other settings for mobile<br />
    MGWT.applySettings(MGWTSettings.getAppSetting());// build animation helper and attach it<br />
    AnimationHelper animationHelper = new AnimationHelper();<br />
    RootPanel.get().add(animationHelper);// build some UI<br />
    LayoutPanel layoutPanel = new LayoutPanel();<br />
    Button button = new Button("Hello World! Woohoo!");<br />
    layoutPanel.add(button);// animate<br />
    animationHelper.goTo(layoutPanel, Animation.SLIDE);}}<br />
    
  • Create new native Android project with Eclipse. With this we are going to wrap the MGWT project into a native app.
  • Add the PhoneGap (or Cordova) jar file into the newly created Android project’s /libs folder.
  • Create subfolders /assets/www in that project. Make sure to add the PhoneGap.js (JavaScript) file into the /assets/www folder!
  • Create a simple index.html file in the /assets/www folder. Here a simple example of the html file:
    <br />
    <head><br />
    <title>Cordova</title><br />
    <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script><br />
    </head><br />
    <body><br />
    <h1>Hello World</h1><br />
    <h2>PhoneGap works!</h2><br />
    </body><br />
    </html><br />
    
  • Add following permissions to the Android project’s manifest file:
    <br />
    <uses-permission android:name="android.permission.CAMERA" /><br />
    <uses-permission android:name="android.permission.VIBRATE" /><br />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /><br />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /><br />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /><br />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" /><br />
    <uses-permission android:name="android.permission.INTERNET" /><br />
    <uses-permission android:name="android.permission.RECEIVE_SMS" /><br />
    <uses-permission android:name="android.permission.RECORD_AUDIO" /><br />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /><br />
    <uses-permission android:name="android.permission.READ_CONTACTS" /><br />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" /><br />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /><br />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><br />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" /><br />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" /><br />
    
  • Change the MainActivity class of the Android project that it looks like this:
    <br />
    public class MainActivity extends DroidGap {@Override<br />
    public void onCreate(Bundle savedInstanceState) {<br />
    super.onCreate(savedInstanceState);<br />
    // setContentView(R.layout.activity_main);<br />
    super.loadUrl("file:///android_asset/www/index.html");<br />
    }@Override<br />
    public boolean onCreateOptionsMenu(Menu menu) {<br />
    // Inflate the menu; this adds items to the action bar if it is present.<br />
    getMenuInflater().inflate(R.menu.activity_main, menu);<br />
    return true;<br />
    }}<br />
    
  • Build the Android project and see if the index.html file is being displayed after launching the app.
  • Compile (Google ->GWT Compile) the MGWT project. The compiled code can be found inside of the /war folder of the MGWT project.
  • Copy all the content of the /war folder of the MGWT project into the /assets/www folder in the Android project.
  • In the Android project in the MainActivity class change this line of code:
    <br />
    super.loadUrl("file:///android_asset/www/index.html");<br />
    

    to this

    <br />
    super.loadUrl("file:///android_asset/www/HelloWorld.html");<br />
    

    (or however the main html file of the MGWT project is named)

  • Run the Android project again. Now you should see the content of the MGWT app displayed acting like a native Android application. If that looks okay you can export the project to an APK file! Done!

About Dominik
Currently working as an Android/iOS developer for Cineman, Switzerland. Owner of http://www.ukon.ch and https://play.google.com/store/apps/details?id=com.cheatdatabase

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

You must be logged in to post a comment.