From 67b3d58ab9fe3ba622ffc0b91f7d580ad1c9d904 Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Mon, 9 May 2022 11:39:55 +0300 Subject: [PATCH 01/14] Separate Blazor WASM & Server for Blazor\Basic-Theme.md --- docs/en/UI/Blazor/Basic-Theme.md | 75 +++++++++++++++++++++++++++++--- 1 file changed, 69 insertions(+), 6 deletions(-) diff --git a/docs/en/UI/Blazor/Basic-Theme.md b/docs/en/UI/Blazor/Basic-Theme.md index 2c034f258a..b4eb1c4f92 100644 --- a/docs/en/UI/Blazor/Basic-Theme.md +++ b/docs/en/UI/Blazor/Basic-Theme.md @@ -1,5 +1,12 @@ # Blazor UI: Basic Theme +````json +//[doc-params] +{ + "UI": ["Blazor", "BlazorServer"] +} +```` + The Basic Theme is a theme implementation for the Blazor UI. It is a minimalist theme that doesn't add any styling on top of the plain [Bootstrap](https://getbootstrap.com/). You can take the Basic Theme as the **base theme** and build your own theme or styling on top of it. See the *Customization* section. > If you are looking for a professional, enterprise ready theme, you can check the [Lepton Theme](https://commercial.abp.io/themes), which is a part of the [ABP Commercial](https://commercial.abp.io/). @@ -10,16 +17,48 @@ The Basic Theme is a theme implementation for the Blazor UI. It is a minimalist **This theme is already installed** when you create a new solution using the [startup templates](../../Startup-Templates/Index.md). If you need to manually install it, follow the steps below: +{{if UI == "Blazor"}} + * Install the [Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) NuGet package to your web project. * Add `AbpAspNetCoreComponentsWebAssemblyBasicThemeModule` into the `[DependsOn(...)]` attribute for your [module class](../../Module-Development-Basics.md) in the your Blazor UI project. * Use `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic.App` as the root component of your application in the `ConfigureServices` method of your module: -````csharp -var builder = context.Services.GetSingletonInstance(); -builder.RootComponents.Add("#ApplicationContainer"); -```` + ```csharp + var builder = context.Services.GetSingletonInstance(); + builder.RootComponents.Add("#ApplicationContainer"); + ``` + `#ApplicationContainer` is a selector (like `
Loading...
`) in the `index.html`. + +* Execute `abp-bundle` command under blazor project once. + +{{end}} + + +{{if UI == "BlazorServer"}} + +* Make sure [AspNetCore Basic Theme](../AspNetCore/Basic-Theme.md) installation steps are completed. + +* Install the [Volo.Abp.AspNetCore.Components.Server.BasicTheme](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.Server.BasicTheme) NuGet package to your web project. + +* Add `AbpAspNetCoreComponentsServerBasicThemeModule` into the `[DependsOn(...)]` attribute for your [module class](../../Module-Development-Basics.md) in the your Blazor UI project. + +* Perform following changes in `Pages/_Host.cshtml` file + * Add usings at the top of the page. + ```html + @using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Bundling + @using Volo.Abp.AspNetCore.Components.Web.BasicTheme.Themes.Basic + ``` + * Add Basic theme style bundled between `` tags. + ```html + + ``` + * Add `App` component of Basic Theme in the body section of page. + ```html + + ``` + +{{end}} -`#ApplicationContainer` is a selector (like `
Loading...
`) in the `index.html`. ## The Layout @@ -52,15 +91,39 @@ See the [Customization / Overriding Components](Customization-Overriding-Compone You can run the following [ABP CLI](../../CLI.md) command in **Blazor WebAssembly** project directory to copy the source code to your solution: + +{{if UI == "Blazor"}} + `abp add-package Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme --with-source-code --add-to-solution-file` Then, navigate to downloaded `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme` project directory and run: `abp add-package Volo.Abp.AspNetCore.Components.Web.BasicTheme --with-source-code --add-to-solution-file` +{{end}} + +{{if UI == "BlazorServer"}} + +`abp add-package Volo.Abp.AspNetCore.Components.Server.BasicTheme --with-source-code --add-to-solution-file` + +Then, navigate to downloaded `Volo.Abp.AspNetCore.Components.Server.BasicTheme` project directory and run: + +`abp add-package Volo.Abp.AspNetCore.Components.Web.BasicTheme --with-source-code --add-to-solution-file` + +{{end}} + ---- -Or, you can download the [source code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) of the Basic Theme, manually copy the project content into your solution, re-arrange the package/module dependencies (see the Installation section above to understand how it was installed to the project) and freely customize the theme based on your application requirements. + +Or, you can download the source code of the Basic Theme, manually copy the project content into your solution, re-arrange the package/module dependencies (see the Installation section above to understand how it was installed to the project) and freely customize the theme based on your application requirements. + +{{if UI == "Blazor"}} +- [Basic Theme Source Code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) +{{end}} + +{{if UI == "BlazorServer"}} +- [Basic Theme Source Code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Server.BasicTheme) +{{end}} ## See Also From 927eeddafb700c0053f92352835745cd1c201c69 Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Mon, 9 May 2022 11:45:11 +0300 Subject: [PATCH 02/14] Fix typo in Blazor\Basic-Theme.md --- docs/en/UI/Blazor/Basic-Theme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/UI/Blazor/Basic-Theme.md b/docs/en/UI/Blazor/Basic-Theme.md index b4eb1c4f92..a4434aed44 100644 --- a/docs/en/UI/Blazor/Basic-Theme.md +++ b/docs/en/UI/Blazor/Basic-Theme.md @@ -48,7 +48,7 @@ The Basic Theme is a theme implementation for the Blazor UI. It is a minimalist @using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Bundling @using Volo.Abp.AspNetCore.Components.Web.BasicTheme.Themes.Basic ``` - * Add Basic theme style bundled between `` tags. + * Add Basic theme style bundles between `` tags. ```html ``` From 6403ab57c254cc74487cd6b2650eeca5754a27b3 Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Mon, 9 May 2022 11:46:18 +0300 Subject: [PATCH 03/14] Remove multiple blank lines in Blazor\Basic-Theme.md --- docs/en/UI/Blazor/Basic-Theme.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/en/UI/Blazor/Basic-Theme.md b/docs/en/UI/Blazor/Basic-Theme.md index a4434aed44..4fb4d7bbaa 100644 --- a/docs/en/UI/Blazor/Basic-Theme.md +++ b/docs/en/UI/Blazor/Basic-Theme.md @@ -33,7 +33,6 @@ The Basic Theme is a theme implementation for the Blazor UI. It is a minimalist {{end}} - {{if UI == "BlazorServer"}} * Make sure [AspNetCore Basic Theme](../AspNetCore/Basic-Theme.md) installation steps are completed. @@ -59,7 +58,6 @@ The Basic Theme is a theme implementation for the Blazor UI. It is a minimalist {{end}} - ## The Layout ![basic-theme-application-layout](../../images/basic-theme-application-layout.png) @@ -91,7 +89,6 @@ See the [Customization / Overriding Components](Customization-Overriding-Compone You can run the following [ABP CLI](../../CLI.md) command in **Blazor WebAssembly** project directory to copy the source code to your solution: - {{if UI == "Blazor"}} `abp add-package Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme --with-source-code --add-to-solution-file` @@ -114,7 +111,6 @@ Then, navigate to downloaded `Volo.Abp.AspNetCore.Components.Server.BasicTheme` ---- - Or, you can download the source code of the Basic Theme, manually copy the project content into your solution, re-arrange the package/module dependencies (see the Installation section above to understand how it was installed to the project) and freely customize the theme based on your application requirements. {{if UI == "Blazor"}} From f224b5594f305e8ada0b5c1985856ca1ddd8d1e9 Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Mon, 9 May 2022 14:54:09 +0300 Subject: [PATCH 04/14] Update Theming.md --- docs/en/UI/Blazor/Theming.md | 57 ++++++++++++++++++++++++++++++++++-- 1 file changed, 55 insertions(+), 2 deletions(-) diff --git a/docs/en/UI/Blazor/Theming.md b/docs/en/UI/Blazor/Theming.md index 067052e322..6cb0f0c66b 100644 --- a/docs/en/UI/Blazor/Theming.md +++ b/docs/en/UI/Blazor/Theming.md @@ -1,5 +1,12 @@ # Blazor UI: Theming +````json +//[doc-params] +{ + "UI": ["Blazor", "BlazorServer"] +} +```` + ## Introduction ABP Framework provides a complete **UI Theming** system with the following goals: @@ -25,8 +32,18 @@ Currently, two themes are **officially provided**: ### The Base Libraries +{{if UI == "Blazor"}} + All the themes must depend on the [Volo.Abp.AspNetCore.Components.WebAssembly.Theming](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.WebAssembly.Theming) NuGet package, so they are indirectly depending on the following libraries: +{{end}} + +{{if UI == "BlazorServer"}} + +All the themes must depend on the [Volo.Abp.AspNetCore.Components.Server.Theming](https://www.nuget.org/packages/Volo.Abp.AspNetCore.Components.Server.Theming) NuGet package, so they are indirectly depending on the following libraries: + +{{end}} + * [Twitter Bootstrap](https://getbootstrap.com/) as the fundamental HTML/CSS framework. * [Blazorise](https://github.com/stsrki/Blazorise) as a component library that supports the Bootstrap and adds extra components like Data Grid and Tree. * [FontAwesome](https://fontawesome.com/) as the fundamental CSS font library. @@ -61,9 +78,17 @@ The application layout typically includes the following parts; A theme is simply a Razor Class Library. -### The Easy Way +### The Easiest Way + +The easiest way to create a new theme is copying the [Basic Theme Source Code](https://github.com/abpframework/abp/tree/dev/modules/basic-theme) and customizing it. -The easiest way to create a new theme is to copy the [Basic Theme Source Code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme) and customize it. Once you get a copy of the theme in your solution, remove the `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme` NuGet package and reference to the local project. +{{if UI == "Blazor"}} +Once you get a copy of the theme in your solution, remove the `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme` NuGet package and reference to the local project. +{{end}} + +{{if UI == "BlazorServer"}} +Once you get a copy of the theme in your solution, remove `Volo.Abp.AspNetCore.Components.Server.BasicTheme` and `Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic` NuGet packages and add references to local projects. +{{end}} ### Global Styles / Scripts @@ -165,6 +190,9 @@ Configure(options => Language Selection toolbar item is generally a dropdown that is used to switch between languages. `ILanguageProvider` is used to get the list of available languages and `CultureInfo.CurrentUICulture` is used to learn the current language. + +{{if UI == "Blazor"}} + Local Storage is used to get and set the current language with the `Abp.SelectedLanguage` key. **Example: Get the currently selected language** @@ -192,6 +220,31 @@ The theme should reload the page after changing the language: await JsRuntime.InvokeVoidAsync("location.reload"); ```` +{{end}} + +{{if UI == "BlazorServer"}} +Localization works on Server side in Blazor Server. So, regular AspNetCore localization middleware is used. + +**Example: Get the currently selected language** + +````csharp +var selectedLanguageName = CultureInfo.CurrentCulture.Name; +```` + +**Example: Set the selected language** + +````csharp +// Get current url. +var relativeUrl = NavigationManager.Uri.RemovePreFix(NavigationManager.BaseUri).EnsureStartsWith('/'); + +// Redirect to ABP language switch endpoint. +NavigationManager.NavigateTo( + $"/Abp/Languages/Switch?culture={newLanguage.CultureName}&uiCulture={newLanguage.UiCultureName}&returnUrl={relativeUrl}", + forceLoad: true +); +```` +{{end}} + ##### User Menu User menu includes links related to the user account. `IMenuManager` is used just like the Main Menu, but this time with `StandardMenus.User` parameter like shown below: From 28bae5913a8fad3b46f292df0e0041849570d773 Mon Sep 17 00:00:00 2001 From: enisn Date: Wed, 11 May 2022 11:02:59 +0300 Subject: [PATCH 05/14] Add LeptonX to available themes in blazor documentation --- docs/en/UI/Blazor/Theming.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/en/UI/Blazor/Theming.md b/docs/en/UI/Blazor/Theming.md index 6cb0f0c66b..83c54c652c 100644 --- a/docs/en/UI/Blazor/Theming.md +++ b/docs/en/UI/Blazor/Theming.md @@ -23,10 +23,11 @@ In order to accomplish these goals, ABP Framework; ### Current Themes -Currently, two themes are **officially provided**: +Currently, three themes are **officially provided**: * The [Basic Theme](Basic-Theme.md) is the minimalist theme with the plain Bootstrap style. It is **open source and free**. * The [Lepton Theme](https://commercial.abp.io/themes) is a **commercial** theme developed by the core ABP team and is a part of the [ABP Commercial](https://commercial.abp.io/) license. +* The [LeptonX Theme](https://x.leptontheme.com/) is a theme that has a [commercial](https://docs.abp.io/en/commercial/latest/themes/lepton-x/commercial/blazor) and a [lite](../../Themes/LeptonXLite/blazor.md) version. ## Overall From f3cffa35c2384ab140ce8c0c875289975a8e1c26 Mon Sep 17 00:00:00 2001 From: enisn Date: Wed, 11 May 2022 11:14:02 +0300 Subject: [PATCH 06/14] Remove namespace and usings since they're different between blazor server and wasm --- docs/en/UI/Blazor/Toolbars.md | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/docs/en/UI/Blazor/Toolbars.md b/docs/en/UI/Blazor/Toolbars.md index b8cca6077a..3ff1b7f135 100644 --- a/docs/en/UI/Blazor/Toolbars.md +++ b/docs/en/UI/Blazor/Toolbars.md @@ -34,23 +34,16 @@ This sample simply shows a message. In real life, you probably want to call an H Now, we can create a class implementing the `IToolbarContributor` interface: ````csharp -using System.Threading.Tasks; -using MyCompanyName.MyProjectName.Blazor.Components; -using Volo.Abp.AspNetCore.Components.WebAssembly.Theming.Toolbars; - -namespace MyCompanyName.MyProjectName.Blazor +public class MyToolbarContributor : IToolbarContributor { - public class MyToolbarContributor : IToolbarContributor + public Task ConfigureToolbarAsync(IToolbarConfigurationContext context) { - public Task ConfigureToolbarAsync(IToolbarConfigurationContext context) + if (context.Toolbar.Name == StandardToolbars.Main) { - if (context.Toolbar.Name == StandardToolbars.Main) - { - context.Toolbar.Items.Insert(0, new ToolbarItem(typeof(Notification))); - } - - return Task.CompletedTask; + context.Toolbar.Items.Insert(0, new ToolbarItem(typeof(Notification))); } + + return Task.CompletedTask; } } ```` From 5e95f95e3a1dd8fc52561ad2469a5e3baa4b84a3 Mon Sep 17 00:00:00 2001 From: enisn Date: Wed, 11 May 2022 11:37:10 +0300 Subject: [PATCH 07/14] Add Blazor Server seperation to the Authentication.md --- docs/en/UI/Blazor/Authentication.md | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/docs/en/UI/Blazor/Authentication.md b/docs/en/UI/Blazor/Authentication.md index 9dc34ebce5..5f18345d7d 100644 --- a/docs/en/UI/Blazor/Authentication.md +++ b/docs/en/UI/Blazor/Authentication.md @@ -1,11 +1,28 @@ # Blazor UI: Authentication -The [application startup template](../../Startup-Templates/Application.md) is properly configured to use OpenId Connect to authenticate the user through the server side login form; +````json +//[doc-params] +{ + "UI": ["Blazor", "BlazorServer"] +} +```` +The [application startup template](../../Startup-Templates/Application.md) is properly configured to use OpenId Connect to authenticate the user; + +{{if UI == "BlazorServer"}} +* When the Blazor application needs to authenticate, it is redirected to the login page built with Razor Pages UI in the same application. +* Users can enter username & password to login if they already have an account. If not, they can use the register form to create a new user. They can also use forgot password and other features. +* Finally, they are redirected back to the Blazor application to complete the login process. + +{{end}} + +{{if UI == "Blazor"}} * When the Blazor application needs to authenticate, it is redirected to the server side. -* Users can enter username & password to login if they already have an account. If not, they can use the register form to create a new user. They can also use forgot password and other features. The server side uses IdentityServer4 to handle the authentication. +* Users can enter username & password to login if they already have an account. If not, they can use the register form to create a new user. They can also use forgot password and other features., + * Finally, they are redirected back to the Blazor application to complete the login process. This is a typical and recommended approach to implement authentication in Single-Page Applications. The client side configuration is done in the startup template, so you can change it. +{{end}} See the [Blazor Security document](https://docs.microsoft.com/en-us/aspnet/core/blazor/security) to understand and customize the authentication process. \ No newline at end of file From c0ae6b1cb59c1228a9f7cdccdc3e1da08ec3755a Mon Sep 17 00:00:00 2001 From: enisn Date: Wed, 11 May 2022 17:27:19 +0300 Subject: [PATCH 08/14] Add Blazor Server seperation to the Error-Handling.md --- docs/en/UI/Blazor/Error-Handling.md | 36 +++++++++++++++++++++++------ 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/docs/en/UI/Blazor/Error-Handling.md b/docs/en/UI/Blazor/Error-Handling.md index 35aff041af..6582ee0c8e 100644 --- a/docs/en/UI/Blazor/Error-Handling.md +++ b/docs/en/UI/Blazor/Error-Handling.md @@ -1,5 +1,12 @@ # Blazor UI: Error Handling +````json +//[doc-params] +{ + "UI": ["Blazor", "BlazorServer"] +} +```` + Blazor, by default, shows a yellow line at the bottom of the page if any unhandled exception occurs. However, this is not useful in a real application. ABP provides an automatic error handling system for the Blazor UI. @@ -20,6 +27,8 @@ There are different type of `Exception` classes handled differently by the ABP F **Example** +{{if UI == "BlazorServer"}} + ````csharp @page "/" @using Volo.Abp @@ -28,13 +37,6 @@ There are different type of `Exception` classes handled differently by the ABP F @code { - //for Blazor WASM - private void TestException() - { - throw new UserFriendlyException("A user friendly error message!"); - } - - //for Blazor Server private async Task TestException() { try @@ -49,6 +51,26 @@ There are different type of `Exception` classes handled differently by the ABP F } ```` +{{end}} + +{{if UI == "Blazor"}} + +````csharp +@page "/" +@using Volo.Abp + + + +@code +{ + private void TestException() + { + throw new UserFriendlyException("A user friendly error message!"); + } +} +```` +{{end}} + ABP automatically handle the exception and show an error message to the user: ![blazor-user-friendly-exception](../../images/blazor-user-friendly-exception.png) From 05cf33798901c0d72768fc7b8ca48393f065b04f Mon Sep 17 00:00:00 2001 From: enisn Date: Wed, 11 May 2022 17:30:50 +0300 Subject: [PATCH 09/14] Add Blazor Server seperation to the Customization-Overriding-Components.md --- .../Customization-Overriding-Components.md | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/docs/en/UI/Blazor/Customization-Overriding-Components.md b/docs/en/UI/Blazor/Customization-Overriding-Components.md index e62e0a0ff4..e288a439b0 100644 --- a/docs/en/UI/Blazor/Customization-Overriding-Components.md +++ b/docs/en/UI/Blazor/Customization-Overriding-Components.md @@ -1,5 +1,12 @@ # Blazor UI: Customization / Overriding Components +````json +//[doc-params] +{ + "UI": ["Blazor", "BlazorServer"] +} +```` + This document explains how to override the user interface of a depended [application module](../../Modules/Index.md) or [theme](Theming.md) for Blazor applications. ## Overriding a Razor Component @@ -26,6 +33,30 @@ The next step is to create a razor component, like `MyBranding.razor`, in your a The content of the `MyBranding.razor` is shown below: +{{if UI == "BlazorServer"}} + +````html +@using Volo.Abp.DependencyInjection +@using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic +@inherits Branding +@attribute [ExposeServices(typeof(Branding))] +@attribute [Dependency(ReplaceServices = true)] + + + +```` + +Let's explain the code: + +* `@inherits Branding` line inherits the Branding component defined by the [Basic Theme](Basic-Theme.md) (in the `Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic` namespace). +* `@attribute [ExposeServices(typeof(Branding))]` registers this service (component) to [dependency injection](../../Dependency-Injection.md) for the `Branding` service (component). +* `@attribute [Dependency(ReplaceServices = true)]` replaces the `Branding` class (component) with this new `MyBranding` class (component). +* The rest of the code is related the content and styling of the component. + +{{end}} + +{{if UI == "Blazor"}} + ````html @using Volo.Abp.DependencyInjection @using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic @@ -44,6 +75,8 @@ Let's explain the code: * `@attribute [Dependency(ReplaceServices = true)]` replaces the `Branding` class (component) with this new `MyBranding` class (component). * The rest of the code is related the content and styling of the component. +{{end}} + Now, you can run the application to see the result: ![bookstore-added-logo](../../images/bookstore-added-logo.png) @@ -56,6 +89,17 @@ If you prefer to use code-behind file for the C# code of your component, you can **MyBlazor.razor** +{{if UI == "BlazorServer"}} +````html +@using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic +@inherits Branding + + + +```` +{{end}} + +{{if UI == "Blazor"}} ````html @using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic @inherits Branding @@ -63,8 +107,27 @@ If you prefer to use code-behind file for the C# code of your component, you can ```` +{{end}} **MyBlazor.razor.cs** +{{if UI == "BlazorServer"}} + +````csharp +using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic; +using Volo.Abp.DependencyInjection; + +namespace MyProject.Blazor.Components +{ + [ExposeServices(typeof(Branding))] + [Dependency(ReplaceServices = true)] + public partial class MyBranding + { + + } +} +```` +{{end}} +{{if UI == "Blazor"}} ````csharp using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic; @@ -80,6 +143,7 @@ namespace MyProject.Blazor.Components } } ```` +{{end}} ## Theming From a19018ca98e41b591b27329d6431ed7f7307f32d Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Fri, 20 May 2022 09:26:32 +0300 Subject: [PATCH 10/14] Update BlazorServer authentication section in docs --- docs/en/UI/Blazor/Authentication.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/en/UI/Blazor/Authentication.md b/docs/en/UI/Blazor/Authentication.md index 5f18345d7d..45aafabaf3 100644 --- a/docs/en/UI/Blazor/Authentication.md +++ b/docs/en/UI/Blazor/Authentication.md @@ -10,9 +10,7 @@ The [application startup template](../../Startup-Templates/Application.md) is properly configured to use OpenId Connect to authenticate the user; {{if UI == "BlazorServer"}} -* When the Blazor application needs to authenticate, it is redirected to the login page built with Razor Pages UI in the same application. -* Users can enter username & password to login if they already have an account. If not, they can use the register form to create a new user. They can also use forgot password and other features. -* Finally, they are redirected back to the Blazor application to complete the login process. +The Blazor Server application UI is actually a hybrid application that is combined with the MVC UI, and uses the login page provided by the MVC UI. When users enter a page that requires login, they are redirected to the `/Account/Login` page. Once they complete the login process, they are returned back to the application's UI. The login page also contains features like registration, password recovery, etc. {{end}} From eef4000a0397f5ce14c07aaf3d6a668af91597bc Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Fri, 20 May 2022 09:27:45 +0300 Subject: [PATCH 11/14] Move Blazor Security document section to wasm --- docs/en/UI/Blazor/Authentication.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/en/UI/Blazor/Authentication.md b/docs/en/UI/Blazor/Authentication.md index 45aafabaf3..eb39e05c6b 100644 --- a/docs/en/UI/Blazor/Authentication.md +++ b/docs/en/UI/Blazor/Authentication.md @@ -21,6 +21,8 @@ The Blazor Server application UI is actually a hybrid application that is combin * Finally, they are redirected back to the Blazor application to complete the login process. This is a typical and recommended approach to implement authentication in Single-Page Applications. The client side configuration is done in the startup template, so you can change it. -{{end}} -See the [Blazor Security document](https://docs.microsoft.com/en-us/aspnet/core/blazor/security) to understand and customize the authentication process. \ No newline at end of file + +See the [Blazor Security document](https://docs.microsoft.com/en-us/aspnet/core/blazor/security) to understand and customize the authentication process. + +{{end}} \ No newline at end of file From 2056b2753d2a76159fd83f98ce86c2b3463cb1f9 Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Fri, 20 May 2022 09:38:21 +0300 Subject: [PATCH 12/14] Use inline if statements in Customization-Overriding-Components.md --- docs/en/UI/Blazor/Basic-Theme.md | 2 +- .../Customization-Overriding-Components.md | 57 +++---------------- 2 files changed, 10 insertions(+), 49 deletions(-) diff --git a/docs/en/UI/Blazor/Basic-Theme.md b/docs/en/UI/Blazor/Basic-Theme.md index 4fb4d7bbaa..1d2dfb5c11 100644 --- a/docs/en/UI/Blazor/Basic-Theme.md +++ b/docs/en/UI/Blazor/Basic-Theme.md @@ -29,7 +29,7 @@ The Basic Theme is a theme implementation for the Blazor UI. It is a minimalist ``` `#ApplicationContainer` is a selector (like `
Loading...
`) in the `index.html`. -* Execute `abp-bundle` command under blazor project once. +* Execute `abp bundle` command under blazor project once. {{end}} diff --git a/docs/en/UI/Blazor/Customization-Overriding-Components.md b/docs/en/UI/Blazor/Customization-Overriding-Components.md index e288a439b0..7dadc5bb82 100644 --- a/docs/en/UI/Blazor/Customization-Overriding-Components.md +++ b/docs/en/UI/Blazor/Customization-Overriding-Components.md @@ -33,33 +33,16 @@ The next step is to create a razor component, like `MyBranding.razor`, in your a The content of the `MyBranding.razor` is shown below: -{{if UI == "BlazorServer"}} ````html @using Volo.Abp.DependencyInjection +{{if UI == "BlazorServer"}} @using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic -@inherits Branding -@attribute [ExposeServices(typeof(Branding))] -@attribute [Dependency(ReplaceServices = true)] - - - -```` - -Let's explain the code: - -* `@inherits Branding` line inherits the Branding component defined by the [Basic Theme](Basic-Theme.md) (in the `Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic` namespace). -* `@attribute [ExposeServices(typeof(Branding))]` registers this service (component) to [dependency injection](../../Dependency-Injection.md) for the `Branding` service (component). -* `@attribute [Dependency(ReplaceServices = true)]` replaces the `Branding` class (component) with this new `MyBranding` class (component). -* The rest of the code is related the content and styling of the component. - {{end}} - {{if UI == "Blazor"}} - -````html -@using Volo.Abp.DependencyInjection @using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic +{{end}} + @inherits Branding @attribute [ExposeServices(typeof(Branding))] @attribute [Dependency(ReplaceServices = true)] @@ -70,13 +53,11 @@ Let's explain the code: Let's explain the code: -* `@inherits Branding` line inherits the Branding component defined by the [Basic Theme](Basic-Theme.md) (in the `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic` namespace). +* `@inherits Branding` line inherits the Branding component defined by the [Basic Theme](Basic-Theme.md) (in the {{if UI == "BlazorServer"}}`Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic`{{end}} {{if UI == "Blazor"}}`Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic`{{end}} namespace). * `@attribute [ExposeServices(typeof(Branding))]` registers this service (component) to [dependency injection](../../Dependency-Injection.md) for the `Branding` service (component). * `@attribute [Dependency(ReplaceServices = true)]` replaces the `Branding` class (component) with this new `MyBranding` class (component). * The rest of the code is related the content and styling of the component. -{{end}} - Now, you can run the application to see the result: ![bookstore-added-logo](../../images/bookstore-added-logo.png) @@ -89,48 +70,29 @@ If you prefer to use code-behind file for the C# code of your component, you can **MyBlazor.razor** -{{if UI == "BlazorServer"}} ````html +{{if UI == "BlazorServer"}} @using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic -@inherits Branding - - - -```` {{end}} - {{if UI == "Blazor"}} -````html @using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic +{{end}} @inherits Branding ```` -{{end}} **MyBlazor.razor.cs** -{{if UI == "BlazorServer"}} ````csharp +{{if UI == "BlazorServer"}} using Volo.Abp.AspNetCore.Components.Server.BasicTheme.Themes.Basic; -using Volo.Abp.DependencyInjection; - -namespace MyProject.Blazor.Components -{ - [ExposeServices(typeof(Branding))] - [Dependency(ReplaceServices = true)] - public partial class MyBranding - { - - } -} -```` {{end}} {{if UI == "Blazor"}} - -````csharp using Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.Themes.Basic; +{{end}} + using Volo.Abp.DependencyInjection; namespace MyProject.Blazor.Components @@ -143,7 +105,6 @@ namespace MyProject.Blazor.Components } } ```` -{{end}} ## Theming From dbd9194c82cd3dd501708020e4bd26d772d0cca5 Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Fri, 20 May 2022 09:47:17 +0300 Subject: [PATCH 13/14] Update theme source-code adding with CLI usage --- docs/en/UI/AspNetCore/Theming.md | 8 ++++++-- docs/en/UI/Blazor/Theming.md | 10 +++++++--- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/docs/en/UI/AspNetCore/Theming.md b/docs/en/UI/AspNetCore/Theming.md index 6a378cd29a..fd2e7312de 100644 --- a/docs/en/UI/AspNetCore/Theming.md +++ b/docs/en/UI/AspNetCore/Theming.md @@ -122,9 +122,13 @@ The empty layout provides an empty page. It typically includes the following par ## Implementing a Theme -### The Easy Way +### The Easiest Way -The easiest way to create a new theme is to copy the [Basic Theme Source Code](https://github.com/abpframework/abp/blob/dev/modules/basic-theme/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic) and customize it. Once you get a copy of the theme in your solution, remove the `Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic` NuGet package and reference to the local project. +The easiest way of creating a new theme is adding [Basic Theme Source Code](https://github.com/abpframework/abp/tree/dev/modules/basic-theme) module with source codes and customizing it. + +```bash +abp add-package Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic --with-source-code --add-to-solution-file +``` ### The ITheme Interface diff --git a/docs/en/UI/Blazor/Theming.md b/docs/en/UI/Blazor/Theming.md index 83c54c652c..1b4a35c2e4 100644 --- a/docs/en/UI/Blazor/Theming.md +++ b/docs/en/UI/Blazor/Theming.md @@ -81,14 +81,18 @@ A theme is simply a Razor Class Library. ### The Easiest Way -The easiest way to create a new theme is copying the [Basic Theme Source Code](https://github.com/abpframework/abp/tree/dev/modules/basic-theme) and customizing it. +The easiest way to create a new theme is adding [Basic Theme Source Code](https://github.com/abpframework/abp/tree/dev/modules/basic-theme) module with source codes and customizing it. {{if UI == "Blazor"}} -Once you get a copy of the theme in your solution, remove the `Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme` NuGet package and reference to the local project. +```bash +abp add-package Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme --with-source-code --add-to-solution-file +``` {{end}} {{if UI == "BlazorServer"}} -Once you get a copy of the theme in your solution, remove `Volo.Abp.AspNetCore.Components.Server.BasicTheme` and `Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic` NuGet packages and add references to local projects. +```bash +abp add-package Volo.Abp.AspNetCore.Components.Server.BasicTheme --with-source-code --add-to-solution-file +``` {{end}} ### Global Styles / Scripts From 51871de100c80bc149f682fbf2a4380a31e11190 Mon Sep 17 00:00:00 2001 From: Enis Necipoglu Date: Fri, 20 May 2022 10:28:16 +0300 Subject: [PATCH 14/14] Update Theming.md --- docs/en/UI/Blazor/Theming.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/UI/Blazor/Theming.md b/docs/en/UI/Blazor/Theming.md index 1b4a35c2e4..c7f92189de 100644 --- a/docs/en/UI/Blazor/Theming.md +++ b/docs/en/UI/Blazor/Theming.md @@ -81,7 +81,7 @@ A theme is simply a Razor Class Library. ### The Easiest Way -The easiest way to create a new theme is adding [Basic Theme Source Code](https://github.com/abpframework/abp/tree/dev/modules/basic-theme) module with source codes and customizing it. +The easiest way of creating a new theme is adding [Basic Theme Source Code](https://github.com/abpframework/abp/tree/dev/modules/basic-theme) module with source codes and customizing it. {{if UI == "Blazor"}} ```bash