UPDATE#1: PortletFaces Bridge webinar scheduled for Thursday, Feb 11 2010 AD.

UPDATE#2: The Alpha1 version of the source will be available in time for the webinar.

I'm working on a new project called the PortletFaces Bridge which will enable the use of JSF 2.0 within Portlet 2.0 compliant portals like Liferay 5.x. The bridge implements a subset of the features available in JSR-329. Although the JSR-329 standard defines an API for a JSF 1.2 + Portlet 2.0 bridge, the PortletFaces Bridge is targeting JSF 2.0. Additionally, the bridge will facilitate usage of ICEfaces 2.0 within Liferay Portal.

Project Status as of January 27, 2010 AD:

• I have a sample JSF 2.0 portlet developed that is using the new PortletFaces Bridge.
• HTTP GET of portal page: bridge runs the portlet RENDER_PHASE, which runs the JSF lifecycle+renderResponse and the portlet renders fine in the browser.
• HTTP POST after clicking h:commandButton: bridge runs the portlet ACTION_PHASE, which runs the JSF lifecycle. It then runs the portlet RENDER_PHASE, which runs the JSF renderResponse and the portlet renders fine in the browser.
• RESOURCES: When using the new JSF 2.0 "resource" mechanism (like for downloading the "jsf.js" JavaScript file), the bridge correctly invokes the portlet RESOURCE_PHASE, which invokes the JSF 2.0 ResourceHandler and the contents of the requested resource are correctly delivered back to the browser.
• AJAX: After tabbing-out of a field, the JSF 2.0 "jsf.js" JavaScript code correctly invokes the portlet RESOURCE_PHASE, which runs the JSF lifecycle+renderResponse, and correctly applies the DOM updates in the browser. Currently it uses the new JSF 2.0 <f:ajax /> tag to do Ajax requests. BTW I had to fix a problem in Mojarra to make this work -- I'm in contact with the Mojarra team and they're working on fixing it for the upcoming 2.0.3 release.
• What's left: There's a bunch of little things -- loose ends that need to be coded up. Stuff like:
  • Testing of ICEfaces 2.0 WITHOUT the <f:ajax /> tag
  • Testing of ICEfaces 2.0 components (compatibility components)
  • Testing of ICEfaces 2.0 Ajax Push
  • After navigation-rules fire, need to compute the next JSF viewId to render
  • Detecting portlet mode changes (VIEW MODE, EDIT MODE, HELP MODE)

The goal is to have an Alpha version ready for use by the time the webinar happens on Thursday, Feb 11 2010 AD. The bridge will be be an open source project and be available for download from the http://www.portletfaces.org website.

I'm pleased to announce that the PortletFaces project has now been formally established and can be found here: http://www.portletfaces.org

An ICEsoft+Mimacom webinar has been scheduled for Thursday October 29, 2009:

4PM - 5PM CET
11AM - 12PM EDT
8AM - 9AM PDT

Here's the registration link: https://www1.gotomeeting.com/register/741441337

I'll be conducting the webinar along with Micha Kiener of Mimacom, sponsor of the Edoras Framework.

The goal the PortletFaces project is to make it easier to develop JSF portlets that run within Liferay Portal. The project contains a wealth of features that expose the standard features of the Portlet 2.0 API and vendor-specific features of Liferay in a way that is natural to JSF development. It also provides improved integration between Liferay and ICEfaces 1.x portlets.

The beginnings of PortletFaces can be traced back to a forum post made by community member Joel Kozikowski back in May of 2007. Joel donated his code to Liferay and we began to work on the project together under Liferay incubation. Since then, PortletFaces has been adopted by Mimacom AG and is a sub-project of the edoras framework.

I'd like to personally thank Joel and the other contributors for their valuable additions to PortletFaces:

• Micha Kiener
• Atul Patel
• Ed Shin
• Stefan Niederhauser

Also my personal thanks to Liferay for sponsoring PortletFaces during incubation, ICEsoft for all the terrific support, and thanks to Mimacom for adopting the project.

Finally, I'd like to thank Triton's Steve Groninga for coming up with the PortletFaces project logo.

Documentation for PortletFaces can be found here: http://www.portletfaces.org/documentation

As part of my work on JSR 314 (JSF 2.0) I've been reviewing the specification, Javadocs, and tag library docs for accuracy. One way I do this is to make examples that test drive what the documentation says JSF 2.0 will do.

In Part 1 of this series, I showed how to develop an Ajaxified JSF 2.0 Facelet Composite Component.

Now here's Part 2 of my JSF 2.0 Test Drive... Developing a Website with Facelets Templating

Facelets Templating

Templating -- what's that? Well templating refers to a technology that you would use to control the layout and content of a website. It's kind of like Liferay Portal's "Layout Template" feature that lets you control how portlets are arranged on the portal page.

The premiere view-handler in JSF 2.0 is Facelets, which provides a powerful templating engine designed especially for JSF. Websites typically have a layout of sections that is common for all pages: header, navigation, main content, and footer. That's where Facelets Templating comes in to save the day.

Downloadable Source Code

The Maven 2 project source code is licensed under the MPL 1.1 and is available at the edoras framework SVN repo:

http://repo.edorasframework.org/svn/examples/trunk/webapps/org.edorasframework.example.facelet.template.jsf.2.0/

Home Page Screen Shot

Here is a screen shot of the home page for the website:

The "Welcome Our Company Website" light-gray rectangle at the top is the "header" of the website. This is kind of like a banner that is to appear at the top of every web page in the site. It typically never changes.

The Home, Products, and Contact Us links are part of the "navigation" for the site. The links typically change a little from page to page in a real world site.

The "Welcome to the HOME page" dark-gray rectangle on the right is the "main" content for each page. This is the content in this part typically changes quite a bit for each page.

The "Copyright" light-gray rectangle on the bottom is the "footer" for the website. Like the header, it typically never changes.

Template Source Markup: template.xhtml

Here is the markup for the template. It's basically a Facelets f:view that specifies an h:panelGroup (renders a <div> layer) for the header, and another for the footer. Note that those sections use the Facelets ui:include tag in order to insert the contents of the header and footer info, which lives in separate XHTML files. In the middle is an h:panelGrid, which renders a two-column HTML <table>. Note the Facelets ui:insert tags -- they are kind of like markers that indicate that something will be inserted at runtime. More on that when we look at the ui:define tags in the Home page. Also, note that the Facelets ui:debug tag is specified in the template -- that's kind of a best practice for helping JSF developers debug the server-side state of things.

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/2002/08/xhtml/xhtml1-transitional.xsd">

  <!-- Enables CTRL+SHIFT+D for activating Facelets debug window -->
  <ui:debug />

  <html>
  <h:head>
    <ui:insert name="htmlHead" />
    <link rel="stylesheet" type="text/css" href="css/template.css" />
  </h:head>
  <h:body>
    <h:panelGroup layout="block" styleClass="header">
      <ui:include src="/WEB-INF/includes/header.xhtml" />
    </h:panelGroup>
    <h:panelGrid columns="2" columnClasses="nav-col, main-col" styleClass="middle-table">
      <h:panelGroup layout="block">
        <h:form>
          <ui:insert name="navigation" />
        </h:form>
      </h:panelGroup>
      <h:panelGroup layout="block">
        <ui:insert name="main" />
      </h:panelGroup>
    </h:panelGrid>
    <h:panelGroup layout="block" styleClass="footer">
      <ui:include src="/WEB-INF/includes/footer.xhtml" />
    </h:panelGroup>
  </h:body>
  </html>
</f:view>

Home Page Source Markup: home.xhtml

Here's the markup for the home page. Note that it's not a Facelets f:view at all -- instead its a ui:composition that specifies template.xhtml as the Facelet template to be used for rendering. The main thing to point out here is that the ui:define tag "defines" the content that is to be inserted into the template via the corresponding ui:insert tag found in the template.

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.w3.org/1999/xhtml http://www.w3.org/2002/08/xhtml/xhtml1-transitional.xsd"
  template="/WEB-INF/includes/template.xhtml">

  <ui:define name="htmlHead">
    <meta name="description" content="Our Company Home Page" />
    <title>Our Company - Home</title>
  </ui:define>

  <ui:define name="navigation">
    <h:outputText styleClass="selected" value="Home" />
    <h:commandLink action="products" value="Products" />
    <h:commandLink action="contact-us" value="Contact Us" />
  </ui:define>

  <ui:define name="main">
    <h:outputText value="Welcome to the HOME page." />
  </ui:define>

</ui:composition>

The remainer of the files (header, footer, products page, contact-us page) are the SVN repos.

Again, hope you enjoyed seeing JSF 2.0 in action! Good stuff ahead!