How to show images (blob type) into vaadin grid ?
Is there any good example ?
How to define right class for coloumns that will hold blob (i store my images as blob in mysql) type image in vaadin grid ? I also want to show default picture (user_pic.jpg) in vaadin grid from resources ("/WEB-INF/images/user_pic.jpg") if user doesn't have picture.
PSEUDO CODE:
if (user have picture)
show his picture in grid
else
show default picture from resources
SOLUTION TO MY PROBLEM:
I used table instead grid. Here is my code for emdadding pictures into table:
Person tr = tap.get(i);
Embedded emb=new Embedded("myembeddedimage");
StreamResource.StreamSource source = new StreamResource.StreamSource() {
public InputStream getStream() {
//get blob inputstream
return new ByteArrayInputStream(tr.getPicture());
}
};
//create StreamResource from blob inputstream and name it.
StreamResource sourceone=new StreamResource(source, "mypicture.png");
sourceone.setCacheTime(0l);
emb.setHeight("200px");
emb.setWidth("150px");
//if user doesn't have image, the embedded image source is set to image from resource
emb.setSource(tr.getPicture()==null? new ThemeResource("images/user_pic.jpg"): sourceone);
CheckBox checkbox=new CheckBox();
checkbox.setConvertedValue(false);
tPartners.addItem((new Object[] {emb,
(tr.getName() +" "+ tr.getSurname()), -2,checkbox}),tr);
I hope someone will find this code useful. This code is good example how to insert image into table if you have your image (as blob for example) stored in database.
1)
I also want to show default picture (user_pic.jpg) in vaadin grid from resources ("/WEB-INF/images/user_pic.jpg") if user doesn't have picture.
This should be easily doable by using the ImageRenderer shipped with Vaadin using a ThemeResource, but you may need to move your image under your theme directory instead: webapp/VAADIN/themes/your_theme/images
2)
How to show images (blob type) into vaadin grid ?
As far as I know there isn't (yet) a built-in renderer that can do what you need, which seems to be confirmed by this question in the Vaadin forum. So far the ImageRenderer sources indicate that it only supports either ExternalResource or ThemeResource:
@Override
public JsonValue encode(Resource resource) {
if (!(resource == null || resource instanceof ExternalResource || resource instanceof ThemeResource)) {
throw new IllegalArgumentException(
"ImageRenderer only supports ExternalResource and ThemeResource ("
+ resource.getClass().getSimpleName() + " given)");
}
You will probably have to implement your own renderer. Here and here you might find a starting point. And btw, if you do decide to write your implementation, please consider sharing it with the rest of the world, I'm sure a lot of people would benefit from it :-)
Later edit:
I just thought of a hack you can use with the standard ImageRenderer. If you can store your images encoded as base64 strings then you can wrap them in a ExternalResource doing something like this:
public static class MyBean {
private ExternalResource image;
private String name, surname;
public MyBean(ExternalResource image, String name, String surname) {
this.image = image;
this.name = name;
this.surname = surname;
}
public ExternalResource getImage() {
return image;
}
public String getName() {
return name;
}
public String getSurname() {
return surname;
}
}
public class MyGridComponent extends VerticalLayout {
public MyGridComponent() {
BeanItemContainer<MyBean> dataSource = new BeanItemContainer<>(MyBean.class);
Grid grid = new Grid(dataSource);
addComponent(grid);
grid.getColumn("image").setRenderer(new ImageRenderer());
grid.setColumnOrder("image", "name", "surname");
dataSource.addItem(new MyBean(
new ExternalResource("data:image/png;base64,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"),
"Agent",
"Smith"));
dataSource.addItem(new MyBean(
new ExternalResource("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCAAeAB4DASIAAhEBAxEB/8QAGgAAAQUBAAAAAAAAAAAAAAAABAACAwUGB//EABcBAQEBAQAAAAAAAAAAAAAAAAADAQT/2gAMAwEAAhADEAAAAeftG1UdMKjrOWzrVaZPLo6E/8QAHBAAAgMBAQEBAAAAAAAAAAAAAgMBBAUTABES/9oACAEBAAEFAurI8wvvsSuJ1rPMzFDZEcp05uHITUcULmj09YWd5kqDPturT2ot6NCPzGsqCrQ6SD//xAAYEQADAQEAAAAAAAAAAAAAAAAAARESIf/aAAgBAwEBPwGmVBIs4f/EABoRAAMAAwEAAAAAAAAAAAAAAAABAhESITL/2gAIAQIBAT8BeqL9Mq3nhXVk/8QAIhAAAgEDAwUBAAAAAAAAAAAAAQIAAxESITFRBBMyYXFB/9oACAEBAAY/AiwIZOOIvyNVqDKxsAZoopkcTJVNjO4d76Q0zkr03yYcy7GeFk+Smh0VBZRx7nTspL06gwJb8MYuqlTtfaHSEiE+xBP/xAAgEAEAAgICAwADAAAAAAAAAAABABEhMUFxUWGBoeHx/9oACAEBAAE/IUCo2XHxOkvC2+C3bMZsquH5CaGArmEQAJy/EYfJBFl7bXnlmm0Bkc5ocwrR57Tnzl/ydR6tL2f1AM643KBA6mSoX17v9wvDgcvqf//aAAwDAQACAAMAAAAQbSwf/8QAGREBAQADAQAAAAAAAAAAAAAAAQARITFB/9oACAEDAQE/EMjsMW0bhZeL/8QAGREAAwEBAQAAAAAAAAAAAAAAAAEhETFB/9oACAECAQE/EFptNNSIMDNHvh//xAAgEAEAAgMAAgIDAAAAAAAAAAABESEAMUFRcWGhgbHw/9oACAEBAAE/EEKNKCHiVhgtgiY9YPRfsQFDuwjH2ZkZ/SfnLm8Csesmc0pBkdv6zFIoowsAo80IeB7iY82yeH0YIXBNgfMqHdOQ5MdczRtRb6CMWfSwfqtS1FwDesnomp/i6C6crJG7suCXCBWib/WA5EWcgiSeNsmRXpiyDr5XP//Z"),
"There is",
"No spoon"));
dataSource.addItem(new MyBean(
new ExternalResource("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAIAAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A860jSYdNKrYqPKRgT3Pz8Yz6Gum1AeEvAXhqbU9elkjt3kKmMnfLM6qcLGvbAOM5xUEyG0vPsJh+ztbSyxhFbphuMke3FR/tA+Bf+Ej0rwnqEdvcXem6dDc395Z2UW6ecDa21MkAklQuOvPQ9K8/T4mfNrl5faS0/rQ4Xwr8cPA2vvdf2vocuhaZbpsW8ikMxEuMqGXA6gHkcdq9E1nwhZ6bFpN/pskV7C8a3scqrhGD4II/D1r2L9nL9p/4S3PwbvIfE/hfWLHT7u+TQ3s7rRHulaWWM7Y96K2QQhOTjBx0rmfHGgW3w+8N6boEQMn2K3WFQxyyKWLhP+Aqdufaq1ktR+/VXvK3kcVaaZfeLdUuJlZjcSzGW4ZuBuyWJPbrmr2s/Fzw5qWkXOh6PcveT6AR9pvkx5D+Y33YyDlsFDz09K+cfjh+07LJpc3hfw3ZyaRZHKXMxbMt0vGAcD5V/wBkE57nivGPC3iDXPC2r/bLC6jvEukC3UEmfLcdgcY5wc5HTNEorl33NK1Lmw7jffa5+xn7K9/cw/DvxJ4nnvor2LVJwsRjn3+WIgVCheccEk9DnHGOa8I+J2ty6v4mvLhlPlurZGOM/dH8hXzLqH7aGoeEvCPw60zwx4ds/DB8M3t3c3P2ZjIuotcLh/NBAyMZGOT0wRgV7P4J+Ofhn4yyRRPZjRNTuz+6USb4JHH8OTyhyRgNnORzSg0opE4dKlSiuh//2Q=="),
"The",
"One"));
}
}
Which should get you something similar to:
