Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Regular Contributor
_NishantShah
Posts: 76
Registered: ‎07-31-2012
My Device: Blackberry
Accepted Solution

Bridge between JavaScript of HTML & qml

Hi,

 

I am loading a HTML file in WebView. I need to pass data from qml to JavaScript of the HTML file. Is there any way to create an interface between JavaScript code & qml to exchange data among them?

 

Thanks,

Nishant Shah

Regular Contributor
_NishantShah
Posts: 76
Registered: ‎07-31-2012
My Device: Blackberry

Re: Bridge between JavaScript of HTML & qml

Hi,

 

I did manage to find the solution. Just go through this link & you are done:

https://developer.blackberry.com/cascades/reference/bb__cascades__webview.html

 

Sorry to bother you all !

 

Regards,

Nishant Shah

Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Bridge between JavaScript of HTML & qml

Quoting from that page (to make the answer here more specific for those who may read it in future): "You can interact with JavaScript executing on the page by using postMessage() and connecting to the messageReceived() signal. JavaScript can communicate back by using the "navigator.cascades.postMessage()" function and storing a message handler in the "navigator.cascades.onmessage" property."

 

Note: You may discover as I did that these two interfaces are a bit limited in what you can send through them. They even appear to have different limitations.  For example, in one of the directions, you can't send anything that contains embedded double-quotation marks, as I recall!

 

What you can do, if you don't want to be limited to simple strings or similarly primitive data, is encode the data before sending, and decode it upon receiving.  There are routines that work on both sides for doing this.

 

In the WebView, you can use the global (i.e. on the "window" object) btoa() and atob() routines to encode to base64 before sending, or decode received messages that were base64-encoded in the QML side.


In QML, where we don't have the global window object, we do have the global Qt object, which has atob() and btoa() routines to match.

 

If you'd like to send "rich" data, you can also use JSON.stringify() on either side, to serialize more complex JavaScript objects (or arrays) to strings prior to the atob() encoding, then on the receiving side use btoa() followed by JSON.parse() to get the strings turned back into JavaScript objects.


Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Regular Contributor
_NishantShah
Posts: 76
Registered: ‎07-31-2012
My Device: Blackberry

Re: Bridge between JavaScript of HTML & qml

Hi peter,

 

Thnaks buddy that was a pretty good description. and yeah, I found it a bit limited indeed.

Is there any api to create custom signals like messageReceived() signal for WebView? I need to insert data, update data etc in db when clicked on certain buttons in HTML. I want to create different interface for them.

And also if I want to return some data from QML to javascript at times like: 

var boolVar = navigator.cascade.createTable();

I guess single navigator.cascades.onmessage handler would make quite complicated.

Regards,

Nishant Shah

Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Bridge between JavaScript of HTML & qml

I don't think we have any way of adding custom handlers directly, but there's really nothing stopping you from bundling a "type" field with your message, and dispatching to routines based on it. JavaScript is dynamic enough that you can do some simple string processing and look up functions in the messageReceived() handler, and then dispatch to them.

For example, you can send (serialized and encoded) an object like {msgType: 'insert', data: {yourDataHere...}}, then in the receiving side you take (after decoding and deserializing) funcName = 'msg' + message.msgType; and then dispatch to functions on your root component with root[funcName](message.data).

I can post more detail about it a bit later (probably under a week) if this isn't detailed enough information yet.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Regular Contributor
_NishantShah
Posts: 76
Registered: ‎07-31-2012
My Device: Blackberry

Re: Bridge between JavaScript of HTML & qml

Hi peter,

 

Right now I did the way you suggested only. Still It would be better if we had different handler & could have been simpler to create cross applications. Anyways thanks a ton for replying

 

Regards,

Nishant Shah