ZK Component Development Essentials/Creating a simple ZK Component/Implementing the Component/Render All Properties to the Client

When a component is attached to a page at the first time, the AbstractComponent.renderProperties(ContentRenderer) method is called to render all properties that will be sent to the client for creating a peer widget. All required properties have to be rendered such that the client can create a peer widget with the same set of properties.

Implementing AbstractComponent.renderProperties(ContentRenderer) is straightforward. As shown below, all you need to do is to invoke super.renderProperties to render all inherited properties (such as width and height), and then the render method to render the property defined in this class.

protected void renderProperties(org.zkoss.zk.ui.sys.ContentRenderer renderer)
throws java.io.IOException {
 super.renderProperties(renderer);
 render(renderer, "value", _value);
}

Why renderProperties and smartUpdate?

A common question is why renderProperties (and redraw) is required to render value again, when we notify the client with AbstractComponent.smartUpdate(String, boolean) in setValue?

The simple answer is renderProperties is used to send all properties at once, when a component is going to be attached to the page at the client. On the other hand, AbstractComponent.smartUpdate(String, boolean) is used to send a property that was modified after the peer widget is attached at the client. ZK will minimize the traffic by removing unnecessary AbstractComponent.smartUpdate(String, boolean) (if renderProperties is called).

Once a widget is attached to the page at the client, renderProperties won’t be called. If you want to regenerate all properties and rerender it at the client, you can invoke the invalidate method. Note that if you update a property multiple times in the same execution (with AbstractComponent.smartUpdate(String, boolean)), only the last value will be sent to the client. If you prefer to send them all (rather than overwriting), then you can set the 3rd argument append to true (AbstractComponent.smartUpdate(String, Object, boolean)). For example you may use this when adding a listener for a certain event and you do not want to overwrite the present listener this is achieved by passing true as the third argument of AbstractComponent.smartUpdate(String, boolean). The table below outlines the differences.

	smartUpdate	smartUpdate (append, 3rd argument true)
Sent to client if invalidated or new created	No	No
Sent to client if the component is removed	No	No
Sent to client if name is the same	Only the last value is sent	Yes