To: steve harmon - analyst who wrote (3574 ) 12/27/1999 8:30:00 PM From: JOE Respond to of 4337
HDML SPEC: w3.org Mobilizing the Web with HDML An introduction to the Handheld Devices Markup Language by Matthew Allum Oct. 9, 1998 If you enjoy pushing the most out of the constraints of designing for the Web, then HDML most definitely takes that to an extreme. As the markup language for displaying Web pages on mobile phones, the display could well be a small as three lines of up to 12 characters each. The great advantage of course is having the power and resources of the Web in your pocket. I hope here to give an introduction into this portable language. The phone connects to the Web by you dialing into a special up.link server that acts as a go-between between the cellular wireless network for the phone and the Internet. Once connected, the cellular phone behaves just like a basic Web browser. HDML is an open hypertext-based language, like HTML but with a structure and syntax more suited for display on a small screen, and with a user interface. Developed by Unwired Planet, HDML has been submitted to the W3C for standardization, so it's important to note that HDML isn't an approved standard. Unwired Planet offers an "up" Developer Kit, or UP.SDK, for developers. (UP.SDK can be downloaded for free from Unwired's site.) The UP.SDK consists of an UP Phone Simulator -- an applet for Windows 95/NT that emulates a Web-enabled phone -- and has many features to aid easy HDML development. The UP.SDK includes libaries of C and Perl functions to aid the server-side generation of HDML, sample HDML files, and a PDF file of documentation. The following piece of code simply displays the classic words, Hello World, on the phones display. <HDML VERSION=2.0> <DISPLAY> Hello World! </DISPLAY> </HDML> To try it out, copy the code into a text editor and save it with a .hdml extension. With the UP Simulator installed, open it, and type the file's location into the the drop-down box. You'll hopefully see the following. Alternatively you could save the file on to a Web server and access it via the HTTP protocol. You'll have to set a MIME type for the content type text/x-hdml with the extension .hdml so the Web server knows how to serve up the HDML pages. Building an HDML page HDML code really isn't all that different from HTML. We see the header and footer tags; defining the language and version just like the <HTML> tags. The main difference between HDML and HTML is the way in which a document is defined. With HTML, a document contains only one visual page -- there is only one set of body tags. With HDML there can by multiple body sections, or cards. These cards can then link to each other just like linking to other URL's. One or more cards make up a deck, defined by the <HDML> tag. Now that we know what cards and decks are, let's go through the three main types of cards: display cards, choice cards, and entry cards. In the above example, a deck with one card, the <DISPLAY> tags signify a display card that gets sent to a phone. The text between these tags is then displayed on the phone's screen when the file is accessed. As you can see, the text wraps to the screen width; placing a <LINE> tag before this text will stop the text from wrapping and a small horizontal scroll bar will appear on the bottom of the phone's display. Some simple HDML formatting tags are shown in the table below. HDML Tag Reference <HDML> Defines the HDML version and signify a deck being sent to the phone. <DISPLAY> Defines a display card. <CHOICE> Defines a choice card. <ENTRY> Defines an entry card. <WRAP> Wraps text (default). <LINE> Causes text to scroll. <CENTER> Center text. <RIGHT> Aligns text to Right. <TAB> Tabulates text. <BR> Line Break. <ACTION> Associates an 'action' (such as navigating to a new URL) with a particular event (such a key press) The next example shows a deck with three cards: <HDML VERSION=2.0> <DISPLAY> <ACTION TYPE=ACCEPT TASK=GO DEST=#displayCard2> This is card 1 </DISPLAY> <DISPLAY name=displayCard2> <ACTION TYPE=ACCEPT TASK=GOSUB DEST=#displayCard3 > This is card 2 </DISPLAY> <DISPLAY name=displayCard3> <ACTION TYPE=CANCEL TASK=RETURN > <ACTION TYPE=ACCEPT TASK=GO DEST=#http://someurl > This is card 3 </DISPLAY> </HDML> The deck has three display cards and a new tag. The <ACTION> tag specifies what should happen when a user presses one of the phone's function keys (the keys along the bottom of the phone). The TYPE attribute specifies the key, while the TASK attribute denotes what will happen when the key is pressed. The <ACTION> tag is used to display the next card when the user presses the "OK" key on the phone. Press OK again, and the user will be taken to the third card. This time notice the task is GOSUB, which when paired with a RETURN, will take the user back to the referring card. Pressing the "OK" key will take the user to a different URL rather than a card in the same deck. The type can correspond to different keys such as a help or prev key. The DEST is paired with the GO or GOSUB attribute to define a new location. There are various other types of tasks that can be accomplished. For instance, you can set it up so that a task will dial the phone to make a phone call by assigning the task to an action key. These are explained in the UP.SDK. Data cards can be used to get text entered by the user, to present the user with choices, and to display a blank screen while executing an action. The following example shows a deck with a card that presents the user with a couple of options to choose from. <HDML VERSION=2.0> <CHOICE> HDML GOOD? <CE TASK=GO DEST=#yes>yes <CE TASK=GO DEST=#no>no </CHOICE> <DISPLAY name=yes> Thanks </DISPLAY> <DISPLAY name=no> Sorry </DISPLAY> </HDML> By using the arrow keys on the phone, the user can select one of the choices; pressing the "OK" key will execute the associated task. The above poses a question and then gives a response based on the users input. As with assigning various tasks to keys, tasks may also be assigned to choices. Variables can be bound to choices and actions by adding a VARS parameter to the tag. By adding these set values to the URL's query string, the values can be passed to a cgi-bin-type program on the server, similar to a form on a HTML page. Also similar to a very basic HTML form, by utilizing the phone numbers keys (with associated letters) text can be entered into a card. The <ENTRY> tag is used to define an entry card. The following example asks for the users age. Once the user enters his or her age and presses the "OK" key, their age will be displayed on the phone's screen. <HDML VERSION=2.0> <ENTRY NAME=ageEntry KEY=age> <ACTION TYPE=ACCEPT TASK=GO DEST=#displayAge > Age? </ENTRY> <DISPLAY NAME=displayAge> <ACTION TYPE=ACCEPT TASK=GO DEST=HTTP://cgi-binURL?age=$(age) > Your age is $(age) </DISPLAY> </HDML> The KEY parameter on the entry tag sets a name for the variable that will store the entered information. The TASK and DEST attributes are similar to that of a ACTION attribute. In the example they signify for the displayAge card to be displayed. The dollar sign ($) and parenthesis (( )) are changed by the phone to show the value for the variable. We see this used for both displaying the users age and attaching this value to the querystring of a cgi-bin URL. The UP.SDK also comes with a Perl library for aiding the development of HDML cgi-bin applications. Of course HDML does go a lot further than what can be explained here. To learn more about HDML, the documentation that comes with the UP.SDK is very extensive and very helpful.