Flex - Guía rápida
¿Qué es Flex?
Flex es un potente marco de aplicaciones de código abierto que le permite crear aplicaciones tradicionales para navegadores, dispositivos móviles y computadoras de escritorio utilizando el mismo modelo de programación, herramienta y base de código.
Flex proporciona FLEX SDK que consta de la biblioteca de clases Flex (clases ActionScript), los compiladores Flex, el depurador, los lenguajes de programación MXML y ActionScript, y otras utilidades para crear aplicaciones de Internet enriquecidas (RIA) expresivas e interactivas
Flex se encarga de la interfaz de usuario (UI) o la funcionalidad del lado del cliente de una aplicación web. La funcionalidad del lado del servidor depende de los componentes del lado del servidor escritos en un lenguaje de programación tradicional (Java / PHP, etc.)
Una aplicación basada en Flex en realidad se entrega como un archivo SWF y se parece mucho a la parte HTML / JavaScript de una aplicación web tradicional.
La aplicación Flex se implementa como archivo (s) SWF más un contenedor HTML, el archivo (s) CSS y cualquier archivo de secuencia de comandos del lado del servidor (es decir, Java, .CFM, .PHP, etc.) en el servidor. Como las aplicaciones web tradicionales.
Estos recursos se entregan desde un servidor al navegador del cliente utilizando la forma habitual de solicitud / respuesta HTTP y Flash Player, que ejecuta la aplicación en un navegador.
Ventajas de Flex
Las aplicaciones Flex suelen estar basadas en Flash Player, que pueden acceder a las capacidades del dispositivo como GPS, cámara, base de datos local, acelerómetro de gráficos.
Las aplicaciones Flex pueden ejecutarse en dispositivos Android, BlackBerry Tablet OS y iOS.
Las aplicaciones Flex pueden ejecutarse tanto en navegadores como en escritorio.
Las aplicaciones Flex son independientes de la plataforma. La interfaz de usuario puede ser nativa de la plataforma o puede hacerse igual en cada plataforma.
Las aplicaciones Flex pueden interactuar con el servidor con todas las tecnologías principales del lado del servidor como Java, Spring, Hibernate, PHP, Ruby, .NET, Adobe ColdFusion y SAP utilizando estándares de la industria como REST, SOAP, JSON, JMS y AMF.
Flex Applications asegura una rica experiencia de usuario a través de la interacción intuitiva con la aplicación y la presentación de información en una interfaz visualmente más rica.
La aplicación Flex es una aplicación de una sola página en la que los estados pueden pasar de un estado a otro sin tener que buscar una página nueva del servidor o actualizar el navegador.
La aplicación Flex reduce la carga en el servidor en gran medida porque solo es necesario devolver la aplicación una vez, en lugar de una nueva página cada vez que el usuario cambia de vista.
Desventajas de Flex
Las aplicaciones Flex son aplicaciones de un solo subproceso, pero Flex proporciona un modelo de programación asincrónica para mitigar esta preocupación.
Flex está basado en ActionScript y XML. Aprender estos dos es imprescindible para trabajar en Flex.
Este tutorial lo guiará sobre cómo preparar un entorno de desarrollo para comenzar a trabajar con Adobe Flex Framework. Este tutorial también le enseñará cómo configurar JDK y Adobe Flash Builder en su máquina antes de configurar Flex Framework.
Requisitos del sistema
FLEX requiere JDK 1.4 o superior, por lo que el primer requisito es tener JDK instalado en su máquina.
| JDK | 1.4 o superior. |
|---|---|
| Memoria | Sin requisitos mínimos. |
| Espacio del disco | Sin requisitos mínimos. |
| Sistema operativo | Sin requisitos mínimos. |
Siga los pasos dados para configurar su entorno para comenzar con el desarrollo de aplicaciones Flex.
Paso 1: verificar la instalación de Java en su máquina
Ahora abra la consola y ejecute lo siguiente java mando.
| SO | Tarea | Mando |
|---|---|---|
| Ventanas | Abrir consola de comandos | c: \> java -version |
| Linux | Terminal de comando abierto | $ java -version |
| Mac | Terminal abierta | máquina: ~ joseph $ java -version |
Verifiquemos la salida para todos los sistemas operativos:
| SO | Salida generada |
|---|---|
| Ventanas | versión de Java "1.6.0_21" Entorno de ejecución Java (TM) SE (compilación 1.6.0_21-b07) VM de cliente Java HotSpot (TM) (compilación 17.0-b17, modo mixto, uso compartido) |
| Linux | versión de Java "1.6.0_21" Entorno de ejecución Java (TM) SE (compilación 1.6.0_21-b07) VM de cliente Java HotSpot (TM) (compilación 17.0-b17, modo mixto, uso compartido) |
| Mac | versión de Java "1.6.0_21" Entorno de ejecución Java (TM) SE (compilación 1.6.0_21-b07) Servidor VM Java HotSpot (TM) de 64 bits (compilación 17.0-b17, modo mixto, uso compartido) |
Paso 2: configuración del kit de desarrollo de Java (JDK)
Si no tiene Java instalado, puede instalar Java Software Development Kit (SDK) desde el sitio Java de Oracle, Java SE Downloads . Encontrará instrucciones para instalar JDK en archivos descargados, luego siga las instrucciones dadas para instalar y configurar la instalación. Finalmente, configure las variables de entorno PATH y JAVA_HOME para hacer referencia al directorio que contiene java y javac, normalmente java_install_dir / bin y java_install_dir respectivamente.
Selecciona el JAVA_HOMEvariable de entorno para apuntar a la ubicación del directorio base donde está instalado Java en su máquina. Por ejemplo
| SO | Salida |
|---|---|
| Ventanas | Establezca la variable de entorno JAVA_HOME en C: \ Archivos de programa \ Java \ jdk1.6.0_21 |
| Linux | exportar JAVA_HOME = / usr / local / java-current |
| Mac | exportar JAVA_HOME = / Library / Java / Home |
Agregue la ubicación del compilador de Java a la ruta del sistema.
| SO | Salida |
|---|---|
| Ventanas | Agregue la cadena;% JAVA_HOME% \ bin al final de la variable del sistema, Ruta. |
| Linux | export PATH =$PATH:$JAVA_HOME / bin / |
| Mac | no requerido |
Paso 3: configuración de Adobe Flash Builder 4.5
Todos los ejemplos de este tutorial se han escrito con la versión de prueba de Adobe Flash Builder 4.5 Profession IDE. Por lo tanto, le sugiero que tenga instalada la última versión de Adobe Flash Builder en su máquina. Además, verifique la compatibilidad del sistema operativo.
Para instalar Adobe Flash Builder IDE, descargue los últimos binarios de Adobe Flash Builder desde https://www.adobe.com/in/products/flash-builder.html. Una vez que descargó la instalación, descomprima la distribución binaria en una ubicación conveniente. Por ejemplo, en C: \ flash-builder en Windows, o / usr / local / flash-builder en Linux / Unix y finalmente establezca la variable PATH de manera apropiada.
Flash Builder se iniciará cuando ejecute los siguientes comandos en la máquina con Windows, o cuando simplemente haga doble clic en FlashBuilder.exe
%C:\flash-builder\FlashBuilder.exeFlash Builder se puede iniciar ejecutando los siguientes comandos en una máquina Unix (Solaris, Linux, etc.):
$/usr/local/flash-builder/FlashBuilderLa versión de prueba de Adobe Flash Builder se puede utilizar durante 60 días. Simplemente acepte los términos y condiciones y omita los pasos de registro inicial para continuar con el IDE. Para nuestro entendimiento, estamos usando la versión de prueba con fines didácticos.
Después de un inicio exitoso, si todo está bien, debería mostrar el siguiente resultado:
Adobe Flash Builder viene preconfigurado con FLEX SDK. Estamos usando FLEX SDK 4.5 en nuestros ejemplos que vienen incluidos con Adobe Flash Builder 4.5.
Paso 4: configurar Apache Tomcat
Puede descargar la última versión de Tomcat desde https://tomcat.apache.org/. Una vez que descargó la instalación, descomprima la distribución binaria en una ubicación conveniente. Por ejemplo, en C: \ apache-tomcat-6.0.33 en Windows, o /usr/local/apache-tomcat-6.0.33 en Linux / Unix y establezca la variable de entorno CATALINA_HOME apuntando a las ubicaciones de instalación.
Tomcat se puede iniciar ejecutando los siguientes comandos en la máquina con Windows, o simplemente puede hacer doble clic en startup.bat
%CATALINA_HOME%\bin\startup.bat
or
C:\apache-tomcat-6.0.33\bin\startup.batTomcat se puede iniciar ejecutando los siguientes comandos en una máquina UNIX (Solaris, Linux, etc.):
$CATALINA_HOME/bin/startup.sh
Or
/usr/local/apache-tomcat-6.0.33/bin/startup.shDespués de un inicio exitoso, las aplicaciones web predeterminadas incluidas con Tomcat estarán disponibles visitando http://localhost:8080/. Si todo está bien, entonces debería mostrar el siguiente resultado:
Puede encontrar más información sobre la configuración y ejecución de Tomcat en la documentación incluida aquí, así como en el sitio web de Tomcat: http://tomcat.apache.org
Tomcat se puede detener ejecutando los siguientes comandos en la máquina con Windows:
%CATALINA_HOME%\bin\shutdown
Or
C:\apache-tomcat-5.5.29\bin\shutdownTomcat se puede detener ejecutando los siguientes comandos en una máquina UNIX (Solaris, Linux, etc.):
$CATALINA_HOME/bin/shutdown.sh
Or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.shAntes 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 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
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 de plantilla html. 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 una 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 verificar 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, utilizaremos todos los conceptos mencionados anteriormente para crear un HelloWorld aplicación utilizando Flash Builder.
Usaremos Flash Builder 4.5 para crear aplicaciones Flex. Empecemos con un simpleHelloWorld solicitud.
Paso 1: crear proyecto
El primer paso es crear un proyecto Flex simple usando Flash Builder IDE. Iniciar el asistente de proyectos usando la opciónFile > New > Flex Project. Ahora nombre su proyecto como HelloWorld usando la ventana del asistente de la siguiente manera:
Seleccione el tipo de aplicación Web (runs in Adobe Flash Player). Sin embargo, si no está seleccionado, deje otros valores predeterminados como tales y haga clic en el botón Finalizar. Una vez que su proyecto se haya creado correctamente, tendrá el siguiente contenido en su Explorador de proyectos:
Aquí hay una breve descripción de todas las carpetas importantes:
| Carpeta | Ubicación |
|---|---|
| mesa bordeada de mesa | Archivos de código fuente (mxml / as classes). Hemos creado la estructura de carpetas com / tutorialspoint / client que contiene las clases java específicas del lado del cliente responsables de la visualización de la interfaz de usuario del cliente. |
| bin-debug | Esta es la parte de salida, representa la aplicación web implementable real. La carpeta del historial contiene archivos de soporte para la gestión del historial de la aplicación Flex. framework_xxx.swf, la aplicación flex debe utilizar los archivos de marco flexible. HelloWorld.html, archivo HTML contenedor / host para la aplicación flexible. HelloWorld.swf, nuestra aplicación basada en flex. playerProductInstall.swf, instalador rápido de Flash Player. spark_xxx.swf, biblioteca para soporte de componentes Spark. swfobject.js, JavaScript responsable de cargar HelloWorld.swf en HelloWorld.html. Comprueba la versión de Flash Player y pasa el parámetro de inicialización al archivo HelloWorld.swf. textLayout_xxx.swf, biblioteca para soporte de componentes de texto. |
| plantilla-html | Esto representa la aplicación web configurable. Flash Builder compila archivos de html-template a la carpeta bin-debug. La carpeta del historial contiene archivos de soporte para la gestión del historial de la aplicación Flex. index.template.html, contenedor / host Archivo HTML para aplicaciones flexibles con marcadores de posición para la configuración específica de Flash Builder. Se compila en HelloWorld.html en la carpeta bin-debug durante la compilación. playerProductInstall.swf, el instalador rápido de flash player se copia en la carpeta bin-debug durante la compilación. swfobject.js, JavaScript responsable de cargar HelloWorld.swf en HelloWorld.html. Comprueba la versión de Flash Player y pasa el parámetro de inicialización a HelloWorld. El archivo .swf se copia en la carpeta bindebug durante la compilación. |
Paso 2: crear un archivo CSS externo
Crea un archivo CSS styles.css para la página HTML de Wrapper en html-template carpeta.
html, body {
height:100%;
}
body {
margin:0;
padding:0;
overflow:auto;
text-align:center;
}
object:focus {
outline:none;
}
#flashContent {
display:none;
}
.pluginHeader {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#9b1204;
text-decoration:none;
font-weight:bold;
}
.pluginInstallText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:18px;
font-style:normal;
}
.pluginText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:18px;
font-style:normal;
}Paso 3: modificar la plantilla de página HTML de Wrapper
Modificar la plantilla de página HTML de Wrapper index.template.html en htmltemplatecarpeta. Flash Builder creará una plantilla de página HTML Wrapper predeterminada html-template / index.template.html , que se compilará en HelloWorld.html.
Este archivo contiene marcadores de posición que Flash Builder reemplaza durante el proceso de compilación. Por ejemplo, versión de Flash Player, nombre de la aplicación, etc.
Modifiquemos este archivo para mostrar mensajes personalizados en caso de que el complemento flash no esté instalado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en">
<head>
<title>${title}</title>
<meta name = "google" value = "notranslate" />
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<link rel = "stylesheet" href = "styles.css" type = "text/css"></link>
<link rel = "stylesheet" type = "text/css" href = "history/history.css" />
<script type = "text/javascript" table table-bordered = "history/history.js">
</script>
<script type = "text/javascript" table table-bordered = "swfobject.js"></script>
<script type = "text/javascript">
// For version detection, set to min. required Flash Player version,
//or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "${version_major}.${version_minor}.${version_revision}"; // To use express install, set to playerProductInstall.swf, //otherwise the empty string. var xiSwfUrlStr = "${expressInstallSwf}";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "${bgcolor}"; params.allowscriptaccess = "sameDomain"; params.allowfullscreen = "true"; var attributes = {}; attributes.id = "${application}";
attributes.name = "${application}"; attributes.align = "middle"; swfobject.embedSWF ( "${swf}.swf", "flashContent",
"${width}", "${height}",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case
//it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
</head>
<body>
<div id = "flashContent">
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
<tr>
<td class = "pluginHeader">Flash Player Required</td>
</tr>
<tr>
<td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td>
</tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</tr>
</table>
</p>
</div>
<noscript>
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width = "${width}" height = "${height}" id = "${application}"> <param name = "movie" value = "${swf}.swf" />
<param name = "quality" value = "high" />
<param name = "bgcolor" value = "${bgcolor}" /> <param name = "allowScriptAccess" value = "sameDomain" /> <param name = "allowFullScreen" value = "true" /> <!--[if !IE]>--> <object type = "application/x-shockwave-flash" data = "${swf}.swf"
width = "${width}" height = "${height}">
<param name = "quality" value = "high" />
<param name = "bgcolor" value = "${bgcolor}" />
<param name = "allowScriptAccess" value = "sameDomain" />
<param name = "allowFullScreen" value = "true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2"
border = "0">
<tr>
<td class = "pluginHeader">Flash Player Required</td>
</tr>
<tr>
<td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td>
</tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash
Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</tr>
</table>
</p>
</p>
<!--<![endif]-->
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
<tr><td class = "pluginHeader">Flash Player Required</td></tr>
<tr><td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td></tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash
Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
</body>
</html>Paso 4: crear un archivo CSS interno
Crea un archivo CSS Style.css para HelloWorld.mxml en table tablebordered/com/tutorialspointcarpeta. Flex proporciona estilos CSS similares para sus controles de interfaz de usuario, ya que existen estilos CSS para controles de interfaz de usuario HTML.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.heading {
fontFamily: Arial, Helvetica, sans-serif;
fontSize: 17px;
color: #9b1204;
textDecoration:none;
fontWeight:normal;
}
.button {
fontWeight: bold;
}
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Paso 5: modificar la clase de nivel de entrada
Flash Builder creará una tabla de archivo mxml predeterminada tablebordered / com.tutorialspoint / HelloWorld.mxml , que tiene un contenedor de etiqueta raíz <application> para la aplicación. Modifiquemos este archivo para mostrar "¡Hola, mundo!" -
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Puede crear más archivos mxml o actionscript en el mismo directorio de origen para definir nuevas aplicaciones o para definir rutinas auxiliares.
Paso 6: crear la aplicación
Flash Builder tiene Build Automaticallymarcada por defecto. Solo revisa elProblemsVer si hay algún error. Una vez que haya terminado con los cambios, no verá ningún error.
Paso 7: ejecutar la aplicación
Ahora haga clic en el
Si todo está bien, debe ver la ventana emergente del navegador, la aplicación en funcionamiento y en ejecución. Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]
Debido a que está ejecutando su aplicación en Flash Player, deberá instalar el complemento Flash Player para su navegador. Simplemente siga las instrucciones en pantalla para instalar el complemento. Si ya tiene el complemento Flash Player configurado para su navegador, entonces debería poder ver el siguiente resultado:
¡Felicidades! Ha implementado su primera aplicación usandoFlex.
Este tutorial le explicará cómo crear una aplicación. war y cómo implementarlo en la raíz del servidor web Apache Tomcat.
Si entendió este simple ejemplo, también podrá implementar una aplicación Flex compleja siguiendo los mismos pasos.
Sigamos los siguientes pasos para crear una aplicación Flex:
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld bajo un packagecom. tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación . |
| 2 | Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
Siga los pasos que se indican a continuación para crear una versión de versión de una aplicación Flex y luego implementarla en el servidor Tomcat:
El primer paso es crear una versión de lanzamiento utilizando Flash Builder IDE. Inicie el asistente de creación de versiones utilizando la opciónFile > Export > Flash Builder > Release Build.
Seleccione el proyecto como HelloWorld usando la ventana del asistente de la siguiente manera
Deje otros valores predeterminados como tales y haga clic en el botón Finalizar. Ahora, Flash Builder creará una carpeta bin-release que contiene la versión de lanzamiento del proyecto.
Ahora que nuestra compilación de lanzamiento está lista, sigamos los siguientes pasos para implementar una aplicación Flex:
| Paso | Descripción |
|---|---|
| 1 | Comprima el contenido de la carpeta bin-release de la aplicación en forma de archivo HelloWorld.war e impleméntelo en Apache Tomcat Webserver. |
| 2 | Inicie su aplicación web usando la URL apropiada como se explica a continuación en el último paso. |
A continuación se muestra el contenido del archivo mxml modificado table table-bordered/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]
Crear archivo WAR
Ahora nuestra aplicación está funcionando bien y estamos listos para exportarla como un archivo war. Siga los siguientes pasos:
Vaya al directorio bin-release de su proyecto C: \ workspace \ HelloWorld \ binrelease
Seleccione todos los archivos y carpetas disponibles dentro del directorio bin-release.
Comprima todos los archivos y carpetas seleccionados en un archivo llamado HelloWorld.zip .
Cambie el nombre de HelloWorld.zip a HelloWorld.war.
Implementar archivo WAR
Detenga el servidor Tomcat.
Copie el archivo HelloWorld.war en el directorio de instalación de tomcat> carpeta webapps.
Inicie el servidor Tomcat.
Mire dentro del directorio de aplicaciones web, debería haber una carpeta que se creó HelloWorld.
Ahora HelloWorld.war se ha implementado correctamente en la raíz del servidor web Tomcat.
Ejecutar aplicación
Ingrese una URL en el navegador web -
http: // localhost: 8080 / HelloWorld / HelloWorld.html para iniciar la aplicación.
El nombre del servidor (localhost) y el puerto (8080) pueden variar según su configuración de tomcat.
Ciclo de vida de la aplicación Flex
Aunque puede crear aplicaciones Flex sin comprender las fases del ciclo de vida de una aplicación, es bueno conocer el mecanismo básico; el orden en que ocurren las cosas. Le ayudará a configurar funciones como la carga de otras aplicaciones Flex en tiempo de ejecución y a administrar el proceso de carga y descarga de bibliotecas de clases y activos en tiempo de ejecución.
Una buena comprensión del ciclo de vida de las aplicaciones Flex le permitirá crear mejores aplicaciones y optimizarlas porque sabrá dónde ejecutar el código de manera óptima. Por ejemplo, si necesita asegurarse de que algún código se ejecute durante un precargador, debe saber dónde colocar el código para ese evento.
Cuando cargamos una aplicación flexible en un navegador, los siguientes eventos ocurren durante el ciclo de vida de la aplicación flexible.
A continuación se muestra un breve detalle sobre los diferentes eventos del ciclo de vida flexible.
| No Señor | Descripción del evento |
|---|---|
| 1 | preInitialize: mx.core.UIComponent.preinitialize Tipo de evento: mx.events.FlexEvent.PREINITIALIZE Este evento se distribuye al comienzo de la secuencia de inicialización del componente. El componente está en un estado muy crudo cuando se distribuye este evento. Muchos componentes, como el control de botones, crean componentes secundarios internos para implementar la funcionalidad. Por ejemplo, el control Button crea un componente TextField de UI interno para representar el texto de su etiqueta. Cuando Flex distribuye el evento de preinicialización, los elementos secundarios, incluidos todos los elementos secundarios internos, de un componente aún no se han creado. |
| 2 | inicializar: mx.core.UIComponent.initialize Tipo de evento: mx.events.FlexEvent.INITIALIZE Este evento se distribuye después de la fase de preinicialización. El marco flexible inicializa la estructura interna de este componente durante esta fase. Este evento se activa automáticamente cuando el componente se agrega a un padre. Generalmente no es necesario llamar a initialize (). |
| 3 | creationComplete: mx.core.UIComponent.creationComplete Tipo de evento: mx.events.FlexEvent.CREATION_COMPLETE Este evento se distribuye cuando el componente ha terminado su construcción, procesamiento de propiedades, medición, diseño y dibujo. En este punto, dependiendo de su propiedad visible, el componente no es visible aunque se haya dibujado. |
| 4 | applicationComplete: spark.components.Application.applicationComplete Tipo de evento: mx.events.FlexEvent.APPLICATION_COMPLETE Se envía después de que la aplicación ha sido inicializada, procesada por LayoutManager y adjuntada a la lista de visualización. Este es el último evento del ciclo de vida de creación de la aplicación y significa que la aplicación se ha cargado por completo. |
Ejemplo de ciclo de vida flexible
Sigamos los pasos para comprender el ciclo de vida de prueba de una aplicación Flex creando una aplicación de prueba:
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld bajo un packagecom. tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación . |
| 2 | Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?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 = "reportEvent(event)"
preinitialize = "reportEvent(event)"
creationComplete = "reportEvent(event)"
applicationComplete = "reportEvent(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
[Bindable]
private var report:String = "";
private function reportEvent(event:FlexEvent):void {
report += "\n" + (event.type + " event occured at: "
+ getTimer() + " ms" + "\n");
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label textAlign = "center" width="100%" id = "lblHeader"
fontSize = "40" color = "0x777777" styleName = "heading"
text = "Life Cycle Events Demonstration" />
<s:TextArea id = "reportText" text = "{report}" editable = "false"
width = "300" height = "200">
</s:TextArea>
</s:VGroup>
</s:BorderContainer>
</s:Application>Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]
Flex admite el uso de estilos y sintaxis CSS para aplicarlos a sus controles de interfaz de usuario de la misma manera que CSS a componentes HTML.
Forma # 1: Uso de un archivo de hoja de estilo externo
Puede consultar una hoja de estilo disponible en la ruta de clases de la aplicación. Por ejemplo, considere el archivo Style.css encom/tutorialspoint/client folder donde también se encuentra el archivo HelloWorld.mxml.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
...
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Entonces se puede hacer referencia al archivo css siguiendo el fragmento de código
<fx:Style source = "/com/tutorialspoint/client/Style.css" />Asignar estilos al componente de la interfaz de usuario mediante la propiedad styleName
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
...
</s:BorderContainer>Manera # 2: Usar estilos dentro del componente de contenedor de Ui
Puede definir estilos dentro del componente contenedor de la interfaz de usuario utilizando la etiqueta <fx: Style>
Selector de nivel de clase
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* class level selector */
.errorLabel {
color: red;
}
</fx:Style>Asigne estilos al componente de la interfaz de usuario mediante la propiedad styleName.
<s:Label id = "errorMsg" text = "This is an error message" styleName = "errorLabel" />Selector de nivel de identificación
Componente de interfaz de usuario de estilo usando el selector de id.
<fx:Style>
/* id level selector */
#msgLabel {
color: gray;
}
</fx:Style>
<s:Label id = "msgLabel" text = "This is a normal message" />Selector de nivel de tipo
Diseñe un tipo de componente de interfaz de usuario en un solo GO.
<fx:Style>
/* style applied on all buttons */
s|Button {
fontSize: 15;
color: #9933FF;
}
</fx:Style>
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />Ejemplo de estilo flexible con CSS
Sigamos los pasos para verificar el estilo CSS de una aplicación Flex creando una aplicación de prueba:
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación . |
| 2 | Modifique Style.css, HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
A continuación se muestra el contenido del archivo CSS modificado src/com.tutorialspoint/Style.css.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.heading
{
fontFamily: Arial, Helvetica, sans-serif;
fontSize: 17px;
color: #9b1204;
textDecoration:none;
fontWeight:normal;
}
.button {
fontWeight: bold;
}
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?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)">
<!--Add reference to style sheet -->
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<!--Using styles within mxml file -->
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* class level selector */
.errorLabel {
color: red;
}
/* id level selector */
#msgLabel {
color: gray;
}
/* style applied on all buttons */
s|Button {
fontSize: 15;
color: #9933FF;
}
</fx:Style>
<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 = "CSS Demonstrating Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "560" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label width = "100%" id = "lblHeader" fontSize = "40"
color = "0x777777" styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />
<s:Label id = "errorMsg"
text = "This is an error message" styleName = "errorLabel" />
<s:Label id = "msgLabel" text = "This is a normal message" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado: [ Pruébelo en línea ]
¿Qué es Skinning?
Skinning en Flex, es un proceso de personalización completa de la apariencia de un componente de la interfaz de usuario.
Una máscara puede definir texto, imagen, filtros, transiciones y estados de un componente.
Una máscara se puede crear como un componente mxml o ActionScript independiente.
Con la máscara, podemos controlar todos los aspectos visuales de un componente de la interfaz de usuario.
El proceso de definición de la máscara es el mismo para todos los componentes de la interfaz de usuario.
Paso 1: crea una máscara
Inicie el asistente Create MXML Skin usando la opción File > New > MXML Skin.
Ingresar paquete como com.tutorialspoint.skin, nombre como GradientBackgroundSkin y elija el componente host como control BorderContainer flexible existentespark.component.BorderContainer.
Ahora ha creado una máscara para BorderContainer. Modificar el contenido del archivo de máscara mxmlsrc/com.tutorialspoint/skin/GradientBackgroundSkin.mxml.
Actualice la capa de relleno de la siguiente manera:
<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
<s:fill>
<s:LinearGradient rotation = "90">
<s:GradientEntry color = "0x888888" ratio = "0.2" />
<s:GradientEntry color = "0x111111" ratio = "1" />
</s:LinearGradient>
</s:fill>
</s:Rect>Paso 2: aplicar piel
Puede aplicar piel sobre un componente de dos formas:
Aplicar máscara en el script MXML (estáticamente)
Aplicar GradientBackgroundSkin a un BorderContainer con id mainContainer usando su skinClass atributo.
<s:BorderContainer width = "560" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle"
skinClass = "com.tutorialspoint.skin.GradientBackgroundSkin">Aplicar máscara en ActionScript (dinámicamente)
Aplicar GradientBackgroundSkin a un BorderContainer con id mainContainer usando su skinClass propiedad.
protected function gradientBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}Ejemplo de estilo flexible con piel
Sigamos los siguientes pasos para ver el desollado en acción en una aplicación Flex creando una aplicación de prueba:
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación . |
| 2 | Cree el skin GradientBackgroundSkin.mxml en un paquete com.tutorialspoint.skin como se explicó anteriormente. Mantenga el resto de los archivos sin cambios. |
| 3 | Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 4 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
A continuación se muestra el contenido del archivo GradientBackgroundSkin.mxml src/com/tutorialspoint/skin/GradientBackg roundSkin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.BorderContainer")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name = "disabled" />
<s:State name = "disabled" />
<s:State name = "normal" />
</s:states>
<!-- SkinParts
name = contentGroup, type = spark.components.Group, required = false
-->
<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
<s:fill>
<s:LinearGradient rotation = "90">
<s:GradientEntry color = "0x111111" ratio = "0.2" />
<s:GradientEntry color = "0x888888" ratio = "1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- must specify this for the host component -->
<s:Group id = "contentGroup" left = "0" right = "0" top = "0" bottom = "0" />
</s:Skin>A continuación se muestra el contenido del HelloWorld.mxml modificado filesrc/com/tutorialspoint/client/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import com.tutorialspoint.skin.GradientBackgroundSkin;
import mx.controls.Alert;
import mx.events.FlexEvent;
import spark.skins.spark.BorderContainerSkin;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
Alert.show("Hello World!");
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
protected function gradientBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", GradientBackgroundSkin );
}
protected function standardBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", BorderContainerSkin );
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id = "selectorGroup" />
</fx:Declarations>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
skinClass = "spark.skins.spark.BorderContainerSkin"
horizontalCenter = "0" verticalCenter = "0" cornerRadius = "10">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "green"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />
<s:RadioButton color = "gray" fontWeight = "bold"
group = "{selectorGroup}" label = "Standard Background"
click = "standardBackground_clickHandler(event)" selected = "true" />
<s:RadioButton color = "gray" fontWeight = "bold"
group = "{selectorGroup}" label = "Gradient Background"
click = "gradientBackground_clickHandler(event)" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]
¿Qué es el enlace de datos?
La vinculación de datos es un proceso en el que los datos de un objeto se vinculan a otro objeto. Requiere una propiedad de origen, una propiedad de destino y un evento de activación que indique cuándo copiar los datos del origen al destino.
Flex proporciona tres formas de vincular datos como se muestra a continuación
- Sintaxis de llaves en secuencia de comandos MXML ({})
- Etiqueta <fx: binding> en MXML
- BindingUtils en ActionScript
Enlace de datos: uso de llaves en MXML
El siguiente ejemplo demuestra cómo utilizar llaves para especificar el enlace de datos de un origen a un destino.
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />Enlace de datos: uso de la etiqueta <fx: Binding> en MXML
El siguiente ejemplo demuestra cómo utilizar
<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />Enlace de datos: uso de BindingUtils en ActionScript
El siguiente ejemplo demuestra cómo usar BindingUtils para especificar el enlace de datos de un origen a un destino.
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.events.FlexEvent;
protected function txtInput2_preinitializeHandler(event:FlexEvent):void {
BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");
}
]]>
</fx:Script>
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2"
preinitialize = "txtInput2_preinitializeHandler(event)" />Ejemplo de enlace de datos flexible
Sigamos los pasos que se indican a continuación para ver el desollado en acción en una aplicación Flex creando una aplicación de prueba:
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación . |
| 2 | Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
A continuación se muestra el contenido del archivo HelloWorld.mxml modificadosrc/com/tutorialspoint/client/HelloWorld.mxml.
<?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">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.events.FlexEvent;
protected function txtInput6_preinitializeHandler(event:FlexEvent):void {
BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");
}
]]>
</fx:Script>
<fx:Binding source = "txtInput3.text" destination = "txtInput4.text" />
<s:BorderContainer width = "500" height = "550" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Data Binding Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel title = "Example #1 (Using Curly Braces,\{\})" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput1" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />
</s:HGroup>
</s:Panel>
<s:Panel title = "Example #2 (Using <fx:Binding>)" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput3" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:Label id = "txtInput4" />
</s:HGroup>
</s:Panel>
<s:Panel title = "Example #3 (Using BindingUtils)" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput5" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:TextInput enabled = "false" id = "txtInput6"
preinitialize = "txtInput6_preinitializeHandler(event)" />
</s:HGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]
Cada interfaz de usuario considera los siguientes tres aspectos principales:
UI Elements- Estos son los elementos visuales centrales que el usuario eventualmente ve e interactúa. Flex proporciona una lista enorme de elementos comunes y ampliamente utilizados que varían de básicos a complejos, que cubriremos en este tutorial.
Layouts- Definen cómo se deben organizar los elementos de la interfaz de usuario en la pantalla y proporcionan una apariencia final a la GUI (interfaz gráfica de usuario). Esta parte se tratará en el capítulo Diseño.
Behavior- Estos eventos ocurren cuando el usuario interactúa con elementos de la interfaz de usuario. Esta parte se tratará en el capítulo Gestión de eventos.
Elementos de la interfaz de usuario flexible
La biblioteca Flex UI proporciona clases en una jerarquía de clases bien definida para crear interfaces de usuario complejas basadas en web. Todas las clases de esta jerarquía de componentes se han derivado de laEventDispatcher clase base como se muestra a continuación -
Cada control de UI básico hereda propiedades de la clase UI Component que a su vez hereda propiedades de EventDispatcher y otras clases de nivel superior.
| No Señor | Control y descripción |
|---|---|
| 1 | Clase Flex EventDispatcher La clase EventDispatcher es la clase base para todas las clases que pueden enviar eventos. La clase EventDispatcher permite que cualquier objeto de la lista de visualización sea un objetivo de evento y, como tal, utilice los métodos de la interfaz IEventDispatcher. |
| 2 | Componente UIC flexible La clase UIComponent es la clase base para todos los componentes visuales, tanto interactivos como no interactivos. |
Controles basicos
A continuación se muestran algunos controles básicos importantes :
| No Señor | Controles y descripción |
|---|---|
| 1 | Etiqueta Label es un componente de UIC de bajo nivel que puede representar una o más líneas de texto con formato uniforme. |
| 2 | Texto El control de texto le permite mostrar contenido HTML así como texto normal en su aplicación. |
| 3 | Imagen El control de imagen le permite importar archivos JPEG, PNG, GIF y SWF en tiempo de ejecución. |
| 4 | LinkButton El control LinkButton es un control de botón sin bordes cuyo contenido se resalta cuando un usuario mueve el mouse sobre él. |
Los controles de formulario permiten a los usuarios ingresar datos y les brinda la capacidad de interacción con la aplicación. Cada interfaz de usuario de formulario controla y hereda propiedades de la clase UIComponent que a su vez hereda propiedades de EventDispatcher y otras clases de nivel superior.
| No Señor | Control y descripción |
|---|---|
| 1 | Clase Flex EventDispatcher La clase EventDispatcher es la clase base para todas las clases que pueden enviar eventos. La clase EventDispatcher permite que cualquier objeto de la lista de visualización sea un objetivo de evento y, como tal, utilice los métodos de la interfaz IEventDispatcher. |
| 2 | Componente UIC flexible La clase UIComponent es la clase base para todos los componentes visuales, tanto interactivos como no interactivos. |
Controles de formulario
A continuación se muestran algunos controles de formulario importantes:
| No Señor | Control y descripción |
|---|---|
| 1 | Botón El componente Botón es un botón rectangular de uso común. |
| 2 | Botón de activación El componente ToggleButton define un botón de alternancia. |
| 3 | Caja El componente CheckBox consta de una etiqueta opcional y una pequeña caja que puede contener una marca de verificación o no. |
| 4 | Selector de color El control ColorPicker proporciona una forma para que un usuario elija un color de una lista de muestras. |
| 5 | Caja combo El control ComboBox es una clase secundaria del control DropDownListBase. |
| 6 | DateChooser El control DateChooser muestra el nombre de un mes, el año y una cuadrícula de los días del mes, con columnas etiquetadas para el día de la semana. |
| 7 | Boton de radio El componente RadioButton permite al usuario hacer una sola elección dentro de un conjunto de opciones mutuamente excluyentes. |
| 8 | TextArea TextArea es un control de entrada de texto que permite a los usuarios introducir y editar varias líneas de texto formateado. |
| 9 | Entrada de texto TextInput es un control de entrada de texto que permite a los usuarios ingresar y editar una sola línea de texto con formato uniforme. |
| 10 | La lista desplegable El control DropDownList contiene una lista desplegable de la que el usuario puede seleccionar un solo valor. |
| 11 | NumericStepper El control NumericStepper le permite seleccionar un número de un conjunto ordenado. |
Los controles complejos brindan a los usuarios capacidades avanzadas para manejar grandes cantidades de datos de una manera más fácil y les brinda capacidad de interacción con la aplicación. Cada control de IU complejo hereda propiedades de la clase UIComponent que a su vez hereda propiedades de EventDispatcher y otras clases de nivel superior.
| No Señor | Control y descripción |
|---|---|
| 1 | Clase Flex EventDispatcher La clase EventDispatcher es la clase base para todas las clases que pueden enviar eventos. La clase EventDispatcher permite que cualquier objeto de la lista de visualización sea un objetivo de evento y, como tal, utilice los métodos de la interfaz IEventDispatcher. |
| 2 | Componente UIC flexible La clase UIComponent es la clase base para todos los componentes visuales, tanto interactivos como no interactivos. |
Controles complejos
A continuación se muestran algunos controles complejos importantes:
| No Señor | Control y descripción |
|---|---|
| 1 | Cuadrícula de datos El control DataGrid muestra una fila de encabezados de columna sobre una cuadrícula desplazable. |
| 2 | AdvancedDataGrid AdvancedDataGrid agrega pocas funcionalidades adicionales al control DataGrid estándar para agregar características de visualización de datos. |
| 3 | Menú El control Menú crea un menú emergente de opciones seleccionables individualmente. |
| 4 | Barra de progreso El control ProgressBar proporciona una representación visual del progreso de una tarea a lo largo del tiempo. |
| 5 | Editor de texto enriquecido El control RichTextEditor permite a los usuarios ingresar y formatear texto. |
| 6 | TileList El control TileList El control TileList muestra una serie de elementos dispuestos en mosaicos. |
| 7 | Árbol El control de árbol permite al usuario ver datos jerárquicos organizados como un árbol expandible. |
| 8 | Reproductor de video El control VideoPlayer es un reproductor de video con máscara que admite descarga progresiva, transmisión de múltiples velocidades de bits y transmisión de video. |
| 9 | Acordeón Un control Accordian tiene una colección de contenedores MX secundarios o contenedores Spark NavigatorContent, pero solo uno de ellos a la vez es visible. |
| 10 | TabNavigator El control TabNavigator incluye un contenedor TabBar para navegar entre sus contenedores secundarios. |
| 11 | ToggleButtonBar El control ToggleButtonBar define un grupo de botones horizontal o vertical que mantienen su estado seleccionado o no seleccionado. |
Los controles del panel de diseño permiten a los usuarios organizar los controles de la interfaz de usuario en la página. Cada control Layout hereda propiedades de la clase UIComponent que a su vez hereda propiedades de EventDispatcher y otras clases de nivel superior.
| No Señor | Control y descripción |
|---|---|
| 1 | Clase Flex EventDispatcher La clase EventDispatcher es la clase base para todas las clases que pueden enviar eventos. La clase EventDispatcher permite que cualquier objeto de la lista de visualización sea un objetivo de evento y, como tal, utilice los métodos de la interfaz IEventDispatcher. |
| 2 | Componente UIC flexible La clase UIComponent es la clase base para todos los componentes visuales, tanto interactivos como no interactivos. |
Paneles de diseño
A continuación se muestran algunos paneles de diseño importantes:
| No Señor | Panel y descripción |
|---|---|
| 1 | BorderContainer La clase BorderContainer proporciona un conjunto de estilos CSS que controlan la apariencia del borde y el relleno de fondo del contenedor. |
| 2 | Formar El contenedor de formularios proporciona control sobre el diseño de un formulario, marca los campos del formulario como obligatorios u opcionales, maneja los mensajes de error y vincula los datos del formulario al modelo de datos Flex para realizar la verificación y validación de datos. |
| 3 | VGroup El contenedor VGroup es un contenedor de grupo que usa la clase VerticalLayout. |
| 4 | HGroup El contenedor HGroup es un contenedor de grupo que usa la clase HorizontalLayout. |
| 5 | Panel La clase Panel es un contenedor que incluye una barra de título, un título, un borde y un área de contenido para sus elementos secundarios. |
| 6 | Contenedor Skinnable La clase SkinnableContainer es la clase base para contenedores que se pueden personalizar y que proporcionan contenido visual. |
| 7 | Barra de pestañas TabBar muestra un conjunto de pestañas idénticas. |
| 8 | TitleWindow La ventana de título extiende el panel para incluir un botón de cierre y un área de movimiento. |
Podemos agregar comportamiento a la aplicación flexible usando el concepto de Efectos. Por ejemplo, cuando un cuadro de texto se enfoca, podemos hacer que su texto se vuelva más audaz y que su tamaño sea un poco más grande.
Cada efecto hereda propiedades de la clase Effect que a su vez hereda propiedades de EventDispatcher y otras clases de nivel superior.
| No Señor | Efecto y descripción |
|---|---|
| 1 | Clase de efecto flexible La clase Effect es una clase base abstracta que define la funcionalidad básica de todos los efectos Flex. Esta clase define la clase de fábrica base para todos los efectos. |
Efectos básicos
A continuación se muestran algunos efectos visuales básicos importantes:
| No Señor | Efecto y descripción |
|---|---|
| 1 | Desvanecerse El efecto Fundido anima la propiedad alfa de un componente. |
| 2 | WipeLeft La clase WipeLeft define un efecto de limpieza a la izquierda. |
| 3 | WipeRight La clase WipeRight define un efecto de limpieza correcta. |
| 4 | Move3D La clase Move3D mueve un objeto de destino en las dimensiones x, y, z. |
| 5 | Scale3D La clase Scale3D escala un objeto de destino en tres dimensiones alrededor del centro de transformación. |
| 6 | Rotar3D La clase Rotate3D rota un objeto de destino en tres dimensiones alrededor de los ejes x, y o z. |
| 7 | Animar Este efecto Animar anima un conjunto arbitrario de propiedades entre valores. Especifique las propiedades y los valores para animar estableciendo la propiedad motionPaths. |
Flex usa el concepto de evento para pasar datos de un objeto a otro dependiendo del estado o la interacción del usuario dentro de la aplicación.
ActionScript tiene un genérico Eventclase que define gran parte de la funcionalidad necesaria para trabajar con eventos. Cada vez que ocurre un evento dentro de una aplicación Flex, se crean tres tipos de objetos de la jerarquía de clases de eventos.
El evento tiene las siguientes tres propiedades clave
| No Señor | Descripción de propiedad |
|---|---|
| 1 | Type los typeindica qué tipo de evento acaba de suceder. Esto puede ser hacer clic, inicializar, pasar el mouse, cambiar, etc. Los valores reales estarán representados por constantes como MouseEvent.CLICK. |
| 2 | Target los target La propiedad de Event es una referencia de objeto al componente que generó el evento.Si hace clic en un botón con una identificación de clickMeButton, el destino de ese evento de clic será clickMeButton |
| 3 | CurrentTarget los currentTargetla propiedad varía la jerarquía del contenedor. Se ocupa principalmente del flujo de eventos. |
Fases del flujo de eventos
Un evento pasa por tres fases en busca de controladores de eventos.
| No Señor | Fase y descripción |
|---|---|
| 1 | Capture En la fase de captura, el programa comenzará a buscar controladores de eventos desde el padre externo (o superior) hasta el más interno. La fase de captura se detiene en el padre del objeto que desencadenó el evento. |
| 2 | Target En la fase de destino, el componente que desencadenó el evento se verifica para un controlador de eventos. |
| 3 | Bubble La fase de burbuja es inversa a la fase de captura, trabajando hacia atrás a través de la estructura, desde el padre del componente objetivo hacia arriba. |
Considere el siguiente código de aplicación:
<?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" >
<s:Panel>
<s:Button id = "clickMeButton" label = "Click Me!" click = "doAction( );" />
</s:Panel>
</s:Application>Cuando el usuario hace clic en el Botón, también hace clic en el Panel y la Aplicación.
El evento pasa por tres fases en busca de asignaciones de controladores de eventos.
Sigamos los pasos a continuación para probar la gestión de eventos en una aplicación Flex:
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación . |
| 2 | Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?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">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
protected function reportEvent(event:MouseEvent):void {
var target:String = event.target.id;
var currentTarget:String = event.target.id;
var eventPhase: String;
if(event.target is Button) {
var button:Button = event.target as Button;
target = button.label + " Button";
} else if(event.target is HGroup) {
var hGroup:HGroup = event.target as HGroup;
target = hGroup.id + " HGroup";
} else if(event.target is Panel) {
var panel:Panel = event.target as Panel;
target = panel.id + " Panel";
}
if(event.currentTarget is Button) {
var button1:Button = event.currentTarget as Button;
currentTarget = button1.label + " Button";
} else if(event.currentTarget is HGroup) {
var hGroup1:HGroup = event.currentTarget as HGroup;
currentTarget = hGroup1.id + " HGroup";
} else if(event.currentTarget is Panel) {
var panel1:Panel = event.currentTarget as Panel;
currentTarget = panel1.id + " Panel";
}
var eventPhaseInt:uint = event.eventPhase;
if(eventPhaseInt == EventPhase.AT_TARGET) {
eventPhase = "Target";
} else if(eventPhaseInt == EventPhase.BUBBLING_PHASE) {
eventPhase = "Bubbling";
} else if(eventPhaseInt == EventPhase.CAPTURING_PHASE) {
eventPhase = "Capturing";
}
reports.text += " Target: " + target + "\n currentTarget: " +
currentTarget + "\n Phase: " + eventPhase + "\n----------\n";
}
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Event Handling Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "parentPanel" title = "Main Parent"
click = "reportEvent(event)" width = "500"
height = "100" includeInLayout = "true" visible = "true">
<s:layout>
<s:VerticalLayout gap = "10" verticalAlign = "middle"
horizontalAlign = "center" />
</s:layout>
<s:HGroup id = "mainHGroup" click = "reportEvent(event)">
<s:Button label = "Click Me" click = "reportEvent(event)" />
</s:HGroup>
</s:Panel>
<s:Panel id = "reportPanel" title = "Events" width = "500" height = "230">
<mx:Text id = "reports" />
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]
Flex ofrece dos formas de crear componentes personalizados.
- Usar ActionScript
- Usando MXML
Usar ActionScript
Puede crear un componente ampliando el componente existente. Para crear un componente usando Flash Builder, haga clic enFile > New > ActionScript Class.
Ingrese los detalles como se muestra a continuación -
Flash Builder creará el siguiente archivo CustomButton.as.
package com.tutorialspoint.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
}
}
}Usando MXML
Puede crear un componente ampliando el componente existente. Para crear un componente usando Flash Builder, haga clic enFile > New > MXML Component.
Ingrese los detalles como se muestra a continuación.
Flash Builder creará el siguiente archivo CustomLogin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Group 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 = "400" height = "300">
</s:Group>Sigamos los siguientes pasos para probar controles personalizados en una aplicación Flex:
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación . |
| 2 | Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Cree los componentes CustomLogin.mxml y CustomButton.as como se explicó anteriormente. Modifique estos archivos como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 4 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/client/CustomLogin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Group 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 = "400" height = "300">
<s:Form>
<s:FormItem label = "UserName:">
<s:TextInput width = "200" />
</s:FormItem>
<s:FormItem label = "Password:">
<s:TextInput width = "200" displayAsPassword = "true" />
</s:FormItem>
<s:FormItem>
<s:Button label = "Login" />
</s:FormItem>
</s:Form>
</s:Group>A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/client/CustomButton.as.
package com.tutorialspoint.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
this.setStyle("color","green");
this.label = "Submit";
}
}
}A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/client/HelloWorld.mxml.
<?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"
xmlns:client = "com.tutorialspoint.client.*"
initialize = "application_initializeHandler(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application_initializeHandler(event:FlexEvent):void {
//create a new custom button
var customButton: CustomButton = new CustomButton();
asPanel.addElement(customButton);
}
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Custom Controls Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel title = "Using MXML Component" width = "400" height = "200">
<client:CustomLogin>
</client:CustomLogin>
</s:Panel>
<s:Panel title = "Using AS Component" width = "400" height = "100">
<s:VGroup id = "asPanel" width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
</s:VGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]
Flex proporciona servicios RPC para proporcionar datos del lado del servidor al lado del cliente. Flex proporciona una buena cantidad de control sobre los datos del lado del servidor.
Utilizando los servicios Flex RPC, podemos definir las acciones del usuario que se ejecutarán en el lado del servidor.
Flex RPC Sservices se puede integrar con cualquier tecnología del lado del servidor.
Uno de los servicios Flex RPC proporciona soporte incorporado para que los datos binarios comprimidos se transfieran por cable y es bastante rápido.
Flex proporciona los siguientes tres tipos de servicios RPC
| No Señor | Servicio y descripción de RPC |
|---|---|
| 1 | HttpService La etiqueta <mx: HTTPService> se utiliza para representar un objeto HTTPService en un archivo MXML. Cuando realiza una llamada al método send () del objeto HTTPService, realiza una solicitud HTTP a la URL especificada y se devuelve una respuesta HTTP. También puede usar los métodos HTTP HEAD, OPTIONS, TRACE y DELETE. |
| 2 | WebService <Mx: WebService> se utiliza para obtener acceso a las operaciones de los servicios web compatibles con SOAP. |
| 3 | RemoteObject La etiqueta <mx: RemoteObject> se utiliza para representar un objeto HTTPService en un archivo MXML. Esta etiqueta le da acceso a los métodos de los objetos Java que utilizan la codificación Action Message Format (AMF). |
Vamos a discutir el servicio HTTP en detalle. Usaremos un archivo de origen XML ubicado en el servidor y accederemos a él en el lado del cliente a través del servicio HTTP.
Items.xml
<items>
<item name = "Book" description = "History of France"></item>
<item name = "Pen" description = "Parker Pen"></item>
<item name = "Pencil" description = "Stationary"></item>
<items>Declaración de servicio HTTPS
Ahora declare un HTTPService y páselo en la URL del archivo anterior
<fx:Declarations>
<mx:HTTPService id = "itemRequest"
url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>Llamada RPC
Realice una llamada al método itemRequest.send () y vincule los valores del objeto lastResult del servicio web itemRequest al componente Flex UI.
...
itemRequest.send();
...
<mx:DataGrid id = "dgItems" height = "80%" width = "75%"
dataProvider = "{itemRequest.lastResult.items.item}">
<mx:columns>
<mx:DataGridColumn headerText = "Name" dataField = "name" />
<mx:DataGridColumn headerText = "Description" dataField = "description" />
</mx:columns>
</mx:DataGrid>Ejemplo de llamada de servicio RPC
Ahora, sigamos los pasos para probar los servicios RPC en una aplicación Flex:
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación . |
| 2 | Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500" creationComplete = "init(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
protected function init(event:FlexEvent):void {
itemRequest.send();
}
]]>
</fx:Script>
<fx:Declarations>
<mx:HTTPService id = "itemRequest"
url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "RPC Service Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "parentPanel" title = "Using RPC Services"
width = "500" height = "200" >
<s:layout>
<s:VerticalLayout gap = "10"
verticalAlign = "middle" horizontalAlign = "center" />
</s:layout>
<mx:DataGrid id = "dgItems" height = "80%" width = "75%"
dataProvider = "{itemRequest.lastResult.items.item}">
<mx:columns>
<mx:DataGridColumn headerText = "Name" dataField = "name" />
<mx:DataGridColumn headerText = "Description"
dataField = "description" />
</mx:columns>
</mx:DataGrid>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]
Flash Builder 4 tiene un excelente soporte incorporado para la integración de FlexUnit en el ciclo de desarrollo Flex.
Crear una clase de caso de prueba
Puede crear una clase de caso de prueba mediante el asistente Crear clase de prueba de Flash Builder. Ejecutar casos de prueba es muy sencillo con Flash Builder, como verá en este artículo.
Para crear una clase de caso de prueba con Flash Builder, haga clic en File > New > Test Case Class. Ingrese los detalles como se muestra a continuación.
Flash Builder creará el siguiente TestClass1.como un archivo.
package com.tutorialspoint.client {
public class TestClass1 {
[Before]
public function setUp():void {}
[After]
public function tearDown():void {}
[BeforeClass]
public static function setUpBeforeClass():void {}
[AfterClass]
public static function tearDownAfterClass():void {}
}
}Ejemplo de integración de FlexUnit
Ahora, sigamos los pasos para probar la integración de FlexUnit en una aplicación Flex:
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación . |
| 2 | Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Cree TestClass1.as caso de prueba como se describe arriba y Modifique TestClass1.as como se explica a continuación. |
| 4 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
A continuación se muestra el contenido del archivo modificado como src/com.tutorialspoint/client/TestClass1.as.
package com.tutorialspoint.client {
import org.flexunit.asserts.assertEquals;
public class TestClass1 {
private var counter: int = 1;
[Before]
public function setUp():void {
//this code will run before every test case execution
}
[After]
public function tearDown():void {
//this code will run after every test case execution
}
[BeforeClass]
public static function setUpBeforeClass():void {
//this code will run once when test cases start execution
}
[AfterClass]
public static function tearDownAfterClass():void {
//this code will run once when test cases ends execution
}
[Test]
public function testCounter():void {
assertEquals(counter, 1);
}
}
}A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500">
</s:Application>Una vez que esté listo con todos los cambios realizados, compilemos en modo normal como hicimos en el capítulo Flex - Crear aplicación .
Ejecución de casos de prueba
Ahora haga clic derecho en TestClass1 en el explorador de paquetes y seleccione Run As > FlexUnit Tests. Verá el siguiente resultado en la ventana de prueba de Flash Builder.
Flash Builder también muestra los resultados de las pruebas en el navegador.
Flex proporciona una excelente capacidad de depuración de código flexible y Flash Builder 4 tiene un depurador incorporado excelente y soporte de perspectiva de depuración.
Durante el modo de depuración, la aplicación Flex se ejecuta en la versión del depurador de Flash Player integrada en Flash Builder 4, que admite la capacidad de depuración.
Para que los desarrolladores obtengan una configuración de depuración fácil e incorporada en Flash Builder
En este artículo, demostraremos el uso de la depuración del código de Flex Client con Flash Builder. Haremos las siguientes tareas
- Establezca puntos de interrupción en el código y véalos en Breakpoint Explorer.
- Recorra el código línea por línea durante la depuración.
- Ver los valores de la variable.
- Inspeccione los valores de todas las variables.
- Inspecciona el valor de una expresión.
- Muestre el marco de la pila para hilos suspendidos.
Ejemplo de depuración
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación . |
| 2 | Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Una vez que esté listo con todos los cambios realizados, compilemos en modo normal como hicimos en el capítulo Flex - Crear aplicación .
Paso 1: colocar puntos de interrupción
Coloque un punto de interrupción en la primera línea de la aplicación, inicialice el controlador de HelloWorld.mxml
Paso 2: Aplicación de depuración
Ahora haga clic en el
Si todo está bien, la aplicación se iniciará en el navegador y verá los siguientes registros de depuración en la consola de Flash Builder.
[SWF] \HelloWorld\bin-debug\HelloWorld.swf
- 181,509 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\1
- 763,122 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\2
- 1,221,837 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\3
- 1,136,788 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\4
- 2,019,570 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\5
- 318,334 bytes after decompressionTan pronto como se inicie la aplicación, verá el foco en el punto de interrupción de Flash Builder, ya que hemos colocado el punto de interrupción en la primera línea del método application_initialize Handler.
Puede ver el seguimiento de pila para subprocesos suspendidos.
Puede ver los valores de las expresiones.
Puede ver la lista de puntos de interrupción colocados.
Ahora siga presionando F6 hasta llegar a la última línea del método application_initializeHandler (). Como referencia para las teclas de función, F6 inspecciona el código línea por línea, F5 avanza hacia adentro y F8 reanuda la aplicación. Ahora puede ver la lista de valores de todas las variables del método application_initializeHandler ().
Ahora puede ver que el código flexible se puede depurar de la misma manera que se puede depurar una aplicación Java. Coloque puntos de interrupción en cualquier línea y juegue con las capacidades de depuración de flex.
Flex proporciona dos formas de internacionalizar una aplicación Flex. Demostraremos el uso del tiempo de compilación La internacionalización es la más utilizada entre los proyectos.
| No Señor | Técnica y descripción |
|---|---|
| 1 | Compile Time Internationalization Esta técnica es la más frecuente y requiere muy poca sobrecarga en tiempo de ejecución; es una técnica muy eficaz para traducir tanto cadenas constantes como parametrizadas; la más sencilla de implementar. La internacionalización de Compile Time utiliza archivos de propiedades estándar para almacenar cadenas traducidas y mensajes parametrizados, y estos archivos de propiedades se compilan directamente en la aplicación. |
| 2 | Run Time Internationalization Esta técnica es muy flexible pero más lenta que la internacionalización de cadenas estáticas. Debe compilar los archivos de propiedades de localización por separado, dejarlos externos a la aplicación y cargarlos en tiempo de ejecución. |
Flujo de trabajo de internacionalización de una aplicación Flex
Paso 1: crear una estructura de carpetas
Cree una carpeta de configuración regional en la carpeta src del proyecto Flex. Este será el directorio principal para todos los archivos de propiedades de las configuraciones regionales que admitirá la aplicación. Dentro de la carpeta de configuración regional, cree subcarpetas, una para cada una de las configuraciones regionales de la aplicación que se admitirán. La convención para nombrar una configuración regional es
{language}_{country code}Por ejemplo, en_US representa el inglés de los Estados Unidos. La configuración regional de_DE representa el alemán. La aplicación de muestra admitirá dos idiomas comunes: inglés y alemán.
Paso 2: crear archivos de propiedades
Cree un archivo de propiedades que contenga los mensajes que se utilizarán en la aplicación. Hemos creado unHelloWorldMessages.properties archivar bajo src > locale > en_US carpeta en nuestro ejemplo.
enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}Cree archivos de propiedades que contengan valores traducidos específicos de la configuración regional. Hemos creado unHelloWorldMessages.properties archivar bajo src > locale > de_DEcarpeta en nuestro ejemplo. Este archivo contiene traducciones en idioma alemán. _de especifica la configuración regional alemana y vamos a admitir el idioma alemán en nuestra aplicación.
Si está creando un archivo de propiedades con Flash Builder, cambie la codificación del archivo a UTF-8. Seleccione el archivo y luego haga clic derecho en él para abrir su ventana de propiedades. Seleccione Codificación de archivo de texto como Other UTF-8. Aplicar y guardar el cambio.
enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}Paso 3: especificar las opciones del compilador
Haga clic con el botón derecho en su proyecto y seleccione Propiedades.
Seleccione Flex Compiler y agregue lo siguiente a la configuración de Argumentos adicionales del compilador:
-locale en_US de_DEHaga clic con el botón derecho en su proyecto y seleccione Propiedades.
Seleccione Flex Build Path y agregue lo siguiente a la configuración de Source Path:
src\locale\{locale}Ejemplo de internalización
Ahora sigamos los siguientes pasos para probar la técnica de internalización en una aplicación Flex:
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación . |
| 2 | Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500">
<fx:Metadata>
[ResourceBundle("HelloWorldMessages")]
</fx:Metadata>
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
private var locales:Array = [{label:"English", locale:"en_US"},
{label:"German", locale:"de_DE"}];
private function comboChangeHandler():void {
resourceManager.localeChain = [localeComboBox.selectedItem.locale];
}
protected function clickMe_clickHandler(event:MouseEvent):void {
var name:String = txtName.text;
var inputArray:Array = new Array();
inputArray.push(name);
Alert.show(resourceManager.getString('HelloWorldMessages'
,'greeting',inputArray));
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40"
color = "0x777777"
text = "{resourceManager.getString('HelloWorldMessages','applicationTitle')}"
styleName = "heading" width = "90%" height = "150" />
<s:Panel width = "300" height = "150">
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "{resourceManager.getString('HelloWorldMessages','enterName')}"
paddingTop = "2" />
<s:TextInput id = "txtName" />
</s:HGroup>
<s:Button
label = "{resourceManager.getString('HelloWorldMessages','clickMe')}"
click = "clickMe_clickHandler(event)" right = "10" />
</s:Panel>
<mx:ComboBox id = "localeComboBox" dataProvider = "{locales}"
change = "comboChangeHandler()" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]
Cambie el idioma usando el menú desplegable de idiomas y vea el resultado.
Flex proporciona una clase especial FlexPrintJob para imprimir objetos flexibles.
FlexPrintJob se puede utilizar para imprimir uno o más objetos Flex, como un formulario o un contenedor VBox.
FlexPrintJob imprime el objeto y todos los objetos que contiene.
Los objetos pueden ser todo o parte de la interfaz mostrada.
Los objetos pueden ser componentes que dan formato a datos específicamente para imprimir.
La clase FlexPrintJob le permite escalar la salida para que se ajuste a la página.
La clase FlexPrintJob utiliza automáticamente varias páginas para imprimir un objeto que no cabe en una sola página.
La clase FlexPrintJob hace que el sistema operativo muestre un cuadro de diálogo Imprimir. No puede imprimir sin alguna acción del usuario.
Preparar y enviar un trabajo de impresión
Imprime la salida preparando y enviando un trabajo de impresión. Creemos una instancia de la clase FlexPrintJob
var printJob:FlexPrintJob = new FlexPrintJob();Iniciar el trabajo de impresión
printJob.start();Flex hará que el sistema operativo muestre un cuadro de diálogo Imprimir. Agregue uno o más objetos al trabajo de impresión y especifique cómo escalarlos
printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH);Cada objeto comienza en una nueva página. Envíe el trabajo de impresión a la impresora
printJob.send();Ejemplo de impresión
| Paso | Descripción |
|---|---|
| 1 | Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación . |
| 2 | Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios. |
| 3 | Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos. |
A continuación se muestra el contenido del archivo mxml modificado src/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.printing.FlexPrintJob;
import mx.printing.FlexPrintJobScaleType;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
// Create an instance of the FlexPrintJob class.
var printJob:FlexPrintJob = new FlexPrintJob();
// Start the print job.
if (printJob.start() != true) return;
// Add the object to print. Do not scale it.
printJob.addObject(myDataGrid, FlexPrintJobScaleType.NONE);
// Send the job to the printer.
printJob.send();
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<mx:DataGrid id = "myDataGrid" width = "300">
<mx:dataProvider>
<fx:Object Product = "Flex" Code = "1000" />
<fx:Object Product = "GWT" Code = "2000" />
<fx:Object Product = "JAVA" Code = "3000" />
<fx:Object Product = "JUnit" Code = "4000" />
</mx:dataProvider>
</mx:DataGrid>
<s:Button label = "Print Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)"
styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]
Haga clic en el botón Imprimirme y podrá ver la impresión de la cuadrícula de datos que se muestra a continuación.
