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:

      public class ProfileBean implements Profile
           @Logger private Log log;
           @In private EntityManager entityManager;
           @In private Identity identity;
           @In StatusMessages statusMessages;
           private User currentUser;
           @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())
                if (currentUser != null)
                     if (currentUser.getPhoto() == null)
                          currentUser.setPhoto(new Photo());
                          log.info("profile.start() initialized photo for #{profile.currentUser.username}");
           public void save()
                if (currentUser != null)
                     if (currentUser.getPhoto() == null ||
                          currentUser.getPhoto().getSize() == null ||
                          currentUser.getPhoto().getSize() == 0)
                          entityManager.createQuery("DELETE FROM Photo WHERE idUser = :idUser")
                          .setParameter("idUser", currentUser.getIdUser())
                     log.info("profile.save() save profile for user: #{profile.currentUser.username}");
                     statusMessages.add(Severity.INFO,"Profile #{profile.currentUser.username} updated");
           public void cancel()
                log.info("profile.cancel() cancelled changes to profile of user: #{profile.currentUser.username}");
                statusMessages.add(Severity.WARN, "Profile #{profile.currentUser.username} not updated");

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

      <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
           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">
                                              <a:outputPanel id="imagePanel">
                                                   <s:graphicImage id="currentImage"
                                                        rendered="#{profile.currentUser.photo.data != null}">
                                                        <s:transformImageSize width="50" maintainRatio="true"/>
                                                   <s:graphicImage id="defaultImage"
                                                        rendered="#{profile.currentUser.photo.data == null}"/>
                                    <a:region id="photoRegion">
                                         <s:fileUpload id="uploadImage"
                                              <a:support event="onchange"     reRender="imagePanel"/>
                     <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>