ScreenSurfer Guide: Lesson 5. Key ScreenSurfer HTML Tags

Lesson 5. Key ScreenSurfer HTML Tags

Click on any item to view...

Contents

Introduction

Concepts

Product Positioning

Operations

Customization

SurferScript Guide

ScreenSurfer Tutorial

The ScreenSurfer Tutorial Introduction

Visual Surfer Introduction

Lesson 1. The ScreenSurfer Environment

Lesson 2. 3270/5250 Display Characteristics

Lesson 3. SurferScript Screens and Events

Lesson 4. Basic Customization

Lesson 5. Key ScreenSurfer HTML Tags

Lesson 6. Variables and Expressions

Lesson 7. Logic and control

Lesson 8. Cold Fusion and ASP Co-Servers

This lesson will concentrate on those HTML tags that are relevant in a ScreenSurfer environment. This is not an HTML reference or guide; for that you should shop any book store with a computer section and select from one the many, many books on this subject (or visit Amazon.com). Also, excellent Web-based references are available, such as the one at [netscape html guide and reference anchor]. Such guides can teach you everything from the basics, such as <B>Bold</B>, <I>Italic</I> and <U>Underlined</U> text formatting to more advanced issues such as dynamic HTML and JavaScript.

New/Reviewed Skills

Assuring pages are compatible with DevCenter
Setting focus to the field containing the host cursor
Adding your own "onLoad" JavaScript functions to a ScreenSurfer-generated page
Understanding ScreenSurfer URL Requirements
Creating links to user SurferScript transactions
Passing named parameters to user SurferScript transactions
Creating links to ScreenSurfer Management URL's
A clickable Menu: Creating links that send keystrokes
Understanding the <TEFORM> tag

Key tags and how they are used are summarized in the following table. Click on the tag to jump to details on aspects of that tag when used in a ScreenSurfer environment:

<HEAD>	Identifies the header or control portion of a document
<BODY>	Identifies the body or primary area of a document
<A>	Identifies the start of an anchor (creates a link)
<FORM>	Identifies an HTML form (for data entry capability)
<INPUT>	Identifies an input object, such as a text entry or selection list
<SCRIPT>	Identifies a JavaScript (good) or VBScript (proprietary, non-portable) code section

<HEAD> Tag

The HEAD tag should be present in every screen section you define using SurferScript. First of all, it is good practice to always include a <HEAD> tag in an HTML document, since it is needed in order to create a context for the <TITLE> tag.

Another reason for the HEAD tag in a SurferScript screen section is that the DevCenter sets a special mode when you connect to a session in the DevCenter, and ScreenSurfer emits information about the currently displayed screen immediately following the <HEAD> tag...

<BODY> Tag

The <BODY tag is a key HTML tag which describes not only where the HTML document (page) starts, but it is also where key JavaScript events are defined.

In general, unless you plan on no entry fields for an HTML page (only links), you should always use the <TEMACRO TERMBODY> tag to create the HTML BODY tag. This enables ScreenSurfer to include the "onLoad" event, which will call the ScreenSurfer-generated JavaScript function SS_SetCursor. The SS_SetCursor function does two things:

Will set the HTML form focus to the 3270 field that is supposed to contain the active 3270 cursor at the time the 3270 screen is converted to HTML.
Will call the user-defined function userLoadScript if it is defined on the page.

If you want to include additional JavaScript code whenever the HTML page is loaded (and are using the <TEFORM> tag), simply include a <SCRIPT> JavaScript section and define the userLoadScript function; it will be called on load of the active HTML page, along with the necessary code to set the cursor in the active HTML form correctly.

<A> - The Anchor Tag

It seems no tag is used more and does so much in HTML, which is perhaps why the original authors made it the easiest tag to key!

We will concentrate here on the more active role that an anchor tag takes; that of providing a link to another HTML resource. The use of the anchor tag for navigation inside a page is completely the same in a SurferScript environment as it is with any HTML environment. This includes the use of the anchor tag as a name of a "link-to" location.

Exercise 5.1

Open the GLOBAL.STML template and see the uses of the above tags.

End of Exercise 5.1

Understanding ScreenSurfer URL requirements
When creating a link (or the ACTION= attribute in a FORM), you need to understand the rules for ScreenSurfer URL's:

All ScreenSurfer URL's should begin with a root of /surfer/
When a page requires state with a session (user is to remain connected to a session and associated variables when the page is displayed), you need to include a SessionKey with every URL in a name-value pair.
To "trick" the browser's cache, "Twirl the URL" with a timestamp.

The /surfer/ Root We start all ScreenSurfer URL's with the /surfer/ root so that compatibility with a variety of Web Servers is maintained. By starting every ScreenSurfer URL with the same root portion, we can provide an efficient redirection in both Netscape NSAPI and Microsoft ISAPI environments when using these Web servers as front-ends in secure environments. Secure environments for Microsoft are due in July 1998; for Netscape in the third quarter, 1998.

Using SessionKey to Maintain State
If the page is connected to a session, you must always pass the SessionKey. The SessionKey is a special value which connects the HTML page displayed to the user with the active 3270 session that user is associated with. Times when you would not pass the sessionkey include calling the CONNECT management URL, or when you have created a ScreenSurfer application where users are not logged onto a specific session, but instead share a pool of sessions (in this case, you would still need to pass the sessionkey if the user is using a business function that requires an operator interaction between screens, such as confirming an update or post).

Twirling the URL to Trick the Cache
If you look at the pages generated by the default section in global.stml (all pages for your new host connection come through this section until you define your own screen sections), you will note that some links have URL's with a "tick" name-value pair, which will change with each display of a page.

ScreenSurfer uses this standard HTML trick, of "twirling the url" (pronounce it "twirl the earl" to make it easy to remember) to prevent the browser from finding the requested page in its cache, so that the request will go to ScreenSurfer instead of being read locally.

You can use the HTML pragma for cache control to achieve the same effect, but this then prevents the use of the "back button" in the browser any page with the NOCACHE specified.

A special tag, <TEMACRO CLOCKTICKS> provides the current NT timer tick, which will guarantee a unique URL. Note that the <TEMACRO SESSIONKEY> tag includes a portion that is a timer tick; the use of this tag provides a twirl without the need for <TEMACRO CLOCKTICKS>

Linking to a User-written SurferScript Transaction
In the following example, a SurferScript section performs a help function, and a link is generated to call this transaction, the "HELPME" transaction. The HTML link is created as follows:

<A HREF="/Surfer/Help?SessionKey=<TEMACRO SESSIONKEY>"> Click here for Help</A>

To help you understand the above, even though it is early in the tutorial for SurferScript transactions, the "Help" transaction could be defined as follows inside any SurferScript template (.stml) file:

<TESECTION Help
   WHEN Tranpath_1 is "Help">
<!-- Always start a transaction associated with a session
     with a GETSESSION action (this uses SessionKey to connect
     this SurferScript with the user's correct host session-->
<TEACTION GETSESSION>
<!-- Clear the screen, and enter the HelpMe transaction-->
<TEACTION ENTER "[clear]" skipscan>
<TEACTION ENTER "HelpMe[enter]">
<!-- The help screen will be displayed automatically to 
     the user because the "skipscan" attribute was not 
     included in the TEACTION ENTER; ScreenSurfer will 
     scan the current screen and if recognized play the
     associated TESECTION, else play section global.default -->
</TESECTION>

Passing parameters in a link
In addition to passing-in the SessionKey (a special system value needed to link the page to the active user session and maintain state), you can also pass in any named value which is subsequently available to your SurferScript as a Web. variable. For example, if you wanted to create links that can pass the parameters "NewCust", "NewOrder" or "ChangeOrder" for the "HelpMe" host transaction the above example could be updated as follows:


<A HREF="/Surfer/Help?SessionKey=<TEMACRO SESSIONKEY>&param=NewCust">
Click here for New Customer Help</A><br>
<A HREF="/Surfer/Help?SessionKey=<TEMACRO SESSIONKEY>&param=NewOrder">
Click here for New Order Help</A><br>
<A HREF="/Surfer/Help?SessionKey=<TEMACRO SESSIONKEY>&param=ChangeOrder">
Click here for Help on Changing an Order</A><br>

Inside the "Help" SurferScript transaction, the line that requests the HelpMe host transaction could now read:

<TEACTION ENTER "HelpMe "+web.param+"[enter]">

Creating links to ScreenSurfer Management URL's
A number of key ScreenSurfer management URL's are documented in the reference section URL Commands. Some examples follow:

<A HREF="/Surfer/Connect/LU_GROUP_1">Connect to Host</A><br>
<A HREF="/Surfer/Refresh/<TEMACRO SESSIONKEY>">Refresh</A>
<A HREF="/Surfer/Exit/<TEMACRO SESSIONKEY>">Exit</A>

A clickable Menu: Creating links that send keystrokes
A special ScreenSurfer URL provides the ability to create a simple link that sends a string of keystrokes to the current host screen. This is convenient for creating menus of options that can be clicked with the mouse in order to navigate to a new screen in the host application.

A later lesson provides a step-by-step procedure for rapidly generating new template sections with the DevCenter. In this lesson, we will only cover the basic method for creating a simple key-sending link.

Example: the following example enters a number "1" and is associated with a text description taken directly from an existing host screen.


<A HREF="<TEMACRO SENDKEYS '1[enter]'>">1. Underwriting System</a>

The <TEMACRO SENDKEYS> macro will create a URL which includes the sessionkey along with the defined keystroke sequence.

<FORM> Tag

The <FORM> tag is used to surround input fields and act as a coordinator of passing the input values to a specified URL. While you can code your own HTML Form tag, it is recommended that you use the <TEFORM> tag. This tag will generate an HTML form along with a URL connecting the form to the ScreenSurfer emulation management URL.

Other automatically generated tags include some required INPUT values which assist in maintaining not only state information but also necessary functional dataflows between the HTML form and the host screen session.

The <TEFORM> tag will generate the <FORM> tag along with some hidden input fields. Each of these HTML objects have the following names:

Name Type Description

Surf_Form FORM The standard name of the ScreenSurfer screen form-- this can be overridden using the "name" attribute of the <TEFORM> tag

a_key INPUT AID key override--by setting the value property of this object to one of the valid AID key mnemonics (like "[pf1]"), this will be the AID key passed to the host application on submission of the form

SCREEN_ID INPUT This field if present will describe the name of the last recognized host screen.

Exercise 5.2

Open the template named EXERCISE41.STML (Applications Main Menu in the "toy mainframe") and modify such that the options 1, 2, 3, 4, 5, and 9 are all links sending each appropriate value to the host and create a button for the PF3 - Logoff option. Also, include Refresh and Exit links. Save the EXERCISE41.STML template, compile, and test.

Click on Solution for Exercise 5.2 for a possible solution

End of Exercise 5.2

Solutions for Exercises

Solution for Exercise 5.2

<!-- Generated Section main_menu:  Generated Sun Oct 03 21:41:40 1999 -->
&ltTESECTION main_menu 
WHEN Screen_1_2 IS "MENU1">
<TEPUTSECTION global.header>
<center>
<h3>Applications Main Menu</h3>
<br>
<TABLE Border=1>
 <TR><TD>
   <A HREF="<TEMACRO SENDKEYS '1[enter]'>">Add New Employee</A>
  </TD></TR><TR><TD>
   <A HREF="<TEMACRO SENDKEYS '2[enter]'>">Employee Status</A>
  </TD></TR><TR><TD>
   <A HREF="<TEMACRO SENDKEYS '3[enter]'>">Employee Update</A>
  </TD></TR><TR><TD>
   <A HREF="<TEMACRO SENDKEYS '4[enter]'>">Employee List</A>
  </TD></TR><TR><TD>
   <A HREF="<TEMACRO SENDKEYS '5[enter]'>">Telephone Number Lookup</A>
  </TD></TR><TR><TD>
   <A HREF="<TEMACRO SENDKEYS '9[enter]'>">Test Extended Attributes</A>
  </TD></TR><TR><TD>
   <FORM name="logoff"
     ACTION="/surfer/logoff?SessionKey=<TEMACRO SESSIONKEY>&Ticks=<TEMACRO CLOCKTICKS>" 
     METHOD="POST">
    <input type="submit" name="PF3_Key" value="Logoff">
   </form>  
  </TD></TR><TR><TD VALIGN="TOP">
   <A HREF="/surfer/refresh/<TEMACRO SESSIONKEY>/<TEMACRO CLOCKTICKS>">Refresh</a>  
   <A HREF="/surfer/exit/<TEMACRO SESSIONKEY>/<TEMACRO CLOCKTICKS>">Exit</a><BR>
  </TD></TR>
</table>
<TEPUTSECTION global.footer>
</center>
</TESECTION>
<!-- End of Generated Section -->

<TESECTION logoff
 When Tranpath_1 is "logoff">
<TEACTION GETSESSION>
<TEIF web.PF3_Key != "">
  <TEACTION ENTER "[pf3]">
</TEIF>
</TESECTION>

End of Solution for Exercise 5.2