December 17, 2014
Hot Topics:

Learning WML - Tools and Structure

  • June 30, 2002
  • By Steve Schafer
  • Send Email »
  • More Articles »

Basic WML Structure and Rules

Now that we have our server set up and our toolkit stocked, we're almost ready to do some coding. First let's examine the basic form of WML documents and some basic coding rules.

Basic WML Deck Structure

The following listing shows the basic elements you need in most WML decks:

<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml><head><meta.../></head><card id="cardid1" title="Card1"> ...</card><card id="cardid2" title="Card2"> ...</card> ...</wml>

You may remember the document preamble code (first two lines) from the previous article. These lines are necessary to identify the type of content (WML) to the browser. They need to be present in all files.

The deck is then started with a <wml> tag, and ended with a </wml> tag.

Note that the <head> section is optional, but is necessary to supply any meta information (via <meta> tags) required for your deck. Typically, cache instructions are passed via meta tags included in the <head> section. Leaving the <head> section blank by including only the <head> tags is a bad idea; it can cause some browsers to fail. Include this section only if you need to include <meta> or <access> tags.

What follows is the actual deck, made up of individual cards, each with a mandatory ID and title parameter. (Other parameters for the <card> and other tags will be covered in later articles.) Some browsers display the card title at the top of the display; others don't. It's important to make your card titles display-ready (short but meaningful, and so on).

Tip: It may be helpful to have this information stored in a file as a template for all your WML coding. Note that some SDKs provide a skeletal WML structure when you create a new file.

WML Language Rules

Let's quickly review some basic WML language rules:

  • Most tags have opening and closing components. Those that dont (<access>, <br/>, <img>, <meta>, and so on) include a slash at the end of the tag, signifying that the tag is singular (opening and closing).
  • The language is case sensitive, so all closing tags must match the capitalization of the opening tags. (<B>This is bold</b> will not have the desired results.)
  • All tag parameter values must be enclosed in quotes (for example, <p mode="nowrap">).
  • All text must be enclosed in a tag, even if that tag is just a simple paragraph tag (<p>).
  • There are some elements that must appear in a certain order. For example, within a element, the following must appear in order: <onevent>, <timer>, <do>.

WML Text Formatting

Like HTML, WML supports several types of text formatting. The following table describes the available text-formatting tags.

TagNameUse
<p>ParagraphMark blocks of text as paragraphs.
<br/>Line breakBreak the current line, much like pressing Enter in a word processing program.
<b>BoldBoldface the delineated text.
<big>BigMake the text appear in a large point size.
<em>EmphasizedEmphasize the text (usually with italics).
<i>ItalicDisplay the text in an italic font.
<small>SmallDisplay the text in a small point size.
<strong>StrongDisplay the text in a strongly emphasized font. (Usually a large point size and italic.)
<u>UnderlineDisplay the text in an underlined font.

Note: Many of these text attributes (such as <big>, and so on) are not supported by all mobile browsers.

The most important text formatting tag is the paragraph tag (<p>). This tag must appear around all text not delineated by other tags. It also controls how the browser presents the text if you add the optional mode attribute. The two supported modes are "wrap" and "nowrap", with "wrap" as the default. The wrap mode allows the text to flow down the device screen, breaking lines at appropriate spaces and punctuation. The nowrap mode uses a marquee-like display to display the text, scrolling the text horizontally when this mode is selected.

For example, take the following code:

<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml><card id="card1" title="Text Wrapping"><p mode="nowrap">No Wrap: The quick brown fox jumped over the lazy dog.</p><p mode="wrap">Wrap: The quick brown fox jumped over the lazy dog.</p></card></wml>

It results in the following display:


Figure 2-1 - The mode attribute determines how the

tag wraps text.

Image courtesy Openwave Systems Inc. (Openwave, the Openwave logo, Openwave SDK, Openwave SDK Universal Edition, Openwave SDK WAP Edition are trademarks of Openwave Systems Inc. All rights reserved.)


Figure 2-2 - Text set to nowrap will scroll horizontally when the browser selects that line. Note how the first line (nowrap) has scrolled in this figure. The text will continue to scroll until it reaches the end of the paragraph, where it will start over.

Image courtesy Openwave Systems Inc. (Openwave, the Openwave logo, Openwave SDK, Openwave SDK Universal Edition, Openwave SDK WAP Edition are trademarks of Openwave Systems Inc. All rights reserved.)

If you don't use the mode attribute, the client browser uses the currently selected mode, or the default "wrap" if no mode had been defined previously. Typically the nowrap mode is used for headlines and selection text, while wrap is used for general and body text.





Page 2 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel