ZK高级特性:Style定制与客户端集成
2013-12-19 23:04
369 查看
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按钮组件的样式从灰色背景图圆角改变成蓝底白字直角的样子:
通过Firebug等工具查看ZK页面的Dom可以方便的获得某个页面元素对应的样式是被那个zclass定义的,然后就可以有针对性的精确修改其样式;
2.2、三种定制方式
具体的有三种方式:覆盖zclass:在页面<style>区域添加与ZK组件zclass同名的class,然后覆盖某些样式属性,这样就可以对该页面范围内的所有该组件样式进行修改;
定义sclass:像上面代码示例中那样定义自己的class,然后在需要应用的组件中指定sclass属性即可;
直接在组件的style字段中指定样式,例如
2.3、更多示例
蓝底白字的简约风格菜单列表中超长文本自动换行
紧凑表格:去掉padding
《ZK Style Customization Guide》、 http://books.zkoss.org/wiki/ZK%20Style%20Customization%20Guide/Upgrade%20Customized%20Style%20From%20other%20ZK%20Version/Upgrade%20From%20ZK%206.5
3、ZK与客户端JS的双向调用
3.1、服务端Java调用客户端JS
ZK支持在服务端Java代码中直接执行js,如:Clients.evalJavaScript("top.bodyIframe.main.tabsDetail.setActiveTab('010402')");//选中保单查询页签如果要执行的JS很长,就不方便直接这样拼字符串了,可以:
在Zul页面中引入js文件:<script type="text/javascript" src="/js/life/telGPS/preserveDoc.js"></script>
或在<script>标签中直接写js:
3.2、在ZUL页面中直接调用JS
3.3、JS调用ZK服务
客户端JS调用ZK服务也非常简单——通过zAu对象像某个组件发送事件,然后组件声明该事件触发command或服务端listen该事件处理即可;示例代码如下:
相关文章推荐
- [置顶] ZK高级特性:Style定制与客户端集成
- 十、声明式 REST 客户端-Feign 的高级特性
- Zookeeper系列五:Master选举、ZK高级特性:基本模型
- 创建自定义路由处理程序(Creating a Custom Route Handler) | 定制路由系统| 高级路由特性 |精通ASP-NET-MVC-5-弗瑞曼
- 一个例子帮你搞懂C#语言高级特性系列(05) --- 语言集成查询(LINQ)
- hbase权威指南-客户端API高级特性
- 《HBase权威指南》读书笔记 第四章:客户端API高级特性
- Java网络编程(三) - Spring MVC高级特性
- redis必杀高级:客户端连接
- 步步为营VS 2008 + .NET 3.5(1) - VS 2008新特性之Multi Targeting(多定向)、Web Designer and CSS(集成了CSS的web设计器)和Nested Master Page(嵌套母版页)
- 深入理解Java虚拟机:JVM高级特性与最佳实践
- 高级OOP特性
- Android应用开发-小巫CSDN博客客户端之集成友盟社会化分享组件
- [发布]SuperIO v2.2.5 集成OPC服务端和OPC客户端
- Java高级特性——注解,这也许是最简单易懂的文章了 推荐
- 【学习总结】java高级特性之四种JAVA内部类总结
- AutoCAD的定制开发接口(高级篇)专题培训材料介绍[转载]
- Django中的Python高级特性
- 'Hibernate 完全手册' 读书笔记(五) 事务和并发、缓存、高级特性、附录
- 第十二章 客户端新特性的选项