.. _tn201606:
Virtel Screen Redesigner in action
==================================
In this newsletter we work through the Virtel Screen Redesigner and
present an actual modernization of a 3270 application. This newsletter
is not for the faint hearted and demands that your have a thorough
knowledge of web design. If you are not familiar with HTML, CSS and Java
script then do not continue. VSR is intended as a tool for web designers
who are familiar with these web components. Their functionality is used
as a part of a modernization project and is utilized extensively when
building a modernization project with VSR.
**Install VSR**
Installing VSR is a relatively simple. Download the VSR package and
extract to a directory. Create a shortcut to the VirtelSR.exe program.
That’s it. To remove it just delete the installation folder. The
extracted package provides an installation document which contains
further details.
**Using VSR and Virtel**
VSR utilizes the Virtel software as part of the modernization project. I
have started up an instance of Virtel which I will use in this VSR
example. We need to extract some information from Virtel and plug it
into the VSR setup menu.
Our Virtel is setup up to use the following lines:-
::
F SPTHOLTV,LINES
VIR0200I LINES
VIR0201I VIRTEL 4.55 APPLID=APPLHOLT LINES
VIR0202I ALLOCATED IP ADDRESS = 192.168.170.033
VIR0202I INT.NAME EXT.NAME TYPE ACB OR IP
VIR0202I -------- -------- ----- ---------
VIR0202I C-HTTP HTTP-CLI TCP1 :41002 **
VIR0202I W-HTTP HTTP-W2H TCP1 :41001 **
VIR0202I ---END OF LIST---
We shall use the C-HTTP as the target line for out modernization
project. This will have the ip address:port of 192.168.170.033:41002.
This will be our “Base URL” for testing.
The W-HTTP address:port 192.168.170.033:41001 will be used for uploading
our modernized templates.
Next, we add the following two transactions to the CLIWHOST entry point
based upon the sample VSR transactions TESTCAPT and TESTAJAX which can
be found in the Virtel CLI-DIR directory. I use the Virtel
administration panel to create these new transactions. AS my VSR project
will be called MENU I create the transactions MENUCAPT and MENUAJAX.
MENU is also the CICS transaction that invokes our 3270 MENU
application.
Our MENUCAPT transaction looks like this:-
|image0|
And our MENUAJAX transaction look like this:
|image1|
The TIOA string enables Virtel to use logon to CICS using the user
id/password variables. The CICS application MENU is then called once
CICS processes the logon and returns a 3270 screen image with the word
“complete” in it.
**The Options directory**
VSR has two modes of operation, Test mode and Standard mode. The CAPTURE
transaction requires the use of the options directory, note the vsr
value in the Option field. To support this we need to add the options
directory, as a transaction, to the CLI entry point. The following
transaction, CLI-03O, is added to CLIWHOST. It is modeled on the W2H
transaction CLI-03W.
|image2|
Our 3270 application front end screen looks like this:-
|image3|
**Mapping out the application**
Before we can build the scenarios that will modernize our application we
need to map out the navigability of the application and understand which
maps are called based upon user actions. Our application looks like
this:-
|image4|
Fig. 1 - MENU Maps layout
**Scenarios**
Within VSR we use Virtel scenarios to analyze a 3270 screen buffer in
order to produce the relevant HTML templates. Scenarios are loaded from
either the Virtel STEPLIB or a user defined VSAM file. In this example
we will loaded all the modernization scenarios for the Virtel STEPLIB.
First we must customize and assemble the MENUAJAX scenario. Using the
sample SELECTPG member in the Vitel SAMPLIB as a model we create member
MEMNUAJAX, and assemble it using the ASMTCT. This job can be found in
the Virtel CNTL library. See Appendix A for an example of MENUAJAX.
Having now prepared everything we are ready to build our modernization
project with Virtel VSR.
**Creating the VSR project**
I open the VSR shortcut that I created on my desktop and I am presented
with the initial VSR page where I can name and define my project
directory. The direct must exist prior to creating the project.
|image5|
Following through the VSR manual I create my project and plug in the
line variables that I extracted from my Virtel task. The VSR panel now
looks like this:-
|image6|
The main VSR panel is divided into 5 sections which help you to flow
through the process of modernization. The sections are:-
#. Setup Configuration information. The settings cogwheel icon on the right will display and enable you to set the various settings for your project.
#. Source Map Location of Maps
#. Workbench Work bench of maps, either converted from source or manually created.
#. Template Generated template from workbench maps
#. Try it Display template either in Test Mode or Standard Mode.
Depending on selections within each section various ICONs will appear
providing additional functionality. Sections 2, 3 and 4 require input
sources. This is controlled by the selection ICON which is a button with
three dots on it. It is a toggle button which actives the selection
window to the left either as an input mode or in select mode. In input
mode you can type into the entry window. For example when saving a
template with a new name. I select mode it becomes a selection widget
listing files in a directory which you can select from.
According to the VSR manual we upload the preliminary files which will
support our modernization project into the CLI-DIR directory. Clicking
the upload ICON on the right hand side in section 5 of the screen opens
the Virtel drag and drop interface. From the modernization directory
that I created I drill down to the virtel\\cli-dir directory and upload
the files to the CLI-DIR using the drag and drop interface. As we will
be using “Test” mode in our modernization we also need to upload the
files in the development directory to CLI. The three files we move into
CLI are *custom.js*, *vsr.js* and *option.vsr*.
Note, these files are not required when modernizing in “standard” or
production mode.
|image7|
After successfully uploading the files I close the upload window and
refresh my VSR screen using refresh ICON in the top right corner.
The next stage is to download my first CICS MAP from the mainframe and
load it into VSR. The first MAP we are going to modernize is the main
menu map MENMAP1. This map is defined with the MENSET1 PDS map member on
the mainframe. I download the map as MENSET1.MAP and save it in MAP sub
directory. Next, in section 2 of the VSR project window I enter the name
of the map file and press the green LOAD ICON. The map loads and the
Source map section is updated.
|image8|
Having loaded my CICS MAP into VSR I can now create the work bench by
pressing the CREATE ICON in the workbench area. The workbench is filled
with rows, each row relating to a field with my CICS Map. I save the map
as a JSON file called menmap1.json. VSR saves workbench maps as JSON
files so I will use the JSON suffix for saving MAP elements.
|image9|
At this point I can start to modernize my 3270 MENMAP1 MAP using the
Choice column drop down. The drop down provides a variety on Virtel
conversion and design options. These options will generate the necessary
Virtel tags that will be the start of the modernization process. From
the workbench I can see that the map is made up of a total of 12
elements spread across 6 lines. Line 1 has three elements, Line 3 has 1,
Line 5 has 2, Line 6, 7 and 23 both have 1 element and finally line 24
has two elements. For this example I we change the ACTION line (5) and
its associated untitled elements on line (5,6,7) to become a select drop
down.
Following the VSR documentation I set the protected filed to the choice
“COPY-FROM” and the unprotected ACTION field to the choice
“GENERATE-HTML”. I have saved the workbench as MENMAP1. I then create
the template by pressing the “Create” ICON in the Template section of
the VSR display, section 5. This generates the Virtel tags which will
support my modernized template. I save the template as Testmenmap1. The
default extension of HTML will be added.
My VSR window now looks like:
|image10|
**Testing changes with “Test Mode”**
One of the features of VSR is that you can view your modernization
changes as you develop and before you commit them to standard or
production mode. To do this upload the generated template by pressing
the upload ICON upload button, the first ICON on the left in the “Try
it” section. After uploading the template display the template within a
Virtel capture window by pressing the “Try it” ICON, the second icon on
the left hand side right in section 5. Now the MENU page is redisplayed
in the capture window. Notice the two additional ICONS in the tool bar
area. The first one is “Capture BMS Map” the second is “View the
Modernized Rendering”. We use this second one so see what our modernized
screen looks like based upon the elements that we have copied from the
workbench into the template area. VSR will use Virtel to display the
template.
|image11|
After pressing the “render” ICON we are presented with are modernized
screen:-
|image12|
Nothing too exciting here. We can see that Virtel has taken the various
elements from the Map, created the Virtel tags within the template, and
displayed them without any special markup. Of course, the markup is down
to us and this is where we begin our modernization using our HTML, CSS
and Java script skills. The generated template statements form a
sub-page which is sent to the browser after combing it with top and
bottom sub-page elements. The top and bottom pages are called
PageTop.html and PageBottom.html and are located in the Options
directory of the project.
Our first modernization is to change the background colour. To do this
we need a css file to customize. One is provided, Visu.css, and is
include it in the PageTop.html file. This css file can be found in the
VIRTEL\\CLI-DIR sub directory of the project. We update visu.css and
save it as menu.css, keeping the original as a copy.
Next we need to update the PageTop.html to include our menu.css style
sheet. Here are the changes we made:-
::
The updated files are uploaded to the CLI-DIR using the right hand
upload ICON in the try-it section. We must save the template in section
4 in order to pull in the modified pagetop.html file. This process
creates TestMenmap1.html which is a combination of the pageTop.html, our
Virtel template tags, and the pageBottom.html html elements. If we have
a look at the created TestMenmap1.html in the Template folder you can
see it has three distinct
areas. The top page identified by id
“headband”, the middle portion identified by id “dynamic”. The bottom
code is everything following this closing
on the dynamic area. If
you look at pageTop.html and pageBottom.html you will see how these two
elements split the dynamic