e2gLite Free Expert System Shell - Version 3.x Javascript Interface

[Home: Demos and Tutorials][e2gLite Mini-Course Index]

Building and Using Expert Systems: a Mini-Course Introducing the e2gLite Expert System Shell

Module 8: Using the e2gLite Version 3.x Javascript interface to dynamically control HTML output

Java applets like e2gLite cannot interact directly with the Web page in which they execute. It is, however, possible for an applet to call functions in client-side Javascript programs and for these scripts to call methods in the applet. Since Javascript can load Web pages and can write Web page content, interaction between e2gLite knowledge bases and the HTML defining a Web page is possible, permitting dynamic generation of HTML output as an expert system consultation progresses. As is almost always the case with Web implementations beyond the most basic, there are some potential hazards to consider before employing this new e2gLite Version 3.x capability.

Considerations when using the e2gLite Version 3.x Javascript interface

Browser limitations: Versions of e2gLite before 3.0 will work with most versions of most browsers that are able to run Java applets. Expert system applications that do not use the Javascript interface should still run with e2gLite Version 3.x on most browsers. Java applets cannot interact with Javascript code in versions of Netscape or Internet Explorer before version 4, any Internet Explorer versions running on the Apple MacIntosh or any version of the Opera browser. An excellent summary of these limitations and software for testing browsers is available at: http://kofler.dot.at/browsersupport/jsapplet.html. If you want to develop an expert system application that will run on almost any browser, you should avoid the Javascript interface.

Browser incompatibilities and Javascript: To use the Javascript interface you must be familiar with Javascript programming and the interaction of Javascript with the elements of a Web page -- usually described by the Document Object Model (DOM). There are some subtle, not well documented and potentially frustrating differences between the Netscape and Internet Explorer implementations of Javascript (JScript in Internet Explorer) and the DOM. Some of these issues are discussed in this documentation, but if you don't have (or have access to) Javascript expertise, or have a low tolerance for pain, working with the Javascript interface might not be for you.

Security considerations: The general capability to interface Java with Javascript code has played a part in several security exploits described on the Web. It is possible that future browser versions could restrict this capability and render e2gLite applications using the Javascript interface unusable. If you are concerned with security issues, the Java/Javascript interface was named "LiveConnect" (one word) by Netscape (its developer) and Googling "LiveConnect security" or "Java Javascript security" should get you to some worthwhile discussion of the issues.

Constraints imposed on the Web page format by the Javascript interface: To use the e2gLite Version 3.x Javascript interface, the <applet> tags that cause the e2gLite applet to be incorporated in a Web page and the Javascript program with which it interacts should be in the same HTML file, and the page defined by this file must be persistent: it has to stay in the browser, unchanged, throughout the consultation. Since the objective of the interface is the dynamic loading or generation of HTML output, this means at least two HTML files must be present at the same time. This is accomplished by using frames. One frame contains the <applet> tags that invoke and display the applet along with the Javascript program. Another frame (or frames) display(s) the dynamic HTML output. A new (optional) <PARAMETER> is added to the <applet> tags that names the Javascript function to be called each time the user of the expert system presses a button displayed by the e2gLite applet. A number representing the button that has been pressed is passed to this function. A series of public methods in the e2gLite applet may then be called from the Javascript code. These functions provide access to information about the current state of the consultation including the identity of the current goal attribute and the names, values and confidence factors associated with each of the attributes in the knowledge base for which a value has been determined.

Building applications that use the Version 3.x Javascript interface

A simplified wine selector will be used to demonstrate how the Javascript interface is applied to synchronize access to reference material or to produce dynamic HTML output. Click on the following link to open the demonstration program in a new browser window. Run the application, then return to this page for a discussion of each of its components:

Wine selection demonstration

The components of this application include the following. They all reside in the same subdirectory in this example:

winepg.htm -- defines the application's frame structure.
wine3.htm -- the document displayed in the left pane that declares the e2gLite applet and provides the Javascript code.
wineref.htm -- the reference material displayed in the right pane. The reference document includes anchor tags that permit the document's position to be synchronized with the e2gLite applet's current state.
wine.kb -- the e2gLite knowledge base. No changes to the knowledge base are required to use the Javascript interface.

Next, we'll examine each of these components to introduce the Javascript interface:

winepg.htm: This is a standard frame definition document. Note that the frame that is to contain the dynamic output must be named: _infowin is the name in this example.

<html> <head><title>e2gLite v.3 Wine Demo</title></head> <frameset cols="450,*" frameborder=0 framespacing=0 border=0> <frame name="_applet" src="wine3.htm" marginheight=0 marginwidth=0> <frame name="_infowin" src="wineref.htm" marginheight=5 marginwidth=5> </frameset> </html>

wine3.htm: The following listing describes the e2gLite applet and causes it to be loaded. It also provides the Javascript code that will interact with e2gLite. Bold-faced lines are discussed in more detail following the listing:

<html> <head><title>Basic Wine Selection Expert System</title></head> <body bgcolor="#900000"> <applet code="e2glite.e2g.class" archive="e2glite.jar" name="e2g" width=445 height=300 mayscript> <param name="KBURL" value="wine.kb"> <param name="APPTITLE" value="Budget Wine Selector"> <param name="APPSUBTITLE" value="an eXpertise2Go Demonstration"> <param name="BGCOLOR" value="#900000"> <param name="TITLECOLOR" value="#ffffff"> <param name="PROMPTCOLOR" value="#ffffff"> <param name="STARTBUTTON" value="Help me choose a wine"> <param name="DEBUG" value="FALSE"> <param name="JSFUNCTION" value="buttonPush"> Java-enabled browser required </applet> <script language="Javascript"> function buttonPush(buttonNumber) { if (buttonNumber == 1 || buttonNumber == 6) { //Start or restart window.open("wineref.htm#TOP","_infowin"); //Reposition reference } else if (buttonNumber == 2) { goalIx = document.e2g.getGoalAttr(); if (goalIx == 0) { //Finished parent._infowin.document.open("text/html"); //NOTE: Be careful not to break string literals (next statement) between lines parent._infowin.document.write("<html><body bgcolor='#900000'>" + "<font size='5' color='white'><center>Thanks for visiting " + new Date() + "<p>Please shop at Charlie's Budget Wines</center></font></body></html>"); parent._infowin.document.close(); } else { goalName = document.e2g.getAttrName(goalIx); if (goalName == "the preferred body") { window.open("wineref.htm#BODY","_infowin"); } else if (goalName == "the preferred taste") { window.open("wineref.htm#DRYNESS","_infowin"); } } } } </script> </body> </html>

Here are some considerations in the above code that differentiate an application using the Javascript interface from other e2gLite applications:

The <applet> tag: The tag must include a name parameter and the mayscript property. The name provides a name for the applet object that is used to reference methods in the applet. The mayscript property gives the applet (e2gLite) permission to access the Javascript code. The archive= parameter provides a path to the location of the e2glite.jar file. In this example it is in the same subdirectory as the remaining components, so only the name is necessary.
The JSFUNCTION applet parameter: The value of this new parameter is the name of the Javascript function that will be called by e2gLite after each button click is processed. If this parameter is included as an <applet> parameter, a function with this name must be included in the <script>. In the wine selection application, we've named this function buttonPush.

The JSFUNCTION function: The script must include the buttonPush( ) function since it was named in the JSFUNCTION applet parameter. Note that the function has one argument (buttonNumber). You may pick your own name for the argument, but there must always be exactly one argument, and e2gLite will always provide a numeric value for this argument when it calls the function. The Javascript function named in the JSFUNCTION parameter is called with the button code after the action requested by clicking a button has been completed by e2gLite. Here are the button code numbers associated with each button pressed:

Button Codes Provided by e2gLite

Button Clicked Value

Start the consultation * 1

Submit your response 2

Why Ask? 3

Return (from Why Ask?) 4

Explain 5

Restart 6

* May be renamed by the STARTBUTTON applet parameter.
Other buttons may be renamed by knowledge base TRANSLATE commands.

Displaying or repositioning an existing HTML document: The if statement in the buttonPush( ) Javascript function first tests to see if the "Start the consultation" or "Restart" buttons have been clicked, indicated by e2gLite providing a buttonNumber value of 1 or 6 when calling the function. Javascript uses window.open(URL,windowName) to load a Web page into a browser window, creating the window if it does not already exist. The example's URL (wineref.htm#TOP) simply repositions the wineref.htm document already loaded in the window named _infowin (by the winepg.htm frame definition) at the TOP anchor tag.
Invoking an e2gLite method: If the "Submit your response" button (button number 2) has been clicked, the Javascript program first checks to see if the consultation is finished. This is accomplished by using the e2gLite public method getGoalAttr( ) that returns the index of the the current goal/subgoal attribute. If this value is 0, the inference engine has stopped searching for attribute values and the consultation is finished.
The statement: goalIx = document.e2g.getGoalAttr( ) invokes the getGoalAttr( ) function that is a method in the applet named e2g (by the <applet> tag) that is defined in the current document.
If the consultation is finished, Javascript's capability for directly creating an HTML document in a window is employed to output a final message. To do this you must open a window for output, write text representing an HTML document to the window, then close it. To use these Javascript methods (open( ), write( ) and close( )), the complete Document Object Model identification (the "fully qualified name") of the method (for example: parent._infowin.document.open( )) must be specified. Internet Explorer is less stringent than Netscape about this identification, so testing your applications with both browsers is advised.

Button Codes Provided by e2gLite
Button Clicked	Value
Start the consultation *	1
Submit your response	2
Why Ask?	3
Return (from Why Ask?)	4
Explain	5
Restart	6
* May be renamed by the STARTBUTTON applet parameter. Other buttons may be renamed by knowledge base TRANSLATE commands.

Additional e2gLite methods: If the consultation has not ended, the buttonPush( ) Javascript function checks to see if the current goal is one for which some descriptive information in wineref.htm should be emphasized by repositioning the document displayed in the right pane. The name of the current goal is obtained from its index with the method: getAttrName(goalIx). If the name of the goal is "the preferred body" or "the preferred taste" the Javascript window.open( ) method is again used to position the document in the _infowin pane. The following e2gLite methods are accessible from Javascript:

e2gLite Methods Accessible from Javascript

Method Name Value Returned and Value Type Arguments and Argument Types

getAttrCF(attrName,valIx) (Float) Confidence factor associated with specific instance of named attribute (0.0 if doesn't exist or net yet determined) (String) attrName: name of attribute
(Integer) valIx: instance (between 1 and max values) of named attribute to allow for multi-valued attributes

getAttrCount( ) (Integer) Number of attributes defined in the knowledge base

getAttrIx(attrName,valIx) (Integer) Index of attribute associated with specific instance of named attribute (0 if doesn't exist) (String) attrName: name of attribute
(Integer) valIx: instance (between 1 and max values) of named attribute to allow for multi-valued attributes

getAttrName(attrIx) (String) Name of attribute (zero length string if doesn't exist) (Integer) attrIx: index of attribute

getAttrValue(attrIx) (String) String representation of current value (0 length string if doesn't exist or not yet determined) (Integer) attrIx: index of attribute

getAttrValue(attrName,valIx) (String) String representation of current value (0 length string if doesn't exist or not yet determined) (String) attrName: name of attribute
(Integer) valIx: instance (between 1 and max values) of named attribute to allow for multi-valued attributes

getMaxValues(attrName) (Integer) Number of values (instances) allowed for named attribute (0 if doesn't exist) (String) attrName: name of attribute

getGoalAttr( ) (Integer) Index of current goal or subgoal attribute (0 if inferencing is finished)

Note 1: e2gLite attributes are identified with a name and index number that begins at 1. Every attribute value has a unique index, but all values of multivalued attributes are stored with the same name.
Note 2: A value for an attribute will not be returned until the value is known with a confidence factor at least equal to the minimum CF.

e2gLite Methods Accessible from Javascript
Method Name	Value Returned and Value Type	Arguments and Argument Types
getAttrCF(attrName,valIx)	(Float) Confidence factor associated with specific instance of named attribute (0.0 if doesn't exist or net yet determined)	(String) attrName: name of attribute (Integer) valIx: instance (between 1 and max values) of named attribute to allow for multi-valued attributes
getAttrCount( )	(Integer) Number of attributes defined in the knowledge base
getAttrIx(attrName,valIx)	(Integer) Index of attribute associated with specific instance of named attribute (0 if doesn't exist)	(String) attrName: name of attribute (Integer) valIx: instance (between 1 and max values) of named attribute to allow for multi-valued attributes
getAttrName(attrIx)	(String) Name of attribute (zero length string if doesn't exist)	(Integer) attrIx: index of attribute
getAttrValue(attrIx)	(String) String representation of current value (0 length string if doesn't exist or not yet determined)	(Integer) attrIx: index of attribute
getAttrValue(attrName,valIx)	(String) String representation of current value (0 length string if doesn't exist or not yet determined)	(String) attrName: name of attribute (Integer) valIx: instance (between 1 and max values) of named attribute to allow for multi-valued attributes
getMaxValues(attrName)	(Integer) Number of values (instances) allowed for named attribute (0 if doesn't exist)	(String) attrName: name of attribute
getGoalAttr( )	(Integer) Index of current goal or subgoal attribute (0 if inferencing is finished)
Note 1: e2gLite attributes are identified with a name and index number that begins at 1. Every attribute value has a unique index, but all values of multivalued attributes are stored with the same name. Note 2: A value for an attribute will not be returned until the value is known with a confidence factor at least equal to the minimum CF.

wineref.htm: This standard HTML document won't be shown here because of its length, but you may examine the HTML code with your browser's "view source" capability when you run the wine selection demonstration. Note the inclusion of anchor tags of the form:

<a name="BODY">

that are used by the Javascript buttonPush( ) function to reposition the reference information.

wine.kb: A standard e2gLite knowledge base. To examine or download the knowledge base click here:

Basic e2gLite wine selection knowledge base

e2gLite public functions demonstration program: An example that provides a more comprehensive demonstration of the public methods available in e2gLite is accessible from the following link. The example will run in a new window. It is an implementation of the Graduate School Admissions knowledge base (acessible from module 1) that displays the state of each of the attributes after each user action.

e2gLite public methods demonstration

Using your browser's "View Source" capability in the browser's left pane after loading the example will let you examine the Javascript code that supports the demonstration.

[Index][Module 1][Module 2][Module 3][Module 4][Module 5][Module 6][Module 7][Reference]

	Browser limitations: Versions of e2gLite before 3.0 will work with most versions of most browsers that are able to run Java applets. Expert system applications that do not use the Javascript interface should still run with e2gLite Version 3.x on most browsers. Java applets cannot interact with Javascript code in versions of Netscape or Internet Explorer before version 4, any Internet Explorer versions running on the Apple MacIntosh or any version of the Opera browser. An excellent summary of these limitations and software for testing browsers is available at: http://kofler.dot.at/browsersupport/jsapplet.html. If you want to develop an expert system application that will run on almost any browser, you should avoid the Javascript interface.
	Browser incompatibilities and Javascript: To use the Javascript interface you must be familiar with Javascript programming and the interaction of Javascript with the elements of a Web page -- usually described by the Document Object Model (DOM). There are some subtle, not well documented and potentially frustrating differences between the Netscape and Internet Explorer implementations of Javascript (JScript in Internet Explorer) and the DOM. Some of these issues are discussed in this documentation, but if you don't have (or have access to) Javascript expertise, or have a low tolerance for pain, working with the Javascript interface might not be for you.
	Security considerations: The general capability to interface Java with Javascript code has played a part in several security exploits described on the Web. It is possible that future browser versions could restrict this capability and render e2gLite applications using the Javascript interface unusable. If you are concerned with security issues, the Java/Javascript interface was named "LiveConnect" (one word) by Netscape (its developer) and Googling "LiveConnect security" or "Java Javascript security" should get you to some worthwhile discussion of the issues.
	Constraints imposed on the Web page format by the Javascript interface: To use the e2gLite Version 3.x Javascript interface, the <applet> tags that cause the e2gLite applet to be incorporated in a Web page and the Javascript program with which it interacts should be in the same HTML file, and the page defined by this file must be persistent: it has to stay in the browser, unchanged, throughout the consultation. Since the objective of the interface is the dynamic loading or generation of HTML output, this means at least two HTML files must be present at the same time. This is accomplished by using frames. One frame contains the <applet> tags that invoke and display the applet along with the Javascript program. Another frame (or frames) display(s) the dynamic HTML output. A new (optional) <PARAMETER> is added to the <applet> tags that names the Javascript function to be called each time the user of the expert system presses a button displayed by the e2gLite applet. A number representing the button that has been pressed is passed to this function. A series of public methods in the e2gLite applet may then be called from the Javascript code. These functions provide access to information about the current state of the consultation including the identity of the current goal attribute and the names, values and confidence factors associated with each of the attributes in the knowledge base for which a value has been determined.