PlexRIA2008

Developing Rich Internet Applications with CA Plex

AUDIO DIAL-IN:

From North America:1-866-376-6162

Outside North America:1-660-422-5140

Conference Code:340 973 0193

Please press *6 to mute your line during the presentation!

26-March 2008

John D. Rhodes, Principal Architect

ADC Austin

What are we talking about?

> Rich Internet Applications – A better way to present application services

> Introduction of CA Plex + Websydian WebClient for Plex as a faster, better, and cheaper path to RIA

Single click, seamless RIA HTML generator

Appropriate for– Existing CA Plex applications

– Migrated 2E applications

– New, cutting edge applications

Developing Rich Internet Applications with CA Plex Copyright © 2008 CA

Agenda

> Introduction and Background

> Rich Internet Applications (RIA)

> Plex and RIA – a powerful combination

> Websydian WebClient for Plex Introduction

> Demonstration

> Question and Answer


Speaker Bio

John Rhodes, President and Principal Architect

ADC Austin, adcaustin.comCA 2E and Plex credentials

Synon Version 1.0 with Kraft Foods Successful engagements with many enterprise clientsVariety of Projects and Platforms

– DB2, SQL Server, Oracle, XML, .NET, Java.

CA Plex/2E as a focus for enterprise development


ADC Austin

> Founded in 1996 as division of Synon, ADC Austin has built large scale mission critical systems leveraging the ADC as a "House of Architects" and as a cost effective remote development and support facility.

> ADC Austin builds custom applications integrating Microsoft Enterprise servers and IBM System i platforms

> ADC Austin developed ADC Migration Studio – 2E to Plex Migration, co-developed Websydian WebClient for Plex

> ADC Austin is a strategic partner and reseller for CA, Websydian, and other related tools


Websydian and ADC Austin

> Websydian and ADC Austin have joined forces in developing the Websydian WebClient for Plex

> Websydian is based in Europe and ADC Austin in the US

> Together we have: Been working with Plex since 1994

Been working with web enablement for Plex since 1997

Two teams of employees working towards the same goal: getting Plex and 2E apps on the web

A full product line ranging from migrating 2E to Plex to developing web apps and SOA with Plex


Product Vision, 2006-2007

> A one-click, seamless, generator for CA Plex that would work for migrated 2E and existing applications

> No compromises on the web application generatedVirtually any look and feel supported

Rich RIA components

Industry standards based

Integrates into complex enterprise environments– Single Sign-On, Audit, Logging

– Business Process / Portal (Xpert Ivy and others)

– Secure and robust

Interoperable with the Websydian Product Line


Rich Internet Applications –What are they?

What is NOT an RIA application?

> Bland, basic, textual entry forms – prone to user error

> Clicking through multiple web pages to get the information you need

> Poor response time - click on a tab or button – the entire browser refreshes

> Frustrating validation – i.e. 2-3 seconds later you get an error message, sometime re-entering data is required

> Flat, simple interactions

> In short, all the problems that drive users back to client-server, despite its drawbacks


Example Non-RIA - Tax form

> Top 10 reasons Googolica does not fill out tax forms

Its ugly, really ugly!

The form does nothing to help the user.

Localization not supported

special needs are out of luck.

And MORE...

> Thanks to DOJO tutorial


Example Non-RIA – Government Complaint

> You don’t want your customers to go through this experience!


What are Rich Internet Applications?

> Many definitions and TechnologiesWeb 2.0, Ajax, JSON, Silverlight, …


http://upload.wikimedia.org/wikipedia/commons/a/a7/Web_2.0_Map.svg

What are Rich Internet Applications?

> Core definition – bringing a desktop experience to a browser deployed application

Uses ubiquitous technology – must be accessible to virtually anyone anywhere

Rich GUI controls, pleasurable to use

Responsive

Use external services to create mashups– Example – geo mapping

Familiar to web application users, limited learning curve


Example RIA


Business Advantages of RIA

> Over client-serverZero deployment

Workers productive anywhere

Users generally familiar with web technology

> Over standard internetUsers get their job done faster

– Page loads eliminated

Higher quality experience– Client-side validations and widgets

– Training / Intangibles


Business Case For RIA

> Keep users on your siteA poor user interface leads to shopping cart abandonment rates of more than 50 percent, according to Forrester.

> Add interactive features to create businessCIO Magazine reports Yankee Candle improved conversion rates 1400% with an RIA application to create votive candles.

> Internal application cost savingsRIA Cost Savings = Hourly Labor Rate X (Seconds Saved per Transaction X Number of Transactions per year) / 3600

Training and application acceptance


RIA / AjaxTechnologyPrimer

RIA Technologies

> JavaScript / Ajax

> Microsoft SilverLight

> Adobe Flash/Flex/Air

> Opinion - JavaScript / Ajax has the mindshare at the moment

> Future-proof applications by separating view technologies from model and business logic


Ajax / JavaScript

> Ajax is “Asynchronous JavaScript + XML

> Web development technique, not particularly new

> IncorporatesStandards based presentation XHTML and CSS

Dynamic display and interaction using DOM

Data exchange and manipulation

Asyncronous data retrieval (for responsiveness)

JavaScript binding everything together


JavaScript / Ajax


Browser

Server Side

http request HTML

WebServer

EntApp&

DatabaseServers

AjaxEngine

XMLHttpRequest

XMLData

Result:

•Load on demand

•Better Responsiveness

•Desktop Experience

RIA Component Libraries

> Many out there, encapsulate JS required

> Focus on DOJO (dojotoolkit.org) and EXTJS (extjs.com) as high quality, widely used, with good license model


Tab

Tree

Grid

RIA is Easy!

IF> You are a JavaScript Guru

> Handle the entire DOM API

> Have firm grasp of DHTML, CSS, XML, etc.

> Have the time and desire to master the hacks of a dozen or more technologies

> Are a web security expert


Challenges of RIA

> Complexity – i.e. a “Simple” Ajax Request

> Bob Brewin, Sun's software CTO, says doing Ajax is, "like building an aircraft carrier by hand.“.

> Websydian WebClient to the rescue!


Courtesy of Sun Java web site

A Better Way to Build RIA Apps

CA Plex +Websydian WebClient

CA Plex + Websydian WebClient for Plex


http://www.websydian.com/websydiannet/app?WSYD_EVENT=ShowDoc&WSYD_SID=362893&DocID=Default.htm&WSYD_SIGN=60A7989AA44BE2AA9E3C80763B153160

CA Plex + Websydian WebClient for Plex


> Patterns

+ Web/Ajax Patterns

> Model-Based Development

+ Web in your model

> Native Code Generation

+ Generation of HTML, RIA/JS code

> Configuration Management

+ versioning of web patterns, web national language

> Workgroup Environment

+ your web development team

> Full Life Cycle Development

+ include your web site environment

CA Plex + Websydian WebClient

> Complete Web Application Framework with RIA extensions

Reduced complexity - end to end RIA with one skill set

Security built in

Patterns and Reuse

One click generate, build, deploy

No compromises on the GUI

> Combination has many clear advantages over other frameworks, including those based on Ruby on Rails and PHP

Graphical, seamless, productive


WWCP and 2E

> Does WWCP work with 2E?

> Not directly, but…

> WWCP was developed around migrated 2E applications

> 2E functions work “out of the box”, no recoding required

> WWCP maintains the state necessary for 2E applications to run as is, and solves common single sign-on and audit stamp requirements


How does WWCP work?

> Key features Generates WYSIWYG HTML directly off the Plex panel

Uses existing action diagram code without special coding

Web becomes part of your model

Deploys on any J2EE web server such as IBM Websphere, JBoss or Tomcat

Supports advanced HTML templating and RIA development

Supports SOA mind set with integration to Websydian and other web applications such as workflow

Produces secure, robust and scalable applications


Development Environment

Build .NET, RPG, or Java server functions

Using standard build techniques

Build WebClient functions using Rational/Eclipse or direct Java

build

Enhance look and feel by CSS style sheets and html templates


Development Environment – Web Pages

System Templates

User Templates

WebClientEclipsePlug-in

(Builder)

JavaEclipse/WDSc

CompilePublish

ANT import

Generate


http://www-306.ibm.com/software/websphere

http://tomcat.apache.org/

Deployment Environment

Web / J2EE Server (WebClient

Servlet)Ent App Server

Any popularbrowser

(with JavaScript for

RIA) Database Server


http://www.websydian.com/websydiannet/app?WSYD_EVENT=ShowDoc&WSYD_SID=362893&DocID=Default.htm&WSYD_SIGN=60A7989AA44BE2AA9E3C80763B153160

http://images.google.com/imgres?imgurl=za.sun.com/aboutsun/developers/images/java2.gif&imgrefurl=http://za.sun.com/aboutsun/developers/&h=349&w=200&prev=/images?q=java&svnum=20&hl=en&lr=&ie=UTF-8&oe=UTF-8&newwindow=1&safe=off

http://www-306.ibm.com/software/websphere

http://tomcat.apache.org/

Deployment Environment – EJB’s and Multi-Platform

Web / J2EE Server

Enterprise App Server

Database Server

WebServer

J2EE Server

WebContainer

EJBContainer

WCServlet

EJBProxy

BizLogic

RPG, .NET/C#,

Java

Plex RT

BizLogic

ClientPresent

Logic

HTML/CSS

Plex RT

Plex RT

Data

DBJDN

I

IP

Plex generated presentation layer, “view/controller” code Plex generated business layer /

“model”code

http

browser


Demo – RIA in Action

Event / Conference Management

Demo – Conference Management


View Demo Application and Plex Model

The demo application is “Event Planning”, and for example could be used to plan user group events

Data maintenance and view mode depending on security

Date pickers and prompting built in patterns

Geo Mapping built in pattern

Tab capability built in pattern


Examine Model


Examine Model


Examine Model - Templates


Examine Websydian Express


Quick Intro to WWC Development Process

> Create an Ajax tab dialog “mashup” containing several tabs

Upcoming conference info

Tabular attendance data

Graph attendance data

> Generate / Build / Publish in one step

> Add to Websydian Express Menu with role based security


Tab Triples


Parent and Child Functions


Graphing data (with DojoChart)


One Click Generate, Build, Publish


Gen &Build

AutomaticHTML build and publish!

Add to web site structure


Results


Getting StartedWith RIA Development via WebClient

Websydian+ Family

•Websydian Web Developer

•Transact XML•Wireless Developer•Portal Developer•WebShop

•Support for RPG Shops

•Websydian Web Client for CA Plex

•Websydian Web Developer+

•Support for 2E shops. •Upgrade to RIA by using CA Plex and ADC Modernization Studio

WSE for 2E/

Websydian Server

WSE for Plex,

Websydian Server+

WSE for Plex,

Websydian Server

WSE for RPG /

Websydian Server

Su

ite+

•Websydian Developer Suite+ contains all dvlpproducts•WWC integrates with other Wsyproducts•Server+ supports all Websydian technologies

CA Plex Technologies


Planning for tomorrow

> Version 1.2DOJO Toolkit – High impact implementation

Tabs, Menu/Tool bars, Right Context

Open templating to hook in other components

> Version 1.4 and beyondDOJO Toolkit – Complete Plex ACTIVE implementation

EXT JS Toolkit Implementation

ASP .NET

Japanese version


Summary

> OverallWWCP gets the job done - fast!

Ready for any challenges: sophisticated RIA web and SOA

> For developersShort learning curveReuse of existing skills Reuse of existing codeYour Plex skills take you further

> For the businessRich, appealing web sitesTime savedMoney saved


Getting started

> Download whitepaper and examine wikiadcaustin.com/resources

> Try the productWorkshop

Remote access support

> Contact ADC Austin, Websydian, or your Websydian Reseller

ADC: adcaustin.com, 800-605-9848

Websydian: websydian.com


mailto:[email protected]


Questions

> Questions on PresentationJohn Rhodes

512-423-1959

[email protected]

Skype: jdrhodesaustx



PlexRIA2008

Technology

ca plex copyright

existing ca plex applications

plex websydian

ca plex2e

plex adc austin

ca plex conference code

plex migration

existing applications