关于ZK、BootStrap这里不做介绍了,如果不了解的,可能也不需要看这篇文章了。
目前ZK对Bootstrap的支持,完全可以插件化,也就是说页面可以完全不用改,而实现换样式。
这里简单介绍一下原理。
一、ZK插件的原理
首先需要在resources目录下进行下配置:
如上图,这两个文件时最主要的。Config文件定义了该插件的基本信息,比如名称和版本;
Lang-addon文件定义了插件的详细信息,如下图,定义了js的目录(以web.js为默认前缀),以及要加载的css文件,当然还要定义所扩展的控件,比如这里的button。
相应的js目录下,需要有zk.wpd文件,该文件具体定义了,要加载哪些js文件
如上图,我们这里重写了button,textbox、menu等控件。
如lang-addon文件所示,我们扩展的控件,为了不影响原有控件的属性,或者说和原有控件一起存在,我们定义了自己的mold属性,这里是bs。那在哪里定义哪些控件具体用哪个mold呢,就是zk.xml中,如下图:
这里,具体定义了哪些控件需要用我们自定义的mold。
二、简单介绍一下,我们如何来支持bootstrap的。
通过插件的方式,我们其实已经把bootstrap.min.css加载进来,这样就不需要在page页面上单独定义了,我们以扩展textbox支持bootstrap为例,
看上图,zk在js端提供了一种机制,让我们可以在原有zk js控件的基础上,任意的修改,这个机制就是通过zk.afterLoad function实现的。
afterLoad的第一个参数是zk js的package name,这里我们需要查看zk自身的js实现,来确定某个控件到底属于哪个package,zk自身的实现在他的jar包中:
比如Textbox是在zul.inp下。
知道在哪个package后,我们就可以用afterLoad方法,在这个package加载完成后,执行我们自己的操作,用来对zk原生的js进行修改。
比如这里的input.zul,我们仅仅实现了,当这个控件是bs mold的时候,他的sclass是form-control,最终我们在page zul文件中不用做任何修改,就可以支持bootstrap了,比如:
<textbox placeholder="test" />
三、示例代码简介
ui-examples.zip是示例代码,这个代码是在原有zk示例代码基础上做了一些调整,去掉了不需要的东西。
首先,先说一下java代码,如下图,只有两个类,Version类用于我们bootstrap插件的版本号,Runtime类是为了破解ZK。
最重要的是我们的插件实现:全部在resources目录下
最后是页面代码:如果要看某个例子的实现,就可以访问/zk/xx.zul即可。
示例代码详见附件中。