维普资讯 http://www.cqvip.com 计算机时代２００８年第１０期 ・６１・ Ｗｅ ｂ应用程序用户接口设计和应用 秦学礼 （浙江育英职业技术学院信息技术系，浙江杭 ’Ｈ ３１００１８） 摘要：阐述了Ｗｅｂ应用程序的用户接口技术和实现方法，给出了应用的实例。 关键词：Ｗｅｂ浏览器；Ｗｅｂ应用程序；单向用户接口；双向用户接口 ０引言 创建辅助窗口主要是通过Ｗｅｂ浏览器文档对象模型 Ｗｅｂ应用程序中的用户接口是指用户的操作界面。实际应 （ＤＯＭ）的Ｗｉｎｄｏｗｓ对象提供的Ｏｐｅｎ方法来实现的。以ＩＥ为 用中，用户是通过Ｗｅｂ浏览器访问Ｗｅｂ应用程序。根据Ｗｅｂ 例，Ｗｉｎｄｏｗｓ对象的Ｏｐｅｎ方法的语法如下： 应用程序与用户操作之间的关系，用户接口分为两大类：单向 Ｗｉｎｄｏｗ．ｏｐｅｎ（ｕｒｌ，ｗｉｎｄｏｗＮａｍｅ，ｗｉｎｄｏｗＦｅａｔｕｒｅｓ，ｗｉｄｔｈ，ｈｅｉｇｈｔ） 用户接口与双向用户接口。单向用户接口主要包括辅助窗口、 其中，ｕｒｌ用于指定辅助窗口中显示的页面；ｗｉｎｄｏｗＮａｍｅ 层和提示窗口，双向用户接ＶＩ主要包括对话框和表单。 表示辅助窗口的名称；ｗｉｎｄｏｗＦｅａｔｕｒｅｓ用于设置辅助窗口的特 下一代Ｗｅｂ应用程序是以动态、互动、开放和高度灵活为特 征，比如显示位置、是否出现滚动条等；ｗｉｄｔｈ和ｈｅｉｇｈｔ表示窗 征的，不仅超越了经典的ｗｅｂ应用程序的功能，而且还超过了桌 口的宽度和高度。 面应用程序的功能。ｗｅｂ应用程序或者互联网应用程序具有高 也可以用Ｊａｖａｓｃｒｉｐｔ（ＶＢｓｃｒｉｐｔ）脚本创建辅助窗口，如使用 度的互动性，同桌面软件一样要有容易操作的用户界面。 以下的脚本代码实现创建辅助窗口。 此研究和设计有效的用户接口对Ｗｅｂ应用程序设计是 ｆｕｎｃｔｉｏｎ ｏｐｅｎＳｃ ｒｉｐｔ（ｕ ｒＩ，ｗｉｄｔｈ，ｈｅｉｇｈｔ） 非常有意义的。 （ｖａｒ Ｗｉｎ＝ｗｉｎｄｏｗ．ｏｐｅｎ（ｕｒｌ，＂ｏｐｅｎＳｃｒｉｐｔ＂，＇ｗｉｄｔｈ＝’＋ｗｉｄｔｈ＋， ｈｅｉｇｈｔ＝’＋ｈｅｉｇｈｔ＋，ｒｅｓｉｚａｂｌｅ＝ｌ，ｓｃｒｏｌｌｂａｒｓ＝ｙｅｓ，ｍｅｎｕｂａｒ＝ｎｏ， １单向用户接口 ｓｔａｔｕｓ＝ｙｅｓ’）： 通过单向用户接口，Ｗｅｂ应用程序只能将信息传递给用 ） 户，不理会用户的响应。Ｗｅｂ应用程序中典型的单向用户接口 代码中调用打开窗口的语句： 包括辅助窗口、层和提示窗口。 ｊａＶａｓｃ ｐｔ：ｏｐｅｎＳｃｒｉｐｔ（’ｂｕｙ．ａｓｐ’，４６０，３００） １．１辅助窗口设计 ｂｕｙ．ａｓｐ是生成辅助窗口页面的ＡＳＰ程序（运行在服务器 辅助窗口是指页面中出现的其它Ｗｅｂ浏览器窗口。辅助 端），４６０，３００是窗口的宽度和高度。 窗口一般用于显示特定提示信息，比如紧急通知、注意事项以 ｂｕｙ．ａｓｐ程序中显示提示信息的语句片段： 及宣传广告等内容，它广泛应用于各种Ｗｅｂ应用程序中。图ｌ ｉｆ ｓｅｓｓｉｏｎ（’’ｕｓｅｒ ｎａｍｅ”、＝…。ｔｈｅｎ 是一个Ｗｅｂ应用程序（电子商务系统）中的信息提示窗口。 ｒｅｓｐｏｎｓｅ．ｗｒｉｔｅ“＜ｂｒ＞１．你尚未登录！请登录后再订购本站商品ｌ＞” ｒｅｓｐｏｎｓｅ．ｗｒｉｔｅ”＜ｂｒ＞２．第一次来本站，请先注册会员（免费）！＜ｂｒ＞” ｅｎｄ ｉｆ ｉｆ ｔｒｉｍ（ｒｅｑｕｅｓｔ（”ｈｗ＿ｉｄ”））＿Ｉ…ｔｈｅｎ ｒｅｓｐｏｎｓｅ．ｗｒｉｔｅ”没有此货物” ｒｅｓｐｏｎｓｅ ｅｎｄ ｅｎｄ ｉｆ 在ＡＳＰ程序设计时，为了减轻服务器的负担，也可以使用 ＶＢＳｃｒｉｐｔ脚本运行在浏览器的ＭｓｇＢｏｘ０函数创建辅助窗口，如 ●◆●◆◆◆Ｉ◆◆◆Ｉ◆◆◆ ＩＩ●●●Ｉｌｉ◆◆◆ＩＩ◆◆◆Ｉ◆●◆ｌＩｌ◆◆◆◆◆◆◆◆●◆◆◆◆●●●◆ｌｍ◆◆◆●●● ５结束语 参考文献： 招聘网站现已投入应用，运行情况良好，具有高并发和高 【１ｌ毛立，须文波．基于ＲＵＰ的Ｊ２ＥＥ应用建模研究【Ｊ】计算机工程与设 负载性，能很好满足大型企事业单位人事招聘管理和决策需 计．２００７．２ 【２】周莉，陆暑羹，魏建香分布式人口信息系统得架构及实统［Ｊ】．计算机应 要。通过灵活的系统设置，系统能适应可能发生的各种复杂情 用．２００７．２． 况，具有灵活的应变能力和适用性。系统通用性强，易于维护， 【３】ｈｔｔｐ：／／ｗｗｗ．ｓｅｒｖｉｃｅ—ａｒｃｈｉｔｅｃｔｕｒｅ．ｃｏｍ／ｗｅｂ—ｓｅｒｖｉｃｅｓ／ａｒｔｉｃｌｅｓ／ｓｅｒ一 并且很容易进行扩展。 ｎ。 ｄ＿ №ｃｔｕｒｅ—ｓｏａ—ｄ。 ｈ ｍ ，２０ｏ５・ 维普资讯 http://www.cqvip.com ・６２・ Ｃｏｍｐｕｔｅｒ Ｅｒａ Ｎｏ．１ ０ ２００８ 下面的代码段。 ＜ＳＣＲＩＰＴ ＬＡＮＧＵＡＧＥ＝。’ＶＢＳｃｒｉｐｔ”＞ ＜！一ＭｓｇＢｏｘ”你尚未登录！请登录后再订购本站商品”． ｖｂｏｋｃａｎｃｅｌ一＞ ＜／ＳＣＲｌＰＴ＞ 这段代码在客户端运行，其生成的窗口如图２所示。 傣 圜ｌ—豳 黪 ｊ黼 １ 蠹蠢 厦匿 ；。．叠羞 蠢‘ ． 羞 囊 。ｉ薹耋 。ｊ 图２ ＭｓｇＢｏｘＯ函数创建辅助窗口 辅助窗口设计主要包括以下基本步骤： （１）设计辅助窗口的创建时机，通常采用“事件驱动”机制。 （２）设计辅助窗口的展现方式，例如弹出，逐渐移入屏幕或 者弹出后逐渐消失等。 （３）设计辅助窗口的特征和内容。 借助辅助窗口，可以在不改变Ｗｅｂ应用程序原有结构的 基础上及时向用户传递新的信息，为Ｗｅｂ应用程序设计带来 了很大的灵活性。但辅助窗口也有局限性。首先辅助窗口是相 互的窗口，无法实现窗口嵌套；其次，虽然可以控制辅助窗 口的外部特征，但是辅助窗口始终具有窗口的一些基本特征如 边框、标题栏等。 辅助窗口的创建时机一般用“事件驱动”来控制，一旦发生 某个具体事件，就创建辅助窗口，ＡＳＰ（ＡＳＰ．ＮＥＴ）辅助窗口常用 的事件参看表ｌ。 表ｌ ＡＳＰ（ＡＳＰ．ＮＥＴ）辅助窗口常用的事件 事件类型 事件名称 功能说明 ｏｎＬｏａｄ 浏览器打开页面时触发 系统事件 ｏｎＵｎｌｏａｄ 浏览器关闭页面时触发 ｏｉｌＣｌｉｃｋ 鼠标单击对象时触发 鼠标事件 ｏｎＭｏｕｓｅＯｖｅｒ 鼠标移至对象上方时触发 键盘事件 ｏｎＫｅｖＰｒｅｓｓ 按下某一按键时触发 １＿２滚动的辅助窗口 （１）静态滚动的辅助窗口 静态滚动的辅助窗口显示的滚动信息是固定的，不能随用 户的需求和特定的需要而改变，要修改则要修改页面程序。页 面的滚动字幕大多是使用这类技术实现的，如下面的程序段实 现了一个向上滚动的字幕。 ＜ｍａｒｑｕｅｅ ｄｉｒｅｃｔｉｏｎ＝’’ｕＤ” 欢迎光临一本站！请大家多提您宝贵的意见！ ＜／ｍａｒｑｕｅｅ＞ （２）动态滚动的辅助窗口 动态滚动的辅助窗口显示的滚动信息不是固定不变的，而 是根据用户的需求和页面的状态而变化。实现动态滚动信息最 有力的支持离不开数据库技术。下面的程序片断实现了动态向 上滚动字幕。 ＜ｔｄ ｈｅｉｇｈｔ＝”１ ８”ｃｌａｓｓ＝。’ｚｉ２”ｗｉｄｔｈ＝’’１ ８６”＞ ＜ｍａｒｑｕｅｅ ｂｅｈａｖｉｏｒ＝ｌｏｏｐ ｄｉｒｅｃｔｉｏｎ＝ｕｐ ｉｄ＝ｎｅｗｓ ｏｎＭｏｕｓｅＯｕｔ＝ｓｔａｒｔ（） ｏｎＭｏｕｓｅＯｖｅｒ＝ｓｔｏｐ（）ｓｃｒｏｌｌａｍｏｕｎｔ＝ｌ ｓｃｒｏｌｌｄｅｌａｙ＝３０ ｓｔｙｌｅ＝”ＦＯＮＴ—ＷＥＩＧＨＴ：ｎｏｒｍａｌ；ＨＥＩＧＨＴ：１ ３０ｐｘ；ＬＥＦＴ：５ｐｘ； ＭＡＲＧＩＮ—ＬＥＦＴ：１ ｐｘ；ＴＥＸＴ—ＡＬＩＧＮ：ｌｅｆｔ；ＴＯＰ：１ ｐｘ；ＷＩＤＴＨ： １７０ｐｘ”＞ ＜％ ｓｑｌ＝”ｓｅｌｅｃｔ ｍｓｇ ｆｒｏｍ ｐｕｂ ｏｒｄｅｒ ｂｙ ｉｄ ｄｅｓｃ” ’从数据表ｐｕｂ中取出信息 ｒｓ．ｏｐｅｎ ｓｑｌ，ｃｏｎｎ，３，３ ＝ｒｓ（”ｍｓｇ”） ｒｓ．ｃｌｏｓｅ ｓｅｔ ｒｓｌ＝ｎｏｔｈｉｎｇ ％＞ ＜／ｍａｒｑｕｅｅ＞＜／ｔｄ＞ 程序中，＜ｍａｒｑｕｅｅ＞的属性ｂｅｈａｖｉｏｒ＝ｌｏｏｐ实现了循环显 示，ｏｎＭｏｕｓｅＯｖｅｒ－＝ｓｔｏｐ０表示鼠标停留在滚动的字幕时停止滚 动，ｏｎＭｏｕｓｅＯｕｔ＝ｓｔａｒｔ０表示鼠标离开滚动的字幕时开始滚动； ＡＳＰ（ＡＳＰ．ＮＥＴ）的代码部分实现了从数据表中取出信息并显示 在页面上。 采用这样的技术可以实现远程维护，及时更新滚动信息而 不必修改页面程序。 ２双向用户接口 双向用户接口与单向用户接口不同，通过双向接口用户不 仅可以接受Ｗｅｂ应用程序发出的信息，而且也可以向Ｗｅｂ应 用程序传递自己的信息。也就是说，双向接口可以为Ｗｅｂ应用 程序增加“交互性”。Ｗｅｂ应用程序中典型的双向用户接口包括 对话框和表单（Ｆｏｒｍ）。 （１）对话框设计 对话框主要用于在客户端提供与用户的交互界面。常见的 对话框主要包括确认对话框和提示对话框。在Ｗｅｂ浏览器中， 确认对话框可以用Ｗｉｎｄｏｗ对象的ｃｏｎｆｎ－ｍ方法创建，提示对 话框则可以用Ｐｒｏｍｐｔ方法创建。如果使用ＶＢＳｃ ｔ，还可以用 ｉｎＰｕｔｂｏｘ函数来创建提示对话框。 （２）表单设计 表单是Ｗｅｂ应用程序中最常用的双向用户接口，也是最 重要的用户接口。通过表单，用户不仅可以向服务器提交一些 简单文本数据，而且还可以提交图片、文件等大量数据信息。处 理并响应表单输入的数据正是Ｗｅｂ服务端程序最主要的任务 之一。 ＨＴＭＬ提供了＜Ｆｏｒｍ＞标记用于创建表单。表单由一系列 的表单域构成，每一种表单域为用户提供输入信息的一种途 径。掌握ＨＴＭＬ表单设计标记是表单设计的基础。 表单没计主要包括以下几个基本步骤： ①创建表单，指定表单编码方法、提交方法以及表单数据 处理程序。 维普资讯 http://www.cqvip.com 计算机时代２００８年第ｌＯ期 ②没计表单域。 ③编写表单验证程序。 ④编写表单数据处理程序。 表单编码方法由＜ＦＯＲＭ＞标记的ＥＮＣＴＹＰＥ属性指定， 表单的默认编码方法为ａｐｐｌｉｃａｔｉｏｎ／ｘ—ＷＷＷ—ｆｏｒｍ—ｕｒｌｅｎｃｏｄｅｄ， ・６３・ 用，其基本特点是表单中的某一域的内容来源于数据库中的 字段。 基于数据库的动态表单的设计主要包括以下关键步骤： ①设计数据库，没定表单域对应的字段。 ②查询数据库，返回相应的记录集。 ③将返回的记录集赋予某一表单字段。 ④将表单返回浏览器并显示。 （２）基于用户差异的动态表单 基于用户差异的动态表单是指服务器根据用户身份、权 即ＵＲＬ编码。如果表单包含文件域或者图像域，则必须使用 ｍｕｌｔｉｐａｒｔｆｏｒｍ—ｄａｔａ编码方法。表单提交方法主要有ＧＥＴ和 ＰＯＳＴ。表单数据处理程序是指收集处理表单数据的服务器程 序，它由Ａｃｔｉｏｎ属性指定。使用ａｓｐ技术定义表单的语法格式 如下： ＜ｆｏｒｍ ｎａｍｅ＝”ｆｏｒｍ １．．ｍｅｔｈｏｄ＝”ｐｏｓｔ”ａｃｔｉｏｎ＝”ｐｒｏｄｕｃｔ ａｓｐ”＞ 参数：ｎａｍｅ是表单的名称，ｍｅｔｈｏｄ是表单提交方法（有 ＧＥＴ和ＰＯＳＴ二种），ａｃｔｉｏｎ是指收集处理表单数据的服务器程 序，ｐｒｏｄｕｃｔ．ａｓｐ是一个运行在服务器端的ＡＳＰ程序。 ３动态表单 动态表单是指由Ｗｅｂ服务器动态创建的表单。动态表单 在Ｗｅｂ应用程序中具有十分重要的作用，它是Ｗｅｂ服务器与 用户能够进行多重“会话”的基础。 先举一个例子来说明动态表单的作用。在某一电子商务系 统中，用户首先通过一张普通表单，向服务器提供基本的个人 需求信息，服务器根据用户提交的信息向用户发送特定的订购 表单，用户填写该表单后再提交给服务器，服务器处理用户的 订购信息后返回处理结果，整个过程结束。在这一过程中，用户 与服务器进行了两次会话，其中“汀购表单”就是由服务器产生 的动态表单。该表单事先在服务器中并不存在，它是根据用户 的需求即时产生的，而且用户输入的信息不同，产生的订购表 单也不同。如图３是某电子商务网站根据用户需求动态生成的 购物车表单。 ■ ■ｌⅢ＾１，㈣ ——ｇ嚣ｉ蔑蕊甄—— 溺—疆爨掰噩妻－匿蕊戳甄 ＿ 鬻ｉ ｔ ‘ ｊ １ ２００元 １ ｖ ｌ ｉ 《ｌ 誓查看购物车ｌ 滴空购钫车 崆＃ 每付款 ■戮■■翱高强戳援潮匿 瓣－ ｔ ■■嘲Ｂ穗露蕊一～一掘糊■ 瞄ｇｌ ；目＿ ０一Ｌｉ：出？ｌ鳓书 １雏茏线 ８５０元 ｌ ８５。戈ｉ ２６山地 ３００ ｌ ｓ∞元ｌ ｊ捌黼ｌ 总计 、 Ｊ 图３动态生成的购物车表单 服务器创建动态表单可以分为两类：基于数据库的动态表 单和基于用户差异的动态表单。 （１）基奇数据库的动态表单 基于数据库的动态表单在Ｗｅｂ应用程序中有广泛的应 限的不同而创建不同的表单。比如，具有权限Ａ的用户登录 后，浏览器中出现的表单就为Ｆｏｒｍ Ａ，而具有权限Ｂ的用户 登录后，浏览器中出现的表单就为Ｆｏｒｍ Ｂ。这种分类处理的 思想不仅为用户操作带来了方便，而且也有助于提高系统的 安全性能。因为，具有权限Ｂ的用户不仅不能操作自己权限之 外的表单项目，而且连其他权限用户能够操作什么项目也不 知道。 基于用户差异的动态表单设计主要包括以下关键步骤： ①确定用户分类标准。 ②确定表单分类创建规则。 ③获取用户身份。 ④根据用户的具体身份创建相应的表单。 ⑤将表单发送到用户端的浏览器。 ４用户接口设计原则 无论是单向用户接口还是双向用户接口，其主要用途都是 实现Ｗｅｂ应用程序与用户之间的互动交流。因此，用户接口设 计必须遵循以下原则： （１）功能明确 用户接口设计的第一步就是确定接口在信息传递、用户操 作控制等方面的具体功能，然后再选择正确的接口类型及其实 现方案。 （２）操作简单 用户接口设计必须考虑用户的操作习惯。比如，如果需要 对用户的操作进行特定的约束，那么就必须为用户提供明确的 操作说明。 （３）健壮性强 用户接口的健壮性有两层含义：第一，设计的用户接口要 能够适应不同客户端环境，比如不同的Ｗｅｂ浏览器软件；第 二，通过用户接口收集的数据必须可靠、有效、能够处理，并且 不会对服务器造成安全『口Ｊ题。 参考文献： 【１】秦学礼，邓松如Ｗｅｂ应用技术体系结构和研究动向【Ｊｊ．计算机时代， ２００６．５ ［２】秦学礼，邓松如Ｗｅｂ应用的发展及研究动向【Ｊ】数字化工，２００４ １１． ［３】秦学礼Ｗｅｂ应用程序设计技术一ＡＳＰ ＮＥＴ【Ｍ】．清华太学出版社， ２００６ ［４】Ｂｏｒｌａｎｄ Ｓｏｆｔｗａｒｅ Ｃｏｒｐｏｒａｔｉｏｎ．Ｗｅｂ Ａｐｐｌｉｃａｔｉｏｎ Ｄｅｖｅｌｏｐｅｒ Ｇｕｉｄｅ 【Ｚ Ｊ＿ＶＥＲｓ ０Ｎ ５，２００１．
