SlideShare una empresa de Scribd logo
Introducción al desarrollo de RIA's con
            Adobe Flex 3.0
INTRODUCCIÓN
• Como aplicaciones de escritorio pero en el navegador...
• Interfaces de usuario sofisticadas
• Drag & drop
• Multimedia
• Múltiples vistas
• Procesamiento de información
• Buen desempeño
INTRODUCCIÓN

Hoy en día no tiene sentido obligar al usuario a ir cargando página
tras página cuando se navega por la web. Para evitar esto se
utilizan las RIA (Rich Internet Application) que son aplicaciones
que cargan los datos al entrar en ellas y que dotan al cliente de la
lógica necesaria para mostrar esos datos evitando así todas esas
cargas de páginas individuales. Y la herramienta estrella para la
creación de RIAs es Flex, que combina las utilidades del entorno
Eclipse con la potencia del AS3 y además el MXML propio de
Flex que simplifica la tarea de usar controles y mover datos.
¿Qué son las RIA’s?
Las Aplicaciones de Internet Ricas o Rich Internet
Applications (RIA), consisten en el aprovechamiento de la
experiencia del usuario en herramientas y funciones de
escritorio tan naturales como copiar, cortar y pegar,
redimensionar columnas, y ordenar etc., con el alcance y la
flexibilidad de presentación y despliegue que ofrecen las
aplicaciones o páginas Web junto con lo mejor de la
multimedia (voz, vídeo, etc.).
¿Qué son las RIA’s?
Se puede decir que las RIA son la nueva generación de las
aplicaciones y es una tendencia ya impuesta por empresas
como Macromedia, Sun o Microsoft que se encuentran
desarrollando recursos para hacer de este tipo de
aplicaciones una realidad. Estas aplicaciones están
basadas en plataformas J2EE o.NET, con un front-end
Flash y utilizan una arquitectura Cliente/Servidor asíncrona,
segura y escalable, junto con una interfaz de usuario Web.
¿Qué son las RIA’s?
Entre los beneficios principales de aplicaciones RIA
tenemos un mejoramiento importante en la experiencia
visual, que hacen del uso de la aplicación algo muy sencillo,
ofrece mejoras en la conectividad y despliegue instantáneo
de la aplicación, agilizando su acceso, garantizan la
desvinculación de la capa de presentación es decir acceso
a la aplicación desde cualquier computadora en cualquier
lugar del mundo.
¿Qué es MXML?
MXML es un lenguaje descriptivo desarrollado inicialmente por
Macromedia hasta el 2005 para la plataforma FLEX de Adobe.
MXML se basa en XML y su acrónimo "Multimedia eXtensible
Markup Language“ Lenguaje que describe interfaces de usuario,
crea modelos de datos y tiene acceso a los recursos del servidor,
del tipo RIA (Rich Internet Application).

MXML tiene una mayor estructura en base a etiquetas, similar a
HTML, pero con una sintaxis menos ambigua, proporciona una
gran variedad e inclusive permite extender etiquetas y crear sus
propios componentes.
¿Qué es MXML?
MXML es un lenguaje XML, que al primera vista se parece a
HTML en la manera de describir los elementos. Con MXML, al
igual que con HTML, se describe el diseño de la aplicación y muy
levemente las conexiones con las funciones AS3 que le dan vida.

Puede utilizar dos lenguajes para escribir aplicaciones Flex:
MXML y ActionScript. MXML es un lenguaje de marcado XML
que se utilizan para diseñar componentes de interfaz de usuario.
También puede utilizar MXML mediante declaración definir
aspectos no visuales de una aplicación, como el acceso a fuentes
de datos en el servidor.
¿Qué es MXML?
Al igual que HTML, MXML proporciona etiquetas que definen
las interfaces de usuario. MXML parecerá muy familiar si han
trabajando con HTML. Sin embargo, MXML es más estructurado
que HTML, y proporciona un conjunto de etiquetas mucho más
amplia.

Por ejemplo, MXML incluye etiquetas de los componentes
visuales tales como tablas de datos y los árboles.
así como los componentes no visuales, que proporcionan
conexiones de servicios web, enlace de datos, y los efectos de
animación.
Usar Flex
La principal razón para usar Flex es que permite a los
desarrolladores de aplicaciones web construir de forma
rápida y sencilla aplicaciones RIA.

Piense en Flex de esta manera: en un modelo de múltiples
niveles, las aplicaciones Flex son como la capa de
presentación.

Algunos ejemplos de un modelo de múltiples niveles de
información son un backend fuente como un proceso Java o
una base de datos, el servidor de aplicaciones y el cliente.
Escribir una aplicación sencilla
Dado que los archivos MXML son archivos XML en los
entornos de desarrollo comunes, puede escribir
código MXML en un editor de texto simple, un editor XML
dedicado, o un entorno de desarrollo integrado (IDE)
que admita la edición de texto. Flex proporciona un IDE
dedicado, llamado Adobe ® Flex ™ Builder ™, que puede
utilizar para desarrollar sus aplicaciones.
Escribir una aplicación sencilla
El siguiente ejemplo muestra un simple "Hola Mundo" de
aplicación que contiene sólo una etiqueta:
<mx:Application>
y dos etiquetas niño, la <mx:Panel> etiqueta y el
<mx:Label> etiqueta. La <mx:Application> etiqueta define la
aplicación
contenedor que es siempre la etiqueta raíz de una
aplicación Flex. El <mx:Panel> etiqueta define un
contenedor de Grupo
, que incluye una barra de título, un título, un mensaje de
estado, una frontera, y un área de contenido para sus hijos.
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/HelloWorld/index.html"
horizontalAlign="center" verticalAlign="middle"
width="350" height="150"
>
<mx:Panel
paddingTop="15" paddingBottom="15" paddingLeft="15"
paddingRight="15"
title="Test Application"
>
<mx:Label text="Hello World!" fontWeight="bold" fontSize="20"/>
</mx:Panel>
</mx:Application>
Clase flex
Clase flex
Clase flex
Clase flex
Clase flex
Clase flex

Más contenido relacionado

PPTX
Flex mobile
PPTX
Taller 3 conexion
PDF
PPT
Clase 3
PPTX
Trabajo
PPTX
PPT
INVESTIGACION
PPTX
Darkfusion
Flex mobile
Taller 3 conexion
Clase 3
Trabajo
INVESTIGACION
Darkfusion

La actualidad más candente (13)

PPTX
Trabajo 1 programacion
PPTX
Santiago
PPTX
Santiago
PPTX
Las apps
PPTX
PPTX
PPTX
PDF
Lenguajes para programación web
PPTX
Net orientado a la web
PPTX
Jostan
PPTX
Riglo
PPTX
Presentación1 de w.,jlgvjdfmkhgvfd
Trabajo 1 programacion
Santiago
Santiago
Las apps
Lenguajes para programación web
Net orientado a la web
Jostan
Riglo
Presentación1 de w.,jlgvjdfmkhgvfd
Publicidad

Destacado (7)

PDF
Kudos Flashcamp Bogota 2009
PPTX
Mapa de ria
PDF
Taller Ria
PDF
Cristalab AIR: Flash, Flex y AJAX en el escritorio
PDF
Flash Catalyst, como diseñar aplicaciones RIA
PDF
Hype vs. Reality: The AI Explainer
PDF
Study: The Future of VR, AR and Self-Driving Cars
Kudos Flashcamp Bogota 2009
Mapa de ria
Taller Ria
Cristalab AIR: Flash, Flex y AJAX en el escritorio
Flash Catalyst, como diseñar aplicaciones RIA
Hype vs. Reality: The AI Explainer
Study: The Future of VR, AR and Self-Driving Cars
Publicidad

Similar a Clase flex (20)

PPT
Adobe flex
PDF
Análisis y planteamiento del problema
DOCX
Act1 tecnologiaweb uni1
DOCX
Israel tecnologias para desarrollo-web
PPTX
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEB
PPTX
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEB
DOCX
Red coorporativa
PPTX
web 2.0
PPTX
LA WEB 2.0
PPTX
EQUIPO 2,2A PARTE DE LAS AGUILAS
PDF
Web services
PPTX
Ekipo 2
PPTX
Revision de tecnologias web
PPTX
EQUIPO 2,LAS AGUILAS
PDF
Los dialectos ECMAScript y su implementación en los navegadores
PPTX
Flex mobile
PPTX
Flex mobile
Adobe flex
Análisis y planteamiento del problema
Act1 tecnologiaweb uni1
Israel tecnologias para desarrollo-web
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEB
EQUIPO 2,2A PARTE DE REVISION DE TECNOLOGIAS WEB
Red coorporativa
web 2.0
LA WEB 2.0
EQUIPO 2,2A PARTE DE LAS AGUILAS
Web services
Ekipo 2
Revision de tecnologias web
EQUIPO 2,LAS AGUILAS
Los dialectos ECMAScript y su implementación en los navegadores
Flex mobile
Flex mobile

Clase flex

  • 1. Introducción al desarrollo de RIA's con Adobe Flex 3.0
  • 2. INTRODUCCIÓN • Como aplicaciones de escritorio pero en el navegador... • Interfaces de usuario sofisticadas • Drag & drop • Multimedia • Múltiples vistas • Procesamiento de información • Buen desempeño
  • 3. INTRODUCCIÓN Hoy en día no tiene sentido obligar al usuario a ir cargando página tras página cuando se navega por la web. Para evitar esto se utilizan las RIA (Rich Internet Application) que son aplicaciones que cargan los datos al entrar en ellas y que dotan al cliente de la lógica necesaria para mostrar esos datos evitando así todas esas cargas de páginas individuales. Y la herramienta estrella para la creación de RIAs es Flex, que combina las utilidades del entorno Eclipse con la potencia del AS3 y además el MXML propio de Flex que simplifica la tarea de usar controles y mover datos.
  • 4. ¿Qué son las RIA’s? Las Aplicaciones de Internet Ricas o Rich Internet Applications (RIA), consisten en el aprovechamiento de la experiencia del usuario en herramientas y funciones de escritorio tan naturales como copiar, cortar y pegar, redimensionar columnas, y ordenar etc., con el alcance y la flexibilidad de presentación y despliegue que ofrecen las aplicaciones o páginas Web junto con lo mejor de la multimedia (voz, vídeo, etc.).
  • 5. ¿Qué son las RIA’s? Se puede decir que las RIA son la nueva generación de las aplicaciones y es una tendencia ya impuesta por empresas como Macromedia, Sun o Microsoft que se encuentran desarrollando recursos para hacer de este tipo de aplicaciones una realidad. Estas aplicaciones están basadas en plataformas J2EE o.NET, con un front-end Flash y utilizan una arquitectura Cliente/Servidor asíncrona, segura y escalable, junto con una interfaz de usuario Web.
  • 6. ¿Qué son las RIA’s? Entre los beneficios principales de aplicaciones RIA tenemos un mejoramiento importante en la experiencia visual, que hacen del uso de la aplicación algo muy sencillo, ofrece mejoras en la conectividad y despliegue instantáneo de la aplicación, agilizando su acceso, garantizan la desvinculación de la capa de presentación es decir acceso a la aplicación desde cualquier computadora en cualquier lugar del mundo.
  • 7. ¿Qué es MXML? MXML es un lenguaje descriptivo desarrollado inicialmente por Macromedia hasta el 2005 para la plataforma FLEX de Adobe. MXML se basa en XML y su acrónimo "Multimedia eXtensible Markup Language“ Lenguaje que describe interfaces de usuario, crea modelos de datos y tiene acceso a los recursos del servidor, del tipo RIA (Rich Internet Application). MXML tiene una mayor estructura en base a etiquetas, similar a HTML, pero con una sintaxis menos ambigua, proporciona una gran variedad e inclusive permite extender etiquetas y crear sus propios componentes.
  • 8. ¿Qué es MXML? MXML es un lenguaje XML, que al primera vista se parece a HTML en la manera de describir los elementos. Con MXML, al igual que con HTML, se describe el diseño de la aplicación y muy levemente las conexiones con las funciones AS3 que le dan vida. Puede utilizar dos lenguajes para escribir aplicaciones Flex: MXML y ActionScript. MXML es un lenguaje de marcado XML que se utilizan para diseñar componentes de interfaz de usuario. También puede utilizar MXML mediante declaración definir aspectos no visuales de una aplicación, como el acceso a fuentes de datos en el servidor.
  • 9. ¿Qué es MXML? Al igual que HTML, MXML proporciona etiquetas que definen las interfaces de usuario. MXML parecerá muy familiar si han trabajando con HTML. Sin embargo, MXML es más estructurado que HTML, y proporciona un conjunto de etiquetas mucho más amplia. Por ejemplo, MXML incluye etiquetas de los componentes visuales tales como tablas de datos y los árboles. así como los componentes no visuales, que proporcionan conexiones de servicios web, enlace de datos, y los efectos de animación.
  • 10. Usar Flex La principal razón para usar Flex es que permite a los desarrolladores de aplicaciones web construir de forma rápida y sencilla aplicaciones RIA. Piense en Flex de esta manera: en un modelo de múltiples niveles, las aplicaciones Flex son como la capa de presentación. Algunos ejemplos de un modelo de múltiples niveles de información son un backend fuente como un proceso Java o una base de datos, el servidor de aplicaciones y el cliente.
  • 11. Escribir una aplicación sencilla Dado que los archivos MXML son archivos XML en los entornos de desarrollo comunes, puede escribir código MXML en un editor de texto simple, un editor XML dedicado, o un entorno de desarrollo integrado (IDE) que admita la edición de texto. Flex proporciona un IDE dedicado, llamado Adobe ® Flex ™ Builder ™, que puede utilizar para desarrollar sus aplicaciones.
  • 12. Escribir una aplicación sencilla El siguiente ejemplo muestra un simple "Hola Mundo" de aplicación que contiene sólo una etiqueta: <mx:Application> y dos etiquetas niño, la <mx:Panel> etiqueta y el <mx:Label> etiqueta. La <mx:Application> etiqueta define la aplicación contenedor que es siempre la etiqueta raíz de una aplicación Flex. El <mx:Panel> etiqueta define un contenedor de Grupo , que incluye una barra de título, un título, un mensaje de estado, una frontera, y un área de contenido para sus hijos.
  • 13. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/HelloWorld/index.html" horizontalAlign="center" verticalAlign="middle" width="350" height="150" > <mx:Panel paddingTop="15" paddingBottom="15" paddingLeft="15" paddingRight="15" title="Test Application" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="20"/> </mx:Panel> </mx:Application>