Dr. Winston Prakash Ph.D. 

Personal Website

How to create Netbeans Visual Web Page Layout Plugin

In my earlier article, Creating a CSS Based Fixed Page Layout, I've shown how to create your own Page Layout. In this article, I'll show how to add your Page Layout as a Netbeans template, so that it would appear in the New Visual Web Page Wizard for you to pick and create your page. We will be creating a plugin, which on installation will add your pre-defined Page Layout to the New Visual Web Page Wizard.  The created plugin will be  similar to the popular Netbeans plugin "Visual Web Page Layouts".

Download: Finished project for this plugin - PageLayoutTemplatePlugin.zip

Creating the Plugin

Creating a Netbeans plugin is extremely easy. It is a matter of few mouse clicks and key strokes. Let us start with creating a plugin project.  Here are the steps

  • Download and install Netbeans 6.0
  • Click on the New Project button in the toolbar.
  • In the New Project dialog select the category Netbeans Module and project type Module.
    Module Project
  • Specify values in the wizard panel fields as
    • Project Name: MyPageLayoutTemplates
    • Code Base Name: com.sample.pagelayouts
    • Module Display Name: My Page Layout Templates
  • Click finish to create the plugin project.

Netbeans creates the skeleton plugin project and loads it in the project explorer. You'd notice, Netbeans has created the several files including the package  com.sample.pagelayouts. Expand this package and you'll see two important files

  • layer.xml - Layer file for the plugin
  • Bundle.properties - Localizing bundle for the contents in the plugin layer 

Adding contents to the plugin 

Next step is to create the Netbeans template from the the Page Layout web page  we created earlier, including JSP, Java and related resources. Let us place our template files in a folder called "resources".

  • Right click on the package com.sample.pagelayouts and select New -> Other -> Folder
    • In the wizard specify the Folder Name as resources
  • Copy the JSP and Java files corresponding to the Page Layout in to this folder and rename the files as
    • PageLayout1.jsp ->PageLayout1.jsp.template
    • PageLayout1.java ->PageLayout1.java.template
      Note: Netbeans may not let you rename in the project view. So try in the Operating System  level.
  • Add the resources used by the Page Layout
    • Zip up the resources used by the Page Layout such as images, CSS and JavaScript files.
      Note: The contents of the zip will be unzipped in to the "resources" folder in the visual web project. My suggestion is to create unique relative folder for the resources to avoid clashing with existing items inside the "resources" folder.
    • Name the zip as PageLayout1-resources.zip

We just copied and renamed the files PageLayout1.jsp.template and PageLayout1.java.template They are not templates yet. Next step is to convert them in to actual templates. Netbeans uses Free Marker  templating Engine.

Converting to template file

Java File:

  • Specify template for "package" statement which is needed only if the template is instantiated under a package. Replace the statement 
    package com.sample.pagelayouts;
    with 
    <#if package?? && package != "">
  package ${package};
</#if>
  • Now, replace the "class" definition with template 
    public class PageLayout1 extends AbstractPageBean {
    with 
    public class ${name} extends AbstractPageBean {
  • Replace the constructor with template
    public PageLayout1() {
    with
    public ${name} () {

JSP File:

The # (pound) symbol is a  predefined special character for FreeMarker templating enginer. So we need to replace all # character with ${pound} template and tell the engine to replace it while instantiating the template. So at the top of the file insert the assignment as

<#assign pound = '#'>
  • Specify template for encoding. Replace
    <?xml version="1.0" encoding="UTF-8"?>
<jsp:directive.page contentType="text/html;charset=UTF-8" 
pageEncoding="UTF-8"/>
    with 
    <?xml version="1.0" encoding="${encoding}"?>
    <jsp:directive.page contentType="text/html;charset=${encoding}" 
				pageEncoding="${encoding}"/>
  • Now replace all component binding with templated binding.
    Note: If you are using NB 6.1 (M1), you need not have to do this part as the bindings are not inserted by default

     Example: Replace
    <webuijsf:page binding="#{PageLayout1.page1}" id="page1">
    with 
    <webuijsf:page binding="${pound}{${folder}${name}.page1}" id="page1">

Adding template information to layer file

Ok, we are ready with the templates. Now we need to put the info about these templates in to the layer file so that they would appear in the New Visual Web Page Wizard. 

<filesystem>
  <folder name="Templates">
    <folder name="PageLayoutTemplates">
      <file name="PageLayout1.jsp" 
            url="/com/sample/pagelayouts/resources/PageLayout1.jsp.template">
        <attr name="SystemFileSystem.localizingBundle" 
              stringvalue="com.sample.pagelayouts.Bundle"/>
        <attr name="name" stringvalue="PageLayout1" />
        <attr name="icon" 
              urlvalue="nbresloc:/com/sample/pagelayouts/resources/
                                                   PageLayout1-icon.jpg" />
        <attr name="previewImage" 
              urlvalue="nbresloc:/com/sample/pagelayouts/resources/
                                                   PageLayout1-preview.jpg" />
       <attr name="resources" 
            urlvalue="nbresloc:/com/sample/pagelayouts/resources/
                                                   PageLayout1-resources.zip" />
       <attr name="position" intvalue="10000"/>
       <attr name="pageLayoutTemplate" boolvalue="true"/>
       <attr name="description" stringvalue="PageLayout1_Desciption"/>
       <attr name="javax.script.ScriptEngine" stringvalue="freemarker"/>
     </file>
     <file name="PageLayout1.java" 
              url="/com/sample/pagelayouts/resources/PageLayout1.java.template">
       <attr name="position" intvalue="20000"/>
      <attr name="javax.script.ScriptEngine" stringvalue="freemarker"/>
     </file>
   </folder> <!-- Page Templates -->
  </folder> <!-- Templates -->
</filesystem>

Couple of things to note in the information we entered above

Folder: Template/PageLayoutTemplates - This is the pre-defined folder where the New Visual Web Page Wizard will look for new templates

File: PageLayout1.jsp (page) & PageLayout1.java (page bean) - These are the two actual templates that will be instantiated by the wizard.

Attributes:

  • icon: The small icon (32x32) that appears besides the name of the template in the list. The localized name will be obtained from the bundle specified via the attribute  SystemFileSystem.localizingBundle
  • previewImage: The large (128x128) icon appears in the preview area of the select template panel
  • resources: Points to the resources zip url that will be unzipped in the "resources" folder of the web application.
  •  pageLayoutTemplate - tells the wizard that this the page template (PageLayout1.java is just the page bean)
  • description:  Description of the Page Layout template. Used as a key to obtain the localized value from the bundle file
  • position: This is used to order the layout in the list. Be diligent about using a value that would not be clashing with Page Layouts provided by others too.
  •  javax.script.ScriptEngine: This is to tell the wizard which scripting engine to be used to instantiate the template.   

Open the bundle file (com.sample.pagelayouts.Bundle.properties) to include the values for the keys we used above
PageLayout1=A simple nice my own Page Layout
PageLayout1_Desciption=Creates page with my own very nice simple Page Layout 

Testing the Plugin

You can test the plugin by directly installing it in the development IDE.

  • Right click on the project node and select "Install/Reload in Development IDE"
  • Create a Visual Web Application
  • Create a new Visual Web page. In the Wizard you should see the Page Layout you added through the plugin as shown below. The created page should look the template you created.

Page Layout In Wizard

Creating the NBM 

Finally, create the NBM to be installed using plugin manager. Right click on the project node and select "Create NBM". The Created NBM is placed in the build folder as com-sample-pagelayouts.nbm