DOCSLIB.ORG

Utilising the Dojo Toolkit to Create Web Browser Applications from CICS Matter of Fact Software

Utilising the Dojo Toolkit to Create Web Browser Applications from CICS Matter of Fact 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. 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 '<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 - 3 01 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 - 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?.

View Full Text

Details

  • File Type
    pdf
  • Upload Time
    -
  • Content Languages
    English
  • Upload User
    Anonymous/Not logged-in
  • File Pages
    30 Page
  • File Size
    -

Download

Channel Download Status
Express Download Enable

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

  • Not to be reproduced or distributed without explicit permission.
  • Not used for commercial purposes outside of approved use cases.
  • Not used to infringe on the rights of the original creators.
  • If you believe any content infringes your copyright, please contact us immediately.

Support

For help with questions, suggestions, or problems, please contact us