Wml Programming Tutorial -part1
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Wml Programming Tutorial -part1 as PDF for free.
More details
- Words: 3,735
- Pages: 22
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 Shree Lahary Ravuri Mansi Modak
1
WML Programming Tutorial - Part 1 of 3
Upon completion of the first tutorial you will familiar with the following:
•
•
•
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
2
WML Programming Tutorial - Part 1 of 3
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 languages
differences
between
WML
and
other
markup
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
3
WML Programming Tutorial - Part 1 of 3
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. 2.
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
4
WML Programming Tutorial - Part 1 of 3
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. 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.
5
WML Programming Tutorial - Part 1 of 3
The table below summarizes the attributes: Attribute align
Required No
mode
No
Description 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. 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. 2. 4. <wml> 5. 6. 11.
6
WML Programming Tutorial - Part 1 of 3
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. 2. 4. <wml> 5. 6. 10. 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. 2. 4. <wml> 5. 6. 9. The sixth line uses br element hence the text on the seventh line will be displayed on a new line.
7
WML Programming Tutorial - Part 1 of 3
In the above example line 6 ,7 and 8 could have also been written as follows:
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 B BIG EM I SMALL STRONG U
Description Creates a bold font Creates a big font Creates emphasis on the font Creates italicized text Creates a small font Creates a strong emphasis on the font Creates an underlined text
Syntax content content <em> content content <small> content <strong> content content
None of these elements contain attributes. However you can combine several of these elements to create combinations of styles.
1. 2. 4. <wml> 5. 6.
8
WML Programming Tutorial - Part 1 of 3
16. 17. 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 Devices In 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.
9
WML Programming Tutorial - Part 1 of 3
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. 2. 3. 4.
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)
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/)
10
WML Programming Tutorial - Part 1 of 3
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 align
Required? No
alt
Yes
height
No
hspace
No
localsrc
No
Description Represents where the image is aligned. The available entries are top, middle, and bottom. Specifies the text that displays if the device has a problem displaying the image Represents a height setting for the image. Several devices do not support this attribute Represents the amount of empty space to the left or right of the image. The default setting for this attribute is 0 Represents the name of a known icon that exits
11
WML Programming Tutorial - Part 1 of 3
src
Yes
vspace
No
width
No
within the device’s browser. If a localsrc icon is used, users must include the localsrc attribute in their code Specifies the URL of the image displayed. Represents the amount of empty space above or below the image. Several devices do not support this attribute. 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.
12
WML Programming Tutorial - Part 1 of 3
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 types AddType text/vnd.wap.wml .wml AddType application/vnd.wap.wmlc .wmlc AddType text/vnd.wap.wmlscript .wmls AddType application/vnd.wap.wmlscriptc .wmlsc AddType 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
13
WML Programming Tutorial - Part 1 of 3
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. 2. 4. <wml> 5. 6. 10. 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. 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.
14
WML Programming Tutorial - Part 1 of 3
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:
15
WML Programming Tutorial - Part 1 of 3
Example 2:
16
WML Programming Tutorial - Part 1 of 3
Example 3:
17
WML Programming Tutorial - Part 1 of 3
Example 4:
18
WML Programming Tutorial - Part 1 of 3
Example 5:
19
WML Programming Tutorial - Part 1 of 3
Screen Shots of the Practice Questions Practice Question 1:
20
WML Programming Tutorial - Part 1 of 3
Practice Question 2:
21
WML Programming Tutorial - Part 1 of 3
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.
22
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 Shree Lahary Ravuri Mansi Modak
1
WML Programming Tutorial - Part 1 of 3
Upon completion of the first tutorial you will familiar with the following:
•
•
•
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
2
WML Programming Tutorial - Part 1 of 3
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 languages
differences
between
WML
and
other
markup
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
3
WML Programming Tutorial - Part 1 of 3
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. 2.
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
4
WML Programming Tutorial - Part 1 of 3
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. 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.
5
WML Programming Tutorial - Part 1 of 3
The table below summarizes the attributes: Attribute align
Required No
mode
No
Description 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. 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. 2. 4. <wml> 5.
Welcome to WML Programming tutorial part1
7.8. This text will not wrap hence requires scrolling 9.
10.6
WML Programming Tutorial - Part 1 of 3
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. 2. 4. <wml> 5.
Line 1 uses the default left alignment
7.Line 2 uses the center alignment
8.Line 3 uses the right alignment
9.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. 2. 4. <wml> 5.
Welcome to San Jose State University
7. This will be on a new line
7
WML Programming Tutorial - Part 1 of 3
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
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 B BIG EM I SMALL STRONG U
Description Creates a bold font Creates a big font Creates emphasis on the font Creates italicized text Creates a small font Creates a strong emphasis on the font Creates an underlined text
Syntax content content <em> content content <small> content <strong> content content
None of these elements contain attributes. However you can combine several of these elements to create combinations of styles.
1. 2. 4. <wml> 5.
7. Regular font style
8. Bold font style
9. Big font style
10. <em> Emphasize font style
11. Italicized text
12. <small> Small font style
13. <strong> Strong font style
14. Underlined font style
15.
8
WML Programming Tutorial - Part 1 of 3
16.
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 Devices In 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.
9
WML Programming Tutorial - Part 1 of 3
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. 2. 3. 4.
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)
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/)
10
WML Programming Tutorial - Part 1 of 3
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 align
Required? No
alt
Yes
height
No
hspace
No
localsrc
No
Description Represents where the image is aligned. The available entries are top, middle, and bottom. Specifies the text that displays if the device has a problem displaying the image Represents a height setting for the image. Several devices do not support this attribute Represents the amount of empty space to the left or right of the image. The default setting for this attribute is 0 Represents the name of a known icon that exits
11
WML Programming Tutorial - Part 1 of 3
src
Yes
vspace
No
width
No
within the device’s browser. If a localsrc icon is used, users must include the localsrc attribute in their code Specifies the URL of the image displayed. Represents the amount of empty space above or below the image. Several devices do not support this attribute. 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.
12
WML Programming Tutorial - Part 1 of 3
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 types AddType text/vnd.wap.wml .wml AddType application/vnd.wap.wmlc .wmlc AddType text/vnd.wap.wmlscript .wmls AddType application/vnd.wap.wmlscriptc .wmlsc AddType 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
13
WML Programming Tutorial - Part 1 of 3
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. 2. 4. <wml> 5.
Tutorial part-1 7. 8.
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. 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.
14
WML Programming Tutorial - Part 1 of 3
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:
15
WML Programming Tutorial - Part 1 of 3
Example 2:
16
WML Programming Tutorial - Part 1 of 3
Example 3:
17
WML Programming Tutorial - Part 1 of 3
Example 4:
18
WML Programming Tutorial - Part 1 of 3
Example 5:
19
WML Programming Tutorial - Part 1 of 3
Screen Shots of the Practice Questions Practice Question 1:
20
WML Programming Tutorial - Part 1 of 3
Practice Question 2:
21
WML Programming Tutorial - Part 1 of 3
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.
22
WML Programming Tutorial - Part 1 of 3
Related Documents
Wml Programming Tutorial -part1
June 2020 6
Wml
May 2020 18
Wml
December 2019 31
Wml Programming For Gsm Phones
November 2019 9
Instrumentation Training Tutorial Part1
October 2019 19