#Who
GWT SDK 2.6.1
Bootstrap 3.3.4
#What
GWTとBootstrapを組み合わせてUIを作成する。
#When, Where
クライアントサイド
#Why
Javascriptで大きめのプログラムを書くのは大変なので、GWTを使って書きたい。
Javascriptを正しく書くための知識がない。
CSSの知識もほぼ0なので、フレームワークがあるのであれば利用したい。
→GWTとBootstrapを組み合わせて利用する方法を調査する。
#How
htmlに
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">と
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
を追加。
jQueryがないというエラーが出るのでそれも追加。
GwtSample.html
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet">
<title>GwtSample</title>
<script type="text/javascript" language="javascript"
src="gwtsample/gwtsample.nocache.js"></script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
style="position: absolute; width: 0; height: 0; border: 0"></iframe>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script
src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
UiBinderを使ってUIを作成する。
Bootstrapを利用するためには適切なclassを追加してやればよい。
addStyleNamesで要素にclassを追加することができる。
また、g:Buttonで任意のhtml要素を包含することができるので、Bootstrapの例(http://getbootstrap.com/components/)
にあるようにspanを包含し、絵付きのボタンを作成することができる。
GwtSample.ui.xml
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
</ui:style>
<g:HTMLPanel>
Hello,
<g:Button addStyleNames='btn btn-default' ui:field="button">
<span aria-hidden="true" class="glyphicon glyphicon-eye-open"></span>
</g:Button>
</g:HTMLPanel>
</ui:UiBinder>
DesignタブでCSS適用後のUIが確認できる。
ButtonのクリックイベントはGWTで処理する。
GwtSample.java
public class GwtSample extends Composite {
private static GwtSampleUiBinder uiBinder = GWT.create(GwtSampleUiBinder.class);
interface GwtSampleUiBinder extends UiBinder<Widget, GwtSample> {
}
public GwtSample() {
initWidget(uiBinder.createAndBindUi(this));
}
@UiField
Button button;
public GwtSample(final String firstName) {
initWidget(uiBinder.createAndBindUi(this));
button.setText(firstName);
}
@UiHandler("button")
void onClick(final ClickEvent e) {
Window.alert("Hello!");
}
}