Back in RBD 8.5.1.1, mobile development was introduced into RBD which enabled developers to build a mobile web application just like a RUI application by using Dojo mobile widgets. In RBD 9.5, the EGL Cordova library and Cordova tools are introduced. Developers now can leverage native functions in EGL mobile applications and deploy to a Cordova project which can be easily deployed as a native app in a mobile device using RBD. Additionally, EGL developers can test the native functions using internal or external browsers with customized simulation data which can boost the productivity for native function development. In this blog, we will provide a brief introduction about the end to end scenario of hybrid mobile app development, debugging and deployment with EGL.
Develop an EGL mobile project with native functions
Generally, the Cordova based mobile development is the same as other EGL Mobile development. The user can still use the Visual Editor (VE) to drag & drop mobile widgets to compose the RUI Handler.
At the same time, a new EGL Cordova library is introduced to develop native features using EGL. To use this library, the developers must select it in the new project wizard for mobile projects.
The steps to create and develop EGL mobile project with Cordova enabled:
1. Click menu, File->New->EGL Project, enter the project name. Select “Mobile Project”. Then click Next.
2. If native function is needed, select “EGL Cordova widgets” as pictured below. Then click Finish.
3. Make sure the rui widget, dojo mobile widgets and cordova project are imported as shown below
4. Open your mobile project, create a new RUIHandler and develop like any normal EGL mobile web application. The developer can then leverage the Cordova libraries to access native functions. For example:
Get the location by GeolocationLib:
function Button_onClick(event Event in)
GeolocationLib.getCurrentPosition( onSuccess, onError, new GeolocationOption{enableHighAccuracy = false});
End
Open the camera to take a photo using CameraLib:
function Button_onClick(event Event in)
CameraLib.getPicture(onSuccess, onError, new CameraOption{
quality = Combo.values[Combo.selection], destinationtype = CameraLib.DESTINATION_TYPE_FILE_URI
});
End
For more examples, please refer to the Cordova Samples. We will also use this sample to demonstrate other scenarios. For the list of libraries that are available in the EGL Cordova libraries, please refer to reference to EGL Cordova.
Test the native functions with simulated data
After coding the native functions, the EGL developers no longer need to deploy to the native device to test. The application using the EGL Cordova library can be tested within VE design/preview or external browsers.
Let’s take CameraSample as an example. CameraSample has a button “Take Picture” which will invoke CameraLib to open the camera device. We can test this native function in the browser. Open CameraSample in preview, click “Take Picture”, and a picture is shown. If you run it in an external browser like Chrome, the same happens.
In the browser, it will show you a default picture, not a real picture taken by the camera. The picture in the red rectangle is a default picture defined in the simulated data for testing purpose. The simulated picture for testing can be specified by the developers.
Most native functions contain defined simulated data such as geolocation, contacts etc. This is done via JavaScript files which provide the default data content for the Cordova libraries in the browser. As an example of how you would change the default camera images, find cordovaData.CameraData, and specify the desired pictures in the projects.
cordovaData.CameraData = [{
fileURI : "Penguins.jpg"
// ,dataURL : "binarydata"
},{
fileURI : "dojo/resources/images/dndMove.png"
}
];
Test data for other libraries can also be found in this file. Please refer to Providing sample test data for EGL Cordova library in the RBD 9.5 Knowledge Center
Debug the EGL mobile app
The EGL debugger for hybrid mobile project is the same as any other EGL RUI project. Right clicking the RUI Handler and selecting Debug As -> EGL Rich UI application will do the trick. For the native functions, the simulated data will be used for the debugging.
Deploy to hybrid app
After development and testing, the EGL mobile application should be deployed to the target device (Android and iOS etc.). RBD uses 2 separate steps for the deployment. First, the EGL mobile app will be deployed to Cordova project. Second, RBD will leverage Cordova tools to deploy to the native device. Additionally, the EGL service will be deployed to a separate web project to provide the back-end service for the mobile app.
To deploy EGL mobile project to Cordova project, the steps are:
1. Open the deployment descriptor file for the project
2. In the overview tab, specify the target web project just like any EGL RUI project. The web project will be the container for the services.
3. Navigate to “Cordova Deployment” tab (see screen shot below)
a) Select Enable Cordova Deploy. It will deploy the mobile project to a Cordova project as a hybrid mobile project.
b) Identify the target Cordova project. Select an existing Cordova project in the workspace or click New to create a new Cordova project. Notice the plugins and platforms for the Cordova project
c) Identify the main handler to be shown as the index page of the mobile application. Select from the selected handlers in Rich UI deployment.
d) Select the default locale for the entry handler by specifying default locale.
e) If the current mobile project has service definitions, you can identify the URL for deployed web project containing EGL services within the current mobile project.
The format is {HTTP/HTTPS} :-//{IP/Domain}:Port/Context-Path/yourAppName.
Example: http://www.IBM.com:8001/RBD/Mobile/myCordovaApp
The service URL here only refers to EGL developed services defined in the current project. It won't affect the access of third-party service or the access of EGL services defined in other projects. You are still able to use tools such as the RUI service binding to configure those services.
f) The RUI Handler of the mobile projects can be deployed to a web project, a Cordova project, or both. Select the check box beside the Enable Web Deploy attribute to insert the check mark. The RUI handlers will be deployed to a web project and Cordova project. Otherwise, it will be deployed to a Cordova project only.
4. Click the Deploy button in the upper right corner of the deployment descriptor and you will get a Cordova project.
Configuring the Cordova Project for your platform
The Cordova project can be configured for many platforms. Let’s take Android as an example about how to deploy it to the target platform.
1. Install and configure Android environment:
a) Install Oracle JDK
b) Install Android Studio or Android stand-alone SDK, please refer to https://developer.android.com/sdk/installing/index.html
c) Configure the emulator for Android or prepare an Android device
2. In RBD, open preferences -> Cordova -> platforms, and configure the Android SDK and Java SDK. Make sure Java SDK is Oracle Java instead of IBM Java.
3. Examine the deployed Cordova project, make sure Android platform is configured. Right click the project, select Properties->Cordova->Platforms:
4. Deploy the app to device: Right click the Cordova project, select Run As->Run on Mobile Device or Run on Mobile Device Emulator to deploy and run on mobile device or emulator.
If you need to modify the java code of the mobile app, the Cordova project can be imported into the Android Studio. Open Android Studio, select Import Project (ADT etc.), the location should be your/project/platforms/android. Then you can build and run the app from Android Studio directly.
RBD IDE does not support iOS deployment yet. But you can still deploy the Cordova project to iOS environment using the Cordova CLI tool, please refer to Cordova's document.