基于Flash与XML技术的博客系统实现论文.doc

毕业设计(论文)设计论文题目：基于Flash与XML技术的博客系统实现学生姓名：学生学号：专业班级：学院名称：指导老师：学院院长： 6 月 5 日 毕业设计（论文）毕业设计（论文）第30页基于Flash与XML技术的博客系统实现摘要Flash Blog是当前网络新兴的一种UI形式，其良好的交互性比传统的用户界面体现出更加个性化。同时由于Flash Blog具备更加自由的图形特性以及强大的ActionScript脚本交互功能，它已经成为一种崭新的应用UI形式从传统应用软件UI中脱颖而出。首先，本文对软件UI所经历的命令界面、图形界面、多媒体界面等主要发展阶段进行了研究，归纳出UI变革的目的既为简化用户操作、提供良好的用户体验以及提高工作效率。其次，本文基于Flash技术中强大的交互功能，在工作设计的过程中选择了个性化最强的Blog作为研究对象以验证UI发展规律在软件上的应用。本文设计了其Flash下的应用程序UI形式，以及在前台开发模式上的应用方法，并在此基础上实现了部分原型系统。最后从在开发中的所遇到的一些困难进行总结，并对Flash开发中还会可能出现的问题进行阐述。关键字软件界面；人机交互；Flash；博客Implement of Blog System Based on Technology ofFlash and XMLAbstractFlash Blog is now an emerging UI form of network, it has a good interaction to provide more Individuality than the traditional user interface. Moreover, Flash Blog has more freedom of graphics ability and powerful ActionScript interactive function, it has become a new brand of UI and emerged from the traditional application software UI. Firstly, this paper researches the major development phase of the UI software that through Command Interface, Graphics Interface, Multimedia Interface, sums up the purpose of UI reform is to simplify user operations, provide a good user experience and improve work efficiency. Secondly，based on the Flash technology powerful interactive function, the Blog that has the strongest personality in the design process is selected to validate the development rule that apply on the software. Its UI form under the Flash application model and the method that apply with developing on the front are designed, and on this basis some of the prototype system are achieved. Lastly, this paper sums up the difficulties in the development, and also elaborates the problems that may arise in developing. Key Wordssoftware interface; human-computer interaction; flash; blog目录绪论1课题背景及目的1国内外研究状况2课题研究方法2论文构成及研究内容21 软件UI的发展研究41.1 软件UI发展阶段41.2 现代软件UI的进化51.3 关于UI发展研究的总结72 Flash Blog需求分析82.1 为什么要开发Flash形式的Blog82.2 区别于传统Blog的新增需求93 Flash Blog技术实现可行性分析123.1 后台应用支持123.2 Flash与后台服务器通信的方式123.3 Flash Blog的UI效果实现可行性134 基于XML与Flash的Blog原型系统设计154.1 Flash与后台通信模式154.2 基于XML作为数据通信中介的系统结构模型设计164.3 前台开发设计174.4 后台开发设计184.5 数据库设计195 Flash Blog的系统功能实现215.1 数据列表的获取与呈现215.2 数据的添加、修改、删除235.3 前后台相配合的权限管理方式245.4 动态UI代码的开发25结论28致谢29参考文献30绪论课题背景及目的Flash是一种交互式矢量多媒体技术，它的前身是Futureplash，后来Macromedia公司收购了Future Splash并将其改名为 Flash。Futureplash是世界上第一个商用的矢量动画设计软件，上世纪90年代广泛应用于这样的大型网站部署在线交互动画以及迪斯尼（Disney）和梦工厂等动画公司生产2维动画，正是因为这种高端应用，flash的创造者们为flash提供了一些可执行的脚本指令与扩展接口以适应不同公司工业级动画制作流程和网路上的用户交互，这为flash成为一款既具备开发能力又具备设计能力的与众不同的软件奠定了基础。本文以Flash这种强大的多媒体平台为基础，结合Blog这种传统网络形式，设计了这种新兴的网络UI形式下的应用Flash Blog，并以此探讨了基于Flash Blog技术的项目开发模式以及相关技术的实现问题。同时采用XML作为数据通信的技术支持，根据自己对其技术的了解，设计了LoadVars类与XML相结合的设计模式，在相对于传统Flash应用来讲，扩充了其业务处理功能，使其在应用领域不仅仅是局限于网络动画及Flash小游戏而已。Flash从2.0版本开始逐步完善它的脚本语言（action script 1.0），这些语言在早期的flash中能够控制影片播放并且绘制图形，实行人机交互.2000年8月Macromedia 推出了Flash5.0，并推出了全新的actionscript 2.0语言，这是actionscript的一次飞跃，flash5.0 开始了对XML和Smart Clip（智能影片剪辑）的支持。ActionScript的语法已经开始定位为发展成为一种完整的面向对象的语言，并且遵循ECMAScript的标准，就像javascript那样。在后来的FLash 6.0，flash 7.0版本中，Macromedian为Flash加入了流媒体（flv）的支持，使flash可以处理基于on6v编解码标准的压缩视频。Flash8.0版本增加了位图滤镜功能，从8.0版本开始，Flash已不能再被称为矢量图形软件，因为它的处理能力已延伸到了视频、矢量、位图和声音。正式Flash这种多媒体特性，以及功能强大的ActionScript脚本平台作为依托，Flash Blog在与传统Blog形势上的用户体验有着截然不同。国内外研究状况Wallop1是微软实验室研究的一个课题项目，即Flash Blog，目的在于提高Web应用的用户体验，其开发选用ASP.NET作为后台程序以及目前正流行的Flash作为前台表现（由于Wallop并非赢利的商业化项目，其功能一直处于不断扩充的状态，但是就目前来讲是完成度最高的Flash Blog），同时借助了大量的javascript脚本，扩充其前台功能，到目前为止Wallop已基本实现Blog中所有相关功能，同时加以类似桌面程序操作的功能，如拖拽、浮动窗口等。在国内，还没有相对较为成熟的Flash Blog，不过与其相似的Flash应用大量涌现，其中多为商业产品宣传以及个人网站展示，Flash最大的优势就不同于传统的应用表现形式，也正因为其如此不拘一格的表现形式，大量开发人员加入其开发的阵营中来。课题研究方法由于Flash Blog还属于一个新兴的事物，相关参考文献十分缺乏，本文一方面探索研究其ActionScript脚本实现技术，一方面研究其项目整体合理的开发方式，从而自主进行原型系统的开发，进而反复验证其开发模式的合理性、高效性，最终采用XML作为通信技术支持，实现前后台的数据通信。在此过程中，其官方电子参考手册（学习 Flash 中的 ActionScript 2.02和ActionScript 2.0 语言参考3）是主要学习资料来源，同时大量借鉴了网络上优秀的Flash网站参考以及相关专业论坛的优秀文章尤为重要。到目前为止参考的较为优秀的相关技术论坛包括由蓝色理想创建的经典论坛Flash专栏4，CSDN的Flash开发板块5，以及优秀Flash网站如www.bluefactory.es ，，等，这些论坛及网站提供了大量的开发过程中的细节方法以及开发经验，同时在UI设计理念上也给予了一些创新提示。论文构成及研究内容论文主要包含两大部分：软件UI发展的研究和Flash Blog这种新兴网络应用模式的设计与前景。其中前半部分主要分析研究软件UI的发展，以及在现阶段图形用户界面在其中的不断衍化，进而归纳总结出软件UI的发展方向，并结合Flash本身多媒体应用程序的特点，加以应用到Flash Blog中的开发过程中，发挥其优势。后半部分则主要讲述Flash Blog的特点，以及根据它的特点如何去设计和实现它的主要功能。由于Flash Blog设计的真正目的并不在于完成其基本功能的应用，而是将UI技术的扩展借助Flash Blog的应用模式加以研究，所以文中所涉及到的结构模型以及架构设计都是由本人根据研究结果而得出相关解决方案。1 软件UI的发展研究由于对于本设计更多的是将新型的Flash UI形式应用到传统的Blog上，以达到更好的用户体验，所以在很多方面对于未来软件UI的发展方向作了一些研究。1.1 软件UI发展阶段软件UI的发展体现了人机交互中对人的因素的不断重视，使人机交互更接近于自然的形式，使用户能利用日常的自然技能，不须经过特别的努力和学习，认知负荷降低，工作效率提高。其发展大致分为四个阶段：命令语言用户界面：真正意义上的人机交互开始于联机终端的出现，此时计算机用户与计算机之间可借助一种双方都能理解的语言进行交互式对话。根据语言的特点可分为：应用于数学、化学、音乐、舞蹈等各领域中简洁、严密、高效的形式语言；具有多义性、微妙、丰富的自然语言；以及计算机语言的一种特例，类自然语言。 其典型形式是“动词+宾语”，二者都可带有限定词或量词。命令语言要求惊人的记忆和大量的训练，并且容易出错，使入门者望而生畏，但比较灵活和高效，适合于专业人员使用。 图形用户界面(GUI-Graphics User Interface)：当前用户界面的主流，广泛应用于各档台式微机和图形工作站。比较成熟的商品化系统有Apple的Macintosh、IBM的PM(Presentation Manager)、Microsoft的Windows和运行于Unix环境的X-Window、OpenLook和OSF/Motif等。当前各类图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。窗口管理系统除基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动(Event-Driven)技术。图形用户界面和人机交互过程极大地依赖视觉和手动控制的参与，因此具有强烈的直接操作特点。其主要缺点是需要占用较多的屏幕空间，并且难以表达和支持非空间性的抽象信息的交互。直接操纵(Direct manipulation)用户界面：直接操纵用户界面是指更多地借助物理的、空间的或形象的表示，而不是单纯的文字或数字的表示。这种方法已被证明有利于“问题解决”和“学习”。视觉的、形象的(艺术的、右脑的、整体的、直觉的)用户界面对于逻辑的、直接性的、面向文本的、左脑的、强迫性的、推理的用户界面是一个挑战。直接操纵用户界面的操纵模式与命令界面相反，基于“宾 语+动词”这样的结构，Windows 95设计者称之为“以文档为中心”。用户最终关心的是他欲控制和操作的对象，他只关心任务语义，而不用过多为计算机语义和句法而分心。虽然对于大量物理的、几何空间的以及形象的任务，直接操纵已表现出巨大的优越性，然而在抽象的、复杂的应用中，直接操纵用户界面可能会表现出其局限性。多媒体用户界面：多媒体技术被认为是在智能用户界面和自然交互技术取得突破之前的一种过渡技术。由于引入了动画、音频、视频等动态媒体，特别是引入了音频媒体，从而大大丰富了计算机表现信息的形式，拓宽了计算机输出的带宽，提高了用户接受信息的效率。多媒体用户界面丰富了信息的表现形式，但基本上限于信息的存储和传输方面，并没有理解媒体信息的含义，这是其不足之处，从而也限制了它的应用场合。多媒体与人工智能技术结合起来而进行的媒体理解和推理的研究将改变这种现状。另一方面，多通道用户界面研究的兴起，将进一步提高计算机的信息识别、理解能力，提高人机交互的效率和用户友好性，将人机交互技术和用户界面设计引向更高境界。1.2 现代软件UI的进化本文参考和收集了大量的软件各版本界面的进化案例进行研究，其中微软Office系列作为当前主流办公软件，其UI设计具有很高的参考价值，虽然它的UI设计最初源于Mac操作系统，但在对其发展过程中也在进行着自我创新，根据其UI变化程度，其进化过程大致分为3个阶段：第一阶段：工具条风格，从Office 1.0到Office 95：图1.1 Microsoft Word 1.0无可厚非，工具条设计是UI的一次革命，它把大量的菜单操作进行简化，但是这个从图即可看出其设计上除了功能不断扩充以外一直没有太大的变化，因为这种两行工具条的设计已经可以满足摆放最常用的功能，但很明显，随着功能的增多，两行工具条已经日渐拥挤了。第二阶段：浮动工具条，压缩工具条和任务面板，从Office 97到Office 2003：图1.2 Microsoft Word 2003可以说，这是在原有工具条设计上的一个升级版，但是可压缩浮动工具条的设计的确大大提高了按钮的可定制性，节约了操作空间。但是，也有人认为过度的压缩使功能在默认情况下被隐藏，反而使效率降低。同时还出现了层级菜单以及任务面板的概念，既使菜单的集成度提高了一个层次，又对用户的操作起到辅助提示作用。第三阶段：Ribbon风格： 图1.3 Microsoft Word 2007随着功能趋于繁杂，传统的工具条设计已经达到极限，过多的功能以图标的形式密集的排列必然导致用户操作识别上的混乱，有必要以一种新的设计对已有的功能进行重新整合。Microsoft Office 2007采用Ribbon设计，根据大量的操作频度数据统计将常用及同类功能进行布局，同时放大的操作效果对用户有良好的导向作用。这种革命式的设计彻底打乱了传统布局，虽然在最初投入使用时遭到一些用户的不满，但不到半年的时间，这种设计已经被普遍认可，可以说此次重大的革新是非常值得和有必要的。1.3 关于UI发展研究的总结从上面所述可以看出，软件UI的发展无论是命令语言用户界面到多媒体用户界面的总发展历程，还是诸如微软Office系列的每个版本上功能界面的升级，其每次革新都是尽量考虑用户以及软件本身发展的需求，虽然说在某些时候可能适得其反，但最终的目标还是朝用户满意的方向前进。这些发展历程的对于未来软件UI的形式给了一些提示，其中最重要的一点便是软件UI的设计要按实际出发，而不是固守传统一成不变，综合到本文设计中，在多方面这些提示都有很好的参考价值，比如对于用户普遍的短篇文章是否一定要使用固定布局？是否要像传统设计一样使用省略号表示大于一定数量的页码？等等诸如此类细节问题完全不必拘泥于传统的形式去套用而是根据用户实际操作的感受大胆创新。2 Flash Blog需求分析目前UI设计尤其是网络UI的设计趋向于提供更灵活的适应能力以及更强的个性化展现。在本文工作设计的过程中选择了个性化最强的BLOG作为研究对象，以体现Flash在UI开发上不同于传统应用的优势。2.1 为什么要开发Flash形式的Blog 在分析了传统的纯HTML界面形式以及Flash的UI设计形式后认为：Flash方式具备以下优势，可以更好地满足这个变化的需求。一、更丰富的UI视觉效果由于其本身具有矢量动画的特性，通过提前绘制或通过脚本控制动态生成，并配合ActionSctipt进行操控，可以更方便的将动画，音效等多媒体元素融入程序开发，使其对用户给予强大的视觉冲击，并提供更好的用户体验。二、同时具有网络程序和桌面程序的特性首先最早作为浏览器插件出现的Flash，为了更好的适应其当时网络条件，本身结构相对简单，但其矢量图形引擎的强大足以将网络世界的形态更加丰富。另外，在ActionScript的不断升级进化中，其功能也在不断强大，越来越多的桌面应用的操作方式被其很好的模拟，甚至原生的支持，另外不同于JavaScript那样对已经固定的静态HTML标签进行二次操作来实现特效，ActionScript本身是Flash的一部分，在初期编译就已经整合到动画文件中，因此在执行同样的效果时会有更好的效率。三、良好的跨平台性与Java类似，Flash程序的运行都是基于虚拟机的，一次编译多平台即可执行，只不过由于矢量动画及脚本控制的产品定位使得Flash的功能更加精炼集中，最终的结果便是其虚拟机AVM（ActionScript Virtual Machine）相当的小巧，即使在今天功能扩充数倍的情况下，虚拟机的大小仍然仅为1M。另外在相应操作系统播放器的辅助下，Flash动画文件可以转化成对应平台下的可执行程序，使其运行在一定情况下脱离不稳定的网络条件因素。四、庞大的用户群体Flash player目前在全世界计算机上的普及率达到98.8%，这是迄今为止市场占有率最高的软件产品（超过了windows、dos和office以及任何一种输入法），通过flash player，开发者制作的flash影片能够在不同的平台上以同样的效果运行，目前，在包括 sony psp以及ps3系列，microsoft xbox系列，microsoft windows mobile 系列的pc和嵌入式平台上，都可以运行flash。这完全得力于起良好的图形性能以及简单的图形脚本控制平台。这样一来使得用户基本上可以不必顾及别人是否能够浏览，而只要专心做好自己的应用产品即可。2.2 区别于传统Blog的新增需求2.2.1 Wallop案例分析由于Flash Blog属于新兴的网络应用形式，其目前发展尚不成熟，其特殊的需求暂时以目前完成度最高的Flash BlogWallop1为范例作为参考。Wallop是微软实验室研究的一个课题项目，目的在于提高Web应用的用户体验，其开发选用ASP.NET作为后台程序以及目前正流行的Flash作为前台表现。图2.1 Wallop 用户首页相对于传统Blog，Wallop已完成的功能包括日志的管理，好友管理，音乐收藏，图片收藏等功能，然而不同于常规的Blog其新添的功能包括如下几点：一、不同于传统的UI形式不同于工工整整的HTML，选择Flash这种UI形式很大程度上是由于其更加自由的表现能力，如上图中Wallop的首页即可看出，同样是功能菜单，新闻列表，好友列表，它没有恪守于方方整整的排列，当然这种排列虽然不规则，但并非任意，而是将各个功能按用户关注度，有选择区分大小排列。二、模拟桌面应用程序操作比如典型的拖拽，对于选中的文本，好友，音乐列表，图片等可视元素，在拖拽操作的同时判定拖拽目标是否允许该元素被拖入，对于允许的在鼠标释放后执行对应的操作和界面更新；再如所有的操作都是基于窗口，而非新页面，对于不同的事件有自适应操作，比如输入框会根据文章内容多少自动适应大小。三、大量的动画元素辅助执行当用户上传文件时，不必等当前操作结束，而是在右下角落动画显示当前上传进度。另外，窗口的弹出和消隐并非生硬的出现和消失而是过渡消失。如此之类的效果对于用户体验的提升具有良好的效果。可以说和传统基于HTML的Blog相比，Flash Blog更灵活，更直观。也许在性能上还有些欠缺，但日渐完善的开发平台以及不断提高的硬件水平上，这种极具个性的Blog必定能带来新的市场。2.2.2 Flash Blog所制定的需求由于人力、时间、技术的限制，本文不可能实现所有Wallop中的各种特性需求，在此仅实现其中部分功能以探索研究其开发模式。实现的功能包括：一、数据通信由于某些业务功能需配合后台服务器完成，所以实现数据通信是Flash Blog完成基本功能前提。二、传统Blog的基本功能这其中包括最基本的文章发表，查询，修改，删除，评论，恢复，以及对应的增、删、改、查等功能，传统Blog的一些扩展功能如图片收藏，音乐收藏则预留接口，但不进行开发。三、简单动态UI应用作为UI研究的主要目标，如何将多媒体编程技术融入到Flash Blog项目的开发中是该设计的主要任务。3 Flash Blog技术实现可行性分析3.1 后台应用支持出于安全考虑，Flash虽然本身功能强大，但是却不具备数据库访问，以及文件读写等服务器操作，不过也正因如此，将Flash多样的前台表现与后台完全相分离恰恰可以更好的体现表现与功能分离的现代应用设计思想，其丰富的调用接口可以搭配诸如ASP.NET/SQL Server，ASP/ACCESS，PHP/MySQL，JAVA/Oracle等多种程序平台实现其服务器操作。3.2 Flash与后台服务器通信的方式由于需要后台应用的支持，Flash作为前台表现要与后台紧密联系，在Flash技术中提供了多种后台通信方式。这里简单列举采用LoadVars类发送Post/Get请求的方法进行实现可行性的验证。通过LoadVars类发送Post/Get请求。var result:LoadVars = new LoadVars();result.param1 = value1; result.param2 = value2;result.sendAndLoad(http:/localhost/xml.asp,result,post);result通过sendAndLoad方法以Post方式发送一个请求，其中param1和param2服务器端可以用Request类访问其参数值。在数据获取过程中可以很方便的访问其getBytesLoaded()方法获取以下载字节，同时根据getBytesTotal()获取文件大小计算下载百分比。mc.onEnterFrame = function() /获取下载进度var persent:String = result.getBytesLoaded()/result.getBytesTotal()*100+%;通过定义result的onLoad事件函数，可以根据读取成功与否进行相应处理。result.onLoad = function(success) if(success)/读取成功处理过程else/读取失败处理过程;当一个XML对象直接获取XML文件或解析一段文本后，就可以通过访问其诸如firstChild，nodeName，attributes以及nodeValue等相关属性，获取数据。var xmlResult:XML = new XML();/*也可以以URL传参直接获取XML文本xmlResult.load(http:/localhost/xml.asp?param1=+value1+¶m1=+value2);*/xmlResult.parseXML(result);var xmlNode:XMLNode = xmlResult.firstChild;xmlNode.nodeName;xmlNode.attributesattributeName;xmlNode.nodeValue;总之，Flash与后台的交互还是非常方便的，无论从功能接口还是事件侦听上都已经基本完善，所以在前台功能上Flash完全可以满足大型数据的处理应用。3.3 Flash Blog的UI效果实现可行性Flash最大的优势在于动画制作的简单，搭配ActionScript可以很轻松的实现动态UI效果。组建的显示是基于Flash内部元素MovieClip的，当其被创建以后，可以通过ActionScript对其进行诸如位置移动（控制_x，_y属性）、缩放（控制_xscale，_yscale属性）、透明度（控制_Alpha属性）等操作。同时丰富的绘图接口可以实现点线的绘制，以及透明颜色和渐变颜色的填充，不过为了实现其更复杂的绘图功能，需要对其进行封装，从而简化绘图语句在程序代码中的过多占用。另外完善的事件机制可以决定这些属性的变化何时进行，例如当影片播放时onEnterFrame被执行，当鼠标移动时onMouseMove被执行，当按钮被点击时onPress被执行等，通过对其定义来实现后台数据的提交以及前台信息展示和各种个性化的交互动作。最后借以大量的数学三角函数模拟缓冲运动，弹性运动等物理运动效果，应用到物件的移动、弹出、消退等动作，起到画龙点睛的作用，增强Flash动态UI效果，使其在视觉上带来不同感受。4 基于XML与Flash的Blog原型系统设计4.1 Flash与后台通信模式选择一种合理的中间媒介对于通信及执行效率尤为重要，Flash与后台通信的方式有以下几种：一、loadVariables方法ActionScript1.0中的过程函数，通过参数配置，将指定影片剪辑中的所有数据变量以Get/Post方式发送到服务器，同时需通过onEnterFrame事件反复检测是否已经收到服务器发送的反馈结果，具有开发简单快捷的优点，但是又不适合传递大规模和格式较为复杂的数据。二、LoadVars类功能上与loadVariables基本相同，不同为采用面向对象的结构进行封装，参数为自身所包含的动态属性集合，通过sendAndLoad方法将反馈结果填充到类本身的动态属性中，同时加强事件机制，如onLoad，onData事件代替无条件循环的onEnterFrame检测方式，优化性能。三、XML类以ActionScript中XML类作为中介，将用户数据填充生成XML文档，并通过sendAndLoad方法将其发送，服务器端以解析XML的方式获取参数数据，并同样将反馈结果以XML格式发送到类本身，以onLoad，onData事件侦听数据接收完成事件，较为灵活同时又具有可扩展性，但是传参过程又过于冗余。四、Web Service组件XML通信方式的一种扩展，通过SOAP请求以函数调用的形式返回结果，并将传值更加参数化，操作简单，但是就目前来看，这种方式还不成熟，主要表现为需要可视化将组件配置，并对产生结果集分析，然后才能进行编译。根据四种通信方式优缺点对比，由于Flash对XML技术支持较早，发展也最为成熟，同时作为文本格式的数据也最容易后台程序输出，可以算是较为理想的中间通信媒介。为解决其发送方式的复杂，采用LoadVars类做为参数发送载体，减少服务器解析XML的负担，针对服务器端开发仅要求其对于服务请求能够返回指定格式的XML文件以保证其平台无关性。表4.1 四种数据通信方式的优缺点对比复杂度优点缺点loadVariables方法简单发送方法简单不能处理大量数据LoadVars类简单发送方法简单，面向对象不能处理大量数据XML类较复杂能处理大量数据数据填充复杂Web Service组件较复杂操作较简单，能处理大量数据配置很复杂，体积过大4.2 基于XML作为数据通信中介的系统结构模型设计综上所述，该设计采用LoadVars类与XML相结合的方式。通信模型如下图：图4.1 Flash与服务器通信模型第一步：客户端用户访问含有Flash文件的服务器，通过浏览器下载到缓存并浏览，执行中的Flash程序获取其在同目录上的config.xml文件（该部分由系统管理员手动修改），读取数据源信息，其信息包括数据源位置（数据源可以与Flash同在一个目录，为更好说明假定两部分服务器分开）和应用程序类型（.asp，.jsp），以及是否现实调试信息。第二步：当用户下载完对应的Flash动画文件时其所有的操作全部与Flash的图形界面交互完成，并且Flash程序根据用户操作判断并转换成可与后台服务器交互的Post/Get请求，这些请求全部由LoadVars类完成。第三步：经由后台服务器根据前台发送请求从对应Session，Cookie或数据库获取相应数据并转换成可识别的XML文件格式反馈给Flash程序。最后：Flash获取反馈地XML数据并按已知的格式进行解析，通过事先定义好的界面规则由ActionScript处理并最终呈现给终端用户。由于服务器端的添加，Flash应用被极大扩充，而并不仅仅局限于网络动画及简单游戏程序。同时由于设计使前台表现与后台分离，可以将Flash更集中于UI开发，发挥其本身优势。4.3 前台开发设计为了能够兼顾更好的表现Flash UI特性与可重用、可扩展的高效开发，本文将前台开发设计分层。首先根据理想的开发模型，将前台部分分为三层：as层：包含了前台定义的所有ActionScript类。data层：包含本地xml数据，前期Flash做为独立项目开发时，主要存放临时静态XML数据，后期完成时只包含config.xml一个文件。movie层：包含所有flash动画文件，出于使生成的swf动画文件方便访问的考虑，该层没有单独放入文件夹，而是放在最外。其中作为主要前台功能实现部分，as层又分为三个子层，即components，supports，system。asdatamoviecomponentssupportssystem图4.2 前台分层设计模式components层：主要实现其内部功能各个组件类，如Blog列表，评论列表，好友，登陆等。作为主要大功能项的一个组件，其子功能组件以主类名称加该类功能方式命名，如Blog.as类中Blog列表功能应用到的子功能组件的摘要显示项，文章显示项，文章添加等组件，命名分别为为BlogItem.as，BlogView.as，BlogAdd.as三个文件。supports层：主要包含可重用控件，由于Flash自带控件包含大量系统中暂时用不到的图形元素，导致整个执行文件体积增大，所以在该设计中没有采用其组件，而是将所有控件如Button，ScrollBar，TextBox等基本控件都由自定义类实现，另外如MessageBox，Loading之类高级可重用组件也在这里定义。system层：则主要完成该设计中最底层的功能，如绘图类（Draw.as）完成各个组件的绘制，滤镜类（Filter.as）完成简化滤镜特效参数工作，调试类（Tracer.as）在屏幕数据中转数据信息已解决现有调试器的功能不足，XML读取辅助类（XMLHelper.as）则完成XML读取数据的简化工作等。其中除components层中须根据需求将组件单独定义外，supports和system层中类会基本保持一致或不断进行扩充，以辅助完成components层中类的实现，体现了良好的扩展性。4.4 后台开发设计由于后台系统采用ASP（JavaScript）+ACCESS结构，所以在后台开发架构上主要采用一个功能对应一个页面的模式，其中对于大量的重复操作进行提取到单独一个文件system.asp，作为一个过程函数库供每个功能页面调用。其中完成的函数库包含三个部分：XML生成相关函数：xmlInit()对生成的XML文件进行初始化；getXmlNote()根据信息生成XML节点字符串并支持嵌套；appendAttribute()对指定的节点添加符合格式的属性字符串。逻辑处理相关函数：isFriend()判断当前浏览者是否为被浏览者的好友；getUserRole()获取当前用户权限，已有权限包括Owner（主人），Friend（好友），Guest（普通访客）三种；getTargetUser()获取当前被浏览的用户；getUserId()获取指定用户的ID。数据库操作相关函数：getConnection()获取数据库连接；closeConnection()关闭指定数据库连接；getRecordSet()对指定Sql语句字串和数据库连接获取结果集；closeRecordSet()关闭制定数据集。日志操作函数：writeLog()将信息类型，信息内容写入指定文件；clearLog()清理日志文件。4.5 数据库设计根据传统Blog，在该设计中实现文章的发布，删除，修改，查询，同时对于每篇文章又具备被匿名回复以及Blog所有者对其评论的删除、修改和回复，作为多用户Blog系统，实现系统内用户间好友关系索引。图4.3 数据库设计关系表为达到Blog基本功能，数据库设计采用5个表（上图T_User和T_User_1是同一个表，为表现其关系拆分显示）：T_User用户信息表，包含用户名，密码，上次登陆日期，性别，Email，电话，地址，说明几个基本字段。T_Data用户数据表（目前只包括Blog文章数据，在今后扩展上可能还会包括图片收藏和音乐收藏数据等），包括数据ID，用户ID，发布日期，最后编辑日期，标题，长数据（文章全文），短数据（文章摘要），分类，作者署名，数据类别字段。T_Comment评论表，包括评论ID，被评论的数据ID，用户名（非强制索引），发布日期，评论内容，用户主页地址几个字段.T_Reply回复表，包括回复ID，评论ID，回复内容，发布日期，最后修改日期几个字段。T_Friend好友关系表，建立T_User与T_User间多对多好友关系的中间表。5 Flash Blog的系统功能实现本文根据Flash特性与通信方式的特点设计了详细方案，以下将展示如何结合该设计方案在进行模块的开发应用，以及基于XML通信下实现的前台功能。5.1 数据列表的获取与呈现当用户进行获取列表的相关操作时，会出现多种可能性的操作结果，例如：用户在获取列表时指定了分页；用户指定了搜索条件；浏览不同用户的数据列表等等。因此，FlashBlog程序要根据前台的操作细节转换成后台可识别的参数，以当用户选择分页为例，转换成对应的Get请求为http:/localhost/backstage/message.asp?page=1，会向后台发送请求获取列表信息。后台首先对全局进行初始化，清空Response请求并重设为text/xml，指定文本编码格式为GB2312，并启用缓存Response.Buffer = true以提高性能，获取页码参数page = parseInt( Request.Item( page ) )。然后，后台将参数转换成对应的SQL字符串，并创建数据连结和结果集。var objConn = getConnection();var strSql = SELECT * FROM guestbook ORDER BY postdatetime DESC;var rs = getRecordSet( strSql, objConn );通过指定页面容量大小rs.PageSize = PageSize以及当前页面rs.AbsolutePage = page，定位到当前数据集指针位置，并以此执行循环while( !rs.EOF&iPageSize )，然后将每次循环中的数据按指定XML格式输出到页面当中，并清理连接以及数据集。前台Flash获取到的数据格式如下段XML代码： . 没做输入内容过滤，请大家不要输入<.等非法字符串。 1522 !CDATA我会抽时间尽快解决，谢谢！ m 19 2003年2月14日 9:04:09 1 DarkVn 2353523 . 代码中包含评论编号，评论用户名，用户Email，主页，性别，图标以及评论信息和回复信息等。Flash在获取这段代码后只需按XMLNode序号获取相应数据即可（也可根据节点名获取信息，但该过程需要节点遍历，相对会损耗一部分性能）。最后呈现结果如下图：图5.1 根据获取的数据自动完成的Flash界面其中，前台的表现全部由ActionScript对Flash中的动画元件直接操控，如文本框的大小以及位置会根据文字量以及屏幕宽度限制自动调整，头像以及表情元素则根据获取到的XML数据从元件库中按编号调用。5.2 数据的添加、修改、删除不同于数据的获取与呈现，在进行数据添加、修改、删除操作时，前台不必处理大量的数据结果，而仅需获取后台服务器反馈的操作结果标识。如下图消息发送提供接口包含如姓名、Email、标题、图标、信息等输入接口，其中图标的选择和文本格式的编辑完全由Flash在前台处理，当用户编辑完毕确认发送时，Flash会通过LoadVars类将其数据连同数据格式以Post方式向服务器端发送。图5.2 用户发送消息的Flash界面服务器获取数据方式和通常Web请求处理方式相同，通过Request.Item方法访问参数，转换成SQL语句并执行，根据操作结果或捕获异常决定sendFlag值，写入页面中Response.Write( &sendFlag=1 )并将其发送至前台Flash。当LoadVars类响应onLoad事件时，进行相关处理，根据sendFlag值确定其操作结果为成功、无权限、还是系统异常错误等，并在前台进行输出Flash界面，提示用户。与信息的编辑与发送相似，信息的修改操作在对用户身份权限确认后允许其进入信息修改界面，在对用户获取输入数据后向后台发送数据，经由后台在执行UPDATE语句，完成信息的更新修改功能。删除相对则较为简单，对于已经确认身份并具有权限的用户，当该用户进行删除操作时，前台Flash则只需为获取用户删除的数据的ID（由获取信息时的XML格式数据提供）对其转换成对应Get请求http:/localhost/backstage/delete.asp?id=1522，并发送至后台服务器，服务器则需再次确认用户身份以便确定是否允许进行删除操作，同样在操作完成后输出sendFlag标签值Response.Write( &sendFlag=1 ) 进行反馈，使前台Flash进行确认并提示用户操作已完成。可以看出，在进行数据添加、修改、删除操作时，其主要执行功能部分与传统执行方式基本相同，不同点在于：一、用户数据的捕获前台表现与后台功能分离的设计，使得在获取用户数据时，不是通过HTML控件直接查询其属性value的值方式获取数据，而是在Flash界面元素中定义变量，在提交操作前读取变量值并保存在发送变量的属性中。二、需要单独的反馈数据不同于以往将反馈结果连同页面样式全部交由服务器完成的模式，服务器将反馈数据单独发送到前台，至于结果的显示，完全由Flash根据该反馈结果决定，这样设计既可以减轻服务器端的负担，又可以加强前台表现的自由度。5.3 前后台相配合的权限管理方式由于权限管理涉及安全问题，对于在Flash与后台服务器通信的过程中如何保证传递的数据不被修改本文做出以下设计：一、前台数据加密功能通