Yesodで入力フォーム

Yesod Web Framework Bookの写経を始めて3日目くらい。
ついに入力フォームに至ったんですがここのサンプルを写経すると私の環境では型エラーが起きました。ここまでは順調だったんですけどね。

ちなみに私の環境のYesodのバージョンは以下の通りです。

$ ghc-pkg list | grep yesod
    yesod-0.9.3.1
    yesod-auth-0.7.5
    yesod-core-0.9.3.3
    yesod-default-0.4.0
    yesod-form-0.3.3
    yesod-json-0.2.1
    yesod-persistent-0.2.1
    yesod-static-0.3.1.2

Yesod Web Framework Bookオリジナルのコードはこちら。

personForm :: Html -> MForm Synopsis Synopsis (FormResult Person, Widget)

MFormがないって怒られてしまうのでFormにします。

personForm :: Html -> Form Synopsis Synopsis (FormResult Person, Widget)

これでいける。

さてFormを作るpersonForm関数の全文は以下の通りです。

personForm :: Html -> Form Synopsis Synopsis (FormResult Person, Widget)
personForm = renderDivs $ Person
    <$> areq textField "Name" Nothing
    <*> areq (jqueryDayField def
        { jdsChangeYear = True -- give a year dropdown
        , jdsYearRange = "1900:-5" -- 1900 till five years ago
        }) "Birthday" Nothing
    <*> aopt textField "Favorite color" Nothing
    <*> areq emailField "Email address" Nothing
    <*> aopt urlField "Website" Nothing

areqは入力必須の項目、aoptは任意項目みたいですね。

jQueryと連携していてなかなかリッチ画面が出来上がります。

<$>とか<*>、それからどうやってPersonと結び付けているのか、とか疑問が山盛りですが写経するときはあまり気にしないようにして先に進むようにしています。

Yesod BookのFormはけっこう大きいトピックなのでしばらくかかりそうですが、次の次に控えるのがPersistence。
ここは楽しみなので頑張ってここを乗り越えよう。