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">
	<template></template>
	<script>
		Polymer({
			is: "my-component",
			alert: function() { alert("alert!"); }
		});
	</script>
</dom-module>

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>
</zk> 

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">
        document.querySelector('my-component').addEventListener('close-finish',
        function() {
        zAu.send(new zk.Event(zk.Widget.$('$cancelButton'), 'onClick', 'finish', {toServer:true}));
        });
    </n:script>