Utilising the Dojo Toolkit to create web browser ... - Fundi Software

Utilising the Dojo Toolkit to create web browser applications from CICS Matter of Fact Software Stephen Mitchell [email protected]

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. D o j o s av e s t i m e a n d s c a l e s w i t h w e 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 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 'MF3SAMP4: CICS App using Dojo'. 02 pic x(08) value ''. 02 PIC X(2) value X'0D25'. 02 pic x(39) value ''. 02 pic x(09) 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 ''.

Sample Application - COBOL Source - 3 01 W-DOJO-PIE-SCRIPT. 02 PIC X(2) value X'0D25'. 02 PIC X(08) value ''. 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 ''.

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?