9 Replies Latest reply on Nov 15, 2007 8:44 AM by Michael George

    Rich Faces Drop Down Menu Page Navigation

    Michael George Newbie

      Hi,

      I am using the richFaces dropDownMenu in a Facelets architecture to navigate from one page to another using navigation rules. It works fine when I designate the submitMode to server (default) but when I use ajax it seems to do a double submit or flashes more than once on the page. I don't hear the "click" sound that's typical with a submit so it's going through ajax; but it doesn't appear smooth. I've even tried to add a reRender region so that the menu wouldn't be re-rendered but that didn't work either. Here's a snippet of the code...

      <rich:dropDownMenu submitMode="ajax">
       <rich:menuItem value="new" submitMode="ajax" reRender="bodyPanel" action="goToNewPage"/>
       <rich:menuItem value="open" submitMode="ajax" reRender="bodyPanel" action="goToOpenPage"/>
      </rich:dropDownMenu>


      I am using IE7 on Tomcat 6. Is there an incompatibility issue with IE or Tomcat? Any ideas what could be going wrong here?

      Thanks for your help in advance!

        • 1. Re: Rich Faces Drop Down Menu Page Navigation
          Ilya Shaikovsky Master

          use server mode for navigation.

          Or in ajax mode - your rules should be

          <redirect/>
          


          one in faces config.

          • 2. Re: Rich Faces Drop Down Menu Page Navigation
            Michael George Newbie

            Here is the code I am working with:

            HOME.XHTML:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html 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:c="http://java.sun.com/jstl/core">
            
            <f:loadBundle basename="resources" var="msg" />
            <ui:composition template="/templates/common.xhtml">
             <ui:define name="pageTitle">
             <h:outputText value="#{msg.home_page_title_default}" />
             </ui:define>
             <ui:define name="body">
             <h:panelGrid id="bodySect" columns="1">
             <f:verbatim>
             -- HOME --
             </f:verbatim>
             </h:panelGrid>
             </ui:define>
            </ui:composition>
            </html>


            OPEN.XHTML:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html 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:c="http://java.sun.com/jstl/core">
            
            <f:loadBundle basename="resources" var="msg" />
            <ui:composition template="/templates/common.xhtml">
             <ui:define name="pageTitle">
             <h:outputText value="#{msg.home_page_title_default}" />
             </ui:define>
             <ui:define name="body">
             <h:panelGrid id="bodySect" columns="1">
             <f:verbatim>
             -- OPEN --
             </f:verbatim>
             </h:panelGrid>
             </ui:define>
            </ui:composition>
            </html>


            COMMON.XHTML:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html 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:rich="http://richfaces.ajax4jsf.org/rich"
             xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
            
            
            <f:loadBundle basename="resources" var="msg" />
            <head>
             <title>
             <h:outputText value="#{msg.home_page_title}" /> - <ui:insert name="pageTitle"><h:outputText value="#{msg.home_page_title_default}" /></ui:insert>
             </title>
             <!-- To disable back button in explorer... -->
             <script language="JavaScript">
             //<!--
             javascript:window.history.forward(1);
             //-->
             </script>
            </head>
            <body>
             <h:form>
             <rich:toolBar>
             <rich:dropDownMenu value="File" submitMode="ajax">
             <rich:menuItem value="New" submitMode="ajax" action="open" reRender="bodySect"/>
             <rich:menuItem value="Open" submitMode="ajax" action="open" reRender="bodySect"/>
             <rich:menuItem value="Close" submitMode="ajax" action="close" reRender="bodySect"/>
             <rich:menuItem value="Exit" submitMode="ajax" action="close" reRender="bodySect"/>
             </rich:dropDownMenu>
             </rich:toolBar>
             </h:form>
             <ui:insert name="body"></ui:insert>
            </body>
            </html>


            FACES-CONFIG.XML:
            <?xml version="1.0" encoding="UTF-8"?>
            <faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
             xmlns:xi="http://www.w3.org/2001/XInclude"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
             <navigation-rule>
             <from-view-id>*</from-view-id>
             <navigation-case>
             <from-outcome>open</from-outcome>
             <to-view-id>/pages/open.xhtml</to-view-id>
             <redirect/>
             </navigation-case>
             <navigation-case>
             <from-outcome>close</from-outcome>
             <to-view-id>/pages/home.xhtml</to-view-id>
             <redirect/>
             </navigation-case>
             </navigation-rule>
             <application>
             <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
             </application>
            </faces-config>


            I am still receiving the double submit effect. Any ideas?

            • 3. Re: Rich Faces Drop Down Menu Page Navigation
              Michael George Newbie

              Tried a bunch of different things and still getting the same double-post effect (refreshed page). I've gone through all the posts in this forum and can't find where anyone else is having this problem. Is it that no one uses the ajax feature to navigate from page to page on dropDownMenu items? Any help would be greatly appreciated. Thanks.

              -Mike

              • 4. Re: Rich Faces Drop Down Menu Page Navigation
                Ilya Shaikovsky Master

                ok.. Seems I understand. You have next behaviour:

                1) Ajax request sent to serever
                2) After responce back - full page - refreshed.

                Yes?

                If so - this is norml behaviour - If you use navigaiont - whole page will be refreshed in any way. To use prtial update you should use includes and update included parts ;)

                • 5. Re: Rich Faces Drop Down Menu Page Navigation
                  Michael George Newbie

                  I understand what you mean, but I can't see how I can do that while using facelets. Would the includes be in the common.xhtml or some other file? How would I architect it? Can you provide an example? Thanks.

                  • 6. Re: Rich Faces Drop Down Menu Page Navigation
                    Ilya Shaikovsky Master

                    First way is

                    .......
                    <rich:menuItem ... reRender="content"/>
                    .......
                    
                    
                    <a4j:outputPanel id="content">
                     <ui:include src="..."/>
                    <a4j:outputPanel/>
                    
                    
                    


                    The second you may see at a4j:include example at demosite ;)

                    • 7. Re: Rich Faces Drop Down Menu Page Navigation
                      Michael George Newbie

                      Thanks a bunch Ilya. I think I have it working now. I can no longer use the facelets ui:composition feature, which changes my overall architecture. But hey, it works. I've included the code below, let me know if you think I am doing it the right way, or if you suggest changing it. Thanks.

                      new.xhtml:

                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <ui:composition 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:c="http://java.sun.com/jstl/core">
                      
                       <f:verbatim>
                       -- NEW --
                       </f:verbatim>
                      </ui:composition>


                      open.xhtml:
                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <ui:composition 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:c="http://java.sun.com/jstl/core">
                      
                       <f:verbatim>
                       -- OPEN --
                       </f:verbatim>
                      </ui:composition>


                      close.xhtml:
                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <ui:composition 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:c="http://java.sun.com/jstl/core">
                      
                       <f:verbatim>
                       -- CLOSED --
                       </f:verbatim>
                      </ui:composition>


                      home.xhtml:
                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <ui:composition 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:c="http://java.sun.com/jstl/core">
                      
                       <f:verbatim>
                       -- HOME --
                       </f:verbatim>
                      </ui:composition>


                      common.xhtml:
                      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                      <ui:composition 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:rich="http://richfaces.org/rich"
                       xmlns:a4j="http://richfaces.org/a4j">
                      
                       <h:form>
                       <rich:toolBar>
                       <rich:dropDownMenu value="File">
                       <rich:menuItem value="New" submitMode="ajax" action="#{menuView.navigateTo}" reRender="content">
                       <a4j:actionparam name="newMenuItem" value="/pages/new.xhtml" assignTo="#{menuView.toViewId}"/>
                       </rich:menuItem>
                       <rich:menuItem value="Open" submitMode="ajax" action="#{menuView.navigateTo}" reRender="content">
                       <a4j:actionparam name="newMenuItem" value="/pages/open.xhtml" assignTo="#{menuView.toViewId}"/>
                       </rich:menuItem>
                       <rich:menuItem value="Close" submitMode="ajax" action="#{menuView.navigateTo}" reRender="content">
                       <a4j:actionparam name="newMenuItem" value="/pages/close.xhtml" assignTo="#{menuView.toViewId}"/>
                       </rich:menuItem>
                       <rich:menuItem value="Exit" submitMode="ajax" action="#{menuView.navigateTo}" reRender="content">
                       <a4j:actionparam name="newMenuItem" value="/pages/home.xhtml" assignTo="#{menuView.toViewId}"/>
                       </rich:menuItem>
                       </rich:dropDownMenu>
                       </rich:toolBar>
                       </h:form>
                       <a4j:outputPanel ajaxRendered="true" id="content">
                       <a4j:include viewId="#{menuView.toViewId}" />
                       </a4j:outputPanel>
                      </ui:composition>


                      MenuView.java:
                      package com.emt.view;
                      
                      
                      public class MenuView {
                       private String toViewId;
                       private static final String DEFAULT_PAGE = "/pages/home.xhtml";
                      
                       public MenuView() {
                       setToViewId(DEFAULT_PAGE);
                       }
                      
                       public void navigateTo() {
                       System.out.println("Navigating to page " + getToViewId());
                       }
                       /**
                       * @return the toViewId
                       */
                       public String getToViewId() {
                       return toViewId;
                       }
                       /**
                       * @param toViewId the toViewId to set
                       */
                       public void setToViewId(String toViewId) {
                       this.toViewId = toViewId;
                       }
                      
                      
                      }


                      faces-config.xml:
                      <?xml version="1.0" encoding="UTF-8"?>
                      <faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
                       xmlns:xi="http://www.w3.org/2001/XInclude"
                       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
                       <managed-bean>
                       <managed-bean-name>menuView</managed-bean-name>
                       <managed-bean-class>com.emt.view.MenuView</managed-bean-class>
                       <managed-bean-scope>session</managed-bean-scope>
                       </managed-bean>
                       <application>
                       <view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
                       </application>
                      </faces-config>


                      • 8. Re: Rich Faces Drop Down Menu Page Navigation
                        Ilya Shaikovsky Master

                        the only I can see - that you shouldn't use ajaxRendered on your outputPanel. reRender on components will done it for you. If you leave this true - this area will be refreshed after any ajax request, even from inside pages. I think it's unnesessary.

                        • 9. Re: Rich Faces Drop Down Menu Page Navigation
                          Michael George Newbie

                          Thanks a bunch... everything looks good as far as dropDownMenu is concerned. You've been a great help.