ZK Client-side Reference/Language Definition/component

Syntax:

<component>
  <component-name>a_name</component-name>
  <extends>a_name</extends>
  <component-class>a_class_name</component-class>
  <widget-class>a_class_name</widget-class>

  <mold>
    <mold-name>a_mold</mold-name>
    <mold-uri>a_uri</mold-uri>
  </mold>

  <text-as>a_property_name</text-as>

  <property>
    <property-name>a_name</property-name>
    <property-value>a_value</property-value>
  </property>

  <annotation>
    <annotation-name>an_annotation_name</annotation-name>
    <property-name>a_property_name</property-name>
    <attribute>
      <attribute-name>an_annotation_attr_name</attribute-name>
      <attribute-value>an_annotation_attr_value</attribute-value>
    </attribute>
  </annotation>

   <custom-attribute>
    <attribute-name>a_custom_attr_name</attribute-name>
    <attribute-value>a_custom_attr_value</attribute-value>
  </custom-attribute>
</component>

It specifies a component definition.

Example,

<component>
	<component-name>area</component-name>
	<component-class>org.zkoss.zul.Area</component-class>
	<widget-class>zul.wgt.Area</widget-class>
	<mold>
		<mold-name>default</mold-name>
		<mold-uri>mold/area.js</mold-uri>
	</mold>
</component>
<component>
	<component-name>bandbox</component-name>
	<extends>bandbox</extends>
	<annotation>
		<annotation-name>default-bind</annotation-name>
		<property-name>value</property-name>
		<attribute>
			<attribute-name>access</attribute-name>
			<attribute-value>both</attribute-value>
		</attribute>
	</annotation>
</component>

component-name

[Required]

The name of the component. It must be unique in the whole language.

extends

[Optional]

It specifies whether this definition is extending from another definition. If omitted, it is considered a definition of a new component. If specified, it extends from the given component definition (which must be defined first).

Notice that the component's name could be the same as the definition it extends from. If the same, the existent definition is simply overridden (no new component definition is created). It is a useful technique to change a component definition, such as adding annotation, providing the initial properties and so on.

depend required

if your component extends a component, most likely you need to specify <depends> to ensure parsing order.

component-class

[Required if no extends]

It specifies the component's Java class at the server side. It is required if you define a new component.

widget-class

[Required if no extends][EL expressions allowed]

It specifies the widget's class at the client side. For Ajax clients, it must be a JavaScript class. It is required if you define a new component.

Since EL expressions are allowed, the widget class being associated with a component could be decided at runtime. Please refer to Blog: Totally Different Look per User Without Modifying Application for an example.

property

[Optional][EL expressions allowed in the property value]

It specifies an initial property. Once the property is specified, the corresponding setter will be called when ZK Loader instantiates from a ZUML document. Of course, if you instantiate it directly in Java, this setting has no effect.

Suppose we want to make all window's border default to normal, we could do as follows.

Customization Reference

<property>
    <property-name>border</property-name>
    <property-value>normal</property-value>
</property>

Another example , to turn off combobox's autocomplete.

<component>
    <component-name>combobox</component-name>                      <!-- required -->
    <component-class>org.zkoss.zul.Combobox</component-class>      <!-- required -->
    <widget-class>zul.inp.Combobox</widget-class>                  <!-- required -->
    <property> 
        <property-name>autocomplete</property-name>
        <property-value>false</property-value>
    </property>
</component>

text-as

[Optional]

It specifies the name of the property to assign the text enclosed by the XML element. If omitted (default), the text will be interpreted as a label and a label component defined in label-template will be used.

For example, if you specify

<component>
  <component-name>foo</component-name>
  <text-as>content</text-as>

then, the following ZUML document

<foo>the content of foo</foo>

will cause foo.setContent("the content of foo") to be called (assume foo is an instance of the component).

Version History

Version	Date	Content