-
|
I'm obviously doing something stupid. I have an Elmish app defined something like this: type SunshineApp =
{ name: string
// ...
}
type SunshineApps =
{ env: Map<string, string>
apps: SunshineApp list }
type State =
{ sunshineClient: SunshineClient
apps: SunshineApps
selectedApp: string option }
type Msg =
| FetchApps
| FetchAppsSuccess of apps: SunshineApps
| FetchAppsFailure of error: string
| SelectApp of index: int
// init elided
let update (msg: Msg) (state: State) : State * Msg Cmd =
match msg with
| FetchApps ->
state,
Cmd.OfAsync.either
(fun state -> state.sunshineClient.getAppsAsync () |> Async.AwaitTask)
state
FetchAppsSuccess
(fun ex -> ex.Message |> FetchAppsFailure)
| FetchAppsSuccess apps -> { state with apps = apps }, Cmd.none
| FetchAppsFailure error ->
printfn "Failed to fetch apps: %s" error
state, Cmd.none
| SelectApp index ->
{ state with
selectedApp =
if index >= 0 then
Some state.apps.apps[index].name
else
None },
Cmd.none
// view elided
The However, the Listbox that renders The function which renders this part of the UI is defined as: let private createGamesListPanel (state: State) (dispatch) =
DockPanel.create
[ DockPanel.dock Dock.Left
DockPanel.children
[ StackPanel.create
[ StackPanel.margin (Thickness.Parse("0 10 0 0"))
StackPanel.spacing 10.0
StackPanel.dock Dock.Bottom
StackPanel.children
[ mkVerticalStackButton "Refresh Apps" (fun () -> FetchApps |> dispatch)
mkVerticalStackButton "Discover Games" (fun () -> DiscoverGames |> dispatch) ] ]
ListBox.create
[ ListBox.width 300.0
ListBox.viewItems (
state.apps.apps
|> List.map (fun app -> TextBlock.create [ TextBlock.text app.name ])
)
ListBox.selectedItem (state.selectedApp |> Option.defaultValue "")
ListBox.onSelectedIndexChanged (fun index -> SelectApp index |> dispatch) ] ] ]
let view (state: State) (dispatch) =
DockPanel.create
[ DockPanel.margin 10
DockPanel.children
[ createGamesListPanel state dispatch
createZipsPanel state dispatch
ScrollViewer.create
[ ScrollViewer.horizontalScrollBarVisibility ScrollBarVisibility.Auto
ScrollViewer.verticalScrollBarVisibility ScrollBarVisibility.Auto
ScrollViewer.content (createGameDetailsPanel state dispatch) ] ] ]Other changes to I'm obviously doing something stupid... |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 6 replies
-
|
@doxxx I don't see something obvious, but I haven't used elmish in ages. I'm only using our component model. Could you pust a runnable sample? |
Beta Was this translation helpful? Give feedback.
-
|
On a side note, would you say that the React style is better supported than the Elmish? |
Beta Was this translation helpful? Give feedback.
-
|
IMHO it's the better approach. From my experience elmish does not work/scale well for bigger apps. |
Beta Was this translation helpful? Give feedback.
-
|
This should be a runnable sample: open Elmish
open Avalonia
open Avalonia.Themes.Fluent
open Avalonia.Controls.ApplicationLifetimes
open Avalonia.Controls
open Avalonia.FuncUI.Elmish
open Avalonia.FuncUI.Hosts
open Avalonia.FuncUI.DSL
open Avalonia.Layout
module TestApp =
type State =
{ list_items: string list
selected_item: int option }
type Msg =
| RefreshItems
| RefreshSuccess of string list
| SelectItem of int
let init () =
{ list_items = [ "Item 1"; "Item 2"; "Item 3" ]
selected_item = None },
Cmd.none
let refreshItemsAsync state =
async {
do! Async.Sleep 1000
return state.list_items @ [ "Item " + string (state.list_items.Length + 1) ]
}
let update (msg: Msg) (state: State) : State * Msg Cmd =
match msg with
| RefreshItems -> state, Cmd.OfAsync.perform refreshItemsAsync state RefreshSuccess
| RefreshSuccess items -> { state with list_items = items }, Cmd.none
| SelectItem index ->
{ state with
selected_item = Some index },
Cmd.none
let view (state: State) dispatch =
DockPanel.create
[ DockPanel.children
[ Button.create
[ Button.dock Dock.Bottom
Button.horizontalAlignment HorizontalAlignment.Stretch
Button.content "Refresh"
Button.onClick (fun _ -> dispatch RefreshItems) ]
ListBox.create
[ ListBox.dataItems state.list_items
ListBox.selectedIndex (state.selected_item |> Option.defaultValue -1)
ListBox.onSelectedIndexChanged (fun index -> dispatch (SelectItem index)) ] ] ]
type MainWindow() as this =
inherit HostWindow()
do
base.Title <- "Test App"
base.Width <- 400.0
base.Height <- 300.0
Elmish.Program.mkProgram TestApp.init TestApp.update TestApp.view
|> Program.withHost this
|> Program.withConsoleTrace
|> Program.run
type App() =
inherit Application()
override this.Initialize() =
this.Styles.Add(FluentTheme())
this.RequestedThemeVariant <- Styling.ThemeVariant.Default
override this.OnFrameworkInitializationCompleted() =
match this.ApplicationLifetime with
| :? IClassicDesktopStyleApplicationLifetime as desktopLifetime ->
let mainWindow = MainWindow()
desktopLifetime.MainWindow <- mainWindow
| _ -> ()
module Program =
[<EntryPoint>]
let main (args: string[]) =
AppBuilder
.Configure<App>()
.UsePlatformDetect()
.UseSkia()
.StartWithClassicDesktopLifetime(args)However, this differs from my example in that it logs an uncaught exception: I don't know why I don't see this exception in my original app. The only difference I can think of is that my original async refresh operation uses |
Beta Was this translation helpful? Give feedback.
-
|
Ahh, now I see what's going on. You need to add this call to your elmish program. You are only allowed to do UI updates from the UI thread. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! That was it. It fixed both the test app I posted above and my original app. The final form of that code block looked like this for me: Elmish.Program.mkProgram Main.init Main.update Main.view
|> Program.withHost this
|> Program.withConsoleTrace
|> Program.runWithAvaloniaSyncDispatch ()
|
Beta Was this translation helpful? Give feedback.
Ahh, now I see what's going on.
You need to add this call to your elmish program. You are only allowed to do UI updates from the UI thread.
Avalonia.FuncUI/src/Avalonia.FuncUI.Elmish/Library.fs
Line 25 in f156f6e