Binding JavaScript code to Android code
When Building a WebView based Web App in Android, you can communicate with your android client side code through your Javascript code.
You can call any method of Android client side code on any triggered event on JavaScript code.
For example, the following code will call the showAndroidDialog() in your Activity on an onClick event of a button in your JavaScript code.
androidjs.html
<html>
<head>
<style>
body{
background-color: #FF0000;
color:#fff;
}
input{
background-color: #F7D358;
padding:10px;
color: #000;
}
div#content{
padding:20px;
background-color: #F7D358;
color: #000;
}
</style>
<script type="text/javascript">
function showAndroidDialogg(dialogmsg) {
Android.showAndroidDialog(dialogmsg);
}
</script>
</head>
<body>
<center>
<h3>Binding JavaScript code to Android code</h3>
<div id="content">
The following button will call the showAndroidDialog() in your Activity.
</div>
</br></br>
<div>
<input type="button" value="Trigger Dialog" onClick="showAndroidDialogg('This dialog is triggered by Javascript')" /><br/>
</div>
</center>
</body>
</html>
Inside Activity, you inject interface class in the Javascript WebView using addjavascriptInterFace() method and passing the desired parameters.
Here is the Activity JSWebViewActivity .class
You can either store your androidjs.html file in your server or at your client side android project directory,
In this case I have put androidjs.html in assets/ folder in your project directory.
public class JSWebViewActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main );
//WebView Object
WebView browser;
browser=(WebView)findViewById(R.id.webview);
//Enable Javascript
browser.getSettings().setJavaScriptEnabled(true);
/*
Inject WebAppInterface methods into Web page
by having Interface name 'AndroidInterface'
*/
browser.addJavascriptInterface(new WebAppInterface(this), "Android");
//Load URL inside WebView
browser.loadUrl("file:///android_asset/jstest.html");
}
//Class to be injected in Web page
public class WebAppInterface {
Context mContext;
/** Instantiate the interface and set the context */
WebAppInterface(Context c) {
mContext = c;
}
/**
* Show Dialog
* @param dialogMsg
*/
@JavascriptInterface
public void showAndroidDialog(String dialogMsg){
AlertDialog alertDialog = new AlertDialog.Builder(mContext).create();
// Setting Dialog Title
alertDialog.setTitle("JS triggered Dialog");
// Setting Dialog Message
alertDialog.setMessage(dialogMsg);
// Setting OK Button
alertDialog.setButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int which) {
Toast.makeText(mContext, "Dialog dismissed!", Toast.LENGTH_SHORT).show();
}
});
// Showing Alert Message
alertDialog.show();
}
}
}
main.xml
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<WebView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</ScrollView>
and ,
put this permission into you Manifest.xml
<uses-permission android:name="android.permission.INTERNET" />
0 Comment(s)