7 Replies Latest reply on Jun 16, 2009 8:33 AM by nbelaevski

Loading Content from another JSF page into panelGroup

ellisd5 Jun 12, 2009 10:47 AM

Hi all,

I am a Java developer who has been working creating JSF framework UI's for past 3 years. My contract has just finished so I am getting the chance to have a look a some technoligies. I have come across RichFaces, which I have never heard of before and I have to say, the small amount I have seen of it looks pretty awesome.

A common thing I used to do is have a seperate JSF file which would display a dataTable. That JSF file would get loaded into a DIV when I made a AJAX call to that JSF file. So I'm trying to recreate that functionality with RichFaces and I just can't get it to work, I have been reading documents and googling, I see others have had this problem but I cant find the sollution. So this is my code, index.jsp...

<f:view>
<a4j:form id="homeForm">

 <a4j:commandButton action="#{events.search}" value="Do Search..." reRender="eventsDisplay" onclick="this.disabled=true" oncomplete="this.disabled=false" />

 <rich:separator height="10px" lineType="none" />

 <h:panelGroup id="eventsDisplay" >
 ...
 </h:panelGroup>

</a4j:form>
</f:view>

What I was expecting(wanting) to happen is that search() method from the events session bean is called, that runs some code and returns 'events' string. The Navigation in the faces-config.xml says that events.jsp gets loaded. So I would expect the HTML code generated by events.jsp to be loaded into the panelGroup "eventsDisplay". However this is not the case. What happens is events.jsp is loaded but it replaces the whole page and not just loaded into the panel.

Hope this clear what I am trying to achieve, so how do I accomplish this? I have seen a few things in other forums saying to do this...

<a4j:region>
 <h:commandButton value="Do Search..." >
 <a4j:support action="#{events.search}" event="onclick" reRender="eventsDisplay" ajaxSingle="true" />
 </h:commandButton>
</a4j:region>

I dont really know what that code is trying to do but the result is the same as I had before. Could anyone advise on where I am going wrong?, I assume it must be possible. I have looked at the generated code and I see no reference to eventsDisplay in the input buttons onclick code so I am not surprised it is not loading into the panel, but how can I do it?

TIA,
Dale Ellis

1. Re: Loading Content from another JSF page into panelGroup

nbelaevski Jun 12, 2009 11:08 AM (in response to ellisd5)

Hi Dale,

You can use a4j:include: http://livedemo.exadel.com/richfaces-demo/richfaces/include.jsf?c=include&tab=usage
Actions
2. Re: Loading Content from another JSF page into panelGroup

ellisd5 Jun 12, 2009 12:42 PM (in response to ellisd5)
Thanks nbelavski,

Cheers for the link, thats good information. Its not quite what I'm after though, because I wish to keep the commponents on the screen rather than replace them.

So the problem with that link you gave me is that in my example is that I want to submit the navigation in a different view. So I have been playing with it, and Im still stuck :o(

This is my current code...

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>  <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%> <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%> <HTML> <HEAD> <TITLE>Dale Test</TITLE> <LINK REL="stylesheet" HREF="css/main.css" /> </HEAD> <BODY> <f:view> <rich:panel header="Events Search criteria"> <a4j:form> <h:panelGrid columns="3"> <f:facet name="From" /> <rich:calendar /> <f:facet name="To" /> <rich:calendar /> <a4j:commandButton action="#{events.search}" value="Do Search..." reRender="eventsDisplay" onclick="this.disabled=true" oncomplete="this.disabled=false" /> </h:panelGrid> </a4j:form> </rich:panel> <rich:separator height="10px" lineType="none" /> <h:form> <h:panelGroup id="eventsDisplay"> <a4j:include viewId="/events.jsp" /> </h:panelGroup> </h:form> </f:view> </BODY> </HTML>

If I could call the action #{events.search} to perform a search which populates a list then re render the eventsDisplay component then the <a4j:include viewId="/events.jsp" /> should list the correct search results.

The problem though is I remove the action, I assume the eventsDisplay would be re rendered, but the search() method will not of been called, so no search results. If I leave the action "event.search" in the commandButton, its part of a different view and therefore reloads the whole page.

So is there a way around this?

Thanks again,
Dale
Actions
3. Re: Loading Content from another JSF page into panelGroup

nbelaevski Jun 12, 2009 1:35 PM (in response to ellisd5)

You can use viewId="#{bean.viewToShow}" and select which one to use.
Actions
4. Re: Loading Content from another JSF page into panelGroup

ellisd5 Jun 14, 2009 3:38 PM (in response to ellisd5)

Sorry nbelaevski, I still confused, put that viewId bit where? In the a4j:commandButton bit would make sense to load into the specfied view but that doesn't have a viewId attribute.

The include tag already has it but that doesn't help because that requires commandButtons to be inside that view to load into that view.

Hope you can provide so calrity on this, im really struggling to grasp this :o(

Thanks,
Dale
Actions
5. Re: Loading Content from another JSF page into panelGroup

nbelaevski Jun 14, 2009 7:15 PM (in response to ellisd5)

Hi Dale,

Set viewId="#{bean.viewToShow}" at a4j:include and then change value of the expression by action bound to a4j:commandLink and re-render a4j:include.
Actions

6. Re: Loading Content from another JSF page into panelGroup

ellisd5 Jun 16, 2009 5:12 AM (in response to ellisd5)

Sorry I just cant grasp this, cant figure out where your suggesting I put a viewId, I'm going to include all my code then maybe it will be easy to see where I'm going wrong.

I have highlighted bits in red where I am havin the problem. The action button in index.jsp is supposed to load event.jsp into that area of the screen which I have also highlighted in red but it doesn't work. I also added a button on the events.jsp page to see if it works there (I dont want it there) and it doesn't work there either, that doesn't even seem to call the beans search method!. What have I got to change to get this to work??

TIA,
Dale.

index.jsp

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<!-- RichFaces tag library declaration -->
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

<HTML>
<HEAD>

 <TITLE>Dale Test</TITLE>
 <LINK REL="stylesheet" HREF="css/main.css" />

</HEAD>
<BODY>

 <f:view>

 <rich:panel header="Events Search criteria">
 <a4j:form>
 <h:panelGrid columns="3">

 <f:facet name="From" />
 <rich:calendar />

 <f:facet name="To" />
 <rich:calendar />

 <a4j:commandButton action="#{events.search}" value="Do Search..." onclick="this.disabled=true" oncomplete="this.disabled=false" /> </h:panelGrid>
 </a4j:form>
 </rich:panel>

 <rich:separator height="10px" lineType="none" />

 <h:panelGroup id="eventsDisplay">
 <a4j:include viewId="/events.jsp" />
 </h:panelGroup>


 </f:view>

</BODY>
</HTML>

events.jsp

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<!-- RichFaces tag library declaration -->
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

<f:view>

 <rich:panel header="Events in system" style="width:90%" rendered="#{events.populated}">

 <DIV STYLE="float:left;">

 <a4j:form id="eventsSearchResults">
 <rich:dataTable id="eventsList" rows="2"
 value="#{events.events}" var="event" width="500">

 <h:column>
 <f:facet name="header" >
 <h:outputText value="Id"/>
 </f:facet>
 <h:outputText value="#{event.id}"/>
 </h:column>

 <h:column>
 <f:facet name="header" >
 <h:outputText value="Title"/>
 </f:facet>
 <h:outputText value="#{event.title}"/>
 </h:column>

 <h:column>
 <f:facet name="header" >
 <h:outputText value="Date"/>
 </f:facet>
 <h:outputText value="#{event.date}">
 <f:convertDateTime dateStyle="long" />
 </h:outputText>
 </h:column>

 <h:column>
 <f:facet name="header" >
 <h:outputText value="Participants"/>
 </f:facet>
 <a4j:commandLink action="#{events.retrieveParticipants}" reRender="participantsDisplay">
 <h:outputText value="Show Participants"/>
 </a4j:commandLink>
 </h:column>


 </rich:dataTable>
 <rich:spacer height="30" />
 <DIV style="float:right;">
 <rich:datascroller for="eventsList" />
 </DIV>
 </a4j:form>


 </DIV>
 <DIV STYLE="padding:20px;">

 <h:panelGroup id="participantsDisplay">
 hello
 </h:panelGroup>

 </DIV>

 </rich:panel>

 <h:form>
 <a4j:commandButton action="#{events.search}" value="Do Search..." onclick="this.disabled=true" oncomplete="this.disabled=false" />
 </h:form>

</f:view>

faces-config.xml

<?xml version="1.0"?>
<!DOCTYPE faces-config PUBLIC
 "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
 "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

<faces-config>

 <managed-bean>
 <description>Events bean</description>
 <managed-bean-name>events</managed-bean-name>
 <managed-bean-class>com.dale.web.faces.managedbeans.EventsBean</managed-bean-class>
 <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>

 <!-- Navigations -->
 <navigation-rule>
 <description>From Index page</description>
 <from-view-id>/index.jsp</from-view-id>
 <navigation-case>
 <description>To view events page</description>
 <from-outcome>listevents</from-outcome>
 <to-view-id>/events.jsp</to-view-id>
 </navigation-case>
 </navigation-rule>

 <navigation-rule>
 <description>From Index page</description>
 <from-view-id>/events.jsp</from-view-id>
 <navigation-case>
 <description>To view events page</description>
 <from-outcome>listevents</from-outcome>
 <to-view-id>/events.jsp</to-view-id>
 </navigation-case>
 <navigation-case>
 <description>To view participants page</description>
 <from-outcome>success</from-outcome>
 <to-view-id>/participants.jsp</to-view-id>
 </navigation-case>
 </navigation-rule>

</faces-config>

EventsBean.java

package com.dale.web.faces.managedbeans;

//imports....

public class EventsBean {

 private DataModel events = null;
 private DataModel participants = null;

 public DataModel getEvents() {
 return events;
 }

 public boolean isPopulated() {
 return !(events == null || events.getRowCount() == 0);
 }

 public String search() {
 events = null;
 participants = null;
 events = new ListDataModel();
 events.setWrappedData(retrieveEvents());
 System.out.println("Got "+ events.getRowCount() +" events, returning value 'listevents'");
 return "listevents";
 }

 private List<Event> retrieveEvents() {
 System.out.println("Listing events from DB...");

 Session session = HibernateUtil.getSessionFactory().getCurrentSession();

 session.beginTransaction();

 List<Event> results = session.createQuery("from Event").list();

 session.getTransaction().commit();

 return results;
 }

 // other code...

}

7. Re: Loading Content from another JSF page into panelGroup

nbelaevski Jun 16, 2009 8:33 AM (in response to ellisd5)

Try using f:subview inside of events.jsp.
Actions

Go to original post