SmartGWT 入門

　　SmartGWT 概覽(文章來源https://www.ibm.com/developerworks/cn/web/1004_xuc y_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。 豐富的 UI 組件
　　SmartGWT 提供了極其豐富的 UI 組件。除了傳統的表單、菜單和對話框等組件之外，SmartGWT 還包含了具有排序、分頁、分組、過濾、彙總、打印預覽和實時更新功能的列表，組件元素間的拖拽，手風琴式分區和堆棧式佈局等。可以說，SmartGWT 是一個強大的"高級"組件庫。
　　下面我們介紹一些有特色的組件。這些例子都來自於 SmartGWT 發行版內自帶的 Showcase 這個示例應用。 類似多級菜單的樹形選擇器。 圖 1. 樹形選擇器
　　
　　清單 1. 樹形選擇器代碼實例 樹和表格的組合，處理過複雜多級數據的人都想要的控件！ 圖 2. 樹形表格
　　
　　清單 2. TreeGrid 代碼實例 圖 3. 日曆
　　
　　清單 3. Calendar 代碼實例 下面來看兩個複雜一點的例子。 如下圖所示，ListGrid 控件中顯示的數據能根據上面的 FilterBuilder 控件所設置的條件進行過濾。查詢條件可以是一個或多個，查詢條件之間可以選擇 and、or 和 not 三種邏輯運算符。 圖 4. 數據過濾器
　　
　　清單 4. 數據過濾代碼實例 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() ); } });
　　以下是展示國家人口面積等數據的表格。如果想顯示人口密度，顯然是需要計算人口除以面積。 圖 5. 原始表格
　　
　　實現如上表格的是 SmartGWT 的 ListGrid 控件，它內置了對公式和加總的支持。只需增加以下兩行代碼： 清單 5. 公式加總代碼實例 在 Show Formula builder 這個按鈕中，我們只需要調用一個方法，一行代碼： 清單 6. 公式編輯支持代碼實例 SmartGWT 爲你完成了其它全部功能。你只需點下按鈕，這時會顯示如下公式字段創建對話框，很容易即可實現人口密度這個計算而來的字段。