Web Development

JavaScript and VBScript are interpreted, scripting languages that let you embed simple programs into Web pages. JavaScript/VBScript programs are embedded directly within the HTML document. When the browser loads the HTML document, the programs are also loaded.

With minimal programming, you can use JavaScript/VBScript to create dynamic Web pages that perform validation, and display popup prompts and dialogs to users.

Warning: Some browser programs do not support JavaScript or VBScript, while those browser programs that offer support also allow users to disable it. If support is unavailable, the Web application can be affected as follows:

• Data validation that Panther performs with JavaScript does not work.

• Action list box items located in grids are not displayed as hyperlinks.

• Custom JavaScript/VBScript that is embedded in an application does not execute.

• Embedded Java applets do not execute.

Browser Events

The events that can occur when a user is viewing an HTML document provide places for triggering a JavaScript or VBScript function. For example, the onSubmit event is triggered when a user submits an HTML form back to the server.

Screens and widgets provide Browser Event properties as hooks for attaching JavaScript or VBScript functions. Each event property corresponds to an event type. For example, you can specify a unction for a screen's On Submit property; whenever the form is submitted back to the server, the onSubmit event occurs and triggers execution of the attached function. Similarly, you can specify a function for a text widget's On Change property; the function executes whenever an onChange event occurs to the widget.

A Browser Event property can specify one of the functions that are defined in the screen's JavaScript or VBScript property; or it can contain a JavaScript or VBScript statement.

Some events can cause automatic generation of JavaScript for certain property settings. For example, if a widget's Convert Case property is set to Upper, Panther generates the appropriate JavaScript in order to implement the desired conversion when an onChange event occurs–for example, the user clicks out of the field. Panther supports all JavaScript and VBScript events, associating them with screen and widget properties under the Browser Events category.

JavaScript Event Properties

Screens have these browser event properties:

On Load

The HTML document is loaded in the browser.

On Submit

The user clicks a push button that submits the document back to the server. This event is triggered before the form is actually submitted.

On Unload

The user exits or unloads the HTML document from the browser.

Browser event properties vary according to a widget's type. This section lists the complete set of widget events:

On Blur

Focus is removed from a specific widget within a form.

On Change

The user switches focus away from the field and the field is modified. This event is triggered only after the user completes entering or modifying information.

On Click

The user clicks the mouse button on a hyperlink, a push button, a check box, or any other selection widget.

Note: For push buttons, do not specify both a pixmap and an On Click event. In HTML specifications, the image takes precedence, making the On Click event unavailable.

On Focus

The user clicks the mouse or presses TAB to activate, or bring focus to, a specific widget within the form.

On MouseOver

The mouse pointer moves over an area, such as a hyperlink. For example, this event can be used to display a hyperlink's URL in the browser status line when the mouse moves over it.

On MouseOut

The mouse pointer leaves an area (in client-side image maps) or a link. For example, if the mouse moves from one area into another in a client-side image map, the onMouseOut event occurs for the first area, followed by the onMouse Over for the second area.

If the JavaScript program sets text on the status line, the program must return true.

On Select

Text within a text widget is selected.

For the events listed under Browser Options, specify any JavaScript or VBScript function that is defined for the screen or one of its widgets in its JavaScript/ VBScript property or include a JavaScript/VBScript statement. Simply select the desired event property and enter either the name of the function and its parameters, or the text of the statement.

Writing JavaScript and VBScript Functions

You can include your own JavaScript or VBScript function in the HTML document by entering the function in the JavaScript/VBScript property for the screen or a widget. After a function is entered into the property, you can specify that function for any browser event property for the screen and its widgets.

Notes: The functions that you write for a screen and individual widgets is equally accessible to all widget and screen event properties.

How to Define a JavaScript or VBScript Function

1. Select the JavaScript/VBScript property for the screen or one of its widgets.
   The text dialog opens where you can write functions:
   

2. Enter or edit data with these actions:

   • Type the function directly into the dialog box window.

   • Choose Editor to invoke your local editor and enter the desired data.

   • Choose Read File to import an external file.

3. Choose OK to accept your changes.

   Note: Panther does not check syntax in JavaScript statements and functions.

For example, the JavaScript property can contain the num_links function, which displays the number of hyperlinks (<A HREF=>) in the HTML document:

function num_links()

msgtext="Number of links in document: " +
	document.links.length;
return window.confirm(msgtext)

If a widget's Export to HTML property is set to Yes, an HTML tag is generated for the widget, even if the widget is hidden at runtime. This ensures that a JavaScript or VBScript function can reference the widget and access or manipulate its value in a Web browser.

Accessing Widgets in JavaScript and VBScript

The naming conversion from Panther widget names to HTML field names prepends text in order to uniquely identify each widget's occurrence and purpose. The html_name property provides read-only access to the converted name. You can include that value in JavaScript or VBScript functions using the {{variable->html_name}} syntax.

If the html_name property cannot be used, the following table shows Panther's HTML naming conventions for named and unnamed widget types. If a widget is unnamed, Panther uses its field number in the HTML tag name. (For information about how widgets are numbered, refer to "Field Numbers" in Application Development Guide).

The following section of a JavaScript function assigns time value to three widgets. This is how the function appears in the editor using the html_name property:

function showtime
{
// Assigning the time values
	document.forms[0].{{face_1->html_name}}.value=timeValue
	document.forms[0].{{face_2->html_name}}.value=londonValue
	document.forms[0].{{face_3->html_name}}.value=tokyoValue
}

In the generated HTML, the HTML name is substituted for the value inside the braces, and the function is output as follows:

function showtime
{
// Assigning the time values
	document.forms[0].i_1_face_1.value=timeValue
	document.forms[0].i_1_face_2.value=londonValue
	document.forms[0].i_1_face_3.value=tokyoValue
}

Panther automatically generates JavaScript to implement the Status Line Text property for widgets and screens, and to create hyperlinks for action list boxes in a grid widget. JavaScript is also automatically generated when certain input properties are set as shown in the following table, in order to validate or convert data:

When a widget has one of these properties set, the entry in that widget is validated whenever an onChange or onBlur event occurs–for example, the user mouse clicks out of the field. Invalid data causes an error message to display. If data is to be converted, the conversion automatically takes place.

A widget that has JavaScript Event property settings might have two JavaScript functions triggered for the same event. In this case, the automatic JavaScript executes first, followed by the function or statement that the property specifies. For example, a widget might have its Convert Case property set to Upper and its On Change property set to a JavaScript function. In this case, the onChange event triggers two JavaScript functions for the same widget–first, the function that Panther automatically generates for Convert Case, then the On Change function.