As illustrated, it is simple to assign properties to a component by use of XML attributes.

<button label="OK" style="border:1px solid blue"/>

ZK provides a powerful yet simple way to let developers define new components for a particular pages. It is useful if most components of the same type share a set of properties.

First, you use the component directive to define a new component.

<?component name="bluebutton" extends="button" style="border:1px solid blue" label="OK"?>

<bluebutton/>
<bluebutton label="Cancel"/>

is equivalent to

<bluebutton style="border:1px solid blue" label="OK"/>
<bluebutton style="border:1px solid blue" label="Cancel"/>

Moreover, you can override the definition of button altogether as follows. Of course, it won't affect any other pages.

<?component name="button" extends="button" style="border:1px solid blue" label="OK"?>

<button/>
<button label="Cancel"/>

For more information, refer to the component Directive section in the ZK User Interface Markup Language chapter.