survey of wml
TRANSCRIPT
![Page 1: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/1.jpg)
Mobile Website DevelopmentSurvey of WML
Facilitated by:Michael WakaheTawi Commercial Services LtdJul 2011
![Page 2: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/2.jpg)
Table of Contents
Introduction
Hello World
Introducing JSP
Exercises
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 3: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/3.jpg)
Introduction
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 4: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/4.jpg)
Introduction
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
The WAP Stack
![Page 5: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/5.jpg)
Introduction
WTP (Wireless Transaction Protocol) & WDP
(Wireless Datagram Protocol) provide low-level glue
between the upper levels and the really low-level
communications.
WTLS (Wireless Transaction Layer Security) provides
security services (encryption and authentication).
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 6: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/6.jpg)
Introduction
These protocols aren't relevant to normal
application programmers
The second highest level in the stack is the high-
level communications protocol, called WSP
(Wireless Session Protocol).
Provides a complete replacement for HTTP
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 7: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/7.jpg)
Introduction
The highest stack level is WAE (Wireless
Application Environment)
This is the part that the user actually sees &
interacts
The WAE aims to provide a World Wide Web-like
model for writing applications
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 8: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/8.jpg)
Introduction
The WAE incorporates several key features of the
Web that we are familiar with, e.g. URLs & MIME
content types (such as text/html and image/gif)
Additionally it provides similar replacements for
other features: HTML is replaced with WML (Wireless
Markup Language) & JavaScript is replaced with
WMLScriptCopyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
![Page 9: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/9.jpg)
Introduction
Almost all WAP applications can be written
without using anything outside of these two
languages and WBMP (Wireless Bitmap: the WAP
image format)
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 10: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/10.jpg)
Introduction
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
The WAP Chain of Processing
![Page 11: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/11.jpg)
Hello World
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 12: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/12.jpg)
Hello World
We will use Eclipse to compose our WML and deploy
in the Tomcat ROOT folder
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 13: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/13.jpg)
Hello World
<?xml version="1.0"?><!DOCTYPE wml PUBLIC"-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><wml>
<card title="First WML Example"><p>Hello, World!</p>
</card></wml>
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 14: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/14.jpg)
Hello World
Note that all tag names are in lowercase
In WML, tag names are case-sensitive
A file of WML represents a deck of cards
This is the reason for the <card> tag
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 15: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/15.jpg)
Hello World
Each individual card does behaves very much like an
HTML page
So you can think of a WML deck as being similar to a
number of HTML pages all grouped together
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 16: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/16.jpg)
Hello World
Cards in a deck are all downloaded at the same time
So the user has to wait only once & the others can be
accessed almost instantly
Cramming too many cards into a single deck is bad
practice
Ideally maximum of 5 to 6 cards per deck
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 17: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/17.jpg)
WML Structure Explained
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 18: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/18.jpg)
WML Structure Explained
Valid child tags of <wml> are:
<head>: Defines document metadata and access
control using the <meta> and <access> tags. Zero or
one <head> tags are allowed in a document.
<card>: Defines a card to display in the browser. One
or more <head> tags are allowed in a document.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 19: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/19.jpg)
WML Structure Explained
<template>: Defines global event handlers and
commands for the deck. Zero or one <template> tags
are allowed in a document.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 20: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/20.jpg)
WML Structure Explained
Valid child tags of <card> are:
<p>: Contains text, images, and links. Most user-
accessible and visible content in a WML card is child
content of this tag. Zero or more <p> tags are
allowed in a card.
<pre>: Contains preformatted text. Zero or more
<pre> tags are allowed in a card.Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
![Page 21: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/21.jpg)
WML Structure Explained
<do>: Contains commands and actions. Zero or more
<do> tags are allowed in a card.
<timer>: Activates time-based events. Zero or one
<timer> tags are allowed in a card.
<onevent>: Specifies tasks based on different card-
level events. Zero or more <onevent> tags are
allowed in a card.Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
![Page 22: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/22.jpg)
WML Structure Explained
Comments:
<!-- A simple comment. -->
<!--This is
a comment that
spans several lines.-->
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 23: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/23.jpg)
WML Structure Explained
Other topics in WML include: Special Characters,
Header & Metadata, Text Formatting, Links, Images,
Tables, Timers, Variables, User Input, WMLScript
Browse to http://learnthemobileweb.com/books
for links to WML references and helpful
documentation
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 24: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/24.jpg)
Introducing JSP
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 25: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/25.jpg)
Introducing JSP
WML can be mixed with JSP and Servlets
Save the following example as a .jsp not as a .wml
Deploy to servlet container (Tomcat)
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 26: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/26.jpg)
Introducing JSP<?xml version="1.0"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN""http://www.wapforum.org/DTD/wml_1.1.xml"><%
response.setContentType("text/vnd.wap.wml;charset=UTF-8");int num1 = 9;int num2 = 12;
%><wml>
<card title="First WML Example"><p>My name is <% out.println("Michael"); %></p><p>The sum of num1 and num2 is <%= (num1+num2) %></p>
</card></wml>
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 27: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/27.jpg)
Exercises
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 28: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/28.jpg)
Exercises
Spot the errors in the following sample:
<wml><card ID=start title='Example of Invalid WML'>
<P>This markup is invalid.</card>
</wml>
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 29: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/29.jpg)
Exercises
The WML code sample above has the following syntax
errors:
XML declaration is missing.
DOCTYPE declaration is missing.
ID attribute of <card> tag is uppercase. (Well-formed
WML requires lowercase tags.)
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 30: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/30.jpg)
Exercises
Value of the id attribute of the <card> is not
delimited.
Value of the title attribute of the <card> tag is
delimited with single quotes.
<p> tag is uppercase. (Well-formed WML requires
lowercase tags.)
<p> tag has an open tag but not matching close tag.Copyright © Tawi Commercial Services Ltd. 2015. All Rights
Reserved.
![Page 31: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/31.jpg)
Exercises
Correct version is as follows:<?xml version="1.0" encoding="utf-8"?><!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN""http://www.wapforum.org/DTD/wml13.dtd"><wml><card id="start" title="Example of Valid WML"><p>This markup is valid.</p></card></wml>
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 32: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/32.jpg)
Exercises
Write a WML file that shows the first 7 digits of the
Fibonacci Series. Can use JSP and/or servlets.
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.
![Page 33: Survey of WML](https://reader031.vdocuments.us/reader031/viewer/2022021813/58a5082f1a28ab8e1c8b47b1/html5/thumbnails/33.jpg)
The End
Michael [email protected]
+254 (0) 20 239 3052 www.tawi.mobi
Copyright © Tawi Commercial Services Ltd. 2015. All Rights Reserved.