/   Site Map  /   About Us  /  General Products  /  MV Products  /  Outsourcing   / Home page   /

The PixieWeb Primer

Introduction

This document provides a step-by-step guide to generating HTML from PICK using PixieWeb. It's intention is to guide you through the steps required to install the software, and build a simple, yet new, graphical user-interface (GUI) for a PICKBASIC application. For the example used here, the PICK application source code and all required ASP's are supplied FREE with PixieWeb. This guide will lead you through exercises aimed at using an ASP to connect directly to PICK Programs, TCL, and our backserver program (PX.BACKSRV), to create anything from basic to advanced screens in an attractively displayed graphical format.

Please note the terms MV and PICK are used interchangeably, and both terms imply the use of the many variations of PICK-like systems. 

This guide contains sections for connecting an ASP (Web browser) to: 

• A custom PICKBASIC program (Section1)

• TCL via a direct connection (Section 2) (being written)

• Our standard PICK backserver program (Section 3) (being written)

• To VB / VBSCRIPT / JAVASCRIPT / Office-VBA or any other COM-aware language or toolkit to PICK data and programs (including the standard backserver program) Section 4 (being written)

1.  Using PixieWeb to connect  a Web-Browser to a PICKBASIC Program

An overview of this PixieWeb run-time environment outlining the interaction between ASP's and PICKBASIC programs is shown here: . 

Initial Set-Up

1. Please ensure the readme.txt file that is supplied with PixieWeb is read and instructions followed. View file here View Document.

2. Please ensure the documentation on installation and set-up of PixieWeb, the demo files and programs, and IIS or PWS is read. View document here View Document.

3. The supplied script fbfdemo1.asp needs to be altered before a connection to the PICK host can be made. Please review the relevant Pixie.Object commands found in this table.

   Commands

   Parameters

   Description

   ExecuteCompareMethod	1 = Case insensitive	Case testing of text reply sent from MV.
   Port	nn	Assigns TCP/IP port number.
   Host	nnn.nnn.nnn.nnn	Assigns TCP/IP server address.
   TimeOut	nn	Sets the no. of seconds before timeout if no response from MV.
   Connect	(AUTO = Auto connect)	First contact with MV host, using connection settings.
   State	ERROR, PAGE, TCL, STARTUP	Returns a string identifying status of the object.
   ExecuteET	("string.sent", "expected.response")	Sends text string to MV and defines expected response if processed OK.

   The following code snippet taken from fbfdemo1.asp will need to be amended to match the individual login requirements of your system. You should observe the use of the relevant Pixie commands as it is these that you will have to change.

Set Pixie = Server.CreateObject("PixieWMA.clsAgent") 

Pixie.ExecuteCompareMethod = 1 'Case insensitive transmission checks Pixie.TimeOut = 12 

Pixie.Port = 23 

Pixie.Host = "101.160.41.5" 

Call Pixie.Connect("{AUTO}") 

If Pixie.State = "ERROR" Then Call ErrorHandler("ERROR: Cannot connect to Server.") 

'Call Pixie.ExecuteET("", ":") 'tickle into life with enter key,

   needed for some PICK engines 

Call Pixie.ExecuteET(Request.Form("UserID"), ":") 'UserID 

Call Pixie.ExecuteET(Request.Form("Password"), ":") 'Password 

'Call Pixie.ExecuteET("testaccount", ":") 'Master Dictionary/Account 

'We often put ECHO OFF here in scripts but it is not needed in this 'case because we talk to PICKBASIC programs which have it in. 

If Pixie.State = "ERROR" Then Call ErrorHandler("ERROR: Login not accepted.")

' This Session statement makes this a "persistent" process.

Set Session("Pixie") = Pixie

It is the use of the ExecuteET command that will need to be understood fully. The first parameter of this command is a placeholder for text string to be sent to PICK,  and second parameter defines expected response from PICK if the first parameter is processed successfully. The use of the State command will indicate whether the ExecuteET command was successful. Note that the first parameter should show the input normally entered by the user via a terminal emulator. The second parameter should show the expected response from the system. What is being built with consecutive ExecuteET's is a script to simulated a user logon session. The logon scripting should terminate at a point where a program can be executed (i.e. at TCL).

To illustrate further: the first parameter could contain the data (test-account) which is contained in placeholder {UserID}, or contain the value (abcd01) which is contained in the placeholder {Password}, both pleaceholders being captured by the launching script - Login.asp. The placeholders may be used multiple times if needed with the same value. The second parameter simulating a valid system response could contain - "user password:" or ":" depending on the response you are expecting from the PICK system.

If you have login steps in addition to the standard steps coded in the provided script, then you will need to set up additional ExecuteET commands for each step. The intent of the login script is to mirror exactly the steps involved with a login to your system when using a traditional terminal emulator. For example in the following statements a successful Password will cause an application menu to be presented, which asks the user to enter a SELECTION. An "X" selection takes the user to TCL and the normal TCL prompt of ":" is required for a successful logon. Take a look at http://www.pixieware.com/excelconf.htm to view what actually happens in this case using a terminal emulator.

Call Pixie.ExecuteET(Request.Form("Password"),"SELECTION")'Enter Pwd 

Call Pixie.ExecuteET(Request.Form("X"),":")'X takes user to TCL 

At this point a PICK program may be executed because control is at TCL.

 Source Code Provided With PixieWeb

1. The source for launching script (login.asp) can be viewed here View Code. Notice the FORM command with its Action parameter (action="fbfdemo1.asp) passing control over to fbfdemo1.asp, and the Input parameter (input size="23" id="userid" name="UserID") where the Userid is stored after it is entered.

2. The source for login script (fbfdemo1.asp) can be viewed here View Code. Notice the CALL to {Pixie.ExecuteTX("fbf.menu.web")} which is the first PICK program to execute, and the CALL to {Pixie.ExecuteET(Request.Form("UserID"), ":")} which passes the input string that presents the Userid to PICK.

3. The source for the script (XDLTemplate.htm) that controls Input/Output and event analysis can be viewed here View Code.  The container DIV for the web page is found in XDLTemplate.htm. Notice the HTML BODY command at the end of the script. This contains the DIV (doc1) into which the PICK program (fbf.menu.web) is inserting its own HTML code and data. It is this inserted code driven by PICK that is causing the Web pages to take on the field-by-field interactive capability that PixieWeb is noted for.

4. The source for the script (XDLPixie.asp) which maintains the on-going connection between the Web Server and the browser can be viewed here View Code. Notice the use of the variable "sResponse" which is a vehicle for carrying data to XDLTemplate.asp for analysis and action (e.g. the contents of the DIV doc1 will be updated by the data stored in the PICK variable SC).

5. The source code for the demo PICK program (fbf.menu.web) can be viewed here View Code. Notice the statement (CRT "IREPLACE|doc1=":SC:"^FOCUS|fx0":) which is modifying the contents of the DIV (doc1) from the HTML and data found in the variable SC (refer XDLTemplate.htm).

Screen Images

1. Screen image for login form generated by fbfdemo1.asp can be viewed here View Image.

2. Screen image for menu screen generated by fbf.menu.web can be viewed here View Image.

3. Screen image for an application screen (option 1 on menu - Inwards Call Center) which is called from fbf.menu.web. This can be viewed here View Image.

What Happens at Run Time 

1. The login.asp launches the ASP fbfdemo1.asp. The tcp/ip address, port, account and password are presented to PICK for a login. If the login process is OK then the PICK program fbf.menu.web is started.  

2. The PICK program fbf.menu.web confirms it has started by sending an acknowledgement back to fbfdemo1.asp in the form of: CRT "<TX>OK</TX>". Upon receipt of this start-up signal, fbfdemo1.asp fires up XDLTemplate.asp. 

3. XDLTemplate.asp is loaded into the browser and sends a simulated user input back to fbf.menu.web via XDLPixie.asp. The simulated input may be any string of characters but initially we have it set up to send "GO". The event Windows_onLoad causes the "GO" string to be sent.

4. XDLPixie.asp is the on-going communications device sitting between the browser and the Web-Server. XDLPixie.asp is launched by XDLTemplate.asp at the same time the "GO" string is sent.

5. Now that communications between all components have been established and the cycle within the PICK program of INPUT/CRT/INPUT/CRT/etc.. has been started, normal user interaction with the program through the browser can continue.

The PICK Programming Perspective

1. The first 2 key statements in the program fbf.menu.web are:

CRT "<TX>OK</TX> " - This statement sends an "OK" acknowledgement to an ASP that the program has been started successfully.

INPUT FIRSTREQUEST - This statement causes the program to wait until a simulated user input has been sent by an ASP. When input is received the program proceeds to build and generate the base browser page.

2. The next key statements in the program are the use of CALLS to WEBDX and WEBMX to generate lines to be displayed on the browser. Output from repeated use of WEBDX and WEBMX are appended to the program variable SC. 

*Build Menu selection items 

*User selection count SELINDEX applies only to "C" types so we need SELINDEXMAP to relate them to the whole list 

SELINDEX = 0 

SELINDEXMAP = "" 

MLINE = 3 

LINEPOS = 5 

FOR i = 1 To NTYPES 

  LINEPOS = LINEPOS + 1 

  MTYPE = EXTRACT(MTYPES, 1, i) 

  MITEM = EXTRACT(MITEMS, 1, i) 

  PROG = EXTRACT(PROGS, 1, i) 

  CIRC = EXTRACT(CIRCS, 1, i) 

  HELPID = EXTRACT(HELPIDS, 1, i) 

  IF MTYPE = "H" THEN CALL

     WEBDX(30,LINEPOS,20,0,MITEM,"","","",SC) 

  END ELSE 

     IF MTYPE = "U" THEN 

       *Do Nothing, unavailable item 

     END ELSE 

       SELINDEX = SELINDEX + 1 

       S = "mx":SELINDEX 

       SELINDEXMAP = SELINDEX 

       OP = SELINDEX : " - " : MITEM 

       CALL WEBMX(22,LINEPOS,45,0,OP,S,"","",SC) 

       IF DISPLAYMODE = 2 THEN 

         CALL WEBMX(10,LINEPOS,10,0,PROG,S,"","",SC)    

       END

    END 

  END 

  MLINE = MLINE + 1 

  IF MLINE > 15 AND i < nTYPES THEN 

    SC = SC : " " 

    MLINE = 3 

  END 

NEXT i 

GOSUB TrailerSub 

CRT "IREPLACE|doc1=":SC:"^FOCUS|fx0":

At the bottom of this code snippet is a CRT "IREPLACE| SC" statement which places the HTML code generated by the WEBDX and WEBMX calls into the DIV allocated by XDLTemplate.htm. SC is the program variable used to store the generated code until it is needed. Each WEBIX, WEBMX, or WEBDX output is appended to SC. Refer to this image View Image for results of this code published by a browser. The IREPLACE statement is used to place the contents of variable SC into the DIV (HTML part-of-Page container) for the screen design. This formats the page that is presented to the Browser. This initial page will remain throughout program execution, but field content will be redrawn each time the data changes. 

3. Another set of statements to analyse are those related to the flow of control within the program. All CRT output should be surrounded by a <TX> and </TX> tag. PixieWeb upon encountering a <TX> will hold all output from a CRT until a matching </TX> tag is encountered. The </TX> tag will force PixieWeb to release all output to the browser. 

CRT "IREPLACE|doc1=":SC:"^FOCUS|fx0":

CRT "</TX>": 

INPUT REQUEST 

CRT " <TX>":

.....(loops back to CRT "IREPLACE")

4. Another set of statements to analyse are those related to general screen formatting such as setting up header and footer display areas. These routines are called (e.g. GOSUB HeaderSub) when a header or footer is required. Notice the output of each WEBDX or WEBIX call is appended to the contents of variable SC. SC is output to the browser via the CRT "IREPLACE|doc1=":SC:  

HeaderSub: 

CALL WEBDX(1,1,10,0, GSAccount,"","","",SC)

CALL WEBDX(33,1,15,0, MTITLE,"","","",SC)

CALL WEBDX(65,1,10,0, HeadDate,"","","",SC) 

CALL WEBDX(55,5,14,0,"Disp. Prog. Names?","","","",SC) 

CALL WEBDX(1,3,75,0, "HR","","","",SC) 

IF DISPLAYMODE = 2 THEN 

  CALL WEBIX(70,5,2,0, "1", "fx1","CHECKBOX","",SC) 

END ELSE 

  CALL WEBIX(70,5,2,0, "", "fx1","CHECKBOX","",SC) 

END 

RETURN 

 

TrailerSub: 

LINEPOS = LINEPOS + 2 

CALL WEBIX(45,LINEPOS,2,0,"","fx0","","",SC) 

CALL WEBDX(48,LINEPOS,12,0,"Please Enter","","","",SC)

CALL WEBIX(29,LINEPOS,6,0,"Reset","fx93","BUTTON","",SC) 

CALL WEBIX(36,LINEPOS,6,0,"Exit","fx94","BUTTON","",SC) 

RETURN

5. The source code for PICK programs have to be changed to convert text-to-HTML format to rescale screen output from one style to another. The output (CRT) of the PICK program includes markup strings built by subroutines (WEBDX, WEBIX, WEBMX) which translate the traditional green-screen @(x,y) co-ordinates into positioning co-ordinates that a web browser or PixieLink can process. For example: 

   SC = SC:@(10,10):"Customer"  is replaced by:

   CALL WEBDX(10,10,0,0,"Customer","","",SC)

   CRT SC

    

   The routines WEBIX (View Code), WEBDX (View Code) and WEBMX (View Code) are supplied with PixieWeb. WEBDX is a routine that positions labels on a web page and generates HTML output based on terminal positions. WEBIX performs similar functions to WEBDX but positions input fields on the web page. WEBMX positions special menu items on a web page.

 

2. Using PixieWeb to connect a Web-Browser to TCL - (being written)

Initial Set-Up

a

3. Using PixieWeb to connect a Web-Browser to PX.BACKSRV - (being written)

Initial Set-Up

b

4. Using PixieWeb as a general PICK connectivity device for VB / VBSCRIPT / JAVASCRIPT / Office-VBA or any other COM-aware language/toolkit - (being written)

Initial Set-Up

c