Adobe Flex Framework v3.5. Arquitectura (cliente)

36
Adobe Flex Framework v3.5

Transcript of Adobe Flex Framework v3.5. Arquitectura (cliente)

Page 1: Adobe Flex Framework v3.5. Arquitectura (cliente)

Adobe Flex Framework

v3.5

Page 2: Adobe Flex Framework v3.5. Arquitectura (cliente)

Arquitectura (cliente)

Page 3: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

Arquitectura (servidor)

Page 5: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

FLEX 3.5

(Prácticas)

Page 7: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

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)

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)

Lesson 2 - Eventos

• click, dobleClick• mouseOver, mouseUp• buttonDown• change, onItemClick• keyDown, keyUp

Page 11: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

Lesson 3 – Popup

• PopupManager– crear– centrar– eliminar– modal o no-modal

Page 13: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

Lesson 4 – Contenedores de datos

• DataGrid• TileList• HorizontalList• ComboBox• List• Repeater

Page 15: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

Lesson 5 – Contenedores avanzados

• Grid agrupado• Grid paginado• Panel colapsable

Page 17: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

Lesson 6 – Pestañas

• TabBar• ViewStack• LinkBar• TabNavigator• Accordion

Page 19: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

Lesson 7 - Formularios

• Form• FormItem• StringValidator• NumberValidator

Page 21: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

Lesson 8 - Skinning

• CSS• Propiedad styleName

Page 23: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

Lesson 9 – Acceso a datos

• RemoteObject• HttpService• WebService

Page 25: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

Lesson 10 – Spring Flex

• Contexto Spring• Factoría Spring

Page 27: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

Lesson 11 – Patron Observer

• Listener - Observer

Page 29: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

Lesson 12 - Cairngorm

• Arquitectura• Generador de código

Page 31: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

Lesson 13 - Gráficos

• Propios– BarChart– ColumnChart– LineChart– PieChart

• Extras– Gauge– Elixir

Page 33: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

Lesson 14 – Estados y transiciones

• Estados• Transiciones

Page 35: Adobe Flex Framework v3.5. Arquitectura (cliente)

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)

Lesson 15 – Componentes y módulos

• Componentes• Módulos