Topic
No replies
SystemAdmin
SystemAdmin
2327 Posts
ACCEPTED ANSWER

Pinned topic Worklight, Cordova, jQuery (+ mobile) and WebView

‏2012-12-06T14:58:48Z |
Hi there,

I have so far had very good experience working with Worklight, jQuery and jqm inside an Android webview. However, I am running into trouble when I want to make my application a bit more advanced and make use of Cordova (PhoneGap) - e.g. getting contacts from the local telephone book. So Worklight is build upon PhoneGap, hence, with Worklight 5.0.0.x Cordova.js and Cordova.jar is integrated and distributed with Worklight. Therefore, I do not need to manually add them to my projects, which is good.

Nevertheless, I have realized none of the Cordova functionality works when I use Android Webview and use webview.loadUrl("..."). But whenever I use super.loadUrl("...") it works fine. It cannot be true that I have to make a JavaScript interface listener in Java? I have read that you can also embed a Cordova Webview, however, this class is not in the Cordova.jar which is distributed with the Worklight.

But my ultimate question is why the onDeviceReady() is fired whenever using super.loadUrl() and not while using webView.loadUrl()?

Thanks in advance.

Sincere,
Rubathas Thirumathyam

HTML:

<!DOCTYPE html> <html> <head> <meta charset=
"utf-8" /> <meta name=
"viewport" content=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /> <title>MyApp</title> <link rel=
"shortcut icon" href=
"images/favicon.png" /> <link rel=
"apple-touch-icon" href=
"images/apple-touch-icon.png" /> <link rel=
"stylesheet" href=
"css/MyApp.css" /> <script> 
// Wait for PhoneGap to load 
// document.addEventListener(
"deviceready", onDeviceReady, 

false); 
// PhoneGap is ready 
// function onDeviceReady() 
{ var options = 

new ContactFindOptions(); options.filter = 
"SomeContact"; var fields = [
"displayName", 
"name"]; navigator.contacts.find(fields, onSuccess, onError, options); 
} 
// onSuccess: Get a snapshot of the current contacts 
// function onSuccess(contacts) 
{ 

for (var i=0; i<contacts.length; i++) 
{ alert(contacts[i].displayName); console.log(
"Display Name = " + contacts[i].displayName); 
} 
} 
// onError: Failed to get the contacts 
// function onError(contactError) 
{ alert(
'onError!'); 
} </script> </head> <body id=
"content" style=
"display: none"> MyApp   <script src=
"js/initOptions.js"></script> <script src=
"js/MyApp.js"></script> <script src=
"js/messages.js"></script> <script src=
"js/jquery-1.8.2.min.js"></script> <script src=
"js/jquery.mobile-1.2.0.min.js"></script>   <script> $(
'#content').live(
'pagecreate',function(event)
{ alert(
'This page was just enhanced by jQuery Mobile!'); getContacts(); 
}); </script> </body> </html>


Java:

@Override 

public 

void onCreate(Bundle savedInstanceState) 
{ super.onCreate(savedInstanceState); setContentView(R.layout.activity_ibm); webView = (WebView) findViewById(R.id.webview);   webView.getSettings().setJavaScriptEnabled(

true); webView.loadUrl(
"file:///android_asset/www/default/MyApp.html"); 
}


Layout:
<?xml version="1.0" encoding="utf-8"?>

<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>