Wap wml开发中需要注意的地方收集

最近wap的需求挺多。很多细节搞的人比较郁闷。

比如遇到的一个，默认的wap总是会保存输入框上次输入的值，除非你关闭浏览器重新访问。

但是有时候我们需要他不保存。

找了半天才发现，只要在 <card id="card1" title="Mortgage Calc" newcontext="true"> 加入红色部分就可以了。

以下是找到的一篇非常好的文章。收藏在此。

==================================================

1. WAP构架

WML是一种适用于无线互连网的标记语言。

WAP（Wireless Application Protocol）是适用于无线互连网的网络协议。

客户是各种基于WAP协议的手持设备或者是各种模拟器。

WAP网关有两个功能：对WML网页进行编码和解码；实现HTTP协议和WAP协议之间的转换，如图3-21所示。

WAP服务器是指在MIME配置中设置了WML数据类型的Web服务器。

为什么采用WAP：方便、安全。



图 3-21 WAP构架

2. URL

WML使用和HTML相同的引用方式。

例如：http://wap.yestock.com/index.wml

在URL后使用片段。

例如：http://wap.yestock.com/index.wml#login

相对的URL——基础URL是当前的卡片。

例如：<go href="/next" />

3. Content-type

在互联网上使用WML数据类型。

要想使用Web服务器传输WML数据类型，就需要对Web服务器的MIME设置进行配置。

需要增加以下数据类型：

wml：text/vnd.wap.wml
wmlc：application/vnd.wap.wmlc
wmls：text/vnd.wap.wmlscript
wbmp：image/vnd.wap.wbmp
其他可选的数据类型：
wmlsc：application/vnd.wap.wmlscriptc
wmlscript：text/vnd.wap.wmlscript
ws：text/vnd.wap.wmlscript
wsc：application/vnd.wap.wmlscriptc

4. WML字符集

WML是XML的子集，继承了XML的字符集设置。

WML文档默认的字符集是UTF–8。

5. 标签和属性

标签：

一个完整的WML标记有以下两种格式：
（1）<tag> content </tag>
（2）<tag/>

属性：

可以随意地指定或添加标签的属性。

属性的格式：<tag attr="abcd"/>。

所有的XML名字都是大小写敏感的。

所有的属性值都必须用双引号或单引号括起来。

6. 变量

WML卡片中可以使用变量。

描述变量的语法在WML中有最高的解释优先级。

当空格无法表示一个变量名结束的时候，就必须使用括号将参数名括起来。

$$在WML中代表一个‘$’符号。

变量语法格式有以下三种：

$identifier

$(identifier)

$(identifier:conversion)

变量使用说明：

可以在字符串中使用。

可以在运行中更新变量的值。

如果变量不等同于空字符串，变量处于设置状态（NOT NULL）。

如果变量等同于空字符串，变量处于未设置状态（NULL）。

变量替代：

变量的数值可以代入卡片中的文本。

只有文本部分可以实现替代。

任何标签和属性都不能使用变量来替代。

替代将在运行期发生。

替代将不影响变量现在的值。

替代是按照字符串替代的方式工作。

如果一个没有定义的变量要实现替代，那么该变量将被看作空字符串。

变量名是由US-ASCII码、下划线和数字组成，并且只能以US-ASCII码开头。

变量名是大小写敏感的。

7. 美元符号

美元符号：

要想在文本中显示美元符号，必须成对使用。

一个美元符号表示变量替代。

一个简单的显示美元符号的例子：This is a $$ character。

有效性：

在美元符号后面接字符串都将被认为是变量替代或者是生效。

几个无效的例子：

<!--错误的变量语法-->
Balance left is $10.00.
<!--错误的位置(变量type在属性内)-->
<do type="x-$(type)" label="$type">

8. newcontext属性

newcontext等于true或false，将决定浏览是否做以下事情：

删除所有在当前上下文中定义的变量。

清除历史信息。

重新设置所有的状态为一个默认的状态。

例如：<card id="card1" title="Mortgage Calc" newcontext="true">

9. 大小写敏感

WML和XML都是大小写敏感的语言。

所有的WML标记和属性都是小写敏感的。

任何枚举的属性值也是大小写敏感的。

10. 页面与卡片

WML是XML语言的子集。

一个WML应用是由许多页面（deck）所组成的。一个WML的页面就相当于HTML的一页。

一个WML页面是由文件声明和WML标记对组成。

WML标记对中间有一个或多个卡片组成。

WML就是在各个卡片之间传递信息和切换。

11. WML标记对

WML标记对是指<wml>和</wml>组成的标记对。

WML标记对是任何一个WML页面的根标签。

WML标记对中可以包含一个或多个卡片。

WML标记对中可以使用可选的“模板”来生成所包含的所有卡片的相关动作。

12. WML例子

先阅读下面的例子，在后面对例子中的各个部分将做详细的解释。
<?xml version="1.0"?>
<!DOCTYPE WML PUBLIC "-//WAPFORUM//DTD WML1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>
　 <card>
　　　 <p>
　　　　 Hello world !
　　　　 This is the first card…
　　　 </p>
　　　　 <do type="accept">
　　　　　　　 <go href="#card2"/>
　　　　 </do>
　 </card>
　 <card id="card2">
　　　 <p>
　　　　 This is the second card.
　　　　 Goodbye
　　　 </p>
　 </card>
</wml>

13. 文件声明

XML声明总是在文件的第一行。前面最好不要有空格或者换行。

<?xml version="1.0"?>

DOCTYPE声明。

<!DOCTYPE WML PUBLIC "-//WAPFORUM//DTD WML1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">

14. 事件与导航

WML包括导航和事件处理模块。

WML允许作者指定需要处理的事件。

事件可以和所需要完成的任务捆绑在一起。

URL导航就是这样的一个例子。

事件捆绑是通过几种标签声明来完成的，包括：go、do和onevent。

do标签比go标签需要用户更多的参与。

15. do标签

do标签提供了一个通用的事件处理机制，使得用户可以参与当前卡片的事件处理。

WML提供一些预先定义的do模块。

accept：确定（或接受）。

prev：返回到上次的位置。

help：请求帮助。

options：上下文敏感的选项请求。

<do type="options" name="do1" label="options">
　　 <go href="/options"/>
</do>

16. 任务

go标签——当用户选中该标签时，就引导用户去WML中指定URL。

<go href="http://www.simpleteam.com/wireless.wml">Simple Team</go>

prev标签——当用户选中该标签时，就引导用户去上次用户访问过的URL。

<do type="options" name="do1" label="default">
　 </prev>
</do>

refresh标签——当用户选中该标签时，变量值将被重新设置。

<do type="refresh">
　 <refresh>
　　　 <setvar name="firstname" value="forest">
　　　 <setvar name="lastname" value="luo">
　　　 <setvar name="age" value="25">
　 </refresh>
</do>

17. setvar标签

指定在当前上下文中的变量值，从侧面影响正在运行的任务。

必须使用name属性指定变量的名字。

必须使用value属性指定所要赋给变量的值。

18. select与option标签

select标签和option标签是用来在WML中形成选择任务。

option标签可以指定在用户做出选择后的目标地址。

<select name="type">
　 <option value="boxed" onpick="#selectBoxed">boxed</option>
　 <option value="arranged" onpick="selectArranged">arranged</option>
</select>

19. input标签

input标签是用来收集用户的输入。

name属性是用来指定变量的名字。

value属性可以指定变量默认的值。

<input name="firstname" type="text" value="Robert" format="*A" maxlength="32"/>
<input type="text" name="age" format="*N"/>
<input type="text" name="address" format="*M"/>
<input type="password" name="password"/>

type属性可以用来指定按密码输入模式进行输入，否则就是普通的文本输入模式。

format属性用来指定输入的内容是数字（N）、字母、字母和数字，输入长度，大写或者小写等等。

20. 文本类标签

段落：<p></p>（自动换行模式切换）

空白：空格、制表符和换行都将被显示为空白。

重点：em（强调）、strong（特别强调）、i（斜体）、u（下划线）、big（预定义的大字体），small（预定义的小字体）。

br标签：建立新的一行。

<p>
　 <b>
　　　　 Welcome to…
　 </b>
　 <strong><i>
　　　　 Simple Team
　 </i></strong>
　 <u>
　　　 WAP site
　 </u>
</p>

21. 超链接标签

a标签和anchor标签被用来创建一个超级链接。选中该标签的时候，用户将被带入到链接的地址（可以是另外的页面或者是同一页面下的不同卡片）。

也可以不使用a标签和anchor标签，而采用go标签中的href属性来创建一个超级链接。

<anchor>
　 fullow me<go href="destination"/>
</anchor>
<a href="destination">fullow me</a>
<do type="accept" label="ACCEPT">
　 <go href="http://www.simpleteam.com/yourcode" method="post">
　　　 <postfield name="w" value="12"/>
　　　 <postfield name="password" value="your password"/>
　 </go>
</do>

22. timer标签

timer可以用来延时显示页面或卡片，或在页面和卡片间实现切换以取得动画效果。

下面的例子就是在显示“Hello World”5秒钟后，用户将被自动引导至"/next"所指定的位置：

<wml>
　 <card ontimer="/next">
　　　 <timer value="50"/>
　　　 <p>
　　　　　 Hello World !
　　　 </p>
　 </card>
</wml>

23. 注释

简单的注释（单行或多行，注释中没有WML标记）。

<!—将注释写在这里-->

使用CDATA标记来实现带有WML标记的注释。

<![CDATA[很多内容
　 <b>buld text</b>
　 ……
　 <table culumn="2">
　 …
　 </table>
　 还有很多…
]]>

24. template标签

template标签声明一个在页面中所有卡片都可以使用的事件处理模块。

模块中的事件处理将自动应用于同一页面中的所有卡片。

某个卡片可以通过定义同名的事件处理来替代模块中的事件处理。

<wml>
　 <template>
　　　 <do type="options" name="do1" label="default">
　　　　　 <prev/>
　　　 </do>
　 </template>
　 <card id="first">
　 <!—该卡片将自动套用模块中定义的事件处理过程-->
　 …
　 </card>
　 <card id="second">
　 <!—该卡片将使用空操作（noop）来替代模块中定义的事件处理过程，那么就等价于该卡片中没有该事件处理过程—>
　　　 <do type="options" name="do1">
　　　　　 <noop/>
　　　 </do>
　　　 …
　 </card>
　 <card id="third">
　 <!—该卡片使用同名的事件处理替代模块中提供的事件处理—>
　　　 <do type="options" name="do1" label="options>
　　　　　 <go href="/options"/>
　　　 </do>
　 </card>
</wml>

25. table标签

table标签是用来创建能容纳文本和图片的表格。

align属性是用来指定对齐的方式（“L”是左对齐，“C”是对中，“R”是右对齐。默认的对齐方式是从左到右的左对齐方式）。

tr标签用来指定表格的行。

td标签用来指定表格的列。

<table culumns="2">
　 <tr><td>One</td><td>Two</td></tr>
　 <tr><td>1</td><td>2</td></tr>
　 <tr><td>BA</td><td>B</td></tr>
</table>

26. img标签

当设备不能显示图像的时候，alt属性指定可选的文本。有时候这个属性是必须的。

src属性指定图像的来源。

align属性指定图像与相邻的文本对齐方式。

<p>
<img alt=":)" src="http://www.simpleteam.com/logo.gif"/><br/>
Welcome to…
</p>

27. postfield标签

指定向服务器指定提交时候的参数名字和参数数值。

Login和Password校验是最常用提交。

一个使用go标签的提交例子。

<go href="http://193.120.145.194:80/wap" methos="post">
　 <postfield name="LI" value="$LI"/>
　 <postfiels name="PV" value="$PV"/>
</go>

28. 事件

ontimer事件：该事件发生在定时器过期的时候。

onenterforward事件：该事件发生在用户选中一个有效的URL之后，在正式引导用户去该URL地址之前。

onenterbackward事件：该时间发生在用户选中一个有效的prev操作之后，在正式引导用户之前。

onpick事件：该事件发生在用户选中某个选项。

<card>
　 <onevent type="onenterforward">
　　　 <go href="/url_to_check_security"/>
　 </onevent>
　 <p>
　　　 Help
　 </p>
</card>
<card onenterforward="/url_to_check_security"/>
　 <p>
　　　 Hello
　 </p>
</card>

29. WML核心数据

长度：

可以用整数指定画布（屏幕、纸张）的像素大小，或者用百分数表示占用的长度或宽度。

“50”表示50个像素。

“50%”表示占用一半的位置。

只能用在属性值中。

30. id和class属性

所有的WML标签有两个核心属性：id和class。

这两个属性被用于服务器方的信息传输。

id提供某个标签在页面中唯一的名字。

class接收标签一个更多的class定义。

多个标签可以使用同一个class定义。

class的名字是大小写敏感的。

标签也可以作为class中的一个部分。

31. 编程指导

尽量使用户的操作简单、友好。

建立一个操作流程图。

定义每个卡片的操作。

保持每个卡片小而且简单。

尽量减少按键的次数。

不要使用WML所有的属性（各个厂家对WML兼容情况是不同的）。

32. 创建一个新的WML文件

<?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="card_name" title="title_name">
　　　 <!—write your code here-->
　 </card>
</wml>

由于WML的格式基本上都是一样的，可以自己做一个模板。这样省去了反复录入页面开头和结尾的时间。如果使用的是MADK或者Nokia WAP Toolkit，那么在每次新生成WML文件的时候，它会自动地将模板准备好。在以后的程序中，为了说明的简洁，WML的标准开头和结尾将被省略。只要主要的卡片。

33. 增加卡片

根据自己的需要改变卡片的id和title。

增加卡片的内容。

<?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="welcome" title="welcome">
　 <p>
　　　　　 MADK WML DEMO.
　 </p>
</card>
</wml>

34. 增加动作

<?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="welcome" title="welcome">
　　　 <do type="accept">
　　　　　 <go href="#greeting"/>
　　　 </do>
　　　 <p>
　　　　　 MADK WML DEMO.
　　　 </p>
　 </card>
　 <card id="greeting">
　　　 <p>
　　　　　 Welcome to the wireless bookshop.
　　　 </p>
　 </card>
</wml>

下面将程序在Nokia WAP Toolkit上进行测试。启动Nokia WAP Toolkit，在“Go”下选择“Open Location”。在输入URL地址后，模拟器上出现图3-22所示的界面：



3-22 欢迎界面

这个时候显示的是页面中的第一张卡片。也就是id为“welcome”的card。它的标题是“welcome”。在选择“Options”后（这是Nokia的选择习惯，不同的模拟器的操作有所不同），模拟器上出现图3-23所示的界面：



图 3-23 选择菜单

在选择“Select”之后，模拟器上出现图3-24所示的界面。这是同一个页面中的第二张卡片。该卡片的id为“greeting”。由于没有设置title参数，因此模拟器没有显示标题。



图 3-24 第二张卡片

35. 建立一个动画消息

<card id="greeting" ontimer="#card2" title="Toulkit Demo">
　 <timer value="30"/>
　 <p>
　　　 <big>
　　　　　 Welcome to…
　　　 </big>
　 </p>
</card>
<card id="card2" ontimer="#card3" title="Toulkit Demo">
　 <timer value="30"/>
　 <p>
　　　 <b>
　　　　　 the Wonderful
　　　 </b>
　　　 <u>
　　　　　 Wireless
　　　 </u>
　 </p>
</card>
<card id="card3" title="Toulkit Demo">
　 <p>
　　　 <big><i>
　　　　　 Bookstore.
　　　 </i></big>
　 </p>
</card>
在Nokia WAP Toolkit对该程序进行测试。启动Nokia WAP Toolkit，在“Go”下选择“Open Location”。在输入URL地址后，模拟器上出现图3-25所示的界面。等待3秒，将跳到下一张卡片如图3-26所示。注意value为30，其实要除上10才是以秒为单位。



图 3-25 欢迎界面
Nokia WAP Toolkit对<big>、<u>支持得还挺好！等待3秒，将跳到下一张卡片。



图 3-26 第二张卡片
对<i>的支持也不错！已经到了最后一个页面（图3-27），不会再跳动了。如果想实现反复地跳动，可以试试自己修改一下程序。如果在程序中加入了另外的事件处理，那么当用户触发这些事件的时候，动画就会停止。



图 3-27 最后一张卡片

36. 建立选项列表

<card id="card3" title="Toulkit Demo">
　 <do type="accept">
　　　 <go href="#cullectbooktype"/>
　 </do>
　 <p>
　　　 <b><i>
　　　　　 BookStore.
　　　 </i></b>
　 </p>
</card>
<card id="cullectBookType">
　 <p>
　　　 Science or novel:
　　　 <select name="type">
　　　　　 <option value="science" onpick="#science">Science</option>
　　　　　 <option value="novel" onpick="#novel">novel</option>
　　　 </select>
　 </p>
</card>

在Nokia WAP Toolkit对该程序进行测试。启动Nokia WAP Toolkit，在“Go”下选择“Open Location”。在输入URL地址后，模拟器上出现图3-28所示的界面。



图 3-28 欢迎页面

　

在进入到“Options”后，模拟器上出现图3-29所示的界面：



图 3-29 选择菜单

在选择“OK”以后，模拟器上显示的就是Nokia WAP Toolkit的选择方式（图3-30）。必须选择“Options”才能进入选择状态。目前默认的是“Science”。



3-30 可编辑的选择项目

在选择“Options”之后出现了浏览选项菜单（图3-31）。当然只有“Edit Selection”这一个选项。



图 3-31 选择编辑选项

在出现了所有的可选择项目（图3-32）。默认的状态是“Science”。注意，选择“Select”和”OK”两个操作所产生的结果是不一样的。



图 3-32 所有的可选择项目

选择“Select”之后，就立即触发了“onpick”事件。显然没有找到novel这张卡片。Nokia WAP Toolkit抛出了一个错误警告！（图3-33）



图 3-33 错误警告

果选择了“OK”，那么就回到了开始的选择页面。但是默认的选择变成了“novel”，说明修改成功（图3-34）。这两个操作方式的区别在于：前者主要是用来导航，而后者将修改选择值，type这个时候应该等于“novel”。



图 3-34 修改成功

37. 建立更多的选项

<card id="science">
　 <p>
　　　 select science title:
　　　 <select name="productID">
　　　　　 <option value="universe" onpick="#price">The Universe</option>

　　　　　 <option value="space" onpick="#price">Facts About Space
　　　　　 <option value="time" onpick="#price">Time Machine
　　　 </select>
　 </p>
</card>
<card id="novel">
　 <p>
　　　 select novel title:
　　　 <select name="title">
　　　　　 <option value="speed" onpick="#price">Speed</option>
　　　　　 <option value="terminator" onpick="#price">Terminator</option>
　　　　　 <option value="ghost" onpick="#price">Ghost</option>
　　　 </select>
　 </p>
</card>

如果把上面的程序加入到3.4.36的程序中，那么在选择“Select”的时候，就不会抛出错误警告了。读者可以自己再试试。

38. 滚动和setvar

<card id="price">
　 <do type="accept">
　　　 <go href="#copies>
　　　　　 <setvar name="price" value="30.0"/>
　　　　　 <setvar name="discount" value="0.00"/>
　　　 </go>
　 </do>
　 <p>
　　　 Click accept to find the
　　　 Price and enter number of copies you need:
　 </p>
</card>

39. 使用input

使用正确的格式。

选择一个合适的标题。

限制所输入内容的最大长度。

收集名字

<card id="collectName">
　 <do type="accept">
　　　 <go href="#collectaddress"/>
　 </do>
　 <p>
　　　 name:
　　　 <input name="fullName" title="Full Name" format="*A" maxlength="9"/>
　 </p>
</card>

收集地址

<card id="collectAddress>
　 <do type="accept">
　　　 <go href="#cardtype">
　　　　　 <setvar name="ship" value="4.0"/>
　　　 </go>
　 </do>
　 <p>
　　　 address:
　　　 <input name="address" title="Address" format="*M" maxlength="9"/>
　 </p>
</card>

40. 选择信用卡类型

<card id="cardType">
　 <p>
　　　 what kind of credit card?
　　　 <select name="creditCardType">
　　　　　 <option value="visa" onpick="#cardNo">visa
　　　　　 <option value="mastercard" onpick="#cardNo">mastercard</option>
　　　　　 <option value="discover" onpick="#cardNo">dicover</option>
　　　 </select>
　</p>
</card>

41. 输入信用卡号码

<card id="cardNo">
　 <do type="accept">
　　　 <go href="#carddate"/>
　 </do>
　 <p>
　　　 card number
　　　 <input name="cardNumber" title="Card Number" format="*N" maxlength="16"/>
　 </p>
</card>

42. 输入信用卡过期日期

<card id="cardDate">
　 <do type="accept">
　　　 <go href="#confirmation"/>
　 </do>
　 <p>
　　　 expiration date
　　　 <input name="creditCardExp" title="Expiration Date" format="*N" maxlength="8"/>
　 </p>
</card>

43. 确认

<card id="confirmation">
　 <p>
　　　 Each is $$ $(price), you ordered $(unint) copies,
　　　 Shipping is $$ $(ship), and total is $$64,
　　　 Thank you ! Bye Bye !
　 </p>
</card>

44. 卡片调用

<card id="collectAddress">
　 <do tyoe="accept">
　　　 <go href="card.wml#cardtype">
　　　　　 <setvar name="ship" value="4.0"/>
　　　 </go>
　 </do>
　 <p>
　　　 address:
　　　 <input name="address" title="Address" format="*M"/>
　 </p>
</card>

45. 复合调用

<card id="collectAddress">
　 <do type="accept">
　　　 <go href="http://www.abc.com/wml/card.wml#cardType">
　　　　　 <setvar name="ship" value="4.0"/>
　　　 </go>
　 </do>
　 <p>
　　　 address:
　　　 <input name="address" title="Address" format="*M"/>
　 </p>
</card>

46. 调用WMLScript

<card id="confirmation">
　 <do type="accept" label="Calculate">
　　　 <go href="calculatetotal.wmls#calculatetotal($(price),$(unit),$(ship))"/>
　 </do>
　 <p>
　　　 Each is $$ $(price),
　　　 You ordered $(unit) copies,
　　　 Shipping is $$ $(ship), and
　　　 Total is $$ $(total)
　 </p>
</card>

47. WMLScript例子

//wml script used by book store application
extern function calculateTotal(a,b,c)
{
//a: unit price
//b: number of units
//c: shipping charges

　 var total=a*b+c;
　 WMLBrowser.setVar("total",total);
　 WMLBrowser.refresh();
}