praeclarum/ooui

A small cross-platform UI library that brings the simplicity of native UI development to the web

Ooui Web Framework

Version	Package	Description
	Ooui	Core library with HTML elements and a server
	Ooui.AspNetCore	Integration with ASP.NET Core
	Ooui.Forms	Xamarin.Forms backend using Ooui (Status)
	Ooui.Wasm	Package your app into a web assembly

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 to tryout the samples.

You can also load 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

git clone [email protected]:praeclarum/Ooui.git
cd Ooui

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

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.

using System;
using Ooui;

class Program
{
    static void Main(string[] args)
    {
        // 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);

        // Don't exit the app until someone hits return
        Console.ReadLine ();
    }
}

Make sure to add a reference to Ooui before you start running!

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

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!

ooui's Issues

Match Page size to the browser

Xamarin Forms needs to know the size of the rectangle to paint into. Right now it's hard coded as 640x480. It should instead use the actual browser size.

Generate Forms and AspNetCore nuget packages

Session HI Jacking

Please consider using a similar security method to SignalR to prevent session hi jacking, see aspnet/SignalR#1155

Generate HTML from Element

This may be useful is using Ooui inside other apps that just want to display some HTML.

Publish Regex routes and pass capture groups to function

This will turn the UI system into a fully capable web server.

Parse CSS to create styles

It would be nice to simply say:

button.Style = "background-color:blue";

Add List and ListItem

Want to support <ul> and <ol>

Is ListView implemeted?

Hello! I'm new to this wonderful project and I'm playing around with it to see what works and what does not.

For now, I've put this XAML:

<ListView ItemsSource="{Binding People}" >
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextCell Text="{Binding Name}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

But nothing is rendered in the web browser.

I think that ListView isn't supported yet. Otherwise, how do I use it? Thank you!

Control CSS rules from UI class

Want some way to specify styles without using CSS. Something like:

UI.Styles["my-class"].BackgroundColor = "red";

System.TypeLoadException: 'Method 'QuitApplication' in type 'OouiPlatformServices' from assembly 'Ooui.Forms, Version=0.5.123.0, Culture=neutral, PublicKeyToken=null' does not have an implementation.'

I followed almost all the instructions on https://montemagno.com/building-a-xaml-xamarin-forms-asp-net-website/

added the lines

app.UseOoui();
Xamarin.Forms.Forms.Init();

But got this exception on Xamarin Forms Init():

System.TypeLoadException: 'Method 'QuitApplication' in type 'OouiPlatformServices' from assembly 'Ooui.Forms, Version=0.5.123.0, Culture=neutral, PublicKeyToken=null' does not have an implementation.'

Xamarin.Forms   2.5.0.121934
Ooui    	0.5.123
Ooui.AspNetCore 0.5.123
Ooui.Forms    	0.5.123

Add target to LinkLabel and LinkView

Would be nice to specify this string :)

Web sockets sometimes fails to connect with 400 Bad Request

From Twitter

https://twitter.com/tonyvca/status/932003039757721602

Xamarin Forms Platform

I want a web version of Xamarin Forms

Add Type to Button

Bootstrap seems to require it.

Rename events to match HTML

Reconnect client when disconnected

This happens quite often on mobile devices.

A notice should be displayed if a connection can't be established.

• Detect disconnect/failure
• Reload page after disconnect

Persistent (and recoverable) Sessions

Please consider using Dependency Injection for Session Management, using DistributedCaching, Redis or other would allow Sessions to be persisted and recovered should a node in a webcluster fail.

Get correct culture from the client

Need to transfer the client's culture so that the session can do proper formatting.

Specify port as a command line arg to Samples

This is needed so that the samples can be hosted online on port 80.

Chat app like signalir?

is it possible with that?

Support Canvas and Context2d

I want to do some drawing!

• Canvas
• Save return values from Calls
• Context2d
• Save drawing calls
• Clear with reset

Add Present(url) method to show a page

Should work on the following platforms:

• Mac
• iOS
• Windows
• Android

Time for Visual Studio templates

Hi,
Ooui sounds amazing.
Would be great if you could provide Visual Studio templates that implement the following:

• Xamarin.Forms templates with an addition ASP.NET Core Ooui client!
• ASP.NET Core Ooui client as a class library to be added to an existing Xamarin.Forms PCL project

You guys don't really get it, but Ooui is a total deal changer.

location.reload() when WebSocket closed disrupts user experience

I tried to simulate a bad network connection by disabling my network adapter. This caused - in FF 57 and Chrome 62 - the close event for the WebSocket to be called.

Is this behavior by design? I haven't tested yet how the mobile versions of FF and Chrome handle network losses on mobile devices and the behavior might be different there.

What are the odds of merging this with Xamarin.Forms as a new backend?

This will benefit all Xamarin.Forms developers.

Use Etags for caching

This should be used on PublishFile and /client.js

Support SVG element

Make it easy to add simple graphics to the page

[Ooui.Forms] DisplayAlert does not display any alert messages

Xamarin.Forms method DisplayAlert is currently not implemented. When you fire the message the Ooui.Forms.Platform is not listening for the messaging.

• This is an enhancement
• Look for PR

cannot build from CLI or VS Code

First of all, thank you for this beautiful little piece of technology!

When I try to compile and run the sample using the VS Code or using the dotnet cli directly

dotnet run --project Samples/Samples.csproj

I get the below error.

C:\Users\bitbonk.nuget\packages\xamarin.forms\2.4.0.38779\build\netstandard1.0\Xamarin.Forms.targets(51,3): error MSB4062: The "Xamarin.Forms.Build.Tasks.FixedCreateCSharpManifestResourceName" task could not be loaded from the assembly C:\Users\bitbonk.nuget\packages\xamarin.forms\2.4.0.38779\build\netstandard1.0\Xamarin.Forms.Build.Tasks.dll. Could not load file or assembly 'Microsoft.Build.Utilities.v4.0, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a'. The system cannot find the file specified. Confirm that the declaration is correct, that the assembly and all its dependencies are available, and that the task contains a public class that implements Microsoft.Build.Framework.ITask. [c:\temp\Ooui\Ooui.Forms\Ooui.Forms.csproj]
The build failed. Please fix the build errors and run again.

When I build and run from Visual Studio 2017, everything works fine.

This issue might be related.
Also: this.

Write Todo Sample

Tryout site http://ooui.mecha.parts does not work

Subj

Support main page template

Currently the main page is hardcoded as a string.

Allow the user to override it to control their own libraries, add analytics, etc.

Increasing browser memory usage for long running web sites

After seeing that all created nodes are kept in a global variable, I fear that the browser memory usage might be uncontrollable when the application gets more complex - especially when developing a SPA.

Add Default Styling for Buttons

Currently buttons require additional styling to look right on the screen. If you don't explicitly set the bootstrap styles or the HeightRequest = 30 (give or take a little with the number 30) the button will be smaller than the text and not look correctly.

Current Button Behavior:

XAML:

<Button />

Recommended Fix:
Since it has been discussed in #32 that we are going to take the dependency of Bootstrap I think it would be appropriate to apply the styles to the Button Renderer.

This is something I can take and submit a PR for

Parse HTML to create Element

This would be a slow but convenient way to generate elements.

var e = Element.Parse ("<div><label id='l' class='w' for='i'/><input id='i' /></div>");
e["l"].Text = "The Answer";
((Input)e["i"]).Value = "42";

Syntax will be limited to XHTML. Need to preserve UserIds. Need to map HTML names to C#.

Add events from HTML5 spec

This spec lists the events that should be supported:

https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers-on-elements,-document-objects,-and-window-objects

TypeScript or JQuery

Please consider removing any dependency on jquery and/or implementation using TypeScript to provider better developer experience with strong typing, intelligence and other features that TypeScript provides such ECMA script compliance and NULL check as the project size increase this will also ease any pain with regards to testing and introducing any issues.

Select element not implemented fully?

Hi, really enjoying the project, great idea.

I'm trying to use a select element, but I'm not sure it's fully implemented. I couldn't find an Option type, so I had to define one:

public class Option : Element
{
	public Option()
		: base("option")
	{
	}

	string _value = "";
	public string Value 
	{
		get => _value;
		set => SetProperty(ref _value, value ?? "", "value");
	}
}

but then I couldn't find a way to get the SelectedIndex of the current element from the Select in the ChangedHandler, and the Selects Value property is null, even with an item selected . Am I doing it wrong?

ImageRenderer for Xamarin.Forms

Publish JSON to enable web apis

Need to add a PublishJson function to UI so that apps can work as api hosts.

Something like:

PublishJson (new Person ());
PublishJson (() => new Person ());

can we use it to replace other front end web technologies?

Just a question, I know its in preview mode still, but wanted to ask about the road map as we are using c# and xaml to create a basic web app button counter, in future would we be able to use these 2 technologies to create a complete fully functional web app just like we can in angular, react e.t.c ? or will we still need to learn html , css and JS?

Instructions on how to run the xamarin forms samples

This looks great. I can run the normal samples but can't figure out what url to hit to see the forms samples in the project.

Socket Closes when navigating away and back to page

In Chrome

1.) http://soundbitefm.azurewebsites.net/
2.) Click on podcast art
3.) hit back in browers
4.) white screen

Web socket created
ooui.js:46 WebSocket connection to 'ws://soundbitefm.azurewebsites.net/ooui.ws?id=ec584595b3b64d00a35977d6aaf659aa&w=1920&h=949' failed: Error during WebSocket handshake: Unexpected response code: 400
ooui @ ooui.js:46
ooui.js:54 Web socket error Event
(anonymous) @ ooui.js:54
ooui.js:58 Web socket close CloseEvent
(anonymous) @ ooui.js:58
ooui.js:110 WebSocket is already in CLOSING or CLOSED state.

Improve font measuring

Use real data about character sizes (at least ASCII) to measure strings more accurately.

Self hosted Xamarin.Forms apps don't have the correct window size

Window size works in ASP.NET MVC apps

Support uploading files

Switch does not fire change event

It seems as though the node.addEventListener(m.k... event is not being triggered by the bootstrap.toggle?
If the code is changed to use jquery $(node).on(m.k... it works as expected.
Is this a known issue or am I missing something?

HTTPS Support

<3

Add Table, TableRow, TableCell

Publish Files in order to support images and other media

Just need a way to host files:

UI.PublishFile ("/path/to/the/file.png");