Download - CM WebClient for CA Plex
![Page 1: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/1.jpg)
for CA Plex
Overview and
Roadmap
Summer 2012
![Page 2: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/2.jpg)
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
![Page 3: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/3.jpg)
Overview
• WebClient for CA Plex
• Introduction
• Roadmap
• Demonstration
• What’s Next / Futures
Ajax in Greek mythology
![Page 4: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/4.jpg)
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
![Page 5: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/5.jpg)
Plug in generator
WPF (7.0)WCF
MFC C++
Java
Plex C#
OLE DB
Plex RPG IV or any i5/OS
programs
Plex Java
![Page 6: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/6.jpg)
WebClientWeb generator from the Plex model
Same Action Diagram, Panel Design
Same Plex function
= AJAX, ASAP
![Page 7: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/7.jpg)
WebClient RIA Presentation
Full coverage of standard Plex including:
Child, Tab, TreeView, Flexgrid
![Page 8: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/8.jpg)
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
![Page 9: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/9.jpg)
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
![Page 10: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/10.jpg)
ArchitectureOverview
![Page 11: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/11.jpg)
Web Page Builder
Development Architecture
Web Templates Mobile Templates
![Page 12: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/12.jpg)
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
![Page 13: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/13.jpg)
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
![Page 14: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/14.jpg)
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
![Page 15: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/15.jpg)
Roadmap
![Page 16: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/16.jpg)
• 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
![Page 17: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/17.jpg)
• 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
![Page 18: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/18.jpg)
1.8Mobile, Touch Optimized Templates
![Page 19: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/19.jpg)
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
![Page 20: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/20.jpg)
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”
![Page 21: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/21.jpg)
CA Plex+WebClient with Sencha Touch
• Covers 93% of mobile traffic
• HTML 5, CSS3, ExtJS
• SaSS• Local Storage• Media/Geo
![Page 22: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/22.jpg)
Navigation ModelsPrincipals
Combine
![Page 23: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/23.jpg)
• By adding Control Name Directives• Examples:
• Search:ToolBarArea:toolbar=1:align=center:template=WebSearch
How do we do this in Plex?
![Page 24: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/24.jpg)
Attach PointsToolbarArea, align, toolbarNum
FullscreenArea
TabbarArea
![Page 25: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/25.jpg)
MapAttach a map template to fields• MapCoords:FullscreenArea:template=WebMap• MapLocation:FullscreenArea:template=WebLocation
![Page 26: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/26.jpg)
VideoAttach a video template to fieldsVideo:FullscreenArea:template=Video
![Page 27: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/27.jpg)
1.8User Interface
/ RIA Enhancements
![Page 28: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/28.jpg)
Claro Theme
• Bold, High Gloss Theme• Alternative to Tundra• Create your own theme –
some assembly required
![Page 29: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/29.jpg)
• 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
![Page 30: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/30.jpg)
Accordion / Menu
AccordionMenu “Child”
Top Application
Scaling
![Page 31: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/31.jpg)
• 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
![Page 32: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/32.jpg)
• 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
![Page 33: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/33.jpg)
Grids
Filtering
Grid Column Menu
Export to CSV
Drag n Drop
Save Placement
![Page 34: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/34.jpg)
• 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
![Page 35: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/35.jpg)
• 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
![Page 36: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/36.jpg)
• 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
![Page 37: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/37.jpg)
• 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
![Page 38: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/38.jpg)
Misc UI Enhancements – MDI, Slider, Progress, …
![Page 39: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/39.jpg)
• 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
![Page 40: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/40.jpg)
• 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
![Page 41: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/41.jpg)
1.8Cloud / Portal
![Page 42: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/42.jpg)
Cloud Computing Instances
![Page 43: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/43.jpg)
Portlet Generation Support
Websphere / Apache Pluto
![Page 44: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/44.jpg)
• Portlet generation• Use new root templates for
generation – WebPortlet-root• Implement in Websphere, Liferay,
Pluto, etc.
1.8 PortalImplementation
![Page 45: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/45.jpg)
1.8What’s Left
![Page 46: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/46.jpg)
• 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
![Page 47: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/47.jpg)
• 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
![Page 48: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/48.jpg)
Demonstration
![Page 49: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/49.jpg)
What’s on the drawing board
![Page 50: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/50.jpg)
Enterprise JavaScript
• Disconnected Operation
• Native Device Storage
• Cross Platform, Device, and Browser
![Page 51: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/51.jpg)
MDI – Multiple Document Interface
![Page 52: CM WebClient for CA Plex](https://reader035.vdocument.in/reader035/viewer/2022062320/55d5316ebb61eb4e3f8b45f1/html5/thumbnails/52.jpg)
WebClient Information(click logo to view)