Skip to content

Instantly share code, notes, and snippets.

@aspnetde
Last active March 12, 2022 12:24
Show Gist options
  • Save aspnetde/076b519029c860191f233a7725bdaa47 to your computer and use it in GitHub Desktop.
Save aspnetde/076b519029c860191f233a7725bdaa47 to your computer and use it in GitHub Desktop.
namespace FabulousSubModules
open Fabulous.Core
open Fabulous.DynamicViews
open Xamarin.Forms
module App =
type Model =
{ Global: GlobalModel
Page1: Page1.Model
Page2: Page2.Model }
type Msg =
| Page1Msg of Page1.Msg
| Page2Msg of Page2.Msg
let initModel =
{ Global = { IsSecondPageOpen = false }
Page1 = fst (Page1.init())
Page2 = fst (Page2.init()) }
let init() = initModel, Cmd.none
let update msg (model:Model) =
match msg with
| Page1Msg m ->
let l, g, c = Page1.update m model.Page1 model.Global
{ model with Page1 = l; Global = g }, (Cmd.map Page1Msg c)
| Page2Msg m ->
let l, g, c = Page2.update m model.Page2 model.Global
{ model with Page2 = l; Global = g }, (Cmd.map Page2Msg c)
let view (model: Model) dispatch =
View.NavigationPage(pages = [
yield Page1.view model.Page1 model.Global (Page1Msg >> dispatch)
if model.Global.IsSecondPageOpen then
yield Page2.view model.Page2 model.Global (Page2Msg >> dispatch)
])
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
do runner.EnableLiveUpdate()
#endif
namespace FabulousSubModules
open Fabulous.Core
open Fabulous.DynamicViews
open Xamarin.Forms
module Page1 =
type Model =
{ Title: string }
type Msg =
| Open
let initModel = { Title = "Page 1" }
let init() = initModel, Cmd.none
let update msg (model: Model) (globalModel: GlobalModel) =
match msg with
| Open -> model, { globalModel with IsSecondPageOpen = true }, Cmd.none
let view (model: Model) (globalModel: GlobalModel) dispatch =
View.ContentPage (
title = "Page 1",
content = View.StackLayout (
verticalOptions = LayoutOptions.Center,
children = [
View.Button (
text = "Open",
command = (fun () -> dispatch Open),
horizontalOptions = LayoutOptions.Center) ]))
namespace FabulousSubModules
open Fabulous.Core
open Fabulous.DynamicViews
open Xamarin.Forms
module Page2 =
type Model =
{ Title: string }
type Msg =
| Close
let initModel = { Title = "Page 2" }
let init() = initModel, Cmd.none
let update msg (model: Model) (globalModel: GlobalModel) =
match msg with
| Close -> model, { globalModel with IsSecondPageOpen = false }, Cmd.none
let view (model: Model) (globalModel: GlobalModel) dispatch =
View.ContentPage (
title = "Page 2",
content = View.StackLayout (
verticalOptions = LayoutOptions.Center,
children = [
View.Button (
text = "Close",
command = (fun () -> dispatch Close),
horizontalOptions = LayoutOptions.Center) ]))
namespace FabulousSubModules
type GlobalModel =
{ IsSecondPageOpen: bool }
@aspnetde
Copy link
Author

aspnetde commented May 13, 2019

  • Each Page (wich results in an iOS Controller or an Android Activity) is seen as a sub-module
  • Pages don't know their sibling, but only themselves and a global/shared model
  • For more complex scenarios this could even be nested

Note:

  • This is just an extremely simplified case study.
  • IsSecondPageOpen does not need to be global, but is used as an example here. It could also be some user session information etcetera.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment