Grails ModalBox Pluginでモーダルなウィンドウを表示

更新 Grails

今回の料理名

モーダルなウィンドウ

材料

  • Grails

作り方

  1. プロジェクトを作成する
  2. ModalBox Plugin をインストールする
  3. Domainクラス作成
  4. 適当な画面を作成
  5. gspに、 ModalBox Plugin を組み込む
  6. 起動！

手順１

grails create-app gstudyを作成してみました。

手順２

grails install-plugin modalboxを実行する。

手順３

grails create-domain-class entryでドメイン作成。以下のようなソースを記述

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

class Entry {
    /*
    static hasMany = [
    ]
    */

    /*
     static belongsTo = [
    ]
    */

    String title
    String body
    Date dateCreated
    Date lastUpdated

    static constraints = {
        title()
        body(size: 0..5000)
        dateCreated(editable: false)
        lastUpdated(editable: false)
    }

    // for select-box, link etc..
    /*
    String toString(){
    }
    */
}

手順４

grails generate-all entryを実行する。

手順５

一覧でレコードを選択したときに、詳細情報をModal Boxで表示するようにしてみる。views/entry/list.gspを修正する。

  • headタグ内に、 <modalbox:modalIncludes /> を記述
  • id選択時のリンク表示部分を <modalbox:createLink controller="entry" action="show" id="${entryInstance.id}" title="Show DATA!" width="500">${fieldValue(bean:entryInstance, field:'id')}</modalbox:createLink> と書き換え

手順６

起動！おお！できた！！めっちゃかっこいい！！

一覧を表示し、データ選択

モーダルなボックスで表示される。

ボックスは右上の×ボタンで閉じることもできます。ボックス内のリンクをクリックすれば、ウィンドウ全体が遷移されます。

情報入力後の更新内容確認表示なんかにいいのではないでしょうか。