• Home
• com.guicedee.examples.faces
• primefaces-extensions-showcase
• 1.1.0.6
• source code
• dynamic.xhtml

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

sections.fluidgrid.dynamic.xhtml Maven / Gradle / Ivy

    
        
            
        
        
            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.
        
        
        
            
        
        
        
            
${showcase:getFileContent('/sections/fluidgrid/examples/example-dynamic.xhtml')}
            
            
${showcase:getFileContent('/org/primefaces/extensions/showcase/controller/fluidgrid/FluidGridDynamicController.java')}
            
            
${showcase:getFileContent('/org/primefaces/extensions/showcase/model/fluidgrid/Image.java')}