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

2015/08/14 01:22 | カテゴリー Grails, groovy | タグ | コメント

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

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のソースを見て、コピーしていきましょう。

<!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にしてます。

/*
 * 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で読み込みます。

@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

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

<meta name="layout" content="bootstrap3" />

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

次回について

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

このエントリーをはてなブックマークに追加

関連する投稿一覧：

  1. ポタリング（双海方面）
  2. 白糸の滝ヒルクライム　2度目
  3. 三坂峠リベンジ！！
  4. 白糸の滝ヒルクライムに挑戦！
  5. 三坂峠入り口まで
カテゴリー Grails, groovy | タグ | パーマリンク

コメント・トラックバック一覧

  1. Pingback: Grails3.0.4で、Bootstrap3のレイアウトでscaffoldできるようにする。その２ | 自転車で通勤しましょ♪ブログ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です