Web Development

Chapter 8 . Customizing HTML Generation

Application screens are stored in Panther's binary format. When an HTTP server requests a screen, Panther opens that screen, performs the processing specified for it, generates HTML or downloads Java for the screen, and returns the data to the HTTP server. This chapter describes how the HTML for the screen can be customized for your application.

A standard HTML document is composed of two main sections:

The HEAD element containing information about the document itself.
The BODY element containing the document content.

Each of these main elements can be composed of elements, each with its own use and format. All elements are identified by a tag or pair of tags. Each tag is enclosed by angle brackets–for example, <HR>. All elements begin with a start tag; and most elements also have an end tag, which appears at the element's end. To differentiate the two tags, the end tag is prepended with a slash–for example, </BODY>.

When Panther generates HTML for a screen, it creates an HTML FORM element to contain the screen's content. FORM elements, according to HTML standards, are located within a BODY element.

Within the FORM element, Panther creates a series of tables containing INPUT elements corresponding to the widgets. The tables maintain widget positions in the HTML document. Otherwise, the structure of the screen is lost because HTML has no other method to define positioning information.

Although Panther automatically translates each object in a Panther screen into its appropriate HTML element, you can customize the HTML generation. This chapter describes how to perform these tasks:

Add HTML markup for screens and widgets in the Custom HTML properties.
Use a pre-existing HTML document to provide the HTML structure.

In addition, some HTML elements have no Panther equivalent. This chapter describes how to create those elements in a Web application.

Create common HTML elements, such as hyperlinks and headings.
Use graphics and image maps in your Web application.
Use Panther screens within HTML frames.
Use cookies to retrieve browser data.
Embed Java applets in the HTML document.

Setting Custom HTML Properties

The properties under Custom HTML category let you add elements or attributes to the HTML that Panther generates for your screen. Each of these properties allows free-form text entry; their contents are not validated by Panther.

Screen Custom HTML Properties

A Panther screen has the following Custom HTML properties:

Head Markup

The Head Markup property specifies HTML to insert within the <HEAD> section of the HTML document. Generally, this section includes information about the document itself, and except for the document title, this information is not displayed in the Web browser.

Body Attributes

The Body Attributes property allows you to add to, or modify, the attributes within the BODY element that Panther generates for a screen. Within the BODY element are the elements and tags containing the content of the HTML document. You can specify either standalone attributes or name=value pairs.

There are attributes of the BODY element which allow you to specify the background color for the display window (BGCOLOR), the color for text in the document (TEXT), the color for unvisited hyperlinks (LINK), and the color for visited hyperlinks (VLINK). To specify one of these attributes, include the attribute name and its value. For example, the following entry displays blue text:

TEXT=#00ff00

For reports, this property defines a background. The following entry uses the image plaster.gif as a background:

BACKGROUND=plaster.gif

For screens, Panther automatically generates the BACKGROUND attribute using the entry in the Wallpaper Pixmap property.

Form Attributes

The Form Attributes property lets you add to or modify the attributes within the FORM element that Panther generates for a screen. The FORM element contains the content of your Panther screen. You can specify either standalone attributes or name=value pairs.

Panther automatically generates the METHOD and ACTION attributes for this element. The METHOD attribute specifies which CGI method, GET or POST, is used to send information to the server. The ACTION attribute specifies the URL to receive the form content.

Stylesheet Source

Specify the style sheet to use for Dynamic HTML generation, if available. For more information, refer to "Using Style Sheets."

Widget Custom HTML Properties

A Panther widget can have the following Custom HTML properties:

Attributes

Additions or changes to the HTML attributes within the INPUT element that Panther generates for a widget. You can specify either standalone attributes or name=value pairs. For example, the following entry for a dynamic label which displays an image specifies the thickness of the border in pixels:

BORDER=2

Link Attributes

Additions or changes to the HTML attributes that Panther generates for a hyperlink. You can specify either standalone attributes or name=value pairs. This property is only displayed when there is a value in the Default Link property.

Prefix Markup

HTML to insert immediately before Panther generates its HTML for the widget. You can use this property to create HTML headings. For example, to create a level 2 heading, set a label's Prefix Markup property to the start tag <H2> and its Suffix Markup property to the end tag </H2>.

Suffix Markup

HTML to insert immediately after Panther generates its HTML for the widget—typically, end tags for elements defined in the Prefix Markup property.

Using HTML Templates

HTML templates behave as Panther screens, allowing you to have the flexibility of how the HTML is created tied in with the power of the Panther backend. In the HTML Template property, you specify the name of the HTML document to use in conjunction with the Panther screen. The document provides the basic HTML structure instead of using Panther to generate that structure.

In order to use an HTML template:

Set the screen's HTML Template property to the path and name of the HTML document.
Insert HTML template tags into the HTML document as needed.

You can use HTML templates to perform these tasks:

Add database values to a pre-existing HTML document.
Convert a pre-existing static HTML document to a form.
Submit a form using the GET method to a CGI program other than Panther.

HTML Template Tags

HTML template tags are specified by enclosing the tag in a set of double curly braces. For example, the following tag places the value from the title_id widget in the HTML element id:

<INPUT TYPE=text NAME=id VALUE="{{title_id}}" SIZE=10>

The following tags are available for use in a Web application:

{{emit:object}}

Generates the HTML that Panther would normally output for the specified object. If object is a box or grid, all of its contents are generated. If object is a field, only its first element is generated. To generate particular elements, use {{emit:object[[n]]}}.

{{eval:statement}}

Process a simple JPL statement. statement in this context can contain assignments.

{{form:info}}

Interpolates the hidden data which is needed to submit the form. Place this value in the template after the <FORM> tag (or {{form:tag}}). In order to cache the application data, this tag must be used in the HTML template.

{{form:messages}}

Outputs any messages in the generated HTML. If there are any messages, they will be emitted within <div class="sm_message_text">..</div> tags. New in Panther 5.40.

{{form:output}}

Outputs the entire form in the HTML format Panther would normally use. The HTML is contained within a set of <TABLE>...</TABLE> tags.

{{form:script}}

Generates the JavaScript procedures based on the edits and validations of the widgets used on the form. Place this tag directly before the closing form tag </FORM>, following any widgets using the JavaScript validation functions–such as the functions for the Yes/No or Digits Only properties.

Note: The values for the onLoad and onUnload screen events, which must be part of the <BODY> tag, must be specified in the HTML template. These JavaScript event specifications are not generated with this tag.

{{form:tag}}

Generates the start <FORM> tag with ACTION and JavaScript attributes. You must specify the corresponding end </FORM> tag in the HTML template.

{{if:condition}} {{else:}} {{elseif:condition}} {{while:condition}} {{break:}} {{continue:}} {{next:}} {{end:}}

Perform conditional processing based on a JPL boolean expression. Examples of conditions are i < 7 and i != 0.

{{break:}} exits a while block.

{{continue:}} and {{next:}} go to the next iteration of a while block.

{{end:}} terminates an if or a while block.

{{include:filename}}

Include the specified file. The search path is the same as for the HTML template itself.

{{include:value:expression}}

Evaluate expression and use the value as the name of the file to include. This would be used, for example, if a widget contains the name of the file. The file search path is the same as for the HTML template itself.Here, value is a keyword.


{{include:value:@screen("@current")->memo4}}
{{eval:@screen("@current")->memo4="test.htm"}}

{{raw:variable}}

Generates the value corresponding to the specified variable. This is similar to {{value:variable}} except that characters like less than (<) that are part of HTML syntax are not converted to escape sequences. New in Panther 4.29.

{{value:variable}}

Generates the value corresponding to the specified variable. This is the same as {{variable}}. If variable has multiple occurrences, only the current occurrence is output unless the occurrence is specified. The current occurrence is the first one except for scrolling fields that have been scrolled.

{{ws:off}} {{ws:on}}

Controls whether whitespace characters (spaces, tabs, newlines, etc.) from the template are to be included in the generated HTML. {{ws:on}} is the default.

HTML Template Document

The HTML template must contain a set of HTML tags, a set of BODY tags, and a set of FORM tags. The start FORM tag can be specified using {{form:tag}} or <FORM>; the end tag must be specified as </FORM>.

The following HTML template, which illustrates the order of the tags, outputs the entire Panther screen in the generated HTML:

<HTML>
<BODY>
<H2>Film Titles</H2>
<HR>
{{form:tag}}
{{form:info}}
{{form:output}}
{{form:script}}
</FORM>
</BODY>
</HTML>

Conditional Processing

Conditional processing can be specified using the following tags:

{{while:condition}}
{{if:condition}}
{{else:}}
{{elseif:condition}}
{{end:}}
{{eval:statement}}

Each block of processing must begin and end in the same file.

In order to prevent infinite loops on the jserver, two application properties are provided, html_max_loop and html_max_nest:

html_max_loop is a limit on the number of while loop iterations that will be permitted before the template processor aborts; the default setting is 1000.
html_max_nest is a limit on the number of nesting levels. Each if, while and include counts as one level. The default setting is 20.

Setting html_max_loop or html_max_nest. to zero removes the limit.

As an example, if field myhtml contains HTML you want to put in the generated HTML, you might include the following in your template file:

{{eval:@app()->html_max_loop = myhtml->num_occurrences}} {{eval:vars i = 1}} {{while:i <= myhtml->num_occurrences}} {{raw:myhtml[i]}} {{eval:i = i + 1}} {{end:}}

Passing Database Values

To illustrate passing database values using an HTML template, Figure 8-1 shows a Panther screen as it appears in the editor:

Figure 8-1 The widgets contain values fetched from the database.

This screen's HTML Template property is set to vidname.htm. This HTML document contains the following tags:

<HTML>
<HEAD>
</HEAD>
<BODY onLoad="window.status =
	('Displays film title information')">
{{form:tag}}
{{form:info}}
<HR>
<H2>Film Titles for {{value:username}}</H2>
{{emit:title_id[[1]]}}
{{emit:name[[1]]}}
<BR>
{{emit:title_id[[2]]}}
{{emit:name[[2]]}}
<BR>
{{emit:title_id[[3]]}}
{{emit:name[[3]]}}
{{form:script}}
</FORM>
<A HREF="http://myserver/cgi-bin/proweb/vidlist.scr"
	Start a New Search</A>
</BODY>
</HTML>

For each of the elements inside a double set of curly braces, the value is inserted at runtime. Consequently, the browser displays the HTML document as follows:

Figure 8-2 The HTML document in the Web browser contains the database values.

Submitting a Form

The form can be submitted back to your Panther Web application or, if another GET method is specified in the HTML template, to a non-Panther Web application.

To submit the form back to the Panther Web application, the HTML template must contain the {{form:info}} tag. This maintains the cache data for a Panther screen utilizing an HTML template and updates the template dynamically to associate the cache file with it.

To submit the form to a non-Panther Web application, you must specify the <FORM> tag with the appropriate GET method.

The HTML document receives two values from the Panther application:

The value of search_str, used to initialize the HTML document's search field:
```
<INPUT NAME=q SIZE=55 MAXLENGTH=200
VALUE="{{search_str}}">
```
The value of @cgi_http_referer. This value is specified as the HREF destination in an anchor on the HTML document; it lets the user return to the Panther Web application. Of course, this can be replaced with a hard-coded URL:
```
<A HREF="{{@cgi_http_referer}}">Film Info</A>
```

Using Hyperlinks

Hypertext links enable users to move from one HTML document to another. You can set hyperlinks in a Panther Web application in several ways, as shown in following sections.

To view different types of hyperlinks in Panther, refer to Hyperlinks in the Panther Gallery accessible from the Web application server.

Creating Hyperlinks

Setting the Default Link Property

Designate a dynamic label or graph widget to act as a hyperlink by setting its Default Link property to the desired URL, either in the editor or at runtime:

In the editor, set the label's Default Link property (under Web Options) to the desired hyperlink's URL. For example:
```
http://prolifics.com
```
Set the label's default_link property at runtime. For example:
```
home_lnk->link="http\://prolifics.com"
```
Note: To avoid JPL colon expansion, prefix any colon in the URL string with a backslash.

To specify attributes for the hyperlink, use the Link Attributes property.

Setting the Item Link Property

For arrays, you can specify a different URL location for each occurrence of the array using the Item Link property.

The following JPL procedure specifies the Item Link property for each occurrence in an array by building on the value in the Default Link property and using the occurrence number to make each value unique:

proc makelink()
{
	vars i
	for i = 1 while i <= arraydoc->max_occurrences
	{
	arraydoc[i]->item_link = \
		arraydoc->default_link ## doc[i] ##".html"
	}
}

Calling sm_web_invoke_url

Call sm_web_invoke_url to invoke a hyperlink without awaiting user action:

call sm_web_invoke_url("http\://prolifics.com")

sm_web_invoke_url immediately stops Panther processing and generates no HTML for the screen. Instead, a request is sent to the browser to go to the specified URL.

Placing an Action List Box Inside a Grid

If a list box is in a grid widget and its Listbox Type property is set to Action, the values appear as hyperlinks. The screen is submitted back to the server when the user selects one of these hyperlinks.

If Listbox Type is set to Select Any, the values are converted to columns of radio buttons or check boxes:

Radio buttons if the group's Number of Selections property is set to 0 or 1 or 1
Check boxes if the group's Number of Selections property is set to Any.

Using Hyperlinks in Reports

Since widgets in reports can have link and image properties, you can make the web-deployed report interactive by using links to:

Move within a report.
Display another web-based document.
Invoke another report.

By invoking another report, you can obtain a "drill down" effect, generating a detail report for any item in the original report. For example, if a main report generates a list of customers, each customer's last name can be a link to a detail report. This "drill down" speeds access to report data by displaying only the detail data that the user wishes to see.

To provide this functionality, a widget in the main report (in this example, last_name) has its Link property set to the URL that invokes the detail report. By setting this property at runtime through a JPL procedure called from the main report's Detail node, the appropriate customer ID can be inserted for the detail report's invocation.

For more information on invoking reports using a URL, refer to "How to Invoke a Report From a URL" in Reports.

Setting Target Windows

When you invoke a document from a hyperlink, it typically appears in the same browser window as the previous document. Several screen and widget properties are available that let you assign names to browser windows—or targets—and specify which one displays a document. If the window does not exist, the browser creates it and loads the document in it.

Targets can also be used with framesets that let the user view multiple documents in the same browser window. The frameset definition specifies the number of frames inside a browser window and the target name for each frame.

You can specify target windows for individual hyperlinks, all hyperlinks on a screen, or for a specific screen:

Specifying the Browser's Title Bar

Using a descriptive name in the browser's title bar provides users with an easy reference for the current document:

Set focus to the screen. The Properties window will display the screen properties.
Under the Identity category, select the Title subproperty.
Enter the text that you want to appear in the browser's title bar.

Using Graphics

Most Web browsers can display graphics files that are in GIF or JPEG formats. Panther supports both formats in a number of widget types. Graphics can be included for illustrative purposes only; or they can be used as image maps that enable navigation to other Web resources.

Web browsers vary in their support for graphic formats. You can test whether a specific format is available with the CGI variable @cgi_http_accept.

The graphics files can be located in relation to the application directory or in the directory named in the ImageDir setting in the application's initialization file.

To include graphics in a Web application:

Create a static label, dynamic label, push button, radio button, or check box widget on your screen.
(Optional) Under Identity in the Label property, assign the widget a name.
Under Format/Display in the Active Pixmap property, enter the name of the graphics file.

The default border setting for the graphic is BORDER=0 so that a border is not displayed. To give a graphic a border, enter the border's pixel size in the Attributes property. In this example, the Attributes property sets a border to 2 pixels:

BORDER=2

Setting Graphics Size

If Keep Image Size is set to Yes (the default), Panther uses the GUI height and width of the graphic when it positions widgets in the generated HTML. If set to No, it positions the graphic on a single line in the HTML. You can usually leave this property set to Yes.

If Panther cannot determine the graphic's size at runtime, it supplies a default size of 32 x 32 pixels to the browser. The size of the graphic can also be set in the Attributes property.

Graph Widgets

Graphs and charts created with the graph widget are available in Web applications. The graph can also be a hyperlink so the Link and Link Attribute properties are available for this widget type.

Image Maps

An image map is a navigational tool that can take users from one location on the Web to another, or to another location within the same site. The coordinates of a graphic are used to divide the graphic into separate sections. Each section is assigned a hyperlink; users can click on it in order to go to a Web resource.

A Web application can include server-side image map files. An image map file contains the coordinates for each section and its hyperlink. Image map file formats vary according to the program that is used to process the image map. The HTTP server decides which program processes the image map and where the image map file must be located.

To include a server-side image map:

Create a dynamic label widget.
Under Format/Display in the widget's Active Pixmap property, enter the name of the graphics file to display in the browser.
In the widget's Image Map property (under Web Options), enter the URL of the server-side image map file that contains the hyperlinks and coordinates.

In the Panther Gallery, Graphics illustrates different types of graphic formats and an image map. The Panther Gallery is accessible from the Web application server:

http://server-name/cgi-bin/jwsamp/main

Creating Image Maps in JPL

You can create a client-side image map in JPL using the sm_web_invoke_url function. Two JPL globals, @web_image_click_x and @web_image_click_y, contain the X and Y coordinates of the user's mouse click.

To include a server-side image map:

Create a push button.
Under Format/Display in the widget's Active Pixmap property, enter the name of the graphics file to display in the browser.
Under Validation in the JPL validation property, enter the name of the JPL procedure. In this example, it is goto_dept.
With the screen having focus, under Focus in the JPL Procedures property, enter a JPL procedure which finds and processes the coordinates. The following sample procedure goes to a different URL based on the coordinates.
```
proc goto_dept
if (@web_image_click_x > 1 && < 125) && \ 
	(@web_image_click_y > 1 && < 110)

	call sm_web_invoke_url("http://myhost/top.html")
	.
	.
	.
return
```

Loading Graphics at Runtime

Graphics can be fetched using the HTTP protocol, rather than the Panther Web application server. In the Web application's initialization file, specify a sub-directory of the HTTP server's document root directory in the ImageDir variable. When development of the application is complete, copy the graphics to this sub-directory.

For local intranets, only specify the sub-directory name; for the Internet, specify the HTTP protocol, followed by the domain and the sub-directory name. For example, to retrieve the graphic my_logo.gif, the following setting for a local intranet:

ImageDir=my_app

results in the following HTML, prepending the name of the current machine:

<IMG SRC="http://currentMachine/my_app/my_logo.gif">

However, if the HTTP protocol is specified:

ImageDir=http://prolifics.com/my_app

results in the following HTML:

<IMG SRC="http://prolifics.com/my_app/my_logo.gif">

Using the FRAME Extension

Frames allow a browser window to be divided up into several independent subwindows. Each subwindow can display a different Web resource. Each region, or frame, has several features:

An individual URL so it can load information independently of other frames on the page.
A NAME attribute so other URLs can target it.
Dynamic resizing if the user changes the window's size. Resizing can also be disabled, ensuring a constant frame size.

Frames are generated with extensions FRAMESET and FRAME. In the HTML document, FRAMESET replaces the BODY tag. FRAMESET describes the frames to appear in the browser window.

You can include frames in your Panther application by specifying the HTML document or the HTML template that contains the FRAMESET element.

The Panther Gallery illustrates this in a sample screen entitled Frames which is accessible from the Web application server:

http://server-name/cgi-bin/jwsamp/main

Using Style Sheets

You can define the look of your Panther web application using style sheets. The style definitions can be included in the HTML document or be specified using a URL location.

For each screen, change the Stylesheet Source property to indicate that style sheets will be used.

Stylesheet Source (stylesheet_source): Specify whether style sheets for the web application screen are included in the screen's HTML (Inline) or specified in a URL (Link).
Stylesheet Type (stylesheet_type): Specify the type of style sheet to be used for the web application screen: CSS (cascading style sheet) or JavaScript.
Stylesheet Data (stylesheet_data): For inline style sheets, enter the style specification.
Stylesheet Link (stylesheet_link): Specify the URL location of the style sheet. The style sheet file must be located in the HTTP server's primary document directory. A common name for this directory is htdocs.

For example, the following cascading style sheet specification would change all H1 headings to be in a sans-serif font, Arial if it is available, and to be red in color.

H1 { font-family: "Arial", sans-serif; color: red }

To specify styles for widgets, use the HTML Attributes property to enter the setting, as in:

STYLE = "..."

W3C has issued a recommendation on the use of style sheets. For more information, see their website at www.w3.org.

Creating Headings

Headings can be used to give order to an HTML document. Browsers apply distinctive typefaces or styles to distinguish heading levels H1 through H6.

To create a heading:

Create a dynamic or static label.
In the Properties window under Web Options, expand the Custom HTML properties. Select the Prefix Markup subproperty.
Enter the start tag for the heading level that you want–for example, <H1> for heading level 1.
Select the Suffix Markup subproperty to close the markup tag.
Enter the end tag for the heading level that you created–for example, </H1> to end a level 1 heading.

Drawing Horizontal Rules

A horizontal rule visually divides the contents of an HTML document. You can use it to group together similar controls or to make the page easier to read.

To create a horizontal rule:

Create a line widget.
To specify line thickness, expand the Web Options category, and select the Attributes subproperty.
Enter the size attribute for the line. For example, entering SIZE=4 specifies a line thickness of 4 pixels which results in the HTML output of <HR SIZE=4>.

Using Cookies

Cookies are pieces of information from the browser side of a connection. After a cookie is set by an HTML document, it is stored on the browser and can be retrieved when the browser contacts the same HTTP server.

Cookies are best used for simple, persistent, client state information, such as a user ID, the date, or the number of times the client visits a specific URL. If the cookie specification includes an expiration date, this information is saved on the browser and is available in subsequent browser sessions by the same user.

The cookie must initially be set by an HTML document—in a Panther Web application, by calling sm_web_set_cookie. For example, the following screen entry function retrieves two cookie values, user and visit_num. visit_num is then incremented by 1 and sm_web_set_cookie resets the corresponding cookie to its new value:

proc entry
user=sm_web_get_cookie("user")
visit_num=sm_web_get_cookie("visit_num")
visit_num=visit_num+1
call sm_web_set_cookie("visit_num=:visit_num;\
	expires=Monday, 03-Jan-2000 00::00::00 GMT; \
	domain=.prolifics.com; path=/samples")

Retrieving Cookie Values

Cookies are retrieved when a browser requests a URL from an HTTP server. The browser compares the value of the URL with the domain and path of any cookie values stored on the browser. If any of them match, a line containing the name=value pairs of all matching cookies is included in the HTTP request.

Cookie values can be retrieved in your Web application with sm_web_get_cookie, as illustrated in the previous example. They are also available in the CGI variable @cgi_http_cookie.

The Panther Gallery sets and retrieves cookie values in a documentation sample entitled Client-side Cookies which is accessible from the Web application server:

http://server-name/cgi-bin/jwsamp/main

Embedding Java Applets

You can embed Java applets into your Panther Web application to create attractive and interesting Web pages with animation, scrolling text, and banners. Java applets are built with Java, an object-oriented programming language. A Java applet is not a standalone program; it must be embedded within an HTML document and is triggered by a JavaScript event. Java applets can run only in a Java-compatible browser.

If you include Java applets in an application, take into account these limitations:

Java provides no method to transmit user input from the Java applet to the HTML document. The Java applet can only be used to display information.
You can not dynamically change a Java applet while a user is working on it. For example, if a Java applet is a pie chart, you can not change the chart to reflect new values while the user is entering data into the form.

To incorporate a Java applet into a Web application, you need this information:

The applet's name (Java is case sensitive).
The applet's .class file location. This file can be stored in a Panther library.
The arguments that the applet accepts.

To embed a Java applet into your Panther screen:

Create a dynamic label on your screen.
In the label's Label property, enter the text to display when a browser is not Java-enabled.
In the label's Prefix Markup property (under Custom HTML), select the Prefix Markup property and enter the APPLET tag and its argumnts.

For example, this entry specifies to call the TickerTape applet:
```
<APPLET CODE="TickerTape" WIDTH=300 HEIGHT=40 ALIGN=top>
<PARAM NAME=fontsize VALUE="20"> <PARAM NAME=message
VALUE="This is my sample Java applet!">
```
In this example, Panther looks for a file named TickerTape.class.
Select the label's Suffix Markup subproperty and enter the applet's end tag.

For example, given the previous setting for Prefix Markup, the following entry closes the TickerTape applet:
```
</APPLET>
```

In the Panther Gallery, the TickerTape applet is modified through Panther properties. The sample screen JavaApplets is on the Web application server:

http://server-name/cgi-bin/jwsamp/main

Refreshing Screens in a Web Browser

If your screen contains information which needs to be updated frequently, you can either have the user refresh the screen in the Web browser by pressing the Reload button or have the screen automatically refresh itself using the META tag. For this task, the META tag format is:

<META HTTP-EQUIV="refresh" CONTENT="seconds; URL=URL_location">

Another use for this tag would be for an online slide show with the URL for the next screen in the META tag. This technique is known as client pull since reading the HTML document into the Web browser activates the process.

To specify a META tag:

Under Web Options, enter the META tag in the Head Markup property. For example, the following entry refreshes a screen each minute:

<META HTTP-EQUIV="refresh" CONTENT="60; URL=myapp.scr">

Using ActiveX Controls

For ActiveX controls to be available in your Web applications:

The user must have a browser that supports ActiveX controls.
The browser security settings must allow ActiveX controls to be downloaded.
The Codebase property must specify the location on your Web application server of the downloadable file containing the ActiveX control.

In Panther Web applications, the control's properties can be set using the JPL property syntax or in JavaScript or VBScript functions. Methods can be called using JavaScript or VBScript. Event control must be specified using VBScript in Microsoft's Internet Explorer 4. With Internet Explorer 3, JavaScript can also be used for event handling.

Using ActiveX Controls in Web Browsers

In the Web environment, only Microsoft's Internet Explorer has native support for ActiveX controls, although most browsers have plug-in support.

In Internet Explorer, if a user accesses a Web document containing an ActiveX control not already registered on the user's system, Internet Explorer performs the following steps:

Internet Explorer checks to see if the control has been digitally signed.
Before your Web document initializes the control, the browser checks the control's properties to verify that it is marked safe for both initializing and scripting.

For Mozilla Firefox, one plug-in for ActiveX controls is IE Tab V2 at https://addons.mozilla.org/en-US/firefox/addon/ie-tab-2-ff-36.

Signing Your ActiveX Controls

When an ActiveX control is embedded in a Web application, it is suggested that you digitally sign the control and set which licensing scheme (development or runtime) you want implemented.

In order to digitally sign controls, you will have to obtain a Software Publisher's certificate from a Certificate Authority, such as Verisign. It takes about a week to obtain this certificate. For information about signing controls and the underlying Authenticode technology, refer to Microsoft's website, www.microsoft.com. The VeriSign site, www.verisign.com, contains information about their certification program.

Digitally signing the control places your company's guarantee for the control. Therefore, you should check that the control only modifies the user's system as described in the ActiveX specifications.

Submitting Data to the Web Application Server

In Web applications, any data submitted to the Web application server must be in an input field. Since ActiveX controls have no input fields, data must be transferred from the ActiveX control to Panther input variables using JavaScript or VBScript before the screen is submitted back to the Web application server.

This is typically done by copying the relevant information to hidden fields in the HTML. Such a hidden field is created by setting both the IdentityHidden property and the Web OptionsExport To HTML property to Yes. This generates an HTML <INPUT> element with the HIDDEN attribute.

Submitting Data using JavaScript

The following JavaScript onSubmit function, called when the screen is submitted back to the Web application server, transfers data from the Value property of the PrlSpinner Controls back to the Panther variables:

function onSubmit()
{
	document.main.i_1_len1.value =
		document.main.PrlSpinner1.value;
	document.main.i_1_len2.value =
		document.main.PrlSpinner2.value;
	document.main.i_1_len3.value =
		document.main.PrlSpinner3.value;
}

Submitting Data using VBScript

Here is the same function in VBScript. It is defined as the onClick function associated with a push button.

Sub spo_1_button_onClick
	document.main.i_1_len1.value =
		document.main.i_1_PrlSpinner1.value
	document.main.i_1_len2.value =
		document.main.i_1_PrlSpinner2.value
	document.main.i_1_len3.value =
		document.main.i_1_PrlSpinner3.value
End Sub

Generating HTML for ActiveX Controls

In order for the Web application to download the control, you must set the Codebase property (under Web Options) which lists either the URL for the ActiveX control file from the document root directory or the location relative to the application directory.

For example, the following entry in the Codebase property:

PrlSpinner.ocx

results in the following HTML, prepending the name of the current machine:

CODEBASE="http://currentMachine/my_app/PrlSpinner.ocx"

However, if the HTTP protocol is specified as part of the Codebase property:

http://prolifics.com/PrlSpinner.ocx

the following HTML is generated, which downloads the file from the Web application server's documentation root directory:

CODEBASE="http://prolifics.com/PrlSpinner.ocx"

When an application screen contains an ActiveX control, an OBJECT tag is generated for the control container with PARAMETER attributes for each of the ActiveX properties and a CODEBASE attribute containing the URL for the ActiveX control. The following example is the OBJECT tag for the PrlSpinner Control.

<OBJECT ID=i_1_spinner WIDTH=83 HEIGHT=30
	CLASSID="CLSID:DA2599CE-F939-11D0-A19E-00A02481A2E9"
	CODEBASE=""http://prolifics.com/src/PrlSpinner.ocx"">
	<PARAM NAME="BlankIfZero" VALUE="0">
	<PARAM NAME="Maximum" VALUE="100">
	<PARAM NAME="Minimum" VALUE="0">
	<PARAM NAME="Value" VALUE="25">
	</OBJECT>

When the OBJECT tag is included in the HTML document, Internet Explorer performs the following steps:

Searches the registry for the CLSID. If not found, it performs the following steps:
When the control is registered, calls the Component Object Model (COM) function CoCreateInstance to create an instance of the specified object.

A .cab file is one software distribution format for ActiveX controls. Part of the .cab file is the binary and .inf file needed to run on the associated platform. An .inf file contains information used by Microsoft Windows to load and register an ActiveX control.

ActiveX controls can run on Intel x86 computers, on the Apple Macintosh, as well as on any of several RISC machines. You need to create, test, and bundle your control's binaries for all deployed platforms.

Embedding Sound

A Panther web application can incorporate multimedia elements, including sound. Browsers such as Mozilla Firefox and Internet Explorer provide inline support for audio. The browser can play audio files provided two conditions are true:

The required auxiliary plug-in programs are available.
The PC or workstation on which the browser is running has a sound card installed.

Sounds are stored in different formats, known as MIME types (Multipurpose Internet Mail Extensions). The following table lists some standard MIME types:


Mime Type	Filename Extension	Description
audio/basic	`.au, .snd`	Sun MicroSystems 8 bit Audio
audio/x-aiff	`.aif, .aiff, .aifc`	Macintosh audio
audio/x-wav	`.wav`	Microsoft audio
audio/x-pn-realaudio-plugin	`.rpm`	Real Audio

Note: To add MIME types such as Quick Time Movies, check your browser's documentation.

To embed a sound file in your application:

Create a dynamic label widget on your screen.
In the Properties window under Web Options, select the Default Link property.
Enter the URL of the sound file. For example:
```
http://myserver.com/cgi-bin/proweb/sound1.au
```

To view a sound file in a Panther application, refer to the part of the Panther Gallery entitled Sound Files on the Web application server:

http://server-name/cgi-bin/jwsamp/main