Using Dojo Javascript Framework with Rational HATS
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>
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">
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
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>
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