Ticket #1751 (closed defect: fixed)

Opened 5 months ago

Last modified 4 months ago

Window move "tearing" (regression)

Reported by: Jani Laakso Owned by: Marko Gronroos
Priority: major Milestone: User Interface Library 5.2.2
Component: gwt-adapter-client Version: 5.2.0-rc
Keywords: Cc:
Known Issue description:
Hours estimate: Deadline (dd.mm.yyyy):
Known Issue version (since): Known Issue title:
Hours done: Depends to:
Affects documentation: no
Known Issue workaround:
Affects release notes: yes Contract:

Description

Window movement is not refreshed often enough in browser. When you move window widget it seems broken, sometimes disappears for couple seconds when moving it and we get lots of tearing and such anomalities.

Browser affected is Windows Firefox 2.0.0.14.

Here's an example application

  • test it first with 5.1.2 and

and then

  • with 5.2.0rc10

=> you notice the difference when moving Window.

It is easier to produce when you got more complex application running UIwise.

I got another application that I can show to you where it bugs even more annoyingly.

package com.itmill.example;

import java.util.Iterator;
import java.util.Vector;

import com.itmill.toolkit.Application;
import com.itmill.toolkit.ui.Button;
import com.itmill.toolkit.ui.CustomComponent;
import com.itmill.toolkit.ui.ExpandLayout;
import com.itmill.toolkit.ui.Label;
import com.itmill.toolkit.ui.OrderedLayout;
import com.itmill.toolkit.ui.Panel;
import com.itmill.toolkit.ui.SplitPanel;
import com.itmill.toolkit.ui.TabSheet;
import com.itmill.toolkit.ui.Table;
import com.itmill.toolkit.ui.Window;
import com.itmill.toolkit.ui.Button.ClickEvent;

public class Simple extends Application {

    @Override
    public void init() {
        String puppy = "asdfkahsdf hasdfhklasfljkafsd hjlafs"
                + " dhl ljhadfs hjlfdhjasdlkah jskldflhjasdfhja";

        Window main = new Window("IT Mill Toolkit 5");
        setMainWindow(main);

        SplitPanel split = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL);
        main.setLayout(split);
        split.setSplitPosition(100, SplitPanel.UNITS_POINTS);

        Window win = new Window("win");
        main.addWindow(win);
        win.setWidth(200);
        win.setHeight(100);

        TabSheet tab2 = new TabSheet();
        tab2.addComponent(new Panel("ssdasdfasdff"));
        tab2.addComponent(new Panel("asdfasdfasdf"));
        tab2.addComponent(new Panel("asdfasdfasdf"));
        win.addComponent(new Label(puppy));
        win.addComponent(tab2);

        TestForTablesInitialColumnWidthLogicRendering table = new TestForTablesInitialColumnWidthLogicRendering();
        table.setSizeFull();

        ExpandLayout el = new ExpandLayout();
        TestForTablesInitialColumnWidthLogicRendering table2 = new TestForTablesInitialColumnWidthLogicRendering();
        el.addComponent(new Label(puppy));
        el.addComponent(table2);
        el.expand(table2);

        split.setFirstComponent(el);
        split.setSecondComponent(table);

    }

    public class TestForTablesInitialColumnWidthLogicRendering extends
            CustomComponent {

        private final OrderedLayout main = new OrderedLayout();

        public TestForTablesInitialColumnWidthLogicRendering() {

            setCompositionRoot(main);
            createNewView();
        }

        public void createNewView() {
            main.removeAllComponents();
            main
                    .addComponent(new Label(
                            "Below are same tables that all should render somewhat nice. Also when testing, you might want to try resizing window."));

            Table t;

            // t = new Table("Empty table");
            // main.addComponent(t);

            t = getTestTable(5, 0);
            t.setCaption("Table with only headers");
            // main.addComponent(t);

            t = getTestTable(5, 200);
            t.setCaption("Table with  some cols and lot of rows");
            main.addComponent(t);

            t = getTestTable(5, 5);
            t
                    .setCaption("Table with  some cols and rows rows, some col widths fixed");

            Iterator it = t.getContainerPropertyIds().iterator();
            it.next();
            it.next();
            t.setColumnWidth(it.next(), 30);
            t.setColumnWidth(it.next(), 30);
            t.setWidth("700px");
            main.addComponent(t);

            t = getTestTable(12, 4);
            t.setCaption("Table with  some rows and lot of columns");
            main.addComponent(t);

            t = getTestTable(3, 40);
            t
                    .setCaption("Table with some columns and wide explicit width. (Ought to widen columns to use all space)");
            t.setWidth(1000);
            main.addComponent(t);

            t = getTestTable(12, 4);
            t
                    .setCaption("Table with  some rows and lot of columns, width == 100%");
            t.setWidth(100, Table.UNITS_PERCENTAGE);
            main.addComponent(t);

            t = getTestTable(12, 100);
            t
                    .setCaption("Table with  lot of rows and lot of columns, width == 50%");
            t.setWidth(50, Table.UNITS_PERCENTAGE);
            main.addComponent(t);

            t = getTestTable(5, 100);
            t.setCaption("Table with 40 rows");
            // main.addComponent(t);

            t = getTestTable(4, 4);
            t.setCaption("Table with some rows and width = 200px");

            t.setWidth(200);
            main.addComponent(t);

            final Button b = new Button("refresh view", this, "createNewView");
            main.addComponent(b);

        }

        public Table getTestTable(int cols, int rows) {
            final Table t = new Table();
            t.setColumnCollapsingAllowed(true);
            for (int i = 0; i < cols; i++) {
                t.addContainerProperty(testString[i], String.class, "");
            }
            t.addContainerProperty("button", Button.class, null);
            for (int i = 0; i < rows; i++) {
                final Vector content = new Vector();
                for (int j = 0; j < cols; j++) {
                    content.add(rndString());
                }
                content.add(new Button("b", new Button.ClickListener() {

                    public void buttonClick(ClickEvent event) {
                        System.out.println("b click");

                    }
                }));
                t.addItem(content.toArray(), "" + i);
            }
            return t;
        }

        String[] testString = new String[] { "Jacob", "Michael", "Joshua",
                "Matthew", "Ethan", "Andrew", "Daniel", "Anthony",
                "Christopher", "Joseph", "William", "Alexander", "Ryan",
                "David", "Nicholas", "Tyler", "James", "John", "Jonathan",
                "Nathan", "Samuel", "Christian", "Noah", "Dylan", "Benjamin",
                "Logan", "Brandon", "Gabriel", "Zachary", "Jose", "Elijah",
                "Angel", "Kevin", "Jack", "Caleb", "Justin", "Austin", "Evan",
                "Robert", "Thomas", "Luke", "Mason", "Aidan", "Jackson",
                "Isaiah", "Jordan", "Gavin", "Connor", "Aiden", "Isaac",
                "Jason", "Cameron", "Hunter", "Jayden", "Juan", "Charles",
                "Aaron", "Lucas", "Luis", "Owen", "Landon", "Diego", "Brian",
                "Adam", "Adrian", "Kyle", "Eric", "Ian", "Nathaniel", "Carlos",
                "Alex", "Bryan", "Jesus", "Julian", "Sean", "Carter", "Hayden",
                "Jeremiah", "Cole", "Brayden", "Wyatt", "Chase", "Steven",
                "Timothy", "Dominic", "Sebastian", "Xavier", "Jaden", "Jesse",
                "Devin", "Seth", "Antonio", "Richard", "Miguel", "Colin",
                "Cody", "Alejandro", "Caden", "Blake", "Carson" };

        public String rndString() {
            return testString[(int) (Math.random() * testString.length)];
        }

    }

}

Change History

Changed 5 months ago by Jani Laakso

Note, you might want to make simpler above example by reducing column count and components displayed in the UI.

Try this instead:

package com.itmill.example;

import java.util.Iterator;
import java.util.Vector;

import com.itmill.toolkit.Application;
import com.itmill.toolkit.ui.Button;
import com.itmill.toolkit.ui.CustomComponent;
import com.itmill.toolkit.ui.ExpandLayout;
import com.itmill.toolkit.ui.Label;
import com.itmill.toolkit.ui.OrderedLayout;
import com.itmill.toolkit.ui.Panel;
import com.itmill.toolkit.ui.SplitPanel;
import com.itmill.toolkit.ui.TabSheet;
import com.itmill.toolkit.ui.Table;
import com.itmill.toolkit.ui.Window;
import com.itmill.toolkit.ui.Button.ClickEvent;

public class Simple extends Application {

    @Override
    public void init() {
        String puppy = "asdfkahsdf hasdfhklasfljkafsd hjlafs"
                + " dhl ljhadfs hjlfdhjasdlkah jskldflhjasdfhja";

        Window main = new Window("IT Mill Toolkit 5");
        setMainWindow(main);

        SplitPanel split = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL);
        main.setLayout(split);
        split.setSplitPosition(100, SplitPanel.UNITS_POINTS);

        Window win = new Window("win");
        main.addWindow(win);
        win.setWidth(200);
        win.setHeight(100);

        TabSheet tab2 = new TabSheet();
        tab2.addComponent(new Panel("ssdasdfasdff"));
        tab2.addComponent(new Panel("asdfasdfasdf"));
        tab2.addComponent(new Panel("asdfasdfasdf"));
        win.addComponent(new Label(puppy));
        win.addComponent(tab2);

        TestForTablesInitialColumnWidthLogicRendering table = new TestForTablesInitialColumnWidthLogicRendering();
        table.setSizeFull();

        ExpandLayout el = new ExpandLayout();
        // TestForTablesInitialColumnWidthLogicRendering table2 = new
        // TestForTablesInitialColumnWidthLogicRendering();
        el.addComponent(new Label(puppy));
        Label someLabel = new Label(puppy);
        el.addComponent(someLabel);
        el.expand(someLabel);

        split.setFirstComponent(el);
        split.setSecondComponent(table);

    }

    public class TestForTablesInitialColumnWidthLogicRendering extends
            CustomComponent {

        private final OrderedLayout main = new OrderedLayout();

        public TestForTablesInitialColumnWidthLogicRendering() {

            setCompositionRoot(main);
            createNewView();
        }

        public void createNewView() {
            main.removeAllComponents();
            main
                    .addComponent(new Label(
                            "Below are same tables that all should render somewhat nice. Also when testing, you might want to try resizing window."));

            Table t;

            // t = new Table("Empty table");
            // main.addComponent(t);

            t = getTestTable(3, 0);
            t.setCaption("Table with only headers");
            // main.addComponent(t);

            t = getTestTable(3, 200);
            t.setCaption("Table with  some cols and lot of rows");
            main.addComponent(t);

            t = getTestTable(3, 5);
            t
                    .setCaption("Table with  some cols and rows rows, some col widths fixed");

            Iterator it = t.getContainerPropertyIds().iterator();
            it.next();
            it.next();
            t.setColumnWidth(it.next(), 30);
            t.setColumnWidth(it.next(), 30);
            t.setWidth("700px");
            main.addComponent(t);

            t = getTestTable(3, 4);
            t.setCaption("Table with  some rows and lot of columns");
            main.addComponent(t);

            t = getTestTable(3, 40);
            t
                    .setCaption("Table with some columns and wide explicit width. (Ought to widen columns to use all space)");
            t.setWidth(1000);
            main.addComponent(t);

            t = getTestTable(6, 4);
            t
                    .setCaption("Table with  some rows and lot of columns, width == 100%");
            t.setWidth(100, Table.UNITS_PERCENTAGE);
            main.addComponent(t);

            t = getTestTable(6, 100);
            t
                    .setCaption("Table with  lot of rows and lot of columns, width == 50%");
            t.setWidth(50, Table.UNITS_PERCENTAGE);
            main.addComponent(t);

            t = getTestTable(5, 100);
            t.setCaption("Table with 40 rows");
            // main.addComponent(t);

            t = getTestTable(4, 4);
            t.setCaption("Table with some rows and width = 200px");

            t.setWidth(200);
            main.addComponent(t);

            final Button b = new Button("refresh view", this, "createNewView");
            main.addComponent(b);

        }

        public Table getTestTable(int cols, int rows) {
            final Table t = new Table();
            t.setColumnCollapsingAllowed(true);
            for (int i = 0; i < cols; i++) {
                t.addContainerProperty(testString[i], String.class, "");
            }
            t.addContainerProperty("button", Button.class, null);
            for (int i = 0; i < rows; i++) {
                final Vector content = new Vector();
                for (int j = 0; j < cols; j++) {
                    content.add(rndString());
                }
                content.add(new Button("b", new Button.ClickListener() {

                    public void buttonClick(ClickEvent event) {
                        System.out.println("b click");

                    }
                }));
                t.addItem(content.toArray(), "" + i);
            }
            return t;
        }

        String[] testString = new String[] { "Jacob", "Michael", "Joshua",
                "Matthew", "Ethan", "Andrew", "Daniel", "Anthony",
                "Christopher", "Joseph", "William", "Alexander", "Ryan",
                "David", "Nicholas", "Tyler", "James", "John", "Jonathan",
                "Nathan", "Samuel", "Christian", "Noah", "Dylan", "Benjamin",
                "Logan", "Brandon", "Gabriel", "Zachary", "Jose", "Elijah",
                "Angel", "Kevin", "Jack", "Caleb", "Justin", "Austin", "Evan",
                "Robert", "Thomas", "Luke", "Mason", "Aidan", "Jackson",
                "Isaiah", "Jordan", "Gavin", "Connor", "Aiden", "Isaac",
                "Jason", "Cameron", "Hunter", "Jayden", "Juan", "Charles",
                "Aaron", "Lucas", "Luis", "Owen", "Landon", "Diego", "Brian",
                "Adam", "Adrian", "Kyle", "Eric", "Ian", "Nathaniel", "Carlos",
                "Alex", "Bryan", "Jesus", "Julian", "Sean", "Carter", "Hayden",
                "Jeremiah", "Cole", "Brayden", "Wyatt", "Chase", "Steven",
                "Timothy", "Dominic", "Sebastian", "Xavier", "Jaden", "Jesse",
                "Devin", "Seth", "Antonio", "Richard", "Miguel", "Colin",
                "Cody", "Alejandro", "Caden", "Blake", "Carson" };

        public String rndString() {
            return testString[(int) (Math.random() * testString.length)];
        }

    }

}

Changed 5 months ago by Joonas Lehtinen

  • priority changed from undefined to major
  • milestone set to User Interface Library 5.2.1

Changed 4 months ago by Marc Englund

  • status changed from new to closed
  • resolution set to fixed

Fixed in [4773]

Note: See TracTickets for help on using tickets.