wml programming tutorial -part1

WML PROGRAMMING TUTORIAL – PART 1 OF 3

Prepared for

CmpE 296A – Design of Mobile Based Software Systems

Guided by

Dr. Jerry Gao

Prepared By

Bharghavi ShreeLahary RavuriMansi Modak

Upon completion of the first tutorial you will familiar with the following:

1 WML Programming Tutorial - Part 1 of 3

Introduction to WML

What WML is about and how to use it within the WAP applications

Similarities and differences between WML and other markup languages

WML terminology

WML structure and syntax

WAP Design Considerations

Text Formatting

Creating paragraphs with the p Element

Setting line wrap mode

Setting text alignment

Incorporating Line Breaks with br Element

Incorporating Text Styles

Working with Images

Bandwidth

Screen size

The wireless bitmap format

The IMG Element

Creating an application with the WBMP format

Practice Questions

Screen shots of the Examples and the Practice Questions

Introduction to WML


What is WML?

WML is a markup language. It is compact, works quickly and efficiently. These attributes make WML a perfect language for WAP development. The WAP Forum (http://www.wapforum.org) originally developed the WML language. WML is an HTML type formatting language that has been defined as XML document type and which is optimized for small screens and limited memory capacity.

Similarities and differences between WML and other markup languages

A major difference between the implementations of WML and HTML languages is that the original ASCII based WML code is converted to binary code in the gateway server, before being forwarded to WAP device. The syntax of WML language is very similar to the first versions of HTML language except for the option of passing parameters using card and deck variables.

WML Terminology

In WAP development, a screen is known as a card. A collection of cards is known as a deck.

WML Decks

The purpose of the WML deck is to deliver more than one card to a WAP device at one time. Users can then navigate small portions of the WML enabled applications without waiting for each individual navigation action.

WML Cards

WML cards provide the structure of a WAP application. WML cards define how information displays on a device and how the user can navigate through an application. Because of this responsibility, a WML card can never be empty. WML cards must contain at least one WML element.

WML Structure and Syntax

The following are three important areas in regard to WML syntax:

WML document prologue WML character sets WML case sensitivity

WML Document Prologue

Every WML deck you write must contain a document prologue. Compilers on the device, WAP gateways, and remote servers all use document prologues to interpret your code. Developers must include the XML document prologue at the top of every WML deck:

1. <?xml version=”1.0>


http://www.wapforum.org/

2. <!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN”3. “http://www.wapforum.org/DTD/wml_1.1.xml”>

Be aware of the use of spaces in the document prologue. A WML deck produces errors if the document prologue does not include correct use of spacing and punctuation.

The following is a line-by-line explanation of the document prologue:

The first line designates the XML version of the WAP server and WML compiler. WAP servers and WML compilers use XML to interpret your code. These servers and compilers then transform this information back into WML, so that a WAP device can display the information.The second line defines the version of WML used. This states that you will use WML version 1.1 within your applications.

In the document protocol the XML and WML versions are not the most current. The reason for this is that not all WAP enabled devices support the latest versions of these languages. Unless you are writing an application for specific device, use the language versions specified in this prologue.

The third line specifies the location of the WML document type definition (DTD). Any additional extensions or information for the WAP server or compiler are available from this site.

WML Character Sets

Character sets are the built-in methods for handling text characters. They represent letters and symbols specific to several languages. WML supports the character set of ISO-10646 (Unicode 2.0). Because this character set is the default for WML, you don’t need to declare it within your WML decks.

WML Case Sensitivity

WML is a precise language when it comes to case sensitivity. Character case does matter in WML. The basic rule of WML case sensitivity is that all tags and attributes must be lower case. For example, name1 and NAME1 are different variables.

Most programming errors tend to deal with problems with character case. As a rule of thumb if your code doesn’t work check for the correct use of character case.

WAP Design Considerations

When developing any type of WAP applications, keep in mind that WAP devices contain limited network bandwidth capabilities and memory compared to a PC.


http://www.wapforum.org/DTD/wml_1.1.xml

The following are few tips to keep in mind when creating WAP applications:

Keep WML decks and images to less than 1.5KB Avoid overuse of images Use simple and brief text within the applications if possible

WML Text Formatting

WML provides the capability to control the look and feel of how text displays for users.

Creating Paragraphs with the p Element

The p element is an important aspect of WAP development because it controls how all text displays on a WAP device screen. The p element uses two attributes that enable you to define the alignment of the text as well as its wrapping properties.

Although all WAP applications require some amount of text you must use caution. Large amounts of text result in a lot of scrolling and frustration for users.

The table below summarizes the attributes:

Attribute Required Descriptionalign No Specifies the line

alignment relative to the display area. If no value is specified the align attribute defaults the line to left alignment. This attribute can be equal to


left, right and center.mode No Specifies whether the

display should automatically wrap or split text so that it is always viewable from the display. The “no wrap” value uses another mechanism such as horizontal scrolling to display long lines of text. The default value is “wrap”.

Wrapping means the device spills extra text onto subsequent lines in the display. Scrolling the line from left to right is not necessary.

Setting Line Wrap Mode

1. <? xml version="1.0"?> 2. <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 3."http://www.wapforum.org/DTD/wml_1.1.xml"> 4. <wml> 5. <card id="para" title="para"> 6. Welcome to WML Programming tutorial part1 7. 8. This text will not wrap hence requires scrolling 9. 10. </card>11. </wml>

The sixth line uses the p element to begin the paragraph of the text. By default, the text aligns left and wraps, since no other attributes have been set.The line seven uses the p element to begin the paragraph of the text, the attribute mode has been set to “nowrap” hence the lines of the text will not wrap rather the device automatically scrolls horizontally to display the entire line of text.

Setting Text Alignment

The line attribute enables you to set your text alignment either to left, center or right. The default text alignment is to the left.

1. <?xml version = "1.0"?>2. <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"3. "http://www.wapforum.org//DTD/wml_1.1.xml">4. <wml>5. <card id="align" title="Align">6. Line 1 uses the default left alignment 7. Line 2 uses the center alignment 8. Line 3 uses the right alignment

9. </card>10. </wml>

In the sixth line we haven’t the set align attribute, hence by default it is aligned left.In the seventh line we have set the align attribute to center so the text is aligned to the center.In the eight line we have set the align attribute to right so the text is aligned to the left.

Incorporating Line Breaks with br Element

The br element forces the insertion of line breaks into the text. The br element is easy to use since it contains no attributes.

1. <?xml version = “1.0”?>2. <!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN”3. “http://www.wapforum.org//DTD/wml_1.1.xml”>4. <wml>5. <card id=”break” title=”Break”>6. Welcome to San Jose State University 7. This will be on a new line 8. </card>9. </wml>

The sixth line uses br element hence the text on the seventh line will be displayed on a new line.

In the above example line 6 ,7 and 8 could have also been written as follows:

Welcome to San Jose State University This will be on a new line 

Writing lines 6-8 this manner would have produced the same result because the only way to force the text to separate into lines is through the br element. If you do not use br to designate where the lines should break, the text wraps as defined by the confines of the device screen.

Incorporating Text Styles

In this section we discuss how WML offers a number of elements that enable you to define the font style of your text. The font styles include bold, italic, and underline effects.

Element Description SyntaxB Creates a bold font content BIG Creates a big font <big> content </big>EM Creates emphasis on the

font content 

I Creates italicized text content 


http://www.wapforum.org//DTD/wml_1.1.xml

SMALL Creates a small font content 

STRONG Creates a strong emphasis on the font

 content 

U Creates an underlined text

 content 

None of these elements contain attributes. However you can combine several of these elements to create combinations of styles.

1.<?xml version = “1.0”?> 2. <!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN” 3. “http://www.wapforum.org//DTD/wml_1.1.xml”> 4. <wml> 5. <card id=”style” title=”Styles”> 6. 7. Regular font style 8. Bold font style 9. <big> Big font style </big> 10. Emphasize font style 11. Italicized text 12. Small font style 13. Strong font style 14. Underlined font style 15. 16. </card>17. </wml>

Lines 7 to 13 designate the use of font style elements within a p element.

If a device does not recognize a style, it usually ignores the unrecognizable style and uses the default style in its place.

Working with Images

Because text space is limited with WAP devices, images are useful means to communicate ideas in the smallest space possible. Most microbrowsers support bitmap (.bmp) images, but some support only wireless bitmap (.wmbp) images. In application development, the first law of using images is use images only to enhance an application. If an image looks great but ends up limiting the application in some way you should not use the image.

Developmental Limitations of WAP DevicesIn case of WAP devices, too main limitations must be taken into consideration. These limitations are bandwidth and screen size.

Bandwidth

WAP device bandwidth is expressed in bits per second (bps). The average bandwidth for wireless devices in the United States is around 9600 KBps.

One Kbps is 1000 bits per second, whereas one KBps (kilobyte) 1024 bytes per second. We are talking in terms of KBps.

Transferring data to WAP devices is slower than transferring data to PCs. Because of this data transferred to wireless devices should be small – text data being the smallest and easiest type of data to transfer.

If you do decide that images are right for your application and you have determined that they wont affect application efficiency, its time to consider the second factor of images: screen size.

Screen Size

Most WAP devices allow only 4 to 10 lines of text to display without scrolling. Ideally, users should need to scroll as little as possible.

Wireless applications and WML do not yet provide the functionality to set image sizes, although the specifications have been set in the language.

A good rule of thumb for your images is 96 x 14 metrics on a WAP phone. However, if you are developing WAP applications for other types of WAP devices, the size and shape of your images might differ.

The Wireless Bitmap Format

Currently, the wireless bitmap format (also known as WBMP) is the only graphical format supported by wireless devices. Most WAP browsers support images. If a browser does not support images, it won’t display the image. In other words, the browser will ignore the image.To create (or convert) an image into the WMBP format, an image conversion tool is required.

Image Conversion Options

The conversion of any graphical format is made possible by a process called dithering. Essentially, dithering changes the way a user device interprets monochrome colors. Several tools are available for converting existing graphics into the WMBP format, ranging from desktop software to plug-ins available for popular graphic software programs, to online sites that provide the necessary tools.

Image Conversion Desktop Tools

With image conversion desktop tools, you must first download the software from the Internet. WAPPictus is an excellent product produced by Check It. WAPPictus is an excellent freeware program that enables users to convert existing standard graphics into a WBMP format.


Examples of desktop image conversion programs are:

1. Image Magick (http://www.imagemagick.org)2. WAPDraw (http://www.hit-solutions.fi/wapdraw/)3. WAPPictus (http://www.checkit.cz/engl)4. Wap Tiger (http://wap.infotiger.de/download.html)

Online Image Converters

Online converters are web pages that enable you to select an image from your computer. The web page then converts the image into a WMBP format, allowing you to save this new format wherever you want. The advantage of using online image converters is that the software isn’t required for installation onto your PC. The disadvantage though, is that you must be online to use these tools.

Examples of online image converters:

1. Applepie Online Image Converter (http://www.applepiesolutions.com)2. Dwbmp (http://www.morpheme.co.uk)3. WAP Tiger Online Converter (http://www.waptiger.de/bmp2wbmp/)

Image Conversion Plug-Ins

Image plug-ins are additional pieces of software added to a larger software product. In the case of these plug-ins, they add image conversion functionality for the WMBP format.

Examples of image conversion plug-ins:

1. Photoshop and/or paintshop plug-ins (for Windows) (http://www.rcp.co.uk)2. Photoshop plug-ins (for Macintosh) (http://www.creationflux.com)

Image conversion plug-ins requires a base commercial software program such as Photoshop installed on your computer.

The IMG Element

To display images within your WAP applications, you must use the IMG element, which contains several attributes used to enhance the way images display on a WAP device.

Not all device browsers support all the attributes of the IMG element.

The attributes of the IMG Element:

Attribute Required? Description


http://www.creationflux.com/

http://www.rcp.co.uk/

http://www.waptiger.de/bmp2wbmp/

http://www.morpheme.co.uk/

http://www.applepiesolutions.com/

http://wap.infotiger.de/download.html

http://www.checkit.cz/engl

http://www.phnet.fi/public/jiikoo

http://www.imagemagick.org/

align No Represents where the image is aligned. The available entries are top, middle, and bottom.

alt Yes Specifies the text that displays if the device has a problem displaying the image

height No Represents a height setting for the image. Several devices do not support this attribute

hspace No Represents the amount of empty space to the left or right of the image. The default setting for this attribute is 0

localsrc No Represents the name of a known icon that exits within the device’s browser. If a localsrc icon is used, users must include the localsrc attribute in their code

src Yes Specifies the URL of the image displayed.

vspace No Represents the amount of empty space above or below the image. Several devices do not support this attribute.

width No Represents width setting for the image. Several images do not support this attribute.

When using images or icons you should test their appearance on a variety of devices. Different devices display both icons and images differently.

Creating an Application with the WBMP format

Creating a Logo Image

You can perform the following steps to create a logo in the BMP format:

1. Go to the Start menu, and select Start, Programs, Accessories, Paint. The Microsoft Paint program executes.


The path to select the Microsoft Paint program can offer depends on the operating system.

2. After Microsoft Paint is open, create a logo that you want.3. Save the image. Be sure the image file type is set to some sort of BMP format.

You should try to save the BMP as a 16-color bitmap, a 256-color bitmap, or a 24-bit bitmap for good resolution.

Converting the Image into a WBMP Format

We have chosen to use the wmbp converter from Applepie Solutions. The following are the steps for converting an online gif to the wmbp format. You can choose to use any logo you have on your desktop or any other .gif file or .bmp. We have chosen to use the SJSU logo.

1. Go to: http://www.applepiesolutions.com/image2.wbmp/ 2. Enter URL for image as

http://www.sjsu.edu/graphics/sjsu_100.gif 3. Save the wbmp file in htdocs folder.

Configuring Apache

You may need to configure your Apache server to see the images in the wbmp format images. Recent versions of Apache can be entirely configured through the file httpd.conf, which is typically located in the apache/conf/ directory, wherever Apache is installed on the server. If you open httpd.conf in a text editor, you can scroll through and view the many, many Apache configuration directives. Ultimately, you will find a section where MIME types are declared. In the default Apache httpd.conf file, this section begins as follows (though it may vary slightly depending on the installation):

## AddType allows you to tweak mime.types without actually editing it, or to# make certain files to be certain types.## For example, the PHP3 module (not part of the Apache distribution)# will typically use:##AddType application/x-httpd-php3 .phtml#AddType application/x-httpd-php3-source .phps

AddType application/x-tar .tgz

While not strictly necessary, this is a good and logical place to add WML types to Apache. So, we simply pasted the following lines to our httpd.conf file just after the last line above:

#WML/WAP typesAddType text/vnd.wap.wml .wmlAddType application/vnd.wap.wmlc .wmlc


http://www.sjsu.edu/graphics/sjsu_100.gif

http://www.applepiesolutions.com/image2.wbmp/

AddType text/vnd.wap.wmlscript .wmlsAddType application/vnd.wap.wmlscriptc .wmlscAddType image/vnd.wap.wbmp .wbmp

The basic WML file is delivered to the browser with MIME type text/vnd.wap.wml. In the statement above, we have told Apache to delivery this MIME type whenever the filename ends in the extension .wml. Similarly, appropriate MIME types are passed for other WML variants. The .wmlc files would be compressed WML files, while .wmls and .wmlsc represent WMLScript (a wireless scripting language) and compressed WMLScript, respectively. Furthermore, .wbmp files represent wireless bitmap files or WBMP, the graphic format that wireless devices support (as opposed to, for example, .gif or .jpg on desktop browsers).

Changes to the Apache httpd.conf file take effect only when the server is launched, so the server must be restarted to save the above changes for the new MIME types to apply. Once done though, Apache is ready to go, and will happily deliver WML and related files to a wireless device.

Creating an application with the wmbp format

To get an idea of how to incorporate images into your WAP applications, let us create a title page (also known in the development world as a splash page).

1. <?xml version = "1.0"?>2. <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"3. "http://www.wapforum.org//DTD/wml_1.1.xml">4. <wml>5. <card id="title" title="title">6. Tutorial part-1 7. <img src="sjsu.wmbp" alt="sjsu.wmbp" />8. 9. </card>10. </wml>

The fifth line begins card that acts as the applications title page.The sixth line begins a paragraph that holds the logo image and additional text included within the splash page.The seventh line uses the IMG element to include a logo image within this card.The IMG element uses the src attribute, set equal to a file named logo.wbmp. This image is to be included within the same location as our wml file.The IMG element also includes the required alt attribute. This attribute must be text, and it displays if the device can’t display the image.

Practice Exercises

1. Display a formatted text using the text formatting elements discussed in this tutorial.

What is WML?WML stands for Wireless Markup Language.


http://www.webreference.com/js/column61/7.html

It is a mark-up language inherited from HTML, but WML is based on XML, so it is much stricter than HTML.WML is used to create pages that can be displayed in a WAP browser.

The above five lines of text is to be displayed as follows: All sentences should begin on a new line. Line 1 should be italicized and aligned right. Line 2 should be aligned center and should be in bold. Line 3 should be aligned left and should not be in wrapped format. Line 4 should be wrapped and text should have small font style and

underlined.

2. Write a WML programming to display Applepie Solution’s logo in the center of the Nokia browser using elements such as hspace, vspace, and align wherever necessary.

Use the following URL for the image:

http://www.applepiesolutions.com/pics/applepielogo85.gif

Screen Shots of the Examples in the Tutorial

Example 1:


http://www.applepiesolutions.com/pics/applepielogo85.gif

Example 2:


Example 3:


Example 4:


Example 5:


Screen Shots of the Practice Questions

Practice Question 1:


Practice Question 2:


References:

Deitel, Deitel, Neito, and Steinbuhler, Wireless Internet and Mobile Business-How to Program, Prentice Hall, 2002.

LinuxMAX 2000, http://www.linuxmax.net/news/00133.html OpenWave Systems , December 2000,

http://developer.openwave.com/htmldoc/41/devguide/index.html Pekka, Nishkanen, Inside WAP Programming Applications with WML

and WML Script, Addison-Wesley, November 2000. Tull, Chris, WAP 2.0 Development, QUE, Indiana, 2002.


wml programming tutorial -part1

Documents