cm webclient for ca plex

for CA Plex

Overview and

Roadmap

Summer 2012

Who is CM First?

Enterprise Software Development Integrator• Offices in Switzerland, USA, Italy, India• Network of worldwide resale partners (Americas,

EMEA, APJ, ANZ)

CA Primary Sales and Technology Partner• CA 2E, CA Plex, CA Repository• Footprint covers 20% of Installed Base

App Dev Products• CM Matchpoint ALM Suite• CM WebClient • CM Power (PHP) Suite• CM M3 (CA 2E Migration / Modernization)• CM Meta Analytics (Source Scan) for CA Repository

Third-party Solutions• Soreco, Databorough, Worksoft, Websydian

Overview

• WebClient for CA Plex

• Introduction

• Roadmap

• Demonstration

• What’s Next / Futures

Ajax in Greek mythology

AJAX / JavaScript / HTML5 is Big…and getting bigger

Ajax mountain

“Ajax remains the dominant RIA of choice, and HTML5 is poised to expand the power and flexibility of the browser only approach”

Gartner Group

Plug in generator

WPF (7.0)WCF

MFC C++

Java

Plex C#

OLE DB

Plex RPG IV or any i5/OS

programs

Plex Java

WebClientWeb generator from the Plex model

Same Action Diagram, Panel Design

Same Plex function

= AJAX, ASAP

WebClient RIA Presentation

Full coverage of standard Plex including:

Child, Tab, TreeView, Flexgrid

WebClient Value Proposition• Quick, integrated implementation

• Maintain one code base, with 5250, client-server, web, and mobile presentation channels

• Inherit our CA Foundations based light weight patterns, or even use OBASE or custom

• Use your existing skills• WSYWIG plugin generator with seamless interface into CA Plex

• Automatically build rich pages based on Plex tabs, child windows, tree views, more

• Open standards based• Run as standard extensible J2EE service, Tomcat, Websphere, IIS (via adapter), …

• Deploy on IBM i, Windows, Linux, Unix, zOS.

• Secure encryption, high availability, and portal configurations supported

• No plugins - Run as native rich web application on the popular browsers

• Mobile touch optimized templates available• Deployment supported on all popular platforms, Apple, Android, BB6 and above

Ajax Inheritance

Requirement: Add geolocation services to existing CA Plex app, using address, longitude, and latitude. Must use GPS.

Step 1: Develop JavaScript code from open source examplesStep 2: Encapsulate into CA Plex patternStep 3: Use CA Plex inheritance to add mapping and GPS functionality throughout application, using standard action diagrams and panel designs.

Available as a 30 minute workshop exercise

ArchitectureOverview

Web Page Builder

Development Architecture

Web Templates Mobile Templates

Runtime Architecture

Web / J2EE Server

Enterprise App Server

Database Server

http server(Apache, IIS, …)

J2EE Server (Tomcat, Websphere, …)

WebContainer

WebClientServlet

Plex Server (RPG, .NET/C#, C++, Java)

Plex RT

BizLogic

ClientPresentationLogic

HTML/CSS

Plex RT

Data

Database

Plex generated presentation layer

Plex generated server layer

Browser(IE, Chrome, Safari, Firefox)

12

Web Service Wrapper Interface

WebClientServlet

PlexPanel or

Non-PanelFunctionXML/SOAP

Call Plex functions without panelsCall Plex functions with panels

Auto enter screen fields, simulate eventGeneralized, structured WSDLNo modeling or coding required

Quickly establish SOA bus for internal useBPM / WorkflowInter-process communication

External App,Package, BPMS

Cloud Computing Instances

Deploy pre-defined load balanced instances of CA Plex WebClient applications in Cloud environments

Other environments?Windows Azure, IBM, etc.

Java RPG IV

VPN Link

Roadmap

• CA Plex 6.1/ Websydian 6.1/WSE 3.0

• Advanced Component Options• TreeView / FlexGrid

• Cross-browser certification• Internet Explorer• Firefox• Safari• Chrome

A look back: WebClient 1.6 - 2010Compatibility, Cross-Browser, Components

• Mobile Touch Optimized Templates• User Interface / RIA Enhancements

• Themes• Accordion / Menu• Enhanced Grid• More Advanced Controls

• Portal (Portlet) Generation• Easier Licensing, Plex 7.0, and more• MDI Preview

WebClient 1.8 Mobile, Advanced RIA Controls, Portal, and More

1.8Mobile, Touch Optimized Templates

StatisticsThe world is going mobile

• 50 million iPhones sold to date

• 200,000 Android devices sold each day

• 8.5 million iPads sold to date• 70 million tablets predicted

by the end of 2012• 2/3 of the Fortune 100 have

started deploying iPads for Enterprise use

1.8 Mobile iPhone/iPad/Android/BB6

Native App - Android Markethttp://market.android.com

Web App with Native Optimizationmobileportal.cmfirsttech.com/Plex2EWeb/wcs

HTML5, CSS3Sencha Touch

“Gartner COOL Vendor 2011”

CA Plex+WebClient with Sencha Touch

• Covers 93% of mobile traffic

• HTML 5, CSS3, ExtJS

• SaSS• Local Storage• Media/Geo

Navigation ModelsPrincipals

Combine

• By adding Control Name Directives• Examples:

• Search:ToolBarArea:toolbar=1:align=center:template=WebSearch

How do we do this in Plex?

Attach PointsToolbarArea, align, toolbarNum

FullscreenArea

TabbarArea

MapAttach a map template to fields• MapCoords:FullscreenArea:template=WebMap• MapLocation:FullscreenArea:template=WebLocation

VideoAttach a video template to fieldsVideo:FullscreenArea:template=Video

1.8User Interface

/ RIA Enhancements

Claro Theme

• Bold, High Gloss Theme• Alternative to Tundra• Create your own theme –

some assembly required

• Theme – add line to webclient.properties

# URL reference for JavaScript resource and style sheet (CSS)resurl.plex.imageresources=/NXAModelWebresurl.com.custom.webclient=/NXAModelWebresurl.com.dataspecialists.webclient=/NXAModelWeb#resurl.com.adcaustin.webclient=/NXAModelWeb# Form action fieldDefine.WSACTION=/NXAModelWeb/WebClientServletDefine.WCTHEME=claro

Claro ThemeImplementation

Accordion / Menu

AccordionMenu “Child”

Top Application

Scaling

• Accordion

• In a TreeView function, open Plex panel properties. JavaBeanClass should be set to WebAccordionTree.

• ChildSiteP control name should be set to ChildSiteP:DetailArea.

• WebAlert should be used instead of WebMessages in WebAccordionTree.

• All child panel window type should be set to Top Application.

• Add line webclient.topAppMode=many in obclient.properties.

Accordion / MenuImplementation

• Menu• A special capability has been added for menu

functions – i.e. you can load a top application into a child site, without changing panel type to child

• Use TreeView or Accordion Control• ChildSiteP control name should be set to

ChildSiteP:DetailArea.• WebAlert should be used instead of WebMessages

in WebAccordionTree.• All child panel window type should be set to Top

Application.• Add line webclient.topAppMode=many in

obclient.properties.

Accordion / MenuImplementation

Grids

Filtering

Grid Column Menu

Export to CSV

Drag n Drop

Save Placement

• Grid Menu - Toggle• UI to select columns, sort, order

• Drag and Drop• Drag and drop columns new positions, one click

sort

• Filtering / Select• Dynamically filter rows with Intellisense-style

autocomplete

• Export• Easy to save grid to CSV / Excel

• Save Placement• Save grid settings in persistent session

Grid Enhancements

• Grid Menu - Toggle• The control name of the grid should be set

to Grid1P:MainArea:ColumnToggling=Yes

• Drag and Drop• Automatic if enabled in panel properties

1.8 Grid EnhancementsImplementation

• Dynamic population of matching words in combo• Set the control name of the combo box to

<controlname>:MainArea:template=WebFilteringSelect:escapChar=3:default

• escapChar can be customized to any number you like. The number represents how many character you enter before the combo box display the list based on the character you enter.

• Dynamic Filter of Grid Rows based on field• Set the control name of the combo box to <control

name>:template=WebGridFilter:GridId=Grid1P:TextId=filterContains:default.

•      GridId should be set to the control name of the grid. TextId should be set to the control name of filter field.

1.8 Grid EnhancementsImplementation

• Grid Export• To CSV• Use the latest WebClient group model. • Add WebExportGrid to your function

inheritance path

• Save Placement• Same as client-server in panel properties

Grid EnhancementsImplementation

Misc UI Enhancements – MDI, Slider, Progress, …

• MDI (Preview)• Use MDI Window Type • Use within Top Application (new

supported Window Type)

• Slider, Progress, TimePicker• Use new templates in usual way

• Spin / ListBox• Automatic on panel

Misc UI EnhancementsImplementation

• WebLogMessages• Show messages in a area of the web

pages• Similar to WebMessages – but use on or

the other not both

• Advanced Controls in WebClient project (no need for separate project)

Misc UI EnhancementsImplementation

1.8Cloud / Portal

Cloud Computing Instances

Portlet Generation Support

Websphere / Apache Pluto

• Portlet generation• Use new root templates for

generation – WebPortlet-root• Implement in Websphere, Liferay,

Pluto, etc.

1.8 PortalImplementation

1.8What’s Left

• Hotkeys• Define your own browser hot keys• Launch WebClient or other browser windows

• Numeric Keypad Support• Data Entry

• File Upload• Multiple files to server location

• Plex 7.0 • Warning – limited testing

• No more Crypkey!• Upgrade models

Miscellaneous

• New Support Site• Forums, other enhancements• Meets Section 509 Requirements

• USA Government Accessibility Standards

• http://support.cmfirsttech.com

• Upgraded Blog• New look and feel• New articles on 1.8

• Enhanced Documentation

New Web Support

Demonstration

What’s on the drawing board

Enterprise JavaScript

• Disconnected Operation

• Native Device Storage

• Cross Platform, Device, and Browser

MDI – Multiple Document Interface

WebClient Information(click logo to view)