This document provides an agenda and overview for a session on using Dojo and Host Access Transformation Services (HATS). The agenda includes introductions to Dojo and HATS, Dojo tooling, getting started with simple widgets, the Dojo API, custom components, and tips/tricks. HATS is described as a tool to transform green screen applications into web, mobile, and rich client interfaces with low risk and cost while reusing existing assets. Dojo is presented as a free JavaScript framework that makes client-side development and AJAX functionality easier.

1. IBM Innovate 2010
Session Track
Template
Kenny Smith
Principal Consultant,
Strongback Consulting
kenny.smith@strongbackconsulting.com
PWR-1068A
The premiere software and product delivery event.
June 6–10 Orlando, Florida

2. Agenda
 What is HATS?
 What is Dojo?
 Dojo Tooling
 Getting Started: Simple Screen Widget Replacement
 Dojo, Dojox & Dijits
 Dojo API
 Using Dojo with WAS Web 2.0 Feature Pack
 Custom Components
 Tips & Tricks
 Questions
2

3. Rational Host Access Transformation Services Revitalize
Applications
Achieve fast ROI with low risk
 Quickly and easily transform green screen
applications to Web services, Web, Mobile,
Portal and rich client interfaces
 Low cost and low risk: No need to rewrite or
refactor existing applications and built on
open, proven platforms and technologies
 Increase productivity and reduce training
costs and data entry errors with workflow
and navigation improvements
 Integrate host business processes and data
with other Web, Portal, Mobile, and rich
client applications
 What’s new in V7.5.1?
 Mobile device support for Apple iPhone and
iPod touch
 Rich Client support extended to Lotus Notes
 Ajax-based automatic disconnect and refresh
 Simplified, customizable Web service
definitions

4. What is Host Access Transformation Services (HATS)
 What can you do with HATS?
 Quickly and easily create Web, portal or rich client
applications that provide an easy-to-use GUI for
your green-screen applications
 Low skills requirement
 Highly customizable
 Iterative development process
 Transformation “on the fly”
 Extend terminal application tasks as Web services
 Benefits See session EM-1178B
 Extend host application to new users for more background info
 Improve the navigation of your host application on HATS
 Reuse your existing assets in a Service Oriented
Architecture
 Avoid rewriting applications (no impact to code)
4

5. Modernization At Your Own Pace
Today Day 1 Tomorrow
Integration: Text can be
replaced with images, input
fields can be populated from
data on other screens or from
a database, date fields can be
converted into popup
calendar widgets, and more!
Modern UI: All
pages share the
same theme and
style, which can be
based on an existing
Web site.
Instant Value: HATS default
rendering automatically
transforms actions into
clickable links and buttons. No Aggregation: data from
changes required to the host other screens,
application. databases, or other
systems can be merged
and displayed with host
data.
5

6. HATS deployment options
Web
Rich Client
 View through your favorite browser
 Zero footprint
 Integration at the
3270 or 5250
datastream
Portal desktop with other
Eclipse applications
 Client side processing
 Rich set of user
Mobile interface widgets
 Built on the standard,
Web Service open Eclipse foundation
 3270e print directly to
end user’s printer
 Integration at the
glass
 Build self-service  Cooperative portlet
 PDA, Smart Phones, support
transactions
Data Collection
terminals
6

7. Architecture Comparison
Persistent
Non-persistent
Eclipse-based Provisioning Server
Rich Client (Optional)
327
0/5
250
dat
ast
rea
m
3270/5250 datastream Internet, Intranet,
or VPN
Traditional
Emulator System i or z
(TN5250, 5250W, or
TN3270)
T P
HT
over
SOAP over HTTP
ML
HT
Standard Web
Browser HATS Running on
WebSphere Application Server
or WebSphere Portal
PDA/Mobile Device
Web Service Client
7

8. What is Dojo?
 Free, open source JavaScript framework (BSD and Academic Free licenses)
 Supported by the Dojo foundation members including IBM, Sun, Aol, Google, etc
 Easy to use – makes js coding a breeze
 Included in Rational 7.5 development platform

9. Features
 MANY JavaScript convenience utilities
 Document Object Model (DOM) manipulation
 Event handling
 Asynchronous communication
 aka AJAX
 Packaging system
 Modular – only loads API elements you need
 Code elements can be packages into a single file, reducing multiple HTTP trips
 Client-side data storage
 Dojo storage allows persistent data with user's permission
 Server-side data storage
 JSON, CSV, XML
 Browser safe
 IE, Firefox, Safari, Chrome, Opera
 Progressive enhancement as browser versions mature
 IE6 safe … but for the love of all that is good upgrade to the newer version!

10. Why Use Dojo?
 HATS uses many Javascript functions
 But don't think about touching them!
 Data validation not included with toolkit
 True validation dependent upon host system
 Host system may not do any data validation
 Coding validation from scratch is hard
 Error prone & lack of debug support
 Rarely cross-browser compliant
 Poor documentation
 We want Web 2.0 features!
 Ajax remoting
 Drag and drop
 Syntactic dialogs
 Add functionality that neither host, nor HATS provides!

11. Easy Input Translation
 Remove leading/trailing white space
 Change CAPITALIZATION on the Fly
 Ensure proper data format
 Phone numbers, zip codes, SS#

12. Data Validation
 Capture data errors before they go back to the host
 Increase data accuracy
 Garbage in, garbage out!
 Use Regular Expressions for validation
 [w]+ = one or more characters that are not whitepace
 [D][D] = Exactly two letters – no more and no numbers

13. Dojo Containers
<div style="width: 350px; height: 300px">
<div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;">
<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
Lorem ipsum and all around...
</div>
<div dojoType="dijit.layout.ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
Lorem ipsum and all around - last...
</div>
</div>
</div>

14. Sophisticated Web 2.0 Calendar Popups
<input type="text" name="date1" value=""
dojotype="dijit.form.DateTextBox" />

15. Dojo tooling
 You probably already have it!
 RAD, RBD, RSA, etc. 7.5x and above
 Try to use the latest release of your SDP for most current tooling
 Just enable your project
 Must Add Project Facet
 Also add JavaScript facet
 Support includes custom IBM supplied Dojo widgets
 WHAT?!? NO Rational development products?
 First, come see me :)
 You can't develop HATS apps without it!
 You CAN do plain old web apps
 Download the toolkit from dojotoolkit.org

16. Getting Started
 First, add the Dojo toolkit as a Facet to your Project
 Right click – go to 'properties'

17. Dojo Drawers & Content Assist
 Once enabled, you'll see a new set of Dojo drawers in
the palette
 Just drag and drop!
 CTRL+Space to bring up content assist menu

18. Your first HATS/Dojo App
 Add the following to the <HEAD> tag of your HATS template jsp
<script type="text/javascript" src="dojo/dojo/dojo.js"
djConfig="isDebug: false, parseOnLoad: true"></script>
<style type="text/css">
@import "dojo/dojo/resources/dojo.css";
@import "dojo/dijit/themes/tundra/tundra.css";
@import "dojo/dijit/themes/dijit.css";
</style>
 Add the following attribute to the <body> tag of your HATS template jsp
 This controls the look and feel of all dijits.
 Included styles are 'tundra, nihilo, and soria' – feel free to experiment!
 Be sure this matches the CSS file above
<body class="tundra">

19. Getting your hands dirty: Dojo Components
 Dojo
 Base functionality and namespace included in dojo.js
 Provides DOM functions, event handling
 Several sub-namespaces available such as dojo.dnd.Mover for Drag and Drop
 Dijit
 Dojo's UI library
 Rich widgets to handle layout and form elements
 DojoX
 Area for extensions
 Each has its own sub project
 Supported often by key members
 dojox.data.JsonRestStore
 dojox.av.FLAudio,
 dojox.data.GoogleFeedStore
 dojox.data.S3Store (Amazon)

20. Words of note – Adding Dijits to HATS tranformations
 Drag and drop from the palette
 You MUST move the dojo.require statements out of the <head>
 The UI will not do this for you
 If you don't – your layout will get rearranged or may not render
 Move below the closing comments
Everything above
<% this line will be
out.println("-->"); commented out
%> in the generated
page
<script type="text/javascript">
dojo.require("dijit.form.NumberSpinner");
</script>

21. Dijits – inline replacement
 Drag and drop from the palette to the transformation
 Add dojo features, events, validation accordingly
 IMPORTANT - Name the element
 Need to know the absolute cursor position to determine the name of the input
 Make the name and id attributes the same
<select name="in_262_1" dojoType="dijit.form.ComboBox" autocomplete="true" value="All"
onChange="setValue1" id="typeSelect">
<option selected="selected" value="A">All</option>
<option value="P">Power</option>
<option value="T">Tug</option>
<option value="S">Sail</option>
</select>

22. Absolute cursor position: The magic formula is
… simpler than the properties of a real gas. Absolute cursor position is a
actually a lot simpler. No calculus required!

23. The real Absolute Cursor Position formula
 The simple cursor position is simply the row (comma) column number: i.e. 4,67.
The absolute cursor position is a single number that is a calculation of the row and
position.
 The formula is as follows:
[(row number-1) * max columns] + current column number
 For example, take a 5250 session with a screen size of 24x80. That's 24 rows,
and 80 columns. A field at position 5,40 would have an absolute cursor position of:
 [(5-1) * 80] + 40 = 360
 This absolute cursor position is often used in JavaScript functions found in
lxgwfunction.js. If you familiarize yourself with those events, you can do some neat
UI tricks in HATS.

24. Using Dijits on Macro Handlers
 Macro handlers are second most misunderstood artifact
 Simply write a jsp with input elements named after the macro
prompts
 Specify your new macro handler for the macro prompt
<input dojoType="dijit.form.ValidationTextBox"
regExp="ddddddd"
name="customerNumber" maxlength="7"
invalidMessage="Only 7 digits - no more, no less">

25. 25

26. Dijit Container elements
 TabContainer
 GREAT replacement for the native HATS tabbed panel
 Much easier to edit, easy to style
 Accordian Container
 Stuff related HATS fields into groups that can be expanded / collapsed
 StackContainer
 This container is good for wizards, slide shows, and long lists or text blocks.
 Border Container
 Create a 'frames' like UI
 Great for splitting up navigation elements
 Think 'InfoCenter', or online help

27. Ajax Proxy
 Why?
 Browser cannot pull data from outside source host
 Servlet to proxy data from outside the domain
 WAS acts on behalf of browser
 Security settings to restrict proxy location
 VERY important to set
 Prevent cross site scripting hack
 Requires WebSphere App Server Feature Pack for Web 2.0
 FREE add on to WAS
 Available for WAS 6.0, 6.1, and 7.0

28. Feature Pack for Web 2.0

29. Using the Dojo API
 Several productivity features
 dojo.query
 Faster than writing your own cross-browser compliant script!
 Add events and handlers to form elements
 Add visual effects and animation
 Integrate and access SOAP & REST based web services
 RSS feeds
 Remote Procedure calls with dojo.rpc.RpcService
 Access 3250 5250 or VT100 apps via web services using HATS!

30. dojo.query
 Use CSS selector like syntax to target elements
 “#header”
 target HTML element with ID attribute
 “.HATSTABLEHEADER”
 target HTML element with class attribute
 “INPUT.HATSFIELD .RHWHITE”
 target an HTML element with class attribute of “RHWHITE” that follows an HTML
element with a class attribute of HATSFIELD
 Use to modify layout dynamically
 Use with dojo.dnd
 Use to add event handlers/listeners
 Use with dojo.connect

31. Without dojo.query
<script type="text/javascript">
// list every node with the class "HATSFIELD":
var list = [];
var nodes = document.getElementsByTagName("input");
for(var x = 0; x < nodes.length; x++){
// only nodes with the class "HATSFIELD":
if(nodes[x].className == "HATSFIELD"){
nodes[x].style=”color:red;”
}
}
</script>
SLOW!!

32. With dojo.query
<script type="text/javascript">
// Set the font to red for all HATS fields:
dojo.query(".HATSFIELD").style="color:red;" ;
</script>

33. 33

34. Event Handlers & Listeners
 dojo.connect
 Connects events to methods
 NodeList.connect
 Connects events to every node in the list, like dojo.connect
 NodeList.events
 Common event names mapped as functions on a NodeList - eg: .onclick(function(){})
 dojo.disconnect
 Disconnects methods from linked topics
 dojo.subscribe
 Linked a listener to a named topic
 dojo.unsubscribe
 Remove a topic listener
 dojo.publish
 Publish an event to all subscribers of a topic
 dojo.connectPublisher
 Ensure that everytime an event is called, a message is published on the topic

35. Change Existing HATS Components
 Change components after rendering
 i.e. change subfile from checkbox to radio components
 Use to add features
 Add event handlers, listeners
 Change html elements
 Insert data from Global Variables
 Add/Remove/Change attributes
 Easier to implement than custom Widgets

36. Example with one line of code
<script type="text/javascript">
dojo.query("input.HATSBUTTON").attr("type","radio");
</script>
Convert check box subfile to radio buttons!
One line of
code!

37. Custom Widgets
 Add your own custom widgets
 Extend existing components as superclass
 Subfiles are near impossible to build from scratch
 Use regular expressions to find/replace
 Build widgets that don't compare to existing ones
 Must manually add dojo.require statements to JSP
 Allows you to replace default rendering widgets with dijits
 More complex to build, less risk of browser 'break'

38. Tips & Tricks
 Update your SDP to the latest fixpack
 RSA / RAD 7.5.5.1 for Dojo 1.4
 Using Installation Manager
 Get Web 2.0 Feature Pack for WAS 7.0
 Use, develop, test with WAS 7.0
 WAS 6.0 out of maintenance
 Better performance with WAS 7
 Test with Firefox with Firebug extension
 If you use IE6, the Easter Bunny will die, and Santa Clause will be his killer
 Regression test with Functional Tester
 Automate the process
 Share test data between HATS, and 5250 tests
 Experiment with simple JSPs / HTML first
 Get the hang of it, then apply to HATS apps

39. Helpful Resources
 http://blog.strongbackconsulting.com
 Our blog site – lots of tips & tricks on HATS & other Rational software
 http://delicious.com/klenny/HATS
 All our HATS related links
 http://www.dojotoolkit.org
 The primary site for Dojo/Dijit/DojoX documentation
 http://www.redbooks.ibm.com/redbooks/pdfs/sg247635.pdf
 IBM Redbook: Building Dyanamic Applications using the Feature pack for Web 2.0
 http://www-949.ibm.com/software/rational/cafe/community/hats
 HATS Community Hotspot – great place to ask questions, submit feedback to the
HATS team.
 telnet://towel.blinkenlights.nl
 A terminal emulator version of Star Wars.
 Maybe not helpful, but certainly entertaining

40. Questions
40

41. Thank You
Learn more at:
 IBM Rational software  Ensure Web security & compliance  Rational trial downloads
 Rational launch announcements  Improve project success  developerWorks Rational
 Rational Software Delivery Platform  Manage architecture  Leading Innovation
 Accelerate change & delivery  Manage evolving requirements  IBM Rational TV
 Deliver enduring quality  Small & midsized business  IBM Business Partners
 Enable enterprise modernization  Targeted solutions  IBM Rational Case Studies
© Copyright IBM Corporation 2010. 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.
41

42. Backup Slides
42

43. Accordion Container
43

44. Tab Container, Slider, Combo, Number Spinner
44