ZK高级特性：Style定制与客户端集成

1、ZK与传统MVC框架的集成

由于ZK应用本质上也是基于标准Web技术Servlet框架，因此与其它MVC框架的集成没有什么特别的，

以一个典型场景为例——为一个现有的Web项目（前端采用WebWork+Freemarker+prototype）引入ZK技术开发新的页面和模块，主要集成工作包括：

• 页面集成方式1：在freemarker中嵌入iframe指向zul页面；
• 页面集成方式2：prototype打开新页签时url参数指向zul页面；
• 参数传递方式1：url后面跟参数；
• 参数传递方式2：WebWork的action中request.setAttribute，然后服务端forward转到zul页面；
• 参数传递方式3：WebWork的action中session.setAttribute，然后返回页面中iframe指向zul页面；

2、CSS样式定制

2.1、概述

ZK应用对于浏览器来说就是标准的Web页面，我们在ZUL页面或java代码中创建的每一个ZK组件在运行时都会被ZK引擎渲染生成标准的HTML+CSS+JavaScript代码，

并且ZK允许我们对所有组件的样式进行定制，例如如下代码就可以将button按钮组件的样式从灰色背景图圆角改变成蓝底白字直角的样子：

/* 覆盖默认按钮样式，实现蓝底白字按钮 */
.blue-button .z-button-tl,.blue-button .z-button-tr,.blue-button .z-button-bl,.blue-button
        .z-button-br,.blue-button .z-button-tm,.blue-button .z-button-bm,.blue-button .z-button-cl,.blue-button
        .z-button-cr,.blue-button .z-button-cm {
    background-image : none ;
    background-color : #2777C3 ;
    color : #ffffff ;
}

"查询" onClick= "@command('query')" sclass= "blue-button" width= "65px" />
"重置" onClick= "@command('reset')" sclass= "blue-button" width= "65px" />

通过Firebug等工具查看ZK页面的Dom可以方便的获得某个页面元素对应的样式是被那个zclass定义的，然后就可以有针对性的精确修改其样式；

2.2、三种定制方式

具体的有三种方式：

• 覆盖zclass：在页面