The description that follows shows the HTML used to display the sample window in Internet Explorer. The HTML is interspersed with comments that describe the HTML elements.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN"> <HTML> <HEAD> <TITLE> MENU</TITLE> <META NAME="Generator" CONTENT="ActiveLINC 1.1.0"> <META NAME="Author" CONTENT="Australian Center for Unisys Software. (ACUS)"> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT="Ispec MENU"> </HEAD>
The Cascading Style Sheet (CSS) definitions. These named styles are used to position each of the GUI elements taken from the SCL form. CSS allows pixel level control over where an element is to be placed, which is a big departure from the usual HTML document layout scheme. This level of control makes it possible to render an HTML form close to the original SCL form. CSS also allows the exact specification of the font to be used, and better control over color.
<STYLE TYPE="text/css">
Each of the style names is based on the field to which it is applied.
#DIVTEST {Position:Absolute;Top:188;Left:65;Width:549;z-index:2;Visibility:
Visible;font-family:’Courier New’, sans-serif;font-size:11pt;backgroundcolor:#
808080}
#DIVGUINAME {Position:Absolute;Top:432;Left:376;Width:248;z-index:2;
Visibility:Visible;font-family:’Fixedsys’, sans-serif;font-size:6pt;
color:#000000;background-color:#C0C0C0}
#DIVDA1 {Position:Absolute;Top:440;Left:62;Width:221;z-index:2;
Visibility:Visible;font-family:’COURIER NEW’, sans-serif;font-size:10pt}
#DIVSTLNAME {Position:Absolute;Top:455;Left:376;Width:249;z-index:2;
Visibility:Visible;font-family:’Fixedsys’, sans-serif;font-size:6pt;
color:#000000;background-color:#C0C0C0}
#DIVSTNNAME {Position:Absolute;Top:474;Left:375;Width:250;z-index:2;
Visibility:Visible;font-family:’Fixedsys’, sans-serif;font-size:6pt;
color:#000000;background-color:#C0C0C0}The text on the SCL form does not have an associated field, so use a dummy name for the fields.
#DUMMYNAME1 {Position:Absolute;Top:97;Left:65;Width:524;z-index:2;
Visibility:Visible;font-family:’Courier New’, sans-serif;font-size:16pt;
background-color:#808040}
#DUMMYNAME2 {Position:Absolute;Top:149;Left:179;Width:164;z-index:2;
Visibility:Visible;font-family:’Courier New’, sans-serif;font-size:20pt;fontweight:
bold}
#DUMMYNAME3 {Position:Absolute;Top:16;Left:55;Width:552;z-index:2;
Visibility:Visible;font-family:’Lucida Sans Unicode’, sans-serif;fontsize:
36pt;color:#FF0000;background-color:#0000FF}
</STYLE>
<BODY
TEXT="#000000"
BGCOLOR="#C0C0C0"This traps the click of the right mouse button, and allows you to put up your own menu, rather than the usual Internet Explorer menu.
Note: Double-click calls the Javascript function grabData, which takes the data from each element, and places it into the controller form, which is then submitted to the server.
<FORM NAME = "FORMTEST" onDblClick="return grabData()" >
This listbox is filled from a list from the host called TESTS, and was downloaded from the host. The ASP form then constructed this 'select' from the data in the list. There are no Component Enabler calls visible in the HTML sent to the client browser.
<select name="INTEST" size="13" ID = "DIVTEST"><OPTION value ="T0010">Teach Screen testing</OPTION><OPTION value ="T0020">Zero Suppress testing</OPTION><OPTION value ="T0030">Various Numeric testing</OPTION><OPTION value ="T0040">SwitchTo testing</OPTION><OPTION value ="T0050">Screen with no input</OPTION><OPTION value ="T0060">Error and Attention Messages</OPTION><OPTION value ="T0070">Button testing</OPTION><OPTION value ="T0080">Dynamic Listbox testing</OPTION><OPTION value ="T0081">Huge dynamic listbox CAUTION</OPTION><OPTION value ="T0082">Multiple buffer dynamic listbox</ OPTION><OPTION value ="T0090">Colour test. Do not modify using PCE</OPTION><OPTION value ="T0100">Test Pattern. Do not modify using PCE</OPTION><OPTION value ="T0110">Cursor positioning.</OPTION><OPTION value ="T0120">Busy screen. May not display</OPTION><OPTION value ="T0130">Kanji Screen. Use with kanji windows only</ OPTION><OPTION value ="T0140">Static listbox test.</OPTION><OPTION value ="T0150">Lots of data. May not display</OPTION><OPTION value ="T0160">Run Reports.< OPTION><OPTION value ="T0170">Clear.When and SP test.</OPTION></select></FORM></DIV>
Here is a simple field.
<DIV ID="NDIVGUINAME"> <FORM NAME = "FORMGUINAME" onSubmit="return grabData()" >
Note: The value of the field appears to be hard coded. In fact, it is written this way by the ASP Form on the server. There are no Component Enabler calls visible in the HTML sent to the client browser.
<INPUT type=text name= "INGUINAME" size=31 maxlength=31 value= "Y" ID = "DIVGUINAME"></FORM> </DIV> <DIV ID="NDIVDA1"> <FORM NAME = "FORMDA1" onSubmit="return grabData()"> <INPUT type=HIDDEN name="INDUMMYDA1" value= "0" > <INPUT type=BUTTON name= "INDA1" value= "Numeric Button"ID = "DIVDA1" onClick="INDUMMYDA1.value = ’1’;grabData()"></FORM> </DIV> <DIV ID="NDIVSTLNAME"> <FORM NAME = "FORMSTLNAME" onSubmit="return grabData()" > <INPUT type=text name= "INSTLNAME" size=31 maxlength=31 value= "NOFORM" ID = "DIVSTLNAME"></FORM> </DIV> <DIV ID="NDIVSTNNAME"> <FORM NAME = "FORMSTNNAME" onSubmit="return grabData()" > <INPUT type=text name= "INSTNNAME" size=31 maxlength=31 value= "RAT2178890530/1" ID = "DIVSTNNAME"></FORM> </DIV>
This shows how to render text painted onto an SCL form. It also shows usage inquiry fields in the same way, as they are not transmitted back to the server, and cannot be altered.
<DIV ID ="DUMMYNAME1"> This is the primary language menu screen </DIV> <DIV ID ="DUMMYNAME2"> Enter Test </DIV> <DIV ID ="DUMMYNAME3"> DJW - DW TEST SYSTEM </DIV>
This line loads the Javascript library file (.js) that contains the code for the right-click context menus.
<SCRIPT LANGUAGE="JavaScript1.2" SRC="../menuAL.js"></SCRIPT>
The following lines show various routines to help manage the HTML Form. These effectively make the HTML Forms into Dynamic HTML Forms (DHTML).
<SCRIPT LANGUAGE="JavaScript">
This function copies data from all the elements to the controller form, which is then submitted to the host.
//
/**********************************
Copy Data to Submittable Form
**********************************/
// Copy relevant form data to hidden form fields; invoked
// by the ’controller’ form’s onSubmit event handler just
// before the form is submitted.
// globals for browser version branching
function grabData() {First, you need to perform some 'browser sniffing'. Once you know the browser, you know which hierarchical object model to use to find the data.
var sourceForm
var hiddenForm = document.controller
var Ver4 = parseInt(navigator.appVersion) >= 4
var IE4 = ((navigator.userAgent.indexOf("MSIE") != -1) && Ver4)
sourceForm = document.FORMTEST
hiddenForm.TEST.value = getSelectionListValue(sourceForm.INTEST)
sourceForm = document.FORMGUINAME
hiddenForm.GUINAME.value = sourceForm.INGUINAME.value
sourceForm = document.FORMDA1
hiddenForm.DA1.value = sourceForm.INDUMMYDA1.value
sourceForm = document.FORMSTLNAME
hiddenForm.STLNAME.value = sourceForm.INSTLNAME.value
sourceForm = document.FORMSTNNAME
hiddenForm.STNNAME.value = sourceForm.INSTNNAME.value
document.controller.submit()
return false
}The next lines show a helper function to get the selected element in a list.
function getSelectionListValue(list)
{
var listValue = "";
if (list.selectedIndex != -1)
{
listValue = list.options[list.selectedIndex].value;
}
return (listValue);
}The next lines show a helper function to get the value of a single button or a button group.
function getButtonValue(buttn)
{
if(buttn.type == "checkbox" || buttn.type == "radio") //handle single buttons.
if(buttn.checked == true)
return buttn.value;
else
return "";
for (i=0;i<buttn.length;i++)
{ //handle button groups
if (buttn[i].checked==true)
{
return buttn[i].value;
}
}
return "";
}The next lines build the right-click context menus.
///////////////////////////////
// Right-click context menus //
///////////////////////////////
function loadMenus()
{
//Dynamic Menus
//inserted menu items from ASPMenuItemsLang1.txt
window.myMenu = new Menu();
// Comments should begin with a double slash.
// The following is inserted into each ASP page to provide the ’right click’ or
// context menus. You should alter this file for different languages, and for adding
// extra menu items should you need.
//
// The following is inserted into the LoadMenus function in the ASP pages.
//
// The file must be re-named for each language. The name of the file should be
// ’ASPMenuItemsLang<lang number>.txt’ where <lang number> is the
// language number between 1 and 15.
// Each of these files should reside in the same directory as ALGAE.EXE or
// LDADEV.EXE.
//
// If you do not want these context menus, simply remove the file from the
// directory.
//
// Each line below must have a valid JavaScript syntax, otherwise there will be
// errors upon loading of the ASP page. Note that all comments are also included with
// each file, so you may wish to remove the comments from this file
// when you are confident of its format.
myMenu.addMenuItem("Transmit","grabData()");
myMenu.addMenuItem("Select Ispec",
"top.window.location=’selectIspec.asp’");
myMenu.addMenuItem("Print", "top.window.print()");
myMenu.addMenuItem("View Errors", "errorWindow()");
myMenu.addMenuItem("Console","top.window.location=’console.html’");
myMenu.addMenuItem("Change Language","top.window.location=’language.asp’");
myMenu.addMenuItem("Close Session","top.window.location=’abandon.asp’");
//end of insertion of menu items from ASPMenuItemsLang1.txt
myMenu.disableDrag = true;
myMenu.writeMenus();
}This function traps mouse clicks in IE and shows the context menu when it is a right-click.
function mouseDown(e)
{
if (e.which == 3)
{
window.showMenu(window.myMenu);
return false
}
}This function is called on a right-click in IE, and brings up the context menu.
function context()
{
window.showMenu(window.myMenu);
return false
}This function is called when the page has finished loading.
function onLoad() {First, load the context menus.
loadMenus();
Set the status line on the browser, to the status from Agile Business Suite. In this example, this is blank because there were multiple errors. If there are no errors, or one error, the status line is used to display it.
self.status="";
If there are multiple errors, the form opens another ASP Form in another browser window, to show the errors created by the last transaction.
var winOpts=’width=950,toolbar=no,location=no,directories=no,status=yes,scrollbars =yes, menubar=no, resizable=yes’;; ErrorWindow=window.open(’multiErr.asp’,’errorWin’,winOpts)
Next, after some ‘browser sniffing’, put the cursor on the default cursor field, or the first editable object.
var sourceForm
var Ver4 = parseInt(navigator.appVersion) >= 4
sourceForm = document.FORMTEST
sourceForm.INTEST.focus()
}Next, call the onLoad function for IE, once the page is properly loaded. Calling this sooner could result in an IE crash.
if (document.all)
{
onLoad()
}
//-->
</SCRIPT>
</BODY>
</HTML>