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