Example of a grid layout with Fabulous

TenFabulous.fs

// Copyright 2018 Fabulous contributors. See LICENSE.md for license.
namespace TenFabulous

open System.Diagnostics
open Fabulous.Core
open Fabulous.DynamicViews
open Xamarin.Forms

module App = 
    type Model =  { 
        Username : string option
        Password : string option}
    type Msg = 
        | UpdatedUsername of string
        | UpdatedPassword of string
        | Login

    let initModel = { Username = None; Password = None;}

    let init () = initModel, Cmd.none
    
    let update msg model =
        match msg with
        | UpdatedUsername s -> {model with Username = Some s}, Cmd.none
        | UpdatedPassword s -> {model with Password = Some s}, Cmd.none
        | Login -> model, Cmd.none                  // TODO: do nothing for now. 


    let view (model: Model) dispatch =

        let canLogin = 
            match model.Username, model.Password with 
            | Some _, Some _ -> true
            | _, _ -> false
    
        View.ContentPage(
          content = 
            View.Grid(
                rowdefs= [for row in 1 .. 10 -> box "*"], 
                coldefs=[for col in 1 .. 6 -> box "*"],
                horizontalOptions = LayoutOptions.FillAndExpand,
                verticalOptions = LayoutOptions.FillAndExpand,
                children = [ 
                    View.Image(
                        source="", // TODO: Add the logo here. 
                        backgroundColor = Color.Blue, // TODO: placeholder for the image
                        horizontalOptions=LayoutOptions.FillAndExpand, 
                        verticalOptions = LayoutOptions.FillAndExpand
                        ).GridRow(1).GridColumn(1).GridRowSpan(1).GridColumnSpan(4) 

                    View.Image(
                        source="", // TODO: Add the inwards good logo here
                        backgroundColor = Color.Blue, // TODO: placeholder for the image
                        horizontalOptions=LayoutOptions.FillAndExpand, 
                        verticalOptions = LayoutOptions.FillAndExpand
                        ).GridRow(3).GridColumn(2).GridRowSpan(2).GridColumnSpan(2) 

                    View.Entry(
                        placeholder="usernaem",
                        fontSize = 20.,
                        textChanged = (fun e -> e.NewTextValue |> UpdatedUsername |> dispatch),
                        horizontalOptions=LayoutOptions.FillAndExpand, 
                        verticalOptions = LayoutOptions.FillAndExpand
                        ).GridRow(7).GridColumn(1).GridColumnSpan(4) 
                        
                    View.Entry(
                        placeholder="password",
                        fontSize = 20.,
                        textChanged = (fun e -> e.NewTextValue |> UpdatedPassword |> dispatch),
                        horizontalOptions=LayoutOptions.FillAndExpand, 
                        verticalOptions = LayoutOptions.FillAndExpand
                        ).GridRow(8).GridColumn(1).GridColumnSpan(4)                         

                    View.Button(
                        fontSize = 20.,
                        text = "LOG IN",
                        backgroundColor = Color.Orange,
                        textColor = Color.White, // TODO: Small bug in Fabulous. Raise an issue and get fixed.
                        cornerRadius = 5,
                        command = (fun _ -> dispatch Login),
                        canExecute = canLogin,
                        horizontalOptions=LayoutOptions.FillAndExpand, 
                        verticalOptions = LayoutOptions.EndAndExpand
                        ).GridRow(9).GridColumn(1).GridColumnSpan(4) 

                    View.Label(
                        text = "V0.1.0.181132201",
                        fontSize = "13",
                        horizontalOptions=LayoutOptions.End, 
                        verticalOptions = LayoutOptions.Center // Centered as End does not show correctly on an iPhone 10
                        ).GridRow(10).GridColumn(1).GridColumnSpan(5) 

                    ]))

    // Note, this declaration is needed if you enable LiveUpdate
    let program = Program.mkProgram init update view

type App () as app = 
    inherit Application ()

    let runner = 
        App.program
#if DEBUG
        |> Program.withConsoleTrace
#endif
        |> Program.runWithDynamicView app

#if DEBUG
    // Uncomment this line to enable live update in debug mode. 
    // See https://fsprojects.github.io/Fabulous/tools.html for further  instructions.
    //
    //do runner.EnableLiveUpdate()
#endif    

    // Uncomment this code to save the application state to app.Properties using Newtonsoft.Json
    // See https://fsprojects.github.io/Fabulous/models.html for further  instructions.
#if APPSAVE
    let modelId = "model"
    override __.OnSleep() = 

        let json = Newtonsoft.Json.JsonConvert.SerializeObject(runner.CurrentModel)
        Console.WriteLine("OnSleep: saving model into app.Properties, json = {0}", json)

        app.Properties.[modelId] <- json

    override __.OnResume() = 
        Console.WriteLine "OnResume: checking for model in app.Properties"
        try 
            match app.Properties.TryGetValue modelId with
            | true, (:? string as json) -> 

                Console.WriteLine("OnResume: restoring model from app.Properties, json = {0}", json)
                let model = Newtonsoft.Json.JsonConvert.DeserializeObject<App.Model>(json)

                Console.WriteLine("OnResume: restoring model from app.Properties, model = {0}", (sprintf "%0A" model))
                runner.SetCurrentModel (model, Cmd.none)

            | _ -> ()
        with ex -> 
            App.program.onError("Error while restoring model found in app.Properties", ex)

    override this.OnStart() = 
        Console.WriteLine "OnStart: using same logic as OnResume()"
        this.OnResume()
#endif