GWTBootstrap3にてModalウィンドウを使う

GWTBootstrap3にてボタンクリックでModalウィンドウを呼び出す方法です。いちおう方法としては、

• ボタンのクリックイベントを検知して表示
• UiBinderのタグにて定義しておく

の2種類の方法があります。個人的には前者の方法が無難かと思いますが、表示するだけならタグだけでもできるようです。

下記にサンプルを書いてますが、まずModalウィンドウについては、新たにxmlファイルを用意する必要はなく、呼び出し元となる画面内で定義しておいてもOK（表示されない）なようです。で、クリックされた時に、Modal::show()とするか、下記の例のようにタグで定義できます。ポイントは、

• b:id属性でModalの名前定義
• ボタン側でdataTarget属性で、呼び出すModalのidを記述

という感じでできるようです。

GWT-Bootstrap: アイコンをFlexTable内で動的に生成する

前記事では、UiBinderで宣言しておいたDivタグに対して、動的にアイコンを埋め込む方法を紹介しました。今度はちょっと応用技です。

• 動的に生成されるFlexTableの各行にアイコンを埋め込む

というのをお題にします。方法は以下の通り。

Element div = DOM.createDiv();
div.setClassName("icon-bookmark-empty");
fTable.setHTML(0, 0, div.toString());

上記のコードでは、div要素を動的に生成し、それをtoStringでHTMLとしてテーブルに埋め込む、、、という1行目と３行目がポイントです。

GWT-Bootstrap: アイコンを利用する

GWT-Bootstrapには、本家と同様にいくつかのアイコンが用意されています。この使い方は、以下の通り。

<i class="icon-asterisk"></i>
<div class="icon-asterisk"></div>

上記のように、UiBinderでiタグやdivタグにアイコンのclass指定をすることで、アイコンが埋め込まれます。spanタグでもいいでしょう。

ただ、アイコンを静的に埋め込んでおくのは芸がなく、やはり動的に埋め込みたいものです。その際は、空の要素のdivタグ等を用意して、それをJava側から制御すればOK。その記述方法は下記の通り。

@UiField
DivElement dd;

dd.setClassName("icon-angle-right");