Adobe Flash和ASP支持下家教服务系统开发

　　摘要：采用RIA技术之一Adobe Flash, 配合其他服务器端应用程序 (如ASP) , 实现了一个家教服务系统。该系统能够把应用程序嵌入到同一页面内而无需多个页面跳转, 同时完成了数据实时刷新, 在线浏览音频库、视频库、图片库以及白板功能, 大大提高了用户使用效率及舒适性, 它比用HTML能实现的接口更加健壮、反应更加灵敏和更具有令人感兴趣的可视化特性。

　　关键词：RIA; Flash; ASP; XML;

　　Abstract：A family training service system is designed, based on the Adobe Flash which is one technique of the RIA, and other server application programs (such as ASP) .The system can embed the application programs to the same page without any transition among multiple pages.The system can complete real-time data refresh, whiteboard function and on-line browse of audio database, video database and picture database, which raises efficiency and comfort for users.Compared with the HTML interface, the system is strong, responsive and visible, which will arouse users' interest.

　　Keyword：RIA; Flash; ASP; XML;

　　一、概述

　　(一) 开发背景

　　目前, 传统家教网络程序的开发是基于单个页面的、客户端/服务器端数据传递的模式, 把网络程序的表示层建立于HTML页面之中, 而HTML是基于文本及HTML控件的。传统的基于页面的系统已经渐渐不能满足网络和用户的更高的、全方位的体验要求了, 这就是“体验问题” (“Experience Matters”) , 而丰富互联网应用程序 (Rich Internet Applications, 缩写为RIA) 的出现也就是为了解决这个问题, 为此Macromedia开发了Flash和Flex用于此方面的实现。

　　Flex和Flash的优点在于它可以很容易的用来创建复杂的动画式显示, 以及可以使用第三方附件。Flex和Flash的最大缺点在于对XML和Web服务等标准的支持很有限, 而且作为应用开发工具的环境还不大成熟。

　　(二) 开发目标

　　1. 能够在系统发布公告通知, 学生和教师能够在线查看和发布自己的需求信息。

　　2. 建立在线资源库, 包括音频、图片、视频和动画文件, 并且能够在线浏览。

　　3. 能够实现在线白板功能, 并且能对用户的数据进行保存, 查看。

　　4. 能够在线管理系统各模块数据。

　　5. 人机交互及时、有效, 界面友好, 易用性及可用性高。

　　6. 系统安装部署方便, 维护简单, 扩展性好。

　　(三) 项目意义

　　本文在阐述了富互联网应用系统的定义, 工作原理, 实现技术, 如何和其他服务器端应用程序进行交互, 以及基于Adobe Flash富互联网应用系统 (富客户端) 的原理, 分析了Adobe Flash通过ActionScript和其他服务器端应用程序通信 (例如:ASP) 并操作数据源 (例如:XML) 的原理和技术的基础上, 设计并实现了一个家教服务系统。该系统为需要家教的老师和学生提供了发布和检索家教信息的平台, 在线辅导的平台, 具有一定的现实应用意义。

　　二、基础环境

　　(一) 运行环境

　　Adobe Flash Player是一款高性能的、轻量型且极具表现力的客户端运行时播放器, 能够在各种主流操作系统、浏览器、移动电话和移动设备上提供功能强大且一致的用户体验。现在, 超过7亿台的连接Internet的桌面计算机和移动设备上都安装了Flash Player, 它使公司和个人能够构建并带给最终用户美妙的数字体验[4]。

　　(二) 相关技术简介

　　1. XML

　　可扩展标记语言 (Extensible Markup Language, XML) 的实质是一种表示数据的方式, 提供了一种标记内容的方式, 可以添加关于数据用途的信息。信息使用XML存储之后, 称为解析器的应用程序就能够可靠地提取相关信息, 并根据不同的需要处理。

　　2、什么是RIA[5]

　　RIA是Rich Internet Applications的缩写, 翻译成中文为丰富互联网应用程序。丰富互联网应用程序是下一代的将桌面应用程序的交互的用户体验与传统的Web应用的部署灵活性和成本分析结合起来的网络应用程序。结合了声音、视频和实时对话的综合通信技术使丰富因特网应用程序 (RIA) 具有前所未有的用户体验。RIA技术允许我们在因特网上以一种象使用Web一样简单的方式来部署富客户端程序。

　　“富”的概念包含两方面, 分别是数据模型的丰富和用户界面的丰富。数据中的“富”意思是用户界面可以显示和操作更为复杂的嵌入在客户端的数据模型, 它可以操作客户端的计算和非同步的发送接收数据。这种模式相对于传统的HTML页面的优点是程序运行于客户端并且程序更多的是和用户进行交互, 同时更少的和服务器进行交互。平衡客户端和服务器端的复杂的数据模型可以让你有更大的空间去创建更高效和更具有交互性的网络应用程序。

　　“富”同样也描述了全面提升的用户界面, HTML只给用户提供了非常有限的界面控制元素, 而丰富互联网应用程序 (RIA) 的用户界面提供了灵活多样的界面控制元素, 这些控制元素可以很好的与数据模型相结合。传统的因特网模型使用线性的设计, 提供给用户一些选择然后用户发送选择结果给服务器, 这种单一的模式不符合应用程序的灵活交互的要求和用户的意愿。频繁的服务器请求和页面刷新有很多的缺点包括页面打开缓慢和降低网络带宽。如果采用富客户界面, 可以从以前的服务器响应影响整个界面, 转移到只有收到请求的应用程序部分才会做出相应的变化。

　　3、为什么使用RIA

　　基于HTML的应用程序之所以变得流行是由于应用系统的部署成本低、结构简单, 并且HTML易于学习和使用, 然而, 某些应用系统并不完全适合采用HTML技术。复杂的应用系统可能要求多次提取网页来完成一项事务处理, 在某些领域中, 如医药和财务领域, 这将会导致交互速度异常缓慢。此外, 虽然HTML开始走向简单, 但是即使简单的交互活动也仍然需要用很多的脚本来完成。即使一个输入窗体经过仔细的布置和全面的脚本设计, 它从浏览器所能发送的也仅仅是简单的“变量/值”。

　　RIA利用相对健壮的客户端描述引擎, 这个引擎能够提供内容密集、响应速度快和图形丰富的用户界面。除了提供一个具有各种控件 (滑标、日期选择器、窗口、选项卡、微调控制器和标尺等) 的界面之外, RIA一般还允许使用SVG (Scalable Vector Graphics, 可伸缩向量图) 或其他技术来随时构建图形。一些RIA技术 (如:Adobe Flash) 甚至能够提供全活动的动画来对数据变化作出响应。

　　RIA的另一个好处在于, 数据能够被缓存在客户端, 从而可以实现一个比基于HTML的响应速度更快且数据往返于服务器的次数更少的用户界面。对于无线设备和需要偶尔连接的设备来说, 将来的趋势肯定是向富客户端的方向发展, 并且会逐渐远离基于文本的Web客户端。那些运行在移动设备上的应用系统, 可以被设计成以离线方式工作, 当连接丢失的时候能基本上以离线的方式工作。

　　4、当前可用的RIA技术

　　Java:一些相当复杂的客户端应用程序 (Oracle的JDeveloper, Eclipse) 都是用Java编写的, 这说明可以用Java来建立几乎任何一个能够想象得到的富客户端应用程序。到目前为止, Java完全支持创建基于窗体的用户界面。使用Java建立富客户端程序的主要缺陷是它的复杂性 (即使对简单的窗体和图形也要求编写非常烦琐的代码) , 它的优点在于Java对Web标准的全面支持, 及该语言和类库的深刻内涵。

　　XUL:XUL (念作“zool”) 是一个基于XML的用户界面语言, 它来自于Mozilla的开放源码项目。它可用于建立窗体应用程序, 这些应用程序不但可以在Mozilla浏览器上运行, 而且也可以运行在其他描述引擎上, 如Zulu (一个Flash MX组件) 和Thinleys (一个Java实现) 。XUL最大的优点在于它与Gecko引擎的集成 (打开了通向大量Web标准的大门) , 以及与大多数其他XML用户界面描述语言相比它是一种非常具有表达力和简洁的语言。

　　Adobe Flash和Flex:Flash是一个已经成熟的商业产品, 它可以在Web网页中引入交互式的图形界面, 据称已经有98%以上的桌面系统都支持Flash。Flash采用的脚本语言是Action Script。Flex产品对Flash增加了一个XML描述语言 (MXML) , 使其可以像HTML一样编译用户界面, 并且能够用Flash Player来随时进行描述。

　　5、RIA的特点

　　(1) 数据绑定机制:客户端的控件可以绑定到数据集。建立绑定关联后, 控件可以展示数据集的数据, 数据集也可以接收控件对数据的修改, 形成有机互动。这些都由系统从底层实现。

　　(2) 客户端的数据集:客户端的数据集是服务器端数据实体在客户端的延伸, 它是整个页面的数据中心, 和数据中转的枢纽, 它负责从服务器读取及缓存数据, 并将客户修改的数据发送到服务器端进行存储。一个页面可以有多个数据集, 数据集之间也可以建立关联形成主细目数据集。数据集可以根据需要自动到服务器端检索数据, 有效减少数据的传输量, 减轻网络数据通信负载, 提高数据的传送速度及相关应用程序的性能。

　　(3) 客户端控件:客户端控件具有丰富的属性、方法和事件, 开发人员可以像开发桌面程序一样进行页面开发。

　　(4) 完备的数据效验机制:只需简单的指定效验规则, 即可实现复杂的数据效验。如果不指定效验规则, 系统将根据数据类型执行基本的数据效验。

　　(5) 界面设计:界面设计非常简单, 很少的代码, 甚至没有代码即可实现复杂的应用页面。高度智能化的控件, 保证了页面操作简单、功能强大、美观漂亮、更具人性化。

　　三、系统需求分析:

　　(一) 系统结构分析

　　系统采用了XML作为数据源, Adobe Flash Player通过Web Server应用程序来访问数据源, 而用户则通过嵌入客户端浏览器的Adobe Flash Player从网络连接Web服务器读取数据。系统的结构如图1所示。

图1 系统结构示意图

　　(二) 系统处理机制

　　如图2, 详细说明了系统处理数据的过程。

图2 系统处理机制

　　(三) 用例图分析

　　系统用户分为管理员、学生用户和教师用户, 用例图如图3。管理员能够使用系统首页模块、在线白板模块、视频库模块、图片库模块、信息浏览模块、在线管理模块。学生用户和教师用户能够使用系统首页模块、在线白板模块、视频库模块、图片库模块、信息浏览模块。

　　1. 信息浏览模块

图3 信息浏览用例图

　　2. 在线白板用例图

图4 在线白板用例图

　　3、视频库、图片库用例图

图5 视频库、图片库用例图

　　四、系统概要设计

　　(一) 系统模块设计

　　系统各模块如图6

图6 系统功能模块图

　　(二) 系统界面设计

　　在人和机器的互动过程 (Human Machine Interaction) 中, 有一个层面, 即我们所说的界面 (interface) 。从心理学意义来分, 界面可分为感觉 (视觉、触觉、听觉等) 和情感两个层次。用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程, 认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是:置界面于用户的控制之下;减少用户的记忆负担;保持界面的一致性。

　　用户界面设计在工作流程上分为结构设计、交互设计、视觉设计三个部分。

　　1、结构设计 (Structure Design) :

　　在本系统设计过程中, 先确定使用用户群体以及用户的需求, 根据用户的需求进行具体分析, 主要由5个页面构成, 每个页面均提供访问其他页面的快速通道, 在合适的结构规划下同时间提供用户所能接受的最大信息量, 使用户更方便快捷的获取其所需的信息而无需在大量的页面和信息之间频繁转换, 大大降低了用户的使用疲劳度。

　　2、交互设计 (Interactive Design) :

　　本系统提供了帮助系统来指导用户操作系统, 同时使用了动画来增强系统的可用性及易用性, 对用户的操作能及时作出响应, 节省了用户的时间和精力, 提高了用户工作的效率。

　　3、视觉设计 (Visual Design) :

　　根据色彩学原理及本人以往从事设计的经验, 本系统使用了亮度较低, 色调偏冷, 饱和度偏高的背景色, 同时使用绿色给人以清新自然的感觉, 主界面窗口使用白色和灰色突出内容, 同时采用多个图标用来提示用户相关模块的功能, 使用户能够很快适应系统界面, 能够长时间接受, 避免用户感到不适。

　　五、结束语

　　此系统作为RIA在实际中的应用研究, 提供了一种安全、可升级、灵活多样的界面控制元素, 具有良好适应性的新的面向服务模型, 结合了声音、视频和实时数据处理的综合通信技术创建更高效和更具有交互性的网络应用程序。作为其在服务器产品Flex的一种替代, 能够更快捷的和其他服务器端应用程序进行通信, 而无需配置Flex运行环境, 对于那些采用类似的运行复杂应用系统的机构来说, 提供了一种可选的代替方法, 为RIA技术在以后进一步在实际中的应用提供了一种可行的研究方向和应用模板。本系统在设计上还有一些不足之处 (如:后台编辑的数据为XML格式, 未格式化, 不利于用户识别;在线白板模块未添加即时消息交流。) , 有待于进一步完善。