Mi mundo

Los Vengadores -Trailer Oficial

Carlos F. — Tue, 11 Oct 2011 23:16:53 +0000

El día de hoy fue lanzado el primer trailer oficial de la pelicula de superheroes más esperada del 2012, aqui se las dejo, en mi opinion nos deja con unas ganas de ver más (como todo trailer de pelicula de superheroes) y al final unos pocos segundos de la apariencia del nuevo Hulk.

Lastima hay que esperar hasta el 2012.

Tagged: capitanamerica, hulk, ironman, los vengadores, superheroes, thor

Struts2, JSON y ExtJS – Ejemplo practico

Carlos F. — Mon, 09 May 2011 22:23:21 +0000

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 findAll() {
List personas = new ArrayList();
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 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

class=”com.ejemplo.action.PersonaJSONAction”>

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.

href=”../resources/css/ext-all.css” />

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.

Tagged: extjs, grid, java, javascript, json, programadores, struts2

Estrenos – Verano 2011

Carlos F. — Fri, 06 May 2011 21:33:12 +0000

En Estados Unidos las grandes productoras de películas se dieron cuenta que el verano era la temporada en que la gente asistía con mayor frecuencia al cine, por lo que decidieron estrenar sus mas grandes superproducciones en estas fechas y el 2011 no podría ser la excepción por lo que aquí dejo un adelanto de aquellas que a mi parecer serán de las más vistas este verano =D

Captain America

Green Lantern

Cowboys and Aliens Trailer

Harry Potter and the Deathly Hallows Part 2

Transformers: Dark of the Moon

Pirates of The Caribbean 4

Tagged: capitan america, estrenos, harry potter, linterna verde, piratas del caribe, superproducciones, trailer, transformers, verano

Struts2 y JSON

Carlos F. — Wed, 16 Feb 2011 18:38:19 +0000

Después de un tiempo he regresado con un nuevo post acerca de Struts2 y respuestas JSON, a veces es necesario realizar esta tarea sobre todo cuando existe un front que ejecuta peticiones Ajax con las cuales muchas veces es necesario manejar respuestas en JSON.

Este ejemplo se basara unicamente en la construcción de una respuesta de Action que construira una cadena JSON que sera manejada por el front, para esto utilizaremos el plugin de JSON para Struts2 que puedes descargar de aquí y para conocer un poco más se puede consultar la siguiente la documentación.

Una vez descargada la librería la añadimos a nuestro proyecto y empezamos con la construcción. Lo primero es la definición del Action dentro de nuestro archivo struts.xml de la siguiente manera:

Cómo se darán cuenta el Action declarado tiene como resultado una respuesta de tipo JSON y además el paquete de Actions lo extendemos de json-default.

Lo siguiente es la construcción del Action cómo se muestra a continuación:

public class JSONAction extends ActionSupport {
/**
*
*/
private static final long serialVersionUID = 1L;
private int numero;
private String cadena;
private boolean bandera;
private int[] numeros;

public String execute() {
numero = 6567;
cadena = “Hola nariz de bola.”;
bandera = true;
numeros = new int[] { 1, 2, 3, 4, 5 };
return SUCCESS;
}

//Colocar getters y Setters

}

En esta clase muy sencilla lo único que hacemos es el construir diferentes variables de diferentes tipo para poder observar la manera en que el plugin de JSON elaborará la respuesta correspondiente.

Finalmente desplegamos nuestra aplicación e invocamos el Action correspondiente que nos mostrará lo siguiente:

Debido a que la invocación al Action se realiza directamente y cómo este regresa una respuesta de tipo JSON el navegador lo identifica automáticamente como un archivo.

El contenido del archivo es el siguiente:

Cómo podemos observar la respuesta es una cadena representada en formato JSON, este pequeño ejemplo nos servirá mas adelante con la integración de Struts2 y ExtJS el framework de JavaScript del cual ya he mostrado algunos ejemplos en este blog.

También podemos añadir un poco más de complejidad a este ejemplo y agregar a la respuesta una colección de un Bean que tenga como variables los datos de una persona por ejemplo.

Ya saben cualquier duda y/o comentario es bien recibido =D.

Tagged: java, json, programadores, struts2, web

Megamente – Película

Carlos F. — Tue, 11 Jan 2011 19:57:26 +0000

Director: Tom McGrath

Doblaje: Will Ferrell, Jonah Hill y Brad Pitt

Película animada que gira entorno a la idea de “¿Qué pasaría si Lex Luthor derrota a Superman?”, bajo esta idea se va desarrollando la trama de Megamente en la cual el supervillano de Metrociudad logra lo que siempre ha anhelado en la vida, vencer a Metroman y una vez que lo ha derrotado se convierte en el dueño de toda la ciudad pero con el tiempo se da cuenta que no puede existir un villano sin un héroe.

La historia es bastante buena ya que nos muestra que no siempre debemos ser lo que la sociedad dicta que seamos y que dentro de cada persona se encuentra un héroe o un villano todo depende que las decisiones que tomemos.

Recomendable para toda la familia =D.

Tagged: megamente, megamind, pelicula

Obtener Diferencia de Días en Java

Carlos F. — Tue, 11 Jan 2011 01:28:29 +0000

Esta vez tengo algo un poco más sencillo pero que en muchos casos es necesario, bueno al menos en mi caso tuve la necesiadad de investigar como hacer el simple procedimiento de conocer el número de días que exitían entre 2 fechas sin importar el número de años, y debido a eso genere esta función que hace uso de los Objetos GregorianCalendar.

static int obtenerDiferenciaDias(GregorianCalendar date1, GregorianCalendar date2) {
GregorianCalendar dateTemp = new GregorianCalendar(date1.get(Calendar.YEAR), date1.get(Calendar.MONTH), date1.get(Calendar.DAY_OF_MONTH)); //Se usa cuando la diferencia de años es mayor a 1
int diff = 0;
int dias = 0;

diff = date2.get(Calendar.YEAR) – date1.get(Calendar.YEAR);

if (diff == 0) {
dias = date2.get(Calendar.DAY_OF_YEAR)
- date1.get(Calendar.DAY_OF_YEAR);
} else if (diff > 0) {
dias = date1.isLeapYear(date1.get(Calendar.YEAR)) ? 366 – date1.get(Calendar.DAY_OF_YEAR) : 365 – date1.get(Calendar.DAY_OF_YEAR);
for (int i = 1; i < diff; i++) {
dateTemp.add(Calendar.YEAR, 1);
dias += dateTemp.isLeapYear(dateTemp.get(Calendar.YEAR)) ? 366: 365;
}
dias += date2.get(Calendar.DAY_OF_YEAR);
}

return dias;
}

Ya saben cualquier duda y/o comentario es bien recibido =D.

Tagged: calendar, diferencia dias, java

ExtJS – Simple Grid

Carlos F. — Thu, 16 Dec 2010 23:37:25 +0000

En el anterior post vimos como realizar un formulario muy sencillo con ExtJS, en esta ocasión realizaremos un ejemplo muy básico de como realizar el llenado y visualización de un grid mediante el uso de ExtJS.

En este ejemplo al igual que en el anterior utilice:

Eclipse IDE
JSP
Tomcat

Cómo primer paso se deben añadir las referencias necesarias para el uso de ExtJS dentro del archivo que servirá como base de la construcción, en este caso es un archivo JSP y las referencias a añadir son las siguientes:

Cómo se puede ver en el código anterior se hace referencia a un archivo llamado grid.js, este archivo contendrá el código necesario de ExtJS para la construcción del grid. Hago notar que las demás referencias que se muestran en el código corresponden a archivos que se encuentran en el framework de ExtJS.

Antes de comenzar con la generación del código JavaScript se debe considerar que ExtJS para el caso de los Grids maneja 3 diferentes orígenes de datos o mejor dicho 3 formas a partir de las cuales se puede llenar un Grid y estas son:

Desde un Array de Strings.
Desde un objeto JSON.
Desde un archivo XML.

Para este ejemplo utilizaremos un Array, en ejemplos posteriores se vera el manejo de objetos JSON, cómo ya mencionamos este ejemplo tomara los datos de un Array por lo que el primer paso es generar ese Array con los datos que mostrará nuestro grid.

var dataPersons = [ [ 1, 'Jose', 'Perez', 'Perez' ],
[ 2, 'Juan', 'Sanchez', 'Sanchez' ],
[ 3, 'Ramona', 'Sanchez', 'Perez' ],
[ 4, 'Chimoltrufia', 'Perez', 'Sanchez' ] ];

Ahora continuamos con la definición del origen de los datos que en este caso sera del Array y eso se hace mediante la creación de un Reader de la siguiente manera:

var readerPersons = new Ext.data.ArrayReader( {
idIndex : 0
}, [ {
name : 'matricula',
type : 'int'
}, 'nombre', 'apPaterno', 'apMaterno' ]);//Se definem los nombres de los campos de cada registro y en el caso de la //matricula el tipo.

Una vez hecho lo anterior definimos el Store que indicará el de dónde se obtienen los datos (Array) y el con qué los vamos a leer (Reader).

var store = new Ext.data.Store( {
data : dataPersons,
reader : readerPersons
});

El penultimo paso es modelar las columnas a visualizar y algunas propiedades que deseamos que tenga nuestro Grid. En este caso en el modelado definiremos que todas nuestras clases sean ordenables.

var personaColMod = new Ext.grid.ColumnModel( {
columns : [ {
header : "Matricula",
dataIndex : 'matricula',//El valor del dataIndex corresponde al definido en el Reader
sortable : true
}, {
header : "Nombre",
dataIndex : 'nombre',//El valor del dataIndex corresponde al definido en el Reader
sortable : true
}, {
header : "Ap. Paterno",
dataIndex : 'apPaterno',//El valor del dataIndex corresponde al definido en el Reader
sortable : true
}, {
header : "Ap. Materno",
dataIndex : 'apMaterno',//El valor del dataIndex corresponde al definido en el Reader
sortable : true
} ]
});

Finalmente indicaremos en dónde se va a visualizar nuestro grid, esto mediante la definición de un GridPanel.

var grid = new Ext.grid.GridPanel( {
renderTo : Ext.getBody(),
frame : true,
title : ‘PERSONAS’,
height : 200,
width : 420,
store : store,//El store definido previamente.
colModel : personaColMod//El modelado de columnas.
});

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

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

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, en entregas posteriores abarcaremos la forma de obtener objetos JSON mediante struts 2, esto con el fin de poder llenar nuestro Grid con datos obtenidos desde una Base de Datos.

Cualquier duda o comentario será bien recibido.

Tagged: extjs, grid, javascript, jsp

The Social Network – Película

Carlos F. — Mon, 13 Dec 2010 21:18:51 +0000

Director: David Fincher

Reparto: Jesse Eisenberg, Andrew Garfield y Justin Timberlake

Película que retrata el nacimiento de la red social más famosa del mundo y también el rol que toma Mark Zuckerberg, la historia gira en torno a la frase que acompaña el cartel de la película, “No puedes obtener 500 millones de amigos sin hacer algunos enemigos”, bajo esta premisa es en la que se desarrolla la historia.

La trama abarca varios temas que están presentes en todas las sociedades y que me parece que estan retratadas de manera muy real en la película:

El valor de la amistad.
La ética profesional.
La forma en que las personas maduran.

En resumen es una muy buena historia contada de la manera correcta. Y al final te deja con un claro mensaje, “Ideas las tenemos todos, pero el llevarlas a cabo es realmente lo que te lleva al éxito”.

Tagged: movie, thesocialnetwork

El Profesor – John Katzenbach

Carlos F. — Wed, 08 Dec 2010 23:44:58 +0000

Titulo: El Profesor (What Comes Next).

Autor: John Katzenbach.

Genero: Misterio y suspenso.

Sinopsis: El secuestro de una jovencita de 16 por parte de una pareja de psicópatas y el único testigo del hecho un viejo profesor, de esta manera inicia una nueva historia de misterio y suspenso que nos lleva de la mano a lo largo de la investigación que decide hacer el viejo profesor en busca de la jovencita secuestrada.

Realmente la velocidad a la que trascurre la historia es trepidante un suceso tras otro nos engancha a la historia, la rapidez con que suceden los hechos es de suma importancia debido a un factor que acorta el desenlace a cada minuto que pasa.

En general es una historia bien armada, con algunos personajes que nunca imagina uno que van a tener tanto peso en la historia pero que al final son piezas claves dentro del desenlace y un final un tanto inesperado o tal vez un final un poco más apegado a la realidad de la vida.

No duden en dejar sus comentarios y/o sugerencias.

Tagged: El Profesor, John Katzenbach, Libro, What Comes Next

Formulario en ExtJS

Carlos F. — Wed, 08 Dec 2010 19:52:34 +0000

Empezaremos con una pequeña introducción a ExtJS que es un Framework para la construcción de aplicaciones Web basadas en la filososfía RIA. En este primer ejemplo se trabajara la construcción de un pequeño formulario muy básico el cual constara de diferentes tipos de componentes que nos proporciona ExtJS.

Cómo primer paso debemos considerar que el ejemplo pude realizarse desde un HMTL común y corriente, este ejemplo se realiza utilizando lo siguiente:

Eclipse IDE
JSP
Tomcat

Se deben descargar los archivos necesarios del Framework desde aquí.

Cómo se puede ver en el código anterior se hace referencia a un archivo llamado formulario.js, este archivo contendrá el código necesario de ExtJS para la construcción del formulario. A continuación se muestra el código necesario para construir un formulario muy sencillo dentro del archivo formulario.js.

var movie_form = new Ext.FormPanel( {
url : ‘movie-form-submit.jsp’, //A donde se enviara la información del formulario
renderTo : Ext.getBody(), // En dónde se visualizará el formulario
frame : true,
title : ‘Movie Information Form’,
width : 250,
items : //Aqui se empezarán a añadir los componentes de nuestro formulario
});

Lo siguiente es ir añadiendo los componentes que contendrá nuestro formulario.

items : [ {
xtype : 'textfield', //Ejemplo de campo de texto
fieldLabel : 'Title',
name : 'title',
allowBlank : false
}, {
xtype : 'textfield',//Ejemplo de campo de texto
fieldLabel : 'Director',
name : 'director',
vtype : 'alpha'
}, {
xtype : 'datefield',//Ejemplo de campo de texto con formato de fecha
fieldLabel : 'Released',
name : 'released',
disabledDays : [ 1, 2, 4, 5 ]
}, {
xtype : ‘radiogroup’,//Ejemplo de conjunto de radiobuttons
columns : 1,
fieldLabel : ‘Filmed In’,
name : ‘filmed_in’,
items : [ {
name : 'filmed_in',
boxLabel : 'Color',
inputValue : 'color'
}, {
name : 'filmed_in',
boxLabel : 'Black & White',
inputValue : 'B&W'
} ]
}, {
xtype : ‘checkbox’,//Ejemplo de un checkbox
fieldLabel : ‘Bad Movie’,
name : ‘bad_movie’
}, {
xtype : ‘combo’,//Ejemplo de uan lista desplegable
hidenName : ‘genre’,
fieldLabel : ‘Genre’,
mode : ‘local’,
store : genres, //De aqui se toman los datos para llenar la lista desplegable
displayField : ‘genre_name’,
valueField : ‘id’,
width : 120
}, {
xtype : ‘textarea’,//Ejemplo de area de texto
name : ‘description’,
hideLabel : true,
height : 100,
anchor : ’100%’
}, {
xtype : ‘htmleditor’,//Ejemplo de un editor con herramientas de edicion
name : ‘descriptor’,
hideLabel : true,
height : 100,
anchor : ’100%’
} ]
});

La lista desplegable necesita como parámetro la lista de datos que desplegara, en nuestro ejemplo será un array de Strings y se construye de la siguiente manera:

var genres = new Ext.data.ArrayStore( {
fields : [ 'id', 'genre_name' ],
data : [ [ '1', 'Comedy' ], [ '2', 'Drama' ], [ '3', 'Action' ] ]
});

Una vez terminado lo anterior y sí los archivos referenciados estan en el lugar correcto nos debe de aparecer lo siguiente:

Bueno hasta aquí el primer ejemplo con ExtJS, se agradecen los comentarios o dudas que puedan ir dejando. El próximo ejemplo será una un grid muy básico.

Leer: ExtJS, Ejemplos ExtJS.

Tagged: extjs, javascript, jsp, web