记录Web应用程序流/交互

时间:2009-05-05 14:55:51

标签: architecture web-applications documentation uml diagram

什么工件/图表用于记录Web应用程序的流程,同时考虑静态页面之间的链接以及动态视图组件(html表单,JSP,Ajax等)如何与服务器端组件交互(Servlet,Struts操作)等)?使用UML图表吗?

4 个答案:

答案 0 :(得分:2)

我们使用了Conallen的文章Modeling Web Application Design with UML的变体来使用UML类图。你会发现这篇文章已经演变为different incarnations around the net,甚至已成为一本书Building-Web-Applications-UML-2nd

我对我们使用的方法的2美分之旅:

根据Conallen的论文,我们定义了一个新的UML实体(构造型)来表示网页或页面的一部分,以便我们可以区分服务器端代码(例如Java servlet或JSP)和客户端HTML /它生成的javascript / AJAX。例如:

  • [网页]
  • [导航栏]
  • [页面的内容]
  • [标题]
  • [页脚]

有新的关联,例如:

  • [builds] - 将服务器端代码与其生成的网页或页面片段相关联
  • [apparent-link] - 在站点地图上的客户端页面之间使用
  • [link] - 网址链接,即GET请求
  • [提交] - 表单回发到服务器,即POST请求
  • [client-redirect] - 客户端重定向
  • [server-redirect] - duh

最后,一些新的图表(大多数只是类图的特化),例如:

  • [sitemap] - >像一个类图 - 从用户的角度显示[网页]之间的静态关系([apparent-link] s)
  • [page-generation] - >像类图一样 - 显示与显示特定网页静态相关的类:生成它的代码,代码处理帖子提交的代码
  • [page-composition] - 就像一个类图 - 显示构成给定[web-page]的内容
  • [序列图] - 唯一的另一个变化是序列图现在可以包含客户端实体作为参与者。

好消息:

  • 我们发现了我们需要的Rational Rose图标扩展,使图表看起来不太合适。

坏消息:

  • 这种方法做了很多工作 - 我们现在拥有两倍的实体模型,因为我们现在除了服务器端类之外还对客户端实体进行建模。

阅读其中一篇Conallen论文,了解我正在谈论的内容,但正如我所说,并没有严格遵循他的方法 - 我们只拿走了我们需要的部分。希望这会有所帮助。

答案 1 :(得分:1)

我过去使用UML状态图来记录网页应用的页面导航。

答案 2 :(得分:1)

我建议采用37signals方法进行应用程序开发。

每个页面都需要有目的。首先关注这个目的并设计其周围的一切。

过程:

  • 使用sharpie and paper
  • 草绘主要部分
  • 列表项
  • ignore the details早期(他们只是挡路)
  • 尽快创建一些真实的东西(即创建一些带有链接的html文件,这些链接会转到其他页面以显示应用程序将如何流动
  • 设置站点流后,添加设计组件并开始编程

将编程添加到已经设计和考虑过的东西要比设计应用程序以解决现有编程更容易(在大多数情况下需要重写代码以适应设计/流程问题,这些问题在开始)。

答案 3 :(得分:0)

作为活动图的一部分的用例被我的一些同事使用,但这对于某些静态高级导航概述来说很好。

我即将开发自定义DSL,它将类似于使用Webrat的Cucumber中使用的BDD场景格式,恕我直言这样的场景包含足够的信息来创建交互和网页模型。