How to display data in horizontal orientation in JSF as a relay in Asp.Net?

Question

I saw a data component in JSF that usually displays as a table row by row. But what should I do if I want to display something not in vertical orientation, but horizontally? Suppose I want to make a photo album, so I need to be able to display the rows of the database table in column format.

Answer 1

Use another UIData component in which you have full control over the output, for example Facelets' ui:repeat , Tomahawk's t:dataList or RichFaces rich:dataList or rich:dataList a4j:repeat .

eg.

 <ul> <ui:repeat items="#{bean.photos}" var="photo"> <li><img src="#{photo.url}" alt="#{photo.title}" /></li> </ui:repeat> </ul> 

combined with for example

 li { display: inline; list-style-type: none; } 

t:dataList and rich:dataList can display <ul> and <li> for you. You just need to print <img> (or h:graphicImage , if you wish) and apply a CSS snapshot.

Update : as a bonus and for horizontal page scrolling, it’s usually bad for UX, you would like to make it a carousel. Just create the <ul> element as follows:

 ul { width: 500px; /* Just pick whatever width it needs to be. */ white-space: nowrap; overflow-x: scroll; overflow-y: none; }