Creacion de JTabla en java

En lo personal las tablas nos ayudan a manejar mas información que solo un simple System.out o cualquier otra forma. Es por ello que hoy les traigo la manera en como trabajar con una JTable desde ceros.

En este capitulo les mostrare como se monta una tabla, su creacion en espera de datos. Posteriormente iremos mejorando el proyecto hasta llegar a conectarla con una base de datos y modificando la informacion de la misma, viendose reflejado en la base.


Por ahora comensemos con los siguientes requisitos. Para comensar necesitamos.

1 DefaultTableModel.
2 JTable.
3 JScrollPane.
4 JFrame.


Ahora para comenzar construiremos el frame que contendra la tabla en un principio, en nuestro constructor le decimos.


public constructor(){
     JFrame frame = new JFrame();
     frame.setTitle( "Hola Tabla" );
     //se construye la tabla y se agrega al frame
     construyeTabla(frame);
     frame.setSize( 500, 300 );
     frame.setDefaultCloseOperation(EXIT_ON_CLOE);
     frame.setVisible( true );
}

public void construyeTabla( JFrame frame ){
     Object[][] data = { {"sitio","inovania.blogspot.com"},
                            {"autor","Oscar Martagon Valera"}};
        String[] colNames= {"Dato","Descripcion"};
        DefaultTableModel dtm = new DefaultTableModel( data, colNames );
        JTable tabla = new JTable ( dtm );
     
        tabla.setPreferredScrollableViewportSize(new Dimension( 250, 250 ) );
        JScrollPane scrollPane = new JScrollPane(tabla);
        frame.add(scrollPane,BorderLayout.CENTER);
}

Quedando así de esta manera simple y sencilla como hacer una tabla en java.

Sin mas por el momento los dejo. No olvides dejar tu comentario, sígueme  para poder ser de los primeros en leer mis próximas entradas.

Hasta la proxima.

Cargar CSV en JavaScript

Cargar y leer un archivo csv en JavaScript sin necesidad de php, java u otro más.

Así es, tal y como lo leen, hoy les traigo un código que espero les ayude tanto como a mi me a ayudado hasta este momento, con un poco de lógica, que les dejara como resultado el contenido del archivo en un array.

Y como siempre lo digo... vamos al punto.

<div id="drop_file_zone" ondragover="return false" ondrop="upload_file(event)">
 <div id="drag_upload_file">
  <div id="datos">
   <h2>
    Drag and drop file here or click for selected file
   </h2>
  </div>
  <input id="selectfile" type="file" />
 </div>
</div>

<div id="dvCSV"></div>

dando como resultado lo siguiente

A esto demos le un poco de estilo.

#drop_file_zone{
 border: solid 1px;
 cursor: pointer;
 }
#drop_file_zone #drag_upload_file{
 height: 3em;
 padding: 1em;
 }
#drop_file_zone:hover{
 border-style: dashed;
 border-radius: 5px;
 border-color: blue;
 }
#drop_file_zone input[type=file]{
 display: none;
 }

Esto quedara así

Ahora lo mas esperado. Así es, el codigo.

Comencemos con las acciones del drop y el evento click a nuestra área de archivo.

---

$( '#drag_upload_file' ).click(function(){
 document.getElementById('selectfile').click();
 document.getElementById('selectfile').onchange = function () {
  uploadCsv( document.getElementById('selectfile').files[0], function(data){
   createTable( data );
  });
 };
});
function upload_file( e ){
 e.preventDefault();
 uploadCsv( e.dataTransfer.files[0], function(data){
  createTable( data );
 } );
}

function uploadCsv( fileUpload, callback ){}

function createTable( datos ){}

---

Con esto, decimos que cuando den click o bien cuando dejen un archivo en nuestra área esta invocará la función uploadCsv, la cual recibe como primer parametro el archivo del file upload mientras que en su segundo parametro deja una funcion de retorno.

Ahora bien el codigo de la funcion uploadCsv es el siguiente.


---

function uploadCsv(fileUpload, callBack) {
 var rtn = {};
 var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv)$/;
 if (regex.test(fileUpload.name.toLowerCase())) {
  rtn.name = fileUpload.name;
  rtn.data = [];
  rtn.size = fileUpload.size;
  rtn.encabezado = [];
  if (typeof (FileReader) != "undefined") {
   var reader = new FileReader();
   reader.onload = function (e) {
    var x = 0;
    var rows = e.target.result.split("\n");
    for (var i = 0; i < rows.length; i++) {
     var cells = rows[ i ].split( "," );
     var obj = {};
     var have = 0;
     for( var j = 0; j < cells.length; j ++ ){
      if( cells[ j ].length == 0 )break;
      have = 1;
      if( i == 0 ){
       obj[ 'field_' + j ] = ( cells[ j ].trim() ).toUpperCase();
      }else{
       var field =  rtn.encabezado[0]['field_' + j ] ;
       obj[ field ] = cells[ j ];
      }
     }
     if( i == 0 ){
      rtn.encabezado.push( obj );
     }else{
      if( have == 1 )
       rtn.data.push( obj );
     }
     x++;
    }
    rtn.total = x ;
    callBack( rtn );
   }
   reader.readAsText(fileUpload);//.files[0]);
  } else {
   callBack( "Este navegador no soporta html5" );
  }
 } else {
  callBack( "El archivo no es csv");
 }
}

---

Ahora solo falta el mostrar el contenido de nuestro archivo, y para ello nos creamos la funcion createTable con lo siguiente,


---

function createTable(datos) {
 var table = document.createElement("table");
 var rows = datos.data;
 var cells = Object.keys( datos.encabezado[ 0 ] );
 for (var i = 0; i < rows.length; i++) {
  var row = table.insertRow(-1);
  for (var j = 0; j < cells.length; j++) {
   var cell = row.insertCell(-1);
   cell.innerHTML = datos.data[i][ datos.encabezado[ 0 ][ cells[ j ] ] ];
  }
 }
 var head = table.createTHead( -1 );
 var row = head.insertRow( -1 );
 for( var j = 0; j < cells.length; j ++ ){
  var th = document.createElement( 'TH' );
  th.innerHTML = datos.encabezado[ 0 ][ cells[ j ] ];
  row.appendChild( th );
 }
 var caption = table.createCaption();
 caption.innerHTML = "
" + datos.name + "";

 var dvCSV = document.getElementById("dvCSV");
 dvCSV.append( table );
}

---

Y así de simple es como queda esto. no sin antes darle un mejor estilo a nuestra tabla creada a partir del contenido del archivo csv.


----

table{
 width: 100%;
 border: 1px;
 border-collapse: collapse;
}
table caption {
 border: solid 1px;
 font-size: larger;
 padding: 0.5em;
}
table thead tr th {
 padding: 0.75em;
 border: solid 1px;
 border-top: none;
 font-size: larger;
}
table tr td {
 border: solid 1px;
 padding: 0.5em;
 font-size: small;
}

----
dejando al final un resultado como el siguiente.

Espero les sirva de apoyo para su desarrollo, sin mas.. me despido por el momento, espero sus comentarios.

Pricipios con NodeJs

Así es, tal y como sus ojos lo leen, esta vez les traigo una entrada referente a la librería node.js.

Para comenzar instalaremos el paquete, para ello es lo siguiente.

https://nodejs.org/es/download/

Dependiendo del caso que lo requiera Windows, Linux o Mac.

Una vez instalado, comprobamos la librería abriendo la terminal o linea de comando, con la orden.

C:\>_ node --version

Para continuar es necesario seguir estos pasos.

1.- Crear un directorio
2.- En el directorio nuevo, crear el init con node.
3.- Descargar los módulos necesarios para la aplicación requerida.

Con todo esto aclarado aremos nuestro primer "Hola mundo" desde node.js, Manos a la obra.

En xampp/htdocs: creamos la carpeta holamundo, desde cmd nos posicionamos en la carpeta holamundo e indicamos.

El resultado debería ser el siguiente.

Esto nos deja un archivo package.json el cual ira cargando los módulos que se instalen.

Dentro de hola mundo, creamos un archivo js llamado index.js, el cual contendrá el siguiente código...

var http = require( "http" );
http.createServer( function( req, res ){
res.writeHead( 200, {
'Content-Type':'text/plain'
});
res.end( 'hola Mundo\n' );
}).listen( 8420 );
console.log( 'servidor en url http://localhost:8420' );


Al final, damos el comando.

nos colocamos en nuestro navegador en el puerto indicado y listo, tenemos nuestro hola mundo echo en node js



No olvides dejarme tu comentario.

Si puedo ayudarte en algo escribeme.

Asta la próxima.