3%20-%20PlexRIA%2029May2008

Desarrollo de
Rich Internet
Applications
con CA Plex +
WebClient
Juan González, ADC Austin
John Rhodes, ADC Austin
Madrid, España
29 de Mayo 2008

¿De qué estamos hablando?

> Rich Internet Applications – Una mejor forma de
presentar servicios de aplicaciones

> Introducción a CA Plex + WebClient for Plex como
un camino más rápido, mejor y económico hacia RIA
 Un sólo click, generador RIA HTML integrado
 Apropiado para
– Aplicaciones CA Plex existentes
– Aplicaciones CA 2E migradas
– Aplicaciones nuevas, con las últimas novedades
técnicas

Desarrollo de RIA con CA Plex Copyright © 2008 CA

Agenda

> Introducción y Conocimientos Básicos
> Rich Internet Applications (RIA)
> Plex y RIA : una potente combinación
> Introducción a WebClient for Plex
> Demostración
> Preguntas


ADC Austin

> Fundada en 1996 como división de Synon, ADC Austin ha
construido sistemas de misión crítica a gran escala impulsando
a ADC como una “Casa de Arquitectos” y como referente para
el desarrollo y soporte remoto y rentable.
> ADC Austin construye aplicaciones a medida integrando
servidores Microsoft Enterprise y plataformas IBM System i
> ADC Austin desarrolló ADC Migration Studio – la Migración de
2E a Plex y co-desarrolló WebClient for Plex
> ADC Austin es un partner estratégico y reseller de CA,
Websydian, y otras herramientas relacionadas


Visión del Producto, 2006-2007

> Un generador de CA Plex de un sólo click, integrado y
transparente que funcione para aplicaciones migradas de
2E y existentes

> Sin compromisos en la aplicación web generada
 Virtualmente con soporte para cualquier aspecto
 Componentes RIA enriquecidos
 Basado en los estándares de la industria
 Integrado en entornos empresariales complejos
– Single Sign-On, Auditoría, Logging
– Procesos de negocio / Portal (Xpert Ivy y otros)
– Seguro y robusto
 Interoperable con la línea de productos de Websydian

Rich Internet
Applications –
¿Qué son?

¿Qué NO es una aplicación RIA?

> Formularios sosos, básicos, textuales – propensos a errores de
usuario

> Navegar a través de varias páginas hasta llegar a la
información buscada

> Tiempo de respuesta pobre : al pulsar en un tab o en un botón
se refrezca toda la página

> Validación frustrante : después de 2 ó 3 segundos aparece un
mensaje de error; se requiere una reintroducción de los datos

> Interacciones planas y simples

> En resumen, todo lo que hace que los usuarios prefieran
cliente-servidor pese a sus inconvenientes


Ejemplo No-RIA: Formulario de Impuestos

> Principales razones por las
cuales en Googolica no se
rellenan los formularios de
impuestos:
 ¡Es fea, realmente fea!
 El formulario no hace
nada para ayudar al
usuario
 Localización no soportada
 Necesidades especiales…
¡sin suerte!
 Y más...
> Gracias al Tutorial en DOJO


Ejemplo No-RIA
Formulario de Reclamaciones

> ¡Vd. no querrá que sus
clientes experimenten algo
parecido!


¿Qué son las Rich Internet Applications?

> Muchas definiciones y tecnologías
 Web 2.0, Ajax, JSON, Silverlight, …


¿Qué son las Rich Internet Applications?

> Definición principal – llevar la experiencia del desktop a
una aplicación desplegada en un navegador
 Usa tecnología ubicua : accesible a todo el mundo en
todas partes
 Controles GUI enriquecidos, agradables de usar
 Eficaz
 Usa servicios externos para crear “mashups”
(combinaciones de información)
– P.e. datos cartográficos
 Familiar a usuarios de aplicaciones web, curva de
aprendizaje limitada


Ejemplos RIA


Ventajas de RIA para el negocio

> Sobre cliente-servidor
 Implementación Cero
 Los trabajadores son productivos en cualquier sitio
 Los usuarios están ya familiarizados con la tecnología web

> Sobre internet estándar
 Los usuarios realizan su trabajo más rápidamente
– Cargas de páginas enteras eliminadas
 Mayor calidad
– Validaciones y widgets en el cliente
– Formación / Intangibles


Caso de Negocio para RIA

> Mantenga a los usuarios en su sitio web
 Una interface de usuario pobre lleva a una tasa de
abandono en aplicaciones de cartas de compras de más
del 50%, según Forrester.

> Añada características interactivas para crear negocio
 CIO Magazine informa que Yankee Candle obtuvo tasas de
conversión de 1400% con aplicaciones RIA que permiten a
sus clientes crear ellos mismos sus velas votivas.

> Ahorros en costes de aplicación internos
 Ahorro de Costes RIA = Tarifa horaria X (Segundos
ahorrados por Transacción X Número de Transacciones por
año) / 3600
 Formación y aceptación de la aplicación

Biografía del Ponente

John Rhodes, Director, Arquitecto

ADC Austin, adcaustin.com
Credenciales CA 2E y Plex
 Synon Version 1.0, Obsydian Version 1.0
 Compromisos con éxito en muchos clientes
relevantes
 Diversidad de Proyectos y Plataformas
– DB2, SQL Server, Oracle, XML, .NET, Java.
 CA Plex/2E como base para el desarrollo corporativo


Tecnologías RIA

> JavaScript / Ajax

> Microsoft SilverLight

> Adobe Flash/Flex/Air

> Opinión : JavaScript / Ajax es lo que acapara el momento

> Las aplicaciones a-prueba-del-futuro separando las
tecnologías de visualización de la lógica del negocio


Ajax / JavaScript

> Ajax es “Asynchronous JavaScript + XML

> Es una técnica de desarrollo web, nada particularmente
nuevo

> Incorpora
 Presentación XHTML y CSS basada en estándares
 Visualización e interacción dinámica usando DOM
 Intercambio y manipulación de datos
 Recuperación de datos asincrónica (mejores respuestas)
 JavaScript enlaza todo


JavaScript / Ajax

Browser

Ajax
Engine

http XMLHttp
request HTML
Request
XMLData
Server Side

Web
Server Resultado:

Ent •Carga según la demanda
App
&
Database •Mejor respuesta
Servers
•Experiencia de Desktop


Bibliotecas de Componentes RIA

> Muchas, encapsular JS requerido

> Foco en DOJO (dojotoolkit.org) y EXTJS (extjs.com) como
modelo de licencias de alta calidad y amplio uso

Tab

Grid

Tree


¡RIA es Fácil!

SI
> Vd. es un Gurú en JavaScript

> Maneja todo el API de DOM

> Tiene un amplio conocimiento en DHTML, CSS, XML, etc.

> Tiene tiempo y ganas de dominar decenas de tecnologías

> Vd. Es un experto en seguridad web


Desafíos de RIA

Courtesy of Sun Java web site

> Complejidad : p.e. una petición “Simple” en Ajax

> Bob Brewin, Director Técnico de Sun, dice que hacer
Ajax es “como construir portaaviones a mano”.

> ¡WebClient al rescate!

Una mejor forma
de construir
aplicaciones RIA

CA Plex +
WebClient

CA Plex + WebClient for Plex


CA Plex + WebClient for Plex

> Patrones
 + Patrones Web/Ajax

> Desarrollo basado en modelos
 + Web dentro de su modelo

> Generación de Código nativo
 + Generación de código HTML, RIA/JS

> Gestión de la Configuración
 + versiones de los patrones web, lenguajes nacionales web

> Entorno del Grupo de trabajo
 + su equipo de desarrollo web

> Desarrollo de Ciclo de Vida Completo
 + incluye el entorno de su sitio web


CA Plex + WebClient

> Completo Framework para crear Aplicaciones web con
extensiones RIA
 Complejidad reducida – RIA de punta a punta con un solo
skill set
 Seguridad integrada
 Patrones y Reutilización
 Generación, construcción e implementación con un solo click
 Sin compromisos en el GUI

> Esta combinación tiene muchas ventajas respecto a otros
frameworks, incluyendo aquellos basados en Ruby on Rails
y PHP
 Gráfico, integrado, productivo

WCP y 2E

> ¿Funciona WCP con 2E?

> No directamente, pero…

> WCP fue desarrollado alrededor de
aplicaciones 2E migradas

> Las funciones 2E funcionan
“out of the box”,
no es necesaria una recodificación

> WCP mantiene el estado necesario
para que las aplicaciones 2E
funcionen como se crearon, y
soluciona requerimientos comunes
como el single sign-on y las marcas
de auditoría


¿Cómo funciona WCP?

> Características principales
 Genera HTML WYSIWYG directamente desde los paneles
de Plex
 Utiliza código existente de los diagramas de acción
 La web se vuelve parte de su modelo
 Se implementa en cualquier servidor web J2EE como p.e.
IBM Websphere, JBoss o Tomcat. Integrado a Eclipse
Europa / Rational.
 Soporta templating HTML avanzado y desarrollo RIA
 Soporta SOA con integración con Websydian y otras
aplicaciones web como workflows
 Produce aplicaciones seguras, robustas y escalables


Entorno de Desarrollo

Construya funciones WebClient
usando Rational/Eclipse o
directamente Java

Mejore la
apariencia con
hojas de estilo
Construya funciones de servidor CSS y plantillas
.NET, RPG, or Java html
usando técnicas estándar


Entorno de Desarrollo – Páginas Web

Generate

Compilación
ANT Java
import
Eclipse/WDSc
Publish

System
Templates WebClient
Eclipse
Plug-in
(Builder)
User
Templates


Entorno de Implementación

Any popular Web / J2EE Server
browser (WebClient
(with Servlet)
JavaScript for
Navegador Ent App
RIA) Database
HTML Server
estándar con Server
WebClient
Standard


Entorno de Implementación –
EJB’s y Multi-Platforma
Enterprise App
Server
Web / J2EE Server
RPG,
.NET/C#,
Web J2EE Server Java
Server
Web EJB
Container Container
Plex
RT
http
WC EJB
Servlet Proxy
Biz
Logic
Plex Plex IP
browse RT RT
r
Client Biz Database
Present Logic Server
Logic
Data
HTML/ JDN
CSS I DB

Capa de presentación
generada por Plex, código de Capa de negocio generada por
“visualización/control” Plex, código del “modelo”


Caso de Estudio

McLane
Advanced
Technologies

McLane Advanced Technologies

> ISV dedicado a Logística

> Soporta las operaciones del Gobierno de EEUU en todo el
mundo

> Aplicación de Distribución y Ventas al por Mayor en 2E

> Necesidad del Negocio
 El Gobierno de EEUU requiere Oracle / Aix
 Interface enriquecida en web para diferenciarse de la
competencia
 Mantener satisfechos a los actuales clientes 5250 y
Cliente-Servidor

Desafíos

> Interface de usuario enriquecida y “a la última”
 Cuadro de mandos, menús, Ajax, etc.

> Soporte tanto de Oracle y DB2 / RPG “out of the box”

> Tiempo de despliegue corto – medido en semanas

> Formación

> Solución
 Migración a Plex (90% de la aplicación en 2E)
 WebClient con controles JavaScript/Ajax
 Capacidades Plex
 “Campamento”


Sistema Actual


Modernized Application

Developing Rich Internet Applications with CA Plex Copyright © 2008 CA

Modernized Application Part II

Developing Rich Internet Applications with CA Plex Copyright © 2008 CA

Demo
RIA en Acción

Gestión de
Eventos /
Conferencias

Demo – Gestión de Conferencias


Demo de la Aplicación y Modelo Plex

La aplicación demo es “Planificación de Eventos”, y se usa
para planificar reuniones de usuarios

El mantenimiento de datos y modo de visualización
dependen de la seguridad
Patrones para la selección de fechas y otras solicitudes
Patrón integrado para Geo Mapping
Patrón integrado para la capacidad de Tabs


Vista del Modelo


Vista del Modelo- Plantillas


Vista de Websydian Express


Introducción al Proceso de Desarrollo
con WCP
> Crear un tab dialog “mashup” Ajax conteniendo
varios tabs
 Información de la conferencia
 Datos tabulares de asistencia
 Datos gráficos de asistenciaGraph attendance data

> Generar / Construir / Publicar en un paso

> Añadir la llamada al Menú de Websydian Express
con seguridad basada en roles


Tab Triples


Funciones Padre e Hijo


Datos Gráficos (con DojoChart)


Generación, Construcción, Publicación
con un Click

Gen &
Build

¡Construcción
HTML y
publicación
automáticas!


Añádalo a la estructura del sitio web


Resultados


Cómo empezar
el Desarrollo RIA
con WebClient

Websydian+ Family
•Soporte para clientes •Websydian •Websydian
2E.
•Upgrade a RIA Web Client for Developer Suite+
CA Plex
usando CA Plex y
ADC Modernization contiene todos
•Websydian
Studio
Web los productos
WSE for WSE for
Developer+ para desarrollo
2E/ Plex, •WCP se integra
Websydian Websydian con otros
Server Server+ productos de
Websydian

Suite+
•Server+ soporta
todas las
WSE for WSE for
RPG / Plex, tecnologías de
Websydian Websydian Websydian
Server Server
•Soporte para clientes •Websydian Web
RPG Developer
•Transact XML
•Wireless Developer
•Portal Developer Tecnologías
•WebShop
CA Plex


Planes de futuro

> Versión 1.2
 DOJO Toolkit – Implementación de alto impacto
 Tabs, Menu/Tool bars, Right Context
 “Templating abierto” para utilizar con otros componentes

> Versión 1.4
 Grid Editable
 Field states avanzados / tool tips
 Instalación Rational/Eclipse y project wizards
 Construcción transparente (Seamless build)


Planes de futuro

> Futuro
 Continuar con implementación de Plex ACTIVE (Tree view)
 Continuar con soporte de Plex GUI (p.e. splitter windows)
 Explorar EXTJS y otras herramientas
 ASP .NET
 Versión Japonesa
 Soporte pea Portlet wrappers / Workflow


Resumen

> Para todos
 WCP hace el trabajo - ¡rápidamente!

 Listo para cualquier desafío: RIA sofisticado y SOA

> Para los desarrolladores
 Curva de aprendizaje corta
 Reutilización de habilidades existentes
 Reutilización de código existente
 Tus habilidades en Plex te llevan más allá

> Para el negocio
 Sitios web enriquecidos y atractivos
 Ahorro en tiempo
 Ahorro en dinero

Getting started

> Obtenga el Libro Blanco y examine la wiki
 adcaustin.com/resources

> Pruebe el producto
 Workshop
 Soporte de acceso remoto

> Contacte a Dominion o a ADC Austin
 Dominion: dominion.com, 91-743-4883
 ADC: adcaustin.com


Preguntas

> Preguntas sobre la presentación
 John Rhodes
 512-423-1959
 jdrhodes@adcaustin.com
 Skype: jdrhodesaustx


3%20-%20PlexRIA%2029May2008

Más contenido relacionado

Destacado

Similar a 3%20-%20PlexRIA%2029May2008

Más de tutorialsruby

Último

3%20-%20PlexRIA%2029May2008