From 05586997db48689ed598399703b63b28f043fe4d Mon Sep 17 00:00:00 2001 From: "Frank A. Krueger" Date: Fri, 16 Jun 2017 16:02:38 -0700 Subject: [PATCH] Make README and Samples match --- README.md | 72 ++++++++++++++++++++++++++++------------- Samples/ButtonSample.cs | 2 +- Samples/Program.cs | 3 +- 3 files changed, 51 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 78b9e85..11544cd 100644 --- a/README.md +++ b/README.md @@ -1,51 +1,76 @@ # 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. 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 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 +using System; using Ooui; -// Create the UI -var button = new Button($"Click me!"); +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.Clicked += (s, e) => { - count++; - button.Text = $"Clicked {count} times"; -}; + // Add some logic to it + var count = 0; + button.Clicked += (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/button -UI.Publish("/button", button); + // Publishing makes an object available at a given URL + // The user should be directed to http://localhost:8080/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! -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 -Button MakeButton() { - var button = new Button($"Click me!"); +Button MakeButton() +{ + var button = new Button("Click me!"); var count = 0; button.Clicked += (s, e) => { count++; @@ -59,6 +84,7 @@ UI.Publish("/button", MakeButton); Now every user (well, every load of the page) will get their own button. + ## 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. @@ -73,9 +99,9 @@ When the user clicks or otherwise interacts with the UI, those events are sent b How big is it? -50 KB -2,000 KB -5,000 KB +25 KB +650 KB +1,300 KB diff --git a/Samples/ButtonSample.cs b/Samples/ButtonSample.cs index 182d4f5..2ae5a28 100644 --- a/Samples/ButtonSample.cs +++ b/Samples/ButtonSample.cs @@ -7,7 +7,7 @@ namespace Samples { Button MakeButton () { - var button = new Button ($"Click me!"); + var button = new Button ("Click me!"); var count = 0; button.Clicked += (s, e) => { count++; diff --git a/Samples/Program.cs b/Samples/Program.cs index fcca6bd..b900960 100644 --- a/Samples/Program.cs +++ b/Samples/Program.cs @@ -5,12 +5,11 @@ namespace Samples { class Program { - static int Main (string[] args) + static void Main (string[] args) { new ButtonSample ().Publish (); Console.ReadLine (); - return 0; } } }