| WAP网页设计入门 |
|
１.基本规则
２.基本格式和文件头
３.显示文本
４.显示图片
５.锚和任务
６.显示表单
７.事件
８.CGI编程
这里介绍WAP协议标准组织所制定的标记语言WML，由于和以前介绍的HDML在手机浏览器专用网页的特征上基本一致，所以概念部分就略去了，直接讲述语言。
１。基本规则
* WML使用XML文档字符集，目前支持Unicode 2.0，和HDML不同，WML的所有标签，属性和规定的可接收值必须小写，CARD的名字和变量也是区分大小写的。和HDML一样，对于连续的空字符，只显示一个空格。标签内属性的值必须用"或者'括起来，属性名，＝和值之间不能有空格。对于不成对出现的标签，必须在 > 前加 / ，比如<br/>。在对变量的引用上和HDML基本相同，有：
$(var1:esc)
$(var1:noesc)
$(var1:unesc)
三种形式，具体含义参见前面HDML的相关部分。在对保留字符的处理上也基本相同，对应的取代字符有：
< <
> >
? ' '
" "
& &
$ $$
空格
- ­
这里要指出的是在URL的传递过程中，用来连接参数的 & 必须转化为 & 。
２。基本格式和文件头
wml文件的一般格式：
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<head>
<access/>
<meta..../>
</head>
<card>
Some contents...
</card>
<wml>
结构看上去和HTMl文件很类似，对于每一个DECK，在其文档开头必须指明以下的类型声明。
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
千万注意字母的大小写。对于一个DECK，其文件大小最好不要超过1.2K。
<wml>标签和HTML中的<html>标签一样，用来表明这是一个WML的DECK，它有一个可选的xml:lang属性来制定文档的语言，比如<wml xml:lang="zh">表示文档语言为中文。
和HTML一样<head>标签包含了该DESK的相关信息。<head>标签之间可以包含一个<access>标签和多个<meta>标签。
<access domain="域" path="/路径" />相当于HTML中的<BASE>标签，指定该DECK的访问控制信息，它用两个可选的属性，domain用来指定域，默认值为当前域，path用来指定路径，默认值为"/"，即根目录。由于<access>单独使用，所以要用/结尾，以后对于类似的情况不再赘述。
<meta 属性 content="值" scheme="格式" forua="true|false"/>和HTML中的类似，提供了该DECK的meta信息。属性是必选的，包括一下三种情况
name="name" UP.Link Server忽略meta数据
http-equiv="name" UP.Link Server将meta数据转为HTTP响应头(同HTML)
user-agent="agent" UP.Link Server直接将meta数据传给手机设备
content属性也是必选的，其内容根据属性而定。scheme属性目前尚不支持。forua为可选属性，指定在该wml文件传到客户端之前，<meta>标签是不是被中间代理删除(因为传输的协议可能改变)，默认值为false。
目前支持的meta数据:
<meta http-equiv="Cache-Control" content="max-age=3600"/>指定DECK在手机内存缓存中的存储时间段，默认的为30天(除非内存耗尽)，在该期间，手机对于访问过的DECK直接从缓存里调用。如果信息是对时间敏感的，可以用max-age指定DECK在缓存里的生存期，最小单位是秒，如果指定为0，则每次都需通过连接服务器来调用该DECK。
<meta user-agent="vnd.up.markable" content="false"/>和<meta user-agent="vnd.up.bookmark" content="指定的URL"/>类似于普通浏览器的书签功能。当用户将一个CARD做了书签后，手机浏览器首先用一个标记记录该CARD，这个标记默认的是<card>标签中的title属性(以后会讲到)，然后当用户选择了该书签以后，浏览器就会打开被记录的URL。但是因为在默认的情况下，手机会记录所有的DECK，所以，一般<meta>被用来使手机不要记录当前的URL，即<meta user-agent="vnd.up.markable" content="false"/>。此外，如果要为书签指定不同于当前DRECk的URL，用<meta user-agent="vnd.up.bookmark" content="指定的URL"/>。
一个DECK可以包含多个CARD，每个CARD的内容可能不止一屏显示，注意DECK，CARD和屏幕显示范围的关系。一个CARD用<card>和</card>包含。<card>可以包含以下可选的属性：
<card id="name" title="label" newcontext="false" ordered="true" onenterforward="url" onenterbackward="url" ontimer="url">
*id属性用来指定CARD的名字，可用来在CARD间跳转，相当于在HTML中在页内跳转时用<A NAME="jumpHere">。
*title属性用来作为书签的标记，该属性一般不会显示在屏幕上。
*newcontext属性，默认值为false，用来指示当跳转到本CARD时，手机是不是要清除以前保留的信息，包括变量，堆栈里的历史记录，重新设置手机状态等。
*ordered属性，默认值是true，表明该CARD里的内容是按固定的顺序显示，还是按用户的选择来显示。这点和HTMl不同，CARD页面里的内容可以按一定的顺序显示，默认的是按线性顺序显示，即按代码的顺序，但是，要注意的是，以下三个标签必须按以下顺序来写<onevent> <timer> <do>，(这和以后要讲的“事件”有关)。这样做是为了方便填表单，当ordered设置为true时，如果一个表单的内容不能在一屏里显示完，就分成多屏显示；当ordered设置为false时，手机可以显示一个概要CARD来总结有效的选项，用户可以从中选取表单选项来填写。
*onXXX属性，类似于HTML标签中的onXXX属性，用来捕捉事件，当事件被触发时执行指定的操作(任务)，在这里是转向某个URL。
３。显示文本
在文本的显示上WML基本和HTML相同。文字段落包含在<p align= "alignment" mode=" wrapmode">和</p>之间，align属性指定该段文字的对齐方式，默认的是left，其他可选择right和center；mode属性指定当一行显示不下所有的文字时是否自动换行，默认的是自动换行wrap，如果选nowrap，则在一行中显示，浏览器会通过类似于水平滚动条的机制来显示所有文字。
换行标签也一样为<br/>，这里先替一下，在标单中如果有多个<input>或者<select>，其间不要用<br/>，否则会使手机浏览器认为是断点而把表单分页显示。
文字的修饰标签有<b>、<i>、<u>、<em>、<strong>、<big>和<small>，意义和HTML里的相同。
表格的显示标签也和HTML相近，使用<table title="name" align="left|right|center" columns="列数">、<tr>和<td>来显示，<table>的title属性用来给表格取个名字，columns属性指定表的列数，不能为0，可选的align属性和前面提到的一样是对齐方式。表格中可以包含文字和图片。
test1.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>
<p align="center">
<i>Hello</i><br/>
<b><i>World!</i></b>
<table title="mytable" align="right" columns="2">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
</p>
</card>
</wml>
４。显示图片
显示图片(1位黑白BMP图片)的标签一样类似于HTML，<img alt="text" src="http://blog.eedu.org.cn/url" localsrc="http://blog.eedu.org.cn/icon" align="left" height="n" width="n" vspace="n" hspace="n"/>，属性中alt和src是必须要有的，其他可选。另外要注意的是<img>要放在<p>里，不能放在<do>和<option>等功能健标签和选单标签里。
*alt属性用来指定当手机不支持图片显示时用来显示的文字。
*src属性指定图片的URL，但当有了以下的localsrc属性时，手机浏览器就忽略src属性。
*localsrc属性用来指定显示存在手机ROM中的图标，如果找不到，则到UP.Link Server上去找。
*可选的align属性用来表明图片同当前行文本的对齐方式，默认值为bottom，可选to和middle。
*height、width、vspace、hspace属性分别指定图片的长宽和距环绕文字的间距，目前不是所有的WAP手机都支持这些属性。
test2.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>
<p align="center"><img alt=":)" src="/Article/UploadFiles/200608/20060808101423600.bmp" localsrc="http://blog.eedu.org.cn/smileyface"/></p>
</card>
</wml>
５。锚和任务
连接是HTML页面里最基本的功能，在WML里也一样用<a href="http://blog.eedu.org.cn/url" title="label">和</a>来包括用来建立连接的文字，必选属性href指定了要打开的URL，可选的title属性给该连接取个标记名字，这个名字将作为软按钮之一的ACCEPT键(详见以前的HDML入门文章)的标记显示在屏幕的软按钮区，所以通常可以将属性作为提示文字是用。
然而，以上的连接在WML里只是任务的一种情况，为了能够使用其它任务，所以引进了新的标签<anchor title="label">任务标签 文本</anchor>，<a>其实是当任务标签为<go/>时的简单表示方式。
test3.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>
<p>
<anchor title="Link1"><go href="test1.wml"/>News</anchor><br/>
<a title="Link2" href="test2.wml">Sports</a>
</p>
</card>
</wml>
WML里的任务标签有以下几种，除了用于<anchor>，还可以用在事件中：
1)<go>用来指示浏览器显示指定的URL，包括DECK的第一个CARD或者指定的CARD。语法如下:
<go href="http://blog.eedu.org.cn/url" sendreferer="false|true" method="get|post" accept-charset="charset">
<postfield name="name" value="value"/>
<setvar name="name" value="value"/>
</go>
其中href属性为必选，其他为可选。sendreferer属性表示是否传递调用href所指定的URL的页面的URL，也就是当前页的URL，即HTTP头中的HTTP_REFERER，默认值为false，可选值为true。method和HTML中的表单FORM的method属性一样，指定表单是以get的方式还是post的方式递交，以便cgi处理，默认的值为get，但如果未指定method但<go></go>间存在<postfield>，手机自动以post方式传递。accept-charset属性可覆盖在HTTP头里指定的字符集，可以写多个字符集，如accept-charset="UTF-8,US-ASCII, ISO-8859-1"。
<postfield name="name" value="value"/>可以看作是HTML表单FORM中的<INPUT TYPE="HIDDEN" NAME="变量名" VALUE="值">，通过它可以向指定的URL传递以“变量名/值”形式的数据。name和value属性都是必选的。注意只有这里的变量是用来递交给CGI程序的。
除了<postfield>，还可以在<go>和</go>间加入一句或者多句<setvar name="name" value="value"/>，该语句的意思是，当触发某一事件时，给变量赋值。
要注意的是，当<go>和</go>之间没有任何语句时，要用<go/>的形式，这点比较特别，比如<anchor title="Link1"><go href="test.wml"/>News</anchor>。
2)<prev>用来将当前页面的URL压入URL历史堆栈，并打开此前的URL，若该URL不存在，则<prev>无效。语法类似<go>：<prev><setvar name="name" value="value"/></prev>，<prev>和</prev>之间可加入一句或多句<setvar name="name" value="value"/>，若不加，则必须变成<prev/>的形式。
3)<refresh>用来刷新当前的页面，从而使得页面内的变量刷新，语法为<refresh><setvar name="name" value="value"/></refresh>。
4)<noop>，表示什么也不做，该标签不能用在<anchor>中，一般用在覆盖DECK级的<do>(以后会说明)。
６。显示表单
类似于HTML的<FORM>，<fieldset>可用来包括一组表单选项，但不是必须的。前面说过，当<card>的ordered设置为false时，手机可以显示一个概要CARD来总结有效的选项，方便用户从中选取表单选项来填写，概要CARD就是根据<fieldset>和独立的输入框<input>以及选单<select>来总结的。语法为，<fieldset title="label">表单内容</fieldset>，可选的title属性除了可用来表示表单的名字外，还在概要CARD里作为选择项的标题。表单内容可以是嵌套的<fieldset>，输入框<input>，选单<select>和必要的提示文本。
<input name="variable" title="label" type="type" value="value" default="default" format="specifier" emptyok="false|true" size="n" maxlength="n" tabindex="n"/>，用来输入文本，除了name属性是必要的，其他可选。
*name属性，指定了用来存储该输入文本的变量名字。
*title属性，该输入框的名字，同样可被用来作为概要CARD页中的选项名。
*type属性，默认值为text，如选择password，则输入的数据显示为*。
*value属性，在语法和行为上等同于下面的default属性，
*default属性，指定输入框的默认值，即name属性指定变量的默认值，当用户输入新值时，该值无效，如果该值不符合以下format属性的规定，则手机也忽略该默认值。
*format属性，用来格式化输入的数据，可用的标记如下，使用时可用“一位数字标记”和“*标记”的形式，前者代表N个标记型字符，如3X，后者代表任意个(小于maxlength属性的值)标记型字符。
标记 描述
A 任何符号或者大写字母(不包括数字)
a 任何符号或者小写字母(不包括数字)
N 任何数字(不包括符号或者字母)
X 任何符号、数字或者大写字母(不可改变为小写字母)
x 任何符号、数字或者小写字母(不可改变为大写字母)
M 任何符号、数字或者大写字母(可改变为小写字母)或者多个字符，默认为首字大写
m 任何符号、数字或者小写字母(可改变为大写字母)或者多个字符，默认为首字小写
*maxlength属性，指定了用户可输入的最大字符长度，最大限制为256个字符。
*emptyok属性，表示用户可否不填输入框，默认为false，即要填。
*size属性，输入框显示长度，目前未被支持。
*tabindex属性，类似于在HTML表单中按TAB键后，焦点落在哪个选项上，该值决定了这个选择顺序，数字大的排在后面。目前未被支持。
test4.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="card1" ordered="false">
<p>
USERNAME:<input name="userName" title="User Name" type="text" value="YourNameHere" format="*M" emptyok="false" maxlength="12" tabindex="1"/>
PASSWORD:<input name="password" title="Password" type="password" format="8x" emptyok="false" maxlength="8" tabindex="2"/>
COMMENTS:<input name="comments" title="comment" type="text" value="YourCommentsHere" format="*M" emptyok="true" maxlength="30" tabindex="3"/>
</p>
</card>
</wml>
将上例<card>中的odered的值改为"true"试试看，然后再在<p>和</p>内加入<fieldset title="field1">和</fieldset>试试看。
<select>选单类似于HTML表单中的<SELECT>，<select>和</select>间可包含<optgroup>和<option>标签，语法如下，所有属性都为可选：
<select title="label" multiple="false|true" name="variable" default="default" iname="index_var" ivalue="default" tabindex=" n">
<optgroup title="label">选单内容</optgroup>
<option title="label" value="value" onpick="url">
事件或者文本
</option>
</select>
*title属性，如以上<input>的title属性。
*multiple属性，指定用户可否进行多项选择，默认值为false。
*name属性，用来存储用户选择项的变量名，其值为<option>标签的value属性，若用户没有选择又没有用default属性指定默认值，则手机将改变量赋值为空字符串""，对于多项选择，每个值用“;”分开。
*default属性，可为name属性指定的变量赋默认值。
*iname属性，用来记录用户选择项的位置，相应的值从1开始。若没选，则该值为0。
*ivalue属性，用来记录默认值所在的位置。
<optgroup>可用来将多个<option>分组，<optgroup>和</optgroup>间还可包括<optgroup>和<option>，该标签目前尚未被支持。
<option>，类似于HTML中选单的<OPTION>，用来表示选单的可选项。<option>和</option>间可包括事件(见下节)和选单的显示文本。<option>的属性为可选，其中value属性用来提供值，当选到该项后，将该值赋给<select>的name属性所指定的变量。onpick属性，用来指定用户选到该项并按ACCEPT键后所打开页面的URL。
test5.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="card0" ordered="false">
<p>
Please select a city...
<select title="Cities List" name="city">
<option title="Beijing" value="c1">Beijing</option>
<option title="Shanghai" value="c2">Shanghai</option>
<option title="Hongkong" value="c3">Hongkong</option>
</select>
Please select columns...
<select title="Column List" multiple="true" name="col">
<option title="Hot News" value="l1">News</option>
<option title="Cool Sports" value="l2">Sports</option>
<option title="Pop Enter,,," value="l3">Entertainment</option>
</select>
</p>
</card>
</wml>
７。事件
WML的事件基本上分为两大类，一类是键盘(包括软硬按钮)输入事件，用<do>标签来处理，另一类是相关页面内部的事件，用<onevent>标签来处理。
<do>的语法如下：<do type="type" label="label" name="name" optional="false|true">任务</do>，任务就是以前提到的四种任务。<do>的属性中，type是必选的，其他为可选。
*label属性，指定了软按钮在屏幕上的显示文本。目前type属性为delete，help，prev时该属性无效。
*name属性，为<do>取个名字，同一的CARD里的<do>不能重名。如果CARD级的<do>和DECK级的<do>同名，则覆盖DECK级的<do>。
*optional属性，指定手机是不是可以忽略这个事件，默认值是false。
*type属性，指定触发的事件，具体如下；
type值 触发原因
accept 调用ACCEPT按钮机制
delete 调用DELETE按钮机制
help 调用HELP按钮机制
options 调用选择按钮机制
prev 调用PREV按钮机制
reset 调用清除和重新设定手机状态时的RESET机制(目前不支持)
unknown 调用unknown机制，等于type=""(目前不支持)
vnd. co-type 调用厂商特定的机制(目前不支持)
X-*, x-* 供以后使用(不保留)(目前不支持)
test6.wml
---------------
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<head>
<meta http-equiv="Cache-Control" content="max-age=0"/>
</head>
<card id="card0" ordered="false">
<do type="accept" label="InputName" name="do1">
<go href="#card01"/>
</do>
<p>
NAME:<input name="userName" title="User Name" type="text" format="*M" emptyok="false" maxlength="12"/>
</p>
</card>
<card id="card01">
<p>
You name is $(userName:noesc).
</p>
</card>
</wml>
<onevent>的语法如下，<onevent type="type">任务</onevent>，必选属性type的取值如下:
type值 如果用户执行了以下操作就执行任务
onpick 用户选择或不选一个<option>项时。
onenterforward 用户使用<go>任务到达一个CARD时。
onenterbackward 用户使用<prev>任务返回到前面的CARD时，或者按BACK按钮时。
ontimer 当<timer>过期时。
test7.wml
---------------
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<head>
<meta http-equiv="Cache-Control" content="max-age=0"/>
</head>
<card id="card0" ordered="false">
<p>
Please select a city...
<select title="Cities List" name="city">
<option title="Beijing" value="Beijing">
<onevent type="onpick">
<go href="#card01"/>
</onevent>Beijing</option>
<option title="Shanghai" value="Shanghai" onpick="#card01">Shanghai</option>
<option title="Hongkong" value="Hongkong" onpick="#card01">Hongkong</option>
</select>
</p>
</card>
<card id="card01">
<p>
You are Living in $(city:noesc)
</p>
</card>
</wml>
<timer/>可以用来在用户不进行任何操作的一段时间后，自动执行一个任务，任何激活CARD页面的任务和用户操作都会启动<timer/>，而任务进行时，<timer/>就停止。每个CARD只能有一个<timer/>，一个<timer/>只能触发一个任务。语法如下：<timer name="variable" value="value"/>，其中name为可选属性，指定为一个变量名，当退出该CARD时，该变量存储此时定时器的值，当定时器超时时，手机将该变量设为0；value为必选属性，用来设置定时器的定时值，最小单位为0.1秒。
test8.wml
---------------
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<head>
<meta http-equiv="Cache-Control" content="max-age=0"/>
</head>
<card id="card1" ontimer="#card2">
<timer name="time1" value="50"/>
<p align="center">
After 5s, goto card2
</p>
</card>
<card id="card2">
<onevent type="ontimer">
<go href="#card1"/>
</onevent>
<timer name="time2" value="50"/>
<p align="center">
Here is card2!
</p>
</card>
</wml>
再提一下，<onevent> <timer> <do>三者必须按以上顺序写。
此外在DECK级还可以加入<template>，用来将事件捆绑在DECK级上，语法如下：
<template onenterforward="url" onenterbackward="url" ontimer="url">
<do>或者<onevent>
</template>
test9.wml
---------------
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<head>
<meta http-equiv="Cache-Control" content="max-age=0"/>
</head>
<template>
<do type="accept" label="deckPress" name="do1">
<go href="#card01"/>
</do>
</template>
<card id="card0" ordered="false">
<do type="accept" label="cardPress" name="do1">
<go href="#card02"/>
</do>
<p>
Press ACCEPT...
</p>
</card>
<card id="card01">
<p>
Here is card01
</p>
</card>
<card id="card02">
<p>
Here is card02
</p>
</card>
</wml>
８。CGI编程
1)在WEB服务器上添加WML的MIME类型
对于IIS4，可在其管理器里的站点属性中加入新的MIME类型，后缀.wml和MIME类型text/vnd.wap.wml。
对于PWS，可修改注册表，先在HKEY_CLASSES_ROOT层加入主键.wml，再加入串值Content Type为text/vnd.wap.wml，然后在HKEY_LOCAL_MACHINE\Software\CLASSES\MIME\Database\Content Type\中加入主键text/vnd.wap.wml，再加入串值Extension为.wml。
以前提到的HDML也用类似的方法。
2)以http方式访问wml文件
在手机浏览器的URL栏里输入http://localhost/test.wml，就可以访问WML文件了。
3)CGI设计
和普通CGI变成的方式差不多，只是返回结果时，先要输出Content-Type为text/vnd.wap.wml，然后再输出WML内容。
test10.wml
---------------
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<head>
<meta http-equiv="Cache-Control" content="max-age=0"/>
</head>
<card id="card0">
<do type="accept" label="Input Name" name="do1">
<go href="http://localhost/test.asp" method="post">
<postfield name="uid" value="123456"/>
<postfield name="uname" value="$(userName:esc)"/>
</go>
</do>
<p>
NAME:<input name="userName" title="User Name" type="text" format="*M" emptyok="false" maxlength="12"/>
</p>
</card>
test10.asp
---------------
<%
uid=Request.Form("uid")
userName=Request.Form("uname")
Response.ContentType="text/vnd.wap.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>
<p>
USERNAME:<%=userName%>
USER__ID:<%=uid%>
</p>
</card>
</wml>
|
-----------------------------------------------------------------
