Utilising the Dojo Toolkit to create web browser applications from CICS
Matter of Fact Software
Stephen Mitchell
May 2012 Disclaimer
The 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. Agenda
Why 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 Toolkit
Dojo is an Open Source Javascript Toolkit.
Dojo saves time and scales with web 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 Features
Dojo’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 Dojo
Dojo 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 Core Additional stable (but optional) components for advanced animations, I/O, data, Drag and Drop and much more. Dijit Dijit is Dojo’s theme-able, accessible, easy-to-customize UI Library. Dijit requires Dojo Base and various Dojo Core modules to use. DojoX DojoX 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 starting 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 - 1
WORKING-STORAGE SECTION.
01 W-table-start-1. 02 pic x(06) value ''. 02 PIC X(2) value X'0D25'. 02 pic x(06) value '
'. 02 pic x(36) value '01 W-table-start-2. 02 pic x(07) value ''. 02 PIC X(2) VALUE X'0D25'. 02 pic x(22) value '
'. 02 PIC X(2) VALUE X'0D25'. 02 pic x(17) value 'MF3SAMP4
'.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 '
01 W-DOJO-PIE-SCRIPT. 02 PIC X(2) value X'0D25'. 02 PIC X(08) value ''. 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 - 6
OTHER 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) nohandle end-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?