中客户WEB应用程序总体模型(LeeBai20019).doc

中客户WEB应用程序总体模型(LeeBai2001.9)1、什么是“中客户”应用程序？“中客户”应用程序是相对于“胖客户”、“瘦客户”应用程序而言的。“中客户”应用程序中，客户机（浏览器）向应用服务器发送业务请求（同一般的Web程序），应用服务器返回结果数据（不是可显示的页面），客户机负责解析并显示结果数据。相对于传统的“瘦客户”Web程序，“中客户”程序的应用服务器不负责用户界面的构造（如ASP页面、JSP页面），这一工作由浏览器来做，所以客户端“胖”了一些。“中客户”程序中，浏览器和应用服务器的职责分割更为明确、合理，浏览器完全负责界面操作，而应用服务器只处理具体业务逻辑，系统性能也会有很大的提高。“中客户”程序可以基于XML技术实现，也可以用脚本和DHTML技术实现，本文主要阐述后一种实现技术。基于XML的中客户和基于DHTML的中客户比较：比较项目XML的中客户(及webService)DHTML的中客户请求数据格式URL + XML（SOAP信件）URL + POST数据返回数据格式XML（SOAP信件）含Script变量的普通HTML页面数据类型定义XML定义的数据类型Script定义的数据类型数据显示逻辑XSL，不够灵活，可配合脚本Script+DHTML，高度灵活前端可编程性弱强通讯协议HTTP(HTTP之上的SOAP)基于HTTP，无标准，自由使用要求浏览器版本=IE5=IE4服务器端要求XML构造器，加重负载无要求，低开销学习曲线陡，有了XML还要Script平缓,一旦拥有，别无所求数据可交换性强弱2、名词定义：界面页面 数据页面 前端程序界面页面和数据页面都是html页面。用于在浏览器中直接显示的页面为界面页面，用户可以看该页面的内容，或者在其中输入数据。普通的Web应用程序中，基本上所有的页面都是界面页面（静态html文件，或者后台程序动态产生的页面）；在中客户应用程序中，界面页面总是静态html文件，后台程序从来不产生界面页面。只用于应用服务器向浏览器传递数据的页面为数据页面，用户看不到该页面的内容，也不能对其进行任何操作。数据页面一般传输到一个隐含帧（大小为零）中，再由该隐含帧所在的页面（一个界面页面）中的前端程序（一套脚本代码）对其中的数据进行操作。实际应用中，数据页面由后台程序（CGI、Servlet，本文档后续描述大部分针对Servlet）动态产生。前端程序是界面页面的重要组成部分，可以控制后者的显示元素显示在哪个位置，什么格式，是否显示，以及随时改变显示元素的内容。3、中客户应用程序的运行机制及对比JSP/ASPWeb ServerApp ServerServlet业务类BeanDBPage(带程序)Browser首页(Index.htm)目前99在线A页 (OnlineList.htm)在线人员列表:B页 (UserInfo.htm)Script CodeEmail: l bqa.b.cAddr: Beijing var em=lbqa.b.c;var ad=Beijing;parent.loadok();More Info 操作请求数据(get/post) 返回数据(关键) 回调(CallBack)代码(关键) 取数据、处理、显示输入URL缓冲隐含帧Name: Leebai Sex: male上图中，用户先进入应用系统界面的首页Index.htm（静态html文件，下同），在首页中可能有部分信息（如在线人数）是动态的，因此在元素的onload中需从后台程序获取数据，然后显示出来。接着用户想知道到底哪些人在线，于是通过连接打开了一个叫 OnlineList.htm的页面，此页面中的在线人员列表是动态的，因此在元素的onload中需从后台程序获取数据，然后显示出来。再后用户想某个用户的个人信息，于是打开一个叫 UserInfo.htm的页面，同样的，该页面在onload中取用户信息并显示。如果要看更详细的用户信息，按下 按钮，前端程序从后台程序取回了更多信息并显示出来。这个页面画出了取动态数据并显示的具体实现过程。从上面的样例分析，我们可以看出中客户应用与JSP/ASP应用的差异：a.静态页面和动态数据完全分离，互不干扰。比如首页，在JSP/ASP中可能某些原因导致整个页面无法显示；而在本模型中，大不了显示在线人数“未知”，而其他都正常。b.程序界面对应用服务器是透明的，应用服务器无需替浏览器组装HTML页面，因此降低了应用服务器的负载，并提高了服务器的响应速度。另外还可以避免JSP/ASP的各种安全问题、配置问题。c.后台开发人员可以完全不管界面，专注于业务逻辑的开发。d.前端开发人员可以完全专注于脚本开发。e.特定复杂度的动态界面，用JSP/ASP生成与用中客户模式生成工作量大致相同。但作为MVC模式中的View，JSP依赖于传过来的数据Bean，不能独立开发测试；而Servlet和业务Bean的功能正确性验证也依赖与JSP的显示，因此也不能独立开发测试，因此很多JSP者既作业务开发又作界面开发，不是Java掌握不透，就是Javascript用不好，效率很差。f.界面操作因为没有整页刷新（只更新要变化的部分）而更加流畅。g.只传输不带显示格式的纯数据，大幅度减少了网络传输，速度更快。4、中客户应用程序的模块内、模块间的接口定义41、MI(MethodInterface)-方法调用（从后台程序）：Java业务对象的公开方法，由本模块的其他业务对象调用，或由其他模块的业务对象调用。42、SI(ServletInterface)-Servlet调用（从前端界面）：调用servlet，并传参数。不返回界面页面，只返回数据页面（简单情况下返回数据只表明操作是否成功，复杂情况下调用者可以任意处理返回数据）。被调用的servlet负责拆解输入参数，并调用相应业务对象的SI辅助方法（即返回脚本格式数据的方法，其可能调用本对象的私有方法，或者本对象、其他对象的MI方法以获得数据，也可能直接访问数据库获得数据）。一个SI调用可以只引用一个SI辅助方法，也可以引用多个SI辅助方法（这时将多个引用返回的数据累加，再传回浏览器）。43、 UI(UserInterface)-界面调用（从前端界面）：调用一个静态html文件（即界面页面），并可以传递参数，该界面与对应的servlet进行一系列的SI通讯来完成所要求的功能。可以返回值（如用户选择），也可以不返回值（如权限分配）。一般情况下，用户操作导致UI调用（特例：机场航显，被动显示），UI调用或用户操作导致SI调用，SI调用导致SI辅助方法调用，SI辅助方法调用导致MI调用。各种调用可能发生在一个模块(应用程序)内部，也可能跨越模块。下图是典型例子：MI(MethodInterface)调用SI(ServletInterface)调用权限管理用户管理业务模块代管对象列表角色列表角色属性对象赋权业务对象列表业务对象属性复杂(关联)操作业务对象列表用户列表部门列表用户属性部门属性SSS权限控制单实例对象多实例对象角色DB业务对象DBDB部门对象用户对象业务对象属性UI(UserInterface)调用用户界面 后台程序5、“中客户”应用模型开发过程分析用例前端开发SI后端开发系统设计 UI定义SI定义 1.SI辅助方法定义2.业务类静态、动态模型定义3.MI定义UI界面优化UI前端程序实现Servlet实现业务类实现UI测试(使用SI测试桩)业务类测试(通过SI、MI)集成测试集成测试（SI联接）51、用例(Use Case)设计:从使用者(用户或系统对象)的角度观察系统功能，总结出用例图和每个用例的详细说明（使用者系统操作响应表）。用例详细描述时，可以借助用户操作界面的某些概念（一般情况下，一个用例对应一个UI；操作者非人时对应一个SI或MI）。i文档要求：用例图及各用例描述。下面是“对象赋权”的用例设计：对象赋权用例描述：（*表示可选操作）使用者操作系统响应对象列表显示(参考“对象选取”用例)选一个对象，要求赋权显示该对象目前已赋权的用户、角色，以及这些用户角色拥有的具体权限。*改变已有用户角色的权限界面记录改变*删除已有用户角色(所有权限)界面记录改变*新增用户角色以赋权显示用户列表供选择（参考“用户选取”用例）显示角色列表供选择（参考“角色选取”用例）确认或Apply保存所有权限变更取消什么都不做52、UI定义：根据用例的需要，采用面向对象的思想，规划系统所需的UI。在本模型中，UI与普通的Web页面不同，而更接近于传统桌面程序。在内容上，UI可以分为对象列表、对象属性、复杂(对象关联)操作三类；在形式上，UI可以分为主界面和对话框两种。作为系统主界面的根页面，一般显示系统主要对象的列表。对话框页面可以显示对象属性、或者复杂操作。主界面和对话框都可以链接到其他UI。UI设计要指明该UI功能、显示内容、显示形式，并设计出具体的HTML页面。对该页面中动态的部分（比如一个对象列表），要放到一个确定的容器中（比如：，）,并给该容器指定一个 ID。对于对话框UI，要指明可能的引用者、参数、返回值。根据界面显示和操作需要，初步考虑界面初始化、中间操作、退出时都需要那些SI，这些SI是用一个还是多个缓冲隐含帧来接收返回数据页面，以及数据页面的回调函数。此外还要指定该UI要调用的其他UI。i文档要求：系统UI定义表；每个UI的界面页面（HTML）。下面是“对象赋权”的UI定义：对象赋权（Authority.htm）:给一个具体对象设置操作权限，复杂对话框，如下图：动态访问者：需要对象赋权的所有业务模块。访问参数：要赋权的 类ID和对象ID。返回值：无，数据直接更新到后台。SI调用：1、界面刚进入时，从后台取该对象当前的所有权限分配数据。2、“确定”或“应用”时，更新权限数据。UI调用：1、用户选择。2、角色选择。53、SI定义：SI设计是中客户应用设计的核心，是用例和UI的自然延伸。SI设计相当于C/S应用中的协议设计。一个UI会有一个或多个SI，一个SI也可以服务于多个UI。SI定义内容包括：请求类型，GET或POST，除非参数数据太大或太复杂，建议尽可能使用GET；请求参数数据；请求返回数据页面的内容和格式（返回数据有单值、一条记录、一个记录集、多个记录集等情形），并提供一个或几个数据页面样板，在样板中注释数据格式。SI定义的请求参数和返回数据格式及样板是前、后端分别进行黑箱测试的重要依据。另外，前端、后端开发人员必须准确理解SI，SI是前后端人员沟通的唯一通道。i文档要求：系统SI定义表；每个SI对应的数据页面样板（一个或多个）。下面是“对象赋权”的“取对象当前已分配权限SI”定义：名称：getCurAuths功能：取对象当前已分配的权限请求类型：GET参数：?Act= getCurAuths & ClassID=XXX & ObjectID=XXX返回数据页面：1、操作是否成功。2、该类的所有操作权限的ID及名称。3、该对象已分配权限的各个用户、角色的ID、名称、权限ID集合。数据格式：参考样板数据页面。样板数据页面：/头略（*）var ok = true; /样板中可加注释var allOpersID = “R”,”N”,”C”,”D”; var allOpersName = “读”,”新建”,”审查”,”删除”;var roleAuth = new Array();var roleAuth0 = 12345,”系统管理员”,”R-D”;var roleAuth1 = 34521,”主编”,”C-D”;var userAuth = new Array();var userAuth0 = 1234,”张三”,”R-W-D-N”;var userAuth1 = 3452,”李四”,”R”;/尾略（*）（*）注：本文档第3节的“运行机制”中，给出了数据页面的构成，除了数据内容外，还有HTML的其他头、尾定义，以及一个回调（Callback）函数的调用,这些部分由Servlet统一提供，业务类只负责自己的数据。回调函数可以在中定义“onload = parent.funcName()”,也可以在数据体结束后直接写“parent.funcName()”。 数据页面头尾及回调函数如下所示：/数据体/parent.loadok(); /也可以加在此处54、SI辅助方法定义：Servlet接收到SI请求后，通过解析参数，决定调用具体的业务类的SI辅助方法来产生返回数据页面，一个SI可以用一个或多个辅助方法来产生数据页面，如果用多个辅助方法，则Servlet负责将多个返回结果相加并返回。辅助方法必须确保总是返回字符串（不能为null），如果方法预期的操作失败，则返回串中包含“var ok = false; var why = 原因”，以便客户机提示给用户；否则返回串中包含“var ok = true;”， 以便客户机继续相应操作。SI辅助方法定义同普通的类方法定义，但建议方法名前统一加下划线。i文档要求：在业务类设计文档中描述。例如，“取对象当前已分配权限SI”对应的SI辅助方法如下：1、 取类权限定义String _getAllOpers()返回数据：“取对象当前已分配权限SI”返回数据页面中的前两条数据。2、 取对象当前权限表String _getObjectAuths(long ClassID,long ObjectID)返回数据：“取对象当前已分配权限SI”返回数据页面中的其他数据。55、业务类设计及MI定义：业务类设计不考虑用户界面因素，是完全面向对象的。业务类设计的关键是抽取系统中的类，这时既要考虑系统自然的逻辑构成，也要考虑系统所要求的SI辅助方法，前者反映系统固有的数据及其所有可能的操作，是理想的、全面的，后者反映实际设计中要求实现的功能，是现实的、部分的。在本模型中，与一般面向对象分析设计不同在于，规划类及其方法时，特别要考虑SI和SI辅助方法的现实要求。可以认为是用例（Use Case）驱动UI的设计，UI驱动的SI设计，SI驱动业务类的设计，当然，用例也可以直接驱动SI、MI的设计。业务类设计包括静态设计和动态设计。静态设计定义每个类的属性、方法（包括SI辅助方法、MI方法及其他方法），类之间的继承、包含、引用关系（用类图表示），如果数据需要持久保存，还要定义数据库结构（最好有一个ER图）或文件存储结构。动态设计定义具体业务功能发生时，各个类之间的相互调用关系，以及每个类的状态变化。i文档要求：业务类SI辅助方法、MI、主要数据结构一览表；业务类图，动态图；数据库ER图，库字典；下面是“权限管理”的一种业务模型设计：业务类图：注意带下划线”_”的方法为“SI辅助方法”。建议：在静态设计业务类时，只使用ROSE产生类图，而真正设计在VAJ中进行。先用VAJ直接定义各类的属性、方法（以及参数、返回值），并对类、方法加符合Javadoc格式的详细注释。然后用Javadoc产生文字文档（见例），用ROSE逆向工程产生类图（在此基础上可做其他动态图）作为建模文档(也以Web方式发布)。而设计提交给编码人员时，一并提交文字文档JavaDoc、建模文档ModelDoc、设计源代码，并向编码人员进行必要的口头讲解，然后编码人员直接在设计源代码上继续编程。动态图：（略）。数据库ER图：库字典：（略）56、前端实现及测试：前端实现主要是指在UI设计的基础上编写界面页面内的前端程序。前端程序负责对其他UI的调用，也负责对SI的调用，更重要的是负责SI返回数据的处理。在界面页面中，如果数据操作很复杂，可以做局部的Model、View分离，定义一些前端程序的内部数据结构。前端实现采用SI设计中制作的样板数据页面作为测试用桩，进行独立于服务器的测试，在集成之前要确保前端程序的正确性。前端程序的开发过程中，在做UI调用及新UI进入（初始化）时、做SI调用及SI调用Callback时，最好做运行日志。57、后端实现及测试：后端实现包括Servlet实现和业务类实现。在本模型中，Servlet的功能已经规范化，只用来分