 |
Click on any item to view...
Contents
|
|
This section describes the two modes of development typical with ScreenSurfer: generating new sections in the DevCenter and working with existing sections. Following this overview are some additional examples of how to add new sections of SurferScript.
New/Reviewed Skills
Basic ScreenSurfer Development activities
ScreenSurfer development is not bound by any particular approach, since it involves creating/editing ASCII text, compiling and testing. How you perform these activities is a matter of personal preference, and can also be influenced by the features of your favorite development tools.
Generally, there are two primary kinds of development with ScreenSurfer: generating new template sections with DevCenter Wizards, and editing/modifying existing sections with an HTML editor.
Generating new Templates
To generate a new template for a host screen, you access the DevCenter and then follow the following steps. When a step starts with a frame name, such as "Menu:", it means perform the step in that frame. The frame names are as follows:
| Menu | Upper left frame: provides navigation |
| Banner | Upper right frame: buttons provide management of the screen view in the primary frame (roll mouse over to see text descriptions) |
| Primary | Main frame in the right center--Screen, Web gateway and other reports (such as compile results) |
| Editor | Left middle frame: where you interact with the built-in scripts/wizards and also where field-level query information is displayed |
| Help | Lower left: contextual help for various actions is displayed here |
| Status | Lower right: status information and mouse flyover field information |
|
Steps to generate a new Screen Section:
- Menu: Select Session/Screen Select
- Menu: Select Start a new session
- Primary: Select your host and using the Web Gateway view, navigate to the screen that you wish to generate a template section for
- Menu: Click on arrow up->left (return to higher menu level)
- Menu: Click on Quick Template Generation (this will generate a new template with one viewport and formatting based on a set of styles you select from)
- Editor: Enter the name of a new template, or select from an existing name (you can append a new section to any template) [click on forward arrow] Note: at any time, you can use the back-arrow in the editor window to review and change any prior step while in the process of generating a new template.
- Editor: Enter the name of a section for your screen [forward arrow]
- Editor: To uniquely identify this screen, select text in the Primary frame that is static and represents this screen distinctly. Each field / string token you click-on in the Primary frame becomes criteria for identifying this screen. One or two clicks should usually do it. [forward arrow] Note that the generated HTML is visible in an edit field at this point; you can edit this HTML at any point to "tweak" the generated HTML!
- Editor: Select a page style-- you can review the various styles by rolling the mouse over each item to see a graphic representing that page. Note, that if you have a specific set of PF Keys or just the Enter key that is needed, you should select one of the two "custom" styles, as this will omit the large graphic containing a representation of the 3270 keyboard. [forward arrow]
- Editor: Select the viewable area of the screen. You do this by clicking on an upper inclusive and lower inclusive row in the Primary frame. The area you describe here is the portion of the screen visible in the generated page. [forward arrow]
- Editor: If you would like some buttons or links generated for PF Keys and/or the Enter key, select a row (only good for rows with PF1=Text as a format) or key-in a definition string. Example: "enter=Enter pf1=Help pf3=Exit pf7=ScrollUp pf8=ScrollDown" [forward arrow]
- Editor: Select the header. As distributed there is only the header that you can edit in the global.stml file. You can add additional headers by editing the file: \ScreenSurfer\hostserver\docs\devtool\userdefs.js and following the instructions found in the comments. By defining and creating new headers, you can quickly generate a number of pages with a common look and feel that is easy to modify on a global basis. [forward arrow]
- Editor: Select the footer (see above) [click on the "magic wand"]
- Primary: Your generated SurferScript is now viewable in the primary frame.
- Primary: Click on the Post Button. This posts the generated SurferScript to the specified template/section and recompiles
- Banner: Click on the "Wave" icon to see the effect of your new template on the current screen
- Banner: Click on the "<A" (HTML) icon to return to the generated template section editor-- you can change the HTML and SurferScript all you want-- click on the Post and repeat between the "wave" icon and the "text" icon until you are satisfied with the initial template.
- To work with another screen, [uplevel arrow in Menu], repeat from step 1, only in step 2, select your existing session instead of starting a new one...
|
Exercise 4.1
Follow the directions above to create a section named "main menu" in a new template named EXERCISE41.STML.
This section will manage the screen following the logon screen in the "toy mainframe" named "Applications Main Menu".
This screen is recognized by "MENU1" in row 1 column 2.
Click on Solution for Exercise 4.1 for a possible solution
End of Exercise 4.1
Working with existing Templates
Existing template files may be edited with any programmer's text editor, while an HTML-specific editor is preferred (see section on editing).
In an editor such as HomeSite, add a new Project with \ScreenSurfer\hostserver\templates as the source directory-- this will provide a list of all your .stml files in the project view, so that it is easy to edit a specific template file by double-clicking on it.
|
|
Typically, in an edit-compile-test environment, you will want to have three windows actively open for your development cycle:
- A Browser Window for testing the results (starting at the web gateway home page)
- A Browser window with the DevCenter loaded.
- Your editor window with the template file open
With at least these three primary windows on your desktop, it is easy to switch between them using the task bar. Typically, a development cycle involves:
- Edit your template section(s)
- In DevCenter, Administration Tasks:Recompile Templates
- In Test Browser window, test!
- Go back to step 1...
Some key features of the DevCenter that will help in this development mode:
- Compile with Trace. The Compile with Trace works like the standard recompile option in the DevCenter Administration Tasks except that when the templates are compiled, the resulting code is fully traced during execution to the file \ScreenSurfer\hostserver\templates.log.
- View Trace File. While the trace file may be viewed with an editor, this option displays the contents of a trace file in the primary frame of the DevCenter, and formats the trace file into a more easily readable format.
- Clear Trace File. Trace files can become large quickly! You should typically clear a trace file after each compile-with-trace, in order to keep the file size small and the view time short.
|
Exercise 4.2
Compile the templates with TRACE ON and execute the "Applications Main Menu" screen in the "toy mainframe". View the trace file in the DevCenter to see what is in the trace file.
Click on Solution for Exercise 4.2 for a possible solution
End of Exercise 4.2
|
|
Prototyping
There are many HTML "composers" that have built-in wizards and other approaches to generating HTML pages. Sometimes, you may find it beneficial to create a prototype using such a tool, where you embed a special string, such as #Cust Balance# where the customer balance will appear (assuming for the sake of the example that "Cust Balance" will be read from the active host screen session). This lets you use any HTML generation tool (regardless of its compatibility with SurferScript), generate the HTML, then copy it to a ScreenSurfer template for subsequent editing. The subsequent editing will consist primarily of "wrappering" the generated HTML with a <TESECTION> to identify the screen or section of a screen that corresponds to the generated HTML, then replacement of each of the "# #" variables with an appropriate SurferScript tag, such as a <TEAREA> to display a portion of the active host screen.
|
|
|
"Stealing" HTML
One of the greatest features of Web development is the fact that much of the "source" code that makes-up a great page is completely available to you as a developer. All you need to do is a "view source" and copy the resultant display to the clipboard, for pasting into an active editor session.
While this is of course restricted to non-copyrighted material, you can use the HTML as a template for creating your own page using similar techniques. For example, there is a tremendous variety to the way that information can be formatted using HTML tables in the use of border sizes, colors and tables-within-tables. By copying from a successful design, you can then implement a screen enhancement with a presentation style that is proven and effective.
|
Identifying and Customizing a Specific Screen
This section describes how to create a SurferScript section driven by a screen update event. This section will use the WHEN SCREEN... clause to inform ScreenSurfer the recognition criteria for the screen to customize.
While the DevCenter provides a number of generation scripts or wizards which automate the creation of a screen customization section, we will describe the manual process here for the sake of learning.
While we won't be using DevCenter, we won't make things too difficult, either--we will use the global.default section as a starting point.
|
|
To Identify and Customize a specific screen:
- Open the global.stml file in an editor (see previous skill section)
- Locate the <TESECTION DEFAULT> tag, and highlight from the start of this tag through to the last line (the </TESECTION> tag)
- Copy to the clipboard using the edit-copy menu selection, or the Ctrl-C key
- Select file-new in the editor
- Select file-saveAs, and save the file as "SKILL45.STML" being sure to save it in the \ScreenSurfer\hostserver\templates directory
- Paste from the clipboard using the edit-paste menu selection or the Ctrl-V key
- Now open DevCenter in a browser window, and go to the Sessions Menu
- Click on Start a New Session
- Select the session in the primary frame, and navigate to the screen you wish to customize
- Click on the "Green Screen" icon in the banner of the DevCenter--this gives you a view with rulers so that you know the rows and columns of particular text
- Back in your editor window, change the TESECTION tag, giving it a new name. Give it a name to match the screen you are customizing.
- Insert a carriage return-line feed in front of the closing bracket of the <TESECTION tag (after the name), so that you have a new line below the TESECTION that is a continuation of the tag
- Add the text WHEN Screen_row_column IS "text" where:
- Screen_row_column has a number for the row and a number for the column matching the row/column of a static text field on the screen being customized
- text is a reasonable amount of the text that you entered the row/column for
- You have now uniquely identified the block of SurferScript that you copied from global.default; you can modify this block and your modifications will only apply to the screen identified in the WHEN SCREEN... clause
- See the prior skill section for a description of how to compile and test your changes...
|
Exercise 4.3
Create a section named "add employee" in a new templated named "EXERCISE43.STML". Follow the above steps and create custom code for the
"Add Employee" screen in the "toy mainframe". Compile and test your new section and template.
Click on Solution for Exercise 4.3 for a possible solution
End of Exercise 4.3
Creating a new URL (User-defined Transaction)
In a conventional Web (HTTP) server environment, you add a new resource simply by creating or copying a new HTML file to one of the server's directories. ScreenSurfer works the same way for all files placed in the \ScreenSurfer\hostserver\docs directory (and in any subdirectory of "docs"). These are static resources, which are simply sent to the requesting browser "as-is".
The User Defined Transaction in a ScreenSurfer environment is different, as instead of copying a static file resource to the user's browser, a user defined transaction executes a section of SurferScript in one of your template files.
The ScreenSurfer Transaction Path
ScreenSurfer uses the concept of the transaction path to identify sections of SurferScript to execute. The transaction path is a multipart naming scheme where each portion of the path is separated by forward slashes, much like the identification scheme of files in a directory structure.
For example, the following section of SurferScript will be executed any time a link or other HTML request submits a URL of /surfer/cust/balance:
<TESECTION CustBalance
WHEN Tranpath_1 is "cust"
AND Tranpath_2 is "balance">
The keyword Tranpath_n is used to identify the portion of the URL (not including the required root of "/surfer/") that associates the current request with this section.
|
|
To Add a new URL (User-defined Transaction):
In this set of instructions, we will build on the "SKILL45.STML" file to add a custom link to the screen we have created a customized SurferScript section for. The actual usefulness of this transaction is not high (and there are more direct ways to get the same result using the <TEMACRO SENDKEYS> tag), but demonstrates how you can add your own custom logic to a user-to-screen interaction.
- Open "SKILL45.STML" in your editor
- Add the following lines anywhere in the section you created in the previous skill section:
<BR>
<A HREF="/surfer/skill45/doenter?sessionkey=<TEMACRO SESSIONKEY>">
**Send an Enter Key**
</A><BR>
- Now add the following lines in SKILL45.STML, at the end of the file:
<TESECTION EnterSpecial
WHEN TranPath_1 is "skill45"
AND TranPath_2 is "doenter">
<!--Associate with session-->
<TEACTION GETSESSION>
<TEACTION ENTER "[enter]">
</TESECTION>
- Save SKILL45.STML and recompile with DevCenter; correct any compile errors if necessary
- Open a new Web Gateway session in a browser window and navigate to your customized screen
- Click on the link; you will see the same effect as if you had clicked on the ENTER key
- Optionally, change the link and the section to execute and keystroke sequence, such as "[home]hello[tab]there[enter]"
|
Exercise 4.4
Open the template named EXERCISE43.STML and follow the above steps and make the changes to your EXERCISE43.STML template.
Click on Solution for Exercise 4.4 for a possible solution
End of Exercise 4.4
Solutions for Exercises
Solution for Exercise 4.1
<!-- Generated Section main_menu: Generated Sun Oct 03 21:41:40 1999 -->
<TESECTION main_menu
WHEN Screen_1_2 IS "MENU1">
<TEPUTSECTION global.header>
<TABLE Border=1>
<TR>
<TD>
<TEMACRO TERMFORM>
<pre><TEAREA 1 1 23 80></pre>
</td>
<TD VALIGN="TOP">
<A HREF="/surfer/refresh/<TEMACRO SESSIONKEY>/<TEMACRO CLOCKTICKS>">Refresh</a>
<A HREF="/surfer/exit/<TEMACRO SESSIONKEY>/<TEMACRO CLOCKTICKS>">Exit</a><BR>
<TEMACRO TERMFORMVKEYS "SHORT">
</FORM>
</TD>
</TR>
</table>
<TEPUTSECTION global.footer>
<!-- End of Generated Section -->
End of Solution for Exercise 4.1
Solution for Exercise 4.2
- Navigate to the "Applications Main Menu" screen in the "toy mainframe" using the DevCenter
- Compile the templates with TRACE ON by doing the following:
- Open the ScreenSurfer DevCenter
- In the Menu portion of the DevCenter click on "Development Administration"
- Click on "Recompile Templates Trace=ON"
- The compile results shown in the Primary portion of the DevCenter will indicate "With Trace"
- Click the "Refresh" link on the "Applications Main Menu" screen
- In the Menu portion of the DevCenter click on the "View Trace File"
End of Solution for Exercise 4.2
Solution for Exercise 4.3
<TESECTION add_employee
when Screen_1_28 is "Add Employee">
<TEPUTSECTION GLOBAL.HEADER>
<!-- Emit the BODY tag along with JavaScript to position the cursor where
the host located it-->
<TEMACRO TERMBODY 'BGCOLOR="#CCCCCC"'>
<CENTER>
<!-- Emit the FORM tag with the EMULATOR action all configured for the
current ScreenSurfer Session -->
<teform>
<!-- The following line is the entire screen, row 1, Column 1 to
row 24, column 80 -->
<pre><font size="-1"><tearea 1 1 24 80></font></pre>
<!-- Now, for convenience display links to refresh and exit -->
<font size="-1">
<A HREF="<TEMACRO TRANURL 'refresh/'+screen.sessionkey>">Refresh</a>
<A HREF="<TEMACRO TRANURL 'exit/'+screen.sessionkey>">Exit</a><br>
<!-- Following will include a form enter button and a GIF that has
a server-side map to interpret function keys -->
<TEMACRO TERMFORMEND>
</center>
<TEPUTSECTION GLOBAL.FOOTER>
</TESECTION>
End of Solution for Exercise 4.3
Solution for Exercise 4.4
<TESECTION add_employee
when Screen_1_28 is "Add Employee">
<TEPUTSECTION GLOBAL.HEADER>
<!-- Emit the BODY tag along with JavaScript to position the cursor where
the host located it-->
<TEMACRO TERMBODY 'BGCOLOR="#CCCCCC"'>
<CENTER>
<!-- Emit the FORM tag with the EMULATOR action all configured for the
current ScreenSurfer Session -->
<teform>
<!-- The following line is the entire screen, row 1, Column 1 to
row 24, column 80 -->
<pre><font size="-1"><tearea 1 1 24 80></font></pre>
<!-- Now, for convenience display links to refresh and exit -->
<font size="-1">
<A HREF="<TEMACRO TRANURL 'refresh/'+screen.sessionkey>">Refresh</a>
<A HREF="<TEMACRO TRANURL 'exit/'+screen.sessionkey>">Exit</a><br>
<A HREF="/surfer/exercise44/doenter?sessionkey=<TEMACRO SESSIONKEY>">**Send an Enter Key**</a><br>
<!-- Following will include a form enter button and a GIF that has
a server-side map to interpret function keys -->
<TEMACRO TERMFORMEND>
</center>
<TEPUTSECTION GLOBAL.FOOTER>
</TESECTION>
<TESECTION EnterSpecial
WHEN TranPath_1 is "exercise44"
AND TranPath_2 is "doenter">
<!--Associate with session-->
<TEACTION GETSESSION>
<TEACTION ENTER "[enter]">
</TESECTION>
End of Solution for Exercise 4.4
|
|
Lesson 4. Basic Customization
