Display image problems

[orkin]

Hello,

sorry for my bad english, I'm French.

I use JSF1.2 and Richfaces 3.3.3.FINAL.

I have a display problem in relation to my images. Indeed, I want to display my images in series of 4 per line with a maximum of 5 lines for a total of 20 images. I do not want to use the DataGrid component RichFaces because it does not allow me to do what I want. Including a display of frames (with the default CSS) even when there is not enough to complete the image online. For example I have two pictures on the last line I go through the last 2 as they are empty.

I opted for a short <a4j:repeat>.

I get the url of my images in a database and displays them with a <a4j:mediaOutput>. Until then I get good pictures to display my 20. I said that I have above and below each image a title, owner's name etc ...

The problem is that I can not get my 4 images online they are all under each other. I tried to use several components such as a limitation <h:panelGrid> column but to no avail. I can not have multiple rows of four images.

I join the schemes and I get what I'd like to have. The first is that I have on my website and the second is that I want.

If anyone has an idea to put me on the right track would greatly appreciated:).

Orkin

[orkin]

Someone can help me ?

[mp911de]

Hi Orkin,

this is more a styling and CSS issue than a RichFaces issue. I would suggest to create a div around the images and make them inline, this sould be an acceptable way.

Best regards,

Mark

[orkin]

I Mark Paluch and thanx for your answer.

I have tried your suggestion but it's not work.

I show you my code for example

<a4j:form>
        <h:panelGrid columns="4">
          <div style="display: inline"> // div 1
            <a4j:repeat var="photo" value="#{listePhotoBean.photosValid}">
               <div style="display: inline"> // div 2
                <h:panelGrid columns="1" border="1" width="240px">
                    <a4j:commandLink value="#{photo.nomPhoto}" />
                    <a4j:commandLink>
                        <h:graphicImage value="#{photo.nomFichier}" width="180px"
                            title="#{photo.nomPhoto}" alt="#{photo.nomPhoto}" />
                        <a4j:actionparam name="idPhoto" value="#{photo.id}"
                            assignTo="#{listePhotoBean.idPhoto}" />
                    </a4j:commandLink>
                    <h:panelGroup>
                        <h:outputLabel value="Publié par : " />
                        <a4j:commandLink value="#{photo.nomUtilisateur}" />
                    </h:panelGroup>
                    <h:outputLabel value="Vu : x fois" />
                </h:panelGrid>
               </div> // div 2
            </a4j:repeat>
          </div> //div 1
        </h:panelGrid>
    </a4j:form>

When I remove <h:panelGrid columns="1" border="1" width="240px"> it's work a little but I don't have that I want.

I have add one of this div but there is no change. I would like that the content of <a4f:repeat> is one block and i would like 4 block on one line.

[mp911de]

Hi,

you need to use c:forEach to make it work. It has something todo with buildTime-Tags/view-Tags. Try following code:

<h:panelGrid columns="4">

  <c:forEach var="photo" items="#{listePhotoBean.photosValid}">

  <h:panelGroup>

  <h:panelGrid columns="1" border="1" width="240px">

  <a4j:commandLink value="#{photo.nomPhoto}" />

  <a4j:commandLink>

  <h:graphicImage value="#{photo.nomFichier}" width="180px"

  title="#{photo.nomPhoto}" alt="#{photo.nomPhoto}" />

  </a4j:commandLink>

  <h:panelGroup>

  <h:outputLabel value="Publié par : " />

  <a4j:commandLink value="#{photo.nomUtilisateur}" />

  </h:panelGroup>

  <h:outputLabel value="Vu : x fois" />

  </h:panelGrid>

  </h:panelGroup>

  </c:forEach>

  </h:panelGrid>

Best regards,

Mark

[orkin]

Thanx for your answer I will try it. But I think the tag <c:forEach> is not the same as JSF life cycle is not likely that it not be a problem ?

[mp911de]

Hi,

initial it will work (i tried it), but i don't know whether a fully ajaxified version will work in the correct way because i did not try.

an other approach could be using XHTML and putting the repeatable part into an external template.

Best regards,

Mark

[orkin]

Hi Mark, your solution work but there is a lot of SQL request than <a4j:repeat> have you an other idee because it's can be a problem where there is a lot of people on my website.

[mp911de]

Hi,

i don't know where you fire your SQL statements. The best practice is to do a prepare of your model where you load everything you want to display on your page to your model and then there would be no more Database interaction after you have loaded your data to memory.

Best regards,

Mark

[orkin]

Hi,

My application is split into four meven modules : Model (matches my EJB), DAO, Services (which call the DAO) and Bean (display part).  So when I use JSF components normally I have no problem everything works fine, no SQL supperflux etc ... When I use the JSTL <c:forEach> an SQL-like "SELECT * FROM my pictures" is executed for each pictures to display. If I have 5 images to be displayed, I would have five times the SQL that will search for all images to be displayed which is a bit silly since the first I have all the information I need.

For now I think using this solution that will allow me to delay in the display but it does not please me at all, since when I have thousands of pictures it will very quickly become problematic ...

And I don't understand why there is one SQL request by image ... I think it's because <c:forEach> is not in the same lifecycle than JSF composants.