1

我需要显示未知数量的选项卡，每个选项卡都带有未知数量的图表（Google 可视化）。我创建了“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());
        }

...

    }
4

1 回答 1

2

当您在 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);

在选择处理程序到位后强制选择第一个选项卡。

我遇到了你描述的同样的问题，这解决了它。

于 2011-09-09T03:13:27.183 回答