锁定老贴子 主题：Web显示层技术评估_请注意新的引擎RoseForJ 该帖已经被评为新手帖
作者	正文
lthu 等级: 初级会员 性别: 文章: 12 积分: 50 来自: 上海	最后更新时间：2007-08-29 关键字: web 来自：http://blog.csdn.net/buaawhl/archive/2006/07/14/920842.aspx 请注意新的引擎RoseForJ RoseForJ的思路是 Velocity在XML DOM领域的扩展。 如果说，Fastm = JDynamiTe + Wicket；DOMPlus = XMLC + Wicket，那么RoseForJ=xmlc+wicket+velocity Scripted Template 前面讲述了评估指标。下面分别各项技术进行单项说明。 (1) Scripted Template HTML和Server Side Script混杂在一起的显示层技术。 包括JSP, Velocity, Freemarker, Taglib, Tapestry, XSL等。   Server Side的这些Scripted Template技术比较流行，耳闻能详。前面进行指标描述的时候，各种参数，也基本上涉及到了。就不具体展开进行单项的用法说明和特性分析。 JSP, Velocity, Freemarker的优势在于这些技术对用户后台Java代码侵入性非常低，这些Template都可以任意替换，而不影响用户后台Java代码。   下面讲述另外两类不是很常见的技术。 (2)Template Manipulation Java代码直接操作Template（比如，HTML DOM）产生结果的显示层技术。 包括XMLC, JDynamiTe, Rife等。   (3) Model Match Java代码负责提供符合显示层要求的Data Model，显示层框架本身把Data Model和Template进行匹配，产生结果。 包括Wicket, Fastm, DOMPlus, 等。 Template Manipulation Java代码直接操作Template（比如，HTML DOM）产生结果的显示层技术。 包括XMLC, JDynamiTe, Rife等。 这类技术都具有良好的所见即所得特性。 (1)XMLC http://xmlc.enhydra.org/ XMLC把一个HTML文件翻译成一个Java HTML DOM Class， 比如， ... ... 这些具有id的HTML元素，在Java HTML DOM Class都产生了对应的方法。 HTMLElement getElementPara1() public void setTextPara1(String text) HTMLTitleElement getElementTitle() HTMLInputElement getElementNameInput();   比如， CLASS="class1 class2"> 就产生了如下的Constant Fields.    public static final String NAME_myName;    public static final String CLASS_class1;    public static final String CLASS_class2;   具体操作代码如下， HTMLObject htmlObj = new HelloHTML(); // Construct head HTMLHeadingElement head = htmlObj.createElement("h1"); Text headText = htmlObj.createText("Hello World"); head.appendChild(htmlTest);   // Construct anchor HTMLAnchorElement anchor = htmlObj.createElement("a"); anchor.setHref("Welcome.po"); Text anchorText = htmlObj.createText("Welcome Page"); anchor.appendChild(anchorText);   // Replace contents of id-labeled node. Element replace = htmlObj.getElementReplaceme(); Element parent = replace.getParent();   // Start with the last new child so we can use insertBefore parent.replaceChild(anchor, replace); parent.insertBefore(head, anchor);   可以看到，用户的Action Code里面充满了HTML DOM Node的添加删除操作。而且里面使用的代码都不是标准的DOM操作方法，而是代码生成的方法。代码侵入性非常强，如果要换成别的Template，比如JSP, velocity所有的代码都要作废。 当然XMLC产生的是一个DOM，后面还是可以接续XSL的。   一般来说，XML DOM操作只能针对完整的Node。一般需要替换整个Attribute，整个Text。 对于，http://www.mobi99.cn 另外有一个不常见的需求。动态替换Java Script代码的里面的某一部分。这时候，XMLC就完全无能为力了。或许也可以引入外来的Text Parser Engine，比如Velocity, Freemarker, Fastm, JDynamicTe等来做这件事情。   XMLC的主要问题还是空间效率问题。每次请求，用户需要产生一个Java DOM Class副本，进行操作。如果有多个用户访问同一个Page，那么就同时存在多个Java DOM Class副本。 当然里面的静态文本资源是共享的，我们看到上面的Java DOM Class里面，产生了很多String常数。 但是DOM Node结构本身的尺寸就比较大。即使采用了一些优化简化的DOM Parser，去除了用不到的结构，整个尺寸还是比较大。 (2) JDynamiTe http://jdynamite.sourceforge.net/doc/jdynamite.html   JDynamiTe是PHPLib Template的移植。采用XML Comment的方式标记动态结构块。 我们来看一个典型的两层循环的例子。

 

{VALUE_X} {VALUE_Y}

 

 

 

对应的代码是，

import cb.jdynamite.*;

 

dynamiTe=new JDynamiTe();

dynamiTe.setInput(application.getRealPath("cbtemplate/testTemplate.html"))

    // Second table with nested Dynamic Element
    for (int row = 0; row < 5; row++) {
        // first group of columns
        // 4) Use "setDynElemValue" to set or reset the value of a Dynamic Element
        dynamiTe.setDynElemValue("colX", ""); // reset for each row
        for (int col = 0; col < 3; col++) {
            dynamiTe.setVariable("VALUE_X", "line_" + row + ",col_" + col);
            dynamiTe.parseDynElem("colX"); // add a column
        }
        // second group of columns
        dynamiTe.setDynElemValue("colY", ""); // reset for each row
        for (int col = 3; col < 5; col++) {
            dynamiTe.setVariable("VALUE_Y", "line_" + row + ",col(BIS)_" + col);
            dynamiTe.parseDynElem("colY"); // add a column
        }
        dynamiTe.parseDynElem("myBigRow"); // add a row
    }

    // 5) Use "parse" to finaly get the value of your Dynamic Template Document
    dynamiTe.parse();

    out.println(dynamiTe.toString()); // send HTML page

 

我们看到，Template本身操作贯穿程序的始终。

setDynElemValue, setVariable, parseDynElem, parse都是template Class本身的方法，类似于XML DOM Node的添加删除修改。

我们看到这类DOM Manipulator的代码侵入性非常强，用了之后，如果要换别的Template，比如JSP, velocity，这段代码完全作废。

(3) Rife
http://rifers.org/

类似于JDynamiTe，Rife也采用自定义动态块标签。

下面是一个典型的例子。递归显示一个Data Tree。下面只是核心片断。如果对整个例子感兴趣，可以去Rife的网站查看Sample和Tutorial。

这是一段Tree Template。

${v level/}

${b level}

 

 

${/b}

${b node}

 

 

${/b}

 

对应的Java代码操作Template Node,输出Data Tree。

 

import com.uwyn.rife.engine.Element;

import com.uwyn.rife.template.InternalValue;

import com.uwyn.rife.template.Template;

 

// obtain an instance of the template that will output the tree

Template template = getHtmlTemplate("tutorial.recursion");

…

// obtain a new internal value to construct a collection

// of sibling child nodes in the local scope

InternalValue   nodes = template.createInternalValue();

…

// set the child's title value

template.setValue("title", encodeHtml(child.getTitle()));

// and append it to the local internal value

nodes.appendBlock("node");

…

// set the level value which includes the sibling nodes in the

// same level

template.setBlock("level", "level");

 

我们看到，template的操作代码贯穿整个程序的始终。getHtmlTemplate, createInternalValue, setValue, appendBlock, setBlock。非常类似于上面JDynamiTe的用法。

JDynamiTe显示Data Tree的过程也是大致如此。XMLC也是如此。

Rife同样具有JDynamiTe和XMLC的代码侵入性强的缺点。如果需要换别的Template技术，比如JSP, velocity，整个代码都要做废。

Model Match
Java代码负责提供符合显示层要求的Data Model，显示层框架本身把Data Model和Template进行匹配，产生结果。

包括Wicket, Fastm, DOMPlus, 等。

这类技术都具有良好的所见即所得特性。

(1) Wicket
http://wicket.sourceforge.net/

Wicket类似于Tapstry，采用HTML自定义Attribute作为自定义标签。

这段是Rife的一个典型的循环的例子。wicket:id一个标签，几乎可以满足任何需求。有兴趣的读者可以去Wicket网站查看完整的Sample。这里只有核心片断。毕竟，本文不是一部Wicket教程。

 

 

    Add your comment here:

   

 

    This is a comment

   

 

   

 

 

 

 

   

 

           1/1/2004

           Comment text goes here.

      

 

 

 

   

 

           1/2/2004

           More comment text here.

   

 

 

                       

 

我们可以看到，Template非常干净。只有少数的自定义attribute, (and tag)。

对应的Java代码如下。

 

import wicket.markup.html.WebPage;

import wicket.markup.html.basic.Label;

import wicket.markup.html.basic.MultiLineLabel;

import wicket.markup.html.form.Form;

import wicket.markup.html.form.TextArea;

import wicket.markup.html.list.ListItem;

import wicket.markup.html.list.ListView;

import wicket.model.PropertyModel;

 

public final class GuestBook extends WebPage

{

       /** Use a Vector, as it is synchronized. */

       private static final List commentList = new Vector();

       private final ListView commentListView;

 

       public GuestBook()

       {

              add(new CommentForm("commentForm"));

              add(commentListView = new ListView("comments", commentList)

              {

                     public void populateItem(final ListItem listItem)

                     {

                            final Comment comment = (Comment)listItem.getModelObject();

                            listItem.add(new Label("date", comment.date.toString()));

                            listItem.add(new MultiLineLabel("text", comment.text));

                     }

              });

       }

}

 

我们看到，Wicket的代码，相当干净利索，虽然写法上使用了匿名内部类。没有任何Template本身的操作。只是需要提供一个框架需要的View Model。ListView，MultiLineLabel，Label。

Wicket的PropertyModel能够用来包装一个POJO。比如，一段HTML Template

Stock of IBM: some value

 

对应的Java代码是

import wicket.model.PropertyModel;

 

public PojoStockQuotePage()

{

    StockQuote quote = new StockQuote("IBM");

    add(new Label("stockIBM", new PropertyModel(quote, "quote"));

}

 

我们看到，Wicket的代码结构非常像Swing。只需要对应HTML UI Tag提供一份View Model就可以。操作起来实在是方便。而且HTML Tag里面只需要添加 Wicket:id这样的自定义Attribute，就可以同时表达动态层次块和变量部分（其实Rife也是如此）。

 

当需要换Template的时候，比如JSP, Velocity, Freemarker，Taglib等，Wicket提供的View Model还是可以使用的。

Wicket的一个不足之处是，代码需要使用框架自定义的HTML View Model。这也可能是一个优点，能够帮助用户清楚地理解，代码和HTML Template之间的对应关系。

 

从严格意义上来说，比起Taglib, Tapestry来说, 只有Wicket, Echo这样的框架才是真正意义上的组件框架。而且，Wicket相对于Echo的优势如此明显，这里就不多说了。不然就跑题了。总之，Wicket是一个非常值得关注的框架。

(2) Fastm
http://fastm.dev.java.net/servlets/ProjectDocumentList

Fastm的思路相当于JDynamiTe, Wicket的思路组合。

Fastm = JDynamiTe + Wicket

Fastm采用自定义标签来标记动态Block，然后类似于JSTL, Velocity, Freemarker, Tapestry那样，接受一个POJO作为Model，并采用OGNL Style(同时也接受XPath Style)的方式对数据进行寻址。

Fastm的公式很简单，Fastm Template + Model = Result。

这个Model是POJO。可以是Java Bean, Map, DOM Node等任何Object。

 

我们来看一段典型的Tree Data递归显示的例子。

这段是HTML Template片断。

 

class name:

 

 

 

    class name:

   

   

 

   

   

   

 

   

 

 

 

上面的@children需要特别说明一下，意思是检测当前Model是否具有children这个property，如果具有，那么向下展开，否则就跳过去。这样的话，如果没有children的话，多余的

 

 

对应的Java代码只需要提供一个POJO作为Tree Data。

 

    public Object makeModel(){

       Map a = new HashMap();

       a.put("name", "A");

       List aChildren = new ArrayList();

       a.put("children", aChildren);

       {

           Map a1 = new HashMap();

           a1.put("name", "A1");

           List a1Children = new ArrayList();

           a1.put("children", a1Children);

           {

              Map a11 = new HashMap();

              a11.put("name", "A1-1");

              a1Children.add(a11);

 

              Map a12 = new HashMap();

              a12.put("name", "A1-2");

              a1Children.add(a12);

           }

           aChildren.add(a1);

       }

       return a;

    }

 

这段代码采用了Map作为Model, 也可以采用Java Bean, XML DOM Node等任何Object。所以，当然可以提供一个XML文件作为Model。

 

看起来Fastm和JSP, Freemarker, Velocity，JSTL一样，对View Model没有什么特殊要求。POJO就可以。基本上就是如此。

且慢，Fastm对Model还是有特殊要求的。类似于Wicket，Fastm也没有逻辑标签，Fastm也利用数据来表示条件、循环等逻辑分支。遇到Collection, Array等数据类型，就自动把动态块展开。如果不显示某一块，那么就提供一个空数据。

这就是Fastm所需要的所有约定。看起来很简单，真正满足这个约定也不难。但是，某些特殊的情况下，为了满足这个约定，需要后台的用户代码做一些比JSP, Velocity, Freemarker要求的更多的Model组装工作。

Fastm的另一个问题是，Model和View（Template）之间的映射关系不是很明了。虽然比JDynamiTe，Rife等容易明白多了，但是比Wicket还是差一些。因为Fastm没有自定义View Model类型，需要用户自己掌握Bean, Map层次和Template层次之间的正确对应。

(3) DOMPlus
http://fastm.dev.java.net/servlets/ProjectDocumentList

DOMPlus是Fastm的思路在XML DOM领域的扩展。

如果说，Fastm = JDynamiTe + Wicket；那么，DOMPlus = XMLC + Wicket

DOMPlus是XMLC和Wicket思路的组合。

如果说，Fastm的公式是，Fastm Template + Model = Result。

那么，DOMPlus的公式是，DOM + Model = DOM or SAX

这个Model是POJO。可以是Java Bean, Map, DOM Node等任何Object。

一个很有趣的现象就是 DOM + DOM = DOM

没错，就是如此。

 

DOMPlus采用自定义DOM Attribute来标记动态Element, 动态Attribute, 动态Text。

我们来看一个典型的Tree Data 递归显示的例子。

对应的HTML DOM片断是。

 

 

 

    class name:

   

 

   

 

   

 

 

 

nodeTarget表示可能被重复多次的动态Element，attributesTarget表示需要替换的attribute。这里数据寻址方式采用的是XPath。@name表示DOM Node的name attribute。

DOMPlus的自定义标签只有3个，nodeTarget, attributeTarget, textTarget。

 

对应的XML Tree Data 是，

 

 

   

 

 

   

     

   

 

 

 

 

这两个DOM一匹配，就产生了结果XML，是一棵显示在HMTL List里面Tree。

 

DOMPlus的Template更加干净，几乎接近于XMLC的Pure HTML DOM，等同于Wicket。

而且DOMPlus并没有XMLC的空间问题。DOMPlus只保留一份DOM在内存中，每次请求来的时候，DOMPlus根据数据匹配产生SAX Event，直接写入Response。

 

DOMPlus的匹配引擎很类似于XSL的功能，同样是用XML格式的模板文件处理XML数据。而且两者都同样是递归处理引擎。

所不同的是DOMPlus Template能够在浏览器中正确显示，而且表达结构的自定义属性非常简单，只有3个（Fastm有2个）。

 

DOMPlus的问题和Fastm一样，数据层次和模板层次之间的关系，一定要非常清楚，而不是像JSP, Velocity, Freemarker那样把数据抓过来就可以用。

另外的问题就是，处理的最小单位是XML Node。XML Node里面的text的部分替换就无能为力了。比如

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:j="http://www.mobi99.cn">
<head>
<title>${title}</title>

</head>

<body>
<div class="dtree">
<a href="javascript: d.openAll();">展开</a> | <a href="javascript: d.closeAll();">关闭</a>
<script type="text/javascript">
 d = new dTree('d');
 
 d.add(0,-1,'系统菜单','#',"showMenu",null); 
 <j:tempnode j:foreach="${MenuSet}" j:item="${data}">
  d.add('${data.get("id")}','${data.get("i_parentid")}','${data.get("c_title")}','${data.get("c_target")}');
 </j:tempnode>
 document.write(d);
</script>
</div>
<ul>
 <li j:foreach="${dataSet}" j:item="${data}">
  <span j:tid='${data.getName()}' id="showname">这里显示NAME</span>
        <j:tempnode j:tid='${data.getName()}'>这里显示NAME</j:tempnode>
   <img src="http://localhost/roseforj/listImg.do?id=${data.getId()}" width="200" />
   xxx.id=${xxx.getId()}
 </li>
</ul>
<j:include path='/xml/include.html'/>
</body>
</html>

和XMLC的解决方法一样，可以引入外面的文本解析器。用来处理XML Node鞭长莫及的地方，比如，JavaScript代码的内部的动态替换部分。

Regular Expression，Velocity, Freemarker, Fastm, JDydanamiTe，等任何能够脱离Web环境的通用文本解析工具都可以。JSP, Taglib, Tapestry, Wicket等无法脱离Web环境而存在，肯定不行。

(4) RoseForJ

RoseForJ的思路是 Velocity在XML DOM领域的扩展。

如果说，Fastm = JDynamiTe + Wicket；DOMPlus = XMLC + Wicket，那么RoseForJ=xmlc+wicket+velocity

下面我们来看看RoseForJ的模板

 

 

 

• 从上面模板可以看出RoseForJ只有两个TAG（tempnode、include）和3个属性（foreach、item，tid），它也是一个标记语言，写法如下 ${变量表达式} 。

            其中3个属性可用于html任何标签（如用于tr ，td等），foreach、item配合使用，表示一个循环，foreach="${dataSet}"   ,此时dataSet是一个集合对象或数组，item="${data}" ，data表示集合对象或数组对象中每一个成员。

           ${变量表达式} 的用法非常灵活，可在任何位置，如上面的用法：

  1、这里显示NAME 这里作为TAG 的text的值，运行结束后将替换掉 "这里显示NAME" 这段文本
  2、img src="http://localhost/roseforj/listImg.do?id=${data.getId()}" width="200" />此处用法是作为HTML TAG img的属性src的参数值。
  3、xxx.id=${data.getId()} 可以直接输出。

           两个TAG（tempnode、include）中include不用说一看就知道是引入外面的一个模板文件，tempnode的作用是在解析完成后，会将此tempnode节点删除，如在此处的应用

  
  我们都知道在script TAG中是不允许出现其它tag的，所以此处的运行结果为：

  tempnode 节点被删除了

  在服务器端的编程则更加简单，几乎没有任何约束，你可以用hibernate，ibaits，javabean或者自己组织的任何对象，同时还可以嵌套使用，如：

  package juan.framework;

  import java.util.ArrayList;
  import java.util.List;

  public class ValueObject {
     private int id=0;
     private String name="tom";
    
     private List aList=new ArrayList();
    
     public List getList() {
        return aList;
     }

     public void setList(List list) {
        aList = list;
     }

     public int getId() {
        return id;
     }

     public void setId(int id) {
        this.id = id;
     }

     public String getName() {
        return name;
     }

     public void setName(String name) {
        this.name = name;
     }
  }
  

  package juan.framework;

  import java.util.ArrayList;
  import java.util.List;
  import java.util.Vector;

  import juan.framework.context.IContext;
  import juan.framework.context.impl.InnerContextImpl;
  import juan.framework.runtime.RuntimeSingleton;

  public class Test {

     /**
      * @param args
      */
     public static void main(String[] args) throws Exception{
        String filename = "/xml/hell.html"; //要访问的模板path
        Vector paths = new Vector();
        paths.add("E:\\workspace\\Test\\juan");  //模板存放的path，可以有多个
        RuntimeSingleton.init(paths);

  
        IContext context=new InnerContextImpl();
        context.put("title", "www.mobi99.cn");
       
        ValueObject vo1=new ValueObject();
        vo1.setId(9999);
        vo1.setName("vovovovovov");
       
        context.put("data", vo1);
       
       
        List aList=new ArrayList();
        ValueObject[] xxSet=new ValueObject[2];
       
        ValueObject vo=new ValueObject();
        vo.setId(100);
        vo.setName("tony");
       
       
        aList.add(vo);
        xxSet[0]=vo;
       
        vo=new ValueObject();
        vo.setId(200);
        vo.setName("tom");
        aList.add(vo);
        xxSet[1]=vo;
       
        context.put("dataSet", aList);
        context.put("xxSet", xxSet);
  
        RuntimeSingleton.getTemplate(filename, "GBK").merge(context,null); //此处null为writer，demo中省掉了
     }
  }

  从上面的编码中可以看出RoseForJ对数据的要求几乎是没有任何要求的，可以是pojo 如可以这样用${data.getName()}，也可以是个集合类，则可以这样取值${data.get("c_author")} ，还可以嵌套调用如：${ChannelFactory.get(data.get("c_channelid"))} ，data.get("c_channelid")运行的结果作为ChannelFactory.get(...)的参数，另外RoseForJ还提供了格式化输出等工具，如日期输出${DateTool.format("yyyy-MM-dd",data.get("t_starttime"))} ，数学运算

• a href="listContent.do?pages=${MathTool.sub(iPageCurrent,1)}">上一页</a>
  a href="listContent.do?pages=${MathTool.add(iPageCurrent,1)}">下一页</a>

tag就不需要打印出来了。虽然空
tag并不影响显示。

 

${v title/}${v level/}

${v nodes/}

声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。

推荐链接

• Windows7在微软WinHEC 2008上揭开神秘面纱
• IBM Rational软件开发高峰论坛9月揭幕
• 在繁琐中挣扎还是简化自主管理？