4 Replies Latest reply on Feb 19, 2008 10:13 PM by E Aish

    Menu and content display using Panelmenuitem

    E Aish Novice

      Hi,

      I am new to JSF/richfaces and planning to create a web page. The page should have a menulist at the top of the page and the depending on the menu selection, the content should be displayed in the second half of the page. There is also a small footer section at the bottom of the page.

      The menu page is designed as follows -- default-menu.jsp

      ====

      <%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
      <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

      <rich:panelMenu style="width:200px" mode="ajax"
      iconExpandedGroup="disc" iconCollapsedGroup="disc"
      iconExpandedTopGroup="chevronUp" iconGroupTopPosition="right"
      iconCollapsedTopGroup="chevronDown"
      selectedChild="#{UINavigation.activeItem}"
      expandSingle="true">

      <rich:panelMenuGroup label="Table Information" expanded="true"
      immediate="true" ignoreDupResponses="true" name="tables">


      <rich:panelMenuItem label="Summary Table" name="Summary"
      action="#{UINavigation.doIQTable}"
      reRender="centerGrid">
      </rich:panelMenuItem>
      </rich:panelMenuGroup>
      </rich:panelMenu>


      ====

      The doIQTable method in UINavigation bean is given as

      public String doIQTable()
      {
      activeItem="IQTable";
      link="/goIQTbl.jsp";
      return "IQTable";
      }

      ====

      The faces-config.xml is as follows:

      <navigation-rule>

      <navigation-case>
      <from-outcome>IQTable</from-outcome>
      <to-view-id>/goIQTbl.jsp</to-view-id>
      </navigation-case>
      </navigation-rule>

      ====

      The index.jsp page is given as


      <%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
      <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
      <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>


      default-menu
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


      <f:view>

      <h:form>
      <h:panelGrid columns="1" style="width:800px;height:600px;" border="1">
      <h:panelGrid id="headerGrid" columns="1"
      style="width:100%;valign:top;" border="1">
      <a4j:include viewId="/default-menu.jsp" />
      <rich:separator lineType="beveled" height="5" width="100%" />
      </h:panelGrid>
      <a4j:outputPanel id="teste" ajaxRendered="true">
      <h:panelGrid id="centerGrid" columns="1" border="1"
      style="width:100%;height:100%;valign:top;">

      <a4j:include viewId="#{UINavigation.address}" />
      </h:panelGrid>
      </a4j:outputPanel>

      </h:panelGrid>

      <a4j:status id="damnStatus"
      onstart="Richfaces.showModalPanel('mp',{width:450, top:200})"
      onstop=""></a4j:status>

      <a4j:include viewId="/pageFooter.jsp" />

      </h:form>

      </f:view>


      ====

      The goIQTbl.jsp page is

      <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
      <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

      <h:outputText value="Displaying the selected details"/>


      ====

      When I deploy this page and select the "Summary" menu item, the goIQTbl.jsp should be displayed in the contents section which is the centerGrid. But the goIQTbl.jsp is displayed in the contents section and also in the section where the default-menu.jsp is displayed overwriting the menus.

      Please guide me how I can accomplish to display the selected menu item only in the centerGrid section.

      I am using JSF 1.1, Richfaces 3.1.3 and Bea Weblogic92.

      Thanks
      Aish

        • 1. Re: Menu and content display using Panelmenuitem
          Ilya Shaikovsky Master

          you should check our info resources.

          Thing that you perform - standard JSF navigation. And nothing partially replaced. Works as it should.

          • 2. Re: Menu and content display using Panelmenuitem
            E Aish Novice

            Ilya,

            Thanks for your response. I checked the forum information and picked up this menu sample from there. Should I need to check somewhere else (info resources as stated in your response)

            I tried this sample as given in the forum titled "Changing/Updating an area by a menu item". I am not sure if I am missing something in order to make it work..

            I have the following method in the bean:
            ==========================

            The doIQTable method in UINavigation bean is given as

            public String doIQTable()
            {
            activeItem="IQTable";
            link="/goIQTbl.jsp";
            return "IQTable";
            }

            As of now, the contents are displayed both in the display-menu area and the content (CenterGrid) area. In the above bean, if I comment the return value statement, then nothing happens on the screen. So, I am not sure how to handle this menu navigation.

            I have been struggling with the menu navigation for more than a week. Please guide me what I am missing.

            Thank you very much
            Aish


            • 3. Re: Menu and content display using Panelmenuitem
              Ilya Shaikovsky Master

              you should use something like:

              <rich:panelMenu mode="ajax">
              ....
               <rich:panelMenuItem reRender="content" action="#{bean.changeSrc}"
              ...
              </rich:panelMenu>
              ......
              <a4j:outputPanel id="content">
               <ui:include src="{bean.url}"/>
              <a4j:outputPanel/>
              ....
              


              So in your action you change the url property and the area reRenders via ajax.

              • 4. Re: Menu and content display using Panelmenuitem
                E Aish Novice

                Thanks a lot Ilya. I tried your response and it worked fine. There is a small issue in it. I have copied the code below. It is pretty much the same as given in my first post and I am copying it so that it is easier for you when you read.

                I have the bean as follows:
                ================

                public class UINavigation
                {

                private String link ="/intro.jsp";

                public void doIQTable()
                {
                link="/goIQTable.jsp";
                }

                public void doDBTable()
                {
                link="/pageFooter.jsp";
                }

                The menu page is as follows:
                =================

                <rich:panelMenu style="width:200px" mode="ajax"
                iconExpandedGroup="disc" iconCollapsedGroup="disc"
                iconExpandedTopGroup="chevronUp" iconGroupTopPosition="right"
                iconCollapsedTopGroup="chevronDown"
                selectedChild="#{UINavigation.activeItem}"
                expandSingle="true">

                <rich:panelMenuItem label="Summary Table" name="Summary"
                action="#{UINavigation.doIQTable}"
                reRender="centerGrid">
                </rich:panelMenuItem>

                <rich:panelMenuItem label="Db Table" name="DBTable"
                action="#{UINavigation.doDBTable}"
                reRender="centerGrid">
                </rich:panelMenuItem>

                </rich:panelMenu>

                =====
                The index.jsp is as follows:


                <h:form>
                <h:panelGrid columns="1" style="width:800px;height:600px;" border="1">

                <h:panelGrid id="headerGrid" columns="1"
                style="width:100%;valign:top;" border="1">

                <a4j:include viewId="/default-menu.jsp" />
                <rich:separator lineType="beveled" height="5" width="100%" />
                </h:panelGrid>
                <a4j:outputPanel id="centerGrid" >

                <h:panelGrid columns="1" border="1"style="width:100%;height:100%;valign:top;">
                <a4j:include viewId="#{UINavigation.address}">
                </a4j:include>
                </h:panelGrid>
                </a4j:outputPanel>

                </h:panelGrid>
                ====

                When the page is first displayed, the /intro.jsp page is displayed as it is the default value of the variable "link". When the menu items are selected, the methods set the value of the link to a different value and the centerGrid is refreshed with the new value of link.

                What happens in my sample is that, when the menu item is selected, the new link (for eg: goIQTable.jsp or pageFooter.jsp) is displayed in the centerGrid section along with the contents of the /intro.jsp. Can you please let me know Why is the contents of the /intro.jsp displayed.

                I thank you very much for your guidance

                Aish