DEVELOPING AJAX APPLICATIONSWITH WEBSYDIAN WEBCLIENT FOR CA PLEX

ADC Austin Tech – Germany, May 2009

What are we talking about? Why you should be

interested in Ajax for business applications

What is WebClient Speed + Power

How Does WebClient Implement Ajax?

Demonstration Roadmap / Next Steps

And why should you be interested?

What is Ajax?

What is Ajax?Famous Ski Mountain in Aspen, COGreek godIndustrial strength cleanerWeb 2.0 technique in common use at Google, Microsoft, IBM, Yahoo, …

Asynchronous Javascript +XML

Classic web application issues Poor Interactivity Unresponsiveness

/Page Refresh Simplistic

Interfaces Low usability =Dissatisfaction

Ajax Use Cases Replacement of

desktop applications Easier Distribution

Customer self service

Analytics Productivity

Classic Example – Google Maps Scrolling

window Map URL’s

prefetched on edges – path of motion

Rich windows/popups

Primary Ajax Concerns Bandwidth Security Complexity

Broadband pervasive Perception of

responsiveness WebClient generated

code Plex skills Security built in No SQL InjectionBuilding an aircraft carrier

while underway - Sun

Ajax/RIA Justification 44% of businesses have

RIA in production Customer facing apps are

moving forward even in current economy

Saves money over desktop, distribution/development

Basic Concepts

What is WebClient Exactly?

What does WebClient do?

No Rewrite Required!

Same Plex Object Function / Business Logic / Panel Design

=Ajax Faster and Cheaper

WebClient is International

Projects Underway

SpainSwitzerlandGermanyJapanUSAEcuadorMexico

And others…

How does WWCP work? Generates WYSIWYG HTML

with JavaScript/Ajax directly from the Plex panel design

2 modes – basic and expert With expert, html templating

techniques are in play Java based - Deploys on

any J2EE web server such as IBM Websphere, JBoss or Tomcat. Integrated to Eclipse Europa / Rational

Uses client-server action diagram techniques

No new statements or APIs, use what you know

Single code base for web and client-server / 5250

Development Environment

System Templates

User Templates

WebClientEclipsePlug-in

(Builder)

JavaEclipse/WDScCompile

Publish

ANT import

Generate

CA Plex

Eclipse / Rational IDE

Web Server

Template Generation Process

Plex – Gen Function

with Panel

WC Builder – Examine

Panel Inheritance

WC Builder – Examine

Panel Component

s

WC BuilderBind

components

WC BuilderWrite html template

Sys

Template

User

Template

Sys

Template

User

Template

Component Generation from Panel

Generate Ajax/HTML from existing or new client-

server panels

Plex Component and Web Support

FAQ - Can WebClient handle every Plex UI feature and every web page requirement

No and Yes – No, WebClient does not ship with every Plex UI feature

(commonly used components supported). No, WebClient does not support every web page UI feature out of the box

YES! WebClient is an open generator that does not know anything inherently about html or javascript – the look and feel are in the templates and html that customers are free to modify

How does WebClient implement Ajax

How does Ajax work

Ajax Diagram

WebClient Ajax Component/Pattern

How is Ajax different than JS? Ajax uses JavaScript

as the programming framework

However, JavaScript on a web page is NOT Ajax

WebClient uses both techniques

Reasons to use Ajax Avoid Page Refreshes Grid Pagination Update web page

regions, tabs, popups In WebClient –

pages refreshes are only done when unavoidable

WebClient Components (Dojo) Rich, Open Source Commercial support –

IBM, SUN, BEA, … Standards based

Internationalization (i18n) Localization (110n) Accessibility (a11y)

Many components support Ajax

Enhanced Editable Grid - Ajax Designed to provide similar

functionality to client-server grid Pagination, more event Auto-resize data rows to

browser Plex states with colors and

protection Column resizing

Other behaviors possible via straightforward javascript Dynamic sort, reordering

columns, export to Excel, etc.

Pop-up Modal Dialogs

Dialogs pop up in window in browser (if desired)

Can be nested

Messages Dialog message

Html pop up with OK button

Log message Displays in defined

area in html Enquiry message

Html Pop up with yes, no, cancel

Menus, Hints, Dates

Field States

Set States in normal manner, using standard techniques

Protected / Hidden Tie states to style sheet support

Can tie Plex state to desired HTML Example

Errors turn red Grid highlighted rows turn yellow

WebClient and 2E WebClient does not work

directly with 2E, but… WebClient was developed

around migrated 2E applications

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

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

Websydian Product Integration

Websydian Server

WebsydianExpress User Interface

TransacXMLWeb

DeveloperWebClient

WSE API’s, Runtime, Framework

Web Server

Integration•Websydian Server•Interoperability•Template format•Web/WSE API’s•WSE Business Processes

Advantages•Functionality•Security•Scalability

Web Application Development Framework

Demonstration

Scenario

ISV in Switzerland, Change Management Tooling for Plex MKS Connector Matchpoint

Mature CA Plex model 2300 Functions, 420 Panels

Multiple Variants, National Languages

Opportunity / ChallengesBusiness Opps Software availability

across firewalls, to broad base

ISV module – ISV customers log in to download changes

Update look and feel

Technical Challenges No Java Variant “Busy” Screens Extensive use of

dynamic combos (Atol) Complex inheritance and

interrelated functions Java / HTML skills limited

Solution – Pilot Workshop2 Day Workshop Install and configure

software Basic orientation Set up starter

CSS/controls Add models, inherit,

generate and build

Results 27 Panels Web/Ajax

Enabled Look and feel updated Dynamic combo solution

using standard API’s Ready to finalize project

– additional panels, national language, etc.= Immediate

Results

Existing Application

New Application

Road Map and Next Steps

Road Map 1.4 SP1 Released

January 2009 Build 1.4.7 available

now With current release,

focus on usability and documentation

Web Services/ Workflow Cookbook in progress

Release 2.0 Support for CA Plex

6.1 Support for latest

Websydian version Additional

components – tree view, flexgrid, spinner, etc. likely

Simple Deep Link

Handler

Servlet

WebClient

Servlet

PlexPanel

Function

http://server/handler?program=wxvf&parm1=1.0&parm2=xyz

XML String with structured Plex call

information (allIO Parameters)

Deep link - workflowWebClient

ServletPlex

Panel or Non-Panel

Function

Find out more – Worldwide Plex/2E Conference

Miami/Ft. Lauderdale, September 2009

Free training course Presentations

English / Spanish Trial Software

Find out more – right now http://adcaustintech.com

Product Information http://webclientiplus.com

Technical documentation, tips, blog, news, videos, software

info@adcaustintech.com Workshop/POC Program

Summary – Fast and Powerful Web Development Option for CA Plex

For developers Short learning

curve Reuse of existing

skills Reuse of existing

code Your Plex skills take

you further

For the business Rich, appealing

web sites, integration

Time saved Money saved

Thank You and Questions

http://adcaustintech.comjdrhodes@adcaustintech.com