From e381fa1feded7f0391def51889813f118613e375 Mon Sep 17 00:00:00 2001 From: enisn Date: Mon, 6 Jan 2025 11:58:33 +0300 Subject: [PATCH 1/6] Add MauiBlazor to layered tutorial --- docs/en/tutorials/todo/layered/index.md | 26 ++++++++++++++----------- 1 file changed, 15 insertions(+), 11 deletions(-) diff --git a/docs/en/tutorials/todo/layered/index.md b/docs/en/tutorials/todo/layered/index.md index a679bacac5..5ba38380f3 100644 --- a/docs/en/tutorials/todo/layered/index.md +++ b/docs/en/tutorials/todo/layered/index.md @@ -3,7 +3,7 @@ ````json //[doc-params] { - "UI": ["MVC", "Blazor", "BlazorServer", "BlazorWebApp" ,"NG"], + "UI": ["MVC", "Blazor", "BlazorServer", "BlazorWebApp" ,"NG", "MAUIBlazor"], "DB": ["EF", "Mongo"] } ```` @@ -74,7 +74,7 @@ dotnet tool install -g Volo.Abp.Studio.Cli Create an empty folder, open a command-line terminal and execute the following command in the terminal: ````bash -abp new TodoApp{{if UI=="Blazor"}} -u blazor{{else if UI=="BlazorServer"}} -u blazor-server{{else if UI=="BlazorWebApp"}} -u blazor-webapp{{else if UI=="NG"}} -u angular{{end}}{{if DB=="Mongo"}} -d mongodb{{end}} +abp new TodoApp{{if UI=="Blazor"}} -u blazor{{else if UI=="BlazorServer"}} -u blazor-server{{else if UI=="BlazorWebApp"}} -u blazor-webapp{{else if UI=="NG"}} -u angular{{else if UI=="MAUIBlazor"}} -u maui-blazor{{end}}{{if DB=="Mongo"}} -d mongodb{{end}} ```` {{if UI=="NG"}} @@ -113,7 +113,7 @@ abp install-libs > We suggest you install [Yarn v1.22+ (not v2)](https://classic.yarnpkg.com/en/docs/install) to prevent possible package inconsistencies, if you haven't installed it yet. -{{if UI=="Blazor" || UI=="BlazorWebApp"}} +{{if UI=="Blazor" || UI=="BlazorWebApp" || UI=="MAUIBlazor"}} #### Bundling and Minification @@ -136,12 +136,16 @@ abp bundle It is good to run the application before starting the development. Ensure the {{if UI=="BlazorServer"}}`TodoApp.Blazor`{{else}}`TodoApp.Web`{{end}} project is the startup project, then run the application (Ctrl+F5 in Visual Studio) to see the initial UI: -{{else if UI=="Blazor"}} +{{else if UI=="Blazor" || UI=="MAUIBlazor"}} It is good to run the application before starting the development. The solution has two main applications; * `TodoApp.HttpApi.Host` hosts the server-side HTTP API. +{{if UI=="Blazor"}} * `TodoApp.Blazor` is the client-side Blazor WebAssembly application. +{{else if UI=="MAUIBlazor"}} +* `TodoApp.MauiBlazor` is the MAUI Blazor application. +{{end}} Ensure the `TodoApp.HttpApi.Host` project is the startup project, then run the application (Ctrl+F5 in Visual Studio) to see the server-side HTTP API on the [Swagger UI](https://swagger.io/tools/swagger-ui/): @@ -253,7 +257,7 @@ You can apply changes to the database using the following command, in the same c dotnet ef database update ```` -> If you are using Visual Studio, you may want to use the `Add-Migration Added_TodoItem` and `Update-Database` commands in the *Package Manager Console (PMC)*. In this case, ensure that {{if UI=="MVC"}}`TodoApp.Web`{{else if UI=="BlazorServer" || UI=="Blazor" || UI=="BlazorWebApp"}}`TodoApp.Blazor`{{else if UI=="Blazor" || UI=="NG"}}`TodoApp.HttpApi.Host`{{end}} is the startup project and `TodoApp.EntityFrameworkCore` is the *Default Project* in PMC. +> If you are using Visual Studio, you may want to use the `Add-Migration Added_TodoItem` and `Update-Database` commands in the *Package Manager Console (PMC)*. In this case, ensure that {{if UI=="MVC"}}`TodoApp.Web`{{else if UI=="BlazorServer" || UI=="Blazor" || UI=="BlazorWebApp"}}`TodoApp.Blazor`{{else if UI=="Blazor" || UI=="NG" || UI=="MAUIBlazor"}}`TodoApp.HttpApi.Host`{{end}} is the startup project and `TodoApp.EntityFrameworkCore` is the *Default Project* in PMC. {{else if DB=="Mongo"}} @@ -582,11 +586,11 @@ If you open the [Swagger UI](https://swagger.io/tools/swagger-ui/) by entering t ![todo-api](../images/todo-api.png) -{{else if UI=="Blazor" || UI=="BlazorServer" || UI=="BlazorWebApp"}} +{{else if UI=="Blazor" || UI=="BlazorServer" || UI=="BlazorWebApp" || UI=="MAUIBlazor"}} ### Index.razor.cs -Open the `Index.razor.cs` file in the `Pages` folder of the {{if UI=="Blazor" || UI=="BlazorWebApp"}} *TodoApp.Blazor.Client* {{else}}*TodoApp.Blazor*{{end}} project and replace the content with the following code block: +Open the `Index.razor.cs` file in the `Pages` folder of the {{if UI=="Blazor" || UI=="BlazorWebApp"}} *TodoApp.Blazor.Client* {{else if UI=="BlazorServer"}} *TodoApp.Blazor* {{else if UI=="MAUIBlazor"}} *TodoApp.MauiBlazor* {{end}} project and replace the content with the following code block: ```csharp using Microsoft.AspNetCore.Components; @@ -627,7 +631,7 @@ namespace TodoApp.Blazor.Pages This class uses `ITodoAppService` to perform operations for the todo items. It manipulates the `TodoItems` list after create and delete operations. This way, we don't need to refresh the whole todo list from the server. -{{if UI=="Blazor"}} +{{if UI=="Blazor" || UI=="MAUIBlazor"}} See the *Dynamic C# Proxies & Auto API Controllers* section below to learn how we could inject and use the application service interface from the Blazor application which is running on the browser! But now, let's continue and complete the application. @@ -635,7 +639,7 @@ See the *Dynamic C# Proxies & Auto API Controllers* section below to learn how w ### Index.razor -Open the `Index.razor` file in the `Pages` folder of the {{if UI=="Blazor" || UI=="BlazorWebApp"}} *TodoApp.Blazor.Client* {{else}} *TodoApp.Blazor* {{end}} project and replace the content with the following code block: +Open the `Index.razor` file in the `Pages` folder of the {{if UI=="Blazor" || UI=="BlazorWebApp"}} *TodoApp.Blazor.Client* {{else if UI=="BlazorServer"}} *TodoApp.Blazor* {{else if UI=="MAUIBlazor"}} *TodoApp.MauiBlazor* {{end}} project and replace the content with the following code block: ```xml @page "/" @@ -677,7 +681,7 @@ Open the `Index.razor` file in the `Pages` folder of the {{if UI=="Blazor" || UI ### Index.razor.css -As the final touch, open the `Index.razor.css` file in the `Pages` folder of the {{if UI=="Blazor" || UI=="BlazorWebApp"}}*TodoApp.Blazor.Client*{{else}}*TodoApp.Blazor*{{end}} project and replace it with the following content: +As the final touch, open the `Index.razor.css` file in the `Pages` folder of the {{if UI=="Blazor" || UI=="BlazorWebApp"}}*TodoApp.Blazor.Client*{{else if UI=="BlazorServer"}} *TodoApp.Blazor* {{else if UI=="MAUIBlazor"}} *TodoApp.MauiBlazor* {{end}} project and replace it with the following content: ```css #TodoList{ @@ -710,7 +714,7 @@ This is a simple styling for the todo page. We believe that you can do much bett Now, you can run the application again to see the result. -{{if UI=="Blazor"}} +{{if UI=="Blazor" || UI=="MAUIBlazor"}} ### Dynamic C# Proxies & Auto API Controllers From 58192ce9c460d162afe47340fdbc3489f57599d8 Mon Sep 17 00:00:00 2001 From: enisn Date: Mon, 6 Jan 2025 13:32:35 +0300 Subject: [PATCH 2/6] Add missing MAUIBlazor parameter to the tutorial overview --- docs/en/tutorials/book-store/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/tutorials/book-store/index.md b/docs/en/tutorials/book-store/index.md index c3161d2331..178aa75214 100644 --- a/docs/en/tutorials/book-store/index.md +++ b/docs/en/tutorials/book-store/index.md @@ -2,7 +2,7 @@ ````json //[doc-params] { - "UI": ["MVC","Blazor","BlazorServer","NG"], + "UI": ["MVC","Blazor","BlazorServer","NG", "MAUIBlazor"], "DB": ["EF","Mongo"] } ```` From f1a365f359ef88f9e8117ca22fa44696bdc45b81 Mon Sep 17 00:00:00 2001 From: enisn Date: Mon, 6 Jan 2025 13:40:35 +0300 Subject: [PATCH 3/6] Add basic-theme index page --- docs/en/ui-themes/basic-theme/index.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/docs/en/ui-themes/basic-theme/index.md b/docs/en/ui-themes/basic-theme/index.md index 20a24dae8d..f1d1a3d39c 100644 --- a/docs/en/ui-themes/basic-theme/index.md +++ b/docs/en/ui-themes/basic-theme/index.md @@ -1 +1,17 @@ -Read this document [here](../../framework/ui/mvc-razor-pages/basic-theme.md). +# Basic Theme + +The Basic Theme is a minimalist theme that doesn't add any styling on top of the plain [Bootstrap](https://getbootstrap.com/) styles. You can take the Basic Theme as the base theme and build your own theme or styling on top of it. Here, a screenshot from the theme: + +![basic-theme-application-layout](../../images/basic-theme-application-layout.png) + + +See the [Theming document](../../framework/ui/mvc-razor-pages/theming.md) to learn about themes. + +## User Interfaces + +The Basic Theme has implementation for the following UI types: + +- [MVC UI](../../framework/ui/mvc-razor-pages/basic-theme.md) +- [Blazor UI](../../framework/ui/blazor/basic-theme.md) +- [Angular UI](../../framework/ui/angular/basic-theme.md) + From e855478e313b18e567af70e204018bc6d04c4aa5 Mon Sep 17 00:00:00 2001 From: enisn Date: Mon, 6 Jan 2025 13:40:47 +0300 Subject: [PATCH 4/6] Add LeptonX Lite theme to documentation navigation --- docs/en/docs-nav.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index 401f6f7aa5..5ada828a1a 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -1179,6 +1179,10 @@ "text": "The Basic Theme", "path": "framework/ui/mvc-razor-pages/basic-theme.md" }, + { + "text": "LeptonX Lite", + "path": "ui-themes/lepton-x-lite/mvc.md" + }, { "text": "LeptonX", "path": "ui-themes/lepton-x/mvc.md" From f465bca7641a4325e2d681cb250e58c511b4c79c Mon Sep 17 00:00:00 2001 From: enisn Date: Mon, 6 Jan 2025 13:44:02 +0300 Subject: [PATCH 5/6] Update docs-nav.json --- docs/en/docs-nav.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index 5ada828a1a..cbb978f64f 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -1181,7 +1181,7 @@ }, { "text": "LeptonX Lite", - "path": "ui-themes/lepton-x-lite/mvc.md" + "path": "ui-themes/lepton-x-lite/index.md" }, { "text": "LeptonX", From 0aac484dad3308dbbacc81dd8551e6b4cfa3a230 Mon Sep 17 00:00:00 2001 From: enisn Date: Mon, 6 Jan 2025 13:46:11 +0300 Subject: [PATCH 6/6] Update docs-nav.json --- docs/en/docs-nav.json | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index cbb978f64f..4c2ea857b5 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -1181,7 +1181,7 @@ }, { "text": "LeptonX Lite", - "path": "ui-themes/lepton-x-lite/index.md" + "path": "ui-themes/lepton-x-lite/mvc.md" }, { "text": "LeptonX", @@ -2319,6 +2319,10 @@ "text": "The Basic Theme", "path": "ui-themes/basic-theme" }, + { + "text": "LeptonX Lite", + "path": "ui-themes/lepton-x-lite" + }, { "text": "LeptonX Theme", "path": "ui-themes/lepton-x"