12 Replies Latest reply on Aug 3, 2011 5:22 AM by Saroj Padhy

    dynamically creating dropDownMenu in Richfaces4

    Saroj Padhy Novice

      Hi,

       

      Creating dropDownMenu dynamically has some strange issues!!!

       

      I have a code as below: (using Richfaces-4.0.0Final, JSF-Mojarra 2.1.0, Tomcat-6.0.20 server)

       

      dropdownmenu.xhtml

      <h:form>

              <rich:toolbar height="26px" binding="#{dropDownMenuBean.menuBar}"/>

      </h:form>

       

      DropDownMenuBean.java (getter method)

      public UIToolbar getMenuBar() {

              FacesContext ctx = FacesContext.getCurrentInstance();

              menuBar = (UIToolbar) ctx.getApplication().createComponent(UIToolbar.COMPONENT_TYPE);

       

              UIDropDownMenu dropDownMenu = (UIDropDownMenu) ctx.getApplication().createComponent(UIDropDownMenu.COMPONENT_TYPE);

              HtmlOutputText label = (HtmlOutputText) ctx.getApplication().createComponent(HtmlOutputText.COMPONENT_TYPE);

              label.setValue("File");

              dropDownMenu.getFacets().put(UIDropDownMenu.Facets.label.name(), label);

              dropDownMenu.setMode(Mode.ajax);

              dropDownMenu.setHideDelay(0);

       

              UIMenuItem menItm = (UIMenuItem) ctx.getApplication().createComponent(UIMenuItem.COMPONENT_TYPE);

              menItm.setLabel("New");

              menItm.setMode(Mode.ajax);

              menItm.setIcon("/images/icons/create_doc.gif");

              Class[] params = {};

              MethodExpression me = ctx.getApplication().getExpressionFactory().createMethodExpression(ctx.getELContext(),

                              "#{dropDownMenuBean.doNew}", String.class, params);

              menItm.setActionExpression(me);

              dropDownMenu.getChildren().add(menItm);

       

              menuBar.getChildren().add(dropDownMenu);

              return menuBar;

          }

       

       

      With this much code if I run the page, only text displayed in the page as below:

      filewithoutmenu.JPG

      But when I modify the xhtml page as below:

       

           <h:form>

              <rich:toolbar height="26px" binding="#{dropDownMenuBean.menuBar}"/>

              <rich:toolbar height="26px" rendered="false">

                  <rich:dropDownMenu mode="ajax"/>    

              </rich:toolbar>

           </h:form>

       

      Now page looks better, When I move mouse cursor over "File", its loading the dropdownmenu.

      filewithmenu.JPG

       

       

      But anyway clicking on "new", doesn't do any action!

      So I am little confused with the concept here. I need help on this immediately.

       

      How can I create menus dynamically and with ajax feature?

       

      Thanks in advance,

      Saroj

        • 1. Re: dynamically creating dropDownMenu in Richfaces4
          Saroj Padhy Novice

          Related post:

          http://community.jboss.org/message/594045#594045

           

          Is this a bug!

          I am not able to get action events on menu items. How can I achieve this?

           

          Is it correct way of binding methods to menu items as below:

                    MethodExpression me = ctx.getApplication().getExpressionFactory().createMethodExpression(ctx.getELContext(),

                                  "#{dropDownMenuBean.doNew}", String.class, params);

                    menItm.setActionExpression(me);

           

          Need immediate help!

           

          Thanks,

          Saroj

          • 2. Re: dynamically creating dropDownMenu in Richfaces4
            Saroj Padhy Novice

            Waiting for a reply!

            Thanks.

            • 3. Re: dynamically creating dropDownMenu in Richfaces4
              Nick Belaevski Master

              Hi Saroj,

               

              You are not using proper version of createComponent() method, that's why resources are not loading.

              Are there any JS errors when you click the item?

              • 4. Re: dynamically creating dropDownMenu in Richfaces4
                Saroj Padhy Novice

                Hi Nick,

                 

                I changed the createComponent() method as below:

                menuBar = (UIToolbar) ctx.getApplication()

                            .createComponent(ctx, UIToolbar.COMPONENT_TYPE,

                            "org.richfaces.ToolbarRenderer");

                 

                Still I am not getting the outcome as expected.

                And no JS error.

                When I do setOnClick() on menuitem and javascript working. But action method not working!

                 

                I am attaching the source code. (DropDownMenuBean.java, dropdownmenu.xhtml)

                It's from the showcase only, but modified to create the menu dynamically.

                 

                Thanks,

                Saroj

                • 5. Re: dynamically creating dropDownMenu in Richfaces4
                  Saroj Padhy Novice

                  Has anyone tried this! Waiting for a reply!

                  It's a simple code, try to run it in your workspace! If you find any clue!

                   

                  I need to call a method on dropdown menuitem click and do ajax update!

                  Any idea!

                   

                  Thanks.

                  • 6. Re: dynamically creating dropDownMenu in Richfaces4
                    Saroj Padhy Novice

                    Please have a look on this code and suggest for something!

                     

                    DropDownMenuBean.java

                     

                    import javax.el.MethodExpression;
                    import javax.faces.bean.ManagedBean;
                    import javax.faces.bean.ViewScoped;
                    import javax.faces.component.html.HtmlOutputText;
                    import javax.faces.context.FacesContext;
                    
                    import org.richfaces.component.Mode;
                    import org.richfaces.component.UIDropDownMenu;
                    import org.richfaces.component.UIMenuItem;
                    import org.richfaces.component.UIToolbar;
                    
                    @ManagedBean
                    @ViewScoped
                    public class DropDownMenuBean {
                        private String current;
                        private UIToolbar menuBar;
                        
                        public String getCurrent() {
                            return this.current;
                        }
                    
                        public void setCurrent(String current) {
                            this.current = current;
                        }
                    
                        public String doNew() {
                            this.current = "New";
                            System.out.println("DropDownMenuBean.doNew()");
                            return null;
                        }
                    
                        public String doOpen() {
                            this.current = "Open";
                            return null;
                        }
                    
                        public String doClose() {
                            this.current = "Close";
                            return null;
                        }
                    
                        public String doSave() {
                            this.current = "Save";
                            return null;
                        }
                    
                        public String doSaveAll() {
                            this.current = "Save All";
                            return null;
                        }
                    
                        public String doExit() {
                            this.current = "Exit";
                            return null;
                        }
                    
                        public void setMenuBar(UIToolbar menuBar) {
                            this.menuBar = menuBar;
                        }
                    
                        public UIToolbar getMenuBar() {
                            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(UIDropDownMenu.Facets.label.name(), label);
                            dropDownMenu.setMode(Mode.ajax);
                            dropDownMenu.setHideDelay(0);
                            
                            UIMenuItem menItm = (UIMenuItem) ctx.getApplication().createComponent(ctx, 
                                    UIMenuItem.COMPONENT_TYPE,
                                    "org.richfaces.MenuItemRenderer");
                            menItm.setLabel("New");
                            menItm.setIcon("/images/icons/create_doc.gif");
                            Class[] params = {};
                            MethodExpression me = ctx.getApplication()
                                    .getExpressionFactory()
                                    .createMethodExpression(ctx.getELContext(),
                                            "#{dropDownMenuBean.doNew}", String.class, params);
                            menItm.setActionExpression(me);
                            menItm.setMode(Mode.ajax);
                            dropDownMenu.getChildren().add(menItm);
                            // menItm.setOnclick("alert('hello');");
                                
                            /*UIMenuItem menItm1 = (UIMenuItem) ctx.getApplication().createComponent(
                                    UIMenuItem.COMPONENT_TYPE);
                            menItm1.setMode(Mode.ajax);
                            menItm1.setRendered(false);
                            dropDownMenu.getChildren().add(menItm1);*/
                            
                            menuBar.getChildren().add(dropDownMenu);
                            
                            return menuBar;
                        }
                    }
                    

                     

                    dropdownmenu.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:h="http://java.sun.com/jsf/html"
                        xmlns:f="http://java.sun.com/jsf/core"
                        xmlns:ui="http://java.sun.com/jsf/facelets"
                        xmlns:a4j="http://richfaces.org/a4j"
                        xmlns:rich="http://richfaces.org/rich">
                    
                    <h:head></h:head>
                    <h:body>
                    
                        <h:form id="form">
                            <rich:toolbar height="26px" binding="#{dropDownMenuBean.menuBar}"/>
                            <rich:toolbar rendered="false" />
                            <rich:dropDownMenu rendered="false" />
                            <rich:menuItem rendered="false" />
                        </h:form>
                    
                        <a4j:outputPanel ajaxRendered="true">
                            <h:outputText value="Current Selection: "></h:outputText>
                            <h:outputText style="font-weight:bold"
                                value="#{dropDownMenuBean.current}"></h:outputText>
                        </a4j:outputPanel>
                    
                    </h:body>
                    
                    </html>
                    

                     

                     

                    Thanks,

                    Saroj

                    • 7. Re: dynamically creating dropDownMenu in Richfaces4
                      shreya arun Newbie

                      Hi...

                       

                      Even me also running behind the same problem..Can anybody suggest the solution please. It is very urgent..

                       

                       

                      Thanks..

                      • 8. Re: dynamically creating dropDownMenu in Richfaces4
                        Vitthal Bhat Newbie

                        Hi,

                         

                        Even me too facing the same problem. Please any suggestions.

                         

                         

                        Thanks,

                        • 9. Re: dynamically creating dropDownMenu in Richfaces4
                          Juan Ignacio Garzon Newbie

                          Same problem here!! Is there an example for creating a menu dynamically using component binding? I create it ok (it renders), but my actions do not work! (I'm sure the MethodBindings are ok). There are no JS errors, When I click a menu item the page reloads but no NavigationHandler gets called and no exceptions are logged.

                           

                          Thanks!

                          • 10. Re: dynamically creating dropDownMenu in Richfaces4
                            Juan Ignacio Garzon Newbie

                            After two days I found the solution. In my case the problem was that before adding dynamically the menu items to the HtmlToolBar I was clearing all children (I was doing that to avoid adding the menu items twice, but this is not necessary since the setter is called only once per request).

                             

                            The way Im creating the menu bar is.

                             

                            Page code:

                            <rich:toolBar binding="#{menuBean.barraMenu}"></rich:toolBar>

                             

                            Bean:

                             

                               public HtmlToolBar getBarraMenu() {

                                    return barraMenu;

                                }

                             

                                public void setBarraMenu(HtmlToolBar barraMenu) {

                                    this.barraMenu = barraMenu;

                                    regenerarMenu();

                                }

                             

                            The method regenerarMenu() adds all menu items to the HtmlToolBar based on current user's roles.

                             

                            Hope It helps

                             

                            regards!

                            • 11. Re: dynamically creating dropDownMenu in Richfaces4
                              Antoine SCHELLENBERGER Newbie

                              Hi Saroj and others,

                              I faced the same issue and I finally find the solution.

                              In richfaces, it's a good practice to assign an Id on each component that you create dynamically, so doing this with the setId() method on each of your Item menu make them fire action now.

                              I take the very complete code example of Saroj to illustrate the solution:

                               

                              DropDownMenuBean.java:

                              {code:java}

                              import javax.el.MethodExpression;

                              import javax.faces.bean.ManagedBean;

                              import javax.faces.bean.ViewScoped;

                              import javax.faces.component.html.HtmlOutputText;

                              import javax.faces.context.FacesContext;

                               

                              import org.richfaces.component.Mode;

                              import org.richfaces.component.UIDropDownMenu;

                              import org.richfaces.component.UIMenuItem;

                              import org.richfaces.component.UIToolbar;

                               

                              @ManagedBean

                              @ViewScoped

                              public class DropDownMenuBean {

                                  private String current;

                                  private UIToolbar menuBar;

                               

                                  public String getCurrent() {

                                      return this.current;

                                  }

                               

                                  public void setCurrent(String current) {

                                      this.current = current;

                                  }

                               

                                  public String doNew() {

                                      this.current = "New";

                                      System.out.println("DropDownMenuBean.doNew()");

                                      return null;

                                  }

                               

                                  public String doOpen() {

                                      this.current = "Open";

                                      return null;

                                  }

                               

                                  public String doClose() {

                                      this.current = "Close";

                                      return null;

                                  }

                               

                                  public String doSave() {

                                      this.current = "Save";

                                      return null;

                                  }

                               

                                  public String doSaveAll() {

                                      this.current = "Save All";

                                      return null;

                                  }

                               

                                  public String doExit() {

                                      this.current = "Exit";

                                      return null;

                                  }

                               

                                  public void setMenuBar(UIToolbar menuBar) {

                                      this.menuBar = menuBar;

                                  }

                               

                                  public UIToolbar getMenuBar() {

                                      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(UIDropDownMenu.Facets.label.name(), label);

                                      dropDownMenu.setMode(Mode.ajax);

                                      dropDownMenu.setHideDelay(0);

                               

                                      UIMenuItem menItm = (UIMenuItem) ctx.getApplication().createComponent(ctx,

                                              UIMenuItem.COMPONENT_TYPE,

                                              "org.richfaces.MenuItemRenderer");

                                      menItm.setLabel("New");

                                      menItm.setIcon("/images/icons/create_doc.gif");

                                      Class[] params = {};

                                      MethodExpression me = ctx.getApplication()

                                              .getExpressionFactory()

                                              .createMethodExpression(ctx.getELContext(),

                                                      "#{dropDownMenuBean.doNew}", String.class, params);

                                      menItm.setActionExpression(me);

                                      menItm.setMode(Mode.ajax);

                               

                                     //Create an ID on your Item menu:

                                      menItm.setId("doNewId");

                               

                                      dropDownMenu.getChildren().add(menItm);

                                      // menItm.setOnclick("alert('hello');");

                               

                                      /*UIMenuItem menItm1 = (UIMenuItem) ctx.getApplication().createComponent(

                                              UIMenuItem.COMPONENT_TYPE);

                                      menItm1.setMode(Mode.ajax);

                                      menItm1.setRendered(false);

                                      dropDownMenu.getChildren().add(menItm1);*/

                               

                                      menuBar.getChildren().add(dropDownMenu);

                               

                                      return menuBar;

                                  }

                              }

                              {code}


                              Saroj, if you're still interested by the solution, tell me if it works even for you (normally yes)!

                              antoine.

                              • 12. Re: dynamically creating dropDownMenu in Richfaces4
                                Saroj Padhy Novice

                                @Antoine, Yes it works for me!

                                great work. Thanks a lot for your time.