0 Replies Latest reply on May 22, 2010 11:09 AM by Ran Bittmann

    Newbie: Problem with Image loading and rendering

    Ran Bittmann Newbie

      Hi All,


      I am new to Seam and have a problem when trying to implement a profile page. I am using Seam 2.2.0.GA.


      My strategy is to have two entities, for the User and for his or her photo with a One to One connection with Lazy fetching.


      The Profile bean has a Conversation scope and a Manual Flush mode.


      In the page I am using the Seam graphic Image to display the image if exists, or a default icon if not, and the seam File Upload to load the image file. I am using Richfaces support tag to check for a change in the File Upload and re-render the Image , surrounded by an output panel, if changed.


      I have save and cancel buttons at the bottom of the page, where the save flushes the entity and the cancel clears it.


      What actually happens is that when I load a new image it is displayed as non-existent (default icon) but after saving and re-entering the page the correct picture appears. If I cancel the picture is removed (i.e. the older picture is removed and there is no picture, not the old one and not the newly loaded one).


      Since I am a Newbie, I am probably doing something wrong, but I have a hard time to figure it out. Any help will be much appreciated!


      The relevant code:


      @Stateful
      @Scope(ScopeType.CONVERSATION)
      @Name("profile")
      public class ProfileBean implements Profile
      {
           @Logger private Log log;
      
           @In private EntityManager entityManager;
           @In private Identity identity;
           @In StatusMessages statusMessages;
      
              ..........
      
           private User currentUser;
      
              ..........
      
           @SuppressWarnings("unchecked")
           @Create
           @Begin(join=true, flushMode=FlushModeType.MANUAL)
           public void start()
           {
      
                      ...........
      
                currentUser = (User)entityManager.createQuery("SELECT o FROM User o WHERE o.username = :username")
                .setParameter("username", identity.getCredentials().getUsername())
                .getSingleResult();
                if (currentUser != null)
                {
                     if (currentUser.getPhoto() == null)
                     {
                          currentUser.setPhoto(new Photo());
                          currentUser.getPhoto().setIdUser(currentUser.getIdUser());
                          currentUser.getPhoto().setSize(0);
                          log.info("profile.start() initialized photo for #{profile.currentUser.username}");
                     }
      
              .............
      
           }
      
           @End
           public void save()
           {
                if (currentUser != null)
                {
                     if (currentUser.getPhoto() == null ||
                          currentUser.getPhoto().getSize() == null ||
                          currentUser.getPhoto().getSize() == 0)
                     {
                          currentUser.setPhoto(null);
                          entityManager.createQuery("DELETE FROM Photo WHERE idUser = :idUser")
                          .setParameter("idUser", currentUser.getIdUser())
                          .executeUpdate();
                     }
      
             ..............
      
                     entityManager.flush();
                     log.info("profile.save() save profile for user: #{profile.currentUser.username}");
                     statusMessages.add(Severity.INFO,"Profile #{profile.currentUser.username} updated");
                }
           }
      
           @End
           public void cancel()
           {
                entityManager.clear();
                log.info("profile.cancel() cancelled changes to profile of user: #{profile.currentUser.username}");
                statusMessages.add(Severity.WARN, "Profile #{profile.currentUser.username} not updated");
           }
      
              ...........
      
      }
      
      



      @Entity
      @Table(name = "user")
      public class User implements java.io.Serializable {
      
      .........
      
           
           @OneToOne(fetch = FetchType.LAZY,
                     cascade=CascadeType.ALL)
           @PrimaryKeyJoinColumn
           public Photo getPhoto() { return photo; }
           public void setPhoto(Photo photo) { this.photo = photo; }
      }
      



      <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
           xmlns:s="http://jboss.com/products/seam/taglib"
           xmlns:ui="http://java.sun.com/jsf/facelets"
           xmlns:f="http://java.sun.com/jsf/core"
           xmlns:h="http://java.sun.com/jsf/html"
           xmlns:rich="http://richfaces.org/rich"
           xmlns:a="http://richfaces.org/a4j" template="layout/template.xhtml">
      
           <ui:define name="body">
      
                <h:form id="profileForm" enctype="multipart/form-data">
      
              ...........
      
                          <s:decorate id="photoField" template="layout/edit.xhtml">
                               <h:panelGrid columns="2">
                                         <h:panelGroup>
                                              <a:outputPanel id="imagePanel">
                                                   <s:graphicImage id="currentImage"
                                                        value="#{profile.currentUser.photo.data}"
                                                        rendered="#{profile.currentUser.photo.data != null}">
                                                        <s:transformImageSize width="50" maintainRatio="true"/>
                                                   </s:graphicImage>
                                                   <s:graphicImage id="defaultImage"
                                                        value="/img/defaultPhoto.png"
                                                        rendered="#{profile.currentUser.photo.data == null}"/>
                                              </a:outputPanel>
                                         </h:panelGroup>
                                    <a:region id="photoRegion">
                                         <s:fileUpload id="uploadImage"
                                              data="#{profile.currentUser.photo.data}"
                                              contentType="#{profile.currentUser.photo.contentType}"
                                              fileName="#{profile.currentUser.photo.name}"
                                              fileSize="#{profile.currentUser.photo.size}">
                                              <a:support event="onchange"     reRender="imagePanel"/>
                                         </s:fileUpload>
                                    </a:region>
                               </h:panelGrid>
                          </s:decorate>
                       ........
      
      
                     <div class="actionButtons"><h:commandButton id="save"
                          value="Save" action="#{profile.save}" /></div>
      
                     <div class="actionButtons"><h:commandButton id="cancel"
                          immediate="true" value="Cancel" action="#{profile.cancel}" /></div>
      
                </h:form>
      
           </ui:define>
      
      </ui:composition>