Here comes one more Blog on HTML5.
Have you ever tried sending data from Android native to HTML page? like SMS, Call, JSON Array etc.
This blog gives you a clear picture how to pass Data to HTML5.
I have created 2 methods getTimeAndroid() which passes String to setTime() (javascript method)and getValueJson() passes JsonArray to setJson() (javascript method) respectively.
You need a "JavascriptInterface" which is a class written by you in your activity, a HTML page where you define methods & pass arguments to Android java class.
If you like it then please share it. Also if you know anything like please feel free to share
Have you ever tried sending data from Android native to HTML page? like SMS, Call, JSON Array etc.
This blog gives you a clear picture how to pass Data to HTML5.
I have created 2 methods getTimeAndroid() which passes String to setTime() (javascript method)and getValueJson() passes JsonArray to setJson() (javascript method) respectively.
You need a "JavascriptInterface" which is a class written by you in your activity, a HTML page where you define methods & pass arguments to Android java class.
Android Native code
package com.rnd.rnd;
import java.text.SimpleDateFormat;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
public class HtmlToAndroid extends Activity{
WebView mWebview;
@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.html_layout);
// Assing webview object
mWebview = (WebView)findViewById(R.id.webview);
// Load your html page here
// Enable javascript
mWebview.getSettings().setJavaScriptEnabled(true);
// Adding javascript interface to your page.
// Pass the JavaScriptInterface class & related String "AndroidNativeCode" which will be used to call android methods written below.
mWebview.addJavascriptInterface(new JavaScriptInterface(this), "AndroidNativeCode");
mWebview.loadUrl("file:///android_asset/www/index.html");
}
public class JavaScriptInterface {
Context mContext;
JavaScriptInterface(Context c) {
mContext = c;
}
// Simple method to pass Data to HTML
@SuppressLint("SimpleDateFormat")
@JavascriptInterface
public void getTimeAndroid() {
long date = System.currentTimeMillis();
SimpleDateFormat sdf = new SimpleDateFormat("dd MMM yyyy HH:mm");
mWebview.loadUrl("javascript:setTime('"+sdf.format(date)+"')");
}
// method to send JsonArray to HTML
@JavascriptInterface
public void getValueJson() throws JSONException
{
JSONArray jArray = new JSONArray();
JSONObject jObject = new JSONObject();
jObject.put("Name", "Jackson");
jObject.put("Age","24");
jArray.put(jObject);
jObject = new JSONObject();
jObject.put("Name", "Jenny");
jObject.put("Age","23");
jArray.put(jObject);
jObject = new JSONObject();
jObject.put("Name", "Fenny");
jObject.put("Age","28");
jArray.put(jObject);
mWebview.loadUrl("javascript:setJson("+jArray+")");
}
}
}
HTML page
<html>
<head>
<title>Android is Awesome!!</title>
<script type="text/javascript">
function getTime()
{
AndroidNativeCode.getTimeAndroid();
}
function setTime(time)
{
document.getElementById('datetime').innerHTML = time;
}
function getJson()
{
AndroidNativeCode.getValueJson();
}
function setJson(Jsonobject)
{
var log="";
for(var i =0; i<Jsonobject.length;i++)
{
log+= Jsonobject[i].Name +" : "+ Jsonobject[i].Age + "<br> <br>" ;
}
document.getElementById('JsonDiv').innerHTML = log;
}
</script>
</head>
<body>
<br>
<h1>Android DATA to HTML</h1>
<br>
<Button onclick="getTime()">Time</Button>
<div id="datetime"></div>
<Button onclick="getJson()">JSon Data</Button>
<div id="JsonDiv"></div>
</div>
</body>
</html>
Android Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
If you like it then please share it. Also if you know anything like please feel free to share
Can you set your code to "block code", because I'm bit confuse to see your code without highlight.
ReplyDeletecan we do the same thing with typescript angular
ReplyDeletewith hosted javascript?