Ext JS - Taller - Convocatoria

12 comentarios

¿Quieres aprender uno de los mejores frameworks JavaScript para el desarrollo de Aplicaciones RIA?, pues entonces este es tu primer paso.

Lo que aprenderás:
* Como aplicarlo en sistemas reales. Existen muchos tutoriales pero muy pocos te enseñan como preparar la arquitectura de tu aplicación y las consideraciones que debes tener cuando haces un sistema basado en extjs
* Buenas prácticas en el desarrollo. Para que tu código sea óptimo y no tengas dolores de cabeza cuando no sabes donde está cada cosa.
* Como integrar sus componentes. Muchos sabemos hacer una grilla o un formulario, pero a la hora de integrarlos ambos o con más componentes es un martirio.
* Spring MVC y Hibernate. También hay horas dedicadas a estas materias, necesitamos de frameworks en el lado del servidor que nos permitan desarrollar aplicaciones.

Sobre el taller:

Inicio: Sábado 26 de noviembre

Lo brinda: Lima TI SAC

Instructor: Mayer Horna

Dejanos tus datos para contactarte

Descarga el Syllabus










Aprovecha la promoción de fin de año.

Ext JS - Componentes GUI - GridPanel - Parte 1

4 comentarios

En el anterior post mostré como entablar una comunicación con el servidor web mediante Ext.Ajax.request().
Con esto ya puedes hacer mucho, por ejemplo recolectar la información de un formulario y enviar esta data como parámetros en el Ext.Ajax.request() para que luego el Servlet pueda grabarlos en base de datos y con esto tendrías un procesamiento de formulario por AJAX sin que se esté refrescando la página después de guardar. Pero para envió de datos de formulario ya veremos más adelante el uso de los FormPanel de Extjs. Vamos poco a poco.

A partir de este post ya comenzaré a mostrar el uso de los principales componentes de ExtJS. Componentes como GridPanel, FormPanel, TreePanel, etc.

Puedes ver todos los ejemplos de extjs en el siguiente link: http://dev.sencha.com/deploy/ext-4.0.0/examples/

En este post, hablaré sobre el GridPanel, el cual es un componente que te permite mostrar información como una tabla, así como lo hace el JTable de Swing.

Un ejemplo del resultado de este componente puedes verlo aquí: http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/array-grid.html

Ahora, para crear un GridPanel, primero debes de conocer los siguiente:

La data que es mostrada en el GridPanel proviene del servidor y es almacenada en un objeto store; un objeto store puede ser un JsonStore el cual espera información en formato JSON proveniente del servidor. Ahora pasamos a crear los códigos necesarios para que funcione nuestro GridPanel:

1) Creamos el JsonStore:


var clienteData = new Ext.data.JsonStore({
autoDestroy: true,
proxy: {
type: 'ajax',
url: 'ClienteServlet',
reader: {
type: 'json',
root: 'data'
}
},
autoLoad:true,
fields: [
{name:'cliente_id', type: 'int'},
{name:'tipoDeCliente.name', type:'string', mapping: 'tipoDeCliente.nombre'},
{name:'codigo', type:'string'},
{name:'nombre', type:'string'},
{name:'descuento', type:'float'},
{name:'activo', type:'int'},
{name:'creado'},
{name:'observacion', type:'string'}
]

});


El JsonStore debe saber:
a) La url de donde obtendrá los datos.
b) Los campos(fields) que componen el store. Para que así sepa donde colocar la información que viene del servidor.

2) Creamos el Servlet de Respuesta:


public class ClienteServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/plain");
PrintWriter out = response.getWriter();
List clientes = Cliente.getDummyClientes();
JSONArray array = new JSONArray();
array.addAll(clientes);
JSONObject jsonObject = new JSONObject();
jsonObject.put("data", array);
out.print(jsonObject);
out.close();
}
}

El objetivo principal acá es enviar información en formato JSON al cliente(browser) para que el objeto JSONStore se cargue de datos. Es por eso que se utiliza las clases JSONArray y JSONObject, las cuales se encuentran en la librería json-lib.jar.

El jar y sus dependencias pueden descargarlos desde este link:
http://lima-ti.com/public/mayer/blogger/demo03_ExtJS_Componentes_GridPanel/json_lib_and_dependencies.zip

Para mayor información, La página de json-lib es:
http://json-lib.sourceforge.net/

Este conjunto de nuevas clases te permiten crear objetos JSON a partir de un JavaBean o un Arreglo de JSON a partir de una collección.

Hasta aquí se ha creado el JSONStore y el Servlet que envía los datos para que el store se cargue. Pero todo esto no es visual, asi que es momento de crear el objeto GridPanel para poder presentar los datos.

3) Creamos el GridPanel:

var clienteGrid = new Ext.grid.GridPanel({
title: 'Lista de Clientes',
store: clienteData,
columns: [
{ header: 'Codigo', dataIndex: 'codigo' },
{ header: 'Nombre', dataIndex: 'nombre' },
{ header: 'Tipo de Cliente', dataIndex: 'tipoDeCliente.name' },
{ header: 'Descuento', dataIndex: 'descuento', align:'right'},
{ header: 'Activo', dataIndex: 'activo', renderer:siONoRenderer},
{ header: 'Creado', dataIndex: 'creado', renderer:dateRenderer}
],
height: 200,
width: 650,
renderTo: Ext.getBody()
});


Las dos últimas columnas tienen la propiedad renderer, lo que indica que al momento de renderizar el valor(justo antes de ser mostrado) se ejecutará estas funciones que se indican, con el fin de alterar o mostrar el mismo valor.

4) Creamos las funciones renderers:

function dateRenderer(jsonDate){
var dt = Ext.Date.parse(jsonDate.date+'/'+jsonDate.month+'/'+(jsonDate.year>100?(jsonDate.year-100):jsonDate.year), "d/n/y");
return (Ext.util.Format.date(dt,"d/m/Y"));
}
function siONoRenderer(value){
return value == 1 ? "Si" : "No";
}



* Las clases java como Cliente, TipoDeCliente y ClienteServlet pueden descargarlo desde aquí:
http://lima-ti.com/public/mayer/blogger/demo03_ExtJS_Componentes_GridPanel/clases_java.rar

Une los códigos de los puntos 1), 3) y 4) dentro de un Ext.onReady(...) como en la demo anterior y ejecútalo. El resultado es el siguiente:


He partido este tuto en dos partes. En el siguiente post hablaré sobre la paginación y el ordenamiento de columnas sobre el GridPanel.

Cualquier duda respecto al código pueden comentarlo en el post.

Ext JS – Comunicación con el Servidor

2 comentarios

En el post anterior mostré como empezar con Ext JS. Se creó un MessageBox que mostraba un "Hola Mundo". Pero todo ocurría en el cliente(browser). ¿Qué pasa si deseas que ese mensaje venga desde el servidor web?, o ¿Si deseas enviar datos al servidor web para que este los grabe en una base de datos y no esté refrescando la página web?. Bueno este tutorial te enseña como dar el primer paso, en un posterior post eneseñaré como tulizar los principales componentes de extjs como los formularios y grids.

Paso 0:
Ahora si, es momento que utilices una tecnología del lado del servidor como PHP, ASP o JSP y servlets. Como en mi sangre fluye Java, pues los ejemplos serán con JSP y Servlets.
Ten listo un proyecto web en eclipse o netbeans o en cualquier otro IDE que te permita trabajar.

Paso 1:

En el cliente:
El siguiente HTML muestra un botón que al dar click mostrará un MessageBox como en el ejemplo del post anterior, pero ahora el mensaje que mostrará será un texto enviado desde el servidor web:


<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/ext-all.js"></script>
</head>
<body style="padding:10px;">
<button onClick="javascript:obtenerHoraDelServidor();">Obtener Hora Del Servidor</button>
<script type="text/javascript">
//Código ExtJS
</script>
</body>
</html>


Paso 2:
Ahora añade el siguiente código dentro de <script>...</script>

function obtenerHoraDelServidor(){
Ext.Ajax.request({
url:'HoraServidorServlet',
method:'GET',
params:{
accion:'obtenerHora'
},
success: function(response, opts){
var mensaje = response.responseText;
Ext.MessageBox.show({
title:'Hora del servidor',
msg:mensaje,
buttons:Ext.MessageBox.OK,
icon:Ext.MessageBox.INFO
});
},
failure: function(response, opts){
//...
}
});
}


La clase Ext.Ajax permite entablar una comunicación con el servidor, su método request indica la url que gestionará la petición en el servidor, los parámetros a enviar y el procesamiento de la respuesta satisfactoria del servidor(función success) o el procesamiento de una respuesta de error del servidor(función failure).

Paso 3:
En el servidor:
En el paso 2 indicamos una url de servidor. Entonces es momento de crear el servlet que gestionará la petción del cliente(browser):


public class HoraServidorServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
PrintWriter out = response.getWriter();
SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss (dd/MM/yyyy)");
String fechaConFormato = sdf.format(new Date());
out.print("Hora del Servidor: " + fechaConFormato );
out.close();
}
}


Observen que el servlet gestiona una petición por método GET(fué indicado en el Ext.Ajax.request()).

Luego de que tienes listo el servlet, ejecuta tu aplicación web y desde index.html o como llamaste a tu html y da click en el botón. El resultado debe ser como se muestra en la siguiente figura:

Ext JS - Instalación

1 comentarios

Antes de empezar, expreso mis saludos a todos mis amigos que son padres, hoy es su día y espero estén celebrando como se debe. En especial un saludo a los papás sistémicos e informáticos que conozco y que le hechan duro a la chamba para que su familia no le falte nada.

Ahora sí, manos a la obra:
En el presente mini tutorial mostraré como empezar a utilizar Ext JS en una página web simple. En un posterior post enseñaré como interactuar con el servidor web.

Para poder empezar a utilizar Ext JS basta con inlcuir 2 archivos(un CSS y un javascript) en un página HTML. Y menciono HTML para desligarlo de cualquier tecnología del lado del servidor(PHP, Servlet o JSP) ya que como mencioné en el post anterior Ext JS es un framework JavaScript por tanto se ejecuta en el cliente(browser). Disculpen si hago incapié en esto pero me interesa que todo vaya quedando claro.

Ahora sí, los pasos para hacer el "Hola Mundo" fundamental y el que servirá como punto de partida para aprender Ext JS.

Paso 0:
* Descarga Ext JS 4.0 del siguiente link:
http://www.sencha.com/products/extjs/download/ext-js-4.0.2a/213
* Crea una carpeta llamada demo01 en su interior crea un HTML llamado index.html
El cuerpo del HTML que sea algo simple como:


<html>
<head></head>
<body></body>
</html>


No necesitamos nada más para empezar.
* Dentro de la carpeta demo01 crea otra llamada extjs, y dentro de esta carpeta copiarás el archivo ext-all.js y la carpeta resources que se encuentran en los fuentes descargados de Ext JS 4.0.

Paso 1:
Dentro del elemento <head>...<head> añade las siguientes líneas:

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="extjs/ext-all.js"></script>

Nota: En versiones anteriores a la 4 era necesario incluir un archivo adicional (el adapter) pero ahora ya no lo es.

Paso 2:
Dentro del elemento <body> ... </body> añade las siguientes líneas:

<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.show({
title:'Info',
msg:'Hola Mundo',
buttons:Ext.MessageBox.OK,
icon:Ext.MessageBox.INFO
});
});
</script>


Paso 3:
Ejecuta index.html y observa el resultado.
Verás el mensaje "Hola Mundo" dentro de una ventana flotante.

El MessageBox es solo uno de los muchos componentes que tiene Ext JS.
Siempre que tengas dudas de la sintaxis o requieres información
de qué parámetros utilizar héchale un vistazo al API, que es muy bueno:
http://dev.sencha.com/deploy/dev/docs/

Ahí puedes consultar la clase Ext y su método onReady, al igual que la clase Ext.MessageBox y su método show.

Noten que hablo de clases; cuando vean el API entenderán a que me refiero. Los creadores de este framework lo conceptualizaron así y acertaron en hacerlo ya que te permite crear componentes a partir de los que ya existe(HERENCIA), de esto hablaremos mas adelante.

Ext JS - Introducción

0 comentarios

Después de haber cumplido con mi deber cívico acercándome a votar en estas elecciones presidenciales 2011, me relajaré un poco posteando acerca de Ext JS.

En este post hablaré de forma general acerca de Ext JS, en un siguiente post publicaré mini tutoriales de como usar Ext JS en aplicaciones web.

Ext JS
Es un framework JavaScript para construir aplicaciones RIA utilizando AJAX, DHTML, CSS y DOM. Extiende de Prototype, JQuery y YUI.

Ejemplo de una grilla de datos desarrollada en Ext JS:

La imagen anterior muestra una grilla creada con Ext JS, está construida netamente con Javascript y CSS. No es construida en el servidor, el server solo se encarga de enviar al cliente la data en formato JSON o XML, y el cliente se encarga de leer estos datos y cargarlos en la grilla. De esta manera la lógica del servidor puede ser implementada con PHP, Servlets o JSP, ASP u otras tecnologías del lado del servidor.

Ventajas:
* Permite crear aplicaciones complejas utilizando componentes predefinidos así como un manejador de layouts similar al que provee Java Swing, esto provee una experiencia consistente sobre cualquier navegador, evitando el tedioso problema de validar que el código escrito funcione bien en cada uno (IE , Firefox, Opera, Safari, etc.).
* No necesita que la máquina cliente tenga instalado un plugin externo, Ya que es código JavaScript.
* Cuenta con un Un API fácil de usar. Los creadores de Ext JS han diseñado un modelo de componentes extensibles por herencia. Cabe recalcar que JavaScript no es un lenguaje orientado a objetos sino que sigue el paradigma de programación basada en prototipos y la herencia que hace es aplicando prototipado.

Desventajas:
* En versiones anteriores a la 3, la falta de un diseñador gráfico limitaba la producción fácil y rápida de las interfaces(aunque para quienes nos apasiona programar no era un limitante, por suerte tenía un API fácil de usar). A partir de la versión 3 ya existe Ext Designer

* Ext JS al ser una librería Javascript independiente de cualquier tecnología del lado del servidor no existe una forma por defecto de realizar binding entre los componentes visuales con el respectivo modelo; como por ejemplo querer que los datos del formulario sean cargados automáticamente en un bean, pero afortunadamente con frameworks como Spring y un poco de Código JavaScript se puede lograr esto.

Fuentes de aprendizaje:
* Video tutoriales de Ext JS, útiles para quienes se inician en Ext JS:
http://www.quizzpot.com/
* + Video tutoriales:
http://www.extjs.tv/
* Libro "Ext JS In Action":
http://www.manning.com/garcia/
* Site Oficial de Ext JS:
http://www.sencha.com/
* Grupo ExtJS Peru User Group:
http://groups.google.com/group/extjs-peru-user-group

Otra información:
Este framework es de propiedad de la empresa Sencha que además cuenta con otros frameworks como
* "Sencha Touch" para hacer aplicaciones web con componentes que pueden ser renderizados en dispositivos Iphone y Android.
* "Ext GWT" para los amantes de Java y GWT (Google Web Toolkit). Es una extensión del GWT que sirve para crear interfaces tales como se muestra en Ext JS.

Lima TI

3 comentarios

Este es mi primer post de este año, como que me he demorado un poco.
Quiero anunciar que hemos publicado el site de nuestra empresa: http://lima-ti.com.
Es una empresa que hemos fundado un grupo de amigos y yo en el 2009.

Y uno de los principales frameworks que promocionamos y que utilizamos en nuestro desarollo es Ext JS, además de Java (Spring, Hibernate y Faces).

Iré publicando más de Ext JS en mi blog y en en el grupo oficial de google:
http://groups.google.com/group/extjs-peru-user-group
Todos están invitados a formar parte de este grupo.

Facebook de Lima TI:


Twitter: