VisualAge Smalltalk
Web Connection User’s Guide Version 5.5
IBM
Note Before using this document, read the general information under “Notices” on page iii.
November 2000 This edition applies to Version 5.5 of the VisualAge Smalltalk products, and to all subsequent releases and modifications until otherwise indicated in new editions. Make sure you are using the correct edition for the level of the product. The term “VisualAge,” as used in this publication, refers to the VisualAge Smalltalk product set. Portions of this book describe materials developed by Object Technology International Inc. of Ottawa, Ontario, Canada. Object Technology International Inc. is a subsidiary of the IBM Corporation. If you have comments about the product or this document, address them to: IBM Corporation, Attn: IBM Smalltalk Group, 621-107 Hutton Street, Raleigh, NC 27606-1490. You can fax comments to (919) 828-9633. When you send information to IBM, you grant IBM a nonexclusive right to use or distribute the information in any way it believes appropriate without incurring any obligation to you. © Copyright International Business Machines Corporation 1997, 2000. All rights reserved. US Government Users Restricted Rights – Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
Notices References in this publication to IBM products, programs, or services do not imply that IBM intends to make these available in all countries in which IBM operates. Any reference to an IBM product, program, or service is not intended to state or imply that only that IBM product, program, or service may be used. Any functionally equivalent product, program, or service that does not infringe any of the intellectual property rights of IBM may be used instead of the IBM product, program, or service. The evaluation and verification of operation in conjunction with other products, except those expressly designated by IBM, are the responsibility of the user. IBM may have patents or pending patent applications covering subject matter in this document. The furnishing of this document does not give you any license to these patents. You can send license inquiries, in writing, to the IBM Director of Licensing, IBM Corporation, 500 Columbus Avenue, Thornwood, NY, USA 10594. IBM may change this publication, the product described herein, or both.
Trademarks The following terms are trademarks of the IBM Corporation in the United States or other countries or both: AIX IBM OS/2 VisualAge
The following terms are trademarks of other companies: Microsoft Netscape Windows UNIX
Microsoft Corporation Netscape Inc. Microsoft Corporation X/Open Company Limited
Windows is a trademark of Microsoft Corporation. UNIX is a registered trademark in the United States and other countries licensed exclusively through X/Open Company Limited.
© Copyright IBM Corp. 1997, 2000
iii
iv
VisualAge Smalltalk: Web Connection User’s Guide
About this book This book documents the VisualAge Web Connection feature, which you can use to build VisualAge applications that are accessible from World Wide Web browsers.
What this book includes This book includes the following information: v Introductory information, including information on setting up Web Connection and your Web server. v Information on building Web Connection applications, including using the visual parts, non-visual parts, page layout tools, database parts, and how to process requests. v Information on using other HTML builders, such as FrontPage, with Web Connection. v Information on packaging your application. v Information on special Web Connection tools. v Advanced topics such as session data, generating HTML from Smalltalk, error handling, and execution control.
Who this book is for This book is written for VisualAge application developers who want to create World Wide Web applications. If you are not already familiar with developing VisualAge applications, refer to VisualAge Getting Started and the VisualAge User’s Guide. These books provide an introduction to the concepts involved in object oriented programming, Visual programming and using the VisualAge tools.
About this feature The VisualAge Web Connection feature enables you to use VisualAge to build applications that are accessible through the World Wide Web. With the Web Connection feature, you use the VisualAge Composition Editor to build dynamic Web pages, much as you would build windows for an ordinary graphical user interface. The Web pages you build provide the user interface for your application, and you implement program logic by making connections and writing Smalltalk scripts, just as you would with any VisualAge application.
What’s new in this version? In VisualAge Smalltalk Version 5.1, the Web Connection feature adds support for the following: HTML file wrapper The HTML File Wrapper allows you to use other HTML builders for more robust web page creation but still use Web Connection and Smalltalk to perform data manipulation and presentation.
© Copyright IBM Corp. 1997, 2000
v
Conventions used in this book This book uses several conventions that you might not have seen in other product manuals. Tips and environment-specific information are flagged with icons: Shortcut techniques and other tips VisualAge for OS/2 VisualAge for Windows VisualAge for UNIX platforms
These highlighting conventions are used in the text: Highlight style Boldface
Italics
Used for
Example
New terms the first time they are used
VisualAge uses construction from parts to develop software by assembling and connecting reusable components called parts.
Items you can select, such as push buttons and menu choices
Select Add Part from the Options pull-down. Type the part’s class and select OK.
Special emphasis
Do not save the image.
Titles of publications
Refer to the VisualAge Smalltalk User’s Guide.
Text that the product displays
The status area displays Category: Data Entry.
VisualAge programming objects, such Connect the window’s as attributes, actions, events, composite aboutToOpenWidget event to the parts, and script names initializeWhereClause script. Monospace font
VisualAge scripts and other examples doSomething of Smalltalk code | aNumber aString | aNumber := 5 * 10. aString := 'abc'. Text you can enter
vi
VisualAge Smalltalk: Web Connection User’s Guide
For the customer name, type John Doe
Contents Notices . . . . . . . . . . . . . . . iii Trademarks
.
.
.
.
.
.
.
.
.
.
.
.
.
Building forms . . . . . . Creating a form . . . . . Adding parts to a form . . Using divisions . . . . . . Using layers . . . . . . . Using framesets . . . . . . Using style sheets . . . . . Adding scripts . . . . . . Example: Building the To-do List Coding HTML directly . . .
. iii
About this book . . . . . . . . . . . v What this book includes . . Who this book is for. . . . About this feature . . . . What’s new in this version? . Conventions used in this book
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . .
v v v v . vi
Chapter 1. Introduction to Web Connection . . . . . . . . . . . . . 1 What you get with Web Connection Web Connection parts . . . . Web Server Interface . . . . . Application flow . . . . . . URL format. . . . . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
. . . . .
|
. . . .
Selecting grids, cells, rows, and columns. Adding and deleting rows and columns . Adding parts to a grid. . . . . . .
1 1 2 3 3
Retrieving form data . . . . . . . Setting up Form Data . . . . . . Preserving session data . . . . . . What defines a session? . . . . . Setting up CGI Link Session Data . . Using Cookies . . . . . . . . . Connecting to the nonvisual parts . . . Example: Making the To-do List work Processing requests . . . . . . . . Accessing request data . . . . . Routing requests to different pages . Example: Routing requests . . . . Using multiple pages in the same part
7 8 9 9
12 12 13 17 18 18 18
. 19 . 20 . 21
Chapter 3. Building a Web Connection application . . . . . . . . . . . . . 25 A Hello World application An input and reply sample Building the input page Building the reply page
. . . . application . . . . . . . .
. . . .
. . . .
. . . .
. . . .
. . . .
25 25 25 26
Chapter 4. Building pages with the Web Connection visual parts . . . . . . . 29 Working with the visual parts . Building basic pages . . . . Creating a page . . . . . Adding text . . . . . . Adding images . . . . . Building reusable composites Resizing the page . . . . © Copyright IBM Corp. 1997, 2000
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
29 29 30 30 31 32 32
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . .
. . .
33 33 33 34 34 35 35 35 36 38
. . .
. 39 . 39 . 40
. . . . . . . . . . . . .
. . . . . . . . . . . . .
Chapter 6. Using the nonvisual parts
. 10 . . . . . . .
. . . . . . . . . .
Chapter 5. Using tables for page layout 39
Chapter 2. Setting up Web Connection . 7 Setting up the Web Connection server interface . . Setting up the Servlet interface . . . . . . Setting up the Server Smalltalk interface . . . Setting up for CGI . . . . . . . . . . Setting up for the IBM Internet Connection API (ICAPI) . . . . . . . . . . . . . . Setting up for Microsoft Internet Server API (ISAPI) . . . . . . . . . . . . . . Setting up for Netscape Server (NSAPI) . . . Customizing the WSI configuration file . . . Setting Web browser launch options . . . . . Testing your installation . . . . . . . . . Test the Http server . . . . . . . . . Test the web server interface configuration . . Setup and test your WSI and VisualAge image configuration . . . . . . . . . . . . Troubleshooting Hello, World! . . . . . . Using the WSI monitor interface . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . interface . . .
| | | | | | | | | | | | | |
. . . . . . . . . . . . .
. . . . . . . . . . . . .
41 41 42 43 43 44 45 45 45 46 47 47 48 49
Chapter 7. Using Web Connection with other HTML Builders . . . . . . . . . 51 Setting up the HTML File Wrapper . . . . Generating the HTML file wrapper . . . Using the AbtHtmlFileWrapper subclass . . Caching HTML pages . . . . . . . . Using Form Data . . . . . . . . . . Static form data . . . . . . . . . . Dynamic form data . . . . . . . . . Using Session Data . . . . . . . . . . Making Changes to the Page Layout, File Name, Path . . . . . . . . . . . . . . . Page layout changes . . . . . . . . File name or absolute path changes . . .
. . . . . . . . or . . .
. . . . . . . .
51 52 53 54 54 54 54 55
. 55 . 55 . 56
Chapter 8. Working with database queries . . . . . . . . . . . . . . 57 Setting up a table . . . . . . . . . . . Setting up a multi-row table manually . . . Setting up a multi-row table with Quick HTML Displaying single-row queries . . . . . . Adding selection tables and selection columns. Adding generic objects to a table . . . . .
. 57 . 57 58 . 58 . 59 . 59
vii
Chapter 9. Packaging a Web Connection application. . . . . . . . 61
Chapter 11. Tools . . . . . . . . . . 67
Grid Cell . . . . . Table . . . . . . Table Column . . . Script . . . . . . Page . . . . . . . Frame Set Page . . . Composite . . . . Layer . . . . . . Division . . . . . Style Sheet . . . . Nonvisual parts . . . CGI Link Request . . CGI Link Session Data Cookie Wrapper . . Form Data . . . . Page Wrapper . . .
. . . . . . . . . .
. 89 . 90 . 92 . 94 . 95 . 97 . 100 . 100 . 103 . 104 . 105 . 106 . 106 . 107 . 107 . 108
Viewing generated HTML Envy/Stats . . . . .
Chapter 14. Web Form Parts category
111
Creating a runtime image. . . . Setting up the runtime system . . Server configuration file format.
. . .
. . .
. . .
. . .
. . .
. 61 . 61 . 62
Chapter 10. Using Web Connection for server applications . . . . . . . . . 63 Setting up Web Connection for OS/390 . . . . Setting up the ICAPI web server interface . . Running a VisualAge Smalltalk web application . More information about VisualAge Smalltalk web applications and OS/390 . . . . . . . . .
. .
. .
. .
. .
. .
. .
. .
. .
. 63 . 63 . 64 . 65
. 67 . 67
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . .
Visual Parts . . . . . . . . . . . . . . 111 Form . . . . . . . . . . . . . . . 111 Hidden Input . . . . . . . . . . . . 113 Push Button . . . . . . . . . . . . . 114 Check Box . . . . . . . . . . . . . 115 Radio Button Set . . . . . . . . . . . 116 Entry Field . . . . . . . . . . . . . 117 Multi-line Entry Field. . . . . . . . . . 119 List. . . . . . . . . . . . . . . . 120 Multiple Select List . . . . . . . . . . 121 Drop-down List . . . . . . . . . . . 122
Chapter 12. Advanced topics . . . . . 69 Accessing request information . . . . . AbtAppBldrHtmlPage instance methods. AbtWsiTransaction instance methods . . AbtWsiRequest instance methods . . . AbtWsiResponse instance methods . . Session data . . . . . . . . . . . Generating HTML from Smalltalk . . . . Error handling . . . . . . . . . . AbtWsiConfiguration class methods . . AbtAbtBldrHtmlPage class methods . . .
. . . . . .
69 69 69 69 69 70 70 70 70 71
Chapter 15. Models category . . . . . 125 Chapter 13. Web Connection category Visual Parts . . Text . . . . Image . . . Line Break. . Paragraph . . Horizontal Rule Applet . . . Embed . . . Grid . . . . Grid Column . Grid Row . .
viii
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
73 . . . . . . . . . . .
VisualAge Smalltalk: Web Connection User’s Guide
73 74 76 78 79 80 81 83 84 86 88
Nonvisual Parts . Converter Filter
. .
. .
. .
. .
. .
. .
. .
. .
. .
. .
. 125 . 125
Chapter 16. Web Connection Windows 127 |
Web Connection Preferences Window . . URL Window . . . . . . . . . . HTML File Wrapper Generator Window . Color Window . . . . . . . . . .
. . . .
. . . .
. . . .
127 127 128 128
Index . . . . . . . . . . . . . . . 129
Chapter 1. Introduction to Web Connection The VisualAge Web Connection feature enables you to use VisualAge to build applications that are accessible through the World Wide Web. With the Web Connection feature, you use the VisualAge Composition Editor to build dynamic Web pages, much as you would build windows for an ordinary graphical user interface. The Web pages you build provide the user interface for your application, and you implement program logic by making connections and writing Smalltalk scripts, just as you would with any VisualAge application.
What you get with Web Connection The Web Connection feature provides two main components that make it possible to build Web-based applications with VisualAge: v A set of visual and nonvisual parts designed for building Web applications. The parts are in the Web Connection category and the Web Form Parts category, which are added to the Parts Palette when you load the Web Connection feature. v A Web server interface. This component acts as a relay between your Web server and your VisualAge application. The Web server interface component must be installed on your HTTP server machine, which can be either the same machine as the VisualAge machine or a different machine.
Web Connection parts When building web pages, the visual parts in the Web Connection and Web Form Parts categories are used instead of standard VisualAge visual parts. They represent the various entities and controls that can be displayed by a Web browser. You cannot use any other visual parts in the user interface of a Web application. However, you can still use any VisualAge nonvisual part in your application logic. All of the features of VisualAge, such as database access and communications, are available to your Web application. The parts in the Web Connection categories are special VisualAge parts that have the ability to translate themselves into HTML code. At run time, instead of creating windows and user-interface controls on your screen, the parts generate HTML code that recreates your user interface in a Web browser. Incoming requests from Web browsers trigger the generation of HTML code by the application. Because HTML and Web browsers support only certain functions, the Web Connection categories contain only a limited set of UI controls. Furthermore, when you build a Web page, you will find that the editing behavior of the Composition Editor is somewhat different from when you build an ordinary VisualAge application. Again, this is because the architecture of HTML does not support as many options for customization and precise placement. The Web Connection feature supports only what HTML supports, and it will not let you build a user interface that won’t work on the Web. Other HTML builders, such as FrontPage, may provide more robust HTML page creation. To use other HTML builders to create HTML pages, but still use Web Connection and Smalltalk to perform the data manipulation and presentation for the HTML pages, see “Chapter 7. Using Web Connection with other HTML Builders” on page 51.
© Copyright IBM Corp. 1997, 2000
1
Web Server Interface In order to run your Web application, you must also be running a Hypertext Transfer Protocol (HTTP) server that can run server programs in response to client requests. The HTTP server relays requests to the VisualAge application through a Web server application interface. There are several interfaces through which Web servers can access a Web Connection application (for more information about these interfaces, see “Setting up the Web Connection server interface” on page 7): v Servlet Interface v Common Gateway Interface (CGI) v IBM Internet Connection API (ICAPI) v Netscape Server API (NSAPI) v Microsoft Internet Server API (ISAPI) v Server Smalltalk
| | | |
You can also use Server Smalltalk with Web Connection. In this case Server Smalltalk acts as a server. The response time is much faster using Server Smalltalk than using one of the Web server interfaces. The Servlet interface offers several advantages over the other Web Server interfaces: v Better performance than CGI. The router servlet supplied with Web Connection is loaded once and reused on subsequent invocations. Conversely, the CGI executable is reloaded upon each invocation and must reread the WSI configuration file. v Cookie support. Support for HTTP cookies is provided using the servlet interface only. Other supplied web server interfaces do not provide support for cookies. v Portability. Since the router servlet is written in Java, it can be used with any web server that supports servlets on any platform. v Simple configuration. Configuring the servlet interface is very straightforward compared to the other supplied web server interfaces.
| |
The Web Connection feature provides a Web Server Interface (WSI) module for each of the supported interfaces. For CGI, the interface is through a stand-alone executable program; for the others, it is through a dynamically loaded shared library. The interface module handles all interaction with the VisualAge application, which stays up and running all the time. This arrangement provides several advantages: v It optimizes performance. Without a separate interface module, the Web server would have to start the VisualAge application with each request. This would result in unacceptable performance, because of the overhead involved in loading a Smalltalk image. v It makes it possible to preserve state information within the VisualAge application. Because the application stays running all the time, it can store information between one client request and the next. v It makes it simple to change Web server application interfaces (for example, you might decide to switch your server to use ICAPI instead of CGI to access the VisualAge application). Changing the Web Server Interface module does not require any change to the VisualAge application itself. On your Web server, you must set up the appropriate interface module so that it is accessible to your HTTP server software. Web clients can then access your
2
VisualAge Smalltalk: Web Connection User’s Guide
VisualAge application by submitting requests to the Web server, which then calls the appropriate interface module. The interface module then relays the client request to the VisualAge application. The VisualAge application receives these requests, and returns the results, by way of the WSI server, a process running within the VisualAge image.
Application flow A single request from a Web client, and its results, follow a multi-step process: 1. The client Web browser submits an HTTP request that specifies a VisualAge Web Connection part. 2. The HTTP server (a daemon running on the specified host) receives the request from the client. The server parses the request and calls the Web Server Interface module, passing it any additional information contained in the URL. 3. The Web Server Interface module passes the client request to the running VisualAge application, communicating through a TCP/IP socket. (The VisualAge image can be either on the same machine as the HTTP server or on a different machine.) The request consists of a VisualAge part name and a variable number of optional parameters. 4. The WSI server, a process running within the VisualAge image, receives the request from the interface module and creates a new instance of the specified VisualAge Web Connection part. The WSI server also parses any parameters from the request and makes them available to the new part as attributes on a subpart. 5. The part processes the input data and generates an HTML data stream, which is relayed back through the interface module and the HTTP server to the client browser, which renders the page. Most of this process is completely invisible to the client Web browser. From the client’s perspective, the pages generated by the VisualAge application do not appear any different from any other Web pages. Browser
HTTP Server
VisualAge CGI program (NSAPI, ICAPI, ISAPI)
VisualAge Web Connection Runtime Image
DB2, IMS, CICS, Oracle, etc.
Static Assets (HTML, GIF, etc.)
MVS
URL format To access a VisualAge Web Connection application, the client Web browser sends an HTTP request. A user can generate such a request in any of three ways: v Directly specifying the Uniform Resource Locator (URL) for the servlet or CGI program v Selecting a link in an HTML document that specifies the URL for the servlet or CGI program
Chapter 1. Introduction to Web Connection
3
v Selecting the “submit” button on an HTML fill-out form that specifies the servlet or CGI program as the action to take In any case, the request sent by the Web browser takes the form of a URL containing the HTTP request and any data that goes along with it. The complete URL to a VisualAge Web Connection application takes on various forms, depending on the interface used.
Servlet interface URL For the Servlet interface, the URL is in the following form: http://server/servletPath/servletName/VisualAgePartName
for example: http://MyServer/servlets/com.ibm.abt.web.servlet.Router/myClass
where the parts of the URL are as follows: server The TCP/IP host name, and optionally the port, of the HTTP server. servletPath The path defined as the directory for servlets on the server machine. This path is defined when you install a Web Server that supports servlets, such as the IBM WebSphere Application Server. servletName The name of the servlet used to interface with the Web server. Web Connection ships with the servlet com.ibm.abt.web.servlet.Router. VisualAgePartName The name of the VisualAge part to open in response to this request. | |
Note: Under WebSphere, the URL format example is:
|
Server Smalltalk interface URL
http://MyServer/servlet/Router/myClass
For the Server Smalltalk interface, the URL is in the following form: server:port/AbtWebConnect/VisualAgePartName
for example: MyServer:1332/AbtWebConnect/myClass
where the parts of the URL are as follows: server:port The TCP/IP host name and port of the HTTP server. AbtWebConnect The name of a class included with Server Smalltalk, needed to use Server Smalltalk as a Web server with Web Connection. VisualAgePartName The name of the VisualAge part to open in response to this request.
CGI interface URL For CGI, the URL is of the following form: http://server/cgiPath/cgiName/VisualAgePartName
for example: http://MyServer/cgi-bin/abtwsac.exe/MyClass
4
VisualAge Smalltalk: Web Connection User’s Guide
where the parts of the URL are as follows: server The TCP/IP host name, and optionally the port, of the HTTP server. cgiPath The path defined as the directory for CGI executables on the server machine (typically cgi-bin). cgiName The name of the Web Server Interface CGI executable on the server (usually abtwsac.exe or abtwsac). VisualAgePartName The name of the VisualAge part to open in response to this request.
IBM ICAPI and Netscape NSAPI interface URL For IBM ICAPI and Netscape NSAPI, the URL is of the following form: http://server/wsiMapping/VisualAgePartName
for example: http://MyServer/abtwsi/MyClass
where the parts of the URL are as follows: server The TCP/IP host name, and optionally port, of the HTTP server. wsiMapping The mapping defined on the server machine for the WSI interfaces (typically abtwsi). VisualAgePartName The name of the VisualAge part to open in response to this request.
Microsoft ISAPI interface URL For Microsoft ISAPI, the URL is of the following form: http://server/cgipath/dllName/VisualAgePartName
for example: http://MyServer/cgi-bin/abtwsi/MyClass
where the parts of the URL are as follows: server The TCP/IP host name, and optionally port, of the HTTP server. cgipath The path defined as the directory for CGI executables on the server machine (typically cgi-bin). dllName The name of the Web Server Interface DLL on the server (abtwsam.dll). VisualAgePartName The name of the VisualAge part to open in response to this request.
Chapter 1. Introduction to Web Connection
5
6
VisualAge Smalltalk: Web Connection User’s Guide
Chapter 2. Setting up Web Connection In order to use the Web Connection feature, you must set up your Web server to run programs in response to client requests. The Web Connection feature receives requests from the Web server software and returns results, in the form of an HTML data stream, through the server back to client browsers. VisualAge Web Connection can use any of several Web server interfaces: v The Servlet Interface. The Servlet interface works with any Web server that supports Java Servlets. For information on setting up your server to handle servlets, refer to the documentation for your HTTP server software. v VisualAge Server Smalltalk. If you have a license for Server Smalltalk, you can use use Smalltalk as a Web server with your Web Connection parts. v The Common Gateway Interface (CGI). CGI, which is supported by most Web servers, is the most common interface that defines how HTTP servers can run external programs. CGI supports running stand-alone executable programs in response to client requests. For information on setting up your server to handle CGI requests, refer to the documentation for your HTTP server software. v The IBM Internet Connection API (ICAPI). ICAPI is a shared-library-based interface supported by the IBM Internet Connection Server and Lotus Go Webserver. v The Netscape Server API (NSAPI). NSAPI is supported by the Netscape Web server software. Instead of running stand-alone programs, NSAPI uses shared libraries to extend the server software’s capabilities. v The Microsoft Internet Server API (ISAPI). ISAPI is a shared-library-based interface supported by Microsoft Web server software. Generally speaking, the server-specific interfaces that use shared libraries offer several advantages over CGI. Most importantly, they typically offer better performance and more efficient use of system resources. If you are using the IBM, Netscape, or Microsoft server software, you should probably use the corresponding interface. For other HTTP servers that support servlets, use the Servlet interface. Otherwise, use CGI. For more information on setting up your Web server to run external programs, refer to the documentation for your Web server software.
Setting up the Web Connection server interface The Web Connection feature includes a component called the Web Server Interface (WSI). WSI provides the link between your Web server software and your VisualAge application. The VisualAge image where the application processing occurs can be running either on the same machine or a separate machine. | | | | | | |
When you install the Web Connection feature, a subdirectory called webconn is created. This directory contains all of the WSI files you will need to set up your Web server interface. Before VisualAge can receive requests from Web clients, you must install the appropriate files in the correct locations on your Web server. The files are divided by operating system. To find the correct files, go to the webconn directory tree and look in the subdirectory for your operating system (OS/2, Windows, AIX, HP-UX, or Sun). The files are:
© Copyright IBM Corp. 1997, 2000
7
| | | |
v v v v
abtwsi.cnf abtwsi.jar abtwsi.pro abtwsi.htm
|
If your VisualAge application and your Web server are on two separate machines running different operating systems, make sure you use the files that are appropriate for the Web server machine. If your Web server is running an operating system other than those listed above, you will need to recompile the source code (located in the source subdirectory) to create an executable for your operating system. Sample make files (abtwsi.mak) are provided in the directories for the supported operating systems.
Setting up the Servlet interface | | | | |
The Servlet interface enables the Web server to run stand-alone executable programs in response to requests from clients. While most Web servers today support servlets, you will need to make sure the specific server you are planning to use supports servlets. A good example is the IBM WebSphere Application Server.
| | | | |
To install the Servlet interface, follow these steps: 1. Copy the Servlet interface Java archive file, abtwsi.jar, to the directory your Web server uses for servlets, usually a servlets subdirectory. (For IBM WebSphere Application Server, install the VisualAge Smalltalk servlets before continuing to set up the Servlet interface.) 2. Run the RouterConfigurationInfoServlet to determine the Web server’s default directory for Java properties files. This servlet is included in the abtwsi.jar file. To run the servlet, point your Web browser to
| | | | |
//
//com.ibm.abt.web.servlet. RouterConfigurationInfoServlet ObjectType fn="force-type" type="text/html" Service fn="AbtWsiService" , add the following lines: NameTrans fn="AbtWsiSetPathInfo" separator="/abtwsi/" NameTrans from="/abtwsi/*" fn="assign-name" name="abtwsi" If you specify verbose off, the error messages returned from WSI will not reveal any information about your WSI configuration, which can be important if you are concerned about security. If you specify verbose on, the error messages will include detailed information about your Web server setup, including: v v v v v [filename] element, which defines the title that appears in the browser’s title bar. To change the title of the page, edit the settings of the Page or directly edit the title bar.<br />
<br />
Adding text Once you have created a Web page with the Page part, you can add content using the other visual parts in the Web Connection and Web Form Category categories. You can add text to the page with the Text part. Text represents a stream of text of any length; you can use it for just a few words (such as a heading) or for an entire paragraph. By setting properties for the part, you can specify special formatting for the text. For example: v Heading levels v Highlighting (italics or bold) v Font size v Hypertext linking v Color Any settings you change in the Text properties apply to all of the text displayed by the part. Therefore, if you want to have a single word or a group of words that appear in a different font or have a hypertext link, those words need to be displayed by a separate Text part. For example, consider the following sentence (underlining represents a hypertext link): Welcome to Wally's Wine World! Come explore our Wine Cellar for an excellent selection of fine wines!<br />
<br />
This sentence would require three separate Text parts, each with different attributes:<br />
<br />
30<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Text<br />
<br />
Attributes<br />
<br />
Welcome to Wally's Wine World! Come explore our<br />
<br />
Normal text<br />
<br />
Wine Cellar<br />
<br />
Hypertext link<br />
<br />
for an excellent selection of fine wines.<br />
<br />
Normal text<br />
<br />
Note: The fonts that you see in the Composition Editor at edit time do not necessarily resemble the fonts users will see at run time. Runtime fonts are entirely under the control of the Web browser. You can change the fonts used in the Composition Editor at edit time on the Web Connection page of the VisualAge Preferences notebook.<br />
<br />
Defining hypertext links When you specify in the properties that a text item (represented by a Text part) has a link to another page, you must specify the location of the link. You can do this in two ways: By part name You can specify the name of a Web Connection part. Use this method if the page you want to link to is another Web Connection part in the same VisualAge image. By URL You can specify the URL of the page you want to link to. You can use this method to specify any Web page, whether or not it was built with Web Connection.<br />
<br />
Adding images In addition to text, a basic Web page can include inline graphic images. To add an image to a page, use the Image part. This part represents the HTML <img> element. In the properties of the Image part, you must specify where the graphic you want to use for the image is located. You can actually configure two different graphics or locations: Edit-time graphic The graphic to display in the Composition Editor during development. This must be a graphic file located on your local machine. The edit-time graphic is specified by the localFileName property of the Image part. For the edit-time graphic, you can specify a file in any of the following formats: v GIF v JPEG v PCX v TIF v BMP Specifying an edit-time image is optional and does not affect what will appear in client browsers. Runtime graphic The graphic to specify in the generated HTML, which will be loaded by<br />
<br />
Chapter 4. Building pages with the Web Connection visual parts<br />
<br />
31<br />
<br />
the browser when the page is loaded. The runtime graphic is specified by the imageURL property of the Image part. You can specify the runtime graphic in either of two ways: v A URL specifying the location of the graphic. If you specify a URL, the browser must have access to the location the URL describes, and the graphic file must be in a format supported by the browser. v A VisualAge part containing the graphic. This option makes it possible to build a VisualAge part that dynamically generates an image at run time. If the runtime graphic is in a file, it can be in any format supported by your client browsers. Most browsers support GIF and JPG (JPEG) formats. As with Text, you can place hypertext links on an Image. In the settings of the Image part, you must specify a VisualAge part name or URL for the link property.<br />
<br />
Building reusable composites The Composite part enables you to build reusable pieces of a Web page made up of multiple Web Connection parts. Once you have built a composite, you can reuse it repeatedly on different pages, or even multiple times on the same page. A typical use for a composite would be to build a standard header or footer that you want to use on every page in order to provide a common appearance, or a common set of navigational links. Building a composite is essentially the same as building a page. To create a new composite, follow these steps: 1. Create a new Web Connection part to contain the composite and open it for editing. 2. In the Composition Editor, delete the default Page from the part. 3. Select Composite from the Web Connection category. Add the Composite to the free-form surface. 4. Use the Web Connection visual parts to build the composite just as you would build a page. You can use any of the Web Connection visual parts within a composite. 5. Save the part. In order to use a composite in a page, select Add Part from the Options menu and specify the name of the part containing the composite. You can then place the composite on a Page just as you would any other Web Connection visual part.<br />
<br />
Resizing the page As you add more parts to a page, the flowed layout might cause some parts to be formatted to appear off the bottom of the page. A quick way to make all of the parts visible is to select Resize To Fit from the pop-up menu of the Page part. Remember that resizing the page in this way is strictly an edit-time operation. At run time, the size of the viewable area of the page is determined by the size of the user’s browser window.<br />
<br />
32<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Building forms In order to build an application interface with buttons, lists, and entry fields, you must use a form. In a Web Connection application, you build a form with the Form part, which represents the HTML <form> element. The form parts, which can only be used inside a form, are: In addition, you can use any of the basic parts inside a form.<br />
<br />
Creating a form To create a new form, select the Form part and place it within the Page part. Remember that all Web Connection parts use flowed layout. You can have other Web Connection visual parts, and even other forms, above or below the Form part. When you first add the Form, it appears as a small, empty rectangle in the page. As you add form parts to the form, the form itself will automatically expand to accommodate the parts it contains.<br />
<br />
Setting up the form action For each form, you must open the properties and define an action to take when the data on the form is submitted. To define the action to take, you must specify the location of the program or page that will process the form data. As with hypertext links, you can specify either the name of a VisualAge Web Connection part, or a fully specified URL. For a form action, the URL should point to a server program. In addition to the location, you must specify the method to use when submitting the form data: GET or POST. The default is POST.<br />
<br />
Adding parts to a form To add a part to a form, place the part within the rectangle that defines the form’s boundary. You can place any Web Connection visual part inside a form, except for another form or page. Parts within a form observe the same flowed layout as parts outside a form. To see a visual indicator of where a part will go, hold down the mouse button as you move the loaded pointer over the Page. When you release the mouse pointer, the part is placed in the indicated location. The form parts represent different user-interface controls, and generally, they function similarly to the corresponding standard VisualAge parts. However, there are some differences in the way the Web Connection parts work, and different browsers might display them differently as well. Most of the form parts represent data entry controls, which enable users of the application to select items or type information in fields. These parts work in essentially the same way as the corresponding base VisualAge parts. When the user submits the form data for processing, each data entry part provides a single value, based upon the user’s input. Because of the nature of the Web, these values are string-based.<br />
<br />
Adding push buttons Although most of the form parts are similar to their base VisualAge counterparts, the Push Button part is a special case. Within a Form, there are several basic kinds of push buttons: submit A submit button executes the action defined for the form: it connects to the Chapter 4. Building pages with the Web Connection visual parts<br />
<br />
33<br />
<br />
specified server program, passing in the data from all of the fields in the form. Typically, each form should have at least one submit button. You can put multiple submit buttons on the same form, but they all perform the same action; it is up to the server program to determine which button was pressed and to process the input fields accordingly. reset<br />
<br />
A reset button clears any information entered by the user and restores the fields to their default values. A reset button does not open a connection to the server.<br />
<br />
image An image button is a custom button that uses an image as the linked, or clickable, area. Image buttons behave similar to a submit button, but they appear different when you specify an image. button A button type of push button provides an object that the user can click but does not submit the action to the server or reset the form. Use this type of push button to trigger execution of client side scripts, for example. In the settings of a Push Button part, you can specify whether the push button is a submit button or a reset button. When first created at edit time, a submit button has the default label Submit, and a reset button has the default label Reset. You can change these labels by specifying a new label in the settings for the part or by directly editing the label. Note: The default labels Submit and Reset are edit-time defaults only. At run time, the default labels for submit and reset buttons are determined by the browser. If you want to be sure of the label on a push button, explicitly define it in the settings.<br />
<br />
Using divisions The Division part is used to construct an HTML <div> tag at runtime. The Division palette part is in the Web Connection category on the parts palette. Use divisions to divide an HTML page into separate, distinct sections. When you use the Division part in combination with a JavaScript and a StyleSheet parts, the Division part can be used to build dynamic Web pages. Refer to the sample AbtWebSampleDivision to see an example of using the Division part to create dynamic Web pages. In the Composition Editor, the Division part is represented by a dashed box that is placed onto an HTML page. At design time, the Division part behaves similar to a Form part. You can drop other Web Connection parts onto a Division. The id for the HTML <div> tag is derived from the Division part’s partName property.<br />
<br />
Using layers The Layer part is similar to the Division part. The Layer parts constructs an HTML <layer> tag at runtime. Use layers to manipulate properties that are controlled using the styles attribute of the Division part.<br />
<br />
34<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Using framesets Instead of using a single HTML Page in your Web Connection application, you can use framesets to create frames on your web page. In HTML, a frameset is specified instead of the body of a page, then the body element appears in the ″noframes″ area of a frameset 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 frameset’s ″noframes″ area is displayed instead of the set of frames. The Frame Set Page part in VisualAge is a subclass of page, and implements the page as a frameset. The contents of the page are the contents of the ″noframes″ area of the frameset. Anything you drop on a frameset in VisualAge will only appear in a browser that doesn’t support frames. To use a Frame Set Page, create a new Web Connection part, delete the HTML Page, then drop a Frame Set Page. To set up the contents of the frames in a frameset, open the settings for the Frame Set Page and change the frameSet property. The frameSet property describes a single frame, with values such as columns and columnUnits or rows and rowUnits, and a collection of frames in that frameset. A frame can either have a URL pointing to a part or a page, or it can have another nested frameset. If an item in the frame’s collection is a frameset, then the frame information about that item is ignored. To assign initial values to a frameSet property, uncheck the Set value to nil checkbox. You will have to resize the frames property prompter to see all the information about each frame. If you use session data in your application, the Session Data part must be placed on an initial page which links to the frameset, even if the session data is not used on the initial page. This establishes the session data key for all frames in the frameset. You must set the session data key before entering the frameset to prevent the possibility of the session data being reset each time the frameset is reloaded in the Web browser. For an example using framesets with session data, open the AbtWebSampleFrameWelcomePage part in the AbtWebSampleFrameSetApp application.<br />
<br />
Using style sheets You can use style sheets with your Web Connection applications to control how the Web browser displays certain HTML elements. To add a style sheet to a Web Connection page, open the properties for the page. In the styleSheets property you can specify a source file name where you have previously defined styles, a URL where the style information resides, or you can add the style information using the style and type fields. Note: Edit time representation of your Web Connection application will not affect any style information.<br />
<br />
Adding scripts You can use scripts to extend your Web Connection application. You can drop a script on an HTML Page. The script can contain code which affects the appearance of the page. There are several ways to add a script to your application. You can specify the script using the string property of the Script part, or you can specify a URL or a source file where the script resides. Use the language property to specify what programming language was used to write the script. You can use any or all three Chapter 4. Building pages with the Web Connection visual parts<br />
<br />
35<br />
<br />
of these properties to specify multiple scripts. If you use more than one, the attributes are rendered in the following order: v #url v #sourceFileName v #string Specifying a URL causes a separate HTML tag, a <SRC> tag, to be rendered. When both the source file name and string are specified, the contents of the string attribute are concatenated to the end of the contents of the file specified by the source file name. You can also add a script to the header of a page. The script property of the Page part uses an ordered collection for specifying scripts.<br />
<br />
Example: Building the To-do List interface The sample application described here is a Web version of the To-do List application in the VisualAge Smalltalk Getting Started book. This application consists of a single page that you can use to add and delete items in a list. The following illustration shows the finished To-do List as it appears in a Web browser.<br />
<br />
To build the user interface of the To-do List, follow these steps: 1. In the VisualAge Organizer, choose an application, or create a new application, to contain the To-do List part. 2. Create a new part. For Part type, select Web Connection part. Call the new part MyWebSampleToDoList. (You can also look at the prebuilt sample part, AbtWebSampleToDoList.) 3. Open the Composition Editor on the new part. You should see a single subpart, a Page, on the free-form surface. 4. Edit the title bar text of the Page to read To-do List. 5. Go to the Web Form Category category and select Form. Place the Form inside the Page. Notice that the Form automatically positions itself in the upper left of the Page, in accordance with flowed layout. 6. Open the properties of the Form part and make the following changes: v For action, make the following selections in the prompter:<br />
<br />
36<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
– Select Part Name to indicate that the target page is a VisualAge part. – In the Part Name field, type MyWebSampleToDoList. v For method, select Post. These settings specify that MyWebSampleToDoList is the recipient of the information submitted with this form. You are now ready to add parts to the form. As you build the form, remember that you can hold down the mouse button in order to see where a part will go when you release the button. You might want to practice working with flowed layout until you understand how to arrange parts on a page. 7. Add the following parts from the Web Connection and Web Form Category categories, placing them inside the Form. Add the parts in this order, placing each part below or to the right of the previous part. Watch how they flow down the Page in the correct sequence. a. Text After you have added the Text part, open its properties and make the following changes: v For bold, select true. v For object, specify To-do Item. b. Line Break c. Entry Field d. Rule e. Text Make the following changes in the properties of this Text part: v For object, specify To-do List. v For bold, select true. f. Line Break g. List h. Line Break i. Push Button Change the partName of this part to AddButton and the object to Add. j. Push Button Change the partName of this part to RemoveButton and the object to Remove. 8. Save the part. Here’s how the built page should look in the Composition Editor (the next chapter explains how to add the nonvisual parts):<br />
<br />
Chapter 4. Building pages with the Web Connection visual parts<br />
<br />
37<br />
<br />
Coding HTML directly In some situations, you might want your page to use HTML extensions that are not directly supported by the Web Connection parts. You can do this by using literal text. To use this feature, follow these steps: 1. Add a Text part at the point in your page where you want the HTML coding to occur. 2. Set the literal property of the Text part to true. 3. In the object property, specify the HTML tagging you want to use. Any text that you set as literal will be passed to the client browser exactly as you enter it. This means that you can enter HTML tags into the text part, and these will be sent inline with the HTML generated by the rest of the page. In this way, you can directly code any HTML extensions that you want to use; you can also implement paragraphs of text with complex formatting in a single Text part. However, remember that any HTML tags that you code directly with literal text will not be rendered graphically in the Composition Editor. Instead, you will see the HTML tags as text, exactly as you entered them. As always, to see the final result, you must test your application with a Web browser.<br />
<br />
38<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Chapter 5. Using tables for page layout Web Connection provides the capability to use HTML tables in order to arrange information on a Web page. An HTML table can contain text, images, forms, input fields, or any other HTML elements (except other tables). The Grid part provides the ability to arrange the parts in a Web Connection part in a table. The term Grid is strictly a VisualAge term meant to distinguish this part from the Table part, which is meant only for presentation of database data. Both parts generate the HTML <table> element. In order to add a Grid to a Web page, follow these steps: 1. Select Grid from the Web Connection category. 2. Place the part anywhere with a Page or Composite. (A Grid can be within a form, but it does not have to be.) By default, a new Grid appears with two rows and two columns.<br />
<br />
Selecting grids, cells, rows, and columns For some operations, you must first select a grid cell, row, or column, or the entire grid. Which part of the grid you select depends upon where you place the mouse pointer when you perform the selection. v To select a cell, place the mouse pointer over the center of the cell and click mouse button 1. v To select a row, place the mouse pointer over the left edge of the row you want to select and click mouse button 1. v To select a column, place the mouse pointer over the top edge of the column you want to select and click mouse button 1. v To select the entire grid, place the mouse pointer in the upper left corner of the grid and click mouse button 1.<br />
<br />
Adding and deleting rows and columns To add a row to a cell, follow these steps: 1. Place the mouse pointer over the left edge of an existing row (just as you would to select it). 2. Click mouse button 2. 3. Select Add Row Above or Add Row Below from the pop-up menu. The process for adding a column is similar: 1. Place the mouse pointer over the top edge of a column. 2. Click mouse button 2. 3. Select Add Column Before or Add Column After from the pop-up menu. To delete a row or column: 1. Select the row or column you want to delete. 2. Select Delete from the pop-up menu, or press the Delete key on your keyboard.<br />
<br />
© Copyright IBM Corp. 1997, 2000<br />
<br />
39<br />
<br />
Adding parts to a grid Once you have added a grid to your page, you can then place other Web Connection parts inside the cells of the grid. Add parts to a grid just as you would add them to any other location on the free-form surface. When you use a grid to lay out your page, keep a couple of things in mind: v The usual restrictions apply regarding which parts can only be used inside a form. If you need to use form parts inside a grid, you can do either of the following: – Place the grid inside a Form – Place a Form inside the grid cell where you want to use form parts v Grid uses the HTML <table> tag when representing itself in HTML. Most Web browsers support the <table> tag, but some older browsers might not. Make sure your users can view tables before using Grid on your Web pages.<br />
<br />
40<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Chapter 6. Using the nonvisual parts Generally speaking, the program logic of a Web application consists of receiving and processing the data from a form, generating a result, and then returning an HTML data stream to the browser. The browser renders the HTML in order to display the result to the user. The Web Connection feature provides nonvisual parts that you use to implement the function of your application. These parts make it possible for you to retrieve the data from a form, and also to conditionally route requests to different pages. The following nonvisual parts are in the Web Connection category: CGI Link Request CGI Link Session Data Cookie Wrapper Form Data Page Wrapper<br />
<br />
Retrieving form data The Form Data part is a nonvisual part that holds the values entered by the user in an HTML form and submitted as part of a request. These fields appear as attributes on the Form Data part. When a Web Connection part is accessed by a request that includes form data, these attributes provide your application with a way of accessing the data for processing. In order for the Form Data part to have the correct attributes, you must indicate what form the request will come from. To do this, you specify the VisualAge part that defines the form. The Form Data part uses the specified part as a template for its attributes. When a user fills in a form on a page and presses a submit button, the browser sends all of the form data to the server. On the server, the program specified by the form receives the form data by way of the Web server interface. In the case of Web Connection, WSI is the server program; instead of processing the form data itself, it sends it to the WSI Smalltalk server process running in the VisualAge image. The WSI Smalltalk server process receives several pieces of information from WSI: v The name of the part to open in order to process this request v The name of the part containing the form that generated this request v The contents of the fields in the form when the request was submitted When the WSI Smalltalk server process receives the request, it opens the part specified in the request. (This part will usually generate HTML to be sent back to the browser, but not until after the request has been fully processed.) If the part © Copyright IBM Corp. 1997, 2000<br />
<br />
41<br />
<br />
contains a Form Data part that matches the incoming form data, the WSI Smalltalk server process makes the incoming form data available through the attributes and events of the Form Data part. By connecting to these attributes and events, you have access to all of the values that the user specified when submitting the request. In addition, Form Data provides several events that you can use to trigger actions in your part.<br />
<br />
Setting up Form Data When you build a page that processes input from a previous page, you must include a Form Data part. Add the part to any empty area of the free-form surface. Then open the settings of the part and specify the name of the Web Connection part containing the form that generates requests for this page.<br />
<br />
Which part do I use? In a typical Web application, users move through a series of pages one after the other. Each page depends upon the data from the previous page. Therefore, in the settings for Form Data, you should specify whichever page is the “previous” page in your application design. In some cases, a simple Web application might consist of a single page that is loaded over and over, processing new input each time. In this situation, you would configure Form Data to point to the same Web Connection it is contained in. But this is an unusual case: in effect, the previous page is the same page. | | | | | | |<br />
<br />
How do I use HTML page bookmarks?<br />
<br />
| |<br />
<br />
When you serve the page specfiied by the form #action, the browser points to the specified anchor, Anchor1.<br />
<br />
| | | | |<br />
<br />
Note: If the anchor does not exist in the document, the browser ignores the anchor name in the URL. Therefore, if you have a router web part that returns different pages based on user input, the browser points to the anchor only on those pages where the anchor exists. If the anchor does not exist, an error does not occur.<br />
<br />
|<br />
<br />
Example: Adding Form Data to the To-do List<br />
<br />
When processing a form request, you can return to a specific portion of an HTML page by creating a bookmark as follows: 1. Add an anchor to the HTML page using a literal text field. For example: <A Name=Anchor1 rel="nofollow"><br />
<br />
2. Specify an anchor for the target URL in the #action attribute of the HTML form data..<br />
<br />
The To-do List example (MyWebSampleToDoList) uses a Form Data part to process the data submitted by the user adding or removing items from the list. This data includes the items typed in the entry field, items selected in the list, and buttons clicked in the interface. (If you have not yet built the user interface for the To-do List example, see “Example: Building the To-do List interface” on page 36.) To set up Form Data to process user input in the To-do List, follow these steps: 1. Select Form Data from the Parts Palette. Place the part in an empty area of the free-form surface. 2. Open the settings of the Form Data part.<br />
<br />
42<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
3. For the pagePart property, specify MyWebSampleToDoList. This indicates that the MyWebSampleToDoList part contains the form that will be used to access this page. Note: This sample application consists of a single window that is reloaded each time a change is made. In an application with multiple windows, the Form Data part would normally use a different page to define its attributes. 4. After you close the settings, look at the connection menu of the Form Data part. You should see an attribute for each of the fields you added to the Form.<br />
<br />
Preserving session data Each time a request comes in to your application from a Web browser, VisualAge creates a new instance of your Page in response. This new instance exists only long enough to process the request and generate HTML in response; once the HTML has been sent back to the browser, the part goes away. This means that the subparts that make up your Web Connection part are not persistent; any information you store in a subpart of a Web Connection part is lost between one client request and the next. For many applications, though, you might need to preserve some information across multiple requests. For example, if your application requires users to log in, you might want to keep track of the user’s name or account information for the duration of the session. You might also want users to be able to interactively build a “shopping cart” of items selected during a session, all of which are to be processed at the end. The CGI Link Session Data part provides a persistent location where you can store session-specific information or state data related to your application. Although the CGI Link Session Data part appears as a subpart of your Page part, its value attribute persists across multiple requests, for the duration of a session. The value attribute can contain any kind of Smalltalk object; by tearing off this attribute, you can access all of the attributes, actions, and events of that object. The default class for the value attribute is OrderedCollection.<br />
<br />
What defines a session? A session is a series of requests or transactions that come from the same client, and are part of the same logical sequence. The first time a client accesses a Web Connection part, VisualAge generates a random session key that identifies the session that has just started. The session key is then passed to the client Web browser in a hidden HTML field. When the user finishes entering data and presses a submit button, the session key is posted back to the VisualAge application. Web Connection then uses the key to identify the latest request as belonging to the same session as the previous request. In this way, Web Connection can keep track of multiple sessions from different clients at the same time. If your page includes a CGI Link Session Data part, VisualAge creates a new object of the appropriate class each time a new session begins. The object remains valid for the duration of the session. Any subsequent requests with the same session key will have access to the same object (provided a CGI Link Session Data part is available).<br />
<br />
Chapter 6. Using the nonvisual parts<br />
<br />
43<br />
<br />
A session ends when a specified amount of time has elapsed since the last request in that session. You can set the timeout value using the lifeTimeSeconds property of the CGI Link Session Data part.<br />
<br />
Setting up CGI Link Session Data To use session data in your application, add a CGI Link Session Data part to any empty area of the free-form surface. You can add a CGI Link Session Data part to any page in your application that needs access to the session data. After you add the CGI Link Session Data part, you must open the settings of the part in order to specify what Smalltalk class you want to use for the value attribute of the CGI Link Session Data part. For example, if you want to store a user name in the session data, you would probably specify a String. After you have specified the class, you can tear off the value attribute of CGI Link Session Data in order to get full access to the object. Each application can have only one session data object, so you must specify the same CGI Link Session Data value class in every page that uses the session data. If you need multiple persistent Smalltalk objects, define a composite class with whatever instance variables you need. You can then use your composite class for the value of CGI Link Session Data.<br />
<br />
Example: Adding CGI Link Session Data to the To-do List The To-do List example application uses a CGI Link Session Data part to maintain the contents of the list. This prevents the list from being destroyed and reinitialized each time the page is built. To set up the CGI Link Session Data part, follow these steps: 1. Open the properties of the CGI Link Session Data part. 2. For the valueClass field, specify OrderedCollection (this is the default, so you shouldn’t need to change it). This indicates that this CGI Link Session Data part will be used to contain this type of object. 3. After you close the settings, tear off the value attribute of the CGI Link Session Data. The torn-off attribute should appear as a variable representing an OrderedCollection, with all of the attributes, actions, and events of that class. After you have added the form data and session data parts to your application, it will look similar to the following:<br />
<br />
Clearing session data It is often useful during testing or demonstrations to be able to reset the session data in an image. Web Connection includes a widget interface and a Web part which add this capability. Both classes are in the AbtWebSampleCatalogApp application. The start the widget interface, open the<br />
<br />
44<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
AbtWebSampleClearSessionDataUserInterface class and select the test button. The window shows the total number of session data elements ever created and the current number in the buffer. When session data elements time out, they are moved to the buffer. You can use the tool to refresh the values displayed, reset the session data, and inspect the session data dictionary. The Web part version of the tool is AbtSampleClearSessionDataPage. You can refresh values displayed and reset the session data using the Web part.<br />
<br />
Using Cookies A cookie is a named data value stored on a client and sent to the server by the web browser with an HTTP request. VisualAge Web Connection uses a CookieWrapper part that is a nonvisual part that holds persistent strings of data that you want to store in a cookie to use again later. Cookie support is only available in Web Connection if you are using either the Servlet interface of the Server Smalltalk interface. In VisualAge, cookies are managed by the CookieWrapper part as name/value pairs. When set or changed, the cookies are sent back to the web browser to be stored on the client. Cookies can be used in many different ways, from helping a Web site identify a specific person or client that has accessed the site before, to holding a set of information across several Web pages, such as a shopping cart for a catalog Web site. The cookie attribute of a CookieWrapper answers an AbtHttpCookie if you are using the Servlet interface, or an SstHttpCookie if you are using the Server Smalltalk interface. Note: The usefulness of cookies is dependent on how a userÆs Web browser is set up. Most Web browsers give the user the option to refuse saving cookies. It is important to keep this in mind when using cookies in your Web applications.<br />
<br />
Connecting to the nonvisual parts To implement your application’s program logic, you can make connections between the visual and nonvisual parts just as you would in any VisualAge application. However, in a Web Connection application, the connections are different from what they would be in an ordinary VisualAge application. Most notably, most of the connections will be to attributes and actions of Form Data, and not to the fields and controls in your user interface. The explanation for this lies in the way a Web application works. Each transaction in a Web application is triggered by a request from a client; but once a page is loaded, it remains static until it is replaced by the next page. Each page builds its contents based upon the information submitted on the previous page. The Form Data part is the gateway through which that information is made available.<br />
<br />
Example: Making the To-do List work After you have added and set up all of the visual and nonvisual parts for the To-do List application, you can implement the program logic by making connections between the parts. To do this, follow these steps: Chapter 6. Using the nonvisual parts<br />
<br />
45<br />
<br />
1. Connect the self attribute of the torn off OrderedCollection to the items attribute of the List part. 2. Connect the AddButton clicked event of the Form Data part to the add: action of the OrderedCollection. 3. Connect the entryField1 attribute of the Form Data part to the anObject attribute of the connection you made in step 2. The entryField1 attribute represents the string entered in the entry field in the form. 4. Connect the RemoveButton clicked event of the Form Data part to the remove: action of the OrderedCollection. 5. Connect the list1 attribute of the Form Data part to the anObject attribute of the connection you made in step 4. The list1 attribute represents the item selected in the list in the form. 6. Save the part and select<br />
<br />
, the test button, to test it.<br />
<br />
Note: Before you can test a Web Connection application, you must set up the Web Connection server interface. See “Setting up the Web Connection server interface” on page 7 for more information about setting up WSI.<br />
<br />
In the standard VisualAge version of the To-do List example, you connect the push buttons in the user interface directly to the actions of the OrderedCollection part. But in the Web Connection version of the application, these same connections originate from the events of the Form Data part. Remember that the To-do List application is actually a series of pages, each one showing the current contents of the list. Each page comes from the same VisualAge part (WebToDoList), but from the browser’s perspective, they are different pages. The actions of the OrderedCollection, therefore, are not triggered by the push buttons on the currently loaded page, but rather by the push buttons on the previous page. Likewise, the push buttons on the current page will affect the contents of the next page.<br />
<br />
Processing requests In a standard Web Connection part like the To-do List example in the previous chapters, incoming requests are processed automatically. Each request causes the part to process the incoming form data (if any) and generate HTML to be sent back to the client browser. However, not all application designs can be satisfied with this default behavior. The Web Connection feature provides several nonvisual parts that you can use to handle incoming requests in ways other than the default. The ways you might use these parts include:<br />
<br />
46<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
v v v v<br />
<br />
Using incoming requests to trigger processing that takes place with each request Conditionally routing requests to different pages Accessing the variables passed from the client Accessing data from forms not built with Web Connection<br />
<br />
Accessing request data The CGI Link Request part represents a request from a client browser. It provides a means of directly accessing an incoming request. A Web Connection part does not have to include a CGI Link Request part; but if it does, the CGI Link Server makes the information from the incoming request available through the CGI Link Request part. By connecting to the events and attributes of the CGI Link Request part, you can do the following: v You can retrieve the variables sent from the browser from the cgiVars attribute. These variables provide information such as the client and server software being used, the client host and user names, and authentication information (when available). v You can access all of the form data sent with the request, stored in a LookupTable, from the formData attribute. This provides an alternative to Form Data for getting access to the form data. You might want to use this method if you need access to all the form data in a LookupTable, or if the form submitting the request was not built with Web Connection. v You can use the requestReceived event to trigger actions that you want to execute each time a request comes in. For example, you might want to write an entry to a log file each time a request comes in. The requestReceived event fires with each request, regardless of whether the request results in HTML being generated.<br />
<br />
Routing requests to different pages In some applications, you might want to conditionally route an incoming request to different pages in different situations. For example: v If a user enters invalid data in a form, you can route the request to a page displaying an error message. v If your application requires users to log in, you can route first-time connections to a login page. v You can have requests routed to different pages depending upon which push button the user clicked on, or which selection was made in a list. The Page Wrapper part provides a way for you to do this. A Page Wrapper part represents another Web Connection part. If you want to route incoming requests to a different part, add a Page Wrapper part for each Web Connection part you want to route requests to. In the settings for Page Wrapper, specify the VisualAge part name of the Web Connection part represented by the Page Wrapper. Once you have set up the Page Wrapper part to represent another page, you can route the current request to that page by connecting to the transferRequest action of Page Wrapper. When transferRequest executes, the current request is immediately transferred to the specified part. The part containing the Page Wrapper does not generate HTML if the request is transferred to a different part. You can also use the transferRequestWith: action to transfer an object along with the request. You can specify any Smalltalk object as the parameter for transferRequestWith:. This makes it possible to supply additional information about Chapter 6. Using the nonvisual parts<br />
<br />
47<br />
<br />
the request as you transfer it. For example, if you are transferring the request to an error page, you might want to also specify an error string that describes the error. The page receiving the request can access the transferred object through the transferredObject attribute of the CGI Link Request part. If you transfer an incoming request to a different page through a Page Wrapper, the current page generates no HTML.<br />
<br />
Example: Routing requests This example shows how you can build a ″front-end″ application from which you can select from several Web Connection sample applications. This application consists of two parts: v A part containing a simple form. This part displays a menu page from which users can select which example they want to see. v A router part, which does not generate any HTML itself. Instead, it receives the request from the menu part and routes the request to the appropriate sample.<br />
<br />
Building the menu page 1. Create a new Web Connection part for the menu page. Call the part MyWebSampleChooser. (You can also look at the prebuilt sample, AbtWebSampleChooser. 2. The menu page is a straightforward Web Connection form part. In the Composition Editor, build the user interface as follows, using Form, Text, Rule, and Push Button:<br />
<br />
3. In addition to changing the labels, also change the names of the push button parts to the following: v ToDoListButton v AddingMachineButton v ChatButton 4. Save the part and close the Composition Editor.<br />
<br />
Building the router page 1. Create a new Web Connection part for the router page. Call the new part MyWebSampleRouter. 2. The router page will not generate HTML, so it does not require any Web Connection visual parts. (Optionally, you can include a Page with an error message, which will only be used if a user tries to connect directly to MyWebSampleRouter by URL.) In the Composition Editor, delete the default Page from the free-form surface. 3. Add a Form Data part to the free-form surface. 4. Open the settings of Form Data and specify MyWebSampleChooser as the part containing the form.<br />
<br />
48<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
5. Add three Page Wrapper parts to the free-form surface. These parts represent the three samples available from the menu. Change the names of the Page Wrapper parts to the following: v To-do List Wrapper v Adding Machine Wrapper v Chat Wrapper 6. In the settings of To-do List Wrapper, specify AbtWebSampleToDoList as the part containing the page. 7. In the settings of Adding Machine Wrapper, specify AbtWebSampleAddingMachine as the part containing the page. 8. In the settings of Chat List Wrapper, specify AbtWebChatList as the part containing the page. 9. Connect the ToDoListButton clicked event of the Form Data to the transferRequest action of To-do List Wrapper. 10. Connect the AddingMachineButton clicked event of the Form Data to the transferRequest action of Adding Machine Wrapper. 11. Connect the ChatButton clicked event of the Form Data to the transferRequest action of Chat Wrapper. 12. WebSampleRouterPart should look something like this in the Composition Editor:<br />
<br />
13. Save the part and test it using the<br />
<br />
button.<br />
<br />
Using multiple pages in the same part Another way to conditionally return different pages is to use multiple Page parts within one Web Connection part. You might consider this approach when the pages are closely related to one another and do not need to be accessed from multiple different places. Ordinarily, a Web Connection part contains no more than one Page part. Because there is only one Page, VisualAge automatically generates the HTML for that page when a request comes in (unless the request is transferred to another page with Page Wrapper or intercepted with CGI Link Request). However, a Web Connection part can contain multiple Page parts, just as a VisualAge part can have multiple windows. In this situation, you can conditionally control which of the Page parts will generate HTML when the part is accessed from a browser. This makes it possible for a single Web Connection part to generate different pages in different situations. When you build a Web Connection part with multiple pages, you must designate one of the pages as the primary part. (Again, this is comparable to the primary part of an ordinary VisualAge part.) By default, the first Page added to a Web<br />
<br />
Chapter 6. Using the nonvisual parts<br />
<br />
49<br />
<br />
Connection part is automatically designated as the primary part. You can choose another part by selecting Make primary part from the pop-up menu of another Page part. When a request comes in for a part containing multiple pages, VisualAge automatically generates HTML for the primary part unless you specifically trigger the generateHTML action of a different part. You can do this by making connections from the events of Form Data or from a script that is triggered by CGI Link Request. If there is not a Page part designated as the primary part, at run time the browser will display an error message reading No content was generated for this request. If this happens, you need to designate a primary part in your Web Connection part.<br />
<br />
|<br />
<br />
50<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
|<br />
<br />
|<br />
<br />
Chapter 7. Using Web Connection with other HTML Builders<br />
<br />
| | |<br />
<br />
The Web Connection HTML File Wrapper allows users to use other HTML builders, such as FrontPage, to construct HTML pages, but still use Smalltalk to perform the data manipulation and presentation for the HTML pages.<br />
<br />
| |<br />
<br />
Setting up the HTML File Wrapper<br />
<br />
| | | | | | |<br />
<br />
Generate the HTML code and place substitution tags where Smalltalk should provide output. The default substitution tag area is <% %>. Users can override the default substitution tag by changing the defaultStartMarker and defaultEndMarker variables of the AbtHtmlFileScanner class. For example:<br />
<br />
| | | | | | | | | |<br />
<br />
When you generate the HTML file wrapper, the substitution area becomes a VisualAge Smalltalk attribute. For example:<br />
<br />
| | | |<br />
<br />
When you generate the HTML file wrapper for the above HTML document, hello.htm, the resulting class contains two attributes, HelloText and VarText. You can override the default attribute names from the HTML File Wrapper Generator window.<br />
<br />
AbtHtmlFileScanner defaultStartMarker: '<:' ; defaultEndMarker: ':>'.<br />
<br />
<HTML> <HEAD> </HEAD> <BODY> <%HelloText%> <%VarText%> </BODY> </HTML><br />
<br />
© Copyright IBM Corp. 1997, 2000<br />
<br />
51<br />
<br />
Generating the HTML file wrapper<br />
<br />
|<br />
<br />
| To generate the HTML file wrapper for hello.htm, follow these steps 1. In the VisualAge Organizer, select Generate → HTML file wrapper from the Parts menu. 2. In the entry field for HTML file information, specify hello.htm. 3. Check the Save Path checkbox to save the path information. 4. In the entry field for Class name, specify HelloFileWrapper. 5. In the Name field, select the VarText attribute in order to change the default name of the VarText attribute. v Select Change Name... to change the default name of the attribute. The Information Required window is displayed. v Change the name to GoodbyeText. v Select OK to close the Information Required window. 6. Select Generate to generate the HTML file wrapper. 7. Select Close to close the HTML File Wrapper Generator window.<br />
<br />
| | | | | | | | | | | | | |<br />
<br />
52<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
|<br />
<br />
Using the AbtHtmlFileWrapper subclass<br />
<br />
| | | | | | | | | | | | | | | | | | | | | | | | |<br />
<br />
Now you can use the HelloFileWrapper class to build a Web Connection part that uses an instance of the file wrapper. This part will substitute two text strings for the attributes HelloText and GoodbyeText of the file wrapper HelloFileWrapper1. 1. In the VisualAge Organizer, create a new part. For Part type, select Web Connection part. 2. Open the Composition Editor on the new part. You should see a single subpart, a Page. 3. Delete the Page part. 4. Select Add Part from the Options menu. v Specify HelloFileWrapper for the Class Name. v Select OK to add the part and close the Add Part window. 5. Place the HTML file wrapper, HelloFileWrapper1, within the free-form surface. 6. Go to the Web Connection category and select Text. Place the Text part within the free-form surface. 7. Open the settings of the Text part. Set the partName to read TextforHello. Set the object to read Hello, World! 8. Make a connection from the HelloText attribute of the HelloFileWrapper1 part to the string attribute of the Text part. 9. Go to the Web Connection category and select Text. Place the Text part within the free-form surface. 10. Open the settings of the Text part. Set the partName to read TextforBye. Set the object to read Goodbye, World! 11. Make a connection from the GoodbyeText attribute of the HelloFileWrapper1 part to the string attribute of the Text part.<br />
<br />
Chapter 7. Using Web Connection with other HTML Builders<br />
<br />
53<br />
<br />
12. Save the part. Select the test button, , to test the part. 13. After the page loads, the text Hello, World! and Goodbye, World! appears in your Web browser at the location of the substitution tags that you specified in the HTML document.<br />
<br />
| | | |<br />
<br />
Caching HTML pages<br />
<br />
|<br />
<br />
If you invoke certain HTML pages frequently, set the cacheHtml setting to true to cause the HTML file to be read in once and cached in memory. The default setting is false. For example:<br />
<br />
| | | | | |<br />
<br />
HelloFileWrapper cacheHtml: true<br />
<br />
Using Form Data The HTML file wrapper generator parses the HTML <INPUT> tags to construct a class method named defaultFormDataInterface. This method allows the form data of the wrapped file to be exposed with the form data of the Web Connection Part that contains the HTML file wrapper.<br />
<br />
| | | |<br />
<br />
Static form data<br />
<br />
| | | | | | | | | | | | | | | | | | | | | | | | | | |<br />
<br />
To add static form data to a Web Connection part, do the following: 1. Create an HTML file with <INPUT> tags. For example:<br />
<br />
| |<br />
<br />
The Form Data for the HelloWithForm part now contains the form data of the HTML file that was wrapped by the HTML file wrapper.<br />
<br />
<HTML> <HEAD>Hello and Goodbye World Form </HEAD> <BODY> <FORM METHOD="POST"> <INPUT TYPE="text" SIZE="20" NAME="HelloText"> <INPUT TYPE="text" SIZE="20" NAME="GoodbyeText"> </FORM> </BODY> </HTML><br />
<br />
2. Generate an HTML file wrapper class named HelloFormWrapper for the HTML file. See “Setting up the HTML File Wrapper” on page 51. 3. 4. 5. 6.<br />
<br />
Create a new Web Connection part of class HelloWithForm. Delete the Page part. Add a part of class name HelloFormWrapper. Place the HTML file wrapper part, HelloFormWrapper1, within the free-form surface.<br />
<br />
7. Select Form Data from the Web Connection category. Add the Form Data part to an empty area within the free-form surface. 8. Select the Form Data part and open the Properties window to show the Form Data part’s properties. 9. Select the pagePart property. In the Value field, select HelloWithForm to specify the class of the Form Data part. 10. Close the Properties window.<br />
<br />
Dynamic form data<br />
<br />
|<br />
<br />
If the HTML code dynamically creates <INPUT> elements, the HTML file wrapper generator cannot automatically create form data entries. However, the developer<br />
<br />
| |<br />
<br />
54<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
| | | | | | | | | | | | | | | | | | | | | | | |<br />
<br />
can add the desired form elements as attributes by overriding the class method abtHtmlFormDataInterface of the HTML file wrapper interface. For example, the overridden method could be coded as follows: abtHtmlFormDataInterface |myEntries| myEntries:=Dictionary new. myEntries at: 'ButtonZ' put:AbtHtmlPushbutton; at: 'ListX' put: AbtHtmlList. |super abtHtmlFormDataInterface addAll:myEntries; yourself<br />
<br />
Using Session Data By default, HTML file wrapper parts do not save session information. To handle session data, each <FORM> tag of an HTML file wrapper must contain a <%sessionTagString%> substitution tag. HTML file wrappers then inherit the sessionTagString attribute from their superclass. At runtime, the Web Connection session information is automatically substituted for the sessionTagString attribute. This substitution enables usage of the Web Connection session data parts with HTML file wrappers.<br />
<br />
Making Changes to the Page Layout, File Name, or Path<br />
<br />
| |<br />
<br />
If you change the layout, file name, or path of the HTML file used by the HTML file wrapper, you may need to make changes to the .ini configuration file.<br />
<br />
| | | |<br />
<br />
The .ini configuration file is a series of keywords and values that are processed when you start your image. The installation process should have created a working configuration file for you. The default configuration file is abt.ini. The abt.ini file is in the main VisualAge directory on your workstation.<br />
<br />
| | |<br />
<br />
When you generate the HTML file wrapper, methods containing default information are generated. You can override the default values by editing the .ini file.<br />
<br />
| | | | | | |<br />
<br />
To edit the .ini file, open it in a text editor. The HTML file wrapper keywords and values are located under the heading [Html File Wrappers]. For example:<br />
<br />
| |<br />
<br />
The following sections describe the .ini file keywords and values for the HTML file wrapper.<br />
<br />
|<br />
<br />
[Html File Wrappers] DefaultFilePath=c:\workspce\webconn\v6\filewrapper HelloFileWrapperFileName=c:\workspce\webconn\v6\filewrapper\hello.htm HelloFileWrapperParms=HeloText, varText<br />
<br />
Page layout changes<br />
<br />
| | | |<br />
<br />
If you change the layout of the HTML page but do not change the variable order of the HTML page, be sure the variable substitution tags are properly positioned in the modified HTML file. In some cases, HTML page layout changes can be made without changes to the Web Connection parts.<br />
<br />
| |<br />
<br />
If you change the layout and variable order of the HTML page, update the .ini file variable to reflect the new variable order. The name of the .ini variables Chapter 7. Using Web Connection with other HTML Builders<br />
<br />
55<br />
<br />
matches the class name of the wrappered class plus the suffix Parms. For example, if you reverse the page order of the HelloText and varText variables of the HTML file wrapper class HelloFileWrapper, change the HelloFileWrapperParms value as follows:<br />
<br />
| | | | | | |<br />
<br />
[Html File Wrappers] HelloFileWrapperParms=varText, HelloText<br />
<br />
File name or absolute path changes<br />
<br />
| | | |<br />
<br />
The HTML file wrapper class, AbtHtmlFileWrapper, first tries to open the HTML file name as specified. If the file open fails, AbtHtmlFileWrapper then tries to open the file using the DefaultFilePath as the prefix for the file.<br />
<br />
| | | | | | |<br />
<br />
Use the DefaultFilePath in the application’s .ini file to specify the file directory for HTML file names stored in a common directory. Be sure to uncheck the Save path setting in the HTML File Wrapper Generator window in order to save the HTML file name without any path information. For example:<br />
<br />
| | | | | | |<br />
<br />
You can also specify the source file name in the application’s .ini file. The name of the .ini variable is equal to the class name plus the suffix FileName. To specify the HTML file name for the HelloFileWrapper class, change the HelloFileWrapperFileName value as follows:<br />
<br />
[Html File Wrappers] DefaultFilePath=c:\workspce\webconn\v6\filewrapper<br />
<br />
[Html File Wrappers] HelloFileWrapperFileName=c:\workspce\webconn\v6\filewrapper\hellochange.htm<br />
<br />
56<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
|<br />
<br />
Chapter 8. Working with database queries The Web Connection feature provides a Table part, which is designed to display tabular database data in rows and columns. The Table part generates the HTML element <table>. The Table part is designed to be used in conjunction with the VisualAge database query parts. Specifically, the columns in the Table, which are represented by Table Column parts, use the public interface of the VisualAge part AbtMultiRowResultTable. This makes it possible to quickly set up HTML tables to display the results of database queries. In most respects, the Table and Table Column parts behave very much like the base VisualAge parts Container Details and Container Details Column. Refer to the VisualAge Smalltalk User’s Guide and VisualAge Smalltalk Parts Reference for more information about Container Details and Container Details Column. Note: In HTML, you can use <table> tagging with text and graphics in order to implement a visual page layout. The Table part does not support this use of tables; instead, use the Grid part for this purpose.<br />
<br />
Setting up a table There are two ways to set up a Table part on your page: v Manually building the table by adding Table Column parts and editing their settings v Automatically building the table by using the Quick HTML menu choice In most situations, Quick HTML is the fastest and easiest way to build a table to display the results of a database query.<br />
<br />
Setting up a multi-row table manually To manually set up a Table, follow these steps. 1. Set up your database query using the VisualAge Multiple Row Query part. 2. Select Table from the Web Connection category. Place the Table part on the Page. 3. Select Table Column from the Web Connection category. Place the Table Column within the Table part. Repeat this step until you have added a column for each column in the result table that you want to display. 4. Open the settings of each Table Column part and specify the attribute displayed in each column. (A result table part has an attribute for each column in the table.) 5. Tear off the resultTable attribute of the Multiple Row Query part. 6. Connect the rows attribute of the result table part to the items attribute of the Table part. 7. Connect the aboutToGenerateHtml event of the Page to the executeQuery action of the Multiple Row Query. This causes the query to execute before the page is built, populating the table with data at run time.<br />
<br />
© Copyright IBM Corp. 1997, 2000<br />
<br />
57<br />
<br />
Setting up a multi-row table with Quick HTML The Quick HTML choice on the a part’s pop-up menu is similar to the Quick Form choice in the base VisualAge product. With Quick HTML, you can, in a single step, create an appropriate set of user-interface controls for a nonvisual part, along with the necessary connections between the nonvisual and visual parts. Quick HTML automatically performs the steps in the manual procedure described above. To use Quick HTML to set up a table to display the results of a multi-row database query, follow these steps: 1. Set up your database query using the VisualAge Multiple Row Query part. (Refer to the VisualAge Smalltalk User’s Guide for more information.) 2. Select Quick HTML from the pop-up menu of the Multiple Row Query part. 3. When prompted, select the resultTable attribute from the list. VisualAge automatically tears off the resultTable attribute and loads the mouse pointer with the Table part. 4. Place the Table on the Page. The new table should have a column for each column in the database result table, with all of the correct settings. (You can delete columns that you do not want to display.) 5. Connect the aboutToGenerateHtml event of the HTML Page to the executeQuery action of the Multiple Row Query. After you save the part, you should be able to test using the test button. Note that not all Web browsers support <table> tagging, so be sure your users have an appropriate browser before you use tables in your application. Note: In the Composition Editor, Table parts appear with scroll bars, because of the edit-time behavior of the visual part. However, as rendered in Web browsers, HTML tables are not scrollable and do not have scroll bars. At run time, a table will expand to accommodate all of the rows and columns it displays. This can be larger than the size of the browser window, in which case users might have to scroll through the page in order to see all of the table.<br />
<br />
Displaying single-row queries The Quick HTML function also provides a way to quickly set up a table to display the contents of a single row in a database. This function is useful for data entry applications, where you might want to display or change all of the fields in a database row. For single-row queries, Quick HTML builds a table that displays a label and an entry field for each column in the row. This makes it possible to build a user interface in which end users can edit the contents of the fields in the row, and then submit the changes for processing by another page. Because Quick HTML uses entry fields for this, you must place the generated table for a single-row query inside a form. To display the results of a single-row query, follow these steps: 1. Set up your database query using the VisualAge Single Row Query part. 2. Select Quick HTML from the pop-up menu of the Single Row Query part. 3. When prompted, select the resultRow attribute from the list. VisualAge automatically tears off the resultRow attribute and loads the mouse pointer with the generated table. 4. Place the generated table within a form on the Page.<br />
<br />
58<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
At edit time, the table generated for a single-row query appears as HTML tagging rather than as a Table part. To see how the table looks at run time, test it with your Web browser. 5. Connect the aboutToGenerateHtml event of the HTML Page to the executeQuery action of the Single Row Query.<br />
<br />
Adding selection tables and selection columns You can use the selectionStyle property to make selection columns in a table. When you set selectionStyle to either multipleSelect, each row in the column is prefixed with a checkbox. If you set selectionStyle to singleSelect, each row in the column is prefixed with a radio button. The default for selectionStyle is none. The formData part for a form with a selection table has connections for items in the selection columns in that form. When you connect from the selection column part name, the value will be an OrderedCollection of strings for the items selected in the column. In a single select column, the OrderedCollection will only have one element.<br />
<br />
Adding generic objects to a table The rows of a table column are obtained by getting an attribute from the item representing the row of the table. The attribute class can be a String or any other object. If the attribute class is not a string, then the following methods are used to find the value to use in the table: abtGenerateHtmlIntoTable: aTable column: aTableColumn rowNumber: anInteger abtGenerateHtml printString<br />
<br />
These methods should answer a data value or HTML value which is placed in the table at the row and column where the object is found. If the attribute is a subclass of AbtHtmlPart, for example, AbtHtmlEntryField, then the proper methods will have already been implemented so that they render properly. This allows you to create a table where one column is entry fields. So, for example, an attribute can answer an entry field using the code: |AbtHtmlEntryField new string: (self initialValueString); yourself.<br />
<br />
To get the form data from a column of entry fields, the attribute #containsFormElements should be set to true. In this case, the form data for the column will appear as an attribute of the FormData part as the connection columnNameFormDataDictionary where the columnName is the part name of the column. This FormData property is a dictionary of input from the column, where the key is a integer index of the row which contained the data, and value is the String value specified in that row. This processing is shown in the application AbtWebSampleCatalogApp where class AbtWebSampleCatalogItem has an attribute quantityOrderedEntryField that answers an instance of an entry field. The part AbtWebSampleEntryFieldCatalogPage has a column (″Order″) in the first table which uses these entry fields. The FormData property for this column is processed in the page by the getOrderItemsFromFormDictionary:queryResult:currentOrder: script. Note in order to match the integer index value from the form data to an actual table item, the collection of items represented in the table are stored in a session data part. In this way, the query does not have to be repeated. Chapter 8. Working with database queries<br />
<br />
59<br />
<br />
Using this approach, complex tables of form elements can be built.<br />
<br />
60<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Chapter 9. Packaging a Web Connection application After you have finished developing and testing your application, you can package it into a runtime executable for installation on your server. By packaging your application, you can avoid having to put the entire VisualAge development environment on your HTTP server after your application is in production. Packaging a Web Connection application into a runtime executable is basically the same as packaging any VisualAge application, but there are a few extra things you need to do.<br />
<br />
Creating a runtime image Packaging a Web Connection application is essentially the same as packaging any VisualAge application. To package your application, follow these steps: 1. Make sure you have versioned and released the classes in your application, and that you have listed any required prerequisites. 2. In the VisualAge Organizer, select the application you want to package. Then select Make Executable from the Applications menu, or from the pop-up menu in the Applications list. 3. Because a Web Connection application contains no ordinary visual parts, VisualAge asks if you want to continue with packaging. Select Yes. 4. Confirm that Make Executable is selected, and make any necessary corrections to the list of prerequisite applications. When everything is correct, select OK to initiate packaging.<br />
<br />
Setting up the runtime system Once you have packaged the runtime image of you application, you can install it (along with the other required VisualAge files) on your server. Refer to the VisualAge Smalltalk Web page for more information about the files required on a runtime system. In addition to the files required for any VisualAge application, a Web Connection application also requires certain files. Please check our Web page for the required files (http://www.software.ibm.com/ad/smalltalk). Note: The WSI Monitor is no longer included in the prerequisites for Web applications by default. In order to include the monitor in a packaged application, modify the prerequisites for Web applications to include the application AbtRunHtmlPageApp. If a server configuration file is used, the application AbtWebServerInterfaceBaseFileApp must also be included in the packaged image. Packaged images that include AbtRunHtmlPageApp will also include AbtWwebServerInterfaceBaseFileApp by default. For applications that use a configuration file but do not use the WSI Monitor, include the application AbtWebServerInterfaceBaseFileApp in the packaged image. Remember that you must also set up the WSI and its configuration file on your HTTP server. See “Setting up the Web Connection server interface” on page 7 for information on setting up WSI. Start a Web Connection application just as you would start any packaged VisualAge application. If you packaged the WSI Monitor with your application, the © Copyright IBM Corp. 1997, 2000<br />
<br />
61<br />
<br />
WSI Monitor will open when the application starts. You can then use the monitor window to start a server process, just as when you start the server in a development environment. You will not see any windows on the local screen except for the server process window. If you do not want to start a server process manually after the application starts, you can use optional command-line arguments to specify the WSI Smalltalk server start-up parameters. (These same arguments are also valid when starting a development image.) The complete syntax for the optional Web Connection command-line arguments is as follows: abt -wc:fileName<br />
<br />
Replace fileName with the name of a file containing server configuration information. (See “Server configuration file format” for information about the format of a server configuration file.)If you want to start multiple WSI server processes on different ports, you can do so by specifying multiple -wc:fileName strings (separated by spaces) on the command line.<br />
<br />
Server configuration file format The server configuration files specified by the -wc:fileName command-line argument must adhere to the following format: v Blank lines are ignored. v Any text beginning with a # character, continuing through the end of the line, is ignored. v Each line consists of a key-value pair, where the first nonblank word is they key and the rest of the nonblank text is the value. v The following are the valid keys and their valid values: Key<br />
<br />
Value<br />
<br />
transport wsi-tcp port<br />
<br />
The TCP/IP port number to start the server on. Required.<br />
<br />
reuseAddr true or false, indicating whether to reuse the port if it is already in use. Optional; the default is false. bindToHost The name of the interface to bind the server socket to. Optional; the default is the bind to all available interfaces. showMonitor true or false, indicates whether the Web Server Monitor window is displayed in the packaged image. The default is false. monitorTitle The name of a specific image. This is useful for installations where multiple Web Connection images will run concurrently. Set the monitorTitle to a string that uniquely identifies the image. This allows multiple monitors to open. generateWalkback true or false, indicates whether to generate a walkback.log file if there is an error in the pacakged image. The default is false. WsiPassword Specifies a password to be used with the AbtWebWsiRemoteControlPage.<br />
<br />
62<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Chapter 10. Using Web Connection for server applications This chapter describes VisualAge Smalltalk’s capabilities on OS/390 with regards to the World Wide Web. We will cover the highlights and basic steps for running a VisualAge Smalltalk web application on an OS/390 system, including setting up your web server, configuring the web server interface, and packaging your VisualAge Smalltalk application to run on OS/390. Using VisualAge Smalltalk and Web Connection, an application running on OS/390 can provide a rich graphical user interface to a thin client with a web browser. This means that there is no client part of the application to manage. An application of this type can be managed entirely on the OS/390 server. The following major topics are available: v “Setting up Web Connection for OS/390”, which includes “Setting up the Web Connection server interface” on page 7. v “Running a VisualAge Smalltalk web application” on page 64 v “More information about VisualAge Smalltalk web applications and OS/390” on page 65<br />
<br />
Setting up Web Connection for OS/390 Before you can run your web applications on an OS/390 system, you have to configure your interface to your web server as well as the web server so the two pieces can talk to each other. To set up your web server interface (WSI), you need the following data sets from the VisualAge Smalltalk Server for OS/390 tape: ABTWSAI WSI standalone executable WSICNF WSI configuration file WSIHTM WSI error format file (optional) A web server interface is a program that interfaces to a VisualAge server program running in the background.There are two web server interfaces, a Servlet interface and an ICAPI interface. The servlet interface requires a Web server that supports servlets, for example IBM WebSphere Application Server. For information on setting up the Servlet interface, see “Setting up the Servlet interface” on page 8. For information on customizing the WSI configuration file, see “Customizing the WSI configuration file” on page 13.<br />
<br />
Setting up the ICAPI web server interface The Lotus Go Webserver for OS/390 must be configured to properly handle and route requests for the VisualAge server program. The Go Webserver is designed to use HFS files in OS/390. This means that you must create a directory to put the WSICNF file into as well as create a symbolic link for the executable module. In an OMVS shell, do the following: © Copyright IBM Corp. 1997, 2000<br />
<br />
63<br />
<br />
1. Create an HFS directory for the configuration file (WSICNF) and error format file (WSIHTM). For example: /usr/lpp/wsi. 2. FTP the web server interface configuration files to the directory. Note: The web server interface files are installed in a webconn of the VisualAge client. You can rename these files, for example from abtwsi.* to mywsi.*. If you do this, you must reflect their new location and name in the ABTWSI_BASENAME field in the abtwsi.pro file. For example, if you renamed the files from abtwsi* to mywsi*, you would need to point to <path>/mywsi in the ABTWSI_BASENAME field. 3. Create an external symbolic link in the Go Webserver cgi-bin directory that links to the ABTWSAI executable, which is in an MVS load library. For example, from your Go Webserver cgi-bin directory, ln -e ABTWSAI abtwsai.so. For more information about creating external symbolic links, refer to the OS/390 Open Edition MVS User’s Guide. In TSO, do the following: 1. Edit the Go Webserver start up PROC (IMWEBSRV). 2. Modify the STEPLIB concatenation in IMWEBSRV to include the load library containing ABTWSAI. 3. Add the following statements to IMWEBSRV: //ABTCNF //ABTHTM //ABTLOG<br />
<br />
DD PATH='/usr/lpp/wsi/abtwsi.cnf',PATHOPTS=(ORDONLY) DD PATH='/usr/lpp/wsi/abtwsi.htm',PATHOPTS=(ORDONLY) DD SYSOUT=*<br />
<br />
From the Go Webserver configuration and administration page, update your HTTP server configuration by doing the following: 1. Start your web server. 2. Open a web browser and point it to your server location (the hostname of the server). 3. On the Go Webserver page, select Configuration and Administration Forms. 4. On the Configuration and Administration page, select GWAPI Application Processing. 5. On the GWAPI page, for ServerInit, specify the server initialization directive. For example: /webserver/cgi-bin/abtwsai.so:AbtWsiServerInit<br />
<br />
6. For ServerTerm, specify the server termination directive. For example: /webserver/cgi-bin/abtwsai.so:AbtWsiServerTerm<br />
<br />
7. Apply the changes. 8. On the Configuration and Administration page, select *Service in the Action drop-down list. 9. For the URL request template, specify /abtwsi*. 10. For Replacement file path, specify the service directive. For example: /webserver/cgi-bin/abtwsai.so:AbtWsiService*<br />
<br />
11. Apply the changes and restart the web server.<br />
<br />
Running a VisualAge Smalltalk web application Now you’re ready to start using VisualAge Smalltalk. To run a VisualAge Smalltalk web application on your OS/390 system, do the following: 1. Create your web application in VisualAge Smalltalk.<br />
<br />
64<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
2. 3. 4. 5. 6.<br />
<br />
Create a new application. Then, in the Composition Editor, create your web application using any parts that run in an MVS Native environment. In VisualAge Smalltalk, create an MVS Native passive image. When you create the MVS image, include the Web Connection feature. Open the passive image and load your web application. Make sure you load all of the classes needed for runtime. Package the application, including your web application. For more information on packaging, see VisualAge Smalltalk Server Guide. Upload your packaged image to an OS/390 dataset. Create an executable load module for the packaged MVS image. See the VisualAge Smalltalk Server Guide.<br />
<br />
7. Run the executable load module. The load module will run in the background waiting for input from the web server. For more information, see the VisualAge Smalltalk Server Guide. 8. Start your web server. 9. Point your web browser to your application using the following format: http://hostname/abtwsi/classname<br />
<br />
More information about VisualAge Smalltalk web applications and OS/390 When creating a VisualAge web application for OS/390, you can use all of the parts in the Web Connection Parts and Web Form Parts categories. All visual parts, those parts that are visible on the web page, are placed on an HTML Page part. All web parts that receive or store input, usually from a previous page, must be placed within an HTML Form part. The web application can also access VSAM and non-VSAM data sets, DB2, MQSeries, TCP/IP, CICS transactions, and other programs written in COBOL, C, or PL/I. OS/390<br />
<br />
Web Browser<br />
<br />
Lotus Go Webserver<br />
<br />
Web Server Interface<br />
<br />
VisualAge Web Application<br />
<br />
Data<br />
<br />
CICS Transaction<br />
<br />
COBOL Module<br />
<br />
Data<br />
<br />
Data<br />
<br />
You can use Smalltalk to write program logic that does any of the following: v Starts a CICS transaction v Retrieves input from a web page v Reads from or writes to an OS/390 database v Calls non-Smalltalk programs v Maintains session data v Passes results to web parts for display. Some examples of what you can do with VisualAge Smalltalk and VisualAge Smalltalk Server for OS/390 are: v Create a new application that uses centralized OS/390 databases and interfaces with the user via a web browser.<br />
<br />
Chapter 10. Using Web Connection for server applications<br />
<br />
65<br />
<br />
v Call existing OS/390 COBOL application modules from a new web application front-end using the COBOL language feature of VisualAge Smalltalk. v Port an existing web connection application on Windows, OS/2, or AIX that did remote access to OS/390 databases or transactions and change the remote access to direct access.<br />
<br />
66<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Chapter 11. Tools VisualAge Web Connection includes several tools to make creating Web Connection applications easier. These tools are: v HTML Test and Profiler v Envy/Stats Profiler<br />
<br />
Viewing generated HTML The HTML Test and Profiler window lets you view the HTML generated from a page without going through an HTTP server. The HTML can be saved in a file and browsed from a web browser. This makes it possible to test the layout of your pages without having an HTTP server installed or running. To start the HTML Test and Profiler, open the AbtHtmlTestWindow class in theAbtWebHtmlTestApp application. Select the test button. In the Web Part field, enter the name of the part for which you want to view the HTML and select Show HTML. If you want to save the HTML to a file so you can view it in your web browser, select Show HTML and Save to File. With the HTML Test and Profiler window, you can only test one page at a time. If this page is in the middle of your application, you may have to modify the page to set the initial values to make the profiling work. For example, if you want to profile a credit card verification page and it expects the credit card information to be obtained from another page, you may have to make a special edition of your page to set the credit card value to a test value before running the profiler. This special edition would only be used for testing.<br />
<br />
Envy/Stats The WSI Monitor window and the HTML Test and Profiler window both include an Envy/Stats checkbox. If you load the Envy/Stats config map from the Configuration Maps browser, the checkbox will be enabled. When you select Profile using ENVY/Stats, the Profiler iterations field becomes enabled. This allows you to specify how many times you want ENVY/Stats to iterate through the Web Connection part. If you specify a high number, the time it takes the Web Connection part to render in the Web browser will be longer than if you do not profile or if you profile with a small number of iterations. When the Web part is processed to generated HTML, the process will be profiled using the Envy/Stats EsbSampler spyOn: method. After the part has been generated, an Envy/Stats Method Execution Trace browser is opened. This shows a tree view of the methods detected to have been executed during processing and the time spent in each method. Note that the EsbSampler uses a timer to periodically sample which methods are executing. The results from this way of profiling may not show every method that is executed because some methods can execute between timer ticks. For simple web parts on fast machines, profiling the execution may show that no methods were executed. This of course is an anomaly of the sampling method. However, the profiling should show the time spent in file I/O, database transactions, and other more expensive methods of your application, thus letting you optimize your code. © Copyright IBM Corp. 1997, 2000<br />
<br />
67<br />
<br />
68<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Chapter 12. Advanced topics The Web Connection feature provides programming interfaces through which advanced users can access low-level features from Smalltalk. These interfaces are not necessary for most Web Connection applications, but can be helpful in some specialized situations. By using the Smalltalk interfaces, you can access detailed request information, control the creation of session data, and generate HTML.<br />
<br />
Accessing request information Several classes are involved in handling an incoming request. When a Web Connection part is instantiated as part of a request, an AbtWsiTransaction object is created and associated with the part. The AbtWsiTransaction object contains references to two other objects, an AbtWsiRequest object which models the request data, and an AbtWsiResponse object which models the response data. These classes provide methods you can use to access various data associated with the request. Following is a description of these classes and their methods.<br />
<br />
AbtAppBldrHtmlPage instance methods This class is the superclass of all Web Connection parts. transaction Answers the instance of AbtWsiTransaction associated with the request that caused the part to be instantiated.<br />
<br />
AbtWsiTransaction instance methods request Answers the instance of AbtWsiRequest associated with the transaction. response Answers the instance of AbtWsiResponse associated with the transaction.<br />
<br />
AbtWsiRequest instance methods wsiVars Answer a LookupTable which contains variable names as keys, and the values of those variables as values. Note that the content received via standard input from the program is available in the variable XWSI_CONTENT_DATA. formDict Answer a LookupTable with form data fields as keys, and the value of those form data fields as the values. Note that the values will always be an OrderedCollection of Strings.<br />
<br />
AbtWsiResponse instance methods content: aString1 contentType: aString2 Set the content and Content-type of the response. aString1 should be a String or ByteArray. aString2 should be a valid MIME type (such as text/html).<br />
<br />
© Copyright IBM Corp. 1997, 2000<br />
<br />
69<br />
<br />
Session data If your part does not need to use session data, you can implement the class method canGenerateSessionKey to return false. If you do this, a session key will not be generated when the part is requested. The AbtWsiTransaction class implements two methods to return session data and the session key associated with the session associated with the transaction. sessionData Answers the session data object associated with the transaction. sessionDataKey Answers a string which is the key associated with this session data.<br />
<br />
Generating HTML from Smalltalk The Web Connection feature provides a stream class called AbtHtmlWriteStream. This stream is a subclass of WriteStream and implements the following instance methods: nextPutAll: aString Writes aString to the stream, but writes HTML entities for the characters <, >, ″, and &. nextPutAllLiteral: aString Writes aString to the stream without translations of special characters to HTML entities.<br />
<br />
Error handling AbtWsiConfiguration class methods errorHandler: aClass When an exception occurs during the processing of a request, the following processing occurs: v The class specified by the errorHandler: method is used to generate the output for the page. This class should be a normal Web Connection part. The processing which occurs for this page is the same as if the page had been requested normally. v After the error page is generated and sent back to the server, the exception is signaled which will generally bring up a debugger. In packaged runtime images, the exception is not signaled. errorHandler Answers the Web Connection part class set by the errorHandler: method. notFoundHandler: aClass When a request is received which corresponds to a part which is not in the current image, the class specified by the notFoundHandler: method is used to generate the output for the page. This class should be a normal Web Connection part. The processing which occurs for this page is the same as if the page had been requested normally. notFoundHandler Answers the Web Connection part class set by the notFoundHandler: method.<br />
<br />
70<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
AbtAbtBldrHtmlPage class methods transactionMustBeSerialized Each request received from the server is processed in a new Smalltalk process, which implies that multiple requests may be being processed concurrently within an image. If this causes a problem because the processing your part does is not Smalltalk process reentrant, the transactionMustBeSerialzed method can be implemented on your part to return true. The WSI server ensures that at most one Web Connection part that answers false to transactionMustBeSerialized is running at a time.<br />
<br />
Chapter 12. Advanced topics<br />
<br />
71<br />
<br />
72<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Chapter 13. Web Connection category The Web Connection<br />
<br />
category contains the basic visual and nonvisual HTML parts that you can use to build a Web page. The parts in this category can be used either inside or outside a form.<br />
<br />
Visual Parts<br />
<br />
Text<br />
<br />
Image<br />
<br />
Line Break<br />
<br />
Paragraph<br />
<br />
Horizontal Rule<br />
<br />
Applet<br />
<br />
Embed<br />
<br />
Grid<br />
<br />
Table<br />
<br />
Table Column<br />
<br />
Script<br />
<br />
Page<br />
<br />
Frame Set Page<br />
<br />
© Copyright IBM Corp. 1997, 2000<br />
<br />
73<br />
<br />
Composite<br />
<br />
Layer<br />
<br />
Division<br />
<br />
Style Sheet<br />
<br />
Text Use the Text part to add text to a Web page. The text can wrap across multiple lines. You must use a separate Text part for each block of text you want to appear with special formatting (such as underlining or italics) or with a hypertext link. To add a Text part, select the Web Connection Category (<br />
<br />
), then the Text part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlText.<br />
<br />
Text Properties The Text part has the following properties: v bold v converter v eventHandlers v extraAttributes v fontSize v foregroundColor v headerLevel v italic v link v literal v object v partName v preformatted v string v typewriter bold<br />
<br />
Use the bold property to indicate whether you want the text to appear in a bold font. Depending upon the default edit-time font, you might not see the text appear in a bold font at edit time. This property is equivalent to the HTML b tag.<br />
<br />
converter Use the converter property to specify the converter to use for the part. A converter is an object that manages the conversion of other objects to and from their display format for certain visual parts, such as a Text part. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur<br />
<br />
74<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. fontSize Use the fontSize property to specify the size of the font you want to use for the text specified in this part. Valid values are any integer between 1 and 7. The specific size of the font at run time depends upon the browser defaults. This property is equivalent to the size attribute of the HTML font element. foregroundColor Use the foregroundColor property to specify the text color of the text on the page. (Some browsers might not support changing text color.) This property is equivalent to the color attribute of the HTML font element. headerLevel Use the headerLevel property to specify the level of text for a heading. Valid values are the integers from 1 to 6. (If the text is not a heading, set this property to <Default>.) This property is equivalent to the HTML h1 through h6 elements. italic<br />
<br />
Use the italic property specifies whether or not you want the text to appear in italic type face. This property is equivalent to the HTML i tag.<br />
<br />
link<br />
<br />
Use the link property to specify where you want to link to from a text or image. If you do not want to place a link on the text or image, leave this property blank. This property is equivalent to the href attribute of the HTML a (anchor) element.<br />
<br />
literal Use the literal property to indicate whether the text of the part is to be passed to the Web browser exactly as you typed it. Set literal to true if you want to include HTML tagging in the text. The Web browser must be able to interpret and display the text at run time. Use this property if you want to use HTML tagging that is not directly supported by VisualAge. At edit time, literal text is displayed in a monospaced font by default. You can specify a different font using the Preferences window. object Use the object property to specify the text you want displayed by this Text part. The text can be a single word or multiple words and can wrap across multiple lines. Note: If you specify a link destination with the link property, all of the text you type in this field is placed within the link. You must use separate Text parts to create individual links within a sentence. Chapter 13. Web Connection category<br />
<br />
75<br />
<br />
partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. preformatted Use the preformatted property to specify that the text should appear exactly as it is typed, with line breaks preserved. Most browsers use a monospaced font to display preformatted text. This property is equivalent to the HTML pre tag. At edit time, a monospaced font is used as the default. You can specify a different font using the Preferences window. string Use the string property to specify a script. Use this property when your script is small and you want it generated in line with the HTML. typewriter Use the typewriter attribute to indicate that the text should be displayed in a typewriter font. This property is equivalent to the HTML tt tag. At edit time, a monospaced font is used as the default. You can specify a different font using the Preferences window.<br />
<br />
Image Use the Image part to add a graphic to a Web page. To add an Image part, select the Web Connection Category (<br />
<br />
), then the Image part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlImage.<br />
<br />
Image Properties The Image part has the following properties: v align v altText v eventHandlers v extraAttributes v height v hSpace v imageURL v isMap v link v localFileName v partName v sendSize v vSpace<br />
<br />
76<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
v width align<br />
<br />
Use the align property to specify how you want the element to be aligned on the Web page. You can select any of the following values from the drop-down list: v Top v Middle v Bottom v <Default> (Browser default) In addition, you can specify an alignment by typing the appropriate string directly into the field. Do this if you want to specify a special alignment supported by your browser but not directly supported by VisualAge. VisualAge will use the specified alignment string when generating HTML at run time, but will use its default alignment at edit time. This property is equivalent to the align attribute of the appropriate HTML element.<br />
<br />
altText Use the altText property to specify the text you want displayed if the element does not display (for example, if the browser cannot load an image or cannot run a Java applet). Alternate text can indicate what is intended to appear even if something prevents the page from loading properly, or if a user interrupts transmission before loading is complete. This property is equivalent to the alt attribute of the appropriate HTML element. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. height Use the height property to specify the height of the graphic image. hSpace Use the hSpace property to specify the size, in pixels, of the horizontal margin around the image. imageURL Use the imageURL property to specify the location of the image to use at run time. You can specify any image file that is supported by the Web browser used at run time, provided the image is in a location accessible to the browser. This property is equivalent to the src attribute of the HTML img element. isMap Use the isMap property to indicate whether the graphic is an image map with hypertext links. This attribute is equivalent to the ismap attribute of the HTML img element.<br />
<br />
Chapter 13. Web Connection category<br />
<br />
77<br />
<br />
link<br />
<br />
Use the link property to specify where you want to link to from a text or image. If you do not want to place a link on the text or image, leave this property blank. This property is equivalent to the href attribute of the HTML a (anchor) element.<br />
<br />
localFileName Use the localFileName property to specify the name of the file for the graphic you want to display at edit time. You can use any graphic file type supported by VisualAge. Note: The localFileName property affects only the appearance of the page in the Composition Editor at edit time. It has no effect on the generated HTML and will not cause a graphic to appear in Web browsers at run time. In order to display a runtime graphic, you must specify a location for a graphic using the imageURL property. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. sendSize Use the sendSize property to indicate whether you want to send the size of the image to the browser at run time. vSpace Use the vSpace property to specify the size, in pixels, of the vertical margin around the image. width Use the width property to specify the width of the graphic image.<br />
<br />
Line Break Use the Line Break part to cause the following HTML element to appear on the next line. This part generates the HTML br element. To add a Line Break part, select the Web Connection Category (<br />
<br />
), then the Line Break part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlLineBreak.<br />
<br />
Line Break Properties The Line Break part has the following properties: v eventHandlers v extraAttributes v partName eventHandlers Use the eventHandlers property to define any event handlers for this part.<br />
<br />
78<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
Paragraph Use the Paragraph part to specify the beginning of a new paragraph. Paragraphs are separated with vertical spacing. The Paragraph part generates the HTML p element. To add a paragraph part, select the Web Connection Category (<br />
<br />
), then the Paragraph part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlParagraph.<br />
<br />
Paragraph Properties The Paragraph part has the following properties: v eventHandlers v extraAttributes v partName eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. Chapter 13. Web Connection category<br />
<br />
79<br />
<br />
The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
Horizontal Rule Use the Horizontal Rule part to add a horizontal line to a Web page. You can use this part to divide your page into distinct sections. The HTML Horizontal Rule part generates the HTML hr element. To add a Horizontal Rule part, select the Web Connection Category (<br />
<br />
), then the Horizontal Rule part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlRule.<br />
<br />
Horizontal Rule Properties The Horizontal Rule part has the following properties: v align v eventHandlers v extraAttributes v height v partName v width align<br />
<br />
Use the align property to specify how you want the element to be aligned on the Web page. You can select any of the following values from the drop-down list: v Top v Middle v Bottom v <Default> (Browser default) In addition, you can specify an alignment by typing the appropriate string directly into the field. Do this if you want to specify a special alignment supported by your browser but not directly supported by VisualAge. VisualAge will use the specified alignment string when generating HTML at run time, but will use its default alignment at edit time. This property is equivalent to the align attribute of the appropriate HTML element.<br />
<br />
eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge.<br />
<br />
80<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
height Use the height property to specify the thickness, in pixels, of the horizontal rule. This property is equivalent to the size attribute of the HTML hr element. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. width Use the width property to specify the width of the line as a percentage of the width of the page. For example, if you specify 50 in this field, the rule will appear half the width of the page, even if the user resizes the size of the browser window.<br />
<br />
Applet Use the Applet part to insert a Java applet to your Web page. The Applet part generates the HTML element applet. (Java applets might not be supported by all browsers.) Note: While Web Connection supports the inclusion of Java applets within your Web pages, it does not provide support for the development of the applet itself. To add an Applet part, select the Web Connection Category (<br />
<br />
), then the Applet part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlApplet.<br />
<br />
Applet Properties TheApplet part has the following properties: v align v altText v appletName v archive v cabBase v codeBase v eventHandlers v extraAttributes v height v parameterLiteralText v parameters v partName v width align<br />
<br />
Use the align property to specify how you want the element to be aligned on the Web page. You can select any of the following values from the drop-down list: v Top Chapter 13. Web Connection category<br />
<br />
81<br />
<br />
v Middle v Bottom v <Default> (Browser default) In addition, you can specify an alignment by typing the appropriate string directly into the field. Do this if you want to specify a special alignment supported by your browser but not directly supported by VisualAge. VisualAge will use the specified alignment string when generating HTML at run time, but will use its default alignment at edit time. This property is equivalent to the align attribute of the appropriate HTML element. altText Use the altText property to specify the text you want displayed if the element does not display (for example, if the browser cannot load an image or cannot run a Java applet). Alternate text can indicate what is intended to appear even if something prevents the page from loading properly, or if a user interrupts transmission before loading is complete. This property is equivalent to the alt attribute of the appropriate HTML element. appletName Use the appletName property to specify the name of the Java applet. archive Use the archive property to specify a single library file to collect common classes into. This library is cached on the user’s local disk. When classes are cached on a local disk this way the browser doesn’t need to use a network to access an applet and therefore loads the class much faster. The value of the archive property is a URL indicating an archive file, either .zip or .jar format. cabBase Use the cabBase property to reference applets stored in .cab archive files. codeBase Use the codeBase property to define an alternate URL from which the browser will receive the applet file. The value of this property is a URL pointing to a directory containing the class defined by the applet. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. height Use the height property to specify the height of the area you want the applet or embed to appear in. Use this property in conjunction with the width property to specify the dimensions of the applet or embed on the page.<br />
<br />
82<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
parameterLiteralText Use the parameterLiteralText property to literally type, or cut and paste, parameters into a list rather than separating them into key value pairs. parameters Use the parameters property to specify the parameters you want to pass to the applet or embed. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. width Use the width property to specify the width of the area you want the applet or embed to appear in. Use this attribute in conjunction with the height property to specify the dimensions of the applet or embed on the page.<br />
<br />
Embed Use the Embed part to add a plug-in program to your Web page. The Embed part generates the HTML element embed. (Plug-ins might not be supported by all browsers.) To add an Embed part, select the Web Connection Category (<br />
<br />
), then the Embed part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlEmbed.<br />
<br />
Embed Properties The Embed part has the following properties: v classId v eventHandlers v extraAttributes v height v isUsingObjectTag v parameterLiteralText v parameters v partName v source v width classId Use the classId property to specify the ID of the object (for example, the ActiveX class). This property is used only if the isUsingObjectTag property is set to true. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur Chapter 13. Web Connection category<br />
<br />
83<br />
<br />
while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. height Use the height property to specify the height of the area you want the applet or embed to appear in. Use this property in conjunction with the width property to specify the dimensions of the applet or embed on the page. isUsingObjectTag Use the isUsingObjectTag property to specify whether you want the part to generate the object element instead of the embed element. Set this property to true if you want to embed ActiveX or compatible objects. parameterLiteralText Use the parameterLiteralText property to literally type, or cut and paste, parameters into a list rather than separating them into key value pairs. parameters Use the parameters property to specify the parameters you want to pass to the applet or embed. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. source Use the source property to specify the location of the embed. Make sure that the URL points to a location that your client’s Web browsers will have access to. The source property maps to the HTML src attribute. width Use the width property to specify the width of the area you want the applet or embed to appear in. Use this attribute in conjunction with the height property to specify the dimensions of the applet or embed on the page.<br />
<br />
Grid Use the Grid part to arrange the information on your page in a tabular format. The Grid part generates the HTML element table. After you have added an Grid part to your page, you can modify it to add or remove rows or columns, and you can place other Web Connection parts inside the cells of the grid. Note: The Table part also generates HTML table elements. However, Table is intended specifically for presenting the results of database queries, while Grid is intended for page layout.<br />
<br />
84<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
To add a Grid part, select the Web Connection Category (<br />
<br />
), then the Grid part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlGrid.<br />
<br />
Grid Properties The Grid part has the following properties: v align v alignHorizontal v alignVertical v border v cellPadding v cellSpacing v eventHandlers v extraAttributes v partName v width v widthUnits align<br />
<br />
Use the align property to specify how you want the element to be aligned on the Web page. You can select any of the following values from the drop-down list: v Top v Middle v Bottom v <Default> (Browser default) In addition, you can specify an alignment by typing the appropriate string directly into the field. Do this if you want to specify a special alignment supported by your browser but not directly supported by VisualAge. VisualAge will use the specified alignment string when generating HTML at run time, but will use its default alignment at edit time. This property is equivalent to the align attribute of the appropriate HTML element.<br />
<br />
alignHorizontal Use the alignHorizontal property to specify how the information in the data cell is aligned horizontally. Valid values are: v <Default> (browser default) v Left v Center v Right In addition, you can specify other alignments supported by your browser by typing the appropriate string directly into the field. This property is equivalent to the align attribute of the HTML td tag. alignVertical Use the alignVertical property to specify how the material in the data cell is aligned vertically. Valid values are: v <Default> (browser default) v Top v Middle Chapter 13. Web Connection category<br />
<br />
85<br />
<br />
v Bottom In addition, you can specify other alignments supported by your browser by typing the appropriate string directly into the field. This property is equivalent to the valign attribute of the HTML td tag. border Use the border property to specify how wide the border around the object should appear. For no border, leave the field blank or specify 0 (zero) for the border. cellPadding Use the cellPadding property to specify the amount of space you want to appear around the data in the cells. This property is equivalent to the cellpadding attribute of the HTML table element. cellSpacing Use the cellSpacing property to specify the amount of space around the cells themselves. This property is equivalent to the cellspacing attribute of the HTML table tag. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. width Use the width property to specify the width of the grid. The units used are determined by the widthUnits property. widthUnits Use the widthUnits property to specify the units used by the width property. Select either Percent and Pixels. The default is Pixels.<br />
<br />
Grid Column The Grid Column part represents a column in a Grid. This part is accessible only from the Grid part.<br />
<br />
86<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Grid Column Properties The Grid Column part has the following properties: v alignHorizontal v alignVertical v areHeaderCells v eventHandlers v extraAttributes v partName v width v widthUnits alignHorizontal Use the alignHorizontal property to specify how the information in the data cell is aligned horizontally. Valid values are: v <Default> (browser default) v Left v Center v Right In addition, you can specify other alignments supported by your browser by typing the appropriate string directly into the field. This property is equivalent to the align attribute of the HTML td tag. alignVertical Use the alignVertical property to specify how the material in the data cell is aligned vertically. Valid values are: v <Default> (browser default) v Top v Middle v Bottom In addition, you can specify other alignments supported by your browser by typing the appropriate string directly into the field. This property is equivalent to the valign attribute of the HTML td tag. areHeaderCells Use the areHeaderCells property to indicate whether the cells in the row or column are header cells. If you set this property to true, VisualAge generates the th element, and the text in the cells is highlighted. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface.<br />
<br />
Chapter 13. Web Connection category<br />
<br />
87<br />
<br />
The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. width Use the width property to specify the width of the grid. The units used are determined by the widthUnits property. widthUnits Use the widthUnits property to specify the units used by the width property. Select either Percent and Pixels. The default is Pixels.<br />
<br />
Grid Row The Grid Row part represents a row in a Grid. This part is accessible only from the Grid part.<br />
<br />
Grid Row Properties The Grid Row part has the following properties: v alignHorizontal v alignVertical v areHeaderCells v eventHandlers v extraAttributes v partName alignHorizontal Use the alignHorizontal property to specify how the information in the data cell is aligned horizontally. Valid values are: v <Default> (browser default) v Left v Center v Right In addition, you can specify other alignments supported by your browser by typing the appropriate string directly into the field. This property is equivalent to the align attribute of the HTML td tag. alignVertical Use the alignVertical property to specify how the material in the data cell is aligned vertically. Valid values are: v <Default> (browser default) v Top v Middle v Bottom In addition, you can specify other alignments supported by your browser by typing the appropriate string directly into the field. This property is equivalent to the valign attribute of the HTML td tag. areHeaderCells Use the areHeaderCells property to indicate whether the cells in the row or column are header cells. If you set this property to true, VisualAge generates the th element, and the text in the cells is highlighted. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur<br />
<br />
88<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
Grid Cell The Grid Cell part represents a cell in a Grid. This part is accessible only from the Grid part.<br />
<br />
Grid Cell Properties The Grid Cell part has the following properties: v alignHorizontal v alignVertical v eventHandlers v extraAttributes v isHeaderCell v partName alignHorizontal Use the alignHorizontal property to specify how the information in the data cell is aligned horizontally. Valid values are: v <Default> (browser default) v Left v Center v Right In addition, you can specify other alignments supported by your browser by typing the appropriate string directly into the field. This property is equivalent to the align attribute of the HTML td tag. alignVertical Use the alignVertical property to specify how the material in the data cell is aligned vertically. Valid values are: v <Default> (browser default) v Top v Middle v Bottom In addition, you can specify other alignments supported by your browser by typing the appropriate string directly into the field. This property is equivalent to the valign attribute of the HTML td tag.<br />
<br />
Chapter 13. Web Connection category<br />
<br />
89<br />
<br />
eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. isHeaderCell Use the isHeaderCell property to indicate whether the cell is a header cell. If you set this property to true, VisualAge generates the th element, and the text in the cell is highlighted. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
Table Use the Table part to present data from a database query in tabular format, in a series of columns with each item occupying a row. This part generates the HTML element table. Note: The Table part is used in conjunction with the VisualAge Database Query part to present the results of database queries. If you want to use table tagging to control the layout of the elements on your page, use the Grid part. To add a Table part, select the Web Connection Category (<br />
<br />
), then the Table part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlTable.<br />
<br />
Table Properties The Table part has the following properties: v borderWidth v cellPadding v cellSpacing v columns v drawBorder v eventHandlers v extraAttributes v items<br />
<br />
90<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
v partName border Use the border property to specify how wide the border around the object should appear. For no border, leave the field blank or specify 0 (zero) for the border. cellPadding Use the cellPadding property to specify the amount of space you want to appear around the data in the cells. This property is equivalent to the cellpadding attribute of the HTML table element. cellSpacing Use the cellSpacing property to specify the amount of space around the cells themselves. This property is equivalent to the cellspacing attribute of the HTML table tag. columns Use the columns property to define the properties of the columns in the table. You can define these properties either by editing the columns property of the Table part, or by opening the Settings for the TableColumn part. The list of properties is the same. Using the columns property for the Table part helps you see all of the properties for all of the columns in the table at one time. drawBorder Use the drawBorder property to indicate whether you want visible borders around the table cells. This property is equivalent to the border attribute of the HTML table element. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. items<br />
<br />
Use the items to specify the initial items you want displayed by the part when it appears.<br />
<br />
partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
Chapter 13. Web Connection category<br />
<br />
91<br />
<br />
Table Column Use the Table Column part to add a column to an Table part. This part generates the appropriate HTML tr and td elements. To add a Table Column part, select the Web Connection Category (<br />
<br />
), then the Table Column part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlTableColumn.<br />
<br />
Table Column Properties The Table Column part has the following properties: v attributeName v containsFormElements v converter v eventHandlers v extraAttributes v heading v horizontalAlignment v literal v partName v selectedItems v selectionStyle v verticalAlignment attributeName Use the attributeName property to specify which attribute of the objects in the collection should be displayed in the part. containsFormElements Use the containsFormElements property to indicate whether or not the table column is a selection column or a regular table column. If you are going to use the Column as a selection column, the Table part must be inside a Form part. Specify false if the column is not a selection colunm. Specify true if the column is a selection column. converter Use the converter property to specify the converter to use for the part. A converter is an object that manages the conversion of other objects to and from their display format for certain visual parts, such as a Text part. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge.<br />
<br />
92<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
heading Use the heading property to specify the heading to be displayed at the top of the column. The height of the heading is determined by the maximum height of all column headings. horizontalAlignment Use the horizontalAlignment property to specify how the information in the data cell is aligned horizontally. Valid values are: v <Default> (browser default) v Left v Center v Right In addition, you can specify other alignments supported by your browser by typing the appropriate string directly into the field. This property is equivalent to the align attribute of the HTML td tag. literal Use the literal property to indicate whether the text of the part is to be passed to the Web browser exactly as you typed it. Set literal to true if you want to include HTML tagging in the text. The Web browser must be able to interpret and display the text at run time. Use this property if you want to use HTML tagging that is not directly supported by VisualAge. At edit time, literal text is displayed in a monospaced font by default. You can specify a different font using the Preferences window. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. selectedItems Use the selectedItems property to specify the items that appear selected in a multiple selection part when the part is rendered in a Web browser. selectionStyle Use the selectionStyle property to make selection columns in a table. When you set selectionStyle to multipleSelect, each row in the column is prefixed with a checkbox. If you set selectionStyle to singleSelect, each row in the column is prefixed with a radio button. verticalAlignment Use the verticalAlignment property to specify how the material in the data cell is aligned vertically. Valid values are: v <Default> (browser default) v Top v Middle v Bottom In addition, you can specify other alignments supported by your browser by typing the appropriate string directly into the field. This property is equivalent to the valign attribute of the HTML td tag. Chapter 13. Web Connection category<br />
<br />
93<br />
<br />
Script Use the Script part to create a placeholder for a JavaScript. Multiple scripts can be dropped throughout the document. Scripts can be added to the of an HTML document by modifying the #scripts attribute of the Html Page To add a Script part, select the Web Connection Category (<br />
<br />
), then the Script part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlScript.<br />
<br />
Script Properties The Script part has the following properties: v extraAttributes v language v partName v sourceFileName v string v url extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. language Use the language property to specify what scripting language used to create the Script. Valid values include: v JavaScript v VBScript v JavaScript1.1 You can also enter another language if necessary. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. sourceFileName Use the sourceFileName property to specify the name of a file where your script is stored. Use this property instead of the string property if you have a script that is long or maintained outside of VisualAge. When you specify a local source file for your script, VisualAge imports the script inline when generating HTML. The sourceFileName property will not work properly at runtime unless the application AbtWebServerInterfaceBaseFileApp is included in the packaged image. Therefore, the sourceFileName property should not be used for<br />
<br />
94<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
applications that are packaged in an XD image since AbtWebServerInterfaceBaseFileApp is not present. Use the url attribute instead. string Use the string property to specify a script. Use this property when your script is small and you want it generated in line with the HTML. url<br />
<br />
Use the url property to specify the location on a server of a file where your script is stored. Use this property if you have a script that is long and maintained outside of VisualAge on a server. When you specify a URL location for the file containing your script, the Web browser will call and execute the script when rendering the HTML. VisualAge generates a retrieve to the script in the HTML <script> tag.<br />
<br />
Page Use the Page part to add an HTML page that contains the other HTML parts. This part generates the following HTML elements: html, title, and optionally body. To add a Page part, select the Web Connection Category (<br />
<br />
), then the Page part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlPage.<br />
<br />
Page Properties The Page part has the following properties: v activeLinkColor v backgroundColor v backgroundImage v backgroundImageFile v eventHandlers v extraAttributes v generateBodyElement v linkColor v metaTagArea v partName v scripts v styleSheets v textColor v title v visitedLinkColor activeLinkColor Use the activeLinkColor property to specify the color of active links. backgroundColor Use the backgroundColor property to set the background color of the page. backgroundImage Use the backgroundImage property to specify the image you want to use at run time for the background, or wallpaper, of the page. You can specify any image file that is supported by the Web browser used at run time, provided the image is in a location accessible to the browser. This property is equivalent to the background attribute of the HTML body element. Chapter 13. Web Connection category<br />
<br />
95<br />
<br />
backgroundImageFile Use the backgroundImageFile property to specify the file containing the graphic you want to use for the page background at edit time. You can use any graphic file type supported by VisualAge. Note: The backgroundImageFile property affects only the appearance of the page in the Composition Editor at edit time. It has no effect on the generated HTML and will not cause a graphic to appear in Web browsers at run time. In order to display a runtime graphic, you must specify a location for a graphic using the backgroundImage property. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. generateBodyElement Use the generateBodyElement property to specify whether you want to includes the body element within the HTML generated by the page. The body element delimits the actual content of the page, separating it from the header information such as the title element. linkColor Use the linkColor property to specify the color of linked text on the page. This property is equivalent to the link attribute of the HTML body element. metaTagArea Use the metaTagArea to specify content for and include a meta tag in the header of your HTML Page or Frame Set Page. The HTML meta tag is used to specify keywords or descriptions that are used by some search engines. These tags allow you to exert some level of control over how your site is represented by the search engines that read meta tag data. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. scripts Use the scripts property to specify code to be used on the HtmlPage. The script is included in the header of the generated HTML page. styleSheets Use the styleSheets property to specify styles to be included in the header of the generated HTML page.<br />
<br />
96<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
textColor Use the textColor property to specify the color of the text on the page. This property is equivalent to the text attribute of the HTML body element. title<br />
<br />
Use the title property to specify the title of the page. The title appears in the title bar of the Web browser at run time.<br />
<br />
visitedLinkColor Use the visitedLinkColor property to specify the text color of links the user has previously selected. This attribute is equivalent to the vlink attribute of the HTML body tag.<br />
<br />
Frame Set Page Use the Frame Set Page part to create a web page that uses frames. In HTML, a frameset is specified instead of the body of a page, then the body element appears in the ″noframes″ area of a frameset 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 frameset’s ″noframes″ area is displayed instead of the set of frames. The Frame Set Page part in VisualAge is a subclass of page, and implements the page as a frameset. The contents of the page are the contents of the ″noframes″ area of the frameset. Anything you drop on a frameset in VisualAge will only appear in a browser that doesn’t support frames. The contents of the frames are set using the properties of the Frame Set Page part. To add a Frame Set Page part, delete the page, then select the Web Connection Category (<br />
<br />
), then the Frame Set Page part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlFrameSetPage. If you are using session data, initialize the session data on the Frame Set Page part rather than on a page part. Note that the session data value is initialized on the Frame Set Page part. This is important! If you do not set the session data on the frameset part, but then use session data on a page part used in a frame, users will be able to reset their session data by refreshing the frame with the refresh or reload button on the web browser. Furthermore, if the session data is not established on the frameset part, each frame may end up using its own session data rather than sharing a single session data value. These effects are caused by the way browsers refresh frames in framesets. To avoid problems with session data, initialize the session data on the frameset part even if it is not needed until later. To set up the contents of the frames in a frameset, we open its settings and change the frameSet property. The frameSet property describes a single frame, with values such as columns and columnUnits or rows and rowUnits (one or the other), and a collection of frames in that frameset. A frame can either have a URL pointing to a part or page, or it can have another nested frameset. If an item in the frames collection is a frameset, then the frame information about that item is ignored. To Chapter 13. Web Connection category<br />
<br />
97<br />
<br />
assign initial values to a frameset property in the property prompter, uncheck the ″Set value to nil″ checkbox. You will have to resize the frames property prompter to see all the information about each frame.<br />
<br />
Frame Set Page Properties The Frame Set Page part has the following properties: The Page part has the following properties: v activeLinkColor v backgroundColor v backgroundImage v backgroundImageFile v eventHandlers v extraAttributes v frameSet v generateBodyElement v linkColor v metaTagArea v partName v scripts v styleSheets v textColor v title v visitedLinkColor activeLinkColor Use the activeLinkColor property to specify the color of active links. backgroundColor Use the backgroundColor property to set the background color of the page. backgroundImage Use the backgroundImage property to specify the image you want to use at run time for the background, or wallpaper, of the page. You can specify any image file that is supported by the Web browser used at run time, provided the image is in a location accessible to the browser. This property is equivalent to the background attribute of the HTML body element. backgroundImageFile Use the backgroundImageFile property to specify the file containing the graphic you want to use for the page background at edit time. You can use any graphic file type supported by VisualAge. Note: The backgroundImageFile property affects only the appearance of the page in the Composition Editor at edit time. It has no effect on the generated HTML and will not cause a graphic to appear in Web browsers at run time. In order to display a runtime graphic, you must specify a location for a graphic using the backgroundImage property. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed..<br />
<br />
98<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. frameSet Use the frameSet property to specify all of the frames and framesets used in the page. generateBodyElement Use the generateBodyElement property to specify whether you want to includes the body element within the HTML generated by the page. The body element delimits the actual content of the page, separating it from the header information such as the title element. linkColor Use the linkColor property to specify the color of linked text on the page. This property is equivalent to the link attribute of the HTML body element. metaTagArea Use the metaTagArea to specify content for and include a meta tag in the header of your HTML Page or Frame Set Page. The HTML meta tag is used to specify keywords or descriptions that are used by some search engines. These tags allow you to exert some level of control over how your site is represented by the search engines that read meta tag data. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. scripts Use the scripts property to specify code to be used on the HtmlPage. The script is included in the header of the generated HTML page. styleSheets Use the styleSheets property to specify styles to be included in the header of the generated HTML page. textColor Use the textColor property to specify the color of the text on the page. This property is equivalent to the text attribute of the HTML body element. title<br />
<br />
Use the title property to specify the title of the page. The title appears in the title bar of the Web browser at run time.<br />
<br />
visitedLinkColor Use the visitedLinkColor property to specify the text color of links the user has previously selected. This attribute is equivalent to the vlink attribute of the HTML body tag.<br />
<br />
Chapter 13. Web Connection category<br />
<br />
99<br />
<br />
Composite Use the Composite part to contain a set of elements that provide a reusable piece of your user interface. Typically, you might use this part to create a standard header or footer, which you can then add to each page you build. To add a Composite part, select the Web Connection Category (<br />
<br />
), then the Composite part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlComposite.<br />
<br />
Composite Properties The Composite part has the following properties: v breakAfter v breakBefore v eventHandlers v extraAttributes v partName breakAfter Use the breakAfter property to indicate whether you want the Web browser to insert a line break in the HTML after this part. breakBefore Use the breakBefore property to indicate whether you want the Web browser to insert a line break in the HTML before this part. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
Layer Use the Layer part to create an HTML Layer tag. A layer is a self contained unit of HTML content that can be positioned within the browser.<br />
<br />
100<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Layers are only supported in Netscape. For cross-browser layering, use the Division part. To add a Layer part, select the Web Connection Category (<br />
<br />
), then the Layer part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlLayer.<br />
<br />
Layer Properties The Layer part has the following properties: v above v backgroundColor v backgroundImage v below v class v clip v eventHandlers v extraAttributes v inline v left v partName v style v top v url v visibility v width v zIndex above Use the above property to specify the name of another layer that you want to be above the current layer. The referring layer must have been defined before you can specify whether it is above or below the current layer, and the referring layer must have a partName. The above property is mutually exclusive with the below and zIndex properties. backgroundColor Use the backgroundColor property to set the background color for the layer. backgroundImage Use the backgroundImage property to specify the image you want to use at run time for the background, or wallpaper, of the page. You can specify any image file that is supported by the Web browser used at run time, provided the image is in a location accessible to the browser. This property is equivalent to the background attribute of the HTML body element. below Use the below property to specify the part name of another layer that you want to be below the current layer. The referring layer must have been defined before you can specify whether it is above or below the current layer, and the referring layer must have a partName. The below property is mutually exclusive with the above and zIndex properties. Chapter 13. Web Connection category<br />
<br />
101<br />
<br />
class<br />
<br />
Use the class property to label the layer with a predefined class specified in a document or external style sheet. This allows you to create a class of layers that all use the same style sheet, for example.<br />
<br />
clip<br />
<br />
Use the clip property to hide portions of the layer. The value of the clip property is an array of two or four numbers. These numbers define pixel offsets into the layer defining the area to clip. These offsets correspond to the left, top, right, and bottom edges of teh clip area. If you specify only two numbers, they correspond to the right and bottom edges of the visible area. The area outside of the visible area of the layer is made transparent, so whatever is beneath the current layer is displayed.<br />
<br />
eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. inline Use the inline property to specify whether or not the layer should be rendered using the <ilayer> HTML tag. The <ilayer> tag renders content directly in the containing text flow. The top and left attributes are offset from the current inline position. This is different than the <layer> tag which offsets from the document’s upper-left display corner. The default value is false. left<br />
<br />
Use the left property to specify an absolute position in the browser for this layer. The value of the left property is a number that specifies the number of pixels that the layer is offset from the left edge of the browser.<br />
<br />
partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
102<br />
<br />
style<br />
<br />
Use the style property to create an inline style for all of the contents included in this layer.<br />
<br />
top<br />
<br />
Use the top property to specify an absolute position in the browser for this layer. The value of the top property is a number that specifies the number of pixels that the layer is offset from the top edge of the browser.<br />
<br />
url<br />
<br />
Use the url property to specify the location on a server of a file where the content of the layer is stored. Use this property if the content is long and maintained outside of VisualAge on a server. When you specify a URL location for the file containing content for a layer, the Web browser will call and execute the content when rendering the HTML.<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
visibility Use the visibility property if you want to hide a layer initially. The valid values for the visibility property are Show which forces the layer to be seen, Hide which hides the layer from view, and Inherit which specifies to inherit the visibility of the parent object. If you are not nesting layers, the parent object is the main document, which is always visible. If you are nesting layers, the parent is the previous layer. A layer that is hidden does not block layers below it from being shown. If you hide a layer, the layer is transparent, so the content below the layer will be visible. width Use the width property to explicitly specify the width of the layer. If you do not explicitly specify a width for a layer, the browser renders it from the location specified in the left property to the right edge of the browser. The browser formats the content of the layer to fit the width and automatically adjusts the height of the layer to fit the contents of the layer. The value of the width property is specified in pixels. The browser adjusts the height of the layer based on the contents of the layer. zIndex Use the zIndex property to order multiple levels of layers. The value of the zIndex property is the index value for this layer. Higher zIndex values are placed above lower zIndex values. The zIndex property is mutually exclusive with the above and below properties.<br />
<br />
Division Use the Division part to create an HTML <DIV> tag. HTML divisions divides your document into separate distinct sections and enables the creation of dynamic web content. To add a Division part, select the Web Connection Category (<br />
<br />
), then the Division part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlDivision.<br />
<br />
Division Properties The Division part has the following properties: v align v class v eventHandlers v extraAttributes v partName v style align<br />
<br />
Use the align property to specify how you want the content in the division to be aligned. You can select any of the following values from the drop-down list: v Left v Center v Right<br />
<br />
Chapter 13. Web Connection category<br />
<br />
103<br />
<br />
In addition, you can specify an alignment by typing the appropriate string directly into the field. Do this if you want to specify a special alignment supported by your browser but not directly supported by VisualAge. VisualAge will use the specified alignment string when generating HTML at run time, but will use its default alignment at edit time. This property is equivalent to the align attribute of the appropriate HTML element. class<br />
<br />
Use the class property to apply the class of a predefined style to the contents of this division. The value of the class property is the name of a style defined in a document or external style sheet.<br />
<br />
eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. style<br />
<br />
Use the style property to create an inline style for the contents of this division.<br />
<br />
Style Sheet Use the Style Sheet part to apply a style or set of styles to an HtmlPage. Style sheets can be added to the heading of an HTML document by modifying the #styleSheets attribute of the Html Page. To add a Style Sheet part, select the Web Connection Category (<br />
<br />
), then the Style Sheet part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlStyleSheet.<br />
<br />
Style Sheet Properties The Style Sheet part has the following properties: v partName v sourceFileName v styles<br />
<br />
104<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
v type v url partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. sourceFileName Use the sourceFileName property to specify the name of a file that contains a collection of the styles you want to apply to your HtmlPage. Use this property instead of the styles property if you have a collection of styles that is long or maintained outside of VisualAge. When you specify a local source file for your style sheet, VisualAge imports the styles inline when generating HTML.The sourceFileName property will not work properly at runtime unless the application AbtWebServerInterfaceBaseFileApp is included in the packaged image. Therefore, the sourceFileName property should not be used for applications that are packaged in an XD image since AbtWebServerInterfaceBaseFileApp is not present. Use the url attribute instead. styles Use the styles property to specify a collection of styles, or effects, you want to apply to your HtmlPage. type<br />
<br />
Use the type property to indicate whether the style is specified using the Cascading Style Sheet model (CSS), or JavaScript-based style sheets (JSS).<br />
<br />
url<br />
<br />
Use the url property to specify the location on a server of a file that contains a collection of the styles you want to apply to an HtmlPage. Use this property if you have a style sheet that is long and maintained outside of VisualAge on a server. When you specify a URL location for the file containing your style sheet, the Web browser will retrieve and apply the style sheet to the page when rendering the HTML.<br />
<br />
Nonvisual parts CGI Link Request<br />
<br />
CGI Link Session Data Cookie Wrapper<br />
<br />
Form Data Page Wrapper<br />
<br />
Chapter 13. Web Connection category<br />
<br />
105<br />
<br />
CGI Link Request Use the CGI Link Request part to intercept various CGI requests and route them to the appropriate Web pages. To add a CGI Link Request part, select the Web Connection Category (<br />
<br />
), then the CGI Link Request part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtCgiLinkRequest.<br />
<br />
CGI Link Request Properties The CGI Link Request part has the following properties: v partName partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
CGI Link Session Data Use the CGI Link Session Data part to store session-specific information related to your application across multiple CGI requests. CGI Link Session Data can store any kind of Smalltalk object and persists across multiple requests. To add a CGI Link Session Data part, select the Web Connection Category (<br />
<br />
), then the CGI Link Session Data part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtCgiLinkStateData.<br />
<br />
CGI Link Session Data Properties The CGI Link Session Data part has the following properties: v lifeTimeSeconds v partName v valueClass lifeTimeSeconds Use the lifeTimeSeconds property to specify the number of seconds that the object is maintained by the server. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface.<br />
<br />
106<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. valueClass Use the valueClass property to specify the data type of the information stored in the part. You can specify any valid Smalltalk class. For example, the valueClass might be OrderedCollection or Dictionary.<br />
<br />
Cookie Wrapper Use the Cookie Wrapper part to add a cookie to your Web page. Cookies are persistent bits of data, information you obtain on a Web page that you want to save and use again. To add a Cookie Wrapper part, select the Web Connection Category (<br />
<br />
), then the Cookie Wrapper part ( ). You can also add the part using the Add Part dialog and specifying the class name, AbtHttpCookieWrapper.<br />
<br />
Cookie Wrapper Properties The Cookie Wrapper part has the following properties: v cookieName v cookieValue v partName cookieName Use the cookieName property to specify a string as the name of the cookie. If no name is specified, the partName value is used. cookieValue Use the cookieValue property to set an initial value for the cookie. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
Form Data Use the Form Data part to access the input values from the form that generated the CGI Link request. The fields from the form appear as attributes, based on the contents of the part defining the fields in the form. To add a Form Data part, select the Web Connection Category (<br />
<br />
Chapter 13. Web Connection category<br />
<br />
107<br />
<br />
), then the Form Data part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlFillOutFormData.<br />
<br />
Form Data Properties The Form Data part has the following properties: v pagePart v partName pagePart Use the pagePart property to specify the name of the part that defines the form that will be used to submit data to this page. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
Page Wrapper Use the Page Wrapper part to create a placeholder for an HTML page. If you have more than one HTML page defined for your application, you can use this part to make connections from the main HTML page to the secondary pages. Note: The first connection to this part must be to open the HTML page using one of the open actions. Connections will not work until you create the view using one of the open actions. To add a Page Wrapper part, select the Web Connection Category (<br />
<br />
), then the Page Wrapper part ( ). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlPageWrapper.<br />
<br />
Page Wrapper Properties The Page Wrapper part has the following properties: v pagePart v partName pagePart Use the pagePart property to specify the name of the part that defines the page represented by this Page Wrapper part. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface.<br />
<br />
108<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
Chapter 13. Web Connection category<br />
<br />
109<br />
<br />
110<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Chapter 14. Web Form Parts category The<br />
<br />
Web Form Parts category contains the visual parts representing the user-interface controls you can use to build a Web application. The parts in this category can only be used inside a form (with the exception of the Form part itself).<br />
<br />
Visual Parts Form<br />
<br />
Hidden Input<br />
<br />
Push Button<br />
<br />
Check Box<br />
<br />
Radio Button Set<br />
<br />
Entry Field<br />
<br />
Multi-line Entry Field<br />
<br />
List<br />
<br />
Multiple Select List<br />
<br />
Drop-down List<br />
<br />
Form Use the Form part to contain a set of elements that provide an interface for user interaction. This part generates the HTML form element. © Copyright IBM Corp. 1997, 2000<br />
<br />
111<br />
<br />
To add a Form part, select the Web Form Parts Category (<br />
<br />
), then the Form part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlForm.<br />
<br />
Form Properties The Form part has the following properties: v action v eventHandlers v extraAttributes v method v partName action Use the action property to specify the URL of the program or script that accepts and processes the contents of the form. This property is equivalent to the action attribute of the HTML form element. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. method Use the method property to specify how you want the form to be submitted: Get<br />
<br />
Specifies that you do not want to make any changes to the existing page or database. Essentially, you use Get to retrieve information to present to the user.<br />
<br />
Post<br />
<br />
Specifies that you want to make changes to the existing page or database.<br />
<br />
This property is equivalent to the methodattribute of the HTML form element. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
112<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Hidden Input Use the Hidden Input part to to include hidden input fields in a form. Hidden input fields are not displayed to the user, but are submitted to the server along with other form data. The Hidden Input part generates the HTML element input with the type attribute set to hidden. To add a Hidden Input part, select the Web Form Parts Category (<br />
<br />
), then the Hidden Input part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlHiddenInput.<br />
<br />
Hidden Input Properties The Hidden Input part has the following properties: v converter v eventHandlers v extraAttributes v object v partName v string converter Use the converter property to specify the converter to use for the part. A converter is an object that manages the conversion of other objects to and from their display format for certain visual parts, such as a Text part. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. object Use the object property to specify the contents of the hidden input field. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. string Use the string property to specify a script. Use this property when your script is small and you want it generated in line with the HTML.<br />
<br />
Chapter 14. Web Form Parts category<br />
<br />
113<br />
<br />
Push Button Use the Push Button part to add a push button users can select in order to submit the data from a form or to reset the form to its initial values. The Push Button part generates the HTML element input with the type attribute set to reset or submit. To add a Push Button part, select the Web Form Parts Category (<br />
<br />
), then the Push Button part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlPushButton.<br />
<br />
Push Button Properties The Push Button part has the following properties: v buttonType v converter v extraAttributes v graphicsDescriptor v imageURL v object v partName buttonType Use the buttonType property to specify what you want to happen when the user selects the push button at run time. Select one of the following choices: <Default> The browser’s default button type. Button Works in connection with JavaScript. Image Works like a Submit button, but with a graphic label. Reset<br />
<br />
Resets the values of the form to their initial settings without submitting any data to the server.<br />
<br />
Submit Sends the form data to the server for processing. converter Use the converter property to specify the converter to use for the part. A converter is an object that manages the conversion of other objects to and from their display format for certain visual parts, such as a Text part. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. graphicsDescriptor Use the graphicsDescriptor property to specify the location of the image you want to use for the push button label at edit time. You can use any file type supported by VisualAge. This property is used only if you have set the buttonType property to Image.<br />
<br />
114<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Note: The graphicsDescriptor property affects only the appearance of the page in the Composition Editor at edit time. It has no effect on the generated HTML and will not cause a graphic to appear in Web browsers at run time. In order to display a runtime graphic, you must specify a location for a graphic using the imageURL property. imageURL Use the imageURL property to specify the location of the image to use for the push button label at run time. You can specify any image file that is supported by the Web browser used at run time, provided the image is in a location accessible to the browser. This property is used only if you have set the buttonType property to Image. object Use the object property to specify the text you want to use as the label of the push button. This property is used only if the buttonType property is not set to Image. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
Check Box Use the Check Box part to add a control that has two distinguishable states: on and off. This part generates the HTML element input with the type attribute set to checkbox. To add a Check Box part, select the Web Form Parts Category (<br />
<br />
), then the Check Box part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlCheckBox.<br />
<br />
Check Box Properties The Check Box part has the following properties: v checked v eventHandlers v extraAttributes v partName checked Use the checked property to indicate whether the check box is initially selected. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event<br />
<br />
Chapter 14. Web Form Parts category<br />
<br />
115<br />
<br />
handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
Radio Button Set Use the Radio Button Set part to add radio buttons that represent mutually exclusive choices. The Radio Button Set part generates the HTML element input with the type attribute set to radio. To add a Radio Button Set part, select the Web Form Parts Category (<br />
<br />
), then the Radio Button Set part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlRadioButtonSet.<br />
<br />
Radio Button Set Properties The Radio Button Set part has the following properties: v attributeName v breakAfter v breakBefore v converter v eventHandlers v extraAttributes v items v partName v selectedItem v selectionIndex v vertical attributeName Use the attributeName property to specify which attribute of the objects in the collection should be displayed in the part. breakAfter Use the breakAfter property to indicate whether you want the Web browser to insert a line break in the HTML after this part.<br />
<br />
116<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
breakBefore Use the breakBefore property to indicate whether you want the Web browser to insert a line break in the HTML before this part. converter Use the converter property to specify the converter to use for the part. A converter is an object that manages the conversion of other objects to and from their display format for certain visual parts, such as a Text part. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. items<br />
<br />
Use the items to specify the initial items you want displayed by the part when it appears.<br />
<br />
partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. selectedItem Use the selectedItem property to specify an item to appear selected when the part is rendered in a Web browser. selectionIndex Use the selectionIndex property to specify the index of the item you want initially selected when the part first appears. vertical Use the vertical property to specify whether the part has a vertical or horizontal orientation.<br />
<br />
Entry Field Use the Entry Field part to add a field into which users can enter information. The Entry Field part generates the HTML element input with the type attribute set to text. To add an Entry Field part, select the Web Form Parts Category (<br />
<br />
), then the Entry Field part (<br />
<br />
Chapter 14. Web Form Parts category<br />
<br />
117<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlEntryField.<br />
<br />
Entry Field Properties The Entry Field part has the following properties: v converter v eventHandlers v extraAttributes v maxLength v object v partName v passwordProtect v size v string converter Use the converter property to specify the converter to use for the part. A converter is an object that manages the conversion of other objects to and from their display format for certain visual parts, such as a Text part. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. maxLength Use the maxLength property to specify the maximum number of characters the field can contain. The default is no limit. object Use the object property to specify the initial contents of the entry field. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. passwordProtect Use the passwordProtect property to specify whether the entry field is used to contain a password. This attribute is equivalent to the password values of the type attribute of the HTML input element. size<br />
<br />
Use the size property to specify the width, in characters, of the entry field. This setting is equivalent to the size attribute of the HTML input element. If the value you specify in this field is less than the value you specify in the maxLength field, then the entry field is scrollable.<br />
<br />
118<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
string Use the string property to specify a script. Use this property when your script is small and you want it generated in line with the HTML.<br />
<br />
Multi-line Entry Field Use the Multi-line Entry Field part to add a scrollable pane control that collects multiple lines of text from the user. This part generates the HTML element textarea. To add a Multi-line Entry Field part, select the Web Form Parts Category (<br />
<br />
), then the Multi-line Entry Field part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlMultiLineEdit.<br />
<br />
Multi-line Entry Field Properties The Multi-line Entry Field part has the following properties: v columns v converter v eventHandlers v extraAttributes v object v partName v rows v wrap columns Use the columns property to specify the width, in average character widths, of the part. converter Use the converter property to specify the converter to use for the part. A converter is an object that manages the conversion of other objects to and from their display format for certain visual parts, such as a Text part. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. object Use the object property to specify the initial contents of the entry field. partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface.<br />
<br />
Chapter 14. Web Form Parts category<br />
<br />
119<br />
<br />
The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. rows<br />
<br />
Use the rows property to specify the height, in character rows, of the part. This attribute is equivalent to the rows attribute of the HTML textarea element.<br />
<br />
wrap<br />
<br />
Use the wrap property to indicate how lines of text should be treated when they extend beyond the right edge of the part. If you have horizontal scroll bars displayed, this attribute has no effect. Valid values include: v Off v Virtual v Physical v <Default> (browser default) This attribute is equivalent to the wrap attribute of the HTML textarea element.<br />
<br />
List Use the List part to add a control that allows the user to select a single item from a displayed list of choices. The List part generates the HTML element select, with the items in the list represented by option elements. To add a List part, select the Web Form Parts Category (<br />
<br />
), then the List part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlList.<br />
<br />
List Properties The List part has the following properties: v attributeName v converter v eventHandlers v extraAttributes v items v partName v selectedItem v selectionIndex v visibleItemCount attributeName Use the attributeName property to specify which attribute of the objects in the collection should be displayed in the part. converter Use the converter property to specify the converter to use for the part. A converter is an object that manages the conversion of other objects to and from their display format for certain visual parts, such as a Text part. eventHandlers Use the eventHandlers property to define any event handlers for this part.<br />
<br />
120<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. items<br />
<br />
Use the items to specify the initial items you want displayed by the part when it appears.<br />
<br />
partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. selectedItem Use the selectedItem property to specify an item to appear selected when the part is rendered in a Web browser. selectionIndex Use the selectionIndex property to specify the index of the item you want initially selected when the part first appears. visibleItemCount Use the visibleItemCount property to specify the number of items you want to be visible in the part at any one time. This property determines the height of the list on the page.<br />
<br />
Multiple Select List Use the Multiple Select List part to add a control that allows the user to select one or more items from a displayed list of choices. You can define the number of items that the user can select. The HTML Multiple Select List part generates the HTML element select with the multiple attribute. Items within the list are represented by option elements. To add a Multiple Select List part, select the Web Form Parts Category (<br />
<br />
), then the Multiple Select List part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlMultipleSelectList.<br />
<br />
Multiple Select List Properties The Multiple Select List part has the following properties: v attributeName v converter v eventHandlers Chapter 14. Web Form Parts category<br />
<br />
121<br />
<br />
v v v v v v<br />
<br />
extraAttributes items partName selectedItems selectionIndices visibleItemCount<br />
<br />
attributeName Use the attributeName property to specify which attribute of the objects in the collection should be displayed in the part. converter Use the converter property to specify the converter to use for the part. A converter is an object that manages the conversion of other objects to and from their display format for certain visual parts, such as a Text part. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. items<br />
<br />
Use the items to specify the initial items you want displayed by the part when it appears.<br />
<br />
partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. selectedItems Use the selectedItems property to specify the items that appear selected in a multiple selection part when the part is rendered in a Web browser. selectionIndices Use the selectionIndices property to specify the indices of the items you want initially selected when the Multiple Select List part first appears. visibleItemCount Use the visibleItemCount property to specify the number of items you want to be visible in the part at any one time. This property determines the height of the list on the page.<br />
<br />
Drop-down List Use the Drop-down List part to add a control that displays a list of items from the which the user can select a single item. The selected item is then displayed in the field. The user cannot type new items directly into the field. The Drop-down List part generates the HTML element select.<br />
<br />
122<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
To add a Drop-down List part, select the Web Form Parts Category (<br />
<br />
), then the Drop-down List part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtHtmlDropDownList.<br />
<br />
Drop-down List Properties The Drop-down List part has the following properties: v attributeName v converter v eventHandlers v extraAttributes v items v partName v selectedItem v selectionIndex attributeName Use the attributeName property to specify which attribute of the objects in the collection should be displayed in the part. converter Use the converter property to specify the converter to use for the part. A converter is an object that manages the conversion of other objects to and from their display format for certain visual parts, such as a Text part. eventHandlers Use the eventHandlers property to define any event handlers for this part. Event handlers provide the ability to detect and react to events that occur while an HtmlPage is loaded in a Web browser. An example of an event handler is mouse over, where you can specify when the mouse moves over an HTML element, something happens, usually a JavaScript is executed.. extraAttributes Use the extraAttributes property to specify any additional HTML attributes that you want included in the HTML tagging generated by the part. You can use this property to include HTML attributes that are not directly supported by VisualAge. items<br />
<br />
Use the items to specify the initial items you want displayed by the part when it appears.<br />
<br />
partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part. selectedItem Use the selectedItem property to specify an item to appear selected when the part is rendered in a Web browser.<br />
<br />
Chapter 14. Web Form Parts category<br />
<br />
123<br />
<br />
selectionIndex Use the selectionIndex property to specify the index of the item you want initially selected when the part first appears.<br />
<br />
124<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Chapter 15. Models category The Models category is one of the palette categories included with the base VisualAge product. It contains nonvisual parts you can use to build your application logic.<br />
<br />
Nonvisual Parts<br />
<br />
Converter Filter<br />
<br />
Converter Filter Use the Converter Filter part to convert incoming form data into a Smalltalk object. This part is useful because data submitted from a form always arrives in string format. To use the Converter Filter part, first set the Converter Filter’s converter property to the appropriate converter for the type of object you want to convert the data into. Then connect the incoming string data to the Converter Filter’s string attribute. The Converter Filter’s object attribute represents the Smalltalk object resulting from the conversion. If the incoming string data cannot be converted to the specified data type, the errorMessage attribute contains an error message string. To add a Converter Filter part, select the Models Category (<br />
<br />
), then the Converter Filter part (<br />
<br />
). You can also add the part using the Add Part dialog and specifying the class name, AbtConverterFilter.<br />
<br />
Converter Filter Properties The Converter Filter part has the following properties: v converter v object v partName converter Use the converter property to specify the converter to use for the part. A converter is an object that manages the conversion of other objects to and from their display format for certain visual parts, such as a Text part. object Use the object property to set the initial value of the Converter Filter’s object attribute. The initial value must be compatible with the converter type specified by the converter attribute. © Copyright IBM Corp. 1997, 2000<br />
<br />
125<br />
<br />
partName In the Part name field, type the name you want to use to describe the part. For non-visual parts, this text appears under the icon for the part on the free-form surface. The name of the part can consist of alphanumeric characters, and must be unique from all other parts on the layout surface. This field is optional. If you do not specify a part name, VisualAge generates a unique name based on the class name of the part.<br />
<br />
126<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Chapter 16. Web Connection Windows Web Connection Preferences Window In the VisualAge Organizer, select Prefences from the Options menu. Use the Web Connection tab to set defaults for the proportional and monospace fonts used for the text within the Web browsers. To change the Proportional font, do the following 1. Select the Change proportional font push button. 2. In the Font Selection dialog, select a new font. 3. Select OK. Follow the same steps to change the monospace font, using the Change monospace font push button.<br />
<br />
URL Window Use the URL window to specify the runtime location of a resource such as an image, HTML document, applet, or embed. In the Composition Editor, you can double click on certain parts to open the part’s Properties, edit the value of the imageURL field, and display the URL window. Fields Depending upon the type of resource you are specifying, some of the following fields might not appear. None<br />
<br />
Select None if you do not want to specify a resource.<br />
<br />
URL<br />
<br />
Select URL to specify the location of a resource on the World Wide Web. Enter a standard URL string in the field. The URL must point to an object that is accessible to the client browser at run time.<br />
<br />
Part Name Select Part Name if the resource is another VisualAge Web Connection part on your server. Select the Web Connection part you want to link to from the drop-down list (or, if the part does not exist yet, type the name directly into the field). Use Session Key Select Use Session Key if you want the session key included as part of the URL. Using the session key makes it possible to preserve session data between one page and the next. If you are linking from one page to another within the same application, you would typically use the session key. If you are linking to a different application, you probably would not want to use the session key. Targeted Frame Select Targeted Frame if your application uses HTML frames and you want to specify the frame for the linked document to appear in.<br />
<br />
© Copyright IBM Corp. 1997, 2000<br />
<br />
127<br />
<br />
|<br />
<br />
HTML File Wrapper Generator Window<br />
<br />
| | |<br />
<br />
Use the HTML File Wrapper Generator to wrap a file created by another HTML builder, such as FrontPage. The HTML file wrapper allows Smalltalk to handle the data manipulation and presentation for the HTML file.<br />
<br />
| |<br />
<br />
In the VisualAge Organizer, select Generate → HTML file wrapper from the Parts menu.<br />
<br />
|<br />
<br />
To 1. 2. 3.<br />
<br />
generate the HTML file wrapper, follow these steps In the entry field for HTML file information, type the HTML file name to wrap. Check the Save Path checkbox to save the path information for the HTML file. In the entry field for Class name, type the Class Name to generate a new HTML file wrapper class, or, select a Class Name if you want to regenerate a currently defined HTML file wrapper class. 4. To change the default name of the attribute, in the Name field, select the attribute name.<br />
<br />
| | | | | | | | |<br />
<br />
v Select Change Name... to change the default attribute name. The Information Required window is displayed. v Type the new attribute name. v Select OK to close the Information Required window.<br />
<br />
| | | |<br />
<br />
5. Select Generate to generate the HTML file wrapper. 6. Select Close to close the HTML File Wrapper Generator window.<br />
<br />
|<br />
<br />
Color Window Use the Color window to specify the RGB values for a color. In the Composition Editor, you can double-click on certain parts to open the part’s Properties, edit the foregroundColor field, and display the Color window. If you do not want to specify a color, select Default to allow the browser to use its default color at run time. To specify a custom color, select Custom and then adjust the Red, Green, and Blue RGB values using the sliders. As you adjust the colors, the preview area shows you how the color will look on the page. If you know the RGB values you want to use, you can type the values directly in the fields below the sliders. You can also type a hexadecimal color value directly in the field below the preview area.<br />
<br />
128<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
Index A abt.ini file 55 Applet 81 Applet properties<br />
<br />
81<br />
<br />
B basic pages 29 basic parts 30 button 34<br />
<br />
C CGI Link Request 47, 106 CGI Link Request properties 106 CGI Link Session Data 106 CGI Link Session Data properties 106 Check Box 115 Check Box properties 115 command-line arguments 62 Common Gateway Interface setting up WSI 9 Composite 100 Composite properties 100 Converter Filter 125 Converter Filter properties 125 Cookie Wrapper 107 Cookie Wrapper properties 107 creating a page 30<br />
<br />
D database query 57 connecting to Table 57 single-row 58 Division 103 Division properties 103 Drop-down List 122 Drop-down List properties 123<br />
<br />
E edit-time graphic 31 Embed 83 Embed properties 83 Entry Field 117 Entry Field properties 118 errors, correcting 20 errors, handling 70<br />
<br />
F flowed layout 29 font, edit-time 31 form adding parts to 33 button 34 creating 33 image button 34 © Copyright IBM Corp. 1997, 2000<br />
<br />
form (continued) parts 33 reset button 34 retrieving data from 41 setting up action 33 submit button 33 Form 111 Form Data 107 form data, retrieving 41 Form Data properties 108 form parts 33 Form properties 112 Frame Set Page 97 Frame Set Page properties 98<br />
<br />
Image properties 76 ini file 55 installing Web Connection<br />
<br />
L Layer 100 Layer properties 101 Line Break 78 linking 3 List 120 List properties 120 Lotus Go Webserver setting up WSI 10<br />
<br />
G generating HTML from Smalltalk Grid 84 Grid Cell 89 Grid Cell properties 89 Grid Column 86 Grid Column properties 87 Grid properties 85 Grid Row 88 Grid Row properties 88<br />
<br />
7<br />
<br />
M<br />
<br />
70<br />
<br />
Microsoft Internet Server setting up WSI 12 Models category 125 Multi-line Entry Field 119 Multi-line Entry Field properties 119 Multiple Select List 121 Multiple Select List properties 121<br />
<br />
N nonvisual parts connecting to using 41<br />
<br />
H handling errors 70 Hidden Input 113 Hidden Input properties 113 Horizontal Rule 80 Horizontal Rule properties 80 HTML builders 51 using with Web Connection 51 HTML file wrapper 51 caching HTML pages 54 changing HTML pages 55 generating 52 using 51 using AbtHtmlFileWrapper subclass 53 using form data 54 using session data 55 HTML Form Data 41 setting up 42 HTTP request 3 HTTP server setting up 7 hypergraphic link 32 hypertext links 30, 31<br />
<br />
45<br />
<br />
P packaging a runtime application 61 Page 95 Page properties 95 Page Wrapper 47, 108 Page Wrapper properties 108 Paragraph 79 preferences 31 preserving session data 43 programming interfaces, low-level 69 push button button 34 image 34 label 34 reset 34 submit 33 Push Button 114 Push Button properties 114<br />
<br />
Q I image adding 31 file formats supported (edit-time) linking from 32 Image 76 image button 34<br />
<br />
Quick HTML 58 with single-row queries 31<br />
<br />
58<br />
<br />
R Radio Button Set 116 Radio Button Set properties<br />
<br />
116<br />
<br />
129<br />
<br />
request accessing directly 47 accessing low-level information 69 rerouting 47 reset button 34 resizing a page 32 routing requests to different pages 47 runtime graphic 31 runtime image, creating 61 runtime setup 61<br />
<br />
table (continued) scroll bars 58 setting up manually 57 Table 57, 90 setting up with Quick HTML Table Column 57, 92 setting up 57 Table Column properties 92 Table properties 90 testing your installation 18 text<br />
<br />
S Script 94 Script properties 94 serializing requests 71 Servlet Interface setting up WSI 8 session 43 Session Data 43 setting up 44 session data, preserving 43 session key 43 accessing from Smalltalk 70 suppressing generation 70 single-row database query 58 startup arguments 62 Style Sheet 104 Style Sheet properties 104 submit button 33 summary of changes new and changed information<br />
<br />
adding to a page 30 changing edit-time font formatting 30 Text<br />
<br />
74<br />
<br />
Text properties<br />
<br />
74<br />
<br />
transferredObject attribute transferRequest action transferring requests troubleshooting<br />
<br />
20<br />
<br />
Uniform Resource Locator 3<br />
<br />
V visual parts<br />
<br />
T table overview<br />
<br />
130<br />
<br />
57<br />
<br />
47<br />
<br />
U format<br />
<br />
basic 30 form 33 placement 29 working with 29<br />
<br />
VisualAge Smalltalk: Web Connection User’s Guide<br />
<br />
48<br />
<br />
47<br />
<br />
transferRequestWith: action<br />
<br />
v<br />
<br />
31<br />
<br />
47<br />
<br />
W 58<br />
<br />
Web browser accessing applications from 3 Web Connection application Accessing 3 packaging for run time 61 sample, building 25 setting up at run time 61 starting at run time 62 Web Connection category 73 Web Connection feature Application flow 3 Introduction 1 Setting up 7 testing installation 18 Web Form Parts category 111 Web page creating 30 HTML generated 30 resizing to fit parts 32 routing requests to a different page 47 Web Server Interface editing configuration file 13 information sent to application 41 Overview 2 setting up 7 WSI Common Gateway Interface 9 IBM Internet Connection 10 Lotus Go Webserver 10 Microsoft Internet Server 12 Servlet Interface 8 WSI server monitor window, using 21 starting 25 starting automatically 62 starting multiple servers at run time 62<br />
<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-xs-12">
<div class="panel-meta panel panel-info">
<div class="panel-heading">
<h2 class="text-center panel-title">VA-Web-Connection-55.pdf</h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<span class="st">AIX. IBM. <em>OS</em>/2. VisualAge. The following terms are trademarks of other companies: <em>Microsoft Microsoft</em> Corporation. Netscape Netscape Inc. <em>Windows Microsoft</em> ...</span> </div>
<div class="col-md-12">
<div class="doc">
<hr />
<div class="download-button" style="margin-right: 3px; margin-bottom: 6px;">
<a href="https://p.pdfkul.com/download/va-web-connection-55pdf_5a10c73a1723dd558484f245.html" class="btn btn-success btn-block"><i class="fa fa-cloud-download"></i> Download PDF </a>
</div>
<div class="share-box pull-left" style="margin-right: 3px;">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://p.pdfkul.com/va-web-connection-55pdf_5a10c73a1723dd558484f245.html" target="_blank" class="btn btn-social-icon btn-facebook">
<i class="fa fa-facebook"></i>
</a>
<!-- Twitter -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=https://p.pdfkul.com/va-web-connection-55pdf_5a10c73a1723dd558484f245.html" target="_blank" class="btn btn-social-icon btn-twitter">
<i class="fa fa-twitter"></i>
</a>
</div>
<div class="fb-like pull-left" data-href="https://p.pdfkul.com/va-web-connection-55pdf_5a10c73a1723dd558484f245.html" data-layout="button_count" data-action="like" data-size="large" data-show-faces="false" data-share="false"></div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12" style="margin-top: 6px;">
<span class="btn pull-left" style="padding-left: 0;"><i class="fa fa-file-pdf-o"></i> 701KB Sizes</span>
<span class="btn pull-left"><i class="fa fa-download"></i> 0 Downloads</span>
<span class="btn pull-left" style="padding-right: 0;"><i class="fa fa-eye"></i> 124 Views</span>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12">
<span class="btn pull-left" style="padding-left: 0;"><a data-toggle="modal" data-target="#report" style="color: #f44336;"><i class="fa fa-handshake-o"></i> Report</a></span>
</div>
</div>
</div>
</div>
</div>
<h4 id="comment"></h4>
<div id="fb-root"></div>
<script>
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id))
return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.9&appId=266776430439748";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-comments" data-href="https://p.pdfkul.com/va-web-connection-55pdf_5a10c73a1723dd558484f245.html" data-width="100%" data-numposts="6"></div>
</div>
</div>
<div class="panel-recommend panel panel-success">
<div class="panel-heading">
<h4 class="text-center panel-title">Recommend Documents</h4>
</div>
<div class="panel-body">
<span>No documents</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form role="form" method="post" action="https://p.pdfkul.com/report/5a10c73a1723dd558484f245" style="border: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Report VA-Web-Connection-55.pdf</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label>Your name</label>
<input type="text" name="name" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="required" class="form-control" />
</div>
<div class="form-group">
<label>Reason</label>
<select name="reason" required="required" class="form-control">
<option value="">-Select Reason-</option>
<option value="pornographic" selected="selected">Pornographic</option>
<option value="defamatory">Defamatory</option>
<option value="illegal">Illegal/Unlawful</option>
<option value="spam">Spam</option>
<option value="others">Other Terms Of Service Violation</option>
<option value="copyright">File a copyright complaint</option>
</select>
</div>
<div class="form-group">
<label>Description</label>
<textarea name="description" required="required" rows="3" class="form-control"></textarea>
</div>
<div class="form-group">
<div style="display: inline-block;">
<div class="g-recaptcha" data-sitekey="6LeP2DsUAAAAAABvCByMZRCE253cahUVoC_jPUkq"></div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Sign In</h3>
</div>
<div class="modal-body">
<form action="https://p.pdfkul.com/login" method="post">
<div class="form-group form-group-lg">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group form-group-lg">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group form-group-lg">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember Password </label>
<label class="pull-right"><a href="https://p.pdfkul.com/forgot">Forgot Password?</a></label>
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button>
</form>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer-container" style="background: #fff;display: block;padding: 10px 0 20px 0;margin-top: 30px;">
<hr />
<div class="footer-container-inner">
<footer id="footer" class="container">
<div class="row">
<!-- Block footer -->
<section class="block col-md-4 col-xs-12 col-sm-3" id="block_various_links_footer">
<h4>Information</h4>
<ul class="toggle-footer" style="">
<li><a href="https://p.pdfkul.com/about">About Us</a></li>
<li><a href="https://p.pdfkul.com/privacy">Privacy Policy</a></li>
<li><a href="https://p.pdfkul.com/term">Terms and Service</a></li>
<li><a href="https://p.pdfkul.com/copyright">Copyright</a></li>
<li><a href="https://p.pdfkul.com/contact">Contact Us</a></li>
</ul>
</section>
<!-- /Block footer -->
<section id="social_block" class="col-md-4 col-xs-12 col-sm-3 block">
<h4>Follow us</h4>
<ul>
<li class="facebook">
<a target="_blank" href="" title="Facebook">
<i class="fa fa-facebook-square fa-2x"></i> <span>Facebook</span>
</a>
</li>
<li class="twitter">
<a target="_blank" href="" title="Twitter">
<i class="fa fa-twitter-square fa-2x"></i> <span>Twitter</span>
</a>
</li>
<li class="google-plus">
<a target="_blank" href="" title="Google Plus">
<i class="fa fa-plus-square fa-2x"></i> <span>Google Plus</span>
</a>
</li>
</ul>
</section>
<!-- Block Newsletter module-->
<div id="newsletter" class="col-md-4 col-xs-12 col-sm-3 block">
<h4>Newsletter</h4>
<div class="block_content">
<form action="https://p.pdfkul.com/newsletter" method="post">
<div class="form-group">
<input id="newsletter-input" type="text" name="email" size="18" placeholder="Entrer Email" />
<button type="submit" name="submit_newsletter" class="btn btn-default">
<i class="fa fa-location-arrow"></i>
</button>
<input type="hidden" name="action" value="0">
</div>
</form>
</div>
</div>
<!-- /Block Newsletter module-->
</div>
<div class="row">
<div class="bottom-footer">
<div class="container">
Copyright © 2024 P.PDFKUL.COM. All rights reserved.
</div>
</div>
</div>
</footer>
</div>
</div>
<!-- #footer -->
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://p.pdfkul.com/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-VPK2MQK127"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-VPK2MQK127');
</script>
</body>
</html>
