Jonathan Peel

Xamarin Forms, with F# - Part 2, ReactiveUI

2019-03-06T20:45:00.002-08:00

Next, I want to add ReactiveUI.

Copy Project

I am making a copy of my project folder and calling it FXamRx. I also open up Visual Studio, the solution, projects, and all namespaces to FXamRx.
Then build and run everything, to make sure that nothing has been broken.

ReactiveUI is an MVVM framework, based on Reactive Extensions.

Add ReactiveUI

Right click on the solution and select Manage NuGet Packages for Solution, Search for ReactiveUI.XamForms and add it to both projects.

Create a ViewModel

In the Xamarin.Forms project create a code file called MyReactiveViewModel.fs

Our ViewModel needs to inherit from ReactiveObject and IRoutableViewModel. It needs an IScreen (this is what ReactiveUI uses for switching between views and view models).

I am also going to add a message for now. This will be static, I want to get the basics working, then I will expand on it., so MyReactiveViewModel.fs ends up being

namespace  Jon.FXamRx  
  
open  ReactiveUI  
open  Splat  
  
type  MyReactiveViewModel  (?hostScreen:  IScreen)  =  
inherit  ReactiveObject()  
new()  =  MyReactiveViewModel(null)  
  
member  this.Message  =  "Welcome to a basic MVVM"  
  
interface  IRoutableViewModel  with  
member  this.HostScreen:  IScreen  =  if  hostScreen.IsSome  then  hostScreen.Value  else  Locator.Current.GetService<IScreen>()  
member  this.UrlPathSegment:  string  =  ""

Create a View

I am going to delete Page1.fs, I got the XAML page working, so I am not going to keep the old coded page. If you prefer using coded pages, please use it, but I am not going to show that here.

I make a copy of Page2.xaml[.fs] and rename it to MyReactiveView.xaml[.fs].

The page needs to inherit from ReactiveContentPage<T> instead of the Xamlarin built in ContentPage. It also needs a type paramter that will point to the View Model. I also want to keep the label, but this time, instead of giving a default message I give it a name, to use for binding in the “code behind”.

MyReactiveView.xaml now looks like this

<?xml version="1.0" encoding="utf-8"?>  
<rxFroms:ReactiveContentPage  xmlns="http://xamarin.com/schemas/2014/forms"  
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
xmlns:rxFroms="clr-namespace:ReactiveUI.XamForms;assembly=ReactiveUI.XamForms"  
xmlns:local="clr-namespace:Jon.FXamRx"  
x:Class="Jon.FXamRx.MyReactiveView"  
x:TypeArguments="local:MyReactiveViewModel">  
<Label  x:Name="Message"  VerticalOptions="Center"  HorizontalOptions="Center"  />  
</rxFroms:ReactiveContentPage>

In MyReactiveView.xaml.fs we just have to rename the type, inherit from ReactiveContentPage, and bind the control to the View Model

namespace  Jon.FXamRx  
  
open  ReactiveUI.XamForms  
open  Xamarin.Forms.Xaml  
open  ReactiveUI  
open  Xamarin.Forms  
  
type  MyReactiveView  ()  as  this  =  
inherit  ReactiveContentPage<MyReactiveViewModel>  ()  
let  _  =  base.LoadFromXaml(typeof<MyReactiveView>)  
let  message  =  base.FindByName<Label>("Message")  
  
override  __.OnAppearing()  =  
base.OnAppearing()  
this.OneWayBind  (this.ViewModel,  (fun  vm  ->  vm.Message),  (fun  v  ->  (v.Message  :  Label).Text))  |>  ignore  
  
member  val  Message  =  message  with  get

I know that I am ignoring a subscription, and this should be disposed, but for now, I am not going to worry about that.

AppBootstrapper

This is not going to just run, because we need to first tell the app what that “MainPage” is.

In ReactiveUI, it is common to use an AppBootstrapper. This also acts as out IScreen that gets sent to the View Model.

We create a new code file called AppBootstrapper.fs.
In here we need to set up a very basic service locator. We will use Splat because it bundles with ReactiveUI. It might not be my favourite in some regards, but it is very quick to get going, and for a small project it does the job.
We need to connect AppBootstrapper to IScreen, and we need to connect our View to our View Model. We also need a small function that will create our MainPage.

namespace  Jon.FXamRx  
  
open  ReactiveUI  
open  Splat  
open  ReactiveUI.XamForms  
open  Jon.FXamRx  
open  Xamarin.Forms  
  
type  AppBootstrapper()  as  this  =  
inherit  ReactiveObject()  
  
let  router  =  new  RoutingState()  
  
do  
Locator.CurrentMutable.RegisterConstant<IScreen>  this  
Locator.CurrentMutable.Register  (fun  ()  ->  new  MyReactiveView()  :>  IViewFor<MyReactiveViewModel>)  
router.NavigateAndReset.Execute(MyReactiveViewModel())  |>  ignore  
  
member  __.CreateMainPage()  =  
new  RoutedViewHost()  :>  Page  
  
interface  IScreen  with  
member  __.Router  
with  get()  =  
router

App.fs

App.fs just needs to be wired up to create the Bootstrapper and grab the Main Page.

namespace  Jon.FXamRx  
  
open  Xamarin.Forms  
  
type  App  ()  =  
inherit  Application  (MainPage  =  AppBootstrapper().CreateMainPage())

Conclusion

This now builds, and the expected message is shown on the screen. It might seem like a lot of work for just a message, but this outline should make the next steps of any apps a little easier.

The code, up to this point, is available on GitHub.

Xamarin Forms, with F#

2019-03-02T05:37:00.001-08:00

xam-fsharp-01

I wanted to give F# a “go” in a Xamarin project, but Visual Studio (at least on Windows) does not have a Xamarin Forms template for F#. This means that I will need to create it myself.
I am sure it will be possible, and I will use a C# project as a guide.

I am in no way proficient in F#, but that is also because I have never really used it in a “real” project, and I would like to give it a good try.

In this post, I am going to attempt to create just the outline of the project.

Create a new project

In Visual Studio, I am creating an F#, .Net Standard Class Library. This will become my Xamarin Forms library (called PCL before .Net Standard). I am naming my project Jon.FXam.

I then want to add Xamarin.Forms from NuGet.

Now I need to create my App “Class”, I can’t find any XAML for F#, so I will just have to try my best at coding it.

Rename Library.fs to App.fs and set its content to:

namespace Jon.FXam

open Xamarin.Forms

type App() =
    inherit Application()

It builds.

Add an Android project

I am using Android because that is what I am most familiar with, and it is what I use most the time for projects at work. If I get the need to use iOS I will update this, or add to it. For now, it is Android only.

I use the Blank App (Android) Template, in F#. I name it Jon.FXam.Android. Some people might prefer to use .Droid but .Android seems to be the current convention.

I add Xamarin.Forms through NuGet, I also add a project reference to my base project. I then need to edit MainActivity.fs.

namespace Jon.FXam.Android

open Jon.FXam
open Android.App
open Xamarin.Forms
open Xamarin.Forms.Platform.Android

type Resources = Jon.FXam.Android.Resource

[<Activity (Label = "Jon.FXam.Android", MainLauncher = true, Icon = "@mipmap/icon")>]
type MainActivity () =
    inherit FormsAppCompatActivity()

    override this.OnCreate (bundle) =
        base.OnCreate (bundle)
        Forms.Init(this, bundle)
        this.LoadApplication(new App())

It builds.

AppCompat

Theme

App Compat needs a theme, so I copy the styles.xml file from another Xamarin project. This goes in Resources > values, and needs the build action set to AndroidResource.

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="MainTheme" parent="MainTheme.Base">
  </style>
  <!-- Base theme applied no matter what API -->
  <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <!--<item name="android:colorActivatedHighlight">#00f</item>-->
    <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
    <item name="windowNoTitle">true</item>
    <!--We will be using the toolbar so no need to show ActionBar-->
    <item name="windowActionBar">false</item>
    <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">#2196F3</item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">#1976D2</item>
    <!-- colorAccent is used as the default value for colorControlActivated
         which is used to tint widgets -->
    <item name="colorAccent">#FF4081</item>
    <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight and colorSwitchThumbNormal. -->
    <item name="windowActionModeOverlay">true</item>

    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
  </style>
  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>
  </style>
</resources>

MainActivity

The attributes on MainActivity need to reference the theme, so it gets changed to

[<Activity (Label = "Jon.FXam.Android", MainLauncher = true, Icon = "@mipmap/icon", Theme = "@style/MainTheme")>]

It builds.
It also runs, but at the moment it is only a blank screen.

Content Page

We are back to the Base Project.

I add New Item to the project, and select Source File. There is no XAML option. That is something I will miss, but even in a C# project, XAML is optional. I name it Page1.fs, and create a very basic outline of Xamarin Forms Page.

namespace Jon.FXam

open Xamarin.Forms

module private Page1 =
    let content () =
        let layout = new StackLayout()
        layout.Children.Add (new Label (Text = "Welcome to F# & Xamarin Forms!"))
        layout

type Page1() =
    inherit ContentPage (Content = Page1.content())

I do not know if this is the best way to do this (F# is not the first language for me), but it is working, so, for now, I am happy.

Then reference that from App.

type App () =
    inherit Application (MainPage = new Page1 ())

It builds.
It runs.
It shows something on the screen.

Follow up (XAML)

Visusal Studio for Mac has F# Xamarin projects (I am jelous). It also allows you to add XAML files to the project.

XAML File

Create an XML file in the Forms project, call it Page2.xaml

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Jon.FXam"
             x:Class="Jon.FXam.Page2">
    <Label Text="Welcome to F# &amp; Xamarin Forms, now with XAML!!!" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

Be sure to add the full namespace in xmlns:local, and make sure you have the fully qualified class name in x:Class.

Code File

Create an F# file called Page2.xaml.fs

namespace Jon.FXam

open Xamarin.Forms
open Xamarin.Forms.Xaml

type Page2() =
   inherit ContentPage()
   let _ = base.LoadFromXaml(typeof<Page2>)

App

Set the application main page to Page, in App.fs

type App () =
    inherit Application (MainPage = new Page2 ())

This base XAML page can now be coppied if more XAML pages are needed.

Conclusion

This is the point that I was wanting to get to, and I am happy here. Happy that it can be done, and happy that I have a base project that I can clone and use as a starting point.

To peruse, copy, or make fun of any of the code, please find it on GitHub

Reactive Unit Testing

2018-09-21T07:27:00.004-07:00

Reactive Unit Testing

The problem

I have done a project using Reactive Extentions, but I have not been able to figure out how to write unit tests for it.
My plan is o create a simple example I can use to try unit testing reactive code.

The solution

To start with I am creating a new solution, with two projects, one is a simple .Net Standard project, and the other an XUnit project.
Add System.Reactive to both projects, and add Microsoft.Reactive.Testing to the test project.

I want to start with something simple, like a counter that will return the next value every seccond.

First Test

The first test will be to make sure it starts by returning a 0.
The outline of test class is:

using System.Reactive.Linq;
using System.Threading.Tasks;
using Jonathan.ReactiveProject;
using Xunit;

namespace Jonathan.ReactiveProjectTests
{
    public class ReactiveObjectTests
    {
        [Fact]
        public async Task Sequence_Recieves_0()
        {
            var fixture = new ReactiveObject();
            var result = await fixture.Sequence.FirstAsync();
            Assert.Equal(0, result);
        }
    }
}

This test is going to fail, becase we haven’t written anything to support it yet,
so we need to start with the minimum amount of code to allow the test to pass:

using System;
using System.Reactive.Linq;

namespace Jonathan.ReactiveProject
{
    public class ReactiveObject
    {
        public IObservable<int> Sequence { get; } = Observable.Return(0);
    }
}

A test with a schedualer

I want to be able to recieve the next value, so the test needs to be a little more sofisticated.

[Fact]
public async Task Sequence_Recieves_1()
{
    var scheduler = new TestScheduler();
    var fixture = new ReactiveObject(scheduler);
    var result = 0;
    fixture.Sequence.Take(2).Subscribe(x => result = x);
    scheduler.Start();
    Assert.Equal(1, result);
}

We use a Scheduler to help with the flow. If we implemented this we would repplace the TestScheduler with something like RxApp.MainThreadScheduler, or Scheduler.CurrentThread depending on what thread we need the code to run on.

We Take(2) because we want the second result (the first one being 0).

This test is not going to pass, so we need to update our ReactiveObject:

public class ReactiveObject
{
    int counter = 0;

    public ReactiveObject(IScheduler scheduler)
    {
        Sequence = Observable
                  .Interval(TimeSpan.FromSeconds(1), scheduler)
                  .Select(_ => counter++);
    }

    public IObservable<int> Sequence { get; }
}

This breaks the first test, but we can remove that, and update out second [Fact] to a [Theory] to handle more options:

[Theory]
[InlineData(0)]
[InlineData(1)]
public async Task Sequence_Recieves(int expected)
{
    var scheduler = new TestScheduler();
    var fixture = new ReactiveObject(scheduler);
    var result = 0;
    fixture.Sequence.Take(expected + 1).Subscribe(x => result = x);
    scheduler.Start();
    Assert.Equal(expected, result);
}

This test should still pass, so lets add more inline data, and it should still work just fine:

[InlineData(0)]
[InlineData(1)]
[InlineData(2)]
[InlineData(3)]
[InlineData(4)]
[InlineData(5)]
[InlineData(6)]
[InlineData(7)]
[InlineData(8)]
[InlineData(9)]
[InlineData(10)]
[InlineData(100)]
[InlineData(1000)]
[InlineData(10000)]
[InlineData(100000)]

Because of how the TestSchedualr works, this still runs very quickly, and we don’t have to wait 100000 seconds for the last one to run.

Extra tests

If we want to, we can also add a test that will check the range of results returned, I will start by copying the first test, and making a few modifications to it:

[Theory]
[InlineData(0)]
[InlineData(1)]
[InlineData(2)]
[InlineData(3)]
[InlineData(4)]
[InlineData(5)]
[InlineData(6)]
[InlineData(7)]
[InlineData(8)]
[InlineData(9)]
[InlineData(10)]
[InlineData(100)]
[InlineData(1000)]
[InlineData(10000)]
[InlineData(100000)]
public async Task Sequence_Recieves_Range(int expected)
{
    var expectedRange = Enumerable.Range(0, expected + 1);
    var scheduler = new TestScheduler();
    var fixture = new ReactiveObject(scheduler);
    var resultRange = new List<int>();
    fixture.Sequence.Take(expected + 1).Subscribe(x => resultRange.Add(x));
    scheduler.Start();
    Assert.Equal(expectedRange, resultRange);
}

These tests also pass, so the next step will be to refactor.

I can’t see to much wrong in ReactiveObject so I will refactor my test class;
I can take the scheduler and fixture out of each test method (Some people prefer to set up each test from scratch within each test, and not to mix anything, but for now I will take it out). There is also a lot of duplicated InlineData, so I will see what can be done with that:

public class ReactiveObjectTests
{
    readonly TestScheduler scheduler = new TestScheduler();
    readonly ReactiveObject fixture;

    public ReactiveObjectTests() => fixture = new ReactiveObject(scheduler);

    [Theory]
    [MemberData(nameof(GetTestData))]
    public void Sequence_Recieves(int expected)
    {
        var result = 0;
        fixture.Sequence.Take(expected + 1).Subscribe(x => result = x);
        scheduler.Start();
        Assert.Equal(expected, result);
    }

    [Theory]
    [MemberData(nameof(GetTestData))]
    public void Sequence_Recieves_Range(int expected)
    {
        var expectedRange = Enumerable.Range(0, expected + 1);
        var resultRange = new List<int>();
        fixture.Sequence.Take(expected + 1).Subscribe(x => resultRange.Add(x));
        scheduler.Start();
        Assert.Equal(expectedRange, resultRange);
    }

    public static IEnumerable<object[]> GetTestData() =>
        (new[] { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 100, 1000, 10000, 100000 })
       .Select(x => new[] { x as object });
}

Done

That is it for now, I really don’t know if this is bthe best way to do that, but it is more than what I have been able to figure out before.

If you have any questions, or suggestions, please leave a comment. If you would like to grab the code I was working on, it is on GitHub.

My recipe for Kvass

2018-09-14T22:57:00.002-07:00

I have been tweaking a personal kvass recipy. I feel it has reached the point where it can be written down, although there may still be some editing done to it.

Ingrediants

500g rye bread
about 5l water
raisons (optional)
100g sugar
10g brewers yeast

You also will need some muslin cloth.

Try get 100% rye. I have tried 60% and 100%, and the pure rye bread makes it a lot better.
I don’t like it too sweet, so try this, and adjust your sugar if you need to.
For a while the only yeast I could find was instant yeast. This still works, but it seems to activate a bit quicker

Process

Dry the bread

The first thing you want to do is break the bread up a bit (I break each slice into qurters) and lay it out in an ovan tray. Bake the bread on about 180 until it has compltly dried out, turning it over once the top has dried out.

I find that it is best to pull it out just before the bread starts to burn. If it starts to smoke it has been in a little to long, but the point just before that is purfect.

You can also use a toaster, and just toast each slice of bread, that is up to you.

Soak bread

Put the bread into one or two large containers. I use two 3l jugs. You could also a large pot, if that is what you have.

Throw in a handfull of rainsons.

Boil 4l of water (in the kettle), and pour it over the bread. For me that is two kettles of 2l, one for each jar.

Caramel water

In a small pot, carmalise about 60g of sugar, and disolve it into a leter of boiled water.

Let it stand

Put the caramel water, and the bread jars aside and just let them cool down.
Time is needed for the bread to flavour the water, and you want to wait for both to be just above room temprature so you don’t harm the yeast when that is mixed in.

Drain

Once the bread water is at room temprature, you can drain it into another pot.
Line a sift with muslin cloth, and pour the water through it, cathing bread chunks and raisons.

The bread can be thrown away, and the jars should be rinced out.

Mix yeast

Mix 10g of yeast and 40g sugar into the caramel water. once it is mixed, pour the liquid back into the jars.

The mixture with the yeast needs time to brew. Keep it in a fairly warm place, with a towel over the jars to keep a bit of extra heat in.

Keep an eye on the liquid, you should see it forming a very fine foam layer on top. Let it stand for about half an hour longer, for the foam to start disapaiting.

Bottle

Line a funnle with muslin cloth, and slowly pour the liquid into old water or colddrink bottles.

Close the bottles, and put them in the fridge, at least over night.
It is drinkable the next day, but I find it best after about two days.

Feedback

Please let me know if you try this, and any of your own tweaks you add.