tsai
/
abp
mirror of https://github.com/abpframework/abp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update Part-2.md

pull/4663/head
Halil İbrahim Kalkan 6 years ago
parent
fe20970c32
commit
775e1a4252
1 changed files with 64 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 127
      docs/en/Tutorials/Part-2.md

127
docs/en/Tutorials/Part-2.md
View File

@ -98,6 +98,59 @@ Check the `Books` table in the database to see the new book row. You can try `ge
We will use these dynamic proxy functions in the next sections to communicate to the server. We will use these dynamic proxy functions in the next sections to communicate to the server.
{{end}}
## Localization
Before starting to the UI development, we first want to prepare the localization texts (you normally do when needed while developing your application).
Localization texts are located under the `Localization/BookStore` folder of the `Acme.BookStore.Domain.Shared` project:
![bookstore-localization-files](./images/bookstore-localization-files-v2.png)
Open the `en.json` (*the English translations*) file and change the content as below:
````json
{
"Culture": "en",
"Texts": {
"Menu:Home": "Home",
"Welcome": "Welcome",
"LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io.",
"Menu:BookStore": "Book Store",
"Menu:Books": "Books",
"Actions": "Actions",
"Edit": "Edit",
"PublishDate": "Publish date",
"NewBook": "New book",
"Name": "Name",
"Type": "Type",
"Price": "Price",
"CreationTime": "Creation time",
"AreYouSureToDelete": "Are you sure you want to delete this item?",
"Enum:BookType:0": "Undefined",
"Enum:BookType:1": "Adventure",
"Enum:BookType:2": "Biography",
"Enum:BookType:3": "Dystopia",
"Enum:BookType:4": "Fantastic",
"Enum:BookType:5": "Horror",
"Enum:BookType:6": "Science",
"Enum:BookType:7": "Science fiction",
"Enum:BookType:8": "Poetry"
}
}
````
* Localization key names are arbitrary. You can set any name. We prefer some conventions for specific text types;
* Add `Menu:` prefix for menu items.
* Use `Enum:<enum-type>:<enum-value>` naming convention to localize the enum members. When you do it like that, ABP can automatically localize the enums in some proper cases.
If a text is not defined in the localization file, it **fallbacks** to the localization key (as ASP.NET Core's standard behavior).
> ABP's localization system is built on [ASP.NET Core's standard localization](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization) system and extends it in many ways. See the [localization document](../Localization.md) for details.
{{if UI == "MVC"}}
## Create a Books Page ## Create a Books Page
It's time to create something visible and usable! Instead of classic MVC, we will use the [Razor Pages UI](https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start) approach which is recommended by Microsoft. It's time to create something visible and usable! Instead of classic MVC, we will use the [Razor Pages UI](https://docs.microsoft.com/en-us/aspnet/core/tutorials/razor-pages/razor-pages-start) approach which is recommended by Microsoft.
@ -153,57 +206,6 @@ context.Menu.AddItem(
); );
```` ````
{{end}}
### Localization
Localization texts are located under the `Localization/BookStore` folder of the `Acme.BookStore.Domain.Shared` project:
![bookstore-localization-files](./images/bookstore-localization-files-v2.png)
Open the `en.json` (*the English translations*) file and change the content as below:
````json
{
"Culture": "en",
"Texts": {
"Menu:Home": "Home",
"Welcome": "Welcome",
"LongWelcomeMessage": "Welcome to the application. This is a startup project based on the ABP framework. For more information, visit abp.io.",
"Menu:BookStore": "Book Store",
"Menu:Books": "Books",
"Actions": "Actions",
"Edit": "Edit",
"PublishDate": "Publish date",
"NewBook": "New book",
"Name": "Name",
"Type": "Type",
"Price": "Price",
"CreationTime": "Creation time",
"AreYouSureToDelete": "Are you sure you want to delete this item?",
"Enum:BookType:0": "Undefined",
"Enum:BookType:1": "Adventure",
"Enum:BookType:2": "Biography",
"Enum:BookType:3": "Dystopia",
"Enum:BookType:4": "Fantastic",
"Enum:BookType:5": "Horror",
"Enum:BookType:6": "Science",
"Enum:BookType:7": "Science fiction",
"Enum:BookType:8": "Poetry"
}
}
````
* Localization key names are arbitrary. You can set any name. We prefer some conventions for specific text types;
* Add `Menu:` prefix for menu items.
* Use `Enum:<enum-type>:<enum-value>` naming convention to localize the enum members. When you do it like that, ABP can automatically localize the enums in some proper cases.
If a text is not defined in the localization file, it **fallbacks** to the localization key (as ASP.NET Core's standard behavior).
> ABP's localization system is built on [ASP.NET Core's standard localization](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/localization) system and extends it in many ways. See the [localization document](../Localization.md) for details.
{{if UI == "MVC"}}
Run the project, login to the application with the username `admin` and the password `1q2w3E*` and see the new menu item has been added to the main menu: Run the project, login to the application with the username `admin` and the password `1q2w3E*` and see the new menu item has been added to the main menu:
![bookstore-menu-items](./images/bookstore-new-menu-item.png) ![bookstore-menu-items](./images/bookstore-new-menu-item.png)
@ -327,24 +329,23 @@ This is a fully working, server side paged, sorted and localized table of books.
{{if UI == "NG"}} {{if UI == "NG"}}
## Angular UI Development ## Install NPM packages
### Create the books page
If you haven't done it before, open a new command line interface (terminal window) and go to your `angular` folder and then run `yarn` command to install NPM packages:
```bash
yarn
```
## Create a Books Page
It's time to create something visible and usable! There are some tools that we will use when developing ABP Angular frontend application: It's time to create something visible and usable! There are some tools that we will use when developing the Angular frontend application:
- [Angular CLI](https://angular.io/cli) will be used to create modules, components and services. - [Angular CLI](https://angular.io/cli) will be used to create modules, components and services.
- [Ng Bootstrap](https://ng-bootstrap.github.io/#/home) will be used as the UI component library. - [Ng Bootstrap](https://ng-bootstrap.github.io/#/home) will be used as the UI component library.
- [ngx-datatable](https://swimlane.gitbook.io/ngx-datatable/) will be used as the datatable library. - [ngx-datatable](https://swimlane.gitbook.io/ngx-datatable/) will be used as the datatable library.
- [Visual Studio Code](https://code.visualstudio.com/) will be used as the code editor (you can use your favorite editor). - [Visual Studio Code](https://code.visualstudio.com/) will be used as the code editor (you can use your favorite editor).
### Install NPM packages
Open a new command line interface (terminal window) and go to your `angular` folder and then run `yarn` command to install NPM packages:
```bash
yarn
```
### BookModule ### BookModule
Run the following command line to create a new module, named `BookModule`: Run the following command line to create a new module, named `BookModule`:
@ -408,7 +409,7 @@ function configureRoutes(routes: RoutesService) {
For more information, see the [RoutesService document](https://docs.abp.io/en/abp/latest/UI/Angular/Modifying-the-Menu.md#via-routesservice). For more information, see the [RoutesService document](https://docs.abp.io/en/abp/latest/UI/Angular/Modifying-the-Menu.md#via-routesservice).
#### Book List Component ### Book List Component
Run the command below on the terminal in the root folder to generate a new component, named book-list: Run the command below on the terminal in the root folder to generate a new component, named book-list:

Write Preview
Loading…
Cancel
Save