From 218e4f51e51460817b1e79b664a940c96aac7865 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= Date: Fri, 9 Oct 2020 15:51:08 +0300 Subject: [PATCH 1/3] Documented ABP JS notify API --- docs/en/UI/AspNetCore/JavaScript-API/Index.md | 2 +- .../en/UI/AspNetCore/JavaScript-API/Notify.md | 45 ++++++++++++++++++ docs/en/images/js-notify-success.png | Bin 0 -> 17149 bytes 3 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 docs/en/UI/AspNetCore/JavaScript-API/Notify.md create mode 100644 docs/en/images/js-notify-success.png diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Index.md b/docs/en/UI/AspNetCore/JavaScript-API/Index.md index 6b244db1ff..d37f8c907f 100644 --- a/docs/en/UI/AspNetCore/JavaScript-API/Index.md +++ b/docs/en/UI/AspNetCore/JavaScript-API/Index.md @@ -14,7 +14,7 @@ ABP provides a set of JavaScript APIs for ASP.NET Core MVC / Razor Pages applica * abp.log * [abp.message](Message.md) * abp.ModalManager -* abp.notify +* [abp.notify](Notify.md) * abp.security * abp.setting * abp.ui diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Notify.md b/docs/en/UI/AspNetCore/JavaScript-API/Notify.md new file mode 100644 index 0000000000..ba2b0d3de5 --- /dev/null +++ b/docs/en/UI/AspNetCore/JavaScript-API/Notify.md @@ -0,0 +1,45 @@ +# ASP.NET Core MVC / Razor Pages UI: JavaScript Notify API + +Notify API is used to show toast style, auto disappearing UI notifications to the end user. It is implemented by the [Toastr](https://github.com/CodeSeven/toastr) library by default. + +## Quick Example + +Use `abp.notify.success(...)` function to show a success message: + +````js +abp.notify.success( + 'The product "Acme Atom Re-Arranger" has been successfully deleted.', + 'Deleted the Product' +); +```` + +A notification message is shown at the bottom right of the page: + +![js-message-success](D:/Github/abp/docs/en/images/js-notify-success.png) + +## Notification Types + +There are four types of pre-defined notifications; + +* `abp.notify.success(...)` +* `abp.notify.info(...)` +* `abp.notify.warn(...)` +* `abp.notify.error(...)` + +All of the methods above gets the following parameters; + +* `message`: A message (`string`) to show to the user. +* `title`: An optional title (`string`). +* `options`: Additional options to be passed to the underlying library, to the Toastr by default. + +## Toastr Configuration + +The notification API is implemented by the [Toastr](https://github.com/CodeSeven/toastr) library by default. You can see its own configuration options. + +**Example: Show toast messages on the top right of the page** + +````js +toastr.options.positionClass = 'toast-top-right'; +```` + +> ABP sets this option to `toast-bottom-right` by default. You can override it just as shown above. \ No newline at end of file diff --git a/docs/en/images/js-notify-success.png b/docs/en/images/js-notify-success.png new file mode 100644 index 0000000000000000000000000000000000000000..04489bc7ce3b5f889d29063ba8adc83eda570a76 GIT binary patch literal 17149 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 literal 0 HcmV?d00001 From 077f30c7a749454d12ed98f8817fabd444d9d89a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= Date: Fri, 9 Oct 2020 16:26:00 +0300 Subject: [PATCH 2/3] Intial MVC JS localization document --- docs/en/Localization.md | 99 ++++++++++--------- docs/en/UI/AspNetCore/JavaScript-API/Index.md | 2 +- .../AspNetCore/JavaScript-API/Localization.md | 46 +++++++++ docs/en/UI/Blazor/Localization.md | 3 + 4 files changed, 103 insertions(+), 47 deletions(-) create mode 100644 docs/en/UI/AspNetCore/JavaScript-API/Localization.md create mode 100644 docs/en/UI/Blazor/Localization.md diff --git a/docs/en/Localization.md b/docs/en/Localization.md index 37104a4878..a33dff1779 100644 --- a/docs/en/Localization.md +++ b/docs/en/Localization.md @@ -100,8 +100,6 @@ Configure(options => > The [application startup template](Startup-Templates/Application.md) sets `DefaultResourceType` to the localization resource of the application. -See the *Client Side* section below for a use case. - ### Short Localization Resource Name Localization resources are also available in the client (JavaScript) side. So, setting a short name for the localization resource makes it easy to use localization texts. Example: @@ -156,13 +154,13 @@ services.Configure(options => * If an extension file defines the same localized string, it overrides the string. -## Getting Localized Texts +## Getting the Localized Texts -### Server Side +Getting the localized text is pretty standard. -Getting the localized text on the server side is pretty standard. +### Simplest Usage In A Class -#### Simplest Usage In A Class +Just inject the `IStringLocalizer` service and use it like shown below: ````C# public class MyService @@ -183,9 +181,13 @@ public class MyService ##### Format Arguments -Format arguments can be passed after the localization key. If your message is `Hello {0}, welcome!`, then you can pass the `{0}` argument to the localizer like `_localizer["HelloMessage", "John"]` +Format arguments can be passed after the localization key. If your message is `Hello {0}, welcome!`, then you can pass the `{0}` argument to the localizer like `_localizer["HelloMessage", "John"]`. + +> Refer to the [Microsoft's localization documentation](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization) for details about using the localization. -#### Simplest Usage In A Razor View/Page +### Using In A Razor View/Page + +Use `IHtmlLocalizer` in razor views/pages; ````c# @inject IHtmlLocalizer Localizer @@ -193,54 +195,59 @@ Format arguments can be passed after the localization key. If your message is `H

@Localizer["HelloWorld"]

```` -Refer to the [Microsoft's localization documentation](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization) for details about using localization on the server side. - -### Client Side - -ABP provides JavaScript services to use the same localized texts in the client side. - -#### getResource - -`abp.localization.getResource` function is used to get a localization resource: - -````js -var testResource = abp.localization.getResource('Test'); -```` - -Then you can localize a string based on this resource: +### Special Base Classes -````js -var str = testResource('HelloWorld'); -```` +Some ABP Framework base classes provide a `L` property to use the localizer even easier. -#### localize +**Example: Localize a text in an application service method** -`abp.localization.localize` function is a shortcut where you can both specify the text name and the resource name: +```csharp +using System.Threading.Tasks; +using MyProject.Localization; +using Volo.Abp.Application.Services; -````js -var str = abp.localization.localize('HelloWorld', 'Test'); -```` +namespace MyProject +{ + public class TestAppService : ApplicationService + { + public TestAppService() + { + LocalizationResource = typeof(MyProjectResource); + } -`HelloWorld` is the text to localize, where `Test` is the localization resource name here. + public async Task DoIt() + { + var str = L["HelloWorld"]; + } + } +} +``` -If you don't specify the localization resource name, it uses the default localization resource defined on the `AbpLocalizationOptions` (see the *Default Resource* section above). Example: +When you set the `LocalizationResource` in the constructor, the `ApplicationService` class uses that resource type when you use the `L` property, just like in the `DoIt()` method. -````js -var str = abp.localization.localize('HelloWorld'); //uses the default resource -```` +Setting `LocalizationResource` in every application service can be tedious. You can create an abstract base application service class, set it there and derive your application services from that base class. This is already implemented when you create a new project with the [startup templates](Startup-Templates/Application.md). So, you can simply inherit from the base class directly use the `L` property: -##### Format Arguments +```csharp +using System.Threading.Tasks; -If your localized string contains arguments, like `Hello {0}, welcome!`, you can pass arguments to the localization methods. Examples: +namespace MyProject +{ + public class TestAppService : MyProjectAppService + { + public async Task DoIt() + { + var str = L["HelloWorld"]; + } + } +} +``` -````js -var str1 = abp.localization.getResource('Test')('HelloWelcomeMessage', 'John'); -var str2 = abp.localization.localize('HelloWorld', 'Test', 'John'); -```` +The `L` property is also available for some other base classes like `AbpController` and `AbpPageModel`. -Both of the samples above produce the output `Hello John, welcome!`. +## The Client Side -## See Also +See the following documents to learn how to reuse the same localization texts in the JavaScript side; -* [Localization in Angular UI](UI/Angular/Localization.md) -* [Forms & Validation](UI/AspNetCore/Forms-Validation.md) for the ASP.NET Core MVC / Razor Pages UI \ No newline at end of file +* [Localization for the MVC / Razor Pages UI](UI/AspNetCore/JavaScript-API/Localization.md) +* [Localization for the Blazor UI](UI/Blazor/Localization.md) +* [Localization for the Angular UI](UI/Angular/Localization.md) \ No newline at end of file diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Index.md b/docs/en/UI/AspNetCore/JavaScript-API/Index.md index d37f8c907f..bca62835f7 100644 --- a/docs/en/UI/AspNetCore/JavaScript-API/Index.md +++ b/docs/en/UI/AspNetCore/JavaScript-API/Index.md @@ -10,7 +10,7 @@ ABP provides a set of JavaScript APIs for ASP.NET Core MVC / Razor Pages applica * abp.dom * abp.event * abp.features -* abp.localization +* [abp.localization](Localization.md) * abp.log * [abp.message](Message.md) * abp.ModalManager diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Localization.md b/docs/en/UI/AspNetCore/JavaScript-API/Localization.md new file mode 100644 index 0000000000..41e5d02c49 --- /dev/null +++ b/docs/en/UI/AspNetCore/JavaScript-API/Localization.md @@ -0,0 +1,46 @@ +# ASP.NET Core MVC / Razor Pages UI: JavaScript Localization API + +Localization API allows you to reuse the server side localization resources in the client side. + +> This document only explains the JavaScript API. See the [localization document](../../../Localization.md) to understand the ABP localization system. + +## Basic Usage + +`abp.localization.getResource(...)` function is used to get a localization resource: + +````js +var testResource = abp.localization.getResource('Test'); +```` + +Then you can localize a string based on this resource: + +````js +var str = testResource('HelloWorld'); +```` + +`abp.localization.localize(...)` function is a shortcut where you can both specify the text name and the resource name: + +````js +var str = abp.localization.localize('HelloWorld', 'Test'); +```` + +`HelloWorld` is the text to localize, where `Test` is the localization resource name here. + +### Default Localization Resource + +If you don't specify the localization resource name, it uses the **default localization resource** defined on the `AbpLocalizationOptions` (see the *Default Resource* section above). Example: + +````js +var str = abp.localization.localize('HelloWorld'); //uses the default resource +```` + +### Format Arguments + +If your localized string contains arguments, like `Hello {0}, welcome!`, you can pass arguments to the localization methods. Examples: + +````js +var str1 = abp.localization.getResource('Test')('HelloWelcomeMessage', 'John'); +var str2 = abp.localization.localize('HelloWelcomeMessage', 'Test', 'John'); +```` + +Assuming the `HelloWelcomeMessage` is localized as `Hello {0}, welcome!`, both of the samples above produce the output `Hello John, welcome!`. \ No newline at end of file diff --git a/docs/en/UI/Blazor/Localization.md b/docs/en/UI/Blazor/Localization.md new file mode 100644 index 0000000000..e6cf761ce3 --- /dev/null +++ b/docs/en/UI/Blazor/Localization.md @@ -0,0 +1,3 @@ +# Blazor UI: Localization + +Blazor applications can reuse the same `IStringLocalizer` service that is explained in the [localization document](../../Localization.md). All the localization resources and texts available in the server side are usable in the Blazor application. \ No newline at end of file From b10a8d3c1fdf2004c1ba5372682e0ef72c42c27e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Halil=20=C4=B0brahim=20Kalkan?= Date: Fri, 9 Oct 2020 16:49:31 +0300 Subject: [PATCH 3/3] Completed the JS localization API document --- .../AspNetCore/JavaScript-API/Localization.md | 103 +++++++++++++++++- docs/en/docs-nav.json | 4 + 2 files changed, 104 insertions(+), 3 deletions(-) diff --git a/docs/en/UI/AspNetCore/JavaScript-API/Localization.md b/docs/en/UI/AspNetCore/JavaScript-API/Localization.md index 41e5d02c49..0897b99268 100644 --- a/docs/en/UI/AspNetCore/JavaScript-API/Localization.md +++ b/docs/en/UI/AspNetCore/JavaScript-API/Localization.md @@ -26,9 +26,15 @@ var str = abp.localization.localize('HelloWorld', 'Test'); `HelloWorld` is the text to localize, where `Test` is the localization resource name here. +### Fallback Logic + +If given texts was not localized, localization method returns the given key as the localization result. + ### Default Localization Resource -If you don't specify the localization resource name, it uses the **default localization resource** defined on the `AbpLocalizationOptions` (see the *Default Resource* section above). Example: +If you don't specify the localization resource name, it uses the **default localization resource** defined on the `AbpLocalizationOptions` (see the [localization document](../../../Localization.md)). + +**Example: Using the default localization resource** ````js var str = abp.localization.localize('HelloWorld'); //uses the default resource @@ -39,8 +45,99 @@ var str = abp.localization.localize('HelloWorld'); //uses the default resource If your localized string contains arguments, like `Hello {0}, welcome!`, you can pass arguments to the localization methods. Examples: ````js -var str1 = abp.localization.getResource('Test')('HelloWelcomeMessage', 'John'); +var testSource = abp.localization.getResource('Test'); +var str1 = testSource('HelloWelcomeMessage', 'John'); var str2 = abp.localization.localize('HelloWelcomeMessage', 'Test', 'John'); ```` -Assuming the `HelloWelcomeMessage` is localized as `Hello {0}, welcome!`, both of the samples above produce the output `Hello John, welcome!`. \ No newline at end of file +Assuming the `HelloWelcomeMessage` is localized as `Hello {0}, welcome!`, both of the samples above produce the output `Hello John, welcome!`. + +## Other Properties & Methods + +### abp.localization.values + +`abp.localization.values` property stores all the localization resources, keys and their values. + +### abp.localization.isLocalized + +Returns a boolean indicating that if the given text was localized or not. + +**Example** + +````js +abp.localization.isLocalized('ProductName', 'MyResource'); +```` + +Returns `true` if the `ProductName` text was localized for the `MyResource` resource. Otherwise, returns `false`. You can leave the resource name empty to use the default localization resource. + +### abp.localization.defaultResourceName + +`abp.localization.defaultResourceName` can be set to change the default localization resource. You normally don't set this since the ABP Framework automatically sets is based on the server side configuration. + +### abp.localization.currentCulture + +`abp.localization.currentCulture` returns an object to get information about the **currently selected language**. + +An example value of this object is shown below: + +````js +{ + "displayName": "English", + "englishName": "English", + "threeLetterIsoLanguageName": "eng", + "twoLetterIsoLanguageName": "en", + "isRightToLeft": false, + "cultureName": "en", + "name": "en", + "nativeName": "English", + "dateTimeFormat": { + "calendarAlgorithmType": "SolarCalendar", + "dateTimeFormatLong": "dddd, MMMM d, yyyy", + "shortDatePattern": "M/d/yyyy", + "fullDateTimePattern": "dddd, MMMM d, yyyy h:mm:ss tt", + "dateSeparator": "/", + "shortTimePattern": "h:mm tt", + "longTimePattern": "h:mm:ss tt" + } +} +```` + +### abp.localization.languages + +Used to get list of all **available languages** in the application. An example value of this object is shown below: + +````js +[ + { + "cultureName": "en", + "uiCultureName": "en", + "displayName": "English", + "flagIcon": null + }, + { + "cultureName": "fr", + "uiCultureName": "fr", + "displayName": "Français", + "flagIcon": null + }, + { + "cultureName": "pt-BR", + "uiCultureName": "pt-BR", + "displayName": "Português", + "flagIcon": null + }, + { + "cultureName": "tr", + "uiCultureName": "tr", + "displayName": "Türkçe", + "flagIcon": null + }, + { + "cultureName": "zh-Hans", + "uiCultureName": "zh-Hans", + "displayName": "简体中文", + "flagIcon": null + } +] +```` + diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index 2e7a918cc6..40cf34d8f3 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -447,6 +447,10 @@ "text": "Overall", "path": "UI/AspNetCore/JavaScript-API/Index.md" }, + { + "text": "Localization", + "path": "UI/AspNetCore/JavaScript-API/Localization.md" + }, { "text": "AJAX", "path": "UI/AspNetCore/JavaScript-API/Ajax.md"