Build JSF Portlet with NetBeans Visual Web Pack and NetBeans Portal Pack

In this blog I will explain how  NetBeans 6.0 M10 with Visual Web Pack and Portal Pack 2.0 preview plug-in can be used to develop & deploy JSF Portlet application.

NetBeans Portal Pack : As a plug-in for NetBeans IDE, it provides supports to create JSR-168 portlet. It also supports deployment of portlets on OpenPortal Portlet Container & OpenPortal Portal Server from NetBeans IDE.

NetBeans Visual Web Pack : Using Visual Web Pack user can Drag and drop JavaServer Faces components and design JSF based web application. But currently there is no support for portlet application.

Sun Java Studio Creator 2 : It provides all the functionalities of Visual Web Pack . Also it provides supports for JSF portlet creation through drag and drop of  JSF components.

In future NetBeans Visual Web Pack will be the full replacement for Sun Java Studio Creator and everything supported by Sun Java Studio Creator will be supported by NetBeans with Visual Web Pack.

Currently the JSF Portlet Builder capability is missing in the current version of Visual Web Pack. So for last few days I was trying to make NetBeans Portal Pack and Visual Web Pack working together and provide JSF Portlet Builder functionality through Visual Web Pack and deployment functionalities through NetBeans Portal Pack. Finally I found some manual steps to achieve this functionality and believe me it's worth following those workarounds.

Installation and Configuration Steps :

  1. Download and Install NetBeans 6.0 M10 with Visual Web Pack
  2. Download and Install NetBeans Portal Pack 2.0 preview for NetBeans 6.0 M10 .
  3. Follow the instructions given in   to setup GlassFish Application Server & OpenPortal Portlet Container. No need to install GlassFish App Server separately if you have already installed it during NetBeans IDE installation.
  4. To know how to configure OpenPortal Portlet Container in your NetBeans IDE go through this user guide.
  5. Add Javaee.jar to your run time server instance classpath in NetBeans IDE . This is a one time process which is required for compilation of jsf portlet projects.(But this step will not be required in the future version of the Portal Pack and javaee.jar will be added automatically.) To do this
  • Go to Services > Servers
  • Right click on the "OpenPortal Portlet Container" instance
  • Server Config dialog box opens
  • Click on "Classes" tab for OpenPortal Portlet Container .
  • Add Javaee.jar which can be found at glassfish_home/lib/javaee.jar .
  • Press "Apply" button to save this change
  • Please restart the NetBeans IDE to make sure that server instance classpath is refreshed

Steps To Create JSF Portlet Application :

  • Create a New Web Project. Select "Visual Web JavaServer Faces" framework during project creation to create a JSF based web application. Don't select "Portlet Support" framework during project creation.
  • After the project is created, add "Portlet Support" framework to that project. To do that
    • Right click on the project node
    • Click on Properties > Frameworks
    • Click Add to add "Portlet Support" framework to this web application.
  • Now configure your project to package jsf-portlet.jar into the final war file. Don't add this jar to the project's library or classpath. To set the packaging option
    • Right click on the project node
    • Click on Properties
    • Select "Packaging" under "Build" node.
    • Press "Add File/Folder" button
    • Select downloaded jsf-portlet.jar . Enter "Path In War"  as "WEB-INF/lib" to package and make this jar available during runtime of  this web application.
  • Open web.xml and comment out the following <init-param> section in the  FacesServlet declaration.

  • Notice by default there is a Page1.jsp file created inside that web application.
  • Now open portlet.xml created under WEB-INF folder. Add following xml elemet to your portlet.xml
        <description>JSF Sample Portlet</description>
        <display-name>JSF Sample Portlet</display-name>
              <description>Portlet init view page</description>
              <title>JSF Sample Portlet</title>

   Note that Portlet INIT_VIEW page is set as Page1.jsp . You can set it to any custom page if you want. Now your deployment descriptor is ready for deployment.

  • Now double click on the Page1.jsp to open the jsf visual editor for this jsp.
  • Go to "JSP" mode in that visual editor which shows the code for the jsp.
  • Add <div style="-rave-layout: grid; position: relative; height: 400px;">  element just after <f:view> element as an sub-element of <f:view> . Make sure to end that </div> just before </f:view> in the end. So the JSP code will look like something below. This is required to make sure that all markup of jsp page will be shown inside that portlet window and ignore any absolute location.

                            <div style="-rave-layout: grid; position: relative; height: 400px;">
                            <webuijsf:page binding="#{Page1.page1}" id="page1">


  • Add <webuijsf:themeLinks ajaxify="false" id="theme_1"/> element just after <webuijsf:body> element  but before <webuijsf:form> element as an sub-element of <webuijsf:body> . This  ThemeLinks component is used to create references to theme resources on
    a page in a portlet environment, where the Head component cannot be used. After this change the JSP code will look like below
                <webuijsf:body binding="#{Page1.body1}" id="body1" style="-rave-layout: grid">
                        <webuijsf:themeLinks ajaxify="false" id="theme_1"/>
                        <webuijsf:form binding="#{Page1.form1}" id="form1">


  • Now save that JSP
  • Go to "Design" view
  • Open the Palette for this JSF designer and drag and drop components to the designer to design your JSF page.
  • After you done, save your JSP

To Deploy the Application

  • Select the target run time for this web application as an instance of "OpenPortal Portlet Container"
  • Then right click on the project select "Undeploy and Deploy" to deploy this application as portlet application on OpenPortal Portlet Container.

I usually hate long blogs :) So I am summarizing above contents
  • Download, install and configure all required components
  • Add javaee.jar to server instance classpath which is required for compilation.
  • Create a Visual Web Application
  • Add "Portlet Support" framework
  • Add jsfportlet.jar for packaging
  • Comment out the <init-param> section for FacesServlet in web.xml
  • Add jsf portlet entry to the portlet.xml
  • Add <div> and <webuijsf:themeLinks> tag to jsp code
  • Design using drap & drop support
  • Deploy your application to portlet container.

In case any issue, please leave a comment.



Post a Comment:
  • HTML Syntax: NOT allowed



« July 2016