any a4j support for dynamically loading pages
rnallakukkala Jan 10, 2008 12:38 PMI'm fairly new to a4j/jsf, we are using Seam 2.0.0GA & a4j; one of my requirement is to load jsf pages pages dynamically based on the user events.
the approach I took was to divide my page into sections using a4j:outputpanel and had a section called 'contentarea' in which dynamic loading of the pages should happen.
my home page file looks like
<a4j:outputPanel ajaxRendered="true" id="contentarea"> <div id="content"> <a4j:include viewId="#{contextTheme.contentArea_component}" /> </div> </a4j:outputPanel>
my content area code (content-area.xhtml)
<ui:component 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="https://ajax4jsf.dev.java.net/ajax" xmlns:s="http://jboss.com/products/seam/taglib"> <a4j:form> <a4j:include viewId="#{contextTheme.customerGrid_component}" id="customersContentRendered" rendered="#{topNavHandler.isCustomersSelected()}" /> <a4j:include viewId="#{contextTheme.salesAccountGrid_component}" id="accountsContentRendered" rendered="#{topNavHandler.isAccountsSelected()}"/> <a4j:include viewId="#{contextTheme.salesAccountEdit_component}" id="accountsEditContentRendered" rendered="#{topNavHandler.isAccountsEditSelected()}"/> </a4j:form> </ui:component>
and in the accounts grid(accoutns-grid.xhtml)
<s:div 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="https://ajax4jsf.dev.java.net/ajax" xmlns:s="http://jboss.com/products/seam/taglib" xmlns:rich="http://richfaces.org/rich"> <a4j:commandLink reRender="contentarea" action="#{topNavHandler.handle()}"> <a4j:actionparam name="selectedTab" assignTo="#{topNavHandler.selectedTab}" value="accounts-edit"><!-- this will case isAccountEdit to true in content-area.xhtml--></a4j:actionparam> <a4j:actionparam name="salesAccountCode" assignTo="#{salesAccountHome.salesAccountCode}" value="test"></a4j:actionparam> <img src="#{contextTheme.salesAccount_icon32}" title="Edit Sales Account " /> </a4j:commandLink> </s:div>
and my accounts edit page looks like (accounts-edit.xhtml)
<ui:component 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="https://ajax4jsf.dev.java.net/ajax" xmlns:s="http://jboss.com/products/seam/taglib" xmlns:rich="http://richfaces.org/rich"> <s:decorate template="#{contextTheme.editPanel_decorator}"> <ui:define name="addHeader">Create Sales Account</ui:define> <ui:define name="editHeader">Edit Sales Account</ui:define> <ui:define name="addSubhead">Add A New Sales Account</ui:define> <ui:define name="editSubhead">Edit Sales Account #{salesAccount.code}</ui:define> <s:decorate id="code" template="#{contextTheme.editField_decorator}"> <ui:define name="label">Code:</ui:define><br /> <h:inputText value="#{salesAccount.code}" required="true" rendered="#{salesAccountHome.id == null}" title="Insert Sales Account Code"> <a4j:support event="onblur" limitToList="true" reRender="code" bypassUpdates="true"/> </h:inputText> <h:outputText value="#{salesAccount.code}" rendered="#{salesAccountHome.id != null}"/> </s:decorate> <s:decorate id="name" template="#{contextTheme.editField_decorator}"> <ui:define name="label">Name:</ui:define><br /> <h:inputText value="#{salesAccount.name}" required="true" title="Insert Sales Account Name"> <a4j:support event="onblur" reRender="name" /> </h:inputText> </s:decorate> <s:decorate id="description" template="#{contextTheme.editField_decorator}"> <ui:define name="label">Description:</ui:define><br /> <h:inputTextarea value="#{salesAccount.description}" title="Add A Description" required="true" > <a4j:support event="onblur" limitToList="true" reRender="description" bypassUpdates="true"/> </h:inputTextarea> </s:decorate> <ui:define name="panelActions"> <h:commandButton value="h: Submit" action="#{salesAccountHome.persist}" title="Add Sales Account"/> <a4j:commandButton value="a4j Submit" limitToList="true" action="#{salesAccountHome.persist}" title="Add Sales Account"/> </ui:define> </s:decorate> </ui:component>
Code for my topNavHandler
package com.ilipse.pse.crm; import org.jboss.seam.annotations.Name; import org.jboss.seam.annotations.web.RequestParameter; import org.jboss.seam.contexts.Contexts; /** * A Handler implementation for the top navigation * @author Ravi Nallakukkala */ @Name(TopNavHandler.COMPONENT_NAME) public class TopNavHandler { @RequestParameter private String selectedTab; /** component name*/ public static final String COMPONENT_NAME = "topNavHandler"; public void setSelectedTab() { java.lang.System.out.println("#setSelectedTab"); if(selectedTab != null) { Contexts.getSessionContext().set("SELECTED_TAB", getSelectedTab()); } } public String getSelectedTabFromContext() { return (String)Contexts.getSessionContext().get("SELECTED_TAB"); } public void handle(){ java.lang.System.out.println("#handle"); if(selectedTab != null) { setSelectedTab(); } } public void confirmItemCalled(){ java.lang.System.out.println("%%%%%%%%%%%%%%%%%% ITEM INVOKED %%%%%%%%%%%%%"); } public boolean isCustomersTopNavSelected() { java.lang.System.out.println("#isCustomersTopNavSelected"); return isCustomersSelected() || isAccountsSelected() || isChannelsSelected(); } public boolean isCatalogsTopNavSelected() { java.lang.System.out.println("#isCatalogsTopNavSelected"); return isCatalogsSelected() || isFoliosSelected() || isItemsSelected(); } public boolean isDengs() { java.lang.System.out.println("#isDengs"); return "dengs".equals(getSelectedTab()); } public boolean isCustomersSelected() { java.lang.System.out.println("#isCustomersSelected"); return "customers".equals(getSelectedTab()); } public boolean isProgramsSelected() { java.lang.System.out.println("#isProgramsSelected"); return "programs".equals(getSelectedTab()); } public boolean isCatalogsSelected() { java.lang.System.out.println("#isCatalogsSelected"); return "catalogs".equals(getSelectedTab()); } public boolean isAccountsSelected() { java.lang.System.out.println("#isAccountsSelected"); return isAccountsGridSelected() || isAccountsEditSelected() || isAccountsViewSelected(); } public boolean isAccountsGridSelected() { java.lang.System.out.println("#isAccountsGridSelected"); return "accounts-grid".equals(getSelectedTab()); } public boolean isAccountsViewSelected() { java.lang.System.out.println("#isAccountsViewSelected"); return "accounts-view".equals(getSelectedTab()); } public boolean isAccountsEditSelected() { java.lang.System.out.println("#isAccountsEditSelected"); return "accounts-edit".equals(getSelectedTab()); } public boolean isChannelsSelected() { return "channels".equals(getSelectedTab()); } public boolean isGridSelected() { return isChannelsGridSelected() || isAccountsGridSelected(); } public boolean isEditSelected() { return isChannelsEditSelected() || isAccountsEditSelected(); } public boolean isChannelsGridSelected() { return "channels-grid".equals(getSelectedTab()); } public boolean isChannelsViewSelected() { return "channels-view".equals(getSelectedTab()); } public boolean isChannelsEditSelected() { return "channels-edit".equals(getSelectedTab()); } public boolean isFoliosSelected() { java.lang.System.out.println("#isFoliosSelected"); return "folios".equals(getSelectedTab()); } public boolean isItemsSelected() { java.lang.System.out.println("#isItemsSelected"); return "items".equals(getSelectedTab()); } /** * @return the selectedTab */ public String getSelectedTab() { if(selectedTab == null) { return (getSelectedTabFromContext() != null) ? getSelectedTabFromContext() : "customers"; } else { return selectedTab; } } /** * @param selectedTab the selectedTab to set */ public void setSelectedTab(String selectedTab) { java.lang.System.out.println("#setSelectedTab"); this.selectedTab = selectedTab; } }
now , I am able to load the grid page and on a user event on the grid i could load the edit page but in the edit page none of my action are getting invoked (submit, a4j:support validations).
if I dont have my ajaxRendered falg enabled on outputpanel then i couldnt dynamically load any jsf pages.
can someone guide me where iam going wrong? or is there any better way to dynamically load jsf pages using ajax with a4j?