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

Use Cases

Documentation

pe:fluidGrid
pe:fluidGridItem

Attributes (move mouse over the names to see data types)

Name	Description
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
fitWidth	When true, grid fits within the container width.Default is false.
hGutter	Horizontal gutter between items in pixels.Default is 0.
hasImages	When true, images are taken into account for layout (wait for load).Default is false.
id	Unique identifier of the component in a namingContainer.Default is generated.
originLeft	When true, items are laid out from left to right.Default is true.
originTop	When true, items are laid out from top to bottom.Default is true.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
resizeBound	When true, layout is recalculated on window resize.Default is true.
stamp	Search expression for element(s) to stamp - hidden during layout.
style	Inline style for the grid.
styleClass	Style class for the grid.
transitionDuration	CSS transition duration for layout changes.Default is 0.4s.
vGutter	Vertical gutter between items in pixels.Default is 0.
value	The dynamic data model (e.g. DynaFormModel).
var	Name of the request-scoped variable that exposes the current row/control data.
varContainerId	Name of the request-scoped variable that exposes the current container client id.
widgetVar	Name of the client-side widget variable.

Attributes (move mouse over the names to see data types)

Name	Description
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
id	Unique identifier of the component in a namingContainer.Default is generated.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
styleClass	Style class for the grid item wrapper.
type	Item type identifier; must match a FluidGridItem type in the model.Default is default.