Utilizing the Dojo Toolkit for Web browser-driven applications from CICS
30
Utilising the Dojo Toolkit to create web browser applications from CICS Matter of Fact Software Stephen Mitchell May 2012 [email protected]
Transcript of Utilizing the Dojo Toolkit for Web browser-driven applications from CICS
Utilising the Dojo Toolkit to create web browser applications from CICS
Matter of Fact Software
Stephen Mitchell
May 2012
DisclaimerThe standard disclaimers apply.
The opinions expressed are those of the author only.
Any mention of brand names, trademarks, registered trademarks etc are the exclusive property of their owners.
No warranties are either expressed or implied.
AgendaWhy use Dojo?
The Business Issue
The Dojo Toolkit
What we did next
Our Solutions
CICS JS/Server
PlexSpy V2
Using Dojo
PlexSpy V2 prototype - graphics, date/timepickers
CICS JS/Server IVP’s / examples
HTML document source sample
Benefits
Links
Q & A
The Business Issue
• Planning the evolution of PlexSpy we recognised a need to display graphical data in the web browser.
• In seeking the ability to display graphics we learned about Javascript libraries such as JQuery and the Dojo Toolkit.
• We decided that we would use Dojo.
Dojo ToolkitDojo is an Open Source Javascript Toolkit.
D o j o s ave s t i m e a n d s c a l e s w i t h we b development processes, using web standards as its platform. It is the toolkit experienced developers turn to for building high quality web applications.
“From simple websites to large packaged enterprise applications whether desktop or mobile, Dojo will meet your needs.”
http://dojotoolkit.org/
Dojo Toolkit FeaturesDojo’s Base modules contain the essential capabilities modern web applications need:
• DOM Functions
• - Query
• - NodeList extensions
• - Events
• Effects & Animation
• Language Helpers
• Behaviours
• Ajax I/O
More about DojoDojo Base
The base functionality of the Dojo Toolkit is provided by just including dojo.js. This includes tons of features like CSS-based queries, event handling, animations, Ajax, class-based programming, and a package system that makes getting access to the rest of Dojo a snap.
Dojo CoreAdditional stable (but optional) components for advanced animations, I/O, data, Drag and Drop and much more.
DijitDijit is Dojo’s theme-able, accessible, easy-to-customize UI Library. Dijit requires Dojo Base and various Dojo Core modules to use.
DojoXDojoX contains a number of sub-projects based on Dojo Base. One can consider these projects Dojo e**X**tensions or e**x**periments. Each project has a varying states of maturity – from very stable and robust, to alpha and e**x**perimental. All DojoX projects, at the least, contain README files that outline their maturity and authorship, so be sure to check those along with the documentation pages to get the full picture of where a module is headed.
What we did next• We recognised a need to control the Dojo
Toolkit being used by PlexSpy
• We recognised that if this was an issue for us then it could be a general concern.
• We decided to take control of the Dojo Toolkit and create a generic server solution that could be used by anyone with CICS on z/OS.
• We learned how to use the Dojo Toolkit ourselves.
Introducing CICS JS/Server
• The Dojo Toolkit has been taken into the mainframe environment and is served from CICS out of PDS datasets.
• This brings the strengths of the mainframe to the use of the Dojo Toolkit and gives us the control over it that we needed.
PlexSpy V2?
• PlexSpy V2 can now be completed.
• All of the features of the Dojo Toolkit can be used to enhance PlexSpy star ting with the provision of graphical displays.
Using Dojo
Live demonstrations/images/screen capture
Demonstration of CICS JS/Server IVP’s
Demonstration of PlexSpy V2 prototype
Show HTML Document details / COBOL
Simple Application - Browser
Sample Application Browser Source-1
Sample Application Browser Source-2
Sample Application - CICS Infrastructure - 1
Sample Application - COBOL Source - 1WORKING-STORAGE SECTION.01 W-table-start-1. 02 pic x(06) value '<html>'. 02 PIC X(2) value X'0D25'. 02 pic x(06) value '<head>'. 02 pic x(36) value '<title>MF3SAMP4: CICS App using Dojo'. 02 pic x(08) value '</title>'. 02 PIC X(2) value X'0D25'. 02 pic x(39) value '<script src="http://ajax.googleapis.com'. 02 pic x(36) value '/ajax/libs/dojo/1.6/dojo/dojo.xd.js"'. 02 pic x(30) value ' djConfig="parseOnLoad: true">'. 02 pic x(09) value '</script>'.
01 W-table-start-2. 02 pic x(07) value '</head>'. 02 PIC X(2) VALUE X'0D25'. 02 pic x(22) value '<body class=" claro ">'. 02 PIC X(2) VALUE X'0D25'. 02 pic x(17) value '<h2>MF3SAMP4</h2>'.
01 W-DTOKEN PIC X(16).01 w-DTOKEN-BOOKMARK PIC X(16) VALUE SPACES.01 W-TABLE-START-BOOKMARK PIC X(16) VALUE 'BOOKMARKSDMLSR01'.
Sample Application - COBOL Source - 2
01 W-DIV-PIECHART. 02 PIC X(2) VALUE X'0D25'. 02 pic x(14) value '<div dojoType='. 02 pic x(23) value '"dojox.charting.widget.'. 02 pic x(15) value 'Chart2D" theme='. 02 pic x(23) value '"dojox.charting.themes.'. 02 pic x(23) value 'Claro" id="viewsChart" '. 02 pic x(06) value 'style='. 02 pic x(31) value '"width: 300px; height: 300px;">'. 02 PIC X(2) value X'0D25'. 02 pic x(18) value '<div class="plot" '. 02 pic x(26) value 'name="default" type="Pie" '. 02 pic x(29) value 'radius="100" fontColor="#000"'. 02 pic x(25) value ' labelOffset="-20"></div>'. 02 PIC X(2) value X'0D25'. 02 pic x(20) value '<div class="series" '. 02 pic x(27) value 'name="LSRPOOL Performance" '. 02 pic x(24) value 'array="chartData"></div>'. 02 pic x(06) value '</div>'.
Sample Application - COBOL Source - 301 W-DOJO-PIE-SCRIPT. 02 PIC X(2) value X'0D25'. 02 PIC X(08) value '<script>'. 02 PIC X(2) value X'0D25'. 02 PIC X(13) value ' dojo.require'. 02 PIC X(16) value '("dojo.parser");'. 02 PIC X(2) value X'0D25'. 02 PIC X(13) value ' dojo.require'. 02 PIC X(34) value '("dojox.charting.widget.Chart2D");'. 02 PIC X(2) value X'0D25'. 02 PIC X(13) value ' dojo.require'. 02 PIC X(32) value '("dojox.charting.themes.Claro");'. 02 PIC X(2) value X'0D25'. 02 PIC X(12) value 'chartData = '. 02 PIC X(1) value X'BA'. 02 PIC X(2) value X'0D25'. 02 PIC X(14) value '{ x: "1", y: "'. 02 p1 PIC X(10) value ' 19021'. 02 PIC X(04) value '" },'. 02 PIC X(14) value '{ x: "1", y: "'. 02 p2 PIC X(10) value ' 12837'. 02 PIC X(04) value '" } '. 02 PIC X(2) value X'0D25'. 02 PIC X(1) value X'BB'. 02 PIC X(01) value ';'. 02 PIC X(2) value X'0D25'. 02 PIC X(09) value '</script>'.
Sample Application - COBOL Source - 4
PROCEDURE DIVISION..exec cics document create doctoken(w-dtoken)end-exec..exec cics document create doctoken(w-dtoken-bookmark)end-exec..exec cics document insert doctoken(w-dtoken) from(w-table-start-1) length(length of w-table-start-1)end-exec..exec cics document insert doctoken(w-dtoken) bookmark(w-table-start-bookmark)end-exec..exec cics document insert doctoken(w-dtoken) from(w-table-start-2) length(length of w-table-start-2)end-exec...
Sample Application - COBOL Source - 5
exec cics document insert doctoken(w-dtoken) from(w-div-piechart) length(length of w-div-piechart) end-exec.
.exec cics document insert doctoken(w-dtoken-bookmark) from(w-dojo-pie-script) length(length of w-dojo-pie-script)end-exec..exec cics document insert doctoken(w-dtoken) at(w-table-start-bookmark) fromdoc(w-dtoken-bookmark)end-exec.
Sample Application - COBOL Source - 6OTHER COMMANDS:
exec cics web read formfield(w-frm-context) namelength(length of w-frm-context) value(w-form-val-context) valuelength(w-form-vallen-context) nohandleend-exec.
exec cics web send doctoken(w-dtoken) clntcodepage('819')end-exec.
CICS JS/Server IVP
CICS JS/Server - Movie
PlexSpy V2 Prototype
PlexSpy V2 Prototype - Movie
Benefits
• Dojo Toolkit facilitates the creation and operation of modern web applications. Google, IBM and other big players are committed to it so it has an evolving future.
• Secure and reliable - RACF, SSL, etc
• Scalable - Port sharing / Sysplex Distributor
• Operational processes that are well understood and trusted for business critical systems can now be applied to the use of the Dojo Toolkit.
• PDS Datasets - simple and well understood. No need for ZFS file structures and all that they imply.
Road Map
• CICS JS/Server V1.1 is available now - supporting Dojo Toolkit 1.7.2 (the latest version at the time of writing)
• CICS JS/Server V2 is in development. Planning support for JQuery, JQuery UI in addition to Dojo.
• CICS JS/Server Vx - other Open Source Javascript libraries and tools. + + +
• Extend our own usage of Dojo within PlexSpy.
• Provide more sample code that demonstrate the ability of CICS to interact with Web Browsers exploiting Dojo, JQuery etc.
• What do you want it to support? - tell us.
Links
Dojo Toolkit
Dojo Foundation
Dojo Campus
Matter of Fact Software
CICS JS/Server
PlexSpy
Acknowledgments
• CICS, CICSPLEX, z/OS, SYSPLEX are Trademarks of IBM Corporation.
• Dojo Toolkit is the work of The Dojo Foundation: http://dojofoundation.org/
Questions?
Any Questions?
