back

コントローラーとビューの基本 (5/5)

■<g:form>タグを使う

先の例では普通にHTMLでフォームを作成しましたが、実はGSPには独自に用意したカスタムタグがあり、それを使ってフォームを作成することもできるのです。

まずはサンプルを実際に見てみましょう。下のリスト欄に、先ほどのサンプルを修正したものを挙げておきました。コントローラーとビューテンプレートを修正して動かしてみましょう。ちゃんと問題なく動作しますね？

では、ここで使っているカスタムタグについて整理していきましょう。なお主な属性も挙げておきますが、これらの他にidやnameなどの属性も普通に使えます。

<g:form>タグ
これは、<form>タグを生成するものです。<form>と同様に開始タグと終了タグを用意し、その間にコントロール類を記述します。属性として以下のようなものが使えます。（他にもいろいろあるけど、とりあえずこれだけ覚えておけばOK）

controller――送信先のコントローラーの指定
action――送信先のアクションの指定
url――送信先をアドレスで指定するときに利用するもの

<g:textField>タグ
入力フィールドを作成します。<input type="text">タグに相当するものです。

<g:actionSubmit>タグ
送信ボタンを作成します。<input type="submit">タグに相当するものですが、action属性で送信先のアクションを指定できます。

ここで理解すべきは、<g:actionSubmit>の送信の働きです。このタグにはaction属性を指定できますが、これにより送信先のアクションが指定されます。つまり、コントローラー側に用意するアクション（リクエストハンドラのメソッド）を指定できるわけです。

ということは、この<g:actionSubmit>を複数用意して、それぞれに異なるアクションを設定して、どれを押すかによって異なるアクションを呼び出して処理させたりすることもできるわけですね。

このサンプルでは、action="form"と指定しておき、コントローラー側にformというアクションを用意して、その中で送信されたフォームの処理をしています。――こうしたカスタムタグは、フォーム関連にかぎらず多数GSPに用意されています。それらについてはまた改めて説明することにしましょう。



(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※HeloController

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'){
            if (params['input'] != null){
                arr['value'] = params.input;
                arr['msg'] = 'ハロー、' + params.input + 'さん！'
            }
        }
        render(view:'index', model:arr)
    }
}


※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:textField name="input" value="${value}"></g:textField>
        <g:actionSubmit value="送信" action="form" />
    </g:form>
</body>
</html>



　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.