In Part 4, we have seen how can do Edit and delete customer. In this Part 5, we will just change the look and feel of our Modal window.
Before CSS Applied:
We will update only style.css file and make the reference of this file in CustomerCRUD.zul
Here is the modified Style.css file. Please note, here I am just changed the look and feel of ZK Message box also. In order to see this effect, in the list, click delete button.
Here is the modified CustomerCRUD.zul
Now you can run customerList.zul file and see the effect of CSS.
If you examine CustomerCRUD.zul file very closely, you can see I have used sclass for all the ZK Components. Using sclass, you can fine tune the components look and feel. For further understanding, please read here.
We can also extend ZK Component and create our own implementation of the component. Say for example, look at the following line in CustomerCRUD.Zul file
<button id="submit" label="Submit" mold="trendy"
sclass="mybutton orange small bigrounded"
In order show the button in different style, we should always use two properties such as “mold” and “sclass”. How about this,
<fbutton id="submit" label="Submit"
Now you can see that, I have removed that two properties and also changed the button to fbutton. What does this mean. ? Nothing, we will extend default ZK Button and we will always add this property in that class. Let us see how we can do this. Before this, I would recommend to read this chapter in zk documentation
Let us add language definition file. You can keep any name. In this example, let me keep as “myaddon.xml” and we will create this file in the Webcontent folder. As a first step, we will add our CSS File in this file. By doing this, we no need to add the reference of the CSS File in each file. i.e it is global now.
<?xml version="1.0" encoding="UTF-8"?>
<stylesheet href="/css/style.css" type="text/css" />
We need to ZK that we have added our language definition file. This can be done in zk.xml file. Expand the Web-inf folder and you can see zk.xml file as shown here
Double click zk.xml file and add the following line
Now remove the following line in CustomerList.zul file and run it
<style src="css/style.css" />
Now we can extend zk button and create our button. Add the following lines into myaddon.xml
Now we can use our own button in all the zul files. Let me remove all sclass properties and use our component as shown here.
You can download the source code here.