Grails3.0.4で、Bootstrap3のレイアウトでscaffoldできるようにする。その１

Grailsでgenerate-allしたときに作られたscaffoldのテンプレートの変更はどうするんだろう？と思って調べようと思っていたところ、たまたまgrails helpを打ってみたら、install-templatesというコマンドを発見。早速打ってみました。

bash
1	`grails` `install-templates`

すると、src/main/templates/scaffolding以下に、ControllerとSpecとViewのテンプレートが出来上がりました。これを編集してから、generate-allすれば、捗りそうです。

今回は、Bootstrap3のCRUDが出る程度までには進めてみたいと思います。

Bootstrap3用のlayoutファイルを作る

まずは、Bootstrap3用のlayoutファイルを作ります。ひとまず、grails-app/views/layouts/main.gspをコピーして、bootstrap3.gspを作りました。これに手を入れていきます。scaffoldっぽいBootstrap3の例ですが、Dashboradかなと思ったので、これに似せていきます。まずはDashboardのソースを見て、コピーしていきましょう。

grails-app/views/layouts/bootstrap3.gsp
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73	`<!DOCTYPE` `html>` `<html` `lang="ja">` `<head>` `<meta` `charset="utf-8">` `<meta` `http-equiv="X-UA-Compatible"` `content="IE=edge">` `<meta` `name="viewport"` `content="width=device-width, initial-scale=1">` `<meta` `name="description"` `content="">` `<meta` `name="author"` `content="">` `<title><g:layoutTitle` `default="Dashboard"` `/></title>` `<asset:stylesheet` `src="application.css"/>` `<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->` `<!--[if lt IE 9]>` `<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>` `<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>` `<![endif]-->` `<g:layoutHead/>` `</head>` `<body>` `<nav` `class="navbar navbar-inverse navbar-fixed-top">` `<div` `class="container-fluid">` `<div` `class="navbar-header">` `<button` `type="button"` `class="navbar-toggle collapsed"` `data-toggle="collapse"` `data-target="#navbar"` `aria-expanded="false"` `aria-controls="navbar">` `<span` `class="sr-only">Toggle navigation</span>` `<span` `class="icon-bar"></span>` `<span` `class="icon-bar"></span>` `<span` `class="icon-bar"></span>` `</button>` `<a` `class="navbar-brand"` `href="#">Project name</a>` `</div>` `<div` `id="navbar"` `class="navbar-collapse collapse">` `<ul` `class="nav navbar-nav navbar-right">` `<li><a` `href="#">Dashboard</a></li>` `<li><a` `href="#">Settings</a></li>` `<li><a` `href="#">Profile</a></li>` `<li><a` `href="#">Help</a></li>` `</ul>` `<form` `class="navbar-form navbar-right">` `<input` `type="text"` `class="form-control"` `placeholder="Search...">` `</form>` `</div>` `</div>` `</nav>` `<div` `class="container-fluid">` `<div` `class="row">` `<div` `class="col-sm-3 col-md-2 sidebar">` `<ul` `class="nav nav-sidebar">` `<li` `class="active"><a` `href="#">Overview <span` `class="sr-only">(current)</span></a></li>` `<li><a` `href="#">Reports</a></li>` `<li><a` `href="#">Analytics</a></li>` `<li><a` `href="#">Export</a></li>` `</ul>` `<ul` `class="nav nav-sidebar">` `<li><a` `href="">Nav item</a></li>` `<li><a` `href="">Nav item again</a></li>` `<li><a` `href="">One more nav</a></li>` `<li><a` `href="">Another nav item</a></li>` `<li><a` `href="">More navigation</a></li>` `</ul>` `<ul` `class="nav nav-sidebar">` `<li><a` `href="">Nav item again</a></li>` `<li><a` `href="">One more nav</a></li>` `<li><a` `href="">Another nav item</a></li>` `</ul>` `</div>` `<div` `class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">` `<g:layoutBody/>` `</div>` `</div>` `</div>` `<asset:javascript` `src="application.js"/>` `</body>` `</html>`

ハイライトしている部分が、主に重要な部分です。
ナビゲーションバーと、サイドバーは今のところ丸々コピーしておいて、メイン部分にgspのlayoutBodyを設定しています。assets系も読み込んでいます。assets系はJSはCoffeeScript、cssはSassを使っています。そちらの設定が気になる人はまずそちらをやってみるといいでしょう。

次に、Dashboard用のcssもコピーしておきました。
cssをコピーしただけですが、拡張子はscssにしてます。

grails-app/assets/stylesheets/_dashboard.scss
001 002 003 004 005 006 007 008 009 010 011 012 013 014 015 016 017 018 019 020 021 022 023 024 025 026 027 028 029 030 031 032 033 034 035 036 037 038 039 040 041 042 043 044 045 046 047 048 049 050 051 052 053 054 055 056 057 058 059 060 061 062 063 064 065 066 067 068 069 070 071 072 073 074 075 076 077 078 079 080 081 082 083 084 085 086 087 088 089 090 091 092 093 094 095 096 097 098 099 100 101 102 103 104 105	`/` ` Base structure` `/` `/ Move down content because we have a fixed navbar that is 50px tall /` `body {` `padding-top:` `50px;` `}` `/` `* Global add-ons` `/` `.sub-header {` `padding-bottom:` `10px;` `border-bottom:` `1px` `solid` `#eee;` `}` `/` `* Top navigation` `* Hide default border to remove 1px line.` `/` `.navbar-fixed-top` `{` `border:` `0;` `}` `/` `* Sidebar` `/` `/ Hide for mobile, show later /` `.sidebar {` `display:` `none;` `}` `@media` `(min-width:` `768px) {` `.sidebar {` `position:` `fixed;` `top:` `51px;` `bottom:` `0;` `left:` `0;` `z-index:` `1000;` `display:` `block;` `padding:` `20px;` `overflow-x:` `hidden;` `overflow-y:` `auto;` `/ Scrollable contents if viewport is shorter than content. /` `background-color:` `#f5f5f5;` `border-right:` `1px` `solid` `#eee;` `}` `}` `/ Sidebar navigation /` `.nav-sidebar {` `margin-right: -21px;` `/ 20px padding + 1px border /` `margin-bottom:` `20px;` `margin-left: -20px;` `}` `.nav-sidebar > li > a {` `padding-right:` `20px;` `padding-left:` `20px;` `}` `.nav-sidebar > .active > a,` `.nav-sidebar > .active > a:hover,` `.nav-sidebar > .active > a:focus {` `color:` `#fff;` `background-color:` `#428bca;` `}` `/` `* Main content` `/` `.main {` `padding:` `20px;` `}` `@media` `(min-width:` `768px) {` `.main {` `padding-right:` `40px;` `padding-left:` `40px;` `}` `}` `.main .page-header {` `margin-top:` `0;` `}` `/` `* Placeholder dashboard ideas` `*/` `.placeholders {` `margin-bottom:` `30px;` `text-align:` `center;` `}` `.placeholders h4 {` `margin-bottom:` `0;` `}` `.placeholder {` `margin-bottom:` `20px;` `}` `.placeholder img {` `display: inline-block;` `border-radius:` `50%;` `}`

これを、application.scssで読み込みます。

grails-app/assets/stylesheets/application.scss
1 2 3	`@import` `'variables';` `@import` `'webjars/bootstrap-sass/3.3.4/assets/stylesheets/bootstrap';` `@import` `'dashboard';`

ここまでで、ひとまずレイアウトファイルの準備は完了かなと思います。

templatesの編集（layout指定の変更）

では、テンプレートのlayout指定を変えていきましょう。
src/main/templates/scaffolding/の以下のファイルたちです。

create.gsp
edit.gsp
index.gsp
show.gsp

これらのファイルの該当箇所を変更します。

before
1	`<meta` `name="layout"` `content="bootstrap3"` `/>`

これで、レイアウトはとりあえず先ほど作ったbootstrap3を使ってくれるようになりました。

次回について

長丁場になりそうなので、連続物にすることにしました。
次回は、index画面に手を入れていきます。