Creando una fila personalizada bajo demanda con GWT CellTableBuilder

Question

En GWT 2.5 se presentó la API RC CellTableBuilder, pero todavía no hay documentación completa disponible. ¿Hay algún tutorial \ ejemplo de implementación de creación de filas personalizada bajo demanda con CellTableBuilder? El único ejemplo que he encontrado hasta ahora fue este http://showcase2.jlabanca-testing.appspot.com/#!CwCustomDataGrid pero es bastante confuso para mí.

Por lo tanto, mi objetivo es crear una fila adicional que contenga un widget que proporcione detalles sobre la fila clicada en una tabla.

Answer 1

He encontrado una solución adecuada para este problema. Aquí está el ejemplo de código:

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

Cabe mencionar, que cuando manejas algún evento que conduce a la aparición de fila adicional, debe invocar redrawRaw (rowIndex) en CellTable que se adjunta a TableBuilder. Y antes de esta llamada, es necesario agregar ID de fila de destino a los elementos Establecer.

Espero que haya sido útil.

Answer 2

He creado esta clase para expandir filas en GWT. Toma una columna que desea expandir y la reemplaza con un marcador de posición que puede tener 2 estados.

lo uso como esto:

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

que tienen acceso a la glyphicon así que utilizo éstos en lugar de la columna de marcador de posición por defecto que es de +/-

< imagen aquí ... pero por falta de reputación :(>

columnBody en el ejemplo de código anterior es solo una columna estándar que abarcará el ancho de la tabla. El marcador de posición se mostrará en su lugar en cualquier posición columnBody se configuró para sentarme en.

la esperanza de que ayude a alguien :)

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