Flex - Crear aplicación
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 a 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 se copia a 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 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 archivos 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 Automaticallymarcado 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 
menú Ejecutar aplicación y seleccioneHelloWorld aplicación para ejecutar la aplicación.
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: [ ]
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, debería poder ver el siguiente resultado:
¡Felicidades! Ha implementado su primera aplicación usandoFlex.