Ahora bien, si puedes usar AS3 para hacer todo lo que puede hacer MXML entonces ¿cuál es su razón de ser? Usualmente es más fácil es mucho más fácil seguir o entender una interfaz de usuario descrita usando un lenguaje basado en XML que un lenguaje imperativo. Y esto se traduce en menos código a escribir para una interfaz de usuario. También es mucho más fácil construir herramientas para lenguajes declarativos que para lenguajes imperativos. Miren en “Hola mundo!” implementado usando MXML:

<mx:Label text="Hola Mundo" fontsize="14" color="red" x="100" y="50"/>

Sample01.mxml

En este código, Usé un componente Flex llamado Label para mostrar un texto en la pantalla. Especifiqué su atributo text con el texto que deseo mostrar. Además, quice personalizar (un poco) la apatiencia y su posición en la pantalla. Para esto utilicé los atributos fontSize, color, x, e y. Definitivamente es mucho más sencillo de entender y seguir.

Ahora, consideremos el mismo ejemplo implementado usando AS3

import mx.controls.Label;
private var ml:Label=new Label();
private function createTxt01():void{
ml.text="Hola Mundo!";
ml.x=100;
ml.y=50;
ml.setStyle('fontSize',14);
ml.setStyle('color','red');
addChild(ml);
}
override protected function commitProperties():void
{
super.commitProperties();
createTxt01();
}

Demo02.mxml

Tenemos siete líneas de código que hacen lo que MXML hace con tansolo una etiqueta y algunos atributos! Ahora imaginemos que tenemos una aplicación real, tendremos una gran cantidad de controles, agrupados quizá en diferentes contenedores. Es más fácil mantener código escrito en MXML que cientos de líneas de AS3.

Aunque se puede usar MXML para describir una aplicación, no se puede usar para implementar la lógica de negocio. Aquí es necesario AS3.

Las aplicaciones Flex corren en el Flash Player, y el Flash Player entiende solo AS2 y AS3. Esto significa que cualquier código MXML que se escriba para una aplicación deberá ser transformado por el compilador MXML en AS3. Este código es transformado por el compilador en código bytecode (un archivo SWF) que puede ser comprendido por el Flash Player.

Así, dentrás de casi todo componente MXML hay un clase AS3 (en realidad hay algunos tags MXML que no tienen una clase AS, tales como Script y Model). Por ejemplo aquí tenemos una porción de la clase Label:

public class Label extends UIComponent
implements IDataRenderer, IDropInListItemRenderer,
IListItemRenderer, IFontContextComponent
{
/**
*  Constructor.
*/
public function Label()
{
super();
// this is so the UITextField we contain can be read by a screen-reader
tabChildren = true;
}
/**
*  @private
*  Flag that will block default data/listData behavior.
*/
private var textSet:Boolean;
...

En cualquier aplicación Flex tendremos por lo menos un archivo MXML, el cual es la aplicación principal. Por ejemplo, aqui esta código completo para la aplicación “Hola Mundo!”:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Label text="Hello World!" fontSize="14" color="red" x="100" y="50"/>
</mx:Application>

El nodo raíz debe ser siempre Application, y aquí es donde los espacios de nombres (namespaces) son definidos. En este caso solo tenemos un espacio de nombre para el lenguaje MXML y componentes Flex: mx. (El código abajo está en Flex3, en Flex4 hay diferencias menores al declarar los espacios de nombres).

Si se escribe componentes personalizados propios, se tendrá que agregar un espacio de nombre para ellos. Aquí, por ejemplo, declaro un segundo namespace para referenciar a todos los componentes creador (en este ejemplo estoy usando un componente label personalizado llamado MyCustomLabel):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
<mx:Label text="Hello"/>
<local:MyCustomLabel text="world!"/>
</mx:Application>

Hasta aquí me imagino que se preguntarán como se manejan diferentes paginas en una aplicación Flex. Para un site HTML, direrentes estados usualmente son implementados en distintas páginas. Una aplicación Flex es más parecida a una aplicación de escritorio. Esto quiere decir que se puede usar solo un archivo MXML, y mostrar en esta ágin los diferentes estados de la aplicación. Flex ofrece un numero de maneras para hacerlo, desde componentes Flex como Acordiones, Esquema de Tabs, Apariencia tipo tarjeta, a módulos Flex.

Hemos visto que el código MXML puede ser usado para definir la apariencia de la aplicación. Pero también es posible usarlo para crear componentes personalizados extendiendo otros ya existentes. Veamos un ejemplo. Suponiendo que tenemos una aplicación con muchos formularios que tienes dos botones: Guardar y Cancelar. Echemosle un vistazo al código para el componente MXML personalizado (el código es creado dentro del archivo llamado FormButtons.mxml; todos los archivos MXML deben tener la extensión mxml):

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="150">
<mx:Button id="saveButton" label="Save"/>
<mx:Button id="cancelButton" label="Cancel"/>
</mx:HBox>

formButtons.mxml

Cuando se crea un componente personalizado, se puede escoger que componente extender (no se puede extender Application). Para este caso escogimos extender HBox(Caja horizontal), el cual es un contenedor que muestra todos los hijos en una sóla línea. Dentro del contenedor, se agregaron dos botones, uno para Guardar y otro para Cancelar. También se estableción el atributo id para cada uno. Se utiliza el valr del id como una referencia al objeto en otras partes del código. Esto es lo mismo que declarar una variable en código AS.

Ahora veamos como podremos usar este componente en una aplicación Flex:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" layout="horizontal">
<mx:TextInput width="150"/>
<local:FormButtons/>
</mx:Application>

Demo03.mxml

Abajo se puede apreciar como luce la aplicación:

Quizá parezca que solo podremos utilizar MXML para componentes visuales (los componentes que terminan siendo mostrados en pantalla). En realidad,no es cierto. Podemos tener MXML tags que representen datos (objetos que son usados para alamacenar datos). Abajo se puede ver un ejemplo de un componente Object generico que tienes una propiedad llamada name:

<mx:Object id="myObj" name="Mihai Corlan"/>

Tal como se mencionó antes, todos (bueno casi todos) los componentes que vienen con Flex tienen una clase ActionScript que implementa su apariencia visual (de ser así) y su lógica. Cuando se elige crear un componente personalizado (sea este visual o no) usando AS en lugar de MXML, tendremos que tener en cuenta que hay una restricción: el constructor de la clase debe estar estar habilitado para ser llamado sin argumentos (y si hubieran argumentos, estos deben tener valores por defecto).

traducción del artículo de Mihai Corlan

Antes de adentrarnos más en lo que es Flex, hagamos una pausa y revisemos las razones por las cuales Flex es tan interesante.

Las aplicaciones Web HTML tradicionales tienen una arquitectura Solicitud-Respuesta. El navegador hace una solicitud y el servidor envía una página como respuesta, y el ciclo se repite una y otra vez. HTML y CSS juntos son una magnífica elección para presentar la información, posiblemente la mejor de todas. Conforme han pasado los años, sin embargo esta arquitectura se fue más allá de tan sólo una presentación estática en una plataforma de aplicaciones. Haciendo uso de codificación, hemos conseguido crear páginas dinámicas y adaptar la respuesta del servidor a un requerimiento específico. Además, añadiendo DHTML y AJAX hemos dado una nueva vida a las páginas que nos proporciona el servidor web: el usuario puede interactuar con la página cargada y ver cambios en la vista sin necesidad de refrescar la página completa.

La tecnología ha seguido avanzando, aparecieron aplicaciones más complejas. Algunas aplicaciones web empezaron a replicar muchas funcionalidades vistas en aplicaciones de escritorio y al mismo tiempo conservaban la conveniencia de una aplicacion web (disponible en cualquier lugar en el que exista un navegador y una conexión a internet). Así versiones online de hojas de cálculo y editores de texto surgieron.

De cualquier modo, bajo una perspectiva de usabilidad, las aplicaciones en línea fueron menos “amistosas” que las aplicaciones de escritorio. Al mismo tiempo, para crear este tipo de complejas aplicaciones web se necesitan muchas habilidades y dominio de varias tecnologías(JavaScript, DHTML, CSS, librerías de AJAX, tecnología de lado servidor), así como experiencia en manejar la compatibilidad entre navegadores (crossbrowser code) para HTML/CSS/JS.

Así, en el año 2002, Macromedia ingresó el término RIA (Rich Internet Applications) para describir una nueva generación de aplicaciones que combinan los beneficios de las aplicaciones web con las ventajas de las aplicaciones de escritorio. La tecnología que hizo esto posible fue Flash Player.

Básicamente, si se desea crear una aplicación (no meramente un website o una página web), se puede hacer usando Flex. Algunas que simplemente no son posibles con HTML/JavaScript, otras que serían muy difíciles de implementar consistentemente y de forma universal para los navegadores. El Flash Player ofrece una de la mejores tecnologías gráficas,  está instalado en el 98% de las computadores que tienen una conexión a Internet disponible, y valora al sonido y los gráficos como ciudadanos de primera clase. Tiene soporte para microfonos y cámaras web, soporte para streaming y apilamiento de datos, excelente soporte para tipografía, y la lista podría seguir.

Haga una revisión de estas tres aplicaciones para tener una idea de lo que es posible con Flex:

• SumoPaint, una aplicación gratuita para edición de imágenes.
• Mindomo, una aplicación para mapas y estructuras de flujo.
• Times Reader, del diario “The Ney York Times”.

Con el tiempo, otras tecnologías han ingresado al espacio de RIAs. Además los avances de AJAX hicieron posibles aplicaciones como Gmail y Hojas de cálculo de GoogleDocuments, el día de hoy vemos Silverlight de Microsoft y JavaFX de Sun.

Cuando se desarrollan aplicaciones y la productividad es importante, se necesitan componentes, la posibilidad de minimizar el tiempo de desarrollo reusando código y por ultimo pero no menos importante, se necesita in IDE apropiado.

De este modo una respuesta podría ser: Flex es un entorno de código abierto que ayuda a los desarrolladores a crear rapidamente RIA’s (Rich Internet Applications) que corran con el Flash Player.

Demos por un momento un paso atrás y veamos que es Flex y como este se puede comparar con el estándar de programación HTML con un lenguaje como PHP.

En a Figura 1 podemos ver la estructura Web HTML tradicional y la basada en Flex.

Figura1

A la izquierda podemos observar un flujo PHP estándar. El navegador realiza una petición de una página web PHP, la cual se comunica con la base de datos y envía como HTML como respuesta para satisfacer la petición del cliente.

A la derecha está la estructura Flex. El cliente navega hacia la página, donde una aplicación Flex (SWF) carga la interfaz de usuario para el formulario. Esta aplicación Flex entonces usa XML para leer o escribir datos hacia las páginas PHP en el servidor. Estas nuevas páginas PHP se comunican con la base de datos y devuelve XML hacia la aplicación Flex para su muestra. Las líneas punteadas en list.html y list.swf indican que ambos archivos fueron generados por Adobe Flex Builder.

La ventaja de Flex es que su entorno ofrece una serie impresionante de herramientas que facilitan la construcción de interfaces de usuario con gran interactividad. Adicionalmente hay muchas ventajas en que PHP retorne XML en lugar de (o adicionalmente a) HTML. Por ejemplo:

Las aplicaciones de escritorio como Excel, consumen XML, haciendo más fácil el accedo de sus clientes a los datos.
Los clientes podrán manejar su información a voluntad con XML, en vez de tratar de leer HTML.
Se puede usar XSL para dar formato a los datos con la flexibilidad que este permite.

El Flex Builder construye aplicaciones Flex. La figura 2 muestra como Flex Builder toma los archivos MXML y ActionScript que define la interfaz y genera el archivo SWF de la aplicación así como la página HTML que lo aloja.

Figura 2

En Flex Builder se edita el archivo list.mxml. Cuando se corre la aplicación para probarla, Flex Builder compila el archivo list.mxml en un archivo SWF y contruye una página que contenga la referencia al mismo. Se puede probar la aplicación localmente y cuando este lista subir los archivos HTML y SWF a un ambiente de producción. Flex Builder también incluye un depurador que se puede utilizar para ir paso a paso a través del código Action Script que opera en la aplicación.

function Loadfunction(){
// aca le digo a que campo de texto voy a aplicar la validación
document.getElementById('demo').onkeydown=checkKeycode;
// aquí la función que captura el key, al final pregunta
// si está dentro del rango de los codes de números.
	function checkKeycode(e) {
		if(document.all) var keycode =event.keyCode;
		else var keycode = e.which ;
                //para el teclado numérico sobre el abecedario
                if (keycode > 47 && keycode < 58){ return false;}
                //para el teclado numérico de la derecha del teclado
                else if(keycode > 95 && keycode < 106){return false;}
}
}

Este código valida el ingreso de números, preguntando por el keycode, debe funcionar en Internet Explorer y Firefox.

Pero para hacer que se reproduzca apenas carguemos la página existe un pequeño truco.

Youtube te proporciona un código similar e este:

<object width="640" height="505">
<param name="movie" value="http://www.youtube-nocookie.com/v/flWP28y2cyw&hl=es&fs=1&color1=0xe1600f&color2=0xfebd01"></param>
<param
name="allowFullScreen" value="true"></param>
<param
name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube-nocookie.com/v/flWP28y2cyw&hl=es&fs=1&color1=0xe1600f&color2=0xfebd01" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="505"></embed>
</object>

<object width="640" height="505">
<param name="movie" value="http://www.youtube-
nocookie.com/v/flWP28y2cyw&hl=es&fs=1&color1=0xe1600f&color2=0xfebd01"></param>
<param
name="allowFullScreen" value="true"></param>
<param
name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube-nocookie.com/v/flWP28y2cyw&autoplay=1&hl=es&fs=1&color1=0xe1600f&color2=0xfebd01"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="640" height="505"></embed>
</object>

Listo, pruébalo y comenta los resultados.

Vamos que hemos visto muy buenos diseños con fondos atractivos y no sabemos como hacerlos sin tomarnos mucho tiempo. Aquí algunas sugerencias:

PatternCooler

Vaya! este sitio es el mejor que he visto en su tipo, aunque puede marearte la primera vez que entras, encontraras aquí utilidades variadas para crear patrones de fondo para html. Me comentan que les parece.

PixelKnete

Diseño de patrones de fondo html en base a puntos. Un gran recurso, resultan efectos psicodélicos, pero ojo, no busques el botón Selector de Color (no lo vas a encontrar, debes colocar el valor en hexadecimal) ni el botón Descargar Patrón (se supone que como experimentado WebDesigner sabes como obtener la imagen de fondo de un HTML right?).

StripeManía

Excelente para hacer esas bandas que tanto nos gustan, verticales, horizontales y oblicuas. Muy fácil de usar realmente y depende de ti si haces de esta una herramienta o un generador de “huachafería: En Perú le decimos así al mal gusto”. Ojo, no lo uses con Firefox, se comporta bien con Internet Explorer.

TartanMaker

Los resultados? Diseños de patrones de fondo HTML con bandas cruzadas, oblicuas o verticales-horizontales. Tienen más bien resultados conservadores.

BGPatterns

Excelente! Me gustó mucho. Navegas fácil y tienes pesatañas de Colorres, Imagen, Lienzo y Rotación. Variantes muy interesantes en la mayoría de ellas. Por ejemplo en imagen, puedes elegir entre varios diseños predeterminados, elegir el grado de opacidad de la imagen, la ubicación central o de extremos así como  escalar la imagen. En rotar, como es obvio puedes rotar la imagen, con un control visualmente agradable.

Algo más, regístrate y puedes guardar tus diseños de patrones si no deseas descargarlos o para que los tengas siempre en el site.

ColourLovers

Este sitio tiene muchas herramientas para patrones, puedes subir imagenes propias incluso. Además el site tiene la orientación Web 2.0 a Redes Sociales que incluye valoración y colaboración entre usuarios. Este site no es sólo para diseñar patrones, es un sitio completo lleno de recursos por descubrir (me incluyo).

BgMaker

Si amas el Px2Px (pixel to pixel) este sitio te permite decidir sobre un tablero de 12px por 12px (que puedes modificar) el color de cada uno de los puntos dentro de tu patrón. Vamos, que para esto debes necesitar algo muy específico y esta es la herramienta.

Buenos sitios, mejores diseñadores? para nada. Si no tienes el feel dentro de ti, ni la herramienta mejor te hace un buen diseñador.