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 specifies elements which are stamped within the layout. These are special layout elements which will not be laid out by FluidGrid. Rather, FluidGrid will layout items below stamped elements. To specify stamped elements, use the stamp attribute which can be any search expression supported by the PrimeFaces Search Expression Framework.

Furtermore, some client-side widget's methods will be demonstrated too. Stamped elements can be toggled by the widget's method unstamp() and stamp(). The layout can be triggered automatically by the widget's method layout(). Note: When the fluid grid is within a layout pane / unit, it re-layouts itself automatically on resizing this layout pane / unit. In this case, set the attribute resizeBound to false to deacivate the re-layouting when resizing the browser window.

Source

XHTML page


<pe:fluidGrid stamp="@(.pe-fluidgrid .stamp)" resizeBound="false" widgetVar="fluidGridWdgt">
    <div class="stamp"></div>
    
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header w2 h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header h3"/>
    <pe:fluidGridItem styleClass="ui-widget-header h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header w3"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header w2 h3"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header w2 h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header w2"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header h3"/>
    <pe:fluidGridItem styleClass="ui-widget-header h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header w2 h2"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header h3"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header w3"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header w2"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
    <pe:fluidGridItem styleClass="ui-widget-header"/>
</pe:fluidGrid>
            
<p:commandButton value="Toggle stumped" type="button" style="margin-top:15px;"
                 onclick="toggleStamped()"/>

<h:outputScript id="fluidGridScript" target="body">
/* <![CDATA[ */
    isStamped = true;
    
    function toggleStamped() {
        // stamp or unstamp element
        if (isStamped) {
            PF('fluidGridWdgt').unstamp($(".pe-fluidgrid .stamp").get());
        } else {
            PF('fluidGridWdgt').stamp($(".pe-fluidgrid .stamp").get());
        }
        
        // trigger layout
        PF('fluidGridWdgt').layout();
        
        isStamped = !isStamped;
    }
/* ]]> */
</h:outputScript>
            
<h:outputStylesheet id="fluidGridCSS">
    .pe-fluidgrid {
        max-width: 1000px;
        position: relative;
    }
    
    .pe-fluidgrid .pe-fluidgrid-item {
        width:  60px;
        height: 60px;
        background: #D26;
        border: 1px solid orange;
        border-radius: 5px;
        opacity: 0.7;
    }
    
    .pe-fluidgrid-item.w2 {width: 120px;}
    .pe-fluidgrid-item.w3 {width: 180px;}    
    .pe-fluidgrid-item.h2 {height: 100px;}
    .pe-fluidgrid-item.h3 {height: 130px;}
    
    .pe-fluidgrid .stamp {
        position: absolute;
        right: 15%;
        top: 10px;
        width: 50%;
        height: 70px;
        background: orange;
        border: 4px dotted black;
    }
</h:outputStylesheet>

Use Cases

Documentation

pe:fluidGrid
pe:fluidGridItem

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

Name	Description
id	Unique identifier of the component in a naming container.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	Name of the client side widget.
value	Collection of items (FluidGridItem) representing model of this component.
var	Name of the request-scoped variable for the underlaying object for each iteration.
varContainerId	Name of the request-scoped variable which contains the prefix of the client ID within pe:fluidGridItem. This property allows to get the whole clientId of a component within pe:fluidGridItem. The whole client ID is sometimes required for JavaScript or RequestContext.update(...).
style	Style of the main container element. Default value is null.
styleClass	Style class of the main container element. Default value is null.
hGutter	Horizontal space between item elements (interpreted as pixels). Default is 0.
vGutter	Vertical space between item elements (interpreted as pixels). Default is 0.
fitWidth	Sets the width of the container to fit the available number of columns, based on the size of container's parent element. When enabled, you can center the container with CSS. Note: This option does not work with percentage width of items. Default is false.
originLeft	Controls the horizontal flow of the layout. By default, item elements start positioning at the left. Set to false for right-to-left layouts.
originTop	Controls the vertical flow of the layout. By default, item elements start positioning at the top. Set to false for bottom-up layouts. It's like Tetris!
resizeBound	Binds layout to window resizing. You can bind and unbind resize layout afterward with the bindResize and unbindResize client-side widget's methods. Default is true.
stamp	Specifies which elements are stamped within the layout. These are special layout elements which will not be laid out. Rather, FluidGrid will lay out item elements below stamped elements. You can use here every search expressions supported by PrimeFaces Search Expression Framework. Default is null.
transitionDuration	Duration of the transition when items change position or appearance, set in a CSS time format. To disable all transitions, set this attribute to null. Default is 0.4s.
hasImages	Boolean flag if items contain any images. This can fix overlapping items which are caused by items that change size after a layout due to unloaded media like images. Setting this flag allows to lay out all items after they have their proper sizes (images have been loaded). Default value is false.

Events (move mouse over the names to see classes)

Name	Description
layoutComplete	fired after a layout and all positioning transitions have been completed.

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

Name	Description
id	Unique identifier of the component in a naming container.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.
type	Type corresponding to FluidGridItem. Default value is "default".
styleClass	Style class of the container element for this item. Default value is null.