Index view

With the View.fs file in place, let's add our first view:

View.fs

   1: 
   2: 
   3: 
   4: 
   5: 
   6: 
   7: 
   8: 
   9: 
  10: 
  11: 
  12: 
  13: 
  14: 
  15: 
  16: 
  17: 
  18: 
  19: 
  20: 
  21: 
  22: 
  23: 
  24: 
  25: 
  26: 

module SuaveMusicStore.View

open Suave.Html

let index =
    html [] [
        head [] [
            title [] "Suave Music Store"
        ]

        body [] [
            div ["id", "header"] [
                tag "h1" [] [
                    a "/" [] [Text "F# Suave Music Store"]
                ]
            ]

            div ["id", "footer"] [
                Text "built with "
                a "http://fsharp.org" [] [Text "F#"]
                Text " and "
                a "http://suave.io" [] [Text "Suave.IO"]
            ]
        ]
    ]
    |> htmlToString

This will serve as a common layout in our application. A few remarks about the above snippet:

  • open Suave.Html module, for functions to generate HTML markup.
  • Node is an internal Suave type holding object model for the HTML markup
  • index is our representation of HTML markup.
  • html is a function that takes a list of attributes and child nodes as its arguments (hover over the function to inspect its type signature). The same applies to head, title, body and div functions.
  • tag function allows us to declare additional nodes. Take a look at its type signature - it's very similar to the mentioned functions but has an additional name argument at first position.
  • a goes for creating hyperlinks.
  • Text serves outputting plain text into an HTML element.
  • htmlToString transforms the object model into the resulting raw HTML string.

We can see usage of the "pipe" operator |> in the above code. The operator might look familiar if you have some *nix background. In F#, the |> operator basically means: take the value on the left side and apply it to the function on the right side of the operator. In this very case it simply means: invoke the htmlToString function on the HTML object model.

Let's test the index view in our App.fs:

App.fs

  18: 

        path "/" >=> (OK View.index)

If you navigate to the root url of the application, you should see that proper HTML is now being returned.

namespace Suave
module Html

from Suave
val index : string

Full name: SuaveMusicStore.View.index
val html : (Attribute list -> Node list -> Node)

Full name: Suave.Html.html
val head : (Attribute list -> Node list -> Node)

Full name: Suave.Html.head
val title : attr:Attribute list -> s:string -> Node

Full name: Suave.Html.title
val body : (Attribute list -> Node list -> Node)

Full name: Suave.Html.body
val div : (Attribute list -> Node list -> Node)

Full name: Suave.Html.div
val tag : tag:string -> attr:Attribute list -> contents:Node list -> Node

Full name: Suave.Html.tag
val a : href:string -> attr:Attribute list -> (Node list -> Node)

Full name: Suave.Html.a
union case Node.Text: string -> Node
val htmlToString : node:Node -> string

Full name: Suave.Html.htmlToString
module App

from SuaveMusicStore
module Filters

from Suave
module Operators

from Suave
module RequestErrors

from Suave
module Successful

from Suave
module Web

from Suave
val browse : (HttpContext -> Async<HttpContext option>)

Full name: SuaveMusicStore.App.browse
val request : apply:(HttpRequest -> HttpContext -> 'a) -> context:HttpContext -> 'a

Full name: Suave.Http.request
val r : HttpRequest
member HttpRequest.queryParam : key:string -> Choice<string,string>
union case Choice.Choice1Of2: 'T1 -> Choice<'T1,'T2>
val genre : string
val OK : body:string -> WebPart

Full name: Suave.Successful.OK
val sprintf : format:Printf.StringFormat<'T> -> 'T

Full name: Microsoft.FSharp.Core.ExtraTopLevelOperators.sprintf
union case Choice.Choice2Of2: 'T2 -> Choice<'T1,'T2>
val msg : string
val BAD_REQUEST : body:string -> WebPart

Full name: Suave.RequestErrors.BAD_REQUEST
val webPart : WebPart<HttpContext>

Full name: SuaveMusicStore.App.webPart
val choose : options:WebPart<'a> list -> WebPart<'a>

Full name: Suave.WebPart.choose
val path : pathAfterDomain:string -> WebPart

Full name: Suave.Filters.path
module View

from SuaveMusicStore
val pathScan : pf:PrintfFormat<'a,'b,'c,'d,'t> -> h:('t -> WebPart) -> WebPart

Full name: Suave.Filters.pathScan
val id : int
val startWebServer : config:SuaveConfig -> webpart:WebPart -> unit

Full name: Suave.Web.startWebServer
val defaultConfig : SuaveConfig

Full name: Suave.Web.defaultConfig

Show code from this section on GitHub

results matching ""

    No results matching ""