spring boot その5 - SB Admin2 を組み込む
実装したソースは https://github.com/huruyosiathatena/springboot/tree/4589c56c81f9907a55356d44704a3ff08235fe39 にあります。
レイアウトを SB Admin2 に変更
レイアウトでもう少し楽するために SB Admin2 を組み込みます。2015年8月2日時点でSB Admin2のバージョンは 1.0.7でした。
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することで、閉じタグの修正をせずとも利用できるようすが、今回は閉じタグを追加しました。
閉じタグを直し終わるとがっかりするレイアウトで表示されます。css へのリンクを直していないからです。
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>
再度ブラウザからアクセスします。それっぽい見た目になってきました。
同様の方法で metisMenu と font-awesome を修正します。font-awesome はdist フォルダがないので、cssとfonts フォルダをコピーしました。
これで見られる状態になりました。
プロジェクトの public の状態
blank 以外のページ
作業の流れ
startbootstrap-sb-admin-2-1.0.7/pages のhtmlファイルを組み込んでいきます。
- src/main/resources/templates/SbAdmin2Controller にファイルをコピー
<html>の属性をblankと同じにします。- link タグで読み込んでいるcss のうち、レイアウトの /src/main/resources/templates/sbadmin2.html で読み込んでいるものを削除し、残ったものはページ固有のcssファイルなので
href属性をth:href属性に書き換えます、 - bodyタグの
<div id="page-wrapper">を<div layout:fragment="content">に置き換え、親の<div id="wrapper">の開始タグと終了タグを削除します。 - bodyタグの
navタグを削除します。 - bodyタグの最後にある
<script>タグのうち、レイアウトの /src/main/resources/templates/sbadmin2.html で読み込んでいるものを削除します。残りはページ固有のものなので、レイアウトに反映できるようにします。 - コントローラーにアクションを追加します。
ページ固有の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>
login.html 用のレイアウト
login.html ではナビゲーションを表示しないレイアウトを作成しました。
