CM WebClient for CA Plex
Download as PPTX, PDF•2 likes•2,736 views
The document provides an overview of CA Plex and its webclient capabilities as of summer 2012, detailing its architecture and various features such as AJAX integration, mobile optimization, and advanced user interface enhancements. It highlights the roadmap for future developments, including improvements in grid functionality, mobile support, and cloud computing instances for application deployment. Key advancements include a focus on rich internet applications and the growing importance of mobile platforms in enterprise software development.
CM WebClient for CA Plex
- 1. for CA Plex Overview and Roadmap Summer 2012
- 2. 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
- 3. Overview • WebClient for CA Plex Ajax in Greek mythology • Introduction • Roadmap • Demonstration • What’s Next / Futures
- 4. AJAX / JavaScript / HTML5 is Big …and getting bigger “Ajax remains the dominant RIA of choice, and HTML5 is poised to expand the power and flexibility of the browser only approach” Gartner Group Ajax mountain
- 5. Plug in generator Plex RPG IV or any i5/OS programs Plex C# Java OLE DB MFC C++ WPF (7.0) WCF Plex Java
- 6. WebClient Web generator from the Plex model Same Plex function Same Action Diagram, Panel Design = AJAX, ASAP
- 7. WebClient RIA Presentation Full coverage of standard Plex including: Child, Tab, TreeView, Flexgrid
- 8. 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
- 9. 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 examples Step 2: Encapsulate into CA Plex pattern Step 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
- 11. Development Architecture Web Templates Mobile Templates Web Page Builder
- 12. Runtime Architecture Enterprise App Server Web / J2EE Server Plex Server (RPG, .NET/C#, C++, Java) http J2EE Server (Tomcat, Websphere, …) server (Apache, IIS, …) Web Container Plex RT WebClient Servlet Biz Logic Plex RT Browser (IE, Chrome, Client Safari, Firefox) Presentation Logic Data HTML/CSS Database Plex generated presentation layer Database Server Plex generated server layer 12
- 13. Web Service Wrapper Interface WebClient Plex Servlet Panel or Non-Panel Function External App, Package, BPMS Call Plex functions without panels Call Plex functions with panels Auto enter screen fields, simulate event Generalized, structured WSDL No modeling or coding required Quickly establish SOA bus for internal use BPM / Workflow Inter-process communication
- 14. Cloud Computing Instances Deploy pre-defined load balanced instances of CA Plex WebClient applications in Cloud environments Java RPG IV VPN Link Other environments? Windows Azure, IBM, etc.
- 15. Roadmap
- 16. A look back: WebClient 1.6 - 2010 Compatibility, Cross-Browser, Components • CA Plex 6.1/ Websydian 6.1/WSE 3.0 • Advanced Component Options • TreeView / FlexGrid • Cross-browser certification • Internet Explorer • Firefox • Safari • Chrome
- 17. WebClient 1.8 Mobile, Advanced RIA Controls, Portal, and More • 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
- 18. 1.8 Mobile, Touch Optimized Templates
- 19. Statistics The 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
- 20. 1.8 Mobile iPhone/iPad/Android/BB6 Web App with Native Optimization mobileportal.cmfirsttech.com/Plex2EWeb/wcs HTML5, CSS3 Native App - Android Market Sencha Touch http://market.android.com “Gartner COOL Vendor 2011”
- 21. CA Plex+WebClient with Sencha Touch • Covers 93% of mobile traffic • HTML 5, CSS3, ExtJS • SaSS • Local Storage • Media/Geo
- 22. Navigation Models Principals Combine
- 23. How do we do this in Plex? • By adding Control Name Directives • Examples: • Search:ToolBarArea:toolbar=1:align=center:template=WebSearch
- 24. ToolbarArea, align, toolbarNum Attach Points FullscreenArea TabbarArea
- 25. Map Attach a map template to fields • MapCoords:FullscreenArea:template=WebMap • MapLocation:FullscreenArea:template=WebLocation
- 26. Video Attach a video template to fields Video:FullscreenArea:template=Video
- 27. 1.8 User Interface / RIA Enhancements
- 28. Claro Theme • Bold, High Gloss Theme • Alternative to Tundra • Create your own theme – some assembly required
- 29. Claro Theme Implementation • Theme – add line to webclient.properties # URL reference for JavaScript resource and style sheet (CSS) resurl.plex.imageresources=/NXAModelWeb resurl.com.custom.webclient=/NXAModelWeb resurl.com.dataspecialists.webclient=/NXAModelWe b #resurl.com.adcaustin.webclient=/NXAModelWeb # Form action field Define.WSACTION=/NXAModelWeb/WebClientServl et Define.WCTHEME=claro
- 30. Accordion / Menu Menu “Child” Accordion Top Application Scaling
- 31. Accordion / Menu Implementation • 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.
- 32. Accordion / Menu Implementation • 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.
- 33. Grids Drag n Drop Export to CSV Filtering Grid Column Menu Save Placement
- 34. Grid Enhancements • 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
- 35. 1.8 Grid Enhancements Implementation • 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
- 36. 1.8 Grid Enhancements Implementation • Dynamic population of matching words in combo • Set the control name of the combo box to <controlname>:MainArea:template=WebFilteringSelect:esc apChar=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=filter Contains:default. • GridId should be set to the control name of the grid. TextId should be set to the control name of filter field.
- 37. Grid Enhancements Implementation • 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
- 38. Misc UI Enhancements – MDI, Slider, Progress, …
- 39. Misc UI Enhancements Implementation • 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
- 40. Misc UI Enhancements Implementation • 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)
- 43. Portlet Generation Support Websphere / Apache Pluto
- 44. 1.8 Portal Implementation • Portlet generation • Use new root templates for generation – WebPortlet-root • Implement in Websphere, Liferay, Pluto, etc.
- 45. 1.8 What’s Left
- 46. Miscellaneous • 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
- 47. New Web Support • 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
- 48. Demonstration
- 50. Enterprise JavaScript • Disconnected Operation • Native Device Storage • Cross Platform, Device, and Browser
- 51. MDI – Multiple Document Interface
- 52. WebClient Information (click logo to view)
Editor's Notes
- #3: First, for those of you who are not familiar with CM First, here is an overview.
- #7: Here is the promise of WebClient in a nutshell –the ability to generate a web page from an existing panel without rewriting. In this example, we have a Plex function that has been generated in 5250. With CA Plex, it is easy to generate a client server version running on Windows or Java without code changes. In fact, you are probably already familiar with this capability. WebClient add the ability to generate a web page as just another variant on your model. In this example, all three variants of the Edit Warehouse function share the same action diagram and the same panel editor design. The WebClient version show what is possible with the application of a cascading style sheet to make the screen design even more presentable. So the result is that you can be generating web pages from your CA Plex applications in a matter of minutes. Pretty powerful stuff.
- #8: Here are some examples of the rich web components you can generate from your CA Plex panel designs. Grids, even editable grids, are fully supported. Windowed dialogs are supported from the web page, to any level. CA Plex messaging is supported. Some other standard components include calendars, bread crumbing, and disappearing hint text.Lastly, you can also take your CA plex applications to the next level with business charting, and new components like TreeView and FlexGrid, an advanced grid with dynamic columns, cell bitmaps, and advanced formatting options.
- #10: Creating patterns with WebClient is straightforward – use what you already know.
- #15: Compatible with Amazon and Google Cloud
- #17: Previous version
- #20: These statistics are truly eye popping. iPhones are selling like hotcakes. There are 200,000 android devices sold each day, particularly over in Asia – there are actually more phones in China than there are people in the USA. iPad tablets are less that an year old, yet there have been millions sold. I think the most important stat to the audience today is the last one – iPhones and iPads and Android devices are no longer just a consumer phenomenom – they are making serious inroads into enterprise. You have probably seen the ads on medical use of iPads is taking off. But you are also seeing mobile in a wide variety of business applications, from auto dealerships to education to insurance to government.
- #21: Mobile
- #22: What we are offering is what we feel is a much better way – using CA Plex in conjunction with WebClient and a mobile GUI library called Sencha Touch. Using the approach, which is JavaScript based, you will end up with a first-class mobile UI that operates as true mobile application. It will operate in an webkit-based mobile browser environment – which directly covers iPhone, iPad, and Android, or 94% of the mobile browsing traffic. It also covers some of the other platforms like BlackBerry and Nokia, that are introducing webkit based browsers onto their platforms. For example, BlackBerry 6.0 has been tested successfully with this technology. The framework makes use of the latest browser technology – for example HTML 5 and CSS 3. These technologies are expected by many to supplant older technologies like Flash and Silverlight, and in fact HTML 5 is on an upward trajectory in use at many high volume production sites. With this framework, you can do more that serve up applications – you can make use of local storage, audio/video capability, geographic services, and of course the touch framework so popular on the new devices.
- #34: Here are some examples of the rich web components you can generate from your CA Plex panel designs. Grids, even editable grids, are fully supported. Windowed dialogs are supported from the web page, to any level. CA Plex messaging is supported. Some other standard components include calendars, bread crumbing, and disappearing hint text.Lastly, you can also take your CA plex applications to the next level with business charting, and new components like TreeView and FlexGrid, an advanced grid with dynamic columns, cell bitmaps, and advanced formatting options.
- #39: Sliders and progress bars
- #43: Here are some examples of the rich web components you can generate from your CA Plex panel designs. Grids, even editable grids, are fully supported. Windowed dialogs are supported from the web page, to any level. CA Plex messaging is supported. Some other standard components include calendars, bread crumbing, and disappearing hint text.Lastly, you can also take your CA plex applications to the next level with business charting, and new components like TreeView and FlexGrid, an advanced grid with dynamic columns, cell bitmaps, and advanced formatting options.
- #48: New web assets for support
- #51: GWT – native java to javascript cross compiler
- #52: MID