2012年3月14日水曜日

grailsとjQuery Mobileでダイアログを表示する

grailsとjQuery Mobileでダイアログを表示するには、以下の手順を実行します。

1. ApplicationResources.groovyでモジュールを宣言
modules = {
    application {
        resource url:'js/application.js'
    }
    // jQuery mobileのモジュールを宣言
    jquerymobile {
      dependsOn 'jquery'
      resource url: 'js/jquery.mobile-1.1.0-rc.1.min.js', disposition:'head'
      resource url: 'css/jquery.mobile-1.1.0-rc.1.min.css'
    }
}
jquery.mobile-1.1.0-rc.1.min.jsはweb-app/jsに、jquery.mobile-1.1.0-rc.1.min.cssはweb-app/cssに
画像類はweb-app/css/imagesに配置します。

2. web-app/WEB-INF/sitemesh.xmlに以下のようにexcludes要素を追加します。 
<sitemesh>
<!-- sitemesh除外 -->
<excludes file="/WEB-INF/sitemesh-excludes.xml" />
    <page-parsers>
        <parser content-type="text/html"
            class="org.codehaus.groovy.grails.web.sitemesh.GrailsHTMLPageParser" />
        <parser content-type="text/html;charset=ISO-8859-1"
            class="org.codehaus.groovy.grails.web.sitemesh.GrailsHTMLPageParser" />
        <parser content-type="text/html;charset=UTF-8"
            class="org.codehaus.groovy.grails.web.sitemesh.GrailsHTMLPageParser" />
    </page-parsers>

    <decorator-mappers>
        <mapper class="org.codehaus.groovy.grails.web.sitemesh.GrailsLayoutDecoratorMapper" />
    </decorator-mappers>
</sitemesh>
3. sitemesh-excludes.xmlを以下のように作成し、web-app/WEB-INF/に配置します。 
<?xml version="1.0" encoding="UTF-8"?>
<sitemesh-excludes>
  <excludes>
    <pattern>/*</pattern>
  </excludes>
</sitemesh-excludes>
4. index.gspを以下のように変更します。
<!DOCTYPE html> 
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>grails and jQuery mobile</title> 
  <style type="text/css" media="screen">
/* headerが...で省略されるのを防ぐ  */
body .ui-header .ui-title {
  white-space: normal;
  margin-left: 0;
  margin-right: 0;
}
  </style>
  <!-- jquerymobileを使用 -->
  <r:require module="jquerymobile"/>
  <r:layoutResources />
</head> 
<body> 
  <div data-role="page">
    <div data-role="header">
      <h1>jQuery mobileでダイアログ表示</h1>
    </div>
    <div data-role="content">
      <p>ダイアログのサンプルです。</p>
      <a href="mydialog/index" data-role="button" data-rel="dialog" data-transition="pop">ダイアログを表示</a>
    </div>
    <div data-role="footer">
      <h4>フッター</h4>
    </div>
  </div>
<r:layoutResources />
</body>
</html>
5. ダイアログ表示用のコントローラーを作成します。 
grails create-controller mydialog
6. ダイアログのビューを以下のように作成し、grails-app/views/mydialog/index.gspとして保存します。 
<!DOCTYPE html> 
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>サンプルダイアログ</title> 
  <style type="text/css" media="screen">
/* headerが...で省略されるのを防ぐ  */
body .ui-header .ui-title {
  white-space: normal;
  margin-left: 0;
  margin-right: 0;
}
  </style>
  <!-- jquerymobileを使用 -->
  <r:require module="jquerymobile"/>
  <r:layoutResources />
</head> 
<body> 
  <div data-role="page">
    <div data-role="header">
      <h1>サンプルダイアログ</h1>
    </div>
    <div data-role="content">
      <p>サンプルダイアログです。</p>
      <a href="#" data-role="button" data-rel="back">OK</a>
    </div>
  </div>
<r:layoutResources />
</body>
</html>
出力画面(ダイアログ表示前)

出力画面(ダイアログ表示後)

動作環境
grails 2.0.1

関連情報
jQuery mobileのホームページ
http://jquerymobile.com/
投稿者 時刻:
ラベル:

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)