The best method of ensuring that the page layout is followed is to make a copy of the SCTerm.html. You may also want to refer to and/or copy the CliSamp.html file, described in the Sample Application section.
Note: Future Versions of Inventu Viewer may require minor changes to these framework requirements. Any such changes will be documented in the release notes of that version.
Using the SCTerm.html file as the source, here is a description of the key elements required for the emulation to function in the browser environment:
Top Level Javascript Variable Definitions
These provide layout values for where the emulation should appear within the browser. The emulation is delivered inside two IFRAME objects, and the location and zIndex of these is controlled with these variables, a sample of which follows:
<script language="javascript">
var SCZIndex=0; // Base zIndex for SCTerm--top-most used is SCZIndex+60
var SCHAdj=30; // height to adjust the emulator frame--increase to shorten
var SCWAdj=2; // width to adjust the emulator frame--increase to decrease width
var SCEmTop=0; // top location in the browser window for the emulator frame
var SCEmLeft=0; // left location in the browser window for the emulator frame
</script>
Required Javascript File Links
These provide the client-side terminal emulation support and must be included at the top-level of the browser page layout. Note that each version may change the ?ver query string, so that when the user refreshes the browser, fresh javascript will be loaded without worrying about clearing the cache.
<script type="text/javascript" src="FVTerm-min.js?ver=2016ES"></script>
<script type="text/javascript" src="SCKeyDefs.js?ver=2016ES"></script>
<script type="text/javascript" src="SCHSDefs.js?ver=2016EB"></script>
<script type="text/javascript" src="Macros/Macros-min.js?ver=2016ES"></script>
Top-Level Initialization Javascript
More initialization and control variables--(copy directly from SCTerm.html). These are maintained in the top-level HTML page in order to provide customization of the environment and how it functions.
<script language="javascript" type="text/javascript">
var profileReady = false, // if hard-coding profile info set to true
termHost = "default", // Can be different for specific host
termKCOpt = true, // Controls inclusion of the ActiveX control
topHasFocus = true,
fldUpgrades = false,
soapServer = urlRoot(),
fvmCtl;
// prevent back-button...
histFix(window, document);
// Box model adjustment
if (is_ie6)
{
SCOuterAdj = 0;
SCInnerAdj = 4;
}
UpgradeCookies();
EmCtlInit(); // Initialize the emulation control environment
SCTermSvcInit(); // And the WebService calls
SCHeaderEmit(document);
LoadHSDefs();
fvmCtl = new flow.macs.FVMControl(main); // macro support
if (is_touch &&
(typeof (window.orientationchange) != 'undefined'))
window.orientationchange = function (e) { RunResize('orientationchange'); };
else
window.onresize = function (e) { RunResize('onresize'); };
</script>
Body Tag with Events
The body tag is used to manage certain events--these don't necessarily all have to be called. For example, if you set the size of the window, and want the emulation to not rescale based on any resizing of the outer frame, you can omit the onresize() event definition.
<body onload="SCCtlStart()"
onresize="SaveWindow();ResizeTermW();"
onkeydown="SCKeyDown(null,-1,event)"
onbeforeunload="CheckUnload()"
onunload="EndDoc()"
style="overflow: hidden;"
leftmargin="2" rightmargin="2" topmargin="0" bgcolor="Silver">
SaveWindow: stores current settings in cookies for next load
ResizeTermW(): will resize the terminal emulation IFRAME to match the browser window, rescaling fonts if new optimal font size is appropriate
SCKeyDown(): if focus is "lost" it directs keys to the emulator (optional!)
CheckUnload(): if the browser is being closed or another top-level page, warn about host connection
EndDoc(): if unloaded, terminate host connection
Emulator IFRAME
The Emulator IFRAME tag is the container for the terminal emulation session. Note that this is maintained in the control javascript under the name "main" and the style under "mainSty". By understanding the value mainSty is a pointer to the emulation iFrames framelement style, developers can control the visibility of the emulation frame (see the Sample Application for script that controls the emulation frame). Style position settings are changed by the controlling javascript the first time the iFrame is displayed.
The src attribute points to the provided Inventu Viewer welcome page, but customers are welcome to point to their own welcome page with appropriate branding and help/news appropriate to the emulation users. The application=yes attribute is for compatibility in HTA environments. Other settings should be left alone and copied as-is from SCTerm.html.
| <iframe |
| name="termW" id="termW" |
| src="welcome.htm" |
| onfocus="EmActive(1)" onblur="EmActive(0)" |
| application="yes" |
| scrolling="no" width="100%" height="95%" marginwidth="0" marginheight="0" |
| hspace="0" vspace="0" scrolling="auto" class="ST0" |
| style="position:absolute;left:0;top:0;border-style: solid; border-width: 2; border-color: Navy; margin: 0; padding: 0;"> |
| </iframe> |
Miscellaneous IFRAME and SPAN Objects
These elements are utilized to provide information, error reporting, preference settings and so on. They should be included as with the other elements contained in the top-level BODY tag.
| <span id="info" style="BORDER-RIGHT: silver thin outset; BORDER-TOP: silver thin outset; FONT-WEIGHT: bold; Z-INDEX: -1; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: silver thin outset; COLOR: #000099; BORDER-BOTTOM: silver thin outset; FONT-FAMILY: Arial; POSITION: absolute; TOP: 2000px; BACKGROUND-COLOR: #cccccc"> |
| </span> |
| <span id="keyErr" style="background-color:red;color:black; FONT-WEIGHT: bold; Z-INDEX: -1; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: silver thin outset; COLOR: #000099; BORDER-BOTTOM: silver thin outset; FONT-FAMILY: Arial; POSITION: absolute; TOP: 2000px;"> |
| </span> |
| <iframe src="" application="yes" name="Settings" id="Settings" scrolling="no" class="modwin" |
| style="position:absolute;visibility:hidden;z-index:-1:width:2;height:3;Left:0;Top:50"> |
| </iframe> |
