Contd. Richfaces 4

In continuation to my previous post on Richfaces 4 Why and How!

Creating dynamic Richfaces 4 components:

Adding dynamic components to the page is little bit tricky now! Though it's a temporary solution which I am going to post, but later it will work as it used to work before!

The issue is when we create a dynamic component it does not appear in the first go, or may appear with the only texts but no styling! Then we would wonder what's gone wrong!

The reason for this I found in Richfaces forum is:

Actually it's just JSF 2 problem which I believe should be solved at some point by the Oracle and Apache guys. Dynamically rendering of the components (which was at component tree before but just not rendered) works fine in JSF as it pre-renders resources for all the components even for those which are not rendered. But that is not applied to the case when the component was not present in JSF tree at all. And unfortunately it's your case. And the only workaround we found:

add <dropDownMenu rendered="false"/> to the page.

So, for e.g. we have rich:dropDownMenu, which we want to create dynamically and add menu items dynamically, to make it work in the web page, we need to add dummy components with rendered attribute false to the page. Below is a sample code:

dropdownmenu.xhtml

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

DropDownMenuBean.java

@ManagedBean
@ViewScoped
public class DropDownMenuBean {
    private UIToolbar menuBar;
  
    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");
        menItm.setMode(Mode.ajax);
        menItm.setOnclick("alert('hello');");

        dropDownMenu.getChildren().add(menItm);

        UIMenuItem menItm2 = (UIMenuItem) ctx.getApplication().createComponent(ctx,
                UIMenuItem.COMPONENT_TYPE,
                "org.richfaces.MenuItemRenderer");
        menItm2.setLabel("Open");
        menItm2.setIcon("/images/icons/open_doc.gif");
        menItm2.setMode(Mode.ajax);
        menItm2.setOnclick("alert('hello2');");

        dropDownMenu.getChildren().add(menItm2);

        menuBar.getChildren().add(dropDownMenu);
      
        return menuBar;
    }
}

This way it's done for other dynamic components, creating dummy components with rendered attribute set to false. I by myself at least found out for dropDownMenu and extendedDataTable, I need to do this while creating dynamically!

That's it for now! :)

Read more »

Posted in: dropdownmenu,dynamic component creation,Richfaces4