Question

Would really appreciate some guidance concerning patterns for a Web App using JSF 2.0, PrimeFaces and Ajax. Our current system uses JSPs with standard submits and we have 1 JSP for each functional page in our app. Each JSP calls an action class for logic, navigation and EJB calls. Migrating to JSF using the same set up would be relatively simple i.e. 1 xhtml page and associated backing bean and navigation/logic done via a do method. However we want to submit via Ajax and this causes puzzles in my head. If I load abc1.xhtml and submit with ajax then I stay on abc1.xhtml although I might need to go to abc2.xhtml. I thought about having the associated forms on 1 xhtml page and using the rendered property to decide what to display. This works but I’m not comfortable having lots of forms in 1 page. Ideally I want to keep each page separate but don’t know how this is possible with Ajax. Any ideas would be much appreciated.

Edit – This was original Solution but now has been refined in my answer below. This works but there seems to be issues with the Params. When I click on the AAA or BBB link I need to pass a param so that the ViewController bean knows what was clicked and where to set the Destination page. However if I click the Submit button in AAA.xhtml the content doesn’t change unless I also add <f:param name="tranID" value="AAA"/> to the command button. I’d thought I’d handled a null Param in the ViewController constructor but obviously I’m missing something important. My only thoughts were to do with the URL. When I click the menu link it adds the param on to the url ?tranID=AAA. If I then don’t add the param onto the subsequent submit is this effectively changing the url and causing some sort of mismatch?

viewController.xhtml

<h:body>
    <h:panelGroup layout="block" id="transactionControl">

                    <h4>
                        <h:outputLink id="mfa" value="#{facesContext.externalContext.requestContextPath}/xhtml/viewController.xhtml" styleClass="menuLink">
                            <h:outputText value="AAA"></h:outputText>
                            <f:param name="tranID" value="AAA"/>
                        </h:outputLink>
                    </h4>

                    <h4>
                        <h:outputLink id="inq" value="#{facesContext.externalContext.requestContextPath}/xhtml/viewController.xhtml" styleClass="menuLink">
                            <h:outputText value="BBB"></h:outputText>
                            <f:param name="tranID" value="BBB"/>
                        </h:outputLink>
                    </h4>



    </h:panelGroup>

    <h:panelGroup layout="block" id="content" style="border-style: solid;">

        <ui:include src="#{viewController.destinationPage}.xhtml"></ui:include>

    </h:panelGroup>

</h:body>

AAA.xhtml

<h:body>
    <h:form prependId="false">
        <h:outputText value="Click the button to go to AAB"></h:outputText>

        <p>
            <p:commandButton id="submitButton" value="Go" ajax="true" actionListener="#{viewController.doAAAtoAAB}"
                             process="@form"
                             update="content">
                <f:param name="tranID" value="AAA"/>
            </p:commandButton>
        </p>

    </h:form>

</h:body>

AAB.xhtml

<h:body>
    <h:panelGroup layout="block" id="subContent">
        <h:outputText value="This is the AAB content"></h:outputText>
    </h:panelGroup>
</h:body>

BBB.xhtml and BBC.xhtml as above

ViewController bean

package com.mcpplc.supportclient.webapp.managedBeans;


import javax.faces.context.FacesContext;    
import java.io.Serializable;

@ManagedBean
@ViewScoped
public class ViewController implements Serializable
{
    String destinationPage = "splash";
    FacesContext context;
    String callingTranID;

    public ViewController ()
    {
        context = FacesContext.getCurrentInstance();
        callingTranID = context.getExternalContext().getRequestParameterMap().get("tranID");

        if (callingTranID != null )
        {
            destinationPage = callingTranID;
        }
    }


    public void doAAAtoAAB()
    {
         destinationPage = "AAB";
    }

    public void doBBBtoBBC()
    {
         destinationPage = "BBC";
    }

    public String getDestinationPage()
    {
        return destinationPage;
    }

    public void setDestinationPage( String destinationPage )
    {
        this.destinationPage = destinationPage;
    }
}

Answer 1

Decided to answer my own question as I have now have a full working ajax only prototype app. This fits my initial requirements of having each view saved as one .xhtml page and each view having it’s own backing bean. Instead of further polluting my question here is the simplified code. (Thanks to BalusC for his previous answer that really helped although its now disappeared).

viewController.xhtml

<h:body>
    <h:panelGroup layout="block" id="transactionControl">

                    <h:form>
                <h4>

                    <p:commandLink id="mfa" ajax="true" process="@form" update="content transactionBannerContent" styleClass="menuLink" oncomplete="showTransaction01Screens();">
                        <h:outputText value="MFA"></h:outputText>
                        <f:setPropertyActionListener target="#{viewController.destinationPage}" value="MFA01"/>
                    </p:commandLink>

                </h4>

                <h4>
                    <p:commandLink id="inq" ajax="true" process="@form" update="content transactionBannerContent" styleClass="menuLink" oncomplete="showTransaction01Screens();">
                        <h:outputText value="INQ"></h:outputText>
                        <f:setPropertyActionListener target="#{viewController.destinationPage}" value="INQ01"/>                            
                    </p:commandLink>


                </h4>

            </h:form>



    </h:panelGroup>

    <h:panelGroup layout="block" id="content" style="border-style: solid;">

        <ui:include src="#{viewController.destinationPage}.xhtml"></ui:include>

    </h:panelGroup>

</h:body>

mfa01.xhtml

<h:panelGroup layout="block" id="mfa01">

            <h:form id="mfa01Form">

                <p>
                    <span>
                        <h:outputLabel value="UCN" for="ucn"/>
                        <h:inputText id="ucn" value="#{mfa01BackingBean.mfa01FormVO.ucn}" size="20"/>
                    </span>
                </p>


                <p class="submitButton">
                    <p:commandButton id="submitButton" value="Go" ajax="true" actionListener="#{mfa01BackingBean.doMFA01}" process="@form"
                                     update="content transactionBannerContent" oncomplete="ajaxFinished('MFA01')">
                    </p:commandButton>
                </p>

            </h:form>

        </h:panelGroup>

mfa02.xhtml

<h:panelGroup layout="block" id="mfa02">


            <h:form id="mfa02Form" prependId="true">

                <p>
                    <span style="width:25%">
                        <h:outputLabel value="Vessel Name"/>
                        <h:outputText id="vesselName"
                                     value="#{mfa02BackingBean.mfa02FormVO.vesselName}"/>
                    </span>


                    <span style="width:75%">
                        <h:outputLabel value="ETA"/>
                        <h:outputText id="eta"
                                     value="#{mfa02BackingBean.mfa02FormVO.eta}"/>
                    </span>

                </p>




                <p>
                    <span>
                        <h:outputLabel value="Unit ID" for="unitID"/>
                        <h:inputText id="unitID"
                                     value="#{mfa02BackingBean.mfa02FormVO.unitID}"
                                     size="20"
                                     required="true" validator="#{mfa02BackingBean.validateData}"/>
                    </span>
                </p>


                <p class="submitButton">
                    <p:commandButton id="submitButton" value="Go" ajax="true" action="#{mfa02BackingBean.doMFA02}"
                                     process="@form" update="content transactionBannerContent" oncomplete="ajaxFinished('MFA02')">
                        <f:param name="randomString" value="AAA"/>
                                     </p:commandButton>
                </p>


            </h:form>
        </h:panelGroup>

ViewController.java

package com.mcpplc.supportclient.webapp.managedBeans;


import javax.faces.bean.*;
import java.io.Serializable;

@ManagedBean (name = "viewController")
@SessionScoped
public class ViewController implements Serializable
{
    String destinationPage = "splash";
    String transactionID;


    public String getDestinationPage()
    {
        return destinationPage;
    }

    public void setDestinationPage( String destinationPage )
    {
        this.destinationPage = destinationPage;
        transactionID = destinationPage.toUpperCase();
    }

    public String getTransactionID()
    {
        return transactionID;
    }

    public void setTransactionID( String transactionID )
    {
        this.transactionID = transactionID;
    }
}

mfa01BackingBean.java

package com.mcpplc.supportclient.webapp.managedBeans;

import com.mcpplc.supportclient.webapp.Utils.JSFUtils;
import com.mcpplc.supportclient.webapp.valueObjects.*;

import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;

@ManagedBean
@RequestScoped
public class Mfa01BackingBean
{
    @ManagedProperty(value = "#{viewController}")
    private ViewController viewController;

    private ImportConsignmentVO importConsignmentVO;
    private VoyageVO voyageVO;

    private Mfa01FormVO mfa01FormVO;

    private Mfa02FormVO mfa02FormVO;

    @PostConstruct
    public void init()
    {
        mfa01FormVO = new Mfa01FormVO();
    }

    public void doMFA01()
    {
        //pretend to get VOs
        importConsignmentVO = new ImportConsignmentVO();
        voyageVO = new VoyageVO();

        //set some VO stuff
        if ( mfa01FormVO.getUcn().equalsIgnoreCase( "123" ) )
        {
            importConsignmentVO.setUnitID("AJF1");
            voyageVO.setVesselName("Ever Glade");
        }
        else {
            importConsignmentVO.setUnitID("ZZZ1");
            voyageVO.setVesselName("Ever Champion");
        }
        importConsignmentVO.setType("41G1");
        importConsignmentVO.setWeight("25000");
        voyageVO.setEta("01/01/2011");

        constructMFA02Form();

        viewController.setDestinationPage("mfa02");

    }

    private void constructMFA02Form()
    {
        mfa02FormVO = new Mfa02FormVO();
        mfa02FormVO.setUnitID(importConsignmentVO.getUnitID());
        mfa02FormVO.setType(importConsignmentVO.getType());
        mfa02FormVO.setWeight(importConsignmentVO.getWeight());
        mfa02FormVO.setMfaRef("12345");
        mfa02FormVO.setVesselName(voyageVO.getVesselName());
        mfa02FormVO.setEta(voyageVO.getEta());

        JSFUtils.addObjectToRequest(Mfa02FormVO.class.getName(), mfa02FormVO);
    }

  .....getters&setters

}

mfa02BackingBean.java

package com.mcpplc.supportclient.webapp.managedBeans;

import com.mcpplc.supportclient.webapp.Utils.JSFUtils;
import com.mcpplc.supportclient.webapp.valueObjects.*;

import java.io.Serializable;
import java.util.*;

import javax.annotation.PostConstruct;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.ViewScoped;
import javax.faces.component.UIComponent;
import javax.faces.component.UIInput;
import javax.faces.context.FacesContext;

@ManagedBean
@ViewScoped
public class Mfa02BackingBean implements Serializable
{
    @ManagedProperty(value = "#{viewController}")
    private ViewController viewController;


    private Mfa02FormVO mfa02FormVO;    

    @PostConstruct
    public void init()
    {
       mfa02FormVO = (Mfa02FormVO) JSFUtils.getObjectFromRequest(Mfa02FormVO.class.getName());

    }

    public String doMFA02()
    {
        viewController.setDestinationPage("mfa01");
        return "viewController";
    }


     public void validateData ( FacesContext facesContext, UIComponent uiComponentToValidate, Object value)
    {
        String message = "";
        String requestData = (String) value;
        if ( !requestData.contains( "0" )  )
            {
                ((UIInput )uiComponentToValidate).setValid( false );
                message = "Incorrect format for Unit ID";
                facesContext.addMessage( uiComponentToValidate.getClientId(facesContext), new FacesMessage(message) );
                //JSFUtils.addObjectToRequest(Mfa02FormVO.class.getName(), mfa02FormVO);

            }



    }

.....getters&setters
}

Mfa01FormVO & Mfa02FormVO are just value objects with getters & setters

The main issue I encountered was saving object data between requests. When I go from mfa01 to mfa02 I do a lookup populate some vos and then pass a form vo into the Flash. Mfa02 screen is then constructed with the vo values. The big issue I had was when there was a validation error on mfa02. Initially I had the bean set to requestScoped however I lost the vo object after the validation failed. This was despite me adding the object back into the flash as soon as I got it from the Flash. The strange thing about this though was there was no guarantee when I would lose the object. If I clicked again sometimes I would lose the object straight away but sometimes it would remain for 1 more click and then i’d lose it.

I then changed mfa02backingbean to ViewScoped. However because it’s completely ajax mfa02backingbean was not getting reinitialised on subsequent requests. This meant that whatever I set the values to on the first request would then be displayed forever more. I finally resolved this using ViewScoped and changing the Command Button to use an Action rather than ActionListener and in that method I return “viewController” String. I assume the lifecycle thinks I’m returning to a new view so it clears out anything left in the viewscope.

I hope this code helps anyone else looking for a similar solution.