Creating Your First Card
As you learned in the previous chapter, WAP pages are actually called cards, and these cards are constructed using WML. WML itself is a very simple language, even simpler than HTML. But unlike HTML, WML has very strict and rigidly enforced rules.
To get you started, let's look at a complete WML example—a basic card with simple text. The card will generate output as shown in Figure 3.1.
Figure 3.1. Device emulators are ideal for testing WML code.
Note
I highly recommend that you try these examples for yourself as you work through them. The simplest way to do this is be using one of the many available device emulators or development environments. See Appendix C, "Using Device Emulators," for more information on these.
If you do not have an emulator, but do have a WAP enabled device (a phone), you can deploy these pages to a WAP or Web server (the latter will require that you set MIME types appropriately as was explained in Chapter 2, "Introducing WML" ).
In HTML you could create this page by entering nothing more than the output text. You can't do that in WML. The minimum code WML code needed to generate this output is shown in Listing 3.1.
Listing 3.1 Creating Your First WML Page
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN" "http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card>
<p>
Welcome to WAP and WML.
</p>
</card>
</wml>
|
A quick code walkthrough is in order. The first two lines of code are the XML declarations. These specify document version and type and should be included in all WML files. (I used WML version 1.2 here, if you write for 1.0 or 1.1 the <!DOCTYPE> will differ slightly.)
The entire document is enclosed within <wml> and </wml> tags. This is required, and every WML page must have one set of matching <wml> tags. Cards (yes, cards plural—multiple cards are allowed in a single file) must appear in between these tags.
The card itself is defined with a <card> tag and is terminated with a </card> tag, and all card contents must be placed in between these tags. In this example I've entered a single line of text, but it is enclosed within <p> and </p> tags. <p> is a paragraph designator, just like its HTML counterpart. But unlike the HTML <p> tag, in WML this tag is required. Text cannot be placed in a card directly; paragraphs must be placed in cards, and text goes inside of paragraphs. Thus the following card code snippet would generate an error:
<card>
Welcome to WAP and WML.
</card>
Caution
Even though this has already been explained thoroughly, it is worth noting again; WML is case sensitive (had we used <P> instead of <p> an error would have been generated), and all tags require end tags (omitting the </p> tag would also have generated an error).
Many WML tags take optional attributes, and many of these attributes achieve different results based on the device being used. One example of this is the <card> tag's title attribute which is used to provide a card title that the device may choose to display (or ignore) as it sees fit. Listing 3.2 is a revised version of the welcome page we just created; the only difference here is the addition of the title attribute.
Listing 3.2 Displaying a Card Title
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN " "http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card title="Welcome!">
<p>
Welcome to WAP and WML.
</p>
</card>
</wml>
|
To demonstrate what I mean by different devices treating title differently, look at Figures 3.2, 3.3, and 3.4. As you can see, the Nokia browser displays the title text centered and formatted as a page title, the Ericsson browser displays it similarly but boxed for emphasis, and the Phone.com browser does not display the text at all.
Figure 3.2. Nokia's WAP browser is used only in Nokia devices.
Figure 3.3. Ericsson's WAP browser is used only in Ericsson devices.
Figure 3.4. Phone.com's WAP browser is used by devices created by many vendors and is the most widely used browser currently.
Note
Unlike HTML, WML requires that all tag attribute values be enclosed within quotes. In the previous example, specifying title=Welcome! (without the quotes) would have generated an error.
Similarly, and again unlike HTML, WML does not allow spaces before or after the equals sign between an attribute and its value.
Tip
Always test your code in as many browsers and devices as possible. As you can see, even simple code can generate very different output on different devices.
Using Basic Text Formatting
WAP browsers support only basic text formatting. There is no support for fonts and minimal support for size and emphasis control. And unfortunately, even this basic support tends to be implemented somewhat inconsistently on different devices.
Text formatting is covered in detail in a later chapter, but let's look at a simple example. Listing 3.3 contains the same welcome screen again, but this time the words WAP and WML are displayed in bold text (as seen in Figure 3.5).
Listing 3.3 Text Formatting
Figure 3.5. Text formatting—for example, displaying text in bold—is not available on all devices.
As you can see, the <b> tag marks text to be displayed in bold (just like the HTML <b> tag).
▸ For more information on text formatting, see Chapter 5, "Managing Output."
Using Basic Paragraph Formatting
WAP browsers support all the basic forms of paragraph formatting. You can justify text, insert line breaks, and even use tables. But again, unfortunately, some of the more advanced features (such as justification and table use) tends to be implemented rather inconsistently. Fortunately, however, almost all browsers seem to support basic paragraph and line breaks.
Paragraph formatting is also covered in detail in a later chapter, but let's look at a simple example. Listing 3.4 contains a modified welcome screen (shown in Figure 3.6).
Listing 3.4 Formatting a Paragraph
Figure 3.6. WAP browsers automatically allow vertical scrolling when text will not fit in a display.
The <br> tag inserts a line break. But unlike the HTML <br> tag, this tag requires a matching end tag (all WML tags must have matching end tags). For this reason <br /> is used. This is a shortened version of <br></br>, and this type of syntax is required for all tags that don't have actual matching end tags.