zaid-ajaj / fabulous-simple-elements

An alternative view rendering API for Fabulous (Elmish Xamarin.Forms) that is easy to use and simple to read, inspired by Elmish on the web.

Fabulous.SimpleElements

ARCHIVED: Latest API from Fabulous v2+ makes this obsolete!

An alternative view rendering API for Fabulous that is easy to use and simple to read, inspired by Elmish on the web.

Install from Nuget

dotnet add package Fabulous.SimpleElements	

Usage

The library aims to unify both optional arguments and fluent extension methods for View elements into a list of attributes. This allows for easy API discoverability, just "dotting" through the element module to see what attributes you can set on the element.

let view (model: State) dispatch =
    ContentPage.contentPage [
        ContentPage.Title "Page Title"
        ContentPage.Content <|
            StackLayout.stackLayout [
                StackLayout.Padding 20.0 
                StackLayout.VerticalLayout LayoutOptions.Center
                StackLayout.Children [ 
                    Label.label [ 
                        Label.Text "Congrats, you have won!"; 
                        Label.HorizontalTextAlignment TextAlignment.Center
                        Label.MarginLeft 30.0
                        Label.MarginRight 30.0
                        Label.FontSize FontSize.Large 
                    ]
                    Button.button [ 
                        Button.Text "Play Again"
                        Button.OnClick (fun _ -> dispatch StartNewGame) 
                    ]
                ]
            ]
    ]

Backwards compatible with existing DSL

This DSL is built on-top of the existing one in the core of Fabulous library which means if something isn't implemented here, that use can simply fallback to using the original DSL in a mix-and-match fashion:

let view (model: State) dispatch =
    View.ContentPage(
        title = "Page Title"
        ,content = StackLayout.stackLayout [ 
            StackLayout.Children [
                View.Button(text="Click me")
            ]
    ])

Extension methods are included with attributes

Instead of

View.Button(text="hello")
    .GridColumn(1)
    .GridRow(1)

you write

Button.button [
  Button.Text "Hello"
  Button.GridRow 1
  Button.GridColumn 1
]

Running the samples

Each sample has it's own solution, open any of the samples in Visual Studio or Visual Studio for Mac, select your preferred project to start the app, either <AppName>.Android or <AppName>.iOS and run the project.

Fifteen Puzzle Sample

LoginFlow sample

Counter Sample

fabulous-simple-elements's Issues

Rebuild against new Fabulous

Could you please rebuild and release a new nuget built with latest Fabulous as I am having issues building my mobile app in release mode.

The module/namespace 'Fabulous' from compilation unit 'Fabulous' did not contain the val 'ValLinkagePartialKey(Create)'

I used this template. Added the two buttons at the end of the view function. It will give the below error when building.

dotnet new fabulous-xf-app -n SqueakyApp --WPF --Android=false --iOS=false
The module/namespace 'Fabulous' from compilation unit 'Fabulous' did not contain the val 'ValLinkagePartialKey(Create)

dotnet/fsharp#9370

        View.ContentPage(
          content = View.StackLayout(padding = Thickness 20.0, verticalOptions = LayoutOptions.Center,
            children = [ 
                View.Label(text = sprintf "%d" model.Count, horizontalOptions = LayoutOptions.Center, width=200.0, horizontalTextAlignment=TextAlignment.Center)
                View.Button(text = "Increment", command = (fun () -> dispatch Increment), horizontalOptions = LayoutOptions.Center)
                View.Button(text = "Decrement", command = (fun () -> dispatch Decrement), horizontalOptions = LayoutOptions.Center)
                View.Label(text = "Timer", horizontalOptions = LayoutOptions.Center)
                View.Switch(isToggled = model.TimerOn, toggled = (fun on -> dispatch (TimerToggled on.Value)), horizontalOptions = LayoutOptions.Center)
                View.Slider(minimumMaximum = (0.0, 10.0), value = double model.Step, valueChanged = (fun args -> dispatch (SetStep (int (args.NewValue + 0.5)))), horizontalOptions = LayoutOptions.FillAndExpand)
                View.Label(text = sprintf "Step size: %d" model.Step, horizontalOptions = LayoutOptions.Center) 
                View.Button(text = "Reset", horizontalOptions = LayoutOptions.Center, command = (fun () -> dispatch Reset), commandCanExecute = (model <> initModel))
                Button.button []
                View.Button()
            ]))

Strange build issues after add and use Fabulous.SimpleElements

Hi, I am trying to use this library in Visual studio 2019 and got a lot of errors:

1. I create project from dotnet new fabulous-xf-app -n SqueakyApp
2. Build and run successful
3. Use dotnet add package Fabulous.SimpleElements for the project SqueakyApp
4. Use its function like

    let view (model: Model) dispatch =
        View.ContentPage(
          content = View.StackLayout(padding = 20.0, verticalOptions = LayoutOptions.Center,
            children = [ 
                Button.button [ Button.Text "123" ]
                ....

5. Build the solution, I got error "error XA2002: Can not resolve reference: Fabulous.SimpleElements"
6. Use nuget management in visual studio 2019 to add Fabulous.SimpleElements to the SqueakyApp.Android will also get error and cannot be done.
7. I directly add Fabulous.SimpleElements to SqueakyApp3.Android`s packages.config and try to rebuild and still get error
8. I cloned the repo and tried with sample SimpleFabimals, I tried remove the project directly dependence for project SimpleFabimals and added nuget package "Fabulous.SimpleElements" and build the solution, get error "error : AndroidManifest file does not exist"

I cannot figure out how to solve this. Please help.

Supported elements: overview and progress

Here I will be keeping track of the progress I've made in supporting the elements from View module, their associated attributes and extension methods. Feel free to add something if it is missing from this list or contribute to the library by adding an element if it is not yet supported (PRs are welcome, let me know if you need help).

After all elements are supported, I will be investigating granular element structure making placement of elements type-safe.

Layouts:

• StackLayout
• FlexLayout
• AbsoluteLayout
• RelativeLayout
• ListView
• ScrollView
• Grid
• BoxView
• InputView
• WebView
• TableView
• ListViewGrouped
• TemplatedView (probably not necessary)
• ContentView

Pages:

• ContentPage
• NavigationPage
• TabbedPage
• MasterPageDetail
• CarouselPage

Elements

• ActivityIndicator
• Button
• DatePicker
• Image
• ImageButton
• Label
• Slider
• Switch
• TextEntry (specialized Entry)
• ToolbarItem
• Frame
• Editor
• FormattedString
• MenuItem
• Picker
• SearchBar
• Span
• ProgressBar
• Stepper
• TimePicker
• VisualElement

Cells

• ImageCell
• SwitchCell
• TextCell
• EntryCell
• ViewCell

Gesture Recognizers:

• PanGestureRecognizer
• ClickGestureRecognizer
• TapGestureRecognizer
• PinchGestureRecognizer
• SwipeGestureRecognizer

Button.IsEnabled does not work

Following does not disable the button.

                Button.button [ 
                    Button.Text "Test"
                    Button.IsEnabled false
                ]

Automate control generation

It took a few months, but the Fabulous generator has finally been rewritten and is now easily customizable. :)

By forking the generator and reusing the JSON bindings file, there's 2 options:

• Continue like today and make fabulous-simple-elements a wrapper around Fabulous.DynamicViews controls (not really efficient)
• Bypass Fabulous.DynamicViews, and generate the same controls, with the same properties but directly adapted for the fabulous-simple-elements syntax.

https://github.com/fsprojects/Fabulous/blob/master/tools/Generator/CodeGenerator.fs

Can not use CollectionView due to System.MissingMethodException

First of all thanks for this amazing library it makes really easy to write the views.

I was trying to use CollectionView and there is a System.MissingMethodException

I have created a branch in order to reproduce this https://github.com/edgarfgp/dynamic-ui/compare/repro-bug-collection-view?expand=1

Thanks very much . Merry Christmas

Using simple elements with Fabulous 0.53 fails with link error when deploying to phone (not simulator)

Simulator and other builds work fine when using xamarin on mac, but an actual build fails with a linking error:

MTOUCH : error MT2101: Can't resolve the reference 'Fabulous.AttributeKey`1<Xamarin.Forms.Color> Fabulous.XamarinForms.ViewAttributes::get_ForegroundColorAttribKey()', referenced from the method 'Fabulous.ViewElement Span::span(Microsoft.FSharp.Collections.FSharpList`1<Span/ISpanProp>)' in 'Fabulous.XamarinForms, Version=0.52.0.0, Culture=neutral, PublicKeyToken=null'.

After some digging, it turns out that in simple elements, span.fs, line 47, causes a compile failure when using fab 0.53:
?foregroundColor = find Keys.ForegroundColor,

Digging against the fabulous.xamarinForms project itself, you can see that the foreground element was removed from span description in the core.json files that follow from 0.52 to 0.53:

https://github.com/fsprojects/Fabulous/blame/v0.52/Fabulous.XamarinForms/src/Fabulous.XamarinForms/Xamarin.Forms.Core.json
https://github.com/fsprojects/Fabulous/blame/v0.53/Fabulous.XamarinForms/src/Fabulous.XamarinForms/Xamarin.Forms.Core.json

The following appears in .52, and not in .53:

385
          "source": "ForegroundColor"
386
        },

Commenting out the line referencing foregroundColor in simple elements span.fs:47 results in a successful build and deploy of our project to a phone.

I'd submit a pull request, but I'm not sure if it's the right fix, or if the fabulous project needs to add the foreground attribute back. As far as I can tell from the docs, the foreground attribute has not been deprecated in xamarin.forms span:

https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.span.foregroundcolor?view=xamarin-forms

Please let me know if you need any further information or clarification on this. For now we'll manually building the simple-elements project to work around this issue.

If you want me to submit a pull request for the probably incorrect fix (given foreground still seems to be in the API), please let me know. If you think I should raise this issue elsewhere, please also let me know.

Element support for Fabulous extensions

Hello and thank you for this library. I was wondering whether it would make sense to include support for Fabulous extensions, such as SkiaSharp, within this library, or a separate "simple elements extensions" library. Fabulous itself prefers having a separate NuGet per extensions (https://fsprojects.github.io/Fabulous/Fabulous.XamarinForms/views-extending.html#view-extensions), so I wanted to see what you think about it here. I would be willing to contribute.

Thanks

Also, a side note. Is the list of supported elements in the following issue up to date?
#4

Update to work with latest version of Fabulous 0.41.0

I cannot use this package with latest version of Fabulous, could this be fixed.

Add ScrollView

Is it possible to make View scrollable?