WML教程及常用功能及实例(中)

 

WML教程5：任务和任务屏蔽

-------------------------------------------------------------------------------------------------------------------------------

内部任务
    返回<prev>

    用来将当前页面的url压入url历史堆栈，并打开此前的url，若该url不存在，则<prev>无效。语法类似<go>，<prev>和</prev>之间可加入一句或多句<setvar name="name" value="value"/>，若不加，则必须以<prev/>的形式出现。

    刷新<refresh>

    用来刷新当前的页面，从而使得页面内的变量刷新或置空，语法与prev相同。<refresh> <setvar name="name" value="value"/> </refresh>，或<refresh/>。

    无动作<noop>

    表示什么也不做，该标签不能用在<anchor>中，一般用在覆盖deck级的<do>。

任务屏蔽（task shadowing）
    wml的task有两个级别，deck级和card级。通常人们还习惯把设置在某些条件中的任务成为第三级，在这里先不讨论，后面有专门的描述。

    deck level：把通用的task设置在template中，这个deck中所有的card都自动继承并使用这些task。

    card level：只在当前的card中有效，并替换掉deck level的相同属性的task。

示例：

<wml>
    <template>
        <do type="options" name="general" label="back">
            <prev/>
        </do>
    </template>
<!-- a deck level task-->

<card id="card1">
    <p>hello , this is a test <br/>
        <a href="#card2">the second</a>
    <p>
</card>

<card id="card2">
<!-- this card override the deck level task by noop -->
<do name="general" type="options" label="none">
    <noop/>
</do>
<p>nothing happend here</p>
</card>
</wml>

WML教程6：动作和链接

-------------------------------------------------------------------------------------------------------------------------------

设置动作（do）

do是wml语言中最有有价值的元素之一，它给用户提供一种在当前card上进行"动作"的通用方法。这种动作通常被定位在用户终端界面的特定部件上，例如wap手机的功能键（cancel，option，accept），特定的图标，语音识别功能等等。do可以设置在deck的template上或者card上，当他们重名的时候card上的do会覆盖template上的同名元素（参看任务屏蔽说明）。

属性列表：

type：诉浏览器动作的意图。
    wml总共声明了9个类型的动作，最常用的动作类型是"accept"和"option"。
    1.1 accept，接受、确认
    1.2 prev，返回上一个历史堆栈中的url
    1.3 help，请求帮助
    1.4 reset，清除或者重置状态
    1.5 options，根据当前页面的功能设置选项。
    1.6 delete，删除选择条目
    1.7 unknow，相当于空白字串
    1.8 还有两个属性还没有最后确定。

label：设置按钮标题，显示在浏览器定义好的屏幕位置，不同浏览器地显示位置不同。如果不设置标题，按钮会按照浏览器的缺省格式显示，不同浏览器的缺省格式不同。

name：按钮名称，可以用card级的动作覆盖template上的同名动作，重新赋予那些动作新的任务。

optional：来定义一个按钮是否显示，设置为true时会被浏览器忽略

示例：

<do type="accept" label="accept" name="accept1" optional="false">

     {content}

</do>

链接（anchor）

archor是wml定义链接的基础方式，与其他标签结合可以满足很多应用，anchor必须与go结合。

相关属性:

title 链接的文本显示内容。

示例：

<anchor title="click"> click me <go href="#clickedme"/> </anchor>

简化的链接形式（a）

a是anchor的简化形式，不需要go语句配合。为了提高效率，推荐使用<a>。

相关属性:

1. href 超级链接的目标url

示例：

<a href="#clickedme">click me</a>

设置动作（do）

-------------------------------------------------------------------------------------------------------------------------------

内部事件（onevent）

相关属性:

type：内部事件的触发条件，当前浏览器状态满足触发条件时，浏览器就会触发这个条件下设置的task，内部事件总共有4种触发条件。

    1 ontimer 满足时钟设置的条件时，该条件成立。关于时钟设置问题，后面还有专门的说明。
    2 onenterbackward 通过prev或其他外部命令返回到当前card，该条件成立。
    3 onenterforward 当浏览器通过链接进入当前card，该条件成立
    4 onpick 在使用option控件列表的时候，任何点击控件的行为都会触发本事件，包括选择和去掉选择。

示例：

<?xml version="1.0"?>
<!doctype wml public "-//wapforum//dtd wml 1.1//en" " http://www.wapforum.com/dtd/wml_1.1.xml">
<wml>

<!-- this deck can"t use in ericsson r320sc ,because r320sc haven"t accept button-->

<card id="start">
<do type="accept" label="next">
    <go href="#two"/>
</do>
<p>this is the first card.</p>
</card>

<card id="two">
<do type="accept" label="next">
    <go href="#three"/>
</do>
<onevent type="onenterbackward">
    <go href="#temp"/>
</onevent>
<p>this is the second card.</p>
</card>

<card id="three">
<do type="accept" label="back">
    <prev/>
</do>
<p>this is the thired card.</p>
</card>

<card id="temp">
<do type="accept" label="start">
    <go href="#first"/>
</do>
<p>haha, you are lost!</p>
</wml>

WML教程8：WML文档结构详解

-------------------------------------------------------------------------------------------------------------------------------

wml 文档结构祥解

1、声明（prologue）

<?xml version="1.0"?>
<!doctype wml public "-//wapforum//dtd wml 1.1//en" " http://www.wapforum.com/dtd/wml_1.1.xml">

2、元素（element）

    wml首先定义一个deck，然后在deck内封装信息和card。

3、文件头（head element）

    头信息包含与deck有关的信息，包括meta数据和控制元素。

    3.1、访问权限设置（access）

    该元素用于设置有访问当前deck权限的列表。如果deck内不包含access element信息，该deck下的access element处于无效状态，其他所有的deck都可以访问该deck。

    相关属性:

    domain：假如设置 <access domain="sina.com.cn"/> 那么 http://www.sina.com.cn/ 将有访问权限, 而 http://www.sino.com.cn/ 和 http://www.sina.net.cn/ 就没有.

    path：工作原理与domain非常相似，例如设置<access path="/internal"/> 那么"/internal/wml" 将获得访问权限，而"/internal-wml"就没有。

示例：

    做如下设置 <access domain="sina.com.cn" path="/wap"/>

    那么以下几个url具有访问权限：

    http://www.sina.com.cn/wap/goto.cgi
    http://www.sina.com.cn/wap/index.wml
    http://www.sina.com.cn/wap/cgi-bin/create_report.cgi?name=123&pwd=234

    以下的几个url没有访问权限：

    http://www.sina.com/wap/getuid.cgi
    http://www.sina.com.cn/internal/wap/getuid.cgi

3.2、头元素设置（meta）

    <meta 属性 content="值" scheme="格式" forua="true|false"/>和html中的类似，提供了该deck的meta信息。

例如：<meta http-equiv="cache-control" content="max-age=0" forua="true"/>

    content属性是必选的，其内容根据属性而定。scheme属性目前尚不支持。forua为可选属性，指定在该wml文件传到客户端之前，<meta>标签是不是被中间代理删除(因为传输的协议可能改变)，默认值为false。

    目前支持的meta数据:

    <meta http-equiv="cache-control" content="max-age=0"/>指定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"/>。

4、模板（template）

    为了节省资源，可以把每个card中都要用到的task设置在模板中，供当前deck中所有card使用，加入个别card不需要该模板内容，可以override掉它（详见任务屏蔽）。

5、卡片（card）

    适用事件

    以下事件适用于card和template，参见前面的相关说明。
    1. onenterbackward
    2. onenterforward
    3. ontimer

    卡片属性（card）

    id：同一deck内card的唯一标识，可以作为标签被使用。(#nextcard).

    title：卡片标题。不同的浏览器处理标题处理title的原则不一样，有的浏览器会显示标题，如果当前卡片没有设置标题，当前卡片的url会被显示在标题位置。有些浏览器为了节省显示区域会忽略标题。

    newcontext：默认值为false，用来指示当跳转到本card时，手机是不是要清除以前保留的信息，包括变量，堆栈里的历史记录，重新设置手机状态等。

    ordered 布尔变量，声明card是否有序。通常可以用来开发自动播放的幻灯片效果。

示例：

<?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 domain="sina.com.cn" path="/wap"/>
</head>

<template>
    <do type="accept" name="accept1" label="ok">
        <go href="#accept"/>
</do>
</template>

<card id="start" title="start here">
<p> start here. </p>
</card>

<card id="accept" title="okay card">
<do type="accept" name="accept1" label="okay">
    <go href="#accept2"/>
<!-- override the same task in template-->
</do>
<p> card accept </p>
</card>

<card id="accept2" title="ok card" >
<do type="accept" >
    <go href="#start" />
</do>
<p> card accept2 </p>
</card>

</wml>

WML教程9：Select List 控件

-------------------------------------------------------------------------------------------------------------------------------

对表单的控制能力可以证明一个html设计者是否够专业，而且很多交互功能也必须依赖表单。wml没有表单属性，但是wml可以直接使用控件，同样可以达到使用表单的效果。因此，使用控件的水平可以体现一个wml设计者的制作水平。

wml控件有select list和input box两个系列，每个系列另外包含几个子系列，基本可以满足表单设计的需求。

选择列表控件（select list）

    select有两对很重要也很容易混淆的属性：name, value , iname , ivalue。这四个属性的区别和用途不太容易描述清除，看了后面的例子会很容易理解。

    每个select是一个或多个option的集合，option地结果返回给select元素的name和iname。

    示例：

<select name="name" iname="iname value="value" ivalue="ivalue">
<option value="s">sina</option>
<option value="y">yahoo</option>
</select>

相关属性:

1. multiple 这个布尔变量的值决定是否允许多重选择，值为true时select控件允许复选，否则相反。

2. name & value 这一组变量的主要作用是获取于该option的返回值，value提供name的缺省值。

3. iname & ivalue 与上一组参数功能相似，不同的是ivalue返回有效option的序列号。被选中的控件用它的序号表示，0代表没有option被选中，假如第二个和第三个同时被选中就表示为 2;3

4. title 作为标题参数提供给浏览器，但是不同的浏览器处理方式有所不同，有些浏览器直接显示选项内容不显示标题，有的浏览器显示标题，按选择键进入选择界面。

5. tabindex 提供给浏览器的控件序号参数。

2、选项控件

    option只有包含在select内才有意义，无法单独使用。

    相关属性:

1. value option的返回值，假如当前option被选择，这个value的值会被传送到select元素的name变量。

2. title 供浏览器显示的选项标题。

3. onpick 如果当前option被点选，浏览器跳转到指定的url。

示例1：

<card>
<p>please choice your favourite web.<br/>
<select name="x">
    <option value="s">sina</option>
    <option value="y">yahoo</option>
</select>
<p>
</card>

上例是一个基本的单选列表，选择的结果被赋值给x。

示例2：

<card>
<p>please choice all your favourite web.<br/>
<select name="x" iname="i" ivalue="1;3" multiple="true">
    <option value="s">sina</option>
    <option value="y">yahoo</option>
    <option value="n">netease</option>
</select>
<p>
</card>

上例是一个使用了iname和ivalue的多选列表，i被预置为 1;3 。假如用户选择了sina和yahoo，x被赋值为 s;y，i被赋值为 1;2。假如用户不做任何选择，i等于1;3，x内容为空。

示例3：

<card>
<p>jump to your favourite web.<br/>
<select>
    <option onpick=" http://wap.sina.com.cn">sina</option>
    <option onpick=" http://wap.chnmobile.net">china mobile</option>
</select>
<p>
</card>

上例演示了option的onpick功能，不管option的状态如何，只要它被点选，浏览器就会跳转到指定的url。

示例四：

<card>
<p>please choice your favourite web.<br/>
<select name="x">
    <option value="s">sina</option>
    <option value="y">yahoo</option>
    <option value="s;y">both</option>
</select>
<p>
</card>

上例演示了一个通过单选功能完成多选需求的示例。

WML教程10：分组选择控件（Optgroup）和复杂实例

-------------------------------------------------------------------------------------------------------------------------------

相关option分组产生层级，对最终用户来说可能没有什么意义，但是对于制作者来说，option分组可以提供很多方便。

相关属性:

1. title 标题，通常这种标题无法被显示

示例：

<card>
<p> what os you use now？
<select name="os">
    <optgroup title="microsoft">
      <option value="dos">dos</option>
      <option value="windows">windows</option>
    </optgroup>
    <optgroup title="others">
      <option value="unix">unix</option>
      <option value="linux">linux</option>
    </optgroup>
</select>
</p>
</card>

上例演示了一个基本的optgroup元素的应用，由于optgroup没有变量参数，所以只能提供有限的应用。

一个比较复杂的例子：

<?xml version="1.0"?>
<!doctype wml public "-//wapforum//dtd wml 1.1//en" " http://www.wapforum.org/dtd/wml_1.1.xml">
<wml>

<template>
    <do type="options" label="back">
        <prev/>
    </do>
</template>

<card id="lists">
<p>
<select title="pick lists">
    <option onpick="#jy">jin yong</option>
    <option onpick="#gl">gu long</option>
</select>
</p>
</card>

<card id="jy">
<onevent type="onenterbackward">
    <prev/>
</onevent>
<do type="accept">
    <go href="#display_fav"/>
</do>
<p> pick your fav book:
<select name="fav" title="stooges">
    <option value="xiao">xiao ao jiang hu</option>
    <option value="she">she diao ying xiong</option>
    <option value="lu">lu ding ji</option>
    <option value="shen">shen diao xia lv</option>
</select>
</p>
</card>

<card id="gl">
<onevent type="onenterbackward">
    <prev/>
</onevent>
<do type="accept">
    <go href="#display_fav"/>
</do>
<p> pick your fav book.
<select multiple="true" title="gu long" name="fav" >
    <option value="gu">gu xing zhuan</option>
    <option value="da">da di fei ying</option>
    <option value="tian">tian ya ming yue dao</option>
    <option value="feng">lu xiao feng</option>
</select>
</p>
</card>

<card id="display_fav">
<p> your fav was $fav. </p>
</card>
</wml>