Traduccion de Flex

261
EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Página 1 de 274 EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Introduciendo Doblez 3: ........................................................................ 7 Desarrollando Aplicaciones Enriquecedoras del Cliente................................................................. Introduciendo Dominio Aprendiendo............................................................ Entendiendo el Formato de Curso................................................................... Revisando los Prerrequisitos de Curso................................................................... El resumen................................................................. ............... 9 Introduciendo Doblez Adobino 3....................................................................... Entendiendo aplicaciones de la Internet enriquecedoras.......................................................... Entendiendo Doblez Adobino................................................................ Entendiendo Al Constructor Flexible Adobino................................................................ Entendiendo la fundación de la RÍA...................................... 14 Entendiendo el flujo aplicativo Flex de proceso................................................................. Accediendo a los recursos remotos de datos de una aplicación Flex................................................................. 1 Obteniendo ayuda y otros recursos................................................................ El resumen................................................................. ............. 17 Comenzando con Constructor Flexible................................................................ Entendiendo la relación entre Eclipse y el Constructor Flexible......... 19 Explorando la interfaz Flexible del Constructor............................................................. Creando un proyecto y su primera aplicación.............................................................. Usando el archivo de aplicación principal............................................................... Corriendo el archivo

Transcript of Traduccion de Flex

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 1 de 274

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Introduciendo Doblez 3: ......................................................................................................................... 7 Desarrollando Aplicaciones Enriquecedoras del Cliente............................................................................................... 7 Introduciendo Dominio Aprendiendo.............................................................................................................. 8 Entendiendo el Formato de Curso....................................................................................................... 8 Revisando los Prerrequisitos de Curso..................................................................................................... 9 El resumen............................................................................................................................... ............... 9 Introduciendo Doblez Adobino 3............................................................................................................. 10 Entendiendo aplicaciones de la Internet enriquecedoras.......................................................................................... 11 Entendiendo Doblez Adobino................................................................................................................. 12 Entendiendo Al Constructor Flexible Adobino..................................................................................................... 13 Entendiendo la fundacin de la RA.......................................................................................... 14 Entendiendo el flujo aplicativo Flex de proceso.............................................................................. 15 Accediendo a los recursos remotos de datos de una aplicacin Flex................................................................. 16 Obteniendo ayuda y otros recursos...................................................................................................... 16 El resumen............................................................................................................................... ............. 17 Comenzando con Constructor Flexible................................................................................................. 18 Entendiendo la relacin entre Eclipse y el Constructor Flexible................................................... 19 Explorando la interfaz Flexible del Constructor................................................................................................... 20 Creando un proyecto y su primera aplicacin...................................................................................... 22 Usando el archivo de aplicacin principal........................................................................................................... 24 Corriendo el archivo

aplicativo............................................................................................................... 24 Compilando la aplicacin.................................................................................................................. 24 El agrupamiento se proyecta con reas de trabajo................................................................................................... 25 Walkthrough 1: Crear un archivo de aplicacin principal y correrlo........................................................ 26 Depurando una aplicacin Flex.............................................................................................................. 31 Depurando una aplicacin................................................................................................................... 32 Walkthrough 2: Depurando y usar la Perspectiva Debugging.................................................... 34 Accediendo a la ayuda en Constructor Flexible Adobino................................................................................................. 37 EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 2 de 274 Aprendiendo Fundamentos Flexibles........................................................................................................ 39 Creando una aplicacin Flex simple...................................................................................................... 40 Walkthrough 1: Creando su primera aplicacin Flex.......................................................................... 42 Ostentando imgenes.............................................................................................................................. . 43 Walkthrough 2: Aadindole las imgenes a una aplicacin.............................................................................. 45 Diseando una aplicacin Flex con envases.................................................................................... 46 Walkthrough 3: Usando trazados bsicos................................................................................................... 50 Usando el envase del Panel.................................................................................................................. 51 Walkthrough 4: Separar mdulos aplicativos en reviste con paneles............................................................ 53 El envase ControlBar................................................................................................................... 54 Walkthrough 5: Usando un envase ControlBar................................................................................... 55 Agregando controles de la interfaz del usuario........................................................................................................... 56 Creando ataduras de datos entre componentes................................................................................... 57 Walkthrough 6: Creando ataduras de datos............................................................................................. 58 Architecting una aplicacin con componentes MXML........................................................................ 59 Walkthrough 7: Creando e instantiating un componente aduanero..................................................... 61

Creando propiedades y mtodos para componentes MXML................................................................ 62 Walkthrough 8: Creando propiedades y mtodos en un componente.................................................. 64 Manejando Acontecimientos.................................................................................................................... ...... 68 Entendiendo acontecimientos.................................................................................................................... .... 69 La comprobacin 1: Mirando acontecimientos de sistema y del usuario........................................................................... 70 Creando manipuladores de acontecimiento usando a inline ActionScript............................................................................. 70 Walkthrough 1: Usando a inline ActionScript.......................................................................................... 72 Manejar acontecimientos dentro de ActionScript funciona.................................................................................. 73 Walkthrough 2: Destinando una funcin para un manipulador de acontecimiento...................................................................... 74 Colocar a ActionScript funciona en archivos externos.................................................................................. 74 La comprobacin 2: Usando a un ActionScriptfile externo.................................................. ....................... 75 Entendiendo el objeto de Acontecimiento........................................................................................................ 75 Walkthrough 3: Entendiendo el objeto de acontecimiento.............................................................................. 79 La comprobacin 3: Simplifique el demo de acontecimiento....................................................................................... 80 Usando el mtodo addEventListener ()............................................................................................... 80 Walkthrough 4: Usando el mtodo addEventListener ()..................................................................... 82 El resumen............................................................................................................................... ............. 83 EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 3 de 274 La revisin................................................................................................................................ ................ 83 Diseando una Aplicacin Usando Trazado basado en restricciones............................................................. 84 Entendiendo posicionamiento absoluto.................................................................................................. 85 Situando componentes dentro de un envase de Lona.......................................................................... 85 Walkthrough 1: Situando componentes dentro de una Lona................................................................. 87

Creando un trazado basado en restricciones usando a Constructor Flexible....................................................................... 89 Walkthrough 2: Usando modo del Diseo para implementar un trazado basado en restricciones.................................. 91 Creando un trazado basado en restricciones por MXML................................................................................... 94 Walkthrough 3: Implementando un trazado basado en restricciones en MXML.................................................. 95 Usar Realz Restricciones............................................................................................................... 95 La comprobacin 1: Usar Realz Restricciones................................................................................. 97 Usando trazados basados en restricciones dentro de envases anidados................................................................. 98 Walkthrough 4: Usando componentes aduaneros en un trazado basado en restricciones......................................... 99 El resumen............................................................................................................................... ........... 100 La revisin................................................................................................................................ .............. 100 El laboratorio: 1........................................................................................................................................ 101 Parte 2: Creando el componente de la pgina Contribute............................................................................ 104 Parte 3: Cree el componente de la pgina de la Galera..................................................................................... 107 Los Estados Utilizadores de Vista para Diseo Aplicativo................................................................................... 109 Los estados comprensivos de vista............................................................................................................... 110 Walkthrough 1: Creando a dos estados para la pgina de Contacto.............................................................. 113 Los estados controlantes de vista..................................................................................................................... 114 Walkthrough 2: Los estados conmutativos en la forma de Contacto..................................................................... 115 Revisando el cdigo generado MXML............................................................................................. 116 Walkthrough 3: Implementando condiciones de vista usando a MXML................................................................. 119 Crear vista indica eso incluyen estados componentes aduaneros.......................................................... 121 Walkthrough 4: Usando componentes aduaneros con sus estados de vista......................................... 122 El resumen............................................................................................................................... ........... 123 La revisin................................................................................................................................ .............. 123

Creando Navegacin Aplicativa................................................................................................ 124 Entendiendo envases del navegante y controles........................................................................... 125 Usando el control LinkBar................................................................................................................. 126 Usando el control TabBar.................................................................................................................. 126 EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 4 de 274 Usando el envase ViewStack......................................................................................................... 127 La Capacitacin Abotona Dinmicamente.......................................................................................................... 129 Walkthrough 1: Navegando la hoja de solicitud Cafe Townsend usando al ViewStack y el control TabBar .................................................. ........................................................................................................ 130 Usando el envase TabNavigator................................................................................................... 132 Usando el envase del Acorden......................................................................................................... 133 Walkthrough 2: Navegando el contenido Cafe Townsend usando al TabNavigator y Acorden Los envases................................................................................................................................ ......... 135 Usando ButtonBar y ToggleButtonBar................................................................................................ 135 Usando el envase ApplicationControlBar..................................................................................... 136 Walkthrough 3: Aadindole al envase ApplicationControlBar a la aplicacin Cafe Townsend.. 137 El resumen............................................................................................................................... ........... 138 La revisin................................................................................................................................ .............. 138 Haciendo A La Medida la Hoja de Solicitud...................................................................................................... 139 Hacer a la medida apariencia aplicativa Flex y sienta...................................................................................... 140 Modificar a Styles para cambiar apariencia y sentir........................................................................................ 141 Usando Temas.................................................................................................................................. . 146 Walkthrough 1: Cambiando la apariencia y la percepcin de la aplicacin Caf Townsend.............................. 147 Aplicndole los comportamientos a los componentes.................................................................................................. 149

Walkthrough 2: Adale los comportamientos al Cafe Townsend colocando fijamente en su lugar grfica.............................................. 153 Aplicando transiciones para mirar cambios estatales...................................................................................... 154 Walkthrough 3: Ajuste el tamao del panel de contacto Cafe Townsend durante la vista que los estados efectan una transicin......... 157 El resumen............................................................................................................................... ........... 159 La revisin................................................................................................................................ .............. 159 El laboratorio 2: ........................................................................................................................................ 160 Usando ActionScript los Datos los Modelos................................................................................................. 167 Usando el patrn del diseo MVC......................................................................................................... 168 Creando una informacin MXML modelo......................................................................................................... 169 Las clases utilizadoras ActionScript como un modelo de datos...................................................................................... 170 Walkthrough 1: Instantiating un Objeto en MXML de una clase ActionScript................................. 175 Creando a un constructor ActionScript con parmetros................................................................... 177 Walkthrough 2: Instantiating un Objeto en ActionScript de una clase ActionScript........................ 179 Definiendo mtodos de clase..................................................................................................................... 181 Walkthrough 3: Aadindole los Mtodos a una clase ActionScript............................................................... 183 EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 5 de 274 El resumen............................................................................................................................... ........... 184 La revisin................................................................................................................................ .............. 184 Intercambiando Datos entre Componentes Usando Acontecimientos Aduaneros..................................................... 185 Entendiendo el problema con ataduras...................................................................................... 186 La comprobacin 1: Usando una atadura para obtener informacin de un componente.................................................. 187 Creando acontecimientos aduaneros.................................................................................................................... 187 Walkthrough 1: Creando, despachando y manejar un acontecimiento

aduanero............................................. 190 Enviando datos con un acontecimiento aduanero................................................................................................... 193 Walkthrough 2: Crear un objeto aduanero de acontecimiento y despacharlo................................................ 196 El resumen............................................................................................................................... ........... 199 La revisin................................................................................................................................ .............. 199 Creando Formas de Entrada de Datos......................................................................................................... 200 Usando el envase de la Forma................................................................................................................. 201 Walkthrough 1: Creando un componente de la forma de entrada de datos................................................................ 203 Compartiendo Datos de la Forma............................................................................................................................ 205 Walkthrough 2: Compartiendo Datos de la Forma con la Aplicacin................................................................ 207 Validando datos de la forma......................................................................................................................... 209 Provocando validacin con acontecimientos..................................................................................................... 210 Walkthrough 3: Validando Aporte Numrico....................................................................................... 212 Provocando validacin con ActionScript............................................................................................ 213 Walkthrough 4: Provocando Validacin con ActionScript.................................................................. 215 El resumen............................................................................................................................... ........... 216 La revisin................................................................................................................................ .............. 216 Recuperando Datos XML con HTTPService...................................................................................... 217 Recuperando datos XML en runtime....................................................................................................... 218 El manejo resulta................................................................................................................................ 219 Walkthrough 1: Recuperando datos en runtime con HTTPService........................................................ 222 Los resultados de manejo usando un manipulador de acontecimiento.......................................................................................... 223 Walkthrough 2: Usando un acontecimiento de resultado................................................................................................ 224 Manejando fallas.................................................................................................................................. 226

Walkthrough 3: Manejando un acontecimiento de falla............................................................................................ 228 Haciendo peticiones de HTTP para los dominios diferentes................................................................................... 230 Walkthrough 4: Probando poltica de dominio cruzado................................................................................... 232 EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 6 de 274 Haciendo peticiones de HTTP con parmetros.......................................................................................... 233 Walkthrough 5: Usando HTTPService con parmetros...................................................................... 235 El resumen............................................................................................................................... ........... 238 La revisin................................................................................................................................ .............. 238 Exhibiendo Datos Usando Al DataGrid........................................................................................... 239 Usando el control DataGrid............................................................................................................... 240 La comprobacin 1: Exhibiendo Datos Simples XML en un DataGrid......................................................... 242 Especificando columnas DataGrid............................................................................................................ 243 Walkthrough 1: Especificando columnas DataGrid................................................................................. 244 Formateando columnas DataGrid.......................................................................................................... 245 Walkthrough 2: Formateando datos en columnas DataGrid.................................................................... 247 Usando dadores del artculo y editores del artculo............................................................................................ 248 Walkthrough 3: Usando una cada en editor del artculo.................................................................................... 252 Los dadores del artculo Inline y los editores del artculo............................................................................................ 253 Walkthrough 4: Usando un inline editor del artculo..................................................................................... 254 El dador del artculo y los componentes del editor del artculo.................................................................................... 255 Walkthrough 5: Usando un dador componente del artculo......................................................................... 256 Usando Al TileList y HorizontalList................................................................................................ 257 Walkthrough 6: Exhibiendo datos con un TileList y HorizontalList.................................................. 257 Usando acontecimientos y artculos seleccionados con componentes basados en listas........................................................ 259

Walkthrough 7: Usando un acontecimiento de cambio en el TileList.................................................. .................... 259 El resumen............................................................................................................................... ........... 260 La revisin................................................................................................................................ .............. 260 El laboratorio 3......................................................................................................................................... 261 EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 7 de 274 Introduciendo Doblez 3: Desarrollando Al Cliente Rico Las aplicaciones En esta seccin del curso, usted aprender el formato de curso, prerrequisitos y los temas. Los objetivos Despus de Completar esta unidad, usted debera poder: describa al grupo meta y prerrequisitos para este curso describa el contenido de curso y objetivos Los temas En esta unidad, usted se enterar de los siguientes temas: Introduciendo Dominio Aprendiendo Entendiendo el Formato de Curso Revisando los Prerrequisitos de Curso Revisando el Contorno de Curso

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 8 de 274 Introduciendo Dominio Aprendiendo Tal como hay metodologas para el desarrollo aplicativo, hay metodologas para ensear y aprendizaje. La metodologa usada en este curso es dominio aprendiendo. El aprender dominios incluye: El aprendizaje claramente indicado

Los objetivos Cada unidad en este curso comienza con los objetivos para esa unidad. La presentacin de material para Soporte el aprendizaje Los objetivos El instructor para este curso usa diapositivas, el whiteboard y otro soporte lgico informtico para Logre comunicar conceptos. Modele usos de material nuevo El instructor pues este curso demuestra el uso del producto. La informacin retroactiva de estudiantes El instructor para estas pruebas de curso para entender durante y despus de cada uno La unidad. La unidad dirigida de prctica Each en este curso tiene una serie de walkthroughs Que usted realice junto con su instructor as es que thatyou familiarcese con Las habilidades nuevas. La unidad independiente de prctica Each en este curso concluye con un laboratorio de participacin activa que le deja practicar Un set de habilidades nuevas, por usted mismo, en contexto. El cierre y la experimentacin Despus de cada laboratorio en este curso que usted revisa lo que usted tiene, aprendieron y discute Cualquier problemas que usted tiene, pueden haber tenido al practicar habilidades nuevas. Entendiendo el Formato de Curso Este curso est dividido en 14 unidades, la mayor parte de cul presenta informacin nueva y contiene comprobaciones, Los walkthroughs y un laboratorio. Al final de cada unidad, usted encontrar un resumen y una revisin pequea a probar su El conocimiento del contenido de la unidad. Los siguientes iconos son usados a todo lo largo del gua:

Los conceptos introducen informacin nueva. Las comprobaciones ilustran conceptos nuevos. Walkthroughs gue a usted, con asistencia del instructor, a travs de los procedimientos. Los laboratorios le dejan practicar habilidades nuevas por usted mismo. Los resmenes proveen una sinopsis breve del contenido de la unidad. Las revisiones experimentan qu tan sano usted recuerda los conceptos de la unidad. EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 9 de 274

Revisando los Prerrequisitos de Curso Para lucrar ms que nada de esta clase, usted ya lo debera hacer: estar familiarizado con un lenguaje de programacin orientado en objeto como Java o C + + estar familiarizado con terminologa XML y uso Revisando el Contorno de Curso Este curso es separado en los siguientes 14 mdulos: Introduciendo Doblez 3: Desarrollando Aplicaciones Enriquecedoras del Cliente Introduciendo Doblez Adobino 3 Comenzando con Constructor Flexible Aprendiendo Fundamentos Flexibles Manejando Acontecimientos Diseando Una Aplicacin Usando Trazado Basado En Restricciones Los Estados Utilizadores de Vista para Diseo Aplicativo Creando Navegacin Aplicativa Haciendo A La Medida la Hoja de Solicitud Usando ActionScript los Datos los Modelos Intercambiando Datos entre Componentes Usando Acontecimientos Aduaneros Creando Formas de Entrada de Datos recuperando Datos XML con HTTPService Exhibiendo Datos Usando Al DataGrid

El resumen el curso se replantea a travs de una combinacin de conferencias, comprobaciones, walkthroughs, y laboratorios para aprovecharse ms que nada de este curso usted debera estar familiarizado con un objeto orientado programacin El idioma y est familiarizado con terminologa XML y uso el curso consta de 14 mdulos y 3 ejercicios del laboratorio EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 10 de 274

Introduciendo Doblez Adobino 3 En esta unidad, usted comenzar a entender lo que una aplicacin de la Internet enriquecedora (la RA) es, y cmo el Doblez Adobino y lo La ayuda adobina del Jugador del Destello en construirlos. Usted tambin entender el proceso de

cmo el cdigo MXML usted Escriba es transformado en un archivo SWF dado al cliente. Los objetivos Despus de completar esta unidad, usted debera poder: describa RA del en explique las tecnologas diferentes en la lnea Flexible Adobina del producto describa cul Adobe es el Jugador del Destello y una cierta cantidad de sus caractersticas entienda el flujo aplicativo de una aplicacin Flex y cmo es transformado en SWF y es redimido Para el cliente sepa donde y cmo obtener ayuda Los temas En esta unidad, usted se enterar de los siguientes temas: entendiendo aplicaciones de la Internet enriquecedoras Entendiendo Doblez Adobino Entendiendo Al Constructor Flexible Adobino entendiendo la fundacin de la RA entendiendo el flujo aplicativo Flex de proceso accediendo a los recursos remotos de datos de una aplicacin Flex obteniendo ayuda y otros recursos

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 11 de 274 Entendiendo aplicaciones de la Internet enriquecedoras Una aplicacin de la Internet enriquecedora (la RA) combina la mejor funcionabilidad de la interfaz del usuario de aplicaciones del software de mesa Con el alcance amplio y la implementacin barata de aplicaciones de trama y lo mejor de multimedios interactivo Las comunicaciones. La Evolucin de aplicaciones Figura 1: La evolucin de aplicaciones Los aspectos de una RA incluyen cada interaccin del usuario no requiere respuesta del servidor de peticin /Web los datos pueden ser obtenidos del servidor sin volver a dibujar pgina entera combine lo mejor de parte superior de un escritorio, trama y comunicaciones eficazmente utilice bandwidth de la red transmitiendo slo la porcin de los datos tan cambiados Las ventajas de ras

el impacto de ras de negocios que los han implementado 32 % mucho ms, o ms exitosos ques esperado 37 % tan exitoso como esperado 10 mucho menos del %, o menos que esperado 21 % no ha medido impacto comercial el comercio electrnico sita que las ras de uso tienen a ms compradores que convierten para los compradores y su tamao promedio de orden Es mayor la manufactura y el viaje que las compaas de la reservacin indgena ven totalizan ROI se aprovecha de 185 % para 1,354 % Nota: La informacin de Forrester papel de investigacin localizado en _ el apps/ de la _ internet del http://www.adobe.com/resources/business/rich. EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 12 de 274 Las herramientas del adobe para el desarrollo de la RA

Figura 2: Las herramientas del adobe para RIAdevelopment Entendiendo Doblez Adobino

provee un armazn estructurado, al que se result ser, gratis de desarrollo de la fuente, abierta para Creando soluciones de la RA de largo plazo usado para construir sitios Webes, intrarred y aplicaciones de la empresa las hojas de solicitud flexibles corren idnticamente en todo leveraging principal de navegadores Jugador Flash Y en la parte superior de un escritorio usando AIRE

Figura 3: Los elementos principales de Doblez EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 13 de 274

SDK Flexible adobino dispone que el esqueleto de la aplicacin desarrolladores puede usar para Extienda los componentes preconstruidos que usan aplicacin Extienda esos componentes preconstruidos Construya sus componentes de la nada la biblioteca sustanciosa de clase bas en ActionScript 3.0 que encarna mejores prcticas para construir ras contiene idioma basado a XML designado MXML que provee una forma declarativa para construir aplicaciones contiene un ECMAScript condescendiente escribiendo un guin para idioma designado ActionScript el compilador para crear a SWF reporta de su MXML y ActionScript El ejemplo preconstruy componentes (ActionScript clasifica) ComboBox DataGrid DateChooser

Entendiendo Al Constructor Flexible Adobino el constructor Flexible adobino acelera el diseo, desarrollo y experimentacin de Internet rica Las aplicaciones construidas con Doblez El Estndar Flexible Adobino del Constructor el estndar Flexible adobino del Constructor es una capacitacin basada Eclipse de la herramienta de desarrollo La codificacin inteligente Interactivo que se da un paso a travs depurando La interfaz visual del diseo importa activos de Suite Creative Adobina 3 hechura eso fcil para diseadores y los desarrolladores a trabajar hombro a hombro El Constructor Flexible Adobino el Profesional el profesional Flexible adobino del Constructor incluye todas las caractersticas del Estndar la versin y La memoria y los perfiladores de actuacin El soporte integrado, automatizado y funcional de experimentacin apuntado en construir ras crticas en negocio incluye soporte de visualizacin de datos Cree consolas de datos usando grficas Cree informes basados en mesas ricos con complejo agrupndose y las caractersticas sumarias

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 14 de 274

Entendiendo la fundacin de la RA la versin 9 us con Doblez 3 la columna vertebral de la Plataforma del Destello Soporta A ActionScript 3.0 Lenguaje de programacin orientado en objeto que escribe un guin para Condescendiente con estndar del ECMAScript - En 2005 Macromedia llev a hombros el comit del ECMAScript y Adobe Contina conduciendo la evolucin de ECMAScript incluye nuevo, ActionScript Virtual Machine optimizado (AVM) a ajusticiar lo el cdigo ActionScript Fortalecido desde el principio para trabajar con ActionScript 3.0 Significativamente ms rpido que anteriores versiones Abatane error del runtime reportando - En tiempo atrs versiones muchos errores del runtime fracasaran en uno gracioso, excepto silencioso La moda El estndar de la industria depurando Ms fuerte compila tipo de tiempo inspeccionando los elementos nuevos de idioma se aadieron E4X (ECMAScript para XML), que sume XML como un tipo nativo de datos Las expresiones normales Implementa manipular acontecimientos bas en estndar W3C DOM Events el jugador del destello 9 tambin contiene AVM1 para atrs la compatibilidad con existir y El contenido del legado escrito en ActionScript 1 y 2

Figura 5: La Interactividad del Jugador del Destello

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 15 de 274 Entendiendo el flujo aplicativo Flex de proceso Figura 6: El proceso aplicativo de desarrollo el cliente invoca aplicacin el doblez compila archivo del MXML/ActionScript en todo ActionScript, luego crea a un SWF SWF es escondido en reserva Si el archivo ya pidi, SWF escondido en reserva es redimido SWF aplicativo compilado hizo un download para el cliente la aplicacin pide recursos adicionales usando HTTP, JABN o AMF EL DOBLEZ ADOBINO 3

Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 16 de 274 Accediendo a los recursos remotos de datos de un Doblez La aplicacin las aplicaciones flexibles pueden acceder a los recursos remotos de datos en un nmero de formas El HTTP: Recupere datos por el protocolo HTTP/HTTP A menudo los datos XML que se convierte luego en objetos ActionScript El JABN: Recupere datos por los servicios de trama AMF (el Formato de Mensaje de Accin): Use este protocolo binario para interactuarle La lateral en servidor Java objeta (POJOs, JavaBeans, EJBs), los componentes ColdFusion, .NET, PHP y Rub en Rieles Todo por remoting los productos adobinos que permiten comunicacin de Flex para datos remotos BlazeDS: Abra producto de la fuente para habilitar remoting y envo de mensajes Las tecnologas Remoting permite protocolo AMF, y por lo tanto comunicacin con objetos Java y ColdFusion los componentes El envo de mensajes permite empujn de datos de tiempo real para los clientes Flexibles Los Servicios de Datos del LiveCycle: Incluye todas las caractersticas de BlazeDS, as como tambin una informacin El servicio de la gerencia El servicio de la gerencia de datos registra modelos de datos del lado del cliente y tiene a LCDS ingniese Los cambios Obteniendo ayuda y otros recursos la documentacin y otros recursos La documentacin Flexione Recursos _ la documentacin del http://www.adobe.com/go/flex Doblez 3 la Ayuda Http://livedocs.adobe.com/flex/3/html/index.html flexione a ActionScript y MXML Referencia Language Http://livedocs.adobe.com/flex/3/langref/index.html el archivo de ZIP de la documentacin _ la cremallera de la _ documentacin del http://www.adobe.com/go/flex ActionScript 3 Errores Http://livedocs.adobe.com/flex/3/langref/compilerErrors.html Flexione URLs flexione pgina del producto Http://www.adobe.com/go/flex Flexione Centro del Desarrollador Http://www.adobe.com/devnet/flex

flex.org: El punto de partida para desarrolladores operando con Doblez Http://flex.org los terceres sitios del Doblez de fiesta Http://www.cflex.net EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 17 de 274

Los BLOGs inicie su bsqueda del blog en http://flex.org/blogs /, y relacinese para centenares de blogs Flexibles de All El resumen una aplicacin de la Internet enriquecedora (la RA) combina la mejor funcionabilidad de la interfaz del usuario de Las aplicaciones del software de mesa con el alcance amplio y la implementacin barata de trama Las aplicaciones y lo mejor de comunicaciones interactivas, multimedia el SDK Flexible dispone que un esqueleto de la aplicacin desarrolladores puede usar extenderse La aplicacin la constructora flexible es una herramienta basada Eclipse para el uso en aplicaciones del Doblez que crea el jugador del destello solt con Doblez forma la columna vertebral de la Plataforma del Destello EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 18 de 274 Comenzando con Constructor Flexible En este mdulo, usted har un reconocimiento de Constructor Flexible y lo usar crear archivos aplicativos Flexibles en ambos Source y el Diseo El modo. Usted tambin aprender a usar el debugger integrado. Los objetivos Despus de Completar esta unidad, usted debera poder: dele aclaraciones qu tan Flexible el Constructor se basa en Eclipse entienda Tecnologa Flexible del Constructor como los puntos de vista, perspectivas y editores cree proyecto Flexible cree, compile y corra un archivo aplicativo Flexible smese a un archivo aplicativo en ambos el modo Source de modo y del Diseo use puntos de ruptura al depurar una aplicacin

Los temas En esta unidad, usted se enterar de los siguientes temas: entendiendo la relacin entre Eclipse y el Constructor Flexible explorando la interfaz Flexible del Constructor creando un proyecto y su primera aplicacin depurando una aplicacin Flex accediendo a la ayuda en Constructor Flexible Adobino

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 19 de 274 Entendiendo la relacin entre Eclipse y Flexione Al Constructor

el constructor flexible es fortalecido en Eclipse el ambiente integrado (IDE) de desarrollo para construir aplicaciones Flexibles La Fundacin del Eclipse no para la organizacin de la ganancia abra al pblico comunidad de la fuente cuyos proyectos son en los que se enfoc la atencin con tal que un vendorneutral Abra plataforma de desarrollo y armazn aplicativo para software edificador basado en software soltado por IBM en noviembre del 2001 en el dominio pblico centenares de plug-ines disponibles para ambientes diferentes El CFEclipse para ColdFusion Java C/C + + Flexione Al Constructor flexione al Constructor basado en el banco de trabajo del Eclipse Las opciones de instalacin el constructor flexible est disponible en dos configuraciones: La configuracin autnoma: El paquete hecho a la medida de Eclipse y el Constructor Flexible Los plug-ines - El ideal para usuarios nuevos de Constructor Flexible y esos que tiene la intencin de desarrollarse Slo Dblese y ActionScript 3 aplicaciones - Puede echar otros plug-ines, como ColdFusion y Java La configuracin de plug-in: Pues esos que ya usan Eclipse y quieren suman lo Flexione funcionabilidad del Constructor

Flexione funcionabilidad del Constructor el constructor flexible tiene la siguiente funcionabilidad: Codificando ambiente con muchas herramientas tiles El ambiente del diseo de la interfaz con trazado visual Depurando ambiente con debugger integrado y la evaluacin variable Las opciones El compilador integrado para fortalecer a SWF bytecode de MXML y ActionScript EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 20 de 274 Explorando la interfaz Flexible del Constructor

el banco de trabajo de trmino se refiere al ambiente Flexible completo de desarrollo del Constructor El envase para todas las herramientas que usted usar para desarrollar aplicaciones Contiene perspectivas, editores y puntos de vista Entendiendo a los editores un editor est donde los archivos de tipos diversos son editados en ya sea el modo de la Fuente o el Diseo El modo El desarrollo flexible consta en su mayor parte de archivos MXML y ActionScript, pero Java, Los archivos ColdFusion y CSS tambin pueden ser usados Edite archivos en ya sea el modo de Fuente de modo o del Diseo - El modo de la fuente est donde usted ve cdigo - El modo del diseo est donde usted puede crear sus aplicaciones visualmente Al doble dando un clic sobre el editor etiqueta maximiza y minimiza al editor Revuelva en lnea numera en un editor de jure haciendo clic en la barra del marcador y Los nmeros selectores de la Lnea de Funcin

Figura 1: Cambiar de direccin en lnea numera Entendiendo puntos de vista una vista que los suministros soportan labra al modificar un archivo en un editor La vista del navegante le permite operar archivos, carpetas y proyectos Los problemas miran errores de funciones en su cdigo El hierarchically de vista de contorno le presenta, y le permite navegar para, todo el usuario Interacte y codifique elementos en un archivo del sistema del men escoja a Window para acercarse a los puntos de vista diversos EL DOBLEZ ADOBINO 3

Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 21 de 274 Entendiendo perspectivas una perspectiva es un grupo de puntos de vista y los editores en una configuracin de su eleccin El constructor flexible tiene dos perspectivas predeterminadas - La perspectiva de desarrollo - Depurando perspectiva Pueden tener otras perspectivas al usar configuracin de plug-in, como Java Puede crear y puede salvar sus perspectivas del men de la Ventana Figura 2: El banco de trabajo Flexible del Constructor en el modo de la Fuente

Figura 3: El banco de trabajo Flexible del Constructor en el modo del Diseo EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 22 de 274 Creando un proyecto y su primera aplicacin

Figura 4: Escoja un nombre de proyecto y posicin para empezar desarrollo, usted necesita aprender cmo para Cree un proyecto Flexible del Constructor Cree una pgina de aplicacin principal Compile la aplicacin Corra la aplicacin Creando Un Proyecto un proyecto es un agrupamiento de recursos que hacen una aplicacin Flex Debe tener un proyecto para crear una aplicacin en Constructor Flexible El nombre de proyecto debe ser nmeros y cartas slo Los archivos se guardarn automticamente en la posicin de proyecto El archivo de aplicacin principal se construir automticamente y ahorrado en la raz de lo La carpeta de la posicin de proyecto cuando un proyecto es creado, un nmero de archivos y las carpetas son automticamente creados El depsito depura carpeta: Donde su aplicacin compilada reside La carpeta de html-template: Donde el paje de la envoltura del html reside La carpeta de .settings: Donde algunos archivos de configuracin de proyecto reside .actionScriptPoperties, .flexProperties y archivos .project: La configuracin de proyecto Los archivos

La carpeta del src: Donde MXML archiva y otras carpetas del activo residen La carpeta de libs: Donde la costumbre que la clase archiva puede residir Un archivo de aplicacin principal, si usted no selecciona un archivo existente para ese papel suministre la siguiente informacin para crear un proyecto EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 23 de 274 Figura 5: Specifyc devuelva carpeta. El defecto es el depsito depura carpeta

Figura 6: Los caminos determinados de la constitucin de proyecto

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 24 de 274 Usando el archivo de aplicacin principal el archivo de aplicacin principal contiene el < mx:La etiqueta del > envase aplicativa colocada Cada aplicacin slo puede tener un archivo asociado de aplicacin < el mx:Los xmlns aplicativos:Mx "http://www.adobe.com/2006/mxml" El trazado "absoluto" < el /mx:La aplicacin la propiedad del trazado recibe el valor la primera vez absoluta que usted crea una aplicacin El constructor flexible retendr su ltima seleccin del trazado para aplicaciones futuras Usar el trazado absoluto pide que todos los elementos visuales tienen valores de la letra x especfica, y o restricciones Para situar Otras elecciones del trazado Horizontal: Los elementos visuales diseados horizontalmente La vertical: Los elementos visuales diseados verticalmente si usted no especifica la propiedad del trazado el trazado ser vertical Corriendo el archivo aplicativo para probar el archivo aplicativo, usted lo corre desde adentro de Constructor Flexible use el +F11 del botn Corrido o CTRL debe ser un archivo aplicativo, lo cual quiere decir que debe contener un < mx:La etiqueta del > envase aplicativa colocada el tringulo verde por encima sali de icono del archivo en el Navegante que la vista indica que el archivo es una aplicacin Si un archivo aplicativo no es marcado con un tringulo verde que con usted todava lo puede correr a l, luego aparecer con

Un tringulo verde Figura 7: La lista del archivo con aplicacin marcada Compilando la aplicacin cuando el archivo aplicativo corre, el cdigo MXML es compilado en un archivo SWF que el Jugador del Destello har Ejecute puede disponerse a compilar despus de que cada salva escogiendo > Constitucin de Proyecto Automticamente EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 25 de 274 El agrupamiento se proyecta con reas de trabajo un rea de trabajo (para no estar confundido con banco de trabajo) es un agrupamiento de proyectos El directorio real de sistema del archivo que contiene los archivos y las carpetas que rastrean un grupo de proyectos slo puede tener un rea de trabajo el claro a la vez para crear un rea de trabajo nuevo Seleccione rea de Trabajo del > Interruptor del Archivo D Un Clic Sobre Otro ... El Vistazo de Chasquido ... Figura 8: La ventana de dilogo del Dispositivo de Lanzamiento del rea de Trabajo D un clic sobre el botn de la Carpeta de la Marca New y cree la carpeta nueva para corresponderle a lo nuevo El rea de trabajo Figura 9: D un clic sobre el botn de la Carpeta de la Marca New para crear un rea de trabajo nuevo para seleccionar un rea de trabajo existente Seleccione rea de Trabajo del > Interruptor del Archivo D Un Clic Sobre Otro ... De la pelusa de cada selecto la carpeta que corresponde al rea de trabajo buscado Figura 10: Seleccionando un rea de trabajo existente EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente

Pgina 26 de 274 Walkthrough 1: Creando un archivo de aplicacin principal y Corrindolo En este walkthrough, usted realizar las siguientes tareas: cree un proyecto Flexible nuevo del Constructor cree un archivo principal de aplicacin MXML el modo del Diseo de uso para colocar dos controles en la pgina corra el archivo manipule puntos de vista cambie perspectivas

Los pasos Cree un proyecto y la pgina aplicativa 1. Navegue para installDirectory /addbeTraining/f3rca/fb.zip. 2. Extraiga la cremallera para el directorio del adobeTraining/f3rca. 3. Abra Al Constructor Flexible. 4. Seleccione configuracin Bsica si sale preguntado. 5. El clic derecho en la vista del Navegante y > el Doblez selecto New Se Proyectan. 6. Suministre la siguiente informacin: el nombre de proyecto: F B la posicin de proyecto: Doblez de la Ventana. Nota: Al usar al Flex Builder Plugin, Window > Muestre > Navegante de Vista. 29. Abra al pblico la vista interna del navegador de trama seleccionando Puntos de Vista de > Otro de la Ventana ... Nota: Al usar al Flex Builder Plugin, Window Web Browser Internal Web Browser 30. De la ventana de dilogo de Vista de Funcin, dan un clic sobre el signo ms delante de la carpeta General, los hombres hacen una seleccin lo La vista interna del navegador de Internet. D un clic sobre Oklahoma. Nota: El Internal Weh Browser no puede servir para correr o depurando programas. Estas funciones lo harn siempre Lleve lugar en un navegador externo. 31. Cierre la vista Interna del Navegador de Internet. Las perspectivas del interruptor

32. Use el botn Perspectivo Abierto para seleccionar la perspectiva Flexible Debugging. 33. Use el cheurn () para cambiar de regreso a la perspectiva Flex de Desarrollo. Nota: El cheurn es realmente simplemente un sealizador que hay ms a la derecha. Si usted arrastra la etiqueta perspectiva exhibida A la izquierda usted podr ver ambas perspectivas listadas, como se muestra en el siguiente diagrama. EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 30 de 274

Figura 16: Ostentando ambas perspectivas Trabajando con reas de trabajo 34. Seleccione > Otro del rea de Trabajo del > Interruptor del Archivo ... 35. De la ventana de dilogo del Dispositivo de Lanzamiento del rea de Trabajo da un clic sobre el Vistazo ... botn. 36. Seleccione el directorio que usted quiere ser el padre de lo pronto para ser carpeta creada del rea de trabajo. Nota: En las Ventanas estndar la instalacin, esta carpeta es sugerida para ser: C:\Documents y \ < el nombre de usuario de trasfondos > \ Mi Constructor del \ Doblez Documents 3. 37. D un clic sobre el botn de la Carpeta de la Marca New y nombre el testWorkspace nuevo de la carpeta. 38. D un clic sobre Oklahoma. 39. Ser seguro el directorio nuevo es seleccionado en la ventana de dilogo del Dispositivo de Lanzamiento del rea de Trabajo. 40. D un clic sobre Oklahoma. Flexione al Constructor cerca y entonces reabra en el rea de trabajo nuevo, vaco. Nota: Usted tendr que volver a arrancar algunas preferencias en el rea de trabajo nuevo, como nmeros visibles de la lnea. 41. Cambie de decisin de regreso al rea de trabajo predeterminado, File > Cambie rea de Trabajo, lo cual corresponde al Doblez del directorio El constructor 3. 42. Cierre cualquier editores que pueden estar abiertos. EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 31 de 274 Depurando una aplicacin Flex

al depurar una aplicacin usted puede controlar la ejecucin de la aplicacin en puntos especficos en lo El cdigo un especial depura versin del Jugador del Destello es usada cul es instalado durante el Constructor Flexible La instalacin al depurarle lata Use la funcin de la huella () para ostentar valores en la vista de la Consola Establezca puntos de ruptura para suspender ejecucin de cdigo aplicativo as es que usted puede inspeccionar cdigo Los valores de variable del monitor D un paso a travs de la ejecucin de cdigo Los valores variables calcadores use la funcin de la huella () Ostente variables y texto los ejemplos La huella ("en la funcin"); La huella (myVar); La huella ("myVar" + myVar); debe usa Destello Debug Player para mirar salida de la consola Estableciendo puntos de ruptura para establecer puntos de ruptura Debe ser cdigo ActionScript Una etiqueta MXML que contiene a ActionScript En un bloque de la Letra deje invlida lnea para establecer un punto de ruptura < el mx:El texto de la etiqueta "la Bienvenida"! > la lnea vlida para establecer un punto de ruptura desde ActionScript est en la etiqueta < el mx:El chasquido de "compra" de la etiqueta del botn "la compra ()" para establecer un punto de ruptura, use la barra del marcador, cul es el borde izquierdo de un editor Haga doble clic para sumar un punto de ruptura O en el marcador vede, clic derecho y seleccione Punto de Ruptura de la Palanca de Apoyo EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 32 de 274

Figura 17: Sumando un punto de ruptura Ande Remove Todo Breakpoints para aclarar los puntos de ruptura Depurando una aplicacin comience por usar el botn Debug D un clic sobre flecha abajo al lado de lo depura botn Seleccione aplicacin de cada abajo de lista

Figura 18: Depurando una aplicacin cuando el punto de ruptura es encontrado la perspectiva Flexible Debugging es activada en el banco de trabajo el uso depura vista para controlar depura sesin Suspenda, vuelva a la carga o termine la relacin depura sesin El curriculum vitae, el Paso Into, Paso Encima y los botones de Regreso de Paso Figura 19: Lo depura vista EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 33 de 274 use la vista de Variables para ver todas las variables para la aplicacin Figura 20: La vista de variables las expresiones de uso miran para verle las variables a usted escoger Figura 21: La vista de expresiones la ESCALA DE MEDICIN DE LA GRAVEDAD ESPECFICA SEGURA para detenerse la sesin que depura antes de continuar otro trabajo El navegador abierto para la sesin que depura automticamente se cerrar EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 34 de 274 Walkthrough 2: Depurando y usar al Debugging La perspectiva

En este walkthrough, usted realizar las siguientes tareas: use la declaracin de la huella establezca un punto de ruptura para depurar depure una aplicacin el fin una sesin que depura Los pasos Cree una aplicacin nueva 1. En Constructor Flexible, abra a FB _ wt2.txt en la raz del proyecto FB FBFB FB en el directorio del src. 2. Resalte todas las lneas de Ctrl-C FB _ wt2.txt y de la prensa. 3. Cree una aplicacin nueva del mxml. El archivo > New > MXML Application La Carpeta del Padre: El FB/src El nombre de archivo: FB _ wt2.mxm FB _ wt2.mxmlll l. El Final de Chasquido 4. Resalte todas las lneas en el Ctrl-V FB _ wt2.mxml del archivo y de la prensa para empastar en el contenido de lo El archivo FB _ wt2.txt. Usando la declaracin de la huella 5. Echo de ver que hay una declaracin de la huella en el < mx:> el bloque de la letra. 6. Use el botn Debug para correr la aplicacin. 7. Una vez que la hoja de solicitud corre, regrese al Constructor Flexible. 8. Examine la vista de la Consola, cul por el defecto aparecer en el fondo del banco de trabajo tabulado con lo La vista de problemas, y la sede que el texto de la declaracin de la huella es exhibido. 9. Termine la relacin la sesin que depura dando un clic sobre el cuadrado rojo en la vista de la Consola. Estableciendo un punto de ruptura y usando la perspectiva Debugging 10. Cambie de decisin para el Debugging perspectivo dando un clic sobre el cheurn o Perspectiva Manifiesta en el derecho superior La esquina del banco de trabajo, y luego seleccione Doblez Debugging. 11. Los puntos de vista asociados con la perspectiva Debugging deberan aparecer 12. En la barra del marcador, que est situado a la izquierda de los nmeros de la lnea, inserta un punto de ruptura sin retardo cul Establece la mi variable Var por valor de 10. EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 35 de 274 Nota: Usted puede intercalar un punto de ruptura por ah al doble haciendo clic en la barra del marcador al lado de la lnea, o bien haciendo clic adelante lo La lnea y seleccionando Punto de Ruptura de la Palanca de Apoyo. 13. El cheque para ser seguro el punto de ruptura estaba listo buscando el punto azul al lado de la lnea correcta:

Figura 22: El punto de ruptura exteriorizado en la barra del marcador 14. 15. 16. 17. D un clic sobre la etiqueta para ver la vista de Expresiones. El clic derecho en la vista y Add selecto Observan Expresin ... En la Expresin del Reloj de Pulsera Add ventana de dilogo entre en mi Var. D un clic sobre Oklahoma.

Nota: Usted tambin puede establecer variables de Expresin del Reloj de Pulsera durante la sesin que depura. 18. Depure la aplicacin. Usted ver el navegador iniciar, luego el Constructor Flexible aparecer otra vez cuando la ejecucin de programa choca lo El punto de ruptura. Nota: Usted no tiene que estar en la perspectiva Debugging cuando usted establece puntos de ruptura. Si usted establece puntos de ruptura en lo La perspectiva de desarrollo, luego depura su aplicacin, el Constructor Flexible o se convertir en Depurar modo o Aprmiele si usted tiene el deseo de ser. 19. En la vista de Expresiones, inspeccione para ver que la variable del myVar est indefinida. Esto es porque lo El punto de ruptura se detiene antes de ejecutar la especificada lnea de cdigo. 20. D un clic sobre el Paso En botn en lo alto de la vista Debug para ejecutar la lnea marcada de cdigo. 21. Compruebe el valor de la variable en la vista de Expresiones. Usted debera ver que eso ahora rebota la luz lo La declaracin de asignacin, y el valor son demostrados como 10. 22. D un clic sobre la etiqueta para ver la vista de Variables. 23. Mire el valor de myVar. 24. Termine la relacin la sesin que depura dando un clic sobre el cuadrado rojo tampoco en lo alto del Debug o la Consola La vista. 25. Aclare el punto de ruptura actual, luego adale otro a la lnea que contiene el < mx: > la etiqueta del botn. 26. Depure la aplicacin otra vez. 27. D un clic sobre el Botn en la aplicacin y regrese al Constructor Flexible y sea seguro el Debugging Flexible La perspectiva est manifiesta. EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 36 de 274 28. Contine usando el Paso En botn para ver la funcin quedar designado y la variable del newVar asignada uno El valor. 29. El alto la sesin que depura dando un clic sobre el cuadrado rojo tampoco en lo alto del Debug o la Consola La vista. 30. Cierre cualquier editores abiertos. 31. Regrese a la perspectiva de Desarrollo.

32. Seleccione el rea de trabajo en installDirectory adobeTraining f3rca.

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 37 de 274 Accediendo a la ayuda en Constructor Flexible Adobino La ayuda est disponible dentro de Constructor Flexible y directas fuentes otras Ayude Dentro de Constructor Flexible ponga al contexto la ayuda sensitiva por ah presionar a F1 la investigable documentacin Flexible y Flexible del Constructor usando El Contenido de > Ayuda de Ayuda dele la bienvenida al paje de Socorro Pgina > Flexible de Principio Pruebe aplicaciones Los manuales de instruccin La documentacin Flexione Recursos _ la documentacin del http://www.adobe.com/go/flex LiveDocs Http://www.adobe.com/go/flex2 livedocs flexione a ActionScript y MXML Referencia Language Http://www.adobe.com/go/flex2 apiref el archivo de ZIP de la documentacin _ la cremallera de la _ documentacin del http://www.adobe.com/go/flex ActionScript 3 Errores Http://www.adobe.com/go/AS3errors El Obtener Dobleces Inici Experiencia Http://learn.adobe.com/wiki/display/Flex/Getting +Started El resumen

el constructor Flexible adobino se basa en el ambiente de desarrollo del Eclipse el constructor flexible puede ser instalado como un producto autnomo o como un plug-in para una instalacin existente del Eclipse el banco de trabajo de trmino se refiere al ambiente Flexible completo de desarrollo del Constructor un editor est donde los archivos de tipos diversos son modificados una vista contiene herramientas del soporte para modificar un archivo en un editor una perspectiva es un grupo de puntos de vista y los editores en una configuracin de su eleccin un proyecto es un grupo de recursos que hacen una aplicacin Flex una aplicacin Flex es contenida dentro de un < mx:La aplicativa etiqueta > componente colocada

las reas de trabajo se usan para agrupar proyectos al depurarle lata Sume una declaracin de la huella () para exhibir informacin en la vista de la consola Establezca puntos de ruptura para suspender ejecucin de cdigo aplicativo para inspeccionar cdigo y valores variables tan Bien como la ejecucin de cdigo del walkthrough localice cdigo de la fuente presionando a Ctrl mientras dando un clic sobre la etiqueta

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 38 de 274

La revisin 1. Qu la relacin est entre el Constructor del Doblez del Adobe y el Eclipse? 2. Qu es un editor? 3. Qu es una vista? 4. Qu es una perspectiva? 5. Qu determina si un archivo es un archivo aplicativo? 6. Qu es un rea de trabajo y cmo hace que usted crea uno? 7. Nombre los dos lugares un punto de ruptura pueden ser determinados. 8. El nombre cuatro las formas para obtener ayuda.

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 39 de 274 Aprendiendo Fundamentos Flexibles En esta seccin del curso, usted desarrollar su primera aplicacin Flex y entender la infraestructura bsica Que una aplicacin Flex debe tener. Los objetivos

Despus de completar esta unidad, usted debera poder: cree una aplicacin Flex (MXML, archive) el trazado una aplicacin con envases agregue controles simples de la interfaz del usuario cree ataduras de datos entre los controles el arquitecto unos componentes MXML que usan aplicaciones

Los temas En esta unidad, usted se enterar de los siguientes temas: creando una aplicacin Flex simple ostentando imgenes diseando una aplicacin Flex con envases usando el envase del Panel usando el envase ControlBar agregando controles de la interfaz del usuario creando ataduras de datos entre componentes Architecting una aplicacin con componentes MXML creando propiedades y mtodos para componentes MXML

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 40 de 274 Creando una aplicacin Flex simple el esqueleto de un archivo de aplicacin MXML contiene XML documente declaracin de tipo Abrindose y cerrando < mx:La aplicativa etiqueta > componente colocada < el mx:Los xmlns aplicativos:Mx "http://www.adobe.com/2006/mxml" El trazado "absoluto" es la etiqueta predeterminada del envase Especificando un namespace use los xmlns:El atributo del mx para el namespace, que defina la coleccin de etiquetas legales MXML http://www.adobe.com/2006/mxml es un Identificador Uniforme (URI) del Recurso que se asocia uno Prefije (en este caso mx) con un archivo manifiesto como sigue < uros del namespace http://www.adobe.com/2006/mxml /uri

< manifieste < / manifiesto de mxml-manifest.xml < el /namespace Flex-config.xml localizado en installdirectory Adobe Flex Builder 3\sdks\3.0.0\frameworks\flex config.xml Manifieste archivo El archivo manifiesto, mxml-manifest.xml, tiene una larga lista de elementos componentes XML, a medias mostrado aqu < el componentPackage < la clase componente del "acorden" id = " mx.containers El acorden " < id componente "AnimateProperty" La clase "mx.effects/AnimateProperty" < la clase componente de "aplicacin" id = " mx.core La aplicacin " < id componente "ApplicationControlBar" La clase "mx.containers/ApplicationControlBar" < id componente "ArrayCollection" La clase "la mx.collections/ArrayColleccin" Localizados en installdirectory \ Adobe \ Se Doblan 3\sdks\3.0.0\frameworks del Constructor EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 41 de 274 Colocando la propiedad del trazado la propiedad del trazado se atrasa en el pago para su ltima seleccin cundo construyendo una aplicacin o componente de La ventana de dilogo apropiada Absoluto: Los elementos visuales deben tener valores de la letra x especfica, y o restricciones para situar Horizontal: Los elementos visuales presentados horizontalmente La vertical: Los elementos visuales presentados verticalmente si la propiedad del trazado no es usada en la etiqueta Aplicativa, el trazado predeterminado es vertical Sumando controles UI los controles UI se usan para exhibir componentes de tipo de la interfaz del usuario en una aplicacin El aporte del texto, del texto, los botones, las imgenes, los cuadros combinados, etc. Sume entre el set aplicativo de la etiqueta u otro componente del envase

tambin los llamados componentes el ejemplo del control de la Etiqueta para exhibir una lnea sola de texto < el mx:El texto de la etiqueta "hola Flexers"! > Especificando propiedades componentes las propiedades componentes pueden ser especificadas en dos formas Como los atributos de la etiqueta XML < el mx:El texto de la etiqueta "el Hola" Como etiquetas anidadas o nodos < el mx:La etiqueta < el mx:< el /mx del texto de > Hola:El texto < el /mx:La etiqueta Comentando su cdigo MXML el estilo de uso XML hace comentarios cules es similar para el HTML hace comentarios Doblez del > Artculo Importado del Archivo. 3. El proyecto del artculo importado de Archivo del Archivo. Haga Una Lectura Ligera para: la etiqueta aplicativa colocada, suma un < mx:Designe > control con un texto La propiedad que tiene el valor el Doblez es impresionante! < el mx:El texto de la etiqueta = " el Doblez es impresionante! " Corriendo la aplicacin 6. Corra la aplicacin. Usted debera ver el texto aparecer en el navegador.

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 43 de 274 Ostentando imgenes use el control de Imagen para incorporar JPEGs (el progresista y el poco progresista) GIFs (puede ser transparente) PNGs (puede ser transparente) Los SWFs SVGs (slo puede incrustar en compila el tiempo) Los mtodos para ostentar imgenes dos formas para ostentar imgenes Crguelos dinmicamente en runtime Incrstelos en el archivo SWF especifique fuente de imagen tres formas Por la propiedad de la fuente de un control de Imagen; Cargar imagen dinmicamente en runtime Use el mtodo de carga de Imagen () para sumar la imagen dinmicamente en runtime Incruste la imagen en el SWF en compila el tiempo usando la directiva @ Embed; til pues cuando Usted necesita carga instantnea y aplicaciones no en la Internet La carga dinmicamente en runtime especifique la imagen usando el atributo de la fuente del < mx:> el control de imagen La imagen es cargada en runtime < el mx:La fuente de imagen "myimage.jpg"

Asgnele un id a la imagen referencia en ActionScript < el mx:La fuente de imagen "addis.jpg" id "imageID" Usando el mtodo de carga () dinmicamente cambie de decisin fuera de la imagen usando el mtodo de carga () de la clase de Imagen el ejemplo de cdigo < el mx:BackgroundColor aplicativo "#FFFFFF" Los xmlns:Mx "http://www.adobe.com/2006/mxml" < el mx:La fuente de imagen "addis.jpg" Id "imageID" maintainAspectRatio "falso" La anchura "250" la altura "250" < el mx:La etiqueta del botn "cambio Pic" El chasquido "la carga imageID. ( flower.jpg ) " < el /mx:La aplicacin EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 44 de 274 Incrustando imgenes en compila el tiempo usted puede incrustar imgenes en compilan el tiempo para la carga instantnea Para incrustar, usar la directiva @ Embed al especificar la fuente de imagen < el mx:La imagen La fuente @ "incruste ( ../ images/blue1.svg ) " Los pros de imgenes de empotramiento la imagen est disponible inmediatamente, est en parte del SWF muy til para crear aplicaciones que pueden trabajar fuera de la Internet Las contras de imgenes de empotramiento acrecienta aplicativo el tamao SWF retarda proceso aplicativo de inicializacin Debe recompila aplicacin cada vez que la imagen cambia no puede usar en datos vinculando llamadas Las limitaciones surtiendo efecto con archivos Grficos Vectoriales Dimensionables (SVG)

usted slo puede incrustar un archivo SVG en una aplicacin; Usted no puede cargar uno en runtime SMIL y animacin no son soportados el enmascaramiento y los filtros no son soportados el patrn Fill y algunas Gradientes avanzadas no son soportados Interactivity y escribir un guin para no es mantenido el texto SVG es entregado como SWF poco investigable y poco seleccionable que la forma esboza, queriendo decir no es Entregado como texto natal en Jugador del Destello EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 45 de 274 Walkthrough 2: Aadindole las imgenes a una aplicacin En este walkthrough, usted realizar las siguientes tareas: sume una imagen dinmicamente use el mtodo de carga () para cambiar una imagen incruste una imagen Los pasos 1. Abra el archivo del _ wt2.mxml Fundamentals de la carpeta del src en la raz los Fundamentos El proyecto. 2. Despus del primer componente de la Etiqueta, sume un control de Imagen con una fuente puesta a _ cheesecake.jpg de imagen /postre 3. Adale la propiedad del id con un valor de image1 al control de Imagen. < el mx:La imagen id "imagel" La fuente "imagen /postre _ cheesecake.jpg" 4. Corra la aplicacin. Usted debera ver una imagen de un pastel de queso. 5. Agregue a clic "image1.load ( ' la imagen /postre _ cookies.jpg ' )" para la Imagen El control. < el mx:La imagen id "image1" La fuente "imagen /postre _ cheesecake.jpg" El chasquido "imagel.load ( ' la imagen /postre _ cookies.jpg ' )" 6. Corra la aplicacin. 7. D un clic sobre la imagen. Usted debera ver el interruptor de imagen cuando usted da un clic sobre la imagen. 8. Despus del segundo componente de la Etiqueta, sume un componente de Imagen con fuente de @Embed (' la imagen /postre _ breadPudding.jpg ') < el mx:La imagen La fuente @ "incruste ( ' las imgenes El postre _ breadPudding.jpg ' )" 9. Corra la aplicacin. Usted debera ver una imagen de pudn del pan debajo de la imagen de lo El pastel de queso.

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 46 de 274 Diseando una aplicacin Flex con envases el trazado unos componentes del envase que usan aplicacin La regin rectangular de superficie del dibujo del Jugador del Destello La estructura jerrquica contiene controles y otros envases Deje incumplidos mtodos del trazado para controlar el trazado de sus nios, incluyendo dimensionando y el posicionamiento Todos los envases son nios de, y por consiguiente heredan de, el UIComponent y el Envase Las clases Mirando tipos diversos de envases con el Componente Flexible El explorador Acceda Al Explorador Componente Flexible Http://examples.adobe.com/flex3/componentexplorer/explorer.html

Figura 1: Los envases reparten del Explorador Flexible Cmo el trabajo de envases los envases usan un set de reglas del trazado para situar componentes Le libra de tener que preocuparse por posiciones Consiente resizing/re-position fcil con tamao de la ventana del navegador El algoritmo de tres pasos usado El Paso de Compromiso - Determina los trasfondos de la propiedad de los componentes de la aplicacin El paso de medida - El tamao de cada componente calculado de adentro para afuera El paso del trazado - Las canciones fuera de la aplicacin de envase extremo para ntimo EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 47 de 274 El ejemplo de aplicacin del restaurante pruebe a UI aplicativo

Figura 2: Las aplicaciones de muestra interactan

bajo la capucha trazado de la aplicacin del descubridor del restaurante

Figura 3: El trazado del envase de las aplicaciones EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 48 de 274 Los Envases de la Caja Hay dos tipos de envases de la Caja disponibles para pginas del trazado la caja vertical (VBox) la caja horizontal (HBox) El VBox El despliegue del trazado del VBox controla verticalmente, como en la imagen debajo

Figura 4: El ejemplo del VBox El siguiente trocito MXML sale a la vista cmo diseara usted estos tres controles usando el trazado del VBox < el mx:El VBox < el mx:La etiqueta < el mx:El botn < el mx:La etiqueta < el /mx:El VBox El HBox el HBox que el trazado exhibe controla horizontalmente, como en la siguiente imagen Figura 5: El ejemplo del HVBox El envase de lona el envase de Lona es un componente anticido del envase que le permite especificar posiciones absolutas usted puede usar posicionamiento absoluto especificando propiedades de la letra x y y de los componentes adentro lo

El envase < el mx:La lona < el mx:La letra x de la etiqueta "20" y "10" < el mx:La letra x de la etiqueta "100" y "10" < el /mx:La lona EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 49 de 274 los envases de lona le ofrecen mejor actuacin, porque el cliente tramitando poder no tiene que ser usado adentro Haga el pedido para determinar colocacin del objeto usted luego debe maniobrar todas las posiciones y todo trazado explcitamente, y la hoja de solicitud no se descamar cuando lo La ventana del navegador es de la que se ajust el tamao Especificando posiciones en un envase de Lona usted debe especificar la letra x y las propiedades y de todos los componentes de nio dentro del envase; El origen es lo La esquina dejada en parte superior de la Lona Figura 6: La letra x del envase de lona y los valores y este posicionamiento de la / y de la letra x es slo vlido para componentes en la Lona, no para componentes dentro de nio Los envases Incrustando un trazado en el < mx:> la etiqueta aplicativa al crear una aplicacin, el < mx:> la etiqueta aplicativa tiene la propiedad del trazado que manda El tipo de trazado que el envase Aplicativo utilizar los valores posibles para la propiedad del trazado Absoluto: Tal como usar un envase de Lona Horizontal: Tal como usar un envase del HBox La vertical: Atrsese en el pago, tal como usar un envase del VBox

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 50 de 274

Walkthrough 3: Usando trazados bsicos En este walkthrough, usted realizar las siguientes tareas: use la propiedad del trazado del componente Application para cambiar el trazado de tres Etiquetas la letra x de uso y los valores y para absolutamente situar controles combine trazados diferentes Los pasos 1. Abra el archivo Fundamentals Wt 3.mxml de la carpeta del src en la raz del proyecto. 2. Corra la aplicacin. Usted debera ver ese las tres Etiquetas todas exhiben encima de cada otro. Nota: Desde que usted est en trazado absoluto y ninguna letra x, las posiciones y estn especificadas, todo los controles se abortan posicin 0,0. Colocando posiciones absolutas en los controles 3. Coloque la letra x y las propiedades y como sigue. Etiqueta 1: La letra x "20" y "25" Label2: La letra x "0" y "300" Label3: La letra x "300" y "200" 4. Corra la aplicacin. Usted debera ver que las Etiquetas son ahora absolutamente situado. Usando un trazado horizontal 5. Seleccione el absolulte de valor de la propiedad del trazado de la etiqueta Aplicativa, y luego suprmalo. 6. En las citas para la propiedad del trazado, Ctrl-Space de la prensa para exhibir cdigo sugiriendo. Usted ver lo Los valores posibles para la propiedad. 7. Haga una seleccin horizontal del cdigo sugiriendo. 8. Corra la aplicacin. Usted debera ver las Etiquetas exhibidas horizontalmente. 9. Quite la letra x y valores y en todas las Etiquetas. 10. Corra la aplicacin. Usted debera ver las Etiquetas exhibidas horizontalmente tal cual hicieron antes. Usando un trazado vertical 11. Cambie el valor para la propiedad del trazado para vertical. 12. Corra la aplicacin. Usted debera ver las Etiquetas exhibidas verticalmente. Combinando trazados 13. Rodee las ltimas dos Etiquetas de un < mx:La etiqueta del > envase del HBox colocada. 14. Corra la aplicacin. Usted debera ver la primera Etiqueta en una lnea, luego el ltimo dos lado exhibido Labels Por lado. El envase vertical tuvo a dos nios, la primera Etiqueta y el HBox, as es que fueron exhibidos

Verticalmente. El HBox contiene el segundo y terceras Etiquetas como nios, as es que son exhibidos Horizontalmente. EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 51 de 274 Usando el envase del Panel el envase del Panel Envuelve mdulos aplicativos autnomos Figura 7: Seprese, el ego contuvo contenido en envase del panel Incluye un ttulo del panel, una barra de ttulos, un mensaje de estatus y un rea contento para sus nios Figura 8: Las partes de un Envase de Paneles Es representado en MXML con la etiqueta del Panel Usando la etiqueta del Panel < el mx:El estatus del "ttulo del panel" del ttulo del panel "el Estatus del panel" ... < el /mx:El panel las caractersticas La anchura predeterminada y las propiedades de altura se sedimentan para los valores que acomodan a todos los nios, pero no ser Ms grande que se le permite por su envase del padre Tronca contenido que es demasiado grande e implementa barras de desplazamiento segn el caso Tiene una propiedad del trazado que puede tomar los valores vertical absoluta, (atrsese en el pago) y Horizontal Tiene defecto acolchando valores de 0 pixels EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 52 de 274 Dimensionando contenido del envase el tamao de cualquier contenido acomodado dentro de un envase es relativo para ese envase,

no la caera maestra El rea aplicativo Figura 9: El contenido de nio dentro de un envase es dimensionado relativo a ese envase si el contenido de nio es dimensionado ms grande que el envase del padre, luego ser pelusa de la que se ajust el tamao caber dentro del padre El envase Figura 10: El contenido de nio ser del que se ajust el tamao para caber dentro del envase

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 53 de 274 Walkthrough 4: Dividindose en mdulos aplicativos Los paneles en este walkthrough, usted realizar las siguientes tareas: Sume envases del Panel alrededor de los controles Del Texto Manipule los valores del relleno del envase del Panel Los pasos 1. Abra el archivo del _ wt4.mxml Fundamentals de la carpeta del src del proyecto de la raz. 2. Corra la aplicacin. Usted debera ver cuatro controles del texto diseados horizontalmente dentro de la Aplicacin El envase. Sume envases del Panel y espcielos uniformemente 3. Sume una etiqueta del Panel alrededor del primer control del texto y mecanografe Cmo para Find Us para el ttulo de paneles La propiedad. 4. Sume una etiqueta del Panel alrededor del segundo y los terceres controles del texto y mecanografe Acerca de Cafe Townsend para lo La propiedad del ttulo del panel. 5. Agregue a 4-pixel acolchando para todos los lados de este panel usando al paddingBottom, paddingLeft, El paddingRight y paddingTop le dan estilo a las propiedades. 6. Sume una etiqueta del Panel alrededor del ltimo control del texto y escrbale a Take una Apariencia Ms Cercana para el panel La propiedad del ttulo. 7. Agregue a 10-pixel pa suene para todos los lados de este panel usando al paddingBottom, paddingLeft, El paddingRight y paddingTop le dan estilo a las propiedades. 8. El cdigo debera aparecer como sigue.

< el mx:Revista con paneles ttulo "cmo para Find Us" < el mx:La anchura del texto "300" El texto = " somos fciles ..." > < el /mx:El panel < el mx:Revista con paneles ttulo "acerca de Cafe Townsend" PaddingBottom "4" PaddingLeft "4" PaddingRight "4" PaddingTop "4" < el mx:La anchura del texto "300" El texto = " el vidente de Caf Townsend ..." > < el mx:La anchura del texto "300" El texto = " El nombre Cafe Townsend ..." > < el /mx:El panel < el mx:El ttulo del panel "la Toma una Apariencia Ms Cercana" PaddingBottom "10" PaddingLeft "10" PaddingRight "10" PaddingTop "10" < el mx:La anchura del texto "300" El texto = " Nuestro comedor privado ..." > < el /mx:El panel EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 54 de 274 9. Corra la aplicacin. Usted debera ver tres horizontalmente paneles colocados, cada uno con relleno diferente alrededor de su Los controles del texto de nio.

Figura 11: Tres paneles, cada teniendo trasfondos del relleno diferente

El envase ControlBar el envase ControlBar Sujeta componentes que se comparti por los otros nios en el Panel o el envase TitleWindow Figura 12: El envase ControlBar en un panel Debe ser la ltima etiqueta de nio del Panel o el envase TitleWindow Es una subclase de la clase de la Caja, y por consiguiente hereda las caractersticas del trazado del envase de la Caja Tiene una propiedad de direccin para determinar ya sea trazado vertical u horizontal (atrsese en el pago) del nio

Los componentes Deja incumplidas su anchura y propiedades de altura para los valores que acomodan a todos los nios, pero no ser mayor Que se le permite por su envase del padre Tiene defecto acolchando valores de 10 pixels Tiene propiedades del horizontalAlign y verticalAlign para controlar el posicionamiento del nio Los componentes Tiene propiedades del verticalGap y horizontalGap para establecer el espaciamiento entre nios < el mx:La anchura ControlBar "100 el %" < el mx:El texto de la etiqueta "la Cantidad" < el mx:NumericStepper id "myNS" < el mx:La anchura del espaciador "100 el %" < el mx:La etiqueta del botn Smese a la Carreta" El chasquido "addToCart ()"; > < el /mx:ControlBar

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 55 de 274 Walkthrough 5: Usando un envase ControlBar En este walkthrough, usted realizar las siguientes tareas: agregue a un ControlBar para un envase del Panel. adale los controles de nio al ControlBar Los pasos 1. Abra el archivo del _ wt5.mxml Fundamentals de la carpeta del src en la raz del proyecto. 2. Corra la aplicacin. Usted debera ver una imagen y algn texto dentro de un Panel. Sume el envase ControlBar 3. Como el ltimo elemento interior del componente del Panel, sume un componente ControIBar. 4. Coloque la propiedad de direccin (ancestral de clase de la Caja) del componente ControlBar para Horizontal. 5. Cambie la costumbre de Disear modo y arrastrar un componente del Botn de la carpeta de Controles de los Componentes Mire y caiga en el ControlBar. 6. Actualice la propiedad de la etiqueta del Botn para sumarse a la carreta. 7. Arrastre otro componente del Botn y caiga a la derecha del componente existente del Botn. 8. Actualice la propiedad de la etiqueta del Botn para sumarse al wishlist. 9. Corra la aplicacin. Usted debera ver al ControlBar con dos botones al pie del Panel

El envase.

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 56 de 274 Agregando controles de la interfaz del usuario los controles son componentes de la interfaz del usuario El Botn, TextInput, TextArea, ComboBox los controles son envases interiores colocados El control de la etiqueta vuelto a visitar el control de la Etiqueta se usa para exhibir una lnea sola de texto Hay dos formas que usted puede usar el < mx:> la etiqueta de la etiqueta para exhibir texto Especifique el texto como una propiedad, como en lo siguiente < el mx:El texto de la etiqueta "el Mundo de hola"! > Especifique el texto como una subetiqueta, como en lo siguiente < el mx:La etiqueta < el mx:El mundo del texto de > Hola! la etiqueta TextInput es mostrada en el cdigo debajo < el mx:El HBox < el mx:El texto de la etiqueta "el Nombre": > < el mx:La anchura TextInput "175" el texto = " Prefill con

La propiedad del texto " < el /mx:El HBox EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 57 de 274 Creando ataduras de datos entre componentes el atar datos es el proceso de atar los datos de un objeto para otro objeto dos formas para realizar una encuadernacin La sintaxis rizada ({ }) de abrazaderas < el mx:Atando > etiqueta Asignando nombres de instancia la mayora de etiquetas MXML se refieren a las clases Cuando usted usa la etiqueta, usted crea una instancia de la clase use la propiedad del id para asignar un nombre de instancia Le permite referirse al objeto creado < el mx:La etiqueta "el Hola" del texto id "labelOne" Creando ataduras de datos usando la sintaxis rizada de abrazaderas Asigna a una propiedad uno dinmico en lugar del valor literal Usa un mtodo de emisin /oyente < el mx:El texto de la etiqueta id "labelOne el hola" < el mx:El texto de la etiqueta "{ labelOne.text }" usando el < mx:Atando > etiqueta Especifique la fuente y valores de la propiedad del destino < el mx:El texto de la etiqueta id "labelTwo el hola" < el mx:La etiqueta id "labelThree" < el mx:Atando fuente "labelTwo.text" El destino "labelThree.text"

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 58 de 274

Walkthrough 6: Creando ataduras de datos En este walkthrough, usted realizar las siguientes tareas: convalide usar la sintaxis rizada de la abrazadera vincule un valor esttico de un componente para otro vincule un valor variable de un componente para otro Los pasos 1. Abra el archivo del _ wt6.mxml Fundamentals de la carpeta del src en la raz del proyecto. Creando una atadura de datos 2. Sume un Labelcontrol con un id de myLabel y un igual del texto del set de la propiedad para Esto es una Etiqueta. < el mx:El texto de la etiqueta id "myLabel sta es una Etiqueta" / ) 3. Adale otro control de la Etiqueta con un salto del texto de la propiedad a la propiedad de anchura de la etiqueta denominada El myLabel. < el mx:El texto de la etiqueta "{ myLabel.width }" 4. Corra la aplicacin. Usted debera ver la Etiqueta conteniendo texto, y la anchura exhibido debajo. La atadura para un valor dinmico 5. Addan mx:El Anteproyecto-Internet TextInput Tagwithan de mylnput. < el mx:TextInput id "mi Input" 6. Belowthe Textlnput, sume una Etiqueta con un salto del texto de la propiedad 1 texto mylnput.. < el mx:El texto de la etiqueta "{ myInput.text }" 7. Corra la aplicacin. Como usted introduce el dominio de aporte, usted debera ver que la atadura dinmicamente se altera lo El texto en la otra Etiqueta.

EL DOBLEZ ADOBINO 3 Desarrollando Aplicaciones Enriquecedoras del Cliente Pgina 59 de 274 Architecting una aplicacin con componentes MXML

en general, todo su cdigo aplicativo no debera ser adentro un archivo monoltico una mejor prctica es fracturarse sus hoja de solicitud en archivos mltiples MXML romperse en trocitos que su aplicacin en componentes tiene los siguientes beneficios Le permite a los desarrolladores mltiples dedicarse a la aplicacin Da facilidades para