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 a simple usage with dynamic items. Dynamic items can be put in a collection or list of FluidGridItem instances. A FluidGridItem instance contains a data object (of any data types) and an optional type property to match the type attribute in pe:fluidGridItem (see the example with dynamic form). Dynamic items can be accessed in XHTML via the value attribute and exposed via the var attribute. Click on the button below and resize the browser to test the fluid grid!

Note: The attribute hasImages is set to true to fix overlapping of items which are caused by unloaded images. If this attribute is set to true, the grid layout will be triggered after all images have been loaded and items have their proper sizes. The example also demonstrates the event layoutComplete which is fired after a layout of fluid grid and all positioning transitions have been completed.

<p:growl id="growl" showDetail="true" showSummary="true">
        <p:autoUpdate />
    </p:growl>
    
<pe:fluidGrid value="#{fluidGridDynamicController.images}" var="image"
              fitWidth="true" hasImages="true">
    <p:ajax event="layoutComplete" update="@none"
            listener="#{fluidGridDynamicController.fireLayoutComplete}"/>
    
    <pe:fluidGridItem>
        <h:graphicImage library="images" name="fluidgrid/#{image.name}"/>
    </pe:fluidGridItem>
</pe:fluidGrid>
            
<h:outputStylesheet id="fluidGridCSS">    
    img {
        margin-top: -4px;
    }
</h:outputStylesheet>
            

@Named
@ViewScoped
public class FluidGridDynamicController implements Serializable {

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

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

        for (int j = 0; j < 3; j++) {
            for (int i = 1; i <= 10; i++) {
                images.add(new FluidGridItem(new Image(i + ".jpeg")));
            }
        }
    }

    public List<FluidGridItem> getImages() {
        return images;
    }

    public void fireLayoutComplete(final LayoutCompleteEvent event) {
        final FacesMessage msg = new FacesMessage(FacesMessage.SEVERITY_INFO, "Fluid grid has been laid out", null);
        FacesContext.getCurrentInstance().addMessage(null, msg);
    }
}
            

public class Image implements Serializable {

    private static final long serialVersionUID = 1L;

    private String name;

    public Image() {
    }

    public Image(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}