Kimserey's blog

Create a simple form engine with WebSharper.UI.Next in F# WebSharper came out with WebSharper.Forms. It is a terse DSL to build form, I posted a tutorial on it few months ago https://kimsereyblog.blogspot.co.uk/2016/03/create-forms-with-websharperforms.html . It’s very powerful as the abstraction handles most of the scenarios. Today I would like to show anothe way to create forms by building a form engine. This post will be composed by 4 parts: Define the domain Implement the renderers Use it 1. Define the domain Defining a model is tricky. It needs to be both flexible enough to handle all needed scenario but it also needs to be simple enough that there aren’t too many options which would make the domain messy. I will give an example later to illustrate this. For a form engine, the domain model is composed by the elements of form and the submission behaviors. Form elements For this example we will just implement the input and input area . Implementing the rest of the con...

Post form data to WebSharper sitelet from HTML/JS When building websites, chances are that you will need to gather data from your users. The most common way to gather data is via a form. But after gathering the data, there are two ways to submit it from the browser to your server: Using a HTML form Using an Ajax call Today we will see the differences and how we can implement it. 1. Submit data using a form Before hand, I have created a simple server which has a single endpoint accepting a POST. type EndPoint = | [<EndPoint "POST /upload">] Upload let Main = Application.MultiPage (fun ctx -> function Upload -> Content.Text "Received") Next we can create a simple form with one an input and button to submit. <form method="post" action="/upload"> <input name="my-data" type="text" /> <button type="submit">Submit</button> </form> The action is the url to ...

Use JS local storage with ListModel with WebSharper UI.Next in F# Last week I wanted to use the browser local storage to store a list of elements. I wanted to update the resource split project to have the data stored (temporarily) so that it will be easier to add or remove resources. The browser local storage is ideal for this kind of scenario. Turns out WebSharper.UI.Next has the feature built in to persist ListModel so today I will explain how to do it. This post is composed by two parts: 1. Use local storage with ListModel UI.Next 2. Debug values stored in Chrome 1. Use local storage with ListModel in UI.Next I started to browse WebSharper code and found that ListModel exposed a function named CreateWithStorage and that the default implementation was set to be used with local storage (ha! exactly what I wanted). The definition can be found here . So to use the storage we must use CreateWithStorage and Storage.default . CreateWithStorage<'Key, 'T when 'Ke...

20170202_listmodel_websharper_lostfocus.md How to avoid input lost focus with ListModel WebSharper F# Few months ago, I explained how ListModel worked . Today I would like to share a recurring issue that I used to have - lost of focus on input every time the ListModel values change . There’s an easy solution to that which I will demonstrate by first showing the initial code and explaining what is going on, why the focus is lost, then I will explain how we can work around it. This post will be composed by two parts: 1. Why the inputs lose focus? 2. How to prevent it I thought about sharing this when I saw that someone else has had the same issue - http://try.websharper.com/cache/0000Bj . 1. Why the inputs lose focus? The code is the following: [<JavaScript>] module Lensing = let aliases = ListModel.Create id [ "Bill"; "Joe" ] let lensIntoAlias aliasKey = aliases.LensInto id (fun a n -> n) aliasKey let Main = d...

Authentication for WebSharper sitelet with Jwt token in F# Authentication is an important part of any Web applications. Today I will explain how we can create the essential modules required to authenticate a user. This post will be composed by four parts: 1. What is needed for authentication 2. Password encryption and storage 3. JWT token 4. OWIN auth middleware and WebSharper OWIN selfhost 5. Glue it all together 1. What is needed for authentication In this blog post we will see how to authenticate users with credentials userid and password. First, we will see how to store encrypted password and how we can verify credentials against the one contained in database. Then we will see how we can authenticate users while communicating between client (browser) and server with Jwt token. Lastly we will see how both glued together provide a reliable authentication story. 2. Password encryption and storage 2.1 Storage To store data I will be using Sqlite via Sqlite net pcl. If yo...

Output logs in Console, File and Live stream for your WebSharper sitelet Logs are an important part of development. Extracting and analysing debug output and errors is very important especially when the web server goes live. In this post I will show how we can setup a Console target , a File target and a Live stream on a static HTML page using NLog . NLog is a log framework which can be configured to output logs on different “target”. https://github.com/nlog/NLog/wiki/Targets This post is composed by 4 parts: 1. Get NLog on your sitelet 2. Define a Console target 3. Define a File target 4. Define a Live stream target - WebSharper part 1. Get NLog on your sitelet First start by getting NLog and NLog.Configuration packages from nuget. This will install NLog package in your project and also add an xml configuration nlog.xml file with an xsd. To start logging, simply get the logger instance via let logger = LogManager.GetCurrentClassLogger() and start logging by using any o...

Bring internationalization (i18n) to your WebSharper webapps in FSharp When working on webapps which need to be used by international clients, it is important to provide internationalization (i18n). I18n is the process of developing web/desktop/mobile applications which provide an easy way to change language and culture to be localized to different markets. For example, English and French markets have different language, date format and number format. The webapp needs to provide a way to switch texts and respect date and number formats. So today I will show you how you can bring i18n to your WebSharper webapp. This post is composed by three parts JS libraries WebSharper bindings to work with F# Example Here is a preview: 1. JS libraries There are three parts that needs to be configurable in order to provide i18n. the language, all text needs to be translated the date format, in some places, the days is after before the months - also days and months need to be translated ...