1 2 Previous Next 16 Replies Latest reply on Jan 13, 2009 6:28 AM by Ker P

    build a dynamic menu using <rich:dropDownMenu>

    Ker P Newbie

      Hello.

      I'm trying to build a dynamic menu using <rich:dropDownMenu> nothing special byut I want it to be dynamic. So I want to fill it from records from a database for example.

      I have tried several ways. But I can't find one working. I'm working with JSP, not facelets.

      I have tried :

      <rich:toolBar>
       <rich:dropDownMenu>
       <rich:menuItem value="something" binding="#{applicationFace.languageMenu} " />
       </rich:dropDownMenu>
      </rich:toolBar>
      


       public HtmlMenuGroup getLanguageMenu() {
       if (languageMenu==null) initMenuLanguage
       return languageMenu;
       }
      
       public void setLanguageMenu(HtmlMenuGroup languageMenu) {
       this.languageMenu = languageMenu;
       }
      
      
      private void initMenuLanguage() {
       languageMenu = new HtmlMenuGroup();
       languageMenu.setValue("Langue...");
       HtmlMenuItem item;
       for (Language language:languageManager.getAllLanguages()) {
       item = new HtmlMenuItem();
       item.setId(language.getIsoCode());
       item.setSubmitMode("server");
       item.setValue(language.getName());
       getLanguageMenu().getChildren().add(item);
       }
       }


      also tried :

      <rich:toolBar>
       <rich:dropDownMenu>
       <a4j:repeat items="#{ContactBean.truc}" var="unTruc">
       <rich:menuItem submitMode="ajax" value="unTruc" />
       </a4j:repeat>
       </rich:dropDownMenu>
      </rich:toolBar>
      


      Or :

      <rich:toolBar>
       <rich:dropDownMenu>
       <c:forEach items="#{ContactBean.truc}" var="unTruc">
       <rich:menuItem submitMode="ajax" value="unTruc" />
       </c:forEach>
       </rich:dropDownMenu>
      </rich:toolBar>
      


      Please I really need it... any help would be appreciate.

      Thanks

        • 1. Re: build a dynamic menu using <rich:dropDownMenu>
          Ker P Newbie

           

          "ptr83" wrote:


          <rich:toolBar>
           <rich:dropDownMenu>
           <rich:menuGroup value="something" binding="#{applicationFace.languageMenu} " />
           </rich:dropDownMenu>
          </rich:toolBar>
          



          Can't find the edit button so I made a reply to edit this part (menuGroup not menuItem)

          • 2. Re: build a dynamic menu using <rich:dropDownMenu>
            Nick Belaevski Master

            Hi,

            This:

            <rich:dropDownMenu>
             <c:forEach items="#{ContactBean.truc}" var="unTruc">
             <rich:menuItem submitMode="ajax" value="unTruc" />
             </c:forEach>
             </rich:dropDownMenu>
            works for me without any problems. Not that you should use #{unTruc}

            What RF version do you use? Is your JSTL JSP 2.1 compatible or not (check taglib schema version)?

            • 3. Re: build a dynamic menu using <rich:dropDownMenu>
              Ker P Newbie

              I use RF 3.2.2
              I was using jsl.jar and now I tried with jstl-1.2.jar without any success.

              • 4. Re: build a dynamic menu using <rich:dropDownMenu>
                Ilya Shaikovsky Master

                please check the generated source code? Check if the jstl tags are encoded to html properly? Or its just present in generated code as is? If second - please check your jstl taglib declaration.

                • 5. Re: build a dynamic menu using <rich:dropDownMenu>
                  Ker P Newbie

                   

                  <table border="0" cellpadding="0" cellspacing="0" class="dr-toolbar-ext rich-toolbar " id="formReturn:j_id_jsp_843804180_27" width="100%"><tr valign="middle"><td class="dr-toolbar-int rich-toolbar-item "><div class="dr-menu-label dr-menu-label-unselect rich-ddmenu-label rich-ddmenu-label-unselect " id="formReturn:j_id_jsp_843804180_28"><div class="dr-label-text-decor rich-label-text-decor" id="formReturn:j_id_jsp_843804180_28_span"></div><div style="margin: 0px; padding: 0px; border: 0px; position: absolute; z-index: 100;"><div id="formReturn:j_id_jsp_843804180_28_menu" class="dr-menu-list-border rich-menu-list-border" style="display: none; z-index: 2;"><div class="dr-menu-list-bg rich-menu-list-bg"><div class="dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled " id="formReturn:j_id_jsp_843804180_29" onclick="this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; A4J.AJAX.Submit('j_id_jsp_843804180_0','formReturn',event,{'parameters':{'formReturn:j_id_jsp_843804180_29':'formReturn:j_id_jsp_843804180_29'} ,'actionUrl':'/Depairon/pages/private/catalog.faces'} );" onmouseout="if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('formReturn:j_id_jsp_843804180_29').style.cssText=';'; $('formReturn:j_id_jsp_843804180_29:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('formReturn:j_id_jsp_843804180_29:anchor'), 'rich-menu-item-label-selected');" onmouseover="if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('formReturn:j_id_jsp_843804180_29').style.cssText='; ; ;'; $('formReturn:j_id_jsp_843804180_29:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('formReturn:j_id_jsp_843804180_29:anchor'), 'rich-menu-item-label-selected');" onmouseup="Event.stop(event); " style="; "><span class="dr-menu-icon rich-menu-item-icon " id="formReturn:j_id_jsp_843804180_29:icon"><img height="16" src="/Depairon/a4j/g/3_2_2.GAimages/spacer.gif.faces" width="16" /></span><span class="rich-menu-item-label " id="formReturn:j_id_jsp_843804180_29:anchor">MENULABEL</span></div><div class="dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled " id="formReturn:j_id_jsp_843804180_29j_id_1" onclick="this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; A4J.AJAX.Submit('j_id_jsp_843804180_0','formReturn',event,{'parameters':{'formReturn:j_id_jsp_843804180_29j_id_1':'formReturn:j_id_jsp_843804180_29j_id_1'} ,'actionUrl':'/Depairon/pages/private/catalog.faces'} );" onmouseout="if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('formReturn:j_id_jsp_843804180_29j_id_1').style.cssText=';'; $('formReturn:j_id_jsp_843804180_29j_id_1:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('formReturn:j_id_jsp_843804180_29j_id_1:anchor'), 'rich-menu-item-label-selected');" onmouseover="if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('formReturn:j_id_jsp_843804180_29j_id_1').style.cssText='; ; ;'; $('formReturn:j_id_jsp_843804180_29j_id_1:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('formReturn:j_id_jsp_843804180_29j_id_1:anchor'), 'rich-menu-item-label-selected');" onmouseup="Event.stop(event); " style="; "><span class="dr-menu-icon rich-menu-item-icon " id="formReturn:j_id_jsp_843804180_29j_id_1:icon"><img height="16" src="/Depairon/a4j/g/3_2_2.GAimages/spacer.gif.faces" width="16" /></span><span class="rich-menu-item-label " id="formReturn:j_id_jsp_843804180_29j_id_1:anchor">MENULABEL</span></div><div class="dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled " id="formReturn:j_id_jsp_843804180_29j_id_2" onclick="this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; A4J.AJAX.Submit('j_id_jsp_843804180_0','formReturn',event,{'parameters':{'formReturn:j_id_jsp_843804180_29j_id_2':'formReturn:j_id_jsp_843804180_29j_id_2'} ,'actionUrl':'/Depairon/pages/private/catalog.faces'} );" onmouseout="if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-enabled rich-menu-item rich-menu-item-enabled '; $('formReturn:j_id_jsp_843804180_29j_id_2').style.cssText=';'; $('formReturn:j_id_jsp_843804180_29j_id_2:icon').className='dr-menu-icon rich-menu-item-icon '; Element.removeClassName($('formReturn:j_id_jsp_843804180_29j_id_2:anchor'), 'rich-menu-item-label-selected');" onmouseover="if (RichFaces.Menu.isWithin(event, this)) return; this.className='dr-menu-item dr-menu-item-hover rich-menu-item rich-menu-item-hover ';; $('formReturn:j_id_jsp_843804180_29j_id_2').style.cssText='; ; ;'; $('formReturn:j_id_jsp_843804180_29j_id_2:icon').className='dr-menu-icon dr-menu-icon-selected rich-menu-item-icon rich-menu-item-icon-selected '; Element.addClassName($('formReturn:j_id_jsp_843804180_29j_id_2:anchor'), 'rich-menu-item-label-selected');" onmouseup="Event.stop(event); " style="; "><span class="dr-menu-icon rich-menu-item-icon " id="formReturn:j_id_jsp_843804180_29j_id_2:icon"><img height="16" src="/Depairon/a4j/g/3_2_2.GAimages/spacer.gif.faces" width="16" /></span><span class="rich-menu-item-label " id="formReturn:j_id_jsp_843804180_29j_id_2:anchor">MENULABEL</span></div><div class="dr-menu-list-strut rich-menu-list-strut"><div class="dr-menu-list-strut rich-menu-list-strut" width="1" height="1" style="">&#160;</div></div></div></div><script id="formReturn:j_id_jsp_843804180_28_menu_script" type="text/javascript">new RichFaces.Menu.Layer('formReturn:j_id_jsp_843804180_28_menu',50,800).asDropDown('formReturn:j_id_jsp_843804180_28','formReturn:j_id_jsp_843804180_28_span','onmouseover','onmouseout',{'jointPoint':'auto','onitemselect':function(event){;return true;},'direction':'auto','horizontalOffset':0,'disabled':false,'ongroupactivate':function(event){;return true;},'verticalOffset':0,'oncollapse':function(event){;return true;},'onexpand':function(event){;return true;}} ).addItem('formReturn:j_id_jsp_843804180_29',{'closeOnClick':1,'iconClass':'','disabled':false,'selectClass':'','flagGroup':0,'selectStyle':''} ).addItem('formReturn:j_id_jsp_843804180_29j_id_1',{'closeOnClick':1,'iconClass':'','disabled':false,'selectClass':'','flagGroup':0,'selectStyle':''} ).addItem('formReturn:j_id_jsp_843804180_29j_id_2',{'closeOnClick':1,'iconClass':'','disabled':false,'selectClass':'','flagGroup':0,'selectStyle':''} );</script></div></div></td><td width="100%"></td></tr></table>


                  Here is the generated code... the is no jstl tag....

                  I should have 3 MENULABEL in my menu. Instead I have nothing and when my mouse goes over the menu, jsut a small white square is displayed.

                  [img]http://img204.imageshack.us/img204/9229/menuerrorlq0.jpg[/img]

                  • 6. Re: build a dynamic menu using <rich:dropDownMenu>
                    Ker P Newbie

                    I don't know why the image is not displayed but it is just a small screenshot of the void menu and small white square.

                    Thanks for your help I really need it :-/

                    • 7. Re: build a dynamic menu using <rich:dropDownMenu>
                      Ilya Shaikovsky Master

                      please add something like label="My Menu" to your dropDownMenu tag.

                      • 8. Re: build a dynamic menu using <rich:dropDownMenu>
                        Ker P Newbie

                        value="My menu"

                        seems to work

                        perhaps that + jstl-1.2.jar was my full solution

                        thanks you sooooooooooooooo much :)

                        • 9. Re: build a dynamic menu using <rich:dropDownMenu>
                          Ilya Shaikovsky Master

                          Sorry.. just didn't noticed this from the beggining :)
                          label attribute or label facet have to be defined on the component in order to define representation fo the menu.

                          • 11. Re: build a dynamic menu using <rich:dropDownMenu>
                            Nick Belaevski Master

                            Sorry, looks like I'm late

                            • 12. Re: build a dynamic menu using <rich:dropDownMenu>
                              Ker P Newbie

                              Sorry it's me again, I still have a problem building dynamic menu. I am trying to make several c:forEach but I get an error...

                              <rich:panelMenu style="width:200px" mode="ajax"
                               iconExpandedGroup="disc" iconCollapsedGroup="disc"
                               iconExpandedTopGroup="chevronUp" iconGroupTopPosition="right"
                               iconCollapsedTopGroup="chevronDown" >
                               <f:facet name="label">
                               <h:panelGroup>
                               <h:outputText value="My menu"/>
                               </h:panelGroup>
                               </f:facet>
                               <rich:panelMenuGroup name="gdfg" label="gdfg" >
                               <rich:panelMenuItem name="1111" label="1111" />
                               </rich:panelMenuGroup>
                               <c:forEach items="#{CatalogBean.categoryList}" var="wmc">
                               <rich:panelMenuGroup name="#{wmc.description}" label="#{wmc.description}">
                              
                               <c:forEach items="#{wmc.itemList}" var="item">
                               <rich:panelMenuItem name="#{wmc.description}#{item.description}" label="#{item.description}"></rich:panelMenuItem>
                               </c:forEach>
                               </rich:panelMenuGroup>
                               </c:forEach>
                               </rich:panelMenu>


                              The error (I have several category but each are different so I don't understand why he tells me I have severals "category1"):

                              javax.servlet.ServletException: Attibute "name" with value "category1" is already used in PanelMenu. It must be unique for every group/item.
                              javax.faces.webapp.FacesServlet.service(FacesServlet.java:256)
                              org.ajax4jsf.webapp.BaseXMLFilter.doXmlFilter(BaseXMLFilter.java:177)
                              org.ajax4jsf.webapp.BaseFilter.handleRequest(BaseFilter.java:267)
                              org.ajax4jsf.webapp.BaseFilter.processUploadsAndHandleRequest(BaseFilter.java:380)
                              org.ajax4jsf.webapp.BaseFilter.doFilter(BaseFilter.java:507)


                              • 13. Re: build a dynamic menu using <rich:dropDownMenu>
                                Ilya Shaikovsky Master

                                name="#{wmc.description}" - check that this values not duplicates.

                                • 14. Re: build a dynamic menu using <rich:dropDownMenu>
                                  Ker P Newbie

                                  You were right but this time :

                                  javax.servlet.ServletException: duplicate Id for a component formReturn:j_id_jsp_843804180_37
                                  javax.faces.webapp.FacesServlet.service(FacesServlet.java:256)
                                  org.ajax4jsf.webapp.BaseXMLFilter.doXmlFilter(BaseXMLFilter.java:177)
                                  org.ajax4jsf.webapp.BaseFilter.handleRequest(BaseFilter.java:267)
                                  org.ajax4jsf.webapp.BaseFilter.processUploadsAndHandleRequest(BaseFilter.java:380)
                                  org.ajax4jsf.webapp.BaseFilter.doFilter(BaseFilter.java:507)

                                  And as I can not set an expression for id I think I am in a big problem....

                                  1 2 Previous Next