Skip to content

dotnet-websharper/forms

Repository files navigation

WebSharper.Forms

Forms are a functional, composable, and type-safe form abstraction for building reactive user interfaces in WebSharper, similar to Formlets but with fine control over the structure of the output.

A sample Form:

let LoginForm () =
    Form.Return (fun user pass -> user, pass)
    <*> (Form.Yield ""
        |> Validation.IsNotEmpty "Must enter a username")
    <*> (Form.Yield ""
        |> Validation.IsNotEmpty "Must enter a password")
    |> Form.WithSubmit
    |> Form.Run (fun (u, p) ->
        JS.Alert("Welcome, " + u + "!")
    )
    |> Form.Render (fun user pass submit ->
        div [] [
            div [] [label [] [text "Username: "]; Doc.Input [] user]
            div [] [label [] [text "Password: "]; Doc.PasswordBox [] pass]
            Doc.Button "Log in" [] submit.Trigger
            div [] [
                Doc.ShowErrors submit.View (fun errors ->
                    errors
                    |> Seq.map (fun m -> p [] [text m.Text])
                    |> Doc.Concat)
            ]
        ]
    )

Wait, formlets and piglets? - I am confused

WebSharper.Forms (this project, aka. reactive piglets or WebSharper.UI.Piglets) is a reactive implementation of the original WebSharper.Piglets library, using WebSharper.UI, WebSharper's main reactive library.

Piglets are a novel UI abstraction pioneered by WebSharper, and are first documented in this IntelliFactory research paper:

Loic Denuziere, Ernesto Rodriguez, Adam Granicz. Piglets to the Rescue: Declarative User Interface Specification with Pluggable View Models. In Symposium on Implementation and Application of Functional Languages (IFL), Nijmegen, The Netherlands, 2013. ACM, PDF.

Formlets have similarly been published in academia, among others in this 2007 draft paper by Ezra Cooper, Sam Lindley, Philip Wadler, and Jeremy Yallop at the University of Edinburgh.

Formlets have first been ported to F# for WebSharper in 2009, enhanced for dependent flowlets and published in this IntelliFactory research paper:

Joel Bjornson, Anton Tayanovskyy, Adam Granicz. Composing Reactive GUIs in F# Using WebSharper. In Symposium on Implementation and Application of Functional Languages (IFL), Alphen aan den Rijn, The Netherlands, 2010. pp. 203-216. Springer

This early formlet library is available as WebSharper.Formlets, and a WebSharper.UI-based re-implementation is available as WebSharper.UI.Formlets.

Given that reactive forms/piglets are more flexible than formlets, we recommend that you use WebSharper.Forms (this project) in your applications.