IBM Innovate 2012Build Smarter User Interfaces for Legacy Applications with IBM Rational Host Access Transformation Services
Kenny SmithPrincipal Consultant, Strongback [email protected]@smithkennyPWR 1302
© 2012 IBM Corporation2
The Premier Event for Software and Systems Innovation
About Us: Strongback Consulting
IBM Advanced Business Partner
– Rational, WebSphere, Lotus, Information Management certified
– Strongly focused on Enterprise Modernization and application lifecycle management
– Key Industries Served: Finance, Insurance, Healthcare, Manufacturing
– Rational Design Partner for HATS and other Rational enterprise modernization technologies
© 2012 IBM Corporation3
The Premier Event for Software and Systems Innovation
Why modernize my green screen?
“If it ain’t broke…”
“Only our call center uses it. … “
“It’s a 3rd party app”
“I’ve used it for 20 years.. Nothing wrong with it!”
“We don’t need to integrate it”
“Too much invested in it to throw it away”
“But it has all our business rules!”
“We’re going to all .NET …..next month”
“We spent too much training everyone on thissystem”
“Joey retired and we lost his member files”
“I’m retiring next year, what do I care?”
© 2012 IBM Corporation4
The Premier Event for Software and Systems Innovation
Business Challenge: Data Entry Errors
Terminal Apps offer poor data entry controlsTerminal Apps offer poor data entry controls
Garbage in – garbage outGarbage in – garbage out
Poor data entry results in:Poor data entry results in:
– Inaccurate business intelligenceInaccurate business intelligence
– Giving the customer or patient the wrong orderGiving the customer or patient the wrong order
– Longer call timesLonger call times
– Loss of productivity due to data re-entry, or data correctionLoss of productivity due to data re-entry, or data correction
– Having to purchase additional software to correct errors (i.e. Infosphere QualityStage, Optim, etc) Having to purchase additional software to correct errors (i.e. Infosphere QualityStage, Optim, etc)
© 2012 IBM Corporation5
The Premier Event for Software and Systems Innovation
Business Challenge: Longer Training Time
Non-intuitive interface– No tool tips, context sensitive help, coded fields, abbreviations, etc.
Current generation knows the web
–Does NOT understand ‘field exit’, ‘clear’, etc.
–“Where is the PF3 key?”
Training is often a neglected item in IT budgets– Isn’t that what consultants are for?
Average annual turn over in a call center is 33%*
–Longer training required == less productivity, greater cost per resource
*http://www.ilr.cornell.edu/globalcallcenter/research/unitedStates.html
© 2012 IBM Corporation6
The Premier Event for Software and Systems Innovation
Business Challenge: User Frustration
Poor field labels
No ‘hints’ on field controls
Lack of access to documentation
Complex navigation
User workflow that does not make sense
Post-it notes around the monitor as ‘documentation’
Multiple windows
Poor printing capability
© 2012 IBM Corporation7
The Premier Event for Software and Systems Innovation
Business Challenge: Lack of Access to Source Code
Columns . . . .: Edit
SEU ___________________________________________________________
-----------------------------------------------------------------
Common with COTS applications
Legacy apps from acquisitions
Required use of a partner, vendor, or parent company application
Developer lock out
– You fired the guy who had the code, he deleted it as he walked out
Changes to source may involve costly risks
– “Everything is tied to our ERP!!”
==================================================================
__________________________________________________________________
02/009
© 2012 IBM Corporation8
The Premier Event for Software and Systems Innovation
Business Challenge: Need a modern experience NOW!!!
• Rip and replace requires prohibitive or catastrophic spendingRip and replace requires prohibitive or catastrophic spending
• Low ROI on rip and replaceLow ROI on rip and replace
• Time to market is of the essenceTime to market is of the essence
• Can’t access new marketsCan’t access new markets
• Trying to pivot a battleshipTrying to pivot a battleship
• Large application audienceLarge application audience
• Heavy load on testingHeavy load on testing
• Large cost involved in retrainingLarge cost involved in retraining
© 2012 IBM Corporation9
The Premier Event for Software and Systems Innovation
Overview of HATS 8.0
Web 2.0
– Dojo
• HATS Dojo widgets
• Transform for Dojo editing
• Dojo for IOs
– New templates
– RESTful web services
JSR286 Portlet support
iPad support
Support for the latest runtimes
Support for the latest development tools
Support for Apache Geronimo 2.1.7
Support for Android devices (default browser 2.3.4 +)
© 2012 IBM Corporation10
The Premier Event for Software and Systems Innovation
10
Web 2.0: Templates
Research, industry, and medical
Benefit: Modern look and feel- tabs, menus, highlighting, fading, rounded corners
© 2012 IBM Corporation11
The Premier Event for Software and Systems Innovation
Dojo Widgets: Enhanced Grid
Allows advanced manipulation of tabular data
Available components: Table, Table (field), Table (visual)
No widget setting
Enables both Nested Sorting and Multiple Rows/Columns Drag&Drop features by
default
In HATS Version 8, the table rendered by the Enhanced Grid widget is read-only
© 2012 IBM Corporation12
The Premier Event for Software and Systems Innovation
Dojo Widgets: ValidationTextBox
Allows for user-side validation of text data
Available for Input field component
Use Regular expressions to define the validation rule
Helpful prompt message
Invalid message when the user types it wrong
© 2012 IBM Corporation13
The Premier Event for Software and Systems Innovation
Dojo Widgets: Date Text Box
Allows either typing or choosing a date from a pop-up calendar
Available for Input field component
Pass in common date formatting elements (MM/dd/yyyy)
Prompt for invalid data
© 2012 IBM Corporation14
The Premier Event for Software and Systems Innovation
Dojo Widgets: Filtering Select
Allows users to type or select an option
Available components
– 1. Selection list
– 2. Input field with hints
– 3. Command line
– 4. Input field
– 5. Item selection
Note that for 3-5, items are from the
Fill from strings widget setting.
© 2012 IBM Corporation15
The Premier Event for Software and Systems Innovation
Eclipse based development: HATS as a perspective on RAD/RBD
• Similar IDE experience as Rational Developer for POWER
• HATS toolkit plugs into existing IDE
© 2012 IBM Corporation16
The Premier Event for Software and Systems Innovation
Improving data entry accuracy
Calendar drop downs ensure date formatting
Radio buttons eliminate non-valid values
Drop downs give the user legible options
– Avoid post-its around the monitor to decipher field label values
Dojo enabled widgets
– Easy to inject client side validation
– Type ahead features make it easier to find values in long lists
© 2012 IBM Corporation17
The Premier Event for Software and Systems Innovation
Improving the user experience
Macros improve navigational flow
Replace acronyms, & codes with real legible field labels
Clickable buttons & links replace function keys
The more intuitive the interface, the less demand for documentation (or the less it gets used)
Dojo layout widgets better organize the screen
– Tab, accordion, stacked containers organize fields appropriately
Print directly from the browser
– Use “print” style sheet where needed
© 2012 IBM Corporation18
The Premier Event for Software and Systems Innovation
Reducing training time
Leverage web browser familiarity
Make it intuitive
Make labels & field options readable
Client side validation give instant feedback.
Reduce training time by up to 75%
Anyone ever taken 3 months to train on Facebook, Gmail, or other popular site?
– Anyone ever seen the documentation?
© 2012 IBM Corporation19
The Premier Event for Software and Systems Innovation
Build the solution RAPIDLY
Initial application transformation in under an hour
Gradually improve the application as you go
– Default rendering handles the bulk of the screens
– Global rules to further enhance default rendering
– Custom transformation for the most used / busiest screens
<image of iterative screen develop – need recent image, not the previous boiler plate ones>
© 2012 IBM Corporation20
The Premier Event for Software and Systems Innovation
No need for access to RPG/COBOL code
Rendering engine transforms the Data stream on the fly
– 5250 , 3270, VT100
Does not access display files, or file members
Multiple panes of data – not a screen scraper
– Text, Field, DBCS, Color, Extended Attributes, Grid
© 2012 IBM Corporation21
The Premier Event for Software and Systems Innovation
About DMS Systems
ISV, selling System I based ERP software
Rocky Mount, NC
ISV Focused on ERP and CRM packaged applications
Also an IBM Premier Business Partner
DMS Systems Corp. is an established and leading supplier of integrated Warehouse Management Systems (WMS), Enterprise Resource Planning (ERP) and Supply Chain Management (SCM) Solutions for Automotive, HD Truck, RV, Marine Parts and other hard-goods Distributors in the U.S. and Internationally.
© 2012 IBM Corporation22
The Premier Event for Software and Systems Innovation
DMS Systems: Need to Modernize Yesterday
Rapidly changing customer base
– Economic downturn costing customers
– New customers want a Web UI (not 5250)
Pressure from customers for cloud based solutions, mobile solutions
– Competition readily available, but not yet mature for this industry
Deep investment on IBM i, RPG based 5250 application
Screen logic tied in closely with business logic
Need integration with other systems & databases
– Web Catalog
– CRM
© 2012 IBM Corporation23
The Premier Event for Software and Systems Innovation
DMS Solution: HATS Transformations
Quickly used default rendering to transform the interface
Adjust global rules and add screen transformations as needed
Dojo Widgets control data entry where applicable
– Radio buttons for 1-3 options
– Drop downs (filtering selects) for >3 options
– Validation rules on certain text boxes
Call out to DB2 tables to populate common drop downs
Develop iteratively
– Use RTC to capture stakeholder request for enhancements
– Prioritize, and release regularly
© 2012 IBM Corporation24
The Premier Event for Software and Systems Innovation
Before ….
Remember theItem number!
What’s The MFR Code??
© 2012 IBM Corporation25
The Premier Event for Software and Systems Innovation
After…
Elegant template done with CSS, and carefully selected images
Populate dropdowns via JPA calls from Business Logic
Display using Dojo widgets for optimal Experience.
© 2012 IBM Corporation26
The Premier Event for Software and Systems Innovation
About PBD Worldwide
Fulfilment and distribution services
System I back end ERP
Based in Alpharetta, Georgia
Maintains full PCI Compliance
Ships in excess of 4 million packages for its clients each year. With an accuracy guarantee of 99.8% on all shipments.
– Fulfillment - pick, check, pack, and ship
– Distribution and Transportation Services
– Customer Contact Center
– Accounting Services
– Information Technology and eCommerce Services
– Dedicated Account Management
– Implementation Project Management
– Accessible Reporting
© 2012 IBM Corporation27
The Premier Event for Software and Systems Innovation
PBD Example: Change the workflow
Customer uses JDE 5250 version
Customer order workflow was bass-ackwards
– Get the payment type, then payment, then order data, then customer info
Lack of access to source code (JDE)
Solution: Use business logic & macros to reverse the flow
– Business logic is Java
– Access to all the API of the underlying Host On Demand environment
– Ability to enter data, capture data stream elements and more
– Call business logic from Screen Customizations
– Also use BL to call XPCML calls for IBM RPG Web Service calls for additional add on functions
© 2012 IBM Corporation28
The Premier Event for Software and Systems Innovation
About Arlington Heights Parks District
Government Municipality
Public park and recreation agency
Located in Arlington Heights, Illinois,
Largest community in Chicago's northwest suburban corridor
Operate 5community centers with outdoor pools, Olympic Indoor Swim Center, two tennis clubs, two public golf clubs, Lake Arlington, Arlington Heights Historical Museum, Senior Center, an outdoor skate park and 58 parks including a sports complex, playgrounds, picnic shelters and much more spread over 715 acres of land and 16.2 square miles
© 2012 IBM Corporation29
The Premier Event for Software and Systems Innovation
AHPD Example: Legacy VT100 (COBOL on AIX)
Telnet VT100 (a true dumb terminal)
Government entity (i.e. limited budget)
COBOL UI was only method of access
Rip and replace was extremely cost prohibitive
– Application in place for decades
– ERP deeply hooked into it
SOLUTION: Use HATS macros to create web services
– JAX-WS standard, means any client can consume
– New front end with elegant workflow written to integrate with existing Lotus Notes application
© 2012 IBM Corporation30
The Premier Event for Software and Systems Innovation
AHPD – Macro Driven
Visual Macro editor shows you the visual navigation
Drag and drop screens in the desired order
Add actions as needed (extracts, prompts, if-else, etc)
Macros then get wrapped in JAX-WS
– Java API for XML Web Services
– Wizard generated deployment
Web Services consumed by other apps
– Lotus Domino web site in this case
© 2012 IBM Corporation31
The Premier Event for Software and Systems Innovation
Lessons learned, recommendations, tips and techniques, etc.
Develop your HATS apps iteratively
– Don’t spend 6 months waiting on the big bang
– Gather feedback with each iteration
– JPA 2.0 and WAS 8.0 makes RDBMS integration simple
Version your assets
– HATS apps are Java EE apps
– A file system does NOT make a version control system
You don’t have to, but you CAN do very complex things with HATS
– Business Logic is Java, and at the heart of how HATS and HOD work
– Macros have their own language elements
– Custom widgets/components can make your site unique
Utilize a designer to help you with UI for maximum benefit
– The latest HATS templates are very good
– Dojo Widgets greatly simplify client side validation and data entry
– Custom branding needs a designer
© 2012 IBM Corporation32
The Premier Event for Software and Systems Innovation
Socialize with us on Facebook http://www.facebook.com/StrongbackConsulting
For more information on how we can help you improve your interfaces, increase user productivity, and accelerate your SOA, contact us at [email protected], or call us at 904.351.6658.
Subscribe to us athttp://feeds.feedburner.com/StrongbackConsulting
Discover us at:http://www.strongback.us
© 2012 IBM Corporation33
The Premier Event for Software and Systems Innovation
© Copyright IBM Corporation 2012. All rights reserved. The information contained in these materials is provided for informational purposes only, and is provided AS IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, these materials. Nothing contained in these materials is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in these materials to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in these materials may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. IBM, the IBM logo, Rational, the Rational logo, Telelogic, the Telelogic logo, and other IBM products and services are trademarks of the International Business Machines Corporation, in the United States, other countries or both. Other company, product, or service names may be trademarks or service marks of others.
www.ibm.com/software/rational