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

    Rich Faces Drop Down Menu Page Navigation

    mike_george
    mike_george Nov 13, 2007 9:54 AM

      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!

      • 4765 Views
      • Tags:
        • 1. Re: Rich Faces Drop Down Menu Page Navigation
          ilya_shaikovsky
          ilya_shaikovsky Nov 13, 2007 10:13 AM (in response to mike_george)

          use server mode for navigation.

          Or in ajax mode - your rules should be

          <redirect/>


          one in faces config.

            • Actions
          • 2. Re: Rich Faces Drop Down Menu Page Navigation
            mike_george
            mike_george Nov 13, 2007 12:30 PM (in response to mike_george)

            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?

              • Actions
            • 3. Re: Rich Faces Drop Down Menu Page Navigation
              mike_george
              mike_george Nov 13, 2007 4:45 PM (in response to mike_george)

              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

                • Actions
              • 4. Re: Rich Faces Drop Down Menu Page Navigation
                ilya_shaikovsky
                ilya_shaikovsky Nov 14, 2007 4:37 AM (in response to mike_george)

                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 ;)

                  • Actions
                • 5. Re: Rich Faces Drop Down Menu Page Navigation
                  mike_george
                  mike_george Nov 14, 2007 9:58 AM (in response to mike_george)

                  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.

                    • Actions
                  • 6. Re: Rich Faces Drop Down Menu Page Navigation
                    ilya_shaikovsky
                    ilya_shaikovsky Nov 14, 2007 10:05 AM (in response to mike_george)

                    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 ;)

                      • Actions
                    • 7. Re: Rich Faces Drop Down Menu Page Navigation
                      mike_george
                      mike_george Nov 14, 2007 1:01 PM (in response to mike_george)

                      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>


                        • Actions
                      • 8. Re: Rich Faces Drop Down Menu Page Navigation
                        ilya_shaikovsky
                        ilya_shaikovsky Nov 15, 2007 5:59 AM (in response to mike_george)

                        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.

                          • Actions
                        • 9. Re: Rich Faces Drop Down Menu Page Navigation
                          mike_george
                          mike_george Nov 15, 2007 8:44 AM (in response to mike_george)

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

                            • Actions