Skip to Content

Creating Hybrid Application with PhoneGap and MBO

Hello everyone,

As per my knowledge the hybrid application ( combination of Native + Web HTML5/Javascript ) with MBO is suitable for any type of Mobile Application. Means it can be online or offline. Online and Offline scenario can be handled through MBO’s API (Generated Code).

For a Hybrid Application first thing is developing applications in HTML5, CSS for front-end and Javascript for handling events. HTML5 + CSS + Javascript apps are nothing but the normal web app which will run in any HTML5 enabled browser. It is platform independent so we can run the same HTML5 application on Android, BlackBerry or iOS.

  • Now the questions arise are how to access native platform resources like camera, phone book, image gallery?
  • What is the solution for the offline scenario?
  • What if the mobile browser doesn’t support for HTML5?

For all the question’s solution is PhoneGap framework.

  • PhoneGap is the framework used to run HTML5 web application online through web server or offline HTML5 files stored in Application itself (in assets directory).
  • PhoneGap works as a user agent for running HTML5 apps for those cell phones who don’t have supported browser.

Following is the procedure for creating Hybrid Mobile Application


– Eclipse with ADT and SDK configured.

– Basic knowledge of Java classes and packages.


  • Create MBO as per your application requirement.
  • Right click on the workspace and click on deploy.
  • Now right click on the workspace and click on generate code.
    • While deploying provide the respective jar files (eg. Android. jar).
  • Now download phonegap framework from
  • Extract it in a folder.
  • Next step is the create an Android Application.
    • Go to File->Projects and select Android Project from Existing Code
  • /wp-content/uploads/2013/06/android_1_234653.jpg
    • Provide root directory as : <phonegap files extracted folder>\lib\android\example
    • Check copy project into workspace
    • /wp-content/uploads/2013/06/android_2_234654.jpg
    • Click on finish
  • Test your application once whether it is running fine or not.
  • Next step is to create the Java class which we are going to access it in a javascript / HTML5 page.
  • I have created one class named MyJavaClass with a single method in my package

     public class MyJavaClass {

          public String getName() {

                              return “ShashanK”;



  • Now update the content of onCreate method of example class with following code. It will enable the access to native MyJavaClass in javascript.

     public class example extends DroidGap



         public void onCreate(Bundle savedInstanceState)




             appView.addJavascriptInterface(new MyJavaClass(), “myclass”);




  • The next task is to class the GetName () method of MyJavaClass in javascript. Update the <body> tag of index.html file with following code


        <div class=”app”>

            <h1>Apache Cordova</h1>

            <div id=”deviceready” class=”blink”>

                <p class=”event listening”>Connecting to Device</p>

                <p class=”event received”>Device is Ready</p>



        <script type=”text/javascript” src=”cordova-2.7.0.js“></script>

        <script type=”text/javascript” src=”js/index.js“></script>

        <script type=”text/javascript”>


            alert(“Hello ” + window.myclass.getName()); // Here we are calling the getName() method



  • At this stage if you test your application it should generate alert box saying Hello ShashanK.
  • Embedding MBO in application. Now works as your model of MVC.
  • Copy the MBO API into your android project and import necessary files from Sybase ObjectAPI’s.
  • Call required MBO methods from the MyJavaClass. For example

     public class MyJavaClass {

          public String getName() {

               return “ShashanK”;



                * Create

                * */

               public void create(String name, int age) {

                              Person person = new Person();






                * Synchronize


               public void synchronize() {




  • Done call create() and synchronize() methods from javascript.

Hope this blog helps you to get an idea to implement Hybrid Application.

You must be Logged on to comment or reply to a post.
  • Very good example. I tested this it is working fine. I got few questions,

    What is the advantage of using this ? It will work only in Android right, if no how to make it work in other platforms?Why we have to go for this approach when native object API based development is there?

    Midhun VP

  • Out of curiousity, is there a reason you chose to pursue this route rather than using the Hybrid Web Container (which itself includes PhoneGap/Cordova) that SUP provides?

  • Hi Midhun,

    Native application development (using SDK) takes lots of time to build a small app. And building same app for different platforms will take equal time.

    Am not sure about the Hybrid Application developed through the wizard is customizable. I mean can we make our custom coding? As I have read in some documents that its difficult to customize the code in Hybrid Web Development through the wizard.

    Using MBO we can generate API for any platform. And HTML5, Javascript and CSS application executes on any platform. So it supports all platforms not only android.

    I am new to this mobility, So I felt this was the best approach to development.

    • Based on the requirement only we can decide which approach we can go for. Native approach is needed if the business scenario is complex and Hybrid apps are intended for small business scenarios like approvals. HWC apps are called light weight apps.

      In HWC we can write our own custom code inside the custom.js file. Also you can directly use the PhoneGap APIs inside the custom.js itself.

      Have a look at this,

      In your case you are generating the API for android right, then can you please let me know how you are planning it to support IOS or BB?

      – Midhun VP

      • For IOS and BB we need to generate specific API’s…. And call API methods from their respective language…. As we did for Android……

      • Folks,

        I have a question. In custom.js, can we redesign the UI as per our requirements.

        For ex:

        1> Screen layout, color modifications, UI elements

        2> Additional controls in the screen that are designed by web designer ( introduce checkbox in the list view screen designed in web designer)

        3> To improve the performance – I followed one of the samples in SDN, but still we didn’t acheive the performance as the user wanted.

        I would be glad to hear from you as you have been involved with HWC for a long time.

        – Suraj

        • We can customize the UI etc by writing custom code. The HWC/Hybrid apps will not give performance as native. So we have to use it only for lightweight scenarios like approvals.

          Midhun VP

        • 1> Yes, these changes are easy.

          2> Yes, this requires a little more reading on your part, but also pretty basic. One of the published samples even uses the specific example you cite.

          3> There are ways of tweaking the performance, but as Midhun notes, you will not be able to get the performance to be as good as native, it simply isn’t possible. If as-good-as-native performance is a must-have, you’d be better off going the native route, as long as you are willing to take the accompanying penalty in terms of development time. You might also consider Agentry, which has a 4GL-like development environment so that the time-to-develop is still short, but it uses native clients, so you shouldn’t need to pay the performance penalty.

    • “Am not sure about the Hybrid Application developed through the wizard is customizable. I mean can we make our custom coding? As I have read in some documents that its difficult to customize the code in Hybrid Web Development through the wizard.”

      There are some limits to how customization you can make to hybrid apps you build in the designer, although you’ll find that it is quite extensive. If you find that you find working in the designer too restrictive, you can simply build your hybrid apps yourself but still use the Hybrid Web Container to host them, thus eliminating, or at least dramatically reducing, the need to work at building native apps that incorporate PhoneGap.

      Using MBO we can generate API for any platform. And HTML5, Javascript and CSS application executes on any platform. So it supports all platforms not only android.”

      You can generate a JavaScript API for MBOs that will work on any platform (although you will not get a true offline sync capability). I think both Midhun and I would agree that the approach of using HTML, JS, CSS is perfectly valid, I think where we are surprised is that you are choosing to wrap them in hand-built PhoneGap/Cordova native applications rather than use the containers which are pre-built and supplied with that functionality out of the box.

      • Before this I was not aware of how that hybrid web development works? What all js files it generates? Now I explored on Hybrid web development I got to know that it generates Javascript API.

        And it works similar to the my approach.

        • The Designer generates a few categories of scripts:

              – HWC-specific functionality

              – Mobile web app framework (jQuery Mobile) and custom extensions

              – Application framework

              – MBO-specific functionality and the accompanying WorkflowClient.xml

          When you generate the JavaScript API for MBOs, you get only the last.  The others are still available in the Mobile SDK to use or not use as you see fit.