5 Replies Latest reply on Aug 15, 2011 6:38 PM by Roberto Requena

    How I can build <rich:dropDownMenu> dynamically with icon?

    Roberto Requena Newbie

      Greetings.

       

           I have a question, how to add images (icons) dynamically to a menu?

           I want to dynamically create the following code:

       

      <h:form id="form-menu">
                        <rich:toolBar>
                               <rich:dropDownMenu>
                                         <f:facet name="label">
                                              <h:panelGroup>
                                                   <h:graphicImage value="/images/thumb_100wide.gif" style="width : 15px; height : 15px;" />
                                                   <h:outputText value="File" />
                                              </h:panelGroup>
                                         </f:facet>
                                         <rich:menuItem submitMode="ajax" value="New" action="#{ddmenu.doNew}" icon="/images/thumb_100wide.gif" style="width : 15px; height : 15px;">
                                           <f:facet name="icon">
                                                   <h:graphicImage value="/images/thumb_100wide.gif" style="width : 15px; height : 15px;" />
                                           </f:facet>
                                          </rich:menuItem>
                                         <rich:menuItem submitMode="ajax" value="Open" action="#{ddmenu.doOpen}" >
                                              <f:facet name="icon">
                                                   <h:graphicImage value="/images/thumb_100wide.gif" style="width : 15px; height : 15px;" />
                                              </f:facet>
                                         </rich:menuItem>
      
                                         <rich:menuSeparator id="menuSeparator2" />
                                         <rich:menuItem submitMode="ajax" value="Close" action="#{ddmenu.doClose}" />
                                      <rich:menuSeparator id="menuSeparator1" />
                                         <rich:menuItem submitMode="ajax" value="Exit" action="#{ddmenu.doExit}" />
      
                               </rich:dropDownMenu>
                </rich:toolBar>
           </h:form>
      

       

      Which I have to do so exactly, that my .css to work properly. (I attach the image with the result code)

       

      Exactly the problem I have is, I do not know how to dynamically add <f:facet name="label"> and <f:facet name="icon"> to my components HtmlDropDownMenu and HtmlMenuItem.

       

       

      Thanks for your help and excuse my English


       


        • 1. Re: How I can build <rich:dropDownMenu> dynamically with icon?
          Saroj Padhy Novice

          facets can be used as below:

           

               FacesContext ctx = FacesContext.getCurrentInstance();
               menuBar = (UIToolbar) ctx.getApplication()
                      .createComponent(ctx, UIToolbar.COMPONENT_TYPE, 
                      "org.richfaces.ToolbarRenderer");
               UIDropDownMenu dropDownMenu = (UIDropDownMenu) ctx.getApplication()
                      .createComponent(ctx, UIDropDownMenu.COMPONENT_TYPE,
                      "org.richfaces.DropDownMenuRenderer");
                  
                  HtmlOutputText label = (HtmlOutputText) ctx.getApplication()
                      .createComponent(HtmlOutputText.COMPONENT_TYPE);
                  label.setValue("File");
                  dropDownMenu.getFacets().put("label", label);
                  
                  dropDownMenu.setMode(Mode.ajax);
          
          

           

          Hope it will be helpful.

          • 2. Re: How I can build <rich:dropDownMenu> dynamically with icon?
            Roberto Requena Newbie

            Thank you very much for your prompt response. I will try your solution. Thank you.

            • 3. Re: How I can build <rich:dropDownMenu> dynamically with icon?
              Saroj Padhy Novice

              this is exactly what you need I guess:

               

                   UIOutputPanel lbl = new UIOutputPanel();
                      
                      HtmlOutputText label = (HtmlOutputText) ctx.getApplication()
                          .createComponent(HtmlOutputText.COMPONENT_TYPE);
                      label.setValue("File");
                      
                      HtmlGraphicImage image = (HtmlGraphicImage) ctx.getApplication()
                          .createComponent(HtmlGraphicImage.COMPONENT_TYPE);
                      image.setValue("/images/icons/create_folder.gif");
                      
                      lbl.getChildren().add(image);
                      lbl.getChildren().add(label);
                      
                      dropDownMenu.getFacets().put("label", lbl);
              
              • 4. Re: How I can build <rich:dropDownMenu> dynamically with icon?
                Roberto Requena Newbie

                Greetings.

                 

                I have a doubt. I more or less what you show me as follows:


                private UIToolBar menuBar;
                menuBar = (UIToolBar) FacesContext.getCurrentInstance().getApplication().createComponent(UIToolBar.COMPONENT_TYPE);
                

                 

                And add the other components. In the page:

                 

                <h:form id="form-menu">
                     <rich:toolBar binding="#{mbMenu.menuBar}" />
                </h:form>
                

                 

                but in the end does not show me anything. It is the right way?


                • 5. Re: How I can build <rich:dropDownMenu> dynamically with icon?
                  Roberto Requena Newbie

                  Hi,

                   

                  I change private UIToolBar menuBar; for private HtmlToolBar htmlToolBar;  and this works perfectly, thank you very much indeed for your help. and excuse my English.