• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Multi-Language Capability
2
3
4Applications designed based on the development framework apply to different countries and regions. With the multi-language capability, you do not need to develop application versions in different languages, and your users can switch between various locales. This also facilitates project maintenance.
5
6
7You only need to perform operations in [Defining Resource Files](#defining-resource-files) and [Referencing Resources](#referencing-resources) to use the multi-language capability of this framework.
8
9
10## Defining Resource Files
11
12Resource files store application content in multiple languages. This framework uses JSON files to store resource definitions.
13
14Place the resource file of each locale in the **i18n** directory described in [File Organization](js-service-widget-file.md). Resource files are named in *language-region***.json** format. For example, the resource file for English (United States) is named **en-US.json**. If there is no resource file of the locale that matches the system language, content in the **en-US.json** file will be used by default.
15
16Different languages have different matching rules for singular and plural forms. In the resource file, **zero**, **one**, **two**, **few**, **many**, and **other** are used to define the string content in different singular and plural forms. For example, there is only the **other** scenario in Chinese since the language does not have singular and plural forms. **One** and **other** scenarios are applicable to English. All the preceding six scenarios are needed for Arabic.
17
18 The following example takes **en-US.json** and **ar-AE.json** as examples:
19
20```json
21{
22    "strings": {
23        "hello": "Hello world!",
24        "symbol": "@#$%^&*()_+-={}[]\\|:;\"'<>,./?",
25        "plurals": {
26            "one": "one person",
27            "other": "other people"
28        }
29    },
30
31    "files": {
32        "image": "image/en_picture.PNG"
33    }
34}
35```
36
37
38```json
39{
40    "strings": {
41        "plurals": {
42            "zero": "لا أحد",
43            "one": "وحده",
44            "two": "اثنان",
45            "few": "ستة اشخاص",
46            "many": "خمسون شخص",
47            "other": "مائة شخص"
48        }
49    }
50}
51```
52
53
54## Referencing Resources
55
56Multi-language syntax used on application development pages (including simple formatting and singular-plural formatting) can be used in **.hml** or **.js** files.
57
58- Simple formatting
59  Use the **$t** function to reference to resources of different locales. The **$t** function is available for both **.hml** and **.js** files. The system displays content based on a resource file path specified via **$t** and the specified resource file whose locale matches the current system language.
60
61    **Table 1** Simple formatting
62
63  | Name  | Type      | Parameter      | Mandatory  | Description                                    |
64  | ---- | -------- | -------- | ---- | -------------------------------------- |
65  | $t   | Function | Described in **$t parameters**| Yes   | Sets the parameters based on the system language, for example, **this.$t('strings.hello')**.|
66
67    **Table 2** $t parameters
68
69  | Name  | Type    | Mandatory  | Description  |
70  | ---- | ------ | ---- | ---- |
71  | path | string | Yes   | Resource path.|
72
73- Example code for simple formatting
74
75  ```html
76  <!-- xxx.hml -->
77   <div>
78     <text>{{ $t('strings.hello') }}</text>
79     <image src="{{ $t('files.image') }}" class="image"></image>
80   </div>
81  ```
82
83- Singular-Plural Conversion
84
85  **Table 3** Singular-plural conversion
86
87  | Name  | Type      | Parameter       | Mandatory  | Description                                      |
88  | ---- | -------- | --------- | ---- | ---------------------------------------- |
89  | $tc  | Function | Described in **$tc parameters**| Yes   | Converts between the singular and plural forms based on the system language, for example, **this.$tc('strings.plurals')**.<br>The resource content is distinguished by the following JSON keys: **zero**, **one**, **two**, **few**, **many**, and **other**.|
90
91  **Table 4** $tc parameters
92
93  | Parameter   | Type    | Mandatory  | Description   |
94  | ----- | ------ | ---- | ----- |
95  | path  | string | Yes   | Resource path. |
96  | count | number | Yes   | Number|
97
98- Example code for converting between the singular and plural forms
99
100  ```html
101  <!--xxx.hml-->
102  <div>
103      <!-- When the value 0 is passed, "0 people" matches the Arabic string whose key is zero. -->
104    <text>{{ $tc('strings.plurals', 0) }}</text>
105      <!-- When the value 1 is passed, "1 person" matches the Arabic string whose key is one. -->
106    <text>{{ $tc('strings.plurals', 1) }}</text>
107      <!-- When the value 2 is passed, "2 people" matches the Arabic string whose key is two. -->
108    <text>{{ $tc('strings.plurals', 2) }}</text>
109      <!-- When the value 6 is passed, "6 people" matches the Arabic string whose key is few. -->
110    <text>{{ $tc('strings.plurals', 6) }}</text>
111      <!-- When the value 50 is passed, "50 people" matches the Arabic string whose key is many. -->
112    <text>{{ $tc('strings.plurals', 50) }}</text>
113      <!-- When the value 100 is passed, "100 people" matches the Arabic string whose key is other. -->
114    <text>{{ $tc('strings.plurals', 100) }}</text>
115  </div>
116  ```
117