Customize Look and Feel of ZK Components Using CSS3"

From Documentation
m
(38 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{Template:UnderConstruction}}
 
 
{{Template:Smalltalk_Author|
 
{{Template:Smalltalk_Author|
 
|author=Vincent Jian, Engineer, Potix Corporation
 
|author=Vincent Jian, Engineer, Potix Corporation
|date=December 04, 2011
+
|date=December 12, 2011
 
|version=ZK5+  
 
|version=ZK5+  
 
}}
 
}}
  
 
=Introduction: ZK & CSS3=
 
=Introduction: ZK & CSS3=
 +
Theming in ZK is currently done with CSS and a set of pre-designed images to display rounded corners and gradient across all browsers. If you are focusing on advanced browsers, using CSS3 may be a good alternative as you can freely design without needing to prepare these images. Eliminating image loading would also boost overall performance.
  
This article will guide users through customizing the look and feel of a ZK component using CSS3 and DSP<ref>A JSP-like template technology, for more detail please refer to [http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/Supporting_Utilities/DSP here]</ref> and some [http://books.zkoss.org/wiki/ZUML_Reference/EL_Expressions EL expression] used in DSP. Two case examples – the <b>button component</b> & the <b>window component</b> will be demonstrated to show the process and implementation.
+
This article will guide you through customizing the look and feel of a ZK component using CSS3 and DSP<ref>A JSP-like template technology, for more detail please refer to [http://books.zkoss.org/wiki/ZK_Developer%27s_Reference/Supporting_Utilities/DSP here]</ref> and some [http://books.zkoss.org/wiki/ZUML_Reference/EL_Expressions EL expression] used in DSP. Two case examples – the <b>button component</b> & the <b>window component</b> will be demonstrated to show the process and implementation.
  
 
= Case Examples=
 
= Case Examples=
 +
Prerequisite: To support DSP, you must add the following servlet into web.xml:
 +
<source lang="xml">
 +
  <servlet>
 +
      <description><![CDATA[The servlet loads the DSP pages.]]></description>
 +
      <servlet-name>dspLoader</servlet-name>
 +
      <servlet-class>org.zkoss.web.servlet.dsp.InterpreterServlet</servlet-class>
 +
      <!-- Specify class-resource, if you want to access TLD defined in jar files -->
 +
      <init-param>
 +
          <param-name>class-resource</param-name>
 +
          <param-value>true</param-value>
 +
      </init-param>
 +
  </servlet>
 +
  <servlet-mapping>
 +
      <servlet-name>dspLoader</servlet-name>
 +
      <url-pattern>*.dsp</url-pattern>
 +
  </servlet-mapping>
 +
</source>
 
==Button Component==  
 
==Button Component==  
 
<ol>
 
<ol>
 
<li>Re-design from original styles</li>
 
<li>Re-design from original styles</li>
:Default button component provides trendy and os mold. Here we use os mold to modify since it is much easier than trendy mold.  
+
:Default button component provides trendy and os mold. Os mold is the default look implemented by each browsers. Here we use os mold to do the customization.
 
<li>Create “button.css.dsp” file in web application</li>
 
<li>Create “button.css.dsp” file in web application</li>
: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.
+
: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. For non-CSS3 support browsers, default (breeze theme) will be used.
  
<source lang="css" high="1,2,26">
+
<source lang="css" high="1, 2, 14">
  
 
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
 
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
Line 29: Line 46:
 
border: 1px solid #000000;
 
border: 1px solid #000000;
 
border-radius: 3px;
 
border-radius: 3px;
-moz-border-radius: 3px;
+
background: linear-gradient(to bottom, rgba(46,46,46,1) 0%,rgba(3,3,3,1) 100%);
-webkit-border-radius: 3px;
 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlMmUyZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMzAzMDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
 
background: -moz-linear-gradient(top, rgba(46,46,46,1) 0%, rgba(3,3,3,1) 100%); /* FF3.6+ */
 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(46,46,46,1)), color-stop(100%,rgba(3,3,3,1))); /* Chrome,Safari4+ */
 
background: -webkit-linear-gradient(top, rgba(46,46,46,1) 0%,rgba(3,3,3,1) 100%); /* Chrome10+,Safari5.1+ */
 
background: -o-linear-gradient(top, rgba(46,46,46,1) 0%,rgba(3,3,3,1) 100%); /* Opera 11.10+ */
 
background: -ms-linear-gradient(top, rgba(46,46,46,1) 0%,rgba(3,3,3,1) 100%); /* IE10+ */
 
background: linear-gradient(top, rgba(46,46,46,1) 0%,rgba(3,3,3,1) 100%); /* W3C */
 
filter: none\0/;
 
 
box-shadow: 0 3px 0 rgba(0,0,0,1), inset 0 0 1px rgba(255,255,255,0.6);
 
box-shadow: 0 3px 0 rgba(0,0,0,1), inset 0 0 1px rgba(255,255,255,0.6);
-moz-box-shadow: 0 3px 0 rgba(0,0,0,1), inset 0 0 1px rgba(255,255,255,0.6);
 
-webkit-box-shadow: 0 3px 0 rgba(0,0,0,1), inset 0 0 1px rgba(255,255,255,0.6);
 
 
cursor: pointer;
 
cursor: pointer;
 
}
 
}
Line 53: Line 58:
 
:In line 1, we use “<?link ?>” directive to include “button.css.dsp” file.
 
:In line 1, we use “<?link ?>” directive to include “button.css.dsp” file.
  
<source lang="xml">
+
<source lang="xml" high="1">
 +
 
 
<?link rel="stylesheet" type="text/css" href="css/button.css.dsp"?>
 
<?link rel="stylesheet" type="text/css" href="css/button.css.dsp"?>
 
<zk>
 
<zk>
 
<button label="os mold" mold="os" width="200px" height="50px" />
 
<button label="os mold" mold="os" width="200px" height="50px" />
 
</zk>
 
</zk>
 +
 
</source>
 
</source>
  
 
<li>Visit [http://localhost:8080/projectName/button-css3sample.zul http://localhost:8080/projectName/button-css3sample.zul] to show result and keep tweaking the style until you are satisfied with it.</li>
 
<li>Visit [http://localhost:8080/projectName/button-css3sample.zul http://localhost:8080/projectName/button-css3sample.zul] to show result and keep tweaking the style until you are satisfied with it.</li>
  
[[Image:button_css3.jpg|normal button]] [[Image:button_css3_hover.jpg|mouse over the button]] [[Image:button_css3_active.jpg|button pressed]] [[Image:button_css3_disabled.jpg|disabled button]]
+
{|
 
+
|-
 +
| [[Image:button_css3.jpg]]
 +
| [[Image:button_css3_hover.jpg]]
 +
| [[Image:button_css3_active.jpg]]
 +
| [[Image:button_css3_disabled.jpg]]
 +
|- style="text-align:center;"
 +
| normal status
 +
| mouse over the button
 +
| button pressed
 +
| disabled button
 +
|}
 
</ol>
 
</ol>
  
Line 69: Line 86:
 
<ol>
 
<ol>
 
<li>Re-design from original styles</li>
 
<li>Re-design from original styles</li>
:Default window component consists of four parts (top, head, content and bottom, for more details, please refer to [http://books.zkoss.org/wiki/ZK_Style_Guide/XUL_Component_Specification/Window/Default_%28overlapped,_highlighted,_and_modal%29 Window Style]). The top and bottom part are only used for rounded corners. Therefore, we can set height of the top and bottom part to zero, and still keep the DOM structure.
+
:Default window component consists of four parts (top, head, content and bottom, for more details, please refer to [http://books.zkoss.org/wiki/ZK_Style_Guide/XUL_Component_Specification/Window/Default_%28overlapped,_highlighted,_and_modal%29 Window Style]). The top and bottom parts are only used for rounded corners and are no more needed with CSS3. Therefore, we can set height of the top and bottom part to zero, and still keep the DOM structure.
 
<li>Create “window.css.dsp” file</li>
 
<li>Create “window.css.dsp” file</li>
:a) Include DSP taglib and define prefix “c” in order to use EL expression.
+
:a) Include DSP taglib and define prefix “c” in order to use EL expression. Then determine whether to override origin CSS class by browser type.
 
<source lang="css">
 
<source lang="css">
 
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
 
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
</source>
 
:b) Determine whether to override origin CSS class by browser type.
 
<source lang="css">
 
 
<c:if test="${c:browser('gecko2') || c:browser('ie9') || c:browser('opera') || c:browser('safari')}">
 
<c:if test="${c:browser('gecko2') || c:browser('ie9') || c:browser('opera') || c:browser('safari')}">
 
<%-- override css --%>
 
<%-- override css --%>
Line 82: Line 96:
 
</c:if>
 
</c:if>
 
</source>
 
</source>
:c) Adjust top part CSS classes, make the height to 0 and add 5px (the origin height) to head part.
+
:b) Adjust top part CSS classes, make the height to 0 and move the origin 5px height to the head part.
<source lang="css" high="3,30">
+
<source lang="css" high="3, 26">
 
.z-window-embedded-tl,
 
.z-window-embedded-tl,
 
.z-window-embedded-tr {
 
.z-window-embedded-tr {
Line 108: Line 122:
 
border-color: #000000 #000000 #000000 #0C0C0C;
 
border-color: #000000 #000000 #000000 #0C0C0C;
 
border-radius: 4px 4px 0 0;
 
border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
 
-webkit-border-radius: 4px 4px 0 0;
 
-moz-box-shadow: inset 0 1px 0 #595959, inset -1px -1px 0 #0C0C0C;
 
-webkit-box-shadow: inset 0 1px 0 #595959, inset -1px -1px 0 #0C0C0C;
 
 
box-shadow: inset 0 1px 0 #595959, inset -1px -1px 0 #0C0C0C;
 
box-shadow: inset 0 1px 0 #595959, inset -1px -1px 0 #0C0C0C;
 
padding-top: 5px;
 
padding-top: 5px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
+
background: linear-gradient(to bottom, #2f2f2f 0%,#1d1d1d 25%,#020202 100%);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJmMmYyZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzFkMWQxZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMjAyMDIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+) no-repeat;
 
background: -moz-linear-gradient(top, #2f2f2f 0%, #1d1d1d 25%, #020202 100%); /* FF3.6+ */
 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f2f2f), color-stop(25%,#1d1d1d), color-stop(100%,#020202)); /* Chrome,Safari4+ */
 
background: -webkit-linear-gradient(top, #2f2f2f 0%,#1d1d1d 25%,#020202 100%); /* Chrome10+,Safari5.1+ */
 
background: -o-linear-gradient(top, #2f2f2f 0%,#1d1d1d 25%,#020202 100%); /* Opera 11.10+ */
 
background: -ms-linear-gradient(top, #2f2f2f 0%,#1d1d1d 25%,#020202 100%); /* IE10+ */
 
background: linear-gradient(top, #2f2f2f 0%,#1d1d1d 25%,#020202 100%); /* W3C */
 
filter: none\0/; /*IE9 hack*/
 
 
}
 
}
 
.z-window-embedded-header {
 
.z-window-embedded-header {
Line 132: Line 134:
 
}
 
}
 
</source>
 
</source>
: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.
+
:c) The close, maximize and minimize icons in head part still need images. However we can use transparent images and gradient background at the same time due to CSS spec.
 
:[[Image:wnd-icon.jpg]]
 
:[[Image:wnd-icon.jpg]]
 
<source lang="css">
 
<source lang="css">
Line 142: Line 144:
 
.z-window-embedded-close {
 
.z-window-embedded-close {
 
/* can add other background color here, separator by "," sign */
 
/* can add other background color here, separator by "," sign */
background: url('../img/wnd-icon.png') no-repeat scroll 0 0, linear-gradient(top, #2f2f2f 0%,#1d1d1d 25%,#020202 100%);
+
background: url('../img/wnd-icon.png') no-repeat scroll 0 0, linear-gradient(to bottom, #2f2f2f 0%,#1d1d1d 25%,#020202 100%);
 
}
 
}
 
</source>
 
</source>
:e) Adjust bottom part CSS classes, make the height to 0 and add to content part.
+
:d) Adjust bottom part CSS classes, make the height to 0 and add it to the content part.
  
 
<source lang="css" high="3">
 
<source lang="css" high="3">
Line 165: Line 167:
 
border-style: solid;
 
border-style: solid;
 
border-color: #000000;
 
border-color: #000000;
-moz-box-shadow: inset 1px 1px 0 #141414, inset -1px -1px 0 #141414;
 
-webkit-box-shadow: inset 1px 1px 0 #141414, inset -1px -1px 0 #141414;
 
 
box-shadow: inset 1px 1px 0 #141414, inset -1px -1px 0 #141414;
 
box-shadow: inset 1px 1px 0 #141414, inset -1px -1px 0 #141414;
 
background: #141414;
 
background: #141414;
Line 185: Line 185:
 
</source>
 
</source>
  
: To view the full source code of window.css.dsp please click [http://zkforge.svn.sourceforge.net/svnroot/zkforge/trunk/zkcss3theme/WebContent/css/window.css.dsp here].
+
:To view the full source code of window.css.dsp please click [http://zkforge.svn.sourceforge.net/svnroot/zkforge/trunk/zkcss3theme/WebContent/css/window.css.dsp here].
  
 
<li>Create window-css3sample.zul file to test<ref name="ftn41">Test with different browsers (FF, Chrome, IE 9 etc.) that supports CSS3 and check the ZUL file created above [[Image:project_css3.jpg]]</ref></li>
 
<li>Create window-css3sample.zul file to test<ref name="ftn41">Test with different browsers (FF, Chrome, IE 9 etc.) that supports CSS3 and check the ZUL file created above [[Image:project_css3.jpg]]</ref></li>
  
<source lang="xml">
+
<source lang="xml" high="1">
 
<?link rel="stylesheet" type="text/css" href="css/window.css.dsp"?>
 
<?link rel="stylesheet" type="text/css" href="css/window.css.dsp"?>
 
<?link rel="stylesheet" type="text/css" href="css/button.css.dsp"?>
 
<?link rel="stylesheet" type="text/css" href="css/button.css.dsp"?>
Line 204: Line 204:
 
<li>Visit [http://localhost:8080/projectName/window-css3sample.zul http://localhost:8080/projectName/window-css3sample.zul] to show result and keep tweaking the style until you are satisfied with it  
 
<li>Visit [http://localhost:8080/projectName/window-css3sample.zul http://localhost:8080/projectName/window-css3sample.zul] to show result and keep tweaking the style until you are satisfied with it  
 
[[Image:window_css3.jpg]]
 
[[Image:window_css3.jpg]]
 +
</ol>
 +
 +
=Browser Compatibility=
 +
In the samples above, we have used gradient background, rounded corners and box shadow. These features are implemented by the layout engine of each browser and are not 100% consistent with each other. However, we can add extra style attributes to make it work with all CSS3 supported browsers.
 +
 +
For example:
 +
<source lang="css">
 +
.border-radius {
 +
    /* W3C standard */
 +
    border-radius: 4px 4px 0 0;
 +
    /* Mozilla Firefox 4.0 and earlier */
 +
    -moz-border-radius: 4px 4px 0 0;
 +
}
  
</ol>
+
.box-shadow {
 +
    /* W3C standard */
 +
    box-shadow: inset 0 1px 0 #595959, inset -1px -1px 0 #0C0C0C;
 +
    /* Mozilla Firefox 4.0 and earlier */
 +
    -moz-box-shadow: inset 0 1px 0 #595959, inset -1px -1px 0 #0C0C0C;
 +
    /* Safari */
 +
    -webkit-box-shadow: inset 0 1px 0 #595959, inset -1px -1px 0 #0C0C0C;
 +
}
 +
 
 +
.gradient-background {
 +
    /* W3C standard*/
 +
    background: linear-gradient(top, #2f2f2f 0%,#1d1d1d 25%,#020202 100%);
 +
    /* Mozilla Firefox 3.6+ */
 +
    background: -moz-linear-gradient(top, #2f2f2f 0%, #1d1d1d 25%, #020202 100%);
 +
    /* Google Chrome,Safari4+ */
 +
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f2f2f), color-stop(25%,#1d1d1d), color-stop(100%,#020202));
 +
    /* Chrome10+,Safari5.1+ */
 +
    background: -webkit-linear-gradient(top, #2f2f2f 0%,#1d1d1d 25%,#020202 100%);
 +
    /* Opera 11.10+ */
 +
    background: -o-linear-gradient(top, #2f2f2f 0%,#1d1d1d 25%,#020202 100%);
 +
    /* IE 10+ */
 +
    background: -ms-linear-gradient(top, #2f2f2f 0%,#1d1d1d 25%,#020202 100%);
 +
    /* IE9 not supported, current using SVG, needs conditional override of 'filter' to 'none' */
 +
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0.......);
 +
    filter: none;
 +
}
 +
</source>
 +
To find out how HTML5, CSS3, SVG are supported in desktop and mobile browser versions, please visit [http://caniuse.com/ here].
  
 
=Conclusion=
 
=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.  
 
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.  
 +
 +
=Downloads=
 +
*Download the sample war for [http://zkforge.svn.sourceforge.net/svnroot/zkforge/trunk/zkcss3theme/css3theme.war dark theme]
 +
*Download the sample war for [http://zkforge.svn.sourceforge.net/svnroot/zkforge/trunk/css3breezetheme/css3breezetheme.war breeze-like CSS3 theme]
  
 
=References=
 
=References=
 
*Users can customize any components by overriding the CSS class described in [http://books.zkoss.org/wiki/ZK_Style_Guide Style Guide]
 
*Users can customize any components by overriding the CSS class described in [http://books.zkoss.org/wiki/ZK_Style_Guide Style Guide]
 
*Some useful websites for generating CSS3 styles
 
*Some useful websites for generating CSS3 styles
**CSS syntax dictionary: [http://instacss.com http://instacss.com]
+
*#CSS syntax dictionary: http://dochub.io/#css/
**Ultimate CSS Gradient Generator: [http://instacss.com http://www.colorzilla.com/gradient-editor/]
+
*#Ultimate CSS Gradient Generator: http://www.colorzilla.com/gradient-editor/
**CSS3 generator: [http://instacss.com http://css3generator.com/]
+
*#CSS3 generator: http://css3generator.com/
  
  
Line 225: Line 269:
  
  
{{Template:CommentedSmalltalk_Footer|
+
{{Template:CommentedSmalltalk_Footer_new|
 
|name=Potix Corporation
 
|name=Potix Corporation
 
}}
 
}}

Revision as of 08:46, 9 September 2013

DocumentationSmall Talks2011DecemberCustomize Look and Feel of ZK Components Using CSS3
Customize Look and Feel of ZK Components Using CSS3

Author
Vincent Jian, Engineer, Potix Corporation
Date
December 12, 2011
Version
ZK5+

Introduction: ZK & CSS3

Theming in ZK is currently done with CSS and a set of pre-designed images to display rounded corners and gradient across all browsers. If you are focusing on advanced browsers, using CSS3 may be a good alternative as you can freely design without needing to prepare these images. Eliminating image loading would also boost overall performance.

This article will guide you through customizing the look and feel of a ZK component using CSS3 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

Prerequisite: To support DSP, you must add the following servlet into web.xml:

   <servlet>
       <description><![CDATA[The servlet loads the DSP pages.]]></description>
       <servlet-name>dspLoader</servlet-name>
       <servlet-class>org.zkoss.web.servlet.dsp.InterpreterServlet</servlet-class>
       <!-- Specify class-resource, if you want to access TLD defined in jar files -->
       <init-param>
           <param-name>class-resource</param-name>
           <param-value>true</param-value>
       </init-param>
   </servlet>
   <servlet-mapping>
       <servlet-name>dspLoader</servlet-name>
       <url-pattern>*.dsp</url-pattern>
   </servlet-mapping>

Button Component

  1. Re-design from original styles
  2. Default button component provides trendy and os mold. Os mold is the default look implemented by each browsers. Here we use os mold to do the customization.
  3. Create “button.css.dsp” file in web application
  4. 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. For non-CSS3 support browsers, default (breeze theme) will be used.
    <%@ 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 {
    	color: #FFFFFF;
    	font-weight: bold;
    	text-shadow: 0 -1px 0 rgba(0,0,0,1), 0 0 0 rgba(252,0,21,0);
    	padding: 7px 17px;
    	border: 1px solid #000000;
    	border-radius: 3px;
    	background: linear-gradient(to bottom, rgba(46,46,46,1) 0%,rgba(3,3,3,1) 100%);
    	box-shadow: 0 3px 0 rgba(0,0,0,1), inset 0 0 1px rgba(255,255,255,0.6);
    	cursor: pointer;
    }
    </c:if>
    
    To view the full source code of button.css.dsp please click here.
  5. Create button-css3sample.zul file to test[2]
  6. In line 1, we use “<?link ?>” directive to include “button.css.dsp” file.
    <?link rel="stylesheet" type="text/css" href="css/button.css.dsp"?>
    <zk>
    	<button label="os mold" mold="os" width="200px" height="50px" />
    </zk>
    
  7. Visit http://localhost:8080/projectName/button-css3sample.zul to show result and keep tweaking the style until you are satisfied with it.
  8. Button css3.jpg Button css3 hover.jpg Button css3 active.jpg Button css3 disabled.jpg
    normal status mouse over the button button pressed disabled button

Window Component

  1. Re-design from original styles
  2. Default window component consists of four parts (top, head, content and bottom, for more details, please refer to Window Style). The top and bottom parts are only used for rounded corners and are no more needed with CSS3. Therefore, we can set height of the top and bottom part to zero, and still keep the DOM structure.
  3. Create “window.css.dsp” file
  4. a) Include DSP taglib and define prefix “c” in order to use EL expression. Then determine whether to override origin CSS class by browser type.
    <%@ 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>
    
    b) Adjust top part CSS classes, make the height to 0 and move the origin 5px height to the head part.
    .z-window-embedded-tl,
    .z-window-embedded-tr {
    	height: 0px;
    	padding: 0;
    	margin: 0;
    	background: none;
    }
    .z-window-embedded-hl,
    .z-window-embedded-hr {
    	background: none;
    	border-radius: 4px 4px 0 0;
    	-moz-border-radius: 4px 4px 0 0;
    	-webkit-border-radius: 4px 4px 0 0;
    	margin: 0;
    	padding: 0;
    }
    .z-window-embedded-hr {
    	border-left: 1px solid #000000;
    }
    .z-window-embedded-hm {
    	border-width: 1px;
    	border-style: solid;
    	border-color: #000000 #000000 #000000 #0C0C0C;
    	border-radius: 4px 4px 0 0;
    	box-shadow: inset 0 1px 0 #595959, inset -1px -1px 0 #0C0C0C;
    	padding-top: 5px;
    	background: linear-gradient(to bottom, #2f2f2f 0%,#1d1d1d 25%,#020202 100%);
    }
    .z-window-embedded-header {
    	overflow: hidden;
    	padding: 0 8px 4px;
    	color: #D0D0D0;
    	font-weight: bold;
    	text-align: center;
    }
    
    c) The close, maximize and minimize icons in head part still need images. However we can use transparent images and gradient background at the same time due to CSS spec.
    Wnd-icon.jpg
    .z-window-embedded-icon {
    	width: 16px;
    	height: 16px;
    	float: left;
    }
    .z-window-embedded-close {
    	/* can add other background color here, separator by "," sign */
    	background: url('../img/wnd-icon.png') no-repeat scroll 0 0, linear-gradient(to bottom, #2f2f2f 0%,#1d1d1d 25%,#020202 100%);
    }
    
    d) Adjust bottom part CSS classes, make the height to 0 and add it to the content part.
    .z-window-embedded-bl,
    .z-window-embedded-br {
    	height: 0px;
    	padding: 0;
    	margin: 0;
    	background: none;
    }
    .z-window-embedded-cl,
    .z-window-embedded-cr {
    	background: none;
    	margin: 0;
    	padding: 0px;
    }
    .z-window-embedded-cm {
    	border-width: 0 1px 1px;
    	border-style: solid;
    	border-color: #000000;
    	box-shadow: inset 1px 1px 0 #141414, inset -1px -1px 0 #141414;
    	background: #141414;
    	margin: 0;
    	padding: 1px;
    }
    .z-window-embedded-cnt {
    	background-color: #141414;
    	border-width: 1px 1px 1px 60px;
    	border-style: solid;
    	border-color: #000000;
    	padding: 4px;
    	overflow: hidden;
    	color: #FFFFFF;
    	word-wrap: break-word;
    	margin: 0;
    }
    
    To view the full source code of window.css.dsp please click here.
  5. Create window-css3sample.zul file to test[2]
  6. <?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>
    
  7. Visit http://localhost:8080/projectName/window-css3sample.zul to show result and keep tweaking the style until you are satisfied with it Window css3.jpg

Browser Compatibility

In the samples above, we have used gradient background, rounded corners and box shadow. These features are implemented by the layout engine of each browser and are not 100% consistent with each other. However, we can add extra style attributes to make it work with all CSS3 supported browsers.

For example:

.border-radius {
    /* W3C standard */
    border-radius: 4px 4px 0 0;
    /* Mozilla Firefox 4.0 and earlier */
    -moz-border-radius: 4px 4px 0 0;
}

.box-shadow {
    /* W3C standard */
    box-shadow: inset 0 1px 0 #595959, inset -1px -1px 0 #0C0C0C;
    /* Mozilla Firefox 4.0 and earlier */
    -moz-box-shadow: inset 0 1px 0 #595959, inset -1px -1px 0 #0C0C0C;
    /* Safari */
    -webkit-box-shadow: inset 0 1px 0 #595959, inset -1px -1px 0 #0C0C0C;
}

.gradient-background {
    /* W3C standard*/
    background: linear-gradient(top, #2f2f2f 0%,#1d1d1d 25%,#020202 100%);
    /* Mozilla Firefox 3.6+ */
    background: -moz-linear-gradient(top, #2f2f2f 0%, #1d1d1d 25%, #020202 100%);
    /* Google Chrome,Safari4+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2f2f2f), color-stop(25%,#1d1d1d), color-stop(100%,#020202));
    /* Chrome10+,Safari5.1+ */
    background: -webkit-linear-gradient(top, #2f2f2f 0%,#1d1d1d 25%,#020202 100%);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #2f2f2f 0%,#1d1d1d 25%,#020202 100%);
    /* IE 10+ */
    background: -ms-linear-gradient(top, #2f2f2f 0%,#1d1d1d 25%,#020202 100%);
    /* IE9 not supported, current using SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0.......);
    filter: none;
}

To find out how HTML5, CSS3, SVG are supported in desktop and mobile browser versions, please visit here.

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.

Downloads

References



  1. A JSP-like template technology, for more detail please refer to here
  2. 2.0 2.1 Test with different browsers (FF, Chrome, IE 9 etc.) that supports CSS3 and check the ZUL file created above Project css3.jpg



Comments



Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.