Strange Table behaviour

Hi all, I ran across a strange behaviour from the Table component: am I missing anything?

  1. Problem with Images in cells.
    a) Add rows to the Table.
    b) Have Image objects into row cells, scaled as 300px x 200px.
    c) Now every Image is shown, but with the original size.
    d) If you just make something to the Table (e.g.: resize a column), then the Image objects are shown with the correct (300x200) size.

  2. Problem with ImageScalers in cells.
    a) Add rows to the Table.
    b) Have ImageScaler objects into row cells, scaled as 300px x 200px.
    c) Now ImageScalers are not visible.
    d) If you just make something to the Table (e.g.: resize a column, click on a cell, etc.), then the ImageScaler objects become visible, and scaled to the correct size.

It seems to me that Image/ImageScaler don’t get some events when they need to be drawn in the first place.

Is there anything I can do for that? Is it a Vaadin bug, or is it my fault?

Thanks a lot for your help,

can we see code how is generated yours images ? cause I worked with images in table and don’t had any problem.

This is how the table is created (ATable merely overrides Table’s formatPropertyValue() for other special cases, not involved in this example:

this.restaurantSearchListWidget = new ATable(); this.restaurantSearchListWidget.setImmediate(true); this.restaurantSearchListWidget.addContainerProperty("picture", ImageScaler.class, null, "", null, Table.Align.CENTER); this.restaurantSearchListWidget.addContainerProperty("restaurant", String.class, null, t("Restaurant"), null, Table.Align.LEFT); this.restaurantSearchListWidget.setWidth("100%"); this.restaurantSearchListWidget.setPageLength(AApplicationCore.TABLE_FULL_PAGE_LENGTH); this.restaurantSearchListWidget.addValueChangeListener((Property.ValueChangeListener)this); this.contentWidget.addComponent(this.restaurantSearchListWidget); so it is set as “immediate”.

Every time the page is generated or refreshed (F5), the following is called:

    protected void loadRestaurantSearchListData() {
        try {
// ...
            LinkedList<LinkedHashMap<String, Object>> restaurants = database.getRestaurantSearchList(regionIdFilter, provinceIdFilter /*, textFilter */, true);
            IndexedContainer restaurantSearchListContainer = new IndexedContainer();
            restaurantSearchListContainer.addContainerProperty("picture", ImageScaler.class, null);
            restaurantSearchListContainer.addContainerProperty("restaurant", String.class, null);
            for (LinkedHashMap<String, Object> restaurant: restaurants) {
                Item item = restaurantSearchListContainer.addItem((Long)restaurant.get("restaurantId"));
                String picture = (String)restaurant.get("picture");
                if (null != picture) {
                    ImageScaler pictureWidget = new ImageScaler();
                    pictureWidget.setImage(new FileResource(new File(this.getApplicationCore().getRestaurantPictureArchivePath() + picture)), AApplicationCore.RESTAURANT_THUMBNAIL_WIDTH, AApplicationCore.RESTAURANT_THUMBNAIL_HEIGHT);
                    pictureWidget.setWidth(AApplicationCore.RESTAURANT_THUMBNAIL_WIDTH + "px");
                    pictureWidget.setHeight(AApplicationCore.RESTAURANT_THUMBNAIL_HEIGHT + "px");
        catch (ADatabaseException exception) {
// ...

As I said, no image is shown at first (but you can read the other data, as the restaurant name); you have to perform some action on the Table (clicking on a row, modifying a column size, etc.).

If I use Image instead of ImageScaler, then the image is effectively shown at first, but at full size (i.e.: 2000 x 1200); I have to perform some action on the Table in order to scale it at the desired size.

I also tried pictureWidget.setImmediate(true) between lines 18 and 19, but with no luck.

Anyway, ticket opened:

Thank you for your help,

Hi, ok ,I tried to test this add-on (ImageScaler) and he has a really strange comportament,especially for make this work I need to set imageScaler.setSizeFull() and when image is showed she doesn’t get my prefered size,if I set width and height after setSizeFull() then this settings are for div wich contains the image and image still remains to be generated with absolutely unclear width and height, however I didn’t saw some big difference in comparision with Ebbedded vaadin component(Embedded.TYPE_IMAGE) wich provide practical the same functionality for images but without some widgetset(i.e. pure vaadin component), I would advise to try Embedded.

Hi Pavlov, ImageScaler may have some bugs or the like, but I was experiencing the problem with Image too.

After some days of debugging, it turned out it was not a problem with Table itself, or Image, or ImageScaler. My application was overriding UI.beforeClientResponse(), and that was causing problems to Layout and Table components.

(Anyway, I strongly support And I’m going to resume
this old thread
of mine.)

Thanks a lot,