View.fs file in place, let's add our first view:
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:
This will serve as a common layout in our application. A few remarks about the above snippet:
Suave.Htmlmodule, for functions to generate HTML markup.
Nodeis an internal Suave type holding object model for the HTML markup
indexis our representation of HTML markup.
htmlis 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
tagfunction 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.
agoes for creating hyperlinks.
Textserves outputting plain text into an HTML element.
htmlToStringtransforms 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
If you navigate to the root url of the application, you should see that proper HTML is now being returned.
Full name: SuaveMusicStore.View.index
Full name: Suave.Html.html
Full name: Suave.Html.head
Full name: Suave.Html.title
Full name: Suave.Html.body
Full name: Suave.Html.div
Full name: Suave.Html.tag
Full name: Suave.Html.a
Full name: Suave.Html.htmlToString
Full name: SuaveMusicStore.App.browse
Full name: Suave.Http.request
Full name: Suave.Successful.OK
Full name: Microsoft.FSharp.Core.ExtraTopLevelOperators.sprintf
Full name: Suave.RequestErrors.BAD_REQUEST
Full name: SuaveMusicStore.App.webPart
Full name: Suave.WebPart.choose
Full name: Suave.Filters.path
Full name: Suave.Filters.pathScan
Full name: Suave.Web.startWebServer
Full name: Suave.Web.defaultConfig
Show code from this section on GitHub