複数のグラフ（Googleビジュアライゼーション）を複数のタブで取得できない（GWT TabPanel）

Question

未知数のグラフを不明な数量（Google Visualizations）で表示する必要があります。私は "タブ"と "グラフ"クラスを作成し、TabにはArrayListが含まれています。

TabWrappersはFlexTableを拡張し、現在空です。現時点ではプレースホルダですが、TabWrapperではなくFlexTableを使用しても動作は変わりません。

Tab2を追加するセクションを除いた以下のコードは、グラフが挿入された1つのタブを作成するために完全に機能します。 2番目のタブを追加すると、両方のタブが正しく表示され、名前が付けられますが、どちらのグラフも表示されません。あなたはGWTでタブを使用すると

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()); 
     } 

... 

    } 

Answer 1

、各タブで開催されたパネルは怠惰なロードされたように見えると完全に各タブをユーザーがクリックするまで、設定されていません。

特に、タブのコンテナの幅と高さはゼロになります（エラーログでは幅がゼロのコンテナに関するエラーが発生する）ので、グラフの描画に失敗して空白が残ります。

あなたがしなければならないことは（とにかく、おそらく良い練習である）タブの内容を怠惰に読み込んで、タブが完全に設定されているときだけグラフが読み込まれるようにすることです。グラフはタブが選択されている場合にのみ追加され、描かれているように、

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

：これはコールt.setGraphs（...）を削除し、代わりにそれをしない選択ハンドラーを追加することによって行うことができます。

あなたはおそらくも選択ハンドラーが配置された後、最初のタブの選択を強制する

tabPanel.selectTab(0); 

を呼び出すことになるでしょう。

私はあなたと同じ問題を抱えており、これが解決しました。