SmartGWT 概覽(文章來源https://www.ibm.com/developerworks/cn/web/1004_xucy_smartgwt1/)
用一句話來概括，SmartGWT 是封裝了 SmartClient 的 GWT API。而 SmartClient 是一個開源的企業級 Ajax 開發框架。
Google Web Toolkit 的發佈，大大降低了 Java 開發人員進行 Web 開發的門檻。然而 GWT 本身提供的控件及功能相對有限。因此出現了很多第三方開源擴展庫。很多擴展庫都利用 GWT，對現有的 JavaScript 庫做 Java 封裝，爲 GWT 提供了更多可用的 API。SmartGWT 是其中的佼佼者，它的底層使用 SmartClient 這個成熟的 Ajax 庫。SmartGWT 從 2008 年開始開發，一直處在非常活躍的發展狀態中。2009 年 12 月正式發佈了 2.0 版，已經成爲一個成熟的 Web 2.0 開發框架。
SmartGWT 不僅僅是“又一個 Web 控件庫”，它最大的特色在於提供了整合客戶端和服務器端數據的框架。由於底層的 SmartClient 實現了 Ajax 版本的 MVC 模式，這使得在 SmartGWT 中，後臺數據的集成是控件內置的能力，而不是需要用戶自己去組裝的模塊。需要處理多種類型，結構複雜的業務數據是企業級 Web 開發的特點和難點，SmartGWT 對數據操作的關注，大大簡化了企業級 Web2.0 應用開發的門檻。正是這一點讓 SmartGWT 與衆不同。在稍後的介紹中可以看到，一些相當複雜的典型數據應用，在 SmartGWT 中只需很少的代碼即可實現。
總體來看，SmartGWT 有如下特色：
- 豐富的控件。很多較爲複雜的常用界面都被包裝成簡單易用的控件。比如可編輯的樹形表格、查詢常用的過濾器創建器和類似 Google Calendar 的日曆等等。
- 內置的數據整合功能。利用 SmartClient 的 MVC 模式，用戶可以通過定義數據源（Data Source)，很容易地開發出能對服務器端數據進行創建，更新，獲取和刪除操作的界面。甚至只要 10 行以內的代碼。
- 支持 Skin。通過 Skin，用戶能定製整套風格一致的界面方案。只需在線切換，就可以換到全新的風格。
如此強大的功能是否上手也很難呢？否！基於 GWT 的 SmartGWT 是非常容易使用的，即使很炫的效果，實現代碼也非常簡短，Java 開發人員很快就可以做出炫目的 Web 應用。
SmartGWT 有四個不同的發行版：免費的 LGPL 版，收費的專業版，Power 版和企業版。除了許可證的區別外，功能上的區別主要體現在服務器端。LGPL 版是純粹的客戶端 GWT 庫，而其它的收費版本，同時提供了 Servlet，SQL 連接器等服務器端組件。本文主要介紹在 LGPL 版本中包含的客戶端 GWT API。
SmartGWT 提供了極其豐富的 UI 組件。除了傳統的表單、菜單和對話框等組件之外，SmartGWT 還包含了具有排序、分頁、分組、過濾、彙總、打印預覽和實時更新功能的列表，組件元素間的拖拽，手風琴式分區和堆棧式佈局等。可以說，SmartGWT 是一個強大的“高級”組件庫。
下面我們介紹一些有特色的組件。這些例子都來自於 SmartGWT 發行版內自帶的 Showcase 這個示例應用。
- Pick Tree
類似多級菜單的樹形選擇器。
Tree tree = new Tree(); … PickTreeItem departmentItem = new PickTreeItem(); departmentItem.setValueTree(tree); |
- TreeGird
樹和表格的組合，處理過複雜多級數據的人都想要的控件！
TreeGrid treeGrid = new TreeGrid();
TreeGridField nameField = new TreeGridField("Name", 150);
…
treeGrid.setFields(nameField, jobField, employeeTypeField,employeeStatusField,
salaryField, genderField, maritalStatusField);
|
- 類似 Google Calendar 的日曆控件
Calendar calendar = new Calendar(); DataSource eventDS = new DataSource(); ... calendar.setDataSource(eventDS); |
下面來看兩個複雜一點的例子。
- 支持數據過濾的表格
如下圖所示，ListGrid 控件中顯示的數據能根據上面的 FilterBuilder 控件所設置的條件進行過濾。查詢條件可以是一個或多個，查詢條件之間可以選擇 and、or 和 not 三種邏輯運算符。
FilterBuilder filterBuilder = new FilterBuilder();
ListGrid countryGrid = new ListGrid();
DataSource worldDS = new DataSource();
...
filterBuilder.setDataSource(worldDS);
countryGrid.setDataSource(worldDS);
IButton filterButton = new IButton("Filter");
filterButton.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
countryGrid.filterData(filterBuilder.getCriteria());
}
});
|
- 支持公式計算和總結的表格
以下是展示國家人口面積等數據的表格。如果想顯示人口密度，顯然是需要計算人口除以面積。
實現如上表格的是 SmartGWT 的 ListGrid 控件，它內置了對公式和加總的支持。只需增加以下兩行代碼：
countryGrid.setCanAddFormulaFields(true); countryGrid.setCanAddSummaryFields(true); |
在 Show Formula builder 這個按鈕中，我們只需要調用一個方法，一行代碼：
public void onClick(ClickEvent event) {
countryGrid.addFormulaField();
}
|
SmartGWT 爲你完成了其它全部功能。你只需點下按鈕，這時會顯示如下公式字段創建對話框，很容易即可實現人口密度這個計算而來的字段。
保存之後，即可在原先的表格上看到你添加的字段。是不是太容易了？
看了以上這些非常吸引人的 UI 組件，你是不是已經迫不及待開始想要使用 SmartGWT 了？
圖形控件和服務器端數據集成是 SmartGWT 的特色。SmartGWT 中包含一系列以數據爲中心的 UI 組件。比如 ListGrid，TreeGrid，DynamicForm 等等。利用這些控件，用戶可以很容易地開發出功能全面的數據操作界面。如下圖所示，可以對數據進行編輯和增加的應用，只需要幾十行代碼就能實現。
能支持這樣強大功能是因爲 SmartGWT 中封裝了 SmartClient 的 MVC（模型 - 視圖 - 控制器）模式。這是 SmartClient 這一 Ajax 框架的獨門絕技。實現數據整合的核心是控制器類數據源（DataSource），它爲 UI 組件這樣的視圖和後臺數據模型之間架起了互通的橋樑。
由上圖，從客戶端到服務器的數據訪問大體分爲兩個部分：
- UI 組件和數據源對象的交互
- 數據源對象和服務器實際數據提供者的交互
在 SmartGWT 中，第一種交互稱爲 數據綁定，第二種交互稱爲 數據集成。在本系列的後續兩篇文章中，我們將分別介紹這兩部分技術及應用。
數據源對象看起來像關係數據庫，在數據源內支持定義數據模型。數據源提供的每條數據稱爲一條記錄（Record），對應於數據庫中的一行。數據源內可以定義字段（Field），對應於數據庫中的列。不僅能定義每個字段的類型，還可以定義數據間關係，比如通過主外鍵關係來確定父子表。可見數據源類是一個完整的關係型數據的抽象表示。爲 UI 組件配置數據源後，對 UI 上的操作，數據源會自動進行相關數據的創建，更新，獲取和刪除等基本操作。
數據源和 UI 組件的鬆耦合模式帶來的另一個優勢是對於同一個數據源，可以同時有多種表示方式，而用戶在任一表示方式中對該數據源進行的操作，能同時更新到其它表示方式中，保持顯示數據的一致性。如下圖所示，員工數據在樹形表格控件和表格控件中同時顯示，在其中一個控件中對員工數據做修改，其更新能自動同步顯示到另一個控件中。
根據用戶的定製，數據源對象可以讀取 XML、JSON 或者數據庫等等服務器端數據。它把實際的數據來源和你的應用隔離開。帶來的好處之一就是易於測試。在測試的時候，你可以直接在數據源裏返回測試數據，而不用訪問真正數據源。使得測試代碼可以快速運行。而在真正運行時，切換不同的數據來源也非常簡單。
在 SmartGWT 的不同發行版中，最大的不同就是在服務器端的支持能力。在企業版中，提供了對常用的 Java 服務器端數據訪問技術的集成，比如 Hibernate。這樣用戶可以利用現有的 Java 數據服務開發新應用，或者快速爲現有的 Java 數據應用打造一個新的 SmartGWT 風格的界面。
SmartGWT 是基於 GWT 的 API，因此我們可以利用 GWT 所提供的開發工具來進行 SmartGWT 的開發。
Google 提供了方便 GWT 開發的 Eclipse 插件—— Google plugin for Eclipse。該插件可以支持開發 GWT 和 Google App Engine 程序，我們這裏只需利用其中的 GWT 部分。
- 安裝該插件，以 Eclipse 3.5 爲例。使用 Eclipse 中的軟件更新功能，通過以下更新站點來安裝該插件：http://dl.google.com/eclipse/plugin/3.5
- 下載 SmartGWT 2.0 壓縮包，並解壓到本地硬盤。
- 使用 Google 插件提供的嚮導，創建基於 GWT 的 Web 項目：
圖 11. 創建 GWT 項目![圖 11. 創建 GWT 項目]()
- 配置 SmartGWT 支持。首先將解壓後 SmartGWT 目錄中的 smartgwt.jar 加到該項目的類路徑中去。然後在 GWT 模塊描述文件（如上圖所建項目中應該是在源文件夾下的 com/sample/MyFirstSmartGWTProj.gwt.xml）增加一行：
清單 7. 導入 SmartGWT 包<inherits name="com.smartgwt.SmartGwt" />
基本配置至此已經完成，下一步，你就可以開始 SmartGWT 之旅。
學習 SmartGWT 最容易上手的方法就是探索發行版中的 Showcase 實例工程。在解壓後的 SmartGWT 目錄中，可以找到 Sample/Showcase/war/index.html，用瀏覽器打開即可在本地運行 SmartGWT Showcase 應用。
Showcase 應用的左邊欄分類列出了對各種功能的演示。選中某個功能，會在右邊打開新的演示。在每個演示的右上角，都有 View Source 這個按鈕。點擊它會彈出窗口顯示代碼。這裏顯示的代碼是完整的 SmartGWT 應用的代碼，直接將這些代碼 copy 到你的項目中，即可單獨運行使用。如下圖所示，非常方便實用。
在生成的項目中，包含了可直接運行的 GWT 示例代碼，並且有相應和項目同名的運行設置。你可以通過 Eclipse 的運行下拉菜單來選擇運行這個 GWT 程序。讓我們改造一下該項目，並嘗試加入一些 SmartGWT 的實例代碼。假設我們的應用模塊名字是 Hello。
首先，修改項目 war 目錄下的和模塊名同名的 html 文件，即 Hello.html，這是該 Web 應用的入口網頁。我們按自己的需求來改造它，先清空 <body> 標籤，將原有的標題改成自己需要的或者去掉也可以。重要得是，需要在 <head> 標籤中，定義 SmartGWT 所需的全局變量 isomorphicDir，必須在調用其他 javascript 前，設置該變量爲“模塊名 /sc/”，SmartGWT 纔可以正確的找到所需的資源。
<script> var isomorphicDir = "Hello/sc/"; </script> |
然後，我們選擇一個 Showcase 中的簡單示例，比如 Forms 類別下的 Various Controls。通過 View Source 按鈕打開代碼，全部拷貝。然後打開項目中的入口類，即 Hello.java，將代碼全部貼入，將類名改回爲 Hello，使之編譯通過。
這時運行看一下效果，怎麼樣，跟 Showcase 裏看得的一模一樣吧？接下里，你可以嘗試修改一些代碼來學習它的使用。
本文概括介紹了 SmartGWT 這一企業級 Web2.0 開發的新框架。SmartGWT 的強大功能是無法在這樣一篇短文中詳細描述的。我們將在後續文章中，通過示例，進一步介紹如何利用 SmartGWT 中的高級功能開發出複雜的企業 Web 應用。
