Back to Questions
746
views4
comments
How to run the Tutorials / Samples
websharpertutorialsvisualstudioui.nextgetting started

I'm trying to follow along the tutorials here, but can't seem to get anything to run within Visual Studio, i.e. the webpage fires up but it is blank.

I'm not really 100% sure how to execute the tutorial steps, what project to create or anything. I've tried to follow the guide here, but this doesn't seem to work or be relevant to the latest version of Websharper.

The steps I've followed were to create a "UINext Single-Page Application". Replaced the code in Client.fs as follows:

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

namespace WebsharperExamples

open WebSharper
open WebSharper.JavaScript
open WebSharper.JQuery
open WebSharper.UI.Next
open WebSharper.UI.Next.Client
open WebSharper.UI.Next.Html

[<JavaScript>]
module Client =
  let Main () =
    let rvText = Var.Create ""
    let inputField = Doc.Input [] rvText
    let label = textView rvText.View
    let copyTheInput =
      divAttr [attr.``class`` "panel-default"] [
        divAttr [attr.``class`` "panel-body"] [
          div [inputField]
          div [label]
        ]
      ]
    Doc.RunById "main" copyTheInput

I've updated index.html as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html lang="en">
<head>
    <title>WebsharperExamples</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="Content/WebsharperExamples.css" />
    <script type="text/javascript" src="Content/WebsharperExamples.head.js"></script>
</head>
<body>
    <script type="text/javascript" src="Content/WebsharperExamples.min.js"></script>
</body>
</html>

Built the application and then tried to view it in Google Chrome. It runs but I get a blank page.

I've tried adding the line:

1

let _ = Main () |> fun res -> res.AppendTo "entrypoint"

But res.AppendTo doesn't compile with the error "AppendTo is not defined."

Is there a starting from basics tutorial available for the latest version of WebSharper?

Thanks for any help!

.

In short, use RunById when working with UI.Next. The tutorial to run snippets is written for WebSharper.Html, and has not yet been updated with a section to run with UI.Next.

By on 11/4/2015 8:06 AM ()

Great. Thanks. I think my main issue was I had Main defined as a function, i.e. let Main() = xxx.

I now have:

-- index.html --

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html lang="en">
<head>
    <title>WebsharperExamples</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="Content/WebsharperExamples.css" />
    <script type="text/javascript" src="Content/WebsharperExamples.head.js"></script>
</head>
<body>
  <h1>Sample</h1>
  <div id="main" data-children-template="Main">
  </div>
  <script type="text/javascript" src="Content/WebsharperExamples.min.js"></script>
</body>
</html>

-- Client.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

namespace WebsharperExamples

open WebSharper
open WebSharper.JavaScript
open WebSharper.JQuery
open WebSharper.UI.Next
open WebSharper.UI.Next.Client
open WebSharper.UI.Next.Html

[<JavaScript>]
module Client =
  let Main =
    let rvText = Var.Create ""
    let inputField = Doc.Input [] rvText
    let label = textView rvText.View
    let copyTheInput =
      divAttr [attr.``class`` "panel-default"] [
        divAttr [attr.``class`` "panel-body"] [
          div [inputField]
          div [label]
        ]
      ]

    Doc.RunById "main" copyTheInput

And this seems to be working nicely. Thanks for the quick response.

By on 11/4/2015 8:22 AM ()

Cool, thanks. BTW, just a tiny note: please format your comments as markdown. Are you commenting from FPish or websharper.com? I'd recommend the latter.

By on 11/4/2015 9:06 AM ()

Also, you don't have an entrypoint/main placeholder (and why the two?) in your markup, without that it will not work, naturally.

By on 11/4/2015 8:10 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