Java EE servers are based on the Java™ 2 Platform, Enterprise Edition (J2EE™) and is used widely to provide code portability, reuse across tiers, platform support, scalability and for EJB strengths. Instead these supports are provided by the most of the java EE servers, this article is the place where you can share the Java EE servers used during your project development. I have assessed most of the Java EE servers used by the developers in the below. Kindly choose the Java EE server which you use, besides if you have time share the reason why you choose the particular Java EE server for your project development. Also if your option is others remark your Java EE server in the comments.

Introduction

Whenever I surf the net, I used to ponder whether there is any options that allows the end user to resize the components of  a web application developed in JSF. But in all this failed to discover a component like that. But now Primefaces has got the option to resize any components in JSF. Once again I was impressed at the peculiar features of Primefaces which has a resizable component that has the ability to resize all the components of JSF. Even I tried this out in Richfaces Panel, this worked without any conflicts. In this article I am going to explain how to implement a resizable option for the Richfaces panel and data table columns. This would be helpful to see the long data((ie)Wrapped data) in the column of a data table.

Prerequisites

• IDE – Your favourite IDE
• Tomcat 6.x/Glassfish/Jboss
• JDK 1.5 and above

I assume that you had configured the Primefaces in your favourite IDE and now in this article let us see a sample , how to implement the resizable tag for the Richfaces panel  and the data table column. Fisrt let us create a backing bean class named ResizableBean.

ResizableBean.java

This class contains the actual data for the data table.

package com.shunmuga.primefaces;

import java.util.ArrayList;
import java.util.List;

/**
 *
 * @author shunmuga
 */
public class ResizableBean
{

 private List dataTableBeanList = new ArrayList();

 /**
 * Create new Instance of the class
 */
 public ResizableBean()
 {
 initialzeComponents();
 }

 /**
 * This method is used to populate the required data table
 * data when the constructor is initialized.
 */
 private void initialzeComponents()
 {
  dataTableBeanList.clear();

 DataTableBean dataTableBean = new DataTableBean();
 dataTableBean.setWonders("Machu Picchu");
 dataTableBean.setCountry("Peru");
 dataTableBean.setDateOfConstruction("1460-1470");
 dataTableBean.setImagePath("./image/Machu_Picchu.jpg");
 dataTableBeanList.add(dataTableBean);

 dataTableBean = new DataTableBean();
 dataTableBean.setWonders("Giza Pyramid Complex");
 dataTableBean.setCountry("Egypt");
 dataTableBean.setDateOfConstruction("2584-2561 BC");
 dataTableBean.setImagePath("./image/pyramid.jpg");
 dataTableBeanList.add(dataTableBean);

 dataTableBean = new DataTableBean();
 dataTableBean.setWonders("Taj Mahal");
 dataTableBean.setCountry("Agra,India");
 dataTableBean.setDateOfConstruction("1630 A.D.");
 dataTableBean.setImagePath("./image/Taj_Mahal.jpg");
 dataTableBeanList.add(dataTableBean);

 dataTableBean = new DataTableBean();
 dataTableBean.setWonders("Petra");
 dataTableBean.setCountry("Jordan");
 dataTableBean.setDateOfConstruction("9 B.C. – 40 A.D.");
 dataTableBean.setImagePath("./image/PetraMonastery.jpg");
 dataTableBeanList.add(dataTableBean);

 dataTableBean = new DataTableBean();
 dataTableBean.setWonders("Great Wall of China");
 dataTableBean.setCountry("China");
 dataTableBean.setDateOfConstruction("220 B.C and 1368 – 1644 A.D.");
 dataTableBean.setImagePath("./image/GreatWallNearBeijingWinter.jpg");
 dataTableBeanList.add(dataTableBean);

 dataTableBean = new DataTableBean();
 dataTableBean.setWonders("Christ the Redeemer");
 dataTableBean.setCountry("Brazil");
 dataTableBean.setDateOfConstruction("1931");
 dataTableBean.setImagePath("./image/CorcovadofotoRJ.jpg");
 dataTableBeanList.add(dataTableBean);

 dataTableBean = new DataTableBean();
 dataTableBean.setWonders("Colosseum");
 dataTableBean.setCountry("Rom Italy");
 dataTableBean.setDateOfConstruction("70 – 82 A.D");
 dataTableBean.setImagePath("./image/Colosseum.jpg");
 dataTableBeanList.add(dataTableBean); }

 /**
 * @return the dataTableBeanList
 */
 public List getDataTableBeanList()
 {
 return dataTableBeanList;
 }

 /**
 * @param dataTableBeanList the dataTableBeanList to set
 */
 public void setDataTableBeanList(List dataTableBeanList)
 {
 this.dataTableBeanList = dataTableBeanList;
 }
}

DataTableBean.java class contains the required data to populate the data table which has four columns they are wonder, country, date of construction and the image of the seven wonders.

package com.shunmuga.primefaces;

/**
 *
 * @author shunmuga
 */
public class DataTableBean
{

 public DataTableBean()
 {
 }
 private String wonders;
 private String country;
 private String dateOfConstruction;
 private String imagePath;

 /**
 * @return the country
 */
 public String getCountry()
 {
 return country;
 }

 /**
 * @param country the country to set
 */
 public void setCountry(String country)
 {
 this.country = country;
 }

 /**
 * @return the wonders
 */
 public String getWonders()
 {
 return wonders;
 }

 /**
 * @param wonders the wonders to set
 */
 public void setWonders(String wonders)
 {
 this.wonders = wonders;
 }

 /**
 * @return the dateOfConstruction
 */
 public String getDateOfConstruction()
 {
 return dateOfConstruction;
 }

 /**
 * @param dateOfConstruction the dateOfConstruction to set
 */
 public void setDateOfConstruction(String dateOfConstruction)
 {
 this.dateOfConstruction = dateOfConstruction;
 }

 /**
 * @return the imagePath
 */
 public String getImagePath()
 {
 return imagePath;
 }

 /**
 * @param imagePath the imagePath to set
 */
 public void setImagePath(String imagePath)
 {
 this.imagePath = imagePath;
 }
}

Now the datas are populated in the data table and now let us construct a managed bean for the ResizableBean class in the faces-config.xml

<faces-config version="1.2"
 xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
<managed-bean>
 <description>Managed bean for Resizable jsf components</description>
 <managed-bean-name>ResizableBean</managed-bean-name>
 <managed-bean-class>com.shunmuga.primefaces.ResizableBean</managed-bean-class>
 <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

</faces-config>

And finally we need create a JSP page. Let us name the JSP document as resize.jsp and it contains the following code

<%--
 Document   : resize
 Created on : Nov 28, 2009, 6:29:55 PM
 Author     : shunmuga
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<f:view>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <title>Resize JSF Components</title>
 <p:resources/>
 </head>
 <body>
 <h:form id="resizeComponentPageForm">

 <rich:panel header="New Seven Wonders of the World" style="position:relative; width: 500px;">

 <%-- Resize the panel using following tag --%>

 <p:resizable animate="true" effect="bounceOut"/>

 <%--DataTable contains seven wonders details --%>

 <p:dataTable value="#{DataExporterBean.dataTableBeanList}"
 id="Wonders"
 rows="7"
 var="dataTableBean">

 <%-- wonders column --%>

 <p:column>
 <f:facet name="header">
 <h:outputText value="Wonders" />
 </f:facet>
 <h:outputText value="#{dataTableBean.wonders}" />
 </p:column>

 <%-- country name column --%>

 <p:column>
 <f:facet name="header">
 <h:outputText value="Country" />
 </f:facet>
 <h:outputText value="#{dataTableBean.country}" />
 </p:column>

 <%-- Resize option enable dateOfConstruction column --%>

 <p:column resizable="true">
 <f:facet name="header">
 <h:outputText value="Date OF Construction" />
 </f:facet>
 <h:outputText value="#{dataTableBean.dateOfConstruction}"/>
 </p:column>

 <%-- Resize option enable Wonders image column --%>

 <p:column resizable="true">
 <f:facet name="header">
 <h:outputText value="Image" />
 </f:facet>
 <p:graphicImage value="#{dataTableBean.imagePath}"/>
 </p:column>
 </p:dataTable>

 </rich:panel>
 </h:form>
 </body>
 </html>
</f:view>

By now we had completed the coding part and now let us have a look on the snap shot of our sample resizable application.

First Snap Shot

This is the actual snap of our sample resizable application. If you look the below snap with fixed eyes, you can see an option to resize the richfaces component represented in the right side of the panel margin.

Second Snap shot

This snap shot shows the resized Richfaces panel of our sample application.

Third Snap shot

This snap shows, how the column(the column with the header named “Image”) of the data table can be resized in our application.

I believe this article clearly explains, re sizable functionality of a JSF component. If you find this article is useful to you, Dont forget to leave your valuable comments. Have a joyous day.

Introduction:

JSF (Java Server Faces) is an java based  framework  for developing web application . Also component library can be easily incorporated in to the JSF Application. I have listed the most used components libraries by the developers in the below.

• JBoss Richfaces
• Woodstock
• Icefaces
• MyFaces Tomahawk
• MyFaces Tobaco
• Prime Faces
• WebGalileo Faces
• Open Faces
• Vaadin

But this articles explains the Installation guidelines of Richfaces with JSF in Netbeans 6.x. Additionally learn how to create a hello world application in JSF using Richfaces. I assume that you have the requirements which I had mentioned below

Requirements:

• IDE – Netbeans 6.x
• Tomcat 6.x/Glassfish/Jboss
• JDK 1.5 and above

Configuration Steps:

Configuring Richfaces with JSF application in Netbeans6.x can be accomplished by 4 easy steps they are,

1. Create the web application project
2. Required jars(Library)
3. Deployment descriptor configuration(web.xml)
4. Hello world JSP page

Create the web application project:

First Let us create the web application project in JSF, by clicking the File in the menu and select New Project in the Netbeans6.x, I have stated an image for your clear understandings,

Once this window appears choose web application and click next. Now you will have the window which I had mentioned below

In the preceding window, Let us name and location of the project. Since my article explains the creation of  Hello world Application I have given the Name as HelloWorld and then click next. Now you will have the window which I had mentioned below

In the preceding window, Let us select the server(Your favorite Server) and click next

In the preceding window, Let us select the JavaServerFaces framework from the check box and click finish. So far we had created a JSF web application project in Netbeans6.x and next let us configure the Jar files for our web application.

Required jars(Library)

Click here to download the following required latest richfaces jars

• richfaces-api-3.3.1.GA.jar
• richfaces-impl-3.3.1.GA.jar
• richfaces-ui-3.3.1.GA.jar

Deployment descriptor(DD) configuration(web.xml):

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 <context-param>
 <param-name>com.sun.faces.verifyObjects</param-name>
 <param-value>false</param-value>
 </context-param>
 <context-param>
 <param-name>com.sun.faces.validateXml</param-name>
 <param-value>true</param-value>
 </context-param>
 <context-param>
 <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
 <param-value>client</param-value>
 </context-param>
 <servlet>
 <servlet-name>Faces Servlet</servlet-name>
 <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
 <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
 <servlet-name>Faces Servlet</servlet-name>
 <url-pattern>/faces/*</url-pattern>
 </servlet-mapping>
 <session-config>
 <session-timeout>
 30
 </session-timeout>
 </session-config>
 <welcome-file-list>
 <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>

 <!-- Rich Faces configuration -->

 <!-- Specify the skin name -->
 <context-param>
 <param-name>org.ajax4jsf.SKIN</param-name>
 <param-value>laguna</param-value>
 </context-param>

 <!--Rich faces skin apply for the standard jsf component also-->
 <context-param>
 <param-name>org.richfaces.CONTROL_SKINNING</param-name>
 <param-value>enable</param-value>
 </context-param>

 <filter>
 <display-name>RichFaces Filter</display-name>
 <filter-name>Ajax4jsf</filter-name>
 <filter-class>org.ajax4jsf.Filter</filter-class>
 </filter>

 <filter-mapping>
 <filter-name>Ajax4jsf</filter-name>
 <servlet-name>Faces Servlet</servlet-name>
 <dispatcher>REQUEST</dispatcher>
 <dispatcher>FORWARD</dispatcher>
 <dispatcher>INCLUDE</dispatcher>
 </filter-mapping>

 <!--End of rich Faces configuration -->

</web-app>

Setup process of Primefaces in Netbeans6.x has been completed and now let us create a hello world page using Richfaces UI components. The following code should be conjured to do so,

Hello world JSP page:

<%--
 Document   : helloWorld
 Created on : Nov 22, 2009, 4:07:09 PM
 Author     : shunmuga
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@taglib uri="http://richfaces.org/a4j" prefix="a4j" %>
<%@taglib uri="http://richfaces.org/rich" prefix="rich"%>

<f:view>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>JSP Page</title>
 </head>
 <body>
 <h:form>
 <rich:panel style="position: relative; width: 400px;height: 150px;">
 <f:facet name="header">
 <h:outputText value="Hello world "/>

 </f:facet>
 <h:outputText value="Welcome to rich faces ..."/>
 </rich:panel>
 </h:form>

 </body>
</html>
</f:view>

By invoking the above code, we had created a Hello World demo application which contains a Richfaces panel, Now let us have a look on the snap of our Hello World application.

Screen Shot:

If you find this article is useful to you dont forget to give your valuable comments. Have a joyous day.

Each input dialog should have a default action for good useability.

If the user hit ‘Enter’ then the default action should execute.

Here is my example of a richfaces modal edit dialog for such a requirement …

The dialog have input fields and 3 actions:

• save – is the default action if the user hit ‘Enter‘ anywhere in the formular
• cancel – is the default action if the user hit ‘Esc‘ anywhere in the formular
• reset

<rich:modalPanel id="edit_dialog">

   <a4j:form id="edit_form" ajaxSubmit="true">

     <h:outputLabel value="What's your title:" for="title"/>
     <h:inputText  id="title" value="#{bean.title}"/>
     <h:outputLabel value="What's your name:" for="name"/>
     <h:inputText  id="name" value="#{bean.name}"/>

       ...

     <a4j:commandButton id="save"
          value="Save"
          action="#{save}"
          type="submit"
          oncomplete="if(#{facesContext.maximumSeverity==null})Richfaces.hideModalPanel('edit_dialog')"/>

     <a4j:commandButton id="reset"
          value="Reset"
          action="#{bean.reset}"
          limitToList="true"
          reRender="edit_form"
          ajaxSingle="true"
          type="reset"/>

     <a4j:commandButton id="cancel"
          value="Cancel"
          action="#{bean.cancel}"
          ajaxSingle="true"
          oncomplete="Richfaces.hideModalPanel('edit_dialog')"/>

     <rich:hotKey key="return"
         selector="#edit_form"
         handler="${rich:element('edit_form:save')}.click();event.stopPropagation();event.preventDefault(); return false;"
         disableInInput="false"/>

      <rich:hotKey key="esc"
         selector="#edit_form"
         handler="${rich:element('edit_form:cancel')}.click();event.stopPropagation();event.preventDefault(); return false;"
         disableInInput="false"/>

   </a4j:form>

</rich:modalPanel>

It’s important to define ajaxSubmit=”true” for the form! This avoid “none ajax submit of html formulars”. I will explain this in a later blog

With rich:hotKey I bind 2 key events to the edit formular:

• on ‘enter’ – the handler click the save button
• on ‘esc’ – the handler click the cancel button

Try it

With jQuery it’s easy to focus the first visible input element (textfield, textarea or selectbox) for a rich:modalPanel:

<rich:modalPanel onshow="autofocus('dialog_content')">
  <h:panelGrid id="dialog_content" columns="1" width="100%" cellpadding="0" cellspacing="0">
     <a4j:form ajaxSubmit="true">
       <h:outputLabel value="What's your name:" for="name"/>
       <h:inputText  id="name" value="#{bean.name}"/>
       ...
       <a4j:commandButton id="save" value="Save my name" action="save"/>
     </a4j:form>
  </h:panelGrid>
</rich:modalPanel>

function autofocus(containerId) {
  var element = jQuery(":input:not(:button):visible:enabled:first", '#'+containerId);
  if (element != null) {
    element.focus().select();
  }
}

Introduction

This tutorial shows how to setup Primefaces component suite for a JSF or a Facelets project along with Richfaces in Netbeans6.x. Furthermore, you can learn how to make a hello world application using Primefaces in JSF. First let me give a small intro about Primefaces, which is an open source component suite for Java Server Faces and contains so many obliging features. At first Primefaces is a light weight component that contains more than seventy ajax powered JSF components with rich look and feel. In addition it has TouchFaces module features which is a UI kit used for developing mobile web applications. Also the most important thing is Primefaces is compatable with other components libraries like Richfaces, even the ajax integration part can be attained without any conflicts. Thats ok!! Now let us come to the point this article explains the configuration features of Primefaces with Netbeans6.x.

Prerequisites

• IDE – Netbeans 6.x
• Tomcat 6.x/Glassfish/Jboss
• JDK 1.5 and above

I assume you have all the prerequisites which I had mention above. Now let us move to the Configuration part of primefaces with Netbeans6.x which can be accomplished by five easy steps,

Step1(Setup the project)

In Step1, let us see how to set up a JSF web project in Netbeans6.x. Select File —> Newproject —> Choose category as Java Web and select Web Application in Projects and click next —> Give your desired name for the project and click next —> Choose your server and the JavaEE Version and click next —> Select Java ServerFaces check box for the JSF project or Facelets checkbox for the Facelets project in the Framework. Now we had created a web project and next we can move to the second step.

Step2(Library Configurations)

In step two, Let us see how to configure the required libraries for the Primefaces, Downloading Primefaces binaries can be done by two options. Manual Download(Option1), we need to manually download all the required libraries of Primefaces. Alternatively, you may use Maven if you are a Maven user(Option2), Good news for you because maven itself automatically download the required binaries of Primefaces.

Manual Download(Option1)

Download and ensure that your projects WEB-INF/lib directory contains the below jar files inorder to use Primefaces  library together with Richfaces in a JSF project and for Facelets projects add necessary jar files, the link JSF+Facelets+Richfaces Installation Guide would be helpful to do so. You can also download the latest Primefaces jar files from the PrimeFaces google code project site.

• primefaces-ui-0.9.3.jar
• optimus0.8.0.jar
• facestrace1.1.0.jar
• commons-beanutils.jar
• commons-collections.jar
• commons-digester.jar
• commons-logging.jar
• jsf-api.jar
• jsf-impl.jar
• jstl.jar
• commons-discovery-0.4.jar
• commons-codec-1.4.jar
• slf4j-api-1.5.8.jar
• slf4j-simple-1.5.8.jar
• guice-2.0.jar
• richfaces-api-3.3.1.GA.jar
• richfaces-impl-3.3.1.GA.jar
• richfaces-ui-3.3.1.GA.jar

Note: optimus0.8.0.jar and facestrace1.1.0.jar is requirement optional and it doest not required to make the UI components work.

Maven(Option2)

I am not aware of using maven practically, but theoretically I have passed through maven. I like it because it contains good features for managing the libraries. I got this resource from the download section of Primefaces. The following repository definition should be added in repositories section of pom.xml file .

<repository>
<id>prime-repository</id>
<name>Prime Technology Maven Repository</name>
<url>http://repository.prime.com.tr/</url>
<layout>default</layout>
</repository>

Add the dependency configuration for the user interface components like the below example

<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces-ui</artifactId>
<version>0.9.3</version>
</dependency>

I hope you had configured the libraries either by following option1 or option2. If so stay tuned, now let us move to the next step.

Step3(web.xml configuration)

In step3, let us configure the web.xml for the Primefaces.

<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"></pre>
<context-param>
 <param-name>com.sun.faces.verifyObjects</param-name>
 <param-value>false</param-value>
 </context-param>
 <context-param>
 <param-name>com.sun.faces.validateXml</param-name>
 <param-value>true</param-value>
 </context-param>
 <context-param>
 <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
 <param-value>client</param-value>
 </context-param>

<!--Configuration for Richfaces-->

<filter>
 <display-name>RichFaces Filter</display-name>
 <filter-name>richfaces</filter-name>
 <filter-class>org.ajax4jsf.Filter</filter-class>
 </filter>
 <filter-mapping>
 <filter-name>richfaces</filter-name>
 <servlet-name>Faces Servlet</servlet-name>
 <dispatcher>REQUEST</dispatcher>
 <dispatcher>FORWARD</dispatcher>
 <dispatcher>INCLUDE</dispatcher>
 </filter-mapping>

<!--End of the configuration part for Richfaces-->

servlet>
 <servlet-name>Faces Servlet</servlet-name>
 <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
 <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
 <servlet-name>Faces Servlet</servlet-name>
 <url-pattern>/faces/*</url-pattern>
 </servlet-mapping>
 <context-param>
 <param-name>org.richfaces.SKIN</param-name>
 <param-value>classic</param-value>
 </context-param>

 <!-- Configuration part for the Primefaces-->

 <servlet>
 <servlet-name>Resource Servlet</servlet-name>
 <servlet-class>
 org.primefaces.ui.resource.ResourceServlet
 </servlet-class>
 <load-on-startup>2</load-on-startup>
 </servlet>
 <servlet-mapping>
 <servlet-name>Resource Servlet</servlet-name>
 <url-pattern>/primefaces_resources/*</url-pattern>
 </servlet-mapping>

 <!-- End of the configuration part for the Primefaces-->

<session-config>
 <session-timeout>
 30
 </session-timeout>
 </session-config>
 <welcome-file-list>
 <welcome-file>faces/welcomeJSF.jsp</welcome-file>
 </welcome-file-list>
</web-app>

In the above configuration, Primefaces configuration for the JSF project is specified. If you want to configure Primefaces for the Facelets projects add the Facelets neccesary configuration in the web.xml and also you can see the loading order of servlets is specified. Servlets with lower values are loaded before servlets with higher values. So the servlet(Faces Servlet) that manages the request processing lifecycle for web applications which utilize the JavaServer Faces to construct the user interface is loaded first and the PrimeFaces UI module’s servlet(Resource Servlet) loaded second. Now the web.xml configuration part gets over and let us move to the next step.

Step4(Taglib specifications)

In step4, Let us learn how to specify the taglibs for the Facelets or JSF projects. For Facelets projects, though the Facelets web page are created in the xhtml documents, the taglibs should be specified like the below

<html xmlns:p="http://primefaces.prime.com.tr/ui" />

As you all know for JSF project, the JSF web page are created in the JSP documents, the taglibs should be specified like the below

<%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %>

So far we had completed most of the configurations and only one more step is there to finish the set up process of Primefaces in Netbeans6.x.

Step5(Resources Components)

The resource components should be added between the head tag of the page, inorder to include the css and script resources.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<p:resources/>
</head>

Setup process of Primefaces in Netbeans6.x has been completed and now let us create a hello world page using Primefaces UI components. The following code should be conjured to do so,

<%@page contentType="text/html" pageEncoding="UTF-8"%>

 <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
 <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
 <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
 <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
 <%@ taglib uri="http://primefaces.prime.com.tr/ui" prefix="p" %>

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

 <f:view>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <title>Hello World</title>
 <p:resources/>
 </head>
 <body>
 <h:form id="helloWorldPageForm">
 <p:panel id="primefacesPanel" header="Hello World"
 footer="Footer"
 style="position: relative; width: 500px; " >
 <h:outputText value="Primefaces is great. My first application using Primefaces"/>
 </p:panel>
 </h:form>
 </body>
 </html>
 </f:view>

By invoking the above code, we had created a Hello World demo application which contains a Primefaces panel, You can also use Richfaces components together with the Primefaces components. I am sure you dont believe, Even the ajax integration part between these libraries works well have a try on it. Now let us have a look on the snap of our Hello World application.

Hello World Application’s Demo Snap

Thatsall folks. I hope this article clearly explains the Setup of Primefaces in a JSF or Facelets projects along with Richfaces library in Netbeans6.x. If you find this article is quite useful, Dont forget to share with me by your valuable comments. Have a joyous code day.

If you want disable the Backspace key in your JSF Richfaces application put this in your view:

<rich:hotKey key="backspace" handler="return false;" disableInInput="true"/>

This will register a jQuery Hotkey handler for the document. The handler is not reqistered for input elements because in input fields you need the backspace . Tested for FF3 and IE6.

Then I found out that the following snippet doesn’t work:

<rich:hotKey key="backspace"
             disableInInput="true"
             handler="alert('Backspace is disabled'); return false;" />

The Browser open the alert box and go to the previous page (in background?!). But there is a fix for that:

<rich:hotKey key="backspace"
             disableInInput="true"
             handler="alert('Backspace is disabled'); event.stopPropagation(); event.preventDefault(); return false;" />

The event variable is available in the handler function (see org.richfaces.renderkit.html.HotKeyRenderer method doEncodeEnd).

Introduction

A classified web applications necessitate the use of Cascading Style Sheets(CSS), JavaScript, together with a server-side framework, such as JavaServer Faces(JSF). This article is consecrated for the peoples who wants to use facelets as an alternative view technology for building JSF applications. This article is splitted in to two-part series, Here you will find out how to make a complete Layout in JSF using facelets. In addition, learn how to include the pages dynamically, so that you can make use of serveral JSF forms more dynamic. Before starting this tutorial, first you need to create and configure facelets for your a web application project, the following link Facelet installation would be helpful to configure the facelets for your project.

Part1 - How to make Layouts in Facelets

After creating and installing facelets prerequisite for your project. Lets move to the part1 where you will learn to make template in facelets. As you all know, you can create a web page template for facelets in xhtml documents. This demo application is constructed by the following templates.

1. layout.xhtml
2. layout-Client.xhtml
3. header.xhtml
4. sideBar.xhtml
5. footer.xhtml
6. sample pages like(samplePageOne.xhtml, samplePageTwo.xhtml, samplePage3.xhtml..)

1.Construct layout.xhtml template

First let us construct a layout.xhtml which is the main layout that holds the template styles for the entire application. This mainLayout.xhtml web page contains header, leftColumn, rightColumn, content and footers in a 3 column elastic layout, You can define your own layout, the reason why I have used 3 column elastic layout here is, since the layout widths are defined in ems, elastic layouts allow your page containers to expand depending on the site visitor’s text size preference.

layout.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <link href="./css/default.css" rel="stylesheet" type="text/css" />
 <link href="./css/cssLayout.css" rel="stylesheet" type="text/css" />
 <title>Facelets Template</title>
 <style type="text/css" media="all">
 body
{
 background-color: #2b3a3c;
 color: #2d2e2e;
 font-family: Arial, Helvetica, sans-serif;
 font-size: .8em;
 line-height: 1.2em;
 margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
 padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
 text-align: center; /* Centers the page content container in IE 5 browsers. */
 }
 #outerWrapper
{
 background-color: #fff;
 margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
 text-align: left; /* Redefines the text alignment defined by the body element. */
 width: 80em;
 }
 #outerWrapper #header
{
 background-color: #8ab573;
 border-bottom: solid 1px #628152; /* Sets the bottom border properties for an element using shorthand notation */
 font-size: 1.5em;
 font-weight: bold;
 line-height: 1.7em;
 padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
 }
 #outerWrapper #contentWrapper #rightColumn
{
 background-color: #eef6ed;
 border-left: solid 1px #8ab573; /* Sets the left border properties for an element using shorthand notation */
 float: right;
 padding: 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
 width: 14em;
 height: 200px;
 }
 #outerWrapper #contentWrapper #leftColumn
{
 background-color: #eef6ed;
 border-right: solid 1px #8ab573; /* Sets the right border properties for an element using shorthand notation */
 float: left;
 padding: 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
 width: 14em;
 height: 200px;
 }
 #outerWrapper #contentWrapper #content
{
 margin: 0 16em 0 16em; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
 padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
 }
 #outerWrapper #contentWrapper .clearFloat
{
 clear: both;
 display: block;
 }
 #outerWrapper #footer
{
 background-color: #8ab573;
 border-bottom: solid 1px #628152; /* Sets the bottom border properties for an element using shorthand notation */
 font-size: 1.5em;
 font-weight: bold;
 line-height: 1.7em;
 padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
 }
 </style>
 </head>
 <body>
 <div id="outerWrapper">
     <div id="header">
         <ui:insert name="header"/>
     </div>
     <div id="contentWrapper">
         <div id="rightColumn">
             <ui:insert name="rightColumn"/>
         </div>
         <div id="leftColumn">
             <ui:insert name="leftColumn"/>
         </div>
         <div id="content">
             <ui:insert name="content"/>
         </div>
     <br />
     </div>
         <div id="footer">
             <ui:insert name="footer"/>
         </div>
 </div>
 </body>
</html>

<ui:insertag>- this is a templating tag which is used to declare a named content element to be defined by another Facelet. ui:insert tag can be used effectively with the ui:define tag.

Now the main layout has been constructed, next let us construct a layout-Client.xhml.

2.Construct layout-Client.xhml template

This layout-client.xhml template uses three tags,

<ui:composition> tag – a templating tag that wraps the content of layout.xhml template. Facelets view handler will ignore any content outside the composition tag.

<ui:define> tag -  defines the named content of ui:insert tag in layout.xhtml template

<ui:include> tag – constructed inside the ui:define tag to include the other templates.

layout-Client.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <body>
 <ui:composition template="./layout.xhtml">
     <ui:define name="header">
         <ui:include src="./header.xhtml"/>
     </ui:define>
     <ui:define name="rightColumn">
         Ads here
     </ui:define>
     <ui:define name="leftColumn">
        <ui:include src="./sideBar.xhtml"/>
     </ui:define>
     <ui:define name="content">
         <rich:panel id="contentRichPanel" style="position: relative;">
             <ui:include src="#{PageViewIdGenerator.includedPage}"/>
         </rich:panel>
     </ui:define>
     <ui:define name="footer">
         <ui:include src="./footer.xhtml"/>
     </ui:define>
 </ui:composition>
 </body>
</html>

3.construct header.xhtml

The template header.xhml should be wrapped inside the ui:define tag of layout-Client.xhml template.

header.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <body>
 <h:form method="post">
     <rich:panel style="position: relative;width: auto">
         <h:outputText value="Sample Demo Page"></h:outputText>
     </rich:panel>
 </h:form>
 </body>
</html>

4.Construct sideBar.xhtml

Richfaces component Panel Menu which holds the content page links is used as the side bar. This should be wrapped inside the ui:define tag of  left column or right column(Its up to you) of layout-client.xhtml.

sideBar.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <body>
 <h:form id="sideBarId">
 <!-- Richfaces panel menu -->
     <rich:panelMenu styleClass="panelMenu" mode="none" iconExpandedGroup="disc" iconCollapsedGroup="disc"
      iconExpandedTopGroup="chevronUp" iconGroupTopPosition="right"
      iconCollapsedTopGroup="chevronDown" expandSingle="true">
     <!-- Group1 -->
     <rich:panelMenuGroup id="group1Id" label="Group1">
     <!-- Page1 -->
         <rich:panelMenuItem>
             <h:commandLink id="page1LinkId" value="Page1"
                            action="#{PageViewIdGenerator.sideBarAction}">
             <f:param id="page1ParamId" name="pageViewId" value="Page1"/>
             </h:commandLink>
         </rich:panelMenuItem>
     <!-- Page1 Ends -->
     <!-- Page2 -->
         <rich:panelMenuItem>
              <h:commandLink id="page2LinkId" value="Page2"
                             action="#{PageViewIdGenerator.sideBarAction}">
              <f:param id="page2ParamId" name="pageViewId" value="Page2"/>
              </h:commandLink>
         </rich:panelMenuItem>
     <!-- Page2 Ends -->
     <!-- Page3 -->
         <rich:panelMenuItem>
             <h:commandLink id="page3LinkId" value="Page3"
                            action="#{PageViewIdGenerator.sideBarAction}">
             <f:param id="page3ParamId" name="pageViewId" value="Page3"/>
             </h:commandLink>
         </rich:panelMenuItem>
     <!-- Page3 Ends -->
     <!-- Page4 -->
         <rich:panelMenuItem>
             <h:commandLink id="page4LinkId" value="Page4"
                            action="#{PageViewIdGenerator.sideBarAction}">
             <f:param id="page4ParamId" name="pageViewId" value="Page4"/>
             </h:commandLink>
         </rich:panelMenuItem>
         <!-- Page4 Ends -->
         <!-- Page5 -->
         <rich:panelMenuItem>
             <a4j:commandLink id="page5Linkid" value="Page5"
                              action="#{PageViewIdGenerator.sideBarAction}">
             <f:param id="page5Param" name="pageViewId" value="Page5"/>
             </a4j:commandLink>
         </rich:panelMenuItem>
         <!-- Page5 Ends -->
     </rich:panelMenuGroup>
     <!-- End of Group1 -->
     <!-- Group2 -->
     <rich:panelMenuGroup id="group2Id" label="Group2">
         <!-- define group2 codes here-->
     </rich:panelMenuGroup>
     <!-- End of Group2 -->
     <!-- Group3 -->
     <rich:panelMenuGroup id="group3Id" label="Group3">
         <!-- define group2 codes here-->
     </rich:panelMenuGroup>
     <!-- End of Group3 -->
     </rich:panelMenu>
 </h:form>
 </body>
</html>

5.Construct footer.xhtml

The template footer.xhml should be wrapped inside the ui:define tag of layout-Client.xhml template.

footer.xhml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <body>
 <h:form method="post">
     <rich:panel>
         <h:outputText value="Footer text"/>
     </rich:panel>
 </h:form>
 </body>
</html>

6. Construct sample pages

Create your own required templates which is to be dynamically included in the content of the layout-Client.xhtml template. But now, I have mentioned some sample pages for the reference.

samplePageOne.xhml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <body>
 <h:form>
     <h:outputLabel value="Hello this is Page One"/>
 </h:form>
 </body>
</html>

samplePageTwo.xhml

<?xml version='1.0' encoding='UTF-8' ?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:rich="http://richfaces.org/rich">
 <body>
 <h:form>
     <h:outputLabel value="Hello this is Page Two"/>
 </h:form>
 </body>
 </html>

So far we have created xhtml documents like header, sideBar, rightColumn and the footer which is to be included statically in the layout.xhml web page. Now let us see how the samplePageOne.xhml(Page1) and samplePageTwo.xhtml(Page2) links of sideBar are dynamically included in the content of layout-Client.xhtml.

Part2-Dynamic Include

Dynamic include can be accomplished with use of the f:param tag defined in the sideBar.xhtml, where we can easily find the clicked link of sideBar. So that the page will be dynamically included in the content of layout.xhtml. we need to construct a backing bean and to configure the managed bean in the faces-config.xml to invoke this.

faces-config.xml Configuration

<managed-bean>
 <managed-bean-name>PageViewIdGenerator</managed-bean-name>
 <managed-bean-class>com.layout.PageViewIdGenerator</managed-bean-class>
 <managed-bean-scope>session</managed-bean-scope>
</managed-bean>

The pertinent backing bean code look like,

PageViewIdGenerator.java

package com.layout;

import javax.faces.context.FacesContext;
/**
 * @author giftsam
 */
public class PageViewIdGenerator
{
private String includedPage = "/samplePageTwo.xhtml";

public String sideBarAction()
{
           /**
           * Get the request parameter map from the context, so that we can find which link of the side is clicked
           */
           FacesContext context = FacesContext.getCurrentInstance();
           String selectedPageViewId =
                  context.getExternalContext().getRequestParameterMap().get("pageViewId");

           if (selectedPageViewId.equalsIgnoreCase("page1"))
           {
               includedPage = "/samplePageOne.xhtml";
           }
           else if (selectedPageViewId.equalsIgnoreCase("page2"))
           {
               includedPage = "/samplePageTwo.xhtml";
           }
           else if (selectedPageViewId.equalsIgnoreCase("page3"))
           {
               includedPage = "/samplePageThree.xhtml";
           }
           else if (selectedPageViewId.equalsIgnoreCase("page4"))
           {
               includedPage = "/samplePageFour.xhtml";
           }
     return "";
 }

 /**
 * @return the includedPage
 */
 public String getIncludedPage()
 {
 return includedPage;
 }

 /**
 * @param includedPage the includedPage to set
 */
 public void setIncludedPage(String includedPage)
 {
 this.includedPage = includedPage;
 }
}

Thatsall folks, now we have created a complete demo application, where samplePageOne.xhml and samplePageTwo.xhtml are included dynamically where as xhtml documents like header, leftColumn, rightColumn and the footer are included statically. Here is the snaps of our sample demo application.

Sample Demo Snaps

Snap1 specifies the dynamic include of samplePageOne when the page1 of sideBar is clicked.

Snap2 specifies the dynamic include of samplePageOne when the page2 of sideBar is clicked.

Conclusion

In this article, we have learned how to constuct a complete layout using facelets as a view technology and also we have learned how to include the pages dynamically, so that you can make use of serveral JSF forms more dynamic. If you find this article is useful to you dont forget to share with me by your valuable comments. Have a joyous code day.

Introduction

Installing facelets together with richfaces is very simple. I used to develope web applications with JSF and its libraries like richfaces, Icefaces and so on. But I felt, my application have achieved a greater landmark only after implementing facelets. The reason is, facelets contains obliging features like templating(Similarly like struts), Composition components(Reuse can be achieved), also resolves the mismatch between JSF and JSP technologies(Eg: <jsp:param> tag cannot be used in JSF while using <jsp:include> tag) and so on. This article explains the installation of Richfaces and facelets with JSF.

Prerequisites

• IDE – Netbeans 6.x or Eclipse(Now Netbeans 6.7 provides the feature for creating facelets projects)
• Tomcat 6.x or Glassfish
• JDK 1.5 and above

Installing facelets can be accomplished by four steps in a web application project. If you are the one who use Netbeans 6.7 IDE which provides the features for creating facelet projects kindly skip the below step1 and step3 and just add the richfaces jars specified in the libraries and configure richfaces in web.xml. Others kindly follow the below steps,

Step1

In step1, download and ensure that your projects WEB-INF/lib directory contains the below jar files.

Libraries

• commons-beanutils.jar
• commons-collections.jar
• commons-digester.jar
• commons-logging.jar
• el-ri.jar
• jhighlight-1.0.jar
• jsf-api.jar
• jsf-facelets.jar
• jsf-impl.jar
• jstl.jar
• richfaces-api-3.3.1.GA.jar
• richfaces-impl-3.3.1.GA.jar
• richfaces-ui-3.3.1.GA.jar

Step2

Step2 clearly explains how to configure the web.xml for the facelet projects. Your web.xml file should contains the following configurations for the JSF+Facelets+Richfaces Installations.

web.xml configuration

<?xml version="1.0" encoding="UTF-8"?>

<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<context-param>
<param-name>facelets.DEVELOPMENT</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>facelets.SKIP_COMMENTS</param-name>
<param-value>true</param-value>
</context-param>
<!-- Richfaces Configuration-->
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>wine</param-value>
</context-param>
<context-param>
<param-name>org.ajax4jsf.VIEW_HANDLERS</param-name>
<param-value>com.sun.facelets.FaceletViewHandler</param-value>
</context-param>
<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>

Step3:

Step3 explains the faces-config configurations.

faces-config configuration

<application>
<view-handler>
com.sun.facelets.FaceletViewHandler
</view-handler>
</application>

Now you have completed the installation successfully and next you need create web pages in xhtml documents and you should specify the taglibs in XML namespaces instead of JSP taglibs.

Step4

Create a xhtml document and your web page should contain the taglibs as stated in sample.xhtml, so that you can use the rich faces components together with facelets.

sample.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<body>
<h:form method="post">
<rich:panel>
<h:outputText value="Sample Text"></h:outputText>
</rich:panel>
</h:form>
</body>
</html>

Thatsall folks. I hope this article clearly explains the installation of Facelets and Richfaces with JSF. Some may say, this article is only about installation, but I want to get in to the action!!. Dont worry just follow the link Layouting and Dynamic include in Facelets , which will help you to construct templates and dynamic include using Facelets. If you find this article is quite useful, Dont forget to share with me by your valuable comments. Have a joyous code day.

Introduction:
Rich faces contains so many benificial components which also includes rich:modalpanel. Implementing rich:modalpanel is quite easy by following the document of richfaces. But assume that if the page to be displayed in the modal panel  is bigger that the monitor screen size, definitely the page will be extended over the screen with no scroll bars. The first question comes to the mind is “How could I invoke scroll bars to the modalpanel”. Dont worry it will be touched on soon.

The Trick:

Add the below style in the style class.

<style type="text/css">
.dr-mpnl-pnl {overflow:auto!important}
</style>

Note: Dont forget to define the height of the modal panel.

<h:form id="myForm" >
<a4j:commandButton id="showPanelButton" value="Show Modal Panel"
                   reRender="myForm" styleClass="button" >
<rich:componentControl for="myModalPanel" attachTo="showPanelButton"
                   operation="show" event="onclick"/>
</a4j:commandButton>
<rich:modalPanel id="myModalPanel" height="500" width="500">
<f:facet name="header">
<h:outputText value="My ModalPanel" />
</f:facet>
<jsp:include page="./myBigPage" flush="true"/>
</rich:modalPanel>
</h:form>

By Invoking .dr-mpnl-pnl class in the style class, the styles for the <rich:modalPanel> components are redefined. So now if  the page doesnt fit inside the screen size means, the scroll bars will come automatically. I hope this article would be helpful, if you used “Ajax for JSF” for your development. Have a joyous code day.

Even though at surface JSF may seem easier framework to workwith it is not. After using it for a while a new deveoper may encounter a problem which may seem trivial in other frameworks or servlet/JSP implementation but very difficult to achieve the same result in it.

For example handling UnchekedException at JSP/View layer is very simple like just adding an ErrorPage attribute in JSP or global exception tag in Struts. To do the same in JSF-Facelets we may need to write customActionListener/delegation servlet but these are not standards.

Since JSP servlet development is request/response based to the JSF Event/Component based architecture it is bit difficult to adopt. JSF is similar to Swing so a Swing developer may find it very easy.

Using Facelets as View in JSF application may contribute to further complications to the regular JSP-Struts Developer.

Use RichFaces or MyFaces, as these frameworks provide rich UI components along with AJAX support out of the box developing professional looking application is a breeze.

Uses of Facelets: It provides templating feature simlar to tiles. It is faster than JSP.

We can avoid using JSTL and scriptlets completely in Facelets.

nstead of using c:if use rendered attribute to optionally display a block of html/Facelet code.

To iterate over a list or collection use h:dataTable or h:colum instead of using c:forEach

Unified EL is evaluated at runtime where as JSTL and EL tags are evaluated at compile time.

Writing directly to response stream in JSF

Writing to a response stream directly in JSF is not recommended but there are instances where we need this feature like report generation. If we need to export PDF or any binary files in a JSF application the code would be as below.

public void writeToResponse(String headerType,

ByteArrayOutputStream bos,String reportType) {

FacesContext faces = FacesContext.getCurrentInstance();

HttpServletResponse resp = (HttpServletResponse) faces.getExternalContext().getResponse();

try {

resp.setContentType(headerType);

resp.setHeader(“Content-Disposition”, “inline;filename=” + reportName + “.” + reportType );

bos.writeTo(sos);

sos.flush();

faces.responseComplete();// without this response write error will come

} catch (IOException e) {

e.printStackTrace();

}

}

Exadel’s Richfaces Rich text editor integrates with TinyMCE javascript plugin to provide the rich text editor functions present in any document processing application. However often would be a need where we have to embed source code from a particular programming  language. In order to support embedding code in the richtext editor, the code should be surrounded wuth appropriate “pre” tags with options for the selected programming language. This particular tip explores integrating a SyntaxHighlighter plugin with Richfaces rich text editor, enabling the editor support for source code editing:

1) Download the sources from site.

2) Create a folder under ${contextroot}/js/tinymceplugins/syntaxhighlight and extract all the contents of the downloaded zip/sources here. Remember that the folder name should be ‘tinymceplugin’ as the TinyMCE javascript plugin looks for this folder for additional plugins if configured. Also note that ${contextroot} is your web application context root.

3) The different languages you need to support are present under ${contextroot}/js/tinymceplugins/syntaxhighlight/dialog.htm, where you retain only the relevant ones. For XML/XHTML support, you may need to add 2 additional lines, which would convert the XML tags to respective character equivalents in ${contextroot}/js/tinymceplugins/syntaxhighlight/js/dialog.js

content_text = f.syntaxhl_code.value.replace(/</g,"&lt;");
 content_text = content_text.replace(/>/g,"&gt;");
 textarea_output +=  content_text;

4) Create a properties file rteplugins.properties (name with custom plugins are resolved) with a property containing full path (relative with regard to ${contextroot}) of the editor_plugin.js from the downloaded sources as given below. Remember that property name used here (syntaxhl) is the plugin name used in the richtext editor configuration

syntaxhl=/js/tinymceplugins/syntaxhighlight/editor_plugin.js

5) The richfaces text editor configuration should be modified as below:

<rich:editor id="description" width="750" height="250" value="#{mybackingbean.description}"
 theme="advanced" viewMode="visual"  customPlugins="rteplugins" plugins="media,fullscreen,syntaxhl">
          <f:param name="theme_advanced_buttons1"  value="code,bold,italic,underline,fullscreen,justifyleft,justifycenter,justifyright,
                                    fontselect,fontsizeselect,styleprops,tablecontrols,syntaxhl,
                                    search,replace,selectall,media,forecolor,backcolor,cut,copy,paste"/>
          <f:param name="theme_advanced_toolbar_location" value="top" />
          <f:param name="theme_advanced_toolbar_align" value="left" />
          <f:param name="extended_valid_elements" value="pre[name|class]"/>
 </rich:editor>

Note: parameter ‘extended_valid_elements’ identifies valid tags that can be present in the text in raw HTML form.

Well now you are ready to use the rich text editor to contain code snippets. Lets also try to look at how to view code in highlighted format in the next tip.

Ed Burns beschreibt in seinem Blog wie man in JSF 2 selbst eine ViewExpiredException’s behandeln kann.

Momentan (JSF < 2) kann die Standard-Fehlerbehandlung natürlich auch angepasst werden, z.B. durch Festlegung einer bestimmten Location pro Exception-Typ:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  ...
  <error-page>
    <exception-type>javax.faces.application.ViewExpiredException</exception-type>
    <location>/pages/error/sessionexpired.xhtml</location>
  </error-page>
  ...

In der von Ed vorgestellten Lösung wird ein eigener ViewExpiredExceptionHandler registriert, welcher den ursprünglichen Handler kapselt. In der dort überschriebenen void handle() wir eine ViewExpiredException mit einem Redirect (via Navigation-Handler) auf eine Fehlerseite beantwortet. In der Fehlerseite können Variable, die im Handler gesetzt wurden, für eine sinnvolle Fehlerbeschreibung verwendet werden.

Beim Einsatz von Richfaces kann man diese Art von Fehler auch auf der Clientseite behandeln, beschrieben wird dies im Detail hier. Das Ganze ist mit zwei Erweiterungen machbar:

1. die Funktion für den Client aktivieren

<context-param>
  <param-name>org.ajax4jsf.handleViewExpiredOnClient</param-name>
  <param-value>true</param-value>
</context-param>

2. den Javascript-Code für die Behandlung zur Verfügung stellen:

if (typeof(A4J) !== 'undefined' && typeof(A4J.AJAX) !== 'undefined'){
   // richfaces is available
   A4J.AJAX.onExpired = function(loc,expiredMsg) {
      var confirmMsg = 'Session expired.\n\nReload?';
      if (confirm(confirmMsg)) {
         window.location.reload();
      }
      // return false to inform "link-commands", that the user doesn't want to reload the page
      return false;
   };
};

Today i explain you a cool combination for rich:modalPanel and rich:effect.

In the richfaces forum i found a article about a modalpanel with scriptaculous-effects (“fade-in a modalpanel”). The answer was a link to the official richfaces demo-application (photoalbum). There we can find a login-dialog (svn source) with a “appear-effect”:

<rich:modalPanel id="loginPanel"
onshow="applyModalPanelEffect('loginPanel', appearFunc,{delay: 0.5, afterFinish: function(){$('loginPanelForm:username').focus();}})"
styleClass="login-panel"
showWhenRendered="#{authenticator.loginFailed}"
width="400" height="150" autosized="true">
<f:facet name="header">#{messages['login.login']}</f:facet>
<f:facet name="controls">
<h:panelGroup id="loginPanelHideControl">
<h:graphicImage value="/img/modal/close.png" style="cursor:pointer"
id="loginPanelhidelink" onclick="#{rich:component('loginPanel')}.hide();"/>
</h:panelGroup>
</f:facet>
...
<rich:effect type="Appear" name="appearFunc"/>
...

The javascript method applyModalPanelEffect can be found in the photoalbum.js (svn source):

function applyModalPanelEffect(panelId, effectFunc, params) {
 if (panelId && effectFunc) {
 var modalPanel = $(panelId);
 if (modalPanel && modalPanel.component) {
 var component = modalPanel.component;
 var div = component.getSizedElement();
 Element.hide(div);
effectFunc.call(this, Object.extend({targetId: div.id}, params || {}));}}
}

With this the rich:modalPanel will not shown immediately … it appears This was the “fade-in part”.

I improved the code for the “fade-out part”, first the dialog:

<!-- first the effects -->
<rich:effect type="Appear" name="appearDialog"/>
 <rich:effect type="Fade" name="disappearDialog"/>

<!-- to keep the dialog-code clean -->
<c:set var="closeDialog" value="hideModalPanelWithEffect('myDialog',disappearDialog,{delay:0.1,duration:0.5})"/>

<rich:modalPanel id="myDialog"
 onshow="showModalPanelWithEffect('myDialog',appearDialog,{delay:0.1,duration:0.5})"
 width="610" height="350" minHeight="350" autosized="true" shadowDepth="0">
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/img/modal/close.png" style="cursor:pointer" onclick="#{closeDialog}"/>
</h:panelGroup>
</f:facet>
</rich:modalPanel>

and the javascript:

function applyModalPanelEffect(panelId, effectFunc, params, hide) {
 if (panelId && effectFunc) {
 var modalPanel = $(panelId);
 if (modalPanel && modalPanel.component) {
 var component = modalPanel.component;
 var div = component.getSizedElement();
 if (hide) {
 Element.hide(div);
 }
 effectFunc.call(this, Object.extend( {targetId : div.id}, params || {}));}}
}

function showModalPanelWithEffect(panelId, showEffect, params) {
 applyModalPanelEffect(panelId, showEffect, params, true);
}

function hideModalPanelWithEffect(panelId, hideEffect, params) {
 var _params = params;
_params['afterFinish'] = function(){Richfaces.hideModalPanel(panelId)};
 applyModalPanelEffect(panelId, hideEffect, params, false);
}

Now the dialog call showModalPanelWithEffect to fade-in and hideModalPanelWithEffect to fade-out.

Try it

Vielleicht hat es der ein oder andere schon bemerkt, ich habe mich heute damit rumärgern müssen:

Im Internet Explorer 8 ist es nicht möglich Modale Panels (<rich:modalPanel…/>) zu schließen. Der Fehler, der angezeigt wird, meldet ui.pack.js sei nicht implementiert.

Ein entsprechender JIRA-Artikel wurde angelegt: https://jira.jboss.org/jira/browse/RF-6437

Also, solltet ihr auf den Fehler treffen: Ihr habt ihn nicht verursacht oder einen Fehler gemacht…

It’s very common that in your Seam web-application you will get “HTTP Status 503 – Concurrent call to conversation” error and an exception stacktrace if you in debug-mode.

That can be caused by several reasons, one of them is double click on the ajax-link like <a4j:commandLink action=”#{myAction.action} value=”Simple link”/>
A4J/RichFaces allow the solultion for that problem – you have just to specify eventsQueue attrbute
<a4j:commandLink action=”#{myAction.action} value=”Simple link” eventsQueue=”myQueue” />
In that way even if user will click on that link twice – the events (requests) will be sent only one-by-one

As a side-note it worth also to specify “requestDelay” (specify the time the request will wait in queue before send) and ignoreDupResponses=”true” (A4J will ignore ajax response if another “similar” request is in queue). It’s worth for everyone to read that in RichFaces docs

But, it not always solve your problem – users are unpredicted creatures and they can click on your h:commandLink (which is not ajax and can’t be set to queue) or even on some link which actually triggers an action.  So,  you are still not safe since user have a lot of ways to break your application by click on another element which will trigger action inside current conversation.

Besides the fact that using a4j-queues is a good practice (it improve the overall perfomance of application also) – to be absolutely safe you have to disable ALL THE LINKS in the document or make them inaccessible for the user. And the solution exists, it rather simple but very powerful. So what you have to do – is to show <rich:modalPanel> once user is click on the link (or start ajax request with <a4j:support>) and hide it after ajax-response is complete. For h:commandLink or h:commandButton – you don’t have to worry about hiding it, since once new page will be loaded rich:modalPanel will be disappeared automatically (since it belongs to previous page/DOM-document). Once rich:modalPanel is shown – it makes impossible to use any navigation elements on the page except the elements on that form itself.

You can even automatically enable it for all your ajax-request’s with help of <a4j:status> and “onstart” “onstop” handlers.  In the example below the onRequestStart() function is called by onstart handler of aj4:status component. In the example below

//javascript
var waitDialogShown = false;
var useTimerBeforeShowWaitDialog = true;
var waitDialogTimeout = 50;
var waitDialogTimer;

function showWaitDialog() {
    //avoid attempt to show it if it is already shown
    if (!waitDialogShown) {
        Richfaces.showModalPanel('wait-dialog');
        waitDialogShown = true;
    }
}

function onRequestStart() {
    if (useTimerBeforeShowWaitDialog) {
        waitDialogTimer = setTimeout("showWaitDialog();", waitDialogTimeout);
    } else {
        showWaitDialog();
    }
}
function onRequestEnd() {
    if (waitDialogShown) {
        Richfaces.hideModalPanel('wait-dialog');
        waitDialogShown = false;
    } else if (useTimerBeforeShowWaitDialog && waitDialogTimer) {
        clearTimeout(waitDialogTimer);
    }
}

<a4j:status onstart="onRequestStart()" onstop="onRequestEnd()"/>

<rich:modalPanel id="wait-dialog" resizeable="false" autosized="false" width="200" height="65" moveable="false" shadowOpacity="0">
  <f:facet name="header">One moment please..</f:facet>
  <h:outputText value="Your request is being processed."/>
</rich:modalPanel>

<!-- Your wait dialog can be invisible for the users if you don't want your screen blink with that dialog on each request -->
<rich:modalPanel id="wait-dialog-invisible" resizeable="false" autosized="false"
width="10" height="10" moveable="false" left="-100" top="-100" shadowOpacity="0"/>

And if you don’t want to apply that for every component or want to modify prevention behavior you can do one of the:

1. Explicitly define onclick function of your links/buttons
   <h:commandButton onclick=”onRequestStart();” value=”Button”/>
   for ajax you also have to define oncomplete to hide the modalPanel, otherwise your browser-page will be blocked
   <a4j:commandButton onclick=”onRequestStart();” oncomplete=”onRequestEnd();” value=”Button”/>
2. Define a4j:status with id and forceId=”true” and use status attribute of your ajax components to specify the a4j:status component they will use.
   

   <a4j:status id="waitStatus" forceId="true" onstart="onRequestStart()" onstop="onRequestEnd()"/>
   <a4j:commandLink status="waitStatus"/>

Encontramos uma solução bacana para máscaras em campos com rich faces + ajax4java + jquery.

O problema apareceu porque o uso de javascript “padrão” que estavamos fazendo conflitava com os eventos a4j, ou seja, um campo com máscara não disparava um evento onchange chamando um método no bean.

Segue um breve relato sobre a solução.

Temos que importar dois arquivos JavaScript: o do jquery e do plugin meioMask.  

<script src=“javascripts/jquery.js” type=“text/javascript” charset=“utf-8″></script>         

<script src=“javascripts/jquery.meio.mask.js” type=“text/javascript” charset=“utf-8″></script>

O código abaixo configura as máscaras nos campos no load da página:

            <script type=“text/javascript” >

                  (function($)

                  {

                        // call setMask function on the document.ready event

                        $(function()

                        {

                             $(‘input:text’).setMask();

                        });

                  })(jQuery);

            </script>

Já nas páginas, configuramos a máscara no campo da seguinte forma:

Ex. 1: Máscara de inteiro:

<h:inputText id=“campoUm” value=“#{managedBean.campoUm}” label=“#{rotulo['campo_um']}” alt=“integer” >

      <rich:jQuery selector=“#campoUm” query=“setMask({})” timing=“immediate” />

</h:inputText>

Ex. 2: Máscara de decimal:

<h:inputText id=“campoDois” value=“#{managedBean.campoDois}” label=“#{rotulo['campo_dois']}” alt=“decimal”>

      <rich:jQuery selector=“#campoDois” query=“setMask({})” timing=“immediate” />

      <f:convertNumber groupingUsed=“true” minFractionDigits=“2″ maxFractionDigits=“2″ locale=“pt_br” />

</h:inputText>

Então, no h:inputText configuramos o atributo id com o identificador do componente e o atributo alt com a máscara que queremos utilizar (já definida no js do meioMask).

A tag rich:jQuery é utilizada para “manter” a máscara quando há alguma requisição no servidor.

A tag f:convertNumber é utilizada devido ao “locale” dos decimais, para evitar erros de considerar um número com vírgula decimal sendo uma string, por exemplo.

É somente isto. No caso de um campo com Ajax Suport não pega nada, é só seguir o jogo:

Ex. 3: Ajax suport com validação de length e exibição de modal:

<h:inputText id=“campoTres” value=“#{managedBean.campoTres}” required=“true” label=“#{rotulo['campo_tres']}” alt=“decimal”>

      <rich:jQuery selector=“#campoTres” query=“setMask({})” timing=“immediate” />

      <f:convertNumber groupingUsed=“true” minFractionDigits=“2″ maxFractionDigits=“2″ locale=“pt_br” />

      <a4j:support action=“#{managedBean.metodoUm}” event=“onchange” reRender=“panelUm” oncomplete=“if(#{managedBean.exibirModal}){Richfaces.showModalPanel(‘modalUm’)}” >

       <f:validateLength maximum=“10″ />

</h:inputText>   

Ex. 4: Ajax suport com setPropertyActionListener:

<h:inputText id=“campoQuatro” value=“#{managedBean.campoQuatro}” required=“true” label=“Campo Quatro” alt=“decimal”>

      <rich:jQuery selector=“#campoQuatro” query=“setMask({})” timing=“immediate” />

      <f:convertNumber groupingUsed=“true” minFractionDigits=“2″ maxFractionDigits=“2″ locale=“pt_br” />

      <a4j:support action=“#{managedBean.metodoDois}” event=“onchange” reRender=“panelDois”>

           <f:setPropertyActionListener value=“#{produto}” target=“{managedBean.campoSelecionado}” />

      </a4j:support>

</h:inputText>

O plugin meioMask tem muitas funcionalidades interessantes, permitindo configurar novas máscaras, estender máscaras existentes, etc.

Para maiores detalhes, segue os links:

http://www.meiocodigo.com/projects/meiomask/

http://jquery.com/

Abraços!

Currently I have necessity to build dynamic menu use rich:menu and rich:menuitem. I make simple POJO model class for each menu and menuitem. Of course you can use EntityBean if necessary. Menu is just used for grouping while menuitem, children of menu which has action property that will triger some action when it is clicked.

// Menu model
public class Menu{
private String menuCaption;
private boolean enabled;
// Relation to MenuItem
private List menuItems;

public Menu(String menuCaption, List menuItems, boolean enabled){
this.menuCaption = menuCaption;
this.menuItems = menuItems;
this.enabled = enabled;
}
// don't forget getter and setter
}

// MenuItem Model
public class MenuItem{
private String menuItemCaption;
private String menuItemAction;
private boolean enabled;  

public MenuItem(String menuItemCaption, String menuItemAction, boolean enabled){
this.menuItemCaption = menuItemCaption;
this.menuItemAction = menuItemAction;
this.enabled = enabled;
}
// don't forget getter and setter
}

Here are MenuManagedBean class. Property menuList will be refered in page and make some kind of this representation.
Menu1 Menu2
-MenuItem1 -MenuItem5
-MenuItem2 -MenuItem6
-MenuItem3
-MenuItem4

public class MenuManagedBean{
private List menuList;
public List getMenuList(){
List menuItemList1 = new ArrayList();
MenuItem menuItem1 = new MenuItem("Menu Item1", "#{someManagedBean.someAction}", true);
MenuItem menuItem2 = new MenuItem("Menu Item2", "#{someManagedBean.someAction}", true);
MenuItem menuItem3 = new MenuItem("Menu Item3", "#{someManagedBean.someAction}", true);
MenuItem menuItem4 = new MenuItem("Menu Item4", "#{someManagedBean.someAction}", true);
menuItemList1.add(menuItem1);
menuItemList1.add(menuItem2);
menuItemList1.add(menuItem3);
menuItemList1.add(menuItem4);

List menuItemList2 = new ArrayList();
MenuItem menuItem5 = new MenuItem("Menu Item5", "#{someManagedBean.someAction}", true);
MenuItem menuItem6 = new MenuItem("Menu Item6", "#{someManagedBean.someAction}", true);
menuItemList2.add(menuItem5);
menuItemList2.add(menuItem6);

Menu menu1 = new Menu("Menu1", menuItemList1, true);
Menu menu2 = new Menu("Menu2", menuItemList2, true);

menuList = new ArrayList();
menuList.add(menu1);
menuList.add(menu2);
return menuList;
}
// getter and setter
}

Next is faces page. You can use facelets or jsp page. For your notice we use jstl c:forEach tag for looping menuList in MenuManagedBean. We can not use ui:repeat or a4j:repeat here. They will not work because ui:repeat and a4j:repeat is rendered on runtime. Otherwise c:forEach is compiled before.

Eventhough the faces page will be shown, and every other value attribute appear correctly, the action attribute is not work. When we click a menuitem, rather than call appropriate string action from menuItemAction property of class MenuItem, its try to call menuItemAction method from menuItem managed bean which don’t exist.

<c:forEach var="listMenu" items="#{menuManagedBean.menuList}">
<rich:dropDownMenu disabled="#{!listMenu.enabled}">
<f:facet name="label">
<h:panelGroup>
<h:outputText value="#{listMenu.menuCaption}"/>
</h:panelGroup>
</f:facet>
<c:forEach var="menuItem" items="#{listMenu.menuItemList}">
<%-- The action attribute bellow is not work --%>
<rich:menuItem value="#{menuItem.menuItemCaption}" action="#{menuItem.menuItemAction}" disabled="#{!menuItem.enabled}"/>
</c:forEach>
</rich:dropDownMenu>
</c:forEach>

After some trial and error, I use binding aproach. I add htmlMenuItem property from class org.richfaces.component.html.HtmlMenuItem. This property will be use as binding value in revised MenuManagedBean class bellow.

import org.richfaces.component.html.HtmlMenuItem;
public class MenuItem{
private String menuItemCaption;
private String menuItemAction;
private boolean enabled;
private HtmlMenuItem htmlMenuItem;

public MenuItem(String menuItemCaption, String menuItemAction, boolean enabled){
this.menuItemCaption = menuItemCaption;
this.menuItemAction = menuItemAction;
this.enabled = enabled;
}

// getter setter

}

public class MenuManagedBean{
private List menuList;
public List getMenuList(){
List menuItemList1 = new ArrayList();
MenuItem menuItem1 = new MenuItem("Menu Item1", "#{someManagedBean.someAction}", true);
// make binding
HtmlMenuItem htmlMenuItem = new HtmlMenuItem();
Class[] params = {};
MethodExpression actionExpression = app.getExpressionFactory().createMethodExpression(ctx.getELContext(),
                    menuItem1, String.class, params);
            htmlMenuItem.setActionExpression(actionExpression);
            htmlMenuItem.setDisabled(!menuItem1.getEnabled());
            htmlMenuItem.setValue(menuItem1.getMenuItemUrl());
            menuItem1.setHtmlMenuItem(htmlMenuItem);

MenuItem menuItem2 = new MenuItem("Menu Item2", "#{someManagedBean.someAction}", true);
// make binding same as above
// ...
MenuItem menuItem3 = new MenuItem("Menu Item3", "#{someManagedBean.someAction}", true);
// make binding same as above
// ...

MenuItem menuItem4 = new MenuItem("Menu Item4", "#{someManagedBean.someAction}", true);
// make binding same as above
// ...

menuItemList1.add(menuItem1);
menuItemList1.add(menuItem2);
menuItemList1.add(menuItem3);
menuItemList1.add(menuItem4);

List menuItemList2 = new ArrayList();
MenuItem menuItem5 = new MenuItem("Menu Item5", "#{someManagedBean.someAction}", true);
// make binding same as above
// ...

MenuItem menuItem6 = new MenuItem("Menu Item6", "#{someManagedBean.someAction}", true);
// make binding same as above
// ...

menuItemList2.add(menuItem5);
menuItemList2.add(menuItem6);

Menu menu1 = new Menu("Menu1", menuItemList1, true);
Menu menu2 = new Menu("Menu2", menuItemList2, true);

menuList = new ArrayList();
menuList.add(menu1);
menuList.add(menu2);
return menuList;
}
}

Last step is we use binding attribute to refer every menu and its menu item. Finally, dynamic menu item work as I expect

<c:forEach var="listMenu" items="#{menuManagedBean.menuList}">
<rich:dropDownMenu disabled="#{!listMenu.enabled}">
<f:facet name="label">
<h:panelGroup>
<h:outputText value="#{listMenu.menuCaption}"/>
</h:panelGroup>
</f:facet>
<c:forEach var="menuItem" items="#{listMenu.menuItemList}">
<%-- We make change here -->
<rich:menuItem binding="#{menuItem.htmlMenuItem}"/>
</c:forEach>
</rich:dropDownMenu>
</c:forEach>

Em algumas vezes necessitamos informar ao usuário, ou ao menos, alertá-lo do que está acontecendo, quando fazemos isso utilizando JSF puro ou até mesmo Struts temos o re-trabalho de levar a nossa página para outra e informar o status de uma determinada ação.
Utilizando ferramentas Ajax essas ações são interativas para o usuário, pois não mudam a página e as mantém em um mesmo lugar sem a necessidade de redirecionamento de páginas.
Porém como mostrar ao usuário o que está acontecendo no momento ? De que forma isso pode ser feito ?

Na ótima coleção de componentes do Jboss RichFaces encontramos um componente que resolve os nossos problemas !

O a4j:status !

Como Funciona ?

Sua função é identificar um Evento Ajax seja ele em uma região associada através do atributo “for” pelo ID da região, associar o componente de eventos AJAX (a4j:commandButton, a4j:commandLink) através do atributo “status” associado ao ID do a4j:status, ou simplesmente pegar todos os eventos ajax de uma página.

Como Utilizá-lo ?

Abaixo um exemplo simples do a4j:status associado à um rich:modalPanel, o atributo “onstart” define o que ele deve fazer quando iniciar um evento Ajax, e o evento “onstop” define o que ele deve fazer quando terminar o evento Ajax.

<rich:modalPanel id=“panelStatus” autosized=“true” >  

<h:panelGrid columns=“3″> 

<h:graphicImage url=“pt/imagens/carregando.gif” style=“border:0px”/> 

<h:outputText value=“Carregando…” /> 

<h:graphicImage url=“pt/imagens/img_carregando.gif” style=“border:0px”/> 

</h:panelGrid> 

</rich:modalPanel> 

<a4j:status id=“statusCarregarModalPanel” onstart=“Richfaces.showModalPanel(‘panelStatus’);” onstop=“#{rich:component(‘panelStatus’)}.hide()” >

</a4j:status>

Dessa forma quando ocorrer o evento Ajax ele irá renderizar o ModalPanel:

O a4j:status também captura eventos na página de acordo com a orientação dada a ele, exemplo:

<a4j:region id=“region”>

<a4j:commandButton value=“OK” id=“btnOK” />

</a4j:region>

a4j:status id=“statusSalvandoModalPanel” for=“region” onstart=“Richfaces.showModalPanel(‘panelStatusSalvandoInformacoes’);” onstop=“#{rich:component(‘panelStatusSalvandoInformacoes’)}.hide()” >

</a4j:status>

No caso acima todo e qualquer evento Ajax que ocorrer dentro da região especificada irá iniciar o a4j:status.

Outra forma de inicializar o a4j:status é através do atributo “status” de um determinado componente, incrementando um pouco mais o exemplo acima:

<a4j:region id=“region”>

<a4j:commandButton value=“OK” id=“btnOK” status=“statusSalvandoModalPanel” />

</a4j:region>

<a4j:status id=“statusSalvandoModalPanel” onstart=“Richfaces.showModalPanel(‘panelStatusSalvandoInformacoes’);” onstop=“#{rich:component(‘panelStatusSalvandoInformacoes’)}.hide()” >

</a4j:status>

Dessa forma o a4j:status só irá funcionar se caso algum componente o referenciar.

Bom é isso ai Pessoal !

Até a próxima !

Beim Implementieren einer einfachen CRUD Anwendung mit Hilfe von Richfaces Datatable und ModalPanel bin ich über ein “Problem” mit validierten (leeren) Eingabefeldern gestolpert.

Das Problem ist eigentlich kein richtiges Problem, sondern das Standardverhalten von JSF Unschön wird es wenn man einen rich:modalPanel als Edit-Dialog einsetzt und diesen wiederverwendet.

Der grobe Aufbau:

• eine DataTable zeigt eine Liste von Entities (z.B. mit Hilfe eine DAOs geladen)
• jedes Entity hat eine eindeutige ID (z.B. PrimaryKey aus JPA)
• pro Tabellenzeile gibt es einen “Edit”-CommandLink der eine rich:modalPanel für das Editieren eines Entity öffnet
• vor jedem Edit muss die gewünschte Entity in einen CrudManager (Session-Scoped Bean) gelangen, aus der sich der Edit-Dialog mit Daten versorgen kann und mit dessen Hilfe die eigentliche Edit-Aktion durchgeführt wird

Nun sollen bestimmte Eingabefelder im Edit-Dialog validiert werden (z.B. mit einer @NotEmpty Annotation an den ensprechenden Properties der Entitiy-Klasse). Wenn man nun den Dialog für eine Entity mir der ID ‘1′ öffnet und eine Validierungsfehler auslöst, z.B. durch das Abschicken mit leeren Eingabefeldern, wird dieser Fehler ausgegeben … soweit so gut. Der Dialog kann dann geschlossen werden. Soll nun Entity mit der ID ‘2′ mit dem gleichen Dialog editiert werden, sind die Eingabefelder immer noch leer und nicht wie gewünscht mit den Werten aus Entity-2 gefüllt. Warum?!

Nach einer kurzen Googlesuche landete ich auf der Seite http://wiki.apache.org/myfaces/ClearInputComponents die den Effekt beschreibt. Der Grund für das Verhalten ist die Zwischenspeicherung von “SubmitedValues” in den jeweiligen UIComponents (z.B. h:inputText). Die werden den eigentlichen Modeldaten vorgezogen.

Will man nun einen immer aktuellen Edit-Dialog haben, gibt es verschiedene Möglichkeiten (siehe MyFaces). Ich habe mich für die “radikal einfache” Lösung entschieden … lösche alle Elemente innerhalb des Edit-Dialogs und lasse sie immer neu erzeugen.

Die Entity-Liste besteht aus einer rich:dataTable, pro Zeile ein a4j:commandButton:

<rich:dataTable value="#{tableManager.model}" var="dataItem">

<!-- Edit-Command Column -->
<rich:column sortable="false">
<a4j:commandButton ajaxSingle="true" limitToList="true"
reRender="foobar_editPanel"
oncomplete="Richfaces.showModalPanel('foobar_editPanel')"
 actionListener="#{crudManager.onEdit}">
 <f:attribute name="onEditClearTarget" value="foobar_editPanel"/>
 <f:setPropertyActionListener value="#{dataItem}" target="#{crudManager.currentEntity}" />
</a4j:commandButton>

<!-- more Columns ... -->
</rich:dataTable>

Der tableManager liefert die Entity-Daten, also eine Liste von Entity-Beans, jede Bean hat eine eindeutige ID. Der crudManager enthält stellt die gesamte CRUD Funktionalität zur Verfügung. Für eine Edit muss er mit einer Entity “initialisiert” werden, dies geschieht via f:setPropertyActionListener. Das reRender bewirkt, dass der Edit-Dialog aktuallisiert wird.

Der Edit-Dialog wird mit Hilfe von rich:modalPanel erzeugt (foobar_editPanel) und enthält eine Reihe von h:inputText Elementen. Diese sind wiederum an den crudManager gebunden.

Der Code für das Zurücksetzen der Inputelemente im Edit-Dialog ist ebenfalls im crudManager verborgen und sieht folgendermaßen aus:

public abstract class AbstractCrudManager {

public static final String ONEDIT_ATTRIBUTE_CLEARTARGET = "onEditClearTarget"; //$NON-NLS-1$

/**
 * Event-handler will be triggered on <tt>edit</tt>. This method is used as a
 * {@link ActionListener} and will be called before a <tt>edit-view</tt> is
 * shown. So here we can do some "initializations" for the edit-view, i.e.
 * reset input-fields.
 *
 *
 * This base implementation will call {@link #clearEditTarget(UIComponent)}.
 *
 *
 * @param aEvent
 *          is never <code>null</code>
 */
public void onEdit(final ActionEvent aEvent) {
clearEditTarget(aEvent.getComponent());
 }

/**
 * This method handle a edit-form-clear. Per default the command-button which delegates to the
 * edit-view could have a attribute {@link #ONEDIT_ATTRIBUTE_CLEARTARGET}.
 *
 * @param theSourceComponent
 *          is never <code>null</code>
 */
 protected void clearEditTarget(final UIComponent theSourceComponent) {
 final String onEditTarget = (String) theSourceComponent.getAttributes().get(ONEDIT_ATTRIBUTE_CLEARTARGET);
 if (onEditTarget == null) {
 return;
 }
 final UIComponent editTarget = FacesContext.getCurrentInstance().getViewRoot().findComponent(onEditTarget);
 if (editTarget == null) {
 return;
 }
 editTarget.getChildren().clear();
 }

...

}

Damit ist auch klar was das <f:attribute name=”onEditClearTarget” value=”#{id}_editPanel”/> bewirkt … es definiert die UI-Komponente die vor dem Öffnen des Dialogs zurückgesetzt werden soll.

Damit wird bei jedem Klick auf “Edit” ein Ajax-Request zum Server geschickt, dort wird die aktuelle Entity in den crudManager hinterlegt, es wird onEdit aufgerufen und damit der Inhalt des Edit-Dialogs gelöscht. JSF sorgt dann beim RenderResponse wieder dafür, dass alle UI Componenten korrekt erzeugt werden. Da dann alle Eingabeelement noch vollkommen “neu” sind, zeigen diese auch die Werte aus dem Modell an.

On this blog, I have tried to use myfaces components in richfaces application. Please, check it out.

http://n2.nabble.com/Integrating-Myfaces—Richfaces-f3096871.html

I have put one project named eDesk (jaas) making it open source on sourceforge.net for beginners to download if they want to have a sample application which integrates richfaces and hibernate in spring framework and on tomcat server. It uses firebird database.

eDesk is an open source java assignment submission system.

For linux users, it is also available on that platform for which you will have to email me to punyadotprt@gmail.com.

Here is the link for my project:

http://jaas.sourceforge.net

Any query for help will be highly entertained.

Enjoy while learning!