提交 a86c05bd 编写于 作者: E ester.zhou

fixed bugs

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 d9b00083
......@@ -150,5 +150,5 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
## Example<a name="section634316188515"></a>
For details, see the [list example code](js-components-container-list.md#section24931424488).
For details, see the [list example code](js-components-container-list.md#example).
......@@ -621,3 +621,61 @@ In addition to the methods in [Universal Methods](js-components-common-methods.
</tr>
</tbody>
</table>
## Example
```
<!-- index.hml -->
<div class="container">
<list class="todo-wrapper">
<list-item for="{{todolist}}" class="todo-item">
<div style="flex-direction: column;align-items: center;justify-content: center;">
<text class="todo-title">{{$item.title}}</text>
<text class="todo-title">{{$item.date}}</text>
</div>
</list-item>
</list>
</div>
```
```
// index.js
export default {
data: {
todolist: [{
title: 'Prepare for the interview',
date: '2021-12-31 10:00:00',
}, {
title: 'Watch the movie',
date: '2021-12-31 20:00:00',
}],
},
}
```
```
/* index.css */
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.todo-wrapper {
width: 100%;
height: 300px;
}
.todo-item {
width: 100%;
height: 120px;
justify-content:center;
}
.todo-title {
width: 100%;
height: 80px;
text-align: center;
}
```
![en-us_image_0000001185033226](figures/en-us_image_0000001185033226.png)
\ No newline at end of file
# Multi-Language Capability
Applications designed based on the JS UI 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.
You only need to perform operations in [Resource Files](#resource-files) and [Resource Reference](#resource-reference) to use the multi-language capability of this framework. For details about how to obtain the current system language, see [Language Acquisition](#language-acquisition).
## Resource Files
Resource files store application content in multiple languages. This framework uses JSON files to store resource definitions. Place the resource file of each locale in the i18n directory described in [File Organization](js-framework-file.md).
Resource files should be named in _language-script-region_.json format. For example, the resource file for Hong Kong Chinese in the traditional script is named zh-Hant-HK. You can omit the region, for example, zh-CN for simplified Chinese, or omit both the script and region, for example, zh for Chinese.
```
language[-script-region].json
```
The following table describes the requirements for the qualifiers of resource file names.
Table 1 Requirements for qualifier values
| Qualifier Type | Description and Value Range |
| -------- | -------- |
| Language | Indicates the language used by the device. The value consists of two or three lowercase letters, for example, zh indicates Chinese, en indicates English, and mai indicates Maithili.<br/>For details about the value range, refer to ISO 639 (codes for the representation of names of languages). |
| Script | Indicates the script type used by the device. The value starts with one uppercase letter followed by three lowercase letters, for example, Hans indicates simplified Chinese and Hant indicates traditional Chinese.<br/>For details about the value range, refer to ISO 15924 (codes for the representation of names of scripts). |
| Country/Region | Indicates the country or region where a user is located. The value consists of two or three uppercase letters or three digits, for example, CN indicates China and GB indicates the United Kingdom.<br/>For details about the value range, refer to ISO 3166-1 (codes for the representation of names of countries and their subdivisions). |
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.
The format of the resource file content is as follows:
**en-US.json**
```
{
"strings": {
"hello": "Hello world!",
"object": "Object parameter substitution-{name}",
"array": "Array type parameter substitution-{0}",
"symbol": "@#$%^&*()_+-={}[]\\|:;\"'<>,./?"
},
"files": {
"image": "image/en_picture.PNG"
}
}
```
Different 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 six scenarios are needed for Arabic.
The following example takes en-US.json and ar-AE.json as examples:
**en-US.json**
```
{
"strings": {
"people": {
"one": "one person",
"other": "{count} people"
}
}
}
```
ar-AE.json
```
{
"strings": {
"people": {
"zero": "لا أحد",
"one": "وحده",
"two": "اثنان",
"few": "ستة اشخاص",
"many": "خمسون شخص",
"other": "مائة شخص"
}
}
}
```
## Resource Reference
Multi-language syntax used on application development pages (including simple formatting and singular-plural formatting) can be used in .hml or .js files.
- Simple formatting
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.
Table 2 Simple formatting
| Attribute | Type | Parameter | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| $t | Function | See Table3 | Yes | Sets the parameters based on the system language, for example, this.$t('strings.hello'). |
Table 3 $t function parameters
| Parameter | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| path | string | Yes | Path of the language resource key |
| params | Array\|Object | No | Content used to replace placeholders during runtime. There are two types of placeholders available:<br/>- Named placeholder, for example, {name}. The actual content must be of the object type, for example, \```$t('strings.object', {name:'Hello world'})```.<br/>- Digit placeholder, for example, {0}. The actual content must be of the array type, for example, \```$t('strings.array', [Hello world']```. |
- Example code for simple formatting
```
<!-- xxx.hml -->
<div>
<!-- Display Hello world! without using a placeholder. -->
<text>{{ $t('strings.hello') }}</text>
<!-- Replace named placeholder {name} with Hello world and display it. -->
<text>{{ $t('strings.object', { name: 'Hello world' }) }}</text>
<!-- Replace digit placeholder {0} with Hello world and display it. -->
<text>{{ $t('strings.array', ['Hello world']) }}</text>
<!-- Obtain the resource content from the .js file and display Hello world. -->
<text>{{ hello }}</text>
<!-- Obtain the resource content from the .js file, replace named placeholder {name} with Hello world, and display Substitution in an object: Hello world. -->
<text>{{ replaceObject }}</text>
<!-- Obtain the resource content from the .js file, replace digit placeholder {0} with Hello world, and display Substitution in an array: Hello world. -->
<text>{{ replaceArray }}</text>
<!-- Display the image in the specified file path. -->
<image src="{{ $t('files.image') }}" class="image"></image>
<!-- Obtain the image file path from the .js file and display the image. -->
<image src="{{ replaceSrc }}" class="image"></image>
</div>
```
```
// xxx.js
// The following example uses the $t function in the .js file.
export default {
data: {
hello: '',
replaceObject: '',
replaceArray: '',
replaceSrc: '',
},
onInit() {
this.hello = this.$t('strings.hello');
this.replaceObject = this.$t('strings.object', { name: 'Hello world' });
this.replaceArray = this.$t('strings.array', ['Hello world']);
this.replaceSrc = this.$t('files.image');
},
}
```
- Singular-plural formatting
Table 4 Singular-plural formatting
| Attribute | Type | Parameter | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| $tc | Function | See Table 5. | Yes | Converts between the singular and plural forms based on the system language, for example, this.$tc('strings.people').<br/>> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>> The resource content is distinguished by the following JSON keys: zero, one, two, few, many, and other. |
Table 5 $tc function parameters
| Parameter | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| path | string | Yes | Path of the language resource key |
| count | number | Yes | Number |
- Sample code for singular-plural formatting
```
<!--xxx.hml-->
<div>
<!-- When the value 0 is passed, "0 people" matches the Arabic string whose key is zero. -->
<text>{{ $tc('strings.people', 0) }}</text>
<!-- When the value 1 is passed, "1 person" matches the Arabic string whose key is one. -->
<text>{{ $tc('strings.people', 1) }}</text>
<!-- When the value 2 is passed, "2 people" matches the Arabic string whose key is two. -->
<text>{{ $tc('strings.people', 2) }}</text>
<!-- When the value 6 is passed, "6 people" matches the Arabic string whose key is few. -->
<text>{{ $tc('strings.people', 6) }}</text>
<!-- When the value 50 is passed, "50 people" matches the Arabic string whose key is many. -->
<text>{{ $tc('strings.people', 50) }}</text>
<!-- When the value 100 is passed, "100 people" matches the Arabic string whose key is other. -->
<text>{{ $tc('strings.people', 100) }}</text>
</div>
```
## Language Acquisition
For details about how to obtain the language, see the Application Configuration section.
......@@ -31,7 +31,7 @@ TextArea(value?:{placeholder?: string controller?: TextAreaController})
## Attributes
In addition to [universal attributes](ts-universal-attributes-index.md), the following attributes are supported.
In addition to universal attributes, the following attributes are supported.
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
......
......@@ -31,7 +31,7 @@ TextInput(value?:{placeholder?: string controller?: TextInputController})
## Attributes
In addition to [universal attributes](ts-universal-attributes-index.md), the following attributes are supported.
In addition to universal attributes, the following attributes are supported.
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
......
......@@ -30,12 +30,12 @@ Canvas(context: CanvasRenderingContext2D)
## Attributes
[Universal attributes]( ts-universal-attributes-index.md) are supported.
Universal attributes are supported.
## Events
In addition to [universal events](ts-universal-events-index.md), the following events are supported.
In addition to universal events, the following events are supported.
| Name | Parameter | Description |
| -------- | -------- | -------- |
......
......@@ -8,56 +8,56 @@
Customize the page transition animations by configuring the page entrance and exit components in the global **pageTransition** method.
| Name | Parameter | Description |
| Name | Parameter | Description |
| -------- | -------- | -------- |
| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters. |
| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters. |
| PageTransitionEnter | Object | Page entrance component, which is used to customize the entrance effect of the current page. For details, see animation parameters. |
| PageTransitionExit | Object | Page exit component, which is used to customize the exit effect of the current page. For details, see animation parameters. |
- Animation parameters
| Name | Type | Default Value | Mandatory | Description |
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| type | RouteType | - | No | If this parameter is not set, the reverse playback effect as pop switches to push is used. |
| duration | number | 1000 | No | Animation duration, in ms. |
| curve | Curve \| Curves | Linear | No | Animation curve. For details about the valid values, see **Curve enums**. |
| delay | number | 0 | No | Animation delay, in ms. Delayed animation is disabled by default. |
| type | RouteType | - | No | If this parameter is not set, the reverse playback effect as pop switches to push is used. |
| duration | number | 1000 | No | Animation duration, in ms. |
| curve | Curve \| Curves | Linear | No | Animation curve. For details about the valid values, see **Curve enums**. |
| delay | number | 0 | No | Animation delay, in ms. Delayed animation is disabled by default. |
- RouteType enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| Pop | When page A jumps to page B, page A is Exit+Push, and page B is Enter+Push. |
| Push | When page B returns to page A, page A is Enter+Pop, and page B is Exit+Pop. |
| Pop | When page A jumps to page B, page A is Exit+Push, and page B is Enter+Push. |
| Push | When page B returns to page A, page A is Enter+Pop, and page B is Exit+Pop. |
## Attributes
The **PageTransitionEnter** and **PageTransitionExit** components support the following attributes:
| Name | Type | Default Value | Mandatory | Description |
| Name | Type | Default Value | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see the description of [ERROR:Invalid link:en-us_topic_0000001257138309.xml#xref2991922111212,link:#li81331342185820](#li81331342185820). |
| translate | {<br/>x? : number,<br/>y? : number,<br/>z? : number<br/>} | - | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default. |
| scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number,<br/>centerY? : number<br/>} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. |
| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. |
| slide | SlideEffect | SlideEffect.Right | No | Slide effect during page transition. For details about the valid values, see **SlideEffect enums**. |
| translate | {<br/>x? : number,<br/>y? : number,<br/>z? : number<br/>} | - | No | Translation effect during page transition, which is the value of the start point of entrance and the end point of exit. When this parameter is set together with **slide**, the latter takes effect by default. |
| scale | {<br/>x? : number,<br/>y? : number,<br/>z? : number,<br/>centerX? : number,<br/>centerY? : number<br/>} | - | No | Scaling effect during page transition, which is the value of the start point of entrance and the end point of exit. |
| opacity | number | 1 | No | Opacity, which is the opacity value of the start point of entrance or the end point of exit. |
- SlideEffect enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left. |
| Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right. |
| Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top. |
| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom. |
| Left | When set to Enter, slides in from the left. When set to Exit, slides out to the left. |
| Right | When set to Enter, slides in from the right. When set to Exit, slides out to the right. |
| Top | When set to Enter, slides in from the top. When set to Exit, slides out to the top. |
| Bottom | When set to Enter, slides in from the bottom. When set to Exit, slides out to the bottom. |
## Events
The PageTransitionEnter and PageTransitionExit components support the following events:
| Event | Description |
| Event | Description |
| -------- | -------- |
| onEnter(type: RouteType, progress: number) =&gt; void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1. |
| onExit(type: RouteType, progress: number) =&gt; void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1. |
| onEnter(type: RouteType, progress: number) =&gt; void | The callback input parameter is the normalized progress of the current entrance animation. The value range is 0–1. |
| onExit(type: RouteType, progress: number) =&gt; void | The callback input parameter is the normalized progress of the current exit animation. The value range is 0–1. |
## Example
......
......@@ -94,20 +94,22 @@ ar-AE.json
Multi-language syntax used on application development pages (including simple formatting and singular-plural formatting) can be used in .hml or .js files.
- Simple formatting
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.
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.
Table 2 Simple formatting
| Attribute | Type | Parameter | Mandatory | Description |
| -------- | -------- | -------- | -------- | -------- |
| $t | Function | See Table3 | Yes | Sets the parameters based on the system language, for example, this.$t('strings.hello'). |
Table 3 $t function parameters
| Parameter | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| path | string | Yes | Path of the language resource key |
| params | Array\|Object | No | Content used to replace placeholders during runtime. There are two types of placeholders available:<br/>- Named placeholder, for example, {name}. The actual content must be of the object type, for example, \```$t('strings.object', {name:'Hello world'})```.<br/>- Digit placeholder, for example, {0}. The actual content must be of the array type, for example, \```$t('strings.array', [Hello world']```. |
Table 3 $t function parameters
| Parameter | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| path | string | Yes | Path of the language resource key |
| params | Array\|Object | No | Content used to replace placeholders during runtime. There are two types of placeholders available:<br/>- Named placeholder, for example, {name}. The actual content must be of the object type, for example, \```$t('strings.object', {name:'Hello world'})```.<br/>- Digit placeholder, for example, {0}. The actual content must be of the array type, for example, \```$t('strings.array', [Hello world']```. |
- Example code for simple formatting
......
......@@ -23,14 +23,14 @@ The download steps for other resources are the same as those in the mainline ver
# Porting Procedure
- [Mini System SoC Porting Guide](porting-minichip.md)
- [Porting Preparations](porting-chip-prepare.md)
- [Before You Start](oem_transplant_chip_prepare_knows.md)
- Porting Preparations
- [Before You Start](porting-chip-prepare-knows.md)
- [Building Adaptation Process](porting-chip-prepare-process.md)
- [Kernel Porting](porting-chip-kernel.md)
- Kernel Porting
- [Overview](porting-chip-kernel-overview.md)
- [Basic Kernel Adaptation](porting-chip-kernel-adjustment.md)
- [Kernel Porting Verification](porting-chip-kernel-verify.md)
- [Board-Level OS Porting](porting-chip-board.md)
- Board-Level OS Porting
- [Overview](porting-chip-board-overview.md)
- [Board-Level Driver Adaptation](porting-chip-board-driver.md)
- [Implementation of APIs at the HAL](porting-chip-board-hal.md)
......@@ -38,22 +38,22 @@ The download steps for other resources are the same as those in the mainline ver
- [lwIP Module Adaptation](porting-chip-board-lwip.md)
- [Third-party Module Adaptation](porting-chip-board-bundle.md)
- [XTS](porting-chip-board-xts.md)
- [FAQ](porting-chip-faqs.md)
- [Small System SoC Porting Guide](porting-smallchip.md)
- [Porting Preparations](porting-smallchip-prepare.md)
- [FAQs](porting-chip-faqs.md)
- Small System SoC Porting Guide
- Porting Preparations
- [Before You Start](porting-smallchip-prepare-needs.md)
- [Compilation and Building](porting-smallchip-prepare-building.md)
- [Kernel Porting](porting-smallchip-kernel.md)
- Kernel Porting
- [LiteOS Cortex-A](porting-smallchip-kernel-a.md)
- [Linux Kernel](porting-smallchip-kernel-linux.md)
- [Driver Porting](porting-smallchip-driver.md)
- Driver Porting
- [Overview](porting-smallchip-driver-overview.md)
- [Platform Driver Porting](porting-smallchip-driver-plat.md)
- [Device Driver Porting](porting-smallchip-driver-oom.md)
- Standard System SoC Porting Guide
- [Standard System Porting Guide](standard-system-porting-guide.md)
- [A Method for Rapidly Porting the OpenHarmony Linux Kernel](porting-linux-kernel.md)
- [Third-Party Library Porting Guide for Mini and Small Systems](porting-thirdparty.md)
- Third-Party Library Porting Guide for Mini and Small Systems
- [Overview](porting-thirdparty-overview.md)
- [Porting a Library Built Using CMake](porting-thirdparty-cmake.md)
- [Porting a Library Built Using Makefile](porting-thirdparty-makefile.md)
......
# Before You Start
This document provides basic guidance for OpenHarmony developers and system on a chip (SoC) or module vendors to port OpenHarmony to typical chip architectures, such as the Cortex-M and RISC-V series. Currently, the Bluetooth service is not supported. Due to the complexity of the OpenHarmony project, this document is subject to update as the version and APIs change.
This guide is intended for readers who have experience in developing embedded systems. Therefore, it mainly describes operations and key points during platform porting instead of basic introduction to the OS.
## Porting Directory
The implementation of the OpenHarmony project directories and functions relies on the OS itself. If no enhancement for a complex feature is involved, you only need to focus on the directories described in the following table.
**Table 1** Key directories in the porting process
| Directory| Description|
| -------- | -------- |
| /build/lite | OpenHarmony basic compilation and building framework.|
| /kernel/liteos_m | Basic kernel. The implementation related to the chip architecture is in the **arch** directory.|
| /device | Board-level implementation, which complies with the OpenHarmony specifications. For details about the directory structure and porting process, see [Overview](../porting/porting-chip-board-overview.md).|
| /vendor | Product-level implementation, which is contributed by Huawei or product vendors.|
The **device** directory is in the internal structure of **device/{Chip solution vendor}/{Development board}**. The following uses HiSilicon **hispark_taurus** as an example:
```
device
└── hisilicon # Name of the chip solution vendor
├── common # Common part of the chip solution development board
└── hispark_taurus # Name of the development board
├── BUILD.gn # Entry to building the development board
├── hals # OS hardware adaptation of the chip solution vendor
├── linux # Linux version
│ └── config.gni # Configurations of the building toolchain and building options for the Linux version
└── liteos_a # LiteOS Cortex-A version
└── config.gni # Configurations of the building toolchain and building options for the LiteOS Cortex-A version
```
The **vendor** directory is in the internal structure of **vendor/{Product solution vendor}/{Product name}**. The following uses the Huawei Wi-Fi IoT product as an example:
```
vendor # Product solution vendor
└── example # Name of the product solution vendor
└── wifiiot # Product name
├── hals # OS adaptation of the product solution vendor
├── BUILD.gn # Product building script
└── config.json # Product configuration file
```
## Porting Process
The **device** directory of OpenHarmony is the adaptation directory for the basic SoC. You can skip the porting process and directly develop system applications if complete SoC adaptation code is already available in the directory. If there is no corresponding SoC porting implementation in the directory, complete the porting process by following the instructions provided in this document. The following figure shows the process of porting OpenHarmony to a third-party SoC.
**Figure 1** Key steps for SoC porting
![en-us_image_0000001200336823](figures/en-us_image_0000001200336823.png)
## Porting Specifications
- The porting must comply with the basic principles described in [How to Contribute](../../contribute/how-to-contribute.md).
- The code required for third-party SoC adaptation is stored in the **device**, **vendor**, and **arch** directories. Naming and usage of these directories must comply with specified naming and usage specifications. For details, see [Overview](../porting/porting-chip-kernel-overview.md) and [Board-Level Directory Specifications](../porting/porting-chip-board-overview.md#board-level-directory-specifications).
# Porting Preparations<a name="EN-US_TOPIC_0000001199842513"></a>
- **[Before You Start](oem_transplant_chip_prepare_knows.md)**
- **[Before You Start](porting-chip-prepare-knows.md)**
- **[Building Adaptation Process](porting-chip-prepare-process.md)**
......
# Standard System SoC Porting Guide
- **[Standard System Porting Guide](standard-system-porting-guide.md)**
- **[A Method for Rapidly Porting the OpenHarmony Linux Kernel](porting-linux-kernel.md)**
\ No newline at end of file
......@@ -12,4 +12,4 @@
- **[Debugging and Verification](quickstart-ide-lite-steps-hi3861-debug.md)**
- **[Running](quickstart-ide-lite-steps-hi3816-running.md)**
- **[Running](quickstart-ide-lite-steps-hi3861-running.md)**
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册