卡子的博客 信息技术 RSS feed

itsnat — Custom components and friendly URLs

中文版:itsnat–自定义控件入门和友好的url

itsnat  is a interesting java web framework, which implemented TBITS(The Browser Is The Server ), it mocks a Universal W3C Java Browser in the server, the client send the client browser’s action to the server by AJAX, then mapping them to W3C Java Dom action, the DOM in the server response with the action and send result to the client, the client use the result to synchronize the DOM in the client browser with the server DOM with javascript, really wonderful idea, right?


To design a custom component, need flowing steps:(these code will create a custom Dialog component)

1: Add Listener to the Template

Java code: 

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");
//create component when encounter id = dialog
      String [] ss = request.getUserValueNames(); for (int i = 0 ; i < ss.length ; i++) { System.out.println("gdfdf:"+ss[i]); } } });

2: Register the Template:

Java code: 

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


 

3: Listen Event for Component Createing, Return Custom Component:

Java code:

            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);
                    //return custom dialog 
                } 

//                if ((compType != null) && compType.equals("dialog")) 
//                    return new Dialog(node,compMgr); 

                return null;
            } 

       }); 

4 :Dialog Template:

Html code 

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

5 :Dialog Component Class:
Java code:

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(){         //listen for dom click event

            public void handleEvent(Event evt)
            {
                ItsNatEvent e = ((ItsNatEvent)evt);
                Object ss = (String)e.getExtraParam("1");//get the parameter 
//                System.out.println(pp.getScriptCode()); 
                System.out.println("---" + ss); 

            } 

        } , false,new CustomParamTransport("1","\"hello\"" 

)); //transfer the parameter
    } 

    public ItsNatComponentManager getItsNatComponentManager()
    {
        return compMgr;
    } 

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

    public Node getNode()
    {
        return root;
    } 

     /** other stuff  */

} 

That’s All, so we have create out custom Dialog component.

 

friendly url :

As I write this article, itsnat find the template by the request parameter itsnat_doc_name,

To implement a friendly url, we need add a global listener to set the value of itsnat_doc_name, and process the request again to find the template in our way:

Java code:

       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 code:

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());
        }
    } 

} 

in above code, we add a listener and  find the template by the parameter “p”, this just show a way how to do it.





Tags: , , ,

分类