Adobe Flex 3 - curso online

Transcripción

1 Adobe Flex 3 - curso online Índice Bienvenido Presentación de la formación y el formador. Lo más básico Fundamentos de uso de Flex: su entorno, el MXML y el AS3. Control de los proyectos Descripción de la tecnología Flex 03:56 Las Ria son ya el presente y el futuro en la web. Y la mejor herramienta para su creación es flex. En este vídeo se describe la tecnología flex Descarga e iinstalación de Flex Builder 02:33 Instalación del programa. Webs de referenca. Entorno de trabajo del Flex builder 3 Nuevo Proyecto. Descripción del entornod e trabajo en flex Builder 3 Desarrollo en la vista diseño Desarrollod e aplicaciones de modo visual utilizando la vista de diseño y los paneles de componentes y propiedades Desarrollo en la vista código 09:17 Desarrollo en vista código; uso de ayudas a la programación Combinar MXML con ActionScript 3 Control de las aplicaciones Flex usando ActionScript 3. Uso de Archivos de ActionScript externos Referencias a archivos de ActionScript externos para encapsular el código más eficientemente Optimización de los archivos finales 04:05 Creación de los swfs finales del proyecto: optimización de archivos. Las bases del MXML Fundamentos del diseño de RIA usando MXML. Utilización de contenedores y controles. Adición de diversos tipos de contenido Uso de layouts y navegadores 06:07 Uso de contenedores y navegadores para crear navegaciones complejas Uso de estados para cambiar la visualizacion Creación de aplicaciones que cambian de aspecto dependiendo de la interacción del usuario. Uso de estados Integración de imágenes y animaciones en Flex 05:46 Integración de elementos externos a Flex:uso de imágenes y de archivos Flash DataBinding: actualización dinámica de datos La base de Flex es el databinding. Gracias a él la actualización dinámica de datos se convierte en una tarea sencilla e intuitiva Uso de databinding para controlar dinámicamente los contenidos Aplicación de databinding para la actualización dinámica de datos en flex Aplicación de databinding a un formulario Formulario relleno automáticamente mediante databinding Recuperar datos de controles mediante databinding Intercambio de información entre controles de Flex meidante el uso de databinding Procesar en tiempo real datos mediante databinding Procesado de datos en tiempo real mediante ActionScript y aplicación de esos datos usando databinding Gestión de eventos: los ejecutores de Flex La base de control de la ejecución de la programación son los eventos: en este capítulos se muestra el uso de eventos en MXML y 1 / 5

2 La base de control de la ejecución de la programación son los eventos: en este capítulos se muestra el uso de eventos en MXML y ActionScript3 Excplicación del sistema de propagación de eventos en ActionScript 3 Descripción del proceso de propagación de eventos en ActionScript3 Uso básico de los eventos Uso de los eventos con ActionScript y MXML Uso del evento creationcomplete para la emisión de llamadas HTTPService Ejecución de código al iniciar la aplicación: uso del evento creationcomplete Recuperación de datos mediante eventos Recuperación de los datos seleccionados en un formulario utilizando eventos Uso de XMLs externos no se pueden concebir las Ria sin usar la carga de datos externos. En este apartado se aprende como cargar y gestionar datos XML externos Carga y control de datos XML externos mediante AS3 07:08 Uso de eventos para la carga de XML externos. Control de los datos cargados Filtrado de contenidos usando E4X 06:44 Ejemplo de uso del estandar E4X para la gestión de datos XML Procesado en Flex de XML usando AS3 Ejemplo de uso de ActionScript para la gestión de datos XML y su aplicación a controles Uso de ArrayCollection para aplicar datos XML a controles La alimentación de datos en controles se basa en varios tipos de datos que facilitan este proceso. Ejemplo de uso de XMLListCollection Vinculación de datos XML directa mediante XMLListCollection Integración de datos en controles usando databinding y XMLListCollection Vincular datos de un formulario con la selección de un control Tree Para mostrar los datos XML de manera ordenada e intuitiva, Flex posee el control Tree. En este vídeo se enseña a manejar este control Componentes En Flex el código necesario para generar elementos de ActionScript viene encapsulado como componentes que automatizan la tarea de crear aplicaciones ComboBox Uso del componente ComboBox para crear menñus desplgables Componente DataGrid Uso del componente DataGrid para mostrar tablas de datos XML AdvancedDataGrid El componente AdvancedDataGrid permite mostrar estructuras XML complejas mezclando la funcionalidad del Tree y del DataGrid en un sólo componente Componente DateChooser Uso de selectores de fechas Componente Repeater Creación de bucles mediante el componente Repeater Lista horizontal: HorizontalList Listas horizontales de elementos: ejemplo de lista de imágenes Lista vertical: TileList Listas veticales de elementos: ejemplo de lista de imágenes Creación de componentes personalizados Las grandes aplicaciones Ria van mucho más allá de el simple uso de componentes estandar. En este capítulo se crea un componente personalizado Arrastrar Una de las bases de la interacción intuitiva se basa en el drag and drop. En este capítulo se aprende a controlar la capacidad de arrastrar y soltar elementos propia de AS3 Drag and Drop simple 2 / 5

3 Creación de un ejemplo de drag and drop simple para mover datos Arrastrar contenidos entre componentes de la aplicación Uso completo del drag and drop: arrastre de elementos y recuperación de estos para añdirlos a otros componentes Gestión de la información realacionada con un drag and drop Gestión del XML asocioado a los elementos arrastrados entre componentes. Personalización del interface Flex admite una amplia gama de métods de personalizaci'no de los contenidos. En este capítulo se aprende a satisfacer las necesidades de cualquier diseñador Estilos CSS internos para personalizar componentes Uso de estilso CSS guardados en los swf que componen la aplicación Aplicación de archivos CSS externos Carga de datos XML externos para compartirlos por todas las aplicacioens de un proyecto. Uso de imágenes para modificar el aspecto de los controles Cambio del aspecto de los componentes usando imágenes en vez de formas vectoriales generadas mediante programación Uso de clases de ActionScript para controlar el skin de los controles Desarrollo de aspectos nuevos de componentes mediante AS3. Uso de la API ActionScript para controlar el skin Uso de la API de dibujo de Flash para la creación dinámica de aspectos de componentes. Creación de estilos usando el Style Explorer Una de las herramientas imprescindibles para el desarrollador Flex es el Style Explorer que hace intuitivo y fácil el uso de CSS en Flex Gráficos en Flex usando Charts Charts es el complemento ideal para que los desarrolladores Flex puedan crear gráficos dinámicos Creación de un gráfico de áreas Creación y descripción de un gráfico de areas Gráficos de burbujas Creación y descripción de un gráfico de burbujas Gráfico de columnas Creación y descripción de un gráfico de columnas Gráfico de sectores Creación y descripción de un gráfico de sectores Control del texto de leyenda mediante labelfunction Uso del método labelfunction para personalizar la leyenda de un gráfico Validación y formateo de datos Es muy rara la aplicación que no tenga un formulario, y en todas ellas es fundamental validar sus datos para evitar errores y para guiar al usuario en el momento de rellenarlos Control de la validación de campos en un formulario Uso de las clases estandar de validación de elementos de formulario Diferentes tipos de validación y sus propiedades Validación de distintos tipos de datos Validación mediante ActionScript Validaciones complejas mediante el uso de funciones de ActionScript Validación mediante expresiones regulares de un campo de mail Uso de expresiones regulares para la validación de Strings. Ejemplo de validación de un campo mail Formateo de datos Control del formateo de los datos que aparecen en un campo de texto. Navegación compleja Así como para organizar los contenidos en pantalla se usan los contenedores, para la organización de los procesos se usan los navegadores. 3 / 5

4 Navegación usando TabNavigator y LinkBar Navegación horizontal compleja usando navegadores de pestañas y de links Componente acordeón. Control del componente mediante ActionScript Uso del componente acordeón; control del acordeón mediante ActionScript Menús personalizados controlados por XML Creación de menús personalizados. Estructura del XML necesario para alimentarlos Crear componentes desde la suite CS3 Uso de los distintos programas de la suite de Adobe CS3 para crear aspectos personalizados en nuestras aplicaciones Flex Cargar swfs y símbolos de bibliotecas de Flash Descripción del proceso de creación de skins personalizados usando Flash Instalación del Flex comonent kit para Flash CS3 02:57 Instalación y uso básico del Flex comonent kit para Flash CS3 Recuperar componentes de la clase UIMovieClip en Flex Uso de la clase UIMovieclip para crear componentes personalizados importables en Flex Rediseñar componentes propios de flex con Flash y el Flex Skin Dseign Rediseñar skins en flash es una tarea sencialla gracias al uso del Flex Skin Design Modificando el aspecto de los componentes Flex con Fireworks CS3 Ejemplos de creacion de los pngs necesarios para la personalizacion de componetes usando Fireworks. Instalación del Flex skin design en Fireworks Modificando el aspecto de los componentes Flex con Photoshop CS3 Ejemplos de creacion de los pngs necesarios para la personalizacion de componetes usando Photoshop. Instalación del Flex skin design en Photoshop Modificando el aspecto de los componentes Flex con Illustrator CS3 Ejemplos de creacion de los pngs necesarios para la personalizacion de componetes usando Illustrator. Instalación del Flex skin design en Illustrator Crear contenidos Flex desde Fireworks Ya no hace falta depender de Flash para crear componentes propios. Creación de componentes personalizados flex desde Fireworks Flex con PHP y MySQL Como ejemplo de aplicacion de servidor para suministrar datos a nuestras RIA hemos elegido para este curso la tecnología PHP. En este capítulo se enseña a instalar y desarrollar con PHP y MySQL Instalación de PHP, apache y MYSQL para el desarrollo de aplicaciones de servidor 09:36 Instalación automática mediante EasyPHP para desarrolar con PHP, apache, SQL y MySQL. Recuperación de datos php desde Flex 07:32 Creación de un PHP para recuperar datos mediante XML y su aplicación mediante DataBinding a un componente Flex Cambio de imágenes dinámicamente Control de imágenes dinámicas medianto PHP y XML Desarrollo con Flex Una vez dentro del proceso de desarrollo en Flex es necesario poder depurar errores, controlar las cagras de datos y preparar la aplicación apra subirla a internet. En este capítulo se aprende a hacerlo Uso del debuggin de flex Descripción y uso de las opciones de depuración de Flex. Creación de precargas para aplicaciones flex Control de precargas desde Flex. Precarga básica. Precarga personalizada Exportación optimizada de la aplicación Exportación final de los swf que componen las aplicaciones flex AIR Adobe Air da un paso más allá en la creación de aplicaciones ricas. En este capítlo se aprende a usar Flash para generar aplicaciones AIR Descripción e instalación de Adobe AIR 04:52 Descripción del runtime AIR. Instalación de la aplicación Creación de una RIA usando Flex y AIR 04:20 4 / 5

5 Creación de un ejemplo de xml cargado a través de PHP en un DataGrid que corra como aplicación de escritorio Interacción con el escritorio 05:40 Creación de un ejemplo simple de drag and drop sobre el escritorio 5 / 5