Accessing dialog running on a UI thread in Phonegap plugin

Question

I'm new to Android development, I needed to implement custom dialog plugin similar to the one in the ChildBrowser plugin.

While I have managed to implement most of the functionality for this dialog, including JS callback events on certain dialog actions, I was unable to implement sending data from JS back to the dialog while it's shown.

Scenario is the following: when the dialog's Spinner is changed, JS callback is being called, JS code performs some processing (access sqlStorage data, etc.) and afterwards I need to update some views of the dialog. My current code (without non-relevant things):

CustomDialogPlugin.java:

public class CustomDialogPlugin extends Plugin {
    @Override
    public PluginResult execute(String action, JSONArray args, String callbackId) {
        PluginResult.Status status = PluginResult.Status.OK;
        String result = "";

        try {
            if (action.equals("show")) {
                result = this.showDialog(args.optJSONObject(0), callbackId);
                // ...
            } else if (action.equals("update")) {
                this.updateData(args.optJSONObject(0));
            }
        } catch(JSONException e) {
            // ...
        }
    }

    // Show the dialog
    public String showDialog(JSONObject options, final String callbackId) {
        if (options != null) {
            // Handle options
        }

        // Create the child dialog in new thread
        Runnable runnable = new Runnable() {

            public void run() {
                mDialog = new Dialog(ctx);
                // Dialog layouts, views and listeners setup
                // ...
                mSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener(){
                    @Override
                    public void onItemSelected(AdapterView adapter, View v, int i, long lng) {
                        // ...
                        // Prepare JSON data to send and call a callback
                        sendUpdate(CHANGED_EVENT, obj, true);
                    }

                    @Override
                    public void onNothingSelected(AdapterView adapter) {
                        // ...
                    }
                });
                // ...
                mDialog.show();
            }
        };
        this.ctx.runOnUiThread(runnable);
        return "";
    }

    // Create a new plugin result and send it back to JavaScript
    private void sendUpdate(int eventType, JSONObject obj, boolean keepCallback) {
        if (this.savedCallbackId != null) {
            // ...
            PluginResult result = new PluginResult(PluginResult.Status.OK, obj);
            Result.setKeepCallback(keepCallback);
            this.success(result, this.savedCallbackId);
        }
    }

    // Parse data received from JS and upate dialog
    protected String updateData(JSONObject data) {
        // Here I need to update some views of mDialog
        // Can't access them from here
    }
}

customdialog.js:

var CustomDialog = function() {};
CustomDialog.CHANGED_EVENT = 1;

CustomDialog.prototype.show = function(data) {
    return PhoneGap.exec(this._onEvent, this._onError, 'CustomDialogPlugin', 'show', [data]);
};

CustomDialog.prototype.update = function(data) {
    return PhoneGap.exec(this._onEvent, this._onError, 'CustomDialogPlugin', 'update', [data]);
};

CustomDialog.prototype._onEvent = function(data) {
    if (data.type == CustomDialog.CHANGED_EVENT && typeof window.plugins.CustomDialog.onChange === "function") {
        window.plugins.CustomDialog.onChange(data);
    }
    // ...
};
CustomDialog.prototype._onError = function(data) {
    // ...
};

PhoneGap.addConstructor(function() {
    PhoneGap.addPlugin('customDialog', new CustomDialog());
});

test.html:

// ...
window.plugins.customDialog.onChange = function(data) {
    // ...
    window.plugins.customDialog.update(some_other_data);
}

I've tried to create a Handler inside Runnable, and call it to handle message sent from updateData, but apparently I'm doing something wrong.

Maybe I'm over-complicating things and there is an easier way to accomplish data update from JS callback?

Thank you in advance.

Answer 1

OK, here is a solution (using Post) that finally worked for me (parameter of the function/return value are not the same as in my original question, but this is still the function I was asking about):

protected void updateData(String data) {
    mMyEdit.post(
        new Runnable() {
            public void run() {
                mMyEdit.setText(data);
            }
        }
);
}

Answer 2

The code for the Android ChildBrowser plugin may help you as it also opens up a dialog in a PhoneGap Plugin.

https://github.com/phonegap/phonegap-plugins/blob/master/Android/ChildBrowser/src/com/phonegap/plugins/childBrowser/ChildBrowser.java

Depending on what you are trying to update if you have a reference to the view you want to update in the main plugin class you should be okay.