Documenting Web Application Flow/Iteraction

Question

什麼工件/圖表用於記錄Web應用程序的流程，同時考慮靜態頁面之間的鏈接以及動態視圖組件（html表單，JSP，Ajax等）如何與服務器端交互組件（Servlets，Struts動作等）？請使用UML圖嗎？

Answer 1

我們使用UML類圖使用Conallen的文章Modeling Web Application Design with UML的變體。你會發現這篇文章已經演變成different incarnations around the net，甚至成爲一本書Building-Web-Applications-UML-2nd。

我的，我們所使用的方法的2美分遊：

繼Conallen的論文中，我們定義了一個新的UML實體（定型）來表示一個網頁或網頁的一部分，使我們能夠區分服務器 - 端代碼從客戶端HTML/JavaScript的]（例如，Java小服務程序或JSP/AJAX，它產生，例如：

• [網頁]
• [導航欄]
• [頁內容]
• [標題]
• [頁腳]

有新associationss如：

• [構建] - 涉及服務器端代碼到它產生
網頁或頁面片段
• [表觀鏈接] - 在網站地圖上的客戶端頁面之間使用
• [鏈接] - URL鏈接，即GET請求
• [提交] - 表單發回服務器，即POST請求
• [客戶端重定向] - 客戶端重定向
• [服務器重定向] - 咄

最後，一些新的圖表（大多隻是類圖的特例）如：

• [站點地圖] - >像的類圖 - 示出了從用戶的角度來看
• [頁代]靜態關係之間[網頁]（[表觀鏈路] S）S - >像的類圖 - 顯示與一個顯示有關的靜態類aying一個特定的網頁：什麼代碼生成它，什麼代碼處理提交後
• [頁面組成] - 就像一個類圖 - 顯示組成一個給定的[網頁]
• [序列圖] - 唯一的其他變化是序列圖現在可以包含客戶端實體作爲參與者。

好消息：

• ，我們發現我們需要使圖表看起來半體面的Rational Rose圖標擴展。

壞消息：

• 這種方法是很多的工作 - 我們現在有兩倍多的實體，因爲我們現在除了模擬客戶端實體服務器模型課程。

閱讀Conallen的一篇論文，以瞭解我正在談論的內容，但正如我所說的，沒有嚴格遵循他的方法 - 我們只拿走了我們需要的部分。希望這可以幫助。

Answer 2

用例作爲活動圖的一部分被某些礦工同事使用，但這對於某些靜態高級導航概述來說可能很好。

我即將開發自定義DSL，它將類似於Cucumber在Webrat中使用的BDD場景格式，恕我直言，這種場景包含足夠的信息來創建交互和網頁模型。

Answer 3

我以前使用UML狀態圖來記錄Web應用程序的頁面導航。

Answer 4

我建議將37signals方法用於應用程序開發。

每個頁面都需要有目的。首先專注於此目的，並圍繞它設計其他所有環節。

過程：

• 勾畫出的主要部分與sharpie and paper
• 列表項
• ignore the details早期（他們剛剛得到的方式）
• 真實儘快創造的東西越好（即創建一些帶有鏈接的html文件，該鏈接轉到其他頁面以顯示應用程序將如何流動
• 一旦設置了站點流程，然後添加設計組件和開始編程

將編程添加到已經設計並考慮的內容與設計應用程序以解決現有編程（在大多數情況下需要重寫代碼以適應設計/流動問題）在開始時錯過了）。