Establecer el ancho de una columna sin recorte TextInputCell en GWT 2.2 ¿CellTable?

Question

Tengo un problema bastante peculiar. Estoy usando CellTable de la versión GWT 2.2. CellTable está configurado para el diseño fijo. Tengo una columna editable (TextInputCell) en la tabla.

Actualmente estoy usando el método setColumnWidth en la CellTabel para corregir el ancho de la columna. Esto funciona bien, pero no impone la restricción de ancho en el elemento de texto de entrada. Como resultado, el campo de entrada del editor se desborda debajo de la columna, dando la impresión de que está recortada.

Aquí hay un ejemplo de código de documentos de GWT modificado para demostrar el problema. Tenga en cuenta que el campo de nombre no cambia de tamaño y se desborda dentro de la tabla.

Trial clase pública implementa EntryPoint { privada clase estática de contacto {static int privada NextID = 0;

private final int id; 
    private final String address; 
    private Date birthday; 
    private String name; 
    private Long number; 

    public Contact(String name, Date birthday, String address, Long number) 
    { 
     nextId++; 
     this.id = nextId; 
     this.name = name; 
     this.birthday = birthday; 
     this.address = address; 
     this.number = number; 
    } 
} 

private static final List<Contact> CONTACTS = Arrays.asList(new Contact("John", new Date(80, 4, 12), "123 Fourth Avenue", 0L), new Contact("Joe", 
     new Date(85, 2, 22), "22 Lance Ln", 1L), new Contact("George", new Date(46, 6, 6), "1600 Pennsylvania Avenue", 2L)); 


public void onModuleLoad() 
{ 
    final CellTable<Contact> table = new CellTable<Contact>(10); 
    table.setWidth("60px", true); 
    ListDataProvider<Contact> listPrvdr; 

    final TextInputCell nameCell = new TextInputCell(); 
    Column<Contact, String> nameColumn = new Column<Contact, String>(nameCell) 
    { 
     @Override 
     public String getValue(Contact object) 
     { 
      return object.name; 
     } 
    }; 
    table.addColumn(nameColumn, "Name"); 
    table.setColumnWidth(nameColumn, "60px"); 

    nameColumn.setFieldUpdater(new FieldUpdater<Contact, String>() 
    { 
     public void update(int index, Contact object, String value) 
     { 
      object.name = value; 
      table.redraw(); 
     } 
    }); 

      listPrvdr = new ListDataProvider<Contact>(); 
    listPrvdr.addDataDisplay(table); 
    RootPanel.get().add(table); 

    listPrvdr.getList().addAll(CONTACTS); 
} 

}

¿Qué me falta? ¿Cómo hago cumplir la restricción de ancho en el campo de entrada y no solo en la columna de host?

Answer 1

Utilicé CSS externo para gestionar todos los inconvenientes. No tomé mucho esfuerzo ya que tuve que subclasificar TextInputCell de todos modos. No hay una manera directa de aplicar estilo al elemento TextInputCell si no está subclasificando y no puede usar arreglos de CSS externos por el motivo que sea.

Si alguien tiene una solución mejor, compártala respondiendo a este hilo.

Answer 2

Por lo que entiendo, el miembro privado

private static Template template; 

dentro de la TextInputCell (así como EditTextCell) se preocupa por la vista del elemento de entrada interno. Hice extender mi clase de AbstractEditableCell (como lo hace TextInputCell) y asignar mi propia plantilla como:

@Template("<input type=\"text\" value=\"{0}\" tabindex=\"-1\" size=\"{1}\" maxlength=\"{1}\" style=\"{2}\"></input>") 

Answer 3

...... 
    Column<yyyData,String> xxxColumn = new Column<yyyData,String> 
       (new TextInputCell()) { 
     @Override 
     public String getValue(yyyData data) { 
      return String.valueOf(data.getxxx()); 
     } 
     @Override 
     public String getCellStyleNames(Context context,yyyData data) 
     { 
      if (Float.valueOf(data.getxxx()) <= 61) 
       return ("test"); 
      else 
       return ("mystyle"); 
     } 
    }; 
........ 

css file 
    .test input,td.test input{ 
     width: 4em; 
     border: 1px solid #FFFF66; 
    } 
    .mystyle input, td.mystyle input { 
      width: 2em; 
      border: 2px solid #2396AF; 
    } 

Answer 4

Voy a publicar una clase completa de trabajo para cualquier persona que necesita un poco más de ayuda:

static class MyInputCell extends TextInputCell 
{ 
    private static Template template; 

    interface Template extends SafeHtmlTemplates 
    { 
     // {0}, {1}, {2} relate to value, size, style 
     @Template("<input type=\"text\" value=\"{0}\" tabindex=\"-1\" size=\"{1}\" maxlength=\"{1}\" style=\"{2}\"></input>") 
     SafeHtml input(String value, String size, String style); 
    } 

    public MyInputCell() 
    { 
     template = GWT.create(Template.class); 
    } 

    @Override 
    public void render(Context context, String value, SafeHtmlBuilder sb) 
    { 
     // Get the view data. 
     Object key = context.getKey(); 
     ViewData viewData = getViewData(key); 
     if(viewData != null && viewData.getCurrentValue().equals(value)) 
     { 
      clearViewData(key); 
      viewData = null; 
     } 

     String s = (viewData != null) ? viewData.getCurrentValue() : value; 
     if(s != null) 
     { 
      // this is where we set value, size, style 
      sb.append(template.input(s, "3", "width: 50px")); 
     } 
     else 
     { 
      sb.appendHtmlConstant("<input type=\"text\" tabindex=\"-1\"></input>"); 
     } 
    }