Visual Surfer Introduction Basic SurferScript
 Click on any item to view...

+Product Positioning
SurferScript Guide

SurferScript Introduction

SurferScript Example

Basic SurferScript

Visual Surfer Introduction

This lesson is designed to introduce you to Visual Surfer.

In this lesson, you will learn about the Identify and Navigate Wizard, the Screen Object Wizard, and basic information about the Visual Script Editor.

As with all tutorial lessons, this page includes a skills access table at the top; throughout the page is a mix of concepts, skills, and exercises--you can come-back at any time to review.

New Skills

Identify and Navigate Wizard

iE ScreenSurfer Folder The ScreenID and Navigation Wizard is the first step in the Visual Surfer methodology:
  • The Visual Surfer Methodology begins with the Identify and Navigate Wizard. With this wizard, which is used again and again as you add new screens to your "master list", you "visit" each screen in your application, identify and then navigate between screens. Every time you enter from one screen to another, the keystrokes you used are saved in a special screenchange declaration which can be used at any time, in any script, to reproduce the screenchange.

Identify and Navigate Wizard Exercise

Using the Toy Mainframe located in the ScreenSurfer Folder, we are going to create an application blueprint. The Toy Mainframe is a simulated 3270 environment.

Before we dive into development, you need to do 3 things:

  1. With a double click, run the Toy Mainframe.
  2. With another double click, open ScreenSurfer Control. Start the ScreenSurfer control. Note: watch the sky turn blue!
  3. Next, open up the DevCenter, it is also located in the ScreenSurfer folder.
  • The Menu Frame, on the top left, appears as 'Top Menu'. In Top Menu, click on 'Visual Surfer'.
  • Now the Menu Frame appears as 'Visual Surfer'. Click on the Identify and Navigate Wizard link.
  • Select the Connect to New Session link. In the Editor Frame, 'Connect to New Session' will appear. Click on the Connect button. This action will display the Connection Request Page in the Primary Frame. Click on the Click Here to connect to Localhost Toy Mainframe (remember to start first from the ScreenSurfer Folder) link. The Toy Mainframe Logon screen will populate the Primary Frame. Note: In the Menu Frame, a green check appears to the left of the Connect to New Session link and there is an animated wave graphic to the left of the Register Screen link. This visual indicator guides you through all wizard processes in V3.
  • First name the Screen in the Screen Name field. Let's call it 'log'.
  • Shift your attention to the Primary Frame. You will see the Toy Mainframe Logon screen. We need to find a snippet of text on this screen that will uniquely identify the Logon screen. How about CESN=REENTER in the upper left corner of the screen? Highlight or swipe that particular snippet with your mouse. CESN=REENTER will appear in the Primary screen with a yellow hue. In the central field of the Identify Screen window, you should see: 1,2 IS CESN=REENTER. Is that what you have?
  • If not, practice removing it by selecting the icon with the red X to the right of the coordinate field. Comparison Type is Literal. Make sure the 'IS' radio button is selected.
  • Click on the Blue Arrow pointing to the right to continue forward.
  • In the Primary Frame, enter the Logon: LOGONID: user1 PASSWORD: pass1
  • Hit the Enter Key. This action will display the Applications Main Menu in the Primary Frame. In the Editor Frame, 'Register Screen Navigation' appears. Here we are going to log the information that records the transition from screen to screen.
  • In the To Screen field, type 'menu'.
  • In the lower section of Register Screen Navigation, we need to select both lines of code; 12,21 "user1" and 13,21 "*****" by holding down the Control key and using the mouse to select each line.
  • These lines are chosen because they are not static, they change. Hypothetically, each user of the Toy Mainframe has a unique logon and password. Variables must be flagged for ScreenSurfer to function properly.
  • In the Primary Frame, the Toy Mainframe's Main Menu screen appears. Notice the Editor Frame has changed to Identify Screen.
  • This is a new Toy Mainframe screen and therefore needs to be identified. Do you remember the steps? In case you don't, here they are…
  • First, name the Screen in the Screen Name field. Let's call it 'main'.
  • Second, swipe some text to uniquely identify the screen. Highlight 'Menu1'. The text appearing in the central field of the Identify Screen Editor is 1,2 IS MENU1.
  • Verify that the Comarison Type IS Literal.
  • Click on the Blue Arrow pointing right to continue.
  • In the Primary Frame, type 1 to navigate to the New Employee screen. Hit the Enter key.
  • The Primary Frame will show the Add Empolyee screen. This is another new screen and we must name and identify it.
  • In the Screen Name field in the Editor Frame, call this screen 'add'
  • Highlight 'Add Employee' in the New Employee screen. The text showing in the central fild of the Identify Screen Editor is 1,28 IS Add Empolyee.
  • Let's switch back to the Toy Mainframe. In the Add Employee screen, we need to enter some data in order to continue to the next screen in the application. First Name: Roy Last : Submot SS Number: 098 76 5432 Dept Code: 001 Job Class Code: A1 Hit the Enter key to continue.
  • You will see a screen with this message: NEW EMPLOYEE ENTERED-- PRESS ENTER FOR MAIN MENU.
  • We need to identify this screen. Shifting back to the Editor Frame, Register Screen Navigation is waiting for us. The From Screen field should be 'add'. Let's name the To Screen 'success'.
  • None of the information that we entered in the Add Employee screen was static so, in the lower portion of the Register Screen Navigation editor, we need to select each line.
  • Next, we must Identify this screen. Swipe 'New Employee'. In the central field of Identify Screen you should see 10,21 IS NEW EMPLOYEE. It IS a Literal.
  • Click on the Blue button pointing right to continue. You should be back at the Applications Main Menu screen.
  • At this point, we have collected a sufficient number of screens for our application. We have created the application's blueprint.
  • Let's check to see what screens we have collected and get ready for the next tutorial, shall we?
  • Click on the Pink arrow in the Menu Frame.
  • Click on the Screen Object Wizard link in the Menu Frame.
  • The Editor Frame will provide you with a Select Screen editor. Here you can choose from Cached Screens or an Active Session.
  • A cached screen is stored in the Host Server/templates directory and is especially useful when you are not connected.
  • Let's choose Cached Screens. A list of the screens we identified should appear. Do you have Log, Menu, Add, and Success? Great! You are right where you should be.


Treat yourself to a cup of coffee…

End of Identify and Navigate Wizard Exercise

Screen Object Wizard

Understanding the iE ScreenSurfer directory (folder) structure Once you have completed a blueprint of your site, your next step in developing a ScreenSurfer application is to develop each of the screens mapped in the first step. This is the design work, the fun stuff! Ooops, its all fun! OK, lets's make sure that all systems are Go. You did complete the Visual Surfer: Identify and Navigate Wizard tutorial, didn't you? If not, it is highly recommended that you do it and come back (otherwise, what we are going to do here won't work!).

Screen Object Wizard Exercise

You may be wondering what 'magic' took place to generate this beautiful new interface. Behind the scenes ScreenSurfer is taking the template your created using the Screen Object Wizard and it compiles it. This process produces HTML and proprietary SurferScript on the fly. How about some more practice?

  • From the Screen Cache List, select Main. The Applications Main Menu will display in the Primary Frame.
  • Click on the Blue button pointing right to continue.
  • The Screen Object Type is.... User Interface.
  • Click on the Blue button pointing right to continue.
  • Let's work with the Enter Menu Selection first. In Edit ScreenMap Fields:
    • Type: Data
    • Name: Select
    • Row will reflect the entry field, "22, 14, 4"
    • Data Type: Read/Write
    • Class: Standard Data Entry Field
    • Style: Plain
  • OK, now let's select Applications Main Menu in the Primary Frame.
    • Type: Text Literal
    • Name: leave blank
    • Jump down to Style. From the drop down menu choose Title.
  • Next choose 1 New Employee.
  • Type: Text Literal
  • Name: leave blank
  • Style: Plain
  • Repeat this process for lines 2-99!
  • When you have completed all lines that you want to appear, try selecting the lines that you don't want to appear... refer to the first screen that we worked on.
  • Once your screen is complete, it should be fairly colorful. Let's continue.
  • Click on the Blue Arrow pointing right.
  • Default Field Type is Text Literal.
  • Default Style is None.
  • Generate all sections; Screen Map Definition, Screen Read/Write Sections, Screen Display HTML.
  • Click on the magic wand!
  • In the Primary Frame, you should see a web version of the Applications Main Menu!

    Well done!

    End of Screen Object Wizard Exercise

    Visual Script Editor Introduction to the Visual Script Editor.

    Visual Script Editor

  • Basic SurferScript