胖客户端交互软件开发研究.docx
《胖客户端交互软件开发研究.docx》由会员分享，可在线阅读，更多相关《胖客户端交互软件开发研究.docx（44页珍藏版）》请在冰豆网上搜索。
胖客户端交互软件开发研究
胖客户端交互软件开发研究
物理与光电信息科技学院电子信息工程专业
茅曦指导教师卢宇
【摘要】RIA（RichInternetApplications）技术利用具有高度交互性的胖客户端（RichClient）为用户提供比传统HTML或一般动态网页更丰硕更全面的网络应用。
本文以开发一个基于Flex技术和.Net平台的视频点播系统为基础来展现RIA应用的框架和方式，要紧完成了以下工作：
一、介绍课题的背景、VOD系统进展现状和本设计的开发目的；二、对系统开发的关键技术如Flex、ASP.NET等进行介绍和分析；3、运用软件工程的方式对系统开发进行需求分析和整体结构设计；4、介绍系统开发的具体实现，重点对Flex应用程序通过Web效劳与ASP.NET交互、数据访问层实现跨数据库连接的技术方式进行描述和讨论；五、依照开发体会探讨胖客户端的特点和优越性，并总结分析进一步尽力的方向。
【关键词】RIA；Flex；.NET；三层结构
1.绪论
课题背景
随着Internet在全世界范围内的普及，它已日趋成为应用程序的默许开发平台。
Web应用基于HTML页面、效劳器端数据传递的传统模式，缺乏客户端智能，已经渐渐难以知足用户对应用程序的复杂性要求。
因此，一种被称为RichInternetApplications（富互联网应用，简称RIA）的、具有高度互动性和丰硕用户体验的网络应用模式就此产生。
视频点播系统现状
进入21世纪以来，随着互联网宽带技术的进展，VOD（视频点播，VideoOnDemand）技术已经在各类场合愈来愈普遍的进行应用。
VOD是运算机技术、网络技术、多媒体技术进展融合的产物，是一项全新的信息技术效劳。
它摆脱传统电视在时刻空间上的束缚，加倍人性化地将内容播放的主导权由播放方转向利用方，知足用户对自主选择的需要。
随着技术不断进展，VOD普遍的应用范围对公共文化及商业运作都将带来强烈的阻碍。
它不仅能够为客户终端提供多元化的流媒体信息，扩大群众的信息渠道，丰硕他们的精神生活。
而且它给学校、公司的教学培训，宾馆、飞机、医院等场所的娱乐，远程市场调查，楼宇多媒体广告业务等领域带来了全新的媒体应用和商业机遇。
在PC平台上传统VOD系统的短处也是显而易见的：
尽管内容播放的选择权已经交到了利用方，但内容提供者仍然是播放方，在媒体内容上交互性较差，缺乏让广大用户发挥其个体价值的平台。
视频点播系统的开发目的与特点
针对传统VOD系统的短处，本系统除实现其大体功能外，以Web2.0思想为理念，提供一般用户的视频上传、分类功能，并可对每一个视频进行评论，极大的扩展了交互性和共享性。
而且提供胖客户端的应用界面来呈现各类效劳，使易用性和可视化成效加倍壮大。
除此之外还在数据访问方面进行革新，实现跨数据库平台的连接应用。
2.关键技术介绍和分析
RIA
应用系统架构的进展进程中发生过几回重大变革，这其中客户端的表现力高低不定，如图2-1所示。
Browser/Server结构
主机系统
Client/Server结构
RIA
全球
本地
文字界面集成媒体图形用户界面
图2-1运算机应用体系结构的进展进程[1]
（1）基于本地主机的应用程序：
应用程序在本地的内部网络内进行发布，仅有文本形式的用户界面。
（2）客户端/效劳器端（Client/Server，简称C/S）结构：
拥有图形用户界面，客户端应用程序的丰硕性和数据处置能力较以往有大幅度提高，但部署本钱较高且更新不方便。
（3）阅读器端/效劳器端（Browser/Server，简称B/S）结构：
在Web普遍应用的背景下产生，解决了C/S应用程序部署和更新的困难。
但由于采纳了基于HTML页面的用户界面，客户端应用的响应速度、交互性和数据处置能力较C/S结构时有所降低。
C/S结构的缺点主若是本钱和部署、更新问题；而B/S结构的缺点主若是受HTML限制而无法像C/S结构那样借助丰硕的成效来展现数据，用户体验性较差。
这二者受限于技术本身而别离进展成了重客户端和重效劳器端的模式，而RIA将使客户端和效劳器端之间的平稳性得以增强。
RIA结合了C/S和B/S两种结构的优势，改良了传统Web应用的用户界面基础，可提供更具有交互性和响应速度的客户端应用。
RIA中的RichClient（胖客户端）提供经效劳器编译的应用程序的运行环境，应用程序利用异步C/S结构形式连接后台效劳器，这是一种可更新、兼容性好、相对平安、由Web效劳所驱动的面向效劳模型。
[1]
Flex
AdobeFlex是在Flash应用的基础上成立的表示效劳器和应用程序框架。
Flex表示效劳器提供基于标准的、声明性的编程方式和流程，并提供运行时效劳，用于开发和部署胖客户端应用的表示层。
[2]Flex开发者利用直观的、基于XML的MXML语言来概念丰硕的用户界面，该语言由FlexServer编译为客户端应用程序，在FlashPlayer环境中运行。
是微软开发的新一代Web应用技术，能够利用它是.NetFramework的一部份，后者与之前的.NetFramework不可兼容。
.NETFramework包括公共语言运行库（CLR）和.NET框架类库（FCL），其简化了对ASP.NET应用程序开发关键技术的访问，并保证了ASP.NET应用程序的高效运行。
[3]
ASP.NET通过ADO.NET提供的类库来与数据源进行交互。
不同的数据源采纳不同的协议，一些老式的数据源利用ODBC协议，许多新的数据源利用OLEDB协议，此刻还不断显现更多的数据源，这些数据源都能够通过ADO.NET类库来进行连接。
[4]
2.4SQLServer
SQLServer2005数据库是在Windows平台上常见的后台数据库系统，提供了壮大的企业数据库治理功能。
它通过对高端硬件平台和最新网络和存储技术的支持，能够为Web站点和企业级的应用提供可扩展性和高靠得住性。
[5]SQLServer2005支持OLEDB和多种查询，而且能够提供壮大的、灵活的基于Web的分析。
3.系统需求分析与概要设计
3.1需求分析
第一对本系统用户角色进行描述：
游客：
阅读所有视频、并可对视频列表按时刻、点击率排序，能够按关键字模糊搜索视频，也能够按关键字并通过设定相应发布时刻、发布者、视频分类或视频题目搜索视频（高级搜索）。
能够通过注册成为注册用户。
注册用户：
拥有游客的所有功能。
另外，登录系统后，注册用户能够修改自己的信息（除用户名）、对他人或自己的视频评论、上传视频、修改自己上传视频信息、答复他人对自己上传视频的评论。
治理员：
通事后台治理界面登录，拥有最大权限，能够搜索用户、查看用户列表，对用户信息进行编辑，能够上传视频，修改所有效户上传的视频信息，删除、答复所有的评论。
然后构建相应的UML用例图进行需求分析，如图3-1所示。
图3-1系统用例图
3.2系统概要设计
，开发平台为VisualStudio2008、FlexBuilder3和SQLServer2005数据库，，，用户最终看到的将是Flex展现的丰硕成效。
3.2.1整体框架
终端用户直接访问由Flex生成的客户端应用程序，Flex应用程序通过利用Web效劳实现与ASP.NET的交互，再由ASP.NET挪用数据库完成数据传递，其结构如图3-2所示。
图3-2系统框架
其中ASP.NET部份采纳三层架构：
表现层、业务逻辑层和数据访问层。
表现层：
是系统与用户交户的接口，因为前台用户界面将由Flex界面代替，因此ASP.NET的表现层只有后台治理部份。
业务逻辑层：
对表现层提交进来的数据进行验证，和其他业务逻辑的处置。
数据访问层：
利用ADO.NET与SQLServer数据直接交互，然后将返回的结果包装以后返回给业务逻辑层。
这一层中接收到的数据都被以为是平安的。
这三层通过业务对象实体彼此联系，在接收到用户的请求后，表现层挪用业务逻辑层的相应类及方式进行处置，业务逻辑层在接收到表现层的请求后，挪用数据访问层，数据访问层再从数据库中掏出数据或执行增删改操作，最后把结果返回给业务逻辑层，业务逻辑层再将结果返回给表现层，表现层那么将最终结果展现给用户（若是是前台页面，表现层确实是Flex应用程序）。
其架构如图3-3所示。
[6]
三层体系结构的特点：
三层架构将表现层、业务逻辑层、数据访问层分离开来，一旦某一层需要发生变更时，可不能阻碍其他层，只需维持接口一致即可保障系统正常运行。
如此使应用的耦合度低，系统更灵活、更易于保护。
3.2.2功能设计
设计UML活动图来描述用例的业务进程，展现系统的功能和工作流，为本系统的实现做好具体计划。
以下介绍后台治理顶用户治理、视频治理、视频分类治理三个活动图，其余活动图请参考附录。
（1）用户治理
第一进入显示用户列表的动作状态，以后可查看用户个人信息、视频及评论，并可删除该列表中的用户。
如进入个人信息部份，即可进行修改操作；如进入视频部份，即可进行修改和删除操作；如进入评论部份，即可进行删除和答复操作。
本活动如图3-4所示。
图3-4用户治理活动图
（2）视频治理
本活动相关于用户治理，要紧增加了对视频域的判定并依照其结果进入相应动作状态的活动，如图3-5所示。
图3-5视频治理活动图
（3）视频分类治理
视频分类治理活动图如图3-6所示。
图3-6视频分类治理活动图
4.系统详细设计与实现
数据库设计
1.Admin：
治理员表
描述：
用来寄存治理员信息
字段名
数据类型
可为空
默认值
键
说明
adminID
Int
N
PK
管理员ID
adminName
Varchar（50）
N
管理员名称
adminPwd
Varchar（14）
N
管理员密码
2.User：
用户表
描述：
用来寄存注册用户的信息，其顶用户名是惟一的
字段名
数据类型
可为空
默认值
键
说明
userID
Int
N
PK
用户ID
userName
Varchar（50）
N
INDEX
用户名
userPwd
Varchar（14）
N
用记密码
userSex
int
N
1
用户性别，1表示男，0表示女
userHead
Varchar（30）
Y
用户头像文件名
userEmail
Varchar（50）
Y
用户email
userQQ
Varchar（14）
Y
用户QQ号
userSignature
Varchar（400）
Y
个性签名
regDate
Datetime
N
注册时间
loginCount
Int
N
0
用户登陆次数
3.VideoSort：
视频分类表
描述：
用来寄存视频的类别信息
字段名
数据类型
可为空
默认值
键
说明
vsID
Int
N
PK
视频分类ID
vsName
Varchar（50）
N
视频类别名
4.Video：
视频表
描述：
用来寄存网站上所有视频的信息
字段名
数据类型
可为空
默认值
键
说明
vID
Int
N
PK
视频ID
vTopic
Varchar（100）
N
视频标题
vFileName
Varchar（30）
N
视频文件名，以上传时间作为文件名
vDescription
Varchar（Max）
Y
视频简介
vDate
Datetime
N
上传时间
vHit
Int
N
0
点击数
vsID
Int
N
视频所属的分类ID
userID
Int
N
上传视频的用户ID
5.Comment：
视频评论表
描述：
用来寄存视频的评论信息
字段名
数据类型
可为空
默认值
键
说明
comID
Int
N
PK
评论ID
ComContent
Varchar（Max）
N
评论内容
comDate
Datetime
N
评论时间
userID
Int
N
评论用户ID
vID
Int
N
FK（Video）
被评论视频ID
说明：
（1）“键”一栏中的PK表示主键（PrimaryKey），INDEX表示索引，FK表示外键，括号中的表示参考的表名称；
（2）“可为空”列中的N表示不能为空，Y表示可为空；
（3）数据类型为SQLServer2005的数据库类型。
三层结构设计与实现
4.2.1整体结构
图4-1整体包图
4.2.2数据访问层
（1）Model
数据实体层，完全映射数据库表，每一个类的字段对应数据库中相应表的字段，如AdminInfo对应数据库中Admin表。
本层类除构造方式外无其它任何方式，其中Sex列举用来表示用户性别。
类结构如图4-2所示：
图4-2Model类图
（2）IDAL
本层概念了实体行为的抽象接口，业务逻辑层依托于那个抽象层，而不是具体的数据访问层，如此关于依托IDAL的层来讲，它并非用关切数据库是用SQLServer或Oracle仍是其他。
其中OrderType列举用来表示排序时是正序仍是倒序。
类结构如图4-3所示：
图4-3IDAL类图
（3）SQLServerDAL
本层中的类实现IDAL中相应的类，它负责与SQLServer数据库交互。
类结构如图4-4所示：
图4-4SQLServerDAL类图
（4）OracleDAL（假设）
本层和SQLServerDAL一样实现IDAL中相应的类，只只是它负责与Oracle数据库交互。
若是需要与SQLServer和Oracle之外的其它数据库交互，如Access，只需要写一个AccessDAL层实现IDAL层中相应类即可。
（5）DBUtil
这一层是数据库操作的工具类，它把许多重复的数据库操作代码提取出来存在独立的类中，表现了更好的复用性。
类结构如图4-5所示：
图4-5DBUtil类图
（6）DALFactory
这层是一个工厂，利用反射创建具体的实体行为类，如创建OracleDAL中类实例。
其中path属性将从配置文件中读取，它决定了要实例化哪个数据库的实体行为类，若是配置文件中把数据库配置为SQLServer，那么DataAccess中的CreateAdmin将返回SQLServerDAL中的Admin类实例。
类结构如图4-6所示：
图4-6DALFactory类图
4.2.3业务逻辑层
（1）BLL
业务逻辑层不涉及数据库操作，它负责处置业务逻辑，当需要数据库操作时，它挪用数据访问层的类来处置。
类结构如图4-7所示：
图4-7BLL类图
（2）Util
本层包括四个工具类，如图4-8所示：
图4-8Util类图
FileUtil类中有相关文件操作的方式（获取一个目录下的图片文件，格式化文件名等），比如在添加用户选择头像时，就利用FileUtil中的方式读取头像文件夹下的图片。
ProcessCreator类只有一个Run方式，它实现挪用一个外部程序，并传递参数给外部程序。
StringUtil类封装了一些常见的字符串操作方式，比如页面显示文章题目时，常常只取题目的前几个字显示，以避免破坏页面美观。
VideoEncoder类判定不同格式的视频文件并挪用Mencoder或FFMpeg程序以实现视频文件格式转换，因为Flex应用程序中播放视频是flv格式，因此要将用户上传的视频格式转换成flv，并截取一张视频的图片以在网页显示。
4.2.4表现层（后台治理部份）
本系统表现层的后台治理部份采纳ASP.NET实现，而前台用户界面采纳Flex构建。
本节先部份，目录结构及配置文件相关说明参见附录。
由于采纳三层结构，因此表现层的显示实现就相对简单，以下介绍后台治理界面中的视频分类治理部份，其界面如图4-9所示：
图4-9视频分类治理界面
利用的ObjectDataSource控件，结合三层结构来实现列表的显示：
ObjectDataSourcerunat="server"ID="src"
TypeName="VideoSystem.BLL.VideoSort"
DataObjectTypeName="VideoSystem.Model.VideoSortInfo"
SelectMethod="GetList"
DeleteMethod="Delete"
UpdateMethod="Update">
ObjectDataSource>
TypeName：
指定BLL中的相应类名
DataObjectTypeName：
指定实体完整类名
SelectMethod：
BLL中相应类的取记录方式
DeleteMethod：
BLL中相应类的删除记录方式
UpdateMethod：
BLL中相应类的更新方式
然后利用GridView控件显示列表，在GridView中指定DataSourceID的值为ObjectDataSource控件的ID，即可完成显示代码，无需对进行改动：
GridViewID="gv_videoSort"runat="server"CssClass="dataTable"DataKeyNames="VsID"
DataSourceID="src"
AutoGenerateColumns="false"
OnRowUpdating="RowUpdating">
……
GridView>
当进行删除或更新时（放在上面以上代码的中），若指定删除按钮的CommandName为Delete，当用户点击此按钮时，会自动挪用BLL中相应类的Delete方式：
CommandFieldItemStyle-Width="100"HeaderText="编辑"ShowEditButton="true"ButtonType="Image"EditImageUrl="~/App_Themes/Default/images/edit.gif"
CancelImageUrl="~/App_Themes/Default/images/cancel.gif"ItemStyle-CssClass="ope"UpdateImageUrl="~/App_Themes/Default/images/save.gif"/>
TemplateFieldHeaderText="删除"ItemStyle-Width="70">
ImageButtonToolTip="删除"runat="server"OnClientClick="returnconfirm（'删除类别会连同属于它的视频一路除,确信要删除吗?
'）;"ImageUrl="~/App_Themes/Default/images/del.gif"CommandName="Delete"/>
TemplateField>
在OnClientClick属性设置一段javascript代码，在aspx页面执行后，OnClientClick的值将赋值到此按钮的onclick事件处置函数中，它实此刻用户点击时先提示是不是确信要删除，如图4-10所示：
图4-10视频分类治理提示删除对话框
点击编辑时，列表中相应类别名将被输入框代替，同时编辑按钮变为“保留”和“取消”按钮，如图4-11所示：
图4-11视频分类治理编辑状态
因为类别名不可重复，因此在执行更新之前，先判定是不是已存在此类名，这在GridView的RowUpdating事件处置程序中进行，其中挪用了BLL中VideoSort类的HasVideoSort（）静态方式，若是返回true，说明已存在此类名，则设置：
e.Cancel=true;取消更改，并提示。
OnRowUpdating="RowUpdating"
以上代码是在GridView的标签中添加的，相当于以下c#代码：
gv_videoSort.RowUpdating+=newGridViewUpdateEventHandler（RowUpdating）;
在RowUpdating中判定提交的类名是不是已存在：
protectedvoidRowUpdating（objectsender,GridViewUpdateEventArgse）
{
GridViewgv=（GridView）sender;
stringvsName=（（TextBox）gv.Rows[e.RowIndex].Cells[1].Controls[0]）.Text;
if（VideoSystem.BLL.VideoSort.HasVideoSort（vsName））
{
e.Cancel=true;
lbl_result.Text="已存在此类别名!
";
}
}
在添加视频分类时，是在添加按钮的Click事件处置程序中进行的，其中挪用BLL中VideoSort类的静态方式Add来执行添加操作，以下是aspx页面中的代码：
TextBoxrunat="server"ID="vsName">
TextBox>
Buttonrunat="server"OnClick="AddVideoSort"Text="新建"/>
其中AddVideoSort方式的代码如下：
protectedvoidAddVideoSort（objectsender,EventArgse）
{
if（string.IsNullOrEmpty（vsName.Text.Trim（）））
{
lbl_result.Text="类别名不能为空";
}
else
{
try
{
VideoSystem.BLL.VideoSort.Add（vsName.Text.Trim（））;
vsName.Text=string.Empty;
gv_videoSort.DataBind（）;
}
catch（Exceptionee）
{
lbl_result.Text=ee.Message;
}
}
}
4.3Flex应用程序
前台用户界面采纳Flex构建，项目结构及其说明参见附录。
以下描述登录及上传视频两个实例的具体实现：
1、用户登岸：
相关界面如图4-1二、图4-13、图4-14所示：
图4-12前台登录界面
图4-13登录失败
图4-14登录成功
ASP.NETWeb效劳代码：
[WebMethod]
publicUserInf
升级会员 