Deploy your existing mgwt app on Android using Apache Cordova 3

In the previous blogposts we have seen on how to create a new project using Apache Cordova 3. In this blogpost we will see how to package the existing mgwt project into an Android application using Apache Cordova 3. In fact,you can substitute any UI framework in place of mgwt, and the remaining process is going to remain same.

• If you already have a mgwt project import that project instead of creating a new one. You can skip the below steps until you create a Cordova Android project.

• Launch your eclipse and create a GWT web project.

• Add mgwt-1.1.2 or latest version of mgwt to your project classpath. 

• If you created a new project just remove all the code and use the simple code below in the EntryPoint class.

public void onModuleLoad() {
final Button sendButton = new Button("Send");
final MTextBox nameField = new MTextBox();
nameField.setText("GWT User");
final Label errorLabel = new Label();

// We can add style names to widgets
sendButton.addStyleName("sendButton");

// Add the nameField and sendButton to the RootPanel
// Use RootPanel.get() to get the entire body element
RootPanel.get("nameFieldContainer").add(nameField);
RootPanel.get("sendButtonContainer").add(sendButton);
RootPanel.get("errorLabelContainer").add(errorLabel);

// Focus the cursor on the name field when the app loads
nameField.setFocus(true);
nameField.selectAll();
}

• We just wanted to deploy this app in Android and see our code working, so lets keep it as simple as possible.

• Add the following lines to the gwt.xml file in your project.

<inherits name="com.googlecode.mgwt.MGWT"/>

<set-property name="user.agent" value="safari" />

• And then compile the project.

• In the war folder, you will see the compiled javascript with in the folder name which is same as the project you created. 

• Here I created a mgwt project cordova3Android and so all the compiled javascript is in war--> cordova3android and Cordova3Android.html is my index file.

• Now we will create a Cordova project. Launch the command line , and run the below command.

                                  cordova create Cordova3Android

• This will create a Cordova project Cordova3Android.

• The www folder of Cordova3Android project looks like the below. It consists of the default files created by cordova.

• Now copy the javascript and html files from your project into the www folder in Cordova3Android project.

• If the index file of your project is some thing else other than index.html file, then you need to change that in the config.xml file. By default index.html will be configured as the application home page.

• Change the mapping in 'Content src' tag to point to your application home page. In this case the application home page is Cordova3Android.html and so modify the config.xml to apply this change.

• Save the Config.xml file and now create the platforms you want this application to be deployed on.

• The steps till this point are same irrespective of the platform you are planning to build for.

• Till this point there are no platforms defined and so the platforms folder in your application folder is blank.

• Now change your command line working directory to this project and add the Android platform running the following command.

cordova -d platform add android

• Cordova copies all the files required for creating an Android project and creates an Android project from the root project you have created.

• Now build the created project running the below command.

cordova build

• And launch the project on Android running the below command. 

cordova emulate android

• cordova will launch the Android emulator, and you can see your changes in project once the application is launched in the emulator.

• So we have imported an existing mgwt project into Apache Cordova 3 build. 

• Please note that the platforms need to be added after all your project changes are applied to the root project.
• Now you will make changes to your app and redeploy it again. I will just change one line in the gwt project. The string in red below is the only change in the project and so the emulator when launched should show 'Coding Square' instead of earlier 'GWT User'.

                              nameField.setText("Coding Square");

• Now compile the project. And on the command line remove the Android platform by running the below command.

 

cordova platform rm android

• This will delete the Android platform.

• Now copy the compiled javascript to the project root 'www' folder. And create the Android platform again.

cordova -d platform add android

• Now build the project and launch the emulator to view your changes.

cordova build

cordova emulate android

• So we are able to see 'Coding Square' as expected in the text box instead of the 'GWT User'
• As of now there doesn't seems to be a way to rebuild the project from root without deleting and recreating the platform.