adobe flex framework v3.5. arquitectura (cliente)
TRANSCRIPT
![Page 1: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/1.jpg)
Adobe Flex Framework
v3.5
![Page 2: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/2.jpg)
Arquitectura (cliente)
![Page 3: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/3.jpg)
Arquitectura (cliente)
• Framework basado en mensajes para interactuar con el servidor
• Se definen canales que encapsulan el comportamiento de la conexión entre el cliente y el servidor
![Page 4: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/4.jpg)
Arquitectura (servidor)
![Page 5: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/5.jpg)
Arquitectura (servidor)
• Servidor BlazeDS contenido en aplicación web J2EE
• Cliente hace llamadas a través de canales y la respuesta es enviada a un endPoint
![Page 6: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/6.jpg)
FLEX 3.5
(Prácticas)
![Page 7: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/7.jpg)
Lesson 1 - Contenedores
• Contenedores de controles para formar el layout principal de la aplicación
• Comprobar diferentes comportamientos de los contenedores y los controles insertados en ellos
• Controles básicos para introducción de texto, mostrar mensajes, elegir fecha, seleccionar opciones…
![Page 8: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/8.jpg)
Lesson 1 - Contenedores
• Canvas, HBox, HDividedBox, HRule, VBox, VDividedBox, VRule, Grid, ApplicationControlBar, Panel, Spacer
• Text, Label, TextInput, Button, TextArea, RadioButton, DateField, DateChooser
![Page 9: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/9.jpg)
Lesson 2 - Eventos
• Capturar diferentes acciones del usuario realizadas sobre cada control
• Diferentes controles tienen diferentes eventos asociados aunque muchos son comunes
![Page 10: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/10.jpg)
Lesson 2 - Eventos
• click, dobleClick• mouseOver, mouseUp• buttonDown• change, onItemClick• keyDown, keyUp
![Page 11: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/11.jpg)
Lesson 3 – Popup
• Mostrar avisos mediante ventanas emergentes que situamos donde queramos
• Posibilidad de que sean ventanas modales y no modales
• Ventanas emergentes complejas con posibilidad de tener también componentes con los que interactuar
![Page 12: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/12.jpg)
Lesson 3 – Popup
• PopupManager– crear– centrar– eliminar– modal o no-modal
![Page 13: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/13.jpg)
Lesson 4 – Contenedores de datos
• Contenedores para visualizar diferentes colecciones de datos
• Capacidad de mostrar diferentes campos de la colección
![Page 14: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/14.jpg)
Lesson 4 – Contenedores de datos
• DataGrid• TileList• HorizontalList• ComboBox• List• Repeater
![Page 15: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/15.jpg)
Lesson 5 – Contenedores avanzados
• Contenedores con posibilidades de visualización más complejas y/o acciones del usuario más avanzadas
![Page 16: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/16.jpg)
Lesson 5 – Contenedores avanzados
• Grid agrupado• Grid paginado• Panel colapsable
![Page 17: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/17.jpg)
Lesson 6 – Pestañas
• Configuración de la navegación de la aplicación o de una parte de la misma
![Page 18: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/18.jpg)
Lesson 6 – Pestañas
• TabBar• ViewStack• LinkBar• TabNavigator• Accordion
![Page 19: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/19.jpg)
Lesson 7 - Formularios
• Formularios en los que introducir una serie de datos formando una colección que es enviada
• Posibilidad de añadir validaciones en los campos del formulario según su tipo
![Page 20: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/20.jpg)
Lesson 7 - Formularios
• Form• FormItem• StringValidator• NumberValidator
![Page 21: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/21.jpg)
Lesson 8 - Skinning
• Configuración de la apariencia de los controles mediante la definición genérica de estilos o definición individualizada de estilos
• Look & Feel
![Page 22: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/22.jpg)
Lesson 8 - Skinning
• CSS• Propiedad styleName
![Page 23: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/23.jpg)
Lesson 9 – Acceso a datos
• Definir los diferentes orígenes de datos de los que se van a obtener los datos
• Comunicación con el exterior de la aplicación cliente
![Page 24: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/24.jpg)
Lesson 9 – Acceso a datos
• RemoteObject• HttpService• WebService
![Page 25: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/25.jpg)
Lesson 10 – Spring Flex
• Usar Spring como contenedor de beans que después para después definir las uniones con J2EE mediante una factoría de Spring.
![Page 26: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/26.jpg)
Lesson 10 – Spring Flex
• Contexto Spring• Factoría Spring
![Page 27: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/27.jpg)
Lesson 11 – Patron Observer
• Suscribirse al cambio de un dato para poder lanzar la ejecución de un método o acción
![Page 28: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/28.jpg)
Lesson 11 – Patron Observer
• Listener - Observer
![Page 29: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/29.jpg)
Lesson 12 - Cairngorm
• Formar una arquitectura MVC para controlar las acciones del usuario en forma de eventos
• Manipulación de datos para su transformación, evitando introducir lógica de negocio
![Page 30: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/30.jpg)
Lesson 12 - Cairngorm
• Arquitectura• Generador de código
![Page 31: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/31.jpg)
Lesson 13 - Gráficos
• Ofrecer una visualización de datos en forma de diferentes gráficas
• Posibilidad de uso de diferentes librerías externas de gráficas
• Reusar una misma colección de datos para varias gráficas
![Page 32: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/32.jpg)
Lesson 13 - Gráficos
• Propios– BarChart– ColumnChart– LineChart– PieChart
• Extras– Gauge– Elixir
![Page 33: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/33.jpg)
Lesson 14 – Estados y transiciones
• Definición de diferentes estados de la aplicación de forma declarativa
• Establecer las acciones y efectos de la transición de un estado a otro estableciendo secuencias y paralelismos
![Page 34: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/34.jpg)
Lesson 14 – Estados y transiciones
• Estados• Transiciones
![Page 35: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/35.jpg)
Lesson 15 – Componentes y módulos
• Inclusión de diferentes sub-aplicaciones dentro de otras aplicaciones
• Los componentes se compilan junto a la aplicación en la que se inserten
• Los módulos son compilados independientemente de la aplicación en la que se inserten
![Page 36: Adobe Flex Framework v3.5. Arquitectura (cliente)](https://reader036.vdocuments.mx/reader036/viewer/2022062307/5533f44d550346795e8b49b4/html5/thumbnails/36.jpg)
Lesson 15 – Componentes y módulos
• Componentes• Módulos