> The initial APIs of this module are supported since API version 9. API version 9 is a canary version for trial use. The APIs of this version may be unstable.
The **WorkSchedulerExtensionAbility** module provides callbacks for Work Scheduler tasks.
When developing an application, you can override the APIs of this module and add your own task logic to the APIs.
> **NOTE**
>
> - The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> - The APIs of this module can be used only in the stage model.
> The initial APIs of this module are supported since API version 9. API version 9 is a canary version for trial use. The APIs of this version may be unstable.
The **workScheduler** module provides the APIs for registering, canceling, and querying Work Scheduler tasks, which do not have real-time constraints.
The system executes Work Scheduler tasks at an appropriate time, subject to the storage space, power consumption, temperature, and more.
> **NOTE**
>
> - The initial APIs of this module are supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> - The APIs of this module can be used only in the stage model.
## Modules to Import
```
```js
importworkSchedulerfrom'@ohos.workScheduler'
```
...
...
@@ -31,7 +37,7 @@ Instructs the **WorkSchedulerService** to add the specified task to the executio
**Example**
```
```js
letworkInfo={
workId:1,
batteryLevel:50,
...
...
@@ -67,7 +73,7 @@ Instructs the **WorkSchedulerService** to stop the specified task.
**Example**
```
```js
letworkInfo={
workId:1,
batteryLevel:50,
...
...
@@ -97,7 +103,7 @@ Obtains the latest task status. This API uses an asynchronous callback to return
@@ -261,7 +267,7 @@ Checks whether the last execution of the specified task timed out. This API uses
**Example**
```
```js
workScheduler.isLastWorkTimeOut(500)
.then(res=>{
console.info('workschedulerLog isLastWorkTimeOut success, data is:'+res);
...
...
@@ -272,27 +278,27 @@ Checks whether the last execution of the specified task timed out. This API uses
```
## WorkInfo
Provides detailed information about the task.
Provides detailed information about the task. For details about the constraints on configuring **WorkInfo**, see [Work Scheduler Overview](../../task-management/work-scheduler-overview.md).
| src | string \|[PixelMap](../apis/js-apis-image.md#pixelmap7)\|[Resource](../../ui/ts-types.md) | Yes | - | Image source. Both local and online images are supported.<br>When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>\- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability. |
| Name | Type | Mandatory | Default Value | Description |
| src | string\|[PixelMap](../apis/js-apis-image.md#pixelmap7)\|[Resource](../../ui/ts-types.md#resource-type) | Yes | - | Image source. Both local and online images are supported.<br>When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. \ The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability.|
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | Whether the image is repeated.<br>**NOTE**<br>This attribute is not applicable to SVG images. |
| interpolation | [ImageInterpolation](#imageinterpolation)| ImageInterpolation.None | Interpolation effect of the image. This attribute is valid only when the image is zoomed in.<br>**NOTE**<br>This attribute is not applicable to SVG images or**PixelMap** objects. |
| renderMode | [ImageRenderMode](#imagerendermode) | ImageRenderMode.Original | Rendering mode of the image.<br>**NOTE**<br>This attribute is not applicable to SVG images. |
| alt | string \|[Resource](../../ui/ts-types.md#resource-type) | - | Placeholder image displayed during loading. Both local and Internet URIs are supported. |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat)| NoRepeat | Whether the image is repeated.<br>**NOTE**<br>This attribute is not applicable to SVG images. |
| interpolation | [ImageInterpolation](#imageinterpolation) | ImageInterpolation.None | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.<br>**NOTE**<br>> This attribute is not applicable to SVG images.<br>> This attribute is not applicable to**PixelMap** objects. |
| renderMode | [ImageRenderMode](#imagerendermode)| ImageRenderMode.Original | Rendering mode of the image.<br>**NOTE**<br>This attribute is not applicable to SVG images. |
| sourceSize | {<br>width: number,<br>height: number<br>} | - | Decoding size of the image. The original image is decoded into an image of the specified size, in px.<br>**NOTE**<br>This attribute is not applicable to **PixelMap** objects. |
| syncLoad<sup>8+</sup> | boolean | false | Whether to load images synchronously. By default, images are loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed. |
### ImageFit
| Name | Description |
| --------- | -------------------------------- |
| Cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries.|
| Contain | The image is scaled with its aspect ratio retained for the content to be completely displayed within the display boundaries. |
| Fill | The image is scaled to fill the display area, and its aspect ratio is not retained. |
| None | The image is displayed in its original size. Generally, this enum is used together with the **objectRepeat** attribute.|
| ScaleDown | The image is displayed with its aspect ratio retained, in a size smaller than or equal to the original size. |
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Flex>** component allows for elastic layout of child components.
> **NOTE**
> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> - The **\<Flex>** component adapts the layout of flex items to comply with the **flexShrink** and **flexGrow** settings. This may affect the performance. Therefore, you are advised to use **[Column](ts-container-column.md)** or **[Row](ts-container-row.md)** instead under scenarios where consistently high performance is required.
| direction | FlexDirection | No | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis. |
| wrap | FlexWrap | No | FlexWrap.NoWrap | Whether the **\<Flex>** component has a single line or multiple lines. |
| justifyContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the main axis. |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | No | ItemAlign.Stretch | Alignment mode of the child components in the **\<Flex>** component along the cross axis. |
| alignContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **\<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. |
| Name | Type | Mandatory | Default Value | Description |
| direction | FlexDirection | No | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis. |
| wrap | FlexWrap | No | FlexWrap.NoWrap | Whether the **\<Flex>** component has a single line or multiple lines. |
| justifyContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the main axis. |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums)| No | ItemAlign.Stretch | Alignment mode of the child components in the **\<Flex>** component along the cross axis. |
| alignContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**.|
- FlexDirection enums
| Name | Description |
| -------- | -------- |
| Row | The child components are arranged in the same direction as the main axis runs along the rows. |
| RowReverse | The child components are arranged opposite to the **Row** direction. |
| Column | The child components are arranged in the same direction as the main axis runs down the columns. |
| ColumnReverse | The child components are arranged opposite to the **Column** direction.|
| Name | Description |
| ------------- | ---------------- |
| Row | The child components are arranged in the same direction as the main axis runs along the rows. |
| RowReverse | The child components are arranged opposite to the **Row** direction. |
| Column | The child components are arranged in the same direction as the main axis runs down the columns. |
| ColumnReverse | The child components are arranged opposite to the **Column** direction.|
- FlexWrap enums
| Name | Description |
| -------- | -------- |
| NoWrap | The child components in the **<Flex>** component are arranged in a single line, and they may overflow. |
| Wrap | The child components in the **<Flex>** component are arranged in multiple lines, and they may overflow. |
| WrapReverse | The child components in the **<Flex>** component are reversely arranged in multiple lines, and they may overflow. |
| NoWrap | The child components in the **\<Flex>** component are arranged in a single line, and they cannot overflow. |
| Wrap | The child components in the **\<Flex>** component are arranged in multiple lines, and they may overflow. |
| WrapReverse | The child components in the **\<Flex>** component are reversely arranged in multiple lines, and they may overflow.|
- FlexAlign enums
| Name | Description |
| -------- | -------- |
| Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one. |
| Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end. |
| End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one. |
| SpaceBetween | The child components are evenly distributed along the main axis. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. |
| SpaceAround | The child components are evenly distributed along the main axis, with a half-size space on either end. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. |
| SpaceEvenly | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same. |
| Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one.|
| Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end.|
| End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one.|
| SpaceBetween | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. |
| SpaceAround | The child components are evenly distributed along the main axis. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. |
| SpaceEvenly | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same.|
| controller | [SwiperController](#swipercontroller) | No | Controller bound to the component to control the page switching.<br>Default value: **null** |
## Attributes
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| index | number | 0 | Index of the child component currently displayed in the container. |
| autoPlay | boolean | false | Whether to enable automatic playback for child component switching. If this attribute is **true**, the indicator dots do not take effect. |
| interval | number | 3000 | Interval for automatic playback, in ms. |
| indicator | boolean | true | Whether to enable the navigation dots. |
| loop | boolean | true | Whether to enable loop playback.<br>The value **true** means to enable loop playback. When **LazyForEach** is used, it is recommended that the number of the components to load exceed 5. |
| duration | number | 400 | Duration of the animation for switching child components, in ms. |
| itemSpace | Length | 0 | Space between child components. |
| cachedCount<sup>8+</sup> | number | 1 | Number of child components to be cached. |
| disableSwipe<sup>8+</sup> | boolean | false | Whether to disable the swipe feature. |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md)\| Curves | Curve.Ease | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using APIs provided by the interpolation calculation module. |
| indicatorStyle<sup>8+</sup> | {<br/>left?: Length,<br/>top?: Length,<br/>right?: Length,<br/>bottom?: Length,<br/>size?: Length,<br/>color?: Color,<br/>selectedColor?: Color<br/>} | - | Style of the navigation dots indicator.<br/>- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br/>- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br/>- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br/>- **bottom**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br/>- **size**: diameter of the navigation dots indicator.<br/>- **color**: color of the navigation dots indicator.<br/>- **selectedColor**: color of the selected navigation dot. |
## Attributes
[Menu control](ts-universal-attributes-menu.md) is not supported.
| index | number | Index of the child component currently displayed in the container.<br>Default value: **0** |
| autoPlay | boolean | Whether to enable automatic playback for child component switching. If this attribute is **true**, the navigation dots indicator does not take effect.<br>Default value: **false** |
| interval | number | Interval for automatic playback, in ms.<br>Default value: **3000** |
| indicator | boolean | Whether to enable the navigation dots indicator.<br>Default value: **true** |
| loop | boolean | Whether to enable loop playback.<br>The value **true** means to enable loop playback. When LazyForEach is used, it is recommended that the number of the components to load exceed 5.<br>Default value: **true**|
| duration | number | Duration of the animation for switching child components, in ms.<br>Default value: **400** |
| itemSpace | Length | Space between child components.<br>Default value: **0** |
| displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**|
| cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1** |
| disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md#Curve)\| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md#curve-enums). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module.<br>Default value: **Curve.Ease**|
| indicatorStyle<sup>8+</sup> | {<br>left?: Length,<br>top?: Length,<br>right?: Length,<br>bottom?: Length,<br>size?: Length,<br>color?: Color,<br>selectedColor?: Color<br>} | Style of the navigation dots indicator.<br>- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>- **size**: diameter of the navigation dots indicator.<br>- **color**: color of the navigation dots indicator.<br>- **selectedColor**: color of the selected navigation dot.|
| displayCount<sup>8+</sup> | number\|string | Number of elements to display.<br>Default value: **1** |
| effectMode<sup>8+</sup> | EdgeEffect | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
| Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produce a bounce effect when the user releases their finger. |
| Fade | Fade effect. When at one of the edges, the component can move beyond the bounds through touches, and produce a fade effect along the way; when the user releases their finger, the fade changes. |
| None | No effect. When at one of the edges, the component cannot move beyond the bounds. |
## SwiperController
Controller of the **<Swiper\>** component. You can bind this object to the **<Swiper\>** component and use it to control page switching.
Controller of the **\<Swiper>** component. You can bind this object to the **<Swiper>** component and use it to control page switching.
### showNext
showNext(): void
Turns to the next page.
### showPrevious
showPrevious(): void
| Name | Description |
| -------- | -------- |
| showNext():void | Turns to the next page. |
| showPrevious():void | Turns to the previous page. |
Turns to the previous page.
### finishAnimation
finishAnimation(callback?: () => void): void
Stops this animation.
**Parameters**
| Name | Type | Mandatory.| Description|
| --------- | ---------- | ------ | -------- |
| callback | () => void | Yes | Callback invoked when the animation stops.|
## Events
| Name | Description |
| -------- | -------- |
| onChange( index: number) => void | Triggered when the index of the currently displayed component changes. |
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **<Tabs\>** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**
>
> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
...
...
@@ -13,23 +15,23 @@ None
## Attributes
| Name | Type | Default Value | Description |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| visibility | Visibility | Visibility.Visible | Whether the component is shown or hidden. |
| visibility | Visibility | Visibility.Visible | Whether the component is visible. Note that even if a component is hidden, it needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../ui/ts-rending-control-syntax-if-else.md) instead under scenarios where consistently high performance is required. |
- Visibility enums
| Name | Description |
| Name| Description|
| -------- | -------- |
| Hidden | The component is hidden, and a placeholder is used for it in the layout. |
| Visible | The component is shown. |
| None | The component is hidden. It is not involved in the layout, and no placeholder is used for it. |
| Hidden | The component is hidden, and a placeholder is used for it in the layout.|
| Visible | The component is visible.|
| None | The component is hidden. It is not involved in the layout, and no placeholder is used for it.|
| onClick(callback: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about the event parameters, see [ClickEvent](#clickevent). |
| onClick(callback: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about the event parameters, see **ClickEvent**. |
## ClickEvent
...
...
@@ -41,8 +41,8 @@ None
| -------- | -------- | -------- |
| width | number | Width of the target element, in vp. |
| height | number | Height of the target element, in vp. |
| position | [Position](#position8) | Position of the upper left corner of the target element relative to that of the parent element. |
| globalPosition | [Position](#position8) | Position of the upper left corner of the target element relative to that of the page. |
| position | Position | Position of the upper left corner of the target element relative to that of the parent element. |
| globalPosition | Position | Position of the upper left corner of the target element relative to that of the page. |
@@ -21,12 +21,12 @@ ArkUI is a UI development framework that provides what you'll need to develop ap
- Drawing: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts.
- Interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability.
- Platform API channel: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript APIs in a unified style.
- Two development paradigms: ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
- Two development paradigms: ArkUI comes with two development paradigms: TypeScript-based declarative development paradigm (declarative development paradigm for short) and JavaScript-based web-like development paradigm (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
| Development Paradigm | Description | Applicable To | Intended Audience |
| -------- | -------- | -------- | -------- |
| Web-like development paradigm | Uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. | Small- and medium-sized applications and service widgets with simple UIs | Frontend web developers |
| Declarative development paradigm | Uses the TypeScript programming language and extends the declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and state management. The programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. With type annotations in TypeScript, you can enforce type checking at compile time. | Applications involving technological sophistication and teamwork | Mobile application and system application developers |
| Web-like development paradigm | Uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. | Small- and medium-sized applications and service widgets with simple UIs | Frontend web developers |
