Back to Questions
357
views10
comments
SlickGrid and Google Visualization examples
websharpergetting started

I'd like to compile a couple of examples and I'm basically copy/pasting their source from http://websharper.com/samples/GoogleVisualization and https://websharper.com/samples/SlickGrid

I'm stuck at the import open WebSharper.Html.Client

it isn't the WebSharper.UI is it?

This error is blocking for me, so please help me to understand it or point me to the right direction! Thanks!

But I have also another minor question. If I want to add these two examples as two more pages of Html Site Template for F# in Visual Studio, I think I should create a new EndPoint, Templating.Main, then match action with the new Page like Client.fs but with the code replaced by one of the initial two source link (e.g. https://websharper.com/samples/SlickGrid), correct? How is the following type used?

1
2
3
4
5
6

    type SlickGridViewer () =
        inherit Web.Control ()

        [<JavaScript>]
        override this.Body =
         SlickGridSample.Main () :>_

What I'm missing is that both HomePage and AboutPage are only a simple Templating.Main while I would be able to link them to a separate fs file with a complete source as view etc... How should I do? Is there a more elaborated example?

.

Those samples use WebSharper.Html and not WebSharper.UI - both are view layers, but UI is now the preferred and recommended way to use. Technically, you can run these old 2x/3.x examples on WebSharper 4 as well with some slight adaptation, will post something here shortly on how to do that.

In the meantime, here is the How to run examples page from the old 3.x documentation. The XYZViewer types are for being able to embed into ASP.NET applications, which is most likely something you won't need now.

By on 1/5/2018 7:26 AM ()

I guess the two examples above are for WebSharper 3 instead of 4? If so, where are the update equivalent ones? Anyway I've also tried to download https://github.com/dotnet-websharper/google.visualization

I've started the Developer Command Prompt for VS 2017

1
2
3
4
5
6
7

    C:\WebSharper\Examples\TestHtmlSite\google.visualization-master>build.cmd
    Unable to find package 'IntelliFactory.Build'.


    error FS0082: Could not resolve this reference. Could not locate the assembly "NuGet.Core". 
    Check to make sure the assembly exists on disk. 
    If this reference is required by your code, you may get compilation errors. (Code=MSB3245)

Well, I think I can simply

1

PM> Install-Package WebSharper.Google.Visualization -Version 4.1.14.80

inside the html site project Now I have to understand how to build a new html page with a simple

1
2
3
4
5
6
7

[<JavaScript>]
let Views =
    let views = 
        [| 
            for i in 1..10  ->
                new DataView(TableData)
        |]

Hopefully, I'm almost there :)

By on 1/5/2018 6:37 AM ()

Hello!

Sorry, some of these examples are a bit outdated, we are in the process of reviewing/updating more.

On building an extension project like https://github.com/dotnet-websharper/google.visualization, it still needs a NugetV2 source configured. Add https://www.nuget.org/api/v2 as package source in VS or directly to your nuget.config.

There is one chart from the Google Visualization samples, which is already up to date with 4.1 here: http://try.websharper.com/example/google-vis

There is still a WebSharper.Html package, but it was kept around for back-compatibility purposes, does not have the reactive capabilities, C# syntax and lot of other features of WebSharper.UI. But updating from it is usually straightforward enough, by changing the namespaces and uncapitalizing the HTML element combinators and having two lists for attributes and child elements. So old Div [...elems] becomes div [] [...elems] and older syntax to have and attribute list too, like Div [...attrs] -< [...elems] becomes div [...attrs] [...elems].

By on 1/5/2018 8:08 AM ()

BTW, you can find a UI.Next-based version here that is easy to adapt: http://try.websharper.com/example/google-vis. Just copy-paste this into an SPA, or adapt to your current template.

By on 1/5/2018 7:32 AM ()

Awesome but consider that I'm a beginner and I have tried to adapt it to the templating: see my last message. Where am I going wrong there? There is a different error if I remove [<JavaScript>] from let DataView ctx = I want to do a transition to a new endpoint (like the about page link) where the google table should be shown eventually...

By on 1/5/2018 8:07 AM ()

My final version is

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
27
28
29
30

    [<JavaScript>]
    let TableData () =
            let data = new Base.DataTable()
            data.addColumn(ColumnType.StringType, "Name") |> ignore
            data.addColumn(ColumnType.NumberType, "Height") |> ignore
            data.addRows(3) |> ignore
            data.setCell(0, 0, "Tong Ning mu") |> ignore
            data.setCell(1, 0, "Huang Ang fa") |> ignore
            data.setCell(2, 0, "Teng nu") |> ignore
            data.setCell(0, 1, 174.) |> ignore
            data.setCell(1, 1, 523.) |> ignore
            data.setCell(2, 1, 86.) |> ignore
            data

    [<JavaScript>]
    let TableExample () =
        (div [] []).OnAfterRender (fun container ->
            let visualization = new Table(container)
            let options =
                TableOptions(
                    showRowNumber = true,
                    width = "600")
            visualization.draw(TableData(), options))


    [<JavaScript>]
    let DataView ctx=
        Templating.Main ctx EndPoint.GoogleView "Google Data View"  [
            TableExample ()
        ]

but it doesn't compile

1

Main.fs(93,9): error : Type not found in JavaScript compilation: TestHtmlSite.Templating
By on 1/5/2018 7:32 AM ()

You need better client-server separation here: let DataView ctx should not have [<JavaScript>] because it makes a call to your server-side templating helper. But TableExample is needed to be generated on the client. To solve this, replace your call to TableExample () with client <@ TableExample () @>.

By on 1/5/2018 8:51 AM ()

Excellent. I will try later but this surely will work.

Out of my curiosity, I'm confused why this templating helper is considered be server side. I see that only an html file is produced and rendered by the browser. Apparently there is no service running so why/what we call "server" here? Sorry for the stupid question and thank you very much for the help. I'm very happy to use this new framework and hope to be autonomous soon...

By on 1/5/2018 9:50 AM ()

Well, you are using a Client-Server template, no? So there is a server, endpoints to accept requests on, and on one such endpoint you serve HTML with the JS behind it. If you don't want a server-side but just an HTML page that loads JS you generate from F#, do an SPA instead.

By on 1/5/2018 11:03 AM ()

Ok, I completely agree that it is server side. Therefore I would suspect that there is an automatic http service on my local machine. Maybe it's w3svc or equivalent. My bad, it was a stupid question indeed. Perfect. Thanks to you both. WebSharper is cool. Now it is my turn to open visual studio and complete the exercise, according to your expert suggestions. Kind regards. Bye

By on 1/5/2018 11:25 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