Make README and Samples match
This commit is contained in:
parent
f9b681530c
commit
05586997db
72
README.md
72
README.md
|
@ -1,51 +1,76 @@
|
||||||
# Ooui
|
# Ooui
|
||||||
|
|
||||||
[![Build Status](https://www.bitrise.io/app/86585e168136767d/status.svg?token=G9Svvnv_NvG40gcqu48RNQ)](https://www.bitrise.io/app/86585e168136767d)
|
[![Build Status](https://www.bitrise.io/app/86585e168136767d/status.svg?token=G9Svvnv_NvG40gcqu48RNQ)](https://www.bitrise.io/app/86585e168136767d) [![NuGet Package](https://img.shields.io/nuget/v/Ooui.svg)](https://www.nuget.org/packages/Ooui)
|
||||||
|
|
||||||
Ooui (pronounced *weeee!*) is a small cross-platform UI library for .NET that uses web technologies.
|
Ooui (pronounced *weeee!*) 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.
|
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 out!
|
## Try the Samples
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git clone git@github.com:praeclarum/Ooui.git
|
||||||
|
cd Ooui
|
||||||
|
|
||||||
```
|
|
||||||
dotnet restore
|
dotnet restore
|
||||||
dotnet run --project Samples/Samples.csproj
|
dotnet run --project Samples/Samples.csproj
|
||||||
```
|
```
|
||||||
|
|
||||||
Then open your browser to `http://localhost:8080`
|
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.
|
||||||
|
|
||||||
|
|
||||||
## Quick Example
|
## Example
|
||||||
|
|
||||||
|
Here is the complete source code to a fully collaborative button clicking app.
|
||||||
|
|
||||||
```csharp
|
```csharp
|
||||||
|
using System;
|
||||||
using Ooui;
|
using Ooui;
|
||||||
|
|
||||||
// Create the UI
|
class Program
|
||||||
var button = new Button($"Click me!");
|
{
|
||||||
|
static void Main(string[] args)
|
||||||
|
{
|
||||||
|
// Create the UI
|
||||||
|
var button = new Button("Click me!");
|
||||||
|
|
||||||
// Add some logic to it
|
// Add some logic to it
|
||||||
var count = 0;
|
var count = 0;
|
||||||
button.Clicked += (s, e) => {
|
button.Clicked += (s, e) => {
|
||||||
count++;
|
count++;
|
||||||
button.Text = $"Clicked {count} times";
|
button.Text = $"Clicked {count} times";
|
||||||
};
|
};
|
||||||
|
|
||||||
// Publishing makes an object available at a given URL
|
// Publishing makes an object available at a given URL
|
||||||
// The user should be directed to http://localhost:8080/button
|
// The user should be directed to http://localhost:8080/button
|
||||||
UI.Publish("/button", button);
|
UI.Publish ("/shared-button", button);
|
||||||
|
|
||||||
|
// Don't exit the app until someone hits return
|
||||||
|
Console.ReadLine ();
|
||||||
|
}
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
With just that code, the user will be presented with a silly click counting button.
|
Make sure to add a reference to Ooui before you try running!
|
||||||
|
|
||||||
|
```bash
|
||||||
|
dotnet add package Ooui
|
||||||
|
```
|
||||||
|
|
||||||
|
With just that code, the user will be presented with a silly counting button.
|
||||||
|
|
||||||
In fact, any number of users can hit that URL and start interacting with the same button. That's right, automatic collaboration!
|
In fact, any number of users can hit that URL and start interacting with the same button. That's right, automatic collaboration!
|
||||||
|
|
||||||
If you want each user to get their own button, then you will `Publish` a function to create it instead:
|
If you want each user to get their own button, then you will instead `Publish` a **function** to create it:
|
||||||
|
|
||||||
```csharp
|
```csharp
|
||||||
Button MakeButton() {
|
Button MakeButton()
|
||||||
var button = new Button($"Click me!");
|
{
|
||||||
|
var button = new Button("Click me!");
|
||||||
var count = 0;
|
var count = 0;
|
||||||
button.Clicked += (s, e) => {
|
button.Clicked += (s, e) => {
|
||||||
count++;
|
count++;
|
||||||
|
@ -59,6 +84,7 @@ UI.Publish("/button", MakeButton);
|
||||||
|
|
||||||
Now every user (well, every load of the page) will get their own button.
|
Now every user (well, every load of the page) will get their own button.
|
||||||
|
|
||||||
|
|
||||||
## How it works
|
## How it works
|
||||||
|
|
||||||
When the user requests a page, Ooui will connect to the client using a Web Socket. This socket is used to keep an 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 requests a page, Ooui will connect to the client using a Web Socket. This socket is used to keep an 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.
|
||||||
|
@ -73,9 +99,9 @@ When the user clicks or otherwise interacts with the UI, those events are sent b
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
<th>How big is it?</th>
|
<th>How big is it?</th>
|
||||||
<td>50 KB</td>
|
<td>25 KB</td>
|
||||||
<td>2,000 KB</td>
|
<td>650 KB</td>
|
||||||
<td>5,000 KB</td>
|
<td>1,300 KB</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
<tr>
|
<tr>
|
||||||
|
|
|
@ -7,7 +7,7 @@ namespace Samples
|
||||||
{
|
{
|
||||||
Button MakeButton ()
|
Button MakeButton ()
|
||||||
{
|
{
|
||||||
var button = new Button ($"Click me!");
|
var button = new Button ("Click me!");
|
||||||
var count = 0;
|
var count = 0;
|
||||||
button.Clicked += (s, e) => {
|
button.Clicked += (s, e) => {
|
||||||
count++;
|
count++;
|
||||||
|
|
|
@ -5,12 +5,11 @@ namespace Samples
|
||||||
{
|
{
|
||||||
class Program
|
class Program
|
||||||
{
|
{
|
||||||
static int Main (string[] args)
|
static void Main (string[] args)
|
||||||
{
|
{
|
||||||
new ButtonSample ().Publish ();
|
new ButtonSample ().Publish ();
|
||||||
|
|
||||||
Console.ReadLine ();
|
Console.ReadLine ();
|
||||||
return 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue