Yesod ウィジェット

Stack のインストール

macOS


$ curl -sSL https://get.haskellstack.org/ | sh

Windows

下記サイトよりインストーラーをダウンロード

Get Started with Haskell Windows

Linux


$ wget -qO- https://get.haskellstack.org/ | sh

詳しくは下記サイトを参照

Get started with Haskell

プロジェクトの作成

よりシンプルにするために、プロジェクトを手動で作ります。


$ mkdir yesod-web
$ cd yesod-web
$ mkdir src

サンプル 1

「yesod-web」プロジェクト内に、次の内容の「yesod-web.cabal」というファイルを作ります。


name:                yesod-web
version:             0.1.0.0
category:            Web
build-type:          Simple
cabal-version:       >=1.10

executable yesod-web
  main-is:            Main.hs
  build-depends:      base >=4.10 && <4.11
                    , yesod
  hs-source-dirs:     src
  default-language:   Haskell2010

「yesod-web」プロジェクト内の「src」ディレクトリ内に、次の内容の「Main.hs」というファイルを作ります。


{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE QuasiQuotes       #-}
{-# LANGUAGE TemplateHaskell   #-}
{-# LANGUAGE TypeFamilies      #-}
import           Yesod

data App = App
mkYesod "App" [parseRoutes|
/ HomeR GET
|]
instance Yesod App

getHomeR = defaultLayout $ do
    setTitle "My Page Title"
    toWidget [lucius| h1 { color: green; } |]
    addScriptRemote "https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
    toWidget
        [julius|
            $(function() {
                $("h1").click(function(){
                    alert("見出しをクリックしました!");
                });
            });
        |]
    toWidgetHead
        [hamlet|
            <meta name=keywords content="some sample keywords">
        |]
    toWidget
        [hamlet|
            <h1>コンテンツを含める1つの方法
        |]
    [whamlet|<h2>もう一つの方法|]
    toWidgetBody
        [julius|
            alert("これは Body 自体に含まれています。");
        |]

main = warp 3000 App