Communication between zul on different servers

answered 2023-05-25 11:22:34 +0800

MDuchemin
2390 ● 1 ● 6

Hey there.

Regarding sending parameters:

That one is easy. Just pass them as URL parameters. Whether using iframe or ZK embedded, just make the link something like http://myserver:myport/mycontext/mypage.zul?param1=value1&param2=value2&parametc=valueetc

From there, you can retrieve the params in the ViewModel, either through the implicit variables param and args in zul file, or in viewModel using queryParam annotation.

Regarding sending events back to the outer page: I can see tow ways to approach this type of structure.

• First, the one I would actually do: Communication through client-side events.

Note: this will require passing data to the client, which can be inspected through the developer tools, so ideally you'd want to send the strict minimum information for these parameters, and avoid sending anything that you would not want the user to be able to see.

In this case, I'd use either ZK embedded or an iFrame to include the subApp page into the main page. Using iframe, you'll need the extra step of setting up a communication channel between the outer window and the iframe window. This can be done with the window postMessage API

With Embedded mode, both the inner page and outer page will be in the same JavaScript context already, so you can just communicate directly between them.

Once you have a communication channel established (either directly with embedded, or through postMessage with iframe), you can send a custom event directly from the client to an arbitrary component

For example, assuming you have a

<div id="myTarget" onCustomInterApp="@command('myCommandName',data=event.data) />

// divWgt is the widget for the div, retrieved with zk.$()
// for example here, we can select by id with zk.$('$myTarget')
zAu.send(new zk.Event(divWgt, "onCustomInterApp", {value1: 'my data'}, {toServer:true}));