Web Development


Appendix E. Sample Web Applications

The Panther Web Gallery contains sample applications that demonstrate a variety of HTML and Panther features. You can view the applications in the Panther Web Gallery or in the editor.

To visit the Panther Web Gallery, use the following URL:

http://server-name/cgi-directory/jwsamp[.exe]/main

You can view these applications in the editor to see how they were created. Locate the sample application files in the appropriate subdirectory under your Panther samples subdirectory (in the Web application server home directory). For example, the Java applet application is located in ... web/samples/java, where ... web is the web application server home directory. Full directory information for each application is provided in the descriptions that follow.


General Applications

The following applications incorporate a variety of HTML and Panther features that you might find in a typical application:

Tracker (package tracking)
Shows how easily the ease the world can be linked together on the World Wide Web. This application lets you track a package that is shipped via a popular carrier such as Federal Express or UPS.

For example, suppose your software company has deployed this package to track its software shipments. To locate a package: first, select the customer to whom the package is being shipped; a database query returns the shipping information for the selected customer. Then click on the waybill number for the package that you're interested in, and the application calls the carrier's tracking program and passes the waybill number as a parameter.

Directory: ... web/samples/shipping

Search the world (search engine)
Pass values between Panther screens and HTML forms. You can use this application to search the Internet for information by entering a search string. To search the Internet, enter your search string and click the appropriate push button; the application passes your search string to a second HTML form which calls several popular search engines. The search string from the main form is passed to the second form.

Directory: ... web/samples/search

Email of the famous (mailer)
Incorporate your existing database of URL addresses into an application through sm_web_invoke_url You can use this application to query your URL database and create a dynamic hyperlink to a selected address.

Directory: ... web/samples/dblinks

Fly by Web (airline reservations)
Web applications can use three-tier processing in order to off-load business logic onto the Panther application server. This sample shows how your browser and Web application server act as a client to the Panther application server.

Directory: ... web/samples/3tier


Feature-Specific Examples

The following examples show how to use specific HTML or Panther features:

Action and selection in grids
Use list boxes to invoke an action or allow a selection. There are two types of list boxes in a Panther Web application: Action and Selection. An Action List Box has an action or event associated with each item in the list. The action is triggered when the item is selected. A Selection List Box allows the user to select any number of items from the list.

This example demonstrates both action and selection list boxes. Both types of list boxes have been put into grids. The master grid uses the properties of an action list box. When you select an item (a customer's name) in the master grid, the detail grid is populated with the appropriate data (the film videos that the customer has rented). The detail grid has the properties of a selection list box. In this grid, you can select all of the film videos that are to be returned. (Press the save button to update the database after your selection.)

Directory: ... web/samples/listbox

ActiveX and VBScript
You can embed ActiveX controls in your Panther screens and write VBScript to manipulate them on the browser. This example contains JPL procedures that dynamically generate VBScript to populate an ActiveX control. This example also demonstrates how to write VBScript to get values from an ActiveX control and copy them to hidden Panther fields in order to send them back to the server.

Directory: ... web/samples/activex

Automatically generated JavaScript
Dynamically generate JavaScript to control field edits and validations in order to make your Web application more intelligent. This example demonstrates some of the dynamically generated JavaScript functions that are used to valid field input.

Directory: ... web/samples/jamjavas

Business graphics
Generate a graphical representation of the data from your database or any other source. You can display graphs and charts based on your data in the following formats: pie chart, bar/line graph, XY plot, High/Low chart. In this example, a graph widget is used to generate both a pie chart and a bar chart.

Directory: ... web/samples/busgraph

CGI variables
Access all available CGI variables in JPL. These values can be used to determine which server or browser type is being used, whether a GET or a POST has occurred, and other important information.

You can view the values of this application's CGI (Common Gateway Interface) variables. (Press the Submit button to view the CGI variables after a POST has occurred.)

Directory: ... web/samples/cgi

Client cookies
Store values in the browser using cookies.
The first time you access this sample, the user name and number of visits are set as cookies in the browser. Each subsequent visit to this sample increments the number of visits and displays the user name. You can reset the user name which also resets the number of visits to 0.

Directory: ... web/samples/cookie

Custom JavaScript
Embed custom JavaScript into a Panther application. JavaScript allows you to do field or screen processing on the client without going back to the server. For instance, you can do calculations, give warnings, manipulate data, use timer functions, or do field validations.

In this example, you can view asynchronously changing clocks that compute the time in New York, London, and Tokyo.

Directory: ... web/samples/javascr

Data transfer (send and receive)
Use the JPL send and receive commands to easily pass data back and forth between screens. The movie search criteria which you provide is passed to a second screen, where the data is used for a query by example search on the database.

Directory: ... web/samples/sendrec

Expandable grids
Display tabular data in expandable grids, which dynamically expand to the number of rows selected from the database.

The grid in this sample expands according to the number of rows returned from the database. You can select all video titles, titles beginning with a certain letter, or the titles in a specific classification. If you want detailed data about the video, click on the title_id, and the information is displayed at the bottom of the screen.

Directory: ... web/samples/expgrid

Frames
Divide an HTML frameset into two frames: an index and contents display window. The WEB application in the index frame controls the HTML documents that are displayed in the contents window.
You can open a new Web page or HTML file in the contents (right-side) window frame by selecting the topic name in the index (left-side) window.

Directory: ... web/samples/frames

Graphics
Use graphics to enhance your WEB applications. The application screen includes a transparent image, an animated image, an image as hyperlink, and an image map of the United States that allows you to select a region and jump to a new site to view information about the selected region.
An image map is a single graphic with hot spots that link to other locations. This example uses an NCSA standard image map. It assumes that the HTTP server's image map CGI program is available in the CGI directory. (If your server does not support this configuration, then this image map can not function properly.) To enable the image map, copy ...web/samples/graphics/usa.map to your DOCROOT directory.

Directory: ... web/samples/graphics

HTTP request method (K_WEBPOST)
Use the two methods by which a Web browser can transfer data to an HTTP server, GET and POST. GET is used when the browser is requesting data or submitting a limited amount of data.

POST is used when the browser is submitting large amounts of data. The Panther flag K_WEBPOST enables the Application Server program to determine if the incoming request is a POST.

In the sample, the flag K_WEBPOST is queried to prevent a second connection to the database after the initial connection has been established.

You can use this application to insert, update, or delete data from a database. Directory: ... web/samples/kflag

Hyperlinks
Perform a variety of functions on your Web page using hyperlinks. They bring up documents, target these documents for a new instance of the browser, send mail to people, pass along input values, and perform other activities. This example demonstrates several different types of hyperlinks.

Directory: ... web/samples/hyperlnk

Java applets
Build more robust applications using Java applets, and incorporate those Java applets into your Web applications. This example contains an embedded Java applet (the ticker-tape banner) that uses Panther's property API to dynamically change the banner text being sent to the Java code.

Directory: ... web/samples/java

JPL global variables
Show Panther's power and flexibility by showing how to maintain global information through JPL globals and the Panther function sm_web_save_global. You can set your own user and application preferences for a scheduler. (Note: this sample application is not connected to a database.)

Directory: ... web/samples/globals

Master/Detail in frames
Use frames to make your master/detail applications user-friendly.
In this sample, the list of movie titles appears in one frame. Each movie title is a hyperlink so that when a movie title is selected, specific information about that title is displayed in an additional frame.

Directory: ... web/samples/mdframes

Reports
Generate a report based upon user input. You can enter search criteria (a film name) and generate a movie cast report based upon the entered film name. The generated report includes page navigation buttons. You can also generate a movie cast report by selecting the film title from a list of the top ten films. Panther automatically formats the report based upon the amount of data that is being displayed.

Directory: ... web/samples/webwrite

Scrolling grids
Page through the entries in your database easily with scrolling grids. In this example, you can insert or delete entries into the sample database of video customers or scroll through the list of customers. (Use the vertical arrow buttons at the left or the grid to scroll through the entries; the push buttons at the bottom to insert and delete information.)

Directory: ... web/samples/scroll

Sound files
Embed sound, video, or other popular MIME file types easily into your Web application. It uses graphic hyperlinks whose URLs are audio files.

If your PC has a sound card installed, you can listen to the sound files by clicking on the appropriate graphics.

Directory: ... web/samples/sound

Templates
Demonstrates the use of the Panther Template property to present data from a Panther screen using the format of a custom HTML file. This HTML file can also be submitted back to Panther for normal processing.
By clicking on the scroll buttons of the grid, the custom representation of the data is also updated at the bottom of the screen.

Directory: ... web/samples/template

Web and GUI applications
Run a single application in any environment–two-tier, three-tier, and Web. The application property
in_web is used to determine whether the application is running in a Web or non-Web environment, and the detail information is populated accordingly.

You can select a film from a grid and view detail information about the film.

Directory: ... web/samples/webflag