提交 d79722db 编写于 作者: 徐杰

Merge remote-tracking branch 'origin/master' into tiaodan_yafei_0613

Change-Id: I921eb443b0faf6e61ba51ac8d6eba33fdc860571
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
- [Interpretation of the Application Model](application-model-description.md) - [Interpretation of the Application Model](application-model-description.md)
- Stage Model Development - Stage Model Development
- [Stage Model Development Overview](stage-model-development-overview.md) - [Stage Model Development Overview](stage-model-development-overview.md)
- Stage Mode Application Components - Stage Model Application Components
- [Application- or Component-Level Configuration](application-component-configuration-stage.md) - [Application- or Component-Level Configuration](application-component-configuration-stage.md)
- UIAbility Component - UIAbility Component
- [UIAbility Component Overview](uiability-overview.md) - [UIAbility Component Overview](uiability-overview.md)
...@@ -56,12 +56,13 @@ ...@@ -56,12 +56,13 @@
- [Using Explicit Want to Start an Application Component](ability-startup-with-explicit-want.md) - [Using Explicit Want to Start an Application Component](ability-startup-with-explicit-want.md)
- [Using Implicit Want to Open a Website](ability-startup-with-implicit-want.md) - [Using Implicit Want to Open a Website](ability-startup-with-implicit-want.md)
- [Using Want to Share Data Between Applications](data-share-via-want.md) - [Using Want to Share Data Between Applications](data-share-via-want.md)
- [Component Startup Rules](component-startup-rules.md) - [Component Startup Rules (Stage Model)](component-startup-rules.md)
- Inter-Device Application Component Interaction (Continuation) - Inter-Device Application Component Interaction (Continuation)
- [Continuation Overview](inter-device-interaction-hop-overview.md) - [Continuation Overview](inter-device-interaction-hop-overview.md)
- [Cross-Device Migration (for System Applications Only)](hop-cross-device-migration.md) - [Cross-Device Migration (for System Applications Only)](hop-cross-device-migration.md)
- [Multi-device Collaboration (for System Applications Only)](hop-multi-device-collaboration.md) - [Multi-device Collaboration (for System Applications Only)](hop-multi-device-collaboration.md)
- [Subscribing to System Environment Variable Changes](subscribe-system-environment-variable-changes.md) - [Subscribing to System Environment Variable Changes](subscribe-system-environment-variable-changes.md)
- [Setting Atomic Services to Support Sharing](atomic-services-support-sharing.md)
- Process Model - Process Model
- [Process Model Overview](process-model-stage.md) - [Process Model Overview](process-model-stage.md)
- Common Events - Common Events
...@@ -81,12 +82,12 @@ ...@@ -81,12 +82,12 @@
- Mission Management - Mission Management
- [Mission Management Scenarios](mission-management-overview.md) - [Mission Management Scenarios](mission-management-overview.md)
- [Mission and Launch Type](mission-management-launch-type.md) - [Mission and Launch Type](mission-management-launch-type.md)
- [Page Stack and MissionList](page-mission-stack.md) - [Page Stack and Mission List](page-mission-stack.md)
- [Setting the Icon and Name of a Mission Snapshot](mission-set-icon-name-for-task-snapshot.md) - [Setting the Icon and Name of a Mission Snapshot](mission-set-icon-name-for-task-snapshot.md)
- [Application Configuration File](config-file-stage.md) - [Application Configuration File](config-file-stage.md)
- FA Model Development - FA Model Development
- [FA Model Development Overview](fa-model-development-overview.md) - [FA Model Development Overview](fa-model-development-overview.md)
- FA Mode Application Components - FA Model Application Components
- [Application- or Component-Level Configuration](application-component-configuration-fa.md) - [Application- or Component-Level Configuration](application-component-configuration-fa.md)
- PageAbility Component Development - PageAbility Component Development
- [PageAbility Component Overview](pageability-overview.md) - [PageAbility Component Overview](pageability-overview.md)
...@@ -119,7 +120,7 @@ ...@@ -119,7 +120,7 @@
- [Widget Development](widget-development-fa.md) - [Widget Development](widget-development-fa.md)
- [Context](application-context-fa.md) - [Context](application-context-fa.md)
- [Want](want-fa.md) - [Want](want-fa.md)
- [Component Startup Rules](component-startup-rules-fa.md) - [Component Startup Rules (FA Model)](component-startup-rules-fa.md)
- Process Model - Process Model
- [Process Model Overview](process-model-fa.md) - [Process Model Overview](process-model-fa.md)
- [Common Events](common-event-fa.md) - [Common Events](common-event-fa.md)
......
# Setting Atomic Services to Support Sharing
By means of sharing, users can quickly access atomic services and use their features.
## How to Develop
In the sharing scenario, there are two parties involved: a target application that shares data and an application that obtains the shared data. The two can be physically the same. The target application uses the **onShare()** lifecycle callback to set the data to share. After the target application is started, you can run the **hdc shell aa dump -a** command to check the started services and processes and find its mission ID. After the current application is started, call the **abilityManager.acquireShareData()** API with the mission ID passed in to obtain the shared data.
> **NOTE**
>
> The mission ID of the target application can also be obtained by calling [missionManager.getMissionInfos()](../reference/apis/js-apis-app-ability-missionManager.md#getmissioninfos).
1. The target application calls **UIAbility.onShare()** provided by the UIAbility component to set the data to share. **ohos.extra.param.key.contentTitle** indicates the title of the content to share in the sharing box, **ohos.extra.param.key.shareAbstract** provides an abstract description of the content, and **ohos.extra.param.key.shareUrl** indicates the online address of the service. You need to set these three items as objects, with the key set to **title**, **abstract**, and **url**, respectively.
```ts
import AbilityConstant from '@ohos.app.ability.AbilityConstant';
class MyUIAbility extends UIAbility {
onShare(wantParams) {
console.log('onShare');
wantParams['ohos.extra.param.key.contentTitle'] = {title: "W3"};
wantParams['ohos.extra.param.key.shareAbstract'] = {abstract: "communication for huawei employee"};
wantParams['ohos.extra.param.key.shareUrl'] = {url: "w3.huawei.com"};
}
}
```
2. The current application calls **abilityManager.acquireShareData()** to obtain the data shared by the target application. **missionId** indicates the target application's mission ID, which can be obtained by running the **hdc shell aa dump -a** command or calling the **missionManager.getMissionInfos()** API after the target application is started. **wantParam** indicates the data shared by the target application through the **UIAbility.onShare()** lifecycle callback.
```ts
import abilityManager from '@ohos.app.ability.abilityManager';
try {
abilityManager.acquireShareData(1, (err, wantParam) => {
if (err) {
console.error(`acquireShareData fail, err: ${JSON.stringify(err)}`);
} else {
console.log(`acquireShareData success, data: ${JSON.stringify(wantParam)}`);
}
});
} catch (paramError) {
console.error(`error.code: ${JSON.stringify(paramError.code)}, error.message: ${JSON.stringify(paramError.message)}`);
}
```
...@@ -4,7 +4,12 @@ ...@@ -4,7 +4,12 @@
- [Switching to Full SDK](full-sdk-switch-guide.md) - [Switching to Full SDK](full-sdk-switch-guide.md)
- [Application Model Development](faqs-ability.md) - [Application Model Development](faqs-ability.md)
- ArkUI Framework Development (ArkTS) - ArkUI Framework Development (ArkTS)
- [ArkUI Development (ArkTS Syntax)](faqs-arkui-arkts.md) - [ArkTS Syntax Usage](faqs-arkui-arkts.md)
- [ArkUI Component Development (ArkTS)](faqs-arkui-component.md)
- [ArkUI Layout Development (ArkTS)](faqs-arkui-layout.md)
- [ArkUI Routing/Navigation Development (ArkTS)](faqs-arkui-route-nav.md)
- [ArkUI Animation/Interaction Event Development (ArkTS)](faqs-arkui-animation-interactive-event.md)
- [ArkUI Development (JS)](faqs-arkui-js.md)
- [Web Development](faqs-arkui-web.md) - [Web Development](faqs-arkui-web.md)
- [Bundle Management Development](faqs-bundle-management.md) - [Bundle Management Development](faqs-bundle-management.md)
- [Resource Manager Development](faqs-globalization.md) - [Resource Manager Development](faqs-globalization.md)
......
# ArkUI Animation/Interaction Event Development (ArkTS)
## What should I do if the onBlur and onFocus callbacks cannot be triggered?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Symptom**
The **onBlur** and **onFocus** callbacks of the focus event cannot be triggered.
**Solution**
Check the trigger device. By default, the focus event (and the **onBlur** and **onFocus** callbacks) can be triggered only by the Tab button and arrow buttons on the connected keyboard. To enable the focus event to be triggered by a touch, add the **focusOnTouch** attribute for the target component.
**Reference**
[Focus Control](../reference/arkui-ts/ts-universal-attributes-focus.md)
## How do I disable the scroll event of a \<Grid> nested in the \<Scroll>?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Implement nested scrolling of the containers, by using the **onScrollFrameBegin** event and the **scrollBy** method.
**Reference**
[Scroll](../reference/arkui-ts/ts-container-scroll.md#example-2)
## How do I enable a component to rotate continuously?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
You can use [attribute animation](../reference/arkui-ts/ts-animatorproperty.md) to that effect.
## How do I scroll a list with the keyboard?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
- Add **focusable\(true\)** to the list item to enable it to obtain focus.
- Nest a focusable component, for example, **\<Button>**, at the outer layer of each item.
## Why is the click event not triggered for the focused component upon the press of the Enter key after keyboard navigation?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
By default, the built-in click event of the component and the custom **onClick** click event are bound to the space bar instead of the Enter key.
## How do I block event bubbling when a button is nested in multi-layer components?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
You can bind the button to the **stopPropagation** parameter.
## How do I disable the transition effect between pages when the router or navigator is used to switch between pages?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
1. Define the **pageTransition** method for the current and target pages, by following instructions in [Example](../reference/arkui-ts/ts-page-transition-animation.md#example).
2. Set the **duration** parameter of both **PageTransitionEnter** and **PageTransitionExit** to **0**.
## How do I fix misidentification of the pan gesture where container nesting is involved?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
The pan gesture requires a minimum 5 vp movement distance of a finger on the screen. You can set the **distance** parameter in **PanGesture** to **1** so that the pan gesture can be more easily recognized.
**Reference**
[PanGesture](../reference/arkui-ts/ts-basic-gestures-pangesture.md)
## Can I use the fontFamily attribute to set different fonts for OpenHarmony applications?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
No. For applications developed based on OpenHarmony, only the default font, HarmonyOS Sans, is supported.
## How do I implement a text input box that shows a soft keyboard when touched and hides the soft keyboard when a button is touched?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Use **focusControl** for the **\<TextInput>** component to control its focus. The **\<TextInput>** component shows a soft keyboard when it gains focus and hides the soft keyboard when it loses focus.
**Example**
```
build() {
Column() {
TextInput()
Button(`hide`)
.key('button')
.onClick(()=>{
focusControl.requestFocus('button')
})
}
}
```
## How do I implement a button that only responds to the bound onClick event, but not the onTouch event bound to the button's parent component?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Bind **onTouch** to the **\<Button>** component and use **stopPropagation\(\)** in **onTouch** to prevent **onTouch** from bubbling up to the parent component.
**Example**
```
build() {
Row() {
Button ("Click Me")
.width(100)
.width(100)
.backgroundColor('#f00')
.onClick(()=>{
console.log("Button onClick")
})
.onTouch((e) => {
console.log("Button onTouch")
e.stopPropagation()
})
}
.onTouch(() => {
console.log("Row onTouch")
})
}
```
## Why is the menu bound to a component not displayed by a right-click on the component?
Applicable to: OpenHarmony 3.2 Beta (API version 9)
**Solution**
Currently, the menu is displayed when the bound component is clicked or long pressed.
## How do I shield the default keyboard popup behavior of the \<TextInput> component?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
Set the **focusable** attribute of the **\<TextInput>** component to **false**. In this way, the component is not focusable and therefore will not bring up the keyboard.
## How do I implement the slide up and slide down effect for page transition?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
**Solution**
You can use the **pageTransition** API to implement the page transition effect. Specifically, set the **slide** attribute in **PageTransitionEnter** and **PageTransitionExit** to **SlideEffect.Bottom**. In this way, the page slides in and out from the bottom.
**Example**
```
// Index.ets
@Entry
@Component
struct PageTransition1 {
build() {
Stack({alignContent: Alignment.Bottom}) {
Navigator({ target: 'pages/Page1'}) {
Image($r('app.media.ic_banner01')).width('100%').height(200) // Save the image in the media folder.
}
}.height('100%').width('100%')
}
pageTransition() {
PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)
}
}
```
```
// Page1.ets
@Entry
@Component
struct PageTransition2 {
build() {
Stack({alignContent: Alignment.Bottom}) {
Navigator({ target: 'pages/Index'}) {
Image($r('app.media.ic_banner02')).width('100%').height(200) // Save the image in the media folder.
}
}.height('100%').width('100%')
}
pageTransition() {
PageTransitionEnter({ duration: 500, curve: Curve.Linear }).slide(SlideEffect.Bottom)
PageTransitionExit({ duration: 500, curve: Curve.Ease }).slide(SlideEffect.Bottom)
}
}
```
**Reference**
[Page Transition Animation](../ui/arkts-page-transition-animation.md)
## How do I configure custom components to slide in and out from the bottom?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
**Symptom**
Custom components A and B need to deliver the following effects: When custom component A, displayed at the bottom of the screen by default, is touched, it is hidden, and custom component B slides in from the bottom. When custom component B is touched, it is hidden, and custom component A slides in from the bottom.
**Solution**
You can use the **transition** attribute to create component transition animations. Set the **type** parameter to specify the component transition type, which can be component addition, component deletion, or both. Set the **translate** parameter to specify the translation of the component during transition. **NOTE**<br>The **transition** attribute must work with **animateTo**. The animation duration, curve, and delay follow the settings in **animateTo**.
**Example**
```
@Entry
@Component
struct ComponentTransition {
@State flag: boolean = true;
build() {
Stack({alignContent: Alignment.Bottom}) {
if (this.flag) {
ComponentChild1({ flag: $flag })
.transition({ type: TransitionType.Insert,translate: { x: 0, y: 200 } })
}
if (!this.flag) {
ComponentChild2({ flag: $flag })
.transition({ type: TransitionType.Insert, translate: { x: 0, y: 200 } })
}
}.height('100%').width('100%')
}
}
@Component
struct ComponentChild1 {
@Link flag: boolean
build() {
Column() {
Image($r('app.media.ic_banner01'))
.width('100%')
.height(200)
.onClick(() => {
animateTo({ duration: 1000 }, () => {
this.flag = !this.flag;
})
})
}
}
}
@Component
struct ComponentChild2 {
@Link flag: boolean
build() {
Column() {
Image($r('app.media.ic_banner02'))
.width('100%')
.height(200)
.onClick(() => {
animateTo({ duration: 1000 }, () => {
this.flag = !this.flag;
})
})
}
}
}
```
**Reference**
[Transition Animation Within the Component](../ui/arkts-transition-animation-within-component.md)
# ArkUI Development (ArkTS Syntax) # ArkTS Syntax Usage
## How do I dynamically create components using code in ArkUI? ## How do I dynamically create components using code in ArkUI?
...@@ -522,7 +522,7 @@ Applicable to: OpenHarmony 3.2 Beta 5 (API version 9) ...@@ -522,7 +522,7 @@ Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Reference** **Reference**
[Resource Categories and Access](../quick-start/resource-categories-and-access.md) and [@ohos.resourceManager (Resource Manager)](../reference/apis/js-apis-resource-manager.md#getstring) [Resource Categories and Access](../quick-start/resource-categories-and-access.md) and [@ohos.resourceManager (Resource Manager)](../reference/apis/js-apis-resource-manager.md)
## How do I convert the XML format to the JSON format? ## How do I convert the XML format to the JSON format?
......
# ArkUI Development (JS)
## Why can't array variables be used to control component attributes?
Applicable to: OpenHarmony (DevEco Studio 3.0.0.993, API version 8)
Currently, the web-like development paradigm does not listen for the modification of elements in an array. Therefore, the page refresh can be triggered only when the array object is modified, but not when an element in the array is modified. In the following example, the **test1\(\)** statement, which assigns values to the entire array, will disable the related **\<Button>** component; in contrast, the **test2\(\)** statement, which assigns a value to an element in the array, will not disable the **\<Button>** component. In addition to **test1\(\)**, you can also use the method of modifying the array, for example, **splice\(\)**, to trigger the page refresh.
```
test1() {this.isDisabled = [true, true, true, true, true]; // This statement disables the <Button> component.
test2() {this.isDisabled[0] = true; // This statement does not work for the <Button> component.
```
## Does the \<input> component support center alignment?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, FA model)
**Symptom**
The **text-align** style does not work for the **\<input>** component.
**Solution**
The **text-align** style works for the **\<text>** component, but not for the **\<input>** component.
**Reference**
[input](../reference/arkui-js/js-components-basic-input.md), [text](../reference/arkui-js/js-components-basic-text.md)
## How do I determine whether a value exists in a JS object?
Applicable to: OpenHarmony 3.2 Release (API version 9)
**Solution**
Use **Object.values\(*object name*\).indexOf\(*value to be checked*\)**. If **-1** is returned, the corresponding value is not included. Otherwise, the corresponding value is included.
# ArkUI Layout Development (ArkTS)
## What should I do if the height settings in position do not take effect?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
When **position** is set for a container component, it is taken out of normal flow and works independently from the outer container. In this case, the height does not take effect. You can replace the outer container with a stack to solve this issue.
## How do I implement horizontal scrolling on a \<Grid> component?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Set **rowsTemplate** (the number of rows) for the **\<Grid>** component and do not set **columnsTemplate** (the number of columns). In this way, the **\<Grid>** component scrolls horizontally when its content does not fit within its width.
## What should I do if the \<List> component cannot be dragged to the bottom when it is used with another component and does not have the size specified?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
Add the **layoutWeight** attribute for the **\<List>** component so that it takes up the remaining height (or width, depending on the scrolling direction) adapatively.
By default, the **\<List>** component, as a scrollable container, takes up the entire screen height. When it is used with any component whose height is fixed, you need to explicitly add the **layoutWeight** attribute for the **\<List>** component so that it takes up the remaining height instead of the entire screen height.
## Can tab switching be disabled for the \<Tabs> component?
Applicable to: OpenHarmony 3.2 Release (API version 9)
No. This feature is not supported.
## How do I intercept the onBackPress event so that it does not trigger page return?
Applicable to: OpenHarmony 3.2 Release (API version 9)
If **true** is returned in **onBackPress**, the page executes its own return logic instead of the default return logic.
**Reference**
[onBackPress](../reference/arkui-ts/ts-custom-component-lifecycle.md#onbackpress).
## How do I implement a sticky header for a list item group in the \<List> component?
Applicable to: OpenHarmony 3.2 Release (API version 9)
You can use the **sticky** attribute of the **\<List>** component together with the **\<ListItemGroup>** component. Specifically, set the **sticky** attribute of the **\<List>** component to **StickyStyle.Header** and set the **header** parameter of the corresponding **\<ListItemGroup>** component.
**Reference**
[Adding a Sticky Header](../ui/arkts-layout-development-create-list.md#adding-a-sticky-header)
\ No newline at end of file
# ArkUI Routing/Navigation Development (ArkTS)
## Why can't class objects be transferred through params in the router API?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
Only attributes in an object can be transferred, and methods in the object cannot.
## How do I use router to implement page redirection in the stage model?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
1. To implement page redirection through **router**, add all redirected-to pages to the **pages** list in the **main\_pages.json** file.
2. Page routing APIs in **router** can be invoked only after page rendering is complete. Do not call these APIs in **onInit** or **onReady** when the page is still in the rendering phase.
**Reference**
[@ohos.router (Page Routing)](../reference/apis/js-apis-router.md)
## Will a page pushed into the stack through router.push be reclaimed?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
After being pushed to the stack through **router.push**, a page can be reclaimed only when it is popped from the stack through **router.back**.
**Reference**
[router.getParams](../reference/apis/js-apis-router.md#routergetparams)
\ No newline at end of file
# Native APIs # Native APIs
- [Introduction to Native APIs](introduction.md)
- [Using Native APIs in Application Projects](napi-guidelines.md) - [Using Native APIs in Application Projects](napi-guidelines.md)
- [Drawing Development](drawing-guidelines.md) - [Drawing Development](drawing-guidelines.md)
- [Raw File Development](rawfile-guidelines.md) - [Raw File Development](rawfile-guidelines.md)
- [Native Window Development](native-window-guidelines.md) - [Native Window Development](native-window-guidelines.md)
- [Using MindSpore Lite for Model Inference](mindspore-lite-guidelines.md) - [Using MindSpore Lite for Model Inference](mindspore-lite-guidelines.md)
- [Connecting the Neural Network Runtime to an AI Inference Framework](neural-network-runtime-guidelines.md) - [Connecting the Neural Network Runtime to an AI Inference Framework](neural-network-runtime-guidelines.md)
\ No newline at end of file - [Purgeable Memory Development](purgeable-memory-guidelines.md)
# Purgeable Memory Development
## When to Use
You can use the native purgeable memory APIs to apply for and release purgeable memory.
The following scenarios are common for native purgeable memory development:
* Apply for a **PurgeableMemory** object and write data to the object.
* Release the **PurgeableMemory** object when it is no longer required.
## Available APIs
| API| Description|
| -------- | -------- |
| OH_PurgeableMemory \*OH_PurgeableMemory_Create(size_t size, OH_PurgeableMemory_ModifyFunc func, void \*funcPara) | Creates a **PurgeableMemory** object. A new **PurgeableMemory** object is generated each time this API is called.|
| bool OH_PurgeableMemory_Destroy(OH_PurgeableMemory \*purgObj) | Destroys a **PurgeableMemory** object.|
| bool OH_PurgeableMemory_BeginRead(OH_PurgeableMemory \*purgObj) | Begins a read operation on a **PurgeableMemory** object.|
| void OH_PurgeableMemory_EndRead(OH_PurgeableMemory \*purgObj) | Ends a read operation on a **PurgeableMemory** object and decreases the reference count of the object by 1. When the reference count reaches 0, the object can be reclaimed by the system.|
|bool OH_PurgeableMemory_BeginWrite(OH_PurgeableMemory \*purgObj) | Begins a write operation on a **PurgeableMemory** object.|
|void OH_PurgeableMemory_EndWrite(OH_PurgeableMemory \*purgObj)|Ends a write operation on a **PurgeableMemory** object and decreases the reference count of the object by 1. When the reference count reaches 0, the object can be reclaimed by the system.|
|void \*OH_PurgeableMemory_GetContent(OH_PurgeableMemory \*purgObj)|Obtains the memory data of a **PurgeableMemory** object.|
|size_t OH_PurgeableMemory_ContentSize(OH_PurgeableMemory \*purgObj)|Obtains the memory data size of a **PurgeableMemory** object.|
|bool OH_PurgeableMemory_AppendModify(OH_PurgeableMemory \*purgObj, OH_PurgeableMemory_ModifyFunc func, void \*funcPara)|Adds a function for modifying a **PurgeableMemory** object.|
## How to Develop
The following steps describe how to use the native purgeable memory APIs to apply for a **PurgeableMemory** object, write data to the object, and read data from the object.
1. Declare the rules for creating a **PurgeableMemory** object.
```c++
// Declare the parameters of the constructor.
struct ParaData{
int start;
int end;
}
// Declare a function for modifying the object.
bool FactorialFunc(void* data, size_t size, void* param){
bool ret = true;
int oriData = *(int*)(data);
int i = param->start;
while(i<param->end){
oriData *= i;
}
*data = oriData;
if(oriData < 0)
ret = false;
return ret;
}
// Declare the parameters of the extended function for modifying the object.
struct AppendParaData{
int newPara;
}
// Declare the extended function for modifying the object.
bool AddFunc(void* data, size_t size, void* param){
bool ret = true;
int oriData = *(int*)(data);
oriData += param->newPara;
*data = oriData;
return ret;
}
```
2. Create a **PurgeableMemory** object.
```c++
// Define the memory data size to 4 MB.
#define DATASIZE (4 * 1024 * 1024)
// Declare the parameters of the constructor.
struct ParaData pdata = {1,2};
// Create a PurgeableMemory object.
OH_PurgableMmory* pPurgmem = OH_PurgableMmory_Create(DATASIZE, FactorialFunc, &pdata);
```
3. Perfrom a read operation on the **PurgeableMemory** object.
```c++
// Begin a read operation on the object.
OH_PurgeableMemory_BeginRead(pPurgmem);
// Obtain the object size.
size_t size = OH_PurgeableMemory_ContentSize(pPurgmem);
// Obtain the object content.
ReqObj* pReqObj = (ReqObj*) OH_PurgeableMemory_GetContent(pPurgmem);
// End a read operation on the object.
OH_PurgeableMemory_EndRead(pPurgmem);
```
4. Perform a write operation on the **PurgeableMemory** object.
```c++
// Begin a write operation on the object.
OH_PurgeableMemory_BeginWrite(pPurgmem)
// Obtain the object data.
ReqObj* pReqObj = (ReqObj*) OH_PurgeableMemory_GetContent(pPurgmem);
// Declare the parameters of the extended constructor.
struct AppendParaData apdata = {1};
// Update the rules for recreating the object.
OH_PurgeableMemory_AppendModify(pPurgmem, AddFunc, &apdata);
// Stop writing data to the object.
OH_PurgeableMemory_EndWrite(pPurgmem);
```
5. Destroy the **PurgeableMemory** object.
```c++
// Destroy the object.
OH_PurgeableMemory_Destroy(pPurgmem);
```
...@@ -74,7 +74,7 @@ As shown above, the **module.json5** file contains several tags. ...@@ -74,7 +74,7 @@ As shown above, the **module.json5** file contains several tags.
| Name| Description| Data Type| Initial Value Allowed| | Name| Description| Data Type| Initial Value Allowed|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| name | Name of the module. The value is a string with a maximum of 31 bytes and must be unique in the entire application. Chinese characters are not allowed.| String| No| | name | Name of the module. The value is a string with a maximum of 31 bytes and must be unique in the entire application. | String| No|
| type | Type of the module. The options are as follows:<br>- **entry**: main module of the application.<br>- **feature**: dynamic feature module of the application.<br>- **har**: static shared module.<br>- **shared**: dynamic shared module.| String| No| | type | Type of the module. The options are as follows:<br>- **entry**: main module of the application.<br>- **feature**: dynamic feature module of the application.<br>- **har**: static shared module.<br>- **shared**: dynamic shared module.| String| No|
| srcEntry | Code path corresponding to the module. The value is a string with a maximum of 127 bytes.| String| Yes (initial value: left empty)| | srcEntry | Code path corresponding to the module. The value is a string with a maximum of 127 bytes.| String| Yes (initial value: left empty)|
| description | Description of the module. The value is a string with a maximum of 255 bytes or a string resource index.| String| Yes (initial value: left empty)| | description | Description of the module. The value is a string with a maximum of 255 bytes or a string resource index.| String| Yes (initial value: left empty)|
...@@ -228,73 +228,6 @@ The **metadata** tag represents the custom metadata of the HAP file. The tag val ...@@ -228,73 +228,6 @@ The **metadata** tag represents the custom metadata of the HAP file. The tag val
The **abilities** tag represents the UIAbility configuration of the module, which is valid only for the current UIAbility component. The **abilities** tag represents the UIAbility configuration of the module, which is valid only for the current UIAbility component.
**By default, application icons cannot be hidden from the home screen in OpenHarmony.**
The OpenHarmony system imposes a strict rule on the presence of application icons. If no icon is configured in the HAP file of an application, the system uses the icon specified in the **app.json** file as the application icon and displays it on the home screen.
Touching this icon will direct the user to the application details screen in **Settings**, as shown in Figure 1.
To hide an application icon from the home screen, you must configure the **AllowAppDesktopIconHide** privilege. For details, see [Application Privilege Configuration Guide](../../device-dev/subsystems/subsys-app-privilege-config-guide.md).
**Objectives**:
This requirement on application icons is intended to prevent malicious applications from deliberately configuring no icon to block uninstallation attempts.
**Setting the application icon to be displayed on the home screen**:
Set **icon**, **label**, and **skills** under **abilities** in the **module.json5** file. Make sure the **skills** configuration contains **ohos.want.action.home** and **entity.system.home**.
```
{
"module":{
...
"abilities": [{
"icon": "$media:icon",
"label": "Login",
"skills": [{
"actions": ["ohos.want.action.home"],
"entities": ["entity.system.home"],
"uris": []
}]
}],
...
}
}
```
**Display rules of application icons and labels on the home screen:**
* The HAP file contains UIAbility configuration.
* The application icon on the home screen is set under **abilities** in the **module.json5** file.
* The application does not have the privilege to hide its icon from the home screen.
* The application icon displayed on the home screen is the icon configured for the UIAbility.
* The application label displayed on the home screen is the label configured for the UIAbility. If no label is configured, the bundle name is returned.
* The name of the UIAbility is displayed.
* When the user touches the home screen icon, the home screen of the UIAbility is displayed.
* The application has the privilege to hide its icon from the home screen.
* The information about the application is not returned during home screen information query, and the icon of the application is not displayed on the home screen.
* The application icon on the home screen is not set under **abilities** in the **module.json5** file.
* The application does not have the privilege to hide its icon from the home screen.
* The application icon displayed on the home screen is the icon specified under **app**. (The **icon** field in the **app.json** file is mandatory.)
* The application label displayed on the home screen is the label specified under **app**. (The **label** field in the **app.json** file is mandatory.)
* Touching the application icon on the home screen will direct the user to the application details screen shown in Figure 1.
* The application has the privilege to hide its icon from the home screen.
* The information about the application is not returned during home screen information query, and the icon of the application is not displayed on the home screen.
* The HAP file does not contain UIAbility configuration.
* The application does not have the privilege to hide its icon from the home screen.
* The application icon displayed on the home screen is the icon specified under **app**. (The **icon** field in the **app.json** file is mandatory.)
* The application label displayed on the home screen is the label specified under **app**. (The **label** field in the **app.json** file is mandatory.)
* Touching the application icon on the home screen will direct the user to the application details screen shown in Figure 1.
* The application has the privilege to hide its icon from the home screen.
* The information about the application is not returned during home screen information query, and the icon of the application is not displayed on the home screen.<br><br>
**Figure 1** Application details screen
![Application details screen](figures/application_details.jpg)
**Table 6** abilities **Table 6** abilities
| Name| Description| Data Type| Initial Value Allowed| | Name| Description| Data Type| Initial Value Allowed|
...@@ -325,6 +258,7 @@ Set **icon**, **label**, and **skills** under **abilities** in the **module.json ...@@ -325,6 +258,7 @@ Set **icon**, **label**, and **skills** under **abilities** in the **module.json
| minWindowHeight | Minimum window height supported by the UIAbility component, in vp. The minimum value is 0, and the value cannot be less than the minimum window height allowed by the platform or greater than the value of **maxWindowHeight**. For details about the window size, see [Constraints](../windowmanager/window-overview.md#constraints).| Number| Yes (initial value: minimum window height supported by the platform)| | minWindowHeight | Minimum window height supported by the UIAbility component, in vp. The minimum value is 0, and the value cannot be less than the minimum window height allowed by the platform or greater than the value of **maxWindowHeight**. For details about the window size, see [Constraints](../windowmanager/window-overview.md#constraints).| Number| Yes (initial value: minimum window height supported by the platform)|
| excludeFromMissions | Whether the UIAbility component is displayed in the recent task list.<br>- **true**: displayed in the recent task list.<br>- **false**: not displayed in the recent task list.<br>**NOTE**<br>This attribute applies only to system applications and does not take effect for third-party applications.| Boolean| Yes (initial value: **false**)| | excludeFromMissions | Whether the UIAbility component is displayed in the recent task list.<br>- **true**: displayed in the recent task list.<br>- **false**: not displayed in the recent task list.<br>**NOTE**<br>This attribute applies only to system applications and does not take effect for third-party applications.| Boolean| Yes (initial value: **false**)|
| recoverable | Whether the application can be recovered to its previous state in case of a detected fault.<br>- **true**: The application can be recovered to its previous state in case of a detected fault.<br>- **false**: The application cannot be recovered to its previous state in case of a detected fault.| Boolean| Yes (initial value: **false**)| | recoverable | Whether the application can be recovered to its previous state in case of a detected fault.<br>- **true**: The application can be recovered to its previous state in case of a detected fault.<br>- **false**: The application cannot be recovered to its previous state in case of a detected fault.| Boolean| Yes (initial value: **false**)|
| unclearableMission | Whether the UIAbility component is unclearable in the recent tasks list.<br>- **true**: The UIAbility component is unclearable in the recent tasks list.<br>- **false**: The UIAbility component is clearable in the recent tasks list.<br>**NOTE**<br>This attribute works only after the [AllowMissionNotCleared](../../device-dev/subsystems/subsys-app-privilege-config-guide.md) privilege is obtained.| Boolean| Yes (initial value: **false**)|
Example of the **abilities** structure: Example of the **abilities** structure:
...@@ -369,7 +303,8 @@ Example of the **abilities** structure: ...@@ -369,7 +303,8 @@ Example of the **abilities** structure:
"minWindowWidth": 1400, "minWindowWidth": 1400,
"maxWindowHeight": 300, "maxWindowHeight": 300,
"minWindowHeight": 200, "minWindowHeight": 200,
"excludeFromMissions": false "excludeFromMissions": false,
"unclearableMission": false
}] }]
} }
``` ```
...@@ -441,12 +376,12 @@ The **extensionAbilities** tag represents the configuration of extensionAbilitie ...@@ -441,12 +376,12 @@ The **extensionAbilities** tag represents the configuration of extensionAbilitie
| description | Description of the ExtensionAbility component. The value is a string with a maximum of 255 bytes or a resource index to the description.| String| Yes (initial value: left empty)| | description | Description of the ExtensionAbility component. The value is a string with a maximum of 255 bytes or a resource index to the description.| String| Yes (initial value: left empty)|
| icon | Icon of the ExtensionAbility component. The value is an icon resource index. If **ExtensionAbility** is set to **MainElement** of the current module, this attribute is mandatory and its value must be unique in the application.| String| Yes (initial value: left empty)| | icon | Icon of the ExtensionAbility component. The value is an icon resource index. If **ExtensionAbility** is set to **MainElement** of the current module, this attribute is mandatory and its value must be unique in the application.| String| Yes (initial value: left empty)|
| label | Name of the ExtensionAbility component displayed to users. The value is a string resource index.<br>**NOTE**<br>If **ExtensionAbility** is set to **MainElement** of the current module, this attribute is mandatory and its value must be unique in the application.| String| No| | label | Name of the ExtensionAbility component displayed to users. The value is a string resource index.<br>**NOTE**<br>If **ExtensionAbility** is set to **MainElement** of the current module, this attribute is mandatory and its value must be unique in the application.| String| No|
| type | Type of the ExtensionAbility component. The options are as follows:<br>- **form**: ExtensionAbility of a widget.<br>- **workScheduler**: ExtensionAbility of a Work Scheduler task.<br>- **inputMethod**: ExtensionAbility of an input method.<br>- **service**: service component running in the background.<br>- **accessibility**: ExtensionAbility of an accessibility feature.<br>- **dataShare**: ExtensionAbility for data sharing.<br>- **fileShare**: ExtensionAbility for file sharing.<br>- **staticSubscriber**: ExtensionAbility for static broadcast.<br>- **wallpaper**: ExtensionAbility of the wallpaper.<br>- **backup**: ExtensionAbility for data backup.<br>- **window**: ExtensionAbility of a window. This type of ExtensionAbility creates a window during startup for which you can develop the GUI. The window is then combined with other application windows through **abilityComponent**.<br>- **thumbnail**: ExtensionAbility for obtaining file thumbnails. You can provide thumbnails for files of customized file types.<br>- **preview**: ExtensionAbility for preview. This type of ExtensionAbility can parse the file and display it in a window. You can combine the window with other application windows.<br>- **print**: ExtensionAbility for the print framework.<br>- **driver**: ExtensionAbility for the driver framework.<br>**NOTE**<br>The **service** and **dataShare** types apply only to system applications and do not take effect for third-party applications.| String| No| | type | Type of the ExtensionAbility component. The options are as follows:<br>- **form**: ExtensionAbility of a widget.<br>- **workScheduler**: ExtensionAbility of a Work Scheduler task.<br>- **inputMethod**: ExtensionAbility of an input method.<br>- **service**: service component running in the background.<br>- **accessibility**: ExtensionAbility of an accessibility feature.<br>- **dataShare**: ExtensionAbility for data sharing.<br>- **fileShare**: ExtensionAbility for file sharing.<br>- **staticSubscriber**: ExtensionAbility for static broadcast.<br>- **wallpaper**: ExtensionAbility of the wallpaper.<br>- **backup**: ExtensionAbility for data backup.<br>- **window**: ExtensionAbility of a window. This type of ExtensionAbility creates a window during startup for which you can develop the GUI. The window is then combined with other application windows through **abilityComponent**.<br>- **thumbnail**: ExtensionAbility for obtaining file thumbnails. You can provide thumbnails for files of customized file types.<br>- **preview**: ExtensionAbility for preview. This type of ExtensionAbility can parse the file and display it in a window. You can combine the window with other application windows.<br>- **print**: ExtensionAbility for the print framework.<br>- **push**: ExtensionAbility to be pushed.<br>- **driver**: ExtensionAbility for the driver framework.<br>**NOTE**<br>The **service** and **dataShare** types apply only to system applications and do not take effect for third-party applications.| String| No|
| permissions | Permissions required for another application to access the ExtensionAbility component.<br>The value is generally in the reverse domain name notation and contains a maximum of 255 bytes. It is an array of permission names predefined by the system or customized. The name of a customized permission must be the same as the **name** value of a permission defined in the **defPermissions** attribute.| String array| Yes (initial value: left empty)| | permissions | Permissions required for another application to access the ExtensionAbility component.<br>The value is generally in the reverse domain name notation and contains a maximum of 255 bytes. It is an array of permission names predefined by the system or customized. The name of a customized permission must be the same as the **name** value of a permission defined in the **defPermissions** attribute.| String array| Yes (initial value: left empty)|
| uri | Data URI provided by the ExtensionAbility component. The value is a string with a maximum of 255 bytes, in the reverse domain name notation.<br>**NOTE**<br>This attribute is mandatory when the type of the ExtensionAbility component is set to **dataShare**.| String| Yes (initial value: left empty)| | uri | Data URI provided by the ExtensionAbility component. The value is a string with a maximum of 255 bytes, in the reverse domain name notation.<br>**NOTE**<br>This attribute is mandatory when the type of the ExtensionAbility component is set to **dataShare**.| String| Yes (initial value: left empty)|
|skills | Feature set of [wants](../application-models/want-overview.md) that can be received by the ExtensionAbility component.<br>Configuration rule: In an entry package, you can configure multiple **skills** attributes with the entry capability. (A **skills** attribute with the entry capability is the one that has **ohos.want.action.home** and **entity.system.home** configured.) The **label** and **icon** in the first ExtensionAbility that has **skills** configured are used as the **label** and **icon** of the entire OpenHarmony service/application.<br>**NOTE**<br>The **skills** attribute with the entry capability can be configured for the feature package of an OpenHarmony application, but not for an OpenHarmony service.| Array| Yes (initial value: left empty)| |skills | Feature set of [wants](../application-models/want-overview.md) that can be received by the ExtensionAbility component.<br>Configuration rule: In an entry package, you can configure multiple **skills** attributes with the entry capability. (A **skills** attribute with the entry capability is the one that has **ohos.want.action.home** and **entity.system.home** configured.) The **label** and **icon** in the first ExtensionAbility that has **skills** configured are used as the **label** and **icon** of the entire OpenHarmony service/application.<br>**NOTE**<br>The **skills** attribute with the entry capability can be configured for the feature package of an OpenHarmony application, but not for an OpenHarmony service.| Array| Yes (initial value: left empty)|
| [metadata](#metadata)| Metadata of the ExtensionAbility component.| Object| Yes (initial value: left empty)| | [metadata](#metadata)| Metadata of the ExtensionAbility component.| Object| Yes (initial value: left empty)|
| exported | Whether the ExtensionAbility component can be called by other applications. <br>- **true**: The ExtensionAbility component can be called by other applications.<br>- **false**: The UIAbility component cannot be called by other applications.| Boolean| Yes (initial value: **false**)| | exported | Whether the ExtensionAbility component can be called by other applications. <br>- **true**: The ExtensionAbility component can be called by other applications.<br>- **false**: The ExtensionAbility component cannot be called by other applications.| Boolean| Yes (initial value: **false**)|
Example of the **extensionAbilities** structure: Example of the **extensionAbilities** structure:
......
...@@ -9,7 +9,9 @@ Below is the process of developing, debugging, releasing, and deploying multiple ...@@ -9,7 +9,9 @@ Below is the process of developing, debugging, releasing, and deploying multiple
You can use [DevEco Studio](https://developer.harmonyos.com/en/develop/deveco-studio) to create multiple modules as needed and develop services in respective modules. You can use [DevEco Studio](https://developer.harmonyos.com/en/develop/deveco-studio) to create multiple modules as needed and develop services in respective modules.
## Debugging ## Debugging
After building code into one or more HAP files and installing or updating these HAP files, you can debug them by using the methods: After building code into one or more HAP files and installing or updating these HAP files, you can debug them. You can leverage a single set of code and files to build multiple target editions for different audiences, deployment environments, operating environments, and more. For details, see [Customizing Multi-Target and Multi-Product Builds](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/customized-multi-targets-and-products-0000001430013853-V3?catalogVersion=V3).
You can debug HAP files using the methods:
* Using DevEco Studio for debugging * Using DevEco Studio for debugging
Follow the instructions in [Debugging Configuration](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-debugging-and-running-0000001263040487#section10491183521520). Follow the instructions in [Debugging Configuration](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-debugging-and-running-0000001263040487#section10491183521520).
...@@ -49,7 +51,7 @@ After building code into one or more HAP files and installing or updating these ...@@ -49,7 +51,7 @@ After building code into one or more HAP files and installing or updating these
// The execution result is as follows: // The execution result is as follows:
uninstall bundle successfully. uninstall bundle successfully.
``` ```
After the HAP files are installed or updated, you can debug them by following the instructions in [Ability Assistant](https://docs.openharmony.cn/pages/v3.2Beta/en/application-dev/tools/aa-tool.md/). After the HAP files are installed or updated, you can debug them by following the instructions in [Ability Assistant](../tools/aa-tool.md).
## Release ## Release
When your application package meets the release requirements, you can package and build it into an App Pack and release it to the application market on the cloud. The application market verifies the signature of the App Pack. If the signature verification is successful, the application market obtains the HAP files from the App Pack, signs them, and distributes the signed HAP files. When your application package meets the release requirements, you can package and build it into an App Pack and release it to the application market on the cloud. The application market verifies the signature of the App Pack. If the signature verification is successful, the application market obtains the HAP files from the App Pack, signs them, and distributes the signed HAP files.
......
...@@ -143,7 +143,7 @@ try { ...@@ -143,7 +143,7 @@ try {
getAbilityRunningInfos(callback: AsyncCallback\<Array\<AbilityRunningInfo>>): void getAbilityRunningInfos(callback: AsyncCallback\<Array\<AbilityRunningInfo>>): void
Obtains the ability running information. This API uses an asynchronous callback to return the result. Obtains the UIAbility running information. This API uses an asynchronous callback to return the result.
**Required permissions**: ohos.permission.GET_RUNNING_INFO **Required permissions**: ohos.permission.GET_RUNNING_INFO
...@@ -388,7 +388,7 @@ abilityManager.getTopAbility().then((data) => { ...@@ -388,7 +388,7 @@ abilityManager.getTopAbility().then((data) => {
acquireShareData(missionId: number, callback: AsyncCallback<{[key: string]: Object}>): void; acquireShareData(missionId: number, callback: AsyncCallback<{[key: string]: Object}>): void;
Acquires the shared data of the target device. This API uses an asynchronous callback to return the result. Acquires the shared data of the target application. This API uses an asynchronous callback to return the result. **missionId** indicates the target application's mission ID, which can be obtained by running the **hdc shell aa dump -a** command or calling the [missionManager.getMissionInfos()](js-apis-app-ability-missionManager.md#getmissioninfos) API after the target application is started. **callback** indicates the data shared by the target application through the [UIAbility.onShare()](js-apis-app-ability-uiAbility.md#onshare) lifecycle callback.
**System capability**: SystemCapability.Ability.AbilityRuntime.Core **System capability**: SystemCapability.Ability.AbilityRuntime.Core
...@@ -396,7 +396,7 @@ Acquires the shared data of the target device. This API uses an asynchronous cal ...@@ -396,7 +396,7 @@ Acquires the shared data of the target device. This API uses an asynchronous cal
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| --------- | ---------------------------------------- | ---- | -------------- | | --------- | ---------------------------------------- | ---- | -------------- |
| missionId | number | Yes| Mission ID on the target device. The maximum value is 2<sup>31</sup>-1.| | missionId | number | Yes| Mission ID on the target application. The maximum value is 2<sup>31</sup>-1.|
| callback | AsyncCallback<{[key: string]: Object}> | Yes | Callback used to return the API call result and the shared data. You can perform error handling or custom processing in it. | | callback | AsyncCallback<{[key: string]: Object}> | Yes | Callback used to return the API call result and the shared data. You can perform error handling or custom processing in it. |
**Error codes** **Error codes**
...@@ -411,14 +411,17 @@ For details about the error codes, see [Ability Error Codes](../errorcodes/error ...@@ -411,14 +411,17 @@ For details about the error codes, see [Ability Error Codes](../errorcodes/error
```ts ```ts
import abilityManager from '@ohos.app.ability.abilityManager'; import abilityManager from '@ohos.app.ability.abilityManager';
try {
abilityManager.acquireShareData(1, (err, data) => { abilityManager.acquireShareData(1, (err, wantParam) => {
if (err) { if (err) {
console.error(`acquireShareData fail, err: ${JSON.stringify(err)}`); console.error(`acquireShareData fail, err: ${JSON.stringify(err)}`);
} else { } else {
console.log(`acquireShareData success, data: ${JSON.stringify(data)}`); console.log(`acquireShareData success, data: ${JSON.stringify(wantParam)}`);
} }
}); });
} catch (paramError) {
console.error(`error.code: ${JSON.stringify(paramError.code)}, error.message: ${JSON.stringify(paramError.message)}`);
}
``` ```
...@@ -426,7 +429,7 @@ abilityManager.acquireShareData(1, (err, data) => { ...@@ -426,7 +429,7 @@ abilityManager.acquireShareData(1, (err, data) => {
acquireShareData(missionId: number): Promise<{[key: string]: Object}>; acquireShareData(missionId: number): Promise<{[key: string]: Object}>;
Acquires the shared data of the target device. This API uses a promise to return the result. Acquires the shared data of the target application. This API uses a promise to return the result. **missionId** indicates the target application's mission ID, which can be obtained by running the **hdc shell aa dump -a** command or calling the [missionManager.getMissionInfos()](js-apis-app-ability-missionManager.md#getmissioninfos) API after the target application is started. **Promise<{[key: string]: Object}>** indicates the data shared by the target application through the [UIAbility.onShare()](js-apis-app-ability-uiAbility.md#onshare) lifecycle callback.
**System capability**: SystemCapability.Ability.AbilityRuntime.Core **System capability**: SystemCapability.Ability.AbilityRuntime.Core
...@@ -449,8 +452,8 @@ For details about the error codes, see [Ability Error Codes](../errorcodes/error ...@@ -449,8 +452,8 @@ For details about the error codes, see [Ability Error Codes](../errorcodes/error
```ts ```ts
import abilityManager from '@ohos.app.ability.abilityManager'; import abilityManager from '@ohos.app.ability.abilityManager';
try { try {
abilityManager.acquireShareData(1).then((data) => { abilityManager.acquireShareData(1).then((wantParam) => {
console.log(`acquireShareData success, data: ${JSON.stringify(data)}`); console.log(`acquireShareData success, data: ${JSON.stringify(wantParam)}`);
}).catch((err) => { }).catch((err) => {
console.error(`acquireShareData fail, err: ${JSON.stringify(err)}`); console.error(`acquireShareData fail, err: ${JSON.stringify(err)}`);
}); });
......
...@@ -315,7 +315,7 @@ class MyUIAbility extends UIAbility { ...@@ -315,7 +315,7 @@ class MyUIAbility extends UIAbility {
onShare(wantParam:{ [key: string]: Object }): void; onShare(wantParam:{ [key: string]: Object }): void;
Called when this UIAbility sets data to share. **ohos.extra.param.key.contentTitle** indicates the title of the content to share in the sharing box, and **ohos.extra.param.key.shareAbstract** provides an abstract description of the content, **ohos.extra.param.key.shareUrl** indicates the online address of the service. You need to set these three items as objects, with the key set to **title**, **abstract**, and **url**, respectively. Called when this UIAbility sets data to share. **ohos.extra.param.key.contentTitle** indicates the title of the content to share in the sharing box, **ohos.extra.param.key.shareAbstract** provides an abstract description of the content, and **ohos.extra.param.key.shareUrl** indicates the online address of the service. You need to set these three items as objects, with the key set to **title**, **abstract**, and **url**, respectively.
**System capability**: SystemCapability.Ability.AbilityRuntime.AbilityCore **System capability**: SystemCapability.Ability.AbilityRuntime.AbilityCore
......
...@@ -153,14 +153,14 @@ Creates a spring animation curve. If multiple spring animations are applied to t ...@@ -153,14 +153,14 @@ Creates a spring animation curve. If multiple spring animations are applied to t
| --------- | ------ | ---- | ----- | | --------- | ------ | ---- | ----- |
| response | number | No | Duration of one complete oscillation,<br>Default value: **0.55**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.| | response | number | No | Duration of one complete oscillation,<br>Default value: **0.55**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| dampingFraction | number | No | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.| | dampingFraction | number | No | Damping coefficient.<br>**0**: undamped. In this case, the spring oscillates forever.<br>> 0 and < 1: underdamped. In this case, the spring overshoots the equilibrium position.<br>**1**: critically damped.<br>> 1: overdamped. In this case, the spring approaches equilibrium gradually.<br>Default value: **0.825**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.55**.|
| overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, if the **response** values of the two animations are different, they will transit smoothly over this duration.<br><br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in **[animation](../arkui-ts/ts-animatorproperty.md)** or **[animateTo](../arkui-ts/ts-explicit-animation.md)**. The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.| | overlapDuration | number | No | Duration for animations to overlap, in seconds. When animations overlap, if the **response** values of the two animations are different, they will transit smoothly over this duration.<br><br>Default value: **0**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0**.<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
**Return value** **Return value**
| Type | Description | | Type | Description |
| ---------------------------------- | ---------------- | | ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.| | [ICurve](#icurve)| Curve.<br>**NOTE**<br>The spring animation curve is physics-based. Its duration depends on the **springMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). The time cannot be normalized. Therefore, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.|
**Example** **Example**
...@@ -187,13 +187,13 @@ Creates a responsive spring animation curve. It is a special case of [springMoti ...@@ -187,13 +187,13 @@ Creates a responsive spring animation curve. It is a special case of [springMoti
| --------- | ------ | ---- | ----- | | --------- | ------ | ---- | ----- |
| response | number | No | See **response** in **springMotion**.<br>Default value: **0.15**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.15**.| | response | number | No | See **response** in **springMotion**.<br>Default value: **0.15**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.15**.|
| dampingFraction | number | No | See **dampingFraction** in **springMotion**.<br>Default value: **0.86**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.86**.| | dampingFraction | number | No | See **dampingFraction** in **springMotion**.<br>Default value: **0.86**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.86**.|
| overlapDuration | number | No | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **[animation](../arkui-ts/ts-animatorproperty.md)** or **[animateTo](../arkui-ts/ts-explicit-animation.md)**. In addition, the interpolation cannot be obtained by using the **[interpolate](#interpolate)** function of the curve.| | overlapDuration | number | No | See **overlapDuration** in **springMotion**.<br>Default value: **0.25**<br>Unit: second<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the default value **0.25**.<br> To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in [animation](../arkui-ts/ts-animatorproperty.md) or [animateTo](../arkui-ts/ts-explicit-animation.md). In addition, the interpolation cannot be obtained by using the [interpolate](#interpolate) function of the curve.|
**Return value** **Return value**
| Type | Description | | Type | Description |
| ---------------------------------- | ---------------- | | ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Curve.<br>**NOTE**<br>1. To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>2. The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. In addition, the interpolation cannot be obtained by using the **interpolate** function of the curve.| | [ICurve](#icurve)| Curve.<br>**NOTE**<br>1. To apply custom settings for a spring animation, you are advised to use **springMotion**. When using **responsiveSpringMotion**, you are advised to retain the default settings.<br>2. The duration of the responsive spring animation depends on the **responsiveSpringMotion** parameters and the previous velocity, rather than the **duration** parameter in **animation** or **animateTo**. In addition, the interpolation cannot be obtained by using the [interpolate](#interpolate) function of the curve.|
**Example** **Example**
...@@ -220,14 +220,12 @@ Creates an interpolating spring curve animated from 0 to 1. The actual animation ...@@ -220,14 +220,12 @@ Creates an interpolating spring curve animated from 0 to 1. The actual animation
| stiffness | number | Yes | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.| | stiffness | number | Yes | Stiffness. It is the degree to which an object deforms by resisting the force applied. In an elastic system, the greater the stiffness, the stronger the ability to resist deformation, and the faster the speed of restoring to the equilibrium position.|
| damping | number | Yes | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.| | damping | number | Yes | Damping. It is a pure number and has no real physical meaning. It is used to describe the oscillation and attenuation of the system after being disturbed. The larger the damping, the smaller the number of oscillations of elastic motion, and the smaller the oscillation amplitude.|
**Return value** **Return value**
| Type | Description | | Type | Description |
| ---------------------------------- | ---------------- | | ---------------------------------- | ---------------- |
| [ICurve](#icurve)| Interpolation curve.| | [ICurve](#icurve)| Interpolation curve.|
**Example** **Example**
```ts ```ts
...@@ -235,6 +233,37 @@ import Curves from '@ohos.curves' ...@@ -235,6 +233,37 @@ import Curves from '@ohos.curves'
Curves.interpolatingSpring(100, 1, 228, 30) // Create an interpolating spring curve whose duration is subject to spring parameters. Curves.interpolatingSpring(100, 1, 228, 30) // Create an interpolating spring curve whose duration is subject to spring parameters.
``` ```
## Curves.customCurve<sup>10+</sup>
customCurve(interpolate: (fraction: number) => number): ICurve
Creates a custom curve.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name | Type | Mandatory| Description |
| ----------- | ---------------------------- | ---- | ------------------------------------------------------------ |
| interpolate | (fraction: number) => number | Yes | Custom interpolation callback.<br>**fraction**: input x value for interpolation when the animation starts. Value range: [0, 1]<br>The return value is the y value of the curve. Value range: [0, 1]<br>**NOTE**<br>If **fraction** is **0**, the return value **0** corresponds to the animation start point; any other return value means that the animation jumps at the start point.<br>If **fraction** is **1**, the return value **1** corresponds to the animation end point; any other return value means that the end value of the animation is not the value of the state variable, which will result in an effect of transition from that end value to the value of the state variable.|
**Return value**
| Type | Description |
| ----------------- | ---------------- |
| [ICurve](#icurve) | Interpolation curve.|
**Example**
```ts
import Curves from '@ohos.curves'
interpolate(fraction) {
return Math.sqrt(fraction);
}
Curves.customCurve(this.interpolate) // Create a custom curve.
```
## ICurve ## ICurve
......
...@@ -22,7 +22,7 @@ Defines a file metadata object, which includes the application name and file URI ...@@ -22,7 +22,7 @@ Defines a file metadata object, which includes the application name and file URI
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| ---------- | ------ | ---- | ---------------------------------------------------------------------------------------------- | | ---------- | ------ | ---- | ---------------------------------------------------------------------------------------------- |
| bundleName | string | Yes | Bundle name of the application, which can be obtained by using the method provided by [bundle.BundleInfo](js-apis-bundle-BundleInfo.md). | | bundleName | string | Yes | Bundle name of the application, which can be obtained by using the method provided by [bundle.BundleInfo](js-apis-bundle-BundleInfo.md). |
| uri | string | Yes | Name of the file in the application sandbox.<br>Currently, the URI has not been upgraded to the standard format. It can consist of digits (0–9), letters (a–z and A–Z), underscores (_), and period (.) only.| | uri | string | Yes | URI of the file in the application sandbox.<br>Currently, the URI is not in the standard format. It can consist of digits (0–9), letters (a–z and A–Z), underscores (_), and period (.) only.|
## FileData ## FileData
...@@ -51,7 +51,7 @@ inherits from [FileMeta](#filemeta) and [FileData](#filedata). ...@@ -51,7 +51,7 @@ inherits from [FileMeta](#filemeta) and [FileData](#filedata).
## GeneralCallbacks ## GeneralCallbacks
Provides general callbacks invoked during the backup or restoration process. The backup service uses these callbacks to notify the client of the backup/restoration phase of the application. Provides callbacks to be used in the backup or restoration process. The backup service uses these callbacks to notify the client of the backup/restoration phase of the application.
**System capability**: SystemCapability.FileManagement.StorageService.Backup **System capability**: SystemCapability.FileManagement.StorageService.Backup
...@@ -263,7 +263,7 @@ The following is an example of the file obtained: ...@@ -263,7 +263,7 @@ The following is an example of the file obtained:
"versionCode" : 1000000, "versionCode" : 1000000,
"versionName" : "1.0.0" "versionName" : "1.0.0"
}], }],
"deviceType" : "phone", "deviceType" : "default",
"systemFullName" : "OpenHarmony-4.0.0.0" "systemFullName" : "OpenHarmony-4.0.0.0"
} }
``` ```
...@@ -324,7 +324,7 @@ For details about the error codes, see [File Management Error Codes](../errorcod ...@@ -324,7 +324,7 @@ For details about the error codes, see [File Management Error Codes](../errorcod
"versionCode" : 1000000, "versionCode" : 1000000,
"versionName" : "1.0.0" "versionName" : "1.0.0"
}], }],
"deviceType" : "phone", "deviceType" : "default",
"systemFullName" : "OpenHarmony-4.0.0.0" "systemFullName" : "OpenHarmony-4.0.0.0"
} }
``` ```
...@@ -546,7 +546,7 @@ For details about the error codes, see [File Management Error Codes](../errorcod ...@@ -546,7 +546,7 @@ For details about the error codes, see [File Management Error Codes](../errorcod
## SessionRestore ## SessionRestore
Provides a restoration process object to support the data restoration process of applications. Before using the APIs of this class, you need to create a **SessionRestore** instance. Provides an object to support the data restoration process of applications. Before using the APIs of this class, you need to create a **SessionRestore** instance.
### constructor ### constructor
......
...@@ -14,6 +14,8 @@ import fileuri from "@ohos.file.fileuri"; ...@@ -14,6 +14,8 @@ import fileuri from "@ohos.file.fileuri";
Before using this module, you need to obtain the path of the file in the application sandbox. The following is an example: Before using this module, you need to obtain the path of the file in the application sandbox. The following is an example:
**Stage Model**
```js ```js
import UIAbility from '@ohos.app.ability.UIAbility'; import UIAbility from '@ohos.app.ability.UIAbility';
...@@ -25,6 +27,19 @@ export default class EntryAbility extends UIAbility { ...@@ -25,6 +27,19 @@ export default class EntryAbility extends UIAbility {
} }
``` ```
**FA Model**
```js
import featureAbility from '@ohos.ability.featureAbility';
let context = featureAbility.getContext();
context.getFilesDir().then((data) => {
let pathDir = data;
})
```
For details about how to obtain the FA model context, see [Context](js-apis-inner-app-context.md#context).
## fileUri.getUriFromPath ## fileUri.getUriFromPath
getUriFromPath(path: string): string getUriFromPath(path: string): string
......
...@@ -628,9 +628,11 @@ Enumerates the efficiency resource types. ...@@ -628,9 +628,11 @@ Enumerates the efficiency resource types.
| Name | Value | Description | | Name | Value | Description |
| ----------------------- | ---- | --------------------- | | ----------------------- | ---- | --------------------- |
| CPU | 1 | CPU resources, which prevent the application from being suspended. | | CPU | 1 | CPU resources, which prevent the application from being suspended. |
| COMMON_EVENT | 2 | A type of software resources, which prevent common events from being proxied when the application is suspended. | | COMMON_EVENT | 2 | Common events are not proxied when the application is suspended.|
| TIMER | 4 | A type of software resources, which prevent timers from being proxied when the application is suspended. | | TIMER | 4 | System timers are not proxied when the application is suspended.|
| WORK_SCHEDULER | 8 | WORK_SCHEDULER resources, which ensure that the application has more time to execute the task. | | WORK_SCHEDULER | 8 | WorkScheduler uses a loose control policy by default. For details, see [Restrictions on Using Work Scheduler Tasks](../../task-management/background-task-overview.md#restrictions-on using-work-scheduler-tasks).|
| BLUETOOTH | 16 | A type of hardware resources, which prevent Bluetooth resources from being proxied when the application is suspended. | | BLUETOOTH | 16 | Bluetooth resources are not proxied when the application is suspended.|
| GPS | 32 | A type of hardware resources, which prevent GPS resources from being proxied when the application is suspended. | | GPS | 32 | GPS resources are not proxied when the application is suspended.|
| AUDIO | 64 | A type of hardware resources, which prevent audio resources from being proxied when the application is suspended.| | AUDIO | 64 | Audio resources are not proxied when the application is suspended.|
| RUNNING_LOCK | 128 | RUNNING_LOCK resources are not proxied when the application is suspended.|
| SENSOR | 256 | Sensor callbacks are not intercepted.|
...@@ -22,7 +22,9 @@ You can use `$r` or `$rawfile` to create a **Resource** object, but its attribut ...@@ -22,7 +22,9 @@ You can use `$r` or `$rawfile` to create a **Resource** object, but its attribut
**filename**: name of the file in the **resources/rawfile** directory of the project. **filename**: name of the file in the **resources/rawfile** directory of the project.
**NOTE**<br>When referencing resources of the **Resource** type, make sure the data type is the same as that of the attribute method. For example, if an attribute method supports the **string | Resource** types, the data type of the **Resource** type must be string. > **NOTE**
>
> When referencing resources of the **Resource** type, make sure the data type is the same as that of the attribute method. For example, if an attribute method supports the **string | Resource** types, the data type of the **Resource** type must be string.
## Length ## Length
...@@ -230,7 +232,7 @@ The **CustomBuilder** type is used to define custom UI descriptions in component ...@@ -230,7 +232,7 @@ The **CustomBuilder** type is used to define custom UI descriptions in component
## PixelStretchEffectOptions<sup>10+</sup> ## PixelStretchEffectOptions<sup>10+</sup>
Describes the pixel stretch effect options. The **PixelStretchEffectOptions** type is used to describe the pixel stretch effect options.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ------ | ----------------- | ---- | -------------- | | ------ | ----------------- | ---- | -------------- |
...@@ -245,6 +247,67 @@ The **ModalTransition** type is used to set the transition type for a full-scree ...@@ -245,6 +247,67 @@ The **ModalTransition** type is used to set the transition type for a full-scree
| Name | Description | | Name | Description |
| ------- | ------------ | | ------- | ------------ |
| None | No transition animation for the full-screen modal. | | NONE | No transition animation for the modal. |
| Default | Slide-up and slide-down animation for the full-screen modal. | | DEFAULT | Slide-up and slide-down animation for the modal. |
| Alpha | Opacity animation for the full-screen modal.| | ALPHA | Opacity gradient animation for the modal. |
## Dimension<sup>10+</sup>
The **Length** type is used to represent a size unit.
| Type | Description |
| --------------------- | -------------------------------------- |
| [PX](#px10) | Physical pixel unit type. The unit px must be included, for example, **'10px'**.|
| [VP](#vp10) | Pixel unit type specific to the screen density. The unit vp must be included, for example, **'10vp'**.|
| [FP](#fp10) | Font pixel unit type. The unit fp must be included, for example, **'10fp'**.|
| [LPX](#lpx10) | Logical pixel unit type. The unit lpx must be included, for example, **'10lpx'**.|
| [Percentage](#percentage10) | Percentage type. The unit % must be included, for example, **'10%'**.|
| [Resource](#resource) | Size referenced from system or application resources.|
## PX<sup>10+</sup>
The **PX** type is used to represent a length in px.
| Type | Description |
| --------------------- | -------------------------------------- |
| {number}px | Physical pixel unit type. The unit px must be included, for example, **'10px'**.|
## VP<sup>10+</sup>
The **VP** type is used to represent a length in vp.
| Type | Description |
| --------------------- | -------------------------------------- |
| {number}vp | Pixel unit type specific to the screen density. The unit vp must be included, for example, **'10vp'**.|
## FP<sup>10+</sup>
The **FP** type is used to represent a length in fp.
| Type | Description |
| --------------------- | -------------------------------------- |
| {number}fp | Font pixel unit type. The unit fp must be included, for example, **'10fp'**.|
## LPX<sup>10+</sup>
The **LPX** type is used to represent a length in lpx.
| Type | Description |
| --------------------- | -------------------------------------- |
| {number}lpx | Logical pixel unit type. The unit lpx must be included, for example, **'10lpx'**.|
## Percentage<sup>10+</sup>
The **Percentage** type is used to represent a length in percentage.
| Type | Description |
| --------------------- | -------------------------------------- |
| {number}% | Percentage type. The unit % must be included, for example, **'10%'**.|
## Degree<sup>10+</sup>
The **Degree** type is used to represent a length in deg.
| Type | Description |
| --------------------- | -------------------------------------- |
| {number}deg | Degree type. The unit deg must be included, for example, **'10deg'**.|
# Background # Background
You can set the background of a component. You can set the background for a component.
> **NOTE** > **NOTE**
> >
...@@ -11,12 +11,22 @@ You can set the background of a component. ...@@ -11,12 +11,22 @@ You can set the background of a component.
| Name| Type| Description| | Name| Type| Description|
| -------- | -------- | -------- | | -------- | -------- | -------- |
| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component.<br>Since API version 9, this API is supported in ArkTS widgets.| | backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
| backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),<br>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | **src**: image address, which can be the address of an Internet or a local image or a Base64 encoded image. SVG images are not supported.<br>**repeat**: whether the background image is repeatedly used. By default, the background image is not repeatedly used. If the set image has a transparent background and **backgroundColor** is set, the image is overlaid on the background color.<br>Since API version 9, this API is supported in ArkTS widgets.| | backgroundImage | src: [ResourceStr](ts-types.md#resourcestr),<br>repeat?: [ImageRepeat](ts-appendix-enums.md#imagerepeat) | **src**: image address, which can be the address of an Internet or a local image or a Base64 encoded image. SVG images are not supported.<br>**repeat**: whether the background image is repeated. By default, the background image is not repeated. If the set image has a transparent background and **backgroundColor** is set, the image is overlaid on the background color.<br>Since API version 9, this API is supported in ArkTS widgets.|
| backgroundImageSize | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} \| [ImageSize](ts-appendix-enums.md#imagesize) | Width and height of the background image. If the input is a **{width: Length, height: Length}** object and only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.<br>The value range of **width** and **height** is [0, +∞).<br>Default value: **ImageSize.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. If **height** is set but **width** is not, the image width is adjusted based on the original aspect ratio of the image.| | backgroundImageSize | {<br>width?: [Length](ts-types.md#length),<br>height?: [Length](ts-types.md#length)<br>} \| [ImageSize](ts-appendix-enums.md#imagesize) | Width and height of the background image. If the input is a **{width: Length, height: Length}** object and only one attribute is set, the other attribute is the set value multiplied by the original aspect ratio of the image. By default, the original image aspect ratio remains unchanged.<br>The value range of **width** and **height** is [0, +∞).<br>Default value: **ImageSize.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. If **height** is set but **width** is not, the image width is adjusted based on the original aspect ratio of the image.|
| backgroundImagePosition | [Position](ts-types.md#position8) \| [Alignment](ts-appendix-enums.md#alignment) | Position of the background image in the component, that is, the coordinates relative to the upper left corner of the component.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>} <br> When **x** and **y** are set in percentage, the offset is calculated based on the width and height of the component.<br>Since API version 9, this API is supported in ArkTS widgets.| | backgroundImagePosition | [Position](ts-types.md#position8) \| [Alignment](ts-appendix-enums.md#alignment) | Position of the background image in the component, that is, the coordinates relative to the upper left corner of the component.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>} <br> When **x** and **y** are set in percentage, the offset is calculated based on the width and height of the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
| backgroundBlurStyle<sup>9+</sup> | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),<br>options<sup>10+</sup>?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10) | Background blur style applied between the content and the background.<br>**value**: settings of the background blur style, including the blur radius, mask color, mask opacity, and saturation.<br>**options**: background blur options. Optional.<br>This API is supported in ArkTS widgets.|
## BackgroundBlurStyleOptions<sup>10+</sup>
| Name | Type | Mandatory| Description |
| --------------------------- | ------------------------------------------------------- | ---- | ------------------------------------------------------------ |
| colorMode<sup>10+</sup> | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | No | Color mode used for the background blur.<br>Default value: **ThemeColorMode.System**|
| adaptiveColor<sup>10+</sup> | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | No | Adaptive color mode.<br>Default value: **AdaptiveColor.Default**|
## Example ## Example
### Example 1
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
...@@ -84,3 +94,30 @@ struct BackgroundExample { ...@@ -84,3 +94,30 @@ struct BackgroundExample {
``` ```
![en-us_image_0000001211898502](figures/en-us_image_0000001211898502.png) ![en-us_image_0000001211898502](figures/en-us_image_0000001211898502.png)
### Example 2
```ts
// xxx.ets
@Entry
@Component
struct BackgroundBlurStyleDemo {
build() {
Column() {
Row() {
Text("Thin Material")
}
.width('50%')
.height('50%')
.backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.LIGHT, adaptiveColor: AdaptiveColor.DEFAULT })
.position({ x: '15%', y: '30%' })
}
.height('100%')
.width('100%')
.backgroundImage($r('app.media.bg'))
.backgroundImageSize(ImageSize.Cover)
}
}
```
![en-us_image_background_blur_style](figures/en-us_image_background_blur_style.png)
# Background Blur
You can apply background blur effects to a component.
> **NOTE**
>
> The APIs of this module are supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
>
> The APIs provided by this module are system APIs.
## Attributes
| Name | Parameter | Description |
| -------------------- | ----------------------- | ------------------------ |
| backgroundBlurStyle | value:[BlurStyle](ts-appendix-enums.md#blurstyle9),<br>options<sup>10+</sup>?:[BackgroundBlurStyleOptions](#backgroundblurstyleoptions10) | Background blur style applied between the content and the background.<br>**value**: settings of the background blur style, including the blur radius, mask color, mask opacity, and saturation.<br>**options**: background blur options. This parameter is optional.<br>This API is supported in ArkTS widgets.|
## BackgroundBlurStyleOptions<sup>10+</sup>
| Name| Type| Mandatory| Description|
| ----------- | ------| ------ | ------ |
| colorMode<sup>10+</sup> | [ThemeColorMode](ts-appendix-enums.md#themecolormode10) | No| Color mode used for the background blur.<br>Default value: **ThemeColorMode.System**|
| adaptiveColor<sup>10+</sup> | [AdaptiveColor](ts-appendix-enums.md#adaptivecolor10) | No| Adaptive color mode.<br>Default value: **AdaptiveColor.Default**|
## Example
```ts
// xxx.ets
@Entry
@Component
struct BackgroundBlurStyleDemo {
build() {
Column() {
Row() {
Text("Thin Material")
}
.width('50%')
.height('50%')
.backgroundBlurStyle(BlurStyle.Thin, { colorMode: ThemeColorMode.Light, adaptiveColor: AdaptiveColor.Default })
.position({ x: '15%', y: '30%' })
}
.height('100%')
.width('100%')
.backgroundImage($r('app.media.bg'))
.backgroundImageSize(ImageSize.Cover)
}
}
```
![en-us_image_background_blur_style](figures/en-us_image_background_blur_style.png)
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
| flexGrow | number | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.| | flexGrow | number | Percentage of the parent container's remaining space that is allocated to the component.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
| flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**.<br>Since API version 9, this API is supported in ArkTS widgets.| | flexShrink | number | Percentage of the parent container's shrink size that is allocated to the component.<br>When the parent container is **\<Row>** or **\<Column>**, the default value is **0**.<br> When the parent container is **\<Flex>**, the default value is **1**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container (**\<Flex>**, **\<Column>**, **\<Row>**, or **\<GridRow>**).<br>**\<GridCol>** can have the **alignsSelf** attribute bound to change its own layout along the cross axis.<br>Default value: **ItemAlign.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.| | alignSelf | [ItemAlign](ts-appendix-enums.md#itemalign) | Alignment mode of the child components along the cross axis of the parent container. The setting overwrites the **alignItems** setting of the parent container (**\<Flex>**, **\<Column>**, **\<Row>**, or **\<GridRow>**).<br>**\<GridCol>** can have the **alignsSelf** attribute bound to change its own layout along the cross axis.<br>Default value: **ItemAlign.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.|
| layoutWeight | number \| string | Weight of the component during layout. When the container size is determined, the container space is allocated along the main axis among the component and sibling components based on the layout weight, and the component size setting is ignored.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute is valid only for the **\<Row>**, **\<Column>**, and **\<Flex>** layouts.<br>The value can be a number greater than or equal to 0 or a string that can be converted to a number.|
## Example ## Example
......
# Image Effects # Image Effects
Image effects include blur, shadow, and much more. Image effects include blur, shadow, spherical effect, and much more.
> **NOTE** > **NOTE**
> >
...@@ -10,19 +10,22 @@ Image effects include blur, shadow, and much more. ...@@ -10,19 +10,22 @@ Image effects include blur, shadow, and much more.
## Attributes ## Attributes
| Name | Type | Default Value| Description | | Name | Type | Default Value| Description |
| ----------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ | | -------------------------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| blur | number | - | Applies the content blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.| | blur | number | - | Content blur radius of the component. A greater value indicates a higher blur degree. If the value is **0**, the content is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.|
| backdropBlur | number | - | Applies the background blur effect to the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.| | backdropBlur | number | - | Background blur radius of the component. A greater value indicates a higher blur degree. If the value is **0**, the background is not blurred.<br>Value range: [0, +∞)<br>Since API version 9, this API is supported in ArkTS widgets.|
| shadow | [ShadowOptions](#shadowoptions) \| [ShadowStyle](#shadowstyle10) | - | Applies a shadow effect to the current component.<br>When the value type is **ShadowOptions**, the blur radius, shadow color, and offset along the x-axis and y-axis can be specified.<br>When the value type is **ShadowStyle**, the shadow style can be specified.<br>Since API version 9, this API is supported in ArkTS widgets, except that the [ShadowStyle](#shadowstyle10) type is not supported.| | shadow | [ShadowOptions](#shadowoptions) \| [ShadowStyle](#shadowstyle10)<sup>10+</sup> | - | Shadow of the component.<br>When the value type is **ShadowOptions**, the blur radius, shadow color, and offset along the x-axis and y-axis can be specified.<br>When the value type is **ShadowStyle**, the shadow style can be specified.<br>Since API version 9, this API is supported in ArkTS widgets, except that the [ShadowStyle](#shadowstyle10) type is not supported.|
| grayscale | number | 0.0 | Converts the input image to grayscale. The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>Since API version 9, this API is supported in ArkTS widgets.| | grayscale | number | 0.0 | Grayscale conversion ratio of the component. If the value is **1.0**, the component is completely converted to grayscale. If the value is **0.0**, the component remains unchanged. Between 0 and 1, the value applies a linear multiplier on the grayscale effect. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| brightness | number | 1.0 | Applies a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.| | brightness | number | 1.0 | Brightness of the component. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A greater value indicates a higher brightness.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| saturate | number | 1.0 | Applies the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.| | saturate | number | 1.0 | Saturation of the component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. If the value is **1**, the source image is displayed. If the value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. If the value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| contrast | number | 1.0 | Applies the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than 1, a larger value indicates a higher contrast and a clearer image. If the value is less than 1, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.| | contrast | number | 1.0 | Contrast of the component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than 1, a larger value indicates a higher contrast and a clearer image. If the value is less than 1, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage.<br>Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion, and **0** indicates that the image does not change. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.| | invert | number | 0 | Inversion ratio of the component. If the value is **1**, the component is completely inverted. If the value is **0**, the component remains unchanged. The unit is percentage.<br>Value range: [0, 1]<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image conversion ratio. The value **1** indicates the image is completely sepia, and **0** indicates that the image does not change. The unit is percentage.<br>Since API version 9, this API is supported in ArkTS widgets.| | sepia | number | 0 | Sepia conversion ratio of the component. If the value is **1**, the image is completely sepia. If the value is **0**, the component remains unchanged. The unit is percentage.<br>Since API version 9, this API is supported in ArkTS widgets.|
| hueRotate | number \| string | '0deg' | Applies the hue rotation effect to the current component. The input parameter is a rotation angle.<br>Value range: (-∞, +∞)<br>**NOTE**<br>A rotation of 360 degrees leaves the color unchanged. A rotation of 180 degrees and then –180 degrees also leaves the color unchanged. When the data type is number, the value 90 is equivalent to **'90deg'**.<br>Since API version 9, this API is supported in ArkTS widgets.| | hueRotate | number \| string | '0deg' | Hue rotation angle of the component.<br>Value range: (-∞, +∞)<br>**NOTE**<br>A rotation of 360 degrees leaves the color unchanged. A rotation of 180 degrees and then -180 degrees also leaves the color unchanged. When the data type is number, the value 90 is equivalent to **'90deg'**.<br>Since API version 9, this API is supported in ArkTS widgets.|
| colorBlend <sup>8+</sup> | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | Applies the color blend effect to the current component. The input parameter is the blended color.<br>Since API version 9, this API is supported in ArkTS widgets.| | colorBlend <sup>8+</sup> | [Color](ts-appendix-enums.md#color) \| string \| [Resource](ts-types.md#resource) | - | Color to blend with the component.<br>Since API version 9, this API is supported in ArkTS widgets.|
| sphericalEffect<sup>10+</sup> | [number] | - | Spherical degree of the component.<br>The value ranges from 0 to 1.<br>**NOTE**<br>1. If the value is **0**, the component remains unchanged. If the value is **1**, the component is completely spherical. Between 0 and 1, a greater value indicates a higher spherical degree.<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br> 2. If a component image is loaded asynchronously, the spherical effect is not supported. For example, the **\<Image>** component uses asynchronous loading by default, which means that **syncLoad** must be set to **true** to apply the spherical effect. However, this setting is not recommended. Asynchronous loading is also used for **backgroundImage**. Therefore, if **backgroundImage** is set, the spherical effect is not supported.<br>3. If the shadow effect is set for a component, the spherical effect is not supported.|
| lightUpEffect<sup>10+</sup> | [number] | - | Light up degree of the component.<br>The value ranges from 0 to 1.<br>If the value is **0**, the component is dark. If the value is **1**, the component is fully illuminated. Between 0 and 1, a greater value indicates higher luminance. A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.|
| pixelStretchEffect<sup>10+</sup> | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | - | Pixel stretch effect options.<br>The **options** parameter includes the length by which a pixel is stretched toward the four edges.<br>**NOTE**<br>1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges.<br>2. 2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged:<br>(1) The image shrinks from the four edges by the absolute value of length set through **options**.<br>(2) The image is stretched back to the original size with edge pixels.<br>3. Constraints on **options**:<br>(1) The length values for the four edges must be all positive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction.<br>(2) The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed.<br>(3) If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image. |
## ShadowOptions ## ShadowOptions
...@@ -41,12 +44,12 @@ Since API version 9, this API is supported in ArkTS widgets. ...@@ -41,12 +44,12 @@ Since API version 9, this API is supported in ArkTS widgets.
| Name | Description | | Name | Description |
| ------ | -------------------------------------- | | ------ | -------------------------------------- |
| OuterDefaultXS | Mini shadow.| | OUTER_DEFAULT_XS | Mini shadow.|
| OuterDefaultSM | Small shadow.| | OUTER_DEFAULT_SM | Small shadow.|
| OuterDefaultMD | Medium shadow.| | OUTER_DEFAULT_MD | Medium shadow.|
| OuterDefaultLG | Large shadow.| | OUTER_DEFAULT_LG | Large shadow.|
| OuterFloatingSM | Floating small shadow.| | OUTER_FLOATING_SM | Floating small shadow.|
| OuterFloatingMD | Floating medium shadow.| | OUTER_FLOATING_MD | Floating medium shadow.|
## Example ## Example
...@@ -147,3 +150,177 @@ struct ImageEffectsExample { ...@@ -147,3 +150,177 @@ struct ImageEffectsExample {
``` ```
![imageeffect](figures/imageeffect.png) ![imageeffect](figures/imageeffect.png)
### Example 3
You can apply a spherical effect to a component to make it appear spherized.
```ts
// xxx.ets
@Entry
@Component
struct SphericalEffectExample {
build() {
Stack() {
TextInput({placeholder: "Enter a percentage."})
.width('50%')
.height(35)
.type(InputType.Number)
.enterKeyType(EnterKeyType.Done)
.caretColor(Color.Red)
.placeholderColor(Color.Blue)
.placeholderFont({
size: 20,
style: FontStyle.Italic,
weight: FontWeight.Bold
})
.sphericalEffect(0.5)
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks with the spherical effect applied:
![textInputSpherical1](figures/textInputSpherical1.png)
Below is how the component looks without the spherical effect applied:
![textInputSpherical2](figures/textInputSpherical2.png)
### Example 4
You can apply a light up effect to a component.
```ts
// xxx.ets
@Entry
@Component
struct LightUpExample {
build() {
Stack() {
Text('This is the text content with letterSpacing 0.')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('50%')
.lightUpEffect(0.6)
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks with **lightUpEffect** set to **0.6**:
![textLightUp3](figures/textLightUp3.png)
Below is how the component looks with **lightUpEffect** set to **0.2**:
![textLightUp2](figures/textLightUp2.png)
Below is how the component looks without the light up effect applied:
![textLightUp1](figures/textLightUp1.png)
### Example 5
```ts
// xxx.ets
@Entry
@Component
struct LightUpExample {
@State isLunar: boolean = false
private selectedDate: Date = new Date('2028-08-08')
build() {
Stack() {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected: this.selectedDate
})
.lunar(this.isLunar)
.onChange((value: DatePickerResult) => {
this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info('select current date is: ' + JSON.stringify(value))
})
.lightUpEffect(0.6)
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
![datePickerLightUp2](figures/datePickerLightUp2.png)
Below is how the component looks without the light up effect applied:
![datePickerLightUp1](figures/datePickerLightUp1.png)
### Example 6
You can apply a pixel stretch effect to a component.
```ts
// xxx.ets
@Entry
@Component
struct PixelStretchExample {
build() {
Stack() {
Text('This is the text content with letterSpacing 0.')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('50%')
.pixelStretchEffect({top:10,left:10,right:10,bottom:10 })
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks with **lightUpEffect** set to **0.6**:
![textPixelStretch1](figures/textPixelStretch1.png)
Below is how the component looks without the pixel stretch effect applied:
![textPixelStretch2](figures/textPixelStretch2.png)
### Example 7
Based on Example 6, change the length values of the pixel stretch effect to negative:
```ts
// xxx.ets
@Entry
@Component
struct PixelStretchExample {
build() {
Stack() {
Text('This is the text content with letterSpacing 0.')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('50%')
.pixelStretchEffect({top:-10,left:-10,right:-10,bottom:-10 })
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks:
![textPixelStretch3](figures/textPixelStretch3.png)
Compared with the original image, the effect drawing is implemented in two steps:
1. The image size is reduced. The resultant size is the original image size minus
the lengths by which the pixels shrink. For example, if the original image size is 100 x 100 and **pixelStretchEffect({top:-10,left:-10,**
**right:-10,bottom:-10})** is set, the resultant size is (100-10-10) x (100-10-10), that is, 8080.
2. Edge pixels are stretched to restore the image to its original size.
\ No newline at end of file
# Light Up Effect
You can apply a light up effect to a component.
> **NOTE**
>
> This attribute is supported since API Version 10. Updates will be marked with a superscript to indicate their earliest API version. This is a system API.
## Attributes
| Name| Type| Description|
| -------- | -------- | -------- |
| lightUpEffect | [number] | Light up degree of the component.<br>The value ranges from 0 to 1.<br>If the value is 0, the component is dark. If the value is 1, the component is fully illuminated. Between 0 and 1, a greater value indicates higher luminance. A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.|
## Example
### Example 1
```ts
// xxx.ets
@Entry
@Component
struct LightUpExample {
build() {
Stack() {
Text('This is the text content with letterSpacing 0.')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('50%')
.lightUpEffect(0.6)
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks with **lightUpEffect** set to **0.6**:
![textLightUp3](figures/textLightUp3.png)
Below is how the component looks with **lightUpEffect** set to **0.2**:
![textLightUp2](figures/textLightUp2.png)
Below is how the component looks without the light up effect applied:
![textLightUp1](figures/textLightUp1.png)
### Example 2
```ts
// xxx.ets
@Entry
@Component
struct LightUpExample {
@State isLunar: boolean = false
private selectedDate: Date = new Date('2028-08-08')
build() {
Stack() {
DatePicker({
start: new Date('1970-1-1'),
end: new Date('2100-1-1'),
selected: this.selectedDate
})
.lunar(this.isLunar)
.onChange((value: DatePickerResult) => {
this.selectedDate.setFullYear(value.year, value.month, value.day)
console.info('select current date is: ' + JSON.stringify(value))
})
.lightUpEffect(0.6)
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
![datePickerLightUp2](figures/datePickerLightUp2.png)
Below is how the component looks without the light up effect applied:
![datePickerLightUp1](figures/datePickerLightUp1.png)
# Modal Transition
You can bind a full-screen modal to a component through the **bindContentCover** attribute. Better yet, with the **ModalTransition** parameter, you can apply a transition effect for when the component is inserted or deleted.
> **NOTE**
>
> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
> Switching between landscape and portrait modes is not supported.
## Attributes
| Name | Parameter | Description |
| ---------------- | ---------------------------------------- | ---------------------------------------- |
| bindContentCover | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>type?: [ModalTransition](ts-types.md#modaltransition10) | Binds a modal to the component, which can be displayed when the component is touched. The content of the modal is customizable. The transition type can be set to none, slide-up and slide-down animation, and opacity gradient animation.<br>**isShow**: whether to display the modal. Mandatory.<br>**builder**: content of the modal. Mandatory.<br>**type**: transition type of the modal. This parameter is optional. |
## Example
### Example 1
This example applies a custom animation to two modals whose transition type is none.
```ts
// xxx.ets
@Entry
@Component
struct ModalTransitionExample {
@State isShow:boolean = false
@State isShow2:boolean = false
@Builder myBuilder2() {
Column() {
Button("close modal 2")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow2 = false;
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Orange)
}
@Builder myBuilder() {
Column() {
Button("transition modal 2")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow2 = true;
}).bindContentCover($$this.isShow2, this.myBuilder2(), ModalTransition.NONE)
Button("close modal 1")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow = false;
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
.justifyContent(FlexAlign.Center)
}
build() {
Column() {
Button("transition modal 1")
.onClick(() => {
this.isShow = true
})
.fontSize(20)
.margin(10)
.bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.NONE)
}
.justifyContent(FlexAlign.Center)
.backgroundColor("#ff49c8ab")
.width('100%')
.height('100%')
}
}
```
![en-us_full_screen_modal_none_1](figures/en-us_full_screen_modal_none_1.gif)
### Example 2
This example applies a custom animation to two modals whose transition type is none.
```ts
// xxx.ets
import curves from '@ohos.curves';
@Entry
@Component
struct ModalTransitionExample {
@State @Watch("isShow1Change") isShow:boolean = false
@State @Watch("isShow2Change") isShow2:boolean = false
@State isScale1:number = 1;
@State isScale2:number = 1;
@State flag: boolean = true
@State show: string = 'show'
isShow1Change() {
this.isShow ? this.isScale1 = 0.95 : this.isScale1 = 1
}
isShow2Change() {
this.isShow2 ? this.isScale2 = 0.95 : this.isScale2 = 1
}
@Builder myBuilder2() {
Column() {
Button("close modal 2")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow2 = false;
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Orange)
}
@Builder myBuilder() {
Column() {
Button("transition modal 2")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow2 = true;
}).bindContentCover($$this.isShow2, this.myBuilder2(), ModalTransition.NONE)
Button("close modal 1")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow = false;
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
.justifyContent(FlexAlign.Center)
.scale({x: this.isScale2, y: this.isScale2})
.animation({curve:curves.springMotion()})
}
build() {
Column() {
Button("transition modal 1")
.onClick(() => {
this.isShow = true
})
.fontSize(20)
.margin(10)
.bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.NONE)
}
.justifyContent(FlexAlign.Center)
.backgroundColor("#ff49c8ab")
.width('100%')
.height('100%')
.scale({ x: this.isScale1, y: this.isScale1 })
.animation({ curve: curves.springMotion() })
}
}
```
![en-us_full_screen_modal_none_2](figures/en-us_full_screen_modal_none_2.gif)
### Example 3
This example shows two modals whose transition type is slide-up and slide-down animation.
```ts
// xxx.ets
@Entry
@Component
struct ModalTransitionExample {
@State isShow:boolean = false
@State isShow2:boolean = false
@Builder myBuilder2() {
Column() {
Button("close modal 2")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow2 = false;
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
}
@Builder myBuilder() {
Column() {
Button("transition modal 2")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow2 = true;
}).bindContentCover(this.isShow2, this.myBuilder2(), ModalTransition.DEFAULT)
Button("close modal 1")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow = false;
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
.justifyContent(FlexAlign.Center)
}
build() {
Column() {
Button("transition modal 1")
.onClick(() => {
this.isShow = true
})
.fontSize(20)
.margin(10)
.bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.DEFAULT)
}
.justifyContent(FlexAlign.Center)
.backgroundColor(Color.White)
.width('100%')
.height('100%')
}
}
```
![en-us_full_screen_modal_default](figures/en-us_full_screen_modal_default.gif)
### Example 4
This example shows two modals whose transition type is opacity gradient animation.
```ts
// xxx.ets
@Entry
@Component
struct ModalTransitionExample {
@State isShow:boolean = false
@State isShow2:boolean = false
@Builder myBuilder2() {
Column() {
Button("close modal 2")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow2 = false;
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Gray)
.justifyContent(FlexAlign.Center)
}
@Builder myBuilder() {
Column() {
Button("transition modal 2")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow2 = true;
}).bindContentCover(this.isShow2, this.myBuilder2(), ModalTransition.ALPHA)
Button("close modal 1")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow = false;
})
}
.width('100%')
.height('100%')
.backgroundColor(Color.Pink)
.justifyContent(FlexAlign.Center)
}
build() {
Column() {
Button("transition modal 1")
.onClick(() => {
this.isShow = true
})
.fontSize(20)
.margin(10)
.bindContentCover($$this.isShow, this.myBuilder(), ModalTransition.ALPHA)
}
.justifyContent(FlexAlign.Center)
.backgroundColor(Color.White)
.width('100%')
.height('100%')
}
}
```
![en-us_full_screen_modal_alpha](figures/en-us_full_screen_modal_alpha.gif)
# Pixel Stretch Effect
You can apply a pixel stretch effect to a component.
> **NOTE**
>
> This attribute is supported since API Version 10. Updates will be marked with a superscript to indicate their earliest API version. This is a system API.
## Attributes
| Name| Type| Description|
| -------- | -------- | -------- |
| pixelStretchEffect | [PixelStretchEffectOptions](ts-types.md#pixelstretcheffectoptions10) | Pixel stretch effect options.<br>The **options** parameter includes the length by which a pixel is stretched toward the four edges.<br>**NOTE**<br>1. If the length is a positive value, the original image is stretched, and the image size increases. The edge pixels grow by the set length toward the top, bottom, left, and right edges.<br>2. If the length is a negative value, the original image shrinks as follows, but the image size remains unchanged:<br> (1) The image shrinks from the four edges by the absolute value of length set through **options**. (2) The image is stretched back to the original size with edge pixels.<br>3. Constraints on **options**:<br>(1) The length values for the four edges must be all postive or all negative. That is, the four edges are stretched or shrink at the same time in the same direction. 2. The length values must all be a percentage or a specific value. Combined use of the percentage and specific value is not allowed. 3. If the input value is invalid, the image is displayed as {0, 0, 0, 0}, that is, the image is the same as the original image.|
## Example
### Example 1
```ts
// xxx.ets
@Entry
@Component
struct PixelStretchExample {
build() {
Stack() {
Text('This is the text content with letterSpacing 0.')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('50%')
.pixelStretchEffect({top:10,left:10,right:10,bottom:10 })
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks with the pixel stretch effect applied:
![textPixelStretch1](figures/textPixelStretch1.png)
Below is how the component looks without the pixel stretch effect applied:
![textPixelStretch2](figures/textPixelStretch2.png)
A comparison of the preceding two figures shows that, if the length values are positive, the original image is stretched.
### Example 2
Based on Example 1, change the length values of the pixel stretch effect to negative:
```ts
// xxx.ets
@Entry
@Component
struct PixelStretchExample {
build() {
Stack() {
Text('This is the text content with letterSpacing 0.')
.letterSpacing(0)
.fontSize(12)
.border({ width: 1 })
.padding(10)
.width('50%')
.pixelStretchEffect({top:-10,left:-10,right:-10,bottom:-10 })
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks:
![textPixelStretch3](figures/textPixelStretch3.png)
Compared with the original image, the effect drawing is implemented in two steps:
1. The image size is reduced. The resultant size is the originial image size minus the lengths by which the pixels shrink. For example, if the original image size is 100 x 100 and **pixelStretchEffect({top:-10,left:-10,right:-10,bottom:-10})** is set, the resultant size is (100-10-10) x (100-10-10), that is, 8080.
2. Edge pixels are stretched to restore the image to its original size.
\ No newline at end of file
...@@ -29,6 +29,8 @@ You can bind a popup to a component, specifying its content, interaction logic, ...@@ -29,6 +29,8 @@ You can bind a popup to a component, specifying its content, interaction logic,
| messageOptions<sup>10+</sup> | [PopupMessageOptions](#popupmessageoptions10) | No | Parameters of the popup message. | | messageOptions<sup>10+</sup> | [PopupMessageOptions](#popupmessageoptions10) | No | Parameters of the popup message. |
| targetSpace<sup>10+</sup> | [Length](ts-types.md#length) | No | Space between the popup and the target. | | targetSpace<sup>10+</sup> | [Length](ts-types.md#length) | No | Space between the popup and the target. |
| placement<sup>10+</sup> | [Placement](ts-appendix-enums.md#placement8) | No | Position of the popup relative to the target. The default value is **Placement.Bottom**.<br>If both **placementOnTop** and **placement** are set, the latter prevails.| | placement<sup>10+</sup> | [Placement](ts-appendix-enums.md#placement8) | No | Position of the popup relative to the target. The default value is **Placement.Bottom**.<br>If both **placementOnTop** and **placement** are set, the latter prevails.|
| offset<sup>10+</sup> | [Position](ts-types.md#position8) | No | Offset of the popup relative to the display position specified by **placement**. |
| enableArrow<sup>10+</sup> | boolean | No | Whether to display the arrow.<br>Default value: **true**|
## PopupMessageOptions<sup>10+</sup> ## PopupMessageOptions<sup>10+</sup>
...@@ -40,7 +42,7 @@ You can bind a popup to a component, specifying its content, interaction logic, ...@@ -40,7 +42,7 @@ You can bind a popup to a component, specifying its content, interaction logic,
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ---------------------------- | ---------------------------------------- | ---- | ---------------------------------------- | | ---------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Popup builder. | | builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Popup builder.<br>**NOTE**<br>The **popup** attribute is a universal attribute. A custom popup does not support display of another popup. The **position** attribute cannot be used for the first-layer container under the builder. If the **position** attribute is used, the popup will not be displayed. |
| placement | [Placement](ts-appendix-enums.md#placement8) | No | Preferred position of the popup. If the set position is insufficient for holding the popup, it will be automatically adjusted.<br>Default value: **Placement.Bottom**| | placement | [Placement](ts-appendix-enums.md#placement8) | No | Preferred position of the popup. If the set position is insufficient for holding the popup, it will be automatically adjusted.<br>Default value: **Placement.Bottom**|
| popupColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the popup. | | popupColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the popup. |
| enableArrow | boolean | No | Whether to display an arrow.<br>Since API version 9, if the position set for the popup is not large enough, the arrow will not be displayed. For example, if **placement** is set to **Left**, but the popup height (80 vp) is less than the sum of the arrow width (32 vp) and diameter of popup rounded corner (48 vp), the arrow will not be displayed.<br>Default value: **true**| | enableArrow | boolean | No | Whether to display an arrow.<br>Since API version 9, if the position set for the popup is not large enough, the arrow will not be displayed. For example, if **placement** is set to **Left**, but the popup height (80 vp) is less than the sum of the arrow width (32 vp) and diameter of popup rounded corner (48 vp), the arrow will not be displayed.<br>Default value: **true**|
...@@ -48,8 +50,10 @@ You can bind a popup to a component, specifying its content, interaction logic, ...@@ -48,8 +50,10 @@ You can bind a popup to a component, specifying its content, interaction logic,
| onStateChange | (event: { isVisible: boolean }) =&gt; void | No | Callback for the popup status change event.<br/>**isVisible**: whether the popup is visible. | | onStateChange | (event: { isVisible: boolean }) =&gt; void | No | Callback for the popup status change event.<br/>**isVisible**: whether the popup is visible. |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | No | Offset of the popup arrow relative to the popup.<br/>When the arrow is at the top or bottom of the popup: The value **0** indicates that the arrow is located on the leftmost, and any other value indicates the distance from the arrow to the leftmost; the arrow is centered by default.<br/>When the arrow is on the left or right side of the popup: The value indicates the distance from the arrow to the top; the arrow is centered by default.<br/>When the popup is displayed on either edge of the screen, it will automatically deviate leftward or rightward to stay within the safe area. When the value is **0**, the arrow always points to the bound component. | | arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | No | Offset of the popup arrow relative to the popup.<br/>When the arrow is at the top or bottom of the popup: The value **0** indicates that the arrow is located on the leftmost, and any other value indicates the distance from the arrow to the leftmost; the arrow is centered by default.<br/>When the arrow is on the left or right side of the popup: The value indicates the distance from the arrow to the top; the arrow is centered by default.<br/>When the popup is displayed on either edge of the screen, it will automatically deviate leftward or rightward to stay within the safe area. When the value is **0**, the arrow always points to the bound component. |
| showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow. The default value is **false**. | | showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow. The default value is **false**. |
| maskColor<sup>(deprecated)</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the popup mask.<br>**NOTE**<br>This parameter is deprecated since API version 10. You are advised to use **mask** instead.|
| mask<sup>10+</sup> | boolean \| [ResourceColor](ts-types.md#resourcecolor) | No | Whether to apply a mask to the popup. The value **true** means to apply a transparent mask to the popup, **false** means not to apply a mask to the popup, and a color value means to apply a mask in the corresponding color to the popup.| | mask<sup>10+</sup> | boolean \| [ResourceColor](ts-types.md#resourcecolor) | No | Whether to apply a mask to the popup. The value **true** means to apply a transparent mask to the popup, **false** means not to apply a mask to the popup, and a color value means to apply a mask in the corresponding color to the popup.|
| targetSpace<sup>10+</sup> | [Length](ts-types.md#length) | No | Space between the popup and the target. | | targetSpace<sup>10+</sup> | [Length](ts-types.md#length) | No | Space between the popup and the target. |
| offset<sup>10+</sup> | [Position](ts-types.md#position8) | No | Offset of the popup relative to the display position specified by placement.|
## Example ## Example
```ts ```ts
...@@ -112,7 +116,7 @@ struct PopupExample { ...@@ -112,7 +116,7 @@ struct PopupExample {
.bindPopup(this.customPopup, { .bindPopup(this.customPopup, {
builder: this.popupBuilder, builder: this.popupBuilder,
placement: Placement.Top, placement: Placement.Top,
maskColor: '0x33000000', mask: {color:'0x33000000'},
popupColor: Color.Yellow, popupColor: Color.Yellow,
enableArrow: true, enableArrow: true,
showInSubWindow: false, showInSubWindow: false,
......
# Sheet Transition
You can bind a sheet to a component through the **bindSheet** attribute. You can also set the sheet to the preset or custom height for when the component is inserted.
> **NOTE**
>
> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
> Switching between landscape and portrait modes is not supported.
## Attributes
| Name| Parameter | Description|
| -------- | -------- | -------- |
| bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>sheetStyle?: [SheetStyle](#sheetstyle10) | Binds a sheet to the component, which can be displayed when the component is touched. **isShow**: whether to display the sheet. Mandatory.<br>**builder**: content of the sheet. Mandatory.<br> **sheetStyle**: height and control bar visibility of the sheet. Optional. By default, the default height is **Large** and the control bar is visible.|
## SheetStyle<sup>10+</sup>
| Name | Type | Mandatory| Description |
| ------------------ | -------------------------------------- | ---- | ---------------------- |
| height | [SheetSize](#sheetsize10) \| [Length](ts-types.md#length) | No| Height of the sheet. |
| showDragBar | boolean | No | Whether the control bar is visible. |
## SheetSize<sup>10+</sup>
| Name| Description|
| -------- | -------- |
| MEDIUM | The sheet height is half of the screen height.|
| LARGE | The sheet height is almost the screen height.|
## Example
```ts
// xxx.ets
@Entry
@Component
struct SheetTransitionExample {
@State isShow:boolean = false
@State isShow2:boolean = false
@State sheetHeight:number = 300;
@State showDragBar:boolean = true;
@Builder myBuilder() {
Column() {
Button("change height")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.sheetHeight = 500;
})
Button("Set Illegal height")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.sheetHeight = null;
})
Button("close dragBar")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.showDragBar = false;
})
Button("close modal 1")
.margin(10)
.fontSize(20)
.onClick(()=>{
this.isShow = false;
})
}
.width('100%')
.height('100%')
}
build() {
Column() {
Button("transition modal 1")
.onClick(() => {
this.isShow = true
})
.fontSize(20)
.margin(10)
.bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar})
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
}
}
```
![en-us_sheet](figures/en-us_sheet.gif)
# Spherical Effect
You can apply a spherical effect to a component to make it appear spherized.
> **NOTE**
>
> This attribute is supported since API Version 10. Updates will be marked with a superscript to indicate their earliest API version. This is a system API.
## Attributes
| Name| Type| Description|
| -------- | -------- | -------- |
| sphericalEffect | [number] | Spherical degree of the component.<br>The value ranges from 0 to 1.<br>**NOTE**<br>1. If the value is 0, the component remains unchanged. If the value is 1, the component is completely spherical. Between 0 and 1, a greater value indicates a higher spherical degree.<br>A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br> 2. If a component image is loaded asynchronously, the spherical effect is not supported. For example, the **\<Image>** component uses asynchronous loading by default, which means that **syncLoad** must be set to **true** to apply the spherical effect. However, this setting is not recommended. Asynchronous loading is also used for **backgroundImage**. Therefore, if **backgroundImage** is set, the spherical effect is not supported.<br>3. If the shadow effect is set for a component, the spherical effect is not supported.|
## Example
### Example 1
```ts
// xxx.ets
@Entry
@Component
struct SphericalEffectExample {
build() {
Stack() {
TextInput({placeholder: "Enter a percentage."})
.width('50%')
.height(35)
.type(InputType.Number)
.enterKeyType(EnterKeyType.Done)
.caretColor(Color.Red)
.placeholderColor(Color.Blue)
.placeholderFont({
size: 20,
style: FontStyle.Italic,
weight: FontWeight.Bold
})
.sphericalEffect(0.5)
}.alignContent(Alignment.Center).width("100%").height("100%")
}
}
```
Below is how the component looks with the spherical effect applied:
![textInputSpherical1](figures/textInputSpherical1.png)
Below is how the component looks without the spherical effect applied:
![textInputSpherical2](figures/textInputSpherical2.png)
...@@ -11,7 +11,7 @@ If an action triggers multiple events, the order of these events is fixed. By de ...@@ -11,7 +11,7 @@ If an action triggers multiple events, the order of these events is fixed. By de
| Name | Bubbling Supported| Description | | Name | Bubbling Supported| Description |
| ------------------------------------------------------------ | -------- | ------------------------------------------------------------ | | ------------------------------------------------------------ | -------- | ------------------------------------------------------------ |
| onHover(event: (isHover?: boolean) =&gt; void) | No | Triggered when the mouse cursor enters or leaves the component.<br>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component.| | onHover(event: (isHover?: boolean, event<sup>10+</sup>?: HoverEvent) =&gt; void) | Yes | Triggered when the mouse cursor enters or leaves the component.<br>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component.<br>**event**: bubbling blocking of the event.|
| onMouse(event: (event?: MouseEvent) =&gt; void) | Yes | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered.| | onMouse(event: (event?: MouseEvent) =&gt; void) | Yes | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered.|
...@@ -30,6 +30,12 @@ If an action triggers multiple events, the order of these events is fixed. By de ...@@ -30,6 +30,12 @@ If an action triggers multiple events, the order of these events is fixed. By de
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8) | Display area of the component that triggers the event.| | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8) | Display area of the component that triggers the event.|
| source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype)| Event input device.| | source<sup>8+</sup> | [SourceType](ts-gesture-settings.md#sourcetype)| Event input device.|
## HoverEvent<sup>10+</sup>
| Name | Type | Description |
| --------- | ------------------------------- | -------------------- |
| stopPropagation | () => void | Stops the event from bubbling upwards or downwards.|
## Example ## Example
```ts ```ts
...@@ -48,7 +54,7 @@ struct MouseEventExample { ...@@ -48,7 +54,7 @@ struct MouseEventExample {
Button(this.hoverText) Button(this.hoverText)
.width(180).height(80) .width(180).height(80)
.backgroundColor(this.color) .backgroundColor(this.color)
.onHover((isHover: boolean) => { .onHover((isHover: boolean, event: HoverEvent) => {
// Use the onHover event to dynamically change the text content and background color of a button when the mouse pointer is hovered on it. // Use the onHover event to dynamically change the text content and background color of a button when the mouse pointer is hovered on it.
if (isHover) { if (isHover) {
this.hoverText = 'hover'; this.hoverText = 'hover';
......
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
- [HuksKeyApi](_huks_key_api.md) - [HuksKeyApi](_huks_key_api.md)
- [HuksParamSetApi](_huks_param_set_api.md) - [HuksParamSetApi](_huks_param_set_api.md)
- [HuksTypeApi](_huks_type_api.md) - [HuksTypeApi](_huks_type_api.md)
- [Memory](memory.md)
- Header Files - Header Files
- [drawing_bitmap.h](drawing__bitmap_8h.md) - [drawing_bitmap.h](drawing__bitmap_8h.md)
- [drawing_brush.h](drawing__brush_8h.md) - [drawing_brush.h](drawing__brush_8h.md)
...@@ -56,6 +57,7 @@ ...@@ -56,6 +57,7 @@
- [native_huks_api.h](native__huks__api_8h.md) - [native_huks_api.h](native__huks__api_8h.md)
- [native_huks_param.h](native__huks__param_8h.md) - [native_huks_param.h](native__huks__param_8h.md)
- [native_huks_type.h](native__huks__type_8h.md) - [native_huks_type.h](native__huks__type_8h.md)
- [purgeable_memory.h](purgeable__memory_8h.md)
- Structs - Structs
- [OH_Drawing_BitmapFormat](_o_h___drawing___bitmap_format.md) - [OH_Drawing_BitmapFormat](_o_h___drawing___bitmap_format.md)
- [OH_NativeXComponent_Callback](_o_h___native_x_component___callback.md) - [OH_NativeXComponent_Callback](_o_h___native_x_component___callback.md)
......
# Memory
## Overview
Provides APIs for memory management.
@Syscap SystemCapability.CommonLibrary.PurgeableMemory
**Since**
10
## Summary
### Files
| Name| Description|
| -------- | -------- |
| [purgeable_memory.h](purgeable__memory_8h.md) | Declares the APIs for managing purgeable memory at the native layer.|
### Types
| Name| Description|
| -------- | -------- |
| [OH_PurgeableMemory](#oh_purgeablememory) | Defines the type name of the **OH_PurgeableMemory** data.|
| (\*[OH_PurgeableMemory_ModifyFunc](#oh_purgeablememory_modifyfunc)) (void \*, size_t, void \*) | Defines the function for rebuilding purgeable memory data.|
### Functions
| Name| Description|
| -------- | -------- |
| \*[OH_PurgeableMemory_Create](#oh_purgeablememory_create) (size_t size, [OH_PurgeableMemory_ModifyFunc](#oh_purgeablememory_modifyfunc) func, void \*funcPara) | Creates a **PurgeableMemory** object.|
| [OH_PurgeableMemory_Destroy](#oh_purgeablememory_destroy) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj) | Destroys a **PurgeableMemory** object.|
| [OH_PurgeableMemory_BeginRead](#oh_purgeablememory_beginread) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj) | Starts a read operation on a **PurgeableMemory** object. If purgeable memory is reclaimed, the rebuilding function is called to rebuild it.|
| [OH_PurgeableMemory_EndRead](#oh_purgeablememory_endread) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj) | Ends a read operation on a **PurgeableMemory** object. Now the system can reclaim purgeable memory.|
| [OH_PurgeableMemory_BeginWrite](#oh_purgeablememory_beginwrite) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj) | Begins a write operation on the **PurgeableMemory** object. If purgeable memory is reclaimed, the rebuilding function is called to rebuild it.|
| [OH_PurgeableMemory_EndWrite](#oh_purgeablememory_endwrite) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj) | Ends a write operation on the **PurgeableMemory** object. Now the system can reclaim purgeable memory.|
| [OH_PurgeableMemory_GetContent](#oh_purgeablememory_getcontent) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj) | Obtains the memory data of a **PurgeableMemory** object.|
| [OH_PurgeableMemory_ContentSize](#oh_purgeablememory_contentsize) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj) | Obtains the memory data size of a **PurgeableMemory** object.|
| [OH_PurgeableMemory_AppendModify](#oh_purgeablememory_appendmodify) ([OH_PurgeableMemory](#oh_purgeablememory) \*purgObj, [OH_PurgeableMemory_ModifyFunc](#oh_purgeablememory_modifyfunc) func, void \*funcPara) | Adds a function for modifying a **PurgeableMemory** object.|
## Type Description
### OH_PurgeableMemory
```
typedef struct OH_PurgeableMemoryOH_PurgeableMemory
```
**Description**
Defines the type name of the **OH_PurgeableMemory** data.
**Since**
10
### OH_PurgeableMemory_ModifyFunc
```
typedef bool(* OH_PurgeableMemory_ModifyFunc) (void *, size_t, void *)
```
**Description**
Defines the function for rebuilding purgeable memory data.
**Parameters**
| Name| Description|
| -------- | -------- |
| void \* | Pointer to the address of purgeable memory.|
| size_t | Size of the memory data to rebuild.|
| void \* | Pointer to the parameters used for rebuilding.|
**Returns**
Returns a success message if the operation is successful; returns a failure message otherwise.
**Since**
10
## Function Description
### OH_PurgeableMemory_AppendModify()
```
bool OH_PurgeableMemory_AppendModify (OH_PurgeableMemory * purgObj, OH_PurgeableMemory_ModifyFunc func, void * funcPara )
```
**Description**
Adds a function for modifying a **PurgeableMemory** object.
**Parameters**
| Name| Description|
| -------- | -------- |
| purgObj | Pointer to the **PurgeableMemory** object.|
| func | Function pointer to the modify function, which is used for further modification after the purgeable memory data is rebuilt.|
| funcPara | Pointer to the parameters of the modify function.|
**Returns**
Returns a success message if the operation is successful; returns a failure message otherwise.
**Since**
10
### OH_PurgeableMemory_BeginRead()
```
bool OH_PurgeableMemory_BeginRead (OH_PurgeableMemory * purgObj)
```
**Description**
Starts a read operation on a **PurgeableMemory** object. If purgeable memory is reclaimed, the rebuilding function is called to rebuild it.
**Parameters**
| Name| Description|
| -------- | -------- |
| purgObj | Pointer to the **PurgeableMemory** object.|
**Returns**
Returns a success message if the purgeable memory data is ready; returns a failure message if purgeable memory has been reclaimed and fails to be rebuilt.
**Since**
10
### OH_PurgeableMemory_BeginWrite()
```
bool OH_PurgeableMemory_BeginWrite (OH_PurgeableMemory * purgObj)
```
**Description**
Begins a write operation on the **PurgeableMemory** object. If purgeable memory is reclaimed, the rebuilding function is called to rebuild it.
**Parameters**
| Name| Description|
| -------- | -------- |
| purgObj | Pointer to the **PurgeableMemory** object.|
**Returns**
Returns a success message if the purgeable memory data is ready; returns a failure message if purgeable memory has been reclaimed and fails to be rebuilt.
**Since**
10
### OH_PurgeableMemory_ContentSize()
```
size_t OH_PurgeableMemory_ContentSize (OH_PurgeableMemory * purgObj)
```
**Description**
Obtains the memory data size of a **PurgeableMemory** object.
**Parameters**
| Name| Description|
| -------- | -------- |
| purgObj | Pointer to the **PurgeableMemory** object. |
**Returns**
Returns the memory data size.
**Since**
10
### OH_PurgeableMemory_Create()
```
OH_PurgeableMemory* OH_PurgeableMemory_Create (size_t size, OH_PurgeableMemory_ModifyFunc func, void * funcPara )
```
**Description**
Creates a **PurgeableMemory** object.
**Parameters**
| Name| Description|
| -------- | -------- |
| size | Size of the **PurgeableMemory** object.|
| func | Function pointer to the rebuilding function, which is used to restore the reclaimed purgeable memory data.|
| funcPara | Pointer to the parameters of the rebuilding function.|
**Returns**
Returns the **PurgeableMemory** object.
**Since**
10
### OH_PurgeableMemory_Destroy()
```
bool OH_PurgeableMemory_Destroy (OH_PurgeableMemory * purgObj)
```
**Description**
Destroys a **PurgeableMemory** object.
**Parameters**
| Name| Description|
| -------- | -------- |
| purgObj | Pointer to the **PurgeableMemory** object.|
**Returns**
Returns a success message if the operation is successful; returns a failure message otherwise. If no value is passed, a failure message is returned. If a success message is returned, the value of **purgObj** will be cleared to avoid Use-After-Free (UAF).
**Since**
10
### OH_PurgeableMemory_EndRead()
```
void OH_PurgeableMemory_EndRead (OH_PurgeableMemory * purgObj)
```
**Description**
Ends a read operation on a **PurgeableMemory** object. Now the system can reclaim purgeable memory.
**Parameters**
| Name| Description|
| -------- | -------- |
| purgObj | Pointer to the **PurgeableMemory** object.|
**Since**
10
### OH_PurgeableMemory_EndWrite()
```
void OH_PurgeableMemory_EndWrite (OH_PurgeableMemory * purgObj)
```
**Description**
Ends a write operation on the **PurgeableMemory** object. Now the system can reclaim purgeable memory.
**Parameters**
| Name| Description|
| -------- | -------- |
| purgObj | Pointer to the **PurgeableMemory** object.|
**Since**
10
### OH_PurgeableMemory_GetContent()
```
void* OH_PurgeableMemory_GetContent (OH_PurgeableMemory * purgObj)
```
**Description**
Obtains the memory data of a **PurgeableMemory** object.
**Parameters**
| Name| Description|
| -------- | -------- |
| purgObj | Pointer to the **PurgeableMemory** object. |
**Returns**
Returns the pointer to the purgeable memory address.
**Since**
10
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
Frequent activities of background applications cause user devices to consume power quickly and respond slowly. To meet performance and power consumption requirements, the system allows applications in the background to execute only activities within the specifications. Activities beyond the specifications are suspended by default, and resources allocated to them will be reclaimed when the available resources are insufficient. Frequent activities of background applications cause user devices to consume power quickly and respond slowly. To meet performance and power consumption requirements, the system allows applications in the background to execute only activities within the specifications. Activities beyond the specifications are suspended by default, and resources allocated to them will be reclaimed when the available resources are insufficient.
If an application or a service module running in the background has a service to continue, it can request a [transient task](#transient-tasks) to delay the suspension or a [continuous task](#continuous-tasks) to prevent the suspension. If an application needs to execute a non-real-time task when running in the background, it can request a [Work Scheduler task](#work-scheduler-tasks). A privileged application can also request [efficiency resources](#efficiency-resources) for more flexibility. If an application or a service module running in the background has a service to continue, it can request a [transient task](#transient-tasks) to delay the suspension or a [continuous task](#continuous-tasks) to prevent the suspension. If an application needs to execute a non-real-time task when running in the background, it can request a [Work Scheduler task](#work-scheduler-tasks). A privileged application can also request [efficiency resources](#efficiency-resources) for more flexibility.
**Resource usage constraints**: The system provides resource quotas for running services, including the memory usage and CPU usage in a continuous period of time, as well as disk write I/O volume in 24 hours. When the quota is reached, the system generates a warning-level log if the process is running in the foreground, and terminates the process if it is running in the background.
## Background Task Types ## Background Task Types
......
...@@ -6,7 +6,7 @@ ArkUI is a UI development framework that provides what you'll need to develop ap ...@@ -6,7 +6,7 @@ ArkUI is a UI development framework that provides what you'll need to develop ap
**Framework Structure** **Framework Structure**
![en-us_image_0000001267647869](../application-dev/ui/figures/en-us_image_0000001267647869.png) ![en-us_image_0000001183709904](../application-dev/ui/figures/arkui-framework.png)
As shown above, the two development paradigms share the UI backend engine and language runtime. The UI backend engine implements the six basic capabilities of ArkUI. The declarative development paradigm does not require the JS Framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage. This makes the declarative development paradigm a better choice for building application UIs. As shown above, the two development paradigms share the UI backend engine and language runtime. The UI backend engine implements the six basic capabilities of ArkUI. The declarative development paradigm does not require the JS Framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage. This makes the declarative development paradigm a better choice for building application UIs.
......
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册