The premiere software and product delivery event.June 6–10 Orlando, Florida

IBM Innovate 2010 Session Track Template

Kenny SmithPrincipal Consultant, Strongback Consultingkenny.smith@strongbackconsulting.comPWR-1068A

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

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

RevitalizeApplications

Rational Host Access Transformation ServicesAchieve fast ROI with low risk

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

Extend host application to new users Improve the navigation of your host application Reuse your existing assets in a Service Oriented

Architecture Avoid rewriting applications (no impact to code)

See session EM-1178B for more background info

on HATS

5

Modernization At Your Own Pace

Today Day 1 Tomorrow

Instant Value: HATS default rendering automatically transforms actions into

clickable links and buttons. No changes required to the host

application.

Modern UI: All pages share the same theme and

style, which can be based on an existing

Web site.

Aggregation: data from other screens,

databases, or other systems can be merged and displayed with host

data.

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!

6

HATS deployment options

Portal

Integration at the glass

Cooperative portlet support

3270 or 5250 datastream

Web Service

Build self-service transactions

Rich Client

Integration at the desktop with other Eclipse applications

Client side processing Rich set of user

interface widgets Built on the standard,

open Eclipse foundation 3270e print directly to

end user’s printer

Mobile

PDA, Smart Phones, Data Collection terminals

View through your favorite browser Zero footprint

Web

7

Architecture Comparison

Traditional Emulator System i or z

(TN5250, 5250W, or TN3270)

HTML over HTTP

Eclipse-based Rich Client

Internet, Intranet, or VPN

HATS Running onWebSphere Application Server

or WebSphere Portal

Provisioning Server(Optional)

Standard Web Browser

3270/5250 datastream

3270/5250 datastream

Persistent

Non-persistent

PDA/Mobile Device

SOAP over HTTP

Web Service Client

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

Features

MANY JavaScript convenience utilitiesDocument Object Model (DOM) manipulationEvent handling

Asynchronous communicationaka AJAX

Packaging systemModular – only loads API elements you needCode elements can be packages into a single file, reducing multiple HTTP trips

Client-side data storageDojo storage allows persistent data with user's permission

Server-side data storageJSON, CSV, XML

Browser safe IE, Firefox, Safari, Chrome, OperaProgressive enhancement as browser versions mature IE6 safe … but for the love of all that is good upgrade to the newer version!

Why Use Dojo?

HATS uses many Javascript functionsBut don't think about touching them!

Data validation not included with toolkitTrue validation dependent upon host systemHost system may not do any data validation

Coding validation from scratch is hardError prone & lack of debug supportRarely cross-browser compliantPoor documentation

We want Web 2.0 features!Ajax remotingDrag and dropSyntactic dialogs

Add functionality that neither host, nor HATS provides!

Easy Input Translation

Remove leading/trailing white space Change CAPITALIZATION on the Fly Ensure proper data format

Phone numbers, zip codes, SS#

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

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>

Sophisticated Web 2.0 Calendar Popups

<input type="text" name="date1" value="" dojotype="dijit.form.DateTextBox" />

Dojo tooling

You probably already have it!RAD, RBD, RSA, etc. 7.5x and aboveTry to use the latest release of your SDP for most current tooling

Just enable your projectMust Add Project FacetAlso 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

Getting Started

First, add the Dojo toolkit as a Facet to your ProjectRight click – go to 'properties'

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

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 jspThis 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">

Getting your hands dirty: Dojo Components

DojoBase functionality and namespace included in dojo.jsProvides DOM functions, event handlingSeveral sub-namespaces available such as dojo.dnd.Mover for Drag and Drop

DijitDojo's UI libraryRich widgets to handle layout and form elements

DojoXArea for extensionsEach has its own sub projectSupported often by key members

dojox.data.JsonRestStore dojox.av.FLAudio, dojox.data.GoogleFeedStore dojox.data.S3Store (Amazon)

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 renderMove below the closing comments

<%out.println("-->");%>

<script type="text/javascript">dojo.require("dijit.form.NumberSpinner");</script>

Everything above this line will be

commented out in the generated

page

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 inputMake 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>

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!

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.

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="\d\d\d\d\d\d\d"name="customerNumber" maxlength="7"invalidMessage="Only 7 digits - no more, no less">

25

Dijit Container elements

TabContainerGREAT replacement for the native HATS tabbed panelMuch easier to edit, easy to style

Accordian ContainerStuff related HATS fields into groups that can be expanded / collapsed

StackContainerThis container is good for wizards, slide shows, and long lists or text blocks.

Border ContainerCreate a 'frames' like UIGreat for splitting up navigation elementsThink 'InfoCenter', or online help

Ajax Proxy

Why?Browser cannot pull data from outside source host

Servlet to proxy data from outside the domainWAS acts on behalf of browserSecurity 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

Feature Pack for Web 2.0

Using the Dojo API

Several productivity featuresdojo.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 feedsRemote Procedure calls with dojo.rpc.RpcServiceAccess 3250 5250 or VT100 apps via web services using HATS!

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 dynamicallyUse with dojo.dnd

Use to add event handlers/listenersUse with dojo.connect

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!!

With dojo.query

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

33

Event Handlers & Listeners

dojo.connectConnects events to methods

NodeList.connectConnects events to every node in the list, like dojo.connect

NodeList.eventsCommon event names mapped as functions on a NodeList - eg: .onclick(function(){})

dojo.disconnectDisconnects methods from linked topics

dojo.subscribeLinked a listener to a named topic

dojo.unsubscribeRemove a topic listener

dojo.publishPublish an event to all subscribers of a topic

dojo.connectPublisherEnsure that everytime an event is called, a message is published on the topic

Change Existing HATS Components

Change components after rendering i.e. change subfile from checkbox to radio components

Use to add featuresAdd event handlers, listenersChange html elements Insert data from Global VariablesAdd/Remove/Change attributes

Easier to implement than custom Widgets

Example with one line of code

<script type="text/javascript"> dojo.query("input.HATSBUTTON").attr("type","radio");</script>

One line of code!

Convert check box subfile to radio buttons!

Custom Widgets

Add your own custom widgets Extend existing components as superclass

Subfiles are near impossible to build from scratchUse 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'

Tips & Tricks

Update your SDP to the latest fixpackRSA / RAD 7.5.5.1 for Dojo 1.4Using Installation ManagerGet Web 2.0 Feature Pack for WAS 7.0

Use, develop, test with WAS 7.0WAS 6.0 out of maintenanceBetter 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 TesterAutomate the processShare test data between HATS, and 5250 tests

Experiment with simple JSPs / HTML firstGet the hang of it, then apply to HATS apps

Helpful Resources

http://blog.strongbackconsulting.comOur blog site – lots of tips & tricks on HATS & other Rational software

http://delicious.com/klenny/HATSAll our HATS related links

http://www.dojotoolkit.orgThe 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/hatsHATS Community Hotspot – great place to ask questions, submit feedback to the

HATS team.

telnet://towel.blinkenlights.nlA terminal emulator version of Star Wars.

Maybe not helpful, but certainly entertaining

40

Questions

41

© 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.

Learn more at:IBM Rational softwareRational launch announcementsRational Software Delivery PlatformAccelerate change & deliveryDeliver enduring qualityEnable enterprise modernization

Rational trial downloadsdeveloperWorks RationalLeading InnovationIBM Rational TVIBM Business PartnersIBM Rational Case Studies

Ensure Web security & complianceImprove project successManage architectureManage evolving requirementsSmall & midsized businessTargeted solutions

Thank You

42

Backup Slides

43

Accordion Container

44

Tab Container, Slider, Combo, Number Spinner