EGL Dojo mobile widgets were added to RBD in V22.214.171.124 and V9.0.1 depending on which release you are using. It enables mobile web application development in RBD. However, it is also possible to deploy the web app as a native app (hybrid) after some modification to the generated code. We will describe how to develop a native mobile app（hybrid) with RBD in this blog article. We will use Android app deployment as an example step by step. Note that the native (hybrid) app development is not officially supported by RBD, so there is no official customer support when problems are found. However, we wanted to provide this as-is, how-to information in case there is the need to build/deploy a native (Hybrid) mobile application built with EGL mobile widgets.
1. Setup Envrionment
Prepare and install the following:
- RBD 126.96.36.199 or 9.0.1 or higher
- Android SDK and Android Development Toolkit (ADT). Please refer to http://developer.android.com/sdk/installing.html for detail. If you prefer to develop the Android app inside RBD, you could install them together
- Install and config Phonegap/Cordova(http://phonegap.com/install/)
- Install Tomcat or WAS to deploy your web app and service
If ADT is installed together with RBD, you will need to configure RBD to make them work together since ADT cannot launch the Android application using the IBM JRE. Therefore, you must use the Sun JDK and change to use this as the default JRE when starting RBD. To do this:
- Open eclipse.ini in RBD installation folder
Modify eclipse.ini, the sample modified file is shown below in which the text in the red color are modified. Please make the modification according to your environment. The modification includes:
- Modify -vm argument to point to sun jdk
- Delete contents starting from -vmargs
- Add the contents in red at the bottom of the file
- Do NOT modify other parts
2. Develop EGL Mobile Application
- Create an EGL mobile project to import/setup the dependent widget projects
- Import the attached project, clean & run MortgageCalculatorHandler.egl in Preview mode. Click calculate button, it will invoke a dedicated service and show the result in the page.
3. Deploy to Web Server
4. Deploy to Android Project
The EGL mobile project can also be deployed to native mobile app or otherwise known as a hybrid mobile app. We will take Android as an example here.
4.1 Create Android Project
$ cordova create EGLAndroidSample com.ibm.egl.EGLAndroidSample "EGLAndroidSample"
$ cd EGLAndroidSample
$ cordova platform add android
$ cordova build
- Import the Android project to the workspace. In RBD, run New -> Android project from Existing code, select EGLAndroidSample. Do NOT check “copy projects into workspace”. Make sure EGLAndroidSample and EGLAndroidSample-CordovaLib projects are created.
- Configure the Android project. To access EGL service in the deployed web server, you will need android.permission.INTERNET permission in AndroidManifest.xml. Make sure the permission is allowed in that file.
4.2 Deploy by Ant
We already provide an ant script deploy.xml in the sample project to help the user to deploy the web project into an native app project.
Open deploy.xml in the attached EGL project, modify the properties according to your environment.
- SourceWebProject The project name of the deployed EGL Web project;
- TargetAndroidProject The Android project to be deployed;
- MainPageName The name of the deployed entry html file;
- ServerAddress The url of the web server where the service deployed;
WWWPath The path of the web pages in the Android project. The default path in general Android project is “assets/www”; But in phonegap project, the default path for Android is “platforms/android/assets/www”
<property name="SourceWebProject" value="EGLMobileWeb" />
<property name="TargetAndriodProject" value="EGLAndroidSample" />
<property name="MainPageName" value="MortgageCalculatorHandler-en_US.html" />
<property name="ServerAddress" value="188.8.131.52:8080" />
<property name="WWWPath" value="platforms/android/assets/www" />
Right click deploy.xml，Choose Run As -> Ant Build to deploy. The console shows like： Open the Android project, refresh and check the folder of WWWPath, make sure the files in the web project are copied here.
Deploy to other platforms
Besides Android, you can also deploy your app to iOS, Windows phone etc. The only difference will be in step 4. You will need to create a project in your target platform. Then update the deploy.xml to modify the properties, especially the WWWPath property. Have fun!