I am creating an application with a very specific requirement to display the image content as part of a ‘listview’. I need to utilize FieldGroup to display the retrieved content and plug-in the ability to edit the image by the user too.
So far I have managed to get the image display as part of the list view, for that I have implemented StreamSource to get the external byte array:
public class ImageSource implements StreamSource {
private byte bytes;
public ImageSource(byte image) {
this.bytes = image;
}
@Override
public InputStream getStream() {
return new ByteArrayInputStream(bytes);
}
}
And set it to my custom implementation of BeanItemContainer:
public class ImageModelContainer extends BeanItemContainer<ImageContainerBean>
implements Serializable {
....
private void initContainers() {
try {
TableQuery q1 = new TableQuery("testblob", connectionPool);
q1.setVersionColumn("VERSION".toLowerCase());
imageContainer = new SQLContainer(q1);
// TODO this.addNestedContainerProperty(null);
for (int i = 0; i < imageContainer.size(); i++) {
ImageContainerBean model = new ImageContainerBean();
Object id = imageContainer.getIdByIndex(i);
Item item = imageContainer.getItem(id);
StreamSource imagesource = new ImageSource((byte[]) item
.getItemProperty("image").getValue());
StreamResource resource = new StreamResource(imagesource,
(String) item.getItemProperty("image_name").getValue());
Image image = new Image((String) item.getItemProperty(
"image_name").getValue(), resource);
model.setImage(image);
....
However, I cannot think of a way in which a user can click on this particular row of the listview and:
1. He sees the image when the FieldGroup in non-editable
2. Is able to upload a different image and save it
Please note: I can work on editing and saving logic separately since these are working just fine for the text fields.
I just need a direction or a pointer as to how I can achieve this custom field to display and edit the image being displayed on the UI.
I will appreciate any help on this one, thanks for the help!
Any ideas? I am trying to get it working with easyuploads add on but so far no luck. I basically want an Image as part of the FormField (and make it editable of course).
I am sorry I couldnt get your question. Can you please elaborate more precisely what your are trying to achieve what do you mean by listView? is it Table? If not me some one from the community or the Vaadin team would be able get back to you with a good solution
I was tired and might have just mentioned the listview for the context - I realize it might have caused some confusion there and I apologize for that. My real intent is to display the image as part of the FieldGroup (big typo is my immediate previous post as well - it’s not a FormField).
I have a Pojo (below) with a property of type
com.vaadin.ui.Image
along with the other String and Integer values.
public Image getImage() {
return image;
}
public void setImage(Image image) {
this.image = image;
}
My requirement is to display the image as part of the table which I am able to achieve. However, I also need to work on this Image as a normal form element, for example when I edit the form, I have an editable text field to type in the name Image name and change it, the same way I intend to display an upload button where I have this image.
I have tried using easyuploads add on for this purpose by intercepting the build method of
FieldGroup and specifying the Image field as of type
org.vaadin.easyuploads.UploadField
Like this;
@Override
@SuppressWarnings({ "rawtypes", "unchecked" })
protected <T extends Field> T build(String caption, Class<?> dataType,
Class<T> fieldType) throws BindException {
T field = super.build(caption, dataType, fieldType);
if (caption.equalsIgnoreCase("image")) {
final UploadField imageField = new UploadField() {
@Override
protected void updateDisplay() {
final byte[] pngData = (byte[]
) getValue();
String filename = getLastFileName();
String mimeType = getLastMimeType();
long filesize = getLastFileSize();
if (mimeType.equals("image/png")) {
StreamSource imagesource = new ImageSource(pngData);
StreamResource resource = new StreamResource(
imagesource, "Uploaded File");
...
This however fails to display the already available image and displays the upload option instead.
Any other cleaner way of using an Image as part of the FieldGroup?
Yes exactly, I need to display the image as usual and when the user uploads a new image, the new image is replaces the old one. To me it seems simple if I use the upload option, however I need to have this image as part of the FieldGroup and Upload does not implement the Field interface.
The only missing piece in this example is - can there be an option of having an editable image field? For example, in the case discussed there, can the example be modified to include a Person’s profile picture?
I didnt look at your reply and my apologies for that. Can you please share the stripped down version of what you have done. So that I can check and get back to you with my findings.