#MVUX How to create a state as "not initialized"? How to validate user input?

[kucint]

In MVU model I can create a state that can be bound to some UI element.

Question 1: :
I want to create an "uninitialized" state, I mean, the UI element bound to the state shall have no value set (the textbox shall initially be empty).

Usually I create a state as follow: public IState<int> SomeIntA => State.Value(this, () => 5);
I can do this using public IState<int> SomeIntB => State<int>.Empty(this); which seems to initialize state with default value. (Am I right?)

How should I create a state and say that it is "uninitialized"?

Question 2:
Let suppose user filled up the form, but left one field empty. this field is bound to some IState<int>.
When I read a state value associated to the field it gives me last correctly set value.
How can I detect that user did not provide a value?
Generally, how am I supposed to validate the user input?

[dr1rrb]

Hey @kucint

1. Actually I think that your issue is that you are using an int, so the value is exposed to the binding engine through an int property, so no matter how you initialize the state it will default to 0. The solution is to create an IState<int?> :

State	Initial value	Type of the generated Property	Value got by the binding engine
State.Value(this, () => 5)	Some<int>(5)	int	5
State<int>.Empty(this)	None<int>()	int	0
State.Value<int?>(this, () => default(int?))	None<int?>()	int?	null
State<int?>.Empty(this)	None<int?>()	int?	null
State.Value<int?>(this, () => Option.Some(default(int?)))	Some<int?>(null)	int?	null

Note: As shown by 3rd example, with recent versions of MVUX, we automatically convert default(T?) to None. If you want to explicitly initialize a State or a Feed with a Some(null) you have to use the last example in the table (not recommended).

2. Unfortunately neither WinUI nor Uno controls supports data-validation out of the box, you will have to do it by your own.
   Regarding state you have 2 options, either do a State.ForEachAsync(<callback>), either simply do a State.Select[Async](<valdiation>) and then data-bind to the validation result..
   About the validation itself, you can use the validation service https://platform.uno/docs/articles/external/uno.extensions/doc/Learn/Validation/ValidationOverview.html?tabs=notify-data-error-info#validation. E.g. : public IFeed<IEnumerable<ValidationResult>> MyStateValidation => MyState.SelectAsync(myValue => _validator.ValidateAsync(myValue));

[kucint]

I noticed that I can use UpdateDataAsync. The SetDataAsync does not exist, but this is not a problem....

[kucint]

Hello @dr1rrb
Bad news....
I performed many tests with nullable state values bound to many controls and I am lost. Something is generally wrong here or I am missing something. Have a look please.
I created very simple test app that contains:

• nullable state object: public IState<int?> TextBoxIntQm => State<int?>.Empty(this); that is bound to
• TextBox: new TextBox().Text(x => x.Bind(() => vm.TextBoxIntQm).TwoWay())
• and attempt to read the state value: Option<int?> reportTextBoxIntQm = await TextBoxIntQm.Option(CancellationToken.None);

This should work, right? But it doesn't ...
When I fill TextBox with a text 5 which definitely can be converted to int?, and try to read value from bound state, I get an exception:

Error: Cannot save value from target back to source. BindingExpression: Path='TextBoxIntQm' DataItem='UnoBindingApp.BindableMainModel'; target element is 'Microsoft.UI.Xaml.Controls.TextBox' (Name='null'); target property is 'Text' (type 'String').

Note that this exception does not crash the app, it is cough somewhere in uno/winui3, but is visible in VS output window.

I made extensive tests and this internal exception is thrown always when a nullable state is bound to any type of control (NumberBox behaves in the same way...)

So the question is:
How am I supposed to read nullable value?
What am I doing wrong?
I am lost...
Thanks for help!

BTW. if you want to get my test app (very simple one), I can expose it somehow.

[dr1rrb]

The issue is that the TextBox.Text property is of type string. So when you write "5" in your TextBox it is not able to push the value back to model TextBoxIntQm property which is of type int? (there is no implicit conversion from string to int -nor int?-), so when you try to read it is still on the default value.

Note
You said that you are getting the exception only when you "try to read value from bound state", it's probably because with a TextBox the text is pushed back to the model when the TextBox lost focus. If you try to focus any other element before reading the value, you will get the error earlier. (I'm assuming your are reading the value this by clicking on a Button.)

That's why I suggested you to use a NumberBox instead (or a State<string> if you really want to perform the parsing by your own).

[kucint]

I think, I cannot agree with you.
I created a test app, the purpose of that is to test how bindings between different state types and different controls behave.
States types under the test: string, int, int? double, double? decimal, decimal? (7 test cases)
Control types under the test: TextBox, NumberBox (2 tests cases)

All together, there is 2 x 7 = 14 combinations.

Step 1

Initially all states are initialized with State.Empty().
The application looks as follow:

In general all looks as expected.

• Nullable and Non-nullable states are set to None
• Non-nullable controls back-binding sets texts to default (0)
• Nullable controls back-binding sets texts set to ""
• you may notice one issue here:
  Non-nullable decimal state back-binding failed to set value property.
  This is due to binding error which has a problem to convert decimal default value (0m) to double 0.0
  Binding error is to be seen in VS output window:
  Error: Converter failed to convert value of type '0' to type 'Double'; BindingExpression: Path='StateNumberBoxDecimal' DataItem='UnoValidationApp.BindableMainModel'; target element is 'Microsoft.UI.Xaml.Controls.NumberBox' (Name='null'); target property is 'Value' (type 'Double').
  Generally NumberBox has a problem with decimal type (nullable or not) but this is another topic...

Step 2

Now I put in all fields a text "13" and try to read associated states:

As you can see, all binding implicit conversions for non nullable types (string, int, double but not decimal) can convert correctly the text into appropriate state value. This is valid for both TextBox and NumberBox.

Unfortunately, this cannot be said about nullable states:

• TextBox.Text fails to convert int?, double?, decimal? but it converts correctly int, double (decimal fails as always->another topic...)
• NumberBox.Value fails to convert int?, decimal? but it converts correctly int, double and surprisingly double? (decimal fails as always...)

This can be very well seen when looking in reported binding errors in VS output window:

FYI: Qm appendix means "Question mark" so StateTextBoxIntQm represents IState<int?>

Error: Cannot save value from target back to source. BindingExpression: Path='StateTextBoxIntQm' DataItem='UnoValidationApp.BindableMainModel'; target element is 'Microsoft.UI.Xaml.Controls.TextBox' (Name='null'); target property is 'Text' (type 'String').
Error: Cannot save value from target back to source. BindingExpression: Path='StateTextBoxDoubleQm' DataItem='UnoValidationApp.BindableMainModel'; target element is 'Microsoft.UI.Xaml.Controls.TextBox' (Name='null'); target property is 'Text' (type 'String').
Error: Cannot save value from target back to source. BindingExpression: Path='StateTextBoxDecimal' DataItem='UnoValidationApp.BindableMainModel'; target element is 'Microsoft.UI.Xaml.Controls.TextBox' (Name='null'); target property is 'Text' (type 'String').
Error: Cannot save value from target back to source. BindingExpression: Path='StateTextBoxDecimalQm' DataItem='UnoValidationApp.BindableMainModel'; target element is 'Microsoft.UI.Xaml.Controls.TextBox' (Name='null'); target property is 'Text' (type 'String').
Error: Cannot save value from target back to source. BindingExpression: Path='StateNumberBoxIntQm' DataItem='UnoValidationApp.BindableMainModel'; target element is 'Microsoft.UI.Xaml.Controls.NumberBox' (Name='null'); target property is 'Value' (type 'Double').
Error: Cannot save value from target back to source. BindingExpression: Path='StateNumberBoxDecimal' DataItem='UnoValidationApp.BindableMainModel'; target element is 'Microsoft.UI.Xaml.Controls.NumberBox' (Name='null'); target property is 'Value' (type 'Double').
Error: Cannot save value from target back to source. BindingExpression: Path='StateNumberBoxDecimalQm' DataItem='UnoValidationApp.BindableMainModel'; target element is 'Microsoft.UI.Xaml.Controls.NumberBox' (Name='null'); target property is 'Value' (type 'Double').

So as you see, something is wrong here....
This test app let me to discover other issues as well, but let them tackle later....
Let us concentrate on the main topic first:
How am I suppose to read correctly nullable state values (int?, decimal?) from a controls (NumberBox and TextBox)?
double? seems to work somehow...

[dr1rrb]

Ok I did a small repro app also on my side, and indeed the binding engine is way more permissive than I thought and allows implicit conversion from string to primitive types. Sorry for the confusion. And actually I noticed that uno's binding engine is even more permissive as it allows conversion to all types, including int? and decimal? the only restriction is that NumberBox does not work with a decimal? property.

Here are my result, with uno when entering "15" in all fields (and pressing the "Read" button):

While on windows we have issues with int?, double?, decimal and decimal?:

The NumberBox works with double?, I think this is because the NumberBox.Value is of type double so the conversion from T to T? is more supported

I was about to suggest you to use an IValueConverter to fix that (cf. collapsed section below), but I found a bug in uno with binding to nullable properties (#16004). So I would recommend that you use an IState<string> and do the conversion directly in the model. Even if not optimal, it will be the best option until the issue is being fixed and which works on all platforms.

For instance :

public IState<string> StringProperty => State<string>.Empty(this);

public IFeed<decimal> MyDecimalProperty => StringProperty.Select(str => decimal.TryParse(str, out var result) ? result : default(decimal?));

You are then able to determine when the user didn't provided a value (or provided an invalid value) by doing something like this:

if ((await MyDecimalProperty.Option(ct)).IsSome(out var value))
{
	// Value is valid
}
else
{
	// Raise validation error
}

Note: If you are about the have a form with multiple fields and perform validation, a good solution would be to have a record with all you fields and perform conversion and validation on the complete record. It would reduce the number of feeds involved. An example could be found here https://github.com/unoplatform/Uno.Samples/blob/master/reference/Commerce/Commerce/Commerce/Presentation/LoginViewModel.cs

BTW regarding the history of this discussion, about the nullable warning you are getting with Feed<int?>.UpdateAsync or when awaiting a Feed<int?>, it has raise some internal discussion here unoplatform/uno.extensions#2170, and will push soon an updated version of reactive that will allow such usages to remove friction on common scenarios like this. I've added the new extension methods in my sample so you can tests them.

We will also rename the Feed<T>.Option() to match the semantic "Value = T", "Data = Option<T>" and "Message = Message<T>" (each level gives you a deeper control of information passing through the feed).

Solution using an `IValueConverter` blocked by https://github.com//issues/16004

public class GenericConvert : IValueConverter
{
	/// <inheritdoc />
	public object? Convert(object? value, Type targetType, object? parameter, string language)
		=> value is null ? null : System.Convert.ChangeType(value, targetType, CultureInfo.GetCultureInfo(language));

	/// <inheritdoc />
	public object? ConvertBack(object? value, Type targetType, object? parameter, string language)
		=> parameter switch
		{
			_ when value is null or "" => null,
			"int" => System.Convert.ToInt32(value, CultureInfo.GetCultureInfo(language)),
			"double" => System.Convert.ToDouble(value, CultureInfo.GetCultureInfo(language)),
			"decimal" => System.Convert.ToDecimal(value, CultureInfo.GetCultureInfo(language)),
			_ => value
		};
}

Note: Unfortunately, windows does not provide a valid targetType in the ConvertBack, so we have to explicit it in commandParameter.

then it's usage:

<Page.Resources>
	<local:SystemConvert x:Key="SystemConvert" />
	<local:GenericConvert x:Key="GenericConvert" />
</Page.Resources>

../..

<TextBox Header="int?" Text="{Binding NullableIntegerProperty, Mode=TwoWay, Converter={StaticResource GenericConvert}, ConverterParameter=int}"  />

[kucint]

Great! Now I see that we both get the same results, so finally we are on the same page :)
Thanks for your effort!

FYI: Project I am currently working on will not be RTM (ready to manufacture) any soon. So I do not seek for a "quick" solutions aka work-arounds. I seek rather for a long term well-structured solutions. I am ready to wait for bug-fixes even couple of months, if you assure me, they will be delivered in some predictable future.

Question 1: In you latest post, you attached two screenshots of your test app. The second one was done on Windows, the origin of the first one is unknown. What is the OS of the first one? Linux? macOS?

Question 2: Right now, bindings behave differently on Windows and other OSs (as we may see on your screenshots). Your proposed solution here is to use IValueConverter, which requires (#16004) bug fix to make it work on Windows. BTW, I see that you already provided a fix for it (thanks 👍!). I suppose this bugfix will be a part of the next minor uno release, am I right?

Question 3: Even if using IValueConverter is a good work-around to make conversion work on Windows, I would rather expect more general approach here:
What is the chance to provide a fix that assures that Uno bindings behave in the same way on all OSs? I mean the behavior of string int int? double double?. decimal is another story (see next point).
I need consistent behavior on all desktop OSs, Windows behavior shall be fixed to match other OSs.
I do not care about mobile (but probably you do...)
Is it possible?
Shall I create a bug/issue for it?

Question 4:
Now let's tackle a topic of decimal. This is another issue and most probably I should create another discussion for it. If so, let me know.
The problem with decimal is that conversion from/to double is not lossless. Losing precision is not acceptable, that is why (I suppose) there is no default conversion from/to decimal/double.
In my opinion, the best possible work-around here would be to bind decimal/decimal? state to NumberBox.Text property rather than to NumberBox.Value property. Conversion from/to string/decimal is lossless, so it should work (on windows it doesn't but I hope it will be fixed somehow...).
Note that this use-case is not present in my test app, neither is in you test app. I have another test app that does a test of it, and unfortunately there is an issue here:
When binding a decimal state to a a NumberBox.Text, I expect that direct conversion string/double happens without involving double in it, which unfortunately seems not to happen. What really happens (I am guessing only) is: the NumberBox reads a double Value property first and converts it on the fly to string property. This causes precision being lost. If my suspicion is correct, the winui3 NumberBox is responsible for this misbehavior rather than uno.
I will try to deliver some screenshots soon that will present this issue in more readable way.
Question is: can the winui3 NumberBox implementation be fixed in such a way that precision loss does not happen?

Question 4:
I can initialize my states to None as follows (no matter state type, no matter TextBox or NumberBox):

IState<int> StateTextBoxInt => State<int>.Empty(this);
IState<int?> StateTextBoxIntQm => State<int?>.Empty(this);

Let suppose I set states to 42 now:

await StateTextBoxInt.SetAsync(42);
await StateTextBoxIntQm.UpdateDataAsync(p => 42);  // SetDataAsync does not exist, using UpdateDataAsync instead

Now I want to set both states back to None:

• for int state I can write:
  await StateTextBoxInt.SetAsync(null); // will result in None
• How am I suppose to do it for int? ?
  await StateTextBoxIntQm.UpdateDataAsync(null); // will result in Some(null)

Thanks for your help!

[dr1rrb]

Q1: First screenshot is using skia (on windows, but it will be the same on all OS at this point: with the "skia backend" we are rendering controls by our own directly on a canvas and it can then be run on any target: Windows, Linux, macOS, IoT, etc.).

Q2: Yes, should be few weeks ahead. We're also planning to include the changes needed to await a Feed<int?> with next release.

Q3: On windows (i.e. using the Windows App SDK from Microsoft, not uno's skia rendering on windows), we have no control over the binding engine. And as WinAppSDK is actually our baseline, if we want to completely align the binding engine, it would mean to reduce the number of supported cases by uno. While to be purist it would make sense, as the IValueConverter works on all platforms, I don't see this happening any time soon.

Actually I found multiples issues on Microsoft repo about that

• [WINUI] Binding not works properly when bind a Nullable property. microsoft/microsoft-ui-xaml#9435
• [WINUI]Binding not works properly in NumberBox when binded a Nullable float property microsoft/microsoft-ui-xaml#8830
• Binding is not working for property which is of DateTimeOffset? Type microsoft/microsoft-ui-xaml#3721

It would probably makes more sense to wait for MS to fix that on their side (and add details into the issues).

Q4:

What really happens (I am guessing only) is: the NumberBox reads a double Value property first and converts it on the fly to string property

Damn ... but it makes sense: They are probably using double everywhere internally.

can the winui3 NumberBox implementation be fixed in such a way that precision loss does not happen?

Here again it's the control from Microsoft, you will have to report it on the WinUI repro. I found that there is already an issue for that where you can add your details:

• Proposal: NumberBox enhancement for the decimal type microsoft/microsoft-ui-xaml#2466

Then, as NumberBox is implemented in uno using WinUI source code, it will be fairly simple to import changes.

But usually such feature takes some time to be implemented by the WinUI team, so I would recommend you to clone uno's implementation (which is in C#) to create a DecimalNumberBox.

Q5:

How am I suppose to do it for int? ?

Currently you can do : await StateTextBoxIntQm.UpdateDataAsync(_ => Option.None<int?>()); The Update[Data|Message]Async methods are accepting a delegate which accepts the current value as parameter and returns the updated value. The idea behind this is to be thread safe and ensure the ACID properties of the value hold by a state (while if you get the current value, edit it and then push it back into the state, you might lose some data due to concurrent access).

For instance, this is problematic:

public async ValueTask Increment()
{
    var current = await MyState;
    await MyState.SetAync(current + 1);
}

While this is thread safe (and ensure ACID properties, no matter what's hidden behind the State):

public async ValueTask Increment() => await MyState.UpdateAsync(current => current + 1);

The SetAsync is a shortcut that is available only for ValueType and string as it's pretty common to write something in a State<string> just for data-binding and the risk of data lose is minor compared to a complex object (and that's why there is no SetDataAsync, it's not a common case, we prefer to fallback to the core UpdateDataAsync than adding too much noise in the API).

But the good news is that I pushed a commit few hours ago to add the ability to do await state.SetAsync(null); on an IState<*ValueType*> (and also on IState<string>) which also goes in None. (I pass through all notnull constrained operators to validate that we also have an overload for struct ... hopefully it should resolve a lot of your issues.)

[kucint]

Q1: First screenshot is using skia (on windows, but it will be the same on all OS at this point: with the "skia backend" we are rendering controls by our own directly on a canvas and it can then be run on any target: Windows, Linux, macOS, IoT, etc.).

Oh man, you open my eyes on how Uno is designed.... I was thinking that under windows it uses winUI3, under other Oss, uno emulates winUI3 somehow. Now you tell me that I can use "skia backend" as well. How can I create such a project? In the uno dotnet new "wizard" there is no such a option or do I miss something?

• Product I am working on needs to run on windows (>=10), macOS, Linux.
  "skia backend" covers all of them, right?

• It will use typical winui3 controls but as well will use Community toolkit controls, will have complex graphics using Canvas and even will provide 3D graphics using Angle.

  • "skia backend" is from the customer perspective not distinguishable from winui3 (pixel perfect?), right?
  • and for the developer as well there is no code base differences, right?

If so, this would be perfect solution to me to not be forced to test the app under all OSs.
Could you provide me more info about is "skia backend" projects, how to create them (the app and the control library)?
Thanks!

[kucint]

Q3: On windows (i.e. using the Windows App SDK from Microsoft, not uno's skia rendering on windows), we have no control over the binding engine. And as WinAppSDK is actually our baseline, if we want to completely align the binding engine, it would mean to reduce the number of supported cases by uno. While to be purist it would make sense, as the IValueConverter works on all platforms, I don't see this happening any time soon.

I see, you are right. OK. Let stick to this solution.
you shown to me already in a previous post how to use IValueConverter:

public IState<string> StringProperty => State<string>.Empty(this);

public IFeed<decimal> MyDecimalProperty => StringProperty.Select(str => decimal.TryParse(str, out var result) ? result : default(decimal?));

Where exactly IValueConverter is involved here? I don´t see it...
you don´t mean StringProperty class, do you? (BTW: where this class is defined? I cant find it...)

[kucint]

Q5
Thanks for, info, it makes much sense.

I am glad you touch the ACID properties topic, because there is couple of things I don´t understand and neither documentation nor example apps do not cover it.

Have a look, I am aware that

public async ValueTask Increment()
{
    var current = await MyState;
    await MyState.SetAync(current + 1);
}

is problematic and should be replaced with
public async ValueTask Increment() => await MyState.UpdateAsync(current => current + 1);. It is even mentioned somewhere in uno official documentation.

This scenario is quit simple, let dive in more complex one:

let suppose I have states: A, B, C, D
When the user clicks a button I want to Update state D which depends on A, B, C states.
How should I realize it?