5 Replies Latest reply on Jan 11, 2008 1:04 PM by Ravi Nallakukkala

    any a4j support for dynamically loading pages

    Ravi Nallakukkala Newbie

      I'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?

        • 1. Re: any a4j support for dynamically loading pages
          Sergey Smirnov Master

          could you localize your problem. What exactly the problem you face with ?

          • 2. Re: any a4j support for dynamically loading pages
            Ravi Nallakukkala Newbie

            Hi SergeySmirnov,

            end goal being, on a user event should be able to display a predefined composition (of components) to a4j:outputpanel

            e.g, Say a table display for a particular entity with its CRUD operations.now upon selecting the edit/delete option, entites edit/delete page should be rendered to the outputpanel.

            I went through the docs & with my debugging, I try to explain it better this time

            This is the section of the page I want to refresh

            <a4j:outputPanel id="contentarea"><!-- no ajax rendered flag -->
             <a4j:include viewId="#{contextTheme.contentArea_component}" />
            </a4j:outputPanel>
            


            my contentArea_component code (rendered conditions are based on user events)
            <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>
            


            this Grid component code(grid.xhtml)
            ....
            
            <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>
            
            

            Please note in my grid.xhtml for the a4j:commandlink i have reRender="contentarea" which is the Id of the output panel.

            Problem:generated HTML code for ajax.submit is

            A4J.AJAX.Submit('_viewRoot','j_id64:j_id66',event,{'parameters':{'selectedTab':'accounts-edit','salesAccountCode':'test','j_id64:j_id66:accountsContentRendered:j_id115':'j_id64:j_id66:accountsContentRendered:j_id115'} ,'actionUrl':'/admin/index.xhtml'} );
            


            as my a4j:commandlink reRender attribute is pointing to a4j:outputpanel's id (contentarea) so I would like the A4J.AJAX.Submit to point to a4j:outputpanel's id, but the generated html code AJAX.submit seems to be pointing to a4j:include's id.

            Why does "A4J.AJAX.Submit" to point to the parent's id (in mycase a4j:include) rather than "reRender" attribute of the component?

            let me know if iam any clear this time?

            • 3. Re: any a4j support for dynamically loading pages
              Christopher Rivera Newbie

              hey i am facing a similiar problem ...
              but i tried to use the Ajax.Updater function of the Prototype Libraries to load JSF Pages into my main page ...

              this works very good in Firefox unfortunately in IE the CSS Elements are not shown...

              please let me know if you find a solution to that problem ...

              thank you

              • 4. Re: any a4j support for dynamically loading pages
                Ravi Nallakukkala Newbie

                ya would be glad to share the solution if its solved.

                b/t monitoring your discussion thread too ;-)