Introduction

Ok, many of you will say, why another blog post regarding hybrid app creation with OpenUI5, cause there exist already some describing that topic. I created this blog post because with the release of Eclipse Mars (4.5) also the first major version of Eclipse THyM (The Hybrid Mobile project) was released. These tool integrates the process of an hybrid app creation with Cordova very comfortable into the Eclipse environment (no console commands like cordova create, cordova platform add, cordova plugin add, cordova build, cordova run … anymore). In the next steps I describe briefly how a simple hybrid app using OpenUI5 is created for Android with that tool. To not forget to mention the SAP Web IDE Hybrid Application Toolkit. I am a big fan of SAP Web IDE and SAP Web IDE Hybrid Application Toolkit and I am using it as often as possible for my tests and projects. But there are projects/situations in which these tools are not available. So from my point of view it is good to have another option to create a hybrid app in a very comfortable way.

Pre-Conditions

Following tools are necessary and therefore have to be downloaded to the local machine:

• Eclipse Mars or higher versions in the future (Eclipse Downloads)
• Eclipse Thym Plugin (install it via repository site http://download.eclipse.org/thym/releases/latest/ in your Eclipse instance)
• Android SDK (Download Android Studio and SDK Tools | Android Developers)
• OpenUI5 mobile runtime (OpenUI5 – Download); I use the most current stable of version at time of post creation which was 1.28

After you have downloaded and installed the Android SDK you have to download via the Android SDK Manager the latest Android Tools and an Android API (for that blog post I used version 4.4.2 = API version 19). With the Android Virtual Device Manager a device has to be configured which is later used for the emulation of the application. When these steps are done, just one further configuration has to be done in the Eclipse preferences under point Hybrid Mobile -> Android. There the path to the Android SDK has to be entered.

App creation

Create a Hybrid Application Mobile Project in Eclipse

By choosing a new “Hybrid Mobile (Cordova) Application Project” a new THyM project can be created.

On the first wizard screen some standard things like project name have to be defined.

In the next step it has to choosen for which platform(s) the app is created.

Afterwards necessary plugins can be added. It is possible to add plugins from the Cordova plugin registry, from a Git repository or from a local file.

Because for that test I do not use a plugin I skip that step without adding a plugin.

After the wizard is finished the following project structure is available.

App configuration options

Via the config.xml file in the project, the attributes defined in the creation wizard and addtional things can be configured (e.g. plugins can be added, icons/splash screen can be defined, …). Some things can already be defined via forms. Options not covered in the forms can be added directly in the XML.

Add OpenUI5 mobile runtime to project

In the next step I added the OpenUI5 mobile runtime sources to the project. This is quite simple. Under the resources folder (/www/res) in the project I created a folder openui5. Within the folder I stored the OpenUI5 sources which I extraced from the downloaded OpenUI5 mobile runtime zip file. As you can see in the screenshot I removed the debug sources (*-dbg.js), because I do not need them for that simple test. In a real project these files would be removed when the final build is created by e.g. a gruntjs script.

Add app specific UI5 coding to the project

Now the app specific UI5 coding is added to the project. At that point the coding of the “business part” of the app would start, but because I am “lazy”, I created/generated my UI5 coding with SAP Web IDE and downloaded it so that I can use it in my hybrid mobile project. For that test, I just created a simple master/detail Fiori app which displays products out of the well-known Northwind OData service. A good post which describes how you can create such an app in SAP Web IDE is How to use Northwind OData service with SAP Web IDE.

In my project I created a folder “ui5app” in which I stored the sources of my SAP Web IDE Northwind project. So my project looks like following:

The only thing which has to be adjusted in the sources is the service URL for the Northwind service in the Component.js file. In the SAP Web IDE a destination is used to consume the Northwind service. In the hybrid app I replaced that with the absolute URL of the service.

Adjust Cordova generated files to call UI5 sources

The last step to have a working app is to adjust the index.html and the index.js file to load the UI5 library and to call the app specific UI5 sources.

In the index.html file the UI5 bootstrapping was added which loads the UI5 core and sap.m library from the resources folder in which the OpenUI5 source were stored before. Also the theme is set and the resource root for my “northwind_demo” component is set. The “northwind_demo” component is the component defined in the Component.js file stored in the “ui5app” folder in which the sources are stored I created with SAP Web IDE.

Further adaptions are that the stylesheet class “sapUiBody” is added to the body tag. Also a div area with id “content” is defined which is the container for my UI5 app component.

In the index.js file (stored in /www/js folder) I added following coding to the receivedEvent method. That method is called when the Cordova app is ready (deviceready event is raised). The coding creates a UI5 shell and loads the “northwind_demo” component into it using a component container. With that, all adaptions are done.

Run the app on Android Emulator (or Android Device)

After all the previous steps are done, the app is ready to be executed on the created Android Virtual Device. Just use Run As -> Run on Android Emulator for the index.html file and the build of the app and the deployment to the emulator is started. If the emulator is not running, it is started too. If you have configured an Android device you can say also Run As -> Run on Android Device to execute the app on the device. The result for the simple app created in the steps before looks like following on the emulator for a phone.

Master View (list of products):

Detail View (details of a single product):

Conclusion

Of course this is not an incredible app and it does also not use any device specific features via plugins (e.g. camera, contact list, geo …), but it shows, how fast a hybrid app can be created with THyM. For the future I hope that the THyM project gets more and more features available with the Cordova console commands. For me THyM is definitely an option to be considered in case I can not use the SAP Web IDE Hybrid Application Toolkit. And for all those people who like to “hack” with the Cordova console commands: Of course it is still possible to use them for the created project. Especially for testing with the browser platform (to avoid the long build times for Android) it is possible to open a console at the root folder of the project, type 1) cordova platform add browser, 2) cordova build browser and 3) cordova run browser and you can test the app in the browser (supported Cordova plugins have to be considered).