Невозможно получить несколько диаграмм (визуализация Google) на нескольких вкладках (панель вкладок GWT)

Мне нужно отобразить неизвестное количество вкладок, каждая с неизвестным количеством графиков (Google Visualizations). Я создал классы «Tab» и «Graph», и Tab содержит ArrayList.

TabWrappers расширяет FlexTable и в настоящее время пуст. На данный момент это заполнитель, но поведение не меняется, если я использую FlexTable, а не TabWrapper.

Приведенный ниже код без раздела, который добавляет Tab2, отлично подходит для создания 1 вкладки, заполненной графиками. При добавлении второй вкладки обе вкладки отображаются и называются правильно, но ни одна из них не имеет графиков.

    public class SomeClass {

...

        DataTable data = response.getDataTable();
        DataView result;
        Options options = createOptions();

        ArrayList<Tab> displayTab = new ArrayList<Tab>();
        Tab t;
        ArrayList<Graph> graphList = new ArrayList<Graph>();
        Graph g;

        t = new Tab();

            g = new Graph();
            result = DataView.create(data);
            result.setRows(new int[]{0, 2, 4, 6});
            g.setGraphType(new PieChart(result, options));
            graphList.add(g);

            g = new Graph();
            result = DataView.create(data);
            result.setRows(new int[]{1, 3, 5, 7});
            g.setGraphType(new PieChart(result, options));
            graphList.add(g);

            g = new Graph();
            result = DataView.create(data);
            g.setGraphType(new PieChart(result, options));
            graphList.add(g);

        t.setTabName("Tab1");
        t.setGraphs(graphList);
        displayTab.add(t);
        // Add a 2nd tab
        t = new Tab();
        t.setTabName("Tab2");
        t.setGraphs(graphList);
        displayTab.add(t);

        TabWrapper tabWrapper;
        for (Tab tX : displayTab){
            int row = 0, col = 0, maxCol = 2;
            tabWrapper = new TabWrapper();
            for (Graph gX : tX.getGraphs()) {
                col = tX.getGraphs().indexOf(gX) - (row * maxCol);
                tabWrapper.setWidget(row, col, gX.getGraphType().asWidget());
                if (++col == maxCol) {
                    row++;
                }
            }
        tabPanel.add(tabWrapper, tX.getTabName());
        }

...

    }

arraylist google-visualization flextable tabpanel gwt
person Bill Mote    schedule 02.07.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Когда вы используете вкладки в GWT, панели, содержащиеся на каждой вкладке, кажутся загруженными лениво и не полностью настраиваются до тех пор, пока пользователь не нажимает на каждую вкладку.

В частности, контейнеры вкладок будут иметь нулевую ширину и высоту (журналы ошибок, вероятно, будут давать ошибку о контейнерах, имеющих нулевую ширину), поэтому отрисовка графика завершится ошибкой и останется пустое пространство.

Что вам нужно сделать (и, вероятно, в любом случае это хорошая практика), так это отложить загрузку содержимого вкладок, чтобы график загружался только тогда, когда вкладка полностью настроена. Это можно сделать, удалив вызов t.setGraphs (...) и добавив обработчик выбора, который делает это вместо этого:

tabPanel.addSelectionHandler(new SelectionHandler<Integer> () {
    public void onSelection(SelectionEvent<Integer> event) {
        // Pseudocode:
        // n = event.getSelectedItem()
        // t = displayTab[n]
        // g = graphList[n]
        // t.setGraphs(g)
    }
});

так что графики добавляются и рисуются только тогда, когда выбрана вкладка.

Вы, вероятно, также захотите позвонить

tabPanel.selectTab(0);

для принудительного выбора первой вкладки после того, как обработчик выбора будет на месте.

У меня были те же проблемы, что вы описываете, и это решило их.

person Josh B    schedule 09.09.2011