web enabling cics applications methodologies and techniques 1999 © data 21, inc. data 21, inc....

51
Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Upload: meaghan-keck

Post on 29-Mar-2015

221 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Web Enabling CICS Applications Methodologies and Techniques

1999 © Data 21, Inc.

Data 21, Inc.David L. Kennedy

Page 2: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 1: Introduction

Define Web Enable

Why Web Enable?

Common Methods of Web Enabling

CICS as a Web Server Environment

Introducing IpServer for CICS

Page 3: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 2: Introduction to CGI

The Common Gateway Interface (CGI)

How CGI’s get initiated

Page 4: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic & Presentation

Part 1: HTML and CGI Programming

Part 2: Client Scripting Solutions

Page 5: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 1: Introduction

Page 6: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 1: Introduction

Define Web EnableDefine Web EnableWeb Enable v. The action of establishing Web Browser access to legacy data. Generally includes the replacement of a text-based interface with that of a GUI Web interface.

Why Web EnableWhy Web Enable

Data 21

Increase productivity Increase productivity reduce costs reduce costs enhance service enhance service stay stay competitivecompetitive

•TCP/IP is a low cost open network

•Provide a standard GUI Web interface

•For next generation of end-users

•Reduce training for new users

•Improve applications with graphics, video, audio

•Provide access to new user groups

•Customers

•Partners (extranet)

•Suppliers (extranet)

Page 7: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 1: Introduction

Common Methods of Web EnablingCommon Methods of Web Enabling• Java Applets (e.g., IBM Host On Demand)

• No Changes to Host applications

• Per-seat licensing costs• Deployment Issues

• Screen Scrapping• No Changes to Host applications• Potential problems if host screens are changed • Per-seat licensing costs• Deployment Issues

• CGI Programming• Changes to Host applications• No per-seat licensing costs• No deployment Issues

Data 21

Page 8: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 1: Introduction

CICS as a Web Server EnvironmentCICS as a Web Server Environment

•The data is thereThe data is there

•Designed to manage large Designed to manage large numbers of simultaneous usersnumbers of simultaneous users

•Leverage existing systems, skills, Leverage existing systems, skills, tools and application codetools and application code

Data 21

Page 9: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 1: Introduction

Introducing IpServer for CICSIntroducing IpServer for CICSIpServer for CICS is the only native CICS Web Server solution for VSE.

• HTTP compliant Web Server with the performance and facilities of CICS.• Native CICS CGI makes it easy to Web Enable your CICS programs.

Data 21

Page 10: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

CICS WEB SERVER   

High Performance Memory Caching  X

CICS Security Interface X

SSL  X

CICS WEB DEVELOPMENT (CGI)   

Server Side Includes (SSI) X

Useful JavaScript's X

SENDMAIL  API X

WEB-TO-HOST* 

Browser connectivity to 3270 applications X

Create customized Web page templates for X

individual 3270 screens using any HTML editor

SUPPORT   

Programming and Web Side Development X

24/7 Searchable Web Knowledge Base X

ENVIRONMENTS    

VSE 2.1+ X

MVS, OS/390 X

CICS 2+  X

MRO  X

FeaturesFeatures

Page 11: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 2: Introduction to CGI

Page 12: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 2: Introduction to CGI

The Common Gateway Interface (CGI)The Common Gateway Interface (CGI)

Data 21

The Common Gateway Interface (CGI) specification lets Web servers execute server-side programs and incorporate their data into the information sent to a Web Browser.

Page 13: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 2: Introduction to CGI

How CGI’s get InitiatedHow CGI’s get Initiated

Data 21

• Get MethodHREF or Form submission with METHOD="GET" parameter specified on

FORM tag.

• Post MethodForm submission with METHOD="POST" parameter specified in FORM tag.

• SSI Directive (#exec cgi=“program name”)When a Web Server encounters this SSI directive within a page (as it is sending the page to the browser), the Web Server will suspend sending, initiate the related CGI, replace the directive statement (within the Web page text) with the CGI’s data, then resume sending the page.

Page 14: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 2: Introduction to CGI

How CGI’s get Initiated (cont.)How CGI’s get Initiated (cont.)

Data 21

Example of Using the GET Method to initiate a CGI Using a link (HREF)

Using this technique, the author must supply the entire URL, which must include the parameter list pairs (if parameters are to be passed to the CGI).

<A HREF="MYCGI?fname=tom&lname=jones" >CLICK to Execute MYCGI</A>

Using a Form: METHOD=”GET” or “POST”

Using this technique, the browser will build the exact same URL (as in the example above) when the submit button is pressed by the user viewing the page.

<HTML> <BODY> <FORM NAME=MYFORM METHOD="GET" ACTION="MYCGI"> <INPUT TYPE="TEXT" NAME="fname" VALUE="tom"> <INPUT TYPE="TEXT" NAME="lname" VALUE="jones"> <INPUT TYPE="SUBMIT" VALUE="SUBMIT"></FORM> </BODY> </HTML>

Page 15: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 2: Introduction to CGI

How CGI’s get Initiated (cont.)How CGI’s get Initiated (cont.)

Data 21

Example of Using SSI “#exec” Directive to initiate a CGI

Sample HTML of page containing an #exec directive used to invoke a CGI programmed to supply the number of times the page has been accessed:

<HTML> <BODY> This page has been accessed <!--#exec cgi="counter"--> times. </BODY> </HTML>

The resulting Web page would display the output of the CGI (in this case "1400") in the position the directive held in the page. Example (displayed to end-user):

This page has been accessed 1400 times.

Page 16: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 2: Introduction to CGI

Simple IpServer CICS Cobol CGI Simple IpServer CICS Cobol CGI

Data 21

******************************************************** * RETURN A WEB PAGE IN A TS QUEUE (IN ITEM 1) * ******************************************************** IDENTIFICATION DIVISION. PROGRAM-ID. 'CGI101S'. ENVIRONMENT DIVISION. DATA DIVISION. WORKING-STORAGE SECTION. 01 WORKAREA. 05 WEB-PAGE-LENGTH PIC S9(4) VALUE +38 COMP. 01 WEB-PAGE. 05 FILLER PIC X(6) VALUE '<HTML>'. 05 FILLER PIC X(6) VALUE '<BODY>'. 05 MSG PIC X(12) VALUE 'HELLO WORLD!'. 05 FILLER PIC X(7) VALUE '</BODY>'. 05 FILLER PIC X(7) VALUE '</HTML>'. LINKAGE SECTION. 01 DFHCOMMAREA. COPY D21ICGIC. PROCEDURE DIVISION. 000-MAIN. IF VALID-COMMAREA PERFORM 100-WRITE-TSQ END-IF. 000-EXIT. EXEC CICS RETURN END-EXEC. 100-WRITE-TSQ. EXEC CICS WRITEQ TS QUEUE(CGI-RETURN-TSQID) FROM(WEB-PAGE) LENGTH(WEB-PAGE-LENGTH) END-EXEC.

Page 17: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic & Presentation

Part 1: HTML and CGI Programming

Page 18: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic and Presentation

The Role of SSIThe Role of SSI

Data 21

Server Side Includes (SSI) are directives you can place into an HTML document to execute other programs or to output data, such as the contents of environmental variables. While Server Side Includes technically are not CGI, they can become an important tool for incorporating CGI-like information as well as output from CGI programs.

Most commonly Used SSI Directives:

<!--#echo var=”VARIABLE_NAME ”-->

<!--#exec cgi=“program-name?var1=value&var2=value”-->

<!--#include virtual=”path …”-->

Page 19: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic and Presentation

The Role of SSI (cont.)The Role of SSI (cont.)

Data 21

Using SSI to Separate Business Logic from Presentation (HTML)

BENEFITS

• Simplifies CGI Programs

• Programmers shielded from HTML and other Web authoring disciplines.

• Presentation can be changed at any time, without re-programming.

Page 20: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic and Presentation

The Role of SSI (cont.)The Role of SSI (cont.)Data 21

Web Page with SSI Variables for merging CGI Data<HTML> <BODY> <FORM NAME=MYFORM METHOD="GET" ACTION="MYCGI"> <INPUT TYPE="TEXT" NAME="fname" VALUE=‘<!-- (FNAME)-->’> <INPUT TYPE="TEXT" NAME="lname" VALUE =‘<!--(LNAME)-->’ > <INPUT TYPE="SUBMIT" VALUE="SUBMIT"></FORM> </BODY> </HTML>

05 PARSE2. 10 PARSE-FNAME-ID PIC X(16) VALUE ’FNAME'. 10 PARSE-FNAME-LEN PIC S9(4) VALUE +12 COMP. 10 FILLER PIC X(4) VALUE ' '. 10 PARSE-FNAME PIC X(12) VALUE ' '. * 10 PARSE-LNAME-ID PIC X(16) VALUE ’LNAME'. 10 PARSE LNAME-LEN PIC S9(4) VALUE +25 COMP. 10 FILLER PIC X(4) VALUE ' '. 10 PARSE-LNAME PIC X(25) VALUE ' '.

Fields Defined in CICS COBOL CGI

Page 21: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic and PresentationData 21

IDENTIFICATION DIVISION. PROGRAM-ID. 'MYCGI1'. ENVIRONMENT DIVISION. DATA DIVISION. WORKING-STORAGE SECTION.

01 WORKAREA. 05 BLANKS PIC X VALUE ' '. 05 RETURN-PAGE PIC X(44) VALUE '/MYCGI.HTM'. 05 PARSE2-LENGTH PIC S9(4) VALUE +0 COMP. 05 PARSE2-TEMP-LENGTH PIC S9(8) VALUE +512 COMP.

*COPY D21IPARC. 01 PARSE. 05 PARSE1. 10 PARSE-FIELD-ID-LENGTH PIC S9(4) VALUE +16 COMP. 10 PARSE-RETCD PIC X(1) VALUE '0'. 88 PARSE-INVALID-STRUCTURE VALUE '1'. 10 PARSE-TR-UPPERCASE PIC X(1) VALUE 'Y'. 88 PARSE-TR-UPPERCASE-YES VALUE 'Y'. 88 PARSE-TR-UPPERCASE-NO VALUE 'N'. 10 FILLER PIC X(16) VALUE ' '. 10 PARSE-DATA-WALEN PIC S9(4) VALUE +255 COMP. 10 PARSE-DATA-WORKAREA PIC X(255) VALUE LOW-VALUES.

MYCGI Program: Echo Form Back

Page 22: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic and PresentationData 21

*---------------------------------------------------------------* 05 PARSE2. 10 PARSE-FNAME-ID PIC X(16) VALUE 'FNAME'. 10 PARSE-FNAME-LEN PIC S9(4) VALUE +12 COMP. 10 FILLER PIC X(4) VALUE ' '. 10 PARSE-FNAME PIC X(12) VALUE ' '. * 10 PARSE-LNAME-ID PIC X(16) VALUE 'LNAME'. 10 PARSE-LNAME-LEN PIC S9(4) VALUE +25 COMP. 10 FILLER PIC X(4) VALUE ' '. 10 PARSE-LNAME PIC X(25) VALUE ' '. *---------------------------------------------------------------* 05 PARSE3. 10 FILLER PIC X(1) VALUE LOW-VALUES. *---------------------------------------------------------------*

MYCGI Program

Page 23: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic and PresentationData 21

LINKAGE SECTION.

01 DFHCOMMAREA. COPY D21ICGIC.

PROCEDURE DIVISION.

000-MAIN. IF VALID-COMMAREA PERFORM 100-RECEIVE. PERFORM 200-SEND. END-IF. 000-EXIT. EXEC CICS RETURN END-EXEC.

100-RECEIVE. * TRANSLATE INPUT FIELDS/PARAMETERS TO UPPERCASE: YES/NO SET PARSE-TR-UPPERCASE-YES TO TRUE. * SET PARSE-TR-UPPERCASE-NO TO TRUE. CALL 'D21IPARS' USING DFHCOMMAREA, PARSE1, PARSE2, PARSE3.

* DISPLAY SAME PAGE WITH DATA MOVE RETURN-PAGE TO CGI-RETURN-PAGE-NAME. * CREATE UNIQUE TSQID FOR RETURNED DATA MOVE CGI-RETURN-TSQID TO CGI-RETURN-TSQID2. MOVE '2' TO CGI-RETURN-TSQID2-POS1.

MYCGI Program

Page 24: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic and PresentationData 21

200-SEND. MOVE LENGTH OF PARSE2 TO PARSE2-LENGTH. EXEC CICS WRITEQ TS QUEUE(CGI-RETURN-TSQID2) FROM(PARSE2) LENGTH(PARSE2-LENGTH) END-EXEC.

MYCGI Program

Page 25: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic and PresentationData 21

Returning a Block of Inquiry Data<HTML> <BODY> <FORM NAME=MYFORM METHOD="GET" ACTION="MYCGI"> <INPUT TYPE="TEXT" NAME="fname" VALUE=‘<!--(FNAME)-->’> <INPUT TYPE="TEXT" NAME="lname" VALUE =‘<!--(LNAME)-->’> <INPUT TYPE="SUBMIT" VALUE="SUBMIT"></FORM>

<PRE><!--#echo var="CGI_TSQ2"--></PRE>

</BODY> </HTML>

Page 26: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic and PresentationData 21

IDENTIFICATION DIVISION. PROGRAM-ID. 'MYCGI2'. ENVIRONMENT DIVISION. DATA DIVISION. WORKING-STORAGE SECTION.

01 WORKAREA. 05 BLANKS PIC X VALUE ' '. 05 RETURN-PAGE PIC X(44) VALUE 'MYCGI.HTM'. 05 TSRECL PIC S9(4) VALUE +62 COMP. 05 PARSE2-LENGTH PIC S9(4) VALUE +0 COMP. 05 PARSE2-TEMP-LENGTH PIC S9(8) VALUE +512 COMP.

01 TSREC. 05 REC PIC X(60) VALUE ' '. 05 CR-LF PIC X(2) VALUE X'0D25'.

MYCGI Program: Return Input fields and Inquiry results

Page 27: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic and PresentationData 21

*COPY D21IPARC. 01 PARSE. 05 PARSE1. 10 PARSE-FIELD-ID-LENGTH PIC S9(4) VALUE +16 COMP. 10 PARSE-RETCD PIC X(1) VALUE '0'. 88 PARSE-INVALID-STRUCTURE VALUE '1'. 10 PARSE-TR-UPPERCASE PIC X(1) VALUE 'Y'. 88 PARSE-TR-UPPERCASE-YES VALUE 'Y'. 88 PARSE-TR-UPPERCASE-NO VALUE 'N'. 10 FILLER PIC X(16) VALUE ' '. 10 PARSE-DATA-WALEN PIC S9(4) VALUE +255 COMP. 10 PARSE-DATA-WORKAREA PIC X(255) VALUE LOW-VALUES. *---------------------------------------------------------------* 05 PARSE2. 10 PARSE-FNAME-ID PIC X(16) VALUE 'FNAME'. 10 PARSE-FNAME-LEN PIC S9(4) VALUE +12 COMP. 10 FILLER PIC X(4) VALUE ' '. 10 PARSE-FNAME PIC X(12) VALUE ' '. * 10 PARSE-LNAME-ID PIC X(16) VALUE 'LNAME'. 10 PARSE-LNAME-LEN PIC S9(4) VALUE +25 COMP. 10 FILLER PIC X(4) VALUE ' '. 10 PARSE-LNAME PIC X(25) VALUE ' '. *---------------------------------------------------------------* 05 PARSE3. 10 FILLER PIC X(1) VALUE LOW-VALUES. *---------------------------------------------------------------*

MYCGI Program

Page 28: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic and PresentationData 21

LINKAGE SECTION.

01 DFHCOMMAREA. COPY D21ICGIC.

01 BUFFER-DATA-RETURN PIC X(512).

PROCEDURE DIVISION.

000-MAIN. IF VALID-COMMAREA PERFORM 100-RECV-ROUTINE * DATA CAN BE RETURNED IN CGI-TSQ2 OR CGI-BUFFER2 OR BOTH PERFORM 200-DATA-IN-BUFFER2 PERFORM 300-DATA-IN-TSQ2 END-IF. 000-EXIT. EXEC CICS RETURN END-EXEC.

MYCGI Program

Page 29: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic and PresentationData 21

100-RECV-ROUTINE. * TRANSLATE INPUT FIELDS/PARAMETERS TO UPPERCASE: YES/NO SET PARSE-TR-UPPERCASE-YES TO TRUE. * SET PARSE-TR-UPPERCASE-NO TO TRUE. CALL 'D21IPARS' USING DFHCOMMAREA, PARSE1, PARSE2, PARSE3.

* DISPLAY SAME PAGE WITH DATA MOVE RETURN-PAGE TO CGI-RETURN-PAGE-NAME. * CREATE UNIQUE TSQID FOR RETURNED DATA MOVE CGI-RETURN-TSQID TO CGI-RETURN-TSQID2. MOVE '2' TO CGI-RETURN-TSQID2-POS1.

MYCGI Program

Page 30: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic and PresentationData 21

200-DATA-IN-BUFFER2. * PARSE2 DATA IS USED TO PASS DATA BASED ON FIELD NAME * RETURN PARSE2 DATA IS CGI-RETURN-BUFFER2 EXEC CICS GETMAIN SET(CGI-RETURN-BUFFER2) FLENGTH(PARSE2-TEMP-LENGTH) INITIMG(BLANKS) END-EXEC. SET ADDRESS OF BUFFER-DATA-RETURN TO CGI-RETURN-BUFFER2. MOVE LENGTH OF PARSE2 TO CGI-RETURN-LENGTH2. MOVE PARSE2 TO BUFFER-DATA-RETURN.

300-DATA-IN-TSQ2.

* READ DATABASE (VSAM ...) AND WRITE TO TEMP STORAGE (CGI_TSQ2) * FORMAT TSREC OUTPUT EXEC CICS WRITEQ TS QUEUE(CGI-RETURN-TSQID2) FROM(TSREC) LENGTH(TSRECL) END-EXEC.

* LOOP FOR ALL DATABASE DATA

MYCGI Program

Page 31: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 3: Separation of Business Logic & Presentation

Part 2: Client Scripting Solutions

Page 32: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

Sample Data Entry CGI Sample Data Entry CGI

Data 21

Existing CICS Application to be Web enabled

Page 33: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

Data 21

New GUI Web Interface for Application

File name: emp1.htm

Page 34: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

Simplify CGI programming with client-side scripts and Style SheetsThe goal is to have the application (i.e., CGI) return data only (no HTML). Effective scripting is a key to accomplishing this.

Data 21

Common Functions:

Disable Back Button

Cursor Control

Initial selections of point & click objects

Contextual Help

Page 35: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

Centralize common functions into a common script Centralize common functions into a common script file which can be associated to any Web Pagefile which can be associated to any Web Page

Example:

<html><head><script language="JavaScript1.1" SRC="genscrpt.htm"></script><link rel=stylesheet type="text/css" href="empstyle.htm"></head> • • •

Data 21

Page 36: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

genscrpt.htmgenscrpt.htm// Developed by David Kennedy, Data 21 -- 09/22/98

var nameParm=""; groupName=""; d=document

// On Onload Event function focusTo(name){ // Prevent backward Navigation history.forward() var el = document.forms[0] setInitialSelections(el)

// Set initial cursor location if(name){ // Web Author supplied field name on the function, focus to it for (ti=0; ti<el.elements.length; ti++) { if (el.elements[ti].name == name){ el.elements[ti].focus() break}}} // If not, focus to field in cursor field, supplied by the CGI if(!name){ for (ti=0; ti<el.elements.length; ti++) { if (el.elements[ti].name == d.forms[0].cursor.value){ el.elements[ti].focus() break}}}}

Data 21

More...

Page 37: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

genscrpt.htm (cont.)genscrpt.htm (cont.)// Set initial values for point-and-click objects function setInitialSelections(el){ for (si=0; si<el.elements.length; si++) { if (el.elements[si].type == "select-one"){ setSelectOne(el.elements[si])} if (el.elements[si].type == "radio"){ setRadio(el.elements[si])} if (el.elements[si].type == "checkbox"){ setCheckbox(el.elements[si])}}} function setSelectOne(e){ getNameParm(e.name) for (zi=0; zi<e.options.length; zi++) { if (nameParm==e.options[zi].value){ e.options[zi].selected = true break}}} function setRadio(e){ if(groupName!=e.name){getNameParm(e.name);groupName=e.name} if(e.value==nameParm){e.checked=true}} function setCheckbox(e){ getNameParm(e.name) if(e.value==nameParm){e.checked=true}}

Data 21

More...

Page 38: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

genscrpt.htm (cont.)genscrpt.htm (cont.)function getNameParm(name){ nameParm=" " for(i = 0; i < setOptions.length; i++){ var iElement = setOptions[i].split("=") var iname = unescape(iElement[0]) var ivalue= unescape(iElement[1]) if(name == iname){ nameParm = ivalue break} }}// ONHELP EVENTfunction ipHelp(e){if(!e){helpUrl=helpfile}else{event.cancelBubble=true;event.returnValue=false;if(e.type){var helpUrl=(helpfile + "#" + e.name)}else{helpUrl=helpfile}helpWindow = open(helpUrl, "Help", "menubar=yes,toolbar=yes,scrollbars=yes,left=390,width=400,height=400")}}

// ONFOCUS EVENT // return field name name of last cursor postion function a(e){ document.forms[0].cursor.value=e.name }

Data 21

Page 39: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

The onload eventThe onload eventThe onload event, specified on the BODY tag, fires after the entire Web page has been downloaded from the browser.

<body bgcolor="#C0C0C0" text="#000000" onload="focusTo()">

Disable the Browsers Back ActionDisable the Browsers Back Action

// On Onload Event function focusTo(name){ // Prevent backward Navigation history.forward()

Data 21

Page 40: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

Cursor ControlCursor Control

HTMLHTML<body bgcolor="#C0C0C0" text="#000000" onload="focusTo()"><form method="POST" name="emp1"><input type="hidden" name="cursor" value='<!--(CURSOR)-->’’

ScriptScript// Set initial cursor location if(name){ // Web Author supplied field name on the function, focus to it for (ti=0; ti<el.elements.length; ti++) { if (el.elements[ti].name == name){ el.elements[ti].focus() break}}} // If not, focus to field in cursor field, supplied by the CGI if(!name){ for (ti=0; ti<el.elements.length; ti++) { if (el.elements[ti].name == d.forms[0].cursor.value){ el.elements[ti].focus() break}}}}

Data 21

Page 41: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

Data 21

Initial selections of point & click Initial selections of point & click objectsobjects

File name: emp1.htm

Page 42: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

Initial selections of point & click objectsInitial selections of point & click objects

HTMLHTML

<select name="empdept" size="1" onfocus="a(event.srcElement)"> <option value=" "> </option> <option value="1">Human Resources</option> <option value="2">Accounting</option> <option value="3">Data Processing</option> </select>&nbsp; Rate Code: <select name="emprate" size="1" onfocus="a(event.srcElement)"> <option value=" "> </option> <option value="1">Salaried</option> <option value="2">Hourly</option> <option value="3">Part-Time</option> </select> <br> Marital Status: <input type="radio" value="1" name="empstat" onfocus="a(event.srcElement)"> <font color="#008000"><font size="1">Single&nbsp; <input type="radio" value="2" name="empstat" onfocus="a(event.srcElement)"> Married <input type="radio" value="3" name="empstat" onfocus="a(event.srcElement)"> Head of Household

Data 21

Page 43: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

Initial selections of point & click objectsInitial selections of point & click objects

Local Script (in EMP1.HTM Page)Local Script (in EMP1.HTM Page)

<script language="JavaScript1.1" SRC="genscrpt.htm"></script><script>// Customization Variablesvar setOptions = new Array( 'empdept=<!--(EMPDEPT)-->', 'emprate=<!--(EMPRATE)-->', 'empstat=<!--(EMPSTAT)-->' )var helpfile="empmast.htm"</script>

Data 21

Page 44: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

Initial selections of point & click objectsInitial selections of point & click objects

ScriptScript// Set initial values for point-and-click objects function setInitialSelections(el){ for (si=0; si<el.elements.length; si++) { if (el.elements[si].type == "select-one"){ setSelectOne(el.elements[si])} if (el.elements[si].type == "radio"){ setRadio(el.elements[si])} if (el.elements[si].type == "checkbox"){ setCheckbox(el.elements[si])}}} function setSelectOne(e){ getNameParm(e.name) for (zi=0; zi<e.options.length; zi++) { if (nameParm==e.options[zi].value){ e.options[zi].selected = true break}}} function setRadio(e){ if(groupName!=e.name){getNameParm(e.name);groupName=e.name} if(e.value==nameParm){e.checked=true}} function setCheckbox(e){ getNameParm(e.name) if(e.value==nameParm){e.checked=true}}

Data 21

Page 45: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

Initial selections of point & click objectsInitial selections of point & click objects

Script (cont.)Script (cont.)function getNameParm(name){ nameParm=" " for(i = 0; i < setOptions.length; i++){ var iElement = setOptions[i].split("=") var iname = unescape(iElement[0]) var ivalue= unescape(iElement[1]) if(name == iname){ nameParm = ivalue break} }}

Data 21

Page 46: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

Data 21

Sample Inquiry CGI Sample Inquiry CGI

File name: emp2.htm

Page 47: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

Sample Inquiry CGI (cont.)

HTML (Stored on Server)HTML (Stored on Server)

<!-- Sample: Using the anchor tag (link) to submit a form --><HTML><HEAD><TITLE></TITLE><SCRIPT LANGUAGE="JavaScript">// Perform Submit on selected SSN function L(ssn){ document.IFORM.SSNUM.value = ssn document.IFORM.submit()}</SCRIPT></HEAD>

Data 21

More ...

Page 48: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

Sample Inquiry CGI (cont.)

<BODY BGCOLOR="#FFFFFF" BACKGROUND="/ipserver/bk22.gif"><H1 ALIGN="center"><I>Payroll Inquiry by Last Name</I></H1><FORM name="IFORM" METHOD="POST" ACTION="PAYINQ"><INPUT TYPE="HIDDEN" NAME="SSNUM" VALUE=" "><H3><I>SELECT TYPE OF INQUIRY </I><SELECT NAME="SELECT"><OPTION VALUE="empl" SELECTED>Employee</OPTION><OPTION VALUE="ded">Deductions</OPTION><OPTION VALUE="accum">Accumalators</OPTION><OPTION VALUE="lastcheck">Last check</OPTION></SELECT></H3></FORM><H3><I>Select Name from below:</I></H3><PRE><!--#echo var="CGI_TSQ2"--></PRE></BODY></HTML>

Data 21

Page 49: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Section 4: Separation of Business Logic and Presentation Part 2: Client Scripting Solutions

Sample Inquiry CGI (cont.)

CGI Output CGI Output (Contents of #echo var=“CGI_TSQ2”)(Contents of #echo var=“CGI_TSQ2”)

<A HREF="javascript:L('244001394')">244001394</A> 101 410 4125 JONES BETTY <A HREF="javascript:L('242002341')">242002341</A> 101 410 4125 JONES JIM T<A HREF="javascript:L('240003334')">240003334</A> 101 410 4125 JONES ROBERT W<A HREF="javascript:L('241004087')">241004087</A> 101 410 4125 JONES CHRIS S

Data 21

Page 50: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Summing Up

CICS is a great environment for Web applications.

CGI is a cost effective and powerful Web Enablement Method.

Separation of Program logic and Presentation is Key.

Page 51: Web Enabling CICS Applications Methodologies and Techniques 1999 © Data 21, Inc. Data 21, Inc. David L. Kennedy

Thank you.

Data 21, Inc.

3510 Torrance Blvd.

Torrance, CA 90503

Phone: (310) 792-1771

Email: [email protected]

data21.comYou may download the complete HTML and JavaScript used You may download the complete HTML and JavaScript used in this Session at:in this Session at:

www.data21.com/wavv99www.data21.com/wavv99