（ZK-XF）组件开发三步走

1.3 开发组件三部曲（Trilogy of Component Development ）
      从开发的角度看，实现一个组件有三步：第一，你需要设计展现层；第二，你必须在服务器端实现以java 类形式存在的句柄。最后，你需要用xml 文件对它们进行配置使它能被应用程序访问。
      如何实现展现层取决于客户端的技术，例如，ajax 浏览器采用的是html 标记语言和js 代码，而java 手机客户端采用的是Java MIDlet 技术。出于描述的方便，我们在指南中重点放到了ajax 浏览器。下面的图说名了它们之间的关系。



1.3.1 开发展现层Development of View
      对于ajax 浏览器，组件的展现层是基于HTML 标签和有选择性的JavaScript 方法。HTML tags 用于可视化的展现，而JavaScript 方法用于初始化、清除、监听浏览器事件和服务器交互。
HTML 标记 （HTML Tags ）
      对于ajax 浏览器，可视化展现是由一系列的HTML 标记语言实现的。例如，你想用HTML 的BUUTON 标记去代表一个组件，那么表面的设计可能是这个样的： 

Xml 代码

<BUTTON id="z_ed_0" z.type="mycomps.MyButton">I am a button</BUTTON>   
<BUTTON id="z_ed_0" z.type="mycomps.MyButton">I am a button</BUTTON>

       在这里，z_ed_0 是组件的UUID （该属性是zk 加载器分配 的），z.type 是一个特殊属性用来代表组件的类型。可视化展现层被浏览器解析并运行在浏览器端，然而，它们却是在服务器端生成的，生成时 redraw() 方法被调用。所有的东西都被写在writer argument 这个参数中传递给redraw() 方法后发送给客户端的。为了实现redraw() 方法，你可以通过继承 AbstractComponent 类或它的衍生类来实现，而不需要你自己直接去实现。你可以用你喜欢的Servlet 技术去实现所谓的模板，例如DSP ，JSP 等等。出于描述方便的考虑，我们在这个指南中主要应用DSP 。关于采用Java Servlet 技术，你可以用一个叫组件渲染器的类去实现（即org.zkoss.zk.ui.util.ComponentRenderer ）。它的可读性可能比较困难，但执行效率很好。我们在文章的下边会讲到它。
JavaScript 方法（JavaScript Methods ）
     除了继承一个简单的组件外，你通常需要提供一些JavaScript 代码，用来与用户进行交互、操作HTML 标签和与服务器交互。JavaScript 代 码根据它们的目的不同可以分组为单个的方法。例如，在客户端，你想在组件的初始化中注册一个事件监听器，那么它对应的JavaScript 代码可能是这样 的： 

Js 代码

zkMyButton.init = function (cmp) {   
      zk.listen(cmp, "click", function (evt) {/*my listener*/});   
};   
zkMyButton.init = function (cmp) {

      zk.listen(cmp, "click", function (evt) {/*my listener*/});

};

      在这里，方法的名字是由组件类型决定的，同时名字也决定了何时被调用。在这个例子中，按钮的z.type 是mycomps.MyButton （关于 z.type 属性具体说明在上面有描述）。它表示调用的JavaScript 代码是存储在/web/js/mycomps.js. 这个 JavaScript 文件中的（注意该文件必须存放在可被类加载器加载的位置）。它的组件类型是MyButton 。如果我们想让它在初始化的时候执行，那 么方法的名字必须是zkMyButton.init
(= "zk" + "Type" + ".when"). 类似的, 如果你想在浏览器重新设置大小的时候调用，那么这个方法的名字将是zkMyButton.onSize. 在后面我们会对它做更多的解释。
1.3.2 句柄的开发（Development of Handle ）
      句柄是组件中可被web 应用程序访问的状态和API ，更确切地说，它是实现org.zkoss.zk.ui.Component 接口的一个java 类。一般你不需要直接实现这个接口，你可根据需求，从已存在的类中继承，这些存在的类象
org.zkoss.zk.ui.AbstractComponent, org.zkoss.zk.ui.HtmlBasedComponent, and
org.zkoss.zul.XulComponent. 例如，你想扩展AbstractComponent 的主要实现，java 类的实现可能是这样的：

 

public MyButton extends AbstractComponent { }

      如果你是扩展一些主要应用的实现，除了组件指定的方法外，基本不存在你要实现的抽象类。
1.3.3 配置（Configuration ）
        一旦你实现了展现层和句柄，你可以在xml 文件中说明该组件，以便zk 能加载它，应用程序能用它。这个配置文件叫lang-addon.xml. 在工程中有两个地方你可以放置该文件，一个是在/metainfo/zk 目录下，这种是通过类的路径存储的（一般是jar 文件的一部分）。另一种方法是在web 应用程序中（作为war 文件的一部分）通过在/WEB-INF/zk.xml 中指定正确的路径。
      假设我们展现层的是/web/myaddon/button.dsp ，句柄是com.myaddon.MyButton 类，那么让我们看一下配置应该是这样的：

Xml 代码

<language-addon>   
    <addon-name>myAddon</addon-name>   
     <language-name>xul/html</language-name>   
     <component>  
        <component-name>mybutton</component-name>   
         <component-class>com.myaddon.MyButton</component-class>    
        <mold>   
           <mold-name>default</mold-name>   
            <mold-uri>~./web/myaddon/button.dsp</mold-uri>   
        </mold>   
    </component>   
</language-addon>  
<language-addon>

    <addon-name>myAddon</addon-name>

     <language-name>xul/html</language-name>

     <component>

        <component-name>mybutton</component-name>

         <component-class>com.myaddon.MyButton</component-class> 

        <mold>

           <mold-name>default</mold-name>

            <mold-uri>~./web/myaddon/button.dsp</mold-uri>

        </mold>

    </component>

</language-addon>

      正如上面展现的一样，每一个lang-addon.xml 必须指定一个唯一的名字(addon-name) 和它属于的语言(language- name) 。每个组件定义必须指定组件的名字（component-name ）、句柄 (component-class) 和展现 (mold). 每个组件可以有多个表现层，每个表现层都有一个名字（mold-name ）。默认的模板名字是default ，该模板必须有（除非你想直接 继承redraw 方法）。