Display images in rows & columns using dataTable in JSF 2.0, netbeans 6.9.1???

[fantastic]

Hi,

I have to display only images on a web page in JSF2.0 in Netbeans 6.9.1. I am using datatable and column to do so. But there is one problem.
All images are display only in single column(i.e. vertically). I want to display in rows and columns not only column.
e.g. One row will have atleast 3 images and more rows like this.

Which attribute should i use of datatable? or should i use some other tag?

My code is:

<h:dataTable var="images"
value="#{jsfMBean.allImages}"
rules="none"
cellpadding="20"
border="0" >

<h:column>
<h:graphicImage value="faces/WEB-INF/upload/#{images.picid}" width="300px" height="100px" />

</h:column>

</h:dataTable>

Thanks.

[Rick Fincher]

You can use <h:panelGrid> which renders as an HTML table. You can set
the number of columns. Use it with a <ui:repeat.

Or, just use a <ui:repeat> in a <div> with the components floated left
and set the width of the div, just wide enough to hold how ever many
columns you want.

Using that technique you can set the margins of the <div> to auto and
the images will fill in as many as will fit in a row as the user resizes
the browser.

See the docs at:
http://download.oracle.com/docs/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/docs/pdldocs/facelets/index.html

Rick

On 4/17/2011 8:23 PM, fantastic wrote:

[fantastic]

Hi,

I did not understand clearly what u wanted to tell. And div doesnt have width attribute.

but i tried as u told to do so as below, but still doesnt work:

<ui:repeat var="images" value="#{jsfMBean.allImages}">
<div align="left">

<h:graphicImage value="faces/WEB-INF/upload/#{images.picid}" width="300px" height="100px" />

</div>
</ui:repeat>

I even tried dataTable in a panelgrid. But that too didnt work.
Can u pls elaborate what u wanted to tell.

[Rick]

Hi Fantastic,

A good reference book for all this is "Core java Server Faces, Third
Edition" by David Geary and Cay Horstmann. Be sure to get the 3rd
Edition because it has all the JSF 2.0 Stuff.

Another good one is "JavaServerFaces 2.0: The Complete Reference" in
"The Complete Reference" series of books by Ed Burns and Chris Schalk.

Below is a rough example of a ui:repeat with an h:panelGrid. The
h:panelGrid renders as a <table>. In this case it will be a table with 3
columns, each cell in the table will be padded by 4 spaces all around.

In the ui:repeat the "value" refers to a List of objects in a backing
bean that gets iterated. The "var" is a shorthand name for the list
item in the current iteration. In this case we are calling it "info".

In this case I made "value" a list returned from a search. That list is
a list of objects thar we are calling "info". The "info" objects have a
property called "productImageURLString" that we are retrieving. It is a
URL to an image which we are plugging in to an h:graphicImage.

The varStatus is a class that holds information about the status of the
List iteration. In this case we are calling the varStatus object
"loop". There are several useful things you can get from "loop", in
this case we are using it to print out the picture number by retrieving
the loop index from "loop".

By putting the picture number and the picture in a panelGroup they are
rendered as one cell in the <table>. If you want to get even more
primitive and have more control you can use <table>, <tr>, and <td> with
a ui:repeat in there somewhere.

<h:panelGrid columns="3" cellpadding="4" >

<ui:repeat id="repeat" value="#{booksBean.booksSearchList}"
var="infoObject" varStatus="loop">
<h:panelGroup>
<h:graphicImage value="#{infoObject.productImageURLString}"
width="75px" alt="image not available" />
Picture Number: #{loop.index}
</h:panelGroup>
</ui:repeat>

</h:panelGrid>

This will result in 3 pictures and their picture numbers being rendered
before a new row is added to the table.

The repeat will continue until all of the items in the list are
displayed. There are numerous other attributes that you can add to
<ui:repeat> so that it starts iterating offset from the beginning or
only iterates a set number of objects rather than the whole list. You
can use a step="3" so that it only returns every 3rd object in the list,
etc.

If your list contained String objects that were URL for an image rather
than another object that contained strings, you could just use:

<h:graphicImage value="#{infoObject}" width="75px" alt="image not
available" />

There are also numerous other things that you can add to <h:panelGrid>
to add headers, footers, etc., etc.

See the docs here:
http://download.oracle.com/docs/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/docs/pdldocs/facelets/index.html

Rick

On 4/19/2011 1:52 AM, fantastic wrote:

[jyeary]

The image should fill the div based on the values provided. If not, you can set the div width by using a CSS style, such as style="width:300px;"

John

On Tue, Apr 19, 2011 at 1:52 AM, fantastic <address-removed ([email]address-removed[/email])> wrote: