WML PROGRAMMING TUTORIAL PART - 1

1. Bharghavi Shree Mansi Modak & Lahary Ravuri Guided By Dr. Jerry Gao WML PROGRAMMING TUTORIAL PART - 1

2. Introduction • 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

3. What is WML? • Optimized for small screens and limited size memory. • HTML type formatting language,defined as XML document type. • Uses card and deck metaphor while creating documents. • Has a built in hierarchy that allows individual document to work both in a mobile phone and a handheld computer. • Current version is 1.1

4. Differences between WML and other markup languages • Original ASCII based WML code is converted to binary code in the gateway server, before being forwarded to WAP device. • The option of passing parameters using card and deck variables.

5. Structure of WML document- cont. WML Terminology In WAP development, a screen is known as a card. A collection of cards is known as a deck. WML Decks • Smallest unit that a server can send to a browser program. • Delivers 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 • Provide the structure of a WAP application. • 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.

6. Structure of a WML document – cont. WML document prologue • <?xml version=”1.0> • <!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN” • “http://www.wapforum.org/DTD/wml_1.1.xml”> 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. 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.

7. Line-by-line explanation of the document prologue • <?xml version=”1.0> • Designates the XML version of the WAP server and WML compiler. • WAP servers and WML compilers use XML to interpret your code compilers and then transform this to WML. • WAP device can display the information. • <!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN” The second line defines the version of WML used. • “http://www.wapforum.org/DTD/wml_1.1.xml”> This is XML-specified Document Type Definition.

8. Structure of a WML document – cont. • WML is Case-Sensitive. • WML supports the character set of ISO-10646 (Unicode 2.0). • Contains symbols that require start and end tag. <wml> … </wml> • To add variables to a card or deck : $identifier $(identifier) • Supports both Alphanumeric and Numeric character entities. Symbol Alphanumeric Numeric < &lt &#60

9. Structure of a WML Document – cont. • Structure of a ‘comment’. <!-- …………-- > • Two core attributes: 1. id :- Allocates an individual name to elements inside a deck. 2. Class :- links elements to one or several groups. • <wml>….</wml> command. • <card>….</card> command. • Its attributes :- id :- gives special identity to a card in a deck. title :- displays a title on a title bar of the browser. newcontext :- can be either TRUE or FALSE.

10. The use of the card element and its attributes <?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> <!-- wml CARD BEGINS WITH CARD COMMAND: --> <card id="mycard" title="first" newcontext="true"> <p> HELLO! </p> <!-- WML card ends: --> </card> </wml>

11. The above example will show you this on display

12. WML-Text Formatting • Creating paragraphs with the p element • Align and mode options in the p element • Line Breaks • Displaying Special Characters • Text Styles

13. Creating Paragraphs with the p Element • The p element is an important aspect of WAP development. • The p element uses two attributes. • align - Specifies the line alignment relative to the display area. • mode - Specifies whether the display should automatically wrap or split text so that it is always viewable from the display. • Wrapping spills extra text onto subsequent lines in the display. Scrolling the line from left to right is not necessary. Once you specify a mode, it applies to all subsequent lines until you reset it

14. 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=“mode and align"> 6. <p>Welcome to WML Programming tutorial part1 </p> 7. <p mode="nowrap"> 8. This text will not wrap hence requires scrolling 9. </p> 10. </card> 11. </wml>

15. Expected Output

16. Setting Text Alignment 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. <p > Line 1 uses the default left alignment </p> 7. <p align="center" > Line 2 uses the center alignment </p> 8. <p align="right" > Line 3 uses the right alignment </p> 9. </card> 10. </wml>

17. Expected Output

18. Incorporating Line Breaks with br Element • The br element forces the insertion of line breaks into the text. • 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.     <p>Welcome to San Jose State University <br/> 7.     This will be on a new line </p> 8.      </card> 9.      </wml>

19. Expected Output

20. Displaying Special Characters • WML reserves the <, >, ', ", and & characters. • To display one of these characters in formatted text, you must specify one of the following character elements. • Character Element • > &gt; • < &lt; • ‘ &apos; • “ &quot; • & &amp; • $ $$; • Nonbreaking space &nbsp; • Soft Hyphen &shy;

21. Incorporating Text Styles • WML offers a number of elements that enable you to define the font style like bold, italic, and underline effects to your text. Element Description Syntax B Creates a bold font <b> content </b> BIG Creates a big font <big> content </big> EM Creates emphasis on the <em> content </em> font I Creates italicized text <i> content </i> SMALL Creates a small font <small> content </small STRONG Creates a strong <strong>content</strong> emphasis on the font U Creates an underlined text <u> content </u>

22. Incorporating Text Styles-cont. 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. <p> 7. Regular font style <br/> 8. <b> Bold font style </b><br/> 9. <big> Big font style </big><br/> 10. <em> Emphasize font style </em><br/> 11. <i> Italicized text </i><br/> 12. <small> Small font style </small><br/> 13. <strong> Strong font style </strong><br/> 14. <u> Underlined font style </u><br/> 15. </p> 16. </card> 17. </wml>

23. Expected Output

24. Working with Images • Bandwidth • Screen size • The Wireless Bitmap Format • The IMG Element • Creating an Application with the WBMP format

25. 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.  • Transferring data to WAP devices is slower than transferring data to PCs. • 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 won’t affect application efficiency, its time to consider the second factor of images: screen size.

26. 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.

27. The Wireless Bitmap Format (WBMP) • Wireless bitmap format is the only graphical format supported by wireless devices. • To create (or convert) an image into the WMBP format, an image conversion tool is required. • The conversion of any graphical format is made possible by a process called dithering. • With image conversion desktop tools, you must first download the software from the Internet. Examples of desktop image conversion programs are:  Image Magick (http://www.imagemagick.org ) WAPDraw (http://www.hit-solutions.fi/wapdraw/) WAPPictus (http://www.checkit.cz/engl) Wap Tiger (http://wap.infotiger.de/download.html)

28. 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 WBMP format, allowing you to save this new format wherever you want. • Advantage: The software isn’t required for installation onto your PC. • Disadvantage: You must beonline to use these tools.  Examples of online image converters:  • Applepie Online Image Converter (http://www.applepiesolutions.com) • Dwbmp (http://www.morpheme.co.uk) • WAP Tiger Online Converter (http://www.waptiger.de/bmp2wbmp/

29. Image Plug-ins • Image plug-ins are additional pieces of software added to a larger software product. • They add image conversion functionality for the WBMP format.  • Examples of image conversion plug-ins:  • Photoshop and/or paintshop plug-ins (for Windows) (http://www.rcp.co.uk) • Photoshop plug-ins (for Macintosh) (http://www.creationflux.com) • Image conversion plug-ins requires a base software such as Photoshop on your machine.

30. The IMG Element Has several attributes that are used to display images on a WAP device.

31. 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.  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 wbmp 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.

32. Creating an Application with a WBMP – cont. Creating 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. <p align="center"> Tutorial part-1 7. <img src="sjsu.wbmp" alt="sjsu.wbmp" /> 8. </p> 9. </card> 10. </wml>

33. The above example will show you this on the display

34. 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.