{"id":13431997,"url":"https://github.com/praeclarum/Ooui","last_synced_at":"2025-03-16T23:30:21.929Z","repository":{"id":40523161,"uuid":"94273923","full_name":"praeclarum/Ooui","owner":"praeclarum","description":"A small cross-platform UI library that brings the simplicity of native UI development to the web","archived":false,"fork":false,"pushed_at":"2022-12-07T19:46:33.000Z","size":2561,"stargazers_count":1618,"open_issues_count":110,"forks_count":160,"subscribers_count":129,"default_branch":"master","last_synced_at":"2025-03-08T18:07:58.204Z","etag":null,"topics":["cross-platform","csharp","dotnet","html","ui","websockets"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/praeclarum.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"praeclarum"}},"created_at":"2017-06-14T01:16:31.000Z","updated_at":"2025-03-03T20:48:18.000Z","dependencies_parsed_at":"2022-06-29T23:31:11.248Z","dependency_job_id":null,"html_url":"https://github.com/praeclarum/Ooui","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/praeclarum%2FOoui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/praeclarum%2FOoui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/praeclarum%2FOoui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/praeclarum%2FOoui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/praeclarum","download_url":"https://codeload.github.com/praeclarum/Ooui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243818192,"owners_count":20352629,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cross-platform","csharp","dotnet","html","ui","websockets"],"created_at":"2024-07-31T02:01:07.675Z","updated_at":"2025-03-16T23:30:21.916Z","avatar_url":"https://github.com/praeclarum.png","language":"C#","funding_links":["https://github.com/sponsors/praeclarum"],"categories":["Frameworks, Libraries and Tools","Projects","Web Framework","Backends (Other platforms)","框架, 库和工具","GUI","C\\#"],"sub_categories":["Web Framework",".NET","Web框架"],"readme":"# Ooui Web Framework \u003cimg src=\"https://raw.githubusercontent.com/praeclarum/Ooui/master/Documentation/Icon.png\" height=\"32\"\u003e \n\n[![Build Status](https://github.com/praeclarum/Ooui/actions/workflows/build.yml/badge.svg)](https://github.com/praeclarum/Ooui/actions/workflows/build.yml)\n\n| Version | Package | Description |\n| ------- | ------- | ----------- |\n| [![NuGet Package](https://img.shields.io/nuget/v/Ooui.svg)](https://www.nuget.org/packages/Ooui) | [Ooui](https://www.nuget.org/packages/Ooui) | Core library with HTML elements and a server |\n| [![NuGet Package](https://img.shields.io/nuget/v/Ooui.AspNetCore.svg)](https://www.nuget.org/packages/Ooui.AspNetCore) | [Ooui.AspNetCore](https://www.nuget.org/packages/Ooui.AspNetCore) | Integration with ASP.NET Core |\n| [![NuGet Package](https://img.shields.io/nuget/v/Ooui.Forms.svg)](https://www.nuget.org/packages/Ooui.Forms) | [Ooui.Forms](https://www.nuget.org/packages/Ooui.Forms) | Xamarin.Forms backend using Ooui ([Status](Documentation/OouiFormsStatus.md)) |\n| [![NuGet Package](https://img.shields.io/nuget/v/Ooui.Wasm.svg)](https://www.nuget.org/packages/Ooui.Wasm) | [Ooui.Wasm](https://www.nuget.org/packages/Ooui.Wasm) | Package your app into a web assembly |\n\nOoui (pronounced *weee!*) is a small cross-platform UI library for .NET that uses web technologies.\n\nIt 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.\n\n\n## Try it Online\n\nHead on over to [http://ooui.mecha.parts](http://ooui.mecha.parts) to tryout the samples.\n\nYou 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!)\n\n\n## Try the Samples Locally\n\n```bash\ngit clone git@github.com:praeclarum/Ooui.git\ncd Ooui\n\ndotnet run --project Samples/Samples.csproj\n```\n\nThis will open the default starting page for the Samples. Now point your browser at [http://localhost:8080/shared-button](http://localhost:8080/shared-button)\n\nYou 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.\n\n\n## Example App\n\nHere is the complete source code to a fully collaborative button clicking app.\n\n```csharp\nusing System;\nusing Ooui;\n\nclass Program\n{\n    static void Main(string[] args)\n    {\n        // Create the UI\n        var button = new Button(\"Click me!\");\n\n        // Add some logic to it\n        var count = 0;\n        button.Click += (s, e) =\u003e {\n            count++;\n            button.Text = $\"Clicked {count} times\";\n        };\n\n        // Publishing makes an object available at a given URL\n        // The user should be directed to http://localhost:8080/shared-button\n        UI.Publish (\"/shared-button\", button);\n\n        // Don't exit the app until someone hits return\n        Console.ReadLine ();\n    }\n}\n```\n\nMake sure to add a reference to Ooui before you start running!\n\n```bash\ndotnet add package Ooui\ndotnet run\n```\n\nWith just that code, a web server that serves the HTML and web socket logic necessary for an interactive button will start.\n\n\n\n## The Many Ways to Ooui\n\nOoui 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.\n\n\u003ctable\u003e\n\u003cthead\u003e\u003ctr\u003e\u003cth\u003eOoui\u003c/th\u003e\u003cth\u003eOoui.AspNetCore\u003c/th\u003e\u003cth\u003eOoui.Forms\u003c/th\u003e\u003cth\u003eOoui.Wasm\u003c/th\u003e\u003cth\u003e\u003c/th\u003e\u003c/tr\u003e\u003c/thead\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u0026check;\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003e\u003ca href=\"https://github.com/praeclarum/Ooui/wiki/Web-DOM-with-the-Built-in-Web-Server\"\u003eWeb DOM with the Built-in Web Server\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u0026check;\u003c/td\u003e\u003ctd\u003e\u0026check;\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003eWeb DOM with ASP.NET Core\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u0026check;\u003c/td\u003e\u003ctd\u003e\u0026check;\u003c/td\u003e\u003ctd\u003e\u0026check;\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003eXamarin.Forms with ASP.NET Core\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u0026check;\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003e\u0026check;\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003eXamarin.Forms with the built-in web server\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u0026check;\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003e\u0026check;\u003c/td\u003e\u003ctd\u003e\u003ca href=\"https://github.com/praeclarum/Ooui/wiki/Web DOM-with-Web-Assembly\"\u003eWeb DOM with Web Assembly\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003ctr\u003e\n\u003ctd\u003e\u0026check;\u003c/td\u003e\u003ctd\u003e\u003c/td\u003e\u003ctd\u003e\u0026check;\u003c/td\u003e\u003ctd\u003e\u0026check;\u003c/td\u003e\u003ctd\u003e\u003ca href=\"https://github.com/praeclarum/Ooui/wiki/Xamarin.Forms-with-Web-Assembly\"\u003eXamarin.Forms with Web Assembly\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\n\u003c/table\u003e\n\n\n## How it works\n\nWhen 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.\n\nWhen 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.\n\nIn 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.\n\n\n## Contributing\n\nOoui 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!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpraeclarum%2FOoui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpraeclarum%2FOoui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpraeclarum%2FOoui/lists"}