zk-web应用型框架学习（一）

本文主要是介绍zk-web应用型框架学习（一），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

zk是一个可以与java语言进行交互的web应用型框架，使用zk框架，一定程度上免去写javascript代码，而且能够很好的完成界面的交互。
类似于Android应用，它的前端布局也是一系列的控件，并且可以绑定一些事件。

1.eclipse下搭建zk环境

在 help–>install new software中加载插件
链接地址：http://studio.zkoss.org/resource/plugins/eclipse_4_2
见图1. zk-插件下载
下载完插件后，重启eclipse就可以创建zk工程了。也可以创建zk页面（后缀名为*.zul）

2.学习简单的zk界面

2.1 创建工程

以下创建的是maven-web工程，然后web端显示的是*.zul页面。
工程目录
pom.xml文件中要引入zk的jar包（比较多杂，所以直接贴整个文件）

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.potix</groupId><artifactId>zkdemo-Load_On_Demand___Grid</artifactId><version>8.0</version><packaging>war</packaging><properties><zk.version>8.0.3.1-Eval</zk.version><zkcharts.version>2.1.1-Eval</zkcharts.version><maven.build.timestamp.format>yyyy-MM-dd</maven.build.timestamp.format></properties><repositories><repository><id>zk repository</id><url>http://mavensync.zkoss.org/maven2</url></repository><repository><id>ZK Evaluation</id><url>http://mavensync.zkoss.org/eval</url></repository><repository><id>com.asual.maven.public</id><name>Asual Public Repository</name><url>http://www.asual.com/maven/content/groups/public</url></repository></repositories><dependencies><dependency><groupId>org.apache.velocity</groupId><artifactId>velocity</artifactId><version>1.6</version></dependency><!-- CE requirements -->      <dependency><groupId>org.zkoss.zk</groupId><artifactId>zk</artifactId><version>${zk.version}</version></dependency><dependency><groupId>org.zkoss.zk</groupId><artifactId>zhtml</artifactId><version>${zk.version}</version></dependency><dependency><groupId>org.zkoss.zk</groupId><artifactId>zml</artifactId><version>${zk.version}</version></dependency><dependency><groupId>org.zkoss.zk</groupId><artifactId>zul</artifactId><version>${zk.version}</version></dependency><dependency><groupId>org.zkoss.common</groupId><artifactId>zcommon</artifactId><version>${zk.version}</version></dependency><dependency><groupId>org.zkoss.common</groupId><artifactId>zweb</artifactId><version>${zk.version}</version></dependency><dependency><groupId>org.zkoss.common</groupId><artifactId>zel</artifactId><version>${zk.version}</version></dependency><dependency><groupId>org.zkoss.zk</groupId><artifactId>zkbind</artifactId><version>${zk.version}</version></dependency><!-- PE & EE requirements --><dependency><groupId>org.zkoss.zk</groupId><artifactId>zkmax</artifactId><version>${zk.version}</version></dependency><dependency><groupId>org.zkoss.zk</groupId><artifactId>zkplus</artifactId><version>${zk.version}</version></dependency><dependency><groupId>org.zkoss.zk</groupId><artifactId>zkex</artifactId><version>${zk.version}</version></dependency><!-- ZK Charts--><dependency><groupId>org.zkoss.chart</groupId><artifactId>zkcharts</artifactId><version>${zkcharts.version}</version></dependency><!-- ZK Graphics --><dependency><groupId>org.zkoss.graphics</groupId><artifactId>graphics</artifactId><version>0.8.0</version></dependency><!-- ZK JSP --><dependency><groupId>org.zkoss.zk</groupId><artifactId>zuljsp</artifactId><version>2.0</version></dependency><!-- Addons --><dependency><groupId>org.zkoss.addon</groupId><artifactId>flashchart</artifactId><version>1.0</version></dependency><dependency><groupId>org.zkoss.zkforge</groupId><artifactId>gmapsz</artifactId><version>3.0.4</version></dependency><dependency><groupId>org.zkoss.zkforge</groupId><artifactId>ckez</artifactId><version>4.4.6.3</version></dependency><dependency><groupId>org.zkoss.calendar</groupId><artifactId>calendar</artifactId><version>2.1.5</version></dependency><dependency><groupId>org.zkoss.pivot</groupId><artifactId>pivottable</artifactId><version>2.3.0-Eval</version></dependency><!-- Themes --><dependency><groupId>org.zkoss.theme</groupId><artifactId>sapphire</artifactId><version>${zk.version}</version></dependency><dependency><groupId>org.zkoss.theme</groupId><artifactId>silvertail</artifactId><version>${zk.version}</version></dependency><!-- Java servlet --><dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><version>2.5</version></dependency><!-- commons --><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>1.3.1</version></dependency><dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1.1</version></dependency><dependency><groupId>commons-digester</groupId><artifactId>commons-digester</artifactId><version>2.0</version></dependency><dependency><groupId>commons-collections</groupId><artifactId>commons-collections</artifactId><version>3.2.1</version></dependency><!-- Log4j --><dependency><groupId>log4j</groupId><artifactId>log4j</artifactId><version>1.2.16</version></dependency><dependency><groupId>org.slf4j</groupId><artifactId>slf4j-simple</artifactId><version>1.6.4</version></dependency><dependency><groupId>org.apache.geronimo.ext.tomcat</groupId><artifactId>juli</artifactId><version>7.0.23.1</version><scope>test</scope></dependency><!-- Rome --><dependency><groupId>rome</groupId><artifactId>rome</artifactId><version>1.0</version></dependency><!-- Jasperreports --><dependency><groupId>net.sf.jasperreports</groupId><artifactId>jasperreports</artifactId><version>4.0.1</version></dependency><!-- JFreeChart --><dependency><groupId>jfree</groupId><artifactId>jfreechart</artifactId><version>1.0.13</version></dependency><dependency><groupId>jfree</groupId><artifactId>jcommon</artifactId><version>1.0.16</version></dependency><!-- POI --><dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.7</version></dependency><!-- filters --><dependency><groupId>com.jhlabs</groupId><artifactId>filters</artifactId><version>2.0.235</version></dependency></dependencies></project>

2.2 简单的zk交互界面

inputDemo.zul代码

<zk>
<window>
<div apply="demo.grid.load_on_demand.InputController"><hbox><datebox id="in" onChange="self.value=new Date()" constraint="no empty" format="yyyy/MM/dd"/><button id="getCurrentTime" label="获取时间"></button><textbox id="mTime"></textbox></hbox>
</div>
</window>
</zk>

java代码

public class InputController extends SelectorComposer<Component> {private static final long serialVersionUID = 1L;@Wireprivate Datebox in;@Wireprivate Textbox mTime;@Listen("onClick = #getCurrentTime")public void getTime(){System.out.println("=="+in);Date dateTime = in.getValue();SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");mTime.setValue(sdf.format(dateTime));System.out.println("获取时间："+in.getValue());}}