WML教程(1-9)

WML教程1:从第一个实际应用全面了解WML

学习自然语言的最好方法就是溶入相应的语言环境在交流中学习,学习一种编程语言的最好方法就是看例程。为了帮助大家建立WML应用的第一印象,所以请大家先看第一个例子:

<?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="prev" label="back">
     <prev/>
     <!--provide a button you can clink to back a step-->
   </do>
 </template>
<card id="friends" title="Hot link">
 <p>
   <a href="
http://wap.sian.com.cn/">Sina WAP</a><br/>
   <a href="#nextcard">Next Card</a>
 </p>
</card>
<card id="nextcard">
 <p>
  this is the second card.
 </p>
</card>
</wml>

通过以上示例大家应该了解到以下内容:

1、语法:WML的语法与HTML相似,仍然是一种标记语言,而且延续了xML语法规则

2、元素:在XML和WML 语言中,语言的基本元素称之为"标签"
  标签必须被 < 和 > 括起来。
  大多数标签都包括"起""止"两部分,例如:<p>…</p>
  某些特殊标签可以只有一个标签,但是必须有结束标记,例如:<prev/>

3、属性:XML语言的标签可以包含很多属性,给标签提供必要的附加信息
  属性内容通常在起始标签内使用
  属性只作为参数为标签提供必要的信息,不会被浏览器显示
  属性的值需要被引号括起来,可以是单引号或者双引号,引号可以成对嵌套使用
  例如:<card id="friends" title="Hot link">

4、注释
  注释内容是方便制作者阅读源代码,不会被浏览器显示
  WML不支持注释嵌套
  例如:<!-- This is a comment. -->

5、文档结构
  WML文档是由Card和Deck构成的,一个Deck是一个或多个Card的集合。在得到客户终端的请求之后,WML从网络上把Deck发送到客户的浏览器,访问者可以浏览Deck内包含的所有Card,而不必从网上单独下载每一个Card。

其他一些示例中没有涉及到的基本内容:

6、大小写敏感
  无论是标签元素还是属性内容都是大小写敏感的,这一点继承了XML的严格特性,任何大小写错误都可能导致访问错误,这是WML制作者必须注意的问题。


7、躲避语法检查的方法-CDATA
  CDATA内的数据内容都会被当作文本来处理,从而避开语法检查,直接作为文本显示。
  示例:
  < ! [ CDATA [ this ia <b> a test ] ] >
  显示结果为
  this ia <b> a test

8、定义变量
  WML可以使用变量供浏览器和Script使用,通过在Deck中的一个Card上设置变量,其他Card不必重新设置就可以直接调用。

  变量的语法如下:
  $identifier
  $(identifier)
  $(identifier:conversion)

  如果变量内容包含空格就需要用圆括号括起来。由于变量在语法中有最高的优先级,包含变量声明字符的字符串会被当作变量对待,所以如果要显示$,就一定要连续使用两个$。

  示例:
  <p> Your account has $$15.00 in it.</p>
  显示结果为:Your account has $15.00 in it

  XML是一种语法非常严格的语言,WML也继承了这种规则,任何地不规范语法都会导致错误。


WML教程2:简单介绍关于WML文件的概念WML Decks
 

这里简单介绍一个关于wml文件的概念,其他的细节问题会在后面的章节还详细介绍。

声明

由于wml语言继承于xml,所以一个有效的wml文档必须包含一个xml声明和一个文件类型声明。

以下就是一个最常用的声明,由于wml语法要求非常严格,为了避免出错,制作者可以直接拷贝粘贴到制作文档。

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

注:<?xml version="1.0"?> 语句必须出现在一个deck的首行,而且必须顶头写,插入任何字符哪怕是空格都会造成语法错误。

主体结构

这是一个最简单的wml文件:

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


WML教程3:任务与导航-赋值与数据交换

这一部分简单讲解wml的变量赋值和数据提交方法,在后面的章节中有专门讲解。

变量赋值(setvar)

  setvar给浏览器的当前页面内变量赋值,该变量可以在当前dock中的任意card中调用。

  相关属性:

  1. name 变量名,作为访问变量的标识

    示例:<setvar name=$bogus value=$bear>

  2. value变量的值

数据交换(postfield)

  postfield通过url申请与cgi交换数据。

  相关属性:

  name & value 交换参数用的变量的名字和值。

  示例:<postfield name=$bogus value=$bear>

一个综合应用的例子

示例:

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

<card id="start" title="sina wap">
<do type="accept">
  <setvar name="mycgi" value="/cgi-bin/count.pl">
  <go href="$mycgi" method="post">
    <postfield name="one" value="one one"/>
    <postfield name="two" value="two two"/>
  </go>
 </do>
<p>hello world!</p>
</card>
</wml>

上例相当于产生一个count.pl?one="one one"&two="two two"的post申请。

WML教程4:跳转和传递参数

go的基本属性和应用

实现card之间跳转的一个基本方法是go,go和do、anchor等标签的结合是wml高级应用的一个基础。

  相关属性:

  href:声明链接的url

  sendreferer:表示是否传递调用href所指定的url的页面的url,也就是当前页的url,即http头中的http_referer,默认值为false,可选值为true

  method:wml的method与http提交表单的方法类似,同样有post和get两种,缺省参数为get。

  post与get的不同:post在发送前要进行编码处理,然后分组发送,发送过程相对安全,适合大数据量的处理;而get方法不进行任何处理,一次性发出,适合小数据量交换。除非你肯定你提交的数据可以一次性提交,否则请尽量用post方法。

  accept-charset:定义浏览器与服务器之间收发信息的字符集类型,例如:accept-charset="utf-8,us-ascii,iso-8859-1"。

示例:

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

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

<card id="nextcard">
  <do type="prev" label="before">
    <prev/>
  </do>
<p>this is the last card!</p>
</card>
</wml>

go结合postfield交换参数

标签go可以包含一个或多个postfield标签,用这些标签携带参数与服务器进行数据交换。

示例1:产生一个"quote.pl?stock=00001"get申请

<go href="/cgi-bin/quote.pl">
  <postfield name="stock" value="00001"/>
</go>

示例2:产生一个"stockname=证券&page=1"post申请

<go href="/cgi-bin/query.pl" method="post">
  <postfield name="stockname" value="证券"/>
  <postfield name="page" value="1"/>
</go>


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>

WML教程7:WML的事件


wml 的事件

内部事件(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>

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

转载于:https://www.cnblogs.com/kangtr/archive/2005/12/02/289542.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值