|
发信人: liy79() 整理人: morefeetin(2000-06-03 10:59:16), 站内信件 |
| 手机专用网页设计入门(HDML篇)I
最新手机的上网速度已经达到了14.4Kbps。 上网手机的数量会不会超过浏览器的数量？ 本文主要介绍如何编写包含WAP协议的手机(以下的手机均指该类手机)所专用 的网页，从普通浏览器的角度来介绍，以便理解，同时需要读者有一定的HTML知 识。 １。手机上网的过程 普通浏览器上网过程 浏览器<--->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页面。 ２。手机浏览器的特点 *屏幕小，一屏所容字数不多(支持GB2312字符集)，所以要求信息尽量短。 *图形方面，目前只支持1位bmp图，即黑白的。 *输入字符的键盘为手机的数字键。(目前国内开发的一种嵌入式中文输入法有特 捷T9，王颂平的笔顺码CKE等)。用手机上的左右键控制来回，手机上的CLR(DELE TE)键清除当前字符。 *只有垂直的滚屏，用手机上的上下键控制， *屏幕上如果有选单，用上下键和数字键控制。 *手机上的HOME键相当于浏览器上的HOME键。 *浏览器屏幕分为内容显示区和软按钮(Softkey，可看作普通web页面上的按 钮可设置1-2个，按钮显示名称的字符受手机限制)区，这两个按钮分别对应了手 机上屏幕下方的两个按钮，称为ACCEPT和SOFT1键。对应于ACCEPT，默认的Softk ey显示为ok。 *手机上只有BACK键，没有普通浏览器的FORWARD键，要实现FORWARD功能只有 重新返回菜单进行。手机能存储访问过的页面(这里称为CARD)的历史记录,用堆栈 的形式保存，BACK键的功能相当于退栈。 *手机还能存储用户的选择和变量等数据。 ３。显示文本 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页面内的<met a 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里的 ，第一个<ACTION>相当于<A href="#card2">，即跳转到本DECK的名为card2的 CARD，(HTML里是本页的card2标记处)，显然DEST相当于HTML里的HREF属性， TYPE指定了当按下ACCEPT键时，屏幕就跳转到CARD2。插一句，同样可以用http: //x.com/a.hdml#card2的形式直接转到名为card2的CARD。第二个<ACTION>相当于 ，当屏幕跳转到CARD2后再按ACCEPT键则跳转到另一 个DECK。(HTML里是另一页)。HTML里用鼠标点击发生跳转，而HDML里根据TYPE所 指定的值来触发跳转。TYPE可接受的值如下(实际上是对用的键盘，LABLE指Soft key在屏幕上显示的名称)： 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的。 ４。显示图片 持的。 test3.hdml ----------- <HDML VERSION=3.0> <DISPLAY> <!-- Here is 1bit BMP -->  <br>
<-- Here is buil-in icon --> <IMG ICON="smileyface" ALT=":-)" > </DISPLAY> </HDML> 径；这里多了个ICON，它指定了ROM里预先存储的图片的名字，如果ROM里没有则 到UP.Link Sever里找，有175个图标可用，具体的名字在相关文档里有。这里还 出现了HDML的注释标签，和HTML里的相同，<!-- comment_text -->，也可以用< -- comment_text -->。 ５。显示选单 这里的选单功能可以看成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层所定义的动作。 (未完待续) -- * * * * * * * 话不嫌多，知心就好 * {~._.~} * 即刻 ＣＡＬＬ ＩＮ * ( Y ) * ICQ:37754773 * ()~*~() * 中文网址：星际争霸-梦幻之战 * (_)-(_) * http://starcraft.my163.net ※ 来源:．月光软件站 http://www.moon-soft.com．[FROM: 202.99.167.125] |
|
[关闭][返回] |