Hobione's Weblog

Living & Breathing in Web 2.0 Era

RichFaces Tabs: switch dynamically

On my application I have bunch of tabs and each tabs has different functionalities. Here is a screen shots.
Tabs

I wanted to click a year from the List tab and do couple things.
1. Pass the project id so JPA do it’s thing
2. Display project details under Detail tab

Step 1: I have set up a tabHome.xhtml where I organize my tabs like a template.


<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                template="/body/facelets/template.xhtml">   

    <ui:define name="body">
        <rich:tabPanel id="tabs" switchType="client" binding="#{controller.tabPanel}" selectedTab="#{controller.selectedTab}">
            <rich:tab id="listTab1" label="List">
                <a4j:include  viewId="/activeProjects.xhtml" />
            </rich:tab>
            <rich:tab id="detailTab2" label="Detail">
                <a4j:include  viewId="/detail.xhtml" />
            </rich:tab>
            <rich:tab id="commentsTab3" label="Comments" >
                Comments.......
            </rich:tab>
            <rich:tab id="searchTab4" label="Search">
                Search.......
            </rich:tab>
            <rich:tab label="Trips">
                Comments.......
            </rich:tab>
            <rich:tab label="Desc">
                Description.......
            </rich:tab>
        </rich:tabPanel>
    </ui:define>
</ui:composition>
In line 10, I have taken advantage of binding attribute which binds to the backing bean. selectedTab attribute defines name of selected tab.

Step 2: Under List tab, I have a include statemement for activeProjects.xhtml


<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich">
    <style>
        .headerBold {font-weight:bold;}
    </style>

    <h:form>
        <rich:datascroller align="left"  for="projectTable" maxPages="20" />
        <rich:spacer height="30px" />
        <rich:scrollableDataTable  id="projectTable" var="project" value="#{controller.projectList}" first="0" rows="20" border="1" frozenColCount="2"  rowKeyVar="rkv" height="375px" width="700px"  sortMode="single" hideWhenScrolling="false" onRowMouseOver="this.style.backgroundColor='#E6E8FA'" onRowMouseOut="this.style.backgroundColor='#FFFFFF'" cellpadding="1" cellspacing="1">                                               

            <rich:column id="fiscalYear" width="35px" align="center">
                <f:facet name="header"><h:outputText styleClass="headerBold" value="FY" /></f:facet>
                <h:commandLink id="link" value="#{project.fy}" actionListener="#{controller.listTab1}" reRender="tabs">
                    <f:param name="projectId" value="#{project.projectId}"/>
                </h:commandLink>
            </rich:column>

            <rich:column id="projectNumber" width="150px">
                <f:facet name="header"><h:outputText styleClass="headerText" value="Project Number" /></f:facet>
                <h:outputText value="#{project.projectNumber}"></h:outputText>
            </rich:column>
            <rich:column id="team" width="30px">
                <f:facet name="header"><h:outputText styleClass="headerText" value="Team" /></f:facet>
                <h:outputText value="#{project.teamRoute}"></h:outputText>
            </rich:column>
            <rich:column id="projStatus" width="50px" sytelClass="rich-sdt">
                <f:facet name="header"><h:outputText styleClass="headerText" value="Proj Status" /></f:facet>
                <h:outputText value="#{project.projStat}"></h:outputText>
            </rich:column>
            <rich:column id="estimated" width="100px">
                <f:facet name="header"><h:outputText styleClass="headerText" value="Estimated" /></f:facet>
                <h:outputText value="#{project.estimatedCompletionDate}"> <f:convertDateTime pattern="mm/dd/yyyy"/></h:outputText>
            </rich:column>
        </rich:scrollableDataTable>
        <rich:spacer height="20px"/>
    </h:form>        

</ui:composition>
Line 18, added actionListener to tie with backing bean.

Step 3: Under Detail tab, I have a include statement for detail.xhtml

Step 4: Backing bean method

//....
private HtmlTabPanel tabPanel;
private String selectedTab;
//....

 public String getSelectedTab() {
        return selectedTab;
    }

public void listTab1(ActionEvent event) {
        Project projectBean = getProjectDetailFromRequestParam();
        this.setProject(projectBean);
        tabPanel.setSelectedTab("detailTab2");
    }

Now, I can click a link from List tab and get the results in the Datail tab.

April 18, 2008 Posted by | Jboss RichFaces (Ajax4JSF) | | 29 Comments

RichFaces: Add desktop-like features to your browser applications

An another great article about RichFaces from Java Guru Joe Sam Shirah.

April 8, 2008 Posted by | Jboss RichFaces (Ajax4JSF) | 1 Comment

RichFaces, JPA trial and error

Issue # 1. I wanted to use RichFaces Modal Panel to pop up a login screen and I got an error. Instead of going to login.xhtml, it was giving me file download error like this.
idmserror.jpg

Solution: In my web.xml file I added <welcome-file>index.xhtml</welcome-file>. I had to change index.xhtml to index.html to make it work. I guess application initialization it does not know what is xhtml. Once application get initialized, then it recognizes the xhtml extension.

Issue with Persistence Model: Exception occured in J2EEC Phase
com.sun.enterprise.deployment.backend.IASDeploymentException: Deployment Error — The persistence-context-ref-name [persistence/LogicalName] in module [C:\buildLocal\WebDMS\build\web] resolves to a persistence unit called [WebDMSModelPU] which is of type RESOURCE_LOCAL. Only persistence units with transaction type JTA can be used as a container managed entity manager. Please verify your application.

Jason: Drop the type=”” (?) decl from your persistence declaration, or change it to JTA
OR stop using injection to get your EntityManager

Jason: <persistence-unit name=”WebDMSModelPU” transaction-type=”JTA”> or <persistence-unit name=”WebDMSModelPU”>
JTA is the default. if you have “RESOURCE_LOCAL”, that tells JPA that you will handle txn mgmt yourself. a container-managed EM can’t work in that… mode

So here is my workable persistence.xml looks like:

<persistence version="1.0" xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_1_0.xsd">
<persistence-unit name="WebDMSModelPU" transaction-type="JTA">
<provider>oracle.toplink.essentials.PersistenceProvider</provider>
<jta-data-source>jdbc/dms</jta-data-source>
<class>webdmsmodel.model.Project</class>
<class>webdmsmodel.model.ProjEpf</class>
<class>webdmsmodel.model.ProjType</class>
</persistence-unit>
</persistence>

More details on this issue: David’s blog, JSF ForumIssue 3: This was very weired. My accordion image was not showing up when I did a hot deployment to the development server from my local machine. But it worked on the local machine.
noimg.jpg
Solution: It worked after spent couple hours. I had to re start our development application server
SJSAS 9.1 UR 1) to see the change.withimg.jpgIssue # 4: Scrollable Data Table wont render data.

<rich:scrollableDataTable  id="projectTable" var="project" value="#{controller.projectList}" first="0" rows="20">

Solution: I was returning a DataModel instead of List. I assume, scrollable data table does not work with DataModel.2 cents from Jason: I’ve never used DataModel, always using a List. Internally, dataTable will convert a List to a ListDataModel, for what that’s worth. Apparently, I lose some things by not using a DataModel, but I’m not sure what that is yet. :)HH: I must say that RichFaces is such a sweet JSF component libraries to work with. Awesome. Full credit goes to Jason Lee, who introduced me with it. I have tried Sun’s Woodstock and few other libraries, but RichFaces has the best documentations, it is very easy to use and more frequently version updates.

March 20, 2008 Posted by | Java Persistence API, Java Server Faces, Jboss RichFaces (Ajax4JSF) | Leave a comment

JavaServer Faces – ICEFaces or RichFaces?

http://forum.java.sun.com/thread.jspa?threadID=5202018

Here what Max Katz’s comments about the thread:
Yes, I saw this thread when it was posted. It’s somewhat of a one-sided comparison.

1) RichFaces offers both, page-wide and component-wide AJAX support.
a4j: tag library gives you page-wide and rich: tag library gives you
component-wide. You have a lot more flexibility with page-wide AJAX
support.

2) RichFaces a4j:push control

> the ICEfaces technology is not shackled to JBoss technology,
This is not true. 90% of the time I’m using RichFaces with just Tomcat
and no other JBoss technologies.

Finally, basic AJAX support in JSF 2.0 (released later this year) will
be more based on RichFaces approach.

Both component libraries are good, my recommendation is, pick one and
stick with it.

JSF AJAX Component Library Feature Matrix *

February 27, 2008 Posted by | Java Server Faces, Jboss RichFaces (Ajax4JSF) | 4 Comments

JSF Drag and Drop (DnD), JBoss Tools 2.0, RichFaces (ajax4jsf):

I chatted with Max Katz, Senior Systems Engineer at Exadel. We have talked about building JSF applications with DnD. JBoss offers JBoss Developer Studio 1.0 or JBoss Tools 2.0. This IDE let you DnD for simple applications but for any complex applications, you have to know manipulate codes. One good thing JBoss Developer Studio/JBoss Tools offers to preview code and it also leverage you to use RichFaces rich components in the IDE (Netbeans does not have a plug-in for RichFaces, no plan in near future). I also asked the differences between IceFaces and RichFaces. To answer to that he said, IceFaces is more proprietary than RichFaces.

HH: How would you compare with Sun’s Woodstock and RichFaces?

MK: In general, RichFaces has been around much longer. This means much
larger user base, more components, more stable, more support and
information available. There are lots of companies that use RichFaces in
production.

HH: How flexible RichFaces 3.1 to work with other component libraries like Trinidad/ADF Faces or Sun’s Woodstock 4.0. In our upcoming project, we need to show Gantt charts, graphs and ADF Faces already has components like that, how easy it would be to bring that component in to RichFaces?

MK: It should work. RichFaces doesn’t do anything *not* to allow you to mix and match other JSF components.
My recommendation is to pick just one library and use it. Mixing and matching component might sound like a great “feature”, but in reality you might create more problems than solutions.

HH: When is the next RichFaces scheduled to release? Any major improvements in the next release?
MK: http://jboss.com/index.html?module=bb&op=viewtopic&t=104575

The main differences between JBoss Developer Studio 1.0 and JBoss Tool 2.0:

JBoss Developer Studio 1.0 is cost $99.00 but with exactly same features JBoss Tool 2.0 is free, imagine that.

RichFaces 3.1 Important Links:

  1. RichFaces home
  2. Forum
  3. Live Demo
  4. Documentations (Great documentation)
  5. JBoss Tool 2.0 start up guide
  6. Why JBoss Developer Studio, and why you should care?

RichFaces Related Links:
Three RIA Tools Examined: JSF, Flex and JavaFX by Max Katz

Example of a JSF + Richfaces application: dVision

Happy Birthday, Ajax4Jsf (RichFaces)

Webnar: (October 30, 2007)

Building Rich Internet Applications with JBoss Rich Faces Webinar with Max Katz Available Online (Red Hat)

Other Links:

Gavin King’s JSF wish list for JEE 6
Adopting a Java Persistence Framework: Which, When, and What?

JSF/Web Tools:

Selenium IDE: Browser compatibility testing.

Selenium Remote Control is a test tool that allows you to write automated web application UI tests in any programming language against any HTTP website using any mainstream JavaScript-enabled browser:

JSFUnit is a test framework for JSF applications:

EasyMock provides Mock Objects for interfaces in JUnit tests by generating them on the fly using Java’s proxy mechanism. Due to EasyMock’s unique style of recording expectations, most refactorings will not affect the Mock Objects. So EasyMock is a perfect fit for Test-Driven Development.

 

Seam Books: Recommended by Gavin King (Founder of Hibernate project and Seam Project Lead).

1. Seam: Simplicity & Beyond with Java EE – Michael Yuan

2. Practical JBoss Seam Project – Jim Farley

3. Beginning JBoss Seam: From Novice to Professional – Joseph Faisal Nusairat

February 26, 2008 Posted by | Java Server Faces, Jboss RichFaces (Ajax4JSF) | 4 Comments

JSF – Richfaces (java.lang.NoClassDefFoundError)

I was getting an error like this even though I had my commons-collections.jar in the class path

java.lang.NoClassDefFoundError: org/apache/commons/collections/map/AbstractHashedMap

Solution: I had to download the new version of the jar file to make it work commons-collections-3.2.jar from apache commons.

December 18, 2007 Posted by | Java Server Faces, Jboss RichFaces (Ajax4JSF) | 1 Comment