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

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

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

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

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

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

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

	<b:Button type="PRIMARY" block ="true" ui:field="btnTrue" dataTarget="#myModal" dataToggle="MODAL">OK</b:Button>
	<b:Modal title="入力ありがとうございました" closable="true" fade="true" dataBackdrop="STATIC" dataKeyboard="true" b:id="myModal" ui:field="confirm">
	<b:ModalBody>
	<g:HTML>入力ありがとうございました</g:HTML>
	</b:ModalBody>
	<b:ModalFooter>
	<b:Button type="PRIMARY" dataDismiss="MODAL">Close</b:Button>
	</b:ModalFooter>
	</b:Modal>

view raw bModal.ui.xml hosted with ❤ by GitHub