2009/01/16

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

今回の料理名

モーダルなウィンドウ

材料

  • grails

作り方

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

手順1

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

手順2

grails install-plugin modalboxを実行する。

手順3

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

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(){
    }
    */
}

手順4

grails generate-all entryを実行する。

手順5

一覧でレコードを選択したときに、詳細情報を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>と書き換え

手順6

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

一覧を表示し、データ選択
モーダルなボックスで表示される。

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

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

0 件のコメント:

コメントを投稿