2012-07-03 7 views
8

GWT 2.5 RC CellTableBuilder APIが導入されましたが、包括的なドキュメントはまだありません。 CellTableBuilderでオンデマンドのカスタム行をビルドするチュートリアル\例がありますか?これまで私が見つけた唯一の例はhttp://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGridでしたが、それは私にはかなり混乱しています。GWT CellTableBuilderでオンデマンドでカスタム行を作成

私の目標は、テーブル内のクリックされた行に関する詳細を提供するウィジェットを含む余分な行を作成することです。

+1

あなたは答えを見つけた場合は、EDITとしてそれを投稿しないでください。それを答えとして入れて、他の人にも恩恵を受けるようにしてください。 –

答えて

6

私はこの問題に適した解決策を見つけました。ここでのコードサンプルは次のとおりです。

public class CustomCellTableBuilder extends AbstractCellTableBuilder<Object>{ 
//here go fields, ctor etc. 

//ids of elements which details we are going to show 
private Set elements; 

@Override 
protected void buildRowImpl(Object rowValue, int absRowIndex){ 
    //building main rows logic 

    if(elements.contains(absRowIndex)){ 
     buildExtraRow(absRowIndex, rowValue); 
     elements.add(absRowIndex); 
    } 
} 

private void buildExtraRow(int index, Object rowValue){ 
    TableRowBuilder row = startRow(); 
    TableCellBuilder td = row.startTD().colSpan(getColumns().size()); 
    DivBuilder div = td.startDiv(); 

    Widget widget = new Widget(); 

    //update widget state and appearance here depending on rowValue 

    div.html(SafeHtmlUtils.fromTrustedString(widget.getElement().getInnerHTML())); 

    div.end(); 
    td.endTD(); 
    row.endTR(); 
}} 

あなたが余分な行の出現につながるいくつかのイベントを処理するとき、あなたはTableBuilderに取り付けられている。CellTable上redrawRaw(rowIndexプロパティ)を呼び出す必要があることを、言及されるべきです。また、この呼び出しの前に、Set要素にターゲット行IDを追加する必要があります。

希望しました。

+1

「rowValueに応じてウィジェットの状態と外観を更新する」というコメントにどのようなコードがあるのか​​を表示できますか?あなたは行のためのセルを構築する必要がありますか?私はウィジェットをラベルとして設定するような簡単なテストを試みていましたが、何も起こりません。 –

+1

@NunoGonçalves、ラベルを 'widget'の子として追加しましたか?デバッガは 'buildExtraRow(int index、Object rowValue)'メソッドにステップインしましたか? –

+1

@NunoGonçalves、私はこの実装から私のニーズに適した自己記述テーブルコンポーネントに変更したことに言及する必要があります:子ウィジェットとして別の 'CellTable'が必要で、イベント伝播に多くの問題があります。 –

0

GWTの行を拡張するためにこのクラスを作成しました。これは、展開する列を受け取り、2つの状態を持つことができるプレースホルダーで置き換えます。

は、私はこのようにそれを使用します。

PlaceHolderColumn<Notification, SafeHtml> placeholder = new PlaceHolderColumn<Notification, SafeHtml>(new SafeHtmlCell()) { 
     @Override 
     public SafeHtml getValue(Notification object) { 
      return SafeHtmlUtils.fromSafeConstant(getSelected() ? "<i class=\"glyphicon glyphicon-chevron-down\"></i>" 
        : "<i class=\"glyphicon glyphicon-chevron-right\"></i>"); 
     } 
    }; 

    notificationsTable.setTableBuilder(new ExpandableCellTableBuilder<Notification, SafeHtml>(notificationsTable, columnBody, placeholder)); 

は私が代わりにここに+/-

<画像であるデフォルトのプレースホルダ列のそれらを使用するので、glyphiconへのアクセス権を持っている...しかし不足のため評判の:(

columnBody上記のコードサンプルでは、​​テーブルの幅にまたがる標準の列です。置き場所は、columnBodyの任意の位置にその場所に表示されますに座る。誰かを助け

希望:)

public class ExpandableCellTableBuilder<T, U> extends AbstractCellTableBuilder<T> { 

private Column<T, U> expandColumn = null; 
private PlaceHolderColumn<T, ?> placeholderColumn = null; 

private final String evenRowStyle; 
private final String oddRowStyle; 
private final String selectedRowStyle; 
private final String cellStyle; 
private final String evenCellStyle; 
private final String oddCellStyle; 
private final String firstColumnStyle; 
private final String lastColumnStyle; 
private final String selectedCellStyle; 

public static class ExpandMultiSelectionModel<T> extends AbstractSelectionModel<T> { 

    Map<Object, T> selected = new HashMap<Object, T>(); 

    /** 
    * @param keyProvider 
    */ 
    public ExpandMultiSelectionModel(ProvidesKey<T> keyProvider) { 
     super(keyProvider); 
    } 

    /* 
    * (non-Javadoc) 
    * 
    * @see com.google.gwt.view.client.SelectionModel#isSelected(java.lang.Object) 
    */ 
    @Override 
    public boolean isSelected(T object) { 
     return isKeySelected(getKey(object)); 
    } 

    protected boolean isKeySelected(Object key) { 
     return selected.get(key) != null; 
    } 

    /* 
    * (non-Javadoc) 
    * 
    * @see com.google.gwt.view.client.SelectionModel#setSelected(java.lang.Object, boolean) 
    */ 
    @Override 
    public void setSelected(T object, boolean selected) { 
     Object key = getKey(object); 
     if (isKeySelected(key)) { 
      this.selected.remove(key); 
     } else { 
      this.selected.put(key, object); 
     } 
     scheduleSelectionChangeEvent(); 
    } 
} 

public static abstract class PlaceHolderColumn<T, C> extends Column<T, C> { 

    private boolean isSelected; 

    /** 
    * @param cell 
    */ 
    public PlaceHolderColumn(Cell<C> cell) { 
     super(cell); 
    } 

    protected boolean getSelected() { 
     return isSelected; 
    } 

} 

private int expandColumnIndex; 

public ExpandableCellTableBuilder(AbstractCellTable<T> cellTable, Column<T, U> expandColumn) { 
    this(cellTable, expandColumn, new ExpandMultiSelectionModel<T>(cellTable.getKeyProvider()), null); 
} 

public ExpandableCellTableBuilder(AbstractCellTable<T> cellTable, Column<T, U> exandColumn, SelectionModel<T> selectionModel) { 
    this(cellTable, exandColumn, selectionModel, null); 
} 

public ExpandableCellTableBuilder(AbstractCellTable<T> cellTable, Column<T, U> exandColumn, PlaceHolderColumn<T, ?> placeHolder) { 
    this(cellTable, exandColumn, new ExpandMultiSelectionModel<T>(cellTable.getKeyProvider()), placeHolder); 
} 

/** 
* @param cellTable 
* @param columnBody 
*/ 
public ExpandableCellTableBuilder(AbstractCellTable<T> cellTable, Column<T, U> expandColumn, SelectionModel<T> selectionModel, 
     PlaceHolderColumn<T, ?> placeHolder) { 
    super(cellTable); 

    this.expandColumn = expandColumn; 

    this.cellTable.setSelectionModel(selectionModel); 

    if (placeHolder == null) { 
     this.placeholderColumn = new PlaceHolderColumn<T, String>(new TextCell()) { 
      @Override 
      public String getValue(T object) { 
       return getSelected() ? "-" : "+"; 
      } 
     }; 
    } else { 
     this.placeholderColumn = placeHolder; 
    } 

    // Cache styles for faster access. 
    Style style = cellTable.getResources().style(); 
    evenRowStyle = style.evenRow(); 
    oddRowStyle = style.oddRow(); 
    selectedRowStyle = " " + style.selectedRow(); 
    cellStyle = style.cell(); 
    evenCellStyle = " " + style.evenRowCell(); 
    oddCellStyle = " " + style.oddRowCell(); 
    firstColumnStyle = " " + style.firstColumn(); 
    lastColumnStyle = " " + style.lastColumn(); 
    selectedCellStyle = " " + style.selectedRowCell(); 
} 

/* 
* (non-Javadoc) 
* 
* @see com.google.gwt.user.cellview.client.AbstractCellTableBuilder#buildRowImpl(java.lang.Object, int) 
*/ 
@Override 
protected void buildRowImpl(T rowValue, int absRowIndex) { 
    // Calculate the row styles. 
    SelectionModel<? super T> selectionModel = cellTable.getSelectionModel(); 
    final boolean isSelected = (selectionModel == null || rowValue == null) ? false : selectionModel.isSelected(rowValue); 
    boolean isEven = absRowIndex % 2 == 0; 
    StringBuilder trClasses = new StringBuilder(isEven ? evenRowStyle : oddRowStyle); 
    if (isSelected) { 
     trClasses.append(selectedRowStyle); 
    } 

    // Add custom row styles. 
    RowStyles<T> rowStyles = cellTable.getRowStyles(); 
    if (rowStyles != null) { 
     String extraRowStyles = rowStyles.getStyleNames(rowValue, absRowIndex); 
     if (extraRowStyles != null) { 
      trClasses.append(" ").append(extraRowStyles); 
     } 
    } 

    // Build the row. 
    TableRowBuilder tr = startRow(); 
    tr.className(trClasses.toString()); 

    // Build the columns. 
    int columnCount = cellTable.getColumnCount(); 
    for (int curColumn = 0; curColumn < columnCount; curColumn++) { 
     Column<T, ?> column = cellTable.getColumn(curColumn); 

     if (column == expandColumn) { 
      expandColumnIndex = curColumn; 
      column = placeholderColumn; 
      placeholderColumn.isSelected = isSelected; 
     } 

     // Create the cell styles. 
     StringBuilder tdClasses = new StringBuilder(cellStyle); 
     tdClasses.append(isEven ? evenCellStyle : oddCellStyle); 
     if (curColumn == 0) { 
      tdClasses.append(firstColumnStyle); 
     } 
     if (isSelected) { 
      tdClasses.append(selectedCellStyle); 
     } 
     // The first and last column could be the same column. 
     if (curColumn == columnCount - 1) { 
      tdClasses.append(lastColumnStyle); 
     } 

     // Add class names specific to the cell. 
     Context context = new Context(absRowIndex, curColumn, cellTable.getValueKey(rowValue)); 
     String cellStyles = column.getCellStyleNames(context, rowValue); 
     if (cellStyles != null) { 
      tdClasses.append(" " + cellStyles); 
     } 

     // Build the cell. 
     HorizontalAlignmentConstant hAlign = column.getHorizontalAlignment(); 
     VerticalAlignmentConstant vAlign = column.getVerticalAlignment(); 
     TableCellBuilder td = tr.startTD(); 
     td.className(tdClasses.toString()); 
     if (hAlign != null) { 
      td.align(hAlign.getTextAlignString()); 
     } 
     if (vAlign != null) { 
      td.vAlign(vAlign.getVerticalAlignString()); 
     } 

     // Add the inner div. 
     DivBuilder div = td.startDiv(); 
     div.style().outlineStyle(OutlineStyle.NONE).endStyle(); 

     // Render the cell into the div. 
     renderCell(div, context, column, rowValue); 

     // End the cell. 
     div.endDiv(); 
     td.endTD(); 
    } 

    // End the row. 
    tr.endTR(); 

    if (isSelected) { 
     buildExpandedRow(rowValue, absRowIndex, columnCount, trClasses, isEven, isSelected); 
    } 
} 

/** 
* @param trClasses 
* 
*/ 
private void buildExpandedRow(T rowValue, int absRowIndex, int columnCount, StringBuilder trClasses, boolean isEven, boolean isSelected) { 
    TableRowBuilder tr = startRow(); 
    tr.className(trClasses.toString()); 

    Column<T, ?> column = expandColumn; 
    // Create the cell styles. 
    StringBuilder tdClasses = new StringBuilder(cellStyle); 
    tdClasses.append(isEven ? evenCellStyle : oddCellStyle); 
    tdClasses.append(firstColumnStyle); 
    if (isSelected) { 
     tdClasses.append(selectedCellStyle); 
    } 
    tdClasses.append(lastColumnStyle); 

    // Add class names specific to the cell. 
    Context context = new Context(absRowIndex, expandColumnIndex, cellTable.getValueKey(rowValue)); 
    String cellStyles = column.getCellStyleNames(context, rowValue); 
    if (cellStyles != null) { 
     tdClasses.append(" " + cellStyles); 
    } 

    // Build the cell. 
    HorizontalAlignmentConstant hAlign = column.getHorizontalAlignment(); 
    VerticalAlignmentConstant vAlign = column.getVerticalAlignment(); 
    TableCellBuilder td = tr.startTD(); 
    td.colSpan(columnCount); 
    td.className(tdClasses.toString()); 
    if (hAlign != null) { 
     td.align(hAlign.getTextAlignString()); 
    } 
    if (vAlign != null) { 
     td.vAlign(vAlign.getVerticalAlignString()); 
    } 

    // Add the inner div. 
    DivBuilder div = td.startDiv(); 
    div.style().outlineStyle(OutlineStyle.NONE).endStyle(); 

    // Render the cell into the div. 
    renderCell(div, context, column, rowValue); 

    // End the cell. 
    div.endDiv(); 
    td.endTD(); 

    // End the row. 
    tr.endTR(); 
} 
関連する問題