VisualAge Web Connection

Demonstration Samples

The file webdemo4.dat contains exported sample applications which demonstrate using and extending the Web Connection parts. The sample code must be used with VisualAge Web Connection Version 4.0 or later. First, the fine print, courtesy our legal department:

Thank you for your interest in the IBM VisualAge Web Connection Sample Code authored by Lawrence Smith of IBM. IBM is pleased to provide this Code to you for your use free of charge, subject to the following terms and conditions, which apply no matter how you may have obtained the Code. IBM grants you a royalty-free license to use, copy, distribute and modify the Code without restriction, and grant others the right to do the same. You understand that the Code is not supported by IBM in any manner, and that the Code is being provided AS IS, without a warranty of any kind. IBM does not warrant that the Code will meet any requirements that you may have or that the operation of the Code will be error free. Further, this license and the IBM copyright notice must be included with all copies of the Code that you make or distribute. Copyright © IBM Corporation, 1997. All rights reserved.

Also, please do not call the VisualAge support team for assistance with this code. (Tip: The folks on the newsgroup comp.lang.smalltalk may be able to provide some assistance.)

Thank you for using the VisualAge Web Connection feature.

You must have installed and loaded the Web Connection feature for Version 4 to use these samples. The file contains the following applications:

WebDemoApp - A sample page used to show how the Web Connection works.
AbtWebSampleSelectionColumnApp - Sample code implementing selection columns
AbtWebSampleSelectionColumnDemoApp - Sample pages showing use of selection columns
AbtWebSampleFrameEditApp - Composition Editor frameset support
AbtWebSampleFrameRunApp - Runtime frameset support
AbtWebSampleFrameDemoApp - Sample pages showing use of framesets

Application WebDemoApp is a prerequisite for the other sample applications.

All these applications are contained in the WebDemoSamples config map. To install the samples, install and load the VisualAge Version 4 Web Connection feature, import the the WebDemoSamples config map, and load the config map. This will import and load the sample applications.

This code is intended to show how Web Connection parts can be extended to add new capabilities. By looking at the code in this simple extension, you can see nearly the minimum set of methods needed to add new parts which generate HTML. Be sure to look at instance and class methods, as well as VisualAge attributes in the public interface editor.

Web Demo Application

Application WebDemoApp contains a sample page used to demonstrate the web connection features. Part WebDemoClientUserInterface is a standard (non-Web) dialog which uses a non-visual part Catalog. The Catalog part represents any non-visual part that might be reused between non-Web and Web interfaces. In this case, the attribute "query result" is used from the catalog, indicating the result of some query that occurred earlier in the application process.

In WebDemoClientUserInterface, the results of the query, "Available Items" are displayed in the container details part at the top. The items in the "Shopping Cart" at the bottom represent selected items. Buttons are used to add or remove items from the top of the list to the bottom of the list.

In WebDemoPage, the "add items" part of the interface is implemented as a web page. Remove items is left as an exercise for the reader. Note that since the container details part is not implemented in HTML, a drop down list is used to select items one at a time to move them from the available items list to the shopping cart. This page demonstrates reuse of a non-visual part, use of the grid part, use of a form data part, use of Smalltalk scripts, use of session data, and several other characteristics of web parts.

This example exposed a need for a way to select items in a table. To help meet this need, the Selection Column Sample was developed.

Selection Column Sample

An AbtSampleHtmlSelectionTableColumn is similar to an AbtHtmlTableColumn, except it has the properties "isSelectionColumn" and "isMultiSelect". When "isSelectionColumn" is false, the selection column operates in the same way as a standard column. When "isSelectionColumn" is true and "isMultiSelect" is true, each row in the column is prefixed with a checkbox. When "isSelectionColumn" is true and "isMultiSelect" is false, each row in the column is prefixed with a radio button.

The selection column must be dropped on an AbtSampleHtmlSelectionTable, which must be dropped on a form. From the formData part for a form with a selection table, you may connect from the selection table part name; this attribute is an OrderedCollection of strings for the items selected in the column.

Here is an example of using the selection column:

Import and Load AbtWebSampleSelectionColumnApp.
Create a part. Drop a page on the part. Drop a formData on the part.
Drop a form on a page.
Open the properties of the form and set the action to the current page. Apply.
Drop a "selection table" (in Web Form Parts category) on the form.
Drop a "selection column" on the table.
Connect an OrderedCollection of stuff to the items of the table.
Open the properties of the selection column.
Set the "attribute" (selector) and "heading" for the column.
Set "isSelectionColumn" to true. Apply or close properties.
Save the part (to set the formData with the column).
Drop a list on the form
Drop a button on the form.
Connect the formData "selectionColumn1" to the items of the list.
Save the part.
Display the part in your web browser.

The table should show a column of items with a checkbox by each item. Select items by checking the boxes. Pressing the buttons should set the contents of the list box to the checked items. If your table does not show any entries, then check to make sure the column "attributeSelector" identifies a method implemented by the items in the table. For the most part, the table works the same was as regular Web Connection tables; so, if you are having trouble, please refer to the table documentation and sample.

An example is provided in AbtWebSampleSelectionColumnDemoApp. In this example, a "Catalog" is used to provide "queryResults" of "CatalogItems" to the table. Application WebDemoApp shows the same application as a traditional (non-Web) user interface and as a Web page without selection columns.

Frameset Sample

Many customers requested support for frames, so a sample was created to demonstrate how this could be done.

Before looking at this section, it would be a good idea to review framesets in your HTML guide. For an online version, see University of Toronto Introduction to HTML. The basic things to know is that a frameset is specified instead of the body of a page. A frameset contains a set of frames and additional framesets. A frame contains the URL of a page. If your client's browser does not support frames, the text in the framesets "noframes" tag is displayed instead of the frameset.

Applications AbtWebSampleFrameEditApp, AbtWebSampleFrameRunApp, and AbtWebSampleFrameDemoApp show how a frameset part could be implemented with the Web Connection feature. The key new part is a AbtHtmlFrameSetPage. This is a subclass of page and implements the page as a frameset. The contents of the page are actually the contents of the "noframes" area of the frameset. The attribute "frameset" is used to specify the frames and framesets in the page.

To use the frameset page, create a new web part, delete the page, and add an AbtHtmlFrameSetPage to your part. Open its settings and look at the FrameSet property. Add frames to the collection of frames in the FrameSet and set its columns+columnUnits or rows+rowUnits appropriately. A frame can either have a URL pointing to a part or page, or it can have a frameset. If it has a frameset, then the other information is ignored. (In the property prompter, uncheck the "Set to nil" button to assign properties to the frameset). By nesting these property dialogs, you can specify a complex collection of frames in framesets.

The sample AbtWebSampleHtmlLeftRightFrameset is a vertically split frameset. The sample AbtWebSampleHtmlLeftTopBottomFrameSet is split vertically, then the right side is split horizontally. For example, the source code generated from this page is:

<!-- Generated by VisualAge Web Connection on 7/5/97 at 3:30:20 PM -->
<HTML>
<HEAD>
<TITLE>Web Sample Left Top Bottom Frame Set</TITLE>
</HEAD>
<FRAMESET FRAMEBORDER="0" COLS="20%,80%">
<FRAME SCROLLING="AUTO" SRC="AbtWebSampleIndexPage-B587B38C_5_D78D1681F521CE2DBDB9CFE5E4FBC442" FRAMEBORDER="0" NAME="Left" ALIGN="LEFT">
<FRAMESET ROWS="20%,80%">
<FRAME SCROLLING="NO" SRC="AbtWebSampleHorizontalIndexPage-B587B38C_5_D78D1681F521CE2DBDB9CFE5E4FBC442" FRAMEBORDER="1" NAME="Top">
<FRAME SCROLLING="AUTO" SRC="AbtWebSampleHelloWorld-B587B38C_5_D78D1681F521CE2DBDB9CFE5E4FBC442" FRAMEBORDER="1" NAME="Next">
</FRAMESET>
<BODY>
Sorry, your browser does not support frames.  To continue, click <B><A HREF="AbtWebSampleIndexPage-B587B38C_5_D78D1681F521CE2DBDB9CFE5E4FBC442">here.</A></B>
</BODY>
</FRAMESET>
</HTML>

Note that you can pass session data from frameset to frameset; however, the browsers are not consistent in how they refresh framed pages. This causes session data to be lost when clients press the refresh button on the browser. For this reason, use of session data with frames is not recommended. You can see this by displaying the AbtWebSampleLeftTopBottomFrameSet sample, selecting the "Session Data" entry, then pressing refresh several times.

We hope you find these samples useful.

Lawrence Smith
July 10, 1997