手机专用网页设计入门
手机专用网页设计入门
最新手机的上网速度已经达到了14.4Kbps，上网手机的数量会不会超过浏览器的数量？本文主要介绍如何编写包含WAP协议的手机(以下的手机均指该类手机)所专用的网页，从普通浏览器的角度来介绍，以便理解，同时需要读者有一定的HTML知识。
1.手机上网的过程
普通浏览器上网过程：
浏览器<--->Web服务器
手机上网过程：
手机<--->WAP网关(UP.Link Server)<--->集成HDML,WML的Web服务器
* UP指Unwired Planet公司，其UP.Phone浏览器为手机浏览器的事实标准，以下内容都基于该标准。
*普通web页面用HTML描述，目前手机页面可以用HDML和WML两种语言来描述，它们本质上是用XML 1.0来定义的。本文主要讲述HDML，由于其和HTML有相似，所以通过比较来说明问题，可能在用词上有不妥的地方，但作为入门的文章，希望不必深究。HDML的最新版本为4.0
Beta，这里讲3.0。
*请到www.phone.com下在UP.SDK，其中包括了一个UP.Phone手机浏览器的模拟器，可以像真的手机一样上网(另外还包括了Perl,
C, COM等库，这里不谈)。在学习阶段，可以用它来显示我们所做的页面，这里就把手机的上网过程简化为 手机浏览器<---->HDML页面。
2.手机浏览器的特点
*屏幕小，一屏所容字数不多(支持GB2312字符集)，所以要求信息尽量短。
*图形方面，目前只支持1位bmp图，即黑白的。
*输入字符的键盘为手机的数字键。(目前国内开发的一种嵌入式中文输入法有特捷T9，王颂平的笔顺码CKE等)。用手机上的左右键控制来回，手机上的CLR(DELETE)键清除当前字符。
*只有垂直的滚屏，用手机上的上下键控制。
*屏幕上如果有选单，用上下键和数字键控制。
*手机上的HOME键相当于浏览器上的HOME键。
*浏览器屏幕分为内容显示区和软按钮(Softkey，可看作普通web页面上的按钮可设置1-2个，按钮显示名称的字符受手机限制)区，这两个按钮分别对应了手机上屏幕下方的两个按钮，称为ACCEPT和SOFT1键。对应于ACCEPT，默认的Softkey显示为ok。
*手机上只有BACK键，没有普通浏览器的FORWARD键，要实现FORWARD功能只有重新返回菜单进行。手机能存储访问过的页面(这里称为CARD)的历史记录,用堆栈的形式保存，BACK键的功能相当于退栈。
*手机还能存储用户的选择和变量等数据。
3.显示文本
HDML和HTML在语法上有许多相似的地方，用<标签名 属性=值>的TAG形式来格式化页面。TAG是不区分大小写的，而以后谈及的变量是区分大小写的。HDML有着和HTML统一的保留字符显示方式：
< <
> >
" "
& &
$ &dol;
任何ASCII字符 &#nn; (其中nn是ASCII代码)
熟悉HTML的话用不着记。同样对于文本的处理也是一样，忽略空格、回车等控字符，用以下方式达到空格、回车等目的。
空格
<TAB> 类似于一般意义上的TAB键效果
<BR> 换行
<LINE> 换行，一行太长时，屏幕自动折行，新的一行忽略原文中的空字符
<WRAP> 换行，一行太长时，屏幕自动折行，原文中的空字符仍然显示
另外对齐的标签有：
<RIGHT> 该行文字向右对齐
<CENTER> 该行文字中间对齐
用文本编辑器编辑以下文件，存为c:test1.hdml。(我用复杂的路径时失败了，所以只能用最简单的路径)
Content-type: text/x-hdml; charset=GB2312
<HDML VERSION="3.0">
<DISPLAY name="card1">
<center>This is a test.<br>1234567890<<tab>1234567890<line>xxxxx
</DISPLAY>
</HDML>
在手机浏览器的地址栏输入file://c:/test1.hdml(注意这里是调试环境，在实际应用中可能是http://updev. uplanet.com/dev/hdml/devhome3.hdml这种形式)，回车后页面就会出现在浏览器的显示区了。刷新按F9。
对上述程序进行一下说明：
第一行 Content...指定字符集(由于该模拟器在设置中文字体后出现了问题，所以这里只用英文，但不代表不能用中文字符)，类似于普通web页面内的<meta
http-equiv="Content-Type" content="text/html; charset=gb2312">，只是写在了最开头。
第二行类似于HTML的<HTML>，这里要指出它不光说明该文件是HDML文件，重要的是指明<hdml></hdml>间是浏览器和WEB服务器连接一次所传递的信息，相当于普通浏览器的页面，这里称为DECK。
第三行可以看作HTML里的<BODY>，指明一页可视的内容，和HTML不同的是，一个DECK可以包含多个页，每页用<DISPLAY></DISPLAY>包括，而HTML只有一个<BODY>，正如前面所指出的，一次连接所传递的数据可包括多个页，这里的页专称为CARD，CARD的类型有三种：纯文本图形显示、选单(相当于HTML的FORM)和指执行一个action不显示内容(相当于cgi)。
<HDML>和<DISPLAY>里包含了可选的属性，和HTML一样，属性的值如果包含保留字符先要escape，包含空格是要用""或者''括起来。HDML的标签不多，但属性很多，作为入门文章，这里不做详细介绍，具体可参见SDK包含的文档。
第三行是CARD显示的内容，如果一屏显示不下，屏幕上会有提示，提示符号根据手机的不同，可能是>或者|。以上就是HDML文件的基本形式了。下面的例子用来说明多个CARD的跳转。
test2.hdml
------------
<HDML VERSION="3.0">
<DISPLAY name="card1">
<ACTION TYPE=ACCEPT TASK=GO DEST=#card2>
This is CARD1
</DISPLAY>
<DISPLAY name="card2">
<ACTION TYPE=ACCEPT TASK=GOSUB DEST=http://devgate2.uplanet.com/c.hdml>
This is CARD2
</DISPLAY>
</HDML>
这里有2个CARD，并多了<ACTION>标签，这里的<ACTION>标签相当于HTML里的<A>，第一个<ACTION>相当于<A
href="#card2">，即跳转到本DECK的名为card2的CARD，(HTML里是本页的card2标记处)，显然DEST相当于HTML里<A>的HREF属性，TYPE指定了当按下ACCEPT键时，屏幕就跳转到CARD2。插一句，同样可以用http://x.com/a.hdml#card2的形式直接转到名为card2的CARD。第二个<ACTION>相当于<A
href="http://xxx.com/">，当屏幕跳转到CARD2后再按ACCEPT键则跳转到另一个DECK。(HTML里是另一页)。HTML里用鼠标点击发生跳转，而HDML里根据TYPE所指定的值来触发跳转。TYPE可接受的值如下(实际上是对用的键盘，LABLE指Softkey在屏幕上显示的名称)：
ACCEPT (LABEL 可选) ［显示上一页］
HELP (LABEL 需要) ［如果手机内置卡里有当前页的帮助信息则显示］
PREV (LABEL 忽略) ［显示上一页，如没有上页则取消当前activity］
SOFT1 (LABEL 需要) ［无效］
SOFT2 (LABEL 需要) ［无效］
SEND (LABEL 需要) ［无效］
DELETE (LABEL 需要) ［如果在可输入文本的CARD中，起删除作用］
此外，TASK的意思以后会提到，这里可以看成类似于HTML中FORM的ACTION属性，制定了将要执行的动作，上述按键有默认的TASK，如以上［］中所述。
另外要说明的是CARD(<DISPLAY>)里和DECK(<HDML>)里都可以定义<ACTION>，如果同时定义并且触发键相同的话，当前的CARD覆盖掉DECK的。
4.显示图片
<IMG>和HTML里的用法完全一样，只是图片是1位BMP图，不过还是需要手机支持的。
test3.hdml
-----------
<HDML VERSION=3.0>
<DISPLAY>
<!-- Here is 1bit BMP -->
<IMG SRC="http://x.com/a.bmp" ALT="bmp" ><br>
<-- Here is buil-in icon -->
<IMG ICON="smileyface" ALT=":-)" >
</DISPLAY>
</HDML>
<IMG>的ALT属性用于图片无法显示时；SRC和HTML的意思一样，指定图片的路径；这里多了个ICON，它指定了ROM里预先存储的图片的名字，如果ROM里没有则到UP.Link
Sever里找，有175个图标可用，具体的名字在相关文档里有。这里还出现了HDML的注释标签，和HTML里的相同，<!-- comment_text
-->，也可以用<-- comment_text -->。
5.显示选单
这里的选单功能可以看成HTML里的select单选表单，样子更像是一组竖排的单选按钮表单。用手机上的上下键进行选择，然后(默认的)按ACCEPT键确定，确定后，浏览器按照TASK所指定的任务去执行。
test4.hdml
-------------
<HDML VERSION="3.0">
<ACTION TYPE=ACCEPT TASK=GO DEST=#other_card>
<CHOICE>
<CE TASK=GO DEST=#card1>Your Choise1...
<CE TASK=GO DEST=#card2>Your Choise2...
<CE TASK=GO DEST=#card3>Your Choise3...
</CHOICE>
</HDML>
上面的例子中<CHOICE>和<CE>相当于HTML里的<SELECT>和<OPTION>的功能，注意<CE>里加入的属性，在HTML里，一般<OPTION>没有直接的动作属性。这里要指出的是，上例中DECK层所定义的<ACTION>不起作用，因为单选单定义的TASK优先于DECK和CARD层所定义的动作。
6.行为(ACTIVITY)
HDML的应用都是围绕ACTIVITY来组织的，ACTIVITY于用户想要执行的TASK有关，每个ACTIVITY可以包含多个步骤(STEP)，ACTIVITY和STEP的概念实际上是针对手机的特殊性所提出来的，其实no
new idea，可以这样理解，例如在邮件服务中可能有以下ACTIVITY，如编辑新邮件，查看收件箱等，而编辑新邮件这个ACTIVITY可能要通过一些步骤STEP来完成，如写入收件人地址，邮件主题和邮件内容。
在HDML里，一般一个STEP就对应了一个CARD，例如在查询股票价格的ACTIVITY中，第一个CARD可以是用来输入股票代码，第二个CARD则用来显示股票价格，两个CARD间用以前提到的中的TASK=GO来连接。
ACTIVITY可以多层嵌套，例如在查看收件箱的过程中可以进行删除邮件的操作，此时用TASK=GOSUB来转到删除邮件ACTIVITY的第一个STEP的CARD。在嵌套ACTIVITY中，手机会保存ACTIVITY的状态，即遍变量和CARD的历史记录，用户如果取消了当前的ACTIVITY，则返回嵌套它的那个ACTIVITY的CARD。
7.变量
变量的作用类似于HTML表单元素中VALUE的作用，HDML中用户可以定义变量名，变量名是区分大小写的，字符$, <, >, =,
/, \, &, *, #不能用做变量名。建议变量名尽量短以节省存储空间。变量的应用范围是定义该变量的ACTIVITY中。
1) 变量的设置及引用
test5.hdml
-------------
VARS=var1=string+1&var2=value+2>
Press OK to view variable values.
$var1
$var2
在第一个CARD的中定义了2个变量var1和var2，VARS属性定义变量的形式为VARS=变量名1=值&变量名2=值&...，注意上例中定义了两个字符串，+号代表了空格，这和一般URL的参数定义一致。在CARD2中用$变量名的形式来引用变量。变量的具体引用方法有以下三种，主要区别在于是否将URL传递所要求的字符转意(escape)，如同javascript的escape()函数。
$变量名 或者 $(变量名) 根据URL的需要escape字符串
$(变量名:esc) escape字符串
$(变量名:noesc) 不escape字符串
2) 获得用户的输入
test6.hdml
-----------
Your name:
Hello $usrName
相当于HTML表单中TEXT类型的文本框，用来取得用户的输入数据，该数据将存储在KEY所指定的变量名中，NAME属性指定的是CARD的名字，以便其他CARD引用。其他比较常用的属性还有DEFAULT，用来定义默认值，NOECHO=TRUE，则用*来替代输入的字符。
这里补充一下选单中如何获得值，
Choice 1
Choice 2
Choice 3
的KEY属性指定了接收的VALUE值的变量，IKEY所指定的变量接收被选选项的序号。同样，可以用DEFAULT和IDEFAULT来指定默认值。
3) 在ACTIVITY间传递参数
* ACTIVITY 1嵌套ACTIVITY 2，ACTIVITY 1可通过的形式将变量varname传递给ACTIVITY 2。
* ACTIVITY 1嵌套ACTIVITY 2，ACTIVITY 1可以用RECEIVE属性指定变量来接受从ACTIVITY 2返回过来的变量值，而ACTIVITY
2用RETVALS属性来将这些变量值返回给ACTIVITY 1。形式为，如果不要var1，可用RECEIVE=;var2，RETVALS的用法类似，。
* ACTIVITY 1嵌套ACTIVITY 2，ACTIVITY 2可以用CLEAR属性，形式为来释放ACTIVITY 1的变量。
这里总结一下TASK属性(一般在和中)的可设定值：
GO 转到DEST指定的URL或者CARD
GOSUB 转到DEST指定的嵌套ACTIVITY
RETURN 嵌套ACTIVITY返回调用它的CARD
CANCEL 取消当前的ACTIVITY
PREV 返回前一个CARD
CALL 不要忘了这是手机，拨打NUMBER属性指定的电话
NOOP 不做什么
8.CGI
这里只是简单提一下HDML和CGI相关的一些内容，总的来说其总是符合HTTP协议以及CGI标准的。在和中可以通过METHOD属性指定传递方式为GET或者POST，用POSTDATA指定要POST的数据。CGI程序在接收时可按照标准的方式获得数据，在输出时将Content-type:指定为text/x-hdml。UP.SDK提供了详细的技术资料和程序库，这里就不提了。
以上的内容只是入门部分，注意在讲述过程中忽略了UP.Link Server部分，在开发交互式程序中要考虑该部分。
（佚 名）