Introduction

One of the new things you can do in ZK8 is to publish a ZK’s data binding command on a native html element. For example, you can publish a doClick command in your view model with an onClick event in a html Button. By using this cool feature, we can now easily grab some native html elements and make them work with ZK’s data binding.  In the rest of this blog, we will demo how to make a Polymer web component interact with ZK’s data binding. If you are not familiar with Polymer, please checkout their official page.

Demo

This demo displays the temperature variation of New York City by date. User can choose which day they want to check out by selecting the date on the calender.

Implementation

We have three files for this demo, a zul page, a view model and a data model. Our zul page looks like the following:

<zk>
<?link rel="import" href="bower_components/d-calendar/d-calendar.html"?>

<window apply="org.zkoss.bind.BindComposer" 
	viewModel="@id('vm') @init('org.zkoss.demo.DemoViewModel')"
	validationMessages="@id('vmsgs')"
	xmlns:n="native">

       	<n:d-calendar id="cal" class="light-theme" selectedDate="2/22/15" />
       	<charts title="New York City's Daily Temperature Records" 
       			id="chart" type="line" model="@bind(vm.chartModel)" />

       <n:script>
       	zk.afterLoad(function() {
       		jq('#cal').on('d-calendar-date-selected', function(evt) {
       			var selDate = evt.originalEvent.detail.date;

		        zkbind.$('$cal').command('doDateSelected', 
		        	{date: selDate.getDate(), month: selDate.getMonth() + 1,
		        	 year: selDate.getFullYear()});

       		});
       	});
       </n:script>
</window>
</zk>

The calendar we used here is d-calendar, which is a polymer component made by Darek Rossman and the chart we used here is ZK Charts. At line 2, we import the d-calendar html file. At line 11, we bind our chart’s model to the chartModel in our view model. In the script tag, we subscript the date-selected event provided by d-calendar at line 15. Then at line 18, we use ZK8’s new client side data binding API to publish a doDataSelected command back to our view model. In our view model,the doDataSelected method looks like:

	@Command
	@NotifyChange("chartModel")
	public void doDateSelected(@BindingParam("date") String date, 
		@BindingParam("month") String month, @BindingParam("year") String year) {
		String selDate = year + month + date;
		_chartModel = DemoTemperatureDataModel.getModelByDate(selDate);
	}

In this command, we use the received  date to get the corresponding chart model from our data model and update our chart.

To read more about ZK8’s new client side binding API, please refer to here.

Download

The complete implementation of this demo can be found on github.