Fabulous V2 migration

[edgarfgp]

I'm updating an app that will be released early next year to V2 and in order to help Fabulous to get ready for V2 . I'm creating this discussion to share How it is going (blockers, improvements) .

I will updating this discussion daily.

• Add better support for VisualStateManager

• ContentPage

  • Dark mode support background color

• Label

  • Add support for formattedText
  • Add support for Style

• Button

  • Add Style support
  • Add canExecute support to be able to enable disable
  • Add a extension method for the corner radius

• NavigationPage

  • Add Extension methods for HasNavigationBar and HasBackButton

• Missing CarrouselView

• Missing CollectionView

• Missing IndicatorView

• Missing AbsoluteLayout

• What is the alternative of ViewRef() in V2 ?

[TimLariviere]

@edgarfgp Thanks for the feedback!
I can share some thoughts I have about the points you mentioned.

ContentPage - Dark mode support

I think I'll make every color properties use by default SetOnAppTheme.
They will have 2 extensions, one with (light: Color, dark: Color) and a 2nd one (value: Color).

Label - Add support for Style

This one, I'm yet to work on it but my current idea is to create specific widgets for it.

Label("Hello")
    .style(
        // Local style
        LabelStyle()
            .textColor(Color.Blue)
            .font(FontFamily.OpenSans)
        )
    )
        
Application(
    ContentPage(
        VerticalStackLayout([
            Button("Click me", OnClicked)
            
            Button("Destroy the world", OnDestroyClicked)
                .styleKey("destructive")
        ])
    )
)
    .styles([
        // Global style applied to all buttons
        ButtonStyle()
            .backgroundColor(light = Color.Gray, dark = Color.Yellow)
            
        // Global style only applied to buttons with style key `destructive`
        ButtonStyle("destructive")
            .textColor(Color.Red)
    ])

which would map to the basic styling in XF

<Application>
    <Application.Resources>
        <Style TargetType="Button">
            <Setter PropertyName="BackgroundColor" Value="{AppThemeBinding Light=Color.Gray, Dark=Color.Yellow}" />
        </Style>
        <Style TargetType="Button" Key="destructive">
            <Setter PropertyName="TextColor" Value="Color.Red" />
        </Style>
    </Application.Resources>
</Application>

Grid - Make rowdefs and coldefs optional (Currenttly you have to epecify both)

My idea behind this is to make some fields mandatory for each controls, but only in a way that makes sense.
Like for the purpose of a Label is to display text, so => Label(text)
The purpose of a Button is to display a text and handle the click => Button(text, onClicked)

So my thinking was: a Grid, we use it for columns and rows.
It's usual for all XAML frameworks to assume there's 1 default column and row taking all the place if not defined.
But I wanted to make it explicit so I required both coldefs and rowdefs in v2.

Do you think it would be better to not require both of them?

[edgarfgp]

@TimLariviere Yeah Grid is used for row and cols but I find myself using Grid a lot instead of StackLayout as I can build more responsive Layout using Absolutes and Star . but I agree with you having both required make it clear the purpose. So not a blocker for me. Thanks for the feedback

[TimLariviere]

I've opened an issue up for grabs regarding the support of styling.
TimLariviere/Fabulous-new#10

[TimLariviere]

Add canExecute support to be able to enable disable

@edgarfgp For this one, we won't add canExecute since it came with Command which is a MVVM-specific property; now Fabulous directly targets the events such as Clicked.
You can change canExecute by isEnabled and the behavior should remain the same.

[edgarfgp]

@TimLariviere Changing the default text color of a Button when the button is isEnabled = false . As you can not change that from XF . You will need to create a custom renderer and then change the this.Control.SetTitleColor(UIColor.White, UIControlState.Disabled). But looks like this UIControlState.Disabled is bind to the Command canExecute and not is isEnabled. Any thoughts ?

[edgarfgp]

What is the alternative of ViewRef() in V2 ?

[TimLariviere]

There's no alternative. It'll be the same ViewRef in v2, just didn't have time to include it yet 😅

[edgarfgp]

It would be good to Add Extension methods for HasNavigationBar and HasBackButton in the NavigationPage module.

[TimLariviere]

Don't hesitate to submit PRs for the missing extensions, it's just like the PR you did (TimLariviere/Fabulous-new#13).
I'll accept those PRs until we start working on TimLariviere/Fabulous-new#12

[edgarfgp]

Done . Here is a PR TimLariviere/Fabulous-new#14 :)

[edgarfgp]

When consuming some libraries that expose it's own EventHandler the existing Attributes.defineEvent wouldn't work . You can fix it by define your own defineEvent based on the original implementation like this. I was wondering if we can do something to expose a defineEvent that will work with any handler ?

let defineEvent (getViewNode: obj -> IViewNode) name (getEvent: obj -> IEvent<CircularSlider.ValueChangedHandler,     ValueChangedEventArgs>) =
        let key = AttributeDefinitionStore.getNextKey()
        let definition : ScalarAttributeDefinition<_,_> =
            { Key = key
              Name = name
              Convert = id
              Compare = ScalarAttributeComparers.noCompare
              UpdateTarget = fun (newValueOpt: (ValueChangedEventArgs -> obj) voption, target) ->

                let event = getEvent target
                let viewNode = getViewNode target

                match viewNode.TryGetHandler(key) with
                | None ->
                    printfn $"No old handler for {name}"
                | Some handler ->
                    event.RemoveHandler handler

                match newValueOpt with
                | ValueNone ->
                    viewNode.SetHandler(key, ValueNone)

                | ValueSome fn ->
                    let handler = CircularSlider.ValueChangedHandler(fun _ args ->
                        printfn $"Handler for {name} triggered"
                        let r = fn args
                        viewNode.Context.Dispatch (viewNode.MapMsg r)
                    )
                    viewNode.SetHandler(key, ValueSome handler)
                    event.AddHandler(handler)
                    printfn $"Added new handler for {name}"
            }
        AttributeDefinitionStore.set key definition
        definition```

[edgarfgp]

What are your thoughts on Label FormattedText. would be be a dedicated widget . like

Label("Im a text")
    .formattedText ([
         Span("Text1").color(...)
         Span("Text 2")
         ])

[TimLariviere]

Since it's either string or formatted text, I guess it would be more like:

FormattedLabel([
    Span("Text 1").color(...)
    Span("Text 2")
])

[edgarfgp]

View.Button(effects = [
    View.Effect(name = "SomeResolutionGroup.SomeEffectName")
])

Regarding Effects . is the idea to use then in a extension method ? or a dedicated widget ?

.effects([Effect(SomeResolutionGroup.SomeEffectName")

[TimLariviere]

Both an extension method on the parent type and dedicated widgets, just like in your example.

Button("Hello", Clicked)
    .effects([
        Effect("SomeResolutionGroup.SomeEffectName")
        Effect("SomeResolutionGroup.SomeOtherEffectName")
    ])

[edgarfgp]

@TimLariviere Also in the Topic of SetOnAppTheme . A common scenario is to switch Color assets. I think would be helpful to add a Attributes.defineAppThemeBindable ImageSource.