PrimeFaces Extensions Showcase

FluidGrid

FluidGrid allows to set up a nice tight grid with items that have variable heights and widths. FluidGrid is a responsive grid. That means, the grid will reflow as the window size changes. Items can have any content: text, images, links, input fields, etc. They can be defined in a static or in a dynamic way as in data iteration components.

This example demonstrates how to design a responsive dynamic grid with input fields. This is similar to the DynaForm component in PrimeFaces Extensions, but the grid is not a fixed table in this case. It is responsive! Try to resize the browser window. Tip: You will achieve a consistent alignment across all field blocks if you place the labels above the input fields.

The attribute type of pe:fluidGridItem should match the corresponding type property of FluidGridItem.

First Label*

Second Label

Third Label

Fourth Label

Fifth Label*

Sixth Label

Seventh Label

Eighth Label

Ninth Label

Source


                <p:growl id="growl" showDetail="true" showSummary="true">
                <p:autoUpdate/>
            </p:growl>

            <pe:fluidGrid id="fluidGrid" value="#{fluidGridDynaFormController.items}" var="data"
                          resizeBound="false" hGutter="20" widgetVar="fluidGridWdgt" style="width:600px">
                <pe:fluidGridItem type="input">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="txt" value="#{data.label}"/>
                    </div>
                    <p:inputText id="txt" value="#{data.value}" required="#{data.required}"/>
                </pe:fluidGridItem>
                <pe:fluidGridItem type="select" styleClass="select">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="menu" value="#{data.label}"/>
                    </div>
                    <p:selectOneMenu id="menu" value="#{data.value}" required="#{data.required}">
                        <f:selectItems value="#{data.selectItems}"/>
                    </p:selectOneMenu>
                </pe:fluidGridItem>
                <pe:fluidGridItem type="calendar" styleClass="calendar">
                    <div class="dynaFormLabel">
                        <p:outputLabel for="cal" value="#{data.label}"/>
                    </div>
                    <p:calendar id="cal" value="#{data.value}" required="#{data.required}" showOn="button"/>
                </pe:fluidGridItem>
            </pe:fluidGrid>

            <p:commandButton value="Submit" style="margin-top: 10px;"
                             process="fluidGrid" update=":mainForm:fluidGrid :mainForm:inputValues"
                             oncomplete="if(!args.validationFailed) {PF('inputValuesWidget').show();}"/>

            <p:dialog header="Input values" widgetVar="inputValuesWidget">
                <p:dataList id="inputValues" value="#{fluidGridDynaFormController.items}" var="item"
                            style="margin:10px;">
                    <h:outputText value="#{item.data.label} : #{item.data.value}" style="margin-right:15px;"/>
                </p:dataList>
            </p:dialog>

            <h:outputStylesheet id="fluidGridCSS">
                .pe-fluidgrid-item {
                    width: 160px;
                    height: 60px;
                }

                .pe-fluidgrid-item input {
                    width: 150px;
                }

                .pe-fluidgrid-item.calendar input {
                    width: 120px;
                }

                .pe-fluidgrid-item.select .ui-selectonemenu {
                    width: 134px !important;
                }

                .dynaFormLabel {
                    font-weight: bold;
                    margin-bottom: 7px;
                }
            </h:outputStylesheet>


                @Named
@ViewScoped
public class FluidGridDynaFormController implements Serializable {

    private static final long serialVersionUID = 1L;
    private List<FluidGridItem> items;

    @PostConstruct
    protected void initialize() {
        items = new ArrayList<FluidGridItem>();

        final List<SelectItem> selectItems = new ArrayList<SelectItem>();
        selectItems.add(new SelectItem("1", "Label 1"));
        selectItems.add(new SelectItem("2", "Label 2"));
        selectItems.add(new SelectItem("3", "Label 3"));

        items.add(new FluidGridItem(new DynamicField("First Label", null, true, null), "input"));
        items.add(new FluidGridItem(new DynamicField("Second Label", "Some default value", false, null), "input"));
        items.add(new FluidGridItem(new DynamicField("Third Label", null, false, selectItems), "select"));
        items.add(new FluidGridItem(new DynamicField("Fourth Label", "2", false, selectItems), "select"));
        items.add(new FluidGridItem(new DynamicField("Fifth Label", null, true, null), "calendar"));
        items.add(new FluidGridItem(new DynamicField("Sixth Label", new Date(), false, null), "calendar"));
        items.add(new FluidGridItem(new DynamicField("Seventh Label", null, false, null), "input"));
        items.add(new FluidGridItem(new DynamicField("Eighth Label", null, false, selectItems), "select"));
        items.add(new FluidGridItem(new DynamicField("Ninth Label", null, false, null), "calendar"));
    }

    public List<FluidGridItem> getItems() {
        return items;
    }
}


                public class DynamicField implements Serializable {

    private static final long serialVersionUID = 1L;
    private String label;
    private Object value;
    private boolean required;
    private List<SelectItem> selectItems;

    public DynamicField() {
    }

    public DynamicField(String label, Object value, boolean required, List<SelectItem> selectItems) {
        this.label = label;
        this.value = value;
        this.required = required;
        this.selectItems = selectItems;
    }

    public String getLabel() {
        return label;
    }

    public void setLabel(String label) {
        this.label = label;
    }

    public Object getValue() {
        return value;
    }

    public void setValue(Object value) {
        this.value = value;
    }

    public boolean isRequired() {
        return required;
    }

    public void setRequired(boolean required) {
        this.required = required;
    }

    public List<SelectItem> getSelectItems() {
        return selectItems;
    }

    public void setSelectItems(List<SelectItem> selectItems) {
        this.selectItems = selectItems;
    }
}