Seaside チュートリアル（その３）

Smalltalk Squeak

ずいぶん間が開いてしまいました。本業の方が忙しくなってきて、コードをまったり書く時間がなかなか確保出来ませんでした。いやーんなカンジです。

さて、久しぶりの第３回目ですが、いつも通りA Seaside tutorialさんから、今日はFormsを勉強します。

formを作ろう

アンカーからのご想像の通り、フォームを作るには #form: を使います。まずは簡単なフォームを。

renderContentOn: html 
html form: 
    [html submitButtonWithAction: 
            [Transcript cr;
                        show: 'ボタンが押されました ';
                        show: DateAndTime now printString ]
          text: '押しましょう']

form要素をレンダリングするには form: に対し子要素をブロックで与えて上げるという、コレまで通りの方法です。

さて、Formと言えばSubmit。Transcript にボタンを押す度に(余計なのも含めてw)ガンガン ログが出力されるハズです。想像通り 〜WithAction: に与えたブロックが Submitの度に実行されるという訳です。

とは言え Transcript にはき出されるだけではちょっとイマイチ。せっかくの Webアプリケーションなのでもうちょっとそれっぽく。そこで ど素人のためのど素人によるSqueak入門 さんのサンプルをちょっと拝借。

WAComponent subclass: #WebWorkspace
    instanceVariableNames: 'values'
    classVariableNames: ''
    poolDictionaries: ''
    category: 'MySeasideTutorial'

initialize
    values _ ''

renderContentOn: html 
    html form:
        [html textAreaWithValue:
                values asString callback: [:v | values := v].
        html break.
        html submitButtonWithAction: 
                [values := Compiler evaluate: values ]
             text: 'do it']

これで Webブラウザ上で動く 簡易 Workspace のできあがりでござい♪

これが上手く動くということは、 #textArieaWitValue:callback: に渡されたブロックのほうが #submitButtonWithAction:text: よりも先に評価されると言うわけです。form がサブミットされたとき、Seaside のプロセスは Submitボタンのコールバックの前に全ての インプットフィールドのコールバックを処理します。


というわけで、Seaside は、情報入力フォームを簡単に作ることが出来ます。以下に A Seaside Tutorial より個人情報入力フォームの例を紹介します。このコンポーネントは入力した情報(name addrass)を自身のフィールドに保持します。

WAComponent subclass: #PersonalInfomationView
    instanceVariableNames: 'name address gender'
    classVariableNames: ''
    poolDictionaries: ''
    category: 'MySeasideTutorial'

name
  ^name

name: aString
  name _ aString

address
  ^address

address: aString
  address _ aString

gender
  ^gender

gender: aString
  gender _ aString

ここに保持る操作を実現するUI側はこんなカンジです。

renderContentOn: html
    html form: 
        [html text: 'Name'.
        html textInputWithValue: self name
                 callback: [:v | self name: v].
        html br.

        html text: 'Address'.
        html textAreaWithValue: self address
                 callback: [:v | self address: v].
        html br.

        html submitButtonWithAction:
                 [self save] text: 'Save']

save
  self inform: self name , '--' , self address

特に難しいことは無いので説明は省略しますが、これだけでセッション毎にデータを入力させそれを永続化することが出来ます。

TextInput / TextArea の便利なメソッド

さて、仕切り直してその他フォーム関連のメソッドを紹介します。中でもちょっと面白いのが #textInputOn:of: と #textAreaOn:of です。こんな風に使います。

renderContentOn: html
    html form: 
        [html text: 'お名前'.
        html textInputOn: #name of: self.
        html br.

        html text: 'ご住所'.
        html textAreaOn: #address of: self.
        html br.
        html submitButtonWithAction:
                 [self save] text: 'Save']

これらは of: で渡されたオブジェクトから 〜On: で渡されたシンボルからそれっぽいメッセージ(渡したのが #hoge シンボルだったら、 アクセサが #hoge でミューテイタが #hoge:)を作って送って、それを入出力に使ってくれる便利なメソッドです。

ドロップダウンリストの作り方

ドロップダウンリストはこんな感じになります。

        html text: '性別'.
        html selectFromList: #(Male Female)
                    selected: self gender
                    callback: [:v | self gender: v].

        "または"

        html text: '性別'.
        html selectInputOn: #gender
                        of: self 
                        list: #(Male Female)

後ろの方は #textInputOn:of: と同じタイプのやつですね。


・・というところで今日は時間切れ。A Seaside Tutorial さんで紹介されている他のForm関連のメソッド（ラジオボタンとかとか）は、また期を改めてお勉強しようとおもいます。


関連記事