Client-side UI Composing"

From Documentation
Line 5: Line 5:
 
[[File:ZKComDevEss_widget_component_application.png]]
 
[[File:ZKComDevEss_widget_component_application.png]]
  
An UI object visible to a user at the client is hosted by a JavaScript object<ref>It actually depends on the device. For Ajax, it is a JavaScript object. For Android devices, it is a Java object.</ref> called widget. On the other hand, a component is a Java object at the server that an application manipulates directly. Once a component is attached to a page, a widget is created at client automatically. Furthermore, any state change of the component at the server will be updated to the widget at the client.
+
A UI object visible to a user at the client is hosted by a JavaScript object<ref>It actually depends on the device. For Ajax, it is a JavaScript object. For Android devices, it is a Java object.</ref> called a widget (<javadoc directory="jsdoc">zk.Widget</javadoc>). On the other hand, a component is a Java object (<javadoc>org.zkoss.zk.ui.Component</javadoc>) representing the UI object at the server that an application manipulates directly. Once a component is attached to a page, a widget is created at client automatically. Furthermore, any state change of the component at the server will be updated to the widget at the client.
  
You need not to know the existence of widgets. Ajax requests and state synchronization are handled automatically by ZK and the components you use. However, you are allowed to instantiate or alert any client-side widgets directly at the client (in JavaScript). It is the so-called Server+client fusion.
+
Generally, you need not to know the existence of widgets. Ajax requests and the state synchronization are handled automatically by ZK and the components automatically. However, you are allowed to instantiate or alert any client-side widgets directly at the client (in JavaScript). It is the so-called Server+client fusion.
  
 
The rule of thumb is to compose and manipulate UI at the server first since it is easier. Then, you could reduce the load of the server by composing some UI at the client when it is appropriate.
 
The rule of thumb is to compose and manipulate UI at the server first since it is easier. Then, you could reduce the load of the server by composing some UI at the client when it is appropriate.
  
 
Here we describe how to compose UI at the client. For client-side event handling, please refer to the [[ZK Developer's Reference/Event Handling/Client-side Event Listening|Client-side Event Handling]] section.
 
Here we describe how to compose UI at the client. For client-side event handling, please refer to the [[ZK Developer's Reference/Event Handling/Client-side Event Listening|Client-side Event Handling]] section.
 +
 +
=Modify Widget's State at Client=
 +
=Instantiate Widget at Client=
 +
 +
A widget has to be create to make a component visible at the client (once it has been attached to a page). However, you could instantiate a widget at client, without the corresponding component at the server.
 +
 +
=Override Widget's Default Behavior=
  
 
<blockquote>
 
<blockquote>

Revision as of 09:49, 9 November 2010


Client-side UI Composing


Overview

ZKComDevEss widget component application.png

A UI object visible to a user at the client is hosted by a JavaScript object[1] called a widget (Widget). On the other hand, a component is a Java object (Component) representing the UI object at the server that an application manipulates directly. Once a component is attached to a page, a widget is created at client automatically. Furthermore, any state change of the component at the server will be updated to the widget at the client.

Generally, you need not to know the existence of widgets. Ajax requests and the state synchronization are handled automatically by ZK and the components automatically. However, you are allowed to instantiate or alert any client-side widgets directly at the client (in JavaScript). It is the so-called Server+client fusion.

The rule of thumb is to compose and manipulate UI at the server first since it is easier. Then, you could reduce the load of the server by composing some UI at the client when it is appropriate.

Here we describe how to compose UI at the client. For client-side event handling, please refer to the Client-side Event Handling section.

Modify Widget's State at Client

Instantiate Widget at Client

A widget has to be create to make a component visible at the client (once it has been attached to a page). However, you could instantiate a widget at client, without the corresponding component at the server.

Override Widget's Default Behavior


  1. It actually depends on the device. For Ajax, it is a JavaScript object. For Android devices, it is a Java object.

Version History

Last Update : 2010/11/9

Version Date Content
     



Last Update : 2010/11/09

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.