Don't understand how to pass data from Android Activity to HTML UI when using PhoneGap

Question

I don't understand how it is possible to do this, since there are no WebActivities with PhoneGap, only your Activity classes and your index.html page. I have a MainActivity that looks like this...

public class MastersProjectActivity extends DroidGap
{
    @JavascriptInterface
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        // Set by <content src="index.html" /> in config.xml
        //super.loadUrl(Config.getStartUrl());
        super.loadUrl("file:///android_asset/www/index.html");
        Context myCntxt = getApplicationContext();

        TelephonyManager tMgr = (TelephonyManager)myCntxt.getSystemService(Context.TELEPHONY_SERVICE);
        String curPhoneNumber = tMgr.getLine1Number();
        Log.d("PhoneNumber", curPhoneNumber);

    }
}

...and I want to be able to use curPhoneNumber in the index.html page, which in PhoneGap contains the entirety of the UI. Any ideas on how I can do this? I'm completely new to Android development in general, and certainly with PhoneGap. To be honest I still don't really understand how the index.html page is rendered as an Android UI. Do I need to wrap the index.html page in a WebActivity or something? I'm not sure if this would create any issues in the way PhoneGap creates the .apk.

EDIT - I tried to implement but it didn't work for me, all I got was an alert literally saying "interface.getPhoneNumber()". I may have implemented the 'MyInterface' class incorrectly? Here's the class I made....

public class MyInterface extends DroidGap {
    private MastersProjectActivity _activity;
    private CordovaWebView _view;

    public MyInterface(MastersProjectActivity activity, CordovaWebView view) {
        this._activity = activity;
        this._view = view;
    }

    @JavascriptInterface
    public String getPhoneNumber() {
        Context myCtxt = getApplicationContext();
        return ((TelephonyManager)myCtxt.getSystemService(Context.TELEPHONY_SERVICE)).getLine1Number();
    }
}

...and I exposed the javascript interface in my main activity like so...

  @Override
    public void onCreate(Bundle savedInstanceState)
    {
        .
        .
        .
        super.appView.addJavascriptInterface(new MyInterface(this, appView), "interface");
    }

...and then I call alert("interface.getPhoneNumber()") in the index.html file, but all I get is that string alerted, it doesn't actually call getPhoneNumber().

score 0 · Accepted Answer · edited May 23 '17 at 12:28

You can expose methods in an interface object, called MyInterface, which will be called from the Javascript running inside index.html. For example, you can have a method in MyInterface like:

@JavascriptInterface
public String getPhoneNumber(){
return (TelephonyManager)myCntxt.getSystemService(Context.TELEPHONY_SERVICE).getLine1Number();
}

Then, in your onCreate(), you will expose an instance of MyInterface, like this:

public void onCreate(Bundle savedInstanceState){
//...
super.appView.addJavascriptInterface(new MyInterface(this,appView), "interface");
}

Then, in your index.html, you will have some Javascript that calls this method. For example,

<script type="text/javascript">
alert("interface.getPhoneNumber()");
</script>

Check out this question for details on how to do it.

EDIT: First, MyInterface does not need to extend DroidGap, e.g., it is a siple POJO.

Second, I made a small mistake in the JS: you don't need the double quotes.

<script type="text/javascript">
alert(window.interface.getPhoneNumber());
</script>

Third, as noted here, you will need to add this line after your super.onCreate():

super.init(); // Calling this is necessary to make this work

One small little think: You can use this._activity as your context, instead of calling getApplicationContext() in getPhoneNumber().

Don't understand how to pass data from Android Activity to HTML UI when using PhoneGap

1 Answers1