8/9/2019 Introduction to HDML

1/3

Intro to HDMLby sharad khaple Updated 28 March 2010

sharad khaple is punes resident covering the likes of PHP, DNS,all web development applications and services please visit www.avivatech.comand SOAP with Avivatech solutions.

Page 1

No, that's not a typo. HDML is the so-called handheld device markup language that allows you to make your website

portable: People can view it on their mobile phones, pagers,and other tiny devices. Needless to say, the average personis not going to want to research her dissertation on Keatsean animal imagery on a 4-by-12-character screen as shewalks to her car, so the language and browser specifications focus on small-scale transactions: stocks, sports scores you know the type. And now that compliant wireless phones are becoming more widespread, you can use HDML topropagate your tidbits of information to the world.What Is What?

Back in 1997, a company called Unwired Planet invented HDML and the browser that reads it, called the UP.Browser. Atthe time, it was the great hope of the so-called "third-generation,"Web-enabled browser. But a lack of support on bothends left HDML temporarily high and dry. Recently, though, the WAP Forum, founded by Unwired Planet (since evolved

into Phone.com and most recently Openwave) and such industrymovers as Nokia and Motorola, unveiled WAP, thewireless application protocol, which in conjunction with this year's smaller, cheaper phones with greater screen realestate allows much more robust and widespread phone surfing. WML (wireless markup language, not to be confusedwith Website Meta Language), a fully XML-compliant descendant of HDML, is part of the WAP standard. Because WMLwas developed after HDML, it's a bit more graceful and is supported by all new wireless phones. (Here is our intro courseon WML.) Still, HDML is the only language that older phones understand. Here's a brief introduction to it; but beware

that it's on its way to obsolescence. If you don't have a device on which you can view HDML pages, you can download asimulator for your PC, so you can follow along at home. A list of phones that ship with the UP.Browser, including

availability and version information, can be found here. Only some of these can handle WML, but they can all handleHDML.

Intro to HDMLPage 2 Getting Ready for HDML

To get started, you need to have a Web server that's set up to serve these kinds of files. If you or your host use Apacheor another NCSA-based server, you simply need to create a file called .htaccess (don't forget the initial dot) in your top-level HTML directory containing the lines shown below. The second statement column (after "addtype") is the mimetype, the last part is the file extension: addtype text/x-hdml hdml addtype text/vnd.wap.wml wml addtype image/bmp bmp With

other servers, you just need to add the equivalent lines to your mime configuration in the appropriate way.Once you'reready to roll, the next step is to build an HDML deck.

Intro to HDMLPage 3 Writing HDML

As with HTML, every deck starts with and ends with . It is mandatory, though, to specify the languageversion number in the opening statement, so it should actually look like this: .The hardest-workingstatement in HDML is the tag, which contains a single display card. Cards can contain just text or text andactions. Actions are implemented with statements, each of which assigns an action to akey on the phone.

Each key (they're called "softkeys" because they're reprogrammable, even if the plastic's hard) has a default action untilit is assigned an action for a particular card with an statement. For instance, the OK or Accept key's default

action is to go back one card (for more details, check out the HDML 3.0 language reference). Sans further ado, here's abrief example deck.January rainfall
1998: 19
1997: 15February rainfall
1998: 14
1997: 10March rainfall
1998: 18
1997: 19

8/9/2019 Introduction to HDML

2/3

The output of this code looks like this: So the tag's NAME attribute gives each card a relative URL, which isthen used by the tag to find the next card. The tags seen here make the Accept key go to a specific

card when pressed. The TYPE attribute specifies which key to use; LABEL sets the name of the key, typically displayed atthe bottom of the screen as a prompt; TASK tells the key what to do (GO is the most common task assignment by far);and DEST specifies where to go (this can be an absolute or a relative URL, just like you're used to). The syntax forreferring to cards is just like that for named anchors in HTML. If a deck is loaded with no card specified, the browserautomatically displays the first card in the deck.Linking in HDML

Of course, HDML is not without that building block of modern society, the hyperlink. It is, in fact, supplied in the form ofthe oh-so-familiar warm-'n'-fuzzy tag (no , alas). The syntax is as follows:Contents:
Intro About me
Diary My diary
Elsewhere My links

And here's what that looks like:Links are chosen by scrolling down the card the LABEL attribute specifies what is

displayed at the bottom of the screen when each link is highlighted and pressing the Accept key, which in turn loads anew deck. Alternately, you can press the numbered key corresponding to the link, as specified in the ACCESSKEY

attribute. And, as with HTML, you can also use HDML to get interactive with your users.

Intro to HDMLPage 4 Processing User Input

There are two ways to receive user input in HDML: Entry cards allow users to (laboriously) key in information, andchoice cards allow them to choose from a list. Here is a sample entry card:What's your name?

What's your Social Security number?Hello, $name! I bet $socsec isn't your REAL Social Securitynumber.It produces something like this:Each entry is stored in a variable defined by the KEY attribute, which can be called by

prefixing that variable's name with a dollar sign as shown. The FORMAT option allows you to limit the types of entriespossible in a particular field. The Social Security field in this example will accept only numerical input ("N" means onedigit), and a hyphen is automatically inserted after the first three digits and again after two more, Social Security style.

A slash before a character automatically places that character in the field regardless of the user's input. The name fieldseen here allows one uppercase letter followed by any number of lowercase letters. That's what "A*a" means an

asterisk preceding a character type allows any number of that particular character. Here are some other options:Specifier MeaningA An uppercase lettera A lowercase letterN A numberX A number, symbol, or uppercase letterx A number, symbol, or lowercase letterM Any character

8/9/2019 Introduction to HDML

3/3

* Any number of the type of character following the *3 For example, exactly three of the type of character following the specifier Now let's give our users a multiple-choiceoption. Here is a sample choice card:

What is your favorite kind of ice cream?ChocolateStrawberryPeachReally? You like $flav? Whatever.It will look like this: Here's what's happening. As before, the variable specified in the KEY attribute receives the value

string assigned (in the CE statement) to the item the user chooses. After the choice is made, the user is taken to the"show" card, which displays the value of that variable. And that's not all! HDML can even deal with images ... well,certain images.

Intro to HDMLPage 5 Tiny Images

HDML can be used to display small one-bit bitmap images (BMP files only), which ain't much, but it's something. Sincemany phones are not image-enabled, however, it is a very, very good idea to provide descriptive ALT text. Differentphones handle image sizing differently: Some shrink an image that's too large, others crop it, and still others refuse torender it at all. So keep those pixel counts down: 120 by 120 is pretty safe; more might be pushing it. The syntax for

images is pretty straightforward if you know HTML:

Your users will get this:And that's about it. While there is a bit more to HDML (not to mention WML and WAP), that'senough to get you started. When you're ready to start building huge e-commerce sites in HDML, you may want to checkout the HDML Developer's Guide and the HDML 3.0 Language Reference to learn about things like advanced variablehandling, using images in links, bookmarks, hardware sniffing, nested activities, caching,security, push, dynamic pages,etc. The wireless industry continues to embrace WAP, but it's hard to predict how soon and how widely the advanced

features will catch on. Keep an eye on that phone availability page to see which devices are shipping with UP.Browser4.0, which older ones support HDML only or 3.1, which devices can shake hands with WML and HDML, and which onesare compatible with later releases of the version 4.0 browser. In fact, the 4.0 version adds support for WMLScript, thescripting language of the wireless world's miniature Web.Now get coding! The mobile surfers are dying for juicy content.