新书推介:《语义网技术体系》
作者:瞿裕忠,胡伟,程龚
   XML论坛     W3CHINA.ORG讨论区     计算机科学论坛     SOAChina论坛     Blog     开放翻译计划     新浪微博  
 
  • 首页
  • 登录
  • 注册
  • 软件下载
  • 资料下载
  • 核心成员
  • 帮助
  •   Add to Google

    >> 本版讨论WAP/WML, XMPP, Mobile Web Service, Windows Mobile, Symbian, PalmOS, Android, 嵌入式数据库, 无线搜索等移动嵌入式软硬件开发技术
    [返回] 中文XML论坛 - 专业的XML技术讨论区XML.ORG.CN讨论区 - 高级XML应用『 XML 与 移动嵌入式开发 』 → [推荐] WML(Wireless Markup Language) 教程[转帖][连载] 查看新帖用户列表

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 24162 个阅读者浏览上一篇主题  刷新本主题   树形显示贴子 浏览下一篇主题
     * 贴子主题: [推荐] WML(Wireless Markup Language) 教程[转帖][连载] 举报  打印  推荐  IE收藏夹 
       本主题类别: 基于XML的移动通信协议    
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客楼主
    发贴心情 [推荐] WML(Wireless Markup Language) 教程[转帖][连载]

    第一部分:从第一个实际应用全面了解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也继承了这种规则,任何地不规范语法都会导致错误。


    [此贴子已经被作者于2008-2-21 2:56:22编辑过]

       收藏   分享  
    顶(0)
      




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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/19 5:23:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客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>

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/19 5:26:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客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申请。

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/19 23:18:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客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>

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/19 23:20:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客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>

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/19 23:28:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客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>。

    相关属性:

    href 超级链接的目标url

    示例:

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

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/21 2:48:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客7
    发贴心情 
    第七部分: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>

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/21 2:51:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客8
    发贴心情 
    第八部分: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>

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/21 2:52:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客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>

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

    [此贴子已经被作者于2008-2-23 15:58:01编辑过]

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/21 2:54:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客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>

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/23 16:01:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客11
    发贴心情 

    第十一部分:文本框控件(Input)

    input name="name" title="title" type="type" value="value" format="specifier" emptyok="false|true" size="n" maxlength="n" tabindex="n"/>

      用来输入文本,除了name属性是必要的,其他参数可选。

    相关属性:

      title,该输入框的标题。
      type,默认值为text,如选择password,则输入的数据显示为*。
      name,指定了用来存储该输入文本的变量名字。
      value,与select的相同属性很相似,name用于存储变量数据,value用于提供缺省值。
      format,用来格式化输入的数据,可用的标记如下,使用时可用“一位数字标记”和“*标记”的形式,前者代表n个标记型字符,如3x,后者代表任意个(小于maxlength属性的值)标记型字符。

      标记 描述

      a   任何符号或者大写字母(不包括数字)
      a   任何符号或者小写字母(不包括数字)
      n   任何数字(不包括符号或者字母)
      x   任何符号、数字或者大写字母(不可改变为小写字母)
      x   任何符号、数字或者小写字母(不可改变为大写字母)
      m   任何符号、数字或者大写字母(可改变为小写字母)或者多个字符,默认为首字大写
      m   任何符号、数字或者小写字母(可改变为大写字母)或者多个字符,默认为首字小写

      maxlength属性,指定了用户可输入的最大字符长度,最大限制为256个字符。
      emptyok属性,表示用户可否不填输入框,默认为false,即要填。
      size属性,输入框显示长度,目前未被支持。
      tabindex属性,类似于在html表单中按tab键后,焦点落在哪个选项上,该值决定了这个选择顺序,数字大的排在后面。目前未被支持。

    示例:

    <card>
    <p>
     first name:
       <input type="text" name="first"/><br/>
     last name:
       <input type="text" name="last"/><br/>
     age:
       <input type="text" name="age" format="3n"/>
    </p>
    </card>

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/23 16:02:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客12
    发贴心情 

    第十二部分:控件组(Fieldset)和复杂示例

    fieldset 提供了一种控件分组的功能,相对于optgroup它的潜在价值更强了,但是需要客户端设备的支持才能获得显示效果。
      相关属性:

      title 标题

      综合示例:

    <?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="fields">
    <p> field type:
     <select title="field type">
      <option onpick="#nested">nested</option>
      <option onpick="#password">password</option>
     </select>
    </p>
    </card>

    <card id="nested">
    <onevent type="onenterbackward">
      <prev/>
    </onevent>
    <do type="accept" label="done">
      <go href="#done"/>
    </do>
    <p>
    <fieldset title="name">
      first name:
        <input title="first" name="fname"/>
      last name:
        <input title="last" name="lname"/>
    </fieldset>
    gender:
    <select title="gender" name="gender">
      <option value="male">male</option>
      <option value="female">female</option>
    </select>
    </p>
    </card>

    <card id="done">
    <p> $fname $lname is a $gender. </p>
    </card>

    <card id="password">
    <onevent type="onenterbackward">
      <prev/>
    </onevent>
    <do type="accept" label="done">
      <go href="#passwd_done"/>
    </do>
    <p> input a password:<br/>
    min 3 chars.
    <input title="password" name="passwd" type="password" format="*m"/>
    </p>
    </card>

    <card id="passwd_done">
      <p> password was $passwd. </p>
    </card>
    </wml>

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/23 16:04:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客13
    发贴心情 

    第十三部分:计时器(timer)

    timer可以用来在用户不进行任何操作的一段时间后,自动执行一个任务,任何激活card页面的任务和用户操作都会启动timer,而任务进行时,timer就停止。每个card只能有一个timer,一个timer只能触发一个任务。语法如下:<timer value="value"/>,value为必选属性,用来设置定时器的定时值,最小单位为0.1秒。

      相关属性:

      value 倒计时的点数,每一单位等于0.1秒。

    示例:

    <?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="first" ontimer="#next">
     <timer value="100"/>
    <p>wait ten seconds</p>
    </card>

    <card id="next">
    <onevent type="timer">
      <go href="#first"/>
    </onevent>
    <timer value="10"/>
    <p>wait one second</p>
    </card>
    </wml>

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/23 16:05:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客14
    发贴心情 

    第十四部分:WML 文本处理

    wml使用xml文档字符集,目前支持unicode 2.0,和hdml不同,wml的所有标签,属性和规定的可接收值必须小写,card的名字和变量也是区分大小写的。和hdml一样,对于连续的空字符,只显示一个空格。标签内属性的值必须用"或者'括起来,属性名,=和值之间不能有空格。对于不成对出现的标签,必须在 > 前加 / ,比如<br/>。

    保留字符

    在对保留字符的处理上也基本相同,对应的取代字符有:

      < <
      > >
      ' &apos;
      " "
      & &
      $ $$
      空格  
      - &shy;

    这里要指出的是在url的传递过程中,用来连接参数的 & 必须转化为 & 。

    空白处理

    wml处理空白内容的方法继承于xml,浏览器会主动忽略所有无意义的空格和属性,连续的空格也会被压缩处理。

    文字处理功能

    wml也提供了一些字符处理功能,不过并非所有手机都支持这些功能。
    <em> 强调
    <strong> 加重
    <i> 斜体字
    <b> 黑体字
    <u> 下划线
    <big> 字体加大一号
    <small> 字体减小一号

    浏览器处理文字链接时通常会自动套用<em>或<strong>功能,但是<i><b><u>必须专门调用,否则不会在任何情况下缺省使用。

    段落

    wml提供两种段落方式wrap或者nowrap,当我们选择了nowrap的时候,我们必须确认客户端设备具有阅读不折行长信息的功能,手机通常是具备这种功能的,而且不同的手机处理方式不一样。

    <p align="left | center | right" mode="wrap | nowrap">

    强行断行

    <br/>
    一定要加一条斜线在后面。在表单中如果有多个<input>或者<select>,其间不要用<br/>。由于wml的链接是菜单模式的,所以多个连续的链接也不需要加<br/>。

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/23 16:07:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客15
    发贴心情 

    第十五部分:表格和图形

    由于浏览终端的限制,wml无法也没有必要提供复杂的表格功能

    1、基本属性(table)

    相关属性:

    title 表格的标题
    align 为表格内的文本和图片设置水平对齐方式,c=center l=left r=right,缺省参数为l
    columns 表格列数目,当该变量设置为0时会发生错误。

    2、表格行(tr)

    tr用来声明一行表格,wml允许空白行的存在,而且空白行不会被浏览器忽略。

    3、表格列(td)

    td元素声明表格中的一个单元格,单元格可以为空白,而且空白单元格不会被浏览器忽。浏览器可以处理多行文本的单元格,单元格分行可以用<img>或<br/>标签。

    nokia 7110不支持多列表格,所以表格应用在一定程度上受到限制。

    示例:

    <?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>
     <table columns="2">
      <tr><td>one</td><td>two</td></tr>
      <tr><td>1</td></tr>
      <tr><td>b</td><td>c<br/>d</td></tr>
     </table>
    </p>
    </card>
    </wml>

    图形  

    wml提供1位黑白bmp图片的操作,标签类似于html,<img alt="text" src="url" localsrc="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手机都支持这些属性。

    示例:

    <img src="http://wap.sina.com.cn/wbmp/logo.wbmp" alt="sina"/>

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/23 16:09:00
     
     enyaxp 帅哥哟,离线,有人找我吗?巨蟹座1984-7-4
      
      
      威望:2
      等级:计算机学士学位(版主)
      文章:350
      积分:2433
      门派:XML.ORG.CN
      注册:2007/12/11

    姓名:(无权查看)
    城市:(无权查看)
    院校:(无权查看)
    给enyaxp发送一个短消息 把enyaxp加入好友 查看enyaxp的个人资料 搜索enyaxp在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给enyaxp  引用回复这个贴子 回复这个贴子 查看enyaxp的博客16
    发贴心情 
    以上教程转至 "WAP之家"

    http://www.wapzj.com/

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

    I'M BACK, NEVER GO AWAY.

    点击查看用户来源及管理<br>发贴IP:*.*.*.* 2008/2/23 16:11:00
     
     GoogleAdSense巨蟹座1984-7-4
      
      
      等级:大一新生
      文章:1
      积分:50
      门派:无门无派
      院校:未填写
      注册:2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 XML 与 移动嵌入式开发 』 的所有贴子 点击这里发送电邮给Google AdSense  访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2024/3/28 12:17:13

    本主题贴数16,分页: [1]

    管理选项修改tag | 锁定 | 解锁 | 提升 | 删除 | 移动 | 固顶 | 总固顶 | 奖励 | 惩罚 | 发布公告
    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    175.781ms