Customize Look and Feel of ZK Components Using CSS3
Vincent Jian, Engineer, Potix Corporation
December 04, 2011
ZK5+
Introduction: ZK & CSS3
This article will guide users through customizing the look and feel of a ZK component using CSS 3 and DSP[1] and some EL expression used in DSP. Two case examples – the button component & the window component will be demonstrated to show the process and implementation.
Case Examples
Button Component
- Re-design from original styles
- Default button component provides trendy and os mold. Here we use os mold to modify since it is much easier than trendy mold.
- Create “button.css.dsp” file in web application
- In line 1, we define prefix “c” in order to use EL expression. Because not all browsers support CSS3, we use “<c:if>” tag in line 2 to determine whether or not we override the origin CSS class or not.
- To view the full source code of button.css.dsp please click here.
- Create button-css3sample.zul file to test[2]
- In line 1, we use “<?link ?>” directive to include “button.css.dsp” file.
- Visit http://localhost:8080/projectName/button-css3sample.zul to show result and keep tweaking the style until you are satisfied with it.
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
<c:if test="${c:browser('gecko2') || c:browser('ie9') || c:browser('opera') || c:browser('safari')}">
.z-button-os {
border: 1px solid #C7C7C7;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #EFEFEF;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlZWVmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNGZmMDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #5EEEFF 0%, #C4FF05 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5EEEFF), color-stop(100%,#C4FF05)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5EEEFF 0%, #C4FF05 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5EEEFF 0%, #C4FF05 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5EEEFF 0%, #C4FF05 100%); /* IE10+ */
background: linear-gradient(top, #5EEEFF 0%, #C4FF05 100%); /* W3C */
filter: none\0/; /* IE9 */
cursor: pointer;
}
</c:if>
<?link rel="stylesheet" type="text/css" href="css/button-2.css.dsp"?>
<zk>
<button label="os mold" mold="os" width="200px" height="50px" />
</zk>
Window Component
- Re-design from original styles
- Default window component consists of four parts (top, head, content and bottom, for more details, please refer to Window Style). The top and bottom part are only used for rounded corners. Therefore, we can set width and height of the top and bottom part to zero, and still keep the DOM structure.
- Create “window.css.dsp” file
- a) Include DSP taglib and define prefix “c” in order to use EL expression.
- b) Determine whether to override origin CSS class by browser type.
- c) Adjust top part CSS classes, make the height to 0 and add to head part.
- d) The close, maximize and minimize icons in head part still need image. However we can use transparent image and gradient background at the same time due to CSS spec.
- e) Adjust bottom part CSS classes, make the height to 0 and add to content part.
- To view the full source code of window.css.dsp please click here.
- Create window-css3sample.zul file to test[3]
- Visit http://localhost:8080/projectName/window-css3sample.zul to show result and keep tweaking the style until you are satisfied with it
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
<c:if test="${c:browser('gecko2') || c:browser('ie9') || c:browser('opera') || c:browser('safari')}">
<%-- override css --%>
...
</c:if>
.z-window-embedded-tl,
.z-window-embedded-tr {
height: 0px;
background-image: none;
}
.z-window-embedded-hl {
background: none;
background: #5eeeff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlZWVmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNGZmMDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) no-repeat;
background: -moz-linear-gradient(left, #5eeeff 0%, #c4ff05 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5eeeff), color-stop(100%,#c4ff05)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #5eeeff 0%,#c4ff05 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #5eeeff 0%,#c4ff05 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #5eeeff 0%,#c4ff05 100%); /* IE10+ */
background: linear-gradient(left, #5eeeff 0%,#c4ff05 100%); /* W3C */
filter: none\0/; /*IE9 hack*/
border: 1px solid rgba(17, 17, 17, 0.4);
border-bottom: 0px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
padding-left: 0;
}
.z-window-embedded-hr {
background: none;
border-top: 1px solid #FFFFFF;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
padding-right: 0px;
}
.z-window-embedded-hm {
background: none;
padding: 5px 6px;
}
.z-window-embedded-header {
overflow: hidden;
color: #363636;
padding: 0 0 2px;
cursor: default;
overflow: hidden;
}
.z-window-embedded-icon {
height: 14px;
width: 26px;
border: 1px solid #363636;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.z-window-embedded-close {
background: url('../img/wnd-icon.png') no-repeat scroll -1px -52px, #ddf1f9; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url('../img/wnd-icon.png') no-repeat scroll -1px -52px, url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNkZGYxZjkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmVmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) no-repeat;
background: url('../img/wnd-icon.png') no-repeat scroll -1px -52px, -moz-radial-gradient(center, ellipse cover, #ddf1f9 0%, #feffff 100%); /* FF3.6+ */
background: url('../img/wnd-icon.png') no-repeat scroll -1px -52px, -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ddf1f9), color-stop(100%,#feffff)); /* Chrome,Safari4+ */
background: url('../img/wnd-icon.png') no-repeat scroll -1px -52px, -webkit-radial-gradient(center, ellipse cover, #ddf1f9 0%, #feffff 100%); /* Chrome10+,Safari5.1+ */
background: url('../img/wnd-icon.png') no-repeat scroll -1px -52px, -o-radial-gradient(center, ellipse cover, #ddf1f9 0%, #feffff 100%); /* Opera 12+ */
background: url('../img/wnd-icon.png') no-repeat scroll -1px -52px, -ms-radial-gradient(center, ellipse cover, #ddf1f9 0%, #feffff 100%); /* IE10+ */
background: url('../img/wnd-icon.png') no-repeat scroll -1px -52px, radial-gradient(center, ellipse cover, #ddf1f9 0%, #feffff 100%); /* W3C */
filter: none\0/; /*IE9 hack*/
}
.z-window-embedded-bl,
.z-window-embedded-br {
height: 0px;
background: none;
}
.z-window-embedded-cl {
background: none;
background: #5eeeff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVlZWVmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjNGZmMDUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) no-repeat;
background: -moz-linear-gradient(left, #5eeeff 0%, #c4ff05 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5eeeff), color-stop(100%,#c4ff05)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #5eeeff 0%,#c4ff05 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #5eeeff 0%,#c4ff05 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #5eeeff 0%,#c4ff05 100%); /* IE10+ */
background: linear-gradient(left, #5eeeff 0%,#c4ff05 100%); /* W3C */
filter: none\0/; /*IE9 hack*/
border: 1px solid rgba(17, 17, 17, 0.4);
border-top: 0px;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
padding-left: 0;
}
.z-window-embedded-cr {
background: none;
border-bottom: 1px solid #FFFFFF;
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
padding-right: 0px;
}
.z-window-embedded-cm {
background: none;
border: none;
padding: 0 6px 5px;
margin: 0;
}
.z-window-embedded-cnt {
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
margin: 0;
padding: 4px;
overflow: hidden;
}
<?link rel="stylesheet" type="text/css" href="css/window.css.dsp"?>
<?link rel="stylesheet" type="text/css" href="css/button.css.dsp"?>
<zk>
<window id="win" title="Hello World!!" width="300px" border="normal" minimizable="true" maximizable="true" closable="true">
<vlayout>
<label id="lbl" value="CSS3 Window" />
<button label="os mold" mold="os" />
</vlayout>
</window>
</zk>
Conclusion
This customization method improves client side performance as it avoids the necessity to load huge amounts of images while the look and feel of a component can be tweaked at will. However, note that in order to prevent component failure due to customization, it is suggested not to change any DOM structure of a component.
References
- Users can customize any components by overriding the CSS class described in Style Guide
- Some useful websites for generating CSS3 styles
- CSS syntax dictionary: http://instacss.com
- Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/
- CSS3 generator: http://css3generator.com/
A JSP-like template technology, for more detail please refer to here
Test with different browsers (FF, Chrome, IE 9 etc.) that supports CSS3 and check the ZUL file created above
Comments
Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |