HotUI

What is HotUI? HotUI is a prototype for a new UI Framework/Patern to write app UI. It follows the Model View Update patern. It magically databinds for you!

Key Concepts

HotUI is an MVU style patern.

View is a screen Views have a Body method that you can assign either by an Attribute [Body] or by specifying

public class MyPage : View{
	[Body]
	View body () => new Text("Hello World);
}

or

public class MyPage : View{
	public MyPage(){
		Body = body;
	}
	View body () => new Text("Hello World);
}

Hot Reload

HotReload is included by default! Download and install the VS extension from the Releases Then add to your apps code.

 #if DEBUG
            HotUI.Reload.Init();
 #endif

State

As of right now there are two supported ways to add state. Simmple data types like int, bool? Just add a State<T> field to your View

class MyPage : View{
	readonly State<int> clickCount = 1;
}

View is state aware. When the state changes, databinding will automatically update, or rebuild the view if needed.

Do you want to use more complex data types?

You can either implement INotifyPropertyRead or you can use BindingObject to make it simpler.

Add it as a Field/Property, and add the [State] attribute!

public class MainPage : View {
		class MyBindingObject : BindingObject {
			public bool CanEdit {
				get => GetProperty<bool> ();
				set => SetProperty (value);
			}
			public string Text {
				get => GetProperty<string> ();
				set => SetProperty (value);
			}
		}

		[State]
		readonly MyBindingObject state;
}

INotifyPropertyRead is just like INotifyPropertyChanged. Just call PropertyRead whenever a property Getter is called. And PropertyChanged whenever a property Value changes.

How do I use the State?

public class MyPage : View {

		readonly State<int> clickCount = 1;
		readonly State<string> text = "Hello World";

		public MyPage() {
			Body = () => new VStack {
				new Text (text),			
				new Button("Update Text",
	                        () => state.Text = $"Click Count: {clickCount.Value++}" )
				}
			};

		}
	}

That is all!, now when the Text Changes everything updates.

#What if I want to format my value without an extra state property?

While new Text($"Click Count: {clickCount})" works, it isnt efficient.

You should use new Text(()=> $"Click Count: {clickCount}")

public class MyPage : View {

		readonly State<int> clickCount = new State<int> (1);

		public MyPage() {
			Body = () => new VStack {
				new Text (()=> $"Click Count: {clickCount}"),
				new Button("Update Text", ()=>{
					clickCount.Value++;
				}
			};
		}
	}

What platforms will be supported

• iOS
• Android
• UWP
• Mac OS
• Xamarin.Forms

Disclaimer

HotUI is a proof of concept. There is no official support. Use at your own Risk.