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?