ZUML Reference/ZUML/Namespaces/Client Attribute

Name: client attribute
Namespace: http://www.zkoss.org/2005/zk/client/attribute
Namespace shortcut: client/attribute
Java: LanguageDefinition.CLIENT_ATTRIBUTE_NAMESPACE

It is the reserved namespace for specifying client-side DOM attributes. Unlike the client namespace, which assigns something to widgets, the client/attribute namespace assigns additional DOM attributes to the DOM tree directly at the client.

---

Notice that if the widget's DOM output (Widget.redraw(Array)) also has the same DOM attribute, both of them will be generated and it is technically not legal. Thus, you shall prevent the DOM attributes that widget might output.

For example, suppose you want to listen to the onload event, and then you can do as follows.

<iframe src="http://www.google.com" width="100%" height="300px"
  xmlns:ca="client/attribute"
  ca:onload="do_whater_you_want()"/>

If the attribute contains colon or other special characters, you can use the attribute element as follows.

<div xmlns:ca="client/attribute">
  <attribute ca:name="ns:whatever">
  whatever_value_you_want
  </attribute>
</div>

data-swipeable

 ZK EE tablet only

Each layout region in borderlayout can support to close and open the region area by user's swipe on the edge of the region with client/attribute.

<div xmlns:ca="client/attribute">
  <borderlayout xmlns:ca="client/attribute" ca:data-swipeable="true">
  whatever_value_you_want
  </borderlayout>
</div>

Tabbox support to switch the tab by user swipe on the edge of content with client attribute.

<div xmlns:ca="client/attribute">
  <tabbox xmlns:ca="client/attribute" ca:data-swipeable="true">
  whatever_value_you_want
  </tabbox>
</div>

Within Tree, Grid, and Listbox, Paging can support to navigate previous page or next page by user swipe on the edge of content with client attribute.

<div xmlns:ca="client/attribute">
<listbox mold="paging" pageSize="5" xmlns:ca="client/attribute" ca:data-swipeable="true"></listbox>
</div>

Calendar can support to switch the view by user swipe on the content with client/attribute.

<div xmlns:ca="client/attribute">
<calendar xmlns:ca="client/attribute" ca:data-swipeable="true" />
</div>

data-scrollable

if user scroll container widget which applys the data-scrollable attribute, the errorbox should scroll with container widget.

<div xmlns:ca="client/attribute">
<window height="100px" contentStyle="overflow:auto" ca:data-scrollable="true">
</window>
</div>

When user swipe on the content of Listbox, Grid, Tree in tablet device, the friendly scrollbar will appear. To disable the friendly scrollbar, please use the following setting.

<div xmlns:ca="client/attribute">
<listbox xmlns:a="client/attribute" a:data-scrollable="false"/>
</div>

data-embedscrollbar

To show the position of zk customize scrollbar, the mesh component should apply data-embedscrollbar attribute.

<div xmlns:ca="client/attribute">
<grid ca:data-embedscrollbar="true"></grid>
</div>

data-fixscrollposition

To prevent conflict with 'next' and 'previous' button on virtual keyboard on iPad. The input element should apply data-fixScrollPosition attribute.

<div xmlns:ca="client/attribute">
<textbox xmlns:ca="client/attribute" ca:data-fixScrollPosition="true"></textbox>
</div>

The other use of the client-attribute namespace is to specify attributes that are available only to certain browsers, such as accessibility and Section 508.

---

Version History

Version	Date	Content
5.0.3	July 2010	The client-attribute namespace was introduced.