Inicio > Desarrollo, General > Struts2, JSON y ExtJS – Ejemplo practico

Struts2, JSON y ExtJS – Ejemplo practico

En la pasada entrega se reviso la manera en que podemos regresar una respuesta JSON desde Struts2, esta vez esto nos servirá para integrar Struts2 a ExtJS por lo que se realizará el ejemplo de un grid (ejemplo que también ya se realizo aqui) que toma los datos desde una BD y se llena de manera dinámica.

Este ejemplo no esta enfocado a la manera en que se realizará la obtención de los datos, por lo que unicamente para efectos del ejemplo se mostrará el código necesario.

El primer paso es crear un Bean que modelara las caracteristicas del objeto persona que mostraremos en la pantalla.

public class Persona implements Serializable{

/**
*
*/
private static final long serialVersionUID = 1L;
private int matricula;
private String nombre;
private String apPaterno;
private String apMaterno;

public Persona (int matricula, String paterno, String materno, String nombre){
this.apMaterno = materno;
this.apPaterno = paterno;
this.nombre = nombre;
this.matricula = matricula;
}

/**
* Getters y Setters de las variables de instancia
*/
}

También es necesaria la creación de un DAO para acceder a la información en la Base de Datos, a continuación se muestra el método del DAO que realiza dicha operación.

public List<Persona> findAll() {
List<Persona> personas = new ArrayList<Persona>();
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;

try {
conn = Conecta.getCon(); //Obtenemos la conección
stmt = conn.createStatement();
rs = stmt
.executeQuery(“SELECT matricula, ap_paterno, ap_materno, nombre FROM Persona”);//Se crea la consulta
while (rs.next()) {
personas.add(new Persona(rs.getInt(1), rs.getString(2), rs
.getString(3), rs.getString(4)));
}//Se genera una lista de tipo Persona que nos regresara el resultado de la consulta
} catch (SQLException e) {
System.out.println(“error: failed to create a connection object.”);
return personas;
} catch (Exception e) {
System.out.println(“other error:”);
return personas;
} finally {
try {
rs.close();
stmt.close();
conn.close();
return personas;
} catch (Exception e) {
return personas;
}
}
}

Para terminar con la parte de Struts se debe contruir el Action correspondiente de la siguiente manera.

public class PersonaJSONAction extends ActionSupport {

/**
*
*/
private static final long serialVersionUID = 1L;
private List<Persona> personas = null;
private PersonaDAO dao = new PersonaDAO();
private boolean success;

public String list() {
personas = dao.findAll();
setSuccess(true); //Se utiliza para indicar si la operación fue exitosa en este caso el valor por default es TRUE
return SUCCESS;
}

/**
* Getters y Setters de las variables de instancia
*/
}

Y no hay que olvidar añadir la descripción del Action al archivo struts.xml

<struts>

<constant name=”struts.devMode” value=”true” />

<package name=”default” namespace=”/” extends=”json-default”>
<action name=”listAll” method=”list”
class=”com.ejemplo.action.PersonaJSONAction”>
<result type=”json” />
</action>
</package>
</struts>

Una vez finalizado lo anterior continuamos con el archivo JS en el que modelaremos el grid que mostrara los datos que deseamos consultar, empezando por el Store en el que definimos de dónde se obtendran los datos,  aquí es importante mencionar que los dataIndex deben nombrarse de igual manera que las variables de instancia en nuestro Bean construido previamente.

var store = new Ext.data.Store( {
url : ‘listAll.action’,//URL del action
reader : new Ext.data.JsonReader( {
root : ‘personas’, //El nombre corresponde a la variable en el Action que guarda el resultado de la consulta
idProperty : ‘matricula’ //Id que filtra los resultados repetidos en el GRID
}, [ {
name : ‘matricula’,
type : ‘int’
}, ‘nombre’, ‘apPaterno’, ‘apMaterno’ ]), //Los nombres corresponden a los nombres de la variables de instancia en el BEAN
listeners : {
exception : function(proxy, type, action, o, response, args) {
Ext.MessageBox.alert(“Error”, ‘Error en el momento de cargar la informacion. Consulte con su administrador.’);
}
},
autoLoad : true
});

Continuamos con el modelado de las columnas.

var personaColMod = new Ext.grid.ColumnModel( {
columns : [ {
header : “Matricula”,
dataIndex : ‘matricula’,
sortable : true
}, {
header : “Nombre”,
dataIndex : ‘nombre’,
sortable : true
}, {
header : “Ap. Paterno”,
dataIndex : ‘apPaterno’,
sortable : true
}, {
header : “Ap. Materno”,
dataIndex : ‘apMaterno’,
sortable : true
} ]
});

Finalmente se declara el grid que se presentará en pantalla.

var grid = new Ext.grid.GridPanel( {
renderTo : Ext.getBody(),
frame : true,
title : ‘Personas DataBase’,
height : 450,
width : 500,
store : store, //Store declarado previamente
colModel : personaColMod //Modelo definido previamente
});

No hay que olvidar que todo el código de ExtJS se coloca dentro de la función:

Ext.onReady(function() {…………………………….});

Claro sin olvidar que todo esto lo estoy ejecutando desde un JSP por lo que debo añadir los imports correspondiente.

<link rel=”stylesheet” type=”text/css”
href=”../resources/css/ext-all.css” />
<script type=”text/javascript” src=”../js/ext-base.js”></script>
<script type=”text/javascript” src=”../js/ext-all-debug.js”></script>
<script type=”text/javascript” src=”../js/pages/persona.js”></script> <!–Archivo JS donde se modela el grid–>

Una vez terminado el resultado es parecido a la siguiente imagen.

Cómo pudimos observar es realmente muy sencillo y muy rapido construir un Grid con ExtJS con datos obtenidos desde una Base de Datos.

Cualquier duda o comentario será bien recibido.

Anuncios
  1. Kenji
    julio 22, 2011 en 8:57 am

    Muchas gracias habia estado buscando la respuesta x todos lados de como integrar struts2 y Extjs

  2. Piyo
    septiembre 16, 2011 en 5:08 pm

    Disculpa, no funciona 😦 me manda una excepción de que necesita el modelo: “me.model is undefined”. Se lo pongo, pero luego me manda otra excepción, algo sobre el ServerProxy: “You are using a ServerProxy but have not supplied it with a url”.

    Y tengo todo igual. Qué podría ser??? Por favor 🙂

    • Carlos F.
      septiembre 20, 2011 en 4:22 pm

      Deberias revisar que la versión de ExtJS sea la 3 o 3.3 por otro lado recuerda que este ejemplo es para Strust2 por lo que tu proyecto debe tener bien configurada esta parte para que te reconozca las URL de los Actions.

  3. mario
    enero 26, 2012 en 12:58 pm

    exelente aporte, sigue asi ayudando a la gente que necesitamos de ese conocimiento en español, gracias.

  4. SAMIR CABRERA MORENO
    marzo 25, 2012 en 8:11 am

    Hola,

    Buen ejemplo, me estoy guiando pero me pierdo un poco cuando creas el PersonaJSONAction por fa seria mucho pedir agregar el codigo o por lo menos la clases PersonaJSONAction completa. He mirado otros ejemplo y la clase action tiene un execute(), pero no se si este lleva eso. Mil gracias.

    Samir

  5. samir cabrera moreno
    marzo 27, 2012 en 12:36 pm

    Hola carlos, por favor me podrias regalar una copia del ejemplo al correo me gustaria observar la configuracion de struts que tienes. He tratado de replicar el ejercicio pero no me funciona la carga de datos desde est js. De verdad te lo agradeceria. Si alguno le ha funcionado le gradezco el favor mi mail es sammy_cabrera@hotmail.com

  6. septiembre 11, 2012 en 4:14 am

    Thanks for finally writing about >Struts2, JSON y ExtJS – Ejemplo practico Mi mundo <Loved it!

  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: