(#22) MAUI sample.

docs/content/samples/todoapp/maui.md

@@ -0,0 +1,72 @@
++++
+title = "MAUI"
++++
+
+## Run the application first
+
+The MAUI sample uses an in-memory Sqlite store for storing its data.  To run the application locally:
+
+* [Configure Visual Studio for MAUI development](https://learn.microsoft.com/dotnet/maui/get-started/installation).
+* Open `samples/todoapp/Samples.TodoApp.sln` in Visual Studio.
+* In the Solution Explorer, right-click the `TodoApp.MAUI` project, then select **Set as Startup Project**.
+* Select a target (in the top bar), then press F5 to run the application.
+
+The application runs on Android, iOS, and Windows.  Each platform needs slightly different setup.  Read the MAUI documentation for more information.
+
+## Deploy a datasync server to Azure
+
+Before you begin adjusting the application for offline usage, you must [deploy a datasync service](../server.md).  Make a note of the URI of the service before continuing.
+
+## Update the application for datasync operations
+
+All the changes are isolated to the `Database/AppDbContext.cs` file.
+
+1. Change the definition of the class so that it inherits from `OfflineDbContext`:
+
+   ```csharp
+   public class AppDbContext(DbContextOptions<AppDbContext> options) : OfflineDbContext(options)
+   {
+     // Rest of the class
+   }
+   ```
+
+2. Add the `OnDatasyncInitialization()` method:
+
+   ```csharp
+   protected override void OnDatasyncInitialization(DatasyncOfflineOptionsBuilder optionsBuilder)
+   {
+       HttpClientOptions clientOptions = new()
+       {
+           Endpoint = new Uri("https://YOURSITEHERE.azurewebsites.net/"),
+           HttpPipeline = [new LoggingHandler()]
+       };
+       _ = optionsBuilder.UseHttpClientOptions(clientOptions);
+   }
+   ```
+
+   Replace the Endpoint with the URI of your datasync service.
+
+3. Update the `SynchronizeAsync()` method.
+
+   The `SynchronizeAsync()` method is used by the application to synchronize data to and from the datasync service.  It is called primarily from the `MainViewModel` which drives the UI interactions for the main list.
+
+   ```csharp
+   public async Task SynchronizeAsync(CancellationToken cancellationToken = default)
+   {
+      PushResult pushResult = await this.PushAsync(cancellationToken);
+      if (!pushResult.IsSuccessful)
+      {
+        throw new ApplicationException($"Push failed: {pushResult.FailedRequests.FirstOrDefault().Value.ReasonPhrase}");
+      }
+
+      PullResult pullResult = await this.PullAsync(cancellationToken);
+      if (!pullResult.IsSuccessful)
+      {
+        throw new ApplicationException($"Pull failed: {pullResult.FailedRequests.FirstOrDefault().Value.ReasonPhrase}");
+      }
+    }
+    ```
+
+You can now re-run your application. Watch the console logs to show the interactions with the datasync service.  Press the refresh button to synchronize data with the cloud.  When you restart the application, your changes will automatically populate the database again.
+
+Obviously, you will want to do much more in a "real world" application, including proper error handling, authentication, and using a Sqlite file instead of an in-memory database.  This example shows off the minimum required to add datasync services to an application.

docs/content/samples/todoapp/winui3.md

@@ -2,44 +2,71 @@
 title = "WinUI3"
 +++
 
-You can find [our sample TodoApp for WinUI3](https://github.com/CommunityToolkit/Datasync/tree/main/samples/todoapp/TodoApp.WinUI3) on our GitHub repository.  All of our logic has been placed in the `Database/AppDbContext.cs` file:
-
-{{< highlight lineNos="true" type="csharp" wrap="true" title="AppDbContext.cs" >}}
-public class AppDbContext(DbContextOptions<AppDbContext> options) : OfflineDbContext(options)
-{
-    public DbSet<TodoItem> TodoItems => Set<TodoItem>();
-
-    protected override void OnDatasyncInitialization(DatasyncOfflineOptionsBuilder optionsBuilder)
-    {
-        HttpClientOptions clientOptions = new()
-        {
-            Endpoint = new Uri("https://YOURSITEHERE.azurewebsites.net/"),
-            HttpPipeline = [new LoggingHandler()]
-        };
-        _ = optionsBuilder.UseHttpClientOptions(clientOptions);
-    }
+## Run the application first
 
-    public async Task SynchronizeAsync(CancellationToken cancellationToken = default)
-    {
-        PushResult pushResult = await this.PushAsync(cancellationToken);
-        if (!pushResult.IsSuccessful)
-        {
-            throw new ApplicationException($"Push failed: {pushResult.FailedRequests.FirstOrDefault().Value.ReasonPhrase}");
-        }
-
-        PullResult pullResult = await this.PullAsync(cancellationToken);
-        if (!pullResult.IsSuccessful)
-        {
-            throw new ApplicationException($"Pull failed: {pullResult.FailedRequests.FirstOrDefault().Value.ReasonPhrase}");
-        }
-    }
-}
-{{< /highlight >}}
+The WinUI3 sample uses an in-memory Sqlite store for storing its data.  To run the application locally:
+
+* [Configure Visual Studio for WinUI3 development](https://learn.microsoft.com/windows/apps/get-started/start-here).
+* Open `samples/todoapp/Samples.TodoApp.sln` in Visual Studio.
+* In the Solution Explorer, right-click the `TodoApp.WinUI3` project, then select **Set as Startup Project**.
+* Select a target (in the top bar), then press F5 to run the application.
+
+If you bump into issues at this point, ensure you can properly develop and run WinUI3 applications outside of the datasync service.
+
+## Deploy a datasync server to Azure
+
+Before you begin adjusting the application for offline usage, you must [deploy a datasync service](../server.md).  Make a note of the URI of the service before continuing.
+
+## Update the application for datasync operations
+
+All the changes are isolated to the `Database/AppDbContext.cs` file.
+
+1. Change the definition of the class so that it inherits from `OfflineDbContext`:
 
-To enable offline synchronization:
+   ```csharp
+   public class AppDbContext(DbContextOptions<AppDbContext> options) : OfflineDbContext(options)
+   {
+     // Rest of the class
+   }
+   ```
+
+2. Add the `OnDatasyncInitialization()` method:
+
+   ```csharp
+   protected override void OnDatasyncInitialization(DatasyncOfflineOptionsBuilder optionsBuilder)
+   {
+       HttpClientOptions clientOptions = new()
+       {
+           Endpoint = new Uri("https://YOURSITEHERE.azurewebsites.net/"),
+           HttpPipeline = [new LoggingHandler()]
+       };
+       _ = optionsBuilder.UseHttpClientOptions(clientOptions);
+   }
+   ```
+
+   Replace the Endpoint with the URI of your datasync service.
+
+3. Update the `SynchronizeAsync()` method.
+
+   The `SynchronizeAsync()` method is used by the application to synchronize data to and from the datasync service.  It is called primarily from the `MainViewModel` which drives the UI interactions for the main list.
+
+   ```csharp
+   public async Task SynchronizeAsync(CancellationToken cancellationToken = default)
+   {
+      PushResult pushResult = await this.PushAsync(cancellationToken);
+      if (!pushResult.IsSuccessful)
+      {
+        throw new ApplicationException($"Push failed: {pushResult.FailedRequests.FirstOrDefault().Value.ReasonPhrase}");
+      }
+
+      PullResult pullResult = await this.PullAsync(cancellationToken);
+      if (!pullResult.IsSuccessful)
+      {
+        throw new ApplicationException($"Pull failed: {pullResult.FailedRequests.FirstOrDefault().Value.ReasonPhrase}");
+      }
+    }
+    ```
 
-* Switch from `DbContext` to `OfflineDbContext`.
-* Define your `OnDatasyncInitialization()` method (don't forget to change the URL to the URL of your datasync server).
-* Where appropriate, use `PushAsync()` and `PullAsync()` to communicate with the server.
+You can now re-run your application. Watch the console logs to show the interactions with the datasync service.  Press the refresh button to synchronize data with the cloud.  When you restart the application, your changes will automatically populate the database again.
 
-We have placed a `SynchronizeAsync()` method on the database context, which is used in the view model for the single page we have.
+Obviously, you will want to do much more in a "real world" application, including proper error handling, authentication, and using a Sqlite file instead of an in-memory database.  This example shows off the minimum required to add datasync services to an application.

docs/public/404.html

@@ -20,17 +20,17 @@
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
 <link rel="manifest" href="/favicon/site.webmanifest">
-    <link href="/Datasync/css/fontawesome-all.min.css?1724869793" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/Datasync/css/fontawesome-all.min.css?1724869793" rel="stylesheet"></noscript>
-    <link href="/Datasync/css/nucleus.css?1724869793" rel="stylesheet">
-    <link href="/Datasync/css/auto-complete.css?1724869793" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/Datasync/css/auto-complete.css?1724869793" rel="stylesheet"></noscript>
-    <link href="/Datasync/css/perfect-scrollbar.min.css?1724869793" rel="stylesheet">
-    <link href="/Datasync/css/fonts.css?1724869793" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/Datasync/css/fonts.css?1724869793" rel="stylesheet"></noscript>
-    <link href="/Datasync/css/theme.css?1724869793" rel="stylesheet">
-    <link href="/Datasync/css/theme-auto.css?1724869793" rel="stylesheet" id="R-variant-style">
-    <link href="/Datasync/css/chroma-auto.css?1724869793" rel="stylesheet" id="R-variant-chroma-style">
-    <link href="/Datasync/css/variant.css?1724869793" rel="stylesheet">
-    <link href="/Datasync/css/print.css?1724869793" rel="stylesheet" media="print">
-    <script src="/Datasync/js/variant.js?1724869793"></script>
+    <link href="/Datasync/css/fontawesome-all.min.css?1725059400" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/Datasync/css/fontawesome-all.min.css?1725059400" rel="stylesheet"></noscript>
+    <link href="/Datasync/css/nucleus.css?1725059400" rel="stylesheet">
+    <link href="/Datasync/css/auto-complete.css?1725059400" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/Datasync/css/auto-complete.css?1725059400" rel="stylesheet"></noscript>
+    <link href="/Datasync/css/perfect-scrollbar.min.css?1725059400" rel="stylesheet">
+    <link href="/Datasync/css/fonts.css?1725059400" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/Datasync/css/fonts.css?1725059400" rel="stylesheet"></noscript>
+    <link href="/Datasync/css/theme.css?1725059400" rel="stylesheet">
+    <link href="/Datasync/css/theme-auto.css?1725059400" rel="stylesheet" id="R-variant-style">
+    <link href="/Datasync/css/chroma-auto.css?1725059400" rel="stylesheet" id="R-variant-chroma-style">
+    <link href="/Datasync/css/variant.css?1725059400" rel="stylesheet">
+    <link href="/Datasync/css/print.css?1725059400" rel="stylesheet" media="print">
+    <script src="/Datasync/js/variant.js?1725059400"></script>
     <script>
       window.relearn = window.relearn || {};
       window.relearn.relBasePath='.';

docs/public/categories/index.html

@@ -20,17 +20,17 @@
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
 <link rel="manifest" href="/favicon/site.webmanifest">
-    <link href="/Datasync/css/fontawesome-all.min.css?1724869793" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/Datasync/css/fontawesome-all.min.css?1724869793" rel="stylesheet"></noscript>
-    <link href="/Datasync/css/nucleus.css?1724869793" rel="stylesheet">
-    <link href="/Datasync/css/auto-complete.css?1724869793" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/Datasync/css/auto-complete.css?1724869793" rel="stylesheet"></noscript>
-    <link href="/Datasync/css/perfect-scrollbar.min.css?1724869793" rel="stylesheet">
-    <link href="/Datasync/css/fonts.css?1724869793" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/Datasync/css/fonts.css?1724869793" rel="stylesheet"></noscript>
-    <link href="/Datasync/css/theme.css?1724869793" rel="stylesheet">
-    <link href="/Datasync/css/theme-auto.css?1724869793" rel="stylesheet" id="R-variant-style">
-    <link href="/Datasync/css/chroma-auto.css?1724869793" rel="stylesheet" id="R-variant-chroma-style">
-    <link href="/Datasync/css/variant.css?1724869793" rel="stylesheet">
-    <link href="/Datasync/css/print.css?1724869793" rel="stylesheet" media="print">
-    <script src="/Datasync/js/variant.js?1724869793"></script>
+    <link href="/Datasync/css/fontawesome-all.min.css?1725059400" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/Datasync/css/fontawesome-all.min.css?1725059400" rel="stylesheet"></noscript>
+    <link href="/Datasync/css/nucleus.css?1725059400" rel="stylesheet">
+    <link href="/Datasync/css/auto-complete.css?1725059400" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/Datasync/css/auto-complete.css?1725059400" rel="stylesheet"></noscript>
+    <link href="/Datasync/css/perfect-scrollbar.min.css?1725059400" rel="stylesheet">
+    <link href="/Datasync/css/fonts.css?1725059400" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/Datasync/css/fonts.css?1725059400" rel="stylesheet"></noscript>
+    <link href="/Datasync/css/theme.css?1725059400" rel="stylesheet">
+    <link href="/Datasync/css/theme-auto.css?1725059400" rel="stylesheet" id="R-variant-style">
+    <link href="/Datasync/css/chroma-auto.css?1725059400" rel="stylesheet" id="R-variant-chroma-style">
+    <link href="/Datasync/css/variant.css?1725059400" rel="stylesheet">
+    <link href="/Datasync/css/print.css?1725059400" rel="stylesheet" media="print">
+    <script src="/Datasync/js/variant.js?1725059400"></script>
     <script>
       window.relearn = window.relearn || {};
       window.relearn.relBasePath='..';
@@ -163,12 +163,12 @@ <h1 id="categories">Categories</h1>
         <script>
           var contentLangs=['en'];
         </script>
-        <script src="/Datasync/js/auto-complete.js?1724869793" defer></script>
-        <script src="/Datasync/js/lunr/lunr.min.js?1724869793" defer></script>
-        <script src="/Datasync/js/lunr/lunr.stemmer.support.min.js?1724869793" defer></script>
-        <script src="/Datasync/js/lunr/lunr.multi.min.js?1724869793" defer></script>
-        <script src="/Datasync/js/lunr/lunr.en.min.js?1724869793" defer></script>
-        <script src="/Datasync/js/search.js?1724869793" defer></script>
+        <script src="/Datasync/js/auto-complete.js?1725059400" defer></script>
+        <script src="/Datasync/js/lunr/lunr.min.js?1725059400" defer></script>
+        <script src="/Datasync/js/lunr/lunr.stemmer.support.min.js?1725059400" defer></script>
+        <script src="/Datasync/js/lunr/lunr.multi.min.js?1725059400" defer></script>
+        <script src="/Datasync/js/lunr/lunr.en.min.js?1725059400" defer></script>
+        <script src="/Datasync/js/search.js?1725059400" defer></script>
       </div>
       <div id="R-homelinks" class="default-animation homelinks">
         <ul>
@@ -185,6 +185,7 @@ <h1 id="categories">Categories</h1>
           <li data-nav-id="/Datasync/samples/index.html" class=""><a class="padding" href="/Datasync/samples/index.html">Samples</a><ul id="R-subsections-abc4562a0bcf1570d92f916bb82a8b39" class="morespace collapsible-menu">
           <li data-nav-id="/Datasync/samples/server/index.html" class=""><a class="padding" href="/Datasync/samples/server/index.html">Sample Server</a></li>
           <li data-nav-id="/Datasync/samples/todoapp/index.html" class="alwaysopen"><a class="padding" href="/Datasync/samples/todoapp/index.html">Todo App</a><ul id="R-subsections-64deac9d85858c681d35e673e0fd3b13" class="morespace collapsible-menu">
+          <li data-nav-id="/Datasync/samples/todoapp/maui/index.html" class=""><a class="padding" href="/Datasync/samples/todoapp/maui/index.html">MAUI</a></li>
           <li data-nav-id="/Datasync/samples/todoapp/winui3/index.html" class=""><a class="padding" href="/Datasync/samples/todoapp/winui3/index.html">WinUI3</a></li>
           <li data-nav-id="/Datasync/samples/todoapp/wpf/index.html" class=""><a class="padding" href="/Datasync/samples/todoapp/wpf/index.html">WPF</a></li></ul></li></ul></li>
           <li data-nav-id="/Datasync/in-depth/index.html" class=""><a class="padding" href="/Datasync/in-depth/index.html">In-depth</a><ul id="R-subsections-3229b26a09fade6cbffa6d892da9210c" class="morespace collapsible-menu">
@@ -250,8 +251,8 @@ <h1 id="categories">Categories</h1>
         </div>
       </div>
     </aside>
-    <script src="/Datasync/js/clipboard.min.js?1724869793" defer></script>
-    <script src="/Datasync/js/perfect-scrollbar.min.js?1724869793" defer></script>
-    <script src="/Datasync/js/theme.js?1724869793" defer></script>
+    <script src="/Datasync/js/clipboard.min.js?1725059400" defer></script>
+    <script src="/Datasync/js/perfect-scrollbar.min.js?1725059400" defer></script>
+    <script src="/Datasync/js/theme.js?1725059400" defer></script>
   </body>
 </html>

docs/public/css/chroma-auto.css

@@ -1,2 +1,2 @@
-@import "chroma-relearn-light.css?1724869793" screen and (prefers-color-scheme: light);
-@import "chroma-relearn-dark.css?1724869793" screen and (prefers-color-scheme: dark);
+@import "chroma-relearn-light.css?1725059400" screen and (prefers-color-scheme: light);
+@import "chroma-relearn-dark.css?1725059400" screen and (prefers-color-scheme: dark);

docs/public/css/format-print.css

@@ -1,5 +1,5 @@
-@import "theme-relearn-light.css?1724869793";
-@import "chroma-relearn-light.css?1724869793";
+@import "theme-relearn-light.css?1725059400";
+@import "chroma-relearn-light.css?1725059400";
 
 #R-sidebar {
     display: none;

docs/public/css/print.css

@@ -1 +1 @@
-@import "format-print.css?1724869793";
+@import "format-print.css?1725059400";

docs/public/css/swagger.css

@@ -1,7 +1,7 @@
 /* Styles to make Swagger-UI fit into our theme */
 
-@import "fonts.css?1724869793";
-@import "variables.css?1724869793";
+@import "fonts.css?1725059400";
+@import "variables.css?1725059400";
 
 body{
     line-height: 1.574;

docs/public/css/theme-auto.css

@@ -1,2 +1,2 @@
-@import "theme-relearn-light.css?1724869793" screen and (prefers-color-scheme: light);
-@import "theme-relearn-dark.css?1724869793" screen and (prefers-color-scheme: dark);
+@import "theme-relearn-light.css?1725059400" screen and (prefers-color-scheme: light);
+@import "theme-relearn-dark.css?1725059400" screen and (prefers-color-scheme: dark);

docs/public/css/variant.css

@@ -1,4 +1,4 @@
-@import "variables.css?1724869793";
+@import "variables.css?1725059400";
 
 html {
     color-scheme: only var(--INTERNAL-BROWSER-theme);