Skip to content

Commit 897987e

Browse files
ismcagdasismcagdas
committed
Merge branch 'dev'
2 parents e055e03 + 53db31e commit 897987e

6 files changed

+218
-7
lines changed

‎docs/en/Adding-New-Localization-Angular.md‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
# How to Add a New Language in an ASP.NET Zero Angular Application
2+
3+
## Introduction
4+
5+
This document provides step-by-step instructions for adding a new localization (language) in your ASP.NET Zero Angular application. Localization allows users to interact with the application in their preferred language, thereby improving usability and accessibility. For more details on localization in ASP.NET Boilerplate, refer to the official documentation: [ASP.NET Boilerplate Localization](https://aspnetboilerplate.com/Pages/Documents/Localization).
6+
7+
## Steps to Add a New Language
8+
9+
### 1. Register the New Language in the Backend
10+
11+
To support a new language in the backend, you need to register it in the `DefaultLanguagesCreator.cs` file located in the `YourProjectName.Core` project.
12+
13+
#### Modify DefaultLanguagesCreator.cs
14+
15+
In this step, you need to add the new language to the list of initial languages registered in the system. This ensures that the application recognizes the new language and makes it available for selection. Modify the `GetInitialLanguages` method to include the new language code, display name, and flag icon.
16+
17+
**DefaultLanguagesCreator.cs**
18+
```c#
19+
public class DefaultLanguagesCreator
20+
{
21+
public static List<ApplicationLanguage> InitialLanguages => GetInitialLanguages();
22+
23+
private readonly AbpZeroTemplateDbContext _context;
24+
25+
private static List<ApplicationLanguage> GetInitialLanguages()
26+
{
27+
var tenantId = AbpZeroTemplateConsts.MultiTenancyEnabled ? null : (int?)1;
28+
return new List<ApplicationLanguage>
29+
{
30+
new ApplicationLanguage(tenantId, "en", "English", "famfamfam-flags us"),
31+
new ApplicationLanguage(tenantId, "pl", "Polski", "famfamfam-flags pl"),
32+
//Other languages
33+
};
34+
}
35+
36+
//...
37+
}
38+
```
39+
40+
In the code above:
41+
42+
- "pl" is the language code for Polish.
43+
- "Polski" is the display name.
44+
- "famfamfam-flags pl" refers to the flag icon for Polish.
45+
46+
#### Create the Localization XML File
47+
48+
The localization XML file contains key-value pairs for translating text within the application. Each language has its own XML file where you define translations for UI elements, messages, and labels.
49+
This file ensures that the application can display content in the selected language. Create a new localization file in the **Localization** folder of the `YourProjectName.Core` project.
50+
51+
**YourProjectName-pl.xml**
52+
```xml
53+
<?xml version="1.0" encoding="utf-8" ?>
54+
<localizationDictionary culture="pl">
55+
<texts>
56+
<text name="HomePage">Strona główna</text>
57+
<text name="Logout">Wyloguj się</text>
58+
<!-- Add other translations here -->
59+
</texts>
60+
</localizationDictionary>
61+
```
62+
63+
### 2. Add Language to Angular
64+
65+
To fully support the new language in the Angular UI, you need to update various localization settings, including date picker localization.
66+
67+
#### Configure Date Localization in ngx-bootstrap
68+
69+
To ensure that the ngx-bootstrap date picker supports the new language, update the `ngx-bootstrap-datepicker-config.service.ts` file. This configuration allows the date picker to display dates in the correct format for the selected language.
70+
71+
**Import the Locale**
72+
73+
Add the new language locale to the imports from `ngx-bootstrap/chronos`:
74+
75+
```javascript
76+
import {
77+
enGbLocale,
78+
plLocale, // Add import for the new language here
79+
//Other locales
80+
} from 'ngx-bootstrap/chronos';
81+
```
82+
83+
**Update the `registerNgxBootstrapDatePickerLocales` Method**
84+
85+
Modify the method to include the new language inside the locales object:
86+
87+
```javascript
88+
static registerNgxBootstrapDatePickerLocales(): Promise<boolean> {
89+
if (abp.localization.currentLanguage.name === 'en') {
90+
return Promise.resolve(true);
91+
}
92+
93+
const locales: { [key: string]: any } = {
94+
'en': enGbLocale,
95+
'pl': plLocale, // Add new language here
96+
//Other languages
97+
};
98+
99+
let localeKey = abp.localization.currentLanguage.name.toLowerCase();
100+
101+
if (locales[localeKey]) {
102+
defineLocale(localeKey, locales[localeKey]);
103+
return Promise.resolve(true);
104+
}
105+
106+
return Promise.reject(`Locale ${localeKey} not found`);
107+
}
108+
```
109+
110+
This method ensures that the correct locale is loaded based on the currently selected language in the application. If the language is not found in the locales object, an error is returned.
111+
112+
### 3. Verify and Test the Localization Changes
113+
After implementing the necessary changes, follow these steps to verify that the new language is properly integrated into the application:
114+
115+
- **Restart the Application**
116+
- Restart both the backend and frontend to ensure that all localization changes take effect.
117+
- **Select the New Language**
118+
- In your app, select the newly added language from the language selection drop-down menu and verify that user interface elements such as menus and labels are updated appropriately.
119+
- **Test Date Localization**
120+
- Open any date pickers and confirm that dates are displayed in the correct format for the selected language.
121+
122+
> Note: The newly added language and its XML content are stored in the database when the application runs.
123+
124+
## Conclusion
125+
By following these steps, you have successfully added support for a new language in your ASP.NET Zero Angular application. The localization process ensures that both backend and frontend components, including UI elements and date pickers, properly reflect the new language.
126+
127+
For more information, refer to the official documentation:
128+
- [ASP.NET Boilerplate Localization](https://aspnetboilerplate.com/Pages/Documents/Localization).
129+
- [ASP.NET Zero Language Management](https://aspnetboilerplate.com/Pages/Documents/Zero/Language-Management).

‎docs/en/Adding-New-Localization-Mvc.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# How to Add a New Language in an ASP.NET Zero MVC Application
2+
3+
## Introduction
4+
5+
This document provides step-by-step instructions for adding a new localization (language) in your ASP.NET Zero MVC application. Localization allows users to interact with the application in their preferred language, thereby improving usability and accessibility. For more details on localization in ASP.NET Boilerplate, refer to the official documentation: [ASP.NET Boilerplate Localization](https://aspnetboilerplate.com/Pages/Documents/Localization).
6+
7+
## Steps to Add a New Language
8+
9+
### 1. Register the New Language in the Backend
10+
11+
To support a new language in the backend, you need to register it in the `DefaultLanguagesCreator.cs` file located in the `YourProjectName.Core` project.
12+
13+
#### Modify DefaultLanguagesCreator.cs
14+
15+
In this step, you need to add the new language to the list of initial languages registered in the system. This ensures that the application recognizes the new language and makes it available for selection. Modify the `GetInitialLanguages` method to include the new language code, display name, and flag icon.
16+
17+
**DefaultLanguagesCreator.cs**
18+
```c#
19+
public class DefaultLanguagesCreator
20+
{
21+
public static List<ApplicationLanguage> InitialLanguages => GetInitialLanguages();
22+
23+
private readonly AbpZeroTemplateDbContext _context;
24+
25+
private static List<ApplicationLanguage> GetInitialLanguages()
26+
{
27+
var tenantId = AbpZeroTemplateConsts.MultiTenancyEnabled ? null : (int?)1;
28+
return new List<ApplicationLanguage>
29+
{
30+
new ApplicationLanguage(tenantId, "en", "English", "famfamfam-flags us"),
31+
new ApplicationLanguage(tenantId, "pl", "Polski", "famfamfam-flags pl"),
32+
////Other languages
33+
};
34+
}
35+
36+
//...
37+
}
38+
```
39+
40+
In the code above:
41+
42+
- "pl" is the language code for Polish.
43+
- "Polski" is the display name.
44+
- "famfamfam-flags pl" refers to the flag icon for Polish.
45+
46+
#### Create the Localization XML File
47+
48+
The localization XML file contains key-value pairs for translating text within the application. Each language has its own XML file where you define translations for UI elements, messages, and labels. This file ensures that the application can display content in the selected language. Create a new localization file in the **Localization** folder of the `YourProjectName.Core` project.
49+
50+
**YourProjectName-pl.xml**
51+
```xml
52+
<?xml version="1.0" encoding="utf-8" ?>
53+
<localizationDictionary culture="pl">
54+
<texts>
55+
<text name="HomePage">Strona główna</text>
56+
<text name="Logout">Wyloguj się</text>
57+
<!-- Add other translations here -->
58+
</texts>
59+
</localizationDictionary>
60+
```
61+
62+
### 2. Verify and Test the Localization Changes
63+
After implementing the necessary changes, follow these steps to verify that the new language is properly integrated into the application:
64+
65+
- **Restart the Application**
66+
- Restart both the backend and frontend to ensure that all localization changes take effect.
67+
- **Select the New Language**
68+
- In your app, select the newly added language from the language selection drop-down menu and verify that user interface elements such as menus and labels are updated appropriately.
69+
- **Test Date Localization**
70+
- Open any date pickers and confirm that dates are displayed in the correct format for the selected language.
71+
72+
> Note: The newly added language and its XML content are stored in the database when the application runs.
73+
74+
## Conclusion
75+
By following these steps, you have successfully added support for a new language in your ASP.NET Zero MVC application. The localization process ensures that both backend and frontend components, including UI elements and date pickers, properly reflect the new language.
76+
77+
For more information, refer to the official documentation:
78+
- [ASP.NET Boilerplate Localization](https://aspnetboilerplate.com/Pages/Documents/Localization).
79+
- [ASP.NET Zero Language Management](https://aspnetboilerplate.com/Pages/Documents/Zero/Language-Management).

‎docs/en/Features-Angular-Language-Management.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ We can select any language as a **base** (reference) and change **target** langu
1616

1717
**Host** users (if allowed) can edit languages and localized texts. These languages will be default for all tenants for a multi-tenant application. **Tenants** inherit languages and localized texts and can **override** localized texts.
1818

19+
If you want to add a new language, you can review the documentation on [How to Add a New Language in an ASP.NET Zero Angular Application](Adding-New-Localization-Angular)
20+
1921
See [language management](https://aspnetboilerplate.com/Pages/Documents/Zero/Language-Management) and [localization](https://aspnetboilerplate.com/Pages/Documents/Localization) documents for more information.
2022

2123
## Next

‎docs/en/Features-Mvc-Core-Language-Management.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ We can select any language as a **base** (reference) and change **target** langu
1919
Both pages use **LanguageAppService** class as application service. It has methods to manage languages and localized texts. **IApplicationLanguageManager** and **IApplicationLanguageTextManager**
2020
interfaces are used to perform domain logic (as used by LanguageAppService).
2121

22+
If you want to add a new language, you can review the documentation on [How to Add a New Language in an ASP.NET Zero MVC Application](Adding-New-Localization-Mvc)
23+
2224
See [language management](https://aspnetboilerplate.com/Pages/Documents/Zero/Language-Management) and [localization](https://aspnetboilerplate.com/Pages/Documents/Localization) documents for more information.
2325

2426
## Next

‎docs/en/Infrastructure-Angular-Localization.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,15 @@
22

33
ASP.NET Zero **User Interface** is completely localized. ASP.NET Zero uses **dynamic, database based, per-tenant** localization.
44

5-
XML files are used as base translation for desired languages (defined in the [server side](Infrastructure-Core-Mvc-Localization)):
5+
XML files are used as base translations for desired languages (defined in the server-side); for defining and adding new localization, refer to the [How to Add a New Language in an ASP.NET Zero Angular Application](Adding-New-Localization-Angular).
66

77
<img src="images/localization-files-core-1.png" alt="Localization XML files" class="img-thumbnail" />
88

99
PhoneBook will be your ProjectName. You can add more XML files by copying one XML file and translate to desired language. See [valid culture codes](http://www.csharp-examples.net/culture-names/).
1010

11-
When you are adding a new localizable text, add it to the XML file of
12-
the default language then use in your application (Also, add translated
13-
values to corresponding XML files). No need to add it to database
14-
migration code since value in the XML file will be used as default. See
15-
[server side](Infrastructure-Core-Mvc-Localization) documentation for more.
11+
When you are adding a new localizable text, add it to the XML file of the default language then use in your application (Also, add translated
12+
values to corresponding XML files).
13+
14+
**Application languages** are defined in the **DefaultLanguagesCreator** class. This is used as seed data in the Entity Framework Migration. So, if you want to **add a new default language**, just add it into the **DefaultLanguagesCreator** class. This operation ensures that the new language is automatically seeded into the database during migration, making it available to the application at startup. This process occurs on the server side. You can refer to the documentation on [How to Add a New Language in an ASP.NET Zero Angular Application](Adding-New-Localization-Angular) for further guidance.
1615

1716
See [localization](https://aspnetboilerplate.com/Pages/Documents/Localization) and [language management](https://aspnetboilerplate.com/Pages/Documents/Zero/Language-Management) documentations for more information on localization.

‎docs/en/Infrastructure-Core-Mvc-Localization.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@ PhoneBook will be your ProjectName. You can add more XML files by copying one XM
1010

1111
When you are adding a new localizable text, add it to the XML file of the default language then use in your application (Also, add translated values to corresponding XML files). No need to add it to database migration code since value in the XML file will be used as default.
1212

13-
**Application languages** are defined in **DefaultLanguagesCreator** class. This is used as a **seed data** in Entity Framework Migration. So, if you want to **add a new default language**, just add it into DefaultLanguagesCreator class. Also, you should add a corresponding XML file as described above as default translation.
13+
**Application languages** are defined in **DefaultLanguagesCreator** class. This is used as a **seed data** in Entity Framework Migration. So, if you want to **add a new default language**, just add it into **DefaultLanguagesCreator** class. Also, you should add a corresponding XML file as described above as default translation. You can refer to the documentation on [How to Add a New Language in an ASP.NET Zero MVC Application](Adding-New-Localization-Mvc) for further guidance.
1414

1515
See [localization](https://aspnetboilerplate.com/Pages/Documents/Localization) and [language management](https://aspnetboilerplate.com/Pages/Documents/Zero/Language-Management) documentations for more information.

0 commit comments

Comments
 (0)