Crosswalk call js function from java on android

Question

I m trying to use crosswalk runtime in my android app. I tried this on android 4+.

I got some js & html codes and it worked perfect for me. But it is not working like android webview. In the webview i can call javascript functions from java code. But i couldnt find any option in crosswalk. Any idea?

Thanks

Answer 1

Crosswalk support the similar API interface (evaluateJavascript) as Android WebView for calling JavaScript function from Java:

https://crosswalk-project.org/apis/embeddingapidocs/reference/org/xwalk/core/XWalkView.html#evaluateJavascript(java.lang.String, )

You can also use load for calling javascript function directly like: xwalkView.load("javascript:" + jsCode, null).

did you meet any issue with the Crosswalk API?

Answer 2

In Android Studio inside app/module/lib level build.gradle add this to dependencies:

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:21.0.3'
compile 'org.xwalk:xwalk_core_library:12.41.296.5'}

Sync Project

create xml layout resource

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<org.xwalk.core.XWalkView
    android:id="@+id/xwalkWebView"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#000000"
    />

</LinearLayout>

In activity onCreate or called by it

//        Don't know how this helps if the preferences are connected?
XWalkPreferences.setValue("enable-javascript", true);
XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);

xWalkView=(XWalkView)findViewById(R.id.xwalkWebView);
xWalkView.addJavascriptInterface(new JS_Bind(this, xWalkView),"Android");

xWalkView.clearCache(true);
xWalkView.load(COM_URL, null);

create class JS_Bind:

public class JS_Bind {
    private static final String TAG = "JS_Bind";
    private Context context;
    private XWalkView xWalkWebView;

    public JS_Bind(Context c, XWalkView xWalkWebView) {
        context = c;
        this.xWalkWebView = xWalkWebView;
    }

    @JavascriptInterface
    public void showToast(String toast) {
        Log.d(TAG, "showToast(String toast)");
        Toast.makeText(context, toast, Toast.LENGTH_SHORT).show();
    }
}

in web Java script call the function thus:

Android.showToast(toast);

make sure you import the correct xwalk @JavaScripInterface decorator instead of the standard web view decorator.

Answer 3

The response above is almost complete. as @Someone Somewhere commented it is needed to add these to lines in order to call native functionality from Crosswalk Webview.

1. add this import statement import org.xwalk.core.XWalkView;
2. before any exposed method to javascript put this @org.xwalk.core.JavascriptInterface instead of the default annotation @JavascriptInterface

Answer 4

For calling js method and return back result to java . you have to mix Javascript interface and evaluateJavascript.

public class JS_Bind {
    private static final String TAG = "JS_Bind";
    private Context context;
    private XWalkView xWalkWebView;

    public JS_Bind(Context c, XWalkView xWalkWebView) {
        context = c;
        this.xWalkWebView = xWalkWebView;
    }

    public String GetFullname(String FirstName , String LastName){
        xWalkWebView.evaluateJavascript(String.format(
        "Android.ReturnGetFullName(getFullName('%s','%s'))" , FirstName , LastName));
    }

    @JavascriptInterface
    public void ReturnGetFullName(String Fullname) {
        Log.d(TAG, "showToast(String toast)");
        Toast.makeText(context, Fullname, Toast.LENGTH_SHORT).show();
    }

    @JavascriptInterface
    public void showToast(String toast) {
        Log.d(TAG, "showToast(String toast)");
        Toast.makeText(context, toast, Toast.LENGTH_SHORT).show();
    }
}

and in javascript :

<script>
    function getFullName(FirstName , LastName){
        return FirstName +  " " + LastName;
    }
</script>