262 Chapter 6 • Web Clipping Using the <a> Tag The anchor tag is the defining feature of HTML versus other document tech- nologies, and arguably the most important tag in any Webmaster’s repertoire.The anchor tag supports three different attributes within Clipper: href, name, and button.The meaning and syntax of these attributes is described in Table 6.6. Table 6.6 Attributes of the <a> Tag Attribute Description Syntax Href Refers to the location of the <a href=””>Text</a> document being linked to, identical to desktop browser Name Refers to the anchor itself, <a name=””>Text</a> identical to desktop browser Button Displays link as button, unique <a href=”” button>Text</a> to Clipper www.syngress.com The LocalIcon Meta Tag It is possible to include extra images within a WCA by specifying them as a LocalIcon by using the following syntax: <meta name="LocalIcon" content="myimage.gif"> Doing so will instruct the WCA Builder to bundle the image within your .pqa, thus ensuring that the icon exists on the local device (we rec- ommend including all of these references in the index page of your application to keep track of them). You can reference these images later in your server responses with the following syntax: <img src="file:mypqa.pqa/myimage.gif"> Clipper will find the image on the local device and display it to the user without them having to download the image from your Web site and send it over the air to the device. This is the preferred method of using images in a server response. It will require some forethought when you initially build your WCA, but it will help to create a faster (and cheaper) user experience! Developing & Deploying… 159_wg_wi_06 10/22/01 4:37 PM Page 262 Web Clipping • Chapter 6 263 The protocols shown in Table 6.7 are valid with an anchor tag in a Web clip- ping sent to a browser or WCA installed on the device. Table 6.7 Protocols Valid with the <a> Tag Protocol Resource http:// Uniform Resource Identifier (URI) accessed via HTTP. https:// Uniform Resource Identifier (URI) accessed via secure HTTP. mailto: E-mail address, accessed via the Exchange Manager. The Exchange Manager calls the default e-mail application. This is accomplished via Messaging Application Programming Interface (MAPI), which is the same library that handles this action on a desktop computer. file: Location of file on device. You can access individual pages with an installed WCA by using the following syntax: <a href=”file:mypqa.pqa/page1.html”>. palm: Application on device. When linked to, Clipper is closed and the requested location is launched in place of Clipper. For example, <a href=”palm:memo.appl”> can be used to launch the Memo Pad. palmcall: Application on device. When linked to, the application is launched from Clipper, and Clipper remains in the background until the application is closed. Whenever Clipper has to send information over the air, it will render three small lines to the left of a link, whether it is a text link or a button.This over- the-air icon informs users that they will be sending and receiving data over the wireless network, and will correspondingly incur charges. Links that point to a page that is located on the device using the protocols will not have this symbol.A secure link will show the image of a small key and the over-the-air icon. Using the <form> Tag The <form> tag is a very important aspect of Web clipping, as it enables your WCA to send data to a Web server located on the Internet. Clipper allows you to use both GET and POST methods, and you must specify an action attribute, which specifies a Uniform Resource Identifier (URI) for your form to send data to. Using the <select> Tag The <select> element allows you to generate a menu that allows your user to make a choice from a variety of options (specified using <option> elements www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 263 264 Chapter 6 • Web Clipping within the <select>), and behaves almost exactly the same as it does in a desktop browser.The select element supports the attributes shown in Table 6.8. Table 6.8 Attributes of the <select> Tag Attribute Contains Description Default Name String Name of variable Required – N/A containing selected value to be sent to server Size Number Number of options to 1 be displayed Multiple Minimized attribute, Allows multiple options Off no value needed to be selected; in order to enable a scrollable list, the minimum value is 2 Using the <input> Tag The <input> element allows the user to input information that can be sent to a server for processing. It supports a wide variety of formats via the type attribute. The <input> element supports the attributes shown in Table 6.9. Table 6.9 Attributes of the <input> Tag Attribute Meaning Type The type of input to be rendered: valid values for this include text, password, hidden, radio, checkbox, submit, reset Name Name of variable containing value to be sent to server Value Predefined value Checked Specifies that an input with type radio or checkbox will be checked Size Specifies the length, in character units, of the input (of type text) to be rendered Maxlength Specifies the maximum number of characters that may be entered in an input of type text www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 264 Web Clipping • Chapter 6 265 NOTE There are also two Palm OS-specific values that may be specified for the input element: timepicker and datepicker. See the section, “Web Clipping Extensions.” The <input> element behaves quite similarly to its standard HTML counter- part, with the exception of the radio button (type=radio).This type is rendered as a box, which may be selected by the user. In order for this box to display any text, the label must be inserted directly after the input tag, as shown in Figure 6.19 and Figure 6.20. Figure 6.19 Adding Radio Buttons <html> <head> <title>Radio Button</title> <meta name="PalmComputingPlatform" content="true"> </head> <body> <h1>Radio Button Example</h1> <form action="http://www.yoursite.com/cgi-bin/script.cgi"> <input type="radio" name="radio" value="Option1">Option1<br> <input type="radio" name="radio" value="Option2" checked>Option2<br> <input type="radio" name="radio" value="Option3">Option3<br> <input type="radio" name="radio" value="Option4">Option4<br> <input type="radio" name="radio" value="Option5">Option5<br> </form> </body> </html> www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 265 266 Chapter 6 • Web Clipping Web Clipping Extensions There are a few elements unique to Web clipping.These include some <meta> tags that relay information to the Proxy Server, variables that can be used to identify unique devices and their approximate locations, and objects that can gather date and time data from the user. NOTE If you have HTML on your existing site that you would like to make avail- able to Web clipping users, you can mark it with the <smallsscreenig- nore> tag, which tells the proxy server to ignore the code in between. Palm-Specific <meta> Tags There are many <meta> tags and header information that are specific only to Web clipping.A full list of these tags is described in Palm Inc.’s Web Clipping Developer’s Guide, located at www.palmos.com/dev/tech/docs/webclippings/ PalmWebClippingFront.html.Table 6.10 describes the most common and useful tags that you can use to relay information. www.syngress.com Figure 6.20 Radio Buttons Added in Clipper 159_wg_wi_06 10/22/01 4:37 PM Page 266 267 Table 6.10 Useful Meta Tags for Web Clipping Tag Name Example Description Historylisttext <meta name=”historylisttext” content=”Hello, World!”> Specifies text to be displayed when users view their his- tory. If omitted, Clipper will display the time the clip- ping was viewed. LocalIcon <meta name=”localicon” content=”myimage.gif”> Used while building This image can later be referenced in clippings sent down your WCA, this tag from a Web server by using the following syntax: specifies the name <img src=”file:mypqa.pqa/myimage.gif”> of an image to be included in a WCA and stored on the device. PalmComputingPlatform <meta name=”palmcomputingplatform” content=”true”> Specifies that a clip- ping is safe for Clipper and that it should not be modi- fied by the Palm.net Proxy Server. It is strongly encouraged that you include this tag in all of your server responses. 159_wg_wi_06 10/22/01 4:37 PM Page 267 268 Chapter 6 • Web Clipping NOTE Palm OS 4.0 offers a great many more <meta> tags than those listed here, including some caching mechanisms. As time progresses, you may be interested in implementing some of the newer features of Web clipping. Identifying Users with a Device ID There is a special variable that you can access on any device that supports Web clipping. It is referenced as such: <input type="hidden" name="id" value="%deviceid"> This variable is returned in the format [1, 0, -1].[X]. The content of the first brackets corresponds to the type of device: ■ A value of 1 is returned if the proxy server recognizes the device ID as being a Palm VII. ■ A value of 0 is returned if the device cannot be determined to be a Palm VII or other device. ■ A value of –1 is returned if the proxy server can determine that the device is not a Palm VII. The content of the second set of brackets is a unique string that is created upon device activation.You can use %DEVICEID to identify unique users, but with limited reliability. Depending on the network from which your user is accessing your application (Smart Phones in particular), the value of %DEVICEID may change from session to session, and, in some cases, within a particular session. NOTE The actual string format of %DEVICEID may change as time progresses, so it should be treated as a black box when used in a server-side applica- tion. That is, do not make any assumptions as to the exact format of the string. Be sure to accommodate this in your application in order to create the best experience for your users. www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 268 Web Clipping • Chapter 6 269 SECURITY ALERT You should not associate any personal information with %DEVICEID. Mobile devices are susceptible to theft, and sensitive information may be compromised if %DEVICEID is the only method of authentication. Furthermore, a determined user can obtain the %DEVICEID from other devices by offering a Trojan Horse PQA. There is not a reliable means of determining the authenticity of a request using %DEVICEID, and you should use prudence when using it to identify users. www.syngress.com Using %DEVICEID to Recognize Individual Users Given that a Palm.net proxy server processes all Web clipping transac- tions, you cannot use the user’s IP address to identify individual users because all requests will be written to your server logs with the IP of the proxy server. Also, cookies are supported only for Palm OS 4.0, which, at the time of this writing, is not yet prevalent in the market. The %DEVI- CEID element was implemented as a cookie substitute and was intended to allow developers to identify individual devices. There are, as previously mentioned, issues with the implementation that severely limit the usage of %DEVICEID for authentication in an envi- ronment that deals with sensitive data. However, if no real damage will be caused if the %DEVICEID of a particular user is spoofed, and you make sure to rely only on %DEVICEID for Palm VII users (since it may change midsession for users of other networks), you can use it reliably to identify individual users in a variety of situations. For example, if you offer downloadable stock quotes, you may pro- vide your users with an option to customize their preferences and select the stocks they want to see. You can develop your application so that when the user initiates a request for stock quotes from their device, they receive quotes for the stocks in which they are interested. This is an effective means of providing a positive user experience while minimizing data sent over the air. The %DEVICEID element provides Webmasters with something we previously have had to generate ourselves, namely, a unique key that represents an individual user (device). This identifier is unfortunately insecure and not always reliable (depending on the user’s connection network), so you must take care in how you use it. Developing & Deploying… 159_wg_wi_06 10/22/01 4:37 PM Page 269 270 Chapter 6 • Web Clipping Estimating User Location by ZIP Code The %ZIPCODE variable contains the ZIP code of the nearest Web clipping base station to the user.This will provide a rough estimate of where your user is located at the time of access, accurate to within approximately 10 miles. <input type="hidden" name="zip" value="%zipcode"> NOTE This variable may not be always available. Unless your user is connected via the Mobitex network, you will not be able to utilize this feature of Web clipping. In the event that the ZIP code is unavailable, %ZIPCODE returns a value of 000000. You can work around this by building some detection into your server-side application that allows users to enter their locations as opposed to submitting the %ZIPCODE value automatically. Palm OS 4.0 offers much more information about the user’s network, including information regarding the latitude and longitude of the loca- tion, as well as county, city, state, and country information. If you are in a situation in which you can reliably know what type of hardware your users have (such as a corporate environment), then you may be able to take advantage of this information before the 4.0 OS becomes prevalent in the general market. Selecting a Date with the Datepicker Object A very useful element unique to the Web clipping environment is the datepicker object.You can invoke the datepicker object to generate a string containing a date: <input type="datepicker" name="date" value="MM/DD/YYYY"> NOTE The date attribute is output in YYYY-MM-DD format, but dates are assigned using the MM/DD/YYYY format shown in the preceding code. www.syngress.com 159_wg_wi_06 10/22/01 4:37 PM Page 270 Web Clipping • Chapter 6 271 If you omit the value attribute, or if the value is not in the expected format, then the current date will be displayed. Figure 6.21 shows how the datepicker object looks in the POSE (in this case, we have specified 01/01/2001 as the date within the HTML code). When users click on the input field, they are presented with a clickable cal- endar that allows them to select a date (see Figure 6.22). The user is also given the option to select Today as the date.This option allows the user to select the current date. Upon pressing the Today button, the user is returned to the page containing the datepicker object, as illustrated in Figure 6.23. www.syngress.com Figure 6.21 Datepicker Object with Value Attribute Omitted Figure 6.22 Selecting a Date 159_wg_wi_06 10/22/01 4:37 PM Page 271 . also given the option to select Today as the date.This option allows the user to select the current date. Upon pressing the Today button, the user is returned to the page containing the datepicker. select the stocks they want to see. You can develop your application so that when the user initiates a request for stock quotes from their device, they receive quotes for the stocks in which they. linked to, identical to desktop browser Name Refers to the anchor itself, <a name=””>Text</a> identical to desktop browser Button Displays link as button, unique <a href=”” button>Text</a> to