かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Spring BootでInfragistics IgniteUIのLayoutManagerを使う

Spring Boot Java

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;

@SpringBootApplication
public class App {
    public static void 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("/")
public class HomeController {
    @RequestMapping
    public String index() {
        return "index";
    }
}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>

</head>
<body>

</body>
</html>

必要なscriptファイルの読み込み

headタグに必要なscriptの読み込みを行います。

<script type="text/javascript" src="/js/modernizr.js"
    th:src="@{/js/modernizr.js}"></script>
<script type="text/javascript" src="/js/jquery.min.js"
    th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" src="/js/jquery-ui.min.js"
    th:src="@{/js/jquery-ui.min.js}"></script>

<script type="text/javascript" src="/js/infragistics.loader.js"
    th:src="@{/js/infragistics.loader.js}"></script>

<link rel="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タグをそれぞれいい感じにレイアウトしてくれる機能を持っています。

なので、基本的にこんな感じになります。

<div id="layout" style="width: 100%; height: 100%;">
    <div class="left"></div>
    <div class="right"></div>
    <div class="header"></div>
    <div class="footer"></div>
    <div class="center"></div>
</div>

適当にものを置いてみました。

<div id="layout" style="width: 100%; height: 100%;">
    <div class="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>
    <div class="right">おまけ</div>
    <div class="header">
        <h2>てすとアプリ</h2>
    </div>
    <div class="footer">こぴーらいと</div>
    <div class="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に対して呼んでやる必要があります。

<script type="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パラメータを受け取ります。ここらへんの細かい指定方法はここを見るといいです。

Ignite UI™ API Documentation

あと、デフォルトで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;
}

実行結果

こんな感じになります。ひな形としていい感じ。

f:id:okazuki:20150707204836p:plain

リサイズへの対応

ただ、このままだと画面のリサイズ時にフッター位置が画面サイズに追従してくれません。とりあえず、こんなJavaScriptで回避したけどあってるのだろうか…

$(window).resize(function() {
    $("#layout").css("height", $(window).height() + "px");
});