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.
* 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.
You can use those tools to boost your development task as needed once you are familiar with ZK Component Development.
001: Mask, the basic part of a component.
The start point of this walkthrough.
002: EnhancedMask, handle attributes of a component.
Contains server side setter/getter, client side setter/getter, server side render/update property.
003: SimpleTextNote, handle client side event.
Contains basic client side event listener.
004: RenderableTextNote, render content with the data in custom model.
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.
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.
007: UpdatableTextNote, update component by model.
Contains the listener pattern of model.
008: SimpleQuickNote, nothing new, adding highlight part.
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.
Hi Ben do you know any spellchecker can easily integrate with ZK Framework ?
Thanks but i am looking for zk textbox.a client site solution do you have any idea?