1、第六章 Web建模,王少锋 Email: 2003年11月20日,面向对象技术与应用课程讲义6,2,主要内容,Web 建模的基本概念WAE Rose中的Web建模Web建模实例分析,3,Web应用系统的基础知识,HTTP协议 (HyperText Transfer Protocol) URL (Uniform Resource Locator) HTML (HyperText Markup Language) Form Frame JavaScript Applet (ActiveX) JSP (JavaServer Pages) ASP (Active Server Pages) Sess
2、ion,4,说明： Web建模主要是考虑两个方面的问题，一是如何表示Web应用系统的体系结构。另一个是如何表示Web应用系统中一些特有的概念。 Web应用系统中的一个主要元素是Web页面。 Web页面包括html页面，JSP(或ASP) 动态生成的页面，servlet生成的页面等。,5,Web建模的主要特点,Web页面作为对象处理。 和其它系统的建模一样，从用例分析开始。 客户机和服务器之间的连接是无状态的，如果需要存储状态信息，则使用session (或cookies)对象，并在模型图中表示。 Web建模的关键是把对象正确划分到服务器端或/和客户机端，同时对构建web页面的元素建模。,6,W
3、eb应用的体系结构,7,MVC (Model-View-Controller)介绍：The view manages the graphical and/or textual output to the portion of the bitmapped display. The controller interprets the mouse and keyboard inputs from the user, commanding the model and/or the view to change as appropriate. The model manages the behavior
4、 and data of the application domain.,8,说明: Smalltalk-80 Java Swing UI view, controller, model是三种不同类型的对象。 对于同一个model，可以有很多不同类型的controller来操作这个model，也可以有很多不同形式的view来显示这个model。 一个比喻:,时间模型,时间的数字显示,时间控制器,9,主要内容,Web 建模的基本概念WAE Rose中的Web建模Web建模实例分析,10,WAE for UML,WAE (Web Application Extension for UML) ext
5、ends the UML notation with additional semantics and constraints to permit the modeling of Web-specific architectural elements as a part of the rest of the systems model. Rose中已预定义了一些用于Web建模的stereotype，也可以自己根据需要增加新的stereotype(如Frameset版型),11,Rose Stereotypes for Web Modeling,Rose中预定义了一些用于Web建模的版型，如：
6、on a UML class on a UML class on a UML class,12,Rose中预定义的一些用于Web建模的关系的版型，如： ,13,Server Page,服务器页是能访问服务器资源的对象。 如JSP页面，ASP页面，Servlet等； 把应用程序分为客户机页和服务器页，可以分开表示逻辑和业务逻辑。在Rose中，服务器页用版型表示：,Icon形式,Decoration形式,Label形式,14,服务器页可以完全访问服务器资源，可以与服务器上的各个组件进行通信，完成业务功能，然后向最终用户显示处理结果。 服务器页可以和客户机页有关联关系，也可以和别的服务器页有关联关系
7、。服务器页和客户机页之间的关联关系用版型表示。,15,关联,Rose Web Modeler用版型为的单向关联表示server page和client page之间的关系。例：,16,Label形式,Decoration形式,17,说明： 1. 一个server page可以创建多个client page，一个client page只能由一个server page创建。 2. 关联是单向的。 3. Rose Web Modeler将ServerPageA中的操作作为JSP的方法声明。如下所示：其中fooBar()是ServerPageA中声明的方法。,18,Client Page,客户机页是客
8、户机上运行的HTML格式页面，这些页面通常不包括太多业务逻辑，客户机页的逻辑通常与数据表示有关。 客户机页并不直接访问服务器上的业务对象。 在Rose中，客户机页用版型表示如下：,19,生成代码框架时，客户机页生成为以.html为后缀名的文件。(可以在Rose中设置要生成的文件名),20,关联,Rose Web Modeler用版型为的关联来描述client page之间或client page到server page的超链接。例：,21,说明： 1. HomePage类所生成的代码如下所示：2. 关联可以是双向的。Introduction类生成的代码包含到HomePage的链接。 3. 可以
9、在HomePage类或Introduction类的Specification中设置属性值。,22,Form,使用Form的目的是从最终用户取得输入数据。 Form用版型为的类表示：,23,Form中不包含操作(业务逻辑)。 一个客户机页可以包含一个或多个Form，客户机页和Form的关系是聚集关系。,24,在Rose中用版型、来说明Form中包含的元素(作为Form的属性)。 的type可以是text, password, checkbox, radio, submit, reset, file, hidden, image, button等。,25,在Rose中，由正向工程生成Survey.
10、html文件，代码如下所示：,26,关联,Rose Web Modeler用版型为的单向关联来描述HTML Form和server page之间的关系，如下图所示：,27,说明： cdorders类所生成的代码如下所示：,28,Frameset建模,利用Frame可以把一个浏览器窗口分为多个子区域。如：,29,Rose中没有预定义用于Frameset的版型，利用Rose的扩充机制可以开发用于Frameset建模的元素。(WAE2-UML.exe) Frameset建模示例：,说明： Book: frameset Index: 导航区域 Content: 点击导航区域中的不同链接，不同的Web页
11、面在Content中显示。,30,JSP建模,JSP可以用于创建动态Web页面，并以HTML 页面格式发送到客户机端显示。 JSP的一个重要特性是可以包含指令，如forward，include等指令. JSP中include指令的例子：JSP中forward指令的例子： ,31,关联,Rose Web Modeler用版型为的单向关联来描述server page和client page或两个server page之间的include关系。例：,32,说明： 可以在关联的specification中指明HTML，JSP文件名或其它属性。 Menu类所生成的代码为：,33,和关联,JSP中用版型为
12、的单向关联表示控制从一个server page转到另一个server page或client page。 ASP中用版型为的单向关联表示控制从一个server page转到另一个server page或client page。,34,例：说明： Item.jsp类所产生的代码为： ,35,如果需要管理JSP页面中的Session状态信息，可以在JSP页面的Specification中设置是否使用Session。 具体的session值存在一个Session对象中。 在JSP页面中可以使用JavaBean。如：JSP页面和JavaBean之间用版型为的关联表示。,36,例：,37,在Rose中创
13、建Servlet的方法,Rose中用版型为或的类表示不同类型的Servlet。,38,javax.servlet包中的结构。编写Servlet程序通常继承GenericServlet类或HttpServlet类。,39,创建Servlet类的过程： Tools Java/J2EE New Servlet,40,创建Servlet类的对话框,41,Relationship Rules for Web Artifacts,42,主要内容,Web 建模的基本概念WAE Rose中的Web建模Web建模实例分析,43,Rose中的Web建模,利用Rose Web Modeler可以对Web应用系统建模
14、。 Web Modeler可以根据模型产生.jsp, .asp和.html(或.htm)文件。,44,Web Modeler下的菜单项说明：,45,指定Form中元素类型的菜单：,46,Rose中对Web应用建模的步骤,在Rose中对Web应用系统建模的步骤如下：(需要先在ToolsOptionsNotation中设置缺省模型语言为Web modeler) 定义 virtual directory：virtual directory实际是版型为的包。 添加服务器页(server page)：server page实际上是版型为的类。 添加客户机页(client page)：client pag
15、e实际上是版型为的类。 添加 HTML Form：HTML Form必须添加到某个client page下，HTML Form实际上是版型为的类。,47,添加Form中的 HTML Input，HTML Select或HTML Textarea： HTML Input必须添加到某个HTML Form下，HTML Input是版型为的HTML Form的属性。 为HTML Input类型的元素指定type值：text, password, checkbox, radio, submit, reset, file, hidden, image, button等 添加HTML Select，HTML
16、 Textarea属性的方式和添加HTML Input类似，但不需要指定type值。 创建Web元素(HTML Form, 客户机页，服务器页等)之间的关系： 用于关系的版型有：Build，Include，Link，Forward，Redirect，Submit等。,48,代码生成,当建模完成后，即可利用Rose生成代码框架。 可以在模型元素的Specification中设置所要生成的代码的特性。,49,主要内容,Web 建模的基本概念WAE Rose中的Web建模Web建模实例分析,50,实例分析 (Glossary Application),项目术语管理系统 一个软件开发项目往往包含许多和
17、该项目有关的术语，项目术语管理系统对项目中涉及的术语进行管理，系统中包含一个项目术语数据库。 项目开发团队人员可以修改，增加，删除数据库中的术语项。 项目开发团队人员通过Web浏览器使用系统。,51,参考文件：Glossary_NJS_1_0.zip，包含了模型和可运行代码。 开发环境：JPadPro 运行环境：Tomcat，MySQL,52,定义virtual path的值： curdir为模型文件所在的目录 数据库用户名和密码： 用户名glossary_usr，密码 password,53,Use Case Model包中的Main用例图：,54,Logical view中各个包之间的依赖
18、关系,55,说明： 1. UX Model：User Experience Model The UX Model describes the screens of the system, the dynamic content that appears on the screens, and how the user navigates through the screens to execute the system functionality (i.e., the use cases). 参考文献：“Transforming User Experience Model To Present
19、ation Layer Implementations”，Wojtek Kozaczynski and Jim Thario，Rational Software Corporation, USA (已放在ftp上) 2. Web应用系统开发过程 参考文件 WebDevProcess.zip (已放在ftp上),56,总结,1. 用UML对Web应用系统建模属于较新的研究领域。 2. Web建模不只是对简单的HTML页面建模，还包括别的元素。 3. UML的三个扩充机制：stereotypes, constraints, tagged values. 对Web元素的建模型主要利用了UML的stereotypes扩充机制。 4. 参考书：Building Web Applications with UML, Jim Conallen, Addison-Wesley, 2000(, 2nd edition, published October 2002)(该书的辅助网站：http:/www.wae-uml.org),
