UI-WebLib

A C# library for building .NET 2.0 user interfaces

Event-Driven

Easily create interactive user interfaces for legacy Windows applications. Define simple views for each state of your application, and UI-WebLib will optimally update and render just the right components when your data changes.

Declarative views make your C# code more predictable and easier to debug within Visual Studio 2005.

Component-Based

Build encapsulated C# classes that manage their own state, then compose them to make complex user interfaces.

Since component logic is written in pure C# rather than templates, you can easily pass rich data through your application and keep state out of the DOM equivalent.

Deploy Anywhere

We don't make assumptions about the rest of your technology stack, so you can develop new features in .NET 2.0 without rewriting your existing legacy codebases.

UI-WebLib can also render on the server using older IIS architectures, or power legacy mobile experiences.

A Simple Component

UI-WebLib components implement a method called Render() that takes input data and returns what to display. This example uses an older C# syntax which resembles XML natively.

Input data that is passed into the component can be accessed by this.Properties.

Interactive C# Editor WinForms?
Result
class HelloMessage : UIComponent { public override void Render() { return "Salut " + this.Properties.Name; } } Program.Run(new HelloMessage() { Name = "Thierry" });
Salut Thierry

A Stateful Component

In addition to taking input data (accessed via this.Properties), a component can maintain internal state data (accessed via this.State). When a component's state data changes, the rendered UI will be updated by invoking Update().

Interactive C# Editor WinForms?
Result
class Timer : UIComponent { public Timer() { this.State.Seconds = 0; } public override void OnMount() { SystemTimer.SetInterval(() => { this.State.Seconds++; this.Update(); }, 1000); } public override void Render() { return "Secondes : " + this.State.Seconds; } } Program.Run(new Timer());
Secondes : 12

An Application

Using this.Properties and this.State, we can put together a small Todo application. This example uses state to track the current list of items as well as the text that the user has entered.

Interactive C# Editor WinForms?
Result
class TodoApp : UIComponent { public TodoApp() { this.State.Items = new List<string>(); this.State.Text = ""; } void HandleChange(UIEvent e) { this.State.Text = e.Value; this.Update(); } void HandleSubmit(UIEvent e) { this.State.Items.Add(this.State.Text); this.State.Text = ""; this.Update(); } public override void Render() { return new StackPanel( new Label("TODO"), new TodoList(items: this.State.Items), new TextBox(onChange: HandleChange, value: this.State.Text), new Button("Add #" + (this.State.Items.Count + 1), onClick: HandleSubmit) ); } }
TODO
  • Learn C# Web UI
  • Build an awesome legacy app