タグライブラリによるフォームの生成
これでフォームの送信の仕組みは分かりましたが、実をいえばGrailsでは<form>タグをそのまま書いてフォームを作成することはあまりありません。GSPに用意されているタグライブラリを使って記述するのが一般的でしょう。では、先ほどのフォームタグを、タグライブラリを使った形で書き直してみましょう。
<g:form action="index">
<g:textField name="txt" />
<g:submitButton name="submit" value="OK" />
</g:form>
Grailsに用意されているカスタムタグは、<g:タグ名>といった形になります。ここでは、以下の3つのタグを使用しています。
<g:form>～</g:form> HTMLの<form>タグを生成するものです。 <g:textField /> HTMLの<input type="text">タグを生成します。 <g:submitButton /> HTMLの<input type="submit">タグを生成します。
これにより実際にWebブラウザに出力されるフォームのタグは、次のようなものになります。actionの送信先や各タグのid属性が自動的に設定される用になっていることが分かります。
<form action="/gapp/helo/index" method="post" >
<input type="text" name="txt" value="" id="txt" />
<input type="submit" name="submit" value="OK" id="submit" />
</form>
その他のフォーム関連タグ
では、Grailsにどのようなフォーム関係のカスタムタグが用意されているのか、ここで整理しておきましょう。
テキスト入力関連タグ
<g:textField name="名前" value="値" /> <g:passwordField name="名前" value="値" /> <g:hiddenField name="名前" value="値" />
テキストの入力に関連するものです。それぞれ<input>のtype="text","password","hidden"によるタグを出力します。valueは不要であれば省略可能です。
テキストエリアタグ
<g:textArea name="名前" value="値" rows="行数" cols="文字数"/>
複数行のテキスト入力を行う<textarea>タグを出力するものです。rowsおよびcolsで縦横のサイズを指定できるようになっています。
チェックボックス
<g:checkBox name="名前" value="真偽値" />
<input type="checkbox">タグを出力するものです。チェックのON/OFF状態は、valueに真偽値を指定して設定できます。
ラジオボタン
<g:radio name="名前" value="真偽値" /> <g:radioGroup name="名前" labels="ラベル情報" values="値情報">～</g:radioGroup>
ラジオボタンの項目である<input type="radio">タグは、<g:radio>タグを使って作成することができます。が、Grailsにはもっと便利な<g:radioGroup>というタグも用意されています。これは、作成するラジオボタンのラベルとタグの情報を指定することで、複数のラジオボタンをまとめて作成するものです。例えば、このような形で使います。
<g:radioGroup name="radio1" labels="['One','Two','Three']" values="[1,2,3]">
${it.radio}${it.label}<br />
</g:radioGroup>
labelsとvaluesに、それぞれ配列の値を記述しておきます。また開始タグと終了タグの間には、it.radioとit.labelという値を出力していますね。これで、次のようなタグが生成されます。
<input type="radio" name="radio1" value="1" />One<br /> <input type="radio" name="radio1" value="2" />Two<br /> <input type="radio" name="radio1" value="3" />Three<br />
it.radioは、指定したvalueの<input type="radio">タグを出力します。またit.labelはラベルに指定したテキストを出力します。配列に用意された値の数だけ、繰り返しラジオボタンが生成されるようになっているのです。
一覧リスト
<g:select name="名前" from="項目情報" value="値情報" />
<select>タグを使ったポップアップメニューや一覧リストを作成するのに用いるものです。fromに表示する項目名を配列にまとめたものを指定し、valueにはそれぞれの項目の値を配列にしたものを指定します（valueは省略できます）。例えば、次のように使います。
<g:select name="select1"
from="['Windows','Linux','Mac OS']"
value="[1,2,3]" />
このように記述した場合、Webブラウザに出力さえれるHTMLコードは次のようなものになります。<select>～</select>と、その中に用意される<option>～</option>が自動的に生成されることが分かるでしょう。
<select name="select1" id="select1" multiple="multiple" >
<option value="Windows" >Windows</option>
<option value="Linux" >Linux</option>
<option value="Mac OS" >Mac OS</option>
</select>
実をいえば、この<g:select>タグはもっとシンプルに書くこともできます。それは、Grailsに用意されているselectというメソッドを利用するのです。例えば、上のサンプルは、このように書くこともできます。
${select(from:['Windows','Linux','Mac OS'],value:[1,2,3])}
selectの引数にfromとvalueを指定することで、<g:select>と同じことが行えます。こちらの方が簡単で使いやすいかも知れませんね。
もう1つのフォームの書き方
ここで作成した<g:form>タグによる書き方は、非常にHTMLのフォームタグに近い形をしていました。実をいえば、このタグはもう少し違った書き方をすることもできるのです。
<g:form controller="helo">
<g:textField name="txt" />
<g:actionSubmit value="OK" action="index"/>
</g:form>
<g:form>では、controllerという属性で送り先のコントローラー名を指定することができます。また送信のためのsubmitボタンは、<g:actionSubmit>というタグを使って生成させることもできます。ここでactionを指定すると、フォームのcontrollerとactionにより自動的に送り先が決定するような仕組みになっています。
この<g:actionSubmit>によるフォームの送信は、複数のsubmitボタンを用意して異なるアクションにフォームを送信させるような場合に非常に有効です。実際に試してみましょう。
<body>
<h1>Grails Helo</h1>
<h2>This is Index Action Page.</h2>
<p>送信されたテキスト：${msg}</p>
<g:form controller="helo">
<g:textField name="txt" />
<g:actionSubmit value="index" action="index"/>
<g:actionSubmit value="helo" action="helo"/>
</g:form>
</body>
index.gspのボディをこのように修正します。ここでは、2つのSubmitボタンを作成し、それぞれのactionに"index"と"helo"を指定しています。続いて、コントローラーに2つのアクションを用意します。
class HeloController {
def index = {
def txt = params['txt']
['msg': txt]
}
def helo = {
def txt = params['txt']
['msg': txt]
}
}
いずれも、フォームから送信されたテキストをmsgに設定しておくだけの簡単な処理が用意されています。最後に、もう1つの送信先であるheloのビューとして、「views」内の「helo」内に「helo.gsp」というファイルを新たに作成し、次のように記述しておきます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Grails Helo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
h1 {background:#FFAAAA; font-size: 12pt; padding: 3px;}
h2{font-size: 12pt; font-weight: bold;}
div{color:#000066; font-size:10pt;}
</style>
</head>
<body>
<h1>Grails Helo</h1>
<p>これは、heloアクションのページです。</p>
<p>送信されたテキスト：${msg}</p>
</body>
</html>
準備が整ったら、実際にテキストを書いて、2つの送信ボタンをそれぞれ試してみましょう。ボタンによって送られる先が変わることが分かります。もちろん、indexとheloのどちらに送信しても、送られたテキストの内容は正しく受け取り処理されます。
まとめ
Grailsのインストール、セットアップ、そしてコントローラーとビューの基本までを一通り説明しました。GrailsのMVCのうち、これでVCについては使い方が見えてきたことと思います。一通り使ってみて、Grailsでは「表示と処理が実にきれいに分けられている」ということがよく分かったはずです。GSPの記述は非常にシンプルであるだけでなく、「表示用のHTMLコードから処理のコードを取り除く」ということをさらりと実現しています。
コントローラーは、アクションプロパティにクロージャを設定することで処理を実現します。メソッドに慣れたJavaプログラマにはちょっと違和感を覚えるクラスの作り方かもしれませんが、しかし少なくともシンプルなクラスで必要な処理を組み込めることは分かったはずです。とりあえず、ここまでの部分が一通り分かれば、フォームを利用した簡単なWebアプリケーションは作成できるでしょう。実際に簡単なプログラムを作ってみてください。Grailsによる開発が実にシンプルで、しかもすっきりとした構造として作れることが実感できるはずです。
