Codename one javascript callback

Question

I am trying to display a consent page in my app. The page should be written in html so the app need to handle a button clicked event from browser. I tried to replicate the example in blog (minus the jQuery part):

bc.addJSCallback(
    "document.getElementById('ACCEPT').addEventListener('click', function(){callback.onSuccess(true)})",
    res -> {
        System.out.println(res);
        dialog.dispose();
    }
);

The html looks like this:

<html>
<button id='ACCEPT'>Accept</button>
<button id='DECLINE'>Decline</button>
<script></script>
</html>

Nothing happened when the button was clicked. However, when the js expression was put in the <script> tag instead, 'callback' is not defined was logged, suggesting that the js expression was not the cause.

I'd like to know which part went wrong? Any help is appreciated.

It's hard to tell but this HTML seems problematic to begin with. You are missing the body tag. Did you invoke addJSCallback after onLoad was invoked? — Shai Almog

R. Wang R. Wang · Accepted Answer · 2018-11-12T15:55:45

Coming back to the original question, it seems that the problem can be solved quite easily, and more data than simple click event can be passed as well.

Method 1:

Use a <form> or <a> to redirect the BrowserComponent to any page, and listen to navigation event, like

bc.addBrowserNavigationCallback(url -> {
    if (url.equals(initialPath)) { 
        return true; //Show the first page, but do no subsequent redirection
    }
    //Do something here with data encoded in url
});

Form data can be obtained as explained in this link.

Method 2:

Register a javascript object either as onclick of a button, or as a function that is called from javascript, as explained in the documentation.

bc.addWebEventListener(BrowserComponent.onLoad, evt -> {
    bc.execute("window.cb = json => {callback.onSuccess(json);};", json -> {
        //Do something with the data here (a json in this case)
    });
});

... and in javascript

const handleFormSubmit = event => {
  event.preventDefault();
  const data = formToJSON(form.elements); //Refer to link above
  const json = JSON.stringify(data);
  //const d = btoa(json); Does not work with unicode character
  cb(json);
};
const form = document.getElementsByName('formmm')[0];
form.addEventListener('submit', handleFormSubmit);

A few afterthought:

WebEventListener cannot be used with BrowserNavigationCallback
Passing json as base64 string is hard, see Unicode Problem
While encodeUrl() is public (in Util), the inverse function is private in BrowserComponent. This complicates passing js object as url
In Method 2 use bc.addJsCallback instead of execute to callback more than once

Hope this help someone

Codename one javascript callback

1 Answers