Adobe Flex es un framework gratuito de código abierto que simplifica la creación de aplicaciones ricas para crear interfaces de usuario de alta interactividad. Es parte de la Plataforma Flash de Adobe y permite publicar aplicaciones para ser ejecutadas en la Web, como aplicaciones de escritorio, para dispositivos móviles, tabletas y hasta en los televisores. Durante el libro, se cubren las herramientas Adobe Flash Builder, de programación en Flex y ActionScript, y Adobe Flash Catalyst, la cual permite a los diseñadores de Illustrator y PhotoShop convertir diseños en elementos interactivos para Flex, sin necesidad de escribir ni una línea de código. Este libro inicia a aquellos que no conocen Flex ni la Plataforma Flash y actualiza a quienes trabajaron con versiones anteriores del framework, introduciendo también al lector en la plataforma AIR. Sepa como usar: Flash Builder, Flash Catalyst y preparar los diseños de arte en Illustrator, PhotoShop y Fireworks. Aprenda sobre: Flex Framework 4.5 y la publicación de aplicaciones para todas las plataformas disponibles en el mercado utilizando AIR 2.5ÍndiceC1.Mundo Flex...............................1 Aplicaciones Ricas de Internet.......1 ¿Qu son?......................................1 Caracter¡sticas ................................2 Tipos de aplicaci¢n ........................3 Ventajas .........................................3 Desventajas ....................................4 Capacidad de uso...........................4 El bot¢n Atr s del navegador .........4 Favoritos o marcadores ...................4 Manejo de errores............................5 ¿Qu no es Flex?..............................5 Entonces, ¿qu es Flex?..................5 El Framework....................................6 Historia de Flex.................................7 Flex 1.0...........................................7 Flex 2.0...........................................7 Flex 3.0...........................................8 Flex 4.X...........................................9 ¿D¢nde encaja Flex en la arquitectura de un sitio Web? ......10 La aplicaci¢n Flex .........................10 Publicaci¢n de contenidos ............10 ¿D¢nde encaja Flex en la tarea de un dise¿ador? ...........................10 ¿Cu ndo utilizar Flex en un proyecto? .......................................12 ¿Para qu se utiliza?.....................12 Arquitectura de una aplicaci¢n Flex..................................................13 Aplicaciones modulares ................14 Productos, entornos y herramientas ..................................14 Amethyst ......................................15 FDT ..............................................15 FlashDevelop ................................15 Adobe Flash Builder .....................16 Protocolo AMF................................16 AMF0............................................17 AMF3 ...........................................17 Utilizaci¢n .....................................18 Integraci¢n .....................................18 Ajax ..............................................18 Adobe Flash .................................21 Importar elementos de biblioteca SWF.............................. 21 Flex Component Kit....................... 22 Photoshop e Illustrator ..................23 Integraci¢n con el servidor............24 ColdFusion ................................... 25 Configuraci¢n del servidor ........... 27 ColdFusion Components .............. 28 PHP.............................................. 29 AMFPHP........................................ 32 ZendAMF....................................... 35 Java.............................................. 37 Remote Objects............................ 38 Proyecto Merapi............................ 38 .NET ............................................. 39 WebOrb ........................................ 40 FluorineFX..................................... 41 Aplicaciones de escritorio con Adobe AIR................................ 41 ¿Qu es Adobe Integrated Runtime? ...................................... 42 Caracter¡sticas .............................. 45 Multiplataforma ............................. 45 Almacenamiento........................... 45 Acceso al sistema operativo......... 46 Actualizaci¢n ................................ 46 ¿Hacia d¢nde va AIR? .................. 47 C2. Flex Framework 4.x ............ 49 Anatom¡a de una aplicaci¢n Flex.. 49 Espacios de nombres ................... 49 Contenedor Application ................ 52 Clases ActionScript ...................... 52 MXML 2006..................................... 53 Contenedores .............................. 53 Estilos CSS................................... 54 Estados ........................................ 55 MXML 2009..................................... 56 Contenedores............................... 57 Declaration.................................... 59 Private .......................................... 60 Library y Definition......................... 63 Manos a la obra ............................. 65 Archivos del proyecto.................... 69 MXML........................................... 69 ActionScript .................................. 74 SWC............................................. 75 Propiedades ................................... 76 Application ................................... 76 Clases y componentes ................. 78 Valores literales ............................ 78 Valores de referencia ................... 78 Valores de URL ............................. 79 Etiquetas de propiedades ............ 80 Estructuras de datos .................... 80 Modelo de eventos ........................ 82 La clase event ............................. 84 Propiedades.................................. 84 Sub-clases ................................... 85 Manipulaci¢n de eventos .............. 85 Aspecto visual................................ 87 Modelo de maquetado.................. 88 Skins ............................................ 91 Anatom¡a de SkinClass................. 91 Definici¢n de un Skin.................... 92 Aplicaci¢n de skins....................... 94 Hojas de estilo CSS ...................... 96 Definici¢n de estilos...................... 96 Selectores ..................................... 99 Herencia ......................................105 Estilos globales........................... 107 Expresiones de enlace................. 108 Enlace de dos v¡as...................... 113 Estados.......................................... 116 Private .......................................... 60 Library y Definition......................... 63 Manos a la obra ............................. 65 Archivos del proyecto.................... 69 MXML........................................... 69 ActionScript .................................. 74 SWC............................................. 75 Propiedades ................................... 76 Application ................................... 76 Clases y componentes ................. 78 Valores literales ............................ 78 Valores de referencia ................... 78 Valores de URL ............................. 79 Etiquetas de propiedades ............ 80 Estructuras de datos .................... 80 Modelo de eventos ........................ 82 La clase event ............................. 84 Propiedades.................................. 84 Sub-clases ................................... 85 Manipulaci¢n de eventos .............. 85 Aspecto visual................................ 87 Modelo de maquetado.................. 88 Skins ............................................ 91 Anatom¡a de SkinClass................. 91 Definici¢n de un Skin.................... 92 Aplicaci¢n de skins.......................94 Hojas de estilo CSS ...................... 96 Definici¢n de estilos...................... 96 Selectores ..................................... 99 Herencia ......................................105 Estilos globales........................... 107 Expresiones de enlace................. 108 Enlace de dos v¡as...................... 113 Estados.......................................... 116 Creaci¢n de estados .................. 117 Cambio de estados .................... 118 Aparici¢n y desaparici¢n de componentes ............................. 121 Grupos de estados ..................... 122 Eventos de estados .................... 123 Transiciones................................ 125 C3. Componentes Flex 4.x...... 129 Introducci¢n a los componentes Flex 4.x........................................... 129 UIComponent ............................. 130 Dimensiones ............................... 130 Posicionamiento...........................134 Posicionamiento absoluto ............ 134 Posicionamiento relativo .............. 135 Rotaci¢n.......................................135 Eventos.........................................137 Componentes visuales................ 137 Group.......................................... 140 SkinnableContainer..................... 141 BorderContainer.......................... 143 Panel........................................... 143 DataGroup y SkinnableData Container..................................... 146 Controles de texto....................... 148 Label............................................150 RichText ...................................... 151 RichEditableText ......................... 152 TextInput ..................................... 155 TextArea ...................................... 156 Controles de Acci¢n ................... 158 Button ......................................... 158 CheckBox ................................... 159 RadioButton ................................ 159 ToggleButton .............................. 163 ButtonBar.................................... 164 Controles de lista ........................ 165 List ...............................................166 DropDownList ..............................168 Controles de navegaci¢n............. 170 NavigatorContent.........................171 MX ViewStack ..............................171 MX TabNavigator .........................174 MX Accordion ............................. 176 Efectos ....................................... 177 Sincronizaci¢n de efectos .......... 179 Animate ...................................... 180 Efectos de propiedades ............. 183 Efectos de transformaci¢n ......... 184 Efectos Pixel-shader .................. 185 Filtros............................................. 187 Componentes personalizados.... 189 Soporte 3D.................................... 193 Efectos 3D................................... 195 C4. Flash Builder........................ 199 Flash Builder................................. 199 Instalaci¢n y configuraci¢n......... 202 Preferencias de Flash Builder....... 203 Creando un proyecto................... 204 Trabajando en dise¿o .................. 208 Layout Model ............................. 209 Propiedades y Eventos ............... 211 Efectos ....................................... 213 Skins .......................................... 215 Creaci¢n de skins ........................215 Trabajando con CSS .................. 218 Estilizando componentes ............ 219 Trabajando en c¢digo ................. 223 Sintaxis de c¢digo ...................... 223 Ayuda y atajos de teclado ........... 224 Soporte ASDoc en el MXML ....... 227 Sintaxis ....................................... 228 Soporte en Flash Builder ............ 231 Utilizaci¢n de la herramienta ASDoc ........................................ 232 Optimizando el trabajo ............... 235 Soporte de tecnolog¡as de servidor.................................. 235 Enlace de datos ......................... 238 Formularios ................................. 241 Plantillas de documentos ............ 242 Asistente de c¢digo y refactoring................................... 245 Debugger y NetStatus................. 248 Profiler......................................... 251 C5. Flash Catalyst..................... 255 ¿Qu es Flash Catalyst?.............. 256 Flujo de trabajo dise¿ador-desarrollador ................................ 257 El entorno de trabajo .................. 258 Paneles ...................................... 258 Heads Up Display ....................... 262 Flash Catalyst para dise¿adores.................................. 263 Adaptaci¢n de contenidos para Flash Catalyst...................... 264 Importaci¢n de contenidos.......... 265 Photoshop................................... 266 Illustrator...................................... 268 FXG............................................. 270 Componentes de Flash Catalyst......................................... 271 Del dise¿o al componente........... 271 Biblioteca ................................... 274 Botones interactivos ................... 277 Checkbox y Radio....................... 279 Deslizadores ............................... 280 Contenidos deslizables ............... 280 Listas de datos ........................... 282 Datos en tiempo de dise¿o ......... 285 Interactividad ............................... 286 Transiciones y l¡nea de tiempo..... 289 Secuencias de acci¢n ................ 293 Publicando el proyecto................ 294 Optimizando los contenidos........ 294 Publicaci¢n para la Web.............. 298 Publicaci¢n para escritorio con Adobe AIR............................ 301 Flash Catalyst para desarrolladores............................. 301 De Catalyst a Builder................... 302 Optimizaci¢n del c¢digo generado por Flash Catalyst........ 305 C6. Dise¿ando con FXG........... 309 Concepto....................................... 309 Modelo de rasterizaci¢n ............. 310 Implementaci¢n .......................... 310 Elementos gr ficos...................... 312 Rellenos .......................................312 Bordes .........................................313 Formas primitivas ....................... 313 Rect ..................................... 313 Ellipse .......................................314 Line ..........................................315 Textos ......................................... 316 Span .................................... 317 P rrafos ................................ 317 Div ...................................... 318 Img ...................................... 319 Links .................................... 319 Im genes ................................... 320 Paths .......................................... 322 move to ................................ 323 line to ................................... 324 curve to ................................ 324 clasePath............................... 325 Grupos ....................................... 325 S¡mbolos y Librer¡a ..................... 328 Transformaciones........................ 331 Transformaciones discretas.........331 Elemento transform .....................332 M scaras.................................... 335 C7. Servidor y componentes de datos....................................... 339 Componentes de datos............... 340 Enlazando datos.......................... 341 Controles de lista ........................ 343 DataGrid ..................................... 346 ItemRenderer ............................. 350 Conexi¢n con el servidor............. 360 HTTPService............................... 361 Webservice ................................ 366 XML con E4X.............................. 373 Expresiones de filtrado ............... 375 Enlace de datos utilizando E4X 376 Objetos remotos .......................... 378 ColdFusion ................................. 379 PHP............................................ 382
Adobe Flex es un framework gratuito de código abierto que simplifica la creación de aplicaciones ricas para crear interfaces de usuario de alta interactividad. Es parte de la Plataforma Flash de Adobe y permite publicar aplicaciones para ser ejecutadas en la Web, como aplicaciones de escritorio, para dispositivos móviles, tabletas y hasta en los televisores. Durante el libro, se cubren las herramientas Adobe Flash Builder, de programación en Flex y ActionScript, y Adobe Flash Catalyst, la cual permite a los diseñadores de Illustrator y PhotoShop convertir diseños en elementos interactivos para Flex, sin necesidad de escribir ni una línea de código. Este libro inicia a aquellos que no conocen Flex ni la Plataforma Flash y actualiza a quienes trabajaron con versiones anteriores del framework, introduciendo también al lector en la plataforma AIR. Sepa como usar: Flash Builder, Flash Catalyst y preparar los diseños de arte en Illustrator, PhotoShop y Fireworks. Aprenda sobre: Flex Framework 4.5 y la publicación de aplicaciones para todas las plataformas disponibles en el mercado utilizando AIR 2.5ÍndiceC1.Mundo Flex...............................1 Aplicaciones Ricas de Internet.......1 ¿Qu son?......................................1 Caracter¡sticas ................................2 Tipos de aplicaci¢n ........................3 Ventajas .........................................3 Desventajas ....................................4 Capacidad de uso...........................4 El bot¢n Atr s del navegador .........4 Favoritos o marcadores ...................4 Manejo de errores............................5 ¿Qu no es Flex?..............................5 Entonces, ¿qu es Flex?..................5 El Framework....................................6 Historia de Flex.................................7 Flex 1.0...........................................7 Flex 2.0...........................................7 Flex 3.0...........................................8 Flex 4.X...........................................9 ¿D¢nde encaja Flex en la arquitectura de un sitio Web? ......10 La aplicaci¢n Flex .........................10 Publicaci¢n de contenidos ............10 ¿D¢nde encaja Flex en la tarea de un dise¿ador? ...........................10 ¿Cu ndo utilizar Flex en un proyecto? .......................................12 ¿Para qu se utiliza?.....................12 Arquitectura de una aplicaci¢n Flex..................................................13 Aplicaciones modulares ................14 Productos, entornos y herramientas ..................................14 Amethyst ......................................15 FDT ..............................................15 FlashDevelop ................................15 Adobe Flash Builder .....................16 Protocolo AMF................................16 AMF0............................................17 AMF3 ...........................................17 Utilizaci¢n .....................................18 Integraci¢n .....................................18 Ajax ..............................................18 Adobe Flash .................................21 Importar elementos de biblioteca SWF.............................. 21 Flex Component Kit....................... 22 Photoshop e Illustrator ..................23 Integraci¢n con el servidor............24 ColdFusion ................................... 25 Configuraci¢n del servidor ........... 27 ColdFusion Components .............. 28 PHP.............................................. 29 AMFPHP........................................ 32 ZendAMF....................................... 35 Java.............................................. 37 Remote Objects............................ 38 Proyecto Merapi............................ 38 .NET ............................................. 39 WebOrb ........................................ 40 FluorineFX..................................... 41 Aplicaciones de escritorio con Adobe AIR................................ 41 ¿Qu es Adobe Integrated Runtime? ...................................... 42 Caracter¡sticas .............................. 45 Multiplataforma ............................. 45 Almacenamiento........................... 45 Acceso al sistema operativo......... 46 Actualizaci¢n ................................ 46 ¿Hacia d¢nde va AIR? .................. 47 C2. Flex Framework 4.x ............ 49 Anatom¡a de una aplicaci¢n Flex.. 49 Espacios de nombres ................... 49 Contenedor Application ................ 52 Clases ActionScript ...................... 52 MXML 2006..................................... 53 Contenedores .............................. 53 Estilos CSS................................... 54 Estados ........................................ 55 MXML 2009..................................... 56 Contenedores............................... 57 Declaration.................................... 59 Private .......................................... 60 Library y Definition......................... 63 Manos a la obra ............................. 65 Archivos del proyecto.................... 69 MXML........................................... 69 ActionScript .................................. 74 SWC............................................. 75 Propiedades ................................... 76 Application ................................... 76 Clases y componentes ................. 78 Valores literales ............................ 78 Valores de referencia ................... 78 Valores de URL ............................. 79 Etiquetas de propiedades ............ 80 Estructuras de datos .................... 80 Modelo de eventos ........................ 82 La clase event ............................. 84 Propiedades.................................. 84 Sub-clases ................................... 85 Manipulaci¢n de eventos .............. 85 Aspecto visual................................ 87 Modelo de maquetado.................. 88 Skins ............................................ 91 Anatom¡a de SkinClass................. 91 Definici¢n de un Skin.................... 92 Aplicaci¢n de skins....................... 94 Hojas de estilo CSS ...................... 96 Definici¢n de estilos...................... 96 Selectores ..................................... 99 Herencia ......................................105 Estilos globales........................... 107 Expresiones de enlace................. 108 Enlace de dos v¡as...................... 113 Estados.......................................... 116 Private .......................................... 60 Library y Definition......................... 63 Manos a la obra ............................. 65 Archivos del proyecto.................... 69 MXML........................................... 69 ActionScript .................................. 74 SWC............................................. 75 Propiedades ................................... 76 Application ................................... 76 Clases y componentes ................. 78 Valores literales ............................ 78 Valores de referencia ................... 78 Valores de URL ............................. 79 Etiquetas de propiedades ............ 80 Estructuras de datos .................... 80 Modelo de eventos ........................ 82 La clase event ............................. 84 Propiedades.................................. 84 Sub-clases ................................... 85 Manipulaci¢n de eventos .............. 85 Aspecto visual................................ 87 Modelo de maquetado.................. 88 Skins ............................................ 91 Anatom¡a de SkinClass................. 91 Definici¢n de un Skin.................... 92 Aplicaci¢n de skins.......................94 Hojas de estilo CSS ...................... 96 Definici¢n de estilos...................... 96 Selectores ..................................... 99 Herencia ......................................105 Estilos globales........................... 107 Expresiones de enlace................. 108 Enlace de dos v¡as...................... 113 Estados.......................................... 116 Creaci¢n de estados .................. 117 Cambio de estados .................... 118 Aparici¢n y desaparici¢n de componentes ............................. 121 Grupos de estados ..................... 122 Eventos de estados .................... 123 Transiciones................................ 125 C3. Componentes Flex 4.x...... 129 Introducci¢n a los componentes Flex 4.x........................................... 129 UIComponent ............................. 130 Dimensiones ............................... 130 Posicionamiento...........................134 Posicionamiento absoluto ............ 134 Posicionamiento relativo .............. 135 Rotaci¢n.......................................135 Eventos.........................................137 Componentes visuales................ 137 Group.......................................... 140 SkinnableContainer..................... 141 BorderContainer.......................... 143 Panel........................................... 143 DataGroup y SkinnableData Container..................................... 146 Controles de texto....................... 148 Label............................................150 RichText ...................................... 151 RichEditableText ......................... 152 TextInput ..................................... 155 TextArea ...................................... 156 Controles de Acci¢n ................... 158 Button ......................................... 158 CheckBox ................................... 159 RadioButton ................................ 159 ToggleButton .............................. 163 ButtonBar.................................... 164 Controles de lista ........................ 165 List ...............................................166 DropDownList ..............................168 Controles de navegaci¢n............. 170 NavigatorContent.........................171 MX ViewStack ..............................171 MX TabNavigator .........................174 MX Accordion ............................. 176 Efectos ....................................... 177 Sincronizaci¢n de efectos .......... 179 Animate ...................................... 180 Efectos de propiedades ............. 183 Efectos de transformaci¢n ......... 184 Efectos Pixel-shader .................. 185 Filtros............................................. 187 Componentes personalizados.... 189 Soporte 3D.................................... 193 Efectos 3D................................... 195 C4. Flash Builder........................ 199 Flash Builder................................. 199 Instalaci¢n y configuraci¢n......... 202 Preferencias de Flash Builder....... 203 Creando un proyecto................... 204 Trabajando en dise¿o .................. 208 Layout Model ............................. 209 Propiedades y Eventos ............... 211 Efectos ....................................... 213 Skins .......................................... 215 Creaci¢n de skins ........................215 Trabajando con CSS .................. 218 Estilizando componentes ............ 219 Trabajando en c¢digo ................. 223 Sintaxis de c¢digo ...................... 223 Ayuda y atajos de teclado ........... 224 Soporte ASDoc en el MXML ....... 227 Sintaxis ....................................... 228 Soporte en Flash Builder ............ 231 Utilizaci¢n de la herramienta ASDoc ........................................ 232 Optimizando el trabajo ............... 235 Soporte de tecnolog¡as de servidor.................................. 235 Enlace de datos ......................... 238 Formularios ................................. 241 Plantillas de documentos ............ 242 Asistente de c¢digo y refactoring................................... 245 Debugger y NetStatus................. 248 Profiler......................................... 251 C5. Flash Catalyst..................... 255 ¿Qu es Flash Catalyst?.............. 256 Flujo de trabajo dise¿ador-desarrollador ................................ 257 El entorno de trabajo .................. 258 Paneles ...................................... 258 Heads Up Display ....................... 262 Flash Catalyst para dise¿adores.................................. 263 Adaptaci¢n de contenidos para Flash Catalyst...................... 264 Importaci¢n de contenidos.......... 265 Photoshop................................... 266 Illustrator...................................... 268 FXG............................................. 270 Componentes de Flash Catalyst......................................... 271 Del dise¿o al componente........... 271 Biblioteca ................................... 274 Botones interactivos ................... 277 Checkbox y Radio....................... 279 Deslizadores ............................... 280 Contenidos deslizables ............... 280 Listas de datos ........................... 282 Datos en tiempo de dise¿o ......... 285 Interactividad ............................... 286 Transiciones y l¡nea de tiempo..... 289 Secuencias de acci¢n ................ 293 Publicando el proyecto................ 294 Optimizando los contenidos........ 294 Publicaci¢n para la Web.............. 298 Publicaci¢n para escritorio con Adobe AIR............................ 301 Flash Catalyst para desarrolladores............................. 301 De Catalyst a Builder................... 302 Optimizaci¢n del c¢digo generado por Flash Catalyst........ 305 C6. Dise¿ando con FXG........... 309 Concepto....................................... 309 Modelo de rasterizaci¢n ............. 310 Implementaci¢n .......................... 310 Elementos gr ficos...................... 312 Rellenos .......................................312 Bordes .........................................313 Formas primitivas ....................... 313 Rect ..................................... 313 Ellipse .......................................314 Line ..........................................315 Textos ......................................... 316 Span .................................... 317 P rrafos ................................ 317 Div ...................................... 318 Img ...................................... 319 Links .................................... 319 Im genes ................................... 320 Paths .......................................... 322 move to ................................ 323 line to ................................... 324 curve to ................................ 324 clasePath............................... 325 Grupos ....................................... 325 S¡mbolos y Librer¡a ..................... 328 Transformaciones........................ 331 Transformaciones discretas.........331 Elemento transform .....................332 M scaras.................................... 335 C7. Servidor y componentes de datos....................................... 339 Componentes de datos............... 340 Enlazando datos.......................... 341 Controles de lista ........................ 343 DataGrid ..................................... 346 ItemRenderer ............................. 350 Conexi¢n con el servidor............. 360 HTTPService............................... 361 Webservice ................................ 366 XML con E4X.............................. 373 Expresiones de filtrado ............... 375 Enlace de datos utilizando E4X 376 Objetos remotos .......................... 378 ColdFusion ................................. 379 PHP............................................ 382 