Back to Questions
3.3k
views1
comment
Recommended way of using WebSharper templates
websharperf#

Tutorials on the web and the documentation on the Websharper site says that giving a file the extension .template.xml will cause the compiler to turn it into a corresponding .fs file of template code. I can't get this to work; the file seems to be ignored. Since no such file is included in the sitelet sample project, is this functionality obsolete? If so, what is the recommended way of providing WebSharper with an HTML template?

As a second part to this question, I have been experimenting with having both a static HTML project and a web project refer to the same sitelet project, which contains the template. Is there a particularly good way to provide a path to the template that will work in both cases? Right now I check for the existence of HttpContext.Current.Server; if it exists I call MapPath and otherwise I use a path from __SOURCE_DIRECTORY__ .

.

You are right, this is indeed confusing: both the website and the documentation needs to be updated to reflect the new dynamic templating mechanism that we now ship in the latest installer. The best way to navigate this is using the WebSharper sitelet templates in Visual Studio, which now use dynamic templates. (It is under discussion how the legacy, static templating mechanism can be improved - for the time being, it is removed from the current installers.) Below is a quick scoop of this new mechanism.

First off, you store your templates in the web project. Say, you have Main.html in your web project as follows:

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
  <head>
    <title>${title}</title>
    <meta name="generator" content="websharper" data-replace="scripts" />
  </head>
  <body>
    <h1>${title}</h1>
    <div data-hole="body" />
  </body>
</html>

Note the three kinds of placeholders:

  1. String placeholders, such as ${title}
  2. Node placeholders (in-place), such as <meta ... data-replace="scripts" /> - these represent placeholders that get replaced with content.
  3. Node placeholders (child), such as <meta ... data-hole="body" /> - these represent placeholders into which content is embedded.

Given the above template, in your WebSharper project you can "bind" it:

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

module Skin =
    open System.Web

    let TemplateLoadFrequency = Content.Template.PerRequest

    type Page =
        {
            Title : string
            Body : list<Content.HtmlElement>
        }

    let MainTemplate =
        let path = HttpContext.Current.Server.MapPath("~/Main.html")
        Content.Template<Page>(path, TemplateLoadFrequency)
            .With("title", fun x -> x.Title)
            .With("body", fun x -> x.Body)

    let WithTemplate title body : Content<Action> =
        Content.WithTemplate MainTemplate <| fun context ->
            {
                Title = title
                Body = body context
            }

and consume it to create pages:

1
2
3
4
5
6

    let HomePage =
        Skin.WithTemplate "HomePage" <| fun ctx ->
            [
                Div [Text "HOME"]
                Links ctx
            ]

Now, when you need to update the template, you can do so without recompiling your WebSharper project, and your changes will be reflected immediately.

By on 10/7/2012 1:55 PM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper