huruyosi’s blog

プログラミングとかインフラとかのメモです。

spring boot その5 - SB Admin2 を組み込む

実装したソースは https://github.com/huruyosiathatena/springboot/tree/4589c56c81f9907a55356d44704a3ff08235fe39 にあります。

レイアウトを SB Admin2 に変更

レイアウトでもう少し楽するために SB Admin2 を組み込みます。2015年8月2日時点でSB Admin2のバージョンは 1.0.7でした。

startbootstrap.com

SB Admin2から必要なファイルをコピーする方針

startbootstrap-sb-admin-2-1.0.7.zip の内容

SB Admin2 をダウンロードしてzipの中を見ると、 SB Admin2自体と 利用しているコンポーネントが入っていました。

startbootstrap-sb-admin-2-1.0.7 
  +- bower_components
  | +- bootstrap
  | | +- dist
  | | +- fonts
  | | +- grunt
  | | +- js
  | | +- less
  | +- bootstrap-social
  | ~ 省略 ~
  + dist
  |  +- css
  |  +- js
  +- js
  +- less
  +- pages
  +- index.html

Spring Bootのフォルダ構成

public フォルダに sbadmin2 フォルダを作成して、各distフォルダのファイルをコピーします。

SB Admin2の pages/blank.html を元にして layout を作成

まずは、簡単な pages/blank.html を再現しつつ、ブランクページを作成します。

pages/blank.htmlをコピー

startbootstrap-sb-admin-2-1.0.7.zip の pages/blank.html を bootstrap プロジェクトの src/main/resources/templates フォルダに sbadmin2.html という名前でコピーします。

html タグに xmlns を追加

thymeleafを利用するために xmlns を追加します。

<html lang="en"
xmlns:th="http://www.thymeleaf.org" 
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<div>layout:fragment </div> でコンテンツが入る場所を指定する

<div id="page-wrapper">の子にコンテンツを入れます

        <!-- Page Content -->
        <div id="page-wrapper">
            <div layout:fragment="content"></div>
        </div>
        <!-- /#page-wrapper -->

コントローラー作成

新しく SbAdmin2Controller を作成し、blankアクションを作成します。

package com.hatenablog.huruyosi.springboot.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
@RequestMapping("/sbadmin2/")
public class SbAdmin2Controller {
    
    @RequestMapping("/blank")
    public ModelAndView blank() {
        return new ModelAndView("SbAdmin2Controller/blank");
    }
}

テンプレート SbAdmin2Controller/blank.html を作成

新しく src/main/resources/templates/SbAdmin2Controller/blank.html を作成します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorator="sbadmin2">
<body>
  <div layout:fragment="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <h1 class="page-header">Blank</h1>
                    </div>
                    <!-- /.col-lg-12 -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.container-fluid -->
   </div>
</body>
</html>

ブラウザからアクセス

アプリを起動して ブラウザから http://localhost:8080/sbadmin2/blank にアクセスします。 metaタグとinputタグに閉じタグがないのでテンプレートのコンパイルエラーが発生します。 テンプレートモードをLEGACYHTML5することで、閉じタグの修正をせずとも利用できるようすが、今回は閉じタグを追加しました。

qiita.com

閉じタグを直し終わるとがっかりするレイアウトで表示されます。css へのリンクを直していないからです。 f:id:huruyosi:20150802110307p:plain

css と js のリンクを直しつつ、startbootstrap-sb-admin-2-1.0.7から 依存するjsとcssをコピー

崩れているレイアウトを直していきます。

SB Admin2の css と js

startbootstrap-sb-admin-2-1.0.7/dist の css と js フォルダを プロジェクトの public/sbadmin2 にコピーします。

そして、src/main/resources/templates/sbadmin2.html の cssとjsの読み込みを修正します。

    <!-- Custom CSS -->
    <link th:href="@{/sbadmin2/css/sb-admin-2.css}" rel="stylesheet" />

src/main/resources/templates/sbadmin2.htmlの最後の方にあります。

    <!-- Custom Theme JavaScript -->
    <script th:src="@{/sbadmin2/js/sb-admin-2.js}"></script>

依存するコンポーネント

bower_components フォルダ配下のコンポーネントを直していきます。

startbootstrap-sb-admin-2-1.0.7/bower_components/jquery/dist をプロジェクトの public/sbadmin2/bower_components/jquery へコピーし、 startbootstrap-sb-admin-2-1.0.7/startbootstrap-sb-admin-2-1.0.7/bower_components/bootstrap/dist を プロジェクトの public/sbadmin2/bower_components/bootstrap へコピーします。

そして、src/main/resources/templates/sbadmin2.html のcss と js の読み込みを修正します。

    <!-- Bootstrap Core CSS -->
    <link th:href="@{/sbadmin2/bower_components/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />

~途中省略 ~

    <!-- jQuery -->
    <script th:src="@{/sbadmin2/bower_components/jquery/jquery.min.js}"></script>

    <!-- Bootstrap Core JavaScript -->
    <script th:src="@{/sbadmin2/bower_components/bootstrap/js/bootstrap.min.js}"></script>

再度ブラウザからアクセスします。それっぽい見た目になってきました。 f:id:huruyosi:20150802112513p:plain

同様の方法で metisMenu と font-awesome を修正します。font-awesome はdist フォルダがないので、cssとfonts フォルダをコピーしました。 これで見られる状態になりました。 f:id:huruyosi:20150802113427p:plain

プロジェクトの public の状態

f:id:huruyosi:20150802113735p:plain

blank 以外のページ

作業の流れ

startbootstrap-sb-admin-2-1.0.7/pages のhtmlファイルを組み込んでいきます。

  1. src/main/resources/templates/SbAdmin2Controller にファイルをコピー
  2. <html>の属性をblankと同じにします。
  3. link タグで読み込んでいるcss のうち、レイアウトの /src/main/resources/templates/sbadmin2.html で読み込んでいるものを削除し、残ったものはページ固有のcssファイルなので href属性をth:href属性に書き換えます、
  4. bodyタグの<div id="page-wrapper"><div layout:fragment="content">に置き換え、親の<div id="wrapper">の開始タグと終了タグを削除します。
  5. bodyタグのnavタグを削除します。
  6. bodyタグの最後にある <script>タグのうち、レイアウトの /src/main/resources/templates/sbadmin2.html で読み込んでいるものを削除します。残りはページ固有のものなので、レイアウトに反映できるようにします。
  7. コントローラーにアクションを追加します。

ページ固有のJavaScriptをレイアウトに反映する。

レイアウトの /src/main/resources/templates/sbadmin2.html に JavaScriptを記載するための fragmentを作成します。

    <!-- Metis Menu Plugin JavaScript -->
    <script th:src="@{/sbadmin2/bower_components/metisMenu/metisMenu.min.js}"></script>

    <div layout:fragment="moreScripts" th:remove="tag"></div>
    
    <!-- Custom Theme JavaScript -->
    <script th:src="@{/sbadmin2/js/sb-admin-2.js}"></script>

JavaScript用のfragmentができたので、コンテンツのテンプレートに記載します。たとえばtales.html ではこの様にしました。

<div layout:fragment="moreScripts">
    <!-- DataTables JavaScript -->
    <script th:src="@{/sbadmin2/bower_components/datatables/media/js/jquery.dataTables.min.js}"></script>
    <script th:src="@{/sbadmin2/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js}"></script>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
                responsive: true
        });
    });
    </script>
</div>

huruyosi.hatenablog.com

login.html 用のレイアウト

login.html ではナビゲーションを表示しないレイアウトを作成しました。