Index Page of ZK CDT (Component Development Tutorial) Walkthrough

Introduction

This is the index page for walkthrough of ZK component development.

The goal of this walkthrough is to create a quicknote component that help you do some quick note on web page (similar to you crop some screenshot, highlight something and add some text in photo editor), and describe each part of a component through each article in this walkthrough.

What we will do:

* Go through each part smoothly
* Cover each part of component development as possible
* Simple code, simple sample, clear description, complete runnable project

What we will ignore/skip

* Any optimization/task that will hurt the goal listed in the list above, e.g., CSS optimization, to use something new (like CSS3/HTML5, Canvas), complex structure or flow control, etc, we will just try to do everything strait forward to keep them as simple/easy as possible.

So these components probably not works well in some browser or in some combination.

* To use modern tools that may let us missing some details, e.g., create component with ZK CDT (https://code.google.com/a/eclipselabs.org/p/zk-cdt/) or Maven Archetype (http://books.zkoss.org/wiki/ZK%20Component%20Development%20Essentials/ZK%20Component%20Overview/Creating%20ZK%20Component%20with%20Maven%20Archetype)

You can use those tools to boost your development task as needed once you are familiar with ZK Component Development.

Audience

We assume you know the things below as well:

1. ZK MVVM Pattern

2. Basic JAVA

3. Basic Javascript

4. Basic CSS

And you want to know how to implement a ZK Component

ZK CDT Pages

001: Mask, the basic part of a component.
http://ben-bai.blogspot.tw/2013/06/zk-cdt-create-custom-mask-component.html

The start point of this walkthrough.

002: EnhancedMask, handle attributes of a component.
http://ben-bai.blogspot.tw/2013/06/zk-cdt-add-attributes-to-create.html

Contains server side setter/getter, client side setter/getter, server side render/update property.

003: SimpleTextNote, handle client side event.
http://ben-bai.blogspot.tw/2013/06/zk-cdt-handling-client-side-event-to.html

Contains basic client side event listener.

004: RenderableTextNote, render content with the data in custom model.
http://ben-bai.blogspot.tw/2013/06/zk-cdt-renderabletextnote-render-note.html

Similar to 002, but handle json data to render dom element at client side.

005: SelectableTextNote, fire event to server side and update selected note block.
http://ben-bai.blogspot.tw/2013/06/zk-cdt-fire-event-to-server-to-create.html

Contains 'fire' client side API, 'service' server side method and annotation written in XML for ZKBIND.

006: RecordableTextNote, more event, update all attributes of selected note block to server.
http://ben-bai.blogspot.tw/2013/06/zk-cdt-create-custom-event-for.html

Create a custom event TextNoteBlockUpdateEvent

007: UpdatableTextNote, update component by model.
http://ben-bai.blogspot.tw/2013/06/zk-cdt-add-eventlistener-into-model-to.html

Contains the listener pattern of model.


above: has been published
--
below: probably will be changed

008: SimpleQuickNote, nothing new, adding highlight part.

009: QuickNote, will finish everything on this, such like note block control (open/close/delete, etc)

reply this article if you think something are missing, not clear or wrong, or reply under other ZK CDT Pages if you have any questions.