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:
    <!-- Other module inherits -->
    <inherits name="com.googlecode.mgwt.MGWT"/>
    <inherits name='com.googlecode.gwtphonegap.PhoneGap' /><set-property name="user.agent" value="safari" />
    <set-configuration-property name="mgwt.css" value="pretty" />
    
  • 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:
    public class HelloWorld implements EntryPoint {public void onModuleLoad() {
    // set viewport and other settings for mobile
    MGWT.applySettings(MGWTSettings.getAppSetting());// build animation helper and attach it
    AnimationHelper animationHelper = new AnimationHelper();
    RootPanel.get().add(animationHelper);// build some UI
    LayoutPanel layoutPanel = new LayoutPanel();
    Button button = new Button("Hello World! Woohoo!");
    layoutPanel.add(button);// animate
    animationHelper.goTo(layoutPanel, Animation.SLIDE);}}
    
  • 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:
    <head>
    <title>Cordova</title>
    <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
    </head>
    <body>
    <h1>Hello World</h1>
    <h2>PhoneGap works!</h2>
    </body>
    </html>
    
  • Add following permissions to the Android project’s manifest file:
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.RECEIVE_SMS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_CONTACTS" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.GET_ACCOUNTS" />
    <uses-permission android:name="android.permission.BROADCAST_STICKY" />
    
  • Change the MainActivity class of the Android project that it looks like this:
    public class MainActivity extends DroidGap {@Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // setContentView(R.layout.activity_main);
    super.loadUrl("file:///android_asset/www/index.html");
    }@Override
    public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.activity_main, menu);
    return true;
    }}
    
  • 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:
    super.loadUrl("file:///android_asset/www/index.html");
    

    to this

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

    (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!