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

前回の続きです。
今回は、scaffoldのindex.gspを編集していきます!

<!DOCTYPE html>
<html>
    <head>
        <meta name="layout" content="bootstrap" />
        <g:set var="entityName" value="\${message(code: '${propertyName}.label', default: '${className}')}" />
        <title><g:message code="default.list.label" args="[entityName]" /></title>
    </head>
    <body>
        <div id="list-${propertyName}" class="content scaffold-list" role="main">
            <div class="page-header">
                <h1><g:message code="default.list.label" args="[entityName]" /></h1>
            </div>
            <g:link class="btn btn-primary" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link>
            <g:if test="\${flash.message}">
                <div class="alert alert-info" role="alert">\${flash.message}</div>
            </g:if>
            <f:table collection="\${${propertyName}List}" />

            <div class="pagination">
                <g:paginate total="\${${propertyName}Count ?: 0}" />
            </div>
        </div>
    </body>
</html>

とりあえず書き換えたのは、上記のハイライト部分です。
前回伝えた通り、meta name=”layout”のcontentをbootstrapに変更しています。また、class名をBootstrap3のものに変えたり、page-headerで囲んだりしています。

f:tableってなんぞ?

これですが、Grailsのfieldsプラグインによって作られているTagLibです。いきなり登場するので、正直わけがわかりませんでした。

参考ページ
qiita: Groovyのちょっとしたこと「GrailsのScaffoldingページのGSPに出てくる謎の<f:table />タグ」

このqiitaの記事のコメントによると、fieldsプラグインによって作られるテーブルのテンプレートも定義すれば書き換えられるようです。うーむ、罠だ。Grailsはちゃんとドキュメント作っておいてほしいですねぇ…。

f:tableで参照されるテンプレートを作る

grails-app/views/templates/_fields/_table.gspを定義して、作り直せばいいそうです。
作り直すというと大仰ですが、Bootstrap3のclassをテーブルに反映させたいので、githubからの参照コードを丸々書いて、クラス名だけ反映させておきました。

<table class="table table-striped">
    <thead>
    <tr>
        <g:each in="${domainProperties}" var="p" status="i">
            <g:set var="propTitle">${domainClass.propertyName}.${p.name}.label</g:set>
            <g:sortableColumn property="${p.name}" title="${message(code: propTitle, default: p.naturalName)}" />
        </g:each>
    </tr>
    </thead>
    <tbody>
    <g:each in="${collection}" var="bean" status="i">
        <tr>
            <g:each in="${domainProperties}" var="p" status="j">
                <g:if test="${j==0}">
                    <td><g:link method="GET" resource="${bean}"><f:display bean="${bean}" property="${p.name}" displayStyle="${displayStyle?:'table'}" /></g:link></td>
                </g:if>
                <g:else>
                    <td><f:display bean="${bean}" property="${p.name}"  displayStyle="${displayStyle?:'table'}" /></td>
                </g:else>
            </g:each>
        </tr>
    </g:each>
    </tbody>
</table>

table-stripedをあてたら、自動的に奇数行・偶数行で背景色が変わるので、tr部分でクラスをつける処理は削除しています。

ページネーションはどうするの?

ページネーションはg:paginateっていうTagLibがあるのですが、これ、固定のhtmlになっているようで、Bootstrap3のページネーションを気軽に当てる方法がありません。css側をいじってGrailsのページネーションに合わせるか、新しいTagLibを作ってBootstrap3のページネーションに合わせるか、しかないと思いますが、私的には後者にしたいなぁというところですね。といってもTagLibとかまだ作ったこともないのですが…(しかも車輪の再発明感が半端ない)。

Grailsはここ直したほうがいいんじゃないですかねぇ…。デフォルトはこのままでもいいから…。

Bootstrap3化には大きな支障が出ますが、とりあえずはページネーションは今回は放っておきます。他のscaffoldを先に直すことを優先していきます!

今回のまとめ

  • src/main/templates/scaffolding/index.gspを修正しよう。
  • fieldsプラグインが突然登場するので注意しよう。
  • g:paginateはイケてない…。今回は放っておく。

次回の予定

次は新規作成画面を修正していきたいと思います。


カテゴリー Grails, groovy | タグ | パーマリンク

コメントを残す

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