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

[rart3001_1]

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

[sarocks]

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.

[rart3001_1]

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

[sarocks]

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

[rart3001_1]

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?

[rart3001_1]

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.