# Ooui Web Framework | Version | Package | Description | | ------- | ------- | ----------- | | [![NuGet Package](https://img.shields.io/nuget/v/Tesses.WebServer.Ooui.svg)](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 | | [![NuGet Package](https://img.shields.io/nuget/v/Tesses.WebServer.Ooui.Forms.svg)](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.
OouiOoui.AspNetCoreOoui.FormsOoui.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
## How it works When the user requests a page, the page will connect to the server using a web socket. This socket is used to keep the server's in-memory model of the UI (the one you work with as a programmer) in sync with the actual UI shown to the user in their browser. This is done using a simple messaging protocol with JSON packets. When the user clicks or otherwise interacts with the UI, those events are sent back over the web socket so that your code can deal with them. In the case of web assembly, this same dataflow takes place. However, sockets are not used as all communication is done locally in the browser process. ## Contributing Ooui is open source and I love merging PRs. Please fork away, and please obey the .editorconfig file. :-) Try to file issues for things that you want to work on *before* you start the work so that there's no duplicated effort. If you just want to help out, check out the issues and dive in!, please contribute to the [original](https://github.com/praeclarum/Ooui) not this port (you can fork this port if you want) ## Why I ported this library to Tesses.WebServer Well so this would work on mono (mono to my knowledge doesn't support System.Net.WebSockets) and I would like to integrate this library into my webserver ## This still does not work with mono (returns this only on mono, in net6.0 its fine) Failed to send queued messages, aborting session: System.AggregateException: One or more errors occurred. (Mutex is not owned) ---> System.ApplicationException: Mutex is not owned at System.Threading.Mutex.ReleaseMutex () [0x0000d] in :0 at (wrapper remoting-invoke-with-check) System.Threading.Mutex.ReleaseMutex() at Tesses.WebServer.WebSocket.WebSocketServer.SendMessageAsync (Tesses.WebServer.WebSocket.WebSocketMessage msg) [0x001cb] in :0 at Tesses.WebServer.WebSocketExtensions+<>c__DisplayClass2_2.b__6 () [0x00072] in :0 --- End of inner exception stack trace --- at System.Threading.Tasks.Task.ThrowIfExceptional (System.Boolean includeTaskCanceledExceptions) [0x00011] in :0 at System.Threading.Tasks.Task.Wait (System.Int32 millisecondsTimeout, System.Threading.CancellationToken cancellationToken) [0x00043] in :0 at System.Threading.Tasks.Task.Wait () [0x00000] in :0 at Tesses.WebServer.WebSocketExtensions+<>c__DisplayClass2_1.b__4 (Tesses.WebServer.WebSocket.WebSocketMessage mm) [0x00023] in :0 at Ooui.WebSocketSession.TransmitQueuedMessages () [0x00050] in <3f1f33bf6fb4419491d2271f7e0005d9>:0 ---> (Inner Exception #0) System.ApplicationException: Mutex is not owned at System.Threading.Mutex.ReleaseMutex () [0x0000d] in :0 at (wrapper remoting-invoke-with-check) System.Threading.Mutex.ReleaseMutex() at Tesses.WebServer.WebSocket.WebSocketServer.SendMessageAsync (Tesses.WebServer.WebSocket.WebSocketMessage msg) [0x001cb] in :0 at Tesses.WebServer.WebSocketExtensions+<>c__DisplayClass2_2.b__6 () [0x00072] in :0 <--- if you have a fix please send your changes to https://nextcloud.tesses.cf/s/qyiZmHgzCdGPFjR as a zip file (due to my server not accepting pull requests)