Newbie: Problem with Image loading and rendering
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>