2ページのWebサイト（および2つのアクション）を定義します。
type Action = | Home | AboutUs
生のSiteletExample1.fsを見るこのGistはGitHubによって提供されました。
次に、F＃HTMLビルトインコンバイナーを使用してWebサイトテンプレートをマッシュアップしましょう。 テンプレートは、本文を受け取って装飾する関数です。
module View = let ( => ) ab = A [HRef b] -< [Text a] let Page title body = PageContent <| fun ctx -> { Page.Default with Title = Some title Body = H1 [Text title] :: UL [ LI ["Home" => ctx.Link Home] LI ["AboutUs" => ctx.Link AboutUs] ] :: body }
注意すべき2つのこと：
- F＃を使用すると、独自の構文を定義でき、例ではこれを自由に使用できます（=>）。
- 手動でURLを生成する代わりに、コンテキストにアクションへのリンクを作成するように依頼しています。 これにより、セキュリティが確保されます。ホームアクションの名前を変更すると、プロジェクトのコンパイルが停止します。 別のURLに移動しても、リンクは正しいままです。
次に、サイトを定義しましょう。
module Site = let HomePage = View.Page "Home" [ Div [Text "Welcome to our website!"] ] |> Sitelet.Content "/" Home let AboutUsPage = View.Page "About Us" [ Div [Text "TODO: describe us."] ] |> Sitelet.Content "/about" AboutUs let Main = Sitelet.Sum [ HomePage AboutUsPage ]
HomePageとAboutUsPageは、1つのURLと1つのアクションを持つ単一ページのサイトレットです。 これらは、Sum演算子を使用してWebサイトに結合されます。
少し管理上の定型文：
type Website() = interface IWebsite<Action> with member this.Actions = [] member this.Sitelet = Site.Main [<assembly: WebsiteAttribute(typeof<Website>)>] do ()
そしてそれだけです！ これを見てみましょう：
これまでのところ良い。 ページには、期待したURLとメニュー内のリンクがあります。
上記の内容は、適切なWebフレームワークで実行できます。 境界を押し広げて、少しスパイスを加えましょう。 JavaScriptでコンパイルするF＃行を追加します。
module Client = open IntelliFactory.WebSharper.Html [<JavaScript>] let Button label = Button [Text label] |>! OnClick (fun button _ -> button.Text <- "CLICKED") type ButtonControl(label: string) = inherit Web.Control() new () = new ButtonControl("unlabelled") [<JavaScript>] override this.Body = Button label :> _
押されると、それ自体の碑文を変更するボタンがあります。 そして、コントロールがあります。
現在、Buttonは完全にクライアント上に存在しますが（実際、DOMノードを作成します）、Controlはクォンタム遷移を実行します：コンストラクターはサーバーで実行され、bodyはクライアントで実行されます。
しかし、これはコントロールを使用してクライアントとサーバーを接着できることを意味します。 AboutUsページを変更しましょう：
let AboutUsPage = View.Page "About Us" [ Div [Text "TODO: describe us."] Div [new Client.ButtonControl("Click me!")] ] |> Sitelet.Content "/about" AboutUs
ここにある。 これで、ユーザーは、期待どおりの場所で、F＃に実装されたJavaScript付きのプッシュボタンを見ることができます。 スクリプトタグの心配、依存関係のキャッチ、「ondocumentready」の心配はありません。すべて正常に機能します。
以下は完全なリストです。 バージョン2.1がリリースされたら、自分で起動できます。 私たちと一緒にいてください！
namespace WebSharperSiteletsProject open System open System.IO open System.Web open IntelliFactory.Html open IntelliFactory.WebSharper open IntelliFactory.WebSharper.Sitelets type Action = | Home | AboutUs module View = let ( => ) ab = A [HRef b] -< [Text a] let Page title body = PageContent <| fun ctx -> { Page.Default with Title = Some title Body = H1 [Text title] :: UL [ LI ["Home" => ctx.Link Home] LI ["AboutUs" => ctx.Link AboutUs] ] :: body } module Client = open IntelliFactory.WebSharper.Html [<JavaScript>] let Button label = Button [Text label] |>! OnClick (fun button _ -> button.Text <- "CLICKED") type ButtonControl(label: string) = inherit Web.Control() new () = new ButtonControl("unlabelled") [<JavaScript>] override this.Body = Button label :> _ module Site = let HomePage = View.Page "Home" [ Div [Text "Welcome to our website!"] ] |> Sitelet.Content "/" Home let AboutUsPage = View.Page "About Us" [ Div [Text "TODO: describe us."] Div [new Client.ButtonControl("Click me!")] ] |> Sitelet.Content "/about" AboutUs let Main = Sitelet.Sum [ HomePage AboutUsPage ] type Website() = interface IWebsite<Action> with member this.Actions = [] member this.Sitelet = Site.Main [<assembly: WebsiteAttribute(typeof<Website>)>] do ()