Masked Input Component

Small Custom ZK Component based on jquery

Thanks to benbai  and gekkio for helping me in the ZK Forum to complete this example.

In this example, we will see how to handle masked input values such as Phone No, zipcode, SSN, TIN, etc.
For your further reference, you can see the following http://www.zkoss.org/zkdemo/effects/form_effect
You can download the jquery plugin from http://digitalbush.com/projects/masked-input-plugin/

Step 1: If you are new to ZK, then setup the Development environment by following this document.

Step 2:
Create a ZK Project and name as MaskedInput

Step 3:
Create a folder called js under the webcontent folder and add the two jquery files as shown.

We need inform ZK that, we are going use this jquery plugin. That can be done using Language add-on file. Under the webcontent folder, create a xml file and name as ZKAddon.xml.

Paste the below code.

<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
	<addon-name>myaddon</addon-name>
	<language-name>xul/html</language-name>
	<javascript src="/js/jquery.maskedinput-1.3.js" />
	<javascript src="/js/watermarkinput.js" />
</language-addon>

Next we need to refer this addon file in zk.xml file under the web-inf folder. Update the zk.xml file as follows

<?xml version="1.0" encoding="UTF-8"?>

<!--
	Created by ZK Studio
-->

<zk>
	<device-config>
		<device-type>ajax</device-type>
		<timeout-uri>/timeout.zul</timeout-uri><!-- An empty URL can cause the browser to reload the same URL -->
	</device-config>
	
	<language-config>
		<addon-uri>/ZKAddon.xml</addon-uri>
	</language-config>
	
</zk>

Step 4:
Next we will create component java class file to support our new component. Create a package called “zkexample” and create a class called “MaskedBox” as shown

package zkexample;

import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zul.Textbox;

public class MaskedBox extends Textbox {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private String format;
	private String waterMark = "";

	public String getFormat() {
		return format;
	}

	public void setFormat(String format) {
		this.format = format;
	}

	public String getWaterMark() {
		return waterMark;
	}

	public void setWaterMark(String waterMark) {
		this.waterMark = waterMark;
	}

	@SuppressWarnings({ "unchecked", "rawtypes" })
	public MaskedBox() {
		setMold("rounded");
		this.addEventListener(Events.ON_CREATE, new EventListener() {
			@Override
			public void onEvent(Event event) throws Exception {
				String mask;
				if (waterMark.equals(""))
					mask = "jq(this.getInputNode()).mask('" + format + "');";
				else
					mask = "jq(this.getInputNode()).mask('" + format
							+ "');jq(this.getInputNode()).Watermark('"
							+ waterMark + "'," + "'" + "gray" + "'" + ");";
				setWidgetListener("onBind", mask);
			}
		});
	}
}

Next we need to update our ZKAddon.xml file about this new component. Here is the updated ZKAddon.xml file

<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
	<addon-name>myaddon</addon-name>
	<language-name>xul/html</language-name>
	<javascript src="/js/jquery.maskedinput-1.3.js" />
	<javascript src="/js/watermarkinput.js" />

	<component>
		<component-name>MaskedBox</component-name>
		<component-class>zkexample.MaskedBox
		</component-class>
		<extends>textbox</extends>
	</component>

</language-addon>

Step 5:
That’s all. We are ready use our new component. Update the index.zul as follows and run on tomcat server

<?page title="Auto Generated index.zul"?>
<window title="Masked Input!!" border="normal" width="450px">
	<label value="You are using: ${desktop.webApp.version}" />
	<separator></separator>
	<grid>
		<columns>
			<column width="20%"></column>
			<column></column>
			<column></column>
		</columns>
		<rows>
			<row>
				<label value="SSN" />
				<MaskedBox format="999-99-9999"></MaskedBox>
				<label value="Format : 999-99-9999" />
			</row>
			<row>
				<label value="NPI" />
				<MaskedBox format="9999999999"></MaskedBox>
				<label value="Format : 9999999999" />
			</row>
			<row>
				<label value="DEA" />
				<MaskedBox format="aa9999999"></MaskedBox>
				<label value="Format : aa9999999" />
			</row>
			<row>
				<label value="EIN" />
				<MaskedBox format="99-9999999"></MaskedBox>
				<label value="Format : 99-9999999" />
			</row>
			<row>
				<label value="Phone" />
				<MaskedBox waterMark="(###) ###-####" format="(999) 999-9999"></MaskedBox>
				<label value="Format : (999) 999-9999')" />
			</row>
			<row>
				<label value="ZipCode" />
				<MaskedBox format="99999-9999"></MaskedBox>
				<label value="format : 99999-9999" />
			</row>
			<row>
				<label value="DOB" />
				<MaskedBox waterMark="mm/dd/yyyy" format="99/99/9999"></MaskedBox>
				<label value="format : 99/99/9999" />
			</row>
			<row>
				<label value="Phone + Ext" />
				<MaskedBox 
					format="(999) 999-9999? x99999">
				</MaskedBox>
				<label value="format : (999) 999-9999? x99999" />
			</row>

		</rows>
	</grid>
</window>

Output

Well, if you are start using this in the production, you will have some problems. The problem if you just navigate in the input area without entering any values, then the masking characters will be stored. Let us see how to handle this problem now.

Step 5:
Let us convert this example into MVVM. Under the zkexample package, create a class called person as follows

package zkexample;

public class Person {

	private String SSN;
	private String NPI;
	private String DEA;
	private String EIN;
	private String Phone;
	private String zipCode;
	private String DOB;
	private String phoneExt;

	public String getSSN() {
		return SSN;
	}

	public void setSSN(String sSN) {
		SSN = sSN;
	}

	public String getNPI() {
		return NPI;
	}

	public void setNPI(String nPI) {
		NPI = nPI;
	}

	public String getDEA() {
		return DEA;
	}

	public void setDEA(String dEA) {
		DEA = dEA;
	}

	public String getEIN() {
		return EIN;
	}

	public void setEIN(String eIN) {
		EIN = eIN;
	}

	public String getPhone() {
		return Phone;
	}

	public void setPhone(String phone) {
		Phone = phone;
	}

	public String getZipCode() {
		return zipCode;
	}

	public void setZipCode(String zipCode) {
		this.zipCode = zipCode;
	}

	public String getDOB() {
		return DOB;
	}

	public void setDOB(String dOB) {
		DOB = dOB;
	}

	public String getPhoneExt() {
		return phoneExt;
	}

	public void setPhoneExt(String phoneExt) {
		this.phoneExt = phoneExt;
	}

}

Now let us modify our index.zul and we will attach View model to this zul file as follows

<?page title="Auto Generated index.zul"?>
<window title="Masked Input!!" border="normal" width="450px"
	apply="org.zkoss.bind.BindComposer"
	viewModel="@id('vm') @init('zkexample.PersonVM')">
	<label value="You are using: ${desktop.webApp.version}" />
	<separator></separator>
	<div
		form="@id('fx') @load(vm.selectedRecord) @save(vm.selectedRecord, before='saveThis')">
		<grid>
			<columns>
				<column width="20%"></column>
				<column></column>
				<column></column>
			</columns>
			<rows>
				<row>
					<label value="SSN" />
					<MaskedBox format="999-99-9999"
						value="@bind(fx.SSN)">
					</MaskedBox>
					<label value="Format : 999-99-9999" />
				</row>
				<row>
					<label value="NPI" />
					<MaskedBox format="9999999999"
						value="@bind(fx.NPI)">
					</MaskedBox>
					<label value="Format : 9999999999" />
				</row>
				<row>
					<label value="DEA" />
					<MaskedBox format="aa9999999"
						value="@bind(fx.DEA)">
					</MaskedBox>
					<label value="Format : aa9999999" />
				</row>
				<row>
					<label value="EIN" />
					<MaskedBox format="99-9999999"
						value="@bind(fx.EIN)">
					</MaskedBox>
					<label value="Format : 99-9999999" />
				</row>
				<row>
					<label value="Phone" />
					<MaskedBox waterMark="(###) ###-####"
						value="@bind(fx.phone)" format="(999) 999-9999">
					</MaskedBox>
					<label value="Format : (999) 999-9999')" />
				</row>
				<row>
					<label value="ZipCode" />
					<MaskedBox format="99999-9999"
						value="@bind(fx.zipCode)">
					</MaskedBox>
					<label value="format : 99999-9999" />
				</row>
				<row>
					<label value="DOB" />
					<MaskedBox waterMark="mm/dd/yyyy"
						format="99/99/9999" value="@bind(fx.DOB)">
					</MaskedBox>
					<label value="format : 99/99/9999" />
					
				</row>
				<row>
					<label value="Phone + Ext" />
					<MaskedBox format="(999) 999-9999? x99999"
						value="@bind(fx.phoneExt)">
					</MaskedBox>
					<label value="format : (999) 999-9999? x99999" />
				</row>
			</rows>
		</grid>
		<button onClick="@command('saveThis')" label="Submit"></button>
	</div>
	
</window>

Under the zkexample package, create PersonVM as follows

package zkexample;

import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;

public class PersonVM {

	private Person selectedRecord;

	public Person getSelectedRecord() {
		return selectedRecord;
	}

	public void setSelectedRecord(Person selectedRecord) {
		this.selectedRecord = selectedRecord;
	}

	@AfterCompose
	public void initSetup(@ContextParam(ContextType.VIEW) Component view) {
		Selectors.wireComponents(view, this, false);
		selectedRecord= new Person();
	}

	@Command
	public void saveThis() {
		
		System.out.println("SSN " + selectedRecord.getSSN()  );
		System.out.println("NPI " + selectedRecord.getNPI() );
		System.out.println("DEA " + selectedRecord.getDEA() );
		System.out.println("EIN" + selectedRecord.getEIN() );
		System.out.println("Phone " + selectedRecord.getPhone() );
		System.out.println("Zipcode " + selectedRecord.getZipCode());
		System.out.println("DOB" + selectedRecord.getDOB());
		System.out.println("Phone Ext" + selectedRecord.getPhoneExt() );
		
	}

}

Now run the application , just using tab, navigate the input area without entering any values and click the submit button.

You can see the following output in the console
SSN ___-__-____
NPI __________
DEA _________
EIN__-_______
Phone (___) ___-____
Zipcode _____-____
DOB__/__/____
Phone Ext(___) ___-____ x_____

Now you understand the Problem ? This can be overcome using ZK Converter concept.
Let us create our own converter as follows

Under zksample package, create class called MaskConverter which implements org.zkoss.bind.Converter

package zkexample;

import org.zkoss.bind.BindContext;
import org.zkoss.bind.Converter;
import org.zkoss.zk.ui.Component;

public class MaskConverter implements Converter {

	/**
	 * The method coerceToUi() is invoked when loading ViewModel's property to
	 * component and its return type should correspond to bound component
	 * attribute's value[1]. The coerceToBean() is invoked when saving. If you
	 * only need to one way conversion, you can leave unused method empty.
	 */

	public Object coerceToUi(Object val, Component comp, BindContext ctx) {
		// do nothing
		return val;
	}

	public Object coerceToBean(Object val, Component comp, BindContext ctx) {
		/*
		 * Here we will check only masking characters are present, if so, then
		 * return null
		 */
		final String propValue = (String) val;
		if (IsEmptyByMask(propValue))
			return null;
		else
			return val;

	}

	public boolean IsEmptyByMask(String s1) {
		if (isEmpty(s1) == false) {
			s1 = s1.replaceAll("_", "").replace("(", "").replace(")", "")
					.replace("-", "").replace(" ", "").replace("/", "").trim();
			if (isEmpty(s1))
				return true;
			else
				return false;
		}
		return true;
	}

	public static boolean isEmpty(String s) {
		return s == null || s.trim().length() == 0;
	}
}

Basically, this converter removes the masking character before saving to domain object. Now let us apply this convert to our MaskedBox Component. Here is the updated index.zul where we applied our converter.

<?page title="Auto Generated index.zul"?>
<window title="Masked Input!!" border="normal" width="450px"
	apply="org.zkoss.bind.BindComposer"
	viewModel="@id('vm') @init('zkexample.PersonVM')">
	<label value="You are using: ${desktop.webApp.version}" />
	<separator></separator>
	<div
		form="@id('fx') @load(vm.selectedRecord) @save(vm.selectedRecord, before='saveThis')">
		<grid>
			<columns>
				<column width="20%"></column>
				<column></column>
				<column></column>
			</columns>
			<rows>
				<row>
					<label value="SSN" />
					<MaskedBox format="999-99-9999"
						value="@bind(fx.SSN) @converter('zkexample.MaskConverter')">
					</MaskedBox>
					<label value="Format : 999-99-9999" />
				</row>
				<row>
					<label value="NPI" />
					<MaskedBox format="9999999999"
						value="@bind(fx.NPI)  @converter('zkexample.MaskConverter')">
					</MaskedBox>
					<label value="Format : 9999999999" />
				</row>
				<row>
					<label value="DEA" />
					<MaskedBox format="aa9999999"
						value="@bind(fx.DEA)  @converter('zkexample.MaskConverter')">
					</MaskedBox>
					<label value="Format : aa9999999" />
				</row>
				<row>
					<label value="EIN" />
					<MaskedBox format="99-9999999"
						value="@bind(fx.EIN)  @converter('zkexample.MaskConverter')">
					</MaskedBox>
					<label value="Format : 99-9999999" />
				</row>
				<row>
					<label value="Phone" />
					<MaskedBox waterMark="(###) ###-####"
						value="@bind(fx.phone) @converter('zkexample.MaskConverter')"
						format="(999) 999-9999">
					</MaskedBox>
					<label value="Format : (999) 999-9999')" />
				</row>
				<row>
					<label value="ZipCode" />
					<MaskedBox format="99999-9999"
						value="@bind(fx.zipCode) @converter('zkexample.MaskConverter')">
					</MaskedBox>
					<label value="format : 99999-9999" />
				</row>
				<row>
					<label value="DOB" />
					<MaskedBox waterMark="mm/dd/yyyy"
						format="99/99/9999"
						value="@bind(fx.DOB) @converter('zkexample.MaskConverter')">
					</MaskedBox>
					<label value="format : 99/99/9999" />

				</row>
				<row>
					<label value="Phone + Ext" />
					<MaskedBox format="(999) 999-9999? x99999"
						value="@bind(fx.phoneExt) @converter('zkexample.MaskConverter')">
					</MaskedBox>
					<label value="format : (999) 999-9999? x99999" />
				</row>
			</rows>
		</grid>
		<button onClick="@command('saveThis')" label="Submit"></button>
	</div>

</window>

Now run the project and the following is output.

SSN null
NPI null
DEA null
EINnull
Phone null
Zipcode null
DOBnull
Phone Extnull

You can download the source here.

Read More

ZK composite component Example

Thanks to benbai for helping me in the ZK Forum to complete this example.

This example shows how to create our own component using ZK Composite Component method.

Use case : Why and what is the ZK Composite Component. Well, assume that, in your project, there are similar screens and in each screen at the top , you need a display caption on the left hand side and on the right end corner, you need buttons such as “Save,” Cancel”, “Back”, etc.

Step 1: If you are new to ZK, then setup the Development environment by following this document.

Step 2:
Create a ZK Project and name as CompositeComp

Step 3:
Before creating our own component, let us see what we need to create and how should be our output. Copy the below code and paste in the index.zul file

<window>

<style>

.sectionTitleLabel.z-label {
	font-size: 18px;
	font-weight: bolder;
	color: #0C6BA8;
}

.sectionTitle {
	float: left;
	padding-left: 20px;
}

.sectionSeperator {
	margin-bottom: 18px;
	padding-bottom: 0.25em;
	margin-left: 20px;
	border-bottom: 4px solid #DFDFDF
}

.mybutton.z-button .z-button-cm {
	background-image: none;
	color: white;
	font-weight: bolder;
}

.mybutton.z-button .z-button-tm,.z-button .z-button-bm {
	background-image: none;
}

.mybutton.z-button .z-button-cl,.z-button .z-button-cr {
	background-image: none;
}

.mybutton.z-button .z-button-tl {
	background-image: none;
}

.mybutton.z-button .z-button-bl {
	background-image: none;
}

.mybutton.z-button .z-button-tr {
	background-image: none;
}

.mybutton.z-button .z-button-br {
	background-image: none;
}

.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

.button:hover {
	text-decoration: none;
}

.button:active {
	position: relative;
	top: 1px;
}

.small {
	font-size: 11px;
	padding: .2em 1em .275em;
}

.blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee),
		to(#0078a5) );
	background: -moz-linear-gradient(top, #00adee, #0078a5);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',
		endColorstr='#0078a5' );
}

.blue:hover {
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc),
		to(#00678e) );
	background: -moz-linear-gradient(top, #0095cc, #00678e);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc',
		endColorstr='#00678e' );
}

.blue:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5),
		to(#00adee) );
	background: -moz-linear-gradient(top, #0078a5, #00adee);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',
		endColorstr='#00adee' );
}

</style>
	<div width="96%">
		<span width="100%">
			<div sclass="sectionTitle">
				<separator />
				<label value="Registration" sclass="sectionTitleLabel" />
				<separator />
			</div>
		</span>
		<div style="float:right;margin-top:6px;">
			<button mold="trendy" label="Cancel" sclass="mybutton button blue small " />
			<button mold="trendy" label="Save"  sclass="mybutton button blue small"/>
		</div>
		<div style="clear: both;"></div>
		<div sclass="sectionSeperator"></div>
	</div>
</window>

Now let us run the index.zul and the following is the output.

So as per our use case, we need to write the same set of code in each zul file to achieve the output. Instead of writing whole bunch of code again and again, let us create our component with necessary attributes.

Step 4:
First let us create the zul file called “header.zul” as shown in the figure.

Here is the content of the header.zul file

<div width="96%">

	<style>

		.sectionTitleLabel.z-label { font-size: 18px; font-weight:
		bolder; color: #0C6BA8; }

		.sectionTitle { float: left; padding-left: 20px; }

		.sectionSeperator { margin-bottom: 18px; padding-bottom: 0.25em;
		margin-left: 20px; border-bottom: 4px solid #DFDFDF }

		.mybutton.z-button .z-button-cm { background-image: none; color:
		white; font-weight: bolder; }

		.mybutton.z-button .z-button-tm,.z-button .z-button-bm {
		background-image: none; }

		.mybutton.z-button .z-button-cl,.z-button .z-button-cr {
		background-image: none; }

		.mybutton.z-button .z-button-tl { background-image: none; }

		.mybutton.z-button .z-button-bl { background-image: none; }

		.mybutton.z-button .z-button-tr { background-image: none; }

		.mybutton.z-button .z-button-br { background-image: none; }

		.button { display: inline-block; zoom: 1; /* zoom and *display =
		ie7 hack for display:inline-block */ *display: inline;
		vertical-align: baseline; margin: 0 2px; outline: none; cursor:
		pointer; text-align: center; text-decoration: none; font:
		14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em;
		text-shadow: 0 1px 1px rgba(0, 0, 0, .3); -webkit-border-radius:
		.5em; -moz-border-radius: .5em; border-radius: .5em;
		-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
		-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); box-shadow: 0 1px
		2px rgba(0, 0, 0, .2); }

		.button:hover { text-decoration: none; }

		.button:active { position: relative; top: 1px; }

		.small { font-size: 11px; padding: .2em 1em .275em; }

		.blue { color: #d9eef7; border: solid 1px #0076a3; background:
		#0095cd; background: -webkit-gradient(linear, left top, left
		bottom, from(#00adee), to(#0078a5) ); background:
		-moz-linear-gradient(top, #00adee, #0078a5); filter:
		progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee',
		endColorstr='#0078a5' ); }

		.blue:hover { background: #007ead; background:
		-webkit-gradient(linear, left top, left bottom, from(#0095cc),
		to(#00678e) ); background: -moz-linear-gradient(top, #0095cc,
		#00678e); filter:
		progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc',
		endColorstr='#00678e' ); }

		.blue:active { color: #80bed6; background:
		-webkit-gradient(linear, left top, left bottom, from(#0078a5),
		to(#00adee) ); background: -moz-linear-gradient(top, #0078a5,
		#00adee); filter:
		progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5',
		endColorstr='#00adee' ); }

	</style>
	<span width="100%">
		<div sclass="sectionTitle">
			<separator />
			<label id="lcaption"  sclass="sectionTitleLabel" />
			<separator />
		</div>
	</span>
	<div id="buttonsDiv" style="float:right;margin-top:6px;">
		
	</div>
	<div style="clear: both;"></div> 
	<div sclass="sectionSeperator"></div>
</div>

As you can see, now we have removed the label caption (Left hand side) and also we have removed the buttons on the right hand side. We will pass what will be caption and what will be buttons to be display from the client zul file.

Step 5:
Next we will create the java class to support our own component. Create a class called “Header.java” in the package org.zkoss.zul.

package org.zkoss.zul;

import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.IdSpace;
import org.zkoss.zk.ui.ext.AfterCompose;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;

public class Header extends Div implements IdSpace, AfterCompose {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;

	@Wire
	private Label lcaption;

	@Wire
	private Div buttonsDiv;

	private String _buttons;

	public Header() {
		Executions.createComponents("header.zul", this, null);
		Selectors.wireComponents(this, this, false);
		Selectors.wireEventListeners(this, this);
	}

	@Override
	public void afterCompose() {
		createButtons();

	}

	public void createButtons() {
		buttonsDiv.getChildren().clear();
		for (String btn : _buttons.split(",")) {
			Button button = new Button(btn.trim());
			button.addForward("onClick", this, "onButtonsClick", btn.trim());
			button.setParent(buttonsDiv);
			button.setMold("trendy");
			button.setSclass("mybutton button blue small");
			Space space = new Space();
			space.setSpacing("3px");
			space.setParent(buttonsDiv);
			
		}
	}

	public void setButtons(String buttons) {
		_buttons = buttons;
	}

	public String getLcaption() {
		return lcaption.getValue();
	}

	public void setLcaption(String lcaption) {
		this.lcaption.setValue(lcaption);
	}

}

As you can see, we have only two attributes such as What caption has to display in the left and how many buttons to be display on the right hand side. In the aftercompose, we are creating the buttons and also we are registering the event for those buttons.

That’s all, Now we are ready to use our own component.

Step 6:
Now we will use this newly created component in our index.zul file . Here is the simplified code of index.zul

<?page title="Auto Generated index.zul"?>
<!-- Composite component  -->
<?component name="header" class="org.zkoss.zul.Header" ?>
<window apply="org.zkoss.bind.BindComposer"
	viewModel="@id('vm') @init('org.zkoss.zul.CompositeTestVM')">
	<header lcaption="Registration" buttons="Cancel,Save" onButtonsClick="@command('buttonsClick')"></header>
</window>

And also using MVVM, we will handle button click event as follows

package org.zkoss.zul;

import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.zk.ui.event.ForwardEvent;

public class CompositeTestVM {

	@Command
	public void buttonsClick(
			@ContextParam(ContextType.TRIGGER_EVENT) ForwardEvent event) {
		Messagebox.show(" Button Clicked " + event.getData() + " " + event.getOrigin().getTarget()  + " " + ((Button) event.getOrigin().getTarget()).getLabel());
	}
}

Now you can run the index.zul to get the same output as follows

You can download the source here

Read More

ZK Datebox: Customize Datebox as Yearbox/Monthbox

This article based on Bai Ben from his blog. You can check here.

My sincere thanks to him who helped me in this example

ZK Version : 6.5.0

Concepts used in this example

1. ZK Client side Programming using Javascript
2. Widget Customization
3. UI Composing.
4. Put in a Separate File and Reference it in Language Addon.
5. Language Definition
6. Sample of a Language Definition
7. Client Side Programming

Step 1:
If you are new ZK, then first we need to setup the development environment. This document will help you to do the same.

Step 2:
Let us create the Project in eclipse. Click File -> New -> ZK Project . Let us name the project as ZKMVCListing1. After creating the New ZK Project, the folder structure should look as follows





Step 3:
Now let us add the javascript which will override default behavior of zk native datebox component.




Here java script file

zk.afterLoad("zul.db", function () {
// Datebox Calendar Renderer
var _Cwgt = {};
zk
.override(
zul.db.CalendarPop.prototype,
_Cwgt,
{
// switch the view after redraw or open as needed
redraw : function(out) {
_Cwgt.redraw.apply(this, arguments); // call the
// original
// method
this._customChangeView();
},
open : function(silent) {
_Cwgt.open.apply(this, arguments); // call the
// original
// method
this._customChangeView();
},
_customChangeView : function() {
// cannot show month/day
if (jq(this.parent.$n()).hasClass(
'datebox-year-only')) {
var view = this._view;
// switch to year view as needed
if (view == 'month' || view == 'day')
this._setView("year");
} else if (jq(this.parent.$n()).hasClass(
'datebox-month-only')) {
// cannot show day view
// switch to month view as needed
if (this._view == 'day')
this._setView("month");
}
},
// customize the chooseDate function
_chooseDate : function(target, val) {
var view = this._view;
if (jq(this.parent.$n()).hasClass(
'datebox-month-only')
|| jq(this.parent.$n()).hasClass(
'datebox-year-only')) {
// do customize chooseDate if the parent
// (datebox)
// has specific class
var date = this.getTime(), year = (view == 'decade' || view == 'year') ? val
: date.getFullYear(), month = view == 'month' ? val
: 0, date = 1;
// set date value
this._setTime(year, month, 1);
if (view == 'decade') {
// switch to year view if at decade view
this._setView("year");
} else if (jq(this.parent.$n()).hasClass(
'datebox-month-only')
&& view == 'year') {
// switch to month view if at year view and
// the month view is allowed
this._setView("month");
} else if (jq(this.parent.$n()).hasClass(
'datebox-month-only')
&& view == 'month'
|| jq(this.parent.$n()).hasClass(
'datebox-year-only')
&& view == 'year') {
// close calendar and update value if
// already at the smallest allowed view
this.close();
this.parent.updateChange_();
}
} else {
_Cwgt._chooseDate.apply(this, arguments); // call
// the
// original
// method
}
}
});
});

Step 4:
We will create addon file and refer the above Java script file as follows



my-addon.xml

<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
<addon-name>myaddon</addon-name>
<language-name>xul/html</language-name>
<addon-name>my.extension</addon-name><!-- any name you like -->
<javascript src="js/YearBox.js" /> <!-- assume you package it as /myjs/foo.js -->
</language-addon>

 
Step 5:
Next we will say that we are using our own addon file in the ZK.xml



ZK.XML

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created by ZK Studio -->
<zk>
<device-config>
<device-type>ajax</device-type>
<timeout-uri>/timeout.zul</timeout-uri><!-- An empty URL can cause the 
browser to reload the same URL -->

</device-config>

<language-config>

<addon-uri>/WEB-INF/my-addon.xml</addon-uri>

</language-config>

</zk>

Step 6:
That’s all, We can update our index.zul file as follows to see the output

<?page title="Auto Generated index.zul"?>
<window title="Hello World!!" border="normal" width="200px">
<label value="You are using: ${desktop.webApp.version}"/>
<vbox>
<label value="datebox that do not allow the month/day view" />
<datebox id="dbx" sclass="datebox-year-only"
format="yyyy">
<attribute name="onChange"><![CDATA[
Date date = self.getValue();
alert("Year: " + (date.getYear()+1900));
]]></attribute>
</datebox>
<label value="datebox that do not allow the day view" />
<datebox id="dbx2" sclass="datebox-month-only"
format="yyyy-MM">
<attribute name="onChange"><![CDATA[
Date date = self.getValue();
alert("Year: " + (date.getYear()+1900) + "\n"
+ "Month: " + (date.getMonth()+1));
]]></attribute>
</datebox>
<label value="a normal datebox" />
<datebox id="dbx3">
<attribute name="onChange"><![CDATA[
Date date = self.getValue();
alert("Year: " + (date.getYear()+1900) + "\n"
+ "Month: " + (date.getMonth()+1) + "\n"
+ "Day: " + date.getDate());
]]></attribute>
</datebox>
</vbox>
</window>

Now we run our index.zul to see the output


You can download the source here.
Wait. Still my objective is not solved. My objective is as follows

1. I am trying to created as separate ZK Extended component as follows

<yearbox></yearbox>

<monthyearbox></monthyearbox>

I tried by extending the datebox and added the reference in addon file as follows

<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
    <addon-name>ecosmos</addon-name>
    <language-name>xul/html</language-name>
    <component>
        <component-name>ZKYearBox</component-name>
        <component-class>com.ecosmos.zkoss.ext.ZKYearBox</component-class>
        <extends>datebox</extends>
    </component>

    <addon-name>my.extension</addon-name><!-- any name you like -->
    <javascript src="js/YearBox.js" /> <!-- assume you package it as /myjs/foo.js -->

</language-addon>

And also in the java class, I tried to call the override function as follows
package com.ecosmos.zkoss.ext;
import org.zkoss.zul.Datebox;

public class ZKYearBox extends Datebox {
    private static final long serialVersionUID = 1L;
    public ZKYearBox() {
        setWidgetOverride("onBind", "zk.afterLoad('zul.db', function ()");
    }
}

But it is not working.

If I found the solution, I will complete this example


About Me

Read More

My date box Component

Using jquery plugin, we will create our date box component in ZK and apply mask and water mark. You can download the jquery plugin from the following site
http://digitalbush.com/projects/masked-input-plugin/
http://digitalbush.com/projects/watermark-input-plugin/

 

Environment

1. Eclipse 3.7 Indigo IDE
2. Hibernate 4.1.1
3. JavaSE 1.6
4. MySQL 5.1

Project Name :MyDateComponent

Project Structure:

Step 1: 
ZK + Hibernate Setup
Please follow this post to setup the Project and related jar files needed for this example

Step 2:
SQL Setup. Create the following table in my sql.

CREATE TABLE `emp_master` (
  `ID` BIGINT(20) NOT NULL AUTO_INCREMENT,
  `EMP_NAME` VARCHAR(255) DEFAULT NULL,
  `DOB` DATE DEFAULT NULL,
  PRIMARY KEY  (`ID`)
) ENGINE=INNODB DEFAULT CHARSET=latin1

Step 3:
In the Webcontent folder, create a folder called js and attached the downloaded the plugin.

You can also download the files from my site as follows
Download this and this

Step 4:
Let us create all our classes and zul files

Datebox.java

package component;

import org.zkoss.zul.Textbox;

public class Datebox extends Textbox {

    private static final long serialVersionUID = 1L;

    public Datebox() {
         
        setWidgetListener("onBind", "jq(this).mask('99/99/9999');jq(this).Watermark('mm/dd/yyyy','gray');");
    }

}

MyDateFormatConverter.java

package component;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;

import org.zkoss.bind.BindContext;
import org.zkoss.bind.Converter;
import org.zkoss.zk.ui.Component;


@SuppressWarnings("rawtypes")
public class MyDateFormatConverter implements Converter {
    /**
     * Convert Date to String.
     * 
     * @param val
     *            date to be converted
     * @param comp
     *            associated component
     * @param ctx
     *            bind context for associate Binding and extra parameter (e.g.
     *            format)
     * @return the converted String
     */

    private static SimpleDateFormat sdf = new SimpleDateFormat("MM/dd/yyyy");

    public Object coerceToUi(Object val, Component comp,  BindContext ctx) {
        final Date date = (Date) val;
        return date == null ? null : sdf.format(date);
    }

    /**
     * Convert String to Date.
     * 
     * @param val
     *            date in string form
     * @param comp
     *            associated component
     * @param ctx
     *            bind context for associate Binding and extra parameter (e.g.
     *            format)
     * @return the converted Date
     */
    public Object coerceToBean(Object val, Component comp, BindContext ctx) {
        final String date = (String) val;

        try {
            return date == null ? null : sdf.parse(date);
        } catch (ParseException e) {
            comp.invalidate();
            return null;

        }
    }

}

EmployeeDAO.java

package domainDAO;
import java.util.List;
import org.hibernate.Session;
import org.hibernate.Query;
import HibernateUtilities.HibernateUtil;
import mydomain.employee;

public class EmployeeDAO {

    @SuppressWarnings("unchecked")
    public List<employee> getAllEmployee() {
        List<employee> allrecords = null;
        try {
            Session session = HibernateUtil.beginTransaction();
            Query q1 = session.createQuery("from employee");
            allrecords = q1.list();
            HibernateUtil.CommitTransaction();
        } catch (RuntimeException e) {
            e.printStackTrace();
        }
        return allrecords;
    }

    public void saveOrUpdate(employee p1) {

        try {
            Session session = HibernateUtil.beginTransaction();
            session.saveOrUpdate(p1);
            HibernateUtil.CommitTransaction();
        } catch (RuntimeException e) {
            e.printStackTrace();
        }

    }
}

EmployeeCRUDVM.java

package domainVMS;

import java.util.HashMap;
import java.util.Map;

import mydomain.employee;

import org.zkoss.bind.BindUtils;
 
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.ExecutionArgParam;
import org.zkoss.bind.annotation.Init;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;
import domainDAO.EmployeeDAO;

public class EmployeeCRUDVM {

    @Wire("#win")
    private Window win;

    private employee selectedEmployee;
    private boolean makeAsReadOnly;
    

    public employee getSelectedEmployee() {
        return selectedEmployee;
    }

    public void setSelectedEmployee(employee selectedEmployee) {
        this.selectedEmployee = selectedEmployee;
    }

    public boolean isMakeAsReadOnly() {
        return makeAsReadOnly;
    }
    public void setMakeAsReadOnly(boolean makeAsReadOnly) {
        this.makeAsReadOnly = makeAsReadOnly;
    }
    
    @Init
    public void initSetup(@ContextParam(ContextType.VIEW) Component view,
            @ExecutionArgParam("selectedEmployee") employee selectedEmployee,
            @ExecutionArgParam("recordMode") String recordMode) {
        Selectors.wireComponents(view, this, false);
        if (selectedEmployee== null)
            this.selectedEmployee = new employee();
        else
            this.selectedEmployee = selectedEmployee;

        if (recordMode == "READ") {
            setMakeAsReadOnly(true);
            win.setTitle(win.getTitle() + " (Readonly)");
        }

    }

    @Command
    public void save() {
        new EmployeeDAO().saveOrUpdate(this.selectedEmployee);
        Map args = new HashMap();
        args.put("newadded", this.selectedEmployee);
        BindUtils.postGlobalCommand(null, null, "refreshList", args);
        win.detach();
    }

    @Command
    public void closeThis() {
        win.detach();
    }
}

EmployeeListVM.java

package domainVMS;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.GlobalCommand;
import org.zkoss.bind.annotation.Init;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.Executions;
import domainDAO.EmployeeDAO;
import mydomain.employee;

public class EmployeeListVM {

    private List<employee> employees= new ArrayList<employee>();
    private employee curSelectedEmployee;

    public List<employee> getallEmployees() {
        return employees;
    }


    public employee getCurSelectedEmployee() {
        return curSelectedEmployee;
    }

    public void setCurSelectedEmployee(employee curSelectedEmployee) {
        this.curSelectedEmployee = curSelectedEmployee;
    }

    @Init
    public void initSetup() {
        employees= new EmployeeDAO().getAllEmployee();

    }

    @Command
    public void editThisEmployee () {
        final HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("selectedEmployee", curSelectedEmployee);
        map.put("recordMode", "EDIT");
        Executions.createComponents("EmployeeCRUD.zul", null, map);
    }

    @Command
    public void openAsReadOnly()
    {
        final HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("recordMode", "READ");
        map.put("selectedEmployee", curSelectedEmployee);
        Executions.createComponents("EmployeeCRUD.zul", null, map);
    
    }

    @Command
    public void addNewEmployee() {
        final HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("selectedEmployee", null);
        map.put("recordMode", "NEW");
        Executions.createComponents("EmployeeCRUD.zul", null, map);
    }
    

    @GlobalCommand
    @NotifyChange("allEmployees")
    public void refreshList(@BindingParam("newadded") employee p1) 
    {  
        employees.add(p1);
    }

}

employee.java

package mydomain;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;
import java.util.Date;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;
@Entity
@Table(name = "emp_master")
public class employee {

    @Id
    @GeneratedValue
    private int ID;
    @Column(name = "EMP_NAME")
    private String employeeName;

    @Column(name = "DOB")
    @Temporal(TemporalType.DATE)
    private Date dateOfBirth;

    
    public Date getDateOfBirth() {
        return dateOfBirth;
    }

    public void setDateOfBirth(Date dateOfBirth) {
        this.dateOfBirth = dateOfBirth;
    }

    public int getID() {
        return ID;
    }

    public void setID(int iD) {
        ID = iD;
    }

    public String getEmployeeName() {
        return employeeName;
    }

    public void setEmployeeName(String employeeName) {
        this.employeeName = employeeName;
    }

}

hibernate.cfg.xml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE hibernate-configuration PUBLIC
"-//Hibernate/Hibernate Configuration DTD 3.0//EN"
"http://www.hibernate.org/dtd/hibernate-configuration-3.0.dtd">
<hibernate-configuration>
    <session-factory>
        <!-- Database connection settings -->
        <property name="connection.driver_class">com.mysql.jdbc.Driver</property>
        <property name="connection.url">jdbc:mysql://localhost/sampledb</property>
        <property name="connection.username">root</property>
        <property name="connection.password">123</property>

        <!-- JDBC connection pool (use the built-in) -->
        <property name="connection.pool_size">1</property>

        <!-- SQL dialect -->
        <property name="dialect">org.hibernate.dialect.MySQLDialect</property>

        <!-- Enable Hibernate's automatic session context management -->
        <property name="current_session_context_class">thread</property>

        <!-- Disable the second-level cache -->
        <property name="cache.provider_class">org.hibernate.cache.NoCacheProvider</property>

        <!-- Echo all executed SQL to stdout -->
        <property name="show_sql">true</property>

        <!-- Drop and re-create the database schema on startup -->
        <property name="hbm2ddl.auto">update</property>

        <!-- Mapping Classes -->
        <mapping class="mydomain.employee" />

    </session-factory>
</hibernate-configuration>

Please change the DB Name, username and password according to your setup.

EmployeeList.zul

<?page title="Listitem MVVM Demo with Hibernate" contentType="text/html;charset=UTF-8"?>
<zk>
    <style>
        .z-listcell.red .z-listcell-cnt, .z-label.red{ color:red; }

        /* Start: Action Images- Edit
        ---------------------------------------------- */

        .fimageedit { width: 25px; background-image:
        url('./images/icon-edit.png'); background-repeat: no-repeat;
        border: 0 none; cursor: pointer; }

        /* End: Action Images - Edit
        ---------------------------------------------- */


        /* Start: Action Images- Delete
        ---------------------------------------------- */

        .fimageDelete { width: 25px; background-image:
        url('./images/icon-trash-red.png'); background-repeat:
        no-repeat; border: 0 none; cursor: pointer; }

        /* End: Action Images - Delete
        ---------------------------------------------- */


        /* Start: Action Images- Active
        ---------------------------------------------- */

        .fimageActive { width: 25px; background-image:
        url('./images/icon-enable.png'); background-repeat: no-repeat;
        border: 0 none; cursor: pointer; }

        /* End: Action Images - Active
        ---------------------------------------------- */

        /* Start: Action Images- Inactive' ]

        ---------------------------------------------- */

        .fimageInactive { width: 25px; background-image:
        url('./images/icon-disable.png'); background-repeat: no-repeat;
        border: 0 none; cursor: pointer; }

        /* End: Action Images - InActive
        ---------------------------------------------- */

        .z-listcell.highlightcell .z-listcell-cnt,
        .z-label.highlightcell { color:blue; cursor: pointer; }


    </style>
    <window title="Listitem MVVM Demo with Hibernate" border="normal"
        apply="org.zkoss.bind.BindComposer"
        viewModel="@id('myvm') @init('domainVMS.EmployeeListVM')">
        <div>
            <button label="Add Employee"
                onClick="@command('addNewEmployee')" />
        </div>
        <separator />

        <listbox id="test" model="@load(myvm.allEmployees)"
            selectedItem="@bind(myvm.curSelectedEmployee)">
            <listhead sizable="true">
                <listheader label="Name" width="400px"
                    sort="auto(employeeName)" />
                <listheader label="Date of Birth" />
                <listheader label="Action" />
            </listhead>
            <template name="model" var="p1">
                <listitem>
                    <listcell label="@load(p1.employeeName)"
                        onClick="@command('openAsReadOnly')" sclass="highlightcell" />
                    <listcell label="@load(p1.dateOfBirth) @converter('component.MyDateFormatConverter')" />
                    <listcell>
                        <hbox spacing="20px">
                            <image sclass="fimageDelete" />
                            <image sclass="fimageedit"
                                onClick="@command('editThisEmployee')" />
                        </hbox>
                    </listcell>
                </listitem>
            </template>
        </listbox>
    </window>
</zk>

EmployeeCRUD.zul

<zk>
    <window id="win" title="Employee" width="520px" height="220px"
        border="normal" minimizable="false" mode="modal" maximizable="false"
        closable="true" action="show: slideDown;hide: slideUp"
        apply="org.zkoss.bind.BindComposer"
        viewModel="@id('vm') @init('domainVMS.EmployeeCRUDVM')">
        <separator />
        <label value="Employee information" />
        <separator />
        <panel width="100%">
            <panelchildren>
                <separator />
                <grid width="99.5%">
                    <columns>
                        <column label="" width="150px" />
                        <column label="" />
                    </columns>
                    <rows>
                        <row>
                            <hbox>
                                <label value="Name" />
                                <label value="*" />
                            </hbox>
                            <textbox name="name"
                                readonly="@load(vm.makeAsReadOnly)"
                                value="@bind(vm.selectedEmployee.employeeName)" cols="50" />
                        </row>
                        <row>
                            <hbox>
                                <label value="DOB" />
                                <label value="*" />
                            </hbox>
                            <fdatebox id="txtDOB" name="txtDOB"
                                readonly="@load(vm.makeAsReadOnly)"
                                value="@bind(vm.selectedEmployee.dateOfBirth)  @converter('component.MyDateFormatConverter')"  />
                        </row>
                    </rows>
                </grid>
            </panelchildren>
        </panel>
        <separator />
        <div align="center">
            <button id="submit" label="Submit"
                onClick="@command('save')" visible="@load(not vm.makeAsReadOnly)" />
            <button id="cancel"
                label="@load(vm.makeAsReadOnly ?'Ok':'Cancel')"
                onClick="@command('closeThis')" />
        </div>
    </window>
</zk>

my-addon.xml

<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
    <addon-name>anyname</addon-name>
    <language-name>xul/html</language-name>

    <javascript src="/js/jquery.maskedinput-1.3.js" />
    <javascript src="/js/watermarkinput.js" />

    <component>
        <component-name>fdatebox</component-name>
        <component-class>component.Datebox
        </component-class>
        <extends>textbox</extends>
    </component>


</language-addon>

 

zk.xml

<?xml version="1.0" encoding="UTF-8"?>

<!--
    Created by ZK Studio
-->

<zk>
    <device-config>
        <device-type>ajax</device-type>
        <timeout-uri>/timeout.zul</timeout-uri><!-- An empty URL can cause the browser to reload the same URL -->
    </device-config>
    
    <language-config>
        <addon-uri>/my-addon.xml</addon-uri>
    </language-config>
    
    
</zk>

Now you can run EmployeeList.zul  file
Output:

You can download the source code here.

 

 

Read More