WAP基础教程 (四到六)
WML学习(四)
锚和任务
连接是 HTML 页面里最基本的功能, 在 WML 里也一样用 <a href="ur
l" 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="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,默认值为fal
se,可选值为true。method和HTML中的表单FORM的method属性一样,指定表单是以get的
方式还是post的方式递交,以便cgi处理,默认的值为get,但如果未指定method但<go>
</go>间存在<postfield>,手机自动以post方式传递。accept-charset 属性可覆盖在H
TTP头里指定的字符集,可以写多个字符集,如accept-charset="UTF-8,US-ASCII, ISO
-8859-1"。
<postfield name="name" value="value"/>可以看作是HTML表单FORM中的<INPUT T
YPE="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"/></p
rev>,<prev>和</prev>之间可加入一句或多句<setvar name="name" value="value"/>
,若不加,则必须变成<prev/>的形式。
3)<refresh>用来刷新当前的页面,从而使得页面内的变量刷新,语法为<refresh>
<setvar name="name" value="value"/></refresh>。
4)<noop>,表示什么也不做,该标签不能用在<anchor>中,一般用在覆盖DECK级的
<do>(以后会说明)。
WML学习(五)
显示表单
类似于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" tabi
ndex="n"/>,用来输入文本,除了name属性是必要的,其他可选。
*name属性,指定了用来存储该输入文本的变量名字。
*title属性,该输入框的名字,同样可被用来作为概要CARD页中的选项名。
*type属性,默认值为text,如选择password,则输入的数据显示为*。
*value属性,在语法和行为上等同于下面的default属性,
*default属性,指定输入框的默认值,即name属性指定变量的默认值,当用户输入
新值时,该值无效,如果该值不符合以下format属性的规定,则手机也忽略该默认值。
*format 属性,用来格式化输入的数据,可用的标记如下,使用时可用“一位数字
标记”和“*标记”的形式,前者代表N个标记型字符,如3X, 后者代表任意个(小于ma
xlength属性的值)标记型字符。
标记 描述
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="YourNam
eHere" 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="YourComme
ntsHere" format="*M" emptyok="true" maxlength="30" tabindex="3"/>
</p>
</card>
</wml>
将上例<card>中的odered的值改为"true"试试看,然后再在<p>和</p>内加入<fiel
dset title="field1">和</fieldset>试试看。
<select>选单类似于HTML表单中的<SELECT>,<select>和</select>间可包含<optg
roup>和<option>标签,语法如下,所有属性都为可选:
<select title="label" multiple="false|true" name="variable" default="def
ault" 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>间还可包括<op
tgroup>和<option>,该标签目前尚未被支持。
<option>,类似于HTML中选单的<OPTION>,用来表示选单的可选项。<option>和</
option>间可包括事件(见下节)和选单的显示文本。<option> 的属性为可选,其中valu
e属性用来提供值,当选到该项后,将该值赋给<select> 的name属性所指定的变量。on
pick属性,用来指定用户选到该项并按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学习(六)
事件
WML的事件基本上分为两大类,一类是键盘(包括软硬按钮)输入事件,用<do>标签来
处理,另一类是相关页面内部的事件,用<onevent>标签来处理。
<do>的语法如下:<do type="type" label="label" name="name" optional="fals
e|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" emptyo
k="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 n
ame="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>