在Netbeans 6.1中使用dojo开发自定义的JSF组件

0.准备和目的

前提：netbeans 6.1 beta。

目的：开发一个功能最简的JSF woodstock组件。

准备：Firefox + FireBug插件

 

1。新建一个普通的JSF组件

具体可以参考sun的教程 ，可以忽略其附加的高级功能，在IDE环境中可以很快的开发出一个标准JSF组件出来。

public class ImageRenderer extends javax.faces.render.Renderer{  

一切皆为标准的JSF组件。Renderer可以只考虑最简单的输出，不考虑viewstate。

然后，因为netbeans中页面使用的是xhtml的技术，将该tag运用到其中需如下工作：

xmlns:k="/WEB-INF/tlds/rrr"

 

这里没有考虑design-time的所需要的类。

2。woodstock组件

在前面的组件开发中，代码量比较大地方的在Renderer中的encodeBegin方法。这个方法主要用来产生客户端HTML代码，大量的使用了诸如如下的代码：

writer.startElement("img", imgComponent);
writer.writeAttribute("onClick", "javascript:" + postBackFuncName + "(this)", null); 

有些类似在Servlet输出HTML用到的out.println()，这种方法较之JSP之类的模板技术显得非常的蹩脚。于是在netbeans 6中引入了dojo和json，用来将逻辑和展现分离。如今javascript框架遍地开花，server端越来越多的页面渲染的工作交给了javascript，比如Rails使用了prototype，框架的使用大大的提高了javascript的潜能和开发效率。

woodstock 也即原来的jsf web ui，是Sun的一个JSF的实现，跟标准不同的是提供了更多的组件和AJAX support。如其button Renderer产生client html source code如下：

<span id="j_id17">
<script type="text/javascript">
  webui.suntheme.widget.common._createWidget('j_id17',
  {"id":"form1:button2","widgetType":"webui.suntheme.widget.button",
"visible":true,"primary":false,"value":"Button",
"escape":true,"mini":false,"disabled":false});
</script></span>

  不同于一般的<button name="" value=""/>“明文”的形式。这里调用的函数_createWidget基于dojo的功能，而{}的属性由在server段的Renderer中的java代码组装出来(利用json API)，剩下的渲染工作都是client的浏览器中完成。

 3.将标准组件改造成woodstock组件

将标准JSF组件该为webui组件

import com.sun.webui.jsf.renderkit.widget.RendererBase;
public class MyRenderer extends RendererBase {

 这个类注意的地方不多，只要注意getWidgetType这个方法：

    protected String getWidgetType(FacesContext context, UIComponent component) {
        return "fan.kao";
    }

 这里返回的字符串代表新组件的名称，也是组件在dojo中的namespace。

 

在JSP中，由于该新的组件是woodstock本身没有的，为了避免修改原有的组件库的包，需要在页面中注册这个新的组件：

<script>webui.suntheme.dojo.registerModulePath("fan","/WebApplication1");</script>

这样，就可以把根目录下的js文件纳入dojo的module装载路径。

 至此，所有Java相关的工作已经完成，剩下的就和在dojo创建一个widget的过程一样，包括一个js文件，一个templete文件。

 

在开发过程中，可以使用FireBug插件来调试js相关的问题，dojo也对FireBug做了相应的支持。