最近因为在学习 zk ，所谓学而不思则惘，一直想来写点介绍文， 顺便找点同好聊聊，开个讨论串来讨论讨论这个主轴带点讨论风气。 对於 zk 我目前因为接触不深，还是比较难用比较完整的角度来陈述， 因为 zk 本质上是一个在各个细节都非常注重的东西， 每个小细节几乎都可以开一个主题， 有些东西我也是才疏学浅，还有待大家一起讨论研究。 毕竟这是一个试图在 web 世界中，做出一个 ajax solution 的framework。 ----------------------------------------------------- 所以我打算先以完全没接触过的使用者的观点，写一写我接触时眼中的zk。 这篇的主轴一半的背景知识会是web(html+javascript+css)， 另一半则是 J2EE (Java/servlet/container(tomcat)) 等。 zk 最早给我的印象是他是个在国外比较红的 framework ， 另外就是它是个 ajax framework 。 ----------------------------------------------------- 对，我们的话题就从 ajax framework 开始。 ----------------------------------------------------- 我的 ajax 领域经验虽然还不算深， 但也曾经接触过一些 ajax 应用专案，参与过其中的流程开发， 曾有过一些经验，我很难想像，ajax 怎麽可能能够做得成模组化？ 毕竟几乎每个 request 都是需要自己去设计规格， 去掌握每个 param 的传递，回来自己动手做每件後续的处理， 回传到页面时自己掌握前端的页面呈现。 就算我们用 struts 来管理破碎页面的呈现， 或者是像ruby 语言的 RoR 这种提供丰富环境支援的环境， 要做到 ajax 的模组化跟架构化，一直都是一个很困难的事情。 而我们搞 F2E (Front-to-End 网页前端技术）的人， 整天和 javascript/css 打交道， 最麻烦的就是随时要在 server /client 两个不同领域绕来绕去。 我一向要烦恼 db 要怎麽捞资料，他会喷什麽资料给我， 另一边要烦恼行为画面应该要怎麽做，才能符合案主需求。 而且很多时候其实我会用到很多重复的零组件， 其中最经典的莫过於就是表单验证了，我很早就为此写过一只小lib。 #15v04i62(ajax) 或者是一些诸如日期选单、tabbox 等等。 看看每天在 web_design/ajax 讨论 plug-in 的类型跟用途的人， 跟一堆讨论要怎麽透过javascript 操作资料的人， 就不难发现其实很多东西是一再被提到、被用到， 一再的在我们的开发工作中出现的东西。 ----------------------------------------------------- zk 本质上就是一个 base on J2EE 的架构， 如果你 deploy 过 struts 或者一些 J2EE web framework， 它就跟他们一样，有一些 jar档。（你可以在zk官方网站上下载） http://www.zkoss.org 你可以 build 一个 zk web application ， 透过建立一个 webapp ，放到 tomcat底下的webapps资料夹， 设定好 context ，把 zk 的 jar 丢到 WEB-INF/lib 。 把 server 开起来， ok ，你现在就有一个 zk 的环境了。 就像是正常的 J2EE project 一样，更简单的方式是拿一个包好的 war 档， 丢到 web apps 资料夹，让 tomcat 自己布署。 我要表达的是，只要你写过其他 J2EE project ， 那 zk 在架设跟布署上是差不多的。 如果你没写过 J2EE 的 project ，那应该也没关系， 网路上有很多参考资料，而且官方也有文件，虽然说都是英文的。XD ----------------------------------------------------- 在我们「概念上」的布署完一个 project 之後， zk 在实务开发时，主要会透过撰写 "zul" 档来进行开发。 这个 zul 档类比到一般的 J2EE application ， 就可说等於是 JSP 的角色，他会负责外观的呈现跟一些事件的处理。 他是一个 xml 档，就跟一般的 html 一样是采用一堆 <xxx> 的 tag 格式， 基本上进入 zk 的第一个门槛大多会出现在 zul 的学习上， 因为你能用的 tag 主要是由 zk 定义给你的。 （当然zk 非常贴心的，基本的 div / label 等等，该有的都有。） 一个简单的范例可以帮助我们快速进入状况 <zk> <label value="hello world" /> </zk> ----------------------------------------------------- 这样会转译成这样的 html ： <span id="z_rrk_01" class="z-label">hello world</span> ----------------------------------------------------- 够简单的 hello world 吧。XD 基本上因为一开始学 zul ，我在很多的 component 中一直迷惑， 我到底要用哪些，所以在这里我打算先点出几个常用的经典 component 。 资料呈现方面 ----------------------------------------------------- <label value="文字" /> 简单的 span 就是个文字呈现 ----------------------------------------------------- <div> div 这老家伙不用解释了吧 - -;; 就跟一般的网页div是一样的。 <label value="文字" /> <label value="文字" /> </div> ----------------------------------------------------- <grid> 强化版的表格 详细范例可看下列连结 http://www.zkoss.org/zksandbox/userguide/#g2 中间有个「view source」，打开来可以看到原始码， 也可以修改原始码，再按下下面的 try-it 即时体验。 ----------------------------------------------------- 表单方面也有一些常用元件 http://www.zkoss.org/zksandbox/userguide/#f2 你能想到的 textbox / password / datebox (内建有日期选单的input) , 还有限定输入资料型态的 intbox longbox 等。 当然也有下拉选单 combobox 、 radio、button等 其实远不只这些啦，zk component 没仔细数过，应该有几十个上百个吧， 这只是如果说要我介绍你前十个，我会先讲这些。 事实上还有一些很 powerful 的排版功能， 像是 tabbox ， hbox/vbox 系列等。 ----------------------------------------------------- 本来是想一路写到为什麽可以简化 ajax problem ， 不过没想到写到这就快十二点了，所以先暂时收尾在这边， 剩下的暂时先说下集待续。 在这里我们目前已经介绍到 zk 透过自定义的 component 跟格式， 来进行 ui 的呈现，眼尖的夥伴们应该也已经发现， 前面范例中有一些像是 datebox 这类的元件是结合 javascript 的操作的。 也就是说，所谓的 component 其实就是预先定义好的 html+css+ js逻辑， 所以在大多数假设中的状况下，你大多可以找到一个zk提供的功能， 来作到你想要的操作，而不一定需要自己另外写程式来处理。 而 zk 的元件都走 css 风格，除非必须配合 javascript 设定的属性， 否则一律都是走 css 风格，你也可以采用定义自己的css的方式盖掉他。 或者是写一个自己的 component ， 甚至是 zk 也有提供让你在 zul 中写原本的html tag 的贴心设计。 写 zul 要像是写原本的 html 也是完全做的到的。 ----------------------------------------------------- 在常用元件的部份，zk提供一些有趣的组件，但由於篇幅跟时间的关系， 对於 component 的介绍或许拉到之後比较後面讨论到深入的实做时再讲。 下一篇要提到为什麽能够因此简化 ajax 、页面呈现的操作， 跟一些常见的网页事件的处理该如何进行，我觉得这些都是非常有趣的部份。 -- 这里有 zk 自己的官方 demo http://www.zkoss.org/demo/ 我个人会推荐底下这两个，zk calender 跟zk grid 的有趣应用。:) http://zcal.zkoss.org/ http://www.zkoss.org/zkdemo/grid/master_detail -- I am a person, and I am always thinking . Thinking in love , Thinking in life , Thinking in why , Thinking in worth. I can't believe any of what , I am just thinking then thinking , but worst of all , most of mine is thinking not actioning... --

※ 发信站: 批踢踢实业坊(ptt.cc) ◆ From: 111.82.21.118 ※ 编辑: TonyQ 来自: 111.82.21.118 (10/05 00:12) ※ 编辑: TonyQ 来自: 220.133.44.37 (10/05 10:07)