Using Dojo Javascript Framework with Rational HATS


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Using Dojo Javascript Framework with Rational HATS

  1. 1. IBM Innovate 2010 Session Track Template Kenny Smith Principal Consultant, Strongback Consulting PWR-1068A The premiere software and product delivery event. June 6–10 Orlando, Florida
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. Easy Input Translation  Remove leading/trailing white space  Change CAPITALIZATION on the Fly  Ensure proper data format  Phone numbers, zip codes, SS#
  12. 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. 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. 14. Sophisticated Web 2.0 Calendar Popups <input type="text" name="date1" value="" dojotype="dijit.form.DateTextBox" />
  15. 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
  16. 16. Getting Started  First, add the Dojo toolkit as a Facet to your Project  Right click – go to 'properties'
  17. 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. 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. 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.av.FLAudio,   (Amazon)
  20. 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. 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. 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. 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. 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. 25
  26. 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. 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. 28. Feature Pack for Web 2.0
  29. 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. 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. 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. 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. 33
  34. 34. Event Handlers & Listeners  dojo.connect  Connects events to methods  NodeList.connect  Connects events to every node in the list, like dojo.connect   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. 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. 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. 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. 38. Tips & Tricks  Update your SDP to the latest fixpack  RSA / RAD 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. 39. Helpful Resources   Our blog site – lots of tips & tricks on HATS & other Rational software   All our HATS related links   The primary site for Dojo/Dijit/DojoX documentation   IBM Redbook: Building Dyanamic Applications using the Feature pack for Web 2.0   HATS Community Hotspot – great place to ask questions, submit feedback to the HATS team.  telnet://  A terminal emulator version of Star Wars.  Maybe not helpful, but certainly entertaining
  40. 40. Questions 40
  41. 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. 42. Backup Slides 42
  43. 43. Accordion Container 43
  44. 44. Tab Container, Slider, Combo, Number Spinner 44