Cómo integrar SmartGWT con PHP usando DataSource?

SmartGwt no es otro tradicional framework Ajax que solo presenta y muestra datos via XML/Json u otro mecanismo (de estos hay bastantes!!!).  SmartGwt fue concebido para la administración del estado del lado del cliente y la propagación de cambios en el servidor. Por ejemplo, cuando tenemos varias grillas mostrando datos de una tabla y hemos añadido un registro por medio de un formulario, en ese instante deben de actualizarse las grillas automáticamente. Lo anterior se consigue con un mecanismo denominado databinding, lo cual significa que todas las grillas(widgets) se han enlazado al DataSource. Todas las operaciones CRUD se reflejaran automáticamente a todos los widgets enlazados.
A continuación implementaremos un ejemplo bastante básico de como SmartGwt se integra con PHP:

/*
* Codigo fuente de DataSourceCountry.java
*/
public class DataSourceCountry extends RestDataSource{

 private static DataSourceCountry instance = null;    
 
 public static DataSourceCountry getInstance() {  
       
     if (instance == null) {  
            
            instance = new DataSourceCountry();
            
        }  
        return instance;  
    }//fin de funcion
 static void AddData(Record record)
    {
     instance.addData(record);   
    }//fin de funcion 
    static void RemoveData(Record record)
    {
     instance.removeData(record);     
    }//fin de funcion
//public DataSourceCountry() Corregido por el amigo anonimo
    private DataSourceCountry()
    {
      DataSourceIntegerField id = new DataSourceIntegerField("id", "CATEGORIA ID"); 
   id.setPrimaryKey(true);  
   
   DataSourceTextField idcategoria = new DataSourceTextField("idcategoria", "PERTENECE A");  
   idcategoria.setForeignKey("id");  
   idcategoria.setRootValue("");  
 
   DataSourceTextField descripcion = new DataSourceTextField("descripcion", "DESCRIPCION");   
   DataSourceTextField categoria = new DataSourceTextField("categoria", "CATEGORIA");

   this.setFields(id,idcategoria,descripcion,categoria);  
   
   OperationBinding fetch = new OperationBinding();
   fetch.setOperationType(DSOperationType.FETCH);
   fetch.setDataProtocol(DSProtocol.POSTPARAMS);
   
   OperationBinding add = new OperationBinding();
   add.setOperationType(DSOperationType.ADD);
   add.setDataProtocol(DSProtocol.POSTPARAMS);
           
   OperationBinding remove = new OperationBinding();
   remove.setOperationType(DSOperationType.REMOVE);
   remove.setDataProtocol(DSProtocol.POSTPARAMS);
            
   this.setOperationBindings(fetch,add,remove);
   this.setDataFormat(DSDataFormat.JSON); 
  
   this.setFetchDataURL("fetch.php");  //integracion con PHP
   this.setAddDataURL("add.php");      //integracion con PHP
   this.setRemoveDataURL("remove.php");//integracion con PHP
    }
}

<?php
/*
* Codigo fuente de fetch.php
*/
$data=array();
$data[0]['id']=1;
$data[0]['descripcion']='descripcin plazas';
$data[0]['categoria']='plazas';
$data[0]['idcategoria']='';

$data[1]['id']=2;
$data[1]['descripcion']='descripcin comedores';
$data[1]['categoria']='comedores';
$data[1]['idcategoria']='';

$mensaje=array();
$mensaje['response']['status']=0;
$mensaje['response']['data']=$data;

echo json_encode($mensaje);
?>

En el archivo "remove.php" podemos notar que al remover un registro el DataSource envía el "id" del registro a eliminar, entonces el Servidor debe de responder con el "id" y un "status=0".

<?php
/*
* Codigo fuente de remove.php
*/
$data=array();
$data[0]['id']=$_POST['id'];

$mensaje=array();
$mensaje['response']['status']=0;
$mensaje['response']['data']=$data;

echo json_encode($mensaje);
?>

En el archivo "add.php" el DataSource envía el campo "descripción" y "categoria" enseguida el Servidor le devuelve los campos pero aumentando los campos "id" y "idcategoria".

<?php
/*
* Codigo fuente de add.php
*/
$data=array();
$data[0]['id']=3;
$data[0]['descripcion']=$_POST['descripcion'];
$data[0]['categoria']=$_POST['categoria'];
$data[0]['idcategoria']='';

$mensaje=array();
$mensaje['response']['status']=0;
$mensaje['response']['data']=$data;

echo json_encode($mensaje);
?>

Explicare un poco el archivo "Probandatasource.java". En la linea 21,37,41 realizamos el databinding con el DataSource con los Widgets TreeGrid,ListGrid y SelectItem respectivamente. En la linea 50 creamos un registro y lo enviamos al DataSource (al pulsar el botón añadir). En la linea 65 capturamos el "id" del registro seleccionado y lo enviamos al DataSource(al pulsar el botón eliminar)

/*
* Codigo fuente de Probandodatasource.java
*/
public class Probandodatasource implements EntryPoint {

 public void onModuleLoad() {
  final TreeGrid  countryGrid = new TreeGrid ();
        countryGrid.setCanFreezeFields(true);         
        countryGrid.setWidth("100%");  
        countryGrid.setHeight("100%");  
        countryGrid.setShowAllRecords(true);
        countryGrid.setLoadDataOnDemand(false);
       
        TreeGridField  descripcion = new TreeGridField ("descripcion", "Descripcion", 200);  
        TreeGridField  categoria = new TreeGridField ("categoria", "Categoria",200);  
  
        countryGrid.setFields(categoria, descripcion);  
        countryGrid.setCanResizeFields(true); 
        countryGrid.setAutoFetchData(true);

        countryGrid.setDataSource(DataSourceCountry.getInstance());
         
        final ListGrid  countryGridList = new ListGrid ();
        countryGridList.setCanFreezeFields(true);         
        countryGridList.setWidth("100%");  
        countryGridList.setHeight("100%");  
        countryGridList.setShowAllRecords(true);
        //countryGridList.setLoadDataOnDemand(false);
       
        ListGridField  descripcionList = new ListGridField ("descripcion", "Descripcion", 200);  
        ListGridField  categoriaList = new ListGridField ("categoria", "Categoria",200);  
  
        countryGridList.setFields(categoriaList, descripcionList);  
        countryGridList.setCanResizeFields(true); 
        countryGridList.setAutoFetchData(true);

        countryGridList.setDataSource(DataSourceCountry.getInstance());
        
        final SelectItem combobox = new SelectItem("ComboBox");  
    combobox.setWidth(240);  
    combobox.setOptionDataSource(DataSourceCountry.getInstance());  
    combobox.setDisplayField("categoria");  
    combobox.setPickListWidth(450);  
    combobox.setPickListFields(categoriaList, descripcionList); 
        
 
        IButton btnAnadir=new IButton("Añadir");
        btnAnadir.addClickHandler(new ClickHandler(){

   @Override
   public void onClick(ClickEvent event) {
    ListGridRecord rec = new ListGridRecord();    
    rec.setAttribute("idcategoria","");                          
                                rec.setAttribute("descripcion","descripcion de jardines");  
                                rec.setAttribute("categoria","jardines");  
    
    DataSourceCountry.AddData(rec);
   }
         
        });
        
        IButton btnRemove=new IButton("Remover");
        btnRemove.addClickHandler(new ClickHandler(){

   @Override
   public void onClick(ClickEvent event) {
    ListGridRecord id=countryGrid.getSelectedRecord();
    
    DataSourceCountry.RemoveData(id);
    }
         
        });
        
        VLayout vl=new VLayout();
        vl.setWidth100();
        vl.setHeight100();
        vl.addMember(countryGrid);
        vl.addMember(countryGridList);
        
        DynamicForm df=new DynamicForm();
        df.setItems(combobox);
        vl.addMember(df);
        
        vl.addMember(btnAnadir);
        vl.addMember(btnRemove);
        vl.draw();
        
 }
}

La implementación de este pequeñísimo ejemplo lo pueden ver en el video, cabe mencionar que copio y pego el código fuente de este blog a Eclipse; tal que, cualquiera con algo de entusiasmo y ganas lo pueda ejecutar.





Nota: Tengo la terrible costumbre de enfocarme en el funcionamiento, en lo próximos posts tratare de hacer ejemplos mucho mas estéticos!