This recipe shows how to create a new order list portlet, like the one from Using portlet events in JSF 2, but using components from RichFaces 4.
The following are required for this recipe:
- Apache Maven
- An IDE of your choice
- GateIn-3.2.0.Final-jbossas7-preview
- Order-JSF project from Creating a JSF 2 portlet and Using portlet events in JSF 2
To create a RichFaces portlet for displaying the active orders:
- Inside the project's
pom.xml, add the following dependency management section:<dependencyManagement> <dependencies> <dependency> <groupId>org.richfaces</groupId> <artifactId>richfaces-bom</artifactId> <version>4.2.2.Final</version> <scope>import</scope> <type>pom</type> </dependency> </dependencies> </dependencyManagement>Note
At the time of writing, the latest release of RichFaces 4 for JSF 2 is 4.2.2.Final. Please check http://www.jboss.org/richfaces for the latest available version.
- Inside the project's
pom.xml, add the following dependencies:<dependency> <groupId>org.richfaces.ui</groupId> <artifactId>richfaces-components-ui</artifactId> <exclusions> <exclusion> <groupId>com.google.guava</groupId> <artifactId>guava</artifactId> </exclusion> </exclusions> </dependency> <dependency> <groupId>org.richfaces.core</groupId> <artifactId>richfaces-core-impl</artifactId> <exclusions> <exclusion> <groupId>com.google.guava</groupId> <artifactId>guava</artifactId> </exclusion> </exclusions> </dependency> - Inside the project's
pom.xml, add the following:<build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-war-plugin</artifactId> <configuration> <archive> <manifestEntries> <Dependencies>com.google.guava</Dependencies> </manifestEntries> </archive> </configuration> </plugin> </plugins> </build> - Create
rfOrderList.xhtmlin thesrc/main/webappfolder of the project. - Add the following content into
rfOrderList.xhtml:<f:view 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:rich="http://richfaces.org/rich" xmlns:a4j="http://richfaces.org/a4j"> <h:body> <ui:composition template="/templates/layout.xhtml"> <ui:define name="header"> </ui:define> <ui:define name="content"> <h:outputText value="There are currently no active orders" rendered="#{empty orderList.activeOrders}" /> <rich:dataTable value="#{orderList.activeOrders}" var="ord" rendered="#{not empty orderList.activeOrders}" border="1" style="text-align:center"> <f:facet name="header"> <h:outputText value="Active Orders" /> </f:facet> <rich:column> <f:facet name="header">Order Type</f:facet> #{ord.type} </rich:column> <rich:column> <f:facet name="header">Trade Instruction</f:facet> #{ord.tradeInstruction} </rich:column> <rich:column> <f:facet name="header">Account Number</f:facet> #{ord.accountNumber} </rich:column> <rich:column> <f:facet name="header">Number of Stocks</f:facet> #{ord.numberStocks} </rich:column> <rich:column> <f:facet name="header">Date Entered</f:facet> <h:outputText value="#{ord.entryDate}"> <f:convertDateTime pattern="hh:mm:ssa d-M-yyyy" /> </h:outputText> </rich:column> <rich:column> <f:facet name="header">Status</f:facet> #{ord.status} </rich:column> </rich:dataTable> </ui:define> </ui:composition> </h:body> </f:view> - Add the following into
portlet.xmljust before</portlet-app>:<portlet> <portlet-name>OrderList-RichFaces</portlet-name> <portlet-class>javax.portlet.faces.GenericFacesPortlet</portlet-class> <init-param> <name>javax.portlet.faces.defaultViewId.view</name> <value>/rfOrderList.xhtml</value> </init-param> <init-param> <name>javax.portlet.faces.bridgeEventHandler</name> <value>gatein.cookbook.chapter10.OrderEventHandler</value> </init-param> <supports> <mime-type>text/html</mime-type> <portlet-mode>VIEW</portlet-mode> </supports> <portlet-info> <title>Order List RichFaces Portlet</title> </portlet-info> <supported-processing-event> <qname xmlns:jsf="urn:chapter10:jsf:order:event">jsf:OrderEvent</qname> </supported-processing-event> </portlet> - Run the following command in the root of the project directory to build the web archive:
>mvn clean package - Copy the generated web archive,
chapter10-jsf-1.0.0.SNAPSHOT.war, from thetargetfolder into the deployment folder of where you unpacked the GateIn installation. - Start the server and log on as an administrator.
- Click on the top-menu navigation by following this path: Group | Administration | Application Registry.
- Click on Import Applications to make the new portlet available.
- Access the portal page created in Creating a JSF 2 portlet.
- Click on Site Editor | Edit Page and add the
OrderList-RichFacesportlet to it below theOrderList-JSFportlet. TheOrderList-RichFacesportlet can be found under theChapter10-jsfcategory. - Click on the Finish icon to save the page.
- Enter some data into the form and click on Create Order, and the portal page will redirect you to the Order Success! page while also loading the order into the
OrderList-JSFandOrderList-RichFacesportlets on the page. - The portal page should look like the following screenshot:
Steps 1 and 2 add the dependencies required for RichFaces 4. Step 1 enables Maven to retrieve all the correct versions of dependencies, as they are declared in an artifact that only contains dependency information. Step 2 excludes the guava dependency from the WEB-INF/lib of the build, as it is referenced as a JBoss AS7 manifest dependency in Step 3.
Steps 4 and 5 create the RichFaces page to display the list of orders. The change from Step 5 of the Using portlet events in JSF 2 recipe is switching from <h:dataTable> to <rich:dataTable> and from <h:column> to <rich:column>.
Step 6 defines the new portlet in portlet.xml, specifying the default view to be rfOrderList.xhtml.
Step 16 shows on a single portal page the styling differences, without making additional style modifications, between plain JSF 2 and RichFaces portlets.