HI,
I would put a image in a table cell but the image must conform to the height and width (32x32) of the table cell and when the user click a window shows the image in the real size.
How could do this?
Thanks!
You could use a PopupView in your table, with the small view being your scaled down image. Plain html + css can scale down your image. If the images are large, you are better off with two images (one scaled down, the other large), in order to reduce load time in your table.
There is also an
ImageScaler
add-on that might be useful
Hi, I have this code but the application does not work.
I tried to enter a imageScaler in a table but when I launch the application does not show any component.
no table is okay but I need a table with a preview image in a cell!
Help me please!!
public class ImagescalerapplicationApplication extends Application {
private static final long serialVersionUID = -2044472624988550966L;
@Override
public void init() {
Window mainWindow = new Window("ImageScaler");
setMainWindow(mainWindow);
Table t=new Table();
t.setWidth("400px");
t.setHeight("400px");
t.addContainerProperty("ImagePreview" , ImageScaler.class, null);
VerticalLayout layout = new VerticalLayout();
layout.addComponent(t);
layout.setSizeFull();
layout.setMargin(true);
mainWindow.setContent(layout);
ImageScaler imageScaler = new ImageScaler();
//layout.addComponent(imageScaler);
// set the image and specify it's size
imageScaler.setImage(new ThemeResource("../images/ombrello.jpg"), 300, 300);
// make ImageScaler to take all the available space
//imageScaler.setSizeFull();
t.addItem(new Object[]{imageScaler}, new Integer(1));
}
}
You should look at using a ColumnGenerator to create the ImageScalar component in the table. Look at the
Book Of Vaadin
for more details
Cheers,
Charles.
Hi Charles, thanks for the reply!
However I tried columnGenerated but does not work!
this is my code:
@Override
public void init() {
Window mainWindow = new Window(“ImageScaler”);
setMainWindow(mainWindow);
Table t=new Table();
t.setWidth("300px");
t.setHeight("400px");
t.addContainerProperty("ImagePreview" , ImageScaler.class, null);
VerticalLayout layout = new VerticalLayout();
layout.addComponent(t);
layout.setSizeFull();
layout.setMargin(true);
mainWindow.setContent(layout);
t.addGeneratedColumn("ImagePreview", new ColumnGenerator() {
public Object generateCell(Table source, Object itemId, Object columnId) {
ImageScaler imageScaler = (ImageScaler) itemId;
imageScaler.setImage(new ThemeResource("../images/ombrello.jpg"), 300, 300);
// TODO Auto-generated method stub
return imageScaler;
}
});
}
}
Can You help me please??? thanks!!!
Hi,
It’s not working because you haven’t got any rows.
You should really get to grip with Tables and Containers : have you read the
Book of Vaadin
? I strongly suggest that you do. One of the best things about Vaadin is it’s documentation - it’s a waste not to use it.
Anyway, here’s a a complete self-contained example of using a column generator to show an image as a column in the table. I’ve not used the ImageScaler because - well, I’ve never used the ImageScaler! That’s irrelevant here. The principle is exactly the same : I’ve even shown you where and how to use it.
BTW : important to note that every row in a Vaadin table should be the same height => You should probably to scale the images to a constant width and height.
Cheers,
Charles.
public class TestWindow extends Window {
public TestWindow() {
IndexedContainer container = createContainer();
Table table = createTable(container);
VerticalLayout mainLayout = new VerticalLayout();
mainLayout.addComponent(table);
mainLayout.setSizeFull();
setContent(mainLayout);
}
/* Build a model for the table with the data : Lots of ways of doing this;
Just a quick-and-dirty example */
private IndexedContainer createContainer() {
IndexedContainer container = new IndexedContainer();
container.addContainerProperty("title", String.class, null);
container.addContainerProperty("url", String.class, null);
container.addContainerProperty("height", Integer.class, null);
container.addContainerProperty("width", Integer.class, null);
addItem(container, "Sami Viitanen", "http://vaadin.com/vaadin-theme/images/company/personnel/alump.png", 121, 134);
addItem(container, "Anna Koskinen", "http://vaadin.com/vaadin-theme/images/company/personnel/anna.png", 121, 134);
addItem(container, "Artur Signell", "http://vaadin.com/vaadin-theme/images/company/personnel/artur.png", 121, 134);
return container;
}
private void addItem(IndexedContainer container, String title, String url, int height, int width) {
Object itemId = container.addItem();
container.getItem(itemId).getItemProperty("title").setValue(title);
container.getItem(itemId).getItemProperty("url").setValue(url);
container.getItem(itemId).getItemProperty("height").setValue(height);
container.getItem(itemId).getItemProperty("width").setValue(width);
}
private Table createTable(IndexedContainer container) {
Table table = new Table("Image Table", container);
table.setSizeFull();
table.addGeneratedColumn("image", new Table.ColumnGenerator() {
@Override
public Object generateCell(Table source, Object itemId, Object columnId) {
Item item = source.getItem(itemId);
String url = (String) item.getItemProperty("url").getValue();
int height = (Integer) item.getItemProperty("height").getValue();
int width = (Integer) item.getItemProperty("width").getValue();
return new Embedded("", new ExternalResource(url)) {
/* Here I am simply generating an Embedded for the component, as I've not
downloaded the ImageScaler component. Approach is exactly the same : something like
ImageScaler scaler new ImageScaler();
scaler.setImage(new new ExternalResource(url), width, height);
return scaler;
*/
};
}
});
table.setVisibleColumns(new Object[]{"image", "title"});
table.setColumnExpandRatio("title", 1f);
return table;
}
}
Hello Charles,
you are absolutely right but it’s a week I try to do something, I’m using vaadin recently and I decided to ask for help.
I pretended not a fast response, but was just looking for someone to give me some help.
I tried reading the book vaadin and in the meantime I have posted the question.
Thanks for the reply and sorry for my attitude but I was exasperated.
Have a nice day
No Worries!
THE RESULT OF THE APPLICATION WITH THE IMAGESCALER COMPONENT IS SHOWN IN THE ATTACHED IMAGE!
THERE IS SOME CONFLICT BETWEEN TABLE AND IMAGESCALER!!!
ANY SOLUTIONS?
Maybe you should follow Charles’ advices more carefully.
P.S.: STOP SHOUTING!!1!!!111 You won’t get any better help by that.
(ignoring shouting, against better judgement)
OK - so it seems that ImageScaler needs a size set on it.
table.addGeneratedColumn("image", new Table.ColumnGenerator() {
@Override
public Object generateCell(Table source, Object itemId, Object columnId) {
Item item = source.getItem(itemId);
String url = (String) item.getItemProperty("url").getValue();
int height = (Integer) item.getItemProperty("height").getValue();
int width = (Integer) item.getItemProperty("width").getValue();
ImageScaler scaler = new ImageScaler();
scaler.setImage(new ExternalResource(url), width, height);
scaler.setSizeFull();
return scaler;
}
})
Now - I’ve no idea exactly what you want to achieve - but this works. It may not deliver exactly what you want - it doesn’t do exactly what I expected - but there are images in the table using the ImageScaler component; I’ve gone as far as I can. Probably better to direct any queries with the ImageScaler to it’s author.
Charles.
Hi Charles, thank you for the replay.
However, I resolved in another way, I used imageFilter component and I set the height and width of the Image component as they do a set of the “content of the component” and not of the component itself. (https://vaadin.com/forum/-/message_boards/view_message/393457)
thank you very much
soon