Skip to Content

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:

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.

/wp-content/uploads/2015/07/01_hybrid_mobile_preferences_android_sdk_739914.png

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.

/wp-content/uploads/2015/07/02_project_creation_739915.png

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

/wp-content/uploads/2015/07/03_wizard_names_739943.png

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

/wp-content/uploads/2015/07/04_wizard_cordova_739944.png

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.

/wp-content/uploads/2015/07/05_wizard_contact_739945.png

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

/wp-content/uploads/2015/07/06_project_structure_739949.png

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.

/wp-content/uploads/2015/07/07_config_overview_739950.png/wp-content/uploads/2015/07/08_config_platform_properties_739951.png/wp-content/uploads/2015/07/09_config_xml_739976.png

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.

/wp-content/uploads/2015/07/10_openui5_739977.png

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:

/wp-content/uploads/2015/07/11_ui5_northwind_739978.png

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.

/wp-content/uploads/2015/07/12_northwind_service_url_739980.png

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.

/wp-content/uploads/2015/07/13_index_html_739981.png

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.

/wp-content/uploads/2015/07/14_index_js_739982.png

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):

/wp-content/uploads/2015/07/15_result_01_739983.png

Detail View (details of a single product):

/wp-content/uploads/2015/07/16_result_02_739984.png

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).

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Abhijeet Kulkarni

    Quite useful, especially in the second last section. I too am fan of SAP Web IDE. I built an app through it and went through the regular Cordova CLI method. Had missed adjusting UI5 to link with Cordova. Will use this knowledge and make the working project available in GitHub. Thanks!

    (0) 
  2. Abhijeet Kulkarni

    Like I said, used this knowledge and completed my little project. It’s a counter that lets you set a multiplying factor using slider and then adds in its multiples. Will make it available on GitHub soon. Thanks Florian Pfeffer!Screenshot_2015-07-18-01-08-54.png

    (0) 
  3. vijay m

    Hi

    Very useful blog. If I want to deploy this Hybrid application into SMP server , I haven’t any option to deploy by right click on the project. Please let me know how to deploy the project in to SMP server.

    The project which  I created the appliction using “SAP UI5 Master Detail Kapsel Application” template . the same project I have deployed to local computer Using HAT. the same application. I have installed Thym plugin in Eclipse Luna and  I have imported the above project from “SAPHybrid” folder  in to into ecplise  using the import option of “SAP Hybrid Mobile Cordova project” plugin.

    I able to run this application using “Android Emulator” but if I want to deploy this application to SAP SMP 3.0. what is the possibilities to deploy this application in to SMP3.0?

    Thanks

    (0) 
  4. Alvaro Lavia Martinez

    Hello ,

    Ive tryed to link an already developed test app in Ui5 (with eclipse juno ) using the eclipse thym plugin (in eclipse Mars) to get advantage of using cordoba plug ins.

    Apart from copy the .js openUi5 files is it needed to do anything else to make it work ? . Seems I cannot execute any kind of sentence in SAPUI5 using the eclipse thym plugin

    Any input will be appreciated .

    Regards

      Álvaro

    (0) 
  5. Sanjana t

    Hello, I am using Eclipse Neon, and when i select New-> Project -.> Moblie -> Hybrid Mobile(Cordova) Application Project ->name of project -> next-> Select Hybrid Mobile Engine -> it doesn’t allow me to check any checkbox even tried to download and search yet in wizard Next option is still disabled. So any one can guide me to resolve this issue ? Thanks in advanced.

    (0) 

Leave a Reply