卡子的博客 信息技术 RSS feed

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

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","\"hello\"" 

)); //传递参数 
    } 

    public ItsNatComponentManager getItsNatComponentManager()
    {
        return compMgr;
    } 

    public ItsNatDocument getItsNatDocument()
    {
         return compMgr.getItsNatDocument();
    } 

    public Node getNode()
    {
        return root;
    } 

     /*其它方法
**/ 

} 

 

 

实现友好的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键





Tags:

分类