The examples below are simplistic, but they provide complete files demonstrating many of the typical usages of the HTML and extensions for the Palm OS® 3.2. The HTML source code for each of these examples is provided under the src directory, and any corresponding web clipping applications are provided under the wca directory. The web clipping applications are ready to install onto a device or into the Palm OS® Emulator.
ATM Locator
The ATM Locator presents the user with a form and two buttons. The form is used in conjunction with the first button, which is of type
submit, whereas the second button, which is a link using thebuttonattribute (install locator.pqa to see the button attribute effect on the link), is meant to provide a quick search option without requiring the user to enter any data.
Movies Query
The Movies Query presents the user with a form and a single button. The form must be completed by the user for the content provider server to have enough information to process the request. The
datepickerandtimepickerINPUTelement type attributes are used to facilitate the choosing of a date and time, and an option of setting the zipcode value by checking a box for a local zipcode is included. If the box is checked, then the content provider server will use the hidden value with the%zipcodestring, which is replaced with an actual zipcode by the clipping proxy server, instead of requiring the user to insert a zipcode into the Zip field.
Restaurant Guide
Like the previous two examples, the Restaurant Guide presents the user with a form and a button. Completion of the form and activation of the button would send a request (if there was a content provider for this app) to the content provider server to provide a listing of restaurants matching the given criteria (see the Italian Restaurant List Clipping for an example of a clipping returned based on a query for moderately priced Italian food in San Francisco).
The
%zipcodespecial string is used in this example by including it in aINPUTtag of attributetypeequal tohidden. Then, a pop-up list of locations is provided for the user to choose from, and one of the options in that list is "Local". The content provider server would then use the hidden zipcode value instead of a given city if the location value was set to Local.
Stock Query
In this example, the user is presented with a text input field, and several buttons. The first two buttons are associated with the text input field, and will act accordingly. The third button is associated with another form that only contains one
INPUTtag oftype hiddenusing the%deviceidspecial string (Note that this also could have been implemented using anANCHORtag with the data included in the URL string). The fourth button is a simple link to another page in the web clipping application for configuring the user's account.
Stock Configure
The Stock Configure example is linked to from the root page of the Stock Query web clipping application, and presents the user with a form for managing the user's portfolio. This portfolio is quite simple, in that it only allows the user to manage five different stock symbols with a specific number of shares. Each of the input fields, excepting the last two, provides the user with an example value. The source HTML demonstrates the use of the
%deviceidspecial string in a hidden field, as well as a simple use ofINPUTtags for conveying data to the content provider.
Movies Query
The Movies Query presents the user with a form and a single button. The form must be completed by the user for the content provider server to have enough information to process the request. The
datepickerandtimepickerINPUTelement type attributes are used to facilitate the choosing of a date and time, and an option of setting the zipcode value by checking a box for a local zipcode is included. If the box is checked, then the content provider server will use the hidden value with the%zipcodestring, which is replaced with an actual zipcode by the clipping proxy server, instead of requiring the user to insert a zipcode into the Zip field.
Travel, Inc. Clipping
The Travel, Inc. clipping presents travel information to the user based on the assumption of a query (see the Travel, Inc. web clipping application) for flight information from LGA to LAX around 8:00 a.m. on August 4, 1997. For this topic, the clipping is simply intended to show the content provider server having used the date and time information provided by the
datepickerandtimepickerINPUTtypes.
Travel, Inc. Query
The Travel, Inc. query page presents the user with a form and two buttons (the second button is normally seen as a link in a web browser). The form demonstrates the use of the
datepickerandtimepickerINPUTtypes, as well as a pop-up list and some text entry fields. The first button would initiate the sending of the given data as name/value pairs to the content provider server, and the second button links to a form for retrieving an airport code or a city associated with a code.
| Note: | Images and links within clippings examples will not display or function on a web browser as the reference syntax used is intented for referencing images and pages on a Palm VII device. Please load the corresponding web clipping application to see a demonstration, and examine the source code to see the implementation details. |
Banking Account Clipping
The Banking Account clipping shows the user's bank account information in a table, and provides a link to return to the root or home page stored on the device as part of the web clipping application. Because the link to the root page is within a clipping, absolute referencing is required and the
fileprotocol syntax must be used. The source HTML code for this file shows the implementation of those references.
Directory, Inc.
The Directory, Inc. web clipping application root page presents the user with a logo, a form of several text entry fields, a couple of buttons, and a couple of links. The image is stored within the web clipping application, and it is linked using a relative reference to the Directory, Inc. About page, which is also stored within the web clipping application. Layout of the image is controlled using a table. A link to a page listing state abbreviations and a link to the About page, once again, use relative referencing, as they link to pages within the web clipping application.
Lodging Info
The Lodging Info clipping shows two hits matching the criteria requested by the user for accomodations and two buttons. The hotel names are linked back to the content provider server for more details on the specific hotel. The first button links back to the content provider server to request more matches to the initial query, and the second button links back to the query page in the web clipping application on the device.
Movies Query
The Movies Query presents the user with a form and a single button, and a "star" image next to the main heading of the page. The star image is stored within the web clipping application and referenced using a relative path. In this example, the layout of the image is controlled by placing the image in a table.
Travel, Inc. Clipping
The Travel, Inc. clipping presents some travel information to the user based on the assumption of a query (see the Travel, Inc. web clipping application) for flight information from LGA to LAX around 8:00 a.m. on August 4, 1997. What is of interest to this topic is the referencing to other pages in the Travel, Inc. web clipping application, or specifically the "New Search" and "Codes" links. If you install the Travel, Inc. app and then build this clipping using the Query Applicatin Builder, you can demonstrate for yourself how clippings, or even web clipping applications, can link to other specific web clipping applications on the device. The source HTML code for this file shows the implementation of those references.
Travel, Inc. Query
The Travel, Inc. query page presents the user with a form, two buttons (the second button is normally seen as a link in a web browser), an airplane image, and a heading that is also a link. Like the Movies example, the image is referenced using a relative path, and its layout is controlled by placing the image in a table. The heading is contained within an
ANCHORtag and references an "About" page within the web clipping application; relative referencing is also used. The second button links to a form for retrieving an airport code or a city associated with a code, and is displayed on a Palm VII device as a button by using the specialbuttonattribute.
Accomodations
Several pop-up lists are used in the root page of the Accomodations web clipping application. Notice that a pop-up list is used for fixed data, like states of the U.S., price ranges, etc. Also, notice that in the case of the state listings, abbreviations are used. This reduces the number of bytes sent over the wireless network when the user has compeleted the form and activated the "Find Hotel" button, as the data entered is transfered as name/value pairs. Any reduction in the length of those name/value pairs helps reduce the cost to the user.
A special case of the pop-up list is used for the "Ammenities" selection. In this case the
multipleattribute of theSELECTtag is used to indicate that the user may choose more than one item from the list. Each item has a corresponding check-box that can be checked or un-checked to signify the selection or deselection of that item. Notice that theselectedattribute of theOPTIONtag is used to have the "Restaurant" item in the list pre-selected. When using themultipleattribute, you should be aware that you'll also need to use thesizeattribute and specify a minimum size of 2, otherwise the list won't display properly on a Palm VII device.
Restaurant Guide
The Restaurant Guide offers several pop-up lists for the user similar to those used in the Accomodations web clipping application.
Brokerage, Inc.
The Brokerage, Inc. web clipping application shows three text entry fields for the user to input a user name, password, and the stock symbols of interest. The user name and symbols fields are of
type text, but the password field is oftype password, and when viewed on a Palm VII device, this field is displayed as a box with either the word Unassigned or Assigned in the box. Tapping on this box will cause a modal dialogue to be displayed where the user can enter their password and tap OK or Cancel to return to the page. Note that while the user is entering the password in the modal dialogue, the password is fully displayed as entered; i.e.: no asterisks or other characters are used to hide the characters actually entered. As the user can move the device easily out of site of snoopers, and as entering the password using Graphiti can easily result in mistakes, it is appropriate that the user be able to see what is being entered. When the OK or Cancel buttons are tapped, the password is hidden from view.Notice that the HTTPS protocol is used for the transmission of data from the form on this page of the Brokerage, Inc. web clipping application. This causes the data sent over the wireless network to be encrypted using the Certicom Corp. Elliptic Curve Cryptography technology (see the Palm VII White Paper for more details on this technology) and for an SSL connection to be established for the transmission of data between the web clipping proxy server and the content provider's server.
The following examples show various uses of the TABLE element in layout of a web clipping application's and a web clipping's content.
Accomodations
City Query
City Clipping
Directory, Inc.
Italian (Acquerello Restaurant) Clipping
Italian Restaurant List Clipping
Maps, Inc.
Stock Clipping
Stock Configure
Stock Info
Travel, Inc. Clipping
About Directory, Inc.
The About Directory, Inc. is simply a page in the Directory, Inc. web clipping application that is used for providing information about the company such as contact info, history, vision, version of the web clipping application (easier for the user than having to go to the Version Info view of the Application Launcher), etc.
Weather Clipping
This example clipping shows the use of a table for layout, images to "speak a thousand words" to the user (thus saving cost as the images could be stored locally in the web clipping application), and the use of the first couple of lines in the clipping for some advertising.