Recently i read the interesting blog of florian.pfeffer about developing an hybrid application with the Thym plugin for Eclipse. That plugin is very helpful and as a result i got interested in IDE for developing hybrid applications and i discovered that, starting from 8.x releases, Netbeans IDE added a specific project type for Cordova applications. I tried it and in general i felt more comfortable than with Thym, so i'll show you how to get started developing and debugging a simple hybrid application using Netbeans and the geolocation plugin of Apache Cordova.
Prerequisites are installing for your platform:
and obviously the Netbeans IDE; i suggest also to install Git in order to have a version control system; i carried out the whole job on windows 10 with latest version of listed software.
To start building my hybrid application i simply followed the "Creating a Cordova Application" paragraph of the Getting started with Cordova applications in the Netbeans online knowledge base. With latest Netbeans release you'll probably see a "Tools" step instead of the the "JavaScript Files" step shown but doesn't matter, we will add later OpenUI5 libraries to our project. Leave everything as default and proceed. The IDE generates for you the "Hello World" skeleton code of the application. Having a quick look at the code of the index.html file generated under the site root of your project you can see that the body includes two javascript files: cordova.js and index.js. Do not worry if you don't see the cordova.js file under your folder! It will be automatically generated depending on selected cordova plugins when the application will be built. Now let's look at the index.js file under the js folder. Here your application will be initialized binding events; the generated code adds a listener for the deviceready event. When device is ready the code under receivedEvent method will be executed. You can test (and also debug using Chrome browser as will be explained later) your application on an emulator or directly on a device. My suggestion is to test directly on a device just because emulators used to run very slowly. At this moment the application simply shows a device ready logo (Fig.1). Right clicking on your project, under properties, it is possible to handle needed plugins as shown in Fig. 2.
 |  | |
| Fig. 1 | Fig. 2 |
It's now time to add OpenUI5 runtime to the application. Download the latest OpenUI5 runtime from the above link, unzip and copy the resources folder under your www project folder; for my application i kept only minified javascript files and purged the non-minified debug files (-dbg.js). Your application is now ready to be modified in order to load the OpenUI5 core. Since i decided also to use geolocation Apache Cordova plugin to show a map i needed Google Maps Javascript API, so i added these two script tag to load OpenUI5 runtime and Maps API:
<script id="sap-ui-bootstrap"
src="openui5/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script src="https://maps.googleapis.com/maps/api/js"></script>To avoid any cross domain, unsafe styles ecc. issues and go straight to the point i also relaxed the specified content security policies; obviously in a real business application you can't leave everithing as unsafe.
<meta http-equiv="Content-Security-Policy"
content="default-src * 'unsafe-inline' 'unsafe-eval'
script-srcdata: gap: https://ssl.gstatic.com 'unsafe-eval';
style-src * 'unsafe-inline' 'unsafe-eval'; media-src *">I modified the body to sapUiBody and added the container div tag for the sap.m.App. I also adapted to my needs the index.css file on css folder, especially to show the map: div#mapdiv {width:100%;height:100%;}. The OpenUI5 application i developed is very simple: there are 2 pages, the first one showing and updating your current location with an accuracy circle and the second one showing gps details. To fully achieve the result mainly i used following documentation:
In that basic application i generated views and controls with javascript and i didn't take into account developing guidelines, coding and performance issue ecc. As i said i wanted to go straight to the point. Before starting to develop a real business application from scratch i suggest you to take a tour of the developer guide on OpenUI5 official documentation. I won't show more code snippets: at bottom there's a link to my git repository on github so that you can check it; main files are index.html, index.js and index.css. Last step: what about debugging? Debugging the application is very easy using Chrome browser (remember to enable USB devices on your phone); simply go to address chrome://inspect and under devices you'll find your phone and your running hybrid application. From there you can debug your code as if it was a usual web application (Fig. 3).
 |
| Fig. 3 |
Below two screenshots of the app running on my HTC One X.
 |  | |
| Fig. 4 | Fig. 5 |
Lastly you can have a look at my code at github here. As you can see the application is very basic; i just wanted to show another option (using Netbeans instead of Eclipse with Thym plugin) to develop hybrid applications breaking free from CLI and accessing at least a native device API's through Cordova.
- SAP Managed Tags:
