讓Web的介面如同Windows般親和

前言

前段時間，訊光在AjaxTools中加入了一個新成員—AjaxGridView，在網頁的效能和用戶的體驗方面大為改善，並且解決了GirdView無法直接編輯資料、欄位動態排序動態顯示等等強大的功能，引起了EEP客戶們的廣大迴響。因為有了AjaxGridView，我們在設計Web網頁的時候，可以設計出類似Window Form的效果，但是GridView只能用在單檔或Master/Detail的明細檔中，如果要做成像EEP的Window Form那樣有一個View+Master/Detail的Web程式，那就困難了。本文中，我們再利用訊光團隊所新開發的另一個新成員AjaxFormView與AjaxLayout兩個元件，來完成View+Master/Detail這樣具有高度親和風格的使用者介面，來強化整個UI的親和與方便性。

效能與用戶體驗

原本EEP的Web Template中，WMasterDetail3就是一個View+Master/Detail的使用者介面，如圖上，就是為了讓Master資料一次可以瀏覽多筆，所以左邊多了一個View的GridView來讓User選取Master資料，並且當選取View的資料後，再去後端資料庫中去完整取回該筆Master/Detail的相對資料，雖然資料庫的效能不會有很大的影響，但是重點在前端瀏覽器上的User必須等待頁面的更新，顯得非常笨重與不親和，但在沒有Ajax的技術之前，這些UI就得很難實現或讓User很有意見，有其是針對校能部分。為此，如圖，我們將View+Master/Detail中，使用了一個AjaxLayout的元件來安排版面的配置，讓左邊的View可以使用新的AjaxGridView元件，右上的Master使用新的AjaxFormView，右下的Detail同樣也使用了AjaxGridView，並且我們也讓AjaxLayout來指揮這3個元件彼此的互動關係。如此，將會得到下列好處：

1. 使用了AjaxGridView與AjaxFormView後，可減輕伺服器(如IIS)的負擔。因為Ajax的根本理念是“按需求取資料”，所以可以減少多餘請求對伺服器造成的負擔。
2. 無重新整理頁面的負擔，在View選擇資料的同時，都是透過Ajax向服務器請求資料，而沒有重新去整理網頁，減少User實際和心理等待時間，提供更好的用戶體驗。
3. AjaxLayout與AjaxGridView/AjaxFormView可以將部分一些伺服器負擔的工作轉嫁到Client端上(使用了Java Script)，利於Client端閒置的處理能力，減輕伺服器和網路頻寬的負擔。

接著，我們透過一個簡單的NorthWind資料庫的訂單為範例，來簡單說明AjaxLayout +AjaxGridView +AjaxFormView的開發模式，如下（假設你的EEP Server端的InfoCommand已經設計好了）：

1. 我們可以利用WMasterDetail1來產生一個aspx的網頁，將其上面Master(WebDataSource)的CatchDataSet設定為true，這是使用AjaxGridView與AjaxFormView的硬性規定，把aspx中除了WebDataSource的其他元件全部刪除，並貼入AjaxScriptManager(任何使用到Ajax元件都必須貼入這個元件)、AjaxLayout(版面配置元件)、一個AjaxFormView(作為Master使用)及兩個AjaxGridView(一個用作View，另一個用作Detail)。把兩個AjaxGridView和一個AjaxFormView分別起名為agvView、agvDetail、afvMaster。



2. 設定agvView、afvMaster、agvDetail所顯示資料的DataSourceID，分別設為：Master、Master(與View同一個DataSource)、Detail。接著，分別選中agvView、afvMaster、agvDetail，點開它的右上角小三角，我們分別選擇Generate Columns(自動產生欄位)以及Generate ToolItems(自動產生功能按鈕，即新增、修改、刪除等按鈕)，注意agvView可以不需要產生ToolItems。在自動產生Columns時，系統會分析欄位結構，將DataTime格式的欄位設定其顯示格式為DataTimePickers。另外，在使用AjaxFormView(Master那個)的Generate Fields的功能的時候，會有個提示：generate alternate columns，如果選是的話，產生FormView的時候每行顯示2個Column，否則一行只會顯示一個Column。



3. 接著設定agvView的欄位內容，因為View的欄位可以不必太多個，我們只保留OrderID,CustomerID,EmpolyeeID及OrderDate即可，其餘的都刪除，如圖。



4. 接著再分別設定AjaxLayout1版面所對應的元件，將屬性View、Master和Detail分別設為：agvView、afvMaster、agvDetail，代表AjaxLayout配置了3個版面，分別控制了View+Master/Detail這樣的關係。



5. 這樣，我們就已經完成了AjaxLayout+AjaxFormView+AjaxGridView的簡單設定，最後，讓我們一起去瀏覽一下效果吧！這麼簡單就能做出Window Form的View+Master+Detail的效果？而且所有的新增/更改/刪除/查詢的功能都是完整齊備的，雖然有點難以置信，但是事實就是如此。



6.  畫面好像不太整齊。Window Form上有SpiltPanel可以調整。現在Web也有了，可以試著調整下畫面。(每次開啟畫面后都需要調整，是不是太麻煩了？沒關係，可透過設置View的AjaxGridView的Width屬性來調整)。

7.






8. 您還可以觀察到，點一下view旁邊的 按鈕可以將view收起來。



9. 您會發現，新增、修改、刪除等這些操作與Window Form如出一轍。


 

使用Wizard開發

下面讓我們再來看看如何用Wizard更快地產生這樣一個WebForm的頁面吧。

1. 同樣我們使用EEP的Wizard中的EEP Web Form Wizard，並在選擇Template Form時選擇WMasterDetail8這個Template。

2. 與之前的Wizard一樣，分別選了View/Master/Detail等三個資料表的欄位，在View中我們只選擇OrderID,CustomerID,EmpolyeeID,OrderDate四個欄位，Master/Detail則選擇所有欄位。

3. 最後產生的結果如圖所示，這個自動產生的網頁結果你可以更快速更容易地產生與前一個設計案例一模一樣的結果，甚至，在Wizard的過程中，還可以將資料字典中的Validate與Default值及Query條件自動設定給這些AjaxFormView與AjaxGridView，大幅提升Web網業開發的完整度。

結語

當今的資訊系統中，Web化的應用系統不但逐漸盛行而且還成為開發的主流，但是，目前遇到最大的問題還是在用戶體驗和效能上，User都希望Web應用系統的UI能猶如Window的那般親和與效率。因此，親和的UI設計與快速的資料處理已經成為系統設計成功與否的重要因素。如果說AjaxGridView的發展對於Web Client的設計有著極大的衝擊的話，那麼這次的AjaxLayout + AjaxFormView + AjaxGridView 的成功整合，可以說是完全顛覆了以往類似這種View + Master/+ Detail設計，真正地實現了Window Form那般的親和UI和高效的資料處理，大為增進了用戶體驗，使得我們重新回到高效能開發又能兼顧User享受親和的UI的局面。