Back to Questions
1.7k
views4
comments
Simple TextBox UI.next example with WebSharper template on Visual Studio 2013
websharperf#

Hi,

I have beeen trying to insert the Simple TextBox UI.next example herehttp://intellifactory.github.io/websharper.ui.next.samples/#samples/samples/SimpleTextBox into the F# WebSharper template provided in the Visual Studio 2013 installation. (The project has a Main.fs, Client.fs, index.html, Web.config, packages.config and Global.asax files.)

This does not work, and I am not sure about what is missing as there are no step-by-step instructions or video that starts from a Visual Studio 2013 installation. I can run the WebSharper template that creates a blank page! When I try to add parts of the UI.next code of the SimpleTextBox, there are various error messages, e.g., 'divc' is not recognized. I have no idea about what is going on, and all the instructions I have found start from a project that has all the required stuff such as references at place.

Is there any up to date information / tutorial that can take me go through these steps? I would really like to avoid to learn this the hard way...

Thanks in advance, Ozan

.

Sadly our UI.Next samples are not self-contained in the sense that they are using various helper and utility functions from the project making it hard to understand what's going on for a newcomer. Unfortuantely UI.Next documentation and samples have not yet got the attention they would deserve due to the library being relatively new (the newest out of the existing UI libs for WebSharper).

With that said I think you can grasp of the the basics on the samples page if you take a look into Utilities.fs where the helpers are defined (there isn't too many of them). Using those you should be able to get started.

Few pointers that is different from what we have in the samples (and should definitely be made obvious):

  • You probably figured this out but UI.Next is not bundled with WebSharper, you have to install it through NuGet (install-package websharper.ui.next in the Package Manager Console)
  • The let Sample = ... part on the bottom of every sample is just for building the page from the samples, you don't need that. You should interpret that code like this in your project (this applies to single-page apps):
1
2
3
4
5
6
7
8

let Sample =
    Samples.Build()
        .Id("Sample name")
        .FileName(__SOURCE_FILE__)
        .Keywords(["text"])
        .Render(Main)
        .RenderDescription(Description)
        .Create()

should become

1
2
3
4
5

// where you have a <div id="entry"></div> in index.html
// also note that the scrit tag has to be placed AFTER the div in the HTML file
  let MyApp =
    Main () // Main is the function you were passing to Main in the sample
    |> Doc.RunById "entry"
  • Using UI.Next in itself you only need the WebSharper WebSharper.UI.Next WebSharper.UI.Next.Html namespaces. Additionally you can open WebSharper.UI.Next.Notations for operators to use Vars like reference cells: let foo = Var.Create "foo"; foo <- "bar". Usually you will also want to open WebSharper.JavaScript when dealing with client side code.
  • For the time being you might want to stick with the 3.2 versions of WebSharper and UI.Next because we have included some changes in 3.3 that break samples: the biggest one is lowercasing the HTML language. For downgrading use: install-package -version 3.2.22.174 websharper and install-package -version 3.2.11.138 websharper.ui.next. Restarting VS will probably be required (editing Web.config may be as well: replacing newVersion="3.3.0.0" with newVersion="3.2.0.0" for WebSharper.* dlls.)

When you are a bit more familiar with the basics you can check out our TodoMVC implementation in UI.Next which is a somewhat bigger sample that gives you an idea how to strcture your code.

Here's the SimpleTextBox sample in a self-contained format: https://gist.github.com/qwe2/a980344a7b4eba67edfe.

By on 7/20/2015 8:53 AM ()

Thank you! These help.

By on 7/22/2015 6:31 AM ()

The source code you're using relies upon some additional helper functions defined in utilities.fs here https://github.com/intellifactory/websharper.ui.next.samples/blob/master/src/Utilities.fs.

By on 7/20/2015 8:53 AM ()

(Edit: sorry for the formatting.)

Here's the step-by-step that works for me:

  1. Create a blank UI.Next application from the VS 2013 template.
  2. Delete the Client module and replace it with sample code.

  3. Modify the sample code by inserting the following helper functions at the top of the module:

    1
2
3
4

    let ( ==> ) k v = Attr.Create k v
let txt t = Doc.TextNode t
let cls n = Attr.Class n
let divc c docs = Doc.Element "div" [cls c] docs

  4. Modify the sample code's Main() to run the sample code in the "main" div via Doc.RunById:

    1
2
3

    // ...and run it.
let Main =
TodoExample ()      |> Doc.RunById "main"

  5. Modify index.html to get rid of the whole body except for the "main" div:

    1
2
3
4

    <body>
<div id="main"></div>
<script type="text/javascript" src="Content/TodoListWebsharper.min.js"></script>
</body>
By on 7/20/2015 8:56 AM ()

    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