Internet Developing

Porque no he escrito mas en este blog - Parte I: Mi infancia

2011-05-26T10:12:00.003-04:30

Sé que he abandonado bastante este blog, y una de las razones es que hace 1 ano y medio decidí renunciar a mi trabajo como desarrollador en Cinet Solutions y emprender mi propio negocio.

Han pasado muchas cosas, ha sido una experiencia increíble, llena de muchos aprendizajes y emociones y quiero compartir un poco con ustedes como es mi vida como emprendedor hoy en día para ver si los motivo un poco a hacer lo mismo.

Cuando te encanta la tecnología, y la vives dentro de tus venas en tu día a día, sucede un efecto muy similar al de Neo en Matrix, no ves problemas sino soluciones tecnológicas. Es increíble como la cotidianidad se convierte en una maquina de ideas, no hay un momento donde no estés pensando "Que excelente seria que se pudiera esto, o esto otro".

Todo empezó en mi 8vo grado del colegio cuando tenía 13 anos, que logre utilizar Microsoft Front Page para crear mi primera pagina web. De que era la pagina? Obviamente de Dragón Ball! eso era lo que me encantaba, estaba enamorado de Bulma y quería ser como Vegeta! Me pasaba todo el día subiendo imágenes de Dragon Ball a mi pagina y deseando que alguien la leyera. En ese momento había un boom de servicios gratuitos de hosting como geocities.com y lycoos.com, todos te permitían hostear tu pagina gratis con la condición de que dejaras banners de publicidad en el site.

Luego de crear miles de páginas y de copiarme otras miles (hice 2 páginas de dragon ball, una de shakira, una de limp bizkit y hasta una de un concurso de haloween que la pagina fortunecity.com estaba publicitando (no llegue ni a los primeros 100 puestos) decidí hacer una página para la gente de mi colegio y cree promo2003stc.tk: Que increíble la acogida de la pagina, me convertí en una mini-celebridad en todo el colegio, incluso en los niveles de mas abajo, todo el mundo me veía como "El chamo que creo la pagina web de los de quinto año".

Para ese entonces ya tenía 16 años, la pagina permitía subir las fotos de la promoción, tenia encuestas de los mas sexys, encuestas de los mas simpáticos, una sección de anécdotas (en esos momentos uno se está graduando y entra una melancolía), una sección de caricaturas y montajes, etc. En fin, era una mini red social, aunque en ese momento nadie sabía lo que era ese término, y facebook y Hi5 no habían dado señales de vida en Venezuela.

Con esa pagina comprobé una vez más mi pasión por la tecnología y me sirvió para estar REALMENTE CLARO de que era lo que quería estudiar (tenia dudas entre ser guitarrista/músico o ingeniero informático) y empecé mis estudios en ingeniería informática en la UCAB (Universidad Católica Andrés Bello) de Venezuela.

Empecé la universidad y empezó mi verdadero emprendimiento! Continuo en un próximo post, déjenme sus comentarios! Y siganme en www.Poclu.com/alejandro

Sobre emprendimiento en la web 2.0

2011-05-01T16:53:00.002-04:30

Emprender en la web 2.0 tiene sus caracteristicas muy particulares que lo hacen muy diferente al emprendimiento tradicional:

1. Facil desarrollo: Si bien hacer una red social de calidad a nivel tecnico es un reto, lograr pasar de nada a una version beta se puede lograr en muy poco tiempo (en semanas) y con poco esfuerzo. Utilizar las ultimas tenologias (frameworks) puede ser una buena estrategia para acelerar este proceso de desarrollo.

2. Rapido feedback: Una vez que la version beta esta lista, obtener feedback de los usuarios es muy sencillo gracias a la viralidad de las redes sociales e internet. Hay que tener herramientas para interactuar con los usuarios y saber cuales deben ser los proximos cambios para lograr ese ansiado "product-market fit".

3. Iteraciones cortas: Carlos R Villanueva construllo la UCV completa sin caminos, cuando le preguntaron porque, dijo que esperaria a que la gente caminara por el monte, y cuando el paso de la gente crearan caminos de tierra, el construiria los caminos por esos recorridos. El mismo principio aplica aqui, no trates de construir una mega-aplicacion, sal con una version beta muy limitada y deja que los usuarios te digan hacia donde dirigirte. Ve soltando las funcionalidades que te pidan en tiempos cortos.

4. Atraer primeros usuarios: Es uno de los grandes desafios,este articulo de mashable (http://on.mash.to/lcmJ8E) explica como lo lograron las grandes redes sociales de hoy en dia.

5. Monetizar: Ganar dinero es otro de los retos, este tema lo dejo para mi post de los proximos dias.

Posicionamiento en buscadores - Inscripcion en directorios de páginas

2010-08-06T00:34:00.002-04:30

Cuando google salió, su gran y recolucionario método de indexación se debió a una técnica fundamental, google decidió tomar los vínculos (links) que existían entre las paginas como una recomendación, es decir, si mi blog tiene un enlace hacia tu blog, entonces, quiere decir que yo considero que tu blog es bueno. Otro factor a tomar en cuenta es la importancia que tiene esa página que me está recomendado, no es lo mismo que la página del periódico New York times tenga un vinculo hacia tu pagina a que el bloginternetdeveloping.blogspot.com, por supuesto que la del NY Times es más importante, lamentablemente para mi . Para entender mejor esto pueden revisar la figura 1.

Figura 1

Page Rank : PageRank (PR) es un valor numérico que representa la importancia que una página web tiene en Internet.

Cuando uno quiere subir de posición a una página web que no es muy conocida, es probable que tampoco tenga ningún link o vinculo que apunte hacia esa página, entonces, ¿Cómo podemos empezar a obtener vínculos hacia nuestra web? Es muy sencillo:

Inscríbanla en todos los directorios de páginas que existen en internet (O por lo menos en los más importantes, es decir, aquellos directorios que estén mejor posicionados en google). El directorio web gratuito y software libre más importante del mundo es http://www.dmoz.org/, tiene un Page Rank de 7 y para poder ser incluido en ese directorio debes pasar por unas estrictas normas y validaciones por parte de sus editores.

Mi recomendación es que busquen la mayor cantidad de directorios posibles y se inscriban en todos, es una tarea fastidiosa, pero será muy reconfortante cuando vean su página subir puestos en google rápidamente.

Posicionamiento en buscadores - Utilizacion de etiquetas h1, h2, Strong, etc.

2010-08-06T00:15:00.005-04:30

Durante los inicios del diseño web, las etiquetas h1, h2 era muy utilizadas para representar títulos y subtítulos de las paginas, esto se debía a que le colocaban un formato al texto que estos elementos HTML tienen un comportamiento especifico, ideal para resaltar textos. Por ejemplo, la etiqueta h1 lo que hace es hace muy grande y negrito el texto que esta contenido dentro de ella.

Hoy en día con la utilización de estilos CSS podemos sobre-escribir el comportamiento natural de una h1 y colocarlo del tamaño, color y forma que deseemos, sin embargo, google sigue considerando los textos que se encuentren dentro de las etiquetas h1, h2, h3, etc. Como los textos más importantes de la pagina, los que resumen en cierta manera todo el contenido de la pagina (Los títulos, subtítulos, etc.).

Aprovechandonos de estos conocimientos sobre los buscadores, es muy recomendable mantener esa conducta estandar que la comunidad adopto inicialmente, cada vez que veamos un titulo debemos colocarlo dentro de una etiquera h (h1,h2,h3,h4 o h5), despues si queremos le damos el estilo (color, tamaño, grosor, etc.) que queramos.

La etiqueta <strong> tambien es entendida por google para resaltar una palabra clave dentro de la pagina, solo que en menor medida que las etiquetas h.

Es importante recalcar que no debemos abusar tampoco de estas etiquetas, ya que se puede perder el sentido de la importancia del texto, si colocamos todos nuestros textos dentro de una etiqueta <strong> o <h1> no estamos logrando nada porque google no sabe cuales son los terminos mas importantes, seria como cuando leemos todo un texto en mayuscula, puede aturdirnos y al todo ser importante, en realidad, nada es importante.

Posicionamiento en buscadores - Tiempo de carga de una pagina web

2010-08-05T01:02:00.008-04:30

Esta es un área muy técnica que debe ser atendida con mucha paciencia por parte del desarrollador, pero cada vez vale más la pena tomarla en cuenta porque según el nuevo motor de google llamado Caffeine este es uno de los factores más importantes al momento de posicionar la pagina en el buscador.

Hay miles de factores que perjudican el tiempo de visualización promedio de una página web: Que tan pesadas son las imágenes y recursos, la cantidad de peticiones que hace la pagina, la cantidad de scripts externos que se importan, la velocidad del servidor, la presencia de consultas a la BD muy pesadas, etc.

Podríamos estar todo el día nombrando cosas, pero como hay muchos artículos que hablan sobre optimización de consultas SQL, hosting de servidores, etc. Yo les voy a mencionar solo algunos tips que no parecen tan obvios, pero pueden ayudar bastante a disminuir el tiempo de carga de tu página.

Bajar el tamaño y calidad de todas tus imágenes de la pagina (Y utilizar la menor cantidad posible).
Comprimir códigos CSS y Javascript: Comprimir los códigos tiene como inmediata consecuencia lógica que pesen muchísimo menos, y por lo tanto que sean mucho mas rápidos de descargar. Para hacer esto hay un programa muy recomendado llamado YUI Compresor, este programa con un algoritmo logra eliminar todos los espacios en blanco, códigos que sobran, etc. De una página web.
Unificar tus imágenes en una sola: Una de las metas para hacer más veloz la carga de tu pagina es reducir el número de request que se hacen antes de cargarla o justo al momento de cargarla, si uno tiene 5 imágenes diferentes en una misma página web, es posible unificarlas en una sola imágenes y hacer 5 request a la misma imagen, entonces, como el navegador tiene memoria cache, en realidad solo pide la imagen al servidor la primera vez y de ahí en adelante la carga directamente desde la cache. Para poder poner todo en una sola imagen, deben recorrer la imagen con una propiedad llamada backround-position: 0px 0px; (Primero el movimiento de la posición en X y luego en Y). Por ejemplo ,a siguiente imagen de la figura 1:

Figura 1

Tiene 12 imágenes azules diferentes, donde cada una explica algún punto de la herramienta http://www.tucondominio.com.

Para optimizar esto debemos realizar una sola imagen que vamos recorriendo con el backgroundposition y se le pone el width y height necesario para que la imagen deseada se vea correctamente.

Figura 2

El codigo css para lograr una pagina web como la mostrada en la figura 2 es el siguiente:


.functionTitle{ font-size: 16px;font-weight: bold; padding: 0; margin: 0px;}
#content{ position: relative;display: block;}
#content ul{padding: 0; margin: 0;}
#content li{display: inline-table;width: 350px; margin: 0;margin-left: 50px;padding: 0; font-size: 12px;}
div#calendario{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');
float: left;width: 60px;background-position: 0px 0px;height: 80px; margin-right: 30px;}
div#balances{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 60px 0px;height: 80px; margin-right: 30px;}
div#votaciones{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 182px 0px; height: 80px;margin-right: 30px;}
div#peticiones{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 243px 0px; height: 80px;margin-right: 30px;}
div#servicios{position: relative;background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: 60px 90px; height: 80px;margin-right: 30px;}
div#condominio{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');
float: left;width: 60px;background-position: 182px 90px;height: 80px;margin-right: 30px;}
div#reglamentos{position: relative; background: url('../../images/tucondominio/iconos-funciones.png');
float: left;width: 60px;background-position: 243px 90px;height: 80px;margin-right: 30px;}
div#edificio{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png');float: left;
width: 60px;background-position: -60px 0px; height: 80px;margin-right: 30px;}
div#espacios
{position: relative;background: url('../../images/tucondominio/iconos-funciones.png');float: left;
width: 60px;background-position: 1px -80px; height: 80px;margin-right: 30px;}
div#cartelera
{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px;background-position: -60px -80px;height: 80px;margin-right: 30px;}
div#asociacion
{ position: relative; background: url('../../images/tucondominio/iconos-funciones.png'); float: left;
width: 60px; background-position: 121px 88px;height: 80px;margin-right: 30px;}
div#perfil{ position: relative;background: url('../../images/tucondominio/iconos-funciones.png');float: left;
width: 60px;background-position: 121px 0px; height: 80px;margin-right: 30px;}
h2{ color: #F0BC60; font-size: 20px;text-transform: uppercase;
background: url(../../images/tucondominio/imagenes-contacto.png) no-repeat; background-position: 0px 18px;}

Carga lazy-load de imagenes con JQuery: Jquery es una librería o framework para Javascript que permite programar funcionalidades geniales con unas pocas líneas de código, uno de los “plugins” o componentes que se han desarrollado hasta el momento es llamado laztload. Este plugin permite cargar solo las imágenes de una página web que están siendo visualizadas por el navegador, es decir, si la pagina es muy larga y tiene imágenes por todo el sitio, entonces este plugin no cargará las imágenes si no haz llegado a esa parte de la pagina (haciendo scroll). Esto reduce los tiempos de carga por aunque no haz cargado muchas imágenes, google Jura que ya la pagina termino de visualizarse y lo da por terminado. El mejor ejemplo de lazyload lo consigues en la página web http://www.mashable.com

Para revisar el tiempo de caga de una web les recomiento esta herramienta gratuita.

Posicionamiento en buscadores - Maquetacion

2010-08-05T00:58:00.005-04:30

Una vez que tenemos los URL amigables implementados debemos elaborar nuestras páginas utilizando CSS, debemos EVITAR la utilización de tablas en la gran mayoria de nuestros diseños. CSS es una tecnología utilizada para visualizar (maquetar, dar format, colorear, etc.) de una mejor manera.

Cuando google o cualquier otro buscador entra en tu pagina, no está interesado en saber si es estéticamente agradable, si es usable, ni nada por el estilo, lo único que a un buscador le importa cuando entra a tu pagina es el contenido (de que se trata la pagina, de que habla.). Cuando el robot de un buscador (por ejemplo el googlebot de GOOGLE) entra en tu página, lo primero que hace es limpiar todos los CSS que encuentre para concentrarse únicamente en el contenido de la página. Por esta razón la utilización de tablas te perjudica porque las tablas no son ignoradas por los robots de los buscadores, sino que más bien son consideradas parte del contenido, lo que perjudica el posicionamiento de tu página en los buscadores.

Es importante acotar que si bien las tablas no son amigables a los buscadores, toadvía son una tecnologia importante y útil para ciertas ocaciones, y tienen propiedades tales como
THEAD, TBODY, TFOOT
que pueden resultar muy prácticas.

Para entender más sobre maquetación en css les dejo este tutorial que he realizado hace algún tiempo que explica los conceptos basicos de CSS.

Posicionamiento en buscadores - URL amigable (Frendly URL)

2010-08-03T23:59:00.005-04:30

¿Qué es el paso de variables por URL? Es una tecnica muy utilizada por todos los desarrollares, frameworks y entornos de desarrollo web que existen en la acutalidad. El protocolo HTTP cuenta con una serie de metodos basicos para garantizar el funcionamiento de una pagina web, uno de ellos es el metodo GET, que sirve para obtener valores de variables a partir de un URL, de esta manera si yo tengo una pagina web con una direccion (URL) como la siguiente:

http://www.mipagina.com/intex.php?idioma=es

Puedo obtener el valor de la variable "idioma" en cualquier momento, y cambiar dinamicamente, en funcion del valor de esa variable, para imprimir el valor de la variable "idioma" en el lenguaje de programacion php no hace falta mas que la siguiente linea de codigo:

echo $_GET["idioma"];

Es muy típico de un programador utilizar el paso de variables por url, haciendo que este url se vuelva difícil de leer para un usuario O BUSCADOR.

Por ejemplo: En mi pagina http://www.recetasdecocteles.com/ para ver los detalles de un coctel se puede ir a cualquiera de los siguientes URL’s:

a. http://www.recetasdecocteles.com/coctel.php?id_coctel=6

b. http://www.recetasdecocteles.com/coctel/6/Cosmopolitan

¿Notan la diferencia? ¿Si verdad? El primero de estos URL´s esta hecho a la antigua, es evidente para cualquier programador que el desarrollador hace un $_GET[“id_coctel”] para obtener el id del coctel que se desea mostrar, pero, ¿Qué pasa con el buscador? Ni siquiera sabe que coctel es el que tiene id=6, y el usuario final.. Menos!

Para solucionar eso debemos implementar URL´s como el segundo de estos ejemplos que acabo de dar, de esta manera tanto el buscador como el usuario final sabrán que ese url lleva directo a los detalles del coctel “Cosmopolitan”.

Uno de los principales factores tomados en cuenta por un buscador a la hora de indexar una pagina web, es el contenido de su titulo, si la palabra "Cosmopolitan" esta en el titulo de una de tus paginas, entonces google probablemente te indexe mucho mejor cuando los usuarios coloquen "Cosmopolitan" en google.

Posicionamiento en buscadores (SEO)

2010-08-03T18:46:00.008-04:30

Si eres programador, arquitecto o diseñador web probablemente haz escuchado este término que está muy de moda durante los últimos años. Para una página web que quiere darse a conocer en el mercado esta vía puede ser una de sus mejores armas para publicitarse sin necesidad de un gran presupuesto.

Un buen posicionamiento en la web es una tarea de todos los involucrados en el diseño, desarrollo, e implementación de la pagina web, es necesario tomarlo en cuenta desde el mismo momento en que se empieza.

Para lograr un buen posicionamiento existe una técnica llamada “Optimización en buscadores” o “Search engine optimization (SEO)”, que no es más que la utilización de un mega conjunto de mejores prácticas para lograr que tu sitio web suba posiciones en un buscador (Principalmente google).

Yo no soy gurú en esto, pero en varios emprendimientos que he tenido últimamente me he visto en la necesidad de aprender un poco más sobre esto, y los resultados pueden ser increíbles.

Para no alargarme más en este tema, quisiera dejarles las mejores prácticas que yo he logrado recolectar en mi mente para que las apliquen en sus páginas lo más rápido que puedan, ¡no hay tiempo ni visitas que perder! En este post voy a colocar solo los titulos de cada una de las secciones, y, luego, voy a ampliarlas en diferentes entradas:

URL amistosos (Frendly URL’s).
Maquetación CSS.
Tiempo de carga del sitio.
Utilización correcta de las etiquetas h1, h2, h3, Strong, etc.
Inscripción en directorios de páginas.
Estudio de las palabras claves.
Ubicacion de los codigos javascript.
Contenido del sitio.
Google webmaster toolkit.
Otras herramientas muy utiles.

Conceptos Básicos de CSS

2009-09-09T18:09:00.007-04:30

Una hoja de estilo es un conjunto de especificaciones que declara cómo deben mostrarse los componentes de una página web, es decir, cómo debe interpretar el navegador, a efectos de presentación visual, los distintos elementos presentes en una página web. El formato de cada elemento de una página web se especifica mediante declaraciones de estilo denominadas reglas.

Los estilos de css se definen en forma de clases, se supone que los estilos que definamos deben estar sincronizados con las definiciones html de la pagina web.

2. Definiciones

Una definicion CSS se compone de tres partes:

Selector (Clase o codigo)
Propiedad
Valor

Una definicion simple organiza los tres componentes anteriores de acuerdo a la siguiente estructura:

selector {propiedad: valor;}

Por ejemplo, la siguiente definición dice que todos los coponents h1 de la pagina deben tener un grosor normal (de tener un grosor grande sería equivalente a que estuvieran en negritas los textos):

h1 { font-weight: normal; }

Una definicion puede contener más de una propiedad con sus respectivos valores, separadas entre ellas por punto y coma (se considera una buena práctica añadir también punto y coma al final). Ejemplo:

h1 { font-weight: normal; color: red;}

Una definicion puede dar formato a más de un elemento o componente a la vez, separando estos mediante comas. Ejemplo:

h1, h2, h3, h4 { font-weight: normal; color: red; }

3. Declaración

Las definiciones de las hojas de estilo se pueden declarar en tres sitios distintos:

En la página web
En un archivo externo
En un elemento

En la página web

Este tipo de declaraciones no son recomendadas ni se consideran buenas prácticas dentro de la programación web y por eso no voy a explicarlas.

En un elemento

Este tipo de declaraciones no son recomendadas ni se consideran buenas prácticas dentro de la programación web y por eso no voy a explicarlas.

En un archivo externo

Las declaraciones se escriben en un archivo de texto con extensión .css sin ningún tipo de preámbulo y deben ser referenciados al principio de las páginas web, específicamente entre los tags <head> </head>.

Como se puede ver, el atributo rel (relation) advierte que se trata de una hoja de estilo, href aporta el nombre (y el camino si fuera necesario) del archivo y type indica que se trata de un archivo de texto que contiene una hoja de estilo que sigue la norma CSS.

4. Cajas

Desde el punto de vista de CSS, todo lo que hay en una página web es una caja. Lo que hace un selector es identificar la caja a la que se aplica el formato.

Las cajas tienen:

Contenido (content). El contenido de la caja: texto, imagen, etc.
Relleno (padding). La distancia entre el contenido y el borde.
Borde (border). El borde de la caja.
Margen (margin). La distancia entre el borde y el elemento contenedor (p.e. body) u otro elemento adyacente.

El siguiente diagrama muestra modelo oficial de cajas de CSS según el W3C:

Los componentes de la caja se pueden dividir en cuatro partes: top, bottom, right y left. Por tanto, en la ilustración anterior, las siglas LM, RM, etc., significan LeftMargin, Right Margin, etc.

Las hojas de estilo pueden aplicar formato (p.e. color, anchura, tipo de línea, etc.) a cualquiera de los componentes de esta caja, así como permite posicionar estas cajas en el conjunto de la página.

De este modo, si queremos que un elemento muestre el borde en forma de puntos de color azul, podemos generar esta declaración:

p { border-style: dotted; border-color: blue}

A partir de lo anterior, este código en la página:

<p>Ejemplos de hojas de Estilo</p>

Se mostrará así:

Si queremos ampliar el relleno entre el contenido y el borde así como tener un tamaño de punto más pequeño podemos modificar la regla anterior acudiendo a las propiedades de borde (border) y de margen (padding):

p { border-style: dotted; border-width: 2px; border-color: blue; padding: 15px; }

Ahora, el navegador lo mostrará así:

5. Herencia

Las cajas están contenidas dentro de otras cajas y heredan los estilos de la caja contenedora si no hay una regla de nivel específico. Por ejemplo, si declaramos un tipo de letra para el elemento body, todos los elementos que están dentro, como h1, h2, p, etc. heredarán este tipo de letra. En el siguiente ejemplo declaramos un color de letra para body y otro distinto para h2. De este modo, todos los elementos, excepto h2, tendrán el color declarado para body, mientras que h2 tendrá su propio color. Veamos. Primero la declaración de reglas CSS:

body { color: blue }
h2 { color: red }

Ahora el código html de la página:

<h1>Esto es un elemento h1</h1>
<p>Este es un párrafo</p>
<h2>Esto es h2</h2>
<p>Más texto marcado como párrafo</p>
<h3>Esto es h3</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<p>Apuesto a que todo es azul en esta página menos uno de los elementos</p>

6. Tipos de selectores

Existen dos grandes categorías de selectores:

Elementos: son los nombres correspondientes a elementos del lenguaje (X)HTML como body, h1, p, table, etc.
Nombres propios: son nombres que puede crear el autor de la hoja de estilo. De esta clase de selectores, existen, a su vez dos tipo: de clase (class) y de identidad (id). Por tanto, en realidad tenemos en total tres tipos de selectores que examinaremos a continuación.

6.1. Selectores de elemento

Se declaran utilizando como selector un elemento (X)HTML, p.e.:

h1 { color: blue }

De este modo, el aspecto de todos y cada uno de los elementos que forman el lenguaje (X)HTML puede ser modificado mediante un regla. Cabe recordar que los navegadores disponen de una hoja de estilo interna que es la que otorga formato a los elementos (X)HTML cuando no hay ninguna hoja de estilo específica. Por ejemplo, aún sin hoja de estilo la mayor parte de los navegadores aplican negrita a los elementos marcados como strong, así como un tipo de letra superior + negrita a los elementosmarcados con h1, etc.

6.2. Selectores de clase

Estos selectores se declaran mediante una palabra propia que asigna el autor de la hoja de estilo. Esta palabra va precedida por un punto. Por ejemplo: supongamos que se necesita una clase de selectores para formatear títulos de películas (pongamos que se trata de una web sobre cinema). El autor de la hoja de estilo puede crear el selector con el nombre tituloFilm para formatear de la misma forma los títulos de los films. Para ello, escribe esta regla:

.tituloFilm { font-size: 1.5em; font-family: Times New Roman; color: blue;}

Se aplica mediante el atributo class seguido por el nombre del selector (sin el punto). Por ejemplo, en el siguiente código fuente solo a uno de los dos elementos de párrafo (p) se le ha añadido esta clase de selector:

<p class="tituloFilm">2001: Una odisea del espacio</p>
<p>La obra de Kubrick marcó un punto de inflexión en el género de la ciencia-ficción</p>

La declaración solamente afectará a uno de ellos y el resultado es que el primer párrafo tendrá un aspecto muy distinto de los demás:

6.3. Selectores de identidad

Los selectores de identidad se nombran mediante una palabra propia precedida por el símbolo # (almohadilla). Por ejemplo:

#navegacion { background-color: LightGrey; }

Los selectores de identidad solo se pueden aplicar a un elemento en cada página. Dicho al revés, y tomando el ejemplo anterior: en cada página solamente puede haber un elemento #navegacion (en cambio, podemos tener múltiples elementos de clase en una misma página).

En este caso, hemos supuesto que queremos dar un estilo propio a la zona de navegación de cada página. Se supone que deseamos destacar la barra de navegación mediante un fondo gris y queremos que la fuente del texto en esa zona sea un poco más pequeña. La declaración sería la siguiente:

#navegacion { background-color: LightGrey; font-size: 0.8em }

El código fuente en la página sería el siguiente:

Se supone que Item 1, Item 2, etc., son opciones de menú. El resultado sería este:

7. Uso de div y span

El lenguaje (X)HTML dispone de dos elementos con gran potencialidad cuando se utilizan junto con las hojas de estilo, y cuya característica principal, a diferencia de elementos como body, p, h1, etc., es que no poseen ningún significado intrínseco. Son los siguientes:

div
span

Mientras el elemento div es de bloque, el elemento span es de línea. Recordemos que los elementos de bloque tienen un salto de línea integrado. El ejemplo más conocido es p. Un elemento de línea, por el contrario no genera ningún espacio a su alrededor, sino que se mantienen en la misma línea que lo contiene. Un buen ejemplo puede ser strong.

Tanto div como span pueden utilizarse para mejorar la apariencia de una página, pero además contribuyen a añadir valor semántico a la misma.

7.1. div

En concreto, div ayuda a crear la estructurar básica de la página. Por ejemplo, podemos imaginar un sitio web cuyas páginas se estructuran en tres grandes secciones, como muestra la figura siguiente:

Con una estructura como la anterior, el código fuente de cada página puede contener cuatro elementos div, cada uno de ellos identificado con un

atributo id diferente, de este modo:

La estructuración anterior permitirá definir estilos para las cuatro secciones de la página sin perjuicio de aplicar estilos más específicos mediante selectores de elemento, de clase, etc. Esta estructuración facilitará el mantenimiento de los estilos del sitio y, en caso necesario, el posicionamiento de los mismos en la página.

7.2. span

El elemento span suele utilizarse también combinado con id o con class para especificar con tanto nivel de detalle el aspecto de cualquier elemento de la página. Por ejemplo, podemos desear marcar y tratar de forma distinta el apellido de una lista de nombres, para lo cual podemos usar span de este modo. Definimos un selector de clase apellido para el cual declaramos un estilo:

.apellido { font-style: italic; font-weight: bold }

Aplicamos entonces span y class a los componentes (li) de la siguiente lista:

<h1>Realizadores de los años 90</h1>
<ul>
<li>Martin <span class="apellido">Escorsese</span></li>
<li>James <span class="apellido">Cameron</span></li>
<li>Pedro <span class="apellido">Almodóvar</span></li>
</ul>

El resultado en el navegador será el siguiente:

8. Posicionamiento

Las hojas de estilo proporcionan propiedades que permiten posicionar de forma fija, absoluta o relativa (fixed, absolute, relative) las cajas en una página web. Estas propiedades, junto con los selectores de clase y de identidad que permiten identificar y clasificar las cajas respectivamente, proporcionan al diseñador un dominio total de la estructura de la página sin necesidad de recurrir, por ejemplo, al uso de tablas.

A título ilustrativo, mostramos un ejemplo típico de código de estilo con indicaciones de posicionamiento:

#navegacion { position: absolute; top: 0; left: 0; width: 30%; }

#contenido { width: 70%; margin-left: 30%; }

El código anterior generaría dos secciones como las que muestra la figura siguiente:

Lo cierto es que el posicionamiento mediante CSS merece un capítulo aparte y por ello escapa a los objetivos de esta presentación. Pero no hemos querido dejar de señalar su importancia con el fin de animar a todo aquel que, precisamente, quiera avanzar en estos temas.

Buenas prácticas

1. Declarar la hoja de estilo en un archivo separado (mejor que en la hoja de estilo, salvo necesidad específica).

2. Utilizar medidas relativas (tanto por ciento en lugar de píxeles, o unidades em en lugar de puntos, etc.).

3. Usar elementos semánticos (h1, h2, blockquote, etc.) para organizar los contenidos de la página, no para conseguir una determinada apariencia de la misma.

4. Modificar la apariencia de la página exclusivamente mediante estilos (y no con elementos o atributos desaconsejados como font, center, etc. o usando elementos fuera de lugar).

5. Limitar al máximo declarar estilos dentro de elementos individuales (es decir, evitar el uso del atributo style dentro de elementos).

Como definir una propiedad en flex actionscript

2009-09-09T08:23:00.008-04:30

En este artículo vamos a ver como definir una propiedad en flex, pero primero debemos conocer ¿qué es una propiedad?.

Una propiedad es una variable que define a una clase, es decir, son variables que se definen al momento de crear una clase para que formen parte de esta, por ejemplo: Si definimos la clase Mesa probablemente le definamos las propiedades altura, anchura, profundidad, etc.

Este concepto se aplica a todos los lenguajes de programación orientada a objetos, vamos a ver como sería la definición de esta clase ejemplo en actionscript:


 public class Mesa
 {
  public function Mesa()
  {
  }
  
  public var profundidad: String;
  public var altura : Number;
  public var anchura : Number;
  
 }

Otra cosa que debemos saber es la utilizacion de los metodos get y set para tener mucho mas control sobre las propiedades de una clase.

¿Qué son los metodos get y set?
En el lenguaje de la programacion orientada a objetos se estila mucho la utilización de metodos que te permitan asignar y obtener valores a las propiedades, para explicar mejor les explico implementando los metodos get y set para la clase mesa:


 public class Mesa
 {
  public function Mesa()
  {
  }
  
  private var _color : String;
  private var _altura : Number;
  private var _anchura : Number;
  
  public function get color() : String
  {
   return this._color;
  }
  
  public function set color(value : String) : void
  {
   this._color = value;
  }
  
  public function get altura() : String
  {
   return this._altura;
  }
  
  public function set altura(value : String) : void
  {
   this._altura = value;
  }
  
  public function get anchura() : Number
  {
   return this._anchura;
  }
  
  public function set anchura(value : String) : void
  {
   this._anchura = value;
  }
 }

¿Qué ventajas tiene utilizar los métodos get set?

Puedo controlar el acceso a las variables de la clase, por ejemplo pudiera no definir un metodo "set" para una de las variables y de esta manera cualquier instancia de este tipo de clase tendria esa variable de solo lectura.
Puedo colocar propiedades calculadas, por ejemplo cuando en un arreglo hacemos arreglo.length, a nosotros nos devuelve el numero de elementos del arreglo pero en realidad lo que hace la clase es recorrer todos los items y los cuenta para luego decirnos cuantos fueron. En esta clase Mesa un ejemplo de propuedad calculada seria la propiedad "volumen", que viene siendo la multiplicacion de ancho * alto * profundidad.
Puedo realizar acciones cuando cambie la propiedad. Como la unica manera de modificar el varlor de esta variable es a través del metodo set, entonces puedo contruir el metodo con sentencias extra o validaciones antes de asignar el valor recibido a la variable, por ejemplo:


  public function set altura(value : String) : void
  {
   if(value>0)
    this._altura = value;
  }

En este caso solo asignamos el valor introducido por el usuairo a esta varible, en el caso en que sea mayor a cero, despues de todo, una altura no puede ser menor que 0, ya que sino la mesa no se visualizaria.

Como hacer la pagina web perfecta

2009-07-12T18:01:00.013-04:30

En esta oportunidad quiero explicar varios conceptios mientras desarrollo una aplicación para la creacion de encuestas o examenes en linea. En cada tutorial separado explicare más detalladamente cada uno de los puntos de esta entrada, ¿Que vamos a aprender mientras creamos esta aplicación? Muy interesante, voy a enseñarles todo lo que yo utilizo a la hora de crear una página web, las mejores prácticas a mi humilde criterio:

A la hora de crear la página vamos a tener las siguientes premisas fundamentales:

- Pensar todo el tiempo en el usuario: Vamos a evitar cualquier actividad extra para el usuario, crear ayudas en todo momento, prevenir en lugar de corregir, darle velocidad a la pagina, interfaz minimalista, etc.

- La simplicidad no tiene nada que ver con el tamaño: Tú puedes tener la página más grande del mundo pero que siga siendo muy simple desde todo punto de vista (arquitectura, organización, usabilidad, etc.)

- Estandarizar los procesos: Hay actividades que son muy repetitivas, hay que tratar de estandarizarlas o incluso tratar de automatizarlas para que cada vez se hagan mas rápido y sin errores.

- Patrones de diseño: Todos los problemas que se nos puedan presentar a la hora de crear una página web ¡ya se le presentaron a otra persona!, busca en internet, utiliza los patrones de diseño, tal vez trabajemos mas al principio pero luego estaremos volando y sin equivocaciones.

1. ¿Cómo diseñar una página con maquetación CSS?

Primero vamos a maquetar la pagina en contenedores

para utilizar estándares de CSS, así vamos a poder diseñar una página pensando en la información y el contenido y luego le daremos un diseño creando hojas de estilos que tendrán clases que se les aplicaran a los contenedores que definimos, algo así:

Fíjense que la pagina web HTML solo contiene contenedores de información que no tienen ningún diseño (la cabecera de la pagina, el contenido y el pie de la pagina), cuando se le aplica la capa de la derecha (la hoja de estilos) los contenedores cambian de color, tipo de letra, color de letra, sangrías para el texto, etc. Cuando nosotros queramos podemos cambiar la hoja de estilos y nuestra aplicación se verá muy diferente pero seguirá teniendo la misma estructura e información.

2. ¿Cómo utilizar plantillas para poder compartir la misma cabecera, menú y pie en todas las paginas sin tener que copiar y pegar el código?

La idea es crear una archivo “header.php” que será la cabecera de las paginas y lo importaremos cada vez que queramos renderizar o mostrar una página en especifico, de esta manera si realizamos un cambio en esta cabecera no tendremos que ir pagina por pagina realizando el cambio en todas las cabeceras sino que cambiaríamos el archivo header.php y el cambio se reflejaría en todas las paginas. Lo mismo ocurriría en el caso del menú (menu.php) y el pie de la pagina (footer.php).

3. ¿Cómo evitar recargar la pagina tan a menudo?

Con las nuevas tecnologías es posible recargar contenedores específicos de las páginas web en vez de recargar toda la pagina, de esta manera aumentamos mucha facilidad de uso y tiempo de espera. Además recargamos menos al servidor ya que realizamos menos peticiones y por ultimo vamos a ver cómo termina siendo incuso ¡Mucho más fácil que antes! Trabajar de esta manera. Nosotros utilizaremos el framework de javascript llamado JQuery para lograr estas funcionalidades.

4. ¿Cómo estructurar nuestra página de una manera sencilla y organizada para que siga siendo simple a pesar de que ser bastante grande?

Luego de buscar y probar la gran mayoría de los frameworks de desarrollo yo decidí crear mi propia arquitectura para mis páginas web, siguiendo algunos estándares y patrones de diseño pero sin volverla tan compleja y abstracta como me parece que ocurre en el caso de frameworks existentes como symfony.

5. ¿Cómo dividir en capas toda la pagina web para lograr la independencia de cada una de ellas?

En la arquitectura que diseñe la pagina web se divide en 6 capas donde cada una de ellas es completamente independiente, es decir, si quieres cambiar de base de datos solo tienes que cambiar la capa de comandos, si quieres cambiar el diseño de la pagina, solo tienes que cambiar la capa de diseño, etc.

En mi arquitectura yo planteo las siguientes capas:

I. Diseño: Renderiza los datos, les da colores, tamaño, etc. Puras hojas de estilo.

II. Vista: La estructura de los datos, contiene la información y no contienen prácticamente ninguna lógica.

III. Cliente: Creación de componentes DatePicker, Slider, etc. Validaciones, Evitar recargo de la pagina, ayuda de usuario, etc.

IV. Lógica: Transacciones (crudManager), Plantillas (templateManager), Permisos de usuario, Validaciones, etc.

V. Comando: Enlace entre el modelo y la lógica para independizar a la página de la estructura de los datos.

VI. Modelo: Puede ser una BD, unos web services, o cualquier otra forma de obtener y guardar datos.

6. ¿Cómo crear una ayuda de usuario sobre la pagina?

El problema con las ayudas es que siempre son una sección aparte de la aplicación y el usuario ni siquiera sabe cómo encontrar la ayuda para lo que está buscando. Otra de las ventajas que te da estructurar tu pagina en contenedores

es que tienes la posibilidad de mostrarlos y ocultarlos fácilmente. De esta manera si nosotros consideramos que la pagina actual que estamos creando debemos colocar un espacio de ayuda entonces podemos crear un contenedor con esa información y en cualquier momento el usuario podrá ocultarlo y continuar como si nada. Por ejemplo:

7. ¿Cómo prevenir en lugar de corregir?

La parte más importante a la hora de crear una web es como se plantea la interacción del usuario con la aplicación, la mayoría de las paginas utilizan los componentes estándares de formulario que tiene HTML para lograr esta interaccion, pero lamentablemente estos componentes son muy limitados y en un gran porcentaje de las veces dificultan el uso de la pagina. Para eso en la arquitectura que estamos planteando hay un espacio dedicado a la creación o importación de nuevos componentes javascript. ¿Porque introducir una fecha en un TextInputo en una seria de ComboBoxs? Lo más natural seria un calendario, ¿no les parece? Existen una serie de componentes como NumericStepper, Slider, DatePicker, etc. Que hacen que la experiencia de usuario se vuelva mucho más simple y práctica y además evitan muchísimas validaciones hacia nosotros porque no dejan espacio para los errores. Y si además colocas tremenda ayuda, ¡es excelente!

8. ¿Cómo hacer una página segura?

Lo primero que debemos tomar en cuenta a la hora de hacer una página segura es que la capa de javascript no puede ser tomada en cuenta para la seguridad en casi nada, ¿Por qué? Porque puede ser desactivada en cualquier momento por los hackers, incluso los navegadores más viejos ni siquiera soportan javascript. ¿Qué quiere decir esto? Pues muy fácil, las validaciones de datos que hacemos en javascript también las debemos hacer en PHP o en cualquier lenguaje que estemos usando del lado del servidor. Pero OJO: Igual debemos seguir haciendo las validaciones del lado del cliente para no recargar al servidor y para seguir con nuestra premisa de PREVENIR en lugar de CORREGIR.

Para hacer nuestra arquitectura segura yo decidí dividir toda la interacción con los datos en transacciones, si se fijan en la capa lógica existe el crudManager y el infoManager. El primero de estos se encarga de eliminar, modificar y insertar los datos. El segundo se encarga solo de consultaros, por lo tanto requieren permisos de usuario diferentes para ser utilizados. Los mismo ocurre con el templateManager que se encarga de armar las vistas que el usuario va a visualizar, si el usuario no tiene permisos para visualizarlas entonces lo lleva a una página de error.

¿Cómo se cargan los permisos? En variables de sesión, en la arquitectura que vamos a utilizar ya existe un modulo de autenticación que solo debemos realizarle pequeños cambios para adaptarlo a nuestra página, al momento de iniciar sesion te otorga permisos de usuario que luego tu controlas para acceder a las vistas y transacciones desde el crudManager, infoManager y templateManager.

9. ¿Cómo realizar los CRUD sin recargar la pagina?

Es demasiado común en una página web querer insertar, modificar, eliminar y consultar valores de una entidad en especifico (Persona, Paciente, Profesor, etc.). Con unos pocos conceptos es posible estandarizar estos procedimientos para hacerlos mas fáciles de programar y además se logra a la misma vez evitar recargar la pagina tan a menudo. Si estamos utilizando la arquitectura COCOAS (De la que he hablado durante toda esta entrada) solo debemos crear dos contenedores, uno para visualizar la información y otro para modificarla, por ejemplo: En el siguiente ejemplo se tiene una lista de anuncios publicada por un condominio, y se quiere modificar un anuncio en particular:

Este sería el código del contenedor para visualizar los datos:


<div  id="showPost1" class="post">
 <h1  class="title"><a href="#">Racionamiento de  agua</h1>
 <p>Los dias lunes y martes  no entrará agua al edficicio de la calle, por lo tanto se racionará el agua del  tanque en el siguiente horario: Lunes: de 8am a 12pm - de 2pm a 8pm. |  Martes: de 8am a 12pm - de 2pm a 8pm.</p>
 <p  style="text-align:right;">
 <a  id="detallesLink" class="editLink"  name="Post1>"  href="#">editar</a>
 <a class="deleteLink"  name="Post" href="crudManager.php?action=delete_anuncio&codigo=1">Eliminar</a>
 </p>
 </div>

Y este seria el contenedor para modificar los datos:


<div  id="editPost1" class="post"  style="display:none;">
 <form action="crudManager.php" method="post" id="anuncioForm">
 <input name="action"  type="hidden" value="edit_anuncio" />
 <input  name="codigo" type="hidden" value="1" />
 <h1  class="title">Titulo: <input name="titulo"  type="text" value=” Racionamiento de agua” /></h1>
 <textarea name="mensaje"  cols="" rows="" style="width:500px;  height:100px;"> Los dias lunes y martes no entrará agua al edficicio de  la calle, por lo tanto se racionará el agua del tanque en el siguiente horario:  Lunes: de 8am a 12pm - de 2pm a 8pm. | Martes: de 8am a 12pm  - de 2pm a 8pm.</textarea>
 <p  style="text-align:right;"><input name=""  type="submit" value="Guardar" /></p>
 </form>
 </div>

Si estamos trabajando con COCOAS, debemos decirle cual contenedor es el que se utiliza para mostrar la información y cual contenedor es el que se utiliza para editar la información, esto lo hacemos con el campo ID de cada uno de los contenedores, colocando la palabra “show” o “edit” (segun el caso) seguida de el nombre de la entidad que estamos modificando en este caso “Post” seguida de el código de la entidad especifica que estamos modificando (can caso de que estemos en una lista de items de la misma entidad).

Siempre el contenedor que se creó para modificar la entidad debe tener por defecto en sus estilos la propiedad display:none para que la pagina se desempeñe mucho mejor, esta propiedad le dice al contenedor que por defecto el debe estar oculto.

Luego debemos irnos al vinculo que hemos definido que se le debe hacer click para modificar la entidad (ocultar el contenedor de visualizar y mostrar el contenedor de modificar) y colocarle en su propiedad class el valor “editLink”, y en su propiedad name el nombre de la entidad y código que este vinculo modifica (en este caso “Post1”) de esta manera COCOAS sabrá lo que tiene que hacer.

Por último debemos irnos al vinculo que hemos definido que se le debe hacer click para eliminar la entidad y colocarle en su propiedad class el valor “deleteLink” y de esta manera COCOAS sabrá lo que tiene que hacer.

Al final los dos contenedores se verían de la siguiente manera, por supuesto que no se verían al mismo momento, sino que al presionar “editar” se ocultaría el primer contenedor y se mostraría el segundo contenedor:

Bueno en las siguientes entradas explicare mucho mejor cada uno de los puntos de los que he hablado en esta oportunidad ya que todavía nos queda muuuuuucho de que hablar y buenas prácticas que seguir para conseguir mucha rapidez, de todas maneras para los que saben leer ingles aquí les dejo un pequeño documento donde explica un poco más detallada la arquitectura COCOAS.

Nuevo enfoque de Cairngorm - Universal Mind

2009-07-11T19:45:00.003-04:30

La gente de Universal Mind ha desarrollado un nuevo enfoque para el framework de contruccion de aplicaciones flex llamado cairngorm. Ahora existe la posibilidad, por ejemplo, de controlar el flujo de los datos y llamadas a servicios agregando nuestros propios callBacks para recibir los datos.

¿Como se come esto? Pues muy sencillo!
Si antes siempre tenias que recibir la respuesta de un servicio desde el comando para luego insertarla en el modelo y que el modelo actualizara la vista. Ahora no!! Ahora simplemente podriamos decidir donde recibir la respuesta del servicio, incluso en la misma vista! Y no tendriamos que pasar por el modelo ni nada por el estilo.

Aqui les dejor una explicacion de la nueva manera de trabajar del cairngorm de universal mind que ha publicado mi gran amigo Rene Ramirez: http://developyourdream.blogspot.com/2009/06/cairngorm-universal-mind-extension.html

Para los que no conozcan Cairngorm todavia aqui les dejo este link donde intento explicarlo mucho mas a fondo: http://internetdeveloping.blogspot.com/2009/04/empezando-con-cairngorm-desarrollando.html

Tambien he detallado la explicacion de cairngorm durante la realizacion de un ejemplo sencillo:
http://internetdeveloping.blogspot.com/2009/05/ejemplo-cairngorm-agregar-contacto.html

Drag and Drop muy fácil con un DataGrid Flex

2009-06-12T18:49:00.001-04:30

En el siguiente ejemplo vamos a ver como lograr de manera muy fácil la funcionalidad de pasar datos de un DataGrid hacia otro o viceversa con solo realizar el típico "drag and drop" del ratón (presionando el botón izquierdo del ratón sobre el dato que queremos pasar y arrastrándolo hasta el DataGrid que deseamos que reciba la información). Para empezar la explicación vamos a ver en funcionamiento del ejemplo que vamos a realizar:

Existen varias maneras de realizar esta funcionalidad, algunas de ellas requieren mayor dedicación y programación por parte del desarrollador y otras no, así como también las que requieren mayor programación también permiten un mayor control. En este voy a explicar la mas sencilla y fácil de implementar.

Todos los objetos que heredan de la clase ListBase (El DataGrid tambien, por heredar de esta clase) tienen 5 propiedades muy interesantes que permiten contemplar la funcionalidad Drag and Drop de una manera muy sencilla:

dragEnabled: Esta propiedad especifica si el componente ListBase debe permitir que al seleccionar un dato se pueda iniciar el arrastre de la informacion hacia cualquier componente ListBase (incluyendo este mismo componente).
dropEnabled: Esta propiedad especifica si el componente ListBase debe permitir que un dato entrante pueda ser soltado sobre este componente.
dragMoveEnabled: Esta propiedad dice si cuando un objeto es arrastrado a partir de este componente se debe borrar la copia original que inicio el arraste. Es decir, si esta propiedad es falsa y hacemos un drag and drop de algun item de la lista, se mantendrá una copia del item en el lugar donde si inicio el movimiento.
allowMultipleSelection: Con esta propiedad podemos realizar el drag and drop de multiples objetos (items) en un mismo movimiento.
allowDragSelection: Esta propiedad nos indica si es posible realizar una seleccion sobre un item para realizar el drag and drop. Si es falsa no podremos seleccionar ningun item para realizar un drag and drop sobr el.

Entonces si en este ejemplo nosotros queremos realizar un drag and drop de el datagrid superior al datagrid inferior entonces debemos colocarle al datagrid superior las siguientes propiedades dragEnabled, allowDragSelection y dragMoveEnables como true. Y en el caso del datagrid inferior debemos colocarle la propiedad dropEnabled como true.

Si nosotros quisieramos podríamos reemplazar uno de los DataGrid utilizados en este ejemplo por cualquier otro componente que herede de la clase ListBase (El List, TitleList, Tree, etc.).

Bueno eso es todo! Como pueden ver es demasiado simple y fácil de realizar. Cualquier pregunta, si es que las tienen, no duden en realizarlas en los comentarios del post que yo siempre estoy pendiente de responderlas! Para descargar el código fuente del ejemplo presiona click aquí.

Listado de metatags y sus utilidades en flex

2009-06-09T08:58:00.005-04:30

En el articulo anterior "Utilizando metadata para describir las clases en Flex" explique un poco la definicion de Metadata y di un ejemplo de su tipico uso para expecificar a flex un poco más información acerca de los datos, clases y propiedades que estamos utilizando en nuestra aplicación. En este caso voy a describirles un ejemplo de uso y explicación para cada tipo de metatag que podemos definir en Flex, sin hablar mucho más vamos a empezar con los metatags:

[ArrayElementType]
Para decir que tipo de datos debe contener el ArrayCollection. Por ejemplo:

[ArrayElementType("String")]
public var newStringProperty:Array;

[Bindable]
Para utilizar una propiedad como “data binding expression”, este tipo de propiedades son utilizadas para que cuando flex detecte un cambio en ellas actualice todos los destinos que tienen esta propiedad asiganada con el típico “propertyChangeEvent”. Por ejemplo:

[Bindable]
public var personas:ArrayCollection

<mx:DataGrid id="dg" dataProvider="{ personas }">
</mx:DataGrid>

[DefaultProperty]
Se refiere a la propiedad por defecto del componente, esta “defaultProperty” es la que se setea en mxml cuando se coloca entre los tags del componente. Por ejemplo:
<mx:DataGrid id="dg" dataProvider="{ personas }">
<mx:columns>
<mx:DataGridColumn dataField="email" headerText="Email"/>
</mx:columns>
</mx:DataGrid>
En este caso la defaultProperty del mx.Control.Datagrid seria un objeto de tipo Columns, que a su vez tiene una defaultProperty de tipo ArrayCollection de DatagridColumn.

[Deprecated]
Se utiliza para que el compilador arroje un warning para notificar al usuario que esa propiedad o clase esta obsoleta.

[Embed]
Le dice al compilador que incluya el recurso dentro de la película al momento de compilarla. Un recurso puede ser una imagen, sonido, video, icono, etc. Por ejemplo:
[Embed(source="com/assets/icono.png")]
private var icon:Class;

[Event]
Se utiliza para definir un evento que una clase arroja. Por ejemplo, el mx.Control.Button tiene como definido el evento MouseEvent.Click como metadato. De esta manera cuando estamos definiendo un botón en mxml podemos colocar un handler al evento click.
<mx:Button click="buttonClickHandler()" />

[Exclude]
Se utiliza para decirle al compilador que no muestre esta propiedad al momento de autocompletar, es como decir que el atributo es privado, por ejemplo:
[Exclude(name="label", kind="property")]

[ExcludeClass]
Le dice al compilador que excluya la clase al momento de autocompletar, es como decir que la clase es privada.

[IconFile]
Es el icono que va a tener la clase (componente). Por ejemplo:

[IconFile("MyButton.png")]
public class MyButton extends Button
{
...
}

[Inspectable]
Se utiliza para decirle al compilador que posibles valores puede tener una propiedad, de que tipo debe ser (String, int, Number, etc.) cual debe ser su valor por defecto, etc. Para más información revisar el siguiente vinculo: http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Book_Parts&file=metadata_141_11.html

[InstanceType]
Para decir de que tipo debe ser una propiedad, por ejemplo (Cobra sentido en el caso de que la propiedad haya sido definida como una interfaz o una clase muy general):

// Define a deferred property for the top component.
[InstanceType("mx.controls.Label")]
public var topRow:IDeferredInstance;

[NonCommittingChangeEvent]
Este metatag le especifica a flex que no debe lanzar validadiones de data (commits típicos del data binding) en el evento especificado, por ejemplo:

[Event(name="change", type="flash.events.Event")]
class MyText extends UIComponent {
...

[Bindable(event="valueCommit")]
[NonCommittingChangeEvent("change")]
function get text():String {
return getText();
}
function set text(t):void {
setText(t);
// Dispatch events.
}
}

En este caso cuando el texto (propiedad text) cambie no va a ocurrir ninguna validación, pero en el caso de que se presione la tecla Enter, ocurrirá un valueCommit y entonces si se dispararan las validaciones de datos.

[RemoteClass]
Especifica que esta clase va mapeada contra un objeto en el servidor, le dice a flex que debe incluir la información de la case al momento de serializarla. Por ejemplo:

[RemoteClass(alias="com.CctVO")]
public class Carrito {
public var id : String;
[Inspectable(defaultValue="sin pagar",enumeration="sin pagar,pagado")]
public var estado : String;
public var productos : ArrayCollection;

[Transient] public function get total() : int
{
return productos.length;
}
}

[Style]
Para especificar que una propiedad es de tipo “estilo” para un componente, por ejemplo:

[Style(name="verticalAlign", type="String", enumeration="bottom,middle,top", inherit="no")]
[Transient]

Le dice a flex que debe ignorar cierta propiedad a la hora de serializar una clase para ser mapeada contra un objeto del lado del servidor. Por ejemplo:

[RemoteClass(alias="com.CctVO")] public class Carrito { public var id : String; public var estado : String; public var productos : ArrayCollection; [Transient] public function get total() : int { return productos.length; }
}

En este caso no se debe enviar la propiedad “total” al servidor ya que es un atributo calculado en ejecución. Para ver mas información hacer click en el siguiente vinculo: http://livedocs.adobe.com/flex/3/html/help.html?content=metadata_3.html

Esos son todos los metatags que conozco hasta la fecha que se peuden definir a la hora de programar en flex, espero les sean de mucha utilidad asi como para mi lo han sido. Cualquier cosa les dejo un documento en PDF con las definiciones y ejemplo que he dado en este artículo.

Utilizando metadata para describir las clases en Flex

2009-06-04T11:01:00.007-04:30

Si nos vamos a la definicion de wikipedia la metadata no es mas que información "sobre la data", es decir, es describir como es la data. Una metadata esta compuesta de una serie de metatags, donde cada uno de estos ultimos se encarga de describir alguna caracteristica de la clase. En un metadato podemos decile al flex que tipos de datos debe contener un ArrayCollection, si una imagen se debe cargar dentro de la pelicula SWF o cargarla remotamente al momento de ejecutar la pelicula, cuales son los posibles valores que puede tomar una propiedad, etc. Supongamos, en el siguiente ejemplo, que tenemos la clase "Carrito" que viene definida de la siguiente manera:


package
{
import mx.collections.ArrayCollection;

public class Carrito
{
public var id : String;
public var estado : String;
public var productos : ArrayCollection;

       public function get total() : int
       {
          return productos.length;
       }
}
}

Esta clase no tiene ningun tipo de "Metatag"y lo unico que conocemos de ella es que tiene tres atributos, sus tipos y sus nombres. Ahora supongamos que queremos utilizar este objeto como un "objeto remoto" para utilizarlo en algun lenguaje del lado del servidor como java, php, c#, etc. Para eso debemos decirle al compilador que este objeto esta representado del lado de java y que debe conservar la informacion de la clase al momento de serializar, para eso utilizamos el metatag [RemoteClass]. Tambien debemos decirle entonces que la propiedad "total" no debe ser enviada al servidor por tratarse de una propiedad calculada (seria como por ejemplo la edad, al pasar la fecha de nacimiento se puede calcular la edad), para excluir propiedades de ser enviadas para el servidor utilizamos el metatag [Transient]. Ahora supongamos que queremos definir que el estado de el carrito solo puede ser o "pagado" o "sin pagar", para eso debemos utilizar el metatag [Inspectable] y definir dentro de el los dos valores que puede tomar ese atributo. Con estas tres definiciones la clase nos quedaría de la siguiente manera:


package
{
import mx.collections.ArrayCollection;

[RemoteClass(alias="com.CctVO")]
public class Carrito
{
   public var id : String;

      [Inspectable(defaultValue="sin pagar",enumeration="sin pagar,pagado")]
      public var estado : String;

   public var productos : ArrayCollection;

      [Transient]
      public function get total() : int
      {
          return productos.length;
      }
}
}

Este es un gran ejemplo de metadatos que podemos utilizar en flex. Si quieres conocer mas sobre los metadatos de flex te invito a entrar e mi articulo "Listado de metatags y sus utilidades en flex" donde explico de manera mucho más detallada todas las posibles descripciones que podemos realizarle a una clase al momento de programarla. Cualquier pregunta no duden en escribirla en los comentarios de este articulo.

Extendiendo de el SuperTitleWindow para que todas tus ventanas tengan "Cerrar" y "Aceptar" de forma nativa

2009-06-03T18:36:00.014-04:30

Desde que empece mi aprendizaje en el desarrollo de aplicaciones con flex, he tenido la necesidad de crear ventanas emergentes con un formato especifico, todas ellas debian tener un botón de "Aceptar" y "Cancelar" para cerrar la ventana en el momento que el usuario lo creyera conveniente. En este ejemplo vamos a ver como se puede estantadrizar el comportamiento de todas las ventanas emergentes de una aplicacion apartir de la clase SuperTitleWindow.cs que tiene inmerso el siguiente comportamiento:

Metodo "Aceptar" cuando se presiona el botón "Enter" del teclado.
Metodo "Cancelar" cuando se presiona el boton "ESC" del teclado.
Metodo "Limpiar Pantalla" cuando se presionan las teclas "shift" + "Delete".
Botón cerrar en la parte superior derecha de la ventana (al estilo windows).
Obliga a definir el foco inicial del mouse dentro que se utilizara al desplegarse la ventana.
Permite modificar la logica a realizar una vez despachado el evento "Cerrar" o "Aceptar".

Para que se entienda un poco mejor vamos a ver un ejemplo de ventana emergente que herede del SuperTitleWindow.

Si observamos el codigo de esta ventana vamos a notar unas pequeñas particularidades con respecto a las ventanas tradicionales:

Código LoginWindow.mxml


<?xml version="1.0" encoding="utf-8"?>
<SuperTitleWindow xmlns="popupClasses.*" xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="174" title="Inicio de sesión">
<mx:Script>
<![CDATA[
import popupClasses.SuperTitleWindowEvent;
import mx.managers.PopUpManager;

private function aceptarClick() : void
{
//Lanzo el evento SuperTitleWindowEvent.OK_WINDOW para que se llame el metodo okPressed
var ev : SuperTitleWindowEvent = new SuperTitleWindowEvent(SuperTitleWindowEvent.OK_WINDOW);
this.dispatchEvent(ev);
}

private function cancelarClick() : void
{
//Lanzo el evento SuperTitleWindowEvent.CANCEL_WINDOW para que se llame el metodo cancelPressed
var ev : SuperTitleWindowEvent = new SuperTitleWindowEvent(SuperTitleWindowEvent.CANCEL_WINDOW);
this.dispatchEvent(ev);
}

override protected function setWindowFocus():void
{
//Seteo el foco al text input llamado "usuario"
//si no implemento esta funcion entonces se disparará una excepcion
//de esta manera obligo a que siempre se defina el foco inicial de una ventana emergante
usuario.setFocus();
}

override protected function okPressed(event:SuperTitleWindowEvent):void
{
//aqui inserto mi logica de aceptar, por ejemplo una validacion.


PopUpManager.removePopUp(this);
}

override protected function cancelPressed(event:SuperTitleWindowEvent):void
{
super.cancelPressed(event);//Debo remover esto si deseo sobreescribir el comportamiento original al momento de presionar cacelar
}

override protected function clearPressed(event:SuperTitleWindowEvent):void
{
//aqui va la logica para limpiar la ventana, se despacha con las teclas "shift" + "delete"
super.clearPressed(event);
}
]]>
</mx:Script>
<mx:Label text="Ingrese el nombre de usuario y contraseña"/>
<mx:HBox width="100%">
<mx:Label text="Nombre de usuario:"/>
<mx:TextInput id="usuario"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label text="Contraseña:"/>
<mx:TextInput/>
</mx:HBox>
<mx:ControlBar horizontalAlign="right">
<mx:Button label="Cancelar" click="cancelarClick()"/>
<mx:Button label="Aceptar" click="aceptarClick()"/>
</mx:ControlBar>
</SuperTitleWindow>

Lo primero que notamos es que la ventanta hereda de la clase SuperTitleWindow, luego notamos que existen 6 funciones principales que las podemos utilizar dependiendo de nuestros requerimientos:

okPressed() : Esta funcion se dispará automaticamente cada vez que la ventana esta a punto de cerrarse, en esta funcion debo agregar la logica a realizar justo antes de cerrar.
cancelPressed() : Ocurre igual que en la funcion okPressed pero en este caso cuando la ventana esta apunto de cerrarse.
clearPressed() : Esta funcion se ejecuta automaticamente cada vez que la ventana debe limpiarse, se debe introducir aqui la logica de limpiado, por ejemplo en este caso la logica de limpiado es:
usuario.text = "";
clave.text = "";
setWindowFocus(): esta funcion es oblicatoria de sobreescribir, esto se debe a que debemos colocar el foco del mouse sobre el primer campo del formulario que se encuentra en la ventana, de esta manera la aplicacion fluye sin la necesidad de la intervencion del mouse. Si no se sobreescribe esta funcion, entonces ocurre una excepción.
cancelarClick() : Esta funcion la debemos crear en caso de que queramos colocar un botón de cancelar dentro de la ventana, esta funcion debe despachar al evento SuperTitleWindowEvent de tipo SCANCEL_WINDOW para que sea escuchado por el SuperTitleWindow y volvamos a caer en el metodo cancelPressed().
aceptarClick() : Esta funcion la debemos crear en caso de que queramos colocar un botón de cancelar dentro de la ventana, esta funcion debe despachar al evento SuperTitleWindowEvent de tipo OK_WINDOW para que sea escuchado por el SuperTitleWindow y volvamos a caer en el metodo okPressed().

Por otro lado tenemos 3 propiedades configurables para la confirmacion de las tres acciones tipicas en la ventana Aceptar, Cancelar, Limpiar:

askClear: Defino si debo o no debo confirmar la limpieza de la pantalla, por defecto es verdadera para obligar al prigramador a deshabilitarla en caso que lo crea pertienente.
askOk: Defino si debo o no debo confirmar el cerrado de la pantalla, por defecto es verdadera para obligar al prigramador a deshabilitarla en caso que lo crea pertienente.
askCancel: Defino si debo o no debo confirmar el cerrado de la pantalla, por defecto es verdadera para obligar al programador a deshabilitarla en caso que lo crea pertienente.

Al heredar de esta clase estamos teniendo varias ventajas, la primera de ellas es que estamos estandarizando la implementacion de las ventanas, de esta manera el usuario se acostumbrará a presionar el boton "Enter" para aceptar las ventanas emergentes y "ESC" para cancelarlas. Por otro lado se organiza y estructura el código, se fomenta la reutilizacion del codigo y si se necesita variar algun comportamiento se puede manipular a la SuperTitleWindow.cs en lugar de realizar modificaciones a todas las ventanas por separado.

Para descargar este ejemplo pueden hacer click en el siguiente vinculo, cualquier duda no duden en preguntarlo como comentario de este post, espero que les sea de tanta utilidad como a mi.

JQuery - Framework de desarrollo para Javascript

2009-05-26T23:19:00.007-04:30

Probablemente muchos de nosotros queremos entrar con entusiasmo en el mundo del desarrollo de aplicaciones ajax pero nos hemos encontrado con un gran muro debido a la complejidad e inmadurez del los IDE de desarrollo (Es muy dificil encontrar un software que permita debugear paso a paso) y la falta de un gran framework facil de usar como es el caso de otros lenguajes como ActionScript (Framework Flex), C# (.NET framework), JAVA (Java enterprice edition, etc.), PHP (Zend Framework), etc.

Bueno para todas las personas que coincidan conmigo ¡Les tengo buenas noticas! he conocido y empezado a desarrollar con un framework que me ha encantado, es super fácil de usar y con unas pocas lineas puedes crear cosas muy estilizadas, ajax y simples. Ese framework se llama JQuery ¡y los invito a todos a probarlo! Para muestra de lo que pueden lograr luego de unas pocas horas de desarrollo y aprendizaje:

Cuando se desarrolla bajo el framework de JQuery se tiene una arquitectura orientada a componentes al puro estilo de los componentes Flex o los ASP.NET Web Controls (Componentes ASP.NET). Para los que no conozcan ninguna de estas dos arquitecturas tan populares imaginen un diseño de arquitectura como un formulario web, donde cada uno de los objetos del formulario (TexInput, RadioButton, CheckButton, TextArea, Button, etc) seria un componente programable que puede ser reutilizado N veces en el futuro, podrias crear tus propios y componentes mas avanzados. Una muestra de componentes creados con JQuery y muy sencillos de utilizar son los siguientes:

Selector de Fecha reutilizable.
Tooltipo al colocar el mouse sobre un vinculo (prueben colocando el mouse sobre el signo de interrogacion)
Y todos los demas componentes que coloque arriba.

Para comenzar a desarrollar y aprender sobre este grandioso Framework de Javascript debemos descargar la ultima version de JQuery e incluirla en el heather de nuestro projecto. Para descargar la ultima version pueden ingresar al siguiente directorio y seleccionar la version mas resiente o hacer click directamente en este link. De todas maneras pronto empezare a realizar tutoriales sobre el desarrollo sobre el framework de JQuery y la utilizacion detallada de algunos de los componentes que ya he probado.

Vinculos: Pagina oficial de JQuery.

Ejemplo Cairngorm - Agregar Contacto

2009-05-24T13:54:00.022-04:30

Continuando la explicacion de Cairngorm realizada en la entrada anterior "Empezando con Cairngorm - Desarrollando aplicaciones Flex" en este post vamos a realizar un ejemplo de agregar un usuario (contacto) a una agenda de contactos.

Para empezar debemos descargarnos los códigos del ejemplo en el siguiente vinculo, y cargarlos a nuestro entorno de desarrollo (En mi caso Eclipse). Una vez hecho esto se encontraran la siguiente ruta de carpetas dentro del directorio source: com.adobe.cairngorm.samples.addcontact. Ubiquense en ese directorio y van a encontrar que el ejemplo esta dividido en varias carpetas: Businees, Command, Control, Model, View, VO. Estas divisiones se hace para darle un poco mas de claridad al codigo, yo agregaria una mas llamada "events" donde colocaria los eventos, pero eso es cuestion de gustos. Vamonos a la carpeta "View" y hacemos doble click sobre la vista AddContactPanel.mxml.


<?xml version="1.0" encoding="utf-8"?>
<mx:Panel
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:view="com.adobe.cairngorm.samples.addcontact.view.*"
title="MyContacts"
horizontalAlign="left" height="350">
<mx:Script>
<![CDATA[

import com.adobe.cairngorm.control.CairngormEventDispatcher;
import com.adobe.cairngorm.samples.addcontact.control.AddContactEvent;
import com.adobe.cairngorm.samples.addcontact.model.AddContact;
import com.adobe.cairngorm.samples.addcontact.vo.ContactVO;
import com.adobe.cairngorm.samples.addcontact.model.ModelLocator;
import mx.collections.ArrayCollection;

 [Bindable]
public var addcontact : AddContact;

[Bindable]
public var contacts : ArrayCollection;

public function addContact() : void
{
var contactVO : ContactVO = new ContactVO();
contactVO.fullname = fullname.text;
contactVO.emailaddress = emailaddress.text;

var event : AddContactEvent = new AddContactEvent( contactVO );
CairngormEventDispatcher.getInstance().dispatchEvent( event );
}
]]>
</mx:Script>
<mx:HBox height="100%">
<mx:VBox>
<mx:Form id="addcontactForm">
<mx:HBox width="100%" horizontalAlign="left">
<mx:Text text="Add a Contact:"/>
</mx:HBox>
<mx:FormItem label="Name: ">
<mx:TextInput id="fullname"/>
</mx:FormItem>
<mx:FormItem label="Email: ">
<mx:TextInput id="emailaddress" displayAsPassword="true"/>
</mx:FormItem>
<mx:HBox width="100%" horizontalAlign="right">
<mx:Button label="AddContact" enabled="{ !addcontact.isPending }" click="addContact()"/>
</mx:HBox>
</mx:Form>
<mx:Text
text="{ addcontact.statusMessage }"
textAlign="center"/>
</mx:VBox>
<mx:VRule  height="100%" strokeColor="#DDDDDD"/>
<mx:VBox paddingTop="15" paddingLeft="15" paddingRight="15" paddingBottom="15">
<mx:Text text="List of Contacts"/>
<mx:List wordWrap="true" dataProvider="{contacts}" width="200" height="220"></mx:List>
<mx:Button label="DeleteContact" textAlign="right"/>
</mx:VBox>
</mx:HBox>
</mx:Panel>

Esta vista contiene el formulario para que el usuario final introduzca los datos del contacto que quiere agregar, lo importante a destacar en este archivo son las siguientes lineas:

public function addContact() : void
{
var contactVO : ContactVO = new ContactVO();
contactVO.fullname = fullname.text;
contactVO.emailaddress = emailaddress.text;

var event : AddContactEvent = new AddContactEvent( contactVO );
CairngormEventDispatcher.getInstance().dispatchEvent( event );
}

La funcion addContact se encarga de crear un objeto ContactVO llenandolo con la información introducida en el fomulario por el usuario. Luego crea y despacha un evento Cairngorm llamado AddContactEvent. Vamos a ubicarnos con el mismo esquema de la entrada "Empezando con Cairngorm - Desarrollando aplicaciones Flex":

En este momento nos encontramos en el paso numero 1 del flujo. Todos los eventos despachados en Cairngorm deben heredar de la clase CairngormEvent, y, al momento de crearlos, debemos especificar en el controlador con que comando va asociado este evento, veamos el codigo de la clase AddContactEvent.cs:


package com.adobe.cairngorm.samples.addcontact.control
{
import com.adobe.cairngorm.control.CairngormEvent;
import com.adobe.cairngorm.samples.addcontact.vo.ContactVO;

/**
* El evento se dispara cuando el usuario presiona "agregar contacto"
*/
public class AddContactEvent extends CairngormEvent
{
/**
* El contacto que se desea agregar
*/
public var contactVO : ContactVO;

/**
* El contructor, te obliga a especificar el contacto
*/
public function AddContactEvent( contactVO : ContactVO )
{
super( AddContactControl.EVENT_ADD_CONTACT );
this.contactVO = contactVO;
}
}
}

Como pueden ver es un codigo bastante sencillo. Lo unico que debemos tomar en cuenta es heredar de la clase CairngormEvent y de especificar cualquier información que deseamos que este disponible en el comando o delegado o servicio (en este caso nos interesa tener el contacto que se va a agregar).

Para hacer el vinculo entre el comando y el evento ahora debemos ir a la clase AddContactControl para realizar las especificaciones de la siguiente manera:


package com.adobe.cairngorm.samples.addcontact.control
{
import com.adobe.cairngorm.control.FrontController;
import com.adobe.cairngorm.samples.addcontact.commands.AddContactCommand;

public class AddContactControl extends FrontController
{
public function AddContactControl()
{
addCommand( AddContactControl.EVENT_ADD_CONTACT, AddContactCommand );
}

public static const EVENT_ADD_CONTACT : String = "addcontact";
}
}

En la linea addCommand( AddContactControl.EVENT_ADD_CONTACT, AddContactCommand ); realizamos el verdadero vinculo entre nuestro evento y el comando. Ahora debemos proceder a crear un comando para manejar las peticiones al servidor. En este momento nos encontramos en el paso dos del flujo Cairngorm, recuerden que es obligatorio hacer al menos una instancia del controlador en la aplicacion, ademas, este controlador debe heredar de la clase FrontController.

Ahora debemos pasar al siguiente paso (crear un comando). Los comandos implementan las interfaces Command y Responder. Por ello deben tener tres metodos principales: execute, onResult y onFault. El primero de ellos es ejecutado automaticamente por el controlador cuando se dispara alguna evento que este enlazado con este comando, el segundo se ejecuta automaticamente una vez que el delegado ha concluido la ejecucion del servicio satisfactoriamente, el ultimo de estos metodos es igual al segundo, con la salvedad que se ejecuta cuando ocurrio algun error no controlado durante la ejecucion del servicio. Ese comando debe tener una instancia del modelo para poder insertar la informacion obtenida del servicio durante el paso 9 del diagrama de flujo.
A continuacion el codigo del comando:


package com.adobe.cairngorm.samples.addcontact.commands
{
import mx.rpc.events.ResultEvent;
import com.adobe.cairngorm.business.Responder;
import com.adobe.cairngorm.commands.Command;
import com.adobe.cairngorm.control.CairngormEvent;
import com.adobe.cairngorm.samples.addcontact.business.AddContactDelegate;
import com.adobe.cairngorm.samples.addcontact.control.AddContactEvent;
import com.adobe.cairngorm.samples.addcontact.model.ModelLocator;
import com.adobe.cairngorm.samples.addcontact.vo.ContactVO;

public class AddContactCommand implements Command, Responder
{
private var model : ModelLocator = ModelLocator.getInstance();

public function execute( event : CairngormEvent ) : void
{
model.addcontact.isPending = true;
var delegate : AddContactDelegate = new AddContactDelegate( this );
var addcontactEvent : AddContactEvent = AddContactEvent( event );
delegate.addcontact( addcontactEvent.contactVO );
}

public function onResult( event : * = null ) : void
{
model.addcontact.contactVO = ContactVO( event );
model.addcontact.isPending = false;

//Simplify - Used an array of strings instead of ContactVO's
model.contacts.addItem(ContactVO(event).fullname+" "+ContactVO(event).emailaddress);

}

public function onFault( event : * = null ) : void
{
model.addcontact.statusMessage = "Could not send contact information to the server.";
model.addcontact.isPending = false;
}
}
}

Para el siguiente paso debemos crear nuestra clase delegate (Delegado). Los delegados son los encargados de ejecutar los servicios que se encuentren definidos en el Localizador de servicio (ServiceLocator).

Para crear nuestro delegado debemos crear una clase que tenga los siguientes atributos globales:

private var responder : Responder;
private var service : Object;

El primero de ellos es una instacia del Comando que acabamos de agregar en el paso anterior, nos permitirar llamar a los metodos onResult y onFault dependiendo de la ejecucion del servicio. Debemos crear un metodo para cada servicio asociado con este delegado, en el ejemplo actual no tenemos ningún servicio asociado en el Localizador de Servicios, por lo que vamos a finjir la ejecucion de uno, utilizando un timer de 2 segundos (2000 Milisegundos). A continuacion el codigo de la clase AddContactDelegate.cs:


package com.adobe.cairngorm.samples.addcontact.business
{
import com.adobe.cairngorm.business.Responder;
import com.adobe.cairngorm.business.ServiceLocator;
import com.adobe.cairngorm.samples.addcontact.vo.ContactVO;

import flash.utils.setTimeout;

import mx.rpc.AsyncToken;
import mx.rpc.events.ResultEvent;

public class AddContactDelegate
{
private var responder : Responder;
private var service : Object;

public function AddContactDelegate( responder : Responder )
{
//this.service = ServiceLocator.getInstance().getService( "addcontactService" );
this.responder = responder;
}

public function addcontact( contactVO : ContactVO ): void
{
//var token : AsyncToken = service.addcontact( contactVO );
//token.resultHandler = responder.onResult;
//token.faultHandler = responder.onFault;

//for demo purpose: simulate remote service result
setTimeout( addcontactResult, 1000, contactVO );
}

private function addcontactResult( contactVO : ContactVO ): void
{
if( 1 )
{
 responder.onResult( contactVO );
}
else
{
 responder.onFault();
}
}
}
}

Por ultimo nos queda el archivo Services.mxml que hereda de la clase ServiceLocator, este, es el Localizador de servicios de la aplicacion, debemos tener todos nuestros objetos remotos, metodos remotos, etc. Definidos en este archivo. En el este ejemplo se encuentra comentada una declaracion de un objeto remoto como ejemplo.


<?xml version="1.0" encoding="utf-8"?>
<cairngorm:ServiceLocator
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:cairngorm="com.adobe.cairngorm.business.*">
<!--commented for demo-->
<!--
<mx:RemoteObject
id="addcontactService"
destination="addcontactService"
showBusyCursor="true"
result="event.token.resultHandler( event );"
fault="event.token.faultHandler( event );">
</mx:RemoteObject>
-->
</cairngorm:ServiceLocator>

Tambien debemos hacer una instancia de este ServiceLocator en el inicio de ejecucion del proyecto. En resumen debemos hacer instancias de los siguientes componentes antes de iniciar la ejecucion de las funcionalidades del proyecto:

Controlador: AddContactControl en este ejemplo.
ServiceLocator: Services en este ejemplo.
ModelLocator: Se llama ModelLocator tambien en este proyecto.

Para que visualizen mejor como hacer las instancias que acabo de mencionar vamos a observar el codigo de la clase Applicacion del ejemplo:


<?xml version="1.0" encoding="utf-8"?>
<mx:Panel
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:view="com.adobe.cairngorm.samples.addcontact.view.*"
title="MyContacts"
horizontalAlign="left" height="350">
<mx:Script>
<![CDATA[

import com.adobe.cairngorm.control.CairngormEventDispatcher;
import com.adobe.cairngorm.samples.addcontact.control.AddContactEvent;
import com.adobe.cairngorm.samples.addcontact.model.AddContact;
import com.adobe.cairngorm.samples.addcontact.vo.ContactVO;
import com.adobe.cairngorm.samples.addcontact.model.ModelLocator;
import mx.collections.ArrayCollection;

 [Bindable]
public var addcontact : AddContact;

[Bindable]
public var contacts : ArrayCollection;

public function addContact() : void
{
var contactVO : ContactVO = new ContactVO();
contactVO.fullname = fullname.text;
contactVO.emailaddress = emailaddress.text;

var event : AddContactEvent = new AddContactEvent( contactVO );
CairngormEventDispatcher.getInstance().dispatchEvent( event );
}
]]>
</mx:Script>
<mx:HBox height="100%">
<mx:VBox>
<mx:Form id="addcontactForm">
<mx:HBox width="100%" horizontalAlign="left">
<mx:Text text="Add a Contact:"/>
</mx:HBox>
<mx:FormItem label="Name: ">
<mx:TextInput id="fullname"/>
</mx:FormItem>
<mx:FormItem label="Email: ">
<mx:TextInput id="emailaddress" displayAsPassword="true"/>
</mx:FormItem>
<mx:HBox width="100%" horizontalAlign="right">
<mx:Button label="AddContact" enabled="{ !addcontact.isPending }" click="addContact()"/>
</mx:HBox>
</mx:Form>
<mx:Text
text="{ addcontact.statusMessage }"
textAlign="center"/>
</mx:VBox>
<mx:VRule  height="100%" strokeColor="#DDDDDD"/>
<mx:VBox paddingTop="15" paddingLeft="15" paddingRight="15" paddingBottom="15">
<mx:Text text="List of Contacts"/>
<mx:List wordWrap="true" dataProvider="{contacts}" width="200" height="220"></mx:List>
<mx:Button label="DeleteContact" textAlign="right"/>
</mx:VBox>
</mx:HBox>
</mx:Panel>

Fijense que aparte de hacer todas las instancias necesarias, tambien le decimos al datagrid que debe enlazar (Binding) su dataprovider con el objeto "contacts" del ModelLocator (model), esto lo hacemos para que cada vez que actualizamos este modelo de datos, se actualice esta vista (el datagrid se llena con exactamente la misma data que tenga model.contacts).

Una vez llamado el servicio y ejecutado correctamente la respuesta de este, nos llegara automaticamente al comando que definimos (AddContactCommand.cs). La respuesta se vera reflejada en el metodo "onResult" donde debemos utilizar la instancia del modelo que tenemos para agregar los datos obtenidos en el modelo de datos, de esta manera la vista se actualizara automaticamente gracias al binding automatico. Los pasos 6,7,8 y 9 del flujo se ejecutan muy rápidamente como pueden darse cuenta, todo gracias a las configuraciones y métodos de programacion utilizados en la arquitectura. A continuacion les dejo el ejemplo funcionando y un vinculo para descargar el codigo fuente. Cualquier pregunta no duden de escribirla en los comentarios de este post.

Empezando con Cairngorm - Desarrollando aplicaciones Flex

2009-04-29T21:10:00.010-04:30

Probablemente todos los que hemos estado por un buen rato metidos en el mundo de Flex hemos escuchado algunas ves sobre el framwerok para desarrollar a aplicaciones Cairngorm.

Para los que no lo han escuchado dejenme explicarles un poco cual es su utilidad: Cuando desarrollas utilizando este framework te vez obligado a cumplir con una serie de normas (Patrones de diseño) que brindan una infinidad de ventajas a largo plazo dentro de tu aplicacion. Por ejemplo: El estar dividido en 8 capaz te permite llevar una mejor organizacion del codigo, permite que varias personas trabajen de manera colaborativa al separar eficazmente la capa de datos de la aplicacion (bien sea con objetos remotos, http service, xml, etc) de la capa de presentacion, permite que nuevos integrantes que conozcan el framework se incorporen mucho mas rapidamente al ser un estandar, se reutiliza mucho el codigo. En fin, muchisimas ventajas, dejen que lo empiezen a usar para que vean que al final no van a poder dejar de usarlo.

¿Como esta dividido Cairngorm?

Una aplicacion realizada bajo Cairngorm tiene 8 capaz principales: Vista, Evento, Controlador, Comando, Delegado, Ubicador de servicios, modelo y los servicios de datos:

Vista: Son todos los formularios, la capa de presentacion de la aplicacion, lo que el usuario final ve.
Evento: Recordemos que lex utiliza la programacion orientada a eventos, son el vinculo entre la vista y el comando.
Controlador: Enruta los diferentes eventos posibles de la aplicacion con los diferentes comandos.
Comando: Realiza 3 acciones principales, execute, que ejecuta el metodo del delegado deseado. "result" que se ejecuta cuando se recive la respuesta del servidor correctamente y "fault" que se ejecuta si ocurre alguna exepcion durante la ejecucion del delegado y servicio. En el metodo "result" se debe introducir los datos en el modelo para que las vistas sean actualizadas.
Delegado: Existen muchos metodos para un objeto remoto, el delegado es el encargado de llamarlos, es un vinculo entre el comando y el servicio.
Ubicador de servicios: aqui se realizan todas las definiciones de los objetos, metodos o servicios que se van a utilizar. Se coloca la ruta del servidor donde son expuestos estos servicioes, etc.
Modelo: Contiene todos los datos de la aplicacion, un diagrama de clases, entidades.
Los servicios: Deben ser creados en un servidor, lenguaje java, php, c#, etc. Ese servidor contiene la BD.

Ejemplo de caso de uso con Cairngorm:

Vamos a colocar el siguiente ejemplo basado en la grafica de arriba: El usuario desea guardar un paciente en la base de datos, para que eso suceda debe existir un formulario de introducccion de los datos del paciente (esa seria la "vista"), una vez que el usuario llena los datos del paciente oprime el botón "guardar" (en ese momento el programador debe disparar un "evento" con los datos del paciente), el "controlador" es el encargado de enrutar ese evento hacia el "comando" mas adecuado (El comando debe manejar las ejecuciones o fallos de los servicios) luego el comando llama a un "delegado"donde se hace un llamado al objeto remoto segun las definiciones que se hayan realizado en el "manejador de servicios". Luego de recibir la respuesta del servicio (recuerden que la respuesta la debe manejar el "comando"), el "comando" se encarga de agregar dentro del "modelo" la informacion recibida, y como el "modelo" esta sincronizado (binding) con la vista, entonces la vista se actualiza automaticamente sin requerir nungina accion del programador.

Probablemente no les haya quedado nada claro, es un poco dificil de entender al principio, y puede parecer que son demasiadas cosas para una accion tan simple como "insertar un paciente en la base de datos". Para entenderlo muchisimo mejor vamos a explicar el ejemplo pero esta vez con el codigo y su ejecucion. Pero eso lo haremos en otro tutorial por razones didacticas (para entrar a el tutorial "Ejemplo Cairngorm - Agregar Contacto" haz click aqui), no se preocupen que una vez que lo entiendan van a ver que es fácil y útil. Para bajarse la libreria de Cairngorm hagan click aqui y seleccionen la última version.

Expandir, Contraer, Cerrar, cambiar tamaño y mover un Panel

2009-04-27T10:33:00.004-04:30

Una de las funcionalidades mas buscadas en un panel son CERRAR, EXPANDIR, CONTRAER Y RESIZE. En este tutorial vamos a explicar su implementacion en un Panel clásico del framework de flex. Utilizando un una clase llamada SuperPanel hecha por Wietse Veenstra y publicada en su blog.

Para empezar debemos tener en nuestro proyecto la clase SuperPanel.as y cada vez que queramos utilizarla en vez de crear un panel de tipo mx.Containers.Panel debemos crear un panel tipo SuperPanel.

Es importante resaltar que la clase SuperPanel hereda directamente de la clase panel, por lo tanto es un panel en si mismo y Flex lo reconoce como un panel, con todos sus comportamientos naturales, mas lo que vamos a ver a continuacion.

Antes de empezar les coloco un demo de la aplicación y el link para que puedan descargar el codigo fuente que vamos a estar utilizando en este tutorial.

Lo pimero que debemos hacer es ir al metodo createChildren(), por ser este, el primer método que se invoca en el ciclo de vida del SuperPanel.


override protected function createChildren():void {
super.createChildren();
this.pTitleBar = super.titleBar;
this.setStyle("headerColors", [0xC3D1D9, 0xD2DCE2]);
this.setStyle("borderColor", 0xD2DCE2);
this.doubleClickEnabled = true;

if (enableResize) {
this.resizeHandler.width     = 12;
this.resizeHandler.height    = 12;
this.resizeHandler.styleName = "resizeHndlr";
this.rawChildren.addChild(resizeHandler);
this.initPos();
}

if (showControls) {
this.normalMaxButton.width      = 10;
this.normalMaxButton.height     = 10;
this.normalMaxButton.styleName  = "increaseBtn";
this.closeButton.width       = 10;
this.closeButton.height      = 10;
this.closeButton.styleName   = "closeBtn";
this.pTitleBar.addChild(this.normalMaxButton);
this.pTitleBar.addChild(this.closeButton);
}

this.positionChildren();
this.addListeners();
}

Lo primero que hacemos en este metodo es definir la apariencia del panel le colocamos un color al header y un color al borde, luego habilitamos que se pueda hacer dobleclick (hay que recordar que el evento doble click solo se dispara si la propiedad doubleClickEnabled es igual a true, por eso la estamos haciendo true) al hacer doble click sobre el titulo del panel, este ultimo se contraerá.

Luego pueden notar los dos condicionales, uno para saber si esta habilido el comportamiento resize y otro para verificar si esta habilitado el comportamiento de cerrar, espandir y contraer. En el caso de que enable resize este "verdadero" entonces se colocara el botón en la esquina inferior derecha del componente (en el metodo initPos se verifica cuales son las cordenadas de esa esquina). Si la propiedad showControls es verdadera entonces se colocan los botones cerrar y expandir sobre dentro de la barra de titulo del panel.


public function positionChildren():void {
if (showControls) {
this.normalMaxButton.buttonMode    = true;
this.normalMaxButton.useHandCursor = true;
this.normalMaxButton.x = this.unscaledWidth - this.normalMaxButton.width - 24;
this.normalMaxButton.y = 8;
this.closeButton.buttonMode    = true;
this.closeButton.useHandCursor = true;
this.closeButton.x = this.unscaledWidth - this.closeButton.width - 8;
this.closeButton.y = 8;
}

if (enableResize) {
this.resizeHandler.y = this.unscaledHeight - resizeHandler.height - 1;
this.resizeHandler.x = this.unscaledWidth - resizeHandler.width - 1;
}
}

public function addListeners():void {
this.addEventListener(MouseEvent.CLICK, panelClickHandler);
this.pTitleBar.addEventListener(MouseEvent.MOUSE_DOWN, titleBarDownHandler);
this.pTitleBar.addEventListener(MouseEvent.DOUBLE_CLICK, titleBarDoubleClickHandler);

if (showControls) {
this.closeButton.addEventListener(MouseEvent.CLICK, closeClickHandler);
this.normalMaxButton.addEventListener(MouseEvent.CLICK, normalMaxClickHandler);
}

if (enableResize) {
this.resizeHandler.addEventListener(MouseEvent.MOUSE_OVER, resizeOverHandler);
this.resizeHandler.addEventListener(MouseEvent.MOUSE_OUT, resizeOutHandler);
this.resizeHandler.addEventListener(MouseEvent.MOUSE_DOWN, resizeDownHandler);
}
}

El metodo "positionChildren" se encarga de ubicar a los botones de cerrar, expandir, contraer y cambiar tamaño dentro del panel.

El el segundo metodo addListeners() se encarga de iniciar los "Listeners" o "Escuchadores" que monitorearán cuando algun click, dobleclick o drag ocurra sobre los botones que recien acabamos de agregar en el metodo createChildren().


public function panelClickHandler(event:MouseEvent):void {
this.pTitleBar.removeEventListener(MouseEvent.MOUSE_MOVE, titleBarMoveHandler);
this.parent.setChildIndex(this, this.parent.numChildren - 1);
this.panelFocusCheckHandler();
}

public function titleBarDownHandler(event:MouseEvent):void {
this.pTitleBar.addEventListener(MouseEvent.MOUSE_MOVE, titleBarMoveHandler);
}

public function titleBarMoveHandler(event:MouseEvent):void {
if (this.width < screen.width) {
Application.application.parent.addEventListener(MouseEvent.MOUSE_UP, titleBarDragDropHandler);
this.pTitleBar.addEventListener(DragEvent.DRAG_DROP,titleBarDragDropHandler);
this.parent.setChildIndex(this, this.parent.numChildren - 1);
this.panelFocusCheckHandler();
this.alpha = 0.5;
this.startDrag(false, new Rectangle(0, 0, screen.width - this.width, screen.height - this.height));
}
}

public function titleBarDragDropHandler(event:MouseEvent):void {
this.pTitleBar.removeEventListener(MouseEvent.MOUSE_MOVE, titleBarMoveHandler);
this.alpha = 1.0;
this.stopDrag();
}

public function panelFocusCheckHandler():void {
for (var i:int = 0; i < this.parent.numChildren; i++) {
var child:UIComponent = UIComponent(this.parent.getChildAt(i));
if (this.parent.getChildIndex(child) < this.parent.numChildren - 1) {
 child.setStyle("headerColors", [0xC3D1D9, 0xD2DCE2]);
 child.setStyle("borderColor", 0xD2DCE2);
} else if (this.parent.getChildIndex(child) == this.parent.numChildren - 1) {
 child.setStyle("headerColors", [0xC3D1D9, 0x5A788A]);
 child.setStyle("borderColor", 0x5A788A);
}
}
}

Luego de iniciar todos los listeners y variables del panel tenemos los handlers (métodos) que se ejecutarán cuando ocurran los eventos que empezamos a escuchar. El primero de estos "panelClickHandler" se encarga de darle el foco al panel que el usuario le acaba de dar "click", lo trae al frente de los otros panels.

El segundo método "titleBarDownHandler" se ejecuta cuando el usuario hace un MOUSE_DOWN sobre el titlebar y se encarga de empezar a escuchar el MOUSE_MOVE para mover el panel junto con el mouse mientras se mantenga presionado el boton de este ultimo (una implementacion de drag and drop).

El tercer metodo "TitleBarMoveHandler" es el encargado de iniciar el drag para mover el panel, se ejecuta cuando el listener recien agregado en el "titleBarDownHandler" detecta un movimiento del mouse, este método tambien escucha un MOUSE_UP para terminar con el drag and drop y si usuario deja de presionar el botón del mouse.

El cuarto metódo "titleBarDragDropHandler" se encarga de terminer el drag and drop del panel, y se ejecuta cuando ocurre un MOUSE_UP. Por último el metodo "panelFocusCheckHandler" le camiba la apariencia al panel segun si tiene o no tiene el foco del mouse.


 public function titleBarDoubleClickHandler(event:MouseEvent):void {
     this.pTitleBar.removeEventListener(MouseEvent.MOUSE_MOVE, titleBarMoveHandler);
     Application.application.parent.removeEventListener(MouseEvent.MOUSE_UP, resizeUpHandler);

     this.upMotion.target = this;
     this.upMotion.duration = 300;
     this.upMotion.heightFrom = oH;
     this.upMotion.heightTo = 28;
     this.upMotion.end();

     this.downMotion.target = this;
     this.downMotion.duration = 300;
     this.downMotion.heightFrom = 28;
     this.downMotion.heightTo = oH;
     this.downMotion.end();

     if (this.width < height ="=" visible =" false;" visible =" true;">

En el código de arriba encontramos la implementación del efecto de minimizar cuando hacemos dobleclick sobre el título del panel. El método titleBarDoubleClickHandler se encarga de definir los valores iniciales para los efectos Resize que se definieron al inicio de la clase, estos efectos cambian la altura del panel hasta contraerlo completamente, quedando solo visible la barra del titulo, o visceversa.


   public function normalMaxClickHandler(event:MouseEvent):void {
       if (this.normalMaxButton.styleName == "increaseBtn") {
           if (this.height > 28) {
               this.initPos();
               this.x = 0;
               this.y = 0;
               this.width = screen.width;
               this.height = screen.height;
               this.normalMaxButton.styleName = "decreaseBtn";
               this.positionChildren();
           }
       } else {
           this.x = this.oX;
           this.y = this.oY;
           this.width = this.oW;
           this.height = this.oH;
           this.normalMaxButton.styleName = "increaseBtn";
           this.positionChildren();
       }
   }

   public function closeClickHandler(event:MouseEvent):void {
       this.removeEventListener(MouseEvent.CLICK, panelClickHandler);
       this.parent.removeChild(this);
   }

Estos dos metodos son los encarcados de las funciones de expandir, contraer y cerrar el panel, el primero de ellos se ejecuta cuando se hace click sobre el botón "normalMaxButton" y lo primero que hace es detectar si el panel se encuentra expandido o contraido y luego ejecuta el codigo para expandir o contraer el codigo segun el caso. El segundo metodo "closeClickHandler" se llama cuando el usuario hace click sobre el botón cerrar, este metodo elimina el listener sobre el evento click que habiamos definido durante la funcion create children y hace que el panel se auto elimine.


   public function resizeOverHandler(event:MouseEvent):void {
       this.resizeCur = CursorManager.setCursor(resizeCursor);
   }

   public function resizeOutHandler(event:MouseEvent):void {
       CursorManager.removeCursor(CursorManager.currentCursorID);
   }

   public function resizeDownHandler(event:MouseEvent):void {
       Application.application.parent.addEventListener(MouseEvent.MOUSE_MOVE, resizeMoveHandler);
       Application.application.parent.addEventListener(MouseEvent.MOUSE_UP, resizeUpHandler);
       this.resizeHandler.addEventListener(MouseEvent.MOUSE_OVER, resizeOverHandler);
       this.panelClickHandler(event);
       this.resizeCur = CursorManager.setCursor(resizeCursor);
       this.oPoint.x = mouseX;
       this.oPoint.y = mouseY;
       this.oPoint = this.localToGlobal(oPoint);   
   }

   public function resizeMoveHandler(event:MouseEvent):void {
       this.stopDragging();

       var xPlus:Number = Application.application.parent.mouseX - this.oPoint.x;       
       var yPlus:Number = Application.application.parent.mouseY - this.oPoint.y;
  
       if (this.oW + xPlus > 140) {
           this.width = this.oW + xPlus;
       }
  
       if (this.oH + yPlus > 80) {
           this.height = this.oH + yPlus;
       }
       this.positionChildren();
   }

   public function resizeUpHandler(event:MouseEvent):void {
       Application.application.parent.removeEventListener(MouseEvent.MOUSE_MOVE, resizeMoveHandler);
       Application.application.parent.removeEventListener(MouseEvent.MOUSE_UP, resizeUpHandler);
       CursorManager.removeCursor(CursorManager.currentCursorID);
       this.resizeHandler.addEventListener(MouseEvent.MOUSE_OVER, resizeOverHandler);
       this.initPos();
   }

Estos últimos cuatro metodos se dedican a implementar la funcionalidad de resize para el panel: El primero de ellos se encarga de cambiar el icono del mouse cuando tengamos el cursor sobre la esquina inferior derecha (para indicarnos que podemos hacer un resize del panel). El segundo metodo es muy similiar pero lo que hace es devolver el icono del mouse a su estado natural (la flechita) cuando quitemos el curso de la esquina inferior derecha del panel.

El tercer metodo "resizeDownHandler" se ejecuta cuando presionamos el botón izquierdo del mouse sobre el boton "resizeHandler" que habiamos insertado en el createChildren(), este metodo se encarga de inicializar los valores X y Y de la esquina y de iniciar los listeners para el evento MOUSE_MOVE.

El metodo "resizeMoveHandler" se encarga de cambiar el tamaño del panel en funcion del movimiento del mouse. Solo se ejecuta mientras tengamos el boton derecho del mouse preisonado, ya que una de las primeras cosas que hace es agregar un listener para el evento MOUSE_UP para detectar cuando dejamos de apretar el botón.

El método "resizeUpHandler" el ultimo metodo de todos se encarga de eliminar el listener de MOUSE_MOVE para no continuar con el resize (cambio de tamaño) del panel.

¡Y eso es todo! Como pueden apreciar es una clase bastante sencilla y facil de usar, por eso me gusta tanto, aunque tiene algunos bugs que iran descubriendo y puliendo sobre la marcha. En los próximos tutoriales publicare modificaciones bastante interesantes que he realizado sobre este u otros panels. Espero que haya sido lo suficientemente claro, cualquier pregunta no duden en preguntarme.

Tutorial HTTP Service con Flex y PHP

2009-04-25T23:25:00.007-04:30

Existen dos grandes maneras de comunicarse remotamente a través de aplicaciones web, son dos enfoques que tienen diferencias muy marcadas, y que si aprendemos a utilizarlos bien, podemos explotar los mejores aspectos de cada método y lograr aplicaciones con una capa de datos robusta y veloz.

Uno de los enfoques (SOAP) es a través de exposiciones de metodos remotos para que puedan ser llamadas desde otras computadoras, si quieres aprender un poco mas sobre eso puedes entrar a mi tutorial Video tutorial WebService basico con php donde lo explico as detalladamente.

El otro enfoque, que utilizaremos en este tutorial, tiene que ver con los metodos mas primitivos que existen en el protocolo http, que seguramente los que han trabajado con formularios web han escuchado algunos de estos: POST, GET, PUT, DELETE, etc. Un ejemplo de arquitectura web que utiliza este enfoque es llamado REST.

Vamos a emprezar, la aplicación que vamos a desarrollar va a tener dos lados, cliente y servidor. Del lado del cliente se creará una aplicacion flex llamada myHTTPService.mxml que se utilizará para visualizar todos los usuarios insertados en una base de datos y existirá un formulario para la insercion de un nuevo usuario. Del lado del servidor se creará una archivo PHP llamado request.php que permitirá acceder a la base de datos para realizar las consultas e inserciones pedidas por el cliente flex.

El lado del Cliente
Código myHTTPService.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="send_data()" height="503">
<mx:Script>
<![CDATA[
import mx.utils.ObjectProxy;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.rpc.http.HTTPService;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;

private var service:HTTPService 

 [Bindable]
private var usuarios : ArrayCollection = new ArrayCollection();

[Bindable]
public var cards: Array = ["PUT","POST","GET","DELETE"];

[Bindable]
public var selectedItem:Object = "GET";

 public function send_data() : void
{
var obj : Object = new Object();
useHttpService(obj);
}

public function procesar() : void
{
if(nombre.text.length>0)
{
var obj : Object = new Object();
obj.nombre = nombre.text;
obj.id = codigo.text;

useHttpService(obj);
}
else
{
Alert.show("El nombre es obligatorio");
}
}

public function traspasar() : void
{
var a : Object = dg.selectedItem;
nombre.text = a.nombre;
codigo.text = a.id;
}

public function useHttpService(parameters:Object):void {
service = new HTTPService();
//service.destination = "http://localhost/tutoriales/httpservice/request.php";
service.url = "http://ejemplos.net78.net/httpservice/request.php";
service.method = "POST";
service.addEventListener("result", httpResult);
service.addEventListener("fault", httpFault);
service.useProxy = false;
service.send(parameters);
}

 public function httpResult(event:ResultEvent):void {
var result:Object = event.result;
//Do something with the result.
if(result.users.user is ObjectProxy)
usuarios = new ArrayCollection([{nombre:result.users.user.nombre , id:result.users.user.id}]);
else
usuarios = result.users.user;
}

 public function httpFault(event:FaultEvent):void {
var faultstring:String = event.fault.faultString;
Alert.show(faultstring);
}
]]>
</mx:Script>
<mx:DataGrid id="dg" x="10" y="10" dataProvider="{usuarios}" click="traspasar()"/>
<mx:Canvas x="10" y="182" width="260" height="98" backgroundColor="#FFFFFF">
<mx:Label x="10" y="10" text="Nombre:"/>
<mx:Label x="10" y="42" text="Id:"/>
<mx:TextInput x="90" y="8" id="nombre"/>
<mx:TextInput x="90" y="40" id="codigo" enabled="false"/>
<mx:Button x="173" y="66" label="Insertar" click="procesar()"/>
</mx:Canvas>

</mx:Application>

Ahora, que debemos destacar de esta aplicacion, la esencia de todo esta en la funcion useHttpService: Esta funcion se encarga de crear una peticion a un servicio http, para eso creamos un objeto de tipo HTTPService que va a simular un comportamiento parecido al que sucede cuando le damos a submit en un formulario web estandar, pero en este caso, en lugar de colocar varios input text, comboboxes, etc. Vamos a armar un objeto (en esta funcion lo llamamos "parameters") donde cada atributo de este objeto se comportara como una variable independiente en el lado de php, es decir, si al objeto le colocamos la propiedad nombre, entonces en php haremos $_POST['nombre'] para recibir el valor de esa propiedad.

Recuerden que en Flex un objeto de la clase Object puede tener cualquier atributo que nosotros queramos, solo debemos asignarle un valor a ese atributo inventado y a partir de ese momento el objeto contiene ese atributo con ese valor que le dimos.

Ahora vamos a analizar esa funcion paso por paso:


public function useHttpService(parameters:Object):void {
service = new HTTPService();
service.url = "http://ejemplos.net78.net/httpservice/request.php";
service.method = "POST";
service.addEventListener("result", httpResult);
service.addEventListener("fault", httpFault);
service.send(parameters);
}

El objeto service que acabamos de crear debemos pasarle varios parametros:

URL: la direccion de la pagina que va a recibir nuestro formulario.
Method: puede ser POST, GET, PUT, DELETE, ETC.
send(parameters): Recuerden que el objeto parameters contiene todas las variables que queremos pasar al lado de PHP.
Por ultimo escuchamos dos eventos "result" y "fault", el primero de ellos se disparará si el servicio se invoca correctamente (si encontro el URL que pusimos arriba y si en el lado del servidor PHP nos devolvio un resultado coherente) y nos llevará a la funcion httpresult donde procesaremos los resultados, el segundo de los eventos se disparará si la llamada al servicio no puede ser procesada y nos llevará al método httpfault.

El lado del servidor

En el lado del servidor vamos a crear un archivo php llamado reques.php, este archivo deberá procesar correctamente las peticios POST que haga el lado del cliente y deberá devolver la lista de usuarios que han sido insertados dentro de la base de datos:

Código request.php


//connect to the database
$mysql = mysql_connect("localhost", "root", "");
mysql_select_db( "phprestsql" );

//if the username and email address are filled out
if( $_POST["nombre"])
{
//add the user
$Query = "INSERT INTO user VALUES ('".$_POST['nombre']."','')";
$Result = mysql_query( $Query );
}

//return a list of all the users
$Query = "SELECT * from user";
$Result = mysql_query( $Query );

$Return = "<users>";

while ( $User = mysql_fetch_object( $Result ) )
{
$Return .= "<user><id>".$User->id."</id><nombre>".$User->nombre."</nombre></user>";
}
$Return .= "</users>";
mysql_free_result( $Result );
print ($Return);

Como pueden ver el lado de php es muy basico y es similar al que se utilizaria si estubieramos trabajando con formularios comunes y corrientes. Debemos recibir la variable "nombre" que pasamos desde flex y luego realizar una insercion en la base de datos. Luego de realizar la insercion consultamos toda la tabla de usuarios para implimir un xml en la pantalla que sera lo que constituirá el objeto de respuesta de vuelta hacia flex, ese se recibira como parametro del metodo httpresult en caso de que la llamada al servicio se haya ejecutado correctamente.

Espero que hayan entendido todo prefectamente, trate de ser lo mas claro posible, cualquier pregunta no duden en preguntarme a través de los comentarios de este blog. Les dejo un ejemplo funcionando de la aplicacion y los codigos fuentes de ambos lados (cliente y servidor).

Modificando el HAccordion del FlexLib

2009-03-15T13:44:00.006-04:30

El los ultimos dias he tenido la nacesidad de utilizar el accordion horizontal que trae la librería flexlib que mencione en el artículo anterior, una vez hecho esto me di cuenta de que por problemas de diseño del framework de flex la cabecera (heather) del acordion no pued ser muy personalizada, nada mas alla de colocarle un texto y un icono deseado, a pesar de que tiene una propiedad llamada headerRenderer para colocarle tu propio renderer. Esto se debe, a que la este renderer debe ser un Button.

Para solucionar esto la gente de Flexlib (Especificamente, Doug McCune) tubo una brillante idea y desarrollaro un Canvas que se comporta como botton para poder colocar cualquier cosa que queramos dentro de la cabecera del Vertical u Horizontal accordion, el CanvasButtonAccordionHeader, pero todavia hay un problema, el headerRenderer es único para todo el HAccordion. ¿Qué pasa si yo desearía que cada cabecera, de cada sección del accordion, fuera diferente? Diferentes colores, fondo, controles, etc. No unicamente un texto o un icono diferente.

Para solucionar eso he decidido colocar un ViewStack con todas las posbles cabeceras del HAccordion y dependiendo de cual quiero visualizar en cada una de las secciones le paso en la propiedad "label" del boton (recordemos que supuestamente la cabecera es un botón) el numero de View que deseo visualizar en ese caso (la propiedad selectedIndex del ViewStack). El codigo del CanvasButtonAccordionHeather quedaria de la siguiente manera:

Si se fijan, he colocado tres HBox dentro del ViewSatck, esto se debe a que mi acordion va a tener 3 secciones diferentes (V0, V1 y V2). Aunque esta no es la solucion mas ideal por lo menos me resulve de mis apuros, lo ideal sería tener un ViewStackButtonAccordionHeather, es decir, un ViewStack que se comporte como boton para que yo pueda presonalizarlo desde la aplicacion principal y no tener que crear un componente con todo el codigo cableado. Pero bueno, es un comienzo.

El ejemplo definitivo de la pagina que estaba realizando lo pueden ver en este link, de todas maneras aqui les dejo el ejemplo para que se lo descarguen.

FlexLib Librería - Open Source con componentes para Flex

2009-02-20T18:53:00.006-04:30

Todos conocemos la importancia que tienen los componentes a la hora de realizar un diseño web (viene siendo uno de los aportes mas importantes de Flex sobre Flash). La comunidad desarrolladora de Flex se unó para realizar una librería llamada FlexLib con los mejores componentes de los mejores programadores de flex conocidos. Entre algunos de los componentes (solo con los que yo he trabajado) que se incluyeron se encuentran:

Horizontal Accordion: Es similar al Vertical Accordion del framework original de flex pero permite deslizar los contenedores de izquierda a derecha en lugar de arriba hacia abajo.
DragScrollingCanvas: Algo parecido a lo que sucede en google maps, podemos arrastrar el contenido interno del canvas sin la necesidad de usar un ScrollBar o la ruedad del mouse, solo haciendo un drag sobre el contenido.
ButtonScrollingCanvas: Coloca botones en los extremos del contenedor, al presionarlos, colocar el mouse sobre ellos, etc. Se realiza un Scroll del contenido.
CanvasButton: Es un contenedor canvas que hereda de la clase Button, por lo que permite ser utilizado como HeatherRenderer de un Horizonal o Vertical Acorrdion.

En Fin, si quieren conocer todos los componentes que tiene la librería los invito a entrar a la siguiente direccion de FlexLib en Google Codes. De todas maneras les dejo un vinculo para descargar la librería.

Utilizando un ItemEditor para modificar las filas de un DataGrid

2009-02-16T20:34:00.010-04:30

Este post lo voy a realizar como una continuacion del post anterior Utilizando un ItemRender en un DataGrid pero en este caso vamos a ampliar el ejemplo utilizando una propiedad llamada itemEditor.

Un itemEditor es un componente que se utiliza para modificar informacion, a diferencia de un itermRenderer (que se utiliza unicamente para mostrar informacion) el itemEditor es ideal para realizar modificaciones a datos utilizando los componentes mas idoneos para facilitar la modificacion. La mejor manera de que se vea lo que trato de decir es mostrando el ejemplo que vamos a realizar:
Como pueden notar al hacer click sobre alguna de las celdas los datos que se visualizaban ahora se renderizan de otra manera ideal para su manipulacion.

Para lograr esto debemos colocar en cada columna una propiedad llamada itemEditor que contendrá la ruta hacia la clase o componente que queremos utilizar para renderizar los datos en el momento de la modificacion de la celda. En el caso de este ejemplo la estructura del DataGrid queradía de la siguiente manera.


<mx:DataGrid id="dg" x="10" y="10" columnWidth="20" dataProvider="{datos}" rowHeight="25" editable="true" width="357">
<mx:columns>
<mx:DataGridColumn headerText="RadioButton" dataField="radioValue" editable="false" itemRenderer="mx.controls.RadioButton"/>
<mx:DataGridColumn headerText="NumericStepper" dataField="numeriValue" editorDataField="value" itemEditor="mx.controls.NumericStepper"/>
<mx:DataGridColumn headerText="Image" dataField="url" itemRenderer="mx.controls.Image" itemEditor="mx.controls.TextInput"/>
<mx:DataGridColumn headerText="CheckBox" dataField="checkBoxValue" editable="false" itemRenderer="mx.controls.CheckBox"/>
<mx:DataGridColumn headerText="TextInput" dataField="textValue" editable="true" itemEditor="mx.controls.TextInput"/>
</mx:columns>
</mx:DataGrid>

Si no queremos que una columna en especifica se pueda editar debemos asignarle la propiedad editable=false.

Bueno esto es todo en este ejemplo, como pueden ver es muy facil utilizar estos itemEditors para modificar las filas del DataGrid. Cualquier duda no duden en escribirme al correo aalejo@gmail.com.

Utilizando un ItemRender en un DataGrid

2009-02-15T04:09:00.008-04:30

En este ejemplo vamos llenar un DataGrid como lo hacemos normalmente, es decir, a través de su propiedad dataProvider. Lo que tendrá de particular será la manera como mostraremos la informacion dentro del DataGrid. Los datos seran mostrados de 5 maneras diferentes (Una manera por cada columna) utilizando la propiedad ItemRenderer de las columnas del DataGrid (DatagridColumns).

Los ItemRenderer que utilizaremos para mostrar la información serán los siguientes: RadioButton, NumericStepper, Image, CheckBox, TextInput. Si quieres saber como utilizar un ItermRender propio y mas complejo te recomiendo el tutorial Datagrid con un ItemRenderer Propio (Personalizado).

Bueno para empezar vamos a crear un nuevo proyecto en flex llamado DataGridSimpleItemrenderer, dentro de esta aplicacion vamos a agregar un nuevo Datagrid que va a contener 5 columnas, a cada una de las columnas le vamos a colocar la propiedad itemRenderer con la ruta a la clase de flex que vamos a utilizar para renderizar, por ejemplo, si se trata de un RadioButton debemos colocar mx.controls.RadioButton. Tambien debemos colocar la propiedad dataField con el nombre del atributo que va a contener la data que va a utilizar ese RadioButton para renderizarse, recuerden que el DataGrid se va a llenar con un arreglo de objetos (cada objeto va a tener un atributo que se va a user para renderizar una columna, ese atributo será el que colocaremos como dataField segun sea el caso). Por ultimo llenamos la pripiedad headerText con el mobre que le queremos dar a esa columna.

Una vez creado el DataGrid y colocados estos atributos en las columnas del DataGrid tendremos el siguiente codigo:


<mx:DataGrid id="dg" x="10" y="10" dataProvider="{datos}" rowHeight="25" width="288">
<mx:columns>
<mx:DataGridColumn headerText="RadioButton" dataField="radioValue" itemRenderer="mx.controls.RadioButton"/>
<mx:DataGridColumn headerText="NumericStepper" dataField="numeriValue" itemRenderer="mx.controls.NumericStepper"/>
<mx:DataGridColumn headerText="Image" dataField="url" itemRenderer="mx.controls.Image"/>
<mx:DataGridColumn headerText="CheckBox" dataField="checkBoxValue" itemRenderer="mx.controls.CheckBox"/>
<mx:DataGridColumn headerText="TextInput" dataField="textValue" itemRenderer="mx.controls.TextInput"/>
</mx:columns>
</mx:DataGrid>

Ahora debemos crear una funcion llamada "init" que llamaremos cuando ocurra el evento CreationComplete de la aplicación, esta función se encargara de llenar el arreglo dataProvider que contendrá el DataGrid, recuerden que los objetos que le vamos a insertar a este dataProvider deben tener atributos iguales a los que mencionamos como dataField en las columnas del DataGrid. Al final tendremos todo el codigo de la aplicación como lo siguiente:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;

[Bindable] public var datos : ArrayCollection = new ArrayCollection();

public function init() : void
{
var obj : Object = new Object();
obj.checkBoxValue = true;
obj.radioValue = false;
obj.numeriValue = 7;
obj.textValue = "Hola Mundo";
obj.url = "http://aalejo.googlepages.com/idea.jpg";

datos.addItem(obj);
}
]]>
</mx:Script>
<mx:DataGrid id="dg" x="10" y="10" dataProvider="{datos}" rowHeight="25" width="288">
<mx:columns>
<mx:DataGridColumn headerText="RadioButton" dataField="radioValue" itemRenderer="mx.controls.RadioButton"/>
<mx:DataGridColumn headerText="NumericStepper" dataField="numeriValue" itemRenderer="mx.controls.NumericStepper"/>
<mx:DataGridColumn headerText="Image" dataField="url" itemRenderer="mx.controls.Image"/>
<mx:DataGridColumn headerText="CheckBox" dataField="checkBoxValue" itemRenderer="mx.controls.CheckBox"/>
<mx:DataGridColumn headerText="TextInput" dataField="textValue" itemRenderer="mx.controls.TextInput"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>

Bueno esto es todo, de todas maneras aqui les dejo el codigo de la aplicacion para que lo puedan descargar, y tambien pueden ver el ejemplo en funcionamiento. Cualquier duda me pueden escribir a mi email aalejo@gmail.com.

Carrito de compras con PHP (Orientado a Objetos)

2009-02-14T14:15:00.003-04:30

En este tutorial vamos a crear y utilizar las clases necesarias para manejar un carrito de compras en PHP. Las funciones que esta clase "Carrito" tendrá serán:

Agregar un producto.
Eliminar un producto.
Modificar un producto.
Imprimir el carrito.

Por fines didácticos quiero utilizar el patrón de diseño Iterator en esta clase "Carrito", ese patrón de diseño nos permitie recorrer los arreglos, collecciones, etc. Sin exponer sus estructuras, es decir, vamos a estandarizar la manejar de recorrer ese tipo de objetos, siempre que queramos recorrer un arreglo, coleccion, etc. Vamos a hacerlo de la misma manera sin importar que clase es.

Tambien vamos a trabajar el carrito creado como una variable de sesion, para que este presente durante toda la aplicación (mientras el usuario realiza sus compras).

Creando la clase Producto

Esta clase se encargará de guardar la informacion relativa a cada producto en especifibo, cada que que queramos un nuevo producto debemos crear una instancia de esta clase y pasarle sus atributos: codigo (para la identificacion unica), cantidad, precio, nombre, etc.

Archivo Producto.php


class Producto
{
var $codigo;
var $nombre;
var $cantidad;
var $precio;
}

Creando la clase Carrito

La clase Carrito no es mas que una collección de objetos Producto y los metodos para manejar esos productos:

Archivo Carrito.php


/**
* Esta clase permite manejar funciones basicas de un carrito de
* compras, esta desarrollada usando el patron de diseño iterator
* para orfecer mayor encapsulamiento y orden en los datos
* para utilizarla deben tener una clase producto que contenga
* el atributo "codigo" representando la identificacion del producto
*
* Cualquier duda pueden escribir a aalejo@gmail.com
* o entrar en la explicacion de esta clase en
* www.internetdeveloping.blogspot.com
*/
require('Collection.php');
require('Producto.php');

Class Carrito
{
/**
* Viene representando la lista de productos del carrito
* @var Collection
*/
var $productos;

function Carrito()
{
$this->productos = new Collection('Producto');
}

/**
* Esta funcion devuelve un producto a partir del codigo
* @param $codigo
* @return Producto
*/
public function getProducto($codigo)
{
$iterator = $this->productos->getIterator();
while($iterator->valid())
{
 $prod = $iterator->current();

 if($prod->codigo == $codigo)
 {
  return $prod;
 }

 $iterator->next();
}

return null;
}

/**
* Permite agregar un producto al carrito de compras
* @param $producto
* @return null
*/
public function agregarProducto($producto)
{
$prod = $this->getProducto($producto->codigo);
if($prod) $prod->cantidad++;
else
 $this->productos->add($producto);
}

/**
* Elimina un producto del carrito, a partir de un codigo
* @param $codigo
* @return null
*/
public function eliminarProducto($codigo)
{
$existe = false;
$iterator = $this->productos->getIterator();
while($iterator->valid())
{
 $prod = $iterator->current();
 if($prod->codigo == $codigo)
 {
  if($prod->cantidad > 1)
   $prod->cantidad--;
  else
  {
   $this->productos->remove($iterator->key());
  }
 }
 $iterator->next();
}
}

/**
* Se utiliza solo con fines de desarrollo, imprime la lista
* de productos del carrito, se puede modificar para imprimir
* toda la informacion de cada producto
* @return String
*/
public function trace()
{
$out = "";
$iterator = $this->productos->getIterator();
while($iterator->valid())
{
 $prod = $iterator->current();

 $out .= "Producto ".$prod->nombre." -> ".$prod->cantidad."
";

 $iterator->next();
}

return $out;
}

}

Seguramente se preguntan porque la variables $productos es de tipo Collection, bueno esto es muy simple, para no trabajar con arreglos tediosos decidi utilizar una clase que encontre en internet llamada Collection.php, lo bueno de esta clase es que implementa la interaz IteratorAggregate que nos permitirá utilizar el patron de diseño Iterator que explique anteriormente, por otro lado, sus metodos son mucho mas intuitivos que los de un arreglo. A continuación les dejo el codigo de la clase Collection.php

Archivo Collection.php


class Collection implements Countable, IteratorAggregate, ArrayAccess
{
protected $_valueType;
protected $_collection = array();

/**
* Construct a new typed collection
* @param string valueType collection value type
*/
public function __construct($valueType)
{
$this->_valueType = $valueType;
}

/**
* Add a value into the collection
* @param string $value
* @throws InvalidArgumentException when wrong type
*/
public function add($value)
{
if(!$this->isValidType($value))
 throw new InvalidArgumentException('Trying to add a value of wrong type');

$this->_collection[] = $value;
}

/**
* Set index's value
* @param integer $index
* @param mixed $value
* @throws OutOfRangeException
* @throws InvalidArgumentException
*/
public function set($index, $value)
{
if($index >= $this->count())
 throw new OutOfRangeException('Index out of range');

if(!$this->isValidType($value))
 throw new InvalidArgumentException('Trying to add a value of wrong type');

$this->_collection[$index] = $value;
}

/**
* Remove a value from the collection
* @param integer $index index to remove
* @throws OutOfRangeException if index is out of range
*/
public function remove($index)
{
if($index >= $this->count())
 throw new OutOfRangeException('Index out of range');

array_splice($this->_collection, $index, 1);
}

/**
* Return value at index
* @param integer $index
* @return mixed
* @throws OutOfRangeException
*/
public function get($index)
{
if($index >= $this->count())
 throw new OutOfRangeException('Index out of range');

return $this->_collection[$index];
}

/**
* Determine if index exists
* @param integer $index
* @return boolean
*/
public function exists($index)
{
if($index >= $this->count())
 return false;

return true;
}
/**
* Return count of items in collection
* Implements countable
* @return integer
*/
public function count()
{
return count($this->_collection);
}

/**
* Determine if this value can be added to this collection
* @param string $value
* @return boolean
*/
public function isValidType($value)
{
$baseType = gettype($value);
if($this->_valueType == $baseType)
 return true;

if($baseType == 'object')
{
 $class = get_class($value);

 if($this->_valueType == $class)
  return true;
}

return false;
}

/**
* Return an iterator
* Implements IteratorAggregate
* @return ArrayIterator
*/
public function getIterator()
{
return new ArrayIterator($this->_collection);
}

/**
* Set offset to value
* Implements ArrayAccess
* @see set
* @param integer $offset
* @param mixed $value
*/
public function offsetSet($offset, $value)
{
$this->set($offset, $value);
}

/**
* Unset offset
* Implements ArrayAccess
* @see remove
* @param integer $offset
*/
public function offsetUnset($offset)
{
$this->remove($offset);
}

/**
* get an offset's value
* Implements ArrayAccess
* @see get
* @param integer $offset
* @return mixed
*/
public function offsetGet($offset)
{
return $this->get($offset);
}

/**
* Determine if offset exists
* Implements ArrayAccess
* @see exists
* @param integer $offset
* @return boolean
*/
public function offsetExists($offset)
{
return $this->exists($offset);
}
}

Utilizando del carrito de compras

Bueno ya estamos listos, ahora solo falta probar nuestra clase, para eso vamos a crear un arrchivo llamado VistaCarrito.php donde vamos a crear una instancia de la clase Carrito y vamos a agregarle, eliminarle y modiicarle produtos.

Archivo VistaCarrito.php


session_start();
require("Carrito.php");

$carrito = new Carrito();
$_SESSION["carrito"] = $carrito;
//Creo dos productos para jugar con ellos
$prod = new Producto();
$prod->codigo = 1;
$prod->cantidad = 1;
$prod->nombre = "Cama";
$prod->precio = 50;

$prod2 = new Producto();
$prod2->codigo = 2;
$prod2->cantidad = 1;
$prod2->nombre = "Silla";
$prod2->precio = 23;

echo "Agregando dos productos...
";
$_SESSION["carrito"]->agregarProducto($prod);
$_SESSION["carrito"]->agregarProducto($prod2);

echo $_SESSION["carrito"]->trace();

echo "Modificando el producto de codigo 1...
";
$auxProd = $_SESSION["carrito"]->getProducto("1");
$auxProd->cantidad++;

echo $_SESSION["carrito"]->trace();

echo "Eliminando el producto de codigo 2...
";
$_SESSION["carrito"]->eliminarProducto("2");

echo $_SESSION["carrito"]->trace();

echo "Listo...";

Recuerden que antes de empezar a utilizar las variables de session siempre debemos llamar a la funcion session_start(). Creamos la variable carrito como un objeto de sesion para poder utilizarlo durante toda la paigna web.

Bueno espero que todo haya quedado claro, aqui les dejo el codigo fuente de la clase para los que la quieran utilizar, cualquier duda me pueden escribir a mi correro aalejo@gmail.com.

Datagrid con un ItemRenderer Propio (Personalizado)

2009-02-05T23:47:00.009-04:30

En esta oportunidad vamos a colocar un ItemRenderer personalizado dentro de un DataGrid y que sin embargo los datos se sigan pasando de manera automatica a través del dataSource y utilizando Binding.

El ItemRenderer que vamos a utilizar va a ser un componente flex creado completamente aparte y a nuestro gusto, y le vamos a pasar sus datos a renderizar a través de la propiedad Data que tienen todos los objetos que implementan la interfaz IDataRender.

Para empezar vamos a entender un poco sobre la interfaz IDataRenderer, cualquier objeto que la implemente contiene una propiedad llamada data, por donde recibe toda la información a renderizar (a pintar, graficar, como lo quieran llamar), la única informacion que un objeto de este tipo deberia recibir a través de otras propiedades seria la concerniente a su comportamiento.

En nuestro ejemplo la informacion a renderizar son dos datos:

url: Contiene la direccion donde se encuentra alojada la fotografia del producto.
nombre: El nombre del objeto.

El ItemRenderer por defecto en el DataGrid es el componente "Label", aunque a veces no nos damos cuenta. Si queremos cambiar el itemrenderer de una columna solo debemos setearle la propiedad "itemrenderer" igual a la dirección donde se encuentra nuestra clase (o componente), esta dirección debe incluir la ruta desde la raiz del proyecto. Una vez hecho esto el itemrenderer recibirá la información a través de la propiedad "data" de la que hablamos anteriormente.

Bueno basta de hablar tanto y vamos a empezar. Creamos el componente de flex que va a renderizar los datos:
Archivo pictureRender.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="112" height="126">
<mx:Script>
<![CDATA[

[Bindable]
public var nombre : String = "Ramon";
[Bindable]
public var url : String = "assets/1.jpg";

public override function set data(value:Object):void
{
nombre = value.data.nombre;
url = value.data.url;

super.data = value;
}
public override function get data():Object
{
return super.data;
}
 ]]>
</mx:Script>
<mx:Image x="10" y="10" width="89" height="89" source="{url}"/>
<mx:Label x="10" y="104" width="92" text="{nombre}"/>
</mx:Canvas>

El componente lo hemos creado a partir de la clase Canvas, como esta clase implementa la interfaz IDataRenderer, sobreescribi los metodos get y set de la propiedad data para aplicarle una logica especial a estos datos, ya que debemos extraer el campo "nombre" y "url" de este objeto para colocarlo en las respectivas variables del componente, estas variables deben ser declaradas como [Binding] en el momento de su definición, ya que de esta manera los datos que ellas contengan serán transferidos al objeto Image (en el caso de la url) y Label (en el caso del nombre) sin nosotros tener que ocuparnos de eso, es decir, en el momento en que cambie la variable url entonces cambiara el valor de la propiedad "source" del objeto Image. Para aprender un poco mas sobre el metatag [Binding] puede hacer click aqui.

Ahora procedemos a llenar el archivo de la aplicacion:
Archivo DatagridDataRender.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.core.IDataRenderer;
import mx.collections.ArrayCollection;

[Bindable]
public var renderData : ArrayCollection = new ArrayCollection( [
{url:'assets/1.png', nombre:'Monitor Daslex'},
{url:'assets/2.png', nombre:'Maletin Ladrix'}]);
 [Bindable]
public var datosDG : ArrayCollection = new ArrayCollection();
 public function init() : void
{
var obj1 : Object = new Object();
obj1.data = renderData.getItemAt(0);
obj1.descripcion = "Producto de buena calidad.";
 var obj2 : Object = new Object();
obj2.data = renderData.getItemAt(1);
obj2.descripcion = "Producto de mala calidad.";

datosDG.addItem(obj1);
datosDG.addItem(obj2);
}
 ]]>
</mx:Script>
<mx:DataGrid x="10" y="10" dataProvider="{datosDG}" rowHeight="130" width="373" rowCount="2">
<mx:columns>
<mx:DataGridColumn headerText="Producto" dataField="data" itemRenderer="pictureRender" />
<mx:DataGridColumn headerText="Descripcion" dataField="descripcion"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

Este archivo tiene dos partes fundamentales, en la primera seccion definimos dos ArrayCollection llamados "renderData" y "datosDG". El primero de ellos contiene los objetos "data" que se van a utilizar para enviar informacion a los ItemRenderer, el segundo de ellos va a ser sincronizado con la propiedad dataProvider del DataGrid (contendrá una lista donde cada item será equivalente a una fila en el datagrid.)

La función init, que se llama cuando se dispara el evento creationComplete de la aplicación, se encarga de llenar el ArrayCollection datosDG, especificamente crea objetos con dos variables principales "data" y "descripcion", estas variables deben ser colocadas como "dataFields" en las columnas del DataGrid para que el DataGrid haga la carga de datos automaticamente. Si se fijan, la pripiedad data es llenada con la información a renderizar por el ItemRederer.

Bueno ya hemos finalizado nuestra aplicación, cualquier duda me pueden escribir a mi correo aalejo@gmail.com, si todo los hicieron correctamente su aplicacion debería verse de la siguiente manera:

Obtener una celda o dato de un Datagid

2009-02-05T21:37:00.005-04:30

Un breve ejemplo de como obtener los datos de un datagrid por medio de su propiedad dataProvider.

En el ejemplo vamos a usar un ArrayCollection para llenar un Datagrid, luego vamos a obtener la fila deseada del Datagrid segun el "numero de fila". Tambien vamos a ser capaces de detectar cual es la fila que esta seleccionada y obtener su informacion con la propierar selectedIndex de la clase Datagrid.

Para empezar vamos a crear una clase Persona con los datos: Nombre, Apellido y cedula:

Archivo clase Persona.as


package com
{
public class Persona
{
public var nombre : String;
public var apellido : String;
public var cedula : String;


public function Persona()
{
}

}
}

Luego debemos en la aplicacion principal crear una funcion handler llamada "init" para el evento creationComplete, este evento se dispara apenas la aplicacion se acaba de terminar de crear y esta lista para empezar a ejecutarse, creamos un ArrayCollection y agregarle por ejemplo, dos personas cuales quiera:


public function init() : void
{
var persona1 : Persona = new Persona();
persona1.nombre = "Alejandro";
persona1.apellido = "Sanchez";
persona1.cedula = "17405689";

var persona2 : Persona = new Persona();
persona2.nombre = "Ramon";
persona2.apellido = "Ramos";
persona2.cedula = "14758243";

personas.addItem(persona1);
personas.addItem(persona2);
}

Recuerden colocar esta funcion como handler del evento creationComplete de la aplicacion.

Ahora debemos decirle al Datagrid que debe llenarse con la informacion de ese ArrayCollection, para eso utilizamos la propiedad dataProvider del Datagrid, ademas debemos decirle como manejar esa informacion, debemos crear tres columnas (DataGridColumn) dandole valores a las propiedades headerText (el nombre que queremos mostrar en el tope de esa columna) y dataField (el nombre de la propiedad de la clase persona que contiene el dato a mostrar):


<mx:DataGrid id="dg" x="10" y="10" dataProvider="{personas}">
<mx:columns>
<mx:DataGridColumn headerText="Nombre" dataField="nombre"/>
<mx:DataGridColumn headerText="Apellido" dataField="apellido"/>
<mx:DataGridColumn headerText="Cedula" dataField="cedula"/>
</mx:columns>
</mx:DataGrid>

Ahora procedemos a crear un pequeño formulario donde se van a mostrar los datos que vamos a obtener de la fila que se introduzca. Para eso vmos a crea el siguente fomulario:


<mx:TextInput id="nro" x="10" y="195" width="41"/>
<mx:Button x="59" y="195" label="Obtener" click="obtener()"/>
<mx:Label x="10" y="169" text="¿Qué fila deseas obtener?"/>
<mx:Canvas x="10" y="225" width="287" height="96" backgroundColor="#FFFFFF">
<mx:Label x="10" y="10" text="Nombre"/>
<mx:Label x="10" y="36" text="Apellido"/>
<mx:Label x="10" y="62" text="Cédula"/>
<mx:Label id="labelNombre" x="62" y="10" text="No definido"/>
<mx:Label id="labelApellido" x="62" y="36" text="No definido"/>
<mx:Label id="labelCedula" x="62" y="62" text="No definido"/>
</mx:Canvas>
<mx:Button x="140" y="195" label="La fila seleccionada" width="157" click="filaSeleccionada()"/>

Si se fijan hay dos cosas importantes aqui: La llamada a los metodos obtener() y filaSeleccionada() cuando el usuario haga click en cada uno de los botones, y que hemos identificado los controles que vamos a trabajar desde el codigo Action Script asignandoles una identificado String en la propiedad "id". Ahora debemos definir que van a realizar los metodos handlers que hemos colocado para manejar los eventos click.


public function obtener() : void
{
if(personas.length>Number(nro.text) && Number(nro.text)>=0)
{
var auxPersona : Persona = Persona(personas.getItemAt(Number(nro.text)));

labelApellido.text = auxPersona.apellido;
labelCedula.text = auxPersona.cedula;
labelNombre.text = auxPersona.nombre;
}
else
{
Alert.show('El indice excede el numero de filas o es negativo, recuerda que se empieza por el numero 0');
}

}

public function filaSeleccionada() : void
{
if(dg.selectedItem) nro.text = dg.selectedIndex.toString();
else Alert.show("Debes seleccionar un item");
}

El primer metodo (obtener) se encarga de obtener los datos del numero de fila que contenga el textInput llamado "nro". El segundo metodo obtiene el indice de la fila seleccionada (Si hay alguna, por supuesto).

Bueno al final el codigo de nuestro archivo aplicacion llamado ejemploDataGrid.mxml queda de la siguiente manera:
Archivo clase ejemploDatagrid.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import com.Persona;

[Bindable]
public var personas : ArrayCollection = new ArrayCollection();

public function init() : void
{
var persona1 : Persona = new Persona();
persona1.nombre = "Alejandro";
persona1.apellido = "Sanchez";
persona1.cedula = "17405689";

var persona2 : Persona = new Persona();
persona2.nombre = "Ramon";
persona2.apellido = "Ramos";
persona2.cedula = "14758243";

personas.addItem(persona1);
personas.addItem(persona2);
}

public function obtener() : void
{
if(personas.length>Number(nro.text) && Number(nro.text)>=0)
{
var auxPersona : Persona = Persona(personas.getItemAt(Number(nro.text)));

labelApellido.text = auxPersona.apellido;
labelCedula.text = auxPersona.cedula;
labelNombre.text = auxPersona.nombre;
}
else
{
Alert.show('El indice excede el numero de filas o es negativo, recuerda que se empieza por el numero 0');
}

}

public function filaSeleccionada() : void
{
if(dg.selectedItem) nro.text = dg.selectedIndex.toString();
else Alert.show("Debes seleccionar un item");
}
]]>
</mx:Script>
<mx:DataGrid id="dg" x="10" y="10" dataProvider="{personas}">
<mx:columns>
<mx:DataGridColumn headerText="Nombre" dataField="nombre"/>
<mx:DataGridColumn headerText="Apellido" dataField="apellido"/>
<mx:DataGridColumn headerText="Cedula" dataField="cedula"/>
</mx:columns>
</mx:DataGrid>
<mx:TextInput id="nro" x="10" y="195" width="41"/>
<mx:Button x="59" y="195" label="Obtener" click="obtener()"/>
<mx:Label x="10" y="169" text="¿Qué fila deseas obtener?"/>
<mx:Canvas x="10" y="225" width="287" height="96" backgroundColor="#FFFFFF">
<mx:Label x="10" y="10" text="Nombre"/>
<mx:Label x="10" y="36" text="Apellido"/>
<mx:Label x="10" y="62" text="Cédula"/>
<mx:Label id="labelNombre" x="62" y="10" text="No definido"/>
<mx:Label id="labelApellido" x="62" y="36" text="No definido"/>
<mx:Label id="labelCedula" x="62" y="62" text="No definido"/>
</mx:Canvas>
<mx:Button x="140" y="195" label="La fila seleccionada" width="157" click="filaSeleccionada()"/>
</mx:Application>

El ejemplo en funcionamiento luce asi:

Video tutorial Creacion de un componente Flex

2009-02-02T22:19:00.015-04:30

En este tutorial voy a explicar los principios básicos a seguir para la creación de un componete flex. Para lograr esto vamos a crear un componente que cotenga un rectangulo que se mueva. Cada vez que este componente sea agregado a una aplicacion flex, entonces la aplciación tendrá un cuadrado que se mueva hacia la derecha. Por mas inutil que resulte este componente, me parece perfecto ejemplo didáctico. De todas maneras próximamente prometo crear componentes mas utiles y explicar como los hice.

Para empezar el tutorial debemos entender los conceptos básicos que estan presentes en todos los componentes flex, es decir, en todas las clases de flex que heredan de la clase UIComponent (que es el componente mas básico).

Parte I

Parte II

La clase UIComponente propone 5 métodos fundamentales a utilizar:

contructor: Este metodo se llama de primero en todos los componentes flex, lleva el mismo nombre que la clase que se esta creando. Permite inicializar variables entre otras coas.
createChildren: Este metodo se utiliza para agregar hijos al componente, todos los componentes tienen una lista de hijos dentro de si, todos estos hijos son actualizados por otros métodos como updateDisplayList, para que un objeto pueda ser hijo de un componente debe heredar de la clase DisplayObject. Este metodo solo se ejecuta una vez al inicializarse el componente. Los hijos que se quieran agregar después deben agregarse en otros segmentos de código.
commitProperties: Este metodo se invoca para definir o actualizar las propiedades del componente. Se puede ejecutar varias veces, y siempre se ejecuta la rimera vez justo despues del metodo createChildren.
measure: Este metodo se utiliza para definir el tamaño del componente, cada vez que flex no sabe que tamaño tiene el componente entra en este método. Es importante saber que si se define un tamaño explicito (width y height) al componente entonces flex no entrará mas en este método.
updateDisplayList: Este método se encarga de pintar el componente, en este lugar se ejecutan todas las sentencias de coódigo que tengan que ver con la visualizacion del componente. Tambien se ejecuta muchas veces.

Cuando un componente es creado por primera vez por flex todos estos metodos se ejecutan en el siguiente orden:

Es importante saber que estos tres últimos métodos mencionados no se pueden invocar directamente, si queremos llamarlos debemos utilizar unas funciones pensadas para eso:

La razón de no llamar a estos métodos directamente es porque el framewor de flex debe llamarlos cuando lo considere pertinente, es decir, con los métodos invalidateProperties, invalidateSize e invalidateDisplayList del LayoutManager nosotros le decimos a flesx que porfavor los llame, a partir de ese momento flex esperará el momento adecuado para llamarlos. Esto debemos tenerlo siempre en cuanta para que no valla a darnos problemas en un futuro.

Creando nuestro componente.

Recuerden que el componente que vamos a crear se encargará de dibujar un rectangulo e irlo moviendo hacia la derecha. Para crear el componente vamos a agregar una nueva actionScript Class que llamaremos MyFirstComponent.as donde colocaremos el siguiente código:
Código MyFirstComponent.as


package com.view
{
import flash.events.TimerEvent;
import flash.utils.Timer;

import mx.core.UIComponent;
import mx.skins.ProgrammaticSkin;

 public class MyFirstComponent extends UIComponent
{
/*
Defino las variables que voy a utilizar en este componente.
*/
private var bloque : ProgrammaticSkin;
private var _timer : Timer = new Timer(50);
private var procesarBloque : Boolean = false;

public function MyFirstComponent()
{
super();
trace("constructor");
/*
Empiezo el timer y defino un handler llamado pintar para el evento
TimerEvent.TIMER que es disparado por el timer cada 50 miliseg.

*/
_timer.addEventListener(TimerEvent.TIMER,pintar);
_timer.start();
}

override protected function createChildren() : void
{
super.createChildren();
/*
Creo un ProgrammaticSkin y lo agrego a la lista de hijos del
componente.
*/
bloque = new ProgrammaticSkin();
this.addChild(bloque);

trace("createChildren");
}

/*
Utilizamos este metodo para cambiar el tamaño de nuestro componente
*/
override protected function measure() : void
{
super.measure();
trace("measure");

measuredWidth += 30;
measuredHeight += 30;

}

 override protected function commitProperties() : void
{
super.commitProperties();
trace("commitProperties");

/*
Debemos asegurarnos de que "bloque" este creado.
*/
if(bloque)
{
//Solo queremos aumentar la coordenada x de "bloque" si es menor a 100.
if(bloque.x<100) procesarBloque = true;
else procesarBloque = false;

/*
Esta condicional nos permite restringir los bloques que deseamos que sean procesados
esto se puede usar para mejorar el rendimiento del componente ya que de esta manera
podemos controlar la ejecucion de las porciones de codigo, no se debe ejecutar la
porcion que no sea necesaria.
*/
if(procesarBloque)
{
bloque.x++;
}
}

}

 override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

trace("updateDisplayList");

/*
En este punto pintamos nuestro bloque con el el ancho y alto de 200.
es importante dear de pintar a "bloque si no han ocurrido modificaciones de sus propiedads,
para eso usamos la bandera "procesarBloque" que tambien la utilizamos en el commmitproperties
*/
if(procesarBloque)
{
//bloque.graphics.clear();
bloque.graphics.lineStyle(1,0x000000,1);
bloque.graphics.beginFill(Math.random() * 20000000, 1);
bloque.graphics.moveTo(unscaledWidth,unscaledHeight);
bloque.graphics.lineTo(unscaledWidth,0);
bloque.graphics.lineTo(0,0);
bloque.graphics.lineTo(0,unscaledHeight);
}

 }

/*
Esta funcion se llama cada 50 milisegundos.
*/
public function pintar(e : TimerEvent) : void
{
//Le digo a flex que cuando considere pertinente puede hacer
//un llamado a la funcion "commitProperties".
this.invalidateProperties();
this.invalidateDisplayList();
this.invalidateSize();

 }
}
}

Las variable bloque será donde pintaremos todo nuestro cuadrado, un ProgrammaticSkin es una clase muy liviana que permite utilizar shapes sobre ellas, es decir, pintar lineas y rellenarlas.

La variable _timer se encargará de hacer una llamada a las funciones invalidateProperties, invalidateSize e invalidateDisplayList cada 50 milisegundos para que el cuadrado pintado se refresque visualmente y para que se le modifique su tamaño y propiedades.

La variable procesarBloque se definió para restringir los bloques de codigo que seran ejecutados cada vez que se llame al método commitproperties y updateDisplayList (ya que como estos métodos los vamos a llamar frecuentemente, es mejor que no se ejecute todo el codigo que ellos contienen constantemente.).

En el método create children debemos instanciar y agregar el ProgrammaticSkin que definimos ("bloque") al componente (para que pueda ser visualizado).


override protected function createChildren() : void
{
   super.createChildren();
/*
Creo un ProgrammaticSkin y lo agrego a la lista de hijos del
componente.
*/
bloque = new ProgrammaticSkin();
this.addChild(bloque);

trace("createChildren");
}

En el método commitProperties se encargará de aumentar la propiedad "x" de la variable "bloque" para que el cuadradro que esta represente se mueva hacia la derecha.


  override protected function commitProperties() : void 
  {
      super.commitProperties();
      trace("commitProperties");
      
      /*
       Debemos asegurarnos de que "bloque" este creado.
      */
      if(bloque)
    {
     //Solo queremos aumentar la coordenada x de "bloque" si es menor a 100.
     if(bloque.x<100) procesarBloque = true;
     else procesarBloque = false;
     
     /*
        Esta condicional nos permite restringir los bloques que deseamos que sean procesados
        esto se puede usar para mejorar el rendimiento del componente ya que de esta manera
        podemos controlar la ejecucion de las porciones de codigo, no se debe ejecutar la
        porcion que no sea necesaria.
       */
     if(procesarBloque)
       {
        bloque.x++; 
       }
    }
      
  }

El metodo updateDisplayList se encargara de volver a pintar el cuadrado ahora que esta un podo mas a la derecha (porque commitProperties lo movio hacia la derecha.).


override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    trace("updateDisplayList");

/*
En este punto pintamos nuestro bloque con el el ancho y alto de 200.
es importante dear de pintar a "bloque si no han ocurrido modificaciones de sus propiedads,para eso usamos la bandera "procesarBloque" que tambien la utilizamos en el commmitproperties
*/
   if(procesarBloque)
  {
    //bloque.graphics.clear();
 bloque.graphics.lineStyle(1,0x000000,1);
 bloque.graphics.beginFill(Math.random() * 20000000, 1);
 bloque.graphics.moveTo(unscaledWidth,unscaledHeight);
 bloque.graphics.lineTo(unscaledWidth,0);
 bloque.graphics.lineTo(0,0);
 bloque.graphics.lineTo(0,unscaledHeight);
  }

}

El metodo measure le da el tamaño inicial al componente.


override protected function measure() : void
{
    super.measure();
trace("measure");

    measuredWidth += 30;
    measuredHeight += 30;

}

Luego de crear todos estos metodos debemos ejecutar la aplicacion en modo debugger (para que veamos lo que va arrojando la funcion trace).

Espero que les haya servido este tutorial, cualquier duda que tengan pueden escribirme al mail aalejo@gmail.com o dejar un comentario en la parte de abajo de esta página.

Ejemplo

Syntax Highlighter - Publicando ejemplos de codigos

2009-02-02T14:07:00.020-04:30

Para publicar ejemplos de códigos en una página web (o en un blog como este), es necesario realizar una serie de pasos para evitar que el navegador web los interprete (en caso de ser html) o que elimine pequeños estractos creyendo que debe interpretarlos.

Por otro lado, se pierde mucho la legibilidad del código como consecuencia de una pérdida de la identación (los espacios, tabs, etc.). Como yo siempre he sido partidario de hacer mis ejemplos lo mas entendibles que pueda, no estaba contento con la solución que habia resuelto para publicar ejemplos de códigos hasta la fecha, y estaba buscando como loco una solución que me coloreara los codigos (tal cual como lo hace DreamWeaver, Visual Studio, Eclipse, etc.), que me mantiviera la identacion y que me enumerara las lineas.

Despues de buscar por casi 6 meses ¡¡¡Lo consegui!!! todo el problema era colocar las palabras correctas en google (como siempre), en este caso habia que colocar "Syntax Highlighter" y daríamos con la solución.

Para que vean la diferencia les voy a colocar un ejemplo de como estaba publicando los ejemplos hasta hoy y de como los voy a publicar de aqui en adelante:

Códigos hasta el dia de hoy :S

<?php
function sumar($a,$b)
{
return $a+$b;
}

function restar($a,$b)
{
return $a-$b;
}

echo "La suma es: " . sumar(2,3) . "</br>";
echo "La resta es: " . restar(2,3);

?>

Códigos a partir de hoy :)


<?php
function sumar($a,$b)
{
return $a+$b;
}

function restar($a,$b)
{
return $a-$b;
}

echo "La suma es: " . sumar(2,3) . "</br>";
echo "La resta es: " . restar(2,3);

?>

Como pueden ver hay una gran diferencia ademas de que ahora existe el boton para copiar el codigo de una sola vez sin tener que estar seleccionandolo. Espero que les guste porque todo es para que sea mas entendible. Ahora voy a explicar como instalar este plugin de blogger para los que quieran publicar codigos ejemplos como yo.

Instalacion de Syntax Highlighter para Blogger (Blogspot)

Son unos pasos muy basicos:

Ir a esta pagina y hacer click en el botón "Add to Blogger".

Serán redireccionados a bloger y deberán introducir el nombre del plugin, yo lo deje vacio para que no apareciera visualmente en el blog, únicamente me interesaba que el codigo javascript se ejecutara dentro de la pagina (y para eso hay que agregarlo al blog).

De ahora en adelante pueden publicar códigos siempre que los coloquen dentro de los siguientes tags:



<pre name="code" class="php">
... tu codigo transformado
a caracteres que no sean interpretados
por tu navegador va aqui...
</pre>

Es importante cambiar el atributo "class" por el nombre del lenguaje que estemos utilizando, en la siguiente tabla se pueden conocer todos los alias de los lenguajes soportados:

Por último es bueno saber que podemos configurar algunas opciones mas como si queremos un botón para expandir y contraer el bloque de codigo, el numero de line por el que deseamos empezar, etc. Para eso entramos a la pagina donde explican la configuracion.
Bueno eso es todo amigos, les dejo un ejemplo de uso de la librería fuera de blogger, es decir, en mi máquina, para hacer esto no tienen mas que importar los javascript y css que vienen dentro de los directorios Scripts y Styles del archivo
SyntaxHighlighter_1.5.1.rar.
Espero que les haya sido de utilidad y cualquier duda no duden en escribirme a aalejo@gmail.com.

SyntaxHighlighter_1.5.1.rar.

Video tutorial WebService basico con php

2009-02-01T21:25:00.024-04:30

En la version 5.0 de PHP (Desconosco si en las anteriores tambien, pero no lo creo) existe una libreria llamada php_soap.dll, esta librería permite, realizar llamadas a metodos y objetos remotos utilizando el protocolo SOAP.

En este ejemplo veremos de una manera muy sencilla como invocar nuestros dos primeros metodos remotos Suma (Que dado dos numero devuelve la suma de ellos) y Resta (que dados dos numeros devuelve la resta de ellos).

Parte I

Parte II

Para lograr esto debemos cumplir con los siguientes pasos:

Asegurarnos de tener activada la libreria php_soap.dll.
Definir el WSDL del Webservice que vamos a consumir.
Implementar el lado del servidor, donde codificaremos y registraremos las dos funciones.
Deinir el lado del cliente donde invocaremos las dos funciones.

Activando la libreria php_soap.dll

Para hacer esto nos vamos al archivo de configuracion de php llamado php.ini, en este archivo vamos a buscar el php_soap.dll y verificamos que no este comentado, es decir, que no tenga un ";" punto y coma por delante. Algo asi:

;extension=php_shmop.dll
;extension=php_snmp.dll
extension=php_soap.dll
;extension=php_sockets.dll
extension=php_sqlite.dll

Definir el WSDL

Para aprender mejor como definir tu propio WSDL te recomiendo el siguiente artículo de Desarrolloweb.com. Les recomiendo tener este archivo alojado en el servidor donde se encontrará la funcion. En nuestro caso el WSDL quedará de la siguiente manera:

Código scramble.wsdl

<?xml version ='1.0' encoding ='UTF-8' ?>
<definitions name='Scramble'
targetNamespace='http://localhost/tutoriales/webservice/servidor/scramble.wdsl'
xmlns:tns='http://localhost/tutoriales/webservice/servidor/scramble.wdsl'
xmlns:soap='http://schemas.xmlsoap.org/wsdl/soap/'
xmlns='http://schemas.xmlsoap.org/wsdl/'> 
<message name='sumarRequest'>
<part name='symbol' type='xsd:string'/>
<part name='symbol2' type='xsd:string'/>
</message>
<message name='sumarResponse'>
<part name='Result' type='xsd:string'/>
</message>
<message name='restarRequest'>
<part name='symbol' type='xsd:string'/>
<part name='symbol2' type='xsd:string'/>
</message>
<message name='restarResponse'>
<part name='Result' type='xsd:string'/>
</message> 
<portType name='ScramblePortType'>
<operation name='sumar'>
<input message='tns:sumarRequest'/>
<output message='tns:sumarResponse'/>
</operation>
<operation name='restar'>
<input message='tns:restarRequest'/>
<output message='tns:restarResponse'/>
</operation>
</portType> 
<binding name='ScrambleBinding' type='tns:ScramblePortType'>
<soap:binding style='rpc'
transport='http://schemas.xmlsoap.org/soap/http'/>
<operation name='sumar'>
<soap:operation soapAction='urn:localhost-scramble#sumar'/>
<input>
<soap:body use='encoded' namespace='urn:localhost-scramble'
encodingStyle='http://schemas.xmlsoap.org/soap/encoding/'/>
</input>
<output>
<soap:body use='encoded' namespace='urn:localhost-scramble'
encodingStyle='http://schemas.xmlsoap.org/soap/encoding/'/>
</output>
</operation>
<operation name='restar'>
<soap:operation soapAction='urn:localhost-scramble#restar'/>
<input>
<soap:body use='encoded' namespace='urn:localhost-scramble'
encodingStyle='http://schemas.xmlsoap.org/soap/encoding/'/>
</input>
<output>
<soap:body use='encoded' namespace='urn:localhost-scramble'
encodingStyle='http://schemas.xmlsoap.org/soap/encoding/'/>
</output>
</operation>
</binding> 
<service name='ScrambleService'>
<port name='ScramblePort' binding='ScrambleBinding'>
<soap:address location='http://localhost/tutoriales/webservice/servidor/sumar.php'/>
</port>
</service>
</definitions>

El archivo scramble.wsdl debe tener el targetNamespace con la ubicacion de si mismo. Tambien debemos recordar colocar la direccion del archivo del servidor (que en este tutorial se llama sumar.php), esta direcicon se coloca en la seccion Service:

<service name="'ScrambleService'">
<port name="'ScramblePort'" binding="'ScrambleBinding'">
<soap:address location="'http://localhost/tutoriales/webservice/servidor/sumar.php'/">
</soap:address>
</port></service>

Implementando el lado del Servidor:

En este lado vamos a crear nuestras dos funciones Sumar y Restar:

function sumar($a,$b)
{
return $a+$b;
}

function restar($a,$b)
{
return $a-$b;
}

Tambien es necesario decirle al cache del SOAP cuales son las funciones de las que le hablamos en el WSDL, para eso colocaremos el siguiente codigo:

// turn off the wsdl cache
ini_set("soap.wsdl_cache_enabled", "0");

$server = new SoapServer("scramble.wsdl");

$server->addFunction("sumar");
$server->addFunction("restar");

$server->handle();

Al final tendremos un archivo llamado "sumar.php" con el siguiente codigo:

Código sumar.php

<?php
function sumar($a,$b)
{
return $a+$b;
}
function restar($a,$b)
{
return $a-$b;
}
// turn off the wsdl cache
ini_set("soap.wsdl_cache_enabled", "0");
$server = new SoapServer("scramble.wsdl");
$server->addFunction("sumar");
$server->addFunction("restar");
$server->handle();
?>

Definir el lado del Cliente

Para el cliente primero creamos un formulario donde se introduciran los dos numeros que deseamos sumar, luego (si ya se recibieron los dos numeros por el metodo POST) lo que tenemos que hacer es crear un objeto SoapClient diciendole la ubicacion de nuestro WSDL, luego podremos llamar a los metodos sumar y restar como si fueran metodos de este objeto. El codigo del archivo client.php nos queda de la siguiente manera:

Código client.php

<form id="form1" name="form1" method="post" action="">
<table width="23%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>a: </td>
<td><input name="a" type="text" id="a" size="5" /></td>
</tr>

<tr>
<td>b: </td>
<td><input name="b" type="text" id="b" size="5" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="button" id="button" value="Submit" /></td>
</tr>
</table>
</form>
<?php
if(isset($_POST['a']) && isset($_POST['b']))
{
// turn off the WSDL cache
ini_set("soap.wsdl_cache_enabled", "0");

$client = new SoapClient("http://ejemplos.net78.net/webservice/servidor/scramble.wsdl");

$a = $_POST['a'];
$b = $_POST['b'];

$resultado = $client->sumar($a,$b);
print("La suma de los numeros : $a + $b es:  $resultado <br>");

$resultado = $client->restar($a,$b);
print("La resta de los numeros : $a + $b es: $resultado");
}?>

Lamentablemente no puedo demostrar este ejemplo funcionando, ya que el hosting php con el que trabajo no tiene habilitada la libreria php_soap.dll. Por ende, solo les puedo dejar un link para descargar el ejemplo.

MouseOverMenu - Componente de Flex

2009-01-31T15:34:00.009-04:30

Despues de no publicar una entrada por mas de dos meses (Por razones de fuerza mayor, ya que me estaba graduando :) ) voy a empezar a publicar bastantes cosas que he venido aprendiendo y he venido trabajando para ustedes.

En este oportunidad decidí crear un componente de flex que permite colocar botones sobre otros componentes de flex cuando el usuario coloque el mouse sobre ellos, es decir, supongan que ustedes tienen un DataGrid de una lista de productos, si el usuario quiere agregar un nuevo producto tendrá que hacer click sobre un botón de agregar nuevo producto. Aqui es donde aparece la magia del componente, veamos el ejemplo:

El componente MouseOverMenu puede ser aplicado a cualquier objeto que herede de la clase DisplayObject y para utilizarlo solo debemos decirle en la propiedad dispatcherObject a que objeto se le va a plicar, en este caso cree un Datagrid llamado "personas".

Es muy importante tener en cuenta que el objetoMouseOverMenu debe ser instanciado siempre despues del objeto al que le va a aplicar, ya que de lo contrario dará un error.

Si un un botón es presionado un evento de tipo OptionClickedEvent es disparado, la propiedad optionClicked de este ecento contendrá el nombre del boton que fue presionado.

Configurando el componente

Para definir los botones del menu debemos pasale al componente un xml en la propiedad menuData que contenga lo siguiente:

nombre: Es el nombre del boton que se usará para diferenciar cual boton es precionado en el futuro.
icono: El url de la fotografia que se utilizará para representar el boton.
position: Puede ser Top, Bottom, Left o Right y dice la ubicacion del botón dentro sobre el componente dispatcherObject.
width: dice el ancho del botón.
height: dice el alto del botón.

El siguiente es un XML de configuracion:

<options>

 <option
   nombre="Agregar usuario"
   icono="http://aalejo.googlepages.com/add.png"
   position="Top"
   width="20"
   height="20"
   />

  <option
      nombre="Eliminar usuario"
     icono="http://aalejo.googlepages.com/delete2.gif"
     position="Top"
     width="20"
     height="20"
   />

  <option
      nombre="Modificar usuario"
      icono="http://aalejo.googlepages.com/Waterolor-Brush-48x48.png"
      position="Bottom"
      width="20"
      height="20"
   />
</options>

A continuación una aplicacion ejemplo, donde muestro la utilización del componente, tambien esta disponible su descarga junto con el código fuente del componente.

Código:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:component="org.component.*" borderColor="#FFFFFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" width="319" height="159">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.IList;
import org.events.OptionClickedEvent;
import mx.controls.Alert;

private var stockDataAC:ArrayCollection = new ArrayCollection( [
{ name: "Alejandro", phone: 2456798,  email: "alejandro@mail.com" },
{ name: "Emilio", phone: 4572164,  email: "emilio@mail.com" },
{ name: "Jose", phone: 7986435,  email: "jose@mail.com" },
{ name: "Ramon", phone: 1234567,  email: "ramon@mail.com" } ]);

public function clickHandler(e : OptionClickedEvent) : void
{
if(personas.selectedIndex>-1 && e.optionClicked=="Eliminar usuario") IList(stockDataAC).removeItemAt(personas.selectedIndex);
else
{
Alert.show("Hiciste click en: " + e.optionClicked);
}
}

public var menudata : XML = <options>
<option nombre="Agregar usuario" icono="http://aalejo.googlepages.com/add.png" position="Top" width="20" height="20"/>
<option nombre="Eliminar usuario" icono="http://aalejo.googlepages.com/delete2.gif" position="Top" width="20" height="20"/>
<option nombre="Modificar usuario" icono="http://aalejo.googlepages.com/Waterolor-Brush-48x48.png" position="Bottom" width="20" height="20"/>
</options>;
public var menudata2 : XML = <options>
<option nombre="Guardar Data Grid" icono="org/assets/floppy-48x48.png" position="bottom" width="48" height="48"/>                    </options>;
]]>
</mx:Script>

<mx:DataGrid x="0" y="0" id="personas" dataProvider="{stockDataAC}">
<mx:columns>
<mx:DataGridColumn headerText="name" dataField="name"/>
<mx:DataGridColumn headerText="phone" dataField="phone"/>
<mx:DataGridColumn headerText="email" dataField="email"/>
</mx:columns>
</mx:DataGrid>
<component:MouseOverMenu menuData="{menudata}" dispatcherObject="{personas}" optionClicked="clickHandler(event)"/>
</mx:Application>

Simple Galeria de imagenes con PHP

2008-12-24T03:01:00.015-04:30

En los ultimos dias estube buscando por internet una galeria de imagenes lo mas basica posible donde el usuario pudiera ver un conjunto de "vistas miniaturas" (preview) de las imagenes y seleccionar la que quisieran ver mas grande. Eso era todo.

En mi etapa de busqueda di con una libreria que hacia exactamente lo que yo queria, me parecio excelente, la pude conseguir en la pagina http://bolgallery.free.fr/. Esta libreria permite colocar una serie de imagenes en un directorio "images", a partir de estas imagenes la galeria genera las vistas en miniatura de las imagenes, ademas permite generar dos tipos de vistas miniatura que explicare mas adelante. Es muy facil de configurar e instalar.

Cuando vi esta galeria decidi realizarle unas mejoras para permitir el uso de multiples etiquetas sobre una foto, una base de datos para llevar estadisticas de la cantidad de veces que se ha visto una foto, subir las fotos remotamente, aplicar etiquetas, etc.

En resumen la galeria que mejore ofrece las siguientes funcionalidades:

Permite asignar nuevas o viejas etiquetas a una fotografia.
Permite agregar fotografias de manera remota y aplicarle las etiquetas dinamicamente.
Permite visualizar conjuntos de imagenes a partir de la combinacion de una o mas etiquetas de manera simultanea, colocando la variable "labels" en el URL de la pagina igualada a las etiquetas deseadas separadas por comas. Ej: migaleria.php?labels=etiqueta1,etiqueta2,etiqueta3
Genera dinamicamente las vistas previas de las fotografias subidas.
Las vistas previas generadas pueden ser de dos tipos: Version a escala de la fotografia a visualizar o recorte aleatorio de una porcion de la fotografia (definido por el webmaster).
Maneja estadisticas de las vistas o clicks que el usuario ha realizado para cad auna de las fotografias.
Autenticacion de usuario para permitir que solo los usuarios autorizados (aministradores) puedan modificar las fotos. Para aprender mas sobre esto puedes ir a mi tutorial de autenticación de usuario.

Instalacion de la galería

Para su utilización no hace falta mas que colocar la carpeta "galeria" en cualquier directorio del servidor, la carpeta llamada "images" será donde se ubicarán todas las imagenes agregadas.

Luego se procede a crear la base de datos y tablas con el script bd.sql ubicado en el directorio raiz de la galeria.

El directorio donde se encontraría ubicada la galeria quedaria con los archivos index.php, admin.php, bd.sql, leeme.txt y las siguientes carpetas:

- images.
- autenticación.
- galeria_de_fotos.

Explicacion de los directorios:

-Images: Debe tener todos los permisos de escritura. Donde se irán guardando todas las imagenes de la galeria, las vistas previas de guardarán automaticamente dentro de este directorio en una carpeta llamada bolGallery.

- Autenticación: contiene todo el modulo para la logica de seguridad. esta carpeta no debe ser modificada. Contiene el archivo registro.php que tiene el formulario para la creación de un nuevo usuario, es importante mantener esta pagina bien oculta (o eliminarla una vez creado el usuario administrador) para que nadie pueda registrarse y modificar, subir o eliminar las fotos.

- Galeria_de_fotos: contiene dos paginas importantes:

1) index.php: Es el front de la galeria de imagenes, es decir, la pagina que verán lo usuarios finales, los que visiten la galeria, puede ser modificado a placer siempre que se mantenga la llamada a la funcion bolGallery del archivo bolGallery.php. El siguiente es un ejemplo de una llamada:

        include("bolGallery.php");
if(isset($_GET['labels']))
{
  $array = split(",", $_GET['labels']);

  bolGallery("../images/",$array, 6, 150, 150,1);
}
else
bolGallery("../images/",null, 6, 150, 150,1);

La funcion bolGallery recive los siguientes parametros:

a) URL de el directorio donde se encuentran las imagnes: esto no debe modificarse.
b) tablas de referencia: No debe modificarse.
c) cantidad de columnas que se quiere que tenga la galeria.
d) el ancho en pixeles de las vistas previas de la galeria.
e) el alto en pixeles de las vistas previas de la galeria.
f) un booleano que es "true" si se desea colocar una vista previa en tamaño escala de la imagen o "false" si se desea un recorte aleatorio de una porcion de la fotografia.

2) admin.php: El modulo de administrador, esa página no se debe modificar.

Espero que todo les funcione correctamente, cualquier duda no duden en entrar a mi pagina enviarme un correo a: aalejo@gmail.com. Para ver un ejemplo de la galeria en funcionamiento puedes hacer click aqui. Recuerda crearte un usuario para poder modificar las imagenes.

Video Tutorial - Contador de usuarios online con PHP

2008-12-04T19:43:00.009-04:30

En este caso quiero seguir con la tana de contaores, en esta oportunia decidi implementar un contador de usuarios online, es decir, este contador nos puede decir con relativa certeza cuantos usuarios se encuentran navegando en nuestra página actualmente.

La implementacion de este contador decidi hacerla de dos maneras, con archivos de texto o con una base de datos MySQL. A todos los que lean este articulo, que no es mucha gente :( , les recomiendo ampliamente la opcion de la base de datos, pero como a veces es costoso alojar una pagina web en un servidor con MySQL, les dejo el ultimo recurso de implementar el contador con archivos de texto.

Para implementar el contador vamos a cumplir con dos premisas principales:

Borrar usuarios con registro obsoleto es nuestra primera accion, si ha pasado mucho tiempo sin dar señales de vida, entonces debemos eliminarlo de la lista hasta que vuelva a aparecer.
Registrar o actualizar usuario, todos los clientes que dan señales de vida son incluidos automaticamente en el archivo de texto o base de datos (Si el usuario ya existia entonces solo se actualiza la fecha).

Contador con archivos de texto
Primero vamos a implementar el contador con archivos de texto, vamos a crear una pagina llamada uactivos.php que va a contener el siguiente código:

Código uactivos.php

<?php

// Usuarios activos con PHP sin utilizar bases de datos 

//IP del usuario

$id = $_SERVER [ 'REMOTE_ADDR' ];

// Tiempo en segundos en que expira la sesión.

$fin_session = 600; 

//Archivo que contiene los usuarios y tiempo

$archivo = "usuarios.txt";

//Si el archivo no existe lo creo

if(!file_exists($archivo))

{

$a = fopen($archivo, "w");

fclose($a);

}

$arr = file($archivo);

$contenido = $id.":".time()." "; 

for ( $i = 0 ; $i < sizeof($arr) ; $i++ )

{

$tmp = explode(":",$arr[$i]);

if (( $tmp[0] != $id ) && (( time() - $tmp[1] ) < $fin_session ))

{

$contenido .= $id.":".time()." ";

} 

}

$fp = fopen($archivo,"w");

fputs($fp,$contenido);

fclose($fp);

$array = file($archivo); 

$USUARIOS_ACTIVOS = count($array); 

?>

<table width="74%" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><p>&nbsp;</p>

<p>Usuarios activos (online) con PHP.</p></td>

</tr>

<tr>

<td height="170" align="center" valign="top"><p align="left"><br />

<br />

<br />

<h1><?php echo "Hay ".$USUARIOS_ACTIVOS." usuarios activos";  ?></h1>

</p>

<p align="left">&nbsp;</p>

<p align="left"></p>

<p align="center">Alejandro Sánchez - <a href="http://internetdeveloping.blogspot.com/">http://internetdeveloping.blogspot.com/</a></p></td>

</tr>

</table>

Lo primero que hacemos es almacenar en una variable $ip la direccion del host (usuario) que esta accediendo a nuestra página, esto lo hacemos con una variable de servido que ya viene predefinida en PHP, $_SERVER [ 'REMOTE_ADDR' ]. Luego procedemos a decidir cuanto tiempo queremos que pase un usuario sin dar señales de vida (realizando acciones dentro de la pagina) para que lo consideremos como offline o inactivo, el tiempo que consideremos no debe ser ni muy grande ni muy pequeño, y por supuesto que va ajustado al tipo de pagina que nosotros estemos desarrollando ya que hay paginas donde los usuarios deben obligatoriamente estar actuando dentro de la pagina mientras hay otras paginas donde hay grandes lecturas o tutoriales que no requieren e mucha interaccion con el usuario. En este ejemplo decidi poner 600 segundos como un simple numero que me parecio sensato.

El siguiente paso es verificar si el archivo donde queremos almacenar los atos de los usuarios existe o si debemos crearlo, con la funcion file_exists() de PHP podemos averiguar si el archivo especificao existe. Esto lo hacemos con el siguiente coigo:

if(!file_exists($archivo))
{
$a = fopen($archivo, "w");
fclose($a);
}

La funcion file() nos permite leer todo el contenido de un archivo y almacenar cada line en una casilla diferente de un arreglo. En este caso, una nueva linea en el archivo representa un nuevo usuario en la pagina, por lo que esta funcion nos cae como anillo al dedo.

$arr = file($archivo);

Una vez que tenemos toda la informacion en el arreglo procedemos a recorrerlo realizano una division que transforma la lina de texto original en dos sub cadenas, el operador ":" es el encargado de marcar la separacion entre la primera y la segunda cadena de caracteres.

$tmp = explode(":",$arr[$i]);

El arreglo $tmp ahora contiene las dos subcadenas que representan lo sigueinte, la primera representa el IP de el usuario y la segunda el instante en el tiempo en que se registro, debemos verificar que no se ha cumplido su tiempo establecido para dar señales de vida, ya que de lo contrario debemos eliminarlo del archivo de texto.

Ahora procedemos a actualizar el archivo con los nuevos IP de usuarios y a imprimir pon pantalla la cantidad de usuarios en linea.

Contador con BD MySQL
Ahora procedemos a crear el contador con base de datos, la logica planteada sera practicamente la misma, son los detalles de carpinteria los que voy a explicar:

Script para la creacion de la tabla usuarios_activos.php

CREATE TABLE `usuarios_activos` (
`id` bigint(20) NOT NULL auto_increment,
`ip` varchar(11) NOT NULL,
`time` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
PRIMARY KEY  (`id`),
UNIQUE KEY `ip` (`ip`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3

Como en este caso estamos trabajando con una base de datos vamos a utilizar las funciones mysql_query, mysql_num_row y mysql_fetch_row.

Luego de registrar el IP y el tiempo en que expira la sesion, el siguiente paso es borrar de la BD todos los registros que tienen un tiempo mayor al tiempo de expiracion (desde que se registraron). Asi garantizamos que no hay ningun usuario obsoleto y podemos proceder a registrar el usuario actual (si es que el mismo no pertenede ya a la tabla de usuarios online), si el ya pertenece entonces le actualizo su hora de registro para que pueda ser considerado mas tiempo como usuario activo.

UActivo.php

<?php

require('conexion.php');

// Usuarios activos con PHP sin utilizar bases de datos 

//IP del usuario

$id = $_SERVER [ 'REMOTE_ADDR' ];

// Tiempo en segundos en que expira la sesión.

$fin_session = 600; 

mysql_query("DELETE FROM usuarios_activos WHERE time_to_sec(NOW())-time_to_sec(time) > ".$fin_session);

$results = mysql_query("SELECT * FROM usuarios_activos WHERE ip='".$id."'");

if(mysql_num_rows($results)==0)

{

mysql_query("INSERT INTO usuarios_activos VALUES('','".$id."',NOW())");

}

$results = mysql_query("SELECT count(*) FROM usuarios_activos WHERE ip='".$id."'");

$row = mysql_fetch_row($results);

?>

<table width="74%" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><p>&nbsp;</p>

<p>Hola mundo en PHP, el codigo en este lenguaje debe incluirse entre las etiquetas &lt;?php ?&gt; y para imprimir por pantalla debe usarse la funcion &quot;echo&quot; seguida de la variable, numero o string que se desea imprimir.</p></td>

</tr>

<tr>

<td height="170" align="center" valign="top"><p align="center"><br />

<br />

<br />

<span class="style6"><h1><?php echo "Hay ".$row[0]." usuarios activos";  ?></h1></span></p>

<p align="left">&nbsp;</p>

<p align="left"></p>

<p align="center">Alejandro Sánchez - http://internetdeveloping.blogspot.com/</p></td>

</tr>

</table>

Aqui les dejo un video tutorial sobre el tutorial que acabo de explicar (o intentar explicar), espero que les aclare mejor sobre el tema, cualquier pregunta no duden en preguntarme escribiendome a mi correo aalejo@gmail.com o por este mismo blog.
Parte 1 (Archivo de texto)

Parte 2 (MySQL)

Video Tutorial - Contador de visitas UNICAS con PHP

2008-12-04T18:38:00.011-04:30

Continuando con la tanda de contadores, he decidido publicar la implementacion de un contador de visitas únicas. "Visita unica" significa que un usuario que entra a la pagina web por segunda, tercera o cuarta vez, etc. No es tomado en cuenta por el contador, ya que la primera vez que el usuario ingreso ya fue registrada su visita.

Este tipo de contadores permite acercarnos mucho mas a la realidad actual de nuestra pagina web, ya que en el caso de los contadores simples, la informacion que estos registran no puede ser confiable dado que pueden ocurrir recargas de paginas, visitas repetidas, etc. Y estas no son diferenciadas por los contadores estandar.

Para empezar el tutorial debemos crear una BD en MySQL llamada "contador_visitas_unicas", en esa base de atos vamos a agregar la siguiente tabla:

CREATE TABLE `visitas` (
`id` int(4) unsigned NOT NULL auto_increment,
`direccion_ip` varchar(16) default NULL,
`fecha` date NOT NULL default '0000-00-00',
PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=18 ;

Como pueden ver, la tabla contiene tres campos: ID, Direccion IP y Fecha. Vamos a enfocarnos en los ultimos dos datos, dado que el primero no es realmente necesario. En el campo Direccion IP de esta tabla, es donde vamos a almacenar el identificador unico de cada computadora (su IP).

Tambien vamos a usar una columna llamada "Fecha" donde vamos a registrar el dia en que fue almacenada la ip, ya que las visitas unicas son por dia, si el ultimo registro fue hace mas de un dia, entonces podemos volver a regstrarlo.

Debemos entonces conectarnos a la base de datos, para eso vamos a crear un archivo llamado conexion.php que vamos a importar a la página con la funcion "require()" donde estemos desarrollando y necesitemos conexion con la base de datos:

Código conexion.php



<?php

/* conexion ****************/

// conectamos al servidor MySQL

$link = mysql_connect('localhost', 'root', '');

if(!$link) {

die("Error al intentar conectar: ".mysql_error());

}

// seleccionamos la base de datos

$db_link = mysql_select_db('contador_visitas_unicas', $link);

if(!$db_link) {

die('Error al intentar seleccionar la base de datos'. mysql_error());

}

/* fin conexion ************/

?>

Una vez realizada la conexion, debemos crear el archivo "contador.php", en este archivo esta toda la logica de la página:

Código conexion.php

<?php

//Sript hecho por Alejandro Sanchez

//www.internetdeveloping.blogspot.com

//Me conecto a la BD

require('conexion.php');

//Devuelve el numero de visitas a partir de una fecha en especifico

function contarVisitas($aniodesde, $mesdesde, $diadesde )

{

$sql="select count(*) from visitas

where fecha >= '$aniodesde-$mesdesde-$diadesde'";

$result= mysql_query($sql);

if($row = mysql_fetch_array($result))

{

return $row[0];

}

else

return(0);

}

//Imprime todas las visitas

function imprimirVisitas()

{

$sql="select direccion_ip, fecha from visitas";

$result= mysql_query($sql);

while($row = mysql_fetch_row($result))

{

echo "fecha: " . $row[1] . " | Direccion ip ---> " . $row[0] . "<br>";

}

}

//Esta funcion solo registra una visita si ese mismo dia el usuario no ha entrado ala pagina

function registrarVisita($IDUSER)

{

/* --------------------------------------------------

Primero hacemos una consulta para ver si ese mismo

usuario ya está registrado el día de hoy.

------------------------------------------------- */

$sql="select * from visitas

where direccion_ip='$IDUSER'

and fecha=CURDATE()";

 $result= mysql_query($sql);



if(mysql_num_rows($result)==0) // Registrar la visita

{

$sql="INSERT INTO visitas VALUES(NULL,'$IDUSER',CURDATE())";



mysql_query($sql);

}

}

 registrarVisita($_SERVER [ 'REMOTE_ADDR' ]);

?>

<style type="text/css">

<!--

.style6 {font-size: 24px;

font-family: Georgia, "Times New Roman", Times, serif;

font-weight: bold;

}

-->

</style>

<table width="74%" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td><p>&nbsp;</p>

<p>Contador de visitas unicas, los visitantes repetidos seran ignorados, hasta el dia siguietne.</p></td>

</tr>

<tr>

<td height="170" align="center" valign="middle"><p align="left"><br />

<br />

</p>

<?php

echo "Hasta ahora haz recibido un total de ".contarVisitas(2007, 10, 03 )." visitas unicas por dia";

echo "<BR><BR>Detalles de visitas: <br>";

imprimirVisitas();

?>

<p align="left"></p>

<p align="center">Alejandro Sánchez - <a href="http://internetdeveloping.blogspot.com/">http://internetdeveloping.blogspot.com/</a></p></td>

</tr>

</table>

En este archivo podemos destacar principalmente tres funciones:

contarVisitas(Año, Mes, Dia), recibe una fecha y devuelve todas las visitas unicas que han habido en la página desde esa fecha:

Para realizar esa consulta debemos utilizar las funciones mysql_query y mysql_fetch_array que nos proporciona el framework de PHP.

imprimirVisitas() Imprime el IP y la fecha de todas las visitas unicas que ha tenido la pagina hasta la fecha.

registrarVisita(Direccion IP), esta es la funcion mas importante, primero realiza una consulta en la base de datos sobre el usuario con la IP proporcionada en los parametros de la funcion y cuya fecha sea del mismo dia que hoy. Si el resultado de esta consulta es vacio entonces se procede a insertar al usuario, de lo contrario no se hace nada, porque ya el usuario fue registrado en otra visita anterior en este dia.

A continuación les dejo un video tutorial con todo lo que acabo de explicar durante este tutorial, cualquier duda no duden en escribir! estamos para servir! :) aalejo@gmail.com.

Tambien les dejo el codigo fuente y un ejemplo funcionando: