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
Prerequisite:
- Eclipse with ADT and SDK configured.
- Basic knowledge of Java classes and packages.
Steps:
- 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 http://phonegap.com/download/.
- Extract it in a folder.
- Next step is the create an Android Application.
- Go to File->Projects and select Android Project from Existing Code
- Provide root directory as : <phonegap files extracted folder>\lib\android\example
- Check copy project into workspace
- 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
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.init();
appView.addJavascriptInterface(new MyJavaClass(), "myclass");
super.loadUrl(Config.getStartUrl());
}
}
- The next task is to class the GetName () method of MyJavaClass in javascript. Update the <body> tag of index.html file with following code
<body>
<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>
</div>
</div>
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
alert("Hello " + window.myclass.getName()); // Here we are calling the getName() method
</script>
</body>
- At this stage if you test your application it should generate alert box saying Hello ShashanK.
- Embedding MBO in application. Now MyJavaClass.java 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();
person.setName(name);
person.setAge(age);
MBODB.create();
}
/*
* Synchronize
**/
public void synchronize() {
MBODB.synchronize();
}
}
- Done call create() and synchronize() methods from javascript.
Hope this blog helps you to get an idea to implement Hybrid Application.
- SAP Managed Tags:
16 Comments
