# Ooui Web Framework
| Version | Package | Description |
| ------- | ------- | ----------- |
| [](https://www.nuget.org/packages/Tesses.WebServer.Ooui) | [Ooui](https://www.nuget.org/packages/Tesses.WebServer.Ooui) | Core library with HTML elements and a server |
| [](https://www.nuget.org/packages/Tesses.WebServer.Ooui.Forms) | [Ooui.Forms](https://www.nuget.org/packages/Tesses.WebServer.Ooui.Forms) | Xamarin.Forms backend using Ooui for Tesses.WebServer ([Status](Documentation/OouiFormsStatus.md)) |
This is a Tesses.WebServer port of [Ooui](https://github.com/praeclarum/Ooui), this port is GPL3.0 unlike the original
Ooui (pronounced *weee!*) is a small cross-platform UI library for .NET that uses web technologies.
It presents a classic object-oriented UI API that controls a dumb browser. With Ooui, you get the full power of your favorite .NET programming language *plus* the ability to interact with your app using any device.
## Try it Online
Head on over to [http://ooui.mecha.parts](http://ooui.mecha.parts) to tryout the samples.
You can also load [https://s3.amazonaws.com/praeclarum.org/wasm/index.html](https://s3.amazonaws.com/praeclarum.org/wasm/index.html) to try the WebAssembly mode of Ooui running Xamarin.Forms. (That's Xamarin.Forms running right in your browser!)
## Try the Samples Locally
```bash
git clone https://gitlab.tesses.net/tesses50/Ooui-tws-port.git
cd Ooui-tws-port
dotnet run --project Samples/Samples.csproj
```
This will open the default starting page for the Samples. Now point your browser at [http://localhost:8080/shared-button](http://localhost:8080/shared-button)
You should see a button that tracks the number of times it was clicked. The source code for that button is shown in the example below.
## Example App
Here is the complete source code to a fully collaborative button clicking app.
```csharp
using System;
using Ooui;
using Tesses.WebServer;
class Program
{
static void Main(string[] args)
{
//unlike the original UI is an instance that inherits Tesses.WebServer.Server
UI Ui = new Ui();
// Create the UI
var button = new Button("Click me!");
// Add some logic to it
var count = 0;
button.Click += (s, e) => {
count++;
button.Text = $"Clicked {count} times";
};
// Publishing makes an object available at a given URL
// The user should be directed to http://localhost:8080/shared-button
Ui.Publish ("/shared-button", button);
//Listen until someone hits CTRL+C
Ui.StartServer(8080);
}
}
```
Make sure to add a reference to Ooui before you start running!
```bash
dotnet add package Ooui
dotnet run
```
With just that code, a web server that serves the HTML and web socket logic necessary for an interactive button will start.
## The Many Ways to Ooui
Ooui has been broken up into several packages to increase the variety of ways that it can be used. Here are some combinations to help you decide which way is best for you.
Ooui | Ooui.AspNetCore | Ooui.Forms | Ooui.Wasm | |
---|---|---|---|---|
✓ | Web DOM with the Built-in Web Server | |||
✓ | ✓ | Web DOM with ASP.NET Core | ||
✓ | ✓ | ✓ | Xamarin.Forms with ASP.NET Core | |
✓ | ✓ | Xamarin.Forms with the built-in web server | ||
✓ | ✓ | Web DOM with Web Assembly | ||
✓ | ✓ | ✓ | Xamarin.Forms with Web Assembly |