Flex - Aplicaciones

Antes de comenzar a crear la aplicación "HelloWorld" real con Flash Builder, veamos cuáles son las partes reales de una aplicación Flex:

Una aplicación Flex consta de las siguientes cuatro partes importantes, de las cuales la última parte es opcional, pero las tres primeras son obligatorias.

  • Bibliotecas Flex Framework
  • Código del lado del cliente
  • Recursos públicos (HTML / JS / CSS)
  • Código del lado del servidor

Las ubicaciones de muestra de diferentes partes de una aplicación Flex típica como HelloWord serán las que se muestran a continuación:

Nombre Ubicación
Raíz del proyecto Hola Mundo/
Bibliotecas Flex Framework Construir camino
Recursos públicos plantilla-html
Código del lado del cliente table table-bordered / com / tutorialspoint / client
Código del lado del servidor table table-bordered / com / tutorialspoint / server

Proceso de construcción de la aplicación

Para empezar, la aplicación Flex requiere bibliotecas de marco Flex. Más tarde, Flash Builder agrega automáticamente las bibliotecas para construir la ruta.

Cuando construimos nuestro código usando Flash Builder, Flash Builder realizará las siguientes tareas:

  • Compila el código fuente en el archivo HelloWorld.swf.

  • Compila un HelloWorld.html (un archivo contenedor para el archivo swf) de un archivo index.template.html almacenado en la carpeta html-template

  • Copia los archivos HelloWorld.swf y HelloWorld.html en la carpeta de destino, bin-debug.

  • Copia swfobject.js, un código JavaScript responsable de cargar el archivo swf dinámicamente en HelloWorld.html en la carpeta de destino, bin-debug

  • Copia bibliotecas de marco en forma de archivo swf llamado frameworks_xxx.swf en la carpeta de destino, bin-debug

  • Copia otros módulos flexibles (archivos .swf como sparkskins_xxx.swf, textLayout_xxx.swf) en la carpeta de destino.

Proceso de lanzamiento de la aplicación

  • Abra el archivo HelloWorld.html disponible en la carpeta \ HelloWorld \ bin-debug en cualquier navegador web.

  • HelloWorld.swf se cargará automáticamente y la aplicación comenzará a ejecutarse.

Bibliotecas Flex Framework

A continuación se muestra un breve detalle sobre algunas bibliotecas de marcos importantes. Tenga en cuenta que las bibliotecas Flex se indican mediante la notación .swc

No Señor Nodos y descripción
1

playerglobal.swc

Esta biblioteca es específica de FlashPlayer instalado en su máquina y contiene métodos nativos compatibles con Flash Player.
2

textlayout.swc

Esta biblioteca admite las funciones relacionadas con el diseño de texto.
3

framework.swc

Esta es la biblioteca de marco flexible que contiene las características principales de Flex.
4

mx.swc

Esta biblioteca almacena las definiciones de los controles de la interfaz de usuario de mx.
5

charts.swc

Esta biblioteca admite los controles de gráficos.
6

spark.swc

Esta biblioteca almacena las definiciones de los controles de la interfaz de usuario de Spark.
7

sparkskins.swc

Esta biblioteca admite el diseño de controles de interfaz de usuario de Spark.

Código del lado del cliente

El código de la aplicación Flex se puede escribir en MXML tanto como ActionScript.

No Señor Tipo y descripción
1

MXML

MXML es un lenguaje de marcado XML que usaremos para diseñar componentes de interfaz de usuario. MXML se compila en ActionScript durante el proceso de compilación.
2

ActionScript

ActionScript es un lenguaje de programación procedimental orientado a objetos y se basa en la especificación de lenguaje borrador ECMAScript (ECMA-262) edición 4.

En Flex, podemos mezclar ActionScript y MXML, para hacer lo siguiente:

  • Diseñe los componentes de la interfaz de usuario mediante etiquetas MXML

  • Utilice MXML para definir de forma declarativa aspectos no visuales de una aplicación, como el acceso a fuentes de datos en el servidor.

  • Utilice MXML para crear enlaces de datos entre los componentes de la interfaz de usuario y las fuentes de datos en el servidor.

  • Utilice ActionScript para definir detectores de eventos dentro de los atributos de eventos MXML.

  • Agregue bloques de script usando el etiqueta.

  • Incluya archivos ActionScript externos.

  • Importe clases de ActionScript.

  • Cree componentes ActionScript.

Recursos públicos

Estos son archivos de ayuda a los que hace referencia la aplicación Flex, como la página HTML del host, CSS o imágenes ubicadas en la carpeta html-template. Contiene los siguientes archivos:

No Señor Nombre y descripción de archivo
1

index.template.html

Alojar página HTML, con marcadores de posición. Flash Builder utiliza esta plantilla para crear la página real HelloWorld.html con el archivo HelloWorld.swf.
2

playerProductInstall.swf

Esta es una utilidad flash para instalar Flash Player en modo expreso.
3

swfobject.js

Este es el JavaScript responsable de comprobar la versión de Flash Player instalada y de cargar HelloWorld.swf en la página HelloWorld.html.
4

html-template/history

Esta carpeta contiene recursos para la gestión del historial de la aplicación.

HelloWorld.mxml

Este es el código MXML / AS (ActionScript) real escrito implementando la lógica empresarial de la aplicación y que el compilador Flex traduce en un archivo SWF que será ejecutado por Flash Player en el navegador.

Una clase de entrada de HelloWorld de muestra será la siguiente:

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   
   <s:VGroup horizontalAlign = "center" width = "100%" height = "100%" 
      paddingTop = "100" gap = "50">
      <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" />
      <s:Button label = "Click Me!" id = "btnClickMe" 
         click = "btnClickMe_clickHandler(event)" />
   </s:VGroup>	
</s:Application>

La siguiente tabla proporciona la descripción de todas las etiquetas utilizadas en el script de código anterior.

No Señor Nodo y descripción
1

Application

Define el contenedor de la aplicación que siempre es la etiqueta raíz de una aplicación Flex.
2

Script

Contiene la lógica empresarial en lenguaje ActionScript.
3

VGroup

Define un contenedor de agrupación vertical que puede contener controles Flex UI en forma vertical.
4

Label

Representa un control de etiqueta, un componente de interfaz de usuario muy simple que muestra texto.
5

Button

Representa un control de botón, en el que se puede hacer clic para realizar alguna acción.

Código del lado del servidor

Esta es la parte del lado del servidor de su aplicación y es muy opcional. Si no está realizando ningún procesamiento de backend dentro de su aplicación, entonces no necesita esta parte, pero si se requiere algún procesamiento en el backend y su aplicación del lado del cliente interactúa con el servidor, entonces tendrá que desarrollar estos componentes.

En el siguiente capítulo, usaremos todos los conceptos mencionados anteriormente para crear un HelloWorld aplicación utilizando Flash Builder.