Using Dojo Javascript Framework with Rational HATS
-
Upload
strongback-consulting -
Category
Technology
-
view
2.519 -
download
0
description
Transcript of Using Dojo Javascript Framework with Rational HATS
The premiere software and product delivery event.June 6–10 Orlando, Florida
IBM Innovate 2010 Session Track Template
Kenny SmithPrincipal Consultant, Strongback [email protected]
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