9 Replies Latest reply on Sep 21, 2011 5:55 AM by orkin

    Display image problems

    orkin Newbie

      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

        • 1. Re: Display image problems
          orkin Newbie

          Someone can help me ?

          • 2. Re: Display image problems
            Mark Paluch Master

            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

            • 3. Re: Display image problems
              orkin Newbie

              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.

              • 4. Re: Display image problems
                Mark Paluch Master

                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

                1 of 1 people found this helpful
                • 5. Re: Display image problems
                  orkin Newbie

                  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 ?

                  • 6. Re: Display image problems
                    Mark Paluch Master

                    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

                    • 7. Re: Display image problems
                      orkin Newbie

                      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.

                      • 8. Re: Display image problems
                        Mark Paluch Master

                        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

                        • 9. Re: Display image problems
                          orkin Newbie

                          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.