《基于flex的在线投票系统的分析与设计毕业论文》由会员上传分享,免费在线阅读,更多相关内容在学术论文-天天文库。
长 沙 学 院CHANGSHAUNIVERSITY毕业设计(论文)资料设计(论文)题目:基于FLEX的在线投票系统的分 析与设计系 部:计算机系专业:计算机科学与技术学生姓名:班级:指导教师姓名:最终评定成绩 毕业设计(论文)原创性声明和使用授权说明原创性声明本人郑重承诺:所呈交的毕业设计(论文),是我个人在指导教师的指导下进行的研究工作及取得的成果。尽我所知,除文中特别加以标注和致谢的地方外,不包含其他人或组织已经发表或公布过的研究成果,也不包含我为获得及其它教育机构的学位或学历而使用过的材料。对本研究提供过帮助和做出过贡献的个人或集体,均已在文中作了明确的说明并表示了谢意。作者签名: 日 期: 指导教师签名: 日 期: 使用授权说明本人完全了解大学关于收集、保存、使用毕业设计(论文)的规定,即:按照学校要求提交毕业设计(论文)的印刷本和电子版本;学校有权保存毕业设计(论文)的印刷本和电子版,并提供目录检索与阅览服务;学校可以采用影印、缩印、数字化或其它复制手段保存论文;在不以赢利为目的前提下,学校可以公布论文的部分或全部内容。作者签名: 日 期: 目录第一部分毕业论文一、毕业论文第二部分外文资料翻译一、外文资料原文二、外文资料翻译第三部分过程管理资料一、毕业设计(论文)课题任务书二、本科毕业设计(论文)开题报告三、本科毕业设计(论文)中期报告四、毕业设计(论文)指导教师评阅表五、毕业设计(论文)评阅教师评阅表六、毕业设计(论文)答辩评审表 2009届本科生毕业设计(论文)资料第一部分毕业论文 (2009届)本科生毕业论文基于FLEX的在线投票系统的分析与设计系 部:计算机系专业:计算机科学与技术学生姓名:王熹班级:05数库5学号2005021804指导教师姓名:周景职称讲师最终评定成绩2009年6月 长沙学院本科生毕业论文基于FLEX的在线投票系统的分析与设计系(部):计算机系专业:计算机科学与技术学号:2005021804学生姓名:王熹指导教师:周景讲师2009年6月 摘要为了提高用户体验性,出现了一种新的互联网技术,即RIA(RichInternetApplication),基于FLEX的投票系统便具有RIA的特性,这一新的投票系统采用Flex+JSP+MySQL的构架,提高了用户的视觉感受,能更直观的反映出投票结果。通过这个系统的开发过程,展示了Flex利用HTTPService通信方式,结合JSP实现对数据库访问的全过程,这个系统是使用典型的三层体系结构来构筑的,在开发过程中可以对三层体系结构有一个全面的认识本系统开发的难点就在于,开发环境的搭建,系统分析的过程,三层架构的理解,ChartViewDialog的states和transition的实现,语言切换的实现。如何去一步一步的解决这些困难,并最终开发出这个系统,是本次设计开发过程的主要目标,在正文中将会详细介绍。关键词:Flex,JSP,投票,数据库 ABSTRACTInordertoenhancetheuser’sexperience,anewnetworktechnologynamedRIA(RichInternetApplication)hasemerged.ThevotingsystembasedonFLEXhasthecharacteristicofRIA.ThisnewvotingsystemadoptsthestructureofFlex+JSP+MySQLtoimprovetheuser’svisualsensibility,whichcanmoredirectlyreflecttheresultofavote.ThewholedevelopingprocessofthissystemdemonstratesthatFlexcanmakeuseofHTTPServiceasacommunicationalmethodtocombineJSPandcompletethewholeprocessofvisitingthedata.Thissystemisbuiltonatypicalthree-levelstructure.Inthedevelopingprocess,wecanhaveacomprehensiveunderstandingofthethree-levelstructure.Thedifficultyindevelopingthissystemliesintheestablishmentoftheenvironmentfordevelopingthesystem,theprocessofanalyzingthesystem,understandingofthethree-levelstructure,realizationofthestatesandtransitionofChartViewDialog,aswellasrealizationoflanguagetransition.Theprimarytaskofthisdesignanddevelopingprocessistoworkouthowtosolvetheproblemsstepbystepandsuccessfullydevelopthissystem,whichwillbeelaboratedinthepaper.目录 摘要IABSTRACTII第1章绪论1第2章需求分析32.1项目背景32.1.1选题依据32.1.2Flex的特性及优势32.1.3设计思路32.2本系统的功能和应用背景42.3系统数据流图42.4数据库需求分析42.5数据库的E-R图5第3章概要设计73.1系统分析73.2系统运行环境的构筑73.3系统功能模块和结构设计7第4章详细设计114.1MySQL端的设计114.1.1对FlexVoteSystem表的设计114.1.2编写FlexVoteSystem的SQL语句114.2FlexVoteSystem的命名规则和结构124.2.1JSP端的文件结构和命名124.2.2Flex端的文件结构和命名144.2.3系统流程图和整体体系结构图154.3JSP端JavaBean的设计164.3.1数据库连接JavaBean的设计174.3.2数据库操作JavaBean的设计174.3.3数据库表映射JavaBean的设计174.4服务器断JSP的设计184.4.1JSP文件的编写184.4.2Flex+JSP+MySQL的编码问题194.5客户端Flex的设计194.5.1TransformLanguageClass.as的设计194.5.2MessageBoxDialog.mxml的设计224.5.3FlexVoteSystem.mxml的设计224.5.4ChartViewDialog.mxml的设计254.5.5HTTPService的介绍25第5章功能测试275.1用户信息录入模块的功能测试275.2问题投票模块的功能测试275.3统计结果饼形图模块测试28 5.4测试截图28结论32参考文献33致谢34第1章绪论Flex是Macromedia发布的presentationserver(展现服务),它是javawebcontainer或者.netserver的一个应用,根据.mxml文件(纯粹的xml描述文件和actionscript)产生相应的.swf文件,传送到客户端,由客户端的flashplayer或者shockwaveplayer解释执行,给用户以丰富的客户体验。运用Flash 是完全可以做到flex的效果的,为什么还需要flex呢?这里面有两个原因:1:为了迎合更多的开发者。Flash天生是为了设计者设计的,界面还有flash的动画概念和程序开发人员格格不入,为了吸引更多的jsp/asp/php等程序员,Macromedia推出了Flex,用非常简单的.mxml来描述界面给jsp/asp/php程序人员使用.(x/d)html非常相似,而且mxml更加规范化、标准化。什么是RIA:传统网络程序的开发是基于页面的、服务器端数据传递的模式,把网络程序的表现层建立于HTML页面之上,而HTML是适合于文本的,传统的基于页面的系统已经渐渐不能满足网络浏览者的更高的、全方位的体验要求了。而富互联网应用(RichInternetApplications,缩写为RIA)的出现就是为了解决这个问题。富互联网应用程序是下一代的将桌面应用程序的交互式用户体验与传统的WEB应用的部署灵活性和成本分析结合起来的网络应用程序。富互联网应用程序中的富客户技术通过提供可承载已编译客户端应用程序(以文件形式,用HTTP传递)的运行环境,客户端应用程序使用异步客户/服务器架构连接现有的后端应用服务器,这是一种安全、可升级、具有良好适应性的新的面向服务模型,这种模型由采用的WEB服务所驱动。结合了声音、视频和实时对话的综合通信技术,使富互联网应用程序(RIA)具有前所未有的网上用户体验。AdobeRIA技术封装让现有的WEB技术得到了极大的保留,核心价值在于大大提高了产品设计师和开发工程师的“开发体验”,强化了设计端和开发端的整合。设计师和开发工程师们可以方便地将自己的代码平移到新的平台上,并且发布、部署的方式比之前的任何一款开发工具都方便得多,从而使RIA应用有更广大的开发者基础。本系统采用的这一新技术,是基于Web形式并以C/S为构架,同时结合了传统应用程序的反应快,交互性强的优点以及Web应用程序的传播范围广的特点,大大提高了用户体验性,简化并改进了传统应用程序的用户交互性。随着计算机技术的飞速发展,现在基于RIA的主流技术除了Flex,还有ajax,silverlight等等,为什么又从中选择Flex呢?因为flex做的界面又好看,又方便,也不难学,还有强大的IDE支持,而ajax做UI的时候,主要是靠JS,要实现一些比较复杂的效果,特别麻烦。追求UI的漂亮纵然不是最主要的,但是有些比较复杂的业务,往往需要“特别的”界面来提高操作的便捷性,这一点上,flex又稍胜一筹。现在作为针对个人或企业级的应用设计,Flex比较有前途,因为它容易上手,美观,灵活,速度快。但为什么没有更多的开发者使用Flex呢?首先就是针对flash来做企业级应用的不信任。再者,adobe主要针对的是java开发者,而对于.net开发者的努力应该是没有甚么作用的,.net开发者习惯了使用微软的东西,比较有专属性,而且有WPF这个平台,为甚么要选择Flex呢。在图形引擎方面,flash 始终无法和WPF相媲美,技术上的差距还很明显。另一方面说,Flex也不能吃掉ajax阵营,毕竟基于浏览器的应用长期存在了这么多年,熟悉html和javascript的开发者又那么多,想让传统web开发者转到Flex上面,那是不太可能的事情。唯一有可能的事情就是原来使用flash开发应用的和使用swing/awt的开发者转到flex/apollo平台下。综上所述,一种新技术的出现,是需要开发者的研究与推广才能使其普及的,而Flex作为一项针对企业或个人应用的计算机技术,在未来必定有其光明的前途,这也正是这次研究学习的主要目的。第2章需求分析2.1项目背景2.1.1选题依据 随着电子商务的发展,各行各业的企业都建立的自己的网站,展示宣传自己的产品。Web宣传方式与传统宣传方式相比,网络推广更具优势,成本低,容易维护,只要用户联网任何时候都可以查看信息,而传统的网络程序一般都采用页面表现内容、由服务器来传递数据的开发模式,在页面中使用HTML标记语言来表现界面层,而HTML只适用于图文内容,在形式上受到很多限制,已渐渐不能满足网络浏览者更高的全方位的体验要求,而Flex的出现就是为了解决这个问题。2.1.2Flex的特性及优势AdobeFlex是一个针对企业级互联网应用的表示层解决方案,具体来说Flex是一种应用框架。Flex的代表性特性:a.使用矢量图形;b.丰富的组件库;c.对多媒体广泛支持;d.数据处理能力强,除了可以加载XML文件和其他文本资料外,Flex还可以和ASP、ASP.NET、PHP、JSP等多种服务器端程序通信,连接远程WebService,还支持Remoting和Socket等高级数据通信方式。这种RIA的富客户端采用异步方式和服务器通信,是种安全的、具备良好适应性的服务器运行模式。Adobe公司开发的FlexBuilder3.0是一个在开放式的平台Eclipse的基础上从头编写,并集合了FlexFramework和ActionScript3.0的功能强大的开发工具。2.1.3设计思路采用最常用的C/S(三层结构)Flex+JSP+MySQL架构,Flex为客户端,JSP为服务器端,MySQL为DB端。用户界面层(Flex端),业务逻辑层(JSP端),数据储存层(DB端)三种模块独立存在。用户界面层向业务逻辑层发出请求后,业务逻辑层根据用户界面层发送过来的请求进行分类处理后,再发送到数据储存层。而业务逻辑层会把数据储存层返回的结果(数据)封装成用户界面层可以接受的形式,再反馈给用户界面层,最后由用户界面层表示出来。2.2本系统的功能和应用背景本系统的功能:采用Flex+JSP+MySQL架构的Flex版的投票系统,具有RIA(富互联网技术)的特性,具有更佳的用户体验性,并且可以直观的反映出投票结果,同时严格按照每个IP地址只能投票一次的限制来实施,这样避免了重复投票的可能性。本系统的应用背景:可以运行在任何一个使用浏览器进行投票的项目上,由于采用的是MySQL数据库,所以在体积和灵活性上面具有很强的优势,一般应用于个人,中小企业的在线投票项目。2.3系统数据流图图2.1系统数据流图 数据流图标示着系统的数据流向情况,可以对系统的数据处理有更细致的了解。该系统对个人信息录入包括个人基本信息和四个问题选择,用于最终数据统计,并用饼状图显示统计结果。2.4数据库需求分析数据库的设计对于一个程序来说起着非常重要的作用,只有一个设计完善的数据库才能给程序带来更高的运行效率,同样也能给程序带来更加健壮的可扩充性。所以说数据库设计是一个程序的根本所在,只有构建一个高效率的数据库,用户界面层和数据逻辑层才能更加有效的配合。用户的需求体现在各种信息的提供,保存,更新和查询上面,这就要求数据库的结构设计能充分满足各种信息的输入和输出。收集基本数据,数据结构及数据处理的流程,然后组成一个详尽的数据字典,可以给后面具体设计打下基础。针对这个投票系统的需求分析,总结出如下的需求信息:第一,同一个IP地址和Email地址的用户只能投票一次。第二,对每一个不同的用户,都会保存这个用户的姓名,IP地址,Email地址,用户所在地区,用户职业和问题1~问题4的投票结果。第三,查询投票信息的时候可以查询问题1~问题3的投票次数。第四,查询投票信息的时候可以查询用户所在地区的投票次数。根据上述的需求分析,本系统将设计出如下所示的数据项和数据结构。第一,用户信息所包括数据项:姓名,Email,职业,职业的计数,地区,地区的计数,用户的IP地址。第二,投票信息所包括的数据项:问题1的投票结果,问题1的计数,问题2的投票结果,问题2的计数,问题3的投票结果,问题3的计数,问题4的投票结果。2.5数据库的E-R图图2.2~图2.4说明了用户信息和投票信息这两个数据结构的关系: 图2.2实体之间关系的E-R图图2.3用户信息的实体E-R图图2.4投票信息的实体E-R图 第3章概要设计3.1系统分析本系统采用的是传统软件编程最常用的C/S构架(三层结构),Flex端为客户端,JSP为服务器端,MySQL为DB端。每个部分的知识体系需详细了解及熟悉掌握。采用三层结构的好处:用户界面层(Flex端),业务逻辑层(JSP端),数据储存层(DB端)三种模块独立存在,这样的程序具有更强的松耦合性,程序流程更加清晰。本系统所采用的数据库管理系统为MySQL,与其他的大型数据库例如Oracle、DB2、SQLServer等相比,MySQL自有它的不足之处,如规模小、功能有限(MySQLCluster的功能和效率都相对比较差)等,但对于一般的个人使用者和中小型企业来说,MySQL提供的功能已经绰绰有余,而且由于MySQL是开放源码软件,因此可以大大降低总体拥有成本。Flex部分所需要应用到的组件有ViewStack,Canvas,ComboBox,Label,Button,RadioButtonGroup/RadioButton,Image,From,TextInput,HTTPService,states,transition,Panel,PieChart等等。JSP部分需要用到JDK的安装,Java的编写和编译,Tomcat服务器的安装和配置,JSP的编写,JavaBean的编写,Eclipse的配置。数据库端还会用到一些常用的SQL语句。 3.2系统运行环境的构筑要顺利设计出这个Flex版投票系统,JSP端和DB端的环境构筑是重中之重。以下就是需要构筑和测试的环境:JDK的配置,Tomcat的配置,Eclipse的配置,JDK+Tomecat+Eclipse环境构筑的测试,MySQL的配置,JSP带数据库的测试,FlexPlug-inForEclipse的配置,在Eclipse中测试Flex的编译和运行。特别需要说明的是,由于时间先后不同,不同版本软件可能导致兼容性问题。3.3系统功能模块和结构设计本系统需要实现的具体功能是可以存储用户录入的信息,并且用户的Email地址和IP地址不能重复使用,最后将用户的投票结果以饼形图的方式展现出来。本系统具体包含的功能模块有:用户登陆模块设计,用户信息录入模块设计,用户投票模块设计,用户查询投票信息模块设计共四个部分。用户登陆模块的设计思想:当程序刚刚运行的时候(程序初始化阶段),Flex端使用HTTPService调用JSP端,以便取得用户的IP地址,JSP端通过业务逻辑处理(组成SQL语句)后发送给DB端,DB端再根据发送过来的SQL语句执行某些操作(插入,查询等操作)。再将操作的结果返回给JSP端,而JSP端将DB端返回的结果封装成XML,最后被Flex端接收。如果Flex端接收的XML内容是Successful则跳转到用户信息录入模块。如果接收的XML内容是Unsuccessful,则说明这个IP地址已经有过一次投票了,不允许进行第二次投票,所以将会在Flex端弹出一个错误信息并终止程序的运行,这就是用户登陆模块的设计思想,如图3.1: 图3.1用户登陆模块设计用户信息录入模块的设计思想:当程序运行到这个模块时需要用户录入姓名,Email地址,用户选择所在地区及职业,其中必须对用户的Email地址进行有效性CHECK,这样才能使程序更具有真实性。当用户信息录入完毕后,将用户的Email地址通过HTTPService的方式发送到JSP端,然后JSP端再组成SQL语句发送到DB端,而DB端得到JSP端发送过来的SQL语句进行查询操作(查询是否存在相同的Email地址),并将查询的结果返回给JSP端。JSP端将得到的结果封装成XML发送到Flex端,Flex端接收的XML为Successful则继续下一个模块,如果为Unsuccessful则说明Email地址已经被注册了,由于Email地址不允许重复注册,所以将弹出提示信息,如图3.2: 图3.2用户信息录入模块设计用户投票模块的设计思想:用户在这个模块中,首先需要对问题1~问题4四个项目进行投票,然后Flex端将用户录入的信息和问题1~问题4的投票结果以HTTPService方式发送到JSP端,JSP端将这些得到的信息组成SQL语句后发送给DB端,DB端则对发送过来的SQL语句进行插入操作,并将结果返回给JSP端,JSP端对这些返回的结果进行封装,最后被Flex端接收,如果Flex端接收的XML为Successful说明插入成功,如果为Unsuccessful说明插入失败。如图3.3:图3.3用户投票模块设计 用户查询投票信息模块的设计思想:当程序运行到这个模块时,说明用户的信息和投票结果已经正确的插入到数据库中,用户将看到五个饼形图,包括:用户所在地区的饼形图,用户职业的饼形图,问题1~问题3的饼形图,如图3.4:图3.4用户查询投票信息模块设计第4章详细设计 4.1MySQL端的设计4.1.1对FlexVoteSystem表的设计表4.1flexvote表No字段类型是否为空键值默认值Extra1Vote_IDInt(11)NOTNULLPRI--auto_increment2Vote_NameVarchar(100)NULL--NULL--3Vote_EmailVarchar(100)NULL--NULL--4Vote_AreaVarchar(100)NULL--NULL--5Vote_AreaCountInt(11)NOTNULL--1--6Vote_OccupationsVarchar(100)NULL--NULL--7Vote_OccupationsCountInt(11)NOTNULL--1--8Vote_Question1Varchar(11)NULL--NULL--9Vote_QuestionCountInt(11)NOTNULL--1--10Vote_Question2Varchar(11)NULL--NULL--11Vote_QuestionCountInt(11)NOTNULL--112Vote_Question3Varchar(11)NULL--NULL--13Vote_QuestionCountInt(11)NOTNULL--1--14Vote_Question4Varchar(11)NULL--NULL--15Vote_IPVarchar(11)NULL--NULL--4.1.2编写FlexVoteSystem的SQL语句本系统使用的数据库名称为flexvote,以下就是FlexVoteSystem系统的表建立时所使用的SQL语句:CREATEDATABASE`flexvote`/*!40100DEFAULTCHARACTERSETutf8*/;USE`flexvote`;CREATETABLE`db_vote`(`Vote_ID`int(11)NOTNULLauto_increment, `Vote_Name`varchar(100)defaultNULLCOMMENT'用户的姓名',`Vote_Email`varchar(100)defaultNULLCOMMENT'用户的E-Mail',`Vote_Area`varchar(100)defaultNULLCOMMENT'用户所在地区',`Vote_AreaCount`int(11)NOTNULLdefault'1'COMMENT'所在地区的计数',`Vote_Occupations`varchar(100)defaultNULLCOMMENT'用户的职业',`Vote_OccupationsCount`int(11)NOTNULLdefault'1'COMMENT'用户的职业的计数',`Vote_Question1`varchar(11)NOTNULLCOMMENT'问题1的内容',`Vote_Question1Count`int(11)NOTNULLdefault'1'COMMENT'问题1的计数',`Vote_Question2`varchar(11)NOTNULLCOMMENT'问题2的内容',`Vote_Question2Count`int(11)NOTNULLdefault'1'COMMENT'问题2的计数',`Vote_Question3`varchar(11)defaultNULLCOMMENT'问题3的内容',`Vote_Question3Count`int(11)NOTNULLdefault'1'COMMENT'问题3的计数',`Vote_Question4`varchar(20)defaultNULLCOMMENT'问题4的内容',`Vote_IP`varchar(16)defaultNULLCOMMENT'用户的IP地址,其不能重复!',PRIMARYKEY(`Vote_ID`))ENGINE=MyISAMDEFAULTCHARSET=utf8;4.2FlexVoteSystem的命名规则和结构4.2.1JSP端的文件结构和命名根据本系统的功能模块设计,结构模块设计和数据库逻辑结构设计,可以得出以下结论。JSP端的动作:得到用户IP地址,查询用户的IP地址,查询用户的Email地址,用户信息和投票结果的插入,用户所在地区的查询,用户职业的查询,问题1~问题3投票结果的查询。根据以上结论可以得出WebContent(也就是存放JSP的文件夹)包含如下JSP文件:一、SelectByUserIPFromVote.jsp功能描述:取得用户IP地址,然后将IP地址进行数据库的查询操作,并把查询后的结果以XML的形式封装起来。二、SelectByUserEmailFromVote.jsp 功能描述:取得由Flex端传送过来的Email地址,据其进行数据库的查询操作,并把查询后返回的结果以XML的形式封装起来。一、InsertAllFromVote.jsp功能描述:取得Flex端传送过来的用户信息和投票结果,据其进行数据库的插入操作,并把插入后的结果以XML的形式封装起来。二、GetAreaFromVote.jsp功能描述:取得由Flex端传送过来的用户所在地区,据其进行数据库的查询操作,并把查询后返回的结果以XML的形式封装起来。三、GetOccupationsFromVote.jsp功能描述:取得由Flex端传送过来的用户职业,据其进行数据库的查询操作,并把查询后返回的结果以XML的形式封装起来。四、GetQuestion1FromVote.jsp功能描述:取得由Flex端传送过来的问题1的投票结果,据其进行数据库的查询操作,并把查询后返回的结果以XML的形式封装起来。五、GetQuestion2FromVote.jsp功能描述:取得由Flex端传送过来的问题2的投票结果,据其进行数据库的查询操作,并把查询后返回的结果以XML的形式封装起来。六、GetQuestion3FromVote.jsp功能描述:取得由Flex端传送过来的问题3的投票结果,据其进行数据库的查询操作,并把查询后返回的结果以XML的形式封装起来。JavaSource(也就是存放JaveBean的文件夹)应该包含如下的JavaBean文件。根据JavaBean的功能应该分为这三种形式:对DB进行连接和管理的JavaBean,对DB表中各个字段的映射和组成SQL语句的JavaBean,其他方面的Javabean。所以我们应该首先建立3个文件夹:DB,ControlDB和Others。而这三个文件夹又都属于JspVoteSystem文件夹,JavaSource/JspVoteSystem/DB中应包含这些文件:1.DataBase.java功能描述:连接MySQL数据库的JavaBean。只负责对DB的连接操作。2.DataBaseManager.java功能描述:对DB进行操作的JavaBean。只负责对DB的查询,插入,删除,关闭等操作。JavaSource/JspVoteSystem/ControlDB中应包含下面这个文件:VoteClass.java 功能描述:包含对实体数据库中所有字段的映射,还包括对IP地址进行查询操作,对Email地址进行查询操作,对数据库进行插入操作,对用户的所在地区进行查询操作,对用户的职业进行查询操作,对问题1~问题3进行的投票结果进行查询操作,并将以上内容组合成SQL语句。4.2.2Flex端的文件结构和命名在Eclipse中新建一个FlexProject,并且命名为FlexVoteSystemV1。这就是本系统中Flex端的工程的名字。Flex端的动作(Flex端在本系统中又称为用户界面层):FlexVoteSystem的欢迎界面,用户信息的录入界面,问题1~问题4的投票界面,用户所在地区的饼形图的显示界面,用户职业的饼形图的显示界面,问题1~问题3的投票显示界面,一般性消息的提示界面共11个界面设计。根据一般投票系统的特点,可以将上述的界面进行一些简化处理。本系统利用的就是Flex的ViewStack组件,使用ViewStack组件简化的对象包括:FlexVoteSystem的欢迎界面,用户信息的录入界面,问题1~问题4的投票界面。经过上述精简可以得出以下文件:1.FlexVoteSystem.mxml功能描述:包括FlexVoteSystem的欢迎界面,用户信息的录入界面,问题1~问题4的投票界面。2.ChartViewDialog.mxml功能描述:饼形图的显示界面,包括用户选择的地区,用户选择的职业,问题1~问题3的投票结果共五个饼形图。3.MessageBoxDialog.mxml功能描述:对一般性消息的处理。例如提示信息,出错信息等。4.2.3系统的流程图和整体体系结构图系统流程图标示着系统运行操作过程,便于了解系统的操作,系统流程图如图4.1所示: 图4.1系统流程图FlexVoteSystem整体的体系结构图如图4.2: 图4.2FlexVoteSystem整体的体系结构图4.3JSP端Javabean的设计JavaBean是一种软件组件模型,它与其他软件对象相互作用,决定如何建立和重用软件组件,这些可重用软件组件被称为Bean。JavaBean具有四个特性:独立性,可重用性,在可视化开发工具中使用,状态可以保存。JavaBean分成可视组件和非可视组件,在JSP中主要使用非可视组件。4.3.1数据库连接JavaBean的设计 数据库连接JavaBean的设计:DataBase.java具有的功能是对数据库进行连接操作,以下就是DataBase.java中在JVM中查找并加载MySQL驱动类,然后创建Connection对象并对数据库进行连接操作的代码:Class.forName("org.gjt.mm.mysql.Driver");url="jdbc:mysql://localhost/flexvote";con=DriverManager.getConnection(url,"root","password");其中第一行的含义是注册MySQL数据库驱动的固定格式。第二行中flexvote是指之前建立的MySQL数据库。第三行中root和password是指在建立MySQL数据库时填写的用户名和密码。4.3.2数据库操作JavaBean的设计数据库操作JavaBean的设计:DataBaseManager.java具有的功能是对DB进行管理操作,例如查询,插入,删除,关闭等操作。(以下代码是关于查询语句的操作:DataBaseManager()db.Connection();Statementstmt=db.con.createStatement();ResultSetres=stmt.executeQuery(p_Sql);以下代码为数据库的插入,更新,删除等操作:DataBasedb=newDataBase();db.Connection();Statementstmt=db.con.createStatement();IntiResult=stmt.executeUpdate(p_Sql);4.3.3数据库表映射JavaBean的设计数据库表映射JavaBean的设计:VoteClass.java的功能是包含对实体数据库中所有字段的映射,还包括对IP地址进行查询操作,对Email地址进行查询操作,对数据库进行插入操作,对用户所在地区进行进行查询操作,对用户的职业进行查询操作,对问题1~问题3的投票结果进行查询操作,并将以上内容组合成SQL语句4.4服务器端JSP的设计4.4.1JSP文件的编写本系统关于Flex与JSP之间的通信使用HTTPService方式,而Flex对XML,E4X的支持已经非常完美了,所以本系统在Flex与JSP之间使用XML进行消息的传送。JSP生成XML可以通过以下两种方式:第一,用out.println方法写XML;第二,把JSP包含到XML文件中。本系统使用的是第二种方式。 SelectByUserIPFromVote.jsp的编写:SelectByUserIPFromVote.jsp的功能是取得用户IP地址,然后将IP地址进行数据库的查询操作,并把查询后的结果以XML的形式封装起来。InsertAllFromVote.jsp的编写:InsertAllFromVote.jsp的功能是取得Flex端传送过来的用户信息和投票结果,据其进行数据库的插入操作,并把插入后返回的结果以XML的形式封装起来。GetAreaFromVote.jsp的编写:GetAreaFromVote.jsp的功能是取得由Flex端传送过来的用户所在地区,据其进行数据库的查询操作,并把查询后返回的结果以XML的形式封装起来。GetQuestion1FromVote.jsp的编写:GetQuestion1FromVote.jsp的功能是取得由Flex端传送过来的问题1的投票结果,据其进行数据库的查询操作,并把查询后返回的结果以XML的形式封装起来。GetQuestion2FromVote.jsp的编写:GetQuestion2FromVote.jsp的功能是取得由Flex端传送过来的问题2的投票结果,据其进行数据库的查询操作,并把查询后返回的结果以XML的形式封装起来。GetQuestion3FromVote.jsp的编写:GetQuestion3FromVote.jsp的功能是取得由Flex端传送过来的问题3的投票结果,据其进行数据库的查询操作,并把查询后返回的结果以XML的形式封装起来。4.4.2Flex+JSP+MySQL的编码问题本系统是由Flex+JSP+MySQL架构的,为了避免产生乱码,就必须进行编码的统一。以下就是它们之间编码的关系:Flex的编码形式:,每一个mxml文件的第一行都有这个代码,可以知道Flex端的编码形式为utf-8,所以JSP端和DB端也要将编码设定为utf-8。JSP端的编码形式:<%@pagecontentType=”text/html;charset=utf-8”%>,首先需要在JSP端设置一下编码形式,为了和Flex端一致,所以必须选择UTF-8的编码形式。 数据库端的编码形式:Flex端和JSP端的编码统一成UTF-8的编码形式,因此传递到DB端也必须是UTF-8的编码形式,在建立vote_db这个表的时候需要将编码形式设置为UTF-8。4.5客户端Flex的设计对于本系统来说,Flex端的设计和编码是最重要的,可以这么说,只有一个设计合理的客户端才能更深刻的体会到FlexVoteSystem的内在的优点。无论JSP端和DB端的设计多么的出色,那都无法让用户得知,只有Flex端的介入才能发挥JSP端和DB端的最大作用。4.5.1TransformLanguageClass.as的设计TransformLanguageClass.as的设计:TransformLanguageClass.as这个文件为新增的,它的功能就是存储FlexVoteSystem中Flex端所有的文字信息,它的优点就是,如果我们想修改任意一个投票项的话,我们无需去修改FlexVoteSystem.mxml,这样一来,就增加了程序的可读性。先在FlexVoteSystem中新建一个叫TransformLanguageClass的as文件,这里面就包含了Flex端所需要显示的内容:1.投票系统的标题。2.用户信息的录入情况:包括(标题,投票者的姓名,投票者的Email地址,投票者所在的地区,投票者的职业)。3.问题1的投票内容:包括(请问您对Flex的认知程度?非常熟悉,明白,懂一点,完全不知道)一个标题和四个投票项。4.问题2的投票内容:包括(您想学习Flex并具体实现Web2.0应用吗?非常愿意,愿意,有一点愿意,用不上)一个标题和四个投票项。5.问题3的投票内容:包括(您想应用Flex在您的工作领域及商业上面吗?非常愿意,愿意,有一点愿意,用不上)一个标题和四个投票项。6.问题4的投票内容:包括(您可以配合学习Flex的时间?白天(上午9:00至下午16:00),晚上(晚上18:30至晚上21:00),假日(星期六,日全天),假日(星期六,日择一天),其他(自行输入)一个标题和五个投票项。7.显示投票的饼形图:包括(投票者居住地区,投票者职业,投票者对Flex2.0的认知程度,投票者对Flex2.0及Web2.0学习的热衷程度,投票者对Flex2.0工作及商业应用分析)。8.用户所在地区:中国的各个省或城市。例如北京,上海,湖南等。9.用户的职业:包括广告业,计算机编程,计算机网络,咨询(管理,营销等),工程师等。 以下就是TransformLanguageClass.as的关键代码:package{publicclassTransformLanguageClass{//简体部分publicstaticconstwl_S_Title:String="Flex教程調研大投票";publicstaticconstwl_S_Information:String="请输入您的资料:";publicstaticconstwl_S_Name:String=" 投票者姓名:";publicstaticconstwl_S_Email:String="投票者E-mail:";publicstaticconstwl_S_Area:String=" 您所在地区:";publicstaticconstwl_S_Occupations:String=" 您的职业:";publicstaticconstwl_S_Author:String="如有问题,请访问";publicstaticconstwl_S_Tellme:String="这里";publicstaticconstwl_S_Author2:String="或給我";publicstaticconstwl_S_Email2:String="留言!";publicstaticconstwl_S_Question:String="问题1:请问您对Flex的认知程度?";publicstaticconstwl_S_Group1_A:String="非常熟悉";publicstaticconstwl_S_Group1_B:String="明白";publicstaticconstwl_S_Group1_C:String="懂一点";publicstaticconstwl_S_Group1_D:String="完全不知道";publicstaticconstwl_S_Question2:String="问题2:您想学习Flex并具体实现Web2.0应用么?";publicstaticconstwl_S_Group2_A:String="非常愿意";publicstaticconstwl_S_Group2_B:String="愿意";publicstaticconstwl_S_Group2_C:String="有一点愿意";publicstaticconstwl_S_Group2_D:String="用不上";publicstaticconstwl_S_Sample:String="Flex范例1";publicstaticconstwl_S_Sample2:String="Flex范例2"; publicstaticconstwl_S_Question3:String="问题3:您想应用Flex在您的工作领域及商业上面么?";publicstaticconstwl_S_Group3_A:String="非常愿意";publicstaticconstwl_S_Group3_B:String="愿意";publicstaticconstwl_S_Group3_C:String="有一点愿意";publicstaticconstwl_S_Group3_D:String="用不上";publicstaticconstwl_S_Question4:String="问题4:您可以配合学习Flex的时间?";publicstaticconstwl_S_Group4_A:String="白天(上午9:00至下午16:00)";publicstaticconstwl_S_Group4_B:String="晚上(晚上18:30至晚上21:00)";publicstaticconstwl_S_Group4_C:String="假日(星期六、日全天)";publicstaticconstwl_S_Group4_D:String="假日(星期六、日择一天)";publicstaticconstwl_S_Group4_E:String="其他(自行输入)";publicstaticconstwl_S_PanelChart0:String="显示投票结果";publicstaticconstwl_S_PanelChart1:String="投票者居住地区";publicstaticconstwl_S_PanelChart2:String="投票者职业";publicstaticconstwl_S_PanelChart3:String="投票者对Flex2.0的认知程度";publicstaticconstwl_S_PanelChart4:String="投票者对Flex2.0及Web2.0学习的热衷程度";publicstaticconstwl_S_PanelChart5:String="投票者对Flex2.0工作及商业应用分析";4.5.2MessageBoxDialog.mxml的设计MessageBoxDialog.mxml的设计:MessageBoxDialog.mxml的功能是对一般性消息的处理,例如提示信息,出错信息等(全部代码见附录)。根据MessageBoxDialog的作用可知,应该使用如下的Component:Button,Label,Image。表3.2就是MessageBoxDialog中的控件定义的信息:表4.2MessageBoxDialog控件表 ldXYWidthHeight含义LabellblMsg8218310默认显示提示的信息ImageimgMsg10185959显示提示信息的图标ButtonbtnMsg33036默认默认关于提示信息的确定4.5.3FlexVoteSystem.mxml的设计FlexVoteSystem.mxml的设计:本环节是这个系统最关键的一步,FlexVoteSystem由以下的一些控件构成,包括:TitleWindow,Image,Label,Button,ViewStack,LinkButton等控件,表4.3为这些控件的定义关系。由于是投票系统,根据常规我们可以使用ViewStack控件对投票信息和投票选线进行有效的组合,我们可以在ViewStack中分出这些画面:用户信息录入界面,第一个问题的投票界面,第二个问题的投票界面,第三个问题的投票界面,第四个问题的投票界面,再加一个欢迎画面,共6个画面,下面来详细介绍这6个画面(FlexVoteSystem.mxml详细实现代码请参考附录)。1.欢迎画面(控件本章已经说明)。2.用户信息录入画面(控件如表4.4所示)。3.第一个问题投票画面(控件如表4.5所示)。4.第二个问题投票画面(控件如表4.6所示)。5.第三个问题投票画面(控件如表4.7所示)。6.第四个问题投票画面(控件如表4.8所示)。表4.3FlexVoteSystem控件表ldSource/TitleXYWidthHeight含义TitleWindow-VoteSystem----作为FlexVoteSystem的载体LinkButton--190123---ButtonbtnBegin下一步44432471--Image-Assets/vote.png190123---ViewStackmyViewStack现在第零个画面,即欢迎画面104.510534350存放投票信息,问题1~问题3的选项的地方 LabellblTitleFlex大投票19048--FlexVoteSystem的标题LabellblMessage-190320246-关于一些信息的显示,例如重复投票等表4.4用户信息录入界面控件表Componentsld含义CanvasONE-FromHeadinglblIinformation投票信息的标题FromItemLblName投票者的姓名TextInputtxtName填写投票者的姓名FromItemlblEmail投票者EmailTextInputtxtEmail填写投票者的EmailFromItemlblArea投票者所在地区ComboBoxcmbArea包括中国主要城市FromItemlblOccupations投票者职业ComboBoxcmbOccupations选择投票者的职业ButtonbtnRegister进入到下一个画面表4.5第一个问题投票界面控件表Componentsld含义CanvasTWO-LabellblQuestion第一个问题的标题RadioButtonradRConversance非常熟悉RadioButtonradRVKnow明白RadioButtonRadRKnow懂一点RadioButtonRadRNKnow完全不知道ButtonbtnPrevious2进入到上一个画面ButtonbtnNext2进入到下一个画面表4.6第二个问题投票界面控件表Componentsld含义 CanvasTHREE-LabellblQuestion2第二个问题的标题RadioButtonRadSVWould非常愿意RadioButtonradSWould愿意RadioButtonradSCWould又一点愿意RadioButtonradSNWould用不上ButtonbtnPrevious3进入到上一个画面ButtonbtnNext3进入到下一个画面表4.7第三个问题投票界面控件表Componentsld含义CanvasFOUR-LabellblQuestion3第三个问题的标题RadioButtonradYVWould非常愿意RadioButtonradYWould愿意RadioButtonradYWould又一点愿意RadioButtonradYNWould用不上ButtonBtnPrevious4进入到上一个画面ButtonBtnNext4进入到下一个画面表4.8第四个问题投票界面控件表Componentsld含义CanvasFIVE-LabellblQuestion4第四个问题的标题RadioButtonradDay白天(上午9:00至下午16:00)RadioButtonradNight晚上(晚上18:30至晚上21:00)RadioButtonradHoliday假日(星期六,日全天)RadioButtonradHoliday2假日(星期六,日择一天)RadioButtonradOther其它(自行输入)TextInputtxtOther自行输入的内容ButtonbtnPrevious5进入到上以个画面ButtonbtnVote提交 4.5.4ChartViewDialog.mxml的设计ChartViewDialog.mxml的设计:ChartViewDialog.mxml的功能是饼形图的显示界面,包括用户所在地区,用户选择的职业,问题1~问题3的投票结果共5个饼形图。由于ChartViewDialog.mxml的作用仅仅是显示饼形图的窗口,所以在本系统中被定义为TitleWindow类型的容器,而其中的五个饼形图均“放在”各自的Panel中。并将这些Panel分别命名为PanelChart1,PanelChart2,PanelChart3,PanelChart4,PanelChart5。为了体现Flex的魅力,我在放置5个饼形图的时候使用了states和transition两种效果,利用states我们可以很方便的操作状态的切换,而transition的使用极大的增强了状态模式下界面的表现力。关于具体怎样实现transition效果的代码,请参考关键代码那一章。4.5.5HTTPService的介绍HTTPService和WebService这两个对象是Flex中最常用的的客户端RPC工具,用来连接服务端的数据文件。RPC通信是一个异步过程,客户端把数据请求发送给服务端,然后等待服务端把结果返回到Flex。本系统采用的是HTTPService的方式。HTTPService对象位于mx.rpc.http包中,它主要是用来发送HTTP形式的GET或POST请求,这和传统的网络动态语言很相似,比如CGI,ASP,PHP。当我们访问一个ASP页面时,也相当于是浏览器向服务端发送GET或POST请求,等到服务端把信息传过来,浏览器将这些显示出来,形成以个页面。在MXML中使用HTTPService对象很方便,格式如下:
此文档下载收益归作者所有