俺とSmartGWT 〜Theme(skin)の切り替えについて〜
SmartGWTには幾つかのTheme(skin)が用意されており、
それを切り替えることでアプリケーションの外観を変更することができます。
んが、そのThemeをアプリケーション側から切り替える方法が分からなかったので
Showcaseのソースを参照し、その術を探ってみた。
調査対象
現時点での最新版 smartgwt-2.1
ダウンロードはこちらから→smartgwt-2.1.zip
Javaの処理(抜粋)
Showcase.java 408行目辺り
/* Theme(skin)を選択するComboBox(SelectBox)を作成... */ SelectItem selectItem = new SelectItem(); selectItem.setHeight(21); selectItem.setWidth(130); LinkedHashMap<String, String> valueMap = new LinkedHashMap<String, String>(); valueMap.put("EnterpriseBlue", "Enterprise Blue"); valueMap.put("Enterprise", "Enterprise Gray"); valueMap.put("Graphite", "Graphite"); selectItem.setValueMap(valueMap); /* Cookieから初期選択とするTheme(skin)を取得する... */ String currentSkin = Cookies.getCookie("skin_name"); if (currentSkin == null) { currentSkin = "EnterpriseBlue"; } selectItem.setDefaultValue(currentSkin); selectItem.setShowTitle(false); selectItem.addChangeHandler(new ChangeHandler() { /* ComboBoxの選択にてTheme(skin)が変更された場合... */ public void onChange(ChangeEvent event) { /* 新しく選択されたTheme(skin)をCookieに書き込む... */ Cookies.setCookie("skin_name", (String) event.getValue()); /* ブラウザをリロード... */ com.google.gwt.user.client.Window.Location.reload(); } });
JavaScriptの処理(抜粋)
index.html
<!-- 重要 : SmartGWT リソースフォルダの設定 --> <script> var isomorphicDir = "showcase/sc/"; </script> <!-- SmartClient の Core API をインクルード... --> <script src=showcase/sc/modules/ISC_Core.js></script> <!-- SmartClient の その他モジュールをインクルード... --> <script src='showcase/sc/modules/ISC_Foundation.js'></script> <script src='showcase/sc/modules/ISC_Containers.js'></script> <script src='showcase/sc/modules/ISC_Grids.js'></script> <script src='showcase/sc/modules/ISC_Forms.js'></script> <script src='showcase/sc/modules/ISC_RichTextEditor.js'></script> <script src='showcase/sc/modules/ISC_Calendar.js'></script> <script src='showcase/sc/modules/ISC_DataBinding.js'></script> <script> /* Cookieから任意の値を読み取る処理... */ function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } // Theme(skin)の設定をCookieから取得する... var currentSkin = readCookie('skin_name'); if (currentSkin == null) currentSkin = "Graphite"; </script> <script type="text/javascript"> // Theme(skin)をロードする... document.write("<"+"script src=showcase/sc/skins/" + currentSkin + "/load_skin.js?isc_version=7.1.js><"+"/script>"); </script>
Showcase.gwt.xmlファイルの設定内容(抜粋)
<!-- GWT関連... --> <inherits name='com.google.gwt.user.User'/> <inherits name="com.google.gwt.core.Core"/> <inherits name="com.google.gwt.user.History"/> <!-- SmartGWT関連... --> <inherits name="com.smartgwt.SmartGwtNoScript"/> <inherits name="com.smartgwt.tools.SmartGwtTools"/> <!-- 各Themeのリソース... --> <inherits name="com.smartclient.theme.enterprise.EnterpriseResources"/> <inherits name="com.smartclient.theme.enterpriseblue.EnterpriseBlueResources"/> <inherits name="com.smartclient.theme.graphite.GraphiteResources"/>
まとめ
雑感
Theme(skin)の切り替えは、JavaScriptでSmartClientを直接叩いてる様子。
SmartGWTがSmartClientのラッパーであるという性質上、
JavaだけでTheme(Skin)を切り替える処理を記述することは出来ない…？
あと折角なので、以前作成した8パズルをTheme(skin)切り替えに対応させてみました。
こちら→ http://members2.jcom.home.ne.jp/kiri-mochi/SmartGWT/Test/SlidePuzzle.html
