The menu Professional

The first page of any Web application is accessed via an HTML page that must be deployed in a directory of the HTTP server. Depending on what gateway is used the index page INDEXEXE.HTM, INDEXDLL.HTM or INDEXISA.HTM needs to be deployed. Those index pages can be found in the ...\SAMPLES directroy. They define form actions that connect to the initial page of the Klondike Computer Shop. In case of INDEXEXE.HTM the code looks like the following:

<FORM ACTION="/cgi-bin/waa1gate.exe" METHOD=POST> 
 <INPUT TYPE=hidden NAME="WAA_PACKAGE" VALUE="Menu"> 
 <INPUT TYPE=hidden NAME="WAA_FORM"    VALUE="Mainmenu"> 
 <INPUT TYPE=submit VALUE="A Computer Shop"> 
</FORM> 

For INDEXDLL.HTM the corresponding section looks like this:

<FORM ACTION="/scripts/waa1gate.dll" METHOD=POST> 
 <INPUT TYPE=hidden NAME="WAA_PACKAGE" VALUE="Menu"> 
 <INPUT TYPE=hidden NAME="WAA_FORM"    VALUE="Mainmenu"> 
 <INPUT TYPE=submit VALUE="A Computer Shop"> 
</FORM> 

The WAA server uses the contents of WAA_PACKAGE and WAA_FORM to call the form-function inside the corresponding package DLL. In this example, the functionMainMenu() in MENU.DLL is called. It presents the entry to the Klondike Computer Store from where a visitor can explore this Web application. The different options are available through submit buttons which are arranged in a menu-like fashion. This is the only way to create something like a menu in Web applications since there is no HTML tag that would allow for building a menu control. The usual way of using links with the tags <A HREF="XYZ.HTML"> </A> is not possible unless the linked HTML pages are available on the HTTP server. However, this is not the case because the HTML page is created by the form-function MainMenu()(see MENU.PRG).

The PRG code creating the menu page begins with the definition of a head line that precedes the submit buttons. The method call oHtml:header()marks the beginning of the HTML page definition and must be used as the first method call. The string passed to this method is displayed in the title bar of the Web browser when it receives the HTML page:

01:   oHtml:header( 'The Klondike Computer Shop' ) 
02: 
03:   oHtml:put( '<CENTER>' ) 
04:   oHtml:put( '<TABLE><TR><TD>' ) 
05:   oHtml:img( "images\waablue.gif", "/temp/Waablue.gif", "Waa" )
06:   oHtml:put( '</TD><TD>' ) 
07: 
08:   oHtml:put( '<B><FONT FACE="Arial,Helvetica" COLOR="#0000CC" SIZE=+4>' ) 
09:   oHtml:put( 'The Klondike<BR>Computer Shop' ) 
10:   oHtml:put( '</FONT></B>' ) 
11:   oHtml:put( '</TD></TR></TABLE>' ) 
12: 
13:   oHtml:put( '<HR>' ) 

The head line is almost completely built with the method :put() which is the most versatile method of the HTML3 object. It accepts as a parameter any HTML-formatted string and puts it into the resulting HTML page. The head line is defined as a table (<TABLE> </TABLE>) consisting of one row (<TR> </TR>) and two columns (<TD> </TD>, stands for Table Detail). The left column contains a GIF image and the right column displays a string in large, blue letters using the Arial typeface (<FONT> </FONT>).

The inclusion of images in HTML pages is easily done with the method :img()in line #5, but this line needs some additional comments. The method accepts two file names for one image file! This is required because image files are included into HTML pages as a reference, or link. The referenced file must be located on the HTTP server so that it can transfer the image to the Web browser, but the Web application must find the file as well. This, however, is not possible when WAA server and HTTP server are installed on two different computers.

The solution for this problem is that the image file is copied from a directory visible for the WAA server to a directory visible for the HTTP server by the :img() method. The first parameter specifies the name and location of the image file relative to the current directory of the package DLL (this is visible to the WAA server). The second parameter does the same but the location is relative to the document root directory of the HTTP server. Note also that the WAA server directory is specified using backslashes "\" and the HTTP server directory needs the HTML compliant forward slash "/". The image file specification for WAA and HTTP server is summarized below:

WAA server location

Relative: images\waablue.gif 
Absolute: C:\PROGRAMDATA\ALASKA\WAA1W32\SAMPLES\KLONDIKE\images\waablue.gif 

          Upper case part is equal to CurDir() and depands on where 
          the sample packages are installed. 

HTTP server location

Relative: /temp/waablue.gif 
Absolute: <DocumentRoot>/temp/waablue.gif 

          The part <DocumentRoot> is the document root directory 
          of the HTTP server and  must be specified as docroot= in 
          the gateway configuration file WAA1GATE.CFG 

If you use image files in your Web applications, you should always use the third parameter of the :img() method. This string is displayed in the Web browser if the image cannot be displayed. It gives you an immediate hint which file you should look for when checking whether the file's location is defined correctly in your PRG code or if the document root is properly set for gateway and HTTP server.

After the head line is defined, a horizontal ruler (<HR>) separates it from the following submit buttons which represent the menu. The buttons are displayed within a table just as described for the head line, so that we can focus on how to program the submit buttons:

01:   oHtml:formStart() 
02:   oHtml:setVar( "WAA_PACKAGE", "Klondike"       ) 
03:   oHtml:setVar( "WAA_FORM"   , "EnterAddress"   ) 
04:   oHtml:submitButton( "  Enter your Address   " ) 
05:   oHtml:formEnd() 
06: 
07:   oHtml:put( '<BR>' )  // line break 
08: 
09:   oHtml:formStart() 
10:   oHtml:setVar( "WAA_PACKAGE", "Klondike"     ) 
11:   oHtml:setVar( "WAA_FORM"   , "ViewShowRoom" ) 
12:   oHtml:submitButton( " Visit our Showroom  " ) 
13:   oHtml:formEnd() 
14: 
15:   oHtml:put( '<BR>' )  // line break 
16: 
17:   oHtml:formStart() 
18:   oHtml:setVar( "WAA_PACKAGE", "Klondike"        ) 
19:   oHtml:setVar( "WAA_FORM"   , "ViewOrderBasket" ) 
20:   oHtml:submitButton( "View your Computers"      ) 
21:   oHtml:formEnd() 
22: 
23:   <...> 
24: 
25:   oHtml:footer() 
26: 
27:   RETURN .T. 

The code defining control elements for user input in the HTML page must be enclosed by the method calls :formStart() and :formEnd(). Between both methods, the :setVar() method defines variables along with their values which are bound to the HTML page. The two variables WAA_PACKAGE and WAA_FORM are evaluated by the WAA server when a submit button is clicked in the Web browser. Since each submit button defines a different value for WAA_FORM (lines #3, #11 and #19), the WAA server will invoke the corresponding form-function so that a user can choose different parts of the Klondike Computer Shop from the initial menu page.

The end of the menu definition is reached when the :footer() method is executed, and this marks also the end of the HTML page. After :footer(), the form-function must return .T. (true) to tell the WAA server to transfer the assembled HTML page to the Web browser.