Lesson 3. SurferScript Screens and Events Lesson 2. 3270/5250 Display CharacteristicsLesson 4. Basic Customization
 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 provides the framework for you to understand how screens and browser-requested URL's drive the HTML and dynamic elements you embed in SurferScript templates. How screen data is delivered in the HTML stream is also covered.

New Skills


ScreenSurfer Events

In a static HTML environment, Web Servers receive Universal Resource Locators or URL's which are used to retrieve files from the Web Servers directories. In a static environment, each URL request equates to a file, and each URL request typically results in that file being sent to the requesting browser.

As a Web Server, ScreenSurfer supports this model for any static HTML file stored in the /ScreenSurfer/Hostserver/docs directory or any sub-directory. For all dynamic 3270 application access, ScreenSurfer relies on an event-driven model to match the request a user makes at a browser with a result. By implementing an event-driven model, ScreenSurfer frees the developer from constantly trying to "rule the world" and keep track of all the possibilities in an application environment which may have literally millions of permutations.

ScreenSurfer events, unlike a Web server URL retrieval, will not execute or send an entire file. Instead, a ScreenSurfer event will execute a portion of a file, called a section. ScreenSurfer sections (as described elsewhere in the tutuorial) are defined using the <TESECTION> tag. A section may be called explicitly as reusable code using the <TEPUTSECTION>, or implicitly based on the ScreenSurfer event model.

ScreenSurfer does this through a variety of events that are described in the following table.
Understanding ScreenSurfer Events
EventDescription
Home Page Requested A user has clicked on a link or has keyed-in the ScreenSurfer machine name in an HTTP reference, with no resource or the resource "/home" specified. The SurferScript section global.home is executed.
New user connect A new user has requested a new connection to a Web Gateway session using the /CONNECT management URL. Requested 3270 session is started- the <TECONNECTED> tag(s) are used to identify when the session is ready; a Screen Update event is triggered.
Screen Update The 3270 screen has been updated by a host application. The screen recognition rulebase is utilized to identify the screen and execute either a user-defined SurferScript section or the section global.default if the screen is unrecognized. <TESECTION Hello "WHEN Screen_2_3 is "Welcome"> is an example of a section which will be executed when the string "Welcome" is displayed at row 2, column 3.
User Defined URL A URL has been submitted to the ScreenSurfer Web Gateway which does not have one of the ScreenSurfer management functions as a root. The transaction recognition rulebase is utilized to identify the URL and execute the user-defined SurferScript for that URL, or an error message is displayed. <TESECTION SpecialConnect when TranPath_1 is "Special"> is an example of a section which will be executed when the URL is "/surfer/special". Note that the "/surfer/" root is required for all ScreenSurfer URL's.
Application Error Message The 3270 screen has been updated by a host application, but the screen is still the same one displayed before the update. The difference is that an error message has been displayed. A special <TEEVENT HOSTUPDATE> section has defined this error message and is part of the section identifed in a Screen Update event. The SurferScript contained in the <TEEVENT HOSTUPDATE> section is executed.
Session Timeout When sessions time-out, an optional user section will be executed if that user section exists. The name of the section is GLOBAL.TIMEOUT and if it is coded, it must include a TEACTION RELEASE for the target session.
Web Page Data Entry The user at the browser has submitted a page, and the SurferScript section that displayed that page (and was executed from a screen update event) has a <TEEVENT WEBINPUT> section; prior to performing an "ENTER" of the screen (ScreenSurfer-to-host inbound processing), the <TEEVENT WEBINPUT> SurferScript is executed. This SurferScript can cancel the entry to the host and display validation to the user as one example of how this event may be used.
AID Key Capture The user at the browser has entered a 3270 screen entry page using the PF1 key, and there is a section with <TESECTION HandleHelp WHEN AIDKEY IS "[pf1]"> -- The SurferScript in this section will be executed instead of a default send of the PF1 key as the AID. This enables the implementation of a custom help screen handler, which can accomodate any peculiarities in the help system and/or provide HTML-based help when appropriate. Note: this event may be defined for any of the valid AID keys.
Time-based Event These were introduced in version 1.3E and provide for sections that are executed based on time-of-day (wildcards can provide flexibility), intervals (every 30 seconds) and "day of the week" (every Monday at 9am).

Exercise 3.1

End of Exercise 3.1


Configuring your own host access

You configure your own host access using the Administrator's Console, which is accessed as described in the prior section.

If you successfully defined either an SNA Server LU Pool or a TN3270 host during installation, this section is only relevant for adding a new host access, or perhaps modifying what was defined during the installation.

ScreenSurfer allows up to 10 host connections to be defined, and the installation program will typically only allocate one connection per defined host, including the public access sites you may have optionally selected for configuration.

Configuring your own Host Access To update the host connection settings, open the Administrator's Console in a browser window, and click on the "Settings" button.

In the settings page, the 10 possible host connections are presented as a simple set of 10 rows, each row representing a host connection. For more details of each entry on this page, click on the prompt for a particular attribute and the help for that attribute will be displayed. If you are not using the public access sites that you might have optionally configured during installation, you can remove them now, and then allocate more sessions to your host access.

If you didn't define a host access for your system, you can either add it to the bottom of the current list, or replace the first line with your host definition. When you've added either an SNA LU Pool name or *TN3270:Yourhost and a session range, use the Submit Button to enter-- note the messages and use the back-button to correct any errors.


Exercise 3.2

Add a TN3270 LU group called "localhost" and have only one session allocated to that LU group (this will be used to access the "toy mainframe" for subsequent exercises)

Click on Solution for Exercise 3.2 for a possible solution

End of Exercise 3.2


Displaying Screen Data in your HTML

Before jumping-into the customization of your existing screens, it is a good time to cover the SurferScript tags used to convert screen data to HTML.

Since ScreenSurfer is specifically designed for delivering 3270 application data to web browsers, there is a wide variety of means provided for representing this data in an HTML stream. In this section we will cover the three principal approaches, which are:

  1. The <TEAREA> screen block tag
  2. The <TEDATA> screen data tag
  3. The Screen() function with the <TESHOW> tag
Each of these may be used as follows:
Understanding how to display screen data in HTML
The <TEAREA Tag>

You use the <TEAREA> tag whenever you want to display an area of the current screen session as HTML, and want the generated HTML to work well within a preformatted (<PRE>) area. The TEAREA will insert a carriage return/line feed at the rightmost column of the current screen, so that in the HTML screen a visual carriage return will occur. TEAREA should be used any time multiple fields on the 3270 display are desired to be displayed in a single tag. Other features include the ability to define protected fields as clickable (ScreenSurfer will automatically generate anchor tags with HREF targets based on your TEAREA definition).

The <TEDATA Tag>

The <TEDATA> tag is designed for use for a single field or single portion of the active screen that should be output in the current HTML stream as a single field. Since the TEDATA tag is more efficient than the TEAREA tag internally, use it whenever you are displaying a single field (or displaying individual fields independently) from the active screen session mixed-in with static HTML.

Screen() function with the <TESHOW> tag

This approach has a wide variety of implementations, since the Screen() function can be used to store screen data into a variable, manipulated and subsequently displayed using the <TESHOW> tag. In addition to storing screen data in a variable, you can also use a Screen() function immediately in a <TESHOW> along with other variable and text literals.

Guidelines for ScreenSurfer Scripting Exercises

Exercise 3.3 is the first exercise in the ScreenSurfer Tutorial that has you write SurferScript to modify how a host screen looks in the browser. Please read over the tips below to help you with Exercise 3.3 and subsequent scripting exercises.

Where do I Save ScreenSurfer Templates in the Tutorial Exercises?

Save all ScreenSurfer templates to the \screensurfer\hostserver\templates directory.

How do I Compile ScreenSurfer Templates?

The quickest way to compile ScreenSurfer templates is to do the following:

  • Click on Start-ScreenSurfer-ScreenSurfer DevCenter
  • Click on the "red arrow" icon in the top middle frame of the DevCenter
  • Compile results will be displayed in the middle frame of the DevCenter

Exercise 3.3

Important

This is the first coding exercise in the Tutorial. Please view the solution first and create the EXERCISE33.STML file from the recommended solution.

Start the "toy mainframe" from the ScreenSurfer Folder and create a new template called EXERCISE33.STML. Each screen in the "toy mainframe" is 24 rows and 80 columns. The first screen in the "toy mainframe" is the logon screen. The logon screen fields that you are concerned about in this exercise are located in the following screen positions:

  • The text string CESN=REENTER is in row 1 column 2 (to be used for screen recognition)
  • Terminal id row 4 column 16 for a length of 4
  • Password row 13 column 21 for a length of 10

Code the following:

  • Use a <TEAREA> tag to display rows 1 through 12, columns 1 through 80
  • Use a <TEDATA> tag to display Password as an input field
  • Use a <TESHOW> tag with a Screen() function to the text "I AM DISPLAYING TERMINAL ID" plus the actual terminal id
  • Use a <TEAREA> tag to display rows 14 through 24, columns 1 through 80

Once complete making the changes, save the template, compile the template, and test the application

Click on Solution for Exercise 3.3 for a possible solution

End of Exercise 3.3


Updating the ScreenSurfer "Home" or "Connections" Page

After defining your host access in the Console Settings page, you will need to update the ScreenSurfer Web Gateway "Home" page. You do this by editing the file \ScreenSurfer\HostServer\Templates\Global.stml.

The Global.stml template file contains standard sections for use in your ScreenSurfer installation-- far more is covered in the following sections and lessons on how to develop in the SurferScript HTML tag extensions; for now, we will concentrate on the specific updates required to provide access to your host definition added to the Console Settings page.

To update your Web Gateway Home page (connections page), you will either modify or add a link which corresponds to the definition you just added/updated in the Console Settings page. Note: Please use LU_GROUP_2 or higher to define your host to ScreenSurfer - LU_GROUP_1 is used for the "toy mainframe" which is used for the exercises in the ScreenSurfer Tutorial
Modifying the Web Gateway Home Page
  1. Open the ScreenSurfer folder from the desktop
  2. Open the "HTML Templates" folder found in the ScreenSurfer folder
  3. Open the "Global.stml" file: at this time, if you do not have an association for files with the extension of ".stml", the system will ask you for one. Select an editor of your choice, and if you do not have one, select the "Notepad.exe" program.
  4. At installation, the top of the file defines the "home page", which begins with:
    <TESECTION HOME>
    
  5. Note the patterns in the list of connections, with HTML links defined specifying a "LU_GROUP_1" along with text referencing a particular host. Depending on how you defined your host in the Console Settings Page, you will either modify one of these lines (to change the text of the link to something describing your host), or copy one of the lines for modification.
  6. Either copy or modify the appropriate line relating to the line in the settings page the defines your host connection.
  7. Save the global.stml file
  8. If ScreenSurfer is already started, stop it with the ScreenSurfer Service Applet (in the next step we will restart--when you add or update host configurations, you need to fully stop and restart ScreenSurfer for the new configuration to become active).
  9. Restart ScreenSurfer in diagnostic mode--this way, you can watch it perform the connection to your host and view any error conditions that may result (for example, maybe you keyed a TN3270 address incorrectly
  10. Open the Web Gateway Page in a browser window (using your bookmark created in the prior section or the ScreenSurfer folder)
  11. Click on your host link you created in step 6
  12. After 5-10 seconds, the first page of your host connection should be displayed
  13. If your host page doesn't display, please check the diagnostic window for any messages that might help you in "tweaking" your host definition on the Console Settings Page
    • If you don't understand an error, or do not see any, please e-mail your \ScreenSurfer\hostsurfer\surfdiag.log file to surfer@ieinc.com along with a note describing the type of host access you were attempting as well as any symptoms you viewed during the connection attempt
  14. With a successful host page display, you can now "speed-up" the initial connection by following the steps in the next section


Speeding-up your Host Connection
You may have noticed once you connected to your host that it takes over five seconds for the first screen to be displayed! That's odd, since the public access sites seem to pop-up fairly quickly, and you know that your access should be much faster...

The slow initial screen display is due to conservative settings in ScreenSurfer to ensure that an initial connection screen is fully displayed prior to delivering it as an HTML page to your browser. You can speed this process up by defining a special tag in your global.stml file:


<TECONNECTED WHEN SCREEN_x_y is "whatever">

The TECONNECTED tag is explained in more detail in the SurferScript Reference. For now, we are going to quickly add a TECONNECTED tag to your global.stml file in order to provide ScreenSurfer with a "guarantee" that the initial screen is "ready to go".

Speeding-up your own host access To add a TECONNECTED tag, we will use the DevCenter in order to view your intial screen in a mode that provides us all the information we need to know in order to create a TECONNECTED tag.
  1. Load the DevCenter in your browser--it is recommended that you have at least SVGA resolution to use the DevCenter, and a full 1024 x 768 resolution is recommended.
  2. Click on the Session/Screen Select link in the upper left (menu) frame;
  3. Click on the Start New Session menu link; the Web Gateway Home page is displayed in the primary frame
  4. Select your host connection in the primary frame
  5. When your initial screen is (finally!) displayed, click on the "green screen" icon in the banner graphic (upper right); a fixed-format view of your screen is displayed
  6. Click on the View Words button in the upper portion of the primary frame-- your screen is now displayed as links
  7. Select a field at the top of the screen that is "fixed text" and can be reliably used to identify the initial screen; click on the field with your mouse
  8. Details about the field you just clicked on are now available in the lower left frame; scroll down in this frame until you see "When Clause"; swipe the contents of the right side in this frame with the mouse and copy to the clipboard with ctrl-c
  9. Now move focus to your global.stml editor window (or open global.stml as in the previous section)
  10. Insert the following at the top of global.stml:
    <TECONNECTED WHEN [copy contents of clipboard here]
    
  11. Move focus back to DevCenter, and select a field that is once again "static text" and will be on the opening screen every time; this time, select a field as close to the bottom of the screen as possible
  12. Click on the field; find it's "when clause" in lower left frame, copy the clause to the clipboard
  13. Return to your editor, insert a line below the one you just created and key:
      AND [copy contents of clipboard here]>
    
    Note the closing angle bracket to complete the TECONNECTED TAG. A sample of your completed TECONNECTED tag might look like:
    <TECONNECTED
     WHEN Screen_1_2 IS "Welcome to Frankfurters Incorporated"
      AND Screen_24_50 is "Copyright 1982">
    
  14. Save global.stml
  15. Focus back to DevCenter; Click on the "Wave" icon in the upper graphic banner; this switches the primary frame view to the active emulation window
  16. Click on the "Exit" link in the emulation page to return the primary frame to the connection menu
  17. Click on the arrow pointing up/left in the menu frame
  18. Click on Development Administration
  19. Click on Recompile Templates; status for the template compile will appear in the primary frame.
  20. Try your Web Gateway connection to your host again; it should open very quickly now...

Exercise 3.4

Open up the EXERCISE33.STML template and add a <TECONNECTED> tag and use the screen text "CESN=REENTER" at row 1 column 2 in the WHEN clause.

Follow the steps above to help you make the change. When you are testing the change, notice how much quicker the initial screen of the "toy mainframe" is displayed.

Click on Solution for Exercise 3.4 for a possible solution

End of Exercise 3.4



Updating the default emulation page

All unrecognized screens (those for which there is no TESECTION describing the static text for the screen) are displayed to the user at the browser using the global.default template.

The global.stml file, found in /ScreenSurfer/hostserver/templates contains the global.default section. As a ScreenSurfer developer, you can freely edit this file to customize for your own use. Future releases of ScreenSurfer may be installed to the existing directory without affecting your modifications, as the installation program is set to not ever overwrite an existing global.stml file.

Updating the default page To update the global.default section:
  1. Open the /ScreenSurfer/hostserver/global.stml file in your editor. If you have not got a "favorite" editor, the notepad.exe editor will do. An easy way to open global.stml file is in the Templates Folder which has a link from the ScreenSurfer folder installed on your desktop.
  2. Scroll down or search for the line <TESECTION DEFAULT>. There is no further identification in the TESECTION tag, because the ScreenSurfer compiler automatically recognizes the DEFAULT section by name (it is a reserved section name when inside the global.stml file).
  3. All of the HTML between the <TESECTION> and </TESECTION> tag is displayed whenever a screen is unrecognized. You can modify the look and feel of this section all you want, but should remember the following points:
    • You should always retain the <HEAD> tag, particularly in the global.default section, as this is needed to provide the DevCenter with information about the currently displayed screen
    • The <TEMACRO TERMBODY> is needed to create the <BODY> tag with the correct code to position the cursor in the HTML Input field corresponding to the field containing the cursor in the active screen session
    • The <TEMACRO TERMFORM> is needed to create a <FORM> tag that has the correct ACTION attribute to maintain state with the active session.
    • You should always present a user with the Exit and Refresh links, although you may want to create custom SurferScript sections to handle them (as user-defined URL's).
  4. Save the global.stml file when done with your modifications
  5. Access the DevCenter
  6. Select the Administration Tasks from the top menu
  7. Click on "Recompile Templates"
  8. If your changes created any compile errors, they are now viewable in the primary frame of the DevCenter--you will want to correct in the editor, save and recompile prior to testing
  9. Bring a session up in another browser window and check-out the results!
  10. You can repeat the previous edit-compile-test steps until the results are what you like-- when testing an active session, simply use the REFRESH link to view your changes (you don't need to restart the session).

Solutions for Exercises

Solution for Exercise 3.2

  • Double-click on the ScreenSurfer icon on your Desktop
  • Start the ScreenSurfer service (in not already started)
  • Double-click on the Administrator's Console icon (or access via Favorites in your browser)
  • Click on Settings
  • Under an available Group LU Name put the following: *TN3270:localhost and make the Session Range = 10..10 (creating a localhost LU group will now allow you to access the "toy mainframe" for subsequent exercises)
  • Click on Submit at the bottom of the Settings page
  • A screen will be displayed stating that the ScreenSurfer service must be stopped for changes to take affect
  • Edit the file \ScreenSurfer\hostserver\templates\global.stml
  • In the <tesection HOME> section, find the last connection line
  • Add a line that includes a CONNECT link to your LU group you just defined
  • When adding, use "MY Toy Mainframe" as the description in the link
  • If you added group 6, then the line should look like:
    <P>
     <A HREF="<TEMACRO TRANURL 'connect/lu_group_6'>">
         MY Toy Mainframe</A>
    </P>
    
  • Stop the ScreenSurfer service
  • Start the ScreenSurfer service
  • Administrator Console changes are now implemented

End of Solution for Exercise 3.2


Solution for Exercise 3.3

<TESECTION logon
  when Screen_1_2 is "CESN=REENTER">
  <html>
  <TEPUTSECTION global.header>
  <head>
  <title>Exercise 3.3</title>
  </head>
  <TEMACRO TERMBODY 'bgcolor="#ff0000"'>
  <TEFORM>
  <pre>
  <TEAREA 1 1 12 80>
  PASSWORD: <TEDATA 13 21 10 AS INPUT>
  <TESHOW "I AM DISPLAYING TERMINAL ID: "+Screen(4,16,4)>
  <TEAREA 14 1 24 80>
  </pre>
  <A HREF="<TEMACRO TRANURL 'refresh/'+screen.sessionkey>">Refresh</a><br>
  <A HREF="<TEMACRO TRANURL 'exit/'+screen.sessionkey>">Exit</a><br>
  <temacro termformend> <!-- creates PFkey and Enter logic -->
  <TEPUTSECTION global.footer>
  </html>
</TESECTION>

End of Solution for Exercise 3.3


Solution for Exercise 3.4

<TECONNECTED
  when Screen_1_2 is "CESN=REENTER">
<TESECTION logon
  when Screen_1_2 is "CESN=REENTER">
  .
  .
  .
  Remainder of the EXERCISE33.STML tags
  .
  .
  .
</TESECTION> 

End of Solution for Exercise 3.4

Lesson 2. 3270/5250 Display CharacteristicsLesson 4. Basic Customization