itsnat--自定义控件入门和友好的url

09 Jun 2011 in java on javascript web 前端 - Hits()

As I see that itsnat referred this post as their tutorial, so I post a copy that in english, you can view it at itsnat -- Custom components and friendly URLs .

itsnat 是个很有意思的java web框架,实现了“浏览器就是服务器”(The Browser Is The Server TBITS),在服务器端模仿了一个一般概念的W3C Java 浏览器，客户端动作通过AJAX发送到服务器端，并且转换为W3C Java DOM动作，在DOM服务器端改变结果自动发送到客户端，用JavaScript 更新客户端DOM。

要自定义一个组件，需要如下步骤：

1:监听模板

Java代码

String html = "E:/projects/ItsNat/wb/test/WebRoot/apps/pto/frontpage.html"; 
       ItsNatDocumentTemplate docTemplate = getItsNatHttpServlet().registerItsNatDocumentTemplate("pto","text/html", html); 
docTemplate.addItsNatServletRequestListener(new ItsNatServletRequestListener(){ 

            public void processRequest(ItsNatServletRequest request, ItsNatServletResponse response) 
            { 
                ItsNatComponentManager manager = request.getItsNatDocument().getItsNatComponentManager(); 
                manager.createItsNatComponentById("dialog"); 
//遇到id=dialog则创建组件 


                String [] ss = request.getUserValueNames(); 
                for (int i = 0 ; i < ss.length ; i++) 
                { 
                    System.out.println("gdfdf:"+ss[i]);    
                }                                
            }            
       });

2: 注册组件模板:

Java代码

       html = "E:/projects/ItsNat/wb/test/WebRoot/apps/pto/dialog.html"; 
       getItsNatHttpServlet().registerItsNatDocFragmentTemplate("dialog", "text/html" ,html); 
       docTemplate.setAutoBuildComponents(false);

3:监听创建组建事件，返回自定义的组件：

Java代码

            docTemplate.addCreateItsNatComponentListener(new CreateItsNatComponentListener(){ 

            public ItsNatComponent after(ItsNatComponent comp) 
            { 
                // TODO Auto-generated method stub 
                return null; 
            } 

            public ItsNatComponent before(Node node, String compType, NameValue[] artifacts, 
                                            ItsNatComponentManager compMgr) 
            { 
                if (node.getNodeType() != Node.ELEMENT_NODE) 
                    return null; 

                Element elem = (Element)node; 

                String id = elem.getAttribute("id"); 
                if ("wcsa:dialog".equalsIgnoreCase(id)) 
                { 
                     
                    return new Dialog(elem,compMgr); 
//创建自定义组件dialog 
                } 
                 
//                if ((compType != null) && compType.equals("dialog")) 
//                    return new Dialog(node,compMgr); 
                
                return null; 
            } 
                       
       });

4 :dialog模板：

Html代码

<div id="dr"> 
    dfdfdf 
    <button id="db" >dd</button> 
</div>

5 :dialog组件类:

Java代码

>package test; import java.beans.PropertyChangeListener; import java.beans.VetoableChangeListener; import org.itsnat.comp.ItsNatComponent; import org.itsnat.comp.ItsNatComponentManager; import org.itsnat.comp.ItsNatComponentUI; import org.itsnat.core.ItsNatDocFragmentTemplate; import org.itsnat.core.ItsNatDocument; import org.itsnat.core.ItsNatServlet; import org.itsnat.core.event.CustomParamTransport; import org.itsnat.core.event.ItsNatEvent; import org.itsnat.core.event.ParamTransport; import org.w3c.dom.Document; import org.w3c.dom.DocumentFragment; import org.w3c.dom.Element; import org.w3c.dom.Node; import org.w3c.dom.events.Event; import org.w3c.dom.events.EventListener; import org.w3c.dom.events.EventTarget; public class Dialog implements ItsNatComponent { protected ItsNatComponentManager compMgr; private DocumentFragment frag; private Element root; private Element parent; public Dialog(Element parent,ItsNatComponentManager compMgr) { this.parent = parent; this.compMgr = compMgr; ItsNatDocument itsNatDoc = compMgr.getItsNatDocument(); Document doc = itsNatDoc.getDocument(); ItsNatServlet servlet = itsNatDoc.getItsNatDocumentTemplate().getItsNatServlet(); ItsNatDocFragmentTemplate docFragTemplate = servlet.getItsNatDocFragmentTemplate("dialog"); frag = docFragTemplate.loadDocumentFragment(itsNatDoc); parent.appendChild(frag); root = doc.getElementById("dr"); itsNatDoc.addEventListener((EventTarget)root, "click", new EventListener(){ 添加了dom点击事件 public void handleEvent(Event evt) { ItsNatEvent e = ((ItsNatEvent)evt); Object ss = (String)e.getExtraParam("1");//获得参数 // System.out.println(pp.getScriptCode()); System.out.println("---" + ss); } } , false,new CustomParamTransport("1","

quot;hello

实现友好的url ：

目前itsnat通过请求中的参数itsnat_doc_name

来确定模板,

要实现友好的url,需要注册一个全局监听器来设置request的itsnat_doc_name

键值并重新处理请求来指定模板：

Java代码

       ItsNatServletContext itsNatCtx = itsNatConfig.getItsNatServletContext(); 
       itsNatCtx.setMaxOpenDocumentsBySession(5); // To limit the memory of bots identified as legitimate browsers and abusive users 

       itsNatServlet.addItsNatServletRequestListener(new GlobalItsNatServletRequestListener());

Java代码

package test; 


import javax.servlet.ServletRequest; 

import org.itsnat.core.ItsNatDocument; 
import org.itsnat.core.ItsNatServlet; 
import org.itsnat.core.ItsNatServletRequest; 
import org.itsnat.core.ItsNatServletResponse; 
import org.itsnat.core.event.ItsNatServletRequestListener; 

public class GlobalItsNatServletRequestListener implements ItsNatServletRequestListener 
{ 

    public void processRequest(ItsNatServletRequest itsNatServletRequest, ItsNatServletResponse itsNatServletResponse) 
    { 
        ItsNatDocument itsNatDoc = itsNatServletRequest.getItsNatDocument(); 
        ServletRequest request = itsNatServletRequest.getServletRequest(); 
        ItsNatServlet servlet = itsNatServletResponse.getItsNatServlet(); 
        
        if (itsNatDoc != null) 
        { 

        } 
        else 
        {            
            String p = request.getParameter("p"); 
            request.setAttribute("itsnat_doc_name",

p);
servlet.processRequest(request, itsNatServletResponse.getServletResponse());
}
}

}

上面的例子使用参数p来决定请求属于哪个template键