wml

WML(Wireless Markup Language) : 

WML(Wireless Markup Language)

The xml header tag : 

The xml header tag When you write a page in the wml language, you are actually using a "sub-set" of the new XML web language, which has been specifically designed for mobile phones. In order to comply with some of the XML rules, all WAP pages must (and that means MUST) start with a couple of lines of XML code, shown in blue below. Typically, you would also use cards to layout your page, so the example below is a good example of a blank template, waiting for you to insert your text. An example follows... <?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="MainCard" title="This is a first card"> <p> <!-- your text goes here--> </p></card> </wml>

Using WML Cards : 

Using WML Cards In a web site, when you click on a hyperlink, it traditionally loads a new page from the web site. As WAP phones can only load pages quite slowly, and the actual connection to the WAP site to request the page typically takes half the download time, wml allows you to load several WAP pages in one go. Each page is stored as a "card" and can be navigated between, just like normal WAP pages, except that as they are already loaded into the phone, they appear instantly to the user. You create a card using the <card id="" title=""> tag, and navigate between the cards using hyperlinks or buttons, but with a # before the name, so to navigate to a card called "cardtwo" your hyperlink will need to ask for "#cardtwo"

Slide 4: 

An example follows... <?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="MainCard" title="This is the first page“> <p align="center"> Hi, this is card one in a multi card wml page <br/> <a href="#card2">Go to page two</a> </p></card><card id="card2" title="This is the second card"> <p align="center"> This is the second card <br/> <a href="#card3">Go to page three</a> </p></card><card id="card3" title="This is the third card"> <p align="center"> Here is the third page in the multi card wml page </p> </card></wml>

Page Layout : 

Page Layout Paragraphs In a WAP phone, everything used, must appear inside a paragraph, whether just plain text, a picture or even a table. This is actually the same as a normal web page, but where a web page will forgive you ignoring the paragraph, a WAP phone will not, so you must use them. You can align paragraphs to the left, right or center. When you close a paragraph, any alignment is cleared for the next paragraph. The default alignment for a paragraph if it is not stated is to the left.

Slide 7: 

An example follows... <?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="MainCard" title="This is a first card"> <p align="center"> This is a simple paragraph </p> <p> This is aimed left </p> <p align="right"> This is right aligned </p> </card> </wml>

Page Layout : 

Page Layout Just like in a normal web page, the easiest way to control text, is to insert a line break. That way you can guarantee that the text will feed onto the next line when you want it to. The line break tag is <br/>, and unlike most tags, it does not open and close, it just exists where a break is needed. <wml> <card id="MainCard" title="This is a first card"> <p>This is a<br/>sample text<br/><br/>And now after two line breaks</p> </card> </wml>

Tables : 

Tables Tables in WAP pages follow very much similar rules to those in normal web pages, but there are notable differences. Firstly, you can't nest tables, that is, have one table sit inside a cell of another table. You also cannot control the borders, they will be whatever the phone wants, but are usually invisible. When you create a table, you must specify how many columns wide a table is going to be, but you don't define how many rows down it will go. Within each row that you create, you must create a cell for each column. The tags used in table creation are <table> <td> and <tr>. The table will be as wide as necessary to accommodate the contents that to put in the cells. I would recommend always using a center aligned paragraph to align the table as well, as the phone may use that.

Slide 10: 

<wml> <card id="MainCard" title="This is a first card"> <p align="center"> <table columns="3"> <tr> <td>cell 1</td> <td>cell2</td> <td>cell3</td> </tr> <tr> <td>cell1</td> <td></td> <td>cell3</td> </tr> </table></p> </card> </wml>

Accepting user input : 

Accepting user input Just as with conventional web pages, you can create a "drop down menu" with a list of possible options for a user to select. What you do with the selected items is to usually go to a particular page, but it can also be used to send values to a WMLScript. <wml><card id="MainCard" title="This is a first card"><p align="center">This is a sample text<br/><br/><select name="x" title=“Animal"><option value="d">dog</option><option value="c">cat</option><option value="h">horse</option></select></p></card></wml>

Slide 12: 

You can create boxes on a WAP page for a person to enter some information, like UserID, password or e-mail address,.. The tag to use is the <input> tag and it has several properties that need to be defined. Firstly, it must have a name so that you can use the information that is entered. Secondly, it must have a type, and that can be either "text" or "password". If you select the password option, then the user will see their entry masked, usually by an asterix (*). The final setting that is likely to be used is the format, which is optional, you do not have to use it. This enables you to control what type of information can be entered, and the types allowed are as follows... A Allows any uppercase letter a Allows any lowercase letter N Allows any number X Allows any uppercase character (symbol, letter, number) x Allows any lowercase character (symbol, letter, number) *f Allows any number of characters of format f (e.g. *X)  nf Allows n characters of format f (e.g. 5a) When not using * and f, you must repeat the codes for each charcter permitted If no format is specified then an unlimited number of any characters can be typed in by the user

Slide 13: 

<wml><card id="MainCard" title="This is a first card"> <p align="center">This is a sample text<br/><br/>Name : <input name="title" type="text"/>Age : <input name="age" type="text" format="NN"/></p> </card> </wml>

Inserting links : 

Inserting links There are two types of hyperlinks that can be used in a WAP page. The first is the conventional type of hyperlink, pointing to a new wml page, either on your site, or a page on someone else's WAP site. The other type of hyperlink points to another card in your wml deck. The tag used is <a href> and you insert a # in front of the name if it is a card, and not a normal wml page address. <wml><card id="MainCard" title="card1"><p align="center">This is a sample text<br/><br/><a href="page2.wml">Next page</a></p></card></wml>

Inserting buttons : 

Inserting buttons Most WAP phones will have a couple of "soft keys" or buttons for navigation, Normally, one button will be a "go back" button, but the other could be anything else related to the navigation of the WAP site. To set up a button, you begin the command with the line <do type="accept" label="labelname"> you the select the type of command to be carried out when you click on the button, typically a <go href> command for a wml page address. Then finish it with a </do>. In the command would usually be either a hyperlink or a <prev/> tag, which says go back to the previous page <wml><!-- THIS IS THE FIRST CARD IN THE DECK --><card id="MainCard" title="This is a first card"><p align="center"><do type="accept" label="Page2"><go href="page2.wml"/></do><do type="accept" label="back"><prev/></do></p></card></wml>

Page navigation reactions : 

Page navigation reactions particularly useful if you want the page to be different when someone returns to a page they have just left. The tags used are <onenterforward> and <onenterbackward> which are used to differentiate between entering a page for the first time, and returning to it.

Slide 17: 

<?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="MainCard" title="first card“ onenterbackward="#returncard"><timer value="50"/><p align="center">Hi, you have never been to this page<br/><a href="#card2">Go to page two</a></p></card><card id="card2" title="second card"><p align="center">This is the second card<do type="accept" label="back"><prev/></do></p></card><card id="returncard" title="This is the second card"><p align="center">You returned to the first page, but this is displayed instead !</p> </card> </wml>

Page timers : 

Page timers Sometimes you may want a page, such as a title to appear for a few seconds, before displaying the main content of a WAP site. Using the <timer value> tag will enable you to do this. The demonstration below, displays the first card in a deck, then automatically switches to the second card after approximately five seconds. Most applications, would have a site logo in the first card, followed by the WAP page in the second. <wml> <card id="MainCard" title="card" ontimer="#cardtwo"><timer value="50"/><p align="center">This card will change automatically in a few seconds</p></card><card id="cardtwo" title="This is the second card"><p align="center">This is the second card</p></card></wml>

Text appearance : 

Text appearance There are three ways of making text stand out... Emphasize it <em> Really emphasize it <strong> Make it bold <b> Of the three, the one to avoid is the bold tag. Why? Well, while the <b> tag will just make your text a bit bolder, and not all phones actually support the tag, every phone will use the <em> and <strong> tags in a different way. Another tag which is not listed here is the <i> tag, as not all phones will support it, use the <em> tag to create italic text instead. The advantage is that the phones will be able to emphasize the text in the best method for that particular phone.

Slide 20: 

<?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="MainCard" title="This is a first card"><p align="center">This is a sample text<br/><b>This is in bold</b><br/><em>This is emphasised</em><br/><strong>This is in strong</strong></p> </card> </wml>

Slide 21: 

You can increase and decrease the size of text on your page by use of two tags. The way the text is displayed however, depends on the WAP device being used. You differentiate, by making text either bigger or smaller, using the <big> and <small> tags. <wml> <card id="MainCard" title="This is a first card"><p align="center"><small>This is small text</small><br/>This is normal size<br/><big>This is big</big><br/><big><big>This is really big</big></big><br/></p> </card> </wml>

Slide 22: 

Just like in normal pages, you can underline text as well. There is nothing fancy here, just a simple <u> tag <wml> <card id="MainCard" title="This is a first card"><p align="center">This is normal text<br/><u>This is underlined</u></p> </card> </wml>

Using pictures : 

Using pictures You can use pictures in a WAP phone, but the images are plain black and white and have to be a special format for the WAP phone. There are some plug-ins available for the two main picture programs, Paint Shop Pro and Photoshop which will allow you to create images in the wbmp format. You can also upload images to your WAPDrive account using or image upload facility, and soon they will be automatically converted into the wbmp format for you. Just like a normal web page, you should also supply some alternative text, just in case the phone does not display pictures <wml> <card id="MainCard" title="first card"><p align="center"><img src="picture.wbmp" alt="logo"/></p></card> </wml>