GSPのカスタムタグを使おう (2/4)
作成:2013-10-19 08:21
更新:2013-10-19 08:21
更新:2013-10-19 08:21
■複数項目を生成するフォームタグ
フォーム関連のカスタムタグで使い方に説明が必要なのは、<g:radioGroup>と<g:select>でしょう。これらは、単純にタグを書いておしまい！というわけではありません。正しく使わないとちゃんと機能してくれないのです。
実際のサンプルとして、下に簡単な利用例を挙げておきました。ラジオボタンとリストを表示し、送信するとその選択内容を表示するというものです。なおリストは、よりわかりにくい「複数項目の選択」を行うようにしておきました。実際にフォームを送信して動作を確かめてみましょう。
■ラジオボタンの出力
<g:radioGroup>は、ラジオボタンの表示まですべて自動でやってくれるわけではありません。先に述べたように、このタグ内では、ラジオボタンに関するオブジェクトが「it」として用意されるので、ここからプロパティを指定し出力する処理などを自前で用意しておく必要があるのです。
${it.radio}により、<inupt type="radio">タグが出力されます。そして、${it.label}により、ラベルのテキストが出力されていたのです。このようにして、ラジオボタンの出力部分を用意しないと、<g:radioGroup>はラジオボタン生成ができません。
■選択リストの出力
選択リストは、<g:select>を用意するだけでそのリストの内容もすべて自動的に生成されます。注意点は、fromの値でしょう。
できれば、コントローラー側で表示内容のオブジェクト（Mapインスタンス）を作成し、それをビューテンプレートに渡して使う、というのが一番でしょう。が、ビューテンプレート内でなんとかしたい場合は、このように式言語を使えばなんとかなるよ、ということです。
■複数項目の値の処理
複数項目の選択を可能にした場合、注意すべきは返される値です。通常は選択した項目のvalueがそのままStringで返されますが、複数項目可の場合は配列の形で返されます。
実際のサンプルとして、下に簡単な利用例を挙げておきました。ラジオボタンとリストを表示し、送信するとその選択内容を表示するというものです。なおリストは、よりわかりにくい「複数項目の選択」を行うようにしておきました。実際にフォームを送信して動作を確かめてみましょう。
■ラジオボタンの出力
<g:radioGroup>は、ラジオボタンの表示まですべて自動でやってくれるわけではありません。先に述べたように、このタグ内では、ラジオボタンに関するオブジェクトが「it」として用意されるので、ここからプロパティを指定し出力する処理などを自前で用意しておく必要があるのです。
<g:radioGroup name="radio"サンプルでは、このようにタグが記述されています。valuesとlabelsには、それぞれMapリテラルが書かれています。そしてタグ内には、${it.radio} ${it.label}というように、itのradioとlabelを出力する式言語が書かれています。このタグ内の部分が、ラジオボタンの数だけ繰り返し出力されます。
values="['A','B','C']"
labels="['One','Two','Three']">
<div>${it.radio} ${it.label}</div>
</g:radioGroup>
${it.radio}により、<inupt type="radio">タグが出力されます。そして、${it.label}により、ラベルのテキストが出力されていたのです。このようにして、ラジオボタンの出力部分を用意しないと、<g:radioGroup>はラジオボタン生成ができません。
■選択リストの出力
選択リストは、<g:select>を用意するだけでそのリストの内容もすべて自動的に生成されます。注意点は、fromの値でしょう。
<g:select name="sel"「なんだ、Mapリテラルで用意すればいいだけか」と思った人。from="['Mac','Windows',……]"とはなっていないので注意してください。Mapリテラルを式言語の中に記述してあるでしょう？ すなわち、このfromはリテラルではなく「オブジェクトを指定する」のが基本なのです。
from="${['Mac','Windows','Linux','ChromeOS',
'iOS','android']}"
multiple="true" />
できれば、コントローラー側で表示内容のオブジェクト（Mapインスタンス）を作成し、それをビューテンプレートに渡して使う、というのが一番でしょう。が、ビューテンプレート内でなんとかしたい場合は、このように式言語を使えばなんとかなるよ、ということです。
■複数項目の値の処理
複数項目の選択を可能にした場合、注意すべきは返される値です。通常は選択した項目のvalueがそのままStringで返されますが、複数項目可の場合は配列の形で返されます。
def sels = params.sel;ここではparamsからselの値を変数に取り出し、これをforで繰り返し処理しています。こんな具合にすれば、multiple="true"による複数項目の選択も問題なく処理できます。
for(def item : sels){
arr.msg += item + " ";
}
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※index.gsp
<!DOCTYPE html>
<html>
<head>
<title>Grails Helo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {color: #006600;}
h1 {background: #99ff99;font-size: 14pt;padding: 5px;}
h2 {font-size: 12pt; font-weight: bold;}
p {font-size: 10pt;}
</style>
</head>
<body>
<h1>${title}</h1>
<h2>${msg}</h2>
<g:form controller="helo">
<g:radioGroup name="radio" values="['A','B','C']" labels="['One','Two','Three']">
<div>${it.radio} ${it.label}</div>
</g:radioGroup>
<g:select name="sel" from="${['Mac','Windows','Linux','ChromeOS','iOS','android']}" multiple="true" />
<g:actionSubmit value="送信" action="form" />
</g:form>
</body>
</html>
※HelloController.groovy
package gralisapp
import java.net.Authenticator.RequestorType;
class HeloController {
def index() {
def arr = [
'title':"Sample Page",
'msg':"送信して。",
'value':''
];
arr;
}
def form() {
def arr = [
'title':"Sample Page",
'msg':"送信して。",
'value':''
];
if (request.method=='POST'){
arr.msg = params.radio + " [";
def sels = params.sel;
for(def item : sels){
arr.msg += item + " ";
}
arr.msg += "]";
}
render(view:'index', model:arr)
}
}
※関連コンテンツ