ZK Class Concept

ZK Class Concept
Prev	1. Introduction	Next

ZK Class concept was introduced in ZK 3.5.0 version, it is a naming pattern, it appends some regular patterns for client action (please refer to the next section) , like click, focus, mouse-over, mouse-out, and so on. ZK Class is also used for changing mold of components, and can be used to separate the two same components with different theme without any conflict. For example, there is a Button component and its ZK Class is called “z-button”, when user mouse is over the button, the ZK Class of the component will be appended with “-over” by ZK client engine, then the full ZK Class will be “z-button-over” so that we can easily customize a specific component theme for special purpose.

There are three different ways to change the style of ZK components as follows. The figure shows where the Sclass and Zclass should be located, the red box means the Sclass will be appended to the root DOM tree of the component, and the green box means the Zclass will be treated as a prefix template to append the postfix action CSS rule.

Figure1

Sclass

The purpose of the Sclass is to lightly change the CSS of the component.

For example,

<zk>
<style dynamic="true">
.mydb {
border: 1px solid blue;
}
</style>
<textbox sclass="mydb" value="having Sclass"/>
<textbox value="Without Sclass"/>
</zk>

As you can see, the above example has two Textbox, one has the Sclass property, and the other has no the Sclass property. Most of the time we need to customize a style with a special field without influencing others, we can specify the Sclass property instead.

Zclass

The purpose of the Zclass is to change the full CSS of the specific component. It usually uses to change the mold of the component, which supports more than one theme.

For example,

<zk>
<style dynamic="true">
.mydb-disd {
    color: blue !important; cursor: default !important; opacity: .6; -moz-opacity: .6; filter: alpha(opacity=60);    
    font-weight: bold;    
}
.mydb-disd * {
    color: blue !important; cursor: default !important;    
    font-weight: bold;    
}
.mydb {
    background: white;    
    border: 1px solid #7F9DB9;    
}
.mydb-focus, .mydb-focus input {
    border: 1px solid red;    
}
.mydb-text-invalid {
    background: yellow;    
    border: 1px solid red;    
}
.mydb-readonly, .mydb-text-disd {
    background: green;    
}
</style>
<grid width="450px">
    <columns>    
        <column label="Having Zclass"/>        
        <column label="Without Zclass"/>        
    </columns>    
    <rows>    
        <row><textbox zclass="mydb" value="Default"/><textbox value="Default"/></row>        
        <row><textbox zclass="mydb" readonly="true" value="Readonly"/><textbox readonly="true" value="Readonly"/></row>        
        <row><textbox zclass="mydb" disabled="true" value="Disabled"/><textbox disabled="true" value="Disabled"/></row>        
        <row><textbox zclass="mydb" focus="true" value="Focus"/><textbox value="Focus"/></row>        
    </rows>    
</grid>
</zk>

As you can see, the Zclass is used to change all the action CSS rules of the component. Therefore, we must replace all the CSS rules of the component with a new CSS name. For example as above, the new name is called “mydb”, and we must replace the original name of Textbox called “z-textbox” to the new one, it is dirty but necessary. Note: The CSS source of Textbox from SVN

Overwriting

The last part, it is called overwriting, replacing the original CSS rules of the component is that we want to customize all the components with a special style.

For example Textbox.

<zk>
<style dynamic="true">
.z-textbox {
    background: black;    
    color: white;    
    border: 3px outset blue;    
}
</style>
<textbox value="Default"/>
</zk>

As you can see, we merely replace the default CSS with black background, white color, and three pixel borders, we can use the component replacement instead.