Running the jQuery Mobile WebSharper sample Core team

The jQuery Mobile sample on the WebSharper site has been out for quite some time now, but it fails to mention an important detail on how to run it standalone. Indeed, copying it straight into a new WebSharper ASP.NET project produces an empty page (which is not empty, only jQuery Mobile fails to kick in to decorate it into a full application), which can be a discouraging start for anyone looking into using jQuery Mobile for building mobile applications with F# and WebSharper.

What's not shown in that sample is that the sample runner sitelet adds a container div and a "dummy" jQuery Mobile page for the dynamic "paging" mechanism to work. So when you copy-and-paste the sample code into a new application, you need to add that same wrapper yourself. In case you are starting from a WebSharper ASP.NET template, you need to modify the ASPX file as follows:
1
2
3
4
5
6
7
8
...
<body>
     <div>
            <div data-role="page" id="dummy"></div>
            <ws:MyControl ID="MyControl1" runat="server"/>
     </div>
...
Hope this helps.

Last day to register to Tech Mesh 2012 Core team

This is your last chance to grab your ticket for Tech Mesh 2012, a great new conference for upcoming technologies and programming languages, taking place in London, UK between Dec 4 and 6! It's going to be an excellent and exciting event and I can't wait to demo our WebSharper work on integrating with the Facebook API. Drop me a message on FPish (adam.granicz) or on Twitter (@granicz) if you want to meet up during the conference, I'll be in London until the 6th.

The conference features various tracks of talks, including Banking, Gaming and Social Media, Infrastructure and Messaging, Languages, Next-Generation Analytics, Databases, and Scalability/Multicore, and has a great line of speakers including language designers and technology pioneers. This is definitely the event you don't want to miss if you are a functional programmer!

So hurry and grab your seat while they last! See you there!

Building UIs for WebSharper with ExtJS Architect Core team

As you may know, we provide a complete extension to WebSharper for ExtJS. It allows you to easily create full-fledged user interfaces with features one would expect from a desktop application.

The folks at Sencha have also developed a wonderful tool to design ExtJS interfaces called ExtJS Architect. It's a visual designer that allows you to very intuitively create a complete UI from the ground up and still provides access to every one of the numerous options and parameters ExtJS offers. And, as it turns out, it is very easy to use an interface created in Architect from a WebSharper application. Here is how.

A simple ExtJS Architect interface


Creating an interface


For this example, we will create the most basic UI possible in Architect. My goal is not to explain how to use Architect — it's not difficult anyways ;) — but simply to have a UI to integrate to WebSharper.

In the welcome screen, select "Ext JS 4.0.x". This is the version that is currently bound in the WebSharper extension. An extension for 4.1.x will be available as soon as possible, but until then, 4.0 it is.



You are now on the main screen of Architect. From the left menu, select "Containers", then drag-and-drop "Viewport" into the central area. The viewport is the full-page container into which the application components will be inserted.



Now, drag a Panel into the viewport you just created. This will create a container with a title bar. You can customize the title, and any other attributes, in the "Config" area (bottom-right).



You can now click the "Save" button and choose a location to save your project. With this, we have everything we need to learn how to use this UI we just created from WebSharper. You can beef it up a bit if you want, nothing is more satisfying than seeing a complete application appear on the first try ;)

Integrating with WebSharper


The integration can be done in a few simple steps.

  1. In the Project Inspector (top-right tree view), select the root node ("Application"). Then in the Config area, change the appFolder to "/app". Using an absolute path will avoid any problem when your application is served from a URL with subpaths, which will probably happen if you use Sitelets.


  2. In the "Settings" dialog of Architect (gear icon), go to the "Project" tab and set the "Publish path" to the Web project of your WebSharper application, which will generally be SolutionPath/ProjectName/Web.


  3. Now, your WebSharper project. In the HTML of your application, which will be Web/Main.html if you use the Sitelets project template, insert the following line:
    1
    2
    
    <script type="text/javascript" src="/app.js" />
    
    You want to put it after the WebSharper script manager, ie. the <meta data-replace="scripts"> tag. This way, WebSharper will have loaded ExtJS before trying to load the UI.
  4. Don't forget to add a reference to IntelliFactory.WebSharper.ExtJS.dll in your F# project. Now, the way dependencies work in WebSharper, ExtJS JavaScript and CSS tags are only added by the script manager if a class from ExtJS is used in code directly called from a Web.Control. However, here we are going to make ExtJS call directly a F# function when it has finished loading the UI. So we will need to add the following control somewhere on our page:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    module Client =
        open IntelliFactory.WebSharper.Html
        open IntelliFactory.WebSharper.ExtJS
    
        [<Sealed>]
        type Control() =
            inherit Web.Control()
    
            [<JavaScript>]
            override this.Body =
                Ext.OnReady ignore // use ExtJS in order to trigger the dependency
                Div [] :> _
    
  5. And finally, every time you modify your UI in Architect, click the "Publish" button, and voilà! Your application is up-to-date. No need to recompile your WebSharper application, since you only modified static JavaScript files.

Interacting with the UI from F#


All right, you have a nice and shiny user interface. But it doesn't do anything useful yet; it's time to fix this. We will now add code which, whenever the user clicks a button, displays an input dialog and then replaces the title of the panel with what the user has input.

First, let's add a button to our UI. Simply drag a Buttons > Button into the panel, customize the "text" config if you want to, save and publish.

As previously mentioned, we will make ExtJS call a F# function once the UI has been loaded. To do so, in the Application's config panel, click the + button on the "launch" line, then the arrow button that appeared. Then insert the following code into the editor:

1
2
Website.Client.Init(Ext.ComponentQuery.query("viewport")[0]);

Website.Client.Init is the F# function we are going to write; adjust the namespaces according to your application. And once again, don't forget to Publish.

Now, let's write this control function. Here is the code:

1
2
3
4
5
6
7
8
9
10
11
    [<JavaScript>]
    let Init (viewport : Ext.container.Viewport) =
        let button = viewport.Query("button").[0] :?> Ext.button.Button
        let panel = viewport.Query("panel").[0] :?> Ext.panel.Panel
        button.On("click", fun () ->
            Ext.Msg.Prompt("Change title", "What title?", fun (btnId, answer) ->
                if btnId = "ok" then
                    panel.SetTitle answer
            )
        )

viewport.Query retrieves an array of elements that match the given query. Since we have only one panel and one button, we can simply query by type; if you need to retrieve a specific element, you can give it an "id" config in Architect and use viewport.Query("#the_id"). The rest of the code is pretty self-explanatory: we attach a handler on the "click" event of the button, which opens a prompt window asking for a title.

Faster Printf Released on NuGet Core team

There is news on the faster F# Printf.* story. We released an alternative implementation as a package today. NuGet: IntelliFactory.Printf Source: https://bitbucket.org/IntelliFactory/printf Some background: F# Printf.* functions are a very nice interface for formatted printing, but the default implementation is quite slow, which is undesirable for production use (say, for logging inside a server). I believe the F# team is addressing this for their next release - and when it comes, it is go[...]
>> Read the full article on t0yv0.blogspot.com

AppHarbor: Free Cloud Hosting of WebSharper Apps Core team

We have just released a new version (2.4.85) of WebSharper, our web development framework and F#-to-JavaScript compiler. The main highlight of this release is experimental support for easy cloud deployment of your applications with AppHarbor. Small AppHarbor deployments are currently free, which is great news for individual developers and small companies. How to get it to work: Set up a GitHub or Bitbucket repository Set up an AppHarbor account Connect the two, according to AppHarbor instruc[...]
>> Read the full article on t0yv0.blogspot.com

WebSharper 2.4.63 Core team

WebSharper has seen a few more releases, the latest being 2.4.63. In a nutshell, you now can: Update HTML templates in sitelets without recompiling the solution and see immediate changes Use VS in Windows Phone 7 and Eclipse in Android templates, taking advantage of more customization opportunities and IDE services such as an integrated debugger Use HttpContext.Current.Session in sitelets and remote/RPC methods Use Visual Studio 2011 Beta, .NET 4.5, Windows 8, F# 3.0, even if you do not have[...]
>> Read the full article on t0yv0.blogspot.com

WebSharper 2.4 Q2 available Core team

A few days ago, I blogged about WebSharper 2.4 Q2 Beta, announcing a handful of important changes to WebSharper. Today, we are happy to announce the general availability of WebSharper 2.4 Q2, available from the WebSharper downloads page.

The main changes, as described in the WebSharper wiki:

Better HTML templates

All sitelets projects are now equipped with a new HTML template system. The major improvement over the previous system is the ability to edit the HTML and see changes take effect without recompiling the WebSharper project. Templates also make use of HTML5 data-* attributes in a way that makes it possible to develop, test and validate template files as HTML5 documents, for example:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <title>${title}</title>
  </head>
  <body>
    <div id="main" data-hole="main">
      Sample content here that will be replaced during expansion.
    </div>
  </body>
</html>
The former template system is now deprecated.

Revamped mobile application support

We have reviewed and improved our experimental support for packaging WebSharper code into native Android and Windows Phone applications. One big change is that Android and Windows Phone project templates are now separate. You can still reuse code across these applications by putting it in a WebSharper library and referencing from both projects. Separating the project templates has allowed to specialize them. For example, you can now use Eclipse/ADT to customize and debug the generated Android application. On the Windows Phone platform, you can likewise now attach the Visual Studio debugger or customize the XAML. Please refer to the latest documentation for full details.

In addition, we are now releasing experimental support for writing Bluetooth clients and servers on the Android platform. Note that the experimental status means the API is unstable.

extra.files

As a convenience for build automation, we now include a special file called extra.files with every mobile and HTML project. This file allows to easily copy extra files from the project to be deployed under the generated HTML application root. See #31 for details.

Bug fixes

The bug fixes in this release primarily concern the fixes necessary to run WebSharper on the latest Microsoft platform tools, including Windows 8, .NET 4.5, F# 3.0 and VisualStudio 2011, in various combinations.

Summary

Issues resolved in 2.4.62

Force-Directed Graph Layout in HTML5 with F# and WebSharper Community

Do you want to write succinct, type-safe and correct HTML5 web code which is not full of bugs?  Writing Javascript-executing code with F# is appealing for these and other reasons I've gone into before, and the open source Pit and WebSharper frameworks give ways to use F# to write HTML5/Javascript code for web and mobile applications. But what's it like to write this kind of F# code? What's it like to really write efficient, strongly-typed code that converts to Javascript?  On DeveloperFusion, A[...]
>> Read the full article on blogs.msdn.com

WebSharper 2.4 Q2 Beta out Core team

We have been working hard to bring you WebSharper 2.4 Q2 - and today we are happy to announce the availability of the the first beta (2.4.46).

We will be doing a detailed change log and announcement in the coming days, so stay tuned. One of the most significant changes in this release is dynamic templating - a feature that enables authoring template-based web applications whose template(s) can be changed runtime without requiring re-compilation.

Dynamic templates are not only flexible but also come with a couple significant enhancements over the static templating available in earlier releases. For instance, you can tune how and when your templates get served and instantiated, whether placeholders act as containers or direct content holes, and what type of content can go into them.

For instance, here is a dynamic template in F#:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
        let TemplateLoadFrequency = Content.Template.PerRequest

        type Page =
            {
                Title : string
                Head : list<Content.HtmlElement>
                HeadStyles : list<Content.HtmlElement>
                Slider : list<Content.HtmlElement>
                Breadcrumbs : list<Content.HtmlElement>
                Main : list<Content.HtmlElement>
            }

        let MainTemplate =
            let path = HttpContext.Current.Server.MapPath("~/static/my-template.html")
            Content.Template<Page>(path, TemplateLoadFrequency)
                .With("title", fun x -> x.Title)
                .With("head", fun x -> x.Head)
                .With("headStyles", fun x -> x.HeadStyles)
                .With("slider", fun x -> x.Slider)
                .With("breadcrumbs", fun x -> x.Breadcrumbs)
                .With("main", fun x -> x.Main)
You can use this template to construct sitelet pages as follows:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    let Site =
        Sitelet.Content "/" Action.Home 
            <| (Content.WithTemplate MainTemplate <| fun ctx ->
                {
                    Page.Title = "My title"
                    Page.Head = []
                    Page.HeadStyles = []
                    Page.Slider = []
                    Page.Breadcrumbs = MyBreadcrumbsFor ctx action
                    Page.Main =
                        [
                            H1 [Text "This is where your main content goes"]
                        ]
                })
The beta release also ships support for .NET 4.5, and should work if you have Windows 8 and Visual Studio 2011 Beta.

If you find any bugs, please get in touch at the WebSharper contact page, post them in the public BitBucket issue tracker, or simply post them here.

Have fun!