You are on page 1of 3

How to Use the create(..

) Method
Only one instance of a class that extends VpeTemplate is created. The main task of a create(..) method is to take a JSP source tag and to transform it to a visual representation (HTML) to be then displayed by Mozilla (visual page editor window).

Method Arguments
PageContext SourceNode VisualDocument Contains information about the page The current node which is being transformed from JSP source into HTML Factory which is used for creation of visual tree nodes, similar to IDocument from DOM.

The method returns the required structure of classes needed by the Transformation Engine for the creation of a visual tree in Mozilla and the continuation information for traversing the JSP source tree.

Transformation Example
JSP source page
<html> <head> <title>Show Custom Component</title> <style> .banner { border: 1px solid darkblue; padding: 5px 5px 5px 5px; } </style> </head> <body> <f:view> <tab:tabbedPane rendered="true" styleClass="banner" style=" width : 515px;"> <tab:tab title="Tab1" styleClass="banner" selected="true" /> <tab:tab title="Tab2" styleClass="banner" /> <tab:tab title="Tab3" styleClass="banner" /> <tab:tab title="Tab4" styleClass="banner" /> </tab:tabbedPane> </f:view> </body> </html>

This the tag tree representation for this:

The Transformation Engine starts to traverse the tree. For each node, it finds the corresponding template based on the information in the vpe:template-taglib template tags, for example:
<vpe:template-taglib uri="" prefix="tab"/> and <vpe:tag name="tab:tabbedPane" case-sensitive="yes">

Lets see what happens when the JSP tree is traversed starting with <tab:tabbedPane> tag. When the Transformation Engine reaches <tab:tabbedPane> node, for this node, the engine will be presented with a template class defined in class attribute within the tag.
<vpe:tag name="tab:tabbedPane" case-sensitive="yes"> <vpe:template children="yes" modify="yes" class="com.exadel.vpe.template.example.VpeTabbedPaneTemplate"/> </vpe:tag>

The engine will get the template class and the create(..) method will be invoked. The traversing of the previous tags will result in the following tree:
<html> <head> <title>Show Custom Component</title> <style> .banner { border: 1px solid darkblue; padding: 5px 5px 5px 5px; } </style>

</head> <body> <div> </div> </body> </html>

After the method create(..) has finished executing for the <f:view> tag, the next tag with which the HTML tree creation will proceed will be the DOM node <div>. The create(..) method from VpeTabbedPaneTemplate will create the HTML tree in Mozilla which will correspond to <tab:tabbedPane> tag. In our example, the tree will be:
<table> <tr> <td></td> <td></td> <td></td> <td></td>

</tr> </table>

The number of cells in the table corresponds to the number of <tab:tab> tags in the Source JSP page. The create of all HTML element should be done by using nsIDOMDocument visualDocument, which is passed as an argument to the create(..) method. The information that is returned by the create(..) method is used by Transformation Engine to continue the traverse of the JSP source tree and the creation of a visual tree in Mozilla. The create(..) method is our example will return the following structure of objects:
VpeCreationData(table) VpeChildrenInfo(td,tab:tab) VpeChildrenInfo(td,tab:tab) VpeChildrenInfo(td,tab:tab) VpeChildrenInfo(td,tab:tab)

The above structure is interpreted in the following fashion. From VpeCreationData we get a visual tree node, in our example, <table>. For this tag, a visual node that is received from the VpeChildrenInfo class created by the create(..) method from the <f:view> node is set as a parent node. In this case, the parent node in this case will be <div> in Mozilla. After that based on visual nodes and JSP source nodes received from VpeChildrenInfo, create(..) is invoked for the corresponding template tags. The process continues until create(..) returns an empty instance of VpeCreationData -- in other words, an instance that doesnt contain the VpeChildrenInfo class.