Full Day: ExtJS, Spring y Hibernate

0 comentarios

Estamos lanzando un nuevo full day para el 23 de marzo del presente año. Más información aquí: lima-ti.com/capacitacion/extjs/fullday_extjs_spring_hibernate.pdf Saludos y buenas vibras para todos.

Full Day Ext JS, Spring y Hibernate

0 comentarios

Mi empresa está aperturando un full day de Ext JS. Como parte importante de toda aplicación, necesitamos frameworks del lado del servidor para poder hacer una aplicación seria. Por tal motivo en este full day se estudiará Spring y Hibernate también.

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. Necesitamos de frameworks en el lado del servidor que nos permitan desarrollar aplicaciones.
* Si tu lenguaje de desarrollo no es java, no te preocupes Ext JS está pensado para trabajar con cualquier tecnología del lado del servidor(php, jsp, servlets, asp).

Fecha: Sábado 15 de diciembre 9am - 6:00pm

Lo brinda: Lima TI SAC

Instructor: Mayer Horna

Dejanos tus datos para contactarte

Syllabus y Costo








Aprende uno de los mejores frameworks JavaScript para el desarrollo de Aplicaciones RIA.

Saludos

Ext JS - Sencha Touch

2 comentarios

En este post hablaré sobre Sencha Touch, aun tengo pendiente postear sobre otros componentes de ExtJS como Form, Tabs, etc. He dejado un poco abandonado mi blog, así que era momento de este post.

Hace un par de años se creó una nueva organización llamada Sencha, dejando de lado el nombre “Ext JS” con el propósito de impulsar no solo extjs sino además otros productos como Sencha Touch, Ext GWT, Ext Designer, Sencha Animator y Ext Core.

Sencha Touch es un framework javascript construido para desarrollar aplicaciones web móviles, está totalmente basado en HTML5, CSS3 y Javascript. En teoría cualquier smarthphone que tenga instalado un navegador que soporte estos estándares podría mostrar una aplicación hecha con sencha Touch, aunque solo certifican su uso sobre iPhone, Android y BlackBerry.

Aclarando algunas cosas: 
1) Sencha Touch es un framework javascript, al igual que ExtJS, por tanto su ámbito es un browser, la diferencia es que tiene componentes más ligeros y pequeños para que se puedan visualizar en un dispositivo móvil.

2) Al ser prácticamente una aplicación web, se comporta como tal: va a existir en un servidor web el cual centraliza los fuentes, de tal manera que cualquier actualización sobre la aplicaicón se hace sobre el servidor y cada dispositivo al acceder a la página verá el cambio, a diferencia de una aplicación nativa que si requiere un proceso de actualización iniciada en el mismo dispositivo.

3) Desarrollar aplicaciones bajo este tipo de plataformas está de moda, por ejemplo Jquery Mobile sigue el mismo concepto. Ahora los smartphones son mas accesibles económicamente.

4) Si te estás preguntando: “¿Entonces estas aplicaciones solo funcionan si el servidor web está activo o si mi smarthpone tiene conexión a internet?”. Todo dependerá de cómo desarrolles tu aplicación. Puedes crear una interfaz de pedidos y todo almacenarlo en el LocalStorage del Browser y luego hacer un proceso de sincronización que cargue todos los pedidos a tu servidor central. Ahora con HTML5 hasta sentencias SQL puedes hacer. 

La instalación: 
1)
Descarga los fuentes de http://www.sencha.com/products/touch/download/

2)
Crea una carpeta llamada demo_senchatouch en su interior crea un HTML llamado index.html El cuerpo del HTML que sea algo simple como:

 
<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
</body> 
</html>
Un documento en html 5 se reconoce por el al iniciar.
Más info sobre HTML5:
http://es.wikipedia.org/wiki/HTML5 http://www.manning.com/crowther/ http://www.manning.com/crowther2/

3)
Dentro de la carpeta demo_senchatouch crea otra llamada touch, y dentro de esta carpeta copiarás el archivo sencha-touch-all.js y la carpeta resources que se encuentran en los fuentes descargados de Sencha Touch. La instalación es muy similar a la de Ext JS

4)
Dentro del elemento head añade las siguientes líneas:
 

Estos dos archivos son los necesarios para poder empezar.


5)
Dentro del head creamos el elemento y colocamos lo siguiente:
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            html: 'Hola Mundo'
        });
    }
});
launch es como el Ext.onReady(…) se ejecuta una vez que el html ha sido cargado completamente.

Ejecuta el index.html, puedes ejecutarlo con google chrome que soporta HTML5, o descargarte algún emulador o entra a estos en la web:
http://www.testiphone.com/
http://tmobile.modeaondemand.com/htc/g1

El resultado:
6)
Formulario con Sencha Touch. Para hacer un formulario formulario no hace falta más que remplazar tu Hola Mundo por Un FormPanel. En Sencha Touch la creación de componentes es igual que en Ext JS, y en su mayoría los nombres de los componentes coinciden. Por Ejemplo, el siguiente código crea un formulario con una sola caja de texto y un botón "Verificar":
 Ext.application({
    name: 'Sencha',
    launch: function() {
        Ext.create('Ext.form.Panel', {
            fullscreen: true,
                    title: 'Cliente',
                    iconCls: 'customer',
                    xtype: 'formpanel',
                    url: 'ClienteServlet',
                    layout: 'vbox',

                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'Datos',
                            
                            items: [
                                {
                                    xtype: 'textfield',
                                    label: 'Nombre',
                                    name: 'name'
                                }

                            ]
                        },
                        {
                            xtype: 'button',
                            text: 'Verificar',
                            ui: 'confirm',
                            handler: function() {
                                this.up('formpanel').submit({
                                 success:function(form, action){
           var jsonResponse = action.result;
           Ext.Msg.alert('Info', 'La información ha sido enviada');
                                 },
                                 failure:function(form, action){
                                  
                                 }
                                });
                            }
                        }
                    ]
        });
    }
});
El resultado del código anterior:
Observen la propiedad url: 'ClienteServlet' , está apuntando a un Servlet, con esto se comprueba que acá no hay magia, el submit va al servidor web y es gestionado por un Servlet .

Si se puede colocar un Servlet entonces se puede colocar cualquier recurso del servidor: .php, .asp, .jsp, etc.

Por último si tienes una aplicación con Spring MVC, no tienes que cambiar nada en el servidor, solo consumes tus controllers ya programados. Lo que cambia es tu interfaz, tendrás una interfaz para un movil y otra para tu aplicación web que consumen un mismo controller de spring.

El api para cualquier consulta:
http://docs.sencha.com/touch/2-0/#!/api 

Nos vemos pronto.

Ext JS 4 - Inicio 14 abril 2012

0 comentarios

Mi empresa está aperturando nuevamente el curso de Ext JS.

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.
* Si tu lenguaje de desarrollo no es java, no te preocupes Ext JS está pensado para trabajar con cualquier tecnología del lado del servidor(php, jsp, servlets, asp).

Inicio: Sábado 14 de abril 9am - 1:30pm

Lo brinda: Lima TI SAC

Instructor: Mayer Horna

Dejanos tus datos para contactarte

Syllabus y Costo










Aprende uno de los mejores frameworks JavaScript para el desarrollo de Aplicaciones RIA.

PD: He observado que mis últimos post son referentes al inicio de este curso.... postearé algo esta semana.

Saludos

Ext JS - Curso Verano - Convocatoria

0 comentarios

Estoy aperturando nuevo grupo Ext JS.

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.

Inicio: Sábado 28 de enero ó Sábado 04 de febrero (fechas tentativas). 9am - 1:30pm

Lo brinda: Lima TI SAC

Instructor: Mayer Horna

Dejanos tus datos para contactarte

Syllabus y Costo










Aprende uno de los mejores frameworks JavaScript para el desarrollo de Aplicaciones RIA.

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.