• 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.

Congratulations!

Treat yourself to a cup of coffee…

End of Identify and Navigate Wizard Exercise

Screen Object Wizard

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