Add Support for UI Toolkit

[crazyjackel]

Hi there,

I am a developer using a combination of UniRX and UI Toolkit to do a pseudo-MVVM. UI Toolkit (Formerly UI Elements) is a preview package provided by Unity that provides a UI that is of industry Standard Design, as opposed to Unity's more simplistic hierarchical design. UI Toolkit allows for building out UI using a single-source declarative language. UniRX offers support for Bindings with the standard Unity UI (things like Buttons and Labels). UI Toolkits features alternative versions of such Buttons and Labels. I would appreciate the creation of support for Bindings with UI Toolkit's respective Visual Elements as either an add-on package or integrated into the main repo.

(Note: I viewed the UniRX tag before writing, but only looked at the first page and in searches, I could not find an add-on for UI Toolkit that already exists; It may well already be developed and I missed it. Please inform me as it would be incredibly helpful within my project)

[scho]

Hey @crazyjackel,
I've developed a quite a collection of extension methods for binding observables to VisualElements.
It's nothing fancy, but it does the job well in my opinion. Would you be interested in my code?

[Kaiymu]

Hello @scho !

I would personally be really interested to see your code if possible, I'm also working with UITK and UniRX !

[crazyjackel]

Hello @scho !

I would personally be really interested to see your code if possible, I'm also working with UITK and UniRX !

public static IDisposable BindVisualElementCallback<TEventType>(this VisualElement element, ReactiveCommand<TEventType> command, TrickleDown trickleDown = TrickleDown.NoTrickleDown) where TEventType : EventBase<TEventType> { var callback = new EventCallback<TEventType>((ev) => command.Execute(ev)); element.RegisterCallback(callback, trickleDown); return Disposable.Create(() => { element.UnregisterCallback(callback, trickleDown); }); }

I am trying with something like this for right now. The Idea is that I can bind to Reactive Commands.

https://github.com/crazyjackel/redmoon-reactiveKit

I am still working on this and there is a little bit of testing, but it works with Unity's Package Manager, so that's nice. (Though, Unity's Package Manager really needs some work, can't even update git packages (planned for 2021.2))

[Kaiymu]

Thank you very much, I'm going to test it right now !
At the moment I'm trying to extend the already existing element, for exemple the Button click and be able to Subscribe to it just like in UniRX with the current UGUI

[scho]

@Kaiymu:
Sorry for answering back so late.
I finally managed to extracted my binding extensions and put them into a gist:
https://gist.github.com/scho/6ec3f30653119b3856b1a9edfd5b0b7b

[Kaiymu]

No problem at all ! And thank you for that, I'm looking into your implementation right now ;).
Maybe you can do a merge request ?

[crazyjackel]

@Kaiymu: Sorry for answering back so late. I finally managed to extracted my binding extensions and put them into a gist: https://gist.github.com/scho/6ec3f30653119b3856b1a9edfd5b0b7b

I like some of these, but I have some general critiques on impl.

Bind Display should have IObservable over IObservable to support future DisplayStyles, such as Grid being added. Also saves on a calculation.

I think ClickEvents should pass the event in as an action to implement.

Seeing someone else's implementation suggests some better ways to do mine.

[scho]

@crazyjackel:
Sure, the implementation could be improved. It's written to fit out project best and it does not claim to be a general solution for everyone.

Regarding the click events:
We never need the actual event and it allows us to do the following:

_confirmButton.Bind(viewModel.Confirm).AddTo(this);

Regarding BindDisplay:
Sure, this is not future proof. Maybe just naming it BindDisplayFlex would make it clear, that it's either Flex or None.

@Kaiymu:
I'm not sure if it's wort to do a pull request. The last release of UniRx is from July 2019. If this changes, I can create a pull request.

[crazyjackel]

@crazyjackel: Sure, the implementation could be improved. It's written to fit out project best and it does not claim to be a general solution for everyone.

Regarding the click events: We never need the actual event and it allows us to do the following:

_confirmButton.Bind(viewModel.Confirm).AddTo(this);

Regarding BindDisplay: Sure, this is not future proof. Maybe just naming it BindDisplayFlex would make it clear, that it's either Flex or None.

@Kaiymu: I'm not sure if it's wort to do a pull request. The last release of UniRx is from July 2019. If this changes, I can create a pull request.

I am updating my implementation package for Unity with some of the concepts that you provided. I think having this as a separate package would be good instead of further bloating out this package. That is one thing I dislike about UniRX is that it is rather bloated.

[scho]

@crazyjackel:
Sounds like a sensible decision to have a dedicated packe for the extensions.
Do you plan to publish it on the asset store or here on Github?

[crazyjackel]

@crazyjackel: Sounds like a sensible decision to have a dedicated packe for the extensions. Do you plan to publish it on the asset store or here on Github?

https://github.com/crazyjackel/redmoon-reactiveKit

I have been developing this, I have updated the development branch recently. Provided is a Sample. Feel free to try it out and submit issues. (Besides the Extensions, I also am including a MVVM-type system and a dependency (thought, I might make it a soft-dependency) for my Dependency Injection Package)

My Binding Extensions Implementation:
https://github.com/crazyjackel/redmoon-reactiveKit/blob/main/Runtime/Scripts/BindingExtensions.cs
New Development Implementation
https://github.com/crazyjackel/redmoon-reactiveKit/blob/develop/Runtime/Scripts/BindingExtensions.cs

[scho]

@crazyjackel:
The MVVM looks interesting, it's a bit similar to what we use, but our's is rather basic (see https://gist.github.com/scho/d737ec33aa3b5b1e7fc8e04990d866d2).

Any reason why not using Zenject for DI?

[crazyjackel]

@crazyjackel: The MVVM looks interesting, it's a bit similar to what we use, but our's is rather basic (see https://gist.github.com/scho/d737ec33aa3b5b1e7fc8e04990d866d2).

Any reason why not using Zenject for DI?

It’s less of dependency injection and more of a way for a class to get references to enabling and disabling managers classes. Probably main reason is that I was not aware of it or how to use it.

I like how simple your view is, but I like to keep the view and the functionality of the view model separate (also as a way to have separate loading times). The code mostly comes from when I did some WPF work with ReactiveUI (copy what seems to work to a new system.)