09 junio 2009

Tabla con textfield editables

Muchas veces intente, tomar los valores de un textField incrustado a un tabla, pero siempre obtenia el valor del dataProvider...

bueno, en este post les diré el truquito para tomar esos valores... que pueden ser de cualquier componente... aunque no lo he probado con todos (solo texField y dropDonws), pero estoy casi seguro que si...

He aqui una imagen del resultado...



Entremos en materia...

Este ejemplo fue realizado con Netbeans 6.5 y GlassFish v2

lo primero que tienen que hacer es crear una nueva pagina JSP


luego arrastran un componente table, lo enlazan con un RowSet... puede ser cualquiera


una vez tengan lista esta parte, solo resta cambiar los componentes que por defecto coloca la tabla, en este caso staticText, lo cambian por textField, esto en las columnas que desea editar...


luego nos dirimos a la ficha Java (a el codigo java de la pagina en cuestion) y agregamos por cada columna editable dos propiedades, en este caso direccion y nDireccionMap de la sgte forma:


//direccion
public String getDireccion() {
    String dirTable = getValue("#{currentRow.value[\'CampoDataProvider\']}").toString();
    TableRowDataProvider rowData = (TableRowDataProvider) getBean("currentRow");
    if (rowData == null) {
        return dirTable;
    } else {
      String rowId = rowData.getTableRow().getRowId();
      String nDir = (String) this.getNDireccionMap().get(rowId);
      if (nDir == null) {
         return dirTable;
      } else {
        return nDir;
      }
    }
}

public void setDireccion(String valor) {
   TableRowDataProvider rowData = (TableRowDataProvider) getBean("currentRow");
   if (rowData != null) {
      String rowId = rowData.getTableRow().getRowId();
      this.getNDireccionMap().put(rowId, valor);
   }
}


//nDireccionMap
private Map nDireccionMap = new HashMap();

public Map getNDireccionMap() {
  return this.nDireccionMap;
}

public void setNDireccionMap(Map nDir) {
  this.nDireccionMap = nDir;
}



Ojo deben reemplazar la frase CampoDataProvider, por el nombre del campo del que tomaran el valor en el dataProvider, ose el valor a Editar.

Ej:


String nomCliente = getValue("#{currentRow.value[\'nombreCliente\']}").toString();

En este caso mi objetivo es retornar un String, pero pueden hacerlo con cualquier tipo, ya sea Int, Double, Boolean etc...

luego de haber agregado las variables necesarias en el codigo java, nos devolvemos a la vista de Diseño... nos dirigimos a la tabla que habiamos agregado anteriormente, le damos clic y pasamos a la ventana Navigator, seleccionamos el objeto correspondiente en este caso un textField, luego pasamos a la ventana Propiedades , buscamos la propiedad text...

le damos sobre los tres punticos [...] y nos aparece lo sgte:

Escogemos Use binding en la parte superior, y nos debe aparecer la variable que agregamos en codigo java, en este caso direccion, la seleccionamos y le damos en OK

Listo y con esto ya podemos acceder a lo valores que toma el textField....

Bueno se preguntaran, pero como tomo los valores??? jajaja no se preocupen ahora le muestro como hacerlo...

Despues de haber agregado los atributos de los objetos en cuestion, en este caso el tableRowGroup, ponemos un boton en el Jsp, y en el action del boton quedaria algo asi:
     public String button_action() {
        //Este caso deseo recorrer todo lo que esta en la tabla
        RowKey[] allRows = getTableRowGroup1().getRowKeys();
        for (int i = 0; i < allRows.length; i++) {
           RowKey rowKey = allRows[i];
           String direccion = ((String) this.nDireccionMap.get(rowKey.getRowId())).toString();
           info("El valor del Textfiel es: " + direccion);
        }
        return null;
     }
Bueno con esto habremos culminado... le dejo un ejemplo que he implementado en mis proyectos... es muy util ahorra mucho tiempo!!!

Amigos... se me olvidaba tambien pueden editar los valores del textField o del componente que usen, de la sgte forma:
public String button_action() {
    //Este caso deseo recorrer todo lo que esta en la tabla
    RowKey[] allRows = getTableRowGroup1().getRowKeys();
    for (int i = 0; i < allRows.length; i++) {
RowKey rowKey = allRows[i];
        //Editanto todos los textField de la tabla...
        this.nDireccionMap.put(rowKey.getRowId(),"Aqui el valor que quieran");
}
    return null;
}

Ahora les dejo una muestra en video de como funciona!!! Dejen sus comentarios, cualquier cosa con gusto les ayudaré. jejeje suerte...


28 comentarios:

  1. Viejo gracias por el articulo, tengo una duda... el datasource de la tabla es un sesion pero es un LIst o un Hash map?.. gracias..

    ResponderEliminar
  2. Hola Daniel, el datasource es un ObjectListDataProvider, en esencia un List, el HasMap solo es usado para capturar los valores de cada componente....

    ResponderEliminar
  3. HOmbre gracias.... por la respuesta... vos me podes hacer un favor... tienes el codigo del ejemplo ahi... estoy haciendo algo muy parecido... pero no me captura bien los valores mi correo es hdanielmora@gmail.com o hdmora@indracompany.com... te agradezo..

    ResponderEliminar
  4. Daniel.. con que IDE estas trabajando???

    y estas usando un List??

    dime como lo intentas hacer!!

    ResponderEliminar
  5. Estoy utlizando Netbeans, glassfish 2, faces y jee5. A la tabla le asocio un List luego cuando ejecuta un boton y utilizo RowKey[] allRows = getTableRowGroup1().getRowKeys(); allRows me esta viajando vacio.. pero si hay campos en la tabla... otra cosa curiosa que me sucede es que edito un campo y una vez se ejecuta la accion pasa al preprocess pero no entra a la accion del boton.. Vos estas en Bogota o ??? Gracias...

    ResponderEliminar
  6. muchas veces la accion de boton no se cumple por que hay algun validador o algo parecido, coloca un messagesgroup en la pagina, y fijate qeu la propiedad del boton inmediate=false

    ResponderEliminar
  7. Listo hombre... tema superado.. gracias...

    ResponderEliminar
  8. Muchas Gracias!!
    Esto me fue de gran ayuda :)
    Te hago una consultita... Sabés cómo puedo hacer para que la tabla me quede fija y que se agregue una barra de desplazamiento para no alterar el tamaño cuando agrego muchas filas?? Creo q la función se llama Scroll, pero no la encuentro!!

    ResponderEliminar
  9. hola, gracias por comentar, y con respecto a lo que quieres hacer, podrías usar etiquetas html, que te ayuden, por ejemplo un "div" le das estilo y seguro que lograrás lo que buscas... fijate por ejemplo aqui en el blog, el codigo fuente esta en estas etiquetas "div" con x stylo, y mira que ellas establecen el scroll automaticamente..

    espero haberte ayudado.. hasta la proxima!

    ResponderEliminar
  10. Tienes razón!! Ya me agregó el scroll =D
    Mil gracias por tu ayuda

    ResponderEliminar
  11. Hola he estado viendo tus ejemplos y son excelentes, te felicito. Yo estoy aprendiendo a usar Visual Web, y no se si me podrias enviar el codigo fuente de este post. Tambien me gustaria saber si conoces algun sitio donde haya buenos tutoriales para aprender.
    Saludos y sigue asi.
    Mi email es jcguatemala@gmail.com

    ResponderEliminar
  12. Hola momoto, gracias por visitar y comentar en mi blog..

    con respecto al codigo fuente, en este post esta un proyecto completo y usando lo que buscas...

    http://ecanaveras.blogspot.com/2009/06/usando-objectlistdataprovider.html

    y con respecto a un pagina de ejemplo, esta este post..

    http://ecanaveras.blogspot.com/2009/07/aplicacion-web-usando-woodstock.html

    espero haberte ayudado, hasta pronto---

    ResponderEliminar
  13. Saludos, pues intente buscar el link http://webdev2.sun.com/example/, pero al parecer ya no existe el sitio, creo que por que Oracle compro Sun. Si supieras de otro sitio donde este el ejemplo me seria de mucha ayuda. Gracias

    ResponderEliminar
  14. Hola rincon de tio guate, lamentablemente tienes razon los links estan rotos, pero no encontré nada en la pagina de oracle...

    si estas iniciando con el proyecto te recomiento que uses icefaces, ya que todos lo componentes funcionan en ajax, y la velocidad es muy notable..

    recuerda que woodstock, ya no tendrá soporte...

    Saludos..

    ResponderEliminar
  15. hola estoy trabajando con woodstock y en un table quiero asignarle a un textfiel unos datos calculados por ej tengo columnas producto,cantidad,precio,total entonces la ultima columna total es calculada por lo que no esta en la tabla asociada al dataprovider ya tengo como calculo el dato al recorrer los valores del dataprovider pero el problema lo tengo a la hora de querer insertar ese valor en la columna y en el campo de la celda total lo que hace es que me toma el ultimo valor de los que deceo agregar y le coloca el mismo valor a todos los demas este es el codigo del boton quitar ya que la intencion es que recalcule la columna esa al quitar alguno de los productos en el table

    pdt: para agregar los productos al table lo tengo bindado a un metodo en el sesionbean parecido a tu ejemplo muy util :) y lo otro que te queria preguntar es que si ya esta listo el plugins visual para icefaces o siempre solo esta para netbeans 6.5 ?

    ResponderEliminar
  16. Hola Juan Carlos, gracias por comentar!!!

    en cuanto a tu problema, entiendo que quieres insertar un valor X en una columna N dependiento de Z valores, para ello usas el metodo put de tus porpiedades. ej:

    tomas todos los valores Z, los calculas te da el valor X entonces lo asignas a tu columna asi

    this.nDireccionMap.put(rowKey,"Aqui el valor que X");

    donde RowKey es el id de la Fila y nDireccionMap es el metodo que permite editar el valor de la columna!

    si usas un boton que quita una fila, creo que no debes volver a recalcular si tienes todo como debe ser, en caso que no sea asi, solo debes recorrer toda las filas de la tabla, calcular y usar el metodo put que mencione anteriormente..

    Por otra parte, hablando de Icefaces, hace mucho no hago app con esta tecnologia, te hablo de mas de 8 meses, en ese entonces usaba Netbeans 6.5, pero he visto en el sitio web de Icefaces que hay plugins inclusive para Netbeans 6.9, pero al parecer estos no proveen la parte visual al momento de desarrollar, es mi opinion no estoy seguro, pero si te aseguro que es una tecnologia maravillosa, las app que he realizado con Icefaces han gustado, porque son excelentes!

    espero haberte ayudado, cualquier duda no dudes en comentar!!

    Saludos!

    ResponderEliminar
  17. gracias exactamente eso quiero hacer ya tengo calculado todo y ya tengo en una variable el valor x por cada rowkey lo que no encuentro es el metodo nDireccionMap que me mencionas y lo de calcular pues eso trato de hacer ya que la columna subtotal debe de cambiar al quitarse o agregarse un articulo al detalle(carrito de compra) y bueno si me dices donde esta el metodo nDireccionMap pues creo que ya me habras ayudado a quitarme este dolorcito de cabeza gracias por tu ayuda ahh y tengo otra 2 inquietudes la 1 fijate que trabajo mi proyecto con netbeans y cuando corro mi aplicacion todo funciona bien a la hora de querer montar el war en glassfish no lo monta me dice el siguiente error An error has occurred
    Deploying application in domain failed; Error loading deployment descriptors for module [SIGMEP] -- null Error loading deployment descriptors for module [SIGMEP] -- null ya le di verify para ver si tenia errores y bueno tenia unos que me pedia unas clases y ya quite eso del facesconfig.xml donde estaban aun despues que las elimine la vista y el controlador y en el verify no me tirar ningun error,ni warning ni nada y aun asi no lo monta :( y la otra inquietud es si has trabajado con netbeans y google maps mi aplicacion lleva un modulo gis en el cual los proyectos que se ingresan sus coordenadas e informacion adicional se almacena en DB postgre sql 8.4 entonces quiero agarrar las coordenadas de mi db y mostrar la hubicacion en google maps con informacion adicional extraida de mi db estuve viendo unos videos con rest+web services y bueno me funciona bien conecta y devuelve la info la cuestion es que al mandarles las coordenadas no me pone mas que el iconito nada de calles ni el nombre :( asi me echas una mano ahi tambien gracias ahh pdt todo esta funcionando sobre un SO linux (distro ubuntu) pero se montara en opensuse

    ResponderEliminar
  18. Hola Juan, mira el metodo del que te hablo lo debes haber creado, en el post dice: "agregamos por cada columna editable dos propiedades" esta es la parte que hace que el truco funcione!

    yo solo puse un Ejemplo de la variable "direccion"

    si deseas modificar el subtotal debes crear la variable "subtotal" y "nSubtoatlMap" sigue el ejemplo del post, asi como "direccion".

    en cuanto a tu problema de Glassfisg, fijate como esta configurado localmente, y has lo mismo con el que tienes en ubuntu, tambien fijate en las versiones a ver si son la misma, en mi caso el servidor de aplicaciones tambien corre sobre linux -Centos-

    y en cuanto a lo de google, no te puedo ayudar, ya que no he trabajado con maps, pero segun lo que me cuentas, de la misma forma como obtienes la ubicacion, debe ser muy parecido establecerla, a lo mejor estas omitiendo algunos parametros!!

    bueno espero ayudarte, si deseas puedes enviarme el codigo fuente de la pagina en la que quieres editar el subtotal!!

    Saludos!

    ResponderEliminar
  19. ok ya lo revise y no me habia fijado que estaba en esta entrada sorry por preguntar bueno ya te mande al correo el codigo con unas observaciones :) gracias

    ResponderEliminar
  20. Hola amigo Juan, si ya le heche un vistazo a tu codigo, te envie a tu mail, un proyecto sencillo que contiene un ejemplo de lo que quieres hacer, luego con calma posteo esa parte aca en el blog, espero te sea de mucha ayuda!

    Saludos!

    ResponderEliminar
  21. bueno con respecto al problema del codigo me ha solucionado los de resetar el dataprovider para cuando se quiten todos los articulos en el caso cuanod quita un articulo sigo en el mismo problema de actualizar el subtotal en el ejemplo que me enviaste en tu caso solo imprime cantidad*precio pero no lleva el acumulado y cuando le doy en el boton quitar (X) no me hace nada:( hice un metodo para querer quitar los datos pero no me hace nada:( lo que estoy tratando ahora es que con el metodo que limpia todo el dataprovider y como ya tengo capturado los datos en un detalle pues reconstruirlo y lo del reporte aun no lo he probado pero gracias ya lo probare espero todo me vaya 10 :)

    ResponderEliminar
  22. Amigo.. estoy haciendo un post, que seguramente aclará muchas de tus dudas! hoy lo publico!!

    ResponderEliminar
  23. hola , tengo que realizar una aplicacion con visual web pack y el link http://webdev2.sun.com/example/ esta roto, no tendrá usted esta información o documentacion de esta tecnología.

    ResponderEliminar
  24. Hola teresa, bueno si parece que el link a caducado, pero esto se debe a que esta tecnologia ya no tendrá soporte oficial..

    Como vas a empezar te recomendaria usar icefaces con VWP, esa es para netbeans 6.5, en la pagina www.icefaces.com podras ver algunas demos de todo lo que puede hacer esta tecnologia, personalmente la he usado y es muy buena!

    lamentablemente en las nuevas versiones no viene con diseño visual (VWP) pero la version 1.8.x para netbeans 6.5, si que si!! puedes descargarlo desde la pagina oficial de icefaces.

    Saludos, espero haberte ayudado!

    ResponderEliminar
  25. Hey tengo un problema para resolver las librerias empleadas en proyecto no tengo esas librerias me las puedes proporcionar

    ResponderEliminar

Hola amigo visitante, tu comentario es muy importante, trata de ser claro, y asegurarte que tus palabras sean moderadas!! gracias