Web components & Polymer how-to

How to invoke method from outside of a Polymer component when you’re in in a *.zul file from ZK Framework?

Polymer Element:

<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/polymer/polymer.html">
<dom-module id="my-component">
			is: "my-component",
			alert: function() { alert("alert!"); }

Sample usage:

<zk xmlns:n="native" xmlns:w="client">
	<n:my-component id="myComponent"></n:my-component>
	<button id="someButton" w:onClick="document.querySelector('#myComponent').alert()">Click Me</button>

How to attach event listener to custom Polymer component and propagate event to server side using zAu?

The event is fired inside of a Polymer element using fire() method:

     this.fire('close-finish', "more detailed data", { bubbles: false });		

Native JavaScript below adds a new event listener to the component. Event handler executes zAu engine command to forward the event to the server.

    <n:script xmlns:n="native">
        function() {
        zAu.send(new zk.Event(zk.Widget.$('$cancelButton'), 'onClick', 'finish', {toServer:true}));