Conociendo la Grilla de SmartGWT (PARTE I)

Uno de los motivos por la que use este framework fue su Grilla (ListGrid y TreeGrid) su potencia lo pueden ver en el showcase pero hay una característica que no se muestra muy claro en el showcase de ejemplos (debido a que los ejemplos corren solo en el lado del cliente) que es lo que se denomina: “live grid”. El término “live grid” hace referencia a la capacidad que tiene la grilla de capturar datos del servidor conforme deslizamos la barra de desplazamiento.

En el ejemplo que muestro a continuación la Grilla (listgrid) captura 15 registros cada vez que deslizamos la barra de desplazamiento. El total de registros a capturar será de 5000, debes de notar que puedes desplazarte a los últimos registros sin necesidad de mostrar todos los anteriores (te sugiero que veas el video al final del post para mayor entendimiento)

ListGrid solicita los primeros 15 registros al Servidor mediante las variables “startRow” y “endRow” con los valores 0 y 15 respectivamente (la asignación de estas variables se realizan automáticamente y sirven para controlar el envió de registros del lado del Servidor), una vez recibidos los registros solicitados por ListGrid este procede a solicitar los siguiente 15 registros modificando las variables “startRow=15” y “endRow=30” y así sucesivamente, esto se ve claramente en el video-guía.

Ahora explicaremos algo del código fuente: “Blogspot.java”, en la línea  27 se le dice a la Grilla que capture 15 registros por requerimiento, además en la línea 29 le decimos a la grilla que  auto capture la data conforme deslizamos la barra de desplazamiento.

/*
*Codigo Fuente Blogspot.java
*/
public class Blogspot implements EntryPoint {
 
 public void onModuleLoad() {
  
 DataSourceIntegerField id = new DataSourceIntegerField("id","id",20);
    id.setPrimaryKey(true); 
    DataSourceTextField descripcion = new DataSourceTextField("descripcion");
   
    //preparamos para la captura de la data
    OperationBinding fetch = new OperationBinding();
    fetch.setOperationType(DSOperationType.FETCH);
    fetch.setDataProtocol(DSProtocol.POSTPARAMS);
    
    RestDataSource data=new RestDataSource();  
    data.setOperationBindings(fetch);
    data.setDataFormat(DSDataFormat.JSON);
    data.setFetchDataURL("fetch.php");
    data.setFields(id,descripcion);
    
        ListGrid lg=new ListGrid();
     lg.setCanFreezeFields(true);
     lg.setHeight(200);
     //capturamos 15 registros por pagina
     lg.setDataPageSize(15);
   
     lg.setAutoFetchData(true);
     lg.setDataSource(data);
     lg.setShowAllRecords(false);
     
     RootPanel.get("idImgVertical").add(lg);
 }
}

/*
* Codigo fuente de fetch.php
*/
$st=$_POST["_startRow"];
$en=$_POST["_endRow"];

$data=array();

for($i=0;$i<15;$i++)
{
 $data[$i]['id']=$st+$i;
 $data[$i]['descripcion']='descricion de :'.$i; 
}
$mensaje=array();
$mensaje['response']['status']=0;
$mensaje['response']['startRow']=$st;
$mensaje['response']['endRow']=$en;
$mensaje['response']['totalRows']=5000;
$mensaje['response']['data']=$data;

echo json_encode($mensaje);