IgniteUIにはLayoutManagerなる機能がついています。こいつを使うとJavaのSwingのBorderLayoutみたいなレイアウトが簡単にできるようになっています。因みに、Bootstrapみたいなグリッドレイアウトもサポートしています。
ここでは、お試しとしてBorderLayoutをやってみたいと思います。
Spring Bootの下準備
Spring Bootの下準備としてpom.xmlを編集します。Thymeleafも使うので、以下のものをpom.xmlに追加します。
<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.2.5.RELEASE</version></parent><properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency></dependencies>
Appクラスを準備します。
package okazuki.layoutmanager; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplicationpublicclass App { publicstaticvoid main(String[] args) { SpringApplication.run(App.class, args); } }
IgniteUIのファイルの追加
Infragisticsの製品をインストールしたフォルダにIgniteUIというフォルダが出来てるので、そこにあるjsとcssを/main/webappの下にコピーします。
その他JSライブラリの追加
以下のライブラリを追加します。
- jquery
- jquery-ui
- modernizr
コントローラとページの準備
コントローラとページを準備します。今回はレイアウトを確認するだけなので、何もしないコントローラと、単純なページのみです。
package okazuki.layoutmanager; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; @Controller@RequestMapping("/") publicclass HomeController { @RequestMappingpublic String index() { return"index"; } }
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org"><head><metacharset="UTF-8" /><title>Insert title here</title></head><body></body></html>
必要なscriptファイルの読み込み
headタグに必要なscriptの読み込みを行います。
<scripttype="text/javascript"src="/js/modernizr.js" th:src="@{/js/modernizr.js}"></script><scripttype="text/javascript"src="/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script><scripttype="text/javascript"src="/js/jquery-ui.min.js" th:src="@{/js/jquery-ui.min.js}"></script><scripttype="text/javascript"src="/js/infragistics.loader.js" th:src="@{/js/infragistics.loader.js}"></script><linkrel="stylesheet"type="text/css"href="/css/main.css" th:href="@{/css/main.css}"></link>
midernizr, jquery, jquery-uiとinfragisticsのloaderを読み込んでいます。main.cssはbodyタグが画面いっぱいに広がるようにしたものです。
@CHARSET "UTF-8"; html,body{margin: 0; padding: 0; width: 100%; height: 100%; }
LayoutManagerの使用
やっと本題です。Ingragitsics IgniteUIのLayoutManagerは、left, right, header, footer, centerというクラスのついたdivタグをそれぞれいい感じにレイアウトしてくれる機能を持っています。
なので、基本的にこんな感じになります。
<divid="layout"style="width: 100%; height: 100%;"><divclass="left"></div><divclass="right"></div><divclass="header"></div><divclass="footer"></div><divclass="center"></div></div>
適当にものを置いてみました。
<divid="layout"style="width: 100%; height: 100%;"><divclass="left"><ul><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li><li>Menu</li></ul></div><divclass="right">おまけ</div><divclass="header"><h2>てすとアプリ</h2></div><divclass="footer">こぴーらいと</div><divclass="center"><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaa</p></div></div>
これを並び替えるにはJavaScriptでおまじないをしてやる必要があります。Infragisticsのloaderで必要なJSやcssを読み込んだあと、igLayoutManagerを#layoutに対して呼んでやる必要があります。
<scripttype="text/javascript" th:inline="javascript">/*<![CDATA[*/ $.ig.loader({ scriptPath : /*[[@{/js}]]*/"/js", cssPath : /*[[@{/css}]]*/"/css", resources : "igLayoutManager", ready : function(){ console.log("igLayoutManager loaded"); $("#layout").igLayoutManager({ layoutMode : "border", borderLayout : { leftWidth : "300px", rightWidth : "10%"}}); console.log("layout completed");}});/*]]>*/</script>
igLayoutManagerはlayoutModeと、borderLayoutパラメータを受け取ります。ここらへんの細かい指定方法はここを見るといいです。
あと、デフォルトでheaderやfooterはセンタリングされるみたいなので左よせにスタイルで調整しました。main.cssを以下のように編集します。単純に#layoutの中のheaderクラスとfooterクラスをいじってるだけですね。
@CHARSET "UTF-8"; html,body{margin: 0; padding: 0; width: 100%; height: 100%; }#layout.header, #layout.footer{text-align: left; }
実行結果
こんな感じになります。ひな形としていい感じ。
リサイズへの対応
ただ、このままだと画面のリサイズ時にフッター位置が画面サイズに追従してくれません。とりあえず、こんなJavaScriptで回避したけどあってるのだろうか…
$(window).resize(function() { $("#layout").css("height", $(window).height() + "px"); });