HTML markup

It's time to replace plain text placeholders in containers with meaningful content. First, define h2 in View module to output HTML header of level 2:

View.fs

   6: 

let h2 s = tag "h2" [] [Text s]

and replace text with a new h2 in each of the 4 containers.

We'd like the /store route to output hyperlinks to all genres in our Music Store. Let's add a helper function in Path module, that will be responsible for formatting HTTP urls with a key-value parameter:

Path.fs

   5: 

let withParam (key,value) path = sprintf "%s?%s=%s" path key value

The withParam function takes a tuple (key,value) as its first argument, path as the second and returns a properly formatted url. A tuple (or a pair) is a widely used structure in F#. It allows us to group two values into one in an easy manner. Syntax for creating a tuple is as follows: (item1, item2) - this might look like a standard parameter passing in many other languages including C#. Follow this link to learn more about tuples.

Add also a string key for the url parameter "/store/browse" in Path.Store module:

Path.fs

  14: 

    let browseKey = "genre"

We'll use it in App module:

App.fs

  13: 
  14: 
  15: 
  16: 
  17: 

let browse =
    request (fun r ->
        match r.queryParam Path.Store.browseKey with
        | Choice1Of2 genre -> html (View.browse genre)
        | Choice2Of2 msg -> BAD_REQUEST msg)

Now, add the following for working with the unordered list (ul) and list item (li) elements in HTML:

View.fs

   7: 
   8: 

let ul nodes = tag "ul" [] nodes
let li = tag "li" []

The actual container for store can now look like the following:

View.fs

  14: 
  15: 
  16: 
  17: 
  18: 
  19: 
  20: 
  21: 
  22: 
  23: 
  24: 
  25: 
  26: 

let store genres = [
    h2 "Browse Genres"
    p [] [
        Text (sprintf "Select from %d genres:" (List.length genres))
    ]
    ul [
        for genre in genres ->
            let url =
                Path.Store.browse
                |> Path.withParam (Path.Store.browseKey, genre) 
            li [ a url [] [ Text genre ] ]
    ]
]

Things worth commenting in the above snippet:

• store now takes a list of genres (again the type is inferred by the compiler)
• the [ for g in genres -> ... ] syntax is known as "list comprehension". Here we map every genre string from genres to a list item
• aHref inside list item points to the Path.Store.browse url with "genre" parameter - we use the Path.withParam function defined earlier

To use View.store from App module, let's simply pass a hardcoded list for genres like following:

App.fs

  22: 

        path Path.Store.overview >=> html (View.store ["Rock"; "Disco"; "Pop"])

Show code from this section on GitHub