提交 503e5e0d 编写于 作者: G ge-yafang

update docs

Signed-off-by: Nge-yafang <geyafang@huawei.com>
上级 9d98721b
......@@ -35,7 +35,7 @@ aa test -m com.example.myapplicationfaets -s unittest OpenHarmonyTestRunner -s c
| -m | Yes | Module name of the HAP where the **TestRunner** is located. This parameter is used by the stage model. |
| -s unittest | Yes | Name of the **TestRunner** to be used. The TestRunner name must be the same as the file name. |
| -w | No | Timeout interval of a test case, in seconds. If this parameter is not specified, the test framework exits only after **finishTest** is invoked.|
| -s <key><value> | No | It can be any parameter in the key-value format. The entered parameters can be obtained in key-value mode through **AbilityDelegatorArgs.parameters**. For example, in **-s classname myTest**, **classname** is the key and **myTest** is the value.|
| -s \<key>\<value> | No | It can be any parameter in the key-value format. The entered parameters can be obtained in key-value mode through **AbilityDelegatorArgs.parameters**. For example, in **-s classname myTest**, **classname** is the key and **myTest** is the value.|
### Using the IDE
......
......@@ -51,16 +51,16 @@ The **Ability** class has the **context** attribute, which belongs to the **Abil
**Table 3** AbilityContext APIs
|API|Description|
|:------|:------|
|void startAbility(want: Want, callback: AsyncCallback<void>)|Starts an ability.|
|void startAbility(want: Want, options: StartOptions, callback: AsyncCallback<void>)|Starts an ability with start options.|
|void startAbilityWithAccount(want: Want, accountId: number, callback: AsyncCallback<void>)|Starts an ability with the account ID.|
|void startAbilityWithAccount(want: Want, accountId: number, options: StartOptions, callback: AsyncCallback<void>)|Starts an ability with the account ID and start options.|
|void startAbilityForResult(want: Want, callback: AsyncCallback<AbilityResult>)|Starts an ability with the returned result.|
|void startAbilityForResult(want: Want, options: StartOptions, callback: AsyncCallback<AbilityResult>)|Starts an ability with the returned result and start options.|
|void startAbilityForResultWithAccount(want: Want, accountId: number, callback: AsyncCallback<AbilityResult>)|Starts an ability with the returned result and account ID.|
|void startAbilityForResultWithAccount(want: Want, accountId: number, options: StartOptions, callback: AsyncCallback<void>)|Starts an ability with the returned result, account ID, and start options.|
|void terminateSelf(callback: AsyncCallback<void>)|Destroys the Page ability.|
|void terminateSelfWithResult(parameter: AbilityResult, callback: AsyncCallback<void>)|Destroys the Page ability with the returned result.|
|void startAbility(want: Want, callback: AsyncCallback\<void>)|Starts an ability.|
|void startAbility(want: Want, options: StartOptions, callback: AsyncCallback\<void>)|Starts an ability with start options.|
|void startAbilityWithAccount(want: Want, accountId: number, callback: AsyncCallback\<void>)|Starts an ability with the account ID.|
|void startAbilityWithAccount(want: Want, accountId: number, options: StartOptions, callback: AsyncCallback\<void>)|Starts an ability with the account ID and start options.|
|void startAbilityForResult(want: Want, callback: AsyncCallback\<AbilityResult>)|Starts an ability with the returned result.|
|void startAbilityForResult(want: Want, options: StartOptions, callback: AsyncCallback\<AbilityResult>)|Starts an ability with the returned result and start options.|
|void startAbilityForResultWithAccount(want: Want, accountId: number, callback: AsyncCallback\<AbilityResult>)|Starts an ability with the returned result and account ID.|
|void startAbilityForResultWithAccount(want: Want, accountId: number, options: StartOptions, callback: AsyncCallback\<void>)|Starts an ability with the returned result, account ID, and start options.|
|void terminateSelf(callback: AsyncCallback\<void>)|Destroys the Page ability.|
|void terminateSelfWithResult(parameter: AbilityResult, callback: AsyncCallback\<void>)|Destroys the Page ability with the returned result.|
## How to Develop
### Creating Page Abilities for an Application
......@@ -89,29 +89,29 @@ To create Page abilities for an application on the stage model, you must impleme
onCreate(want, launchParam) {
console.log("MainAbility onCreate")
}
onDestroy() {
console.log("MainAbility onDestroy")
}
onWindowStageCreate(windowStage) {
console.log("MainAbility onWindowStageCreate")
windowStage.loadContent("pages/index").then((data) => {
console.log("MainAbility load content succeed with data: " + JSON.stringify(data))
}).catch((error) => {
console.error("MainAbility load content failed with error: "+ JSON.stringify(error))
})
}
onWindowStageDestroy() {
console.log("MainAbility onWindowStageDestroy")
}
onForeground() {
console.log("MainAbility onForeground")
}
onBackground() {
console.log("MainAbility onBackground")
}
......
......@@ -14,11 +14,11 @@ The table below describes the ability call APIs. For details, see [Ability](../r
**Table 1** Ability call APIs
|API|Description|
|:------|:------|
|Promise<Caller> startAbilityByCall(want: Want)|Obtains the caller interface of the specified ability, and if the specified ability is not started, starts the ability in the background.|
|Promise\<Caller> startAbilityByCall(want: Want)|Obtains the caller interface of the specified ability, and if the specified ability is not started, starts the ability in the background.|
|void on(method: string, callback: CalleeCallBack)|Callee.on: callback invoked when the callee registers a method.|
|void off(method: string)|Callee.off: callback invoked when the callee deregisters a method.|
|Promise<void> call(method: string, data: rpc.Sequenceable)|Caller.call: sends agreed sequenceable data to the callee.|
|Promise<rpc.MessageParcel> callWithResult(method: string, data: rpc.Sequenceable)|Caller.callWithResult: sends agreed sequenceable data to the callee and returns the agreed sequenceable data.|
|Promise\<void> call(method: string, data: rpc.Sequenceable)|Caller.call: sends agreed sequenceable data to the callee.|
|Promise\<rpc.MessageParcel> callWithResult(method: string, data: rpc.Sequenceable)|Caller.callWithResult: sends agreed sequenceable data to the callee and returns the agreed sequenceable data.|
|void release()|Caller.release: releases the caller interface.|
|void onRelease(callback: OnReleaseCallBack)|Caller.onRelease: registers a callback that is invoked when the caller is disconnected.|
......
# LoadingProgress
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **\<LoadingProgress>** component is used to display the loading progress.
## Required Permissions
None
## Child Components
None
## APIs
LoadingProgress()
Creates a **LoadingProgress** instance.
## Attributes
| Name | Type | Default Value | Description |
| ----- | ----- | ------------- | ---------------------------------------- |
| color | Color | - | Foreground color of the loading progress bar. |
## Example
```
@Entry
@Component
struct LoadingProgressExample {
build() {
Column({ space: 5 }) {
Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
LoadingProgress()
.color(Color.Blue)
}.width('100%').margin({ top: 5 })
}
}
```
![zh-cn_image_0000001198839004](figures/loadingProgress.png)
\ No newline at end of file
# Grid
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;Grid&gt;** component is a two-dimensional layout. The component is divided into rows and columns, to form cells. You can specify the cell where an item is located and combine different grids to form various layouts.
## Required Permissions
None
## Child Components
This component contains the child component [\<GridItem>](ts-container-griditem.md).
## APIs
Grid()
## Attributes
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| columnsTemplate | string | '1fr' | Number of columns in the current grid layout. If this parameter is not set, one column is used by default. For example, '1fr 1fr 2fr' divides the component into three columns, with four equal parts. The first column occupies one part, the second column occupies one part, and the third column occupies two parts. |
| rowsTemplate | string | '1fr' | Number of rows in the current grid layout. If this parameter is not set, one row is used by default. For example, '1fr 1fr 2fr' divides the component into three rows. The width allowed by the parent component is divided into four equal parts. The first row occupies one part, the second row occupies one part, and the third row occupies two parts. |
| columnsGap | Length | 0 | Spacing between columns. |
| rowsGap | Length | 0 | Spacing between rows. |
| editMode<sup>8+</sup> | boolean | false | Whether to enter editing mode. In editing mode, you can drag the **&lt;[GridItem](ts-container-griditem.md)&gt;** in the **&lt;Gird&gt;** component. |
| layoutDirection<sup>8+</sup> | [LayoutDirection](ts-appendix-enums.md#layoutdirection-enums) | LayoutDirection.Row | Main axis direction of the layout. The options are as follows:- **LayoutDirection.Row**: Horizontal layout, where the child components are arranged in the same direction as the main axis runs along the rows.- **LayoutDirection.Column**: Vertical layout, where the child components are arranged in the same direction as the main axis runs down the columns. |
| maxCount<sup>8+</sup> | number | 1 | Maximum number of rows that can be displayed. |
| minCount<sup>8+</sup> | number | 1 | Minimum number of rows that can be displayed. |
| cellLength<sup>8+</sup> | number | 0 | Fixed height per row. |
| multiSelectable<sup>8+</sup> | boolean | false | Whether to enable mouse frame selection.<br/>- **false**: The mouse frame selection is disabled.<br/>- **true**: The mouse frame selection is disabled. |
| edgeEffection<sup>8+</sup> | EdgeEffect | EdgeEffect.Spring | Edge effect. For details, see **EdgeEffect**. |
- EdgeEffect enums
| Name | Description |
| ------ | ------------------------------------------------------------ |
| Spring | Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded. |
| None | No effect after the scrollbar is moved to the edge. |
## Events
| Name | Description |
| -------- | -------- |
| onScrollIndex(first: number) =&gt; void | Triggered when the start item of the grid changes. |
## Example
```
@Entry
@Component
struct GridExample {
@State Number: String[] = ['0', '1', '2', '3', '4']
build() {
Column({ space: 5 }) {
Grid() {
ForEach(this.Number, (day: string) => {
ForEach(this.Number, (day: string) => {
GridItem() {
Text(day)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
}
}, day => day)
}, day => day)
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.rowsTemplate('1fr 1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('90%')
.backgroundColor(0xFAEEE0)
.height(300)
Text('scroll').fontColor(0xCCCCCC).fontSize(9).width('90%')
Grid() {
ForEach(this.Number, (day: string) => {
ForEach(this.Number, (day: string) => {
GridItem() {
Text(day)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width('100%')
.height(80)
.textAlign(TextAlign.Center)
}
}, day => day)
}, day => day)
}
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.onScrollIndex((first: number) => {
console.info(first.toString())
})
.width('90%')
.backgroundColor(0xFAEEE0)
.height(300)
}.width('100%').margin({ top: 5 })
}
}
```
![en-us_image_0000001212218434](figures/en-us_image_0000001212218434.gif)
# List
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;List&gt;** component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.
## Required Permissions
None
## Child Components
This component contains the child component [\<ListItem>](ts-container-listitem.md).
## APIs
List(value:{space?: number, initialIndex?: number})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| space | number | No | 0 | Spacing between list items. |
| initialIndex | number | No | 0 | Item displayed at the beginning of the component when the current list is loaded for the first time, that is, the first item to be displayed. If the configured sequence number is greater than the sequence number of the last item, the setting does not take effect. |
## Attributes
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| listDirection | [Axis](ts-appendix-enums.md#axis-enums) | Vertical | Direction in which the list items are arranged. For details, see **Axis** enums. |
| divider | {<br/>strokeWidth: Length,<br/>color?:Color,<br/>startMargin?: Length,<br/>endMargin?: Length<br/>} | - | Style of the divider for the list items. By default, there is no divider.<br/>**strokeWidth**: stroke width of the divider.<br/>**color**: color of the divider.<br/>**startMargin**: distance between the divider and the start of the list.<br/>**endMargin**: distance between the divider and the end of the list. |
| editMode | boolean | false | Whether the **&lt;List&gt;** component is in editable mode. |
| edgeEffect | EdgeEffect | EdgeEffect.Spring | Sliding effect. For details, see EdgeEffect enums. |
| chainAnimation | boolean | false | Whether to display chained animations on this list when it slides or its top and bottom are dragged. The list items are separated with even space, and one item animation starts after the previous animation during basic sliding interactions. The chained animation effect is similar with spring physics.<br/>- **false**: No chained animations are displayed.<br/>- **true**: Chained animations are displayed. |
| multiSelectable<sup>8+</sup> | boolean | false | Whether to enable mouse frame selection.<br/>- **false**: The mouse frame selection is disabled.<br/>- **true**: The mouse frame selection is disabled. |
| restoreId<sup>8+</sup> | number | - | Migration ID of the component. During application migration, the status of the component is migrated to the component with the same migration ID on the peer end.<br/>For a **&lt;List&gt;** component, the status includes the item serial number displayed at the start position. |
- EdgeEffect enums
| Name | Description |
| -------- | -------- |
| Spring | Similar to the physical dynamic effect of a spring. After scrolling to the edge, you can continue to scroll for a distance based on the initial speed or by touching the knob of the scrollbar. After you release your hand, the knob is rebounded. |
| None | No effect after the scroll bar is moved to the edge. |
## Events
| Name | Description |
| -------- | -------- |
| onItemDelete(index: number) =&gt; boolean | Triggered when a list item is deleted. |
| onScrollIndex(firstIndex: number, lastIndex: number) =&gt; void | Triggered when the start position and end position of the current list are changed. |
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> To enable the editable mode for a list, the following conditions must be met:
>
> - **editMode** is set to **true**.
>
> - The list is bound to the **onItemDelete** event and the event returns **true** during event callback.
>
> - The **editable** attribute of **ListItem** is set to **true**.
>
> To enable dragging for a list item, the following conditions must be met:
>
> - **editMode** is set to **true**.
>
> - The list item is bound to the **onDragStart** event and the event returns a floating UI during event callback.
## Example
```
@Entry
@Component
struct ListExample {
private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@State editFlag: boolean = false
build() {
Stack({ alignContent: Alignment.TopStart }) {
Column() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width('100%').height(100).fontSize(16)
.textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
}.editable(true)
}, item => item)
}
.listDirection(Axis.Vertical) // Arrangement direction
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // Divider line
.edgeEffect(EdgeEffect.None) // No effect when sliding to the edge
.chainAnimation(false) // Chained animations are disabled.
.onScrollIndex((firstIndex: number, lastIndex: number) => {
console.info('first' + firstIndex)
console.info('last' + lastIndex)
})
.editMode(this.editFlag)
.onItemDelete((index: number) => {
console.info(this.arr[index] + 'Delete')
this.arr.splice(index, 1)
console.info(JSON.stringify(this.arr))
this.editFlag = false
return true
}).width('90%')
}.width('100%')
Button('edit list')
.onClick(() => {
this.editFlag = !this.editFlag
}).margin({ top: 5, left: 20 })
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
}
```
![en-us_image_0000001256978357](figures/en-us_image_0000001256978357.gif)
......@@ -147,8 +147,8 @@ A result set can be regarded as a row of data in the queried results. It allows
| Class| API| Description|
| -------- | -------- | -------- |
| RdbStore | setDistributedTables(tables: Array<string>, callback: AsyncCallback<void>): void;| Sets a list of distributed tables. This method uses a callback to return the result.<br>- &nbsp;**tables**: names of the distributed tables to set.<br>-&nbsp;**callback**: callback invoked to return the result.|
| RdbStore | setDistributedTables(tables: Array<string>): Promise<void>; | Sets a list of distributed tables. This method uses a promise to return the result.<br>- &nbsp;**tables**: names of the distributed tables to set.|
| RdbStore | setDistributedTables(tables: Array<string>, callback: AsyncCallback\<void>): void;| Sets a list of distributed tables. This method uses a callback to return the result.<br>- &nbsp;**tables**: names of the distributed tables to set.<br>-&nbsp;**callback**: callback invoked to return the result.|
| RdbStore | setDistributedTables(tables: Array<string>): Promise\<void>; | Sets a list of distributed tables. This method uses a promise to return the result.<br>- &nbsp;**tables**: names of the distributed tables to set.|
**Obtaining the Distributed Table Name for a Remote Device**
......
......@@ -34,8 +34,8 @@ Certain APIs can be invoked only by system applications that have been granted t
| API | Description |
| ------------------------------------------------------------ | ---------------- |
| isNotificationEnabled(bundle: BundleOption, callback: AsyncCallback<boolean>): void | Checks whether notification is enabled.|
| enableNotification(bundle: BundleOption, enable: boolean, callback: AsyncCallback<void>): void | Sets whether to enable notification. |
| isNotificationEnabled(bundle: BundleOption, callback: AsyncCallback\<boolean>): void | Checks whether notification is enabled.|
| enableNotification(bundle: BundleOption, enable: boolean, callback: AsyncCallback\<void>): void | Sets whether to enable notification. |
If the notification function of an application is disabled, it cannot send notifications.
......
......@@ -927,7 +927,7 @@ Describes the HAP module information.
| supportedModes | number | Yes | No | Modes supported by the module. |
| reqCapabilities | Array<string> | Yes | No | Capabilities required for module running.|
| deviceTypes | Array<string> | Yes | No | An array of supported device types.|
| abilityInfo | Array<AbilityInfo> | Yes | No | Ability information. |
| abilityInfo | Array\<AbilityInfo> | Yes | No | Ability information. |
| moduleName | string | Yes | No | Module name. |
| mainAbilityName | string | Yes | No | Name of the entrance ability. |
| installationFree | boolean | Yes | No | When installation-free is supported. |
......
......@@ -160,7 +160,7 @@ Obtains the memory size of this application. This API uses an asynchronous callb
```
## appManager.getProcessRunningInfos<sup>8+</sup>
getProcessRunningInfos(): Promise<Array<ProcessRunningInfo>>;
getProcessRunningInfos(): Promise<Array\<ProcessRunningInfo>>;
Obtains information about the running processes. This API uses a promise to return the result.
......@@ -184,7 +184,7 @@ Obtains information about the running processes. This API uses a promise to retu
## appManager.getProcessRunningInfos<sup>8+</sup>
getProcessRunningInfos(callback: AsyncCallback<Array<ProcessRunningInfo>>): void;
getProcessRunningInfos(callback: AsyncCallback<Array\<ProcessRunningInfo>>): void;
Obtains information about the running processes. This API uses an asynchronous callback to return the result.
......
......@@ -762,7 +762,7 @@ Sets a **DataAbilityPredicates** object to specify the index column.
in(field: string, value: Array&lt;ValueType&gt;): DataAbilityPredicates
Sets a **DataAbilityPredicates** object to match the field with data type Array<ValueType> and value within the specified range.
Sets a **DataAbilityPredicates** object to match the field with data type Array\<ValueType> and value within the specified range.
**System capability**: SystemCapability.DistributedDataManager.DataShare.Core
......@@ -791,7 +791,7 @@ Sets a **DataAbilityPredicates** object to match the field with data type Array<
notIn(field: string, value: Array&lt;ValueType&gt;): DataAbilityPredicates
Sets a **DataAbilityPredicates** object to match the field with data type Array<ValueType> and value out of the specified range.
Sets a **DataAbilityPredicates** object to match the field with data type Array\<ValueType> and value out of the specified range.
**System capability**: SystemCapability.DistributedDataManager.DataShare.Core
......
......@@ -553,7 +553,7 @@ DAHelper.insert(
## DataAbilityHelper.batchInsert
batchInsert(uri: string, valuesBuckets: Array<rdb.ValuesBucket>, callback: AsyncCallback\<number>): void
batchInsert(uri: string, valuesBuckets: Array\<rdb.ValuesBucket>, callback: AsyncCallback\<number>): void
Inserts multiple data records into the database. This API uses an asynchronous callback to return the result.
......@@ -564,7 +564,7 @@ Inserts multiple data records into the database. This API uses an asynchronous c
| Name | Type | Mandatory| Description |
| ------------ | ----------------------- | ---- | -------------------------------- |
| uri | string | Yes | URI of the data to insert. |
| valuesBucket | Array<rdb.ValuesBucket> | Yes | Data records to insert. |
| valuesBucket | Array\<rdb.ValuesBucket> | Yes | Data records to insert. |
| callback | AsyncCallback\<number> | Yes | Callback used to return the number of inserted data records.|
**Example**
......@@ -862,7 +862,7 @@ DAHelper.query(
## DataAbilityHelper.call
call(uri: string, method: string, arg: string, extras: PacMap): Promise<PacMap>
call(uri: string, method: string, arg: string, extras: PacMap): Promise\<PacMap>
Calls the extended API of the Data ability. This API uses a promise to return the result.
......@@ -898,7 +898,7 @@ dataAbilityHelper.call("dataability:///com.example.jsapidemo.UserDataAbility", "
## DataAbilityHelper.call
call(uri: string, method: string, arg: string, extras: PacMap, callback: AsyncCallback<PacMap>): void
call(uri: string, method: string, arg: string, extras: PacMap, callback: AsyncCallback\<PacMap>): void
Calls the extended API of the Data ability. This API uses an asynchronous callback to return the result.
......@@ -912,7 +912,7 @@ Calls the extended API of the Data ability. This API uses an asynchronous callba
| method | string | Yes | Name of the API to call. |
| arg | string | Yes |Parameter to pass. |
| extras | [PacMap](#pacmap) | Yes | Key-value pair parameter. |
| callback | AsyncCallback<[PacMap](#pacmap)> | Yes| Callback used to return the result. |
| callback | AsyncCallback\<[PacMap](#pacmap)> | Yes| Callback used to return the result. |
**Example**
......
......@@ -51,7 +51,7 @@ export default {
## inputDevice.getDeviceIds
function getDeviceIds(): Promise<Array<number>>
function getDeviceIds(): Promise<Array\<number>>
Obtains the IDs of all input devices. This API uses a promise to return the result.
......@@ -61,7 +61,7 @@ Obtains the IDs of all input devices. This API uses a promise to return the resu
| Parameter | Description |
| ---------------------- | ------------------ |
| Promise<Array<number>> | Promise used to return the result.|
| Promise<Array\<number>> | Promise used to return the result.|
**Example**
......@@ -122,7 +122,7 @@ export default {
## inputDevice.getDevice
function getDevice(deviceId: number): Promise<InputDeviceData>
function getDevice(deviceId: number): Promise\<InputDeviceData>
Obtains the information about an input device. This API uses a promise to return the result.
......@@ -132,7 +132,7 @@ Obtains the information about an input device. This API uses a promise to return
| Parameter | Description |
| ------------------------ | ------------------ |
| Promise<InputDeviceData> | Promise used to return the result.|
| Promise\<InputDeviceData> | Promise used to return the result.|
**Example**
......
......@@ -721,7 +721,7 @@ Sets **SurfaceId**. This API uses a promise to return the result.
| Type | Description |
| ------------- | ------------------------------ |
| Promise<void> | Promise used to return the result.|
| Promise\<void> | Promise used to return the result.|
**Example**
......
......@@ -517,7 +517,7 @@ Notification.getSlot(slotType).then((data) => {
## Notification.getSlots
getSlots(callback: AsyncCallback<Array\<NotificationSlot\>>): void
getSlots(callback: AsyncCallback\<Array\<NotificationSlot\>>): void
Obtains all notification slots. This API uses an asynchronous callback to return the result.
......@@ -2350,7 +2350,7 @@ Notification.enableDistributedByBundle(bundle, enable, enableDistributedByBundle
## Notification.enableDistributedByBundle<sup>8+</sup>
bundleenableDistributedByBundle(bundle: BundleOption, enable: boolean): Promise<void>
bundleenableDistributedByBundle(bundle: BundleOption, enable: boolean): Promise\<void>
Sets whether an application supports distributed notifications based on the bundle. This API uses a promise to return the result.
......
......@@ -208,7 +208,7 @@ Shows an action menu. This API uses a callback to return the result asynchronous
## prompt.showActionMenu
showActionMenu(options: ActionMenuOptions): Promise<ActionMenuSuccessResponse>
showActionMenu(options: ActionMenuOptions): Promise\<ActionMenuSuccessResponse>
Shows an action menu. This API uses a promise to return the result synchronously.
......
......@@ -360,7 +360,7 @@ this.context.connectAbility(want, accountId, options) {
## disconnectAbility
disconnectAbility(connection: number, callback:AsyncCallback<void>): void
disconnectAbility(connection: number, callback:AsyncCallback\<void>): void
Disconnects this ability from another ability. This API uses an asynchronous callback to return the result.
......@@ -384,7 +384,7 @@ this.context.disconnectAbility(connection, () => {
## disconnectAbility
disconnectAbility(connection: number): Promise<void>
disconnectAbility(connection: number): Promise\<void>
Disconnects this ability from another ability. This API uses a promise to return the result.
......
......@@ -12,7 +12,7 @@ import sms from '@ohos.telephony.sms';
## sms.createMessage
createMessage\(pdu: Array&lt;number&gt;, specification: string, callback: AsyncCallback<ShortMessage\>\): void
createMessage\(pdu: Array\<number\>, specification: string, callback: AsyncCallback<ShortMessage\>\): void
Creates an SMS message instance based on the protocol data unit (PDU) and the specified SMS protocol. This API uses an asynchronous callback to return the result.
......@@ -40,7 +40,7 @@ sms.createMessage(pdu, specification, (err, data) => {
## sms.createMessage
createMessage\(pdu: Array&lt;number&gt;, specification: string\): Promise<ShortMessage\>
createMessage\(pdu: Array\<number\>, specification: string\): Promise<ShortMessage\>
Creates an SMS message instance based on the PDU and the specified SMS protocol. This API uses a promise to return the result.
......@@ -110,7 +110,7 @@ sms.sendMessage(options);
## sms.getDefaultSmsSlotId<sup>7+</sup>
getDefaultSmsSlotId\(callback: AsyncCallback&lt;number&gt;\): void
getDefaultSmsSlotId\(callback: AsyncCallback\<number\>\): void
Obtains the default slot of the SIM card used to send SMS messages. This API uses an asynchronous callback to return the result.
......@@ -133,7 +133,7 @@ sms.getDefaultSmsSlotId((err, data) => {
## sms.getDefaultSmsSlotId<sup>7+</sup>
getDefaultSmsSlotId\(\): Promise&lt;number&gt;
getDefaultSmsSlotId\(\): Promise\<number\>
Obtains the default slot of the SIM card used to send SMS messages. This API uses a promise to return the result.
......@@ -143,7 +143,7 @@ Obtains the default slot of the SIM card used to send SMS messages. This API use
| Type | Description |
| --------------- | ------------------------------------------------------------ |
| Promise&lt;number&gt; | Promise used to return the result.<br>- **0**: card slot 1<br>- **1**: card slot 2|
| Promise\<number> | Promise used to return the result.<br>- **0**: card slot 1<br>- **1**: card slot 2|
**Example**
......@@ -319,7 +319,7 @@ Defines an SMS message instance.
| Name | Type | Description |
| ------------------------ | --------------------------------------- | ------------------------------------------------------------ |
| hasReplyPath | boolean | Whether the received SMS contains **TP-Reply-Path**. The default value is **false**.<br>**TP-Reply-Path**: the path in which the device can reply to the SMS message through the originating SMSC.|
| hasReplyPath | boolean | Whether the received SMS contains **TP-Reply-Path**. The default value is **false**.<br>**TP-Reply-Path**: the path in which the mobile phone can reply to the SMS message through the originating SMSC.|
| isReplaceMessage | boolean | Whether the received SMS message is a **replace short message**. The default value is **false**.<br>For details, see section 9.2.3.9 in **3GPP TS 23.040**.|
| isSmsStatusReportMessage | boolean | Whether the received SMS message is an SMS delivery status report. The default value is **false**.<br>**SMS-Status-Report**: a message sent from the SMSC to the mobile station to show the SMS message delivery status.|
| messageClass | [ShortMessageClass](#shortmessageclass) | SMS message type. |
......@@ -390,7 +390,7 @@ Provides the callback for the SMS message sending result. Return the SMS deliver
## SendSmsResult
Enumerates SMS message sending results.
SMS message sending result.
**System capability**: SystemCapability.Telephony.SmsMms
......
......@@ -369,7 +369,7 @@ All APIs provided by this class use a promise to return the result and must be i
### UiComponent.click
click():Promise<void>;
click():Promise\<void>;
Clicks this component.
......@@ -389,7 +389,7 @@ async function demo() {
### UiComponent.doubleClick
doubleClick():Promise<void>;
doubleClick():Promise\<void>;
Double-clicks this component.
......@@ -409,7 +409,7 @@ async function demo() {
### UiComponent.longClick
longClick():Promise<void>;
longClick():Promise\<void>;
Long-clicks this component.
......@@ -429,7 +429,7 @@ async function demo() {
### UiComponent.getId
getId():Promise<number>;
getId():Promise\<number>;
Obtains the ID of this component.
......@@ -441,7 +441,7 @@ Obtains the ID of this component.
| Type | Description |
| ---------------- | ------------------------- |
| Promise<number>; | Promise used to return the component ID.|
| Promise\<number>; | Promise used to return the component ID.|
**Example**
......@@ -455,7 +455,7 @@ async function demo() {
### UiComponent.getKey
getKey():Promise<string>;
getKey():Promise\<string>;
Obtains the key of this component.
......@@ -467,7 +467,7 @@ Obtains the key of this component.
| Type | Description |
| ---------------- | -------------------------- |
| Promise<string>; | Promise used to return the component key.|
| Promise\<string>; | Promise used to return the component key.|
**Example**
......@@ -481,7 +481,7 @@ async function demo() {
### UiComponent.getText
getText():Promise<string>;
getText():Promise\<string>;
Obtains the text information of this component.
......@@ -493,7 +493,7 @@ Obtains the text information of this component.
| Type | Description |
| ---------------- | ------------------------------- |
| Promise<string>; | Promise used to return the text information of the component.|
| Promise\<string>; | Promise used to return the text information of the component.|
**Example**
......@@ -507,7 +507,7 @@ async function demo() {
### UiComponent.getType
getType():Promise<string>;
getType():Promise\<string>;
Obtains the type of this component.
......@@ -519,7 +519,7 @@ Obtains the type of this component.
| Type | Description |
| ---------------- | ------------------------------- |
| Promise<string>; | Promise used to return the component type.|
| Promise\<string>; | Promise used to return the component type.|
**Example**
......@@ -533,7 +533,7 @@ async function demo() {
### UiComponent.isClickable
isClickable():Promise<bool>;
isClickable():Promise\<bool>;
Obtains the clickable status of this component.
......@@ -545,7 +545,7 @@ Obtains the clickable status of this component.
| Type | Description |
| -------------- | ----------------------------------- |
| Promise<bool>; | Promise used to return the clickable status of the component.|
| Promise\<bool>; | Promise used to return the clickable status of the component.|
**Example**
......@@ -564,7 +564,7 @@ async function demo() {
### UiComponent.isScrollable
isScrollable():Promise<bool>;
isScrollable():Promise\<bool>;
Obtains the scrollable status of this component.
......@@ -576,7 +576,7 @@ Obtains the scrollable status of this component.
| Type | Description |
| -------------- | ----------------------------------- |
| Promise<bool>; | Promise used to return the scrollable status of the component.|
| Promise\<bool>; | Promise used to return the scrollable status of the component.|
**Example**
......@@ -596,7 +596,7 @@ async function demo() {
### UiComponent.isEnabled
isEnabled():Promise<bool>;
isEnabled():Promise\<bool>;
Obtains the enable status of this component.
......@@ -608,7 +608,7 @@ Obtains the enable status of this component.
| Type | Description |
| -------------- | ----------------------------- |
| Promise<bool>; | Promise used to return the enable status of the component.|
| Promise\<bool>; | Promise used to return the enable status of the component.|
**Example**
......@@ -628,7 +628,7 @@ async function demo() {
### UiComponent.isFocused
isFocused():Promise<bool>;
isFocused():Promise\<bool>;
Obtains the focused status of this component.
......@@ -640,7 +640,7 @@ Obtains the focused status of this component.
| Type | Description |
| -------------- | --------------------------------- |
| Promise<bool>; | Promise used to return the focused status of the component.|
| Promise\<bool>; | Promise used to return the focused status of the component.|
**Example**
......@@ -659,7 +659,7 @@ async function demo() {
### UiComponent.isSelected
isSelected():Promise<bool>;
isSelected():Promise\<bool>;
Obtains the selected status of this component.
......@@ -671,7 +671,7 @@ Obtains the selected status of this component.
| Type | Description |
| -------------- | ----------------------------------- |
| Promise<bool>; | Promise used to return the selected status of the component.|
| Promise\<bool>; | Promise used to return the selected status of the component.|
**Example**
......@@ -690,7 +690,7 @@ async function demo() {
### UiComponent.inputText
inputText(text: string):Promise<void>;
inputText(text: string):Promise\<void>;
Enters text into this component (available for text boxes).
......@@ -716,7 +716,7 @@ async function demo() {
### UiComponent.scrollSearch
scrollSearch(by:By):Promise<UiComponent>;
scrollSearch(by:By):Promise\<UiComponent>;
Scrolls on this component to search for the target component (available for lists).
......@@ -734,7 +734,7 @@ Scrolls on this component to search for the target component (available for list
| Type | Description |
| --------------------- | ----------------------------------- |
| Promise<UiComponent>; | Promise used to return the target component.|
| Promise\<UiComponent>; | Promise used to return the target component.|
**Example**
......@@ -777,7 +777,7 @@ async function demo() {
### UiDriver.delayMs
delayMs(duration:number):Promise<void>;
delayMs(duration:number):Promise\<void>;
Delays this **UiDriver** object within the specified duration.
......@@ -802,7 +802,7 @@ async function demo() {
### UiDriver.findComponent
findComponent(by:By):Promise<UiComponent>;
findComponent(by:By):Promise\<UiComponent>;
Searches this **UiDriver** object for the target component that has the given attributes.
......@@ -820,7 +820,7 @@ Searches this **UiDriver** object for the target component that has the given at
| Type | Description |
| --------------------- | ------------------------------- |
| Promise<UiComponent>; | Promise used to return the found component.|
| Promise\<UiComponent>; | Promise used to return the found component.|
**Example**
......@@ -833,7 +833,7 @@ async function demo() {
### UiDriver.findComponents
findComponents(by:By):Promise<Array<UiComponent>>;
findComponents(by:By):Promise\<Array\<UiComponent>>;
Searches this **UiDriver** object for all components that match the given attributes.
......@@ -851,7 +851,7 @@ Searches this **UiDriver** object for all components that match the given attrib
| Type | Description |
| ---------------------------- | ------------------------------------- |
| Promise<Array<UiComponent>>; | Promise used to return a list of found components.|
| Promise\<Array\<UiComponent>>; | Promise used to return a list of found components.|
**Example**
......@@ -864,7 +864,7 @@ async function demo() {
### UiDriver.assertComponentExist
assertComponentExist(by:By):Promise<void>;
assertComponentExist(by:By):Promise\<void>;
Asserts that a component that matches the given attributes exists on the current page. If the component does not exist, the API throws a JS exception, causing the current test case to fail.
......@@ -889,7 +889,7 @@ async function demo() {
### UiDriver.pressBack
pressBack():Promise<void>;
pressBack():Promise\<void>;
Presses the Back button on this **UiDriver** object.
......@@ -908,7 +908,7 @@ async function demo() {
### UiDriver.triggerKey
triggerKey(keyCode:number):Promise<void>;
triggerKey(keyCode:number):Promise\<void>;
Triggers the key of this **UiDriver** object that matches the given key code.
......@@ -933,7 +933,7 @@ async function demo() {
### UiDriver.click
click(x:number,y:number):Promise<void>;
click(x:number,y:number):Promise\<void>;
Clicks a specific point of this **UiDriver** object based on the given coordinates.
......@@ -958,7 +958,7 @@ async function demo() {
### UiDriver.doubleClick
doubleClick(x:number,y:number):Promise<void>;
doubleClick(x:number,y:number):Promise\<void>;
Double-clicks a specific point of this **UiDriver** object based on the given coordinates.
......@@ -983,7 +983,7 @@ async function demo() {
### UiDriver.longClick
longClick(x:number,y:number):Promise<void>;
longClick(x:number,y:number):Promise\<void>;
Long-clicks a specific point of this **UiDriver** object based on the given coordinates.
......@@ -1008,7 +1008,7 @@ async function demo() {
### UiDriver.swipe
swipe(startx:number,starty:number,endx:number,endy:number):Promise<void>;
swipe(startx:number,starty:number,endx:number,endy:number):Promise\<void>;
Swipes from the start point to the end point of this **UiDriver** object based on the given coordinates.
......@@ -1034,7 +1034,7 @@ async function demo() {
### UiDriver.screenCap
screenCap(savePath:string):Promise<bool>;
screenCap(savePath:string):Promise\<bool>;
Captures the current screen of this **UiDriver** object and saves it as a PNG image to the given save path.
......
......@@ -9,7 +9,7 @@ import zlib from '@ohos.zlib';
```
## zlib.zipFile
zipFile(inFile:string, outFile:string, options: Options): Promise<void>;
zipFile(inFile:string, outFile:string, options: Options): Promise\<void>;
Zips a file. This API uses a promise to return the result.
**System capability**: SystemCapability.BundleManager.Zlib
......@@ -78,7 +78,7 @@ zlib.zipFile(inFile , unzipDir, options).then((data) => {
## zlib.unzipFile
unzipFile(inFile:string, outFile:string, options: Options): Promise<void>;
unzipFile(inFile:string, outFile:string, options: Options): Promise\<void>;
Unzips a file. This API uses a promise to return the result.
......
......@@ -9,14 +9,14 @@
| API | Description |
| ------------------------------------------------------------ | ---------------- |
| function generateKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback<HuksResult>) : void; | Generates a private key. This method uses an asynchronous callback to return the result. |
| function generateKey(keyAlias: string, options: HuksOptions) : Promise<HuksResult>; | Generates a private key. This method uses a promise to return the result. |
| function exportKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback<HuksResult>) : void; | Exports the public key. This method uses an asynchronous callback to return the result. |
| function exportKey(keyAlias: string, options: HuksOptions) : Promise<HuksResult>; | Exports the public key. This method uses a promise to return the result. |
| function isKeyExist(keyAlias: string, options: HuksOptions, callback: AsyncCallback<boolean>) : void; | Check whether a key exists. This method uses an asynchronous callback to return the result.|
| function isKeyExist(keyAlias: string, options: HuksOptions) : Promise<boolean>; | Check whether a key exists. This method uses a promise to return the result.|
| function deleteKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback<HuksResult>) : void; | Deletes a key. This method uses an asynchronous callback to return the result. |
| function deleteKey(keyAlias: string, options: HuksOptions) : Promise<HuksResult>; | Deletes a key. This method uses a promise to return the result. |
| function generateKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback\<HuksResult>) : void; | Generates a private key. This method uses an asynchronous callback to return the result. |
| function generateKey(keyAlias: string, options: HuksOptions) : Promise\<HuksResult>; | Generates a private key. This method uses a promise to return the result. |
| function exportKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback\<HuksResult>) : void; | Exports the public key. This method uses an asynchronous callback to return the result. |
| function exportKey(keyAlias: string, options: HuksOptions) : Promise\<HuksResult>; | Exports the public key. This method uses a promise to return the result. |
| function isKeyExist(keyAlias: string, options: HuksOptions, callback: AsyncCallback\<boolean>) : void; | Check whether a key exists. This method uses an asynchronous callback to return the result.|
| function isKeyExist(keyAlias: string, options: HuksOptions) : Promise\<boolean>; | Check whether a key exists. This method uses a promise to return the result.|
| function deleteKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback\<HuksResult>) : void; | Deletes a key. This method uses an asynchronous callback to return the result. |
| function deleteKey(keyAlias: string, options: HuksOptions) : Promise\<HuksResult>; | Deletes a key. This method uses a promise to return the result. |
## How to Develop
......
......@@ -160,7 +160,7 @@ The following is an example for you to use the :active pseudo-class to control t
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> Pseudo-classes are not supported for the <popup> component and its child components, including, <dialog>, <menu>, <option>, and <picker>.
> Pseudo-classes are not supported for the \<popup> component and its child components, including, \<dialog>, \<menu>, \<option>, and \<picker>.
## Precompiled Styles
......
......@@ -358,7 +358,7 @@ export default {
## Logic Control Block
<block> makes loop rendering and conditional rendering more flexible. A <block> will not be compiled as a real component. **NOTE** that the <block> tag supports only the for and if attributes.
\<block> makes loop rendering and conditional rendering more flexible. A \<block> will not be compiled as a real component. **NOTE** that the \<block> tag supports only the for and if attributes.
```
......
......@@ -141,7 +141,7 @@ build() {
$$ supports two-way binding for simple variables and @State, @Link, and @Prop decorated variables.
Currently, $$ supports only the rendering between the show parameter of the bindPopup attribute and the @State decorated variable, and the checked attribute of the <Radio> component.
Currently, $$ supports only the rendering between the show parameter of the bindPopup attribute and the @State decorated variable, and the checked attribute of the \<Radio> component.
```
@Entry
......
......@@ -5,13 +5,13 @@ The diet application allows food on the home page to display in list or grid mod
1. Import the Category enumeration type to the FoodCategoryList page.
```
import { Category, FoodData } from '../model/FoodData'
```
2. Create the FoodCategoryList and FoodCategory components. The FoodCategoryList component is used as the entry component of the new page, and the initializeOnStartup method is invoked in the entry component.
```
@Component
struct FoodList {
......@@ -40,7 +40,7 @@ The diet application allows food on the home page to display in list or grid mod
```
3. Create the showList member variable in the FoodCategoryList component to control the rendering switchover between the list layout and grid layout. The conditional rendering statement if...else... is required.
```
@Entry
@Component
......@@ -61,7 +61,7 @@ The diet application allows food on the home page to display in list or grid mod
```
4. In the upper right corner of the page, create an icon for switching between the list and grid layouts. Set the stack alignment mode to TopEnd, top-bottom alignment. Create an image component, and set the click event, that is, negation of showList.
```
@Entry
@Component
......@@ -89,7 +89,7 @@ The diet application allows food on the home page to display in list or grid mod
```
5. Add the @State decorator. After you click the switch tab in the upper right corner, the page does not change. This is because the showList does not have state data and its change does not trigger the page refresh. You need to add the @State decorator to make it state data. The change of the @State decorator will cause re-rendering of the component where the decorator is located.
```
@Entry
@Component
......@@ -121,8 +121,8 @@ The diet application allows food on the home page to display in list or grid mod
![en-us_image_0000001222807800](figures/en-us_image_0000001222807800.gif)
6. Create a tab to display all food categories (All). Create the <Tabs> component and its child component TabContent in the FoodCategory component, and set tabBar to All. Set the width of the TabBars to 280 and the layout mode to Scrollable. This means that the TabBars can be scrolled when the total length exceeds 280. The <Tabs> component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a TabContent.
6. Create a tab to display all food categories (All). Create the \<Tabs> component and its child component TabContent in the FoodCategory component, and set tabBar to All. Set the width of the TabBars to 280 and the layout mode to Scrollable. This means that the TabBars can be scrolled when the total length exceeds 280. The \<Tabs> component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a TabContent.
```
@Component
struct FoodCategory {
......@@ -142,7 +142,7 @@ The diet application allows food on the home page to display in list or grid mod
![en-us_image_0000001267647881](figures/en-us_image_0000001267647881.png)
7. Create the FoodGrid component to function as a child component of the TabContent component.
```
@Component
struct FoodGrid {
......@@ -168,7 +168,7 @@ The diet application allows food on the home page to display in list or grid mod
```
8. Implement a 2 x 6 grid layout (12 food data resources in total). Create a Grid component, and set columnsTemplate to ('1fr 1fr'), rowsTemplate to ('1fr 1fr 1fr 1fr 1fr 1fr'), and both rowsGap and columnsGap to 8. Create a Scroll component so that it can be slid.
```
@Component
struct FoodGrid {
......@@ -192,7 +192,7 @@ The diet application allows food on the home page to display in list or grid mod
```
9. Create a FoodGridItem component to display the food image, name, and calories and implement the UI layout. The FoodGridItem component is a child component of the GridItem component. The height of each FoodGridItem is 184, and the line spacing is 8. The total height of the Grid component is calculated as follows: (184 + 8) x 6 – 8 = 1144.
```
@Component
struct FoodGridItem {
......@@ -250,7 +250,7 @@ The diet application allows food on the home page to display in list or grid mod
![en-us_image_0000001223287708](figures/en-us_image_0000001223287708.gif)
10. Create the Category.Vegetable, Category.Fruit, Category.Nut, Category.SeaFood, and Category.Dessert tabs.
```
@Component
struct FoodCategory {
......@@ -290,7 +290,7 @@ The diet application allows food on the home page to display in list or grid mod
```
11. Set the number of rows and height of grids for different food categories. Because the number of foods varies according to the category, the ''1fr 1fr 1fr 1fr 1fr 1fr ' constant cannot be used to set the number of rows to 6.
Create member variables gridRowTemplate and HeightValue, and set the number of grid rows and height by using these member variables.
Create member variables gridRowTemplate and HeightValue, and set the number of grid rows and height by using these member variables.
```
......@@ -322,7 +322,7 @@ The diet application allows food on the home page to display in list or grid mod
Invoke the aboutToAppear API to calculate the number of rows (gridRowTemplate) and height (heightValue).
```
aboutToAppear() {
var rows = Math.round(this.foodItems.length / 2);
......@@ -335,7 +335,7 @@ The diet application allows food on the home page to display in list or grid mod
![en-us_image_0000001267647885](figures/en-us_image_0000001267647885.png)
```
@Component
struct FoodGrid {
......
......@@ -5,7 +5,7 @@ Use the List component and ForEach loop to build the food category list layout.
1. Create a page file named FoodCategoryList.ets in the pages directory, rename the index.ets file FoodDetail.ets, and add the renamed file to the "pages" tag in the config.json file. The first page under the tag is the home page.
```
"js": [
{
......@@ -16,8 +16,8 @@ Use the List component and ForEach loop to build the food category list layout.
]
```
2. Create a List component named FoodList as the page entry point. Then, add a ListItem component named FoodListItem as its child component. The List component is used to display data of the same type. Its child component <ListItem> is used to display specific items in the list.
2. Create a List component named FoodList as the page entry point. Then, add a ListItem component named FoodListItem as its child component. The List component is used to display data of the same type. Its child component \<ListItem> is used to display specific items in the list.
```
@Component
struct FoodListItem {
......@@ -38,14 +38,14 @@ Use the List component and ForEach loop to build the food category list layout.
```
3. Import the FoodData class and initializeOnStartup method.
```
import { FoodData } from '../model/FoodData'
import { initializeOnStartup } from '../model/FoodDataModels'
```
4. Configure the FoodList and FoodListItem components to pass values. Create a member variable named foodItems of the FoodData[] type in the FoodList component and invoke the initializeOnStartup method to assign a value to the variable. Create a member variable foodItem of the FoodData type in the FoodListItem component. Pass the foodItems[0] of the first element in the parent foodItems array as a parameter to FoodListItem.
```
import { FoodData } from '../model/FoodData'
import { initializeOnStartup } from '../model/FoodDataModels'
......@@ -71,7 +71,7 @@ Use the List component and ForEach loop to build the food category list layout.
```
5. Declare the UI layout of the FoodListItem child component. Create a Flex component, including the food image thumbnail, food name, and calories in the food.
```
import { FoodData } from '../model/FoodData'
import { initializeOnStartup } from '../model/FoodDataModels'
......@@ -115,7 +115,7 @@ Use the List component and ForEach loop to build the food category list layout.
![en-us_image_0000001267887833](figures/en-us_image_0000001267887833.png)
6. Create two FoodListItem objects. Create two FoodListItem objects in the List component and pass the first element this.foodItems[0] and the second element foodItem: this.foodItems[1] to the FoodListItem.
```
import { FoodData } from '../model/FoodData'
import { initializeOnStartup } from '../model/FoodDataModels'
......@@ -162,7 +162,7 @@ Use the List component and ForEach loop to build the food category list layout.
![en-us_image_0000001267767849](figures/en-us_image_0000001267767849.png)
7. Import ForEach so that you do not need to create FoodListItem objects one by one.
```
ForEach(
arr: any[], // Array to be iterated
......@@ -175,7 +175,7 @@ Use the List component and ForEach loop to build the food category list layout.
Traverse the foodItems array to cyclically create the ListItem component. Pass each item in foodItems as a parameter to the FoodListItem component.
```
ForEach(this.foodItems, item => {
ListItem() {
......@@ -186,7 +186,7 @@ Use the List component and ForEach loop to build the food category list layout.
The code is as follows:
```
import { FoodData } from '../model/FoodData'
import { initializeOnStartup } from '../model/FoodDataModels'
......@@ -230,7 +230,7 @@ Use the List component and ForEach loop to build the food category list layout.
```
8. Add a title for the FoodList.
```
@Entry
@Component
......
......@@ -10,7 +10,7 @@ For details about the APIs, see [Display](../reference/apis/js-apis-display.md).
## How to Develop
Call **getDefaultDisplay(): Promise<Display>** to obtain the default display object. An example code snippet is as follows:
Call **getDefaultDisplay(): Promise\<Display>** to obtain the default display object. An example code snippet is as follows:
```js
import display from '@ohos.display' // Import the module.
......
......@@ -24,13 +24,13 @@ API | Description
---------------------------------------------------------|-----------------------------------------
function startWork(work: WorkInfo): boolean; | Starts a Work Scheduler task.
function stopWork(work: WorkInfo, needCancel?: boolean): boolean; | Stops a Work Scheduler task.
function getWorkStatus(workId: number, callback: AsyncCallback<WorkInfo>): void;| Obtains the status of a Work Scheduler task. This method uses an asynchronous callback to return the result.
function getWorkStatus(workId: number): Promise<WorkInfo>; | Obtains the status of a Work Scheduler task. This method uses a promise to return the result.
function obtainAllWorks(callback: AsyncCallback<void>): Array<WorkInfo>;| Obtains Work Scheduler tasks. This method uses an asynchronous callback to return the result.
function obtainAllWorks(): Promise<Array<WorkInfo>>;| Obtains Work Scheduler tasks. This method uses a promise to return the result.
function getWorkStatus(workId: number, callback: AsyncCallback\<WorkInfo>): void;| Obtains the status of a Work Scheduler task. This method uses an asynchronous callback to return the result.
function getWorkStatus(workId: number): Promise\<WorkInfo>; | Obtains the status of a Work Scheduler task. This method uses a promise to return the result.
function obtainAllWorks(callback: AsyncCallback\<void>): Array\<WorkInfo>;| Obtains Work Scheduler tasks. This method uses an asynchronous callback to return the result.
function obtainAllWorks(): Promise<Array\<WorkInfo>>;| Obtains Work Scheduler tasks. This method uses a promise to return the result.
function stopAndClearWorks(): boolean;| Stops and clears Work Scheduler tasks.
function isLastWorkTimeOut(workId: number, callback: AsyncCallback<void>): boolean;| Checks whether the last execution of the specified task has timed out. This method uses an asynchronous callback to return the result. It is applicable to repeated tasks.
function isLastWorkTimeOut(workId: number): Promise<boolean>;| Checks whether the last execution of the specified task has timed out. This method uses a promise to return the result. It is applicable to repeated tasks.
function isLastWorkTimeOut(workId: number, callback: AsyncCallback\<void>): boolean;| Checks whether the last execution of the specified task has timed out. This method uses an asynchronous callback to return the result. It is applicable to repeated tasks.
function isLastWorkTimeOut(workId: number): Promise\<boolean>;| Checks whether the last execution of the specified task has timed out. This method uses a promise to return the result. It is applicable to repeated tasks.
**Table 2** WorkInfo parameters
......@@ -61,7 +61,7 @@ function onWorkStop(work: WorkInfo): void; | Triggered when the Work Scheduler t
**Implementing WorkSchedulerExtensionAbility**
import WorkSchedulerExtensionAbility from '@ohos.WorkSchedulerExtensionAbility';
export default class MyWorkSchedulerExtensionAbility extends WorkSchedulerExtensionAbility {
onWorkStart(workInfo) {
console.log('MyWorkSchedulerExtensionAbility onWorkStart' + JSON.stringify(workInfo));
......@@ -77,7 +77,7 @@ function onWorkStop(work: WorkInfo): void; | Triggered when the Work Scheduler t
import workScheduler from '@ohos.workScheduler';
let workInfo = {
workId: 1,
batteryLevel:50,
......@@ -95,7 +95,7 @@ function onWorkStop(work: WorkInfo): void; | Triggered when the Work Scheduler t
import workScheduler from '@ohos.workScheduler';
let workInfo = {
workId: 1,
batteryLevel:50,
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册