Client-side UI Composing"

From Documentation
m
Line 12: Line 12:
  
 
Here we describe how to compose UI in JavaScript 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. For XML-based UI composing at the client, please refer to the [[ZK Developer's Reference/UI Composing/iZUML|iZUML]] section.
 
Here we describe how to compose UI in JavaScript 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. For XML-based UI composing at the client, please refer to the [[ZK Developer's Reference/UI Composing/iZUML|iZUML]] section.
 +
 +
<blockquote>
 +
----
 +
<references/>
 +
</blockquote>
  
 
=Modify Widget's State at Client=
 
=Modify Widget's State at Client=
 +
 +
While the states of a widget is maintained automatically if you update the corresponding component at the server, you could modify the widget state directly at the server. The modification is straightforward: call the correct method with the arguments you want. Notice that it is JavaScript for Ajax browsers.
 +
 +
<source lang="JavaScript">
 +
var foo = zk.Widget.$('foo');
 +
foo.setValue("What's Up?");
 +
</source>
 +
 +
==Fusion with Server-side ZUML and Java==
 +
It is suggested that the client-side UI composing is better designed to minimize the network round-trip, provide effects and other enhancement, while the most, if not all, of the application is better to be done at the server. Thus, here we only discuss this kind of addon, aka., fusion. For pure-client approach, please refer to [[Small Talks/2009/July/ZK 5.0 and Client-centric Approach|Small Talk: ZK 5.0 and Client-centric Approach]].
 +
 +
Depending on your requirement, there are typically two situations we could ''fuse'' the client-side code:
 +
 +
#Register a client-side event listener.
 +
#Override widget's default behavior
 +
 +
 +
==Identify Widget at Client==
 +
 
=Instantiate Widget at Client=
 
=Instantiate Widget at Client=
  
Line 19: Line 43:
  
 
=Override Widget's Default Behavior=
 
=Override Widget's Default Behavior=
 
<blockquote>
 
----
 
<references/>
 
</blockquote>
 
  
 
=Version History=
 
=Version History=

Revision as of 03:39, 10 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. Notice that JavaScript is readable by any user, so be careful not to expose sensitive data or business logic when migrating some code from server to client.

Here we describe how to compose UI in JavaScript at the client. For client-side event handling, please refer to the Client-side Event Handling section. For XML-based UI composing at the client, please refer to the iZUML section.


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

Modify Widget's State at Client

While the states of a widget is maintained automatically if you update the corresponding component at the server, you could modify the widget state directly at the server. The modification is straightforward: call the correct method with the arguments you want. Notice that it is JavaScript for Ajax browsers.

var foo = zk.Widget.$('foo');
foo.setValue("What's Up?");

Fusion with Server-side ZUML and Java

It is suggested that the client-side UI composing is better designed to minimize the network round-trip, provide effects and other enhancement, while the most, if not all, of the application is better to be done at the server. Thus, here we only discuss this kind of addon, aka., fusion. For pure-client approach, please refer to Small Talk: ZK 5.0 and Client-centric Approach.

Depending on your requirement, there are typically two situations we could fuse the client-side code:

  1. Register a client-side event listener.
  2. Override widget's default behavior


Identify Widget 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. To extreme extent, you could create all widgets at client (of course, it is costly and less secure).

Override Widget's Default Behavior

Version History

Last Update : 2010/11/10

Version Date Content
     



Last Update : 2010/11/10

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