Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 846edb1b 编写于 作者: X xinking129
浏览文件
操作

merge master 

Signed-off-by: Nxinking129 <xinxin13@huawei.com>
上级 ad5d655b 0fd2f81c
展开全部 隐藏空白更改
内联 并排
Showing with 10068 addition and 7315 deletion
en/application-dev/faqs/Readme-EN.md
浏览文件 @ 846edb1b
# FAQs
- [Programming Languages](faqs-language.md)
- [Ability Framework Development](faqs-ability.md)
- [Ability Development](faqs-ability.md)
- [Bundle Management Development](faqs-bundle-management.md)
- [Resource Manager Development](faqs-globalization.md)
- [ArkUI (ArkTS) Development](faqs-ui-ets.md)
- [ArkUI Web Component (ArkTS) Development](faqs-web-arkts.md)
- [ArkUI (JavaScript) Development](faqs-ui-js.md)
- [Common Event and Notification Development](faqs-event-notification.md)
- [Graphics and Image Development](faqs-graphics.md)
- [Media Development](faqs-media.md)
- [Graphics Development](faqs-graphics.md)
- [Window Management Development](faqs-window-manager.md)
- [Multimedia Development](faqs-multimedia.md)
- [Basic Security Capability Development](faqs-security.md)
- [Application Access Control Development](faqs-ability-access-control.md)
- [Ability Access Control Development](faqs-ability-access-control.md)
- [Data Management Development](faqs-distributed-data-management.md)
- [File Management Development](faqs-file-management.md)
- [Network Management Development](faqs-network-management.md)
- [DFX Development](faqs-dfx.md)
- [Native API Usage](faqs-native.md)
- [Pan-Sensor Development](faqs-sensor.md)
- [Startup Development](faqs-startup.md)
- [Usage of Third- and Fourth-Party Libraries](faqs-third-party-library.md)
- [IDE Usage](faqs-ide.md)
- [Distributed Device Development](faqs-distributed-device-profile.md)
- [Usage of Third- and Fourth-Party Libraries](faqs-third-fourth-party-library.md)
\ No newline at end of file
en/application-dev/faqs/faqs-ability-access-control.md
浏览文件 @ 846edb1b
# Application Access Control Development
# Ability Access Control Development
## Can the app listen for the permission change after its permission is modified in Settings?
......
en/application-dev/faqs/faqs-bundle-management.md 0 → 100644
浏览文件 @ 846edb1b
# Bundle Management Development
## How do I determine whether an application is a system application?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
Use **bundleManager.getApplicationInfo** (available only for system applications) to obtain application information, and check the value of **systemApp** in the information. The application is a system application if the value is **true**.
**Reference**
[bundleManager](../reference/apis/js-apis-bundleManager.md)
## How do I obtain the version code and version name of an application?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
Use **bundleManager.getBundleInfoForSelf\(\)** to obtain the bundle information, which contains the version code (specified by **BundleInfo.versionCode**) and version name (specified by **BundleInfo.versionName**) .
**Example**
```
import bundleManager from '@ohos.bundle.bundleManager';
import hilog from '@ohos.hilog';
let bundleFlags = bundleManager.BundleFlag.GET_BUNDLE_INFO_DEFAULT;
try {
bundleManager.getBundleInfoForSelf(bundleFlags).then((data) => {
const versionCode = data.versionCode;
const versionName = data.versionName;
hilog.info(0x0000, 'testTag', `successfully. versionCode: ${versionCode}, versionName: ${versionName}`);
}).catch(err => {
hilog.error(0x0000, 'testTag', 'failed. Cause: %{public}s', err.message);
});
} catch (err) {
hilog.error(0x0000, 'testTag', 'failed: %{public}s', err.message);
}
```
**Reference**
[getBundleInfoForSelf](../reference/apis/js-apis-bundleManager.md#bundlemanagergetbundleinfoforself)
## How do I obtain the bundle name of the current application?
Applicable to: OpenHarmony 3.2 Beta5 (API version 9)
**Solution**
Obtain the bundle name from **UIAbilityContext.abilityInfo.bundleName**.
**Example**
```
import common from '@ohos.app.ability.common';
const context = getContext(this) as common.UIAbilityContext
console.log(`bundleName: ${context.abilityInfo.bundleName}`)
```
**Reference**
[UIAbilityContext](../reference/apis/js-apis-inner-application-uiAbilityContext.md#uiabilitycontext) and [AbilityInfo](../reference/apis/js-apis-bundleManager-abilityInfo.md#abilityinfo)
## How do I obtain the application version number, version name, and screen resolution?
Applicable to: OpenHarmony 3.2 Beta5
**Solution**
1. Obtain the bundle information from the **@ohos.bundle.bundleManager** module.
The bundle information contains the application version number and version name.
```
import bundleManager from '@ohos.bundle.bundleManager';
...
bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION).then((bundleInfo)=>{
let versionName = bundleInfo.versionName; // Application version name.
let versionNo = bundleInfo.versionCode; // Application version number.
}).catch((error)=>{
console.error("get bundleInfo failed,error is "+error)
})
```
2. Obtain **screenDensity** from the **@ohos.app.ability.Configuration** module. **screenDensity** contains the screen resolution information.
```
import common from '@ohos.app.ability.common';
...
let context = getContext(this) as common.UIAbilityContext;
let screenDensity = context.config.screenDensity;
```
## How do I obtain the source file path of the current application?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
- Method 1: Use the application context to obtain the source file path.
```
this.uiAbilityContext.abilityInfo.applicationInfo.codePath
```
- Method 2: Use **@ohos.bundle.bundleManager** to obtain the source file path.
1. Import the **@ohos.bundle.bundleManager** module and use **bundleManager.getBundleInfoForSelf\(\)** to obtain the bundle information.
2. Obtain the source file path from **bundleInfo.appInfo.codePath**.
```
import bundleManager from '@ohos.bundle.bundleManager';
bundleManager.getBundleInfoForSelf(bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION).then((bundleInfo)=>{
this.sourcePath = bundleInfo.appInfo.codePath;
})
```
## Can I obtain the HAP information of other applications from the current application?
Applicable to: OpenHarmony 3.2 Beta (API version 9)
According to the OpenHarmony security design specifications, the SDK does not provide APIs for third-party applications to obtain bundle information (including but not limited to the application name and version number) of other applications.
en/application-dev/faqs/faqs-bundle.md 已删除 100644 → 0
浏览文件 @ ad5d655b
# Bundle Management Development
## How do I obtain the version code and version name of an application?
Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9
Use **bundle.getBundleInfo()** to obtain the bundle information, which contains the version code and version name.
Reference: [Bundle](../reference/apis/js-apis-Bundle.md#bundlegetbundleinfo)
## How do I obtain the bundle name of an application?
Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9
Obtain the bundle name through **context.abilityInfo.bundleName**.
Reference: [AbilityInfo](../reference/apis/js-apis-bundle-AbilityInfo.md)
## How do I obtain an application icon?
Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9
Use **bundle.getAbilityIcon** to obtain the application icon. To use this API, you must configure the permission **ohos.permission.GET_BUNDLE_INFO**.
Reference: [Bundle](../reference/apis/js-apis-Bundle.md#bundlegetbundleinfo)
## How do I determine whether an application is a system application?
Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
Use **bundle.getApplicationInfo** to obtain the application information, and then check the value of **systemApp** in the information. The application is a system application if the value is **true**.
en/application-dev/faqs/faqs-distributed-device-profile.md 0 → 100644
浏览文件 @ 846edb1b
# Distributed Device Development
## How do I view the IMEI of an OpenHarmony device?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
Obtain the device IMEI from the **HUKS\_TAG\_ATTESTATION\_ID\_IMEI** parameter of the **HuksTag** API. [Reference](../reference/apis/js-apis-huks.md)
en/application-dev/faqs/faqs-graphics.md
浏览文件 @ 846edb1b
# Graphics and Image Development
# Graphics Development
## Why do the isStatusBarLightIcon and isNavigationBarLightIcon attributes not take effect when window.setSystemBarProperties() is called?
## How do I obtain the DPI of a device?
Applicable to: OpenHarmony SDK 3.2.5.3, stage model of API version 9
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
In effect, the **isStatusBarLightIcon** and **isNavigationBarLightIcon** attributes turn the font white when set to **true**. If **statusBarContentColor** is also set in **window.setSystemBarProperties()**, the **isStatusBarLightIcon** attribute does not take effect. Similarly, if **navigationBarContentColor** is set, the **isNavigationBarLightIcon** attribute does not take effect.
**Solution**
## How do I set the style of the system bar?
Import the **@ohos.display** module and call the **getDefaultDisplaySync\(\)** API.
Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9
**Example**
Import the **\@ohos.window** module, and call **window.setSystemBarProperties()**.
```
import display from '@ohos.display';
let displayClass = null;
try {
displayClass = display.getDefaultDisplaySync();
console.info('Test densityDPI:' + JSON.stringify(displayClass.densityDPI));
} catch (exception) {
console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
}
```
## How do I hide the status bar to get the immersive effect?
Applicable to: OpenHarmony SDK 3.2.6.3, stage model of API version 9
1. Use the **onWindowStageCreate** to obtain a **windowClass** object.
```ts
onWindowStageCreate(windowStage) {
// When the main window is created, set the main page for this ability.
console.log("[Demo] EntryAbility onWindowStageCreate")
windowStage.getMainWindow((err, data) => {
if (err.code) {
console.error('Failed to obtain the main window.')
return;
}
// Obtain a windowClass object.
globalThis.windowClass = data;
})
}
```
2. Enable the full-screen mode for the window and hide the status bar.
```ts
globalThis.windowClass.setFullScreen(isFullScreen, (err, data) => {
if (err.code) {
console.error('Failed to enable the full-screen mode. Cause:' + JSON.stringify(err));
return;
}
console.info('Succeeded in enabling the full-screen mode. Data: ' + JSON.stringify(data));
});
```
Applicable to: OpenHarmony 3.2 Beta5 (API version 9, stage model)
**Solution**
1. Use **onWindowStageCreate** to obtain a **windowClass** object.
```
onWindowStageCreate(windowStage) {
// When the main window is created, set the main page for this ability.
console.log("[Demo] MainAbility onWindowStageCreate")
windowStage.getMainWindow((err, data) => {
if (err.code) {
console.error('Failed to obtain the main window.')
return;
}
// Obtain a windowClass object.
globalThis.windowClass = data;
})
}
```
2. Enable the full-screen mode for the window and hide the status bar.
```
globalThis.windowClass.setFullScreen(isFullScreen, (err, data) => {
if (err.code) {
console.error('Failed to enable the full-screen mode. Cause:' + JSON.stringify(err));
return;
}
console.info('Succeeded in enabling the full-screen mode. Data: ' + JSON.stringify(data));
});
```
## How do I obtain the window width and height?
Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9
Applicable to: OpenHarmony SDK 3.2 Beta5 (API version 9, stage model)
Use **window.getProperties()** to obtain the window properties. The **windowRect** field in the properties specifies the window width and height.
**Solution**
Example:
Import the **@ohos.window** module, obtain a **Window** object, and use **getWindowProperties\(\)** of the object to obtain the window properties. The **windowRect** field in the properties specifies the window width and height.
**Example**
```ts
let promise = windowClass.getProperties();
promise.then((data)=> {
console.info('Succeeded in obtaining the window properties. Data: ' + JSON.stringify(data.windowRect));
}).catch((err)=>{
console.error('Failed to obtain the window properties. Cause: ' + JSON.stringify(err));
});
```
## How do I set the color of the system bar?
Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
Refer to the following code:
```ts
window.getTopWindow(globalThis.mainContext).then(win => {
var systemBarProperties = {
statusBarColor: '#19B6FF', // Set the background color of the status bar.
navigationBarColor: '#19B6FF', // Set the background color of the navigation bar.
isStatusBarLightIcon: false, // Set the icon on the status bar not to be highlighted.
isNavigationBarLightIcon: true, // Set the icon on the navigation bar to be highlighted.
statusBarContentColor: '#0D0500', // Set the text color of the status bar.
navigationBarContentColor: '#FFA500' // Set the text color of the navigation bar.
};
win.setSystemBarProperties(systemBarProperties).catch(err => {
INDEX_LOGGER.info(`set System Bar Properties failed:${err}`)
})
})
.catch(err => {
INDEX_LOGGER.info(`get top window failed:${err}`)
})
import window from '@ohos.window';
let windowClass = null;
try {
let promise = window.getLastWindow(this.context);
promise.then((data)=> {
// Obtain a Window object.
windowClass = data;
try {
// Obtain the window properties.
let properties = windowClass.getWindowProperties();
let rect = properties.windowRect;
// rect.width: window width; rect.height: window height.
} catch (exception) {
console.error('Failed to obtain the window properties. Cause: ' + JSON.stringify(exception));
}
console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
}).catch((err)=>{
console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
});} catch (exception) {
console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
}
```
en/application-dev/faqs/faqs-ide.md 已删除 100644 → 0
浏览文件 @ ad5d655b
# IDE Usage
## What should I do if the error message "npm ERR! code SELF_SIGNED_CERT_IN_CHAIN" is displayed?
Applicable to: OpenHarmony SDK 3.2.5.3, stage model of API version 9
1. Run **npm config set strict-ssl=false** on the DevEco Studio terminal.
2. Run **npm install** on the DevEco Studio terminal.
## After manual updating of a DevEco Studio SDK, the error message "Cannot find module 'xxx\ets\x.x.x.x\build-tools\ArkTS-loader\node_modules\webpack\bin\webpack.js'" is displayed during HAP building. What should I do?
Applicable to: OpenHarmony SDK 3.2.5.3, stage model of API version 9
1. Run **npm install** in the **ets\x.x.x.x\build-tools\ets-loader** directory of the SDK.
2. Run **npm install** in the **js\x.x.x.x\build-tools\ace-loader** directory of the SDK. Perform HAP building again.
## How do I pack a HAP file through the command line?
Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
Method 1: Run **hvigor assembleHap**.
Method 2: In **scripts** of the project **package.json** file, define the build task script and run **npm buildOhosHaps**. The **buildOhosHaps** field can be customized.
```
"scripts": {
"buildOhosHaps": "hvigor assembleHap"
},
```
## How do I select API version 9 when creating a project in DevEco Studio?
Applicable to: DevEco Studio 3.0 Beta4 3.0.0.993(B06)
When creating a project in DevEco Studio, make sure you are on the **OpenHarmony** tab page.
## What should I do if no callback is received and no error code is returned for downloads?
Applicable to: all versions
1. Re-install hdc_std and set up the device connection again.
2. Run **hdc_std shell hilog -Q pidoff** to disable log log flow control.
## What should I do if the "error: unknow option. usage: aa start \<options>" message is displayed after I click Run in DevEco Studio?
Applicable to: OpenHarmony SDK 3.2.5.6, stage model of API version 9
This issue occurs when the parameter in the **aa** command is invalid and therefore the target application fails to be opened.
To fix this issue, use either of the following methods:
1. Make sure the SDK version and the OS version are the same.
2. Touch the application icon on the device to manually open the application.
## What should I do if "The hdc_std version of the SDK does not match the hdcd version of the device." message is displayed when I run an application in DevEco Studio?
Applicable to: OpenHarmony SDK 3.2.5.6, stage model of API version 9
This issue occurs when the hdc and hdcd versions do not match. Update Dev Eco Studio to 3.0.1.993 or later.
After the update, Dev Eco Studio will still indicate the version mismatch, but will not block the running.
## How do I add a custom .d.ts file to the OpenHarmony SDK?
Applicable to: OpenHarmony SDK 3.1.7.7, FA model of API version 8
Name the .d.ts file **@ohos.xxxx.d.ts**, save it to the SDK path, and restart Dev Eco Studio.
A code notification is displayed when the file is imported.
## How do I switch to the full SDK?
Applicable to: OpenHarmony SDK 3.2.7.5
Follow the instructions in [Guide to Switching to Full SDK](../quick-start/full-sdk-switch-guide.md).
en/application-dev/faqs/faqs-language.md 已删除 100644 → 0
浏览文件 @ ad5d655b
# Programming Languages
## What are the restrictions on using generator functions in TypeScript?
Applicable to: OpenHarmony SDK 3.2.5.3, stage model of API version 9
Below are the restrictions on using generator functions in TypeScript:
- Expressions can be used only in character strings (in the ${expression} format), **if** conditions, **ForEach** parameters, and component parameters.
- No expressions should cause any application state variables (including **@State**, **@Link**, and **@Prop**) to change. Otherwise, undefined and potentially unstable framework behavior may occur.
- The generator function cannot contain local variables.
None of the above restrictions apply to anonymous function implementations of event handlers (such as **onClick**).
Negative example:
```
build() {
let a: number = 1 // invalid: variable declaration not allowed
Column() {
Text('Hello ${this.myName.toUpperCase()}') // ok.
ForEach(this.arr.reverse(), ..., ...) // invalid: Array.reverse modifies the @State array variable in place
}
buildSpecial() // invalid: no function calls
Text(this.calcTextValue()) // this function call is ok.
}
```
## How do I dynamically replace the %s placeholder in a resource file?
Applicable to: OpenHarmony SDK 3.2.5.3, stage model of API version 9
In an application, you can replace the %s placeholder by using the second parameter in **$r('app.string.xx')**, which is used to reference application resources.
Example:
```
build() {
//do something
// The second parameter indicates the referenced string resource, which can be used to replace the %s placeholder.
Text($r('app.string.entry_desc','aaa'))
.fontSize(100)
.fontColor(Color.Black)
//do something
}
```
## How do I read an XML file in Resource and convert data in it to the string type?
Applicable to: OpenHarmony SDK 3.2.2.5, stage model of API version 9
1. Obtain Uint8Array data by calling the **RawFile** API of **resourceManager**.
2. Convert the Uint8Array data to strings by calling the **String.fromCharCode** API.
Reference: [Resource Manager](../reference/apis/js-apis-resource-manager.md)
Example:
```
resourceManager.getRawFile(path, (error, value) => {
if (error != null) {
console.log("error is " + error);
} else {
let rawFile = value;
let xml = String.fromCharCode.apply(null, rawFile)
}
});
```
## How do I convert a Resource object to the string type?
Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9
Use the **resourceManager.getString()** API of the **@ohos.resourceManager** module.
Reference: [Resource Manager](../reference/apis/js-apis-resource-manager.md#getstring)
## What should I do if the global static variables of a class do not work?
Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9
Objects imported to abilities and pages are packaged into two different closures, that is, two global objects. In this case, a static variable referenced by the abilities is not the same object as that referenced by the pages. Therefore, global variables cannot be defined by defining static variables in the class. You are advised to use AppStorage to manage global variables.
## How do I obtain resources in the stage model?
Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9
The stage model allows an application to obtain a **ResourceManager** object based on **context** and call its resource management APIs without first importing the required bundle. This method, however, is not applicable to the FA model.
Example:
```
const context = getContext(this) as any
context
.resourceManager
.getString($r('app.string.entry_desc').id)
.then(value => {
this.message = value.toString()
})
```
## How do I obtain data through an API before page loading?
Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
In the **aboutToAppear** function, use an asynchronous API to obtain page data and **@State** to decorate related variables. After the data is obtained, the page is automatically refreshed based on the variables.
```
@Entry
@Component
struct Test6Page {
// After the data is obtained, the page is automatically refreshed.
@State message: string = 'loading.....'
aboutToAppear(){
// Simulate an asynchronous API to obtain data.
setTimeout(()=>{
this.message = 'new msg'
},3000)
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
```
## Do the worker thread and the main thread run in the same global context?
Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
No. The worker thread and the main thread are not in the same global context. They interact with each other in data communication mode.
## Which API is used for URL encoding in OpenHarmony?
Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
The global function **encodeURI** is used for URI encoding, and **decodeURI** is used for URI decoding. For example, a space character is encoded as %20.
## Does OpenHarmony provide any API for parsing XML files?
Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
Yes. The **convert** API of the **convertxml** module can be used to convert XML text into JavaScript objects.
Reference: [@ohos.convertxml](../reference/apis/js-apis-convertxml.md)
## How do I configure application icons to be used across devices?
Applicable to: OpenHarmony SDK 3.0, stage model of API version 9
Use resource qualifiers to configure application icons to be used across devices.
## Can placeholders be configured in the string.json file of the stage model?
Applicable to: OpenHarmony SDK 3.2.6.3, stage model of API version 9
The **string.json** file does not support placeholders. As an alternative, you can define variables on the target page and combine these variables and **Resource** objects.
## Is there any difference between the OpenHarmony API systemTime.getCurrentTime() and the JS API new Date().getTime() API?
Applicable to: OpenHarmony SDK 3.2.6.3, stage model of API version 9
Similar to **new Date().getTime()**, **systemTime.getCurrentTime(false)** returns the number of milliseconds that have elapsed since the Unix epoch. **systemTime.getCurrentTime(true)** returns the number of nanoseconds that have elapsed since the Unix epoch. The system time is used in both APIs.
## How do I define @BuilderParam decorated attributes based on the value assigned to them?
Applicable to: OpenHarmony SDK 3.2.6.5, stage model of API version 9
If no parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, **content: this.specificParam**), define the type of the attribute as a function without a return value (for example, **@BuilderParam content: () =&gt; voi**). If any parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, **callContent: this.specificParam1("111")**), define the type of the attribute as **any** (for example, **@BuilderParam callContent: any**).
## How does ArkTS convert a string into a byte array?
Applicable to: all versions
Refer to the following code:
```
function stringToByte(str) {
var bytes = new Array();
var len,c;
len = str.length;
for(var i = 0;i<len;i++) {
c = str.charCodeAt(i);
if( c >= 0x010000 && c<= 0x10FFFF) {
bytes.push(((c>>18) & 0x07) | 0xf0);
bytes.push(((c>>12) & 0x3F) | 0x80);
bytes.push(((c>>6) & 0x3f) | 0x80);
bytes.push((c & 0x3F) | 0x80);
} else if(c >= 0x000800 && c<= 0x00FFF){
bytes.push(((c>>12) & 0x07) | 0xf0);
bytes.push(((c>>6) & 0x3F) | 0x80);
bytes.push((c & 0x3F) | 0x80);
} else if(c >= 0x000800 && c<= 0x0007FF) {
bytes.push(((c>>6) & 0x3F) | 0x80);
bytes.push((c & 0x3F) | 0x80);
} else {
bytes.push(c & 0xFF)
}
}
return bytes;
}
```
## What do I do if the "Too many wokers, the number of worker exceeds the maximum" message is displayed during worker creation?
Applicable to: OpenHarmony SDK 3.2.6.5
An application allows for a maximum of seven workers. Therefore, use the **termiate** API to release workers when they are not needed.
Reference: [@ohos.worker](../reference/apis/js-apis-worker.md#terminate)
## What is the recommended multithreading solution on OpenHarmony?
Applicable to: OpenHarmony SDK 3.2.6.5, stage model of API version 9
OpenHarmony recommends that worker threads be used for multithreading.
Reference: [@ohos.worker](../reference/apis/js-apis-worker.md)
## What is the difference between a @Builder decorated method and other methods?
Applicable to: OpenHarmony SDK 3.2.6.5, stage model of API version 9
If the **@Builder** decorated method uses a custom component, this component is re-created each time the method is called.
## Why is the callback registered through @Watch not triggered when the object attributes of an array change?
Applicable to: OpenHarmony SDK 3.2.6.5, stage model of API version 9
As with **@State**, the callback registered through **@Watch** can be used to listen for only one layer of data changes. If the object attributes of the array changes at the inner layer, the callback will not be triggered.
## How do I listen for in-depth changes of @State decorated variables?
Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
To listen for in-depth changes of **@State** decorated variables, you can use **@Observed** and **@ObjectLink** decorators.
## How do I implement character string encoding and decoding?
Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
You can use **TextEncoder** and **TextDecoder** provided by the **util** module.
Reference: [TextEncoder](../reference/apis/js-apis-util.md#textencoder) and [TextDecoder](../reference/apis/js-apis-util.md#textdecoder)
## How do i import and export namespaces?
Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
- Exporting namespaces
```
namespace Util{
export function getTime(){
return Date.now()
}
}
export default Util
```
- Importing namespaces
```
import Util from './util'
Util.getTime()
```
## Can relational database operations be performed in the worker thread?
Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
No. Relational database operations cannot be performed in the worker thread.
<!--no_check-->
\ No newline at end of file
en/application-dev/faqs/faqs-media.md 已删除 100644 → 0
浏览文件 @ ad5d655b
# Media Development
## How do I set a front camera?
Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9
1. Set the camera position to **camera.CameraPosition.CAMERA_POSITION_FRONT**.
2. Create a **CameraInput** instance based on the camera position and type.
Reference: [Camera Management](../reference/apis/js-apis-camera.md)
Example:
```
// The rear camera is set by default. You can use **isFrontCamera** to switch to the rear camera.
let cameraId
let cameraInput
for(let cameraIndex = 0; cameraIndex < this.cameraArray.length; cameraIndex++) {
let faceType = this.cameraArray[cameraIndex].cameraPosition
switch(faceType) {
case camera.CameraPosition.CAMERA_POSITION_FRONT: // Front camera
if(this.isFrontCamera){
cameraId = this.cameraArray[cameraIndex].cameraId
}
break
case camera.CameraPosition.CAMERA_POSITION_BACK: // Rear camera
if(!this.isFrontCamera){
cameraId = this.cameraArray[cameraIndex].cameraId
}
break
case camera.CameraPosition.CAMERA_POSITION_UNSPECIFIED:
default:
break
}
}
cameraInput = await this.cameraManager.createCameraInput(cameraId)
```
## How do I crop an image?
Applicable to: OpenHarmony SDK 3.2.5.6, stage model of API version 9
1. Create an **ImageSource** instance based on the input URI.
```
let path = this.context.getApplicationContext().fileDirs + "test.jpg";
const imageSourceApi = image.createImageSource(path);
```
2. Set decoding parameters and decode the image to obtain a **PixelMap** object. Image processing is supported during decoding.
- Set **desiredSize** to specify the target size after scaling. If the values are all set to **0**, scaling will not be performed.
- Set **desiredRegion** to specify the target rectangular area after cropping. If the values are all set to **0**, cropping will not be performed.
- Set **rotateDegrees** to specify the rotation angle. The image will be rotated clockwise at the center.
```
const decodingOptions = {
desiredSize: {
height:0,
width:0
},
// Crop a rectangular area.
desiredRegion: {
size: {
height:100,
width:100
},
x:0,
y:0
},
// Rotate the image by 90 degrees.
rotate:90
}
imageSourceApi.createPixelMap(decodingOptions).then(pixelMap => {
this.handlePixelMap(pixelMap)
})
```
3. Process the obtained **PixelMap** object. For example, render and display the image.
## How do I apply for the media read/write permission on a device?
Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
1. Configure the permissions **ohos.permission.READ_MEDIA** and **ohos.permission.WRITE_MEDIA** in the **module.json5** file.
Example:
```
{
"module" : {
"requestPermissions":[
{
"name" : "ohos.permission.READ_MEDIA",
"reason": "$string:reason"
},
{
"name" : "ohos.permission.WRITE_MEDIA",
"reason": "$string:reason"
}
]
}
}
```
2. Call **requestPermissionsFromUser** to request the permissions from end users in the form of a dialog box. This operation is required because the grant mode of both permissions is **user_grant**.
```
import abilityAccessCtrl from '@ohos.abilityAccessCtrl.d.ts';
let permissions: Array<string> = ['ohos.permission.READ_MEDIA','ohos.permission.WRITE_MEDIA']
let atManager = abilityAccessCtrl.createAtManager();
// context is the ability-level context of the initiator UIAbility.
atManager.requestPermissionsFromUser(context, permissions).then((data) => {
console.log("Succeed to request permission from user with data: " + JSON.stringify(data))
}).catch((error) => {
console.log("Failed to request permission from user with error: " + JSON.stringify(error))
})
```
## Why can't I play MP4 videos?
Applicable to: OpenHarmony SDK 3.2.7.5, stage model of API version 9
Currently, the system does not support the playback of MP4 videos in H.265 format.
## Why can't I play a new video or even encounters a crash after creating more than 10 videos?
Applicable to: OpenHarmony SDK 3.2.7.5, stage model of API version 9
A maximum of 13 media player instances can be created.
en/application-dev/faqs/faqs-multimedia.md 0 → 100644
浏览文件 @ 846edb1b
# Multimedia Development
## How do I obtain the frame data of a camera when using the XComponent to display the preview output stream of the camera?
Applicable to: OpenHarmony 3.2 (API version 9, stage model)
**Symptom**
Currently, the API does not support real-time preview of the camera frame data. To obtain the frame data, you must bind an action, for example, photographing.
**Solution**
Create a dual-channel preview to obtain the frame data.
1. Use the XComponent to create a preview stream.
```
// Obtain a PreviewOutput instance.
const surfaceId = globalThis.mxXComponentController.getXComponentSurfaceld();
this.mPreviewOutput = await Camera.createPreviewOutput(surfaceld) ;
```
2. Use imageReceiver to listen for image information.
```
// Add dual-channel preview.
const fullWidth = this.mFullScreenSize.width;
const fullHeight = this.mFullScreenSize.height;
const imageReceiver = await image.createImageReceiver(fullwidth, fullHeight,
formatImage, capacityImage) ;
const photoSurfaceId = await imageReceiver.getReceivingSurfaceld();
this.mPreviewOutputDouble = await Camera.createPreviewOutput ( photoSurfaceld)
```
## How do I obtain the preview image of the front camera?
Applicable to: OpenHarmony 3.2 (API version 9, stage model)
**Solution**
1. Use the **@ohos.multimedia.camera** module to obtain the physical camera information.
```
let cameraManager = await camera.getCameraManager(context);
let camerasInfo = await cameraManager.getSupportedCameras();
let cameraDevice = this.camerasInfo[0];
```
2. Create and start the input stream channel of the physical camera.
```
let cameraInput = await cameraManager.createCameraInput(cameraDevice);
await this.cameraInput.open();
```
3. Obtain the output formats supported by the camera, and create a preview output channel based on the surface ID provided by the XComponent.
```
let outputCapability = await this.cameraManager.getSupportedOutputCapability(cameraDevice);
let previewProfile = this.outputCapability.previewProfiles[0];
let previewOutput = await cameraManager.createPreviewOutput(previewProfile, previewId);
```
4. Create a camera session, add the camera input stream and preview output stream to the session, and start the session. The preview image is displayed on the XComponent.
```
let captureSession = await cameraManager.createCaptureSession();
await captureSession.beginConfig();
await captureSession.addInput(cameraInput);
await captureSession.addOutput(previewOutput);
await this.captureSession.commitConfig()
await this.captureSession.start();
```
## How do I set the camera focal length?
Applicable to: OpenHarmony 3.2 (API version 9, stage model)
**Solution**
1. Check whether the camera is a front camera. A front camera does not support focal length setting.
2. Use **captureSession.getZoomRatioRange\(\)** to obtain the focal length range supported by the device.
3. Check whether the target focal length is within the range obtained. If yes, call **captureSession.setZoomRatio\(\)** to set the focal length.
## How do I play music in the background?
Applicable to: OpenHarmony 3.2 (API version 9, stage model)
**Symptom**
Music cannot be played in the background.
**Solution**
**AVSession** controls media playback. When a third-party application switches to the background or encounters a screen lock event, media playback is forcibly paused and the application is unaware of the pause. To enable the application to continue the playback in the background, request a continuous task and access the AVSession capability, which allows Control Panel to control the playback behavior of third-party applications.
**Reference**
[Continuous Task Development](../task-management/continuous-task-dev-guide.md)
[AVSession Development](../media/using-avsession-developer.md)
## What should I do when multiple video components cannot be used for playback?
Applicable to: OpenHarmony 3.2 (API version 9, stage model)
**Symptom**
A large number of video components are created. They cannot play media normally or even crash.
**Solution**
A maximum of 13 media player instances can be created.
## How do I invoke the image library directly?
Applicable to: OpenHarmony 3.2 (API version 9, stage model)
**Solution**
```
let want = {
bundleName: 'com.ohos.photos',
abilityName: 'com.ohos.photos.MainAbility',
parameters: {
uri: 'detail'
}
};
let context = getContext(this) as common.UIAbilityContext;
context.startAbility(want);
```
en/application-dev/faqs/faqs-native.md 已删除 100644 → 0
浏览文件 @ ad5d655b
# Native API Usage
## Is there a native API that provides functions similar to Canvas?
Applicable to: OpenHarmony SDK 3.2.5.3, stage model of API version 9
Yes. The native API **Drawing** provides similar functions. It can be used for 2D drawing.
## When a native HAP is running, the error message "Obj is not a valid object" is displayed for the imported namespace. What should I do?
Applicable to: OpenHarmony SDK 3.2.5.3, stage model of API version 9
Check the **abiFilters** parameter value in the **build-profile.json5** file in the root directory of the module (not the root directory of the project). If the device is 32-bit, the value must be **armeabi-v7a**. If the device is 64-bit, the value must be **arm64-v8a**.
## What should I do when the error message "install parse profile prop check error" is displayed during the running of a native HAP?
Applicable to: OpenHarmony SDK 3.2.6.3, stage model of API version 9
Check the **abiFilters** parameter value in the **build-profile.json5** file in the root directory of the module (not the root directory of the project). If the device is 32-bit, the value must be **armeabi-v7a**. If the device is 64-bit, the value must be **arm64-v8a**.
## What should I do when the error message "undefined symbol: OH_LOG_Print" is displayed during log printing by **OH_LOG_Print**?
Applicable to: OpenHarmony SDK 3.2.6.3, stage model of API version 9
Modify the **CMakeLists.txt** file by adding **libhilog_ndk.z.so** to the end of **target_link_libraries**.
## How do I obtain the value of version in the package.json file of a module?
Applicable to: OpenHarmony SDK 3.2.5.3, stage model of API version 9
1. In the script file **hvigorfile.js** of Hvigor, use **subModule.getPackageJsonPath** to obtain the location of the **package.json** file in the module.
2. Use Node.js to read the **version** field in the **package.json** file and write the value to the **buildOption.cppFlags** field in the **build-profile.json5** file.
Example
```
// Module-level hvigorfile.js
const subModule = require('@ohos/hvigor')(__filename)
const fs = require("fs-extra")
const path = require("path")
const packageJsonPath = subModule.getPackageJsonPath()
const buildProfilePath = path.resolve(packageJsonPath, '../build-profile.json5')
const packageJsonData = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
let buildProfileData = fs.readFileSync(buildProfilePath, 'utf8')
buildProfileData = buildProfileData.replace(/\"cppFlags\"\:(.*)\,/, `"cppFlags": "-D NWEBEX_VERSION=${packageJsonData.version}",`)
fs.writeFileSync(buildProfilePath, buildProfileData, 'utf8')
const ohosPlugin = require('@ohos/hvigor-ohos-plugin').hapTasks(subModule) // The plug-in executes the C++ build task and reads the build-profile.json5 file.
module.exports = {
ohos: ohosPlugin
}
```
```
// Read the hello.cpp file.
#define _NWEBEX_VERSION(v) #v
#define _NWEBEX_VER2STR(v) _NWEBEX_VERSION(v)
static napi_value Add(napi_env env, napi_callback_info info)
{
napi_value fixed_version_value = nullptr;
napi_create_string_utf8(env, _NWEBEX_VER2STR(NWEBEX_VERSION), NAPI_AUTO_LENGTH, &fixed_version_value);
return fixed_version_value;
}
```
## How do I traverse files in rawfile?
Applicable to: OpenHarmony SDK 3.2 or later, stage model of API version 9
Use the native API **OH_ResourceManager_OpenRawDir()** to obtain the root directory of **rawfile** and traverse the root directory.
en/application-dev/faqs/faqs-sensor.md 0 → 100644
浏览文件 @ 846edb1b
# Pan-Sensor Development
## Are the APIs used for obtaining PPG and ECG sensor data open to individual developers?
Applicable to: OpenHarmony 3.1 Beta 5 (API version 9)
Data collected by the PPG and ECG sensors of wearable devices is personal privacy data. Therefore, relative APIs are not open to individual developers.
en/application-dev/faqs/faqs-third-fourth-party-library.md 0 → 100644
浏览文件 @ 846edb1b
# Usage of Third- and Fourth-Party Libraries
## How do I obtain available third-party libraries?
Applicable to: OpenHarmony 3.1 Beta 5 (API version 9)
The three-party and four-party libraries that can be obtained through ohpm are summarized in the [OpenHarmony-TPC/tpc_resource repository](https://gitee.com/openharmony-tpc/tpc_resource). You can access this repository, and find the desired component based on the directory index.
## Which third-party libraries are related to network requests?
Applicable to: OpenHarmony 3.1 Beta 5 (API version 9)
The following third-party libraries are related to network requests: [Axios](https://gitee.com/openharmony-sig/axios), httpclient, and okdownload. For details, see the [OpenHarmony-TPC/tpc_resource repository](https://gitee.com/openharmony-tpc/tpc_resource).
## How do I use ohpm to import third- and fourth-party libraries?
Applicable to: OpenHarmony 3.1 Beta 5 (API version 9)
**Solution**
- Method 1:
1. Open the **Terminal** window and run the following command to go to the **entry** directory:
```
cd entry
```
2. Run the following command to install a third-party library, for example, **dayjs**:
```
ohpm install dayjs
```
3. Add the following statement in the .js file to import the third-party library:
```
import dayjs from 'dayjs';
```
- Method 2:
1. Enter the **entry** directory of the project and open the **oh-package.json5** file.
2. Write the third-party library to be installed (for example, **dayjs**) in the **oh-package.json5** file.
```
{
"dependencies": {
"dayjs": "^1.10.4",
}
}
```
3. Open the **Terminal** window and run the following command to go to the **entry** directory:
```
cd entry
```
4. Run the following command to install the third-party library:
```
ohpm install
```
5. Add the following statement in the .js file to import the third-party library:
```
import dayjs from 'dayjs';
```
en/application-dev/faqs/faqs-third-party-library.md 已删除 100644 → 0
浏览文件 @ ad5d655b
# Usage of Third- and Fourth-Party Libraries
## What does the following error message mean: "Stage model module... does not support including OpenHarmony npm packages or modules in FA model. OpenHarmony build tasks will not be executed, and OpenHarmony resources will not be packed."
Applicable to: OpenHarmony SDK 3.2.5.3, stage model of API version 9
The third- and fourth-party libraries are not yet compatible with the stage model of API version 9 and cannot be used.
## Can I transfer project-level dependencies?
Applicable to: OpenHarmony SDK 3.2.5.3, stage model of API version 9
For example, if project A depends on project B and project B depends on project C, can project A directly use the APIs provided by project C?
No. Project A cannot directly use the APIs provided by project C. The project packing tool NPM does not support dependency transfer. To use the APIs provided by project C, you can add the dependency of project C to project A.
## How do I obtain available third-party libraries?
Applicable to: OpenHarmony SDK 3.2.6.5, stage model of API version 9
For details, see [Third-Party Components That Can Be Directly Used on OpenHarmony](https://gitee.com/openharmony-sig/third_party_app_libs).
## Which third-party libraries are related to network requests?
Applicable to: OpenHarmony SDK 3.2.6.5, stage model of API version 9
The [Axios](https://gitee.com/openharmony-sig/axios) library is related to network requests.
## How do I use NPM to import third- and fourth-party libraries?
Applicable to: OpenHarmony SDK 3.2.5.5, stage model of API version 9
- Method 1:
1. Open the **Terminal** window and run the following command to go to the **entry** directory:
```
cd entry
```
2. Run the following command to install a third-party package, for example, **dayjs**:
```
npm install dayjs --save
```
3. Add the following statement in the .js file to import the package:
```
import dayjs from 'dayjs';
```
- Method 2:
1. Enter the **entry** directory of the project and open the **package.json** file.
2. Write the third-party NPM package to be installed (for example, **dayjs**) in the **package.json** file.
```
{
"dependencies": {
"dayjs": "^1.10.4",
}
}
```
3. Open the **Terminal** window and run the following command to go to the **entry** directory:
```
cd entry
```
4. Run the following command to install NPM:
```
npm install
```
5. Add the following statement in the .js file to import the package:
```
import dayjs from 'dayjs';
```
en/application-dev/faqs/faqs-ui-ets.md 已删除 100644 → 0
浏览文件 @ ad5d655b
此差异已折叠。
en/application-dev/faqs/faqs-ui-js.md 已删除 100644 → 0
浏览文件 @ ad5d655b
# ArkUI (JavaScript) Development
## How do I convert the fields in an XML file into JavaScript objects?
Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9
To convert fields in an XML file into JavaScript objects, call the **convert** API in the **convertxml** module.
Example:
```
import convertxml from '@ohos.convertxml';
// XML strings
let xml =
'<?xml version="1.0" encoding="utf-8"?>' +
'<note importance="high" logged="true">' +
' <title>Happy</title>' +
' <todo>Work</todo>' +
' <todo>Play</todo>' +
'</note>';
let conv = new convertxml.ConvertXML();
// Options for conversion. For details, see the reference document.
let options = {
trim: false,
declarationKey: "_declaration",
instructionKey: "_instruction",
attributesKey: "_attributes",
textKey: "_text",
cdataKey: "_cdata",
doctypeKey: "_doctype",
commentKey: "_comment",
parentKey: "_parent",
typeKey: "_type",
nameKey: "_name",
elementsKey: "_elements"
}
let result: any = conv.convert(xml, options) // Convert fields in the XML file into JavaScript objects.
console.log('Test: ' + JSON.stringify(result))
console.log('Test: ' + result._declaration._attributes.version) // version field in the XML file
console.log('Test: ' + result._elements[0]._elements[0]._elements[0]._text) // title field in the XML file
```
For details, see [XML-to-JavaScript Conversion](../reference/apis/js-apis-convertxml.md).
## How do I convert the time to the HHMMSS format?
Example:
```
export default class DateTimeUtil{
/**
* HHMMSS
*/
getTime() {
const DATETIME = new Date()
return this.concatTime(DATETIME.getHours(),DATETIME.getMinutes(),DATETIME.getSeconds())
}
/**
* YYYYMMDD
*/
getDate() {
const DATETIME = new Date()
return this.concatDate(DATETIME.getFullYear(),DATETIME.getMonth()+1,DATETIME.getDate())
}
/**
* If the date is less than 10, add a leading zero, for example, **07**.
* @param value Indicates the value.
*/
fill(value:number) {
return (value> 9 ? '' : '0') + value
}
/**
* Concatenate year, month, and date fields.
* @param year
* @param month
* @param date
*/
concatDate(year: number, month: number, date: number){
return `${year}${this.fill(month)}${this.fill(date)}`
}
/**
Concatenate hours, minutes, and seconds fields.
* @param hours
* @param minutes
* @param seconds
*/
concatTime(hours:number,minutes:number,seconds:number){
return `${this.fill(hours)}${this.fill(minutes)}${this.fill(seconds)}`
}
}
```
en/application-dev/faqs/faqs-web-arkts.md 已删除 100644 → 0
浏览文件 @ ad5d655b
# ArkUI Web Component (ArkTS) Development
## What is the domStorageAccess attribute of the \<Web> component used for?
Applicable to: OpenHarmony SDK 3.2.6.5, stage model of API version 9
The **domStorageAccess** attribute specifies whether to enable the DOM Storage API, which is disabled by default and provides **localStorage**, but not **sessionStorage**.
## How do I check the online status on the HTML page loaded by the \<Web> component?
Applicable to: OpenHarmony SDK 3.2.7.5, stage model of API version 9
1. Configure the **ohos.permission.INTERNET** and **ohos.permission.GET_NETWORK_INFO** application permissions.
2. Obtain the online status through **window.navigator.onLine** on the HTML page.
## What should I do if the UserAgent string cannot be used in concatenation before the initial HTML5 page loading by the \<Web> component?
Applicable to: OpenHarmony SDK 3.2.6.5, stage model of API version 9
By default, the **UserAgent** string is obtained through the **WebController**. A **WebController** object can control only one **\<Web>** component, and methods on the **WebController** can only be called by the **\<Web>** component bound to it. To concatenate the default **UserAgent** string and a custom string before the initial page loading, perform the following:
1. Use **@State** to define the initial **userAgent** and bind it to the **\<Web>** component.
2. In the **onUrlLoadIntercept** callback of the **\<Web>** component, use **WebController** to obtain the default **userAgent** string and modify the **userAgent** bound to the **\<Web>** component.
The code snippet is as follows:
```
@Entry
@Component
struct Index {
private controller: WebController = new WebController()
@State userAgentPa: string = ''
build() {
Row() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
.width('100%')
.userAgent(this.userAgentPa)
.onUrlLoadIntercept((event) => {
let userAgent = this.controller.getDefaultUserAgent();
this.userAgentPa = userAgent + ' 111111111'
console.log("userAgent onUrlLoadIntercept: " + userAgent);
return false;
})
}
.width('100%').alignItems(HorizontalAlign.Start).backgroundColor(Color.Green)
}
.height('100%')
}
}
```
## Should the logic for loading the lottie animation be written in the onAppear or onReady function?
Applicable to: OpenHarmony SDK 3.2.6.5, stage model of API version 9
The logic for loading the lottie animation must be written in the **onReady** function. The **onReady** function is triggered when the canvas is ready, while the **onAppear** function is triggered when the canvas is displayed.
## Do I need to invoke the refresh API after invoking deleteJavaScriptRegister?
Applicable to: all versions
No. This operation is not needed.
## How do I pass data from a page to the \<Web> component?
Applicable to: OpenHarmony SDK 3.2.7.5, stage model of API version 9
1. Use **WebController** to create two message ports: message port 1 and message port 0.
2. Send message port 1 to the HTML side, which can then save and use the port.
3. Register a callback for message port 0 on the application side.
4. Use message port 0 on the application side to send messages to message port 1 on the HTML side.
Reference: [Web](../reference/arkui-ts/ts-basic-components-web.md)
en/application-dev/faqs/faqs-window-manager.md 0 → 100644
浏览文件 @ 846edb1b
# Window Management Development
## How do I obtain the height of the status bar and navigation bar?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
Before the window content is loaded, enable listening for the **systemAvoidAreaChange** event.
**Example**
```
// MainAbility.ts
import window from '@ohos.window';
/**
* Set the immersive window and obtain the height of the status bar and navigation bar.
* @param mainWindow Indicates the main window.
*/
async function enterImmersion(mainWindow: window.Window) {
mainWindow.on("systemBarTintChange", (data) => {
let avoidAreaRect = data.regionTint[0].region; // data.regionTint is an array that contains the rectangle coordinates of the status bar and navigation bar.
})
await mainWindow.setFullScreen(true)
await mainWindow.setSystemBarEnable(["status", "navigation"])
await mainWindow.systemBarProperties({
navigationBarColor: "#00000000",
statusBarColor: "#00000000",
navigationBarContentColor: "#FF0000",
statusBarContentColor: "#FF0000"
})
}
export default class MainAbility extends Ability {
// Do something.
async onWindowStageCreate(windowStage: window.WindowStage) {
let mainWindow = await windowStage.getMainWindow()
await enterImmersion(mainWindow)
windowStage.loadContent('pages/index')
}
// Do something.
}
```
## How do I hide the status bar on the top of an application?
Applicable to: OpenHarmony 3.2 Beta 5 (API version 9)
**Solution**
Use **setWindowSystemBarEnable** in the **onWindowStageCreate** lifecycle callback of UIAbility.
**Example**
```
onWindowStageCreate(windowStage){
windowStage.getMainWindowSync().setWindowSystemBarEnable([])
......
}
```
**Reference**
[Window](../reference/apis/js-apis-window.md)
en/application-dev/media/using-avsession-developer.md
浏览文件 @ 846edb1b
......@@ -88,7 +88,7 @@ To enable an audio and video application to access the AVSession service as a pr
```ts
// It is assumed that an AVSession object has been created. For details about how to create an AVSession object, see the node snippet above.
let session: AVSessionManager.AVSession = ALLREADY_CREATE_A_SESSION;
let wantAgentInfo: {
let wantAgentInfo = {
wants: [
{
bundleName: "com.example.musicdemo",
......
en/application-dev/quick-start/app-configuration-file.md
浏览文件 @ 846edb1b
# app.json5 Configuration File
This document gives an overview of the **app.json5** configuration file. To start with, let's go through an example of what this file contains.
This topic gives an overview of the **app.json5** configuration file. To start with, let's go through an example of what this file contains.
```json
{
......@@ -35,7 +35,7 @@ As shown above, the **app.json5** file contains several tags.
| Name| Description| Data Type| Initial Value Allowed|
| -------- | -------- | -------- | -------- |
| bundleName | Bundle name, which uniquely identifies an application. The value must comply with the following rules:<br>- Consists of letters, digits, underscores (_), and periods (.).<br>- Starts with a letter.<br>- Contains 7 to 127 bytes.<br>You are advised to use the reverse domain name notation, for example, *com.example.demo*, where the first part is the domain suffix **com**, the second part is the vendor/individual name, and the third part is the application name, which can be of multiple levels.<br>If an application is built with the system source code, you are advised to name it in *com.ohos.demo* notation, where **ohos** signifies that the application is an OpenHarmony system application.| String| No|
| bundleType| Bundle type, which is used to distinguish applications and atomic services.<br>- **app**: The bundle is a common application.<br>- **atomicService**: The bundle is an atomic service.<br>- **shared**: The bundle is a shared object application. | String| Yes (initial value: **"app"**)|
| bundleType| Bundle type, which is used to distinguish applications and atomic services.<br>- **app**: The bundle is a common application.<br>- **atomicService**: The bundle is an atomic service.<br>- **shared**: The bundle is a shared object application.| String| Yes (initial value: **"app"**)|
| debug | Whether the application can be debugged. This tag is generated during compilation and building in DevEco Studio.<br>- **true**: The application can be debugged.<br>- **false**: The application cannot be debugged.| Boolean| Yes (initial value: **false**)|
| icon | [Icon of the application](../application-models/application-component-configuration-stage.md). The value is an icon resource index.| String| No|
| label | [Name of the application](../application-models/application-component-configuration-stage.md). The value is a string resource index.| String| No|
......@@ -49,10 +49,11 @@ As shown above, the **app.json5** file contains several tags.
| apiReleaseType | Type of the target API version required for running the application. The value can be **"CanaryN"**, **"BetaN"**, or **"Release"**, where **N** represents a positive integer.<br>- **Canary**: indicates a restricted release.<br>- **Beta**: indicates a publicly released beta version.<br>- **Release**: indicates a publicly released official version.<br>The value is set by DevEco Studio reading the stage of the SDK in use.| String| Yes (initial value: set by DevEco Studio)|
| multiProjects | Whether the application supports joint development of multiple projects.<br>- **true**: The application supports joint development of multiple projects.<br>- **false**: The application does not support joint development of multiple projects. For details about multi-project development, see [Multi-Project Build](https://developer.harmonyos.com/en/docs/documentation/doc-guides-V3/ohos-building-overview-0000001263360495-V3#section71471033104216).| Boolean| Yes (initial value: **false**)|
| assanEnabled | Whether to enable AddressSanitizer (ASan) to detect memory corruption issues such as buffer overflows.<br>- **true**: ASan is enabled.<br>- **false**: ASan is disabled. Note that ASan is not available in the Release version.| Boolean| Yes (initial value: **false**)|
| tablet | Tablet-specific configuration, which includes **minAPIVersion** and **distributedNotificationEnabled** attributes.<br>When running on tablets, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)|
| tv | TV-specific configuration, which includes **minAPIVersion** and **distributedNotificationEnabled** attributes.<br>When running on TVs, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)|
| wearable | Wearable-specific configuration, which includes **minAPIVersion** and **distributedNotificationEnabled** attributes.<br>When running on wearables, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)|
| car | Head unit–specific configuration, which includes **minAPIVersion** and **distributedNotificationEnabled** attributes.<br>When running on head units, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)|
| default | Default device–specific configuration, which includes **minAPIVersion** and **distributedNotificationEnabled** attributes.<br>When running on default devices, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)|
| tablet | Tablet-specific configuration, which includes the **minAPIVersion** attribute.<br>When running on tablets, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)|
| tv | TV-specific configuration, which includes the **minAPIVersion** attribute.<br>When running on TVs, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)|
| wearable | Wearable-specific configuration, which includes the **minAPIVersion** attribute.<br>When running on wearables, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)|
| car | Head unit–specific configuration, which includes the **minAPIVersion** attribute.<br>When running on head units, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)|
| default | Default device–specific configuration, which includes the **minAPIVersion** attribute.<br>When running on default devices, the application applies the attribute settings under this tag and ignores the general counterparts.| Object| Yes (initial value: general settings in the **app.json5** file)|
|targetBundleName|Target application name of the bundle. The value rule and range are the same as those of **bundleName**.|String|Yes (if the initial value is used, the target application is not an application with the overlay feature)|
|targetPriority|Priority of the application. When **targetBundleName** is set, the application is an application with the overlay feature. The value ranges from 1 to 100.|Number|Yes (initial value: **1**)|
|generateBuildHash |Whether the hash values of all HAP and HSP files of the application are generated by the packaging tool. The hash values (if any) are used to determine whether the application needs to be updated when the system is updated in OTA mode but the **versionCode** value of the application remains unchanged.<br>If this tag is set to **true**, the packaging tool generates hash values for all HAP and HSP files of the application.<br>**NOTE**<br>This tag applies only to system applications.|Boolean|Yes (initial value: **false**)|
en/application-dev/quick-start/module-configuration-file.md
浏览文件 @ 846edb1b
......@@ -96,6 +96,7 @@ As shown above, the **module.json5** file contains several tags.
| targetPriority | Priority of the module. When **targetModuleName** is set, the module is a module with the overlay feature. The value ranges from 1 to 100.|Number|Yes (initial value: **1**)|
| [proxyDatas](#proxydatas) | List of data proxies provided by the module.| Object array| Yes (initial value: left empty)|
| isolationMode | Multi-process configuration of the module. The options are as follows:<br>- **nonisolationFirst**: The module preferentially runs in a non-independent process.<br>- **isolationFirst**: The module preferentially runs in an independent process.<br>- **isolationOnly**: The module runs only in an independent process.<br>- **nonisolationOnly**: The module runs only in non-independent processes.|String|Yes (initial value: **nonisolationFirst**)|
| generateBuildHash |Whether the hash value of the HAP or HSP file is generated by the packaging tool. The hash value (if any) is used to determine whether the application needs to be updated when the system is updated in OTA mode but the **versionCode** value of the application remains unchanged.<br>This tag is enabled only when the **generateBuildHash** tag in the [app.json5](./app-configuration-file.md) file is **false**.<br>**NOTE**<br>This tag applies only to system applications.|Boolean|Yes (initial value: **false**)|
## deviceTypes
......
en/application-dev/quick-start/module-structure.md
浏览文件 @ 846edb1b
......@@ -24,6 +24,7 @@ The **module** tag contains the HAP configuration.
|commonEvents | Information about the common event static subscriber, which must contain the subscriber name, required permissions, and list of the common events subscribed to. When a subscribed event is sent, the static subscriber is started. Unlike the dynamic subscriber, the static subscriber does not need to proactively call the common event subscription API in the service code, and may not be running when the common event is published.| Object array| Yes (initial value: left empty)|
| entryTheme | Keyword of an OpenHarmony internal theme. Set it to the resource index of the name.| String| Yes (initial value: left empty)|
|testRunner | Test runner configuration.| Object| Yes (initial value: left empty)|
|generateBuildHash |Whether the hash value of the HAP or HSP file is generated by the packaging tool. The hash value (if any) is used to determine whether the application needs to be updated when the system is updated in OTA mode but the value of [code](#internal-structure-of-the-apiversion-attribute) in **version** of the application remains unchanged.<br>**NOTE**<br>This tag applies only to system applications.|Boolean|Yes (initial value: **false**)|
Example of the **module** tag structure:
......
en/application-dev/reference/apis/Readme-EN.md
浏览文件 @ 846edb1b
......@@ -152,6 +152,7 @@
- bundleManager
- [abilityInfo](js-apis-bundleManager-abilityInfo.md)
- [applicationInfo](js-apis-bundleManager-applicationInfo.md)
- [AppProvisionInfo](js-apis-bundleManager-AppProvisionInfo.md)
- [bundleInfo](js-apis-bundleManager-bundleInfo.md)
- [BundlePackInfo](js-apis-bundleManager-BundlePackInfo.md)
- [dispatchInfo](js-apis-bundleManager-dispatchInfo.md)
......@@ -166,6 +167,7 @@
- UI Page
- [@ohos.animator (Animator)](js-apis-animator.md)
- [@ohos.arkui.drawableDescriptor (DrawableDescriptor)](js-apis-arkui-drawableDescriptor.md)
- [@ohos.curves (Interpolation Calculation)](js-apis-curve.md)
- [@ohos.matrix4 (Matrix Transformation)](js-apis-matrix4.md)
- [@ohos.mediaquery (Media Query)](js-apis-mediaquery.md)
......@@ -312,8 +314,6 @@
- [Timer](js-apis-timer.md)
- application
- [AccessibilityExtensionContext (Accessibility Extension Context)](js-apis-inner-application-accessibilityExtensionContext.md)
- imf
- [InputMethodCommon](js-apis-inputmethod-InputMethodCommon.md)
- Device Management
- [@ohos.batteryInfo (Battery Information)](js-apis-battery-info.md)
......@@ -354,8 +354,8 @@
- Customization
- [@ohos.configPolicy (Configuration Policy)](js-apis-configPolicy.md)
- [@ohos.enterprise.accountManager (Account Management)](js-apis-enterprise-accountManager.md)
- [@ohos.enterprise.bundleManager (Bundle Management)](js-apis-enterprise-bundleManager.md)
- [@ohos.enterprise.adminManager (Enterprise Device Management)](js-apis-enterprise-adminManager.md)
- [@ohos.enterprise.bundleManager (Bundle Management)](js-apis-enterprise-bundleManager.md)
- [@ohos.enterprise.dateTimeManager (System Time Management)](js-apis-enterprise-dateTimeManager.md)
- [@ohos.enterprise.deviceControl (Device Control Management)](js-apis-enterprise-deviceControl.md)
- [@ohos.enterprise.deviceInfo (Device Information Management)](js-apis-enterprise-deviceInfo.md)
......
en/application-dev/reference/apis/js-apis-audio.md
浏览文件 @ 846edb1b
......@@ -486,8 +486,8 @@ Enumerates the audio channels.
| Name | Value | Description |
| --------- | -------- | -------- |
| CHANNEL_1 | 0x1 << 0 | Mono.|
| CHANNEL_2 | 0x1 << 1 | Dual-channel.|
| CHANNEL_1 | 0x1 << 0 | Channel 1. |
| CHANNEL_2 | 0x1 << 1 | Channel 2. |
## AudioSamplingRate<sup>8+</sup>
......
en/application-dev/reference/apis/js-apis-bundleManager-AppProvisionInfo.md 0 → 100644
浏览文件 @ 846edb1b
# AppProvisionInfo
The **AppProvisionInfo** module provides information in the [HarmonyAppProvision configuration file](../../security/app-provision-structure.md). The information can be obtained through [getAppProvisionInfo](js-apis-bundleManager.md#bundlemanagergetappprovisioninfo10).
> **NOTE**
> The initial APIs of this module are supported since API version 10. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## AppProvisionInfo
**System capability**: SystemCapability.BundleManager.BundleFramework.Core
**System API**: This is a system API.
| Name | Type | Readable| Writable| Description |
| ------------------------- | ------ | ---- | ---- | -------------------- |
| versionCode | number | Yes | No | Version number of the configuration file.|
| versionName | string | Yes | No | Version name of the configuration file. |
| uuid | string | Yes | No | UUID in the configuration file.|
| type | string | Yes | No | Type of the configuration file, which can be **debug** or **release**.|
| appDistributionType | string | Yes | No | Distribution type in the configuration file, which can be **app_gallery**, **enterprise**, **os_integration**, or **crowdtesting**.|
| validity | [Validity](#validity) | Yes | No | Validity period in the configuration file.|
| developerId | string | Yes | No | Developer ID in the configuration file.|
| certificate | string | Yes | No | Certificate public key in the configuration file.|
| apl | string | Yes | No | APL in the configuration file, which can be **normal**, **system_basic**, or **system_core**.|
| issuer | string | Yes | No | Issuer name in the configuration file.|
## Validity
**System capability**: SystemCapability.BundleManager.BundleFramework.Core
**System API**: This is a system API.
| Name | Type | Readable| Writable| Description |
| ------------------------- | ------ | ---- | ---- | -------------------- |
| notBefore | number | Yes | No | Earliest validity date of the configuration file.|
| notAfter | number | Yes | No | Latest validity date of the configuration file.|
en/application-dev/reference/apis/js-apis-bundleManager.md
浏览文件 @ 846edb1b
......@@ -401,7 +401,6 @@ For details about the error codes, see [Bundle Error Codes](../errorcodes/errorc
| ID| Error Message |
| -------- | ------------------------------------- |
| 17700001 | The specified bundleName is not found. |
| 17700004 | The specified user ID is not found. |
| 17700026 | The specified bundle is disabled. |
**Example**
......@@ -446,7 +445,7 @@ No permission is required for obtaining the caller's own information.
| ----------- | ------ | ---- | ---------------------------- |
| bundleName | string | Yes | Bundle name.|
| bundleFlags | [number](#bundleflag) | Yes | Type of the bundle information to obtain. |
| userId | number | No | User ID. |
| userId | number | No | User ID. The default value is the user ID of the caller. The value must be greater than or equal to 0. |
**Return value**
......@@ -587,7 +586,6 @@ For details about the error codes, see [Bundle Error Codes](../errorcodes/errorc
| ID| Error Message |
| -------- | --------------------------------------|
| 17700001 | The specified bundleName is not found. |
| 17700004 | The specified user ID is not found. |
| 17700026 | The specified bundle is disabled. |
**Example**
......@@ -631,7 +629,7 @@ No permission is required for obtaining the caller's own information.
| ---------- | ------ | ---- | ---------------------------- |
| bundleName | string | Yes | Bundle name.|
| appFlags | [number](#applicationflag) | Yes | Type of the application information to obtain. |
| userId | number | No | User ID.|
| userId | number | No | User ID. The default value is the user ID of the caller. The value must be greater than or equal to 0.|
**Return value**
......@@ -737,14 +735,6 @@ Obtains the information about all bundles based on the given bundle flags. This
| bundleFlags | [number](#bundleflag) | Yes | Type of the bundle information to obtain. |
| callback | AsyncCallback<Array\<[BundleInfo](js-apis-bundleManager-bundleInfo.md)>> | Yes| Callback used to return the result. If the operation is successful, **err** is **null** and **data** is the array of bundle information obtained. Otherwise, **err** is an error object.|
**Error codes**
For details about the error codes, see [Bundle Error Codes](../errorcodes/errorcode-bundle.md).
| ID| Error Message |
| -------- | ---------------------------------- |
| 17700004 | The specified user ID is not found. |
**Example**
```ts
......@@ -782,7 +772,7 @@ Obtains the information about all bundles based on the given bundle flags and us
| Name | Type | Mandatory| Description |
| ----------- | ------ | ---- | -------------------------------------------------- |
| bundleFlags | [number](#bundleflag) | Yes | Type of the bundle information to obtain. |
| userId | number | No | User ID. |
| userId | number | No | User ID. The default value is the user ID of the caller. The value must be greater than or equal to 0. |
**Return value**
......@@ -884,14 +874,6 @@ Obtains the information about all applications based on the given application fl
| appFlags | [number](#applicationflag) | Yes | Type of the application information to obtain. |
| callback | AsyncCallback<Array\<[ApplicationInfo](js-apis-bundleManager-applicationInfo.md)>> | Yes| Callback used to return the result. If the operation is successful, **err** is **null** and **data** is the array of application information obtained. Otherwise, **err** is an error object.|
**Error codes**
For details about the error codes, see [Bundle Error Codes](../errorcodes/errorcode-bundle.md).
| ID| Error Message |
| -------- | ---------------------------------- |
| 17700004 | The specified user ID is not found. |
**Example**
```ts
......@@ -929,7 +911,7 @@ Obtains the information about all applications based on the given application fl
| Name | Type | Mandatory| Description |
| -------- | ------ | ---- | ---------------------------------------------------------- |
| appFlags | [number](#applicationflag) | Yes | Type of the application information to obtain. |
| userId | number | No | User ID. |
| userId | number | No | User ID. The default value is the user ID of the caller. The value must be greater than or equal to 0. |
**Return value**
......@@ -1050,7 +1032,6 @@ For details about the error codes, see [Bundle Error Codes](../errorcodes/errorc
| -------- | -------------------------------------- |
| 17700001 | The specified bundleName is not found. |
| 17700003 | The specified ability is not found. |
| 17700004 | The specified userId is invalid. |
| 17700026 | The specified bundle is disabled. |
| 17700029 | The specified ability is disabled. |
......@@ -1096,7 +1077,7 @@ Obtains the ability information based on the given want, ability flags, and user
| ------------ | ------ | ---- | ------------------------------------------------------- |
| want | Want | Yes | Want containing the bundle name to query. |
| abilityFlags | [number](#abilityflag) | Yes | Type of the ability information to obtain.|
| userId | number | No | User ID. |
| userId | number | No | User ID. The default value is the user ID of the caller. The value must be greater than or equal to 0. |
**Return value**
......@@ -1247,7 +1228,6 @@ For details about the error codes, see [Bundle Error Codes](../errorcodes/errorc
| -------- | -------------------------------------------- |
| 17700001 | The specified bundleName is not found. |
| 17700003 | The specified extensionAbility is not found. |
| 17700004 | The specified userId is invalid. |
| 17700026 | The specified bundle is disabled. |
**Example**
......@@ -1294,7 +1274,7 @@ Obtains the Extension ability information based on the given want, Extension abi
| want | Want | Yes | Want containing the bundle name to query. |
| extensionAbilityType | [ExtensionAbilityType](#extensionabilitytype) | Yes | Type of the Extension ability. |
| extensionAbilityFlags | [number](#extensionabilityflag) | Yes | Type of the Extension ability information to obtain.|
| userId | number | No | User ID. |
| userId | number | No | User ID. The default value is the user ID of the caller. The value must be greater than or equal to 0. |
**Return value**
......@@ -2171,7 +2151,6 @@ For details about the error codes, see [Bundle Error Codes](../errorcodes/errorc
| ID| Error Message |
| -------- | --------------------------------------|
| 17700001 | The specified bundleName is not found. |
| 17700004 | The specified user ID is not found. |
| 17700026 | The specified bundle is disabled. |
**Example**
......@@ -2211,7 +2190,7 @@ Obtains the Want used to launch the bundle based on the given bundle name and us
| Name | Type | Mandatory| Description |
| ---------- | ------ | ---- | ------------------------- |
| bundleName | string | Yes | Bundle name.|
| userId | number | No | User ID. |
| userId | number | No | User ID. The default value is the user ID of the caller. The value must be greater than or equal to 0. |
**Return value**
......@@ -2313,7 +2292,7 @@ Obtains the JSON strings of the configuration file based on the given module ame
| ------------ | ------ | ---- | -------------------------- |
| moduleName | string | Yes | Module name. |
| abilityName | string | Yes | Ability name. |
| metadataName | string | No | Metadata name.|
| metadataName | string | No | Metadata name. By default, no value is passed.|
**Return value**
......@@ -2433,7 +2412,7 @@ Obtains the JSON strings of the configuration file based on the given module ame
| -------------------- | ------ | ---- | ---------------------------------- |
| moduleName | string | Yes | Module name. |
| extensionAbilityName | string | Yes | Extension ability name.|
| metadataName | string | No | Metadata name. |
| metadataName | string | No | Metadata name. By default, no value is passed. |
**Return value**
......@@ -2948,7 +2927,7 @@ try {
### bundleManager.getSharedBundleInfo<sup>10+</sup>
function getSharedBundleInfo(bundleName: string, moduleName: string): Promise\<Array\<SharedBundleInfo\>\>;
getSharedBundleInfo(bundleName: string, moduleName: string): Promise\<Array\<SharedBundleInfo\>\>;
Obtains the shared bundle information based on the given bundle name. This API uses a promise to return the result.
......@@ -3038,7 +3017,7 @@ try {
### bundleManager.getAllSharedBundleInfo<sup>10+</sup>
function getAllSharedBundleInfo(): Promise\<Array\<SharedBundleInfo\>\>;
getAllSharedBundleInfo(): Promise\<Array\<SharedBundleInfo\>\>;
Obtains the information about all shared bundles. This API uses a promise to return the result.
......@@ -3186,7 +3165,7 @@ Obtains the provision configuration file information based on the given bundle n
| Name | Type | Mandatory| Description |
| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| bundleName | string | Yes| Bundle name.|
| userId | number | No| User ID, which can be obtained by calling [getOsAccountLocalId](js-apis-osAccount.md#getosaccountlocalid9).|
| userId | number | No| User ID. The default value is the user ID of the caller. The value must be greater than or equal to 0. You can call [getOsAccountLocalId](js-apis-osAccount.md#getosaccountlocalid9) to obtain the user ID on the current device.|
**Return value**
......@@ -3232,5 +3211,3 @@ try {
hilog.error(0x0000, 'testTag', 'getAppProvisionInfo failed. Cause: %{public}s', err.message);
}
```
<!--no_check-->
\ No newline at end of file
en/application-dev/reference/apis/js-apis-uiappearance.md
浏览文件 @ 846edb1b
......@@ -4,7 +4,7 @@ The **uiAppearance** module provides basic capabilities for managing the system
> **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 of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
>
> The APIs provided by this module are system APIs.
......
en/application-dev/reference/apis/js-apis-usbManager.md
浏览文件 @ 846edb1b
......@@ -209,8 +209,8 @@ Removes the permission for the application to access a USB device.
**Example**
```js
let devicesName="1-1";
if usb.removeRight(devicesName) {
let devicesName= "1-1";
if (usb.removeRight(devicesName)) {
console.log(`Succeed in removing right`);
}
```
......@@ -245,7 +245,7 @@ Adds the permission for the application to access a USB device.
```js
let devicesName = "1-1";
let bundleName = "com.example.hello";
if usb.addRight(bundleName, devicesName) {
if (usb.addRight(bundleName, devicesName)) {
console.log(`Succeed in adding right`);
}
```
......@@ -454,7 +454,14 @@ Before you do this, call [usb.getDevices](#usbgetdevices) to obtain the USB devi
**Example**
```js
let param = new usb.USBControlParams();
let param = {
request: 0,
reqType: 0,
target:0,
value: 0,
index: 0,
data: null
};
usb.controlTransfer(devicepipe, param).then((ret) => {
console.log(`controlTransfer = ${ret}`);
})
......@@ -579,7 +586,7 @@ Converts the USB function list in the numeric mask format to a string in Device
**Example**
```js
let funcs = usb.ACM | usb.ECM;
let funcs = usb.FunctionType.ACM | usb.FunctionType.ECM;
let ret = usb.usbFunctionsToString(funcs);
```
......@@ -608,7 +615,7 @@ Sets the current USB function list in Device mode.
**Example**
```js
let funcs = usb.HDC;
let funcs = usb.FunctionType.HDC;
usb.setCurrentFunctions(funcs).then(() => {
console.info('usb setCurrentFunctions successfully.');
}).catch(err => {
......
en/application-dev/reference/apis/js-apis-vibrator.md
浏览文件 @ 846edb1b
......@@ -52,7 +52,7 @@ try {
usage: 'alarm'
}, (error) => {
if (error) {
console.error('vibrate fail, error.code: ' + error.code + 'error.message: ', + error.message);
console.error('Vibrate fail, error.code: ' + error.code + 'error.message: ', + error.message);
return;
}
console.log('Callback returned to indicate a successful vibration.');
......@@ -145,7 +145,7 @@ try {
usage: 'alarm'
}, (error) => {
if (error) {
console.error('vibrate fail, error.code: ' + error.code + 'error.message: ', + error.message);
console.error('Vibrate fail, error.code: ' + error.code + 'error.message: ', + error.message);
return;
}
console.log('Callback returned to indicate a successful vibration.');
......@@ -253,7 +253,7 @@ try {
usage: 'alarm'
}, (error) => {
if (error) {
console.error('vibrate fail, error.code: ' + error.code + 'error.message: ', + error.message);
console.error('Vibrate fail, error.code: ' + error.code + 'error.message: ', + error.message);
return;
}
console.log('Callback returned to indicate a successful vibration.');
......@@ -338,7 +338,7 @@ Checks whether the passed effect ID is supported. This API uses an asynchronous
| Name | Type | Mandatory| Description |
| -------- | ---------------------------- | ---- | ------------------------------------------------------ |
| effectId | string | Yes | Vibration effect ID. |
| callback | AsyncCallback&lt;boolean&gt; | Yes | Callback used to return the result. The value **true** means that the passed effect ID is supported, and **false** means the opposite. |
| callback | AsyncCallback&lt;boolean&gt; | Yes | Callback used to return the result. The value **true** means that the passed effect ID is supported, and **false** means the opposite.|
**Example**
......@@ -395,7 +395,7 @@ Checks whether the passed effect ID is supported. This API uses a promise to ret
| Type | Description |
| ---------------------- | --------------------------------------------------------- |
| Promise&lt;boolean&gt; | Promise that returns the result. The value **true** means that the passed effect ID is supported, and **false** means the opposite. |
| Promise&lt;boolean&gt; | Promise that returns the result. The value **true** means that the passed effect ID is supported, and **false** means the opposite.|
**Example**
......@@ -419,7 +419,7 @@ try {
console.error('Promise returned to indicate a failed vibration:' + JSON.stringify(error));
});
} catch (error) {
console.error('exception in, error:' + JSON.stringify(error));
console.error('Exception in, error:' + JSON.stringify(error));
}
}
}, (error) => {
......
en/application-dev/reference/arkui-js/js-components-basic-picker-view.md
浏览文件 @ 846edb1b
# picker-view
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<picker-view>** component provides the view that shows an embedded scrollable selector on the screen.
......@@ -121,228 +120,232 @@ Not supported
## Example
1. Text Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected value: {{value}} Selected index: {{index}}
</text>
<picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 30px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
options: ['Option 1','Option 2','Option 3'],
value: "Option 1",
index: 0
},
handleChange(data) {
this.value = data.newValue;
this.index = data.newSelected;
},
}
```
![picker-view0](figures/picker-view0.gif)
2. Time Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{time}}
</text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
defaultTime: "",
time: "",
},
onInit() {
this.defaultTime = this.now();
},
handleChange(data) {
this.time = this.concat(data.hour, data.minute);
},
now() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
return this.concat(hours, minutes);
},
fill(value) {
return (value > 9 ? "" : "0") + value;
},
concat(hours, minutes) {
return `${this.fill(hours)}:${this.fill(minutes)}`;
},
}
```
![picker-view1](figures/picker-view1.gif)
3. Date Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{date}}
</text>
<picker-view class="time-picker" type="date" selected="{{defaultTime}}" @change="handleChange" lunarswitch="true"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
date: "",
},
handleChange(data) {
this.date = data.year + "/" + data.month + "/" + data.day + "";
},
}
```
![picker-view2](figures/picker-view2.gif)
4. Date and Time Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{datetime}}
</text>
<picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
datetime: "",
},
handleChange(data) {
this.datetime = data.year + "/" + data.month + "/" + data.day + "" + data.hour + ":" + data.minute + "";
},
}
```
![picker-view3](figures/picker-view3.gif)
5. Multi-Column Text Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{ value }}
</text>
<picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
multitext: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
],
value: ""
},
handleChange(data) {
this.value = "Selected: " + data.column + "," + "value: " + data.newValue + ", index:" + data.newSelected;
},
}
```
![picker-view4](figures/picker-view4.gif)
### Text Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected value: {{value}} Selected index: {{index}}
</text>
<picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 30px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
options: ['Option 1','Option 2','Option 3'],
value: "Option 1",
index: 0
},
handleChange(data) {
this.value = data.newValue;
this.index = data.newSelected;
},
}
```
![picker-view0](figures/picker-view0.gif)
### Time Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{time}}
</text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
defaultTime: "",
time: "",
},
onInit() {
this.defaultTime = this.now();
},
handleChange(data) {
this.time = this.concat(data.hour, data.minute);
},
now() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
return this.concat(hours, minutes);
},
fill(value) {
return (value > 9 ? "" : "0") + value;
},
concat(hours, minutes) {
return `${this.fill(hours)}:${this.fill(minutes)}`;
},
}
```
![picker-view1](figures/picker-view1.gif)
### Date Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{date}}
</text>
<picker-view class="time-picker" type="date" selected="{{defaultTime}}" @change="handleChange" lunarswitch="true"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
date: "",
},
handleChange(data) {
this.date = data.year + "/" + data.month + "/" + data.day + "";
},
}
```
![picker-view2](figures/picker-view2.gif)
### Date and Time Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{datetime}}
</text>
<picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
datetime: "",
},
handleChange(data) {
this.datetime = data.year + "/" + data.month + "/" + data.day + "" + data.hour + ":" + data.minute + "";
},
}
```
![picker-view3](figures/picker-view3.gif)
### Multi-Column Text Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{ value }}
</text>
<picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
multitext: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
],
value: ""
},
handleChange(data) {
this.value = "Column: " + data.column + "," + "Value: " + data.newValue + ", Index:" + data.newSelected;
},
}
```
![picker-view4](figures/picker-view4.gif)
en/application-dev/reference/arkui-js/js-components-basic-text.md
浏览文件 @ 846edb1b
......@@ -137,4 +137,4 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
```
![en-us_image_0000001167823076](figures/text.png)
![en-us_image_0000001167823076](figures/js-text.png)
en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ 846edb1b
......@@ -43,7 +43,7 @@
- Anti-aliasing enabled
![screenshot-8](figures/screenshot-8.png)
![en-us_image_0000001127125162](figures/en-us_image_0000001127125162.png)
## Attributes
......@@ -558,7 +558,7 @@ export default {
}
```
![smoothoff](figures/smoothoff.png)
![en-us_image_0000001167952236](figures/en-us_image_0000001167952236.png)
......@@ -863,10 +863,10 @@ Moves a drawing path to a target position on the canvas.
**Parameters**
| Name | Type | Description |
| ---- | ------ | --------- |
| x | number | X-coordinate of the target position.|
| y | number | Y-coordinate of the target position.|
| Name | Type | Description |
| ---- | ------ | ------------------ |
| x | number | X-coordinate of the target position.<br>Unit: vp|
| y | number | Y-coordinate of the target position.<br>Unit: vp|
**Example**
```html
......@@ -902,8 +902,8 @@ Connects the current point to a target position using a straight line.
| Name | Type | Description |
| ---- | ------ | --------- |
| x | number | X-coordinate of the target position.|
| y | number | Y-coordinate of the target position.|
| x | number | X-coordinate of the target position.<br>Unit: vp|
| y | number | Y-coordinate of the target position.<br>Unit: vp|
**Example**
```html
......@@ -1026,7 +1026,7 @@ Draws a cubic bezier curve on the canvas.
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
......@@ -1204,7 +1204,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
}
```
![ellipse](figures/ellipse.png)
![en-us_image_0000001214823665](figures/en-us_image_0000001214823665.png)
### rect
......
en/application-dev/reference/arkui-js/js-components-container-list-item-group.md
浏览文件 @ 846edb1b
......@@ -18,7 +18,7 @@ None
## Child Components
Only the **[\<list-item>](../arkui-js/js-components-container-list-item.md)** component is supported.
Only the [\<list-item>](../arkui-js/js-components-container-list-item.md) child component is supported.
## Attributes
......@@ -31,7 +31,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
> **NOTE**
>
> **id** in the universal attributes is used to identify a group. The input parameters of related functions and event information in the list also use **id** to uniquely identify a group.
> The universal attribute **id** is used to identify a group. The input parameters of related functions and event information in the list also use **id** to uniquely identify a group.
## Styles
......@@ -126,48 +126,55 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
// xxx.js
import promptAction from '@ohos.promptAction';
export default {
data: {
direction: 'column',
list: [],
listAdd: []
},
onInit() {
this.list = []
this.listAdd = []
for (var i = 1; i <= 3; i++) {
var dataItem = {
value: 'GROUP' + i,
};
this.list.push(dataItem);
data: {
direction: 'column',
list: [],
listAdd: []
},
onInit() {
this.list = []
this.listAdd = []
for (var i = 1; i <= 3; i++) {
var dataItem = {
value: 'GROUP' + i,
};
this.list.push(dataItem);
}
},
collapseOne(e) {
this.$element('mylist').collapseGroup({
groupid: 'GROUP1'
})
},
expandOne(e) {
this.$element('mylist').expandGroup({
groupid: 'GROUP1'
})
},
collapseAll(e) {
this.$element('mylist').collapseGroup({
groupid: ''
})
},
expandAll(e) {
this.$element('mylist').expandGroup({
groupid: ''
})
},
collapse(e) {
promptAction.showToast({
message: 'Close ' + e.groupid
})
},
expand(e) {
promptAction.showToast({
message: 'Open ' + e.groupid
})
}
},
collapseOne(e) {
this.$element('mylist').collapseGroup({
groupid: 'GROUP1'
})
},
expandOne(e) {
this.$element('mylist').expandGroup({
groupid: 'GROUP1'
})
},
collapseAll(e) {
this.$element('mylist').collapseGroup()
},
expandAll(e) {
this.$element('mylist').expandGroup()
},
collapse(e) {
promptAction.showToast({
message: 'Close ' + e.groupid
})
},
expand(e) {
promptAction.showToast({
message: 'Open ' + e.groupid
})
}
}
```
![list6](figures/list6.gif)
en/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ 846edb1b
......@@ -22,9 +22,9 @@ Creates a text picker based on the selection range specified by **range**.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| range | string[] \| [Resource](ts-types.md#resource)\|[TextPickerRangeContent](#textpickerrangecontent10)[]<sup>10+</sup> | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed. If it is dynamically changed to an empty array, the current value remains displayed.|
| selected | number | No| Index of the default item in the range.<br>Default value: **0**|
| value | string | No| Value of the default item in the range. The priority of this parameter is lower than that of **selected**.<br>Default value: value of the first item<br>**NOTE**\<br>This parameter works only for a text list. It does not work for an image list or a list consisting of text and images.|
| range | string[] \| [Resource](ts-types.md#resource) \| [TextPickerRangeContent](#textpickerrangecontent10)[]<sup>10+</sup> | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed. If it is dynamically changed to an empty array, the current value remains displayed.|
| selected | number | No| Index of the default item in the range.<br>Default value: **0**<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
| value | string | No| Value of the default item in the range. The priority of this parameter is lower than that of **selected**.<br>Default value: value of the first item<br>**NOTE**<br>This parameter works only for a text list. It does not work for an image list or a list consisting of text and images.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables. |
## TextPickerRangeContent<sup>10+</sup>
......@@ -50,7 +50,9 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| Name| Description|
| -------- | -------- |
| onChange(callback: (value: string, index: number) =&gt; void) | Triggered when an item in the picker is selected.<br>- **value**: value of the selected item.<br>**NOTE**<br>For a text list or a list consisting of text and images, **value** indicates the text value of the selected item. For an image list, **value** is empty.<br>- **index**: index of the selected item. |
| onAccept(callback: (value: string, index: number) => void) | Triggered when the OK button in the dialog box is clicked.<br><br>- **value**: value of the selected item.<br>- **index**: index of the selected item.<br>**NOTE**<br>This event can be triggered only in the [text picker dialog box](ts-methods-textpicker-dialog.md).|
| onCancel(callback: () => void) | Triggered when the Cancel button in the dialog box is clicked.<br>**NOTE**<br>This event can be triggered only in the [text picker dialog box](ts-methods-textpicker-dialog.md).|
| onChange(callback: (value: string, index: number) =&gt; void) | Triggered when an item in the picker is selected.<br>- **value**: value of the selected item.<br>**NOTE**<br>For a text list or a list consisting of text and images, **value** indicates the text value of the selected item. For an image list, **value** is empty.<br>- **index**: index of the selected item.|
## Example
......
en/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 846edb1b
......@@ -2,9 +2,9 @@
Continuous recognition, parallel recognition, and exclusive recognition are supported for a group of gestures.
> **NOTE**
> **NOTE**
>
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## APIs
......@@ -12,24 +12,24 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| mode | [GestureMode](#gesturemode) | Yes| - | Recognition mode of combined gestures.|
| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br>\| [PanGesture](ts-basic-gestures-pangesture.md)<br>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes| - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.|
| Name | Type | Mandatory | Description |
| ------- | ---------------------------------------- | ---- | ------------------------------ |
| mode | [GestureMode](#gesturemode) | Yes | Recognition mode of combined gestures. |
| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br>\| [PanGesture](ts-basic-gestures-pangesture.md)<br>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.|
## GestureMode
| Name| Description|
| -------- | -------- |
| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.|
| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.|
| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.|
| Name | Description |
| --------- | ---------------------------------------- |
| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.|
| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. |
| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. |
## Events
| Name| Description|
| -------- | -------- |
| Name | Description |
| ---------------------------------------- | ------------------------------------ |
| onCancel(event: () =&gt; void) | Callback for the GestureMode.Sequence cancellation event.|
......@@ -50,6 +50,7 @@ struct GestureGroupExample {
build() {
Column() {
Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
.fontSize(15)
}
.translate({ x: this.offsetX, y: this.offsetY, z: 0 })
.height(150)
......
en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @ 846edb1b
......@@ -32,8 +32,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| Name | Parameter | Description |
| ----------------------------- | ---- | -------------------- |
| onReady(event: () => void) | - | Triggered when a canvas is ready. When this event is triggered, the width and height of the canvas can be obtained, and you can use the canvas APIs to draw images.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onReady(event: () => void) | - | Triggered when a canvas is ready or its size changes. When this event is triggered, the canvas is cleared. The width and height of the canvas can then be obtained, and you can use the canvas APIs to draw images. If the canvas is merely relocated, the **onAreaChange** event is triggered, but the **onReady** event is not.<br>Since API version 9, this API is supported in ArkTS widgets.|
**Example**
......
en/application-dev/reference/arkui-ts/ts-container-grid.md
浏览文件 @ 846edb1b
......@@ -48,7 +48,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| rowsTemplate | string | Number of rows in the current grid layout. If this attribute is not set, one row is used by default.<br>For example, **'1fr 1fr 2fr'** indicates three rows, with the first row taking up 1/4 of the parent component's full height, the second row 1/4, and the third row 2/4.<br>**NOTE**<br>If this attribute is set to **'0fr'**, the row width is 0, and grid item in the row is not displayed. If this attribute is set to any other invalid value, the grid item is displayed as one row.|
| columnsGap | [Length](ts-types.md#length) | Gap between columns.<br>Default value: **0**<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| rowsGap | [Length](ts-types.md#length) | Gap between rows.<br>Default value: **0**<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off** |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**<br>**NOTE**<br>In API version 9 and earlier versions, the default value is **BarState.Off**. In API version 10, the default value is **BarState.Auto**.|
| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | Color of the scrollbar.|
| scrollBarWidth | string \| number | Width of the scrollbar. After the width is set, the scrollbar is displayed with the set width in normal state and pressed state.<br>Default value: **4**<br>Unit: vp|
| cachedCount | number | Number of grid items to be preloaded (cached). It works only in [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md). For details, see [Minimizing White Blocks During Swiping](../../ui/arkts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1**<br>**NOTE**<br>The number of the grid items to be cached before and after the currently displayed one equals the value of **cachedCount** multiplied by the number of columns.<br>Grid items that exceed the display and cache range are released.<br>A value less than 0 evaluates to the default value.|
......@@ -59,6 +59,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| cellLength<sup>8+</sup> | number | When **layoutDirection** is **Row** or **RowReverse**: fixed height per row.<br>When **layoutDirection** is **Column** or **ColumnReverse**: fixed width per column.<br>Default value: size of the first element|
| multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.|
| supportAnimation<sup>8+</sup> | boolean | Whether to enable animation. Currently, the grid item drag animation is supported.<br>Default value: **false**|
| edgeEffect<sup>10+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect. The spring effect and shadow effect are supported.<br>Default value: **EdgeEffect.None**<br>|
Depending on the settings of the **rowsTemplate** and **columnsTemplate** attributes, the **\<Grid>** component supports the following layout modes:
......@@ -181,6 +182,7 @@ struct GridExample {
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.edgeEffect(EdgeEffect.Spring)
.onScrollIndex((first: number) => {
console.info(first.toString())
})
......
en/application-dev/reference/arkui-ts/ts-container-list.md
浏览文件 @ 846edb1b
......@@ -118,7 +118,7 @@ Since API version 9, this API is supported in ArkTS widgets.
> **NOTE**
>
> To enable the editable mode for a list, the following conditions must be met:
> To enable the editable mode for a list, the following conditions must be met: (This feature is deprecated since API version 9.)
>
> - **editMode** is set to **true**.
>
......@@ -128,7 +128,7 @@ Since API version 9, this API is supported in ArkTS widgets.
>
> To enable dragging for a list item, the following conditions must be met:
>
> - **editMode** is set to **true**.
> - **editMode** is set to **true**. (This is not required since API version 9.)
>
> - The list item is bound to the **onDragStart** event and the event returns a floating UI during event callback.
......
en/application-dev/reference/arkui-ts/ts-container-panel.md
浏览文件 @ 846edb1b
......@@ -11,6 +11,10 @@ The **<Panel\>** component is a slidable panel that presents lightweight content
Supported
> **NOTE**
>
> Built-in components and custom components are allowed, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control.
## APIs
......@@ -20,19 +24,20 @@ Panel(show: boolean)
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| show | boolean | Yes| Whether the panel is shown.|
| show | boolean | Yes| Whether the panel is shown.<br>**NOTE**<br>The panel is hidden and does not take up space in the layout if this parameter is set to **false** or [Visible.None](ts-universal-attributes-visibility.md) is set.|
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Description|
| -------- | -------- | -------- |
| type | [PanelType](#paneltype)| Type of the panel.<br>Default value: **PanelType.Foldable**|
| mode | [PanelMode](#panelmode) | Initial status of the panel.|
| mode | [PanelMode](#panelmode) | Initial status of the panel.<br>Default value for the Minibar type: **PanelMode.Mini**<br/>Default value for other types: **PanelMode.Half**<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables. |
| dragBar | boolean | Whether to enable a drag bar. The value **true** means that the drag bar will be displayed, and **false** means the opposite.<br>Default value: **true**|
| fullHeight | string \| number | Panel height in the **PanelMode.Full** mode.|
| halfHeight | string \| number | Panel height in the **PanelMode.Half** mode. The default value is half of the screen height.|
| miniHeight | string \| number | Panel height in the **PanelMode.Mini** mode.|
| fullHeight | string \| number | Panel height in the **PanelMode.Full** mode.<br>Default value: main axis height of the panel minus 8 vp<br>**NOTE**<br>This attribute cannot be set in percentage.|
| halfHeight | string \| number | Panel height in the **PanelMode.Half** mode.<br>Default value: half of the main axis height of the panel<br>**NOTE**<br>This attribute cannot be set in percentage.|
| miniHeight | string \| number | Panel height in the **PanelMode.Mini** mode.<br>Default value: **48**<br>Unit: vp<br>**NOTE**<br>This attribute cannot be set in percentage.|
| show | boolean | Whether to show the panel.|
| backgroundMask<sup>9+</sup>|[ResourceColor](ts-types.md#resourcecolor)|Background mask of the panel.|
......@@ -52,9 +57,10 @@ Panel(show: boolean)
| Half | Displays a **foldable** or **temporary** panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for **minibar** panels.|
| Full | Displays a panel in a large (fullscreen-like) area.|
## Events
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name| Description|
| -------- | -------- |
| onChange(event: (width: number, height: number, mode: PanelMode) =&gt; void) | Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of **dragBar** is **true**, the panel height is the sum of the drag bar height and content area height.|
......
en/application-dev/reference/arkui-ts/ts-container-refresh.md
浏览文件 @ 846edb1b
......@@ -18,32 +18,36 @@ Refresh\(value: \{ refreshing: boolean, offset?: number | string , friction?: n
**Parameters**
| Name| Value Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| refreshing | boolean | Yes| Whether the current component is being refreshed.<br>This parameter supports [$$](../../quick-start/arkts-restrictions-and-extensions.md#two-way-binding-of-variables) for two-way binding of variables.|
| offset | string \| number | No| Distance from the pull-down starting point to the top of the component.<br>Default value: **16**, in vp<br>**NOTE**<br>The value cannot be a percentage or a negative number.|
| friction | number \| string | No| Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.<br>Default value: **62**<br>- **0** indicates that the **\<Refresh>** component is not sensitive to the pull-down gesture.<br>- **100** indicates that the **\<Refresh>** component is highly sensitive to the pull-down gesture.<br>- A larger value indicates a more sensitive response of the **\<Refresh>** component to the pull-down gesture.|
| builder | [CustomBuilder](ts-types.md#custombuilder8)<sup>10+</sup> | No| Component with the custom refresh style set for the pull-down gesture.|
| Name | Value Type | Mandatory | Description |
| ---------- | ---------------------------------------- | ---- | ---------------------------------------- |
| refreshing | boolean | Yes | Whether the current component is being refreshed.<br>This parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
| offset | string \| number | No | Distance from the pull-down starting point to the top of the component.<br>Default value: **16**, in vp<br>**NOTE**<br>The value cannot be a percentage or a negative number.|
| friction | number \| string | No | Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.<br>Default value: **62**<br>- **0** indicates that the **\<Refresh>** component is not sensitive to the pull-down gesture.<br>- **100** indicates that the **\<Refresh>** component is highly sensitive to the pull-down gesture.<br>- A larger value indicates a more sensitive response of the **\<Refresh>** component to the pull-down gesture.|
| builder | [CustomBuilder](ts-types.md#custombuilder8)<sup>10+</sup> | No | Component with the custom refresh style set for the pull-down gesture. |
## Attributes
The [universal attributes](ts-universal-attributes-size.md) are supported.
## Events
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name| Description|
| -------- | -------- |
| Name | Description |
| ---------------------------------------- | -------------------------------------- |
| onStateChange(callback: (state: [RefreshStatus](#refreshstatus)) => void)| Triggered when the refresh status changes.<br>- **state**: refresh status.|
| onRefreshing(callback: () => void)| Triggered when the component enters the refresh state.|
| onRefreshing(callback: () => void) | Triggered when the component enters the refresh state. |
## RefreshStatus
| Name| Description|
| -------- | -------- |
| Inactive | The component is not pulled down. This is the default value.|
| Drag | The component is being pulled down, but the pulled distance is shorter than the minimum length required to trigger the refresh.|
| OverDrag | The component is being pulled down, and the pulled distance exceeds the minimum length required to trigger the refresh.|
| Refresh | The pull-down ends, and the component rebounds to the minimum length required to trigger the refresh and enters the refresh state.|
| Done | The refresh is complete, and the component returns to the initial state (top).|
| Name | Description |
| -------- | -------------------- |
| Inactive | The component is not pulled down. This is the default value. |
| Drag | The component is being pulled down, but the pulled distance is shorter than the minimum length required to trigger the refresh. |
| OverDrag | The component is being pulled down, and the pulled distance exceeds the minimum length required to trigger the refresh. |
| Refresh | The pull-down ends, and the component rebounds to the minimum length required to trigger the refresh and enters the refresh state.|
| Done | The refresh is complete, and the component returns to the initial state (top). |
## Example
......
en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
浏览文件 @ 846edb1b
......@@ -11,6 +11,12 @@ The **\<SideBarContainer>** component contains a sidebar and content area as its
Supported
> **NOTE**
>
> - Built-in components and custom components are allowed, without support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control.
> - This component must contain two child components.
> - If there are three or more child components, only the first and second child components are displayed. If there is only one child component, the sidebar is displayed, and the content area is blank.
## APIs
......@@ -31,27 +37,29 @@ SideBarContainer( type?: SideBarContainerType )
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Description|
| -------- | -------- | -------- |
| showSideBar | boolean | Whether to display the sidebar.<br>Default value: **true**|
| controlButton | ButtonStyle | Attributes of the sidebar control button.|
| showSideBar | boolean | Whether to display the sidebar.<br>Default value: **true**<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
| controlButton | [ButtonStyle](#buttonstyle) | Attributes of the sidebar control button.|
| showControlButton | boolean | Whether to display the sidebar control button.<br>Default value: **true**|
| sideBarWidth | number \| Length<sup>9+</sup> | Width of the sidebar.<br>Default value: **200**, in vp|
| minSideBarWidth | number \| Length<sup>9+</sup> | Minimum width of the sidebar.<br>Default value: **200**, in vp|
| maxSideBarWidth | number \| Length<sup>9+</sup> | Maximum width of the sidebar.<br>Default value: **280**, in vp|
| autoHide<sup>9+</sup> | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.<br>Default value: **true**|
| sideBarPosition<sup>9+</sup> | SideBarPosition | Position of the sidebar.<br>Default value: **SideBarPosition.Start**|
| sideBarWidth | number \| [Length](ts-types.md#length)<sup>9+</sup> | Width of the sidebar.<br>Default value: **200**<br>Unit: vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value must comply with the width constraints. If it is not within the valid range, the value closest to the set one is used.<br>When set, the width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the width of the sidebar child component takes precedence.|
| minSideBarWidth | number \| [Length](ts-types.md#length)<sup>9+</sup> | Minimum width of the sidebar.<br>Default value: **200**, in vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.<br>When set, the minimum width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the minimum width of the sidebar child component takes precedence.|
| maxSideBarWidth | number \| [Length](ts-types.md#length)<sup>9+</sup> | Maximum width of the sidebar.<br>Default value: **280**, in vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.<br>When set, the maximum width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the maximum width of the sidebar child component takes precedence.|
| autoHide<sup>9+</sup> | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.<br>Default value: **true**<br>**NOTE**<br>The value is subject to the **minSideBarWidth** attribute method. If it is not set in **minSideBarWidth**, the default value is used.<br>Whether the sidebar should be hidden is determined when it is being dragged. When its width is less than the minimum width, the damping effect is required to trigger hiding (a distance out of range).|
| sideBarPosition<sup>9+</sup> | [SideBarPosition](#sidebarposition9) | Position of the sidebar.<br>Default value: **SideBarPosition.Start**|
| divider<sup>10+</sup> | [DividerStyle](#dividerstyle10) \| null | Divider style.<br>- **DividerStyle** (default): The divider is displayed.<br>- **null**: The divider is not displayed.|
## ButtonStyle
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| left | number | No| Spacing between the sidebar control button and the left of the container.<br>Default value: **16**, in vp|
| top | number | No| Spacing between the sidebar control button and the top of the container.<br>Default value: **48**, in vp|
| width | number | No| Width of the sidebar control button.<br>Default value: **32**, in vp|
| height | number | No| Height of the sidebar control button.<br>Default value: **32**, in vp|
| icons | {<br>shown: string \| PixelMap \| [Resource](ts-types.md) ,<br>hidden: string \| PixelMap \| [Resource](ts-types.md) ,<br>switching?: string \| PixelMap \| [Resource](ts-types.md) <br>} | No| Icons of the sidebar control button.<br> </p> - **shown**: icon of the control button when the sidebar is shown.<br>- **hidden**: icon of the control button when the sidebar is hidden.<br>- **switching**: icon of the control button when the sidebar is switching between the shown and hidden states.|
| left | number | No| Spacing between the sidebar control button and the left of the container.<br>Default value: **16**<br>Unit: vp|
| top | number | No| Spacing between the sidebar control button and the top of the container.<br>Default value: **48**<br>Unit: vp|
| width | number | No| Width of the sidebar control button.<br>Default value: **32**<br>Unit: vp|
| height | number | No| Height of the sidebar control button.<br>Default value: **32**<br>Unit: vp|
| icons | {<br>shown: string \| PixelMap \| [Resource](ts-types.md) ,<br>hidden: string \| PixelMap \| [Resource](ts-types.md) ,<br>switching?: string \| PixelMap \| [Resource](ts-types.md) <br>} | No| Icons of the sidebar control button.<br> </p> - **shown**: icon of the control button when the sidebar is shown.<br>**NOTE**<br>When an error occurs during resource obtaining, the default icon is used.<br>- **hidden**: icon of the control button when the sidebar is hidden.<br>- **switching**: icon of the control button when the sidebar is switching between the shown and hidden states.|
## SideBarPosition<sup>9+</sup>
......@@ -64,16 +72,29 @@ SideBarContainer( type?: SideBarContainerType )
| Name | Type | Mandatory| Description |
| ----------- | ------------- | ---- | ---------------------------------------- |
| strokeWidth | [Length](ts-types.md#length) | Yes | Stroke width of the divider.<br>Default value: **1**, in vp |
| strokeWidth | [Length](ts-types.md#length) | Yes | Stroke width of the divider.<br>Default value: **1**<br>Unit: vp|
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the divider.<br>Default value: **#000000, 3%** |
| startMargin | [Length](ts-types.md#length) | No | Distance between the divider and the top of the sidebar.<br>Default value: **0**|
| endMargin | [Length](ts-types.md#length) | No | Distance between the divider and the bottom of the sidebar.<br>Default value: **0**|
> **NOTE**
>
> When the universal attributes [width and height](ts-universal-attributes-size.md) are set for the sidebar, the **width** setting takes effect only when the sidebar container width is not set, and the **height** settings does not take effect.
> The settings of the universal attributes **width** and **height** do not take effect for the sidebar content area. By default, sidebar content area takes up the remaining space of the sidebar container.
>
> If the attribute method is not used, the sidebar is displayed depending on the size.
>
> - If the size is less than 520 vp, the sidebar is not displayed by default.
> - If the size is greater than or equal to 520 vp, the sidebar is displayed by default.
> -
> -
## Events
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name| Description|
| -------- | -------- |
| onChange(callback: (value: boolean) =&gt; void) | Triggered when the status of the sidebar switches between shown and hidden. <p>The value **true** means that the sidebar is shown, and **false** means the opposite.|
| onChange(callback: (value: boolean) =&gt; void) | Triggered when the status of the sidebar switches between shown and hidden. The value **true** means that the sidebar is displayed, and **false** means the opposite.<br>This event is triggered when any of the following conditions is met:<br>1. The value of **showSideBar** changes.<br>2. The **showSideBar** attribute adapts to behavior changes.<br>3. The **autoHide** API is triggered when the divider is dragged.|
## Example
......@@ -83,14 +104,13 @@ SideBarContainer( type?: SideBarContainerType )
@Entry
@Component
struct SideBarContainerExample {
normalIcon : Resource = $r("app.media.icon")
normalIcon: Resource = $r("app.media.icon")
selectedIcon: Resource = $r("app.media.icon")
@State arr: number[] = [1, 2, 3]
@State current: number = 1
build() {
SideBarContainer(SideBarContainerType.Embed)
{
SideBarContainer(SideBarContainerType.Embed) {
Column() {
ForEach(this.arr, (item, index) => {
Column({ space: 5 }) {
......@@ -115,6 +135,13 @@ struct SideBarContainerExample {
}
.margin({ top: 50, left: 20, right: 30 })
}
.controlButton({
icons: {
hidden: $r('app.media.drawer'),
shown: $r('app.media.drawer'),
switching: $r('app.media.drawer')
}
})
.sideBarWidth(150)
.minSideBarWidth(50)
.maxSideBarWidth(300)
......
en/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ 846edb1b
......@@ -11,6 +11,10 @@
This component can contain child components.
> **NOTE**
>
> Built-in components and custom components are allowed, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control.
## APIs
......@@ -29,21 +33,23 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description |
| --------------------------- | ---------------------------------------- | ---------------------------------------- |
| index | number | Index of the child component currently displayed in the container.<br>Default value: **0** |
| autoPlay | boolean | Whether to enable automatic playback for child component switching.<br>Default value: **false** |
| index | number | Index of the child component currently displayed in the container.<br>Default value: **0**<br>**NOTE**<br>If the value is less than 0 or greater than or equal to the number of child components, the default value **0** is used.<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
| autoPlay | boolean | Whether to enable automatic playback for child component switching.<br>Default value: **false**<br>**NOTE**<br>If **loop** is set to **false**, the playback stops when the last page is displayed. The playback continues when the page is not the last page after a swipe gesture.|
| interval | number | Interval for automatic playback, in ms.<br>Default value: **3000** |
| indicator | boolean | Whether to enable the navigation dots indicator.<br>Default value: **true** |
| indicator<sup>10+</sup> | [DotIndicator](#dotindicator) \| [DigitIndicator](#digitindicator) \| boolean | Style of the navigation point indicator.<br> \- **DotIndicator**: dot style.<br> \- **DigitIndicator**: digit style.<br> \- **boolean**: whether to enable the navigation point indicator.<br> Default value: **true**<br> Default type: **DotIndicator**|
| loop | boolean | Whether to enable loop playback.<br>The value **true** means to enable loop playback. When LazyForEach is used, it is recommended that the number of the components to load exceed 5.<br>Default value: **true**|
| duration | number | Duration of the animation for switching child components, in ms.<br>Default value: **400** |
| vertical | boolean | Whether vertical swiping is used.<br>Default value: **false** |
| itemSpace | number \| string | Space between child components.<br>Default value: **0** |
| itemSpace | number \| string | Space between child components.<br>Default value: **0**<br>**NOTE**<br>This parameter cannot be set in percentage.|
| displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**|
| cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1** |
| cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1**<br>**NOTE**<br>**cachedCount** has caching optimized. You are advised not to use it together with [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md).|
| disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.<br>Default value: **Curve.Ease**|
| indicatorStyle<sup>8+</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation dots indicator.<br>\- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation dots indicator.<br>\- **mask**: whether to enable the mask for the navigation dots indicator.<br>\- **color**: color of the navigation dots indicator.<br>\- **selectedColor**: color of the selected navigation dot.|
| displayCount<sup>8+</sup> | number\|string | Number of elements to display per page.<br>Default value: **1** |
| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
| indicatorStyle<sup>8+</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation point indicator.<br>\- **left**: distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation point indicator.<br>\- **mask**: whether to enable the mask for the navigation point indicator.<br>\- **color**: color of the navigation point indicator.<br>\- **selectedColor**: color of the selected navigation dot.|
| displayCount<sup>8+</sup> | number \| string | Number of elements to display per page.<br>Default value: **1**<br>**NOTE**<br>If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.<br>If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount – 1)] is evenly distributed among them on the main axis.|
| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**<br>**NOTE**<br>The spring effect does not take effect when the controller API is called.|
| nextMargin<sup>10+</sup> | <br>[Length](ts-types.md#length)<br>| Next margin, used to reveal a small part of the next item.<br>Default value: **0**<br>**NOTE**<br>This parameter is valid only when **SwiperDisplayMode** is set to **STRETCH**. If **cachedCount** is set to a value less than or equal to 0, a small part of the next item is displayed, but child components cannot be loaded. |
| prevMargin<sup>10+</sup> | <br>[Length](ts-types.md#length)<br>| Previous margin, used to reveal a small part of the previous item.<br>Default value: **0**<br>**NOTE**<br>This parameter is valid only when **SwiperDisplayMode** is set to **STRETCH**. If **cachedCount** is set to a value less than or equal to 0, a small part of the previous item is displayed, but child components cannot be loaded. |
## SwiperDisplayMode
......@@ -60,13 +66,13 @@ Controller of the **\<Swiper>** component. You can bind this object to the **\<S
showNext(): void
Turns to the next page.
Turns to the next page. Page turning occurs with the animation, whose duration is specified by **duration**.
### showPrevious
showPrevious(): void
Turns to the previous page.
Turns to the previous page. Page turning occurs with the animation, whose duration is specified by **duration**.
### finishAnimation
......@@ -76,28 +82,55 @@ Stops an animation.
**Parameters**
| Name | Type | Mandatory | Description|
| Name | Type | Mandatory.| Description|
| --------- | ---------- | ------ | -------- |
| callback | () => void | No | Callback invoked when the animation stops.|
## Events
## Indicator<sup>10+</sup>
### onChange
Sets the distance between the navigation point indicator and the **\<Swiper>** component.
onChange(event: (index: number) => void)
| Name| Type| Mandatory.| Description |
| ------ | -------- | ------ | ------------------------------------ |
| left | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the left edge of the **\<Swiper>** component.|
| top | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the top edge of the **\<Swiper>** component.|
| right | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the right edge of the **\<Swiper>** component.|
| bottom | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.|
Triggered when the index of the currently displayed child component changes.
### DotIndicator
> **NOTE**
>
> When the **\<Swiper>** component is used together with **LazyForEach**, the subpage UI cannot be refreshed in the **onChange** event.
Defines the navigation point indicator of the dot style, which inherits attributes and features from **Indicator**.
| Name | Type | Mandatory.| Description |
| ------------------ | ------------- | ------ | ------------------------------------------------------ |
| itemWidth | [Length](ts-types.md#length) | No | Width of the navigation point indicator of the dot style.<br>Default value: **6**<br>Unit: vp|
| itemHeight | [Length](ts-types.md#length) | No | Height of the navigation point indicator of the dot style.<br>Default value: **6**<br>Unit: vp|
| selectedItemWidth | [Length](ts-types.md#length) | No | Width of the selected indicator dot.<br>Default value: **6**<br>Unit: vp|
| selectedItemHeight | [Length](ts-types.md#length) | No | Height of the selected indicator dot.<br>Default value: **6**<br>Unit: vp|
| mask | boolean | No | Whether to enable the mask for the navigation point indicator of the dot style.<br>Default value: **false**|
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the navigation point indicator of the dot style.<br>Default value: **'\#007DFF'**|
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the selected indicator dot.<br>Default value: **'\#182431'** (10% opacity)|
**Return value**
### DigitIndicator
Defines the navigation point indicator of the digit style, which inherits attributes and features from **Indicator**.
| Name | Type | Mandatory.| Description |
| ----------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the navigation point indicator of the digit style.<br>Default value: **'\#ff182431'**|
| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the selected indicator digit.<br>Default value: **'\#ff182431'**|
| digitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No | Font style of the navigation point indicator of the digit style.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.|
| selectedDigitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No | Font style of the selected indicator digit.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.|
## Events
| Name | Type | Description|
| --------- | ---------- | -------- |
| index | number | Index of the currently displayed element.|
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onChange(event: (index: number) => void) | Triggered when the index of the currently displayed child component changes.<br>- **index**: index of the currently displayed element.<br>**NOTE**<br>When the **\<Swiper>** component is used together with **LazyForEach**, the subpage UI update cannot be triggered in the **onChange** event.|
| onAnimationStart<sup>9+</sup>(event: (index: number) => void) | Triggered when the switching animation starts.<br>- **index**: index of the currently displayed element.<br>**NOTE**<br>The **index** parameter indicates the index before the animation starts (not the one after). When the **\<Swiper>** component contains multiple columns, the index is of the leftmost element.|
| onAnimationEnd<sup>9+</sup>(event: (index: number) => void) | Triggered when the switching animation ends.<br>- **index**: index of the currently displayed element.<br>**NOTE**<br>This event is triggered when the animation ends regardless of whether it is due to a user gesture or invocation of **finishAnimation** through **SwiperController**. The **index** parameter indicates the index after the animation ends. When the **\<Swiper>** component contains multiple columns, the index is of the leftmost element.|
## Example
......
en/application-dev/reference/arkui-ts/ts-container-tabcontent.md
浏览文件 @ 846edb1b
......@@ -13,7 +13,7 @@ This component supports only one child component.
> **NOTE**
>
> System components and custom components can be built in, and rendering control types ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) are supported.
> Built-in components and custom components are allowed, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control.
## APIs
......@@ -28,7 +28,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description|
| -------- | -------- | -------- |
| tabBar | string \| Resource \| {<br>icon?: string \| Resource,<br>text?: string \| Resource<br>}<br>\| [CustomBuilder](ts-types.md)<sup>8+</sup> | Content displayed on the tab bar.<br>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).<br>**NOTE**<br>If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.<br>If the content set exceeds the space provided by the tab bar, it will be clipped.|
| tabBar<sup>9+</sup> | [SubTabBarStyle](#subtabbarstyle9) \| [BottomTabBarStyle](#bottomtabbarstyle9) | Content displayed on the tab bar.<br>**SubTabBarStyle**: subtab style. It takes text as its input parameter.<br>**BottomTabBarStyle**: bottom and side tab style. It takes text and images as its input parameters.<br>**NOTE**<br>The bottom tab style does not include an underline.<br>When an icon display error occurs, a gray blank block is displayed.|
| tabBar<sup>9+</sup> | [SubTabBarStyle](#subtabbarstyle) \| [BottomTabBarStyle](#bottomtabbarstyle) | Content displayed on the tab bar.<br>**SubTabBarStyle**: subtab style. It takes text as its input parameter.<br>**BottomTabBarStyle**: bottom and side tab style. It takes text and images as its input parameters.<br>**NOTE**<br>The bottom tab style does not include an underline.<br>When an icon display error occurs, a gray blank block is displayed.|
> **NOTE**
>
......
en/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @ 846edb1b
......@@ -18,11 +18,11 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
**Parameters**
| Name | Type | Mandatory | Description |
| ----------- | --------------------------------- | ---- | ---------------------------------------- |
| barPosition | BarPosition | No | Position of the **\<Tabs>** component.<br>Default value: **BarPosition.Start** |
| index | number | No | Initial tab index.<br>Default value: **0**<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value ranges from 0 to the number of **\<TabContent>** subnodes minus 1.<br>When this parameter is set to different values, the slide animation for tab switching is enabled by default. To disable the animation, set **animationDuration** to **0**. |
| controller | [TabsController](#tabscontroller) | No | Tab controller. |
| Name | Type | Mandatory| Description |
| ----------- | --------------------------------- | ---- | ------------------------------------------------------------ |
| barPosition | BarPosition | No | Position of the **\<Tabs>** component.<br>Default value: **BarPosition.Start** |
| index | number | No | Initial tab index.<br>Default value: **0**<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value ranges from 0 to the number of **\<TabContent>** subnodes minus 1.<br>When this parameter is set to different values, the slide animation for tab switching is enabled by default. To disable the animation, set **animationDuration** to **0**.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
| controller | [TabsController](#tabscontroller) | No | Tab controller. |
## BarPosition
......@@ -42,7 +42,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| scrollable | boolean | Whether the tabs are scrollable. The value **true** means that the tabs are scrollable, and **false** means the opposite.<br>Default value: **true**|
| barMode | BarMode | Tab bar layout mode. For details, see **BarMode**.<br>Default value: **BarMode.Fixed**|
| barWidth | number \| Length<sup>8+</sup> | Width of the tab bar.<br>**NOTE**<br><br>A value less than 0 or greater than the width of the **\<Tabs>** component evaluates to the default value.|
| barHeight | number \| Length<sup>8+</sup> | Height of the tab bar.<br>**NOTE**<br><br>A value less than 0 or greater than the width of the **\<Tabs>** component evaluates to the default value.|
| barHeight | number \| Length<sup>8+</sup> | Height of the tab bar.<br>**NOTE**<br>A value less than 0 or greater than the width of the **\<Tabs>** component evaluates to the default value. |
| animationDuration | number | Duration of the slide animation for tab switching. If this parameter is set, the tab switching animation is played when the user switches between tabs by sliding or clicking. If this parameter is not set, the tab switching animation is played only when the user switches between tabs by sliding.<br>Default value: **300**<br>**NOTE**<br>A value less than 0 or in percentage evaluates to the default value.|
| divider<sup>10+</sup> | [DividerStyle](#dividerstyle10) \| null | Whether the divider is displayed for the **\<TabBar>** and **\<TabContent>** components and the divider style. By default, the divider is not displayed.<br> **DividerStyle**: divider style.<br> **null**: The divider is not displayed.|
| fadingEdge<sup>10+</sup> | boolean | Whether the tab fades out when it exceeds the container width.<br>Default value: **true** |
......@@ -158,4 +158,3 @@ struct TabsExample {
```
![tabs2](figures/tabs2.gif)
<!--no_check-->
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
浏览文件 @ 846edb1b
......@@ -16,19 +16,19 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
**Parameters**
| Name | Type | Mandatory | Description |
| ---------------------- | ---------------------------------------- | ------------------------- | ---------------------- |
| builder | [CustomDialog](../../quick-start/arkts-dynamic-ui-elememt-building.md#customdialog) | Yes | Constructor of the custom dialog box content. |
| cancel | () =&gt; void | No | Callback invoked when the dialog box is closed after the overlay exits. |
| autoCancel | boolean | No | Whether to allow users to click the overlay to exit.<br>Default value: **true** |
| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default** |
| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.|
| customStyle | boolean | No | Whether to use a custom style for the dialog box.<br>Default value: **false**, which means that the dialog box automatically adapts its width to the grid system and its height to the child components; the maximum height is 90% of the container height; the rounded corner is 24 vp. |
| gridCount<sup>8+</sup> | number | No | Number of [grid columns](../../ui/ui-ts-layout-grid-container-new.md) occupied by the dialog box.<br>The default value is 4, and the maximum value is the maximum number of columns supported by the system. If this parameter is set to an invalid value, the default value is used.|
| maskColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Custom mask color.<br>Default value: **0x33000000** |
| openAnimation<sup>10+</sup> | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the open animation of the dialog box.<br>**NOTE**<br>If **iterations** is set to an odd number and **playMode** is set to **Reverse**, the dialog box will not be displayed when the animation ends. |
| closeAniamtion<sup>10+</sup>| [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the close animation of the dialog box. |
| showInSubWindow<sup>10+</sup>| boolean | No | Whether to display a dialog box in a subwindow.<br>Default value: **false**, indicating that the dialog box is not displayed in the subwindow<br>**NOTE**<br>A dialog box whose **showInSubWindow** attribute is **true** cannot trigger the display of another dialog box whose **showInSubWindow** attribute is also **true**. |
| Name | Type | Mandatory | Description |
| ----------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| builder | CustomDialog | Yes | Constructor of the custom dialog box content. |
| cancel | () =&gt; void | No | Callback invoked when the dialog box is closed after the overlay exits. |
| autoCancel | boolean | No | Whether to allow users to click the overlay to exit.<br>Default value: **true** |
| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**|
| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position. |
| customStyle | boolean | No | Whether to use a custom style for the dialog box.<br>Default value: **false**, which means that the dialog box automatically adapts its width to the grid system and its height to the child components; the maximum height is 90% of the container height; the rounded corner is 24 vp.|
| gridCount<sup>8+</sup> | number | No | Number of [grid columns](../../ui/arkts-layout-development-grid-layout.md) occupied by the dialog box.<br>The default value is 4, and the maximum value is the maximum number of columns supported by the system. If this parameter is set to an invalid value, the default value is used.|
| maskColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Custom mask color.<br>Default value: **0x33000000** |
| openAnimation<sup>10+</sup> | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the open animation of the dialog box.<br>**NOTE**<br>If **iterations** is set to an odd number and **playMode** is set to **Reverse**, the dialog box will not be displayed when the animation ends.|
| closeAniamtion<sup>10+</sup> | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the close animation of the dialog box. |
| showInSubWindow<sup>10+</sup> | boolean | No | Whether to display a dialog box in a subwindow.<br>Default value: **false**, indicating that the dialog box is not displayed in the subwindow<br>**NOTE**<br>A dialog box whose **showInSubWindow** attribute is **true** cannot trigger the display of another dialog box whose **showInSubWindow** attribute is also **true**.|
## CustomDialogController
......@@ -38,7 +38,7 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean})
```
> **NOTE**
>
>
> **CustomDialogController** is valid only when it is a member variable of the **@CustomDialog** and **@Component** decorated struct and is defined in the **@Component** decorated struct. For details, see the following example.
### open()
......
en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ 846edb1b
......@@ -2215,7 +2215,7 @@ Since API version 9, this API is supported in ArkTS widgets.
**Parameters**
| Parameters | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| ---- | ------ | ---- | ---- | ------------- |
| sw | number | Yes | 0 | Width of the **ImageData** object.|
| sh | number | Yes | 0 | Height of the **ImageData** object.|
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @ 846edb1b
......@@ -10,45 +10,46 @@ You can bind a popup to a component, specifying its content, interaction logic,
## APIs
| Name | Type | Description |
| ---------- | ------------------------------------- | --------------------------------------- |
| bindPopup | show: boolean,<br>popup: [PopupOptions](#popupoptions) \| [CustomPopupOptions](#custompopupoptions8)<sup>8+</sup> | Binds a popup to the component.<br>**show**: whether to show the popup. The default value is **false**, indicating that the popup is hidden.<br>**popup**: parameters of the popup.|
| Name | Type | Description |
| --------- | ---------------------------------------- | ---------------------------------------- |
| bindPopup | show: boolean,<br>popup: [PopupOptions](#popupoptions) \| [CustomPopupOptions](#custompopupoptions8)<sup>8+</sup> | Binds a popup to the component.<br>**show**: whether to show the popup. The default value is **false**, indicating that the popup is hidden.<br>**popup**: parameters of the popup.|
## PopupOptions
| Name | Type | Mandatory | Description |
| -------------------------| ------------------------------------------------| -----| ----------------------------------------- |
| message | string | Yes | Content of the popup message. |
| placementOnTop | boolean | No | Whether to display the popup above the component.<br/>Default value: **false** |
| primaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No | Primary button.<br>**value**: text of the primary button in the popup.<br>**action**: callback for clicking the primary button.|
| secondaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No | Secondary button.<br>**value**: text of the secondary button in the popup.<br>**action**: callback for clicking the secondary button.|
| 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. |
| showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow. <br/>Default value: **false** |
| 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.|
| 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.|
| Name | Type | Mandatory| Description |
| ------------------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| message | string | Yes | Content of the popup message. |
| placementOnTop<sup>(deprecated)</sup> | boolean | No | Whether to display the popup above the component.<br/>Default value: **false**<br>**NOTE**<br>This API is deprecated since API version 10. You are advised to use **placement** instead. |
| primaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No | Primary button.<br>**value**: text of the primary button in the popup.<br>**action**: callback for clicking the primary button.|
| secondaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No | Secondary button.<br>**value**: text of the secondary button in the popup.<br>**action**: callback for clicking the secondary button.|
| 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. |
| showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow.<br/>Default value: **false** |
| 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.|
| 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. |
| 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.|
## PopupMessageOptions<sup>10+</sup>
| Name | Type | Mandatory| Description |
| --------- | ------------------------------------------ | ---- | ---------------------- |
| textColor | [ResourceColor](ts-types.md#resourcecolor) | No | Text color of the popup message.|
| font | [Font](ts-types.md#Font) | No | Font attributes of the popup message.|
| Name | Type | Mandatory | Description |
| --------- | ---------------------------------------- | ---- | ----------- |
| textColor | [ResourceColor](ts-types.md#resourcecolor) | No | Text color of the popup message.|
| font | [Font](ts-types.md#Font) | No | Font attributes of the popup message.|
## CustomPopupOptions<sup>8+</sup>
| Name | Type | Mandatory | Description |
| -------------------------| ------------------------- | ---- | ---------------------------------------------------- |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Popup builder. |
| 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. |
| 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**|
| autoCancel | boolean | No | Whether to automatically close the popup when an operation is performed on the page.<br>Default value: **true** |
| 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. |
| showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow.<br/>Default value: **false** |
| 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.|
| Name | Type | Mandatory | Description |
| ---------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Popup builder. |
| 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. |
| 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**|
| autoCancel | boolean | No | Whether to automatically close the popup when an operation is performed on the page.<br>Default value: **true** |
| 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. |
| showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow. The default value is **false**. |
| 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. |
## Example
```ts
......@@ -111,7 +112,7 @@ struct PopupExample {
.bindPopup(this.customPopup, {
builder: this.popupBuilder,
placement: Placement.Top,
mask: {color: 0x33000000},
maskColor: '0x33000000',
popupColor: Color.Yellow,
enableArrow: true,
showInSubWindow: false,
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-text-style.md
浏览文件 @ 846edb1b
......@@ -2,7 +2,7 @@
Universal text attributes include text style attributes applicable to text containers.
> **NOTE**
> **NOTE**
>
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
浏览文件 @ 846edb1b
......@@ -10,7 +10,7 @@ The visibility attribute controls whether a component is visible.
| Name | Type | Description |
| ---------- | ---------------------------- | ------------------------------------------ |
| visibility | [Visibility](ts-appendix-enums.md#visibility) | Whether the component is visible. Note that even if a component is invisible, it still needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../quick-start/arkts-rendering-control.md#conditional-rendering) instead under scenarios where consistently high performance is required.<br>Default value: **Visibility.Visible**<br>Since API version 9, this API is supported in ArkTS widgets.|
| visibility | [Visibility](ts-appendix-enums.md#visibility) | Whether the component is visible. Note that even if a component is invisible, it still needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../quick-start/arkts-rendering-control-ifelse.md) instead under scenarios where consistently high performance is required.<br>Default value: **Visibility.Visible**<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example
......@@ -23,11 +23,11 @@ struct VisibilityExample {
build() {
Column() {
Column() {
// The component is hidden, and no placeholder is used.
// The component is hidden and does not take up space in the layout.
Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)
// The component is hidden, and a placeholder is used for it in the layout.
// The component is hidden but takes up space in the layout.
Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)
......
en/application-dev/reference/arkui-ts/ts-universal-events-keyboardshortcut.md 0 → 100644
浏览文件 @ 846edb1b
# Custom Keyboard Shortcuts
You can set one or more custom keyboard shortcuts for a component. The behavior of these keyboard shortcuts is the same as that of clicks. Components can respond to custom keyboard shortcuts even when they are not focused.
> **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.
## APIs
keyboardShortcut(value: string | [FunctionKey], keys: Array<[ModifierKey]>)
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------- | ---- | ------------------------------------------------------------ |
| value | string \| [FunctionKey](#functionkey) | Yes | Character key (which can be entered through the keyboard) or [function key](#functionkey).<br>|
| keys | Array<[ModifierKey](#modifierkey)> | Yes | Modifier keys.<br> |
## ModifierKey
| Name | Description |
| ----- | ------------------- |
| CTRL | Ctrl key on the keyboard. |
| SHIFT | Shift key on the keyboard.|
| ALT | Alt key on the keyboard. |
## FunctionKey
| Name| Description |
| ---- | --------------------- |
| ESC | Esc key on the keyboard.|
| F1 | F1 key on the keyboard. |
| F2 | F2 key on the keyboard. |
| F3 | F3 key on the keyboard. |
| F4 | F4 key on the keyboard. |
| F5 | F5 key on the keyboard. |
| F6 | F6 key on the keyboard. |
| F7 | F7 key on the keyboard. |
| F8 | F8 key on the keyboard. |
| F9 | F9 key on the keyboard. |
| F10 | F10 key on the keyboard.|
| F11 | F11 key on the keyboard.|
| F12 | F12 key on the keyboard.|
## Precautions for Using Keyboard Shortcuts
| Scenario | Processing Logic | Example |
| ------------------------------------------------------------ | -------------------------------------------------------- | ------------------------------------------------------------ |
| All components that support the **onClick** event | Custom keyboard shortcuts are supported. | – |
| Requirements for custom keyboard shortcuts | A custom keyboard shortcut consists of one or more modifier keys (**Ctrl**, **Shift**, **Alt**, or any combination thereof) and a character key or function key.| Button('button1').keyboardShortcut('a',[ModifierKey.CTRL]) |
| Setting one custom keyboard shortcut for multiple components | Only the first component in the component tree responds to the custom keyboard shortcut. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('a',[ModifierKey.CTRL]) |
| When the component is focused or not | The component responds to the custom keyboard shortcut as long as the window is focused. | – |
| When a single keyboard shortcut is set, it can be canceled by setting the **value**, **keys**, or both of them to null in the **keyboardShortcut** API.<br>When multiple keyboard shortcuts are set, they cannot be canceled.| Canceling the custom keyboard shortcut settings | Button('button1').keyboardShortcut('',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('a',[l])<br>Button('button3').keyboardShortcut('',[]) |
| The independent pipeline sub-window and main window coexist | The focused window responds to the keyboard shortcut. | – |
| Ctrl, Shift, or Alt key in the **keys** parameter of the **keyboardShortcut** API | Both the keys on the left or right sides of the keyboard work. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL, ModifierKey.ALT]) |
| Character key in the **value** parameter of the **keyboardShortcut** API | The response is case-insensitive. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('A',[ModifierKey.CTRL]) |
| Response to keyboard shortcuts | The component responds continuously to the keyboard shortcut when all the set keys are pressed. | – |
| Hidden component<br> | The keyboard shortcut also works. | – |
| Components in the disable state | The keyboard shortcut does not work. | – |
| 1. The keyboard shortcut is the same as an existing one (including the system-defined ones).<br>2. The **value** parameter contains multiple character keys.<br>3. The **key** parameter has a duplicate modifier key.| In these cases, the keyboard shortcut is not added, and the previously added keyboard shortcuts still work. | Button('button1').keyboardShortcut('c',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('ab',[ModifierKey.CTRL])<br>Button('button3').keyboardShortcut('ab',[ModifierKey.CTRL,ModifierKey.CTRL]) |
## System-defined Keyboard Shortcuts
| Keyboard Shortcut | Component |
| -------------- | ------------------------------------------------------------ |
| Ctrl + C | [Image](ts-basic-components-image.md), [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Ctrl+ A | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Ctrl+ V | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Ctrl+ X | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Shift + arrow keys| [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Ctrl+ Shift+ Z | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Ctrl+ Z | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Ctrl+ Y | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Arrow keys and Enter key| [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Tab key | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
## Example
Set a keyboard shortcut. You can then press the modifier key and accompanying key at the same time to trigger the component to respond to the shortcut and trigger the **onClick** event or other custom event.
```ts
// xxx.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
Button("Test short cut 1").onClick((event) => {
this.message = "I clicked Button 1";
console.log("I clicked 1");
}).keyboardShortcut('.', [ModifierKey.SHIFT, ModifierKey.CTRL, ModifierKey.ALT])
.onKeyEvent((event)=>{
console.log("event.keyCode: " + JSON.stringify(event));
})
Button("Test short cut 2").onClick((event) => {
this.message = "I clicked Button 2";
console.log("I clicked 2");
}).keyboardShortcut('1', [ModifierKey.CTRL])
Button("Test short cut 3").onClick((event) => {
this.message = "I clicked Button 3";
console.log("I clicked 3");
}).keyboardShortcut('A', [ModifierKey.SHIFT])
Button("Test short cut 4").onClick((event) => {
this.message = "I clicked Button 4";
console.log("I clicked 4");
}).keyboardShortcut(FunctionKey.F5, [], () => {
this.message = "I clicked Button 4";
console.log("I clicked user callback.");
}).keyboardShortcut(FunctionKey.F3, [])
}
.width('100%')
}
.height('100%')
}
}
```
en/application-dev/ui/arkts-layout-development-create-looping.md 0 → 100644
浏览文件 @ 846edb1b
# Creating a Swiper
The \<[Swiper](../reference/arkui-ts/ts-container-swiper.md)> component is a container that is able to display child components in looping mode. It is typically used in scenarios such as display of recommended content on the home page.
## Layout and Constraints
The size of the **\<Swiper>** component follows its own size settings (if configured) or adapts based on the size of its child components.
## Loop Playback
The **loop** attribute sets whether to enable loop playback. Its default value is **true**.
When **loop** is set to **true**, the user can switch to the previous or next page when they are on the first or last page.
Example of setting **loop** to **true**:
```ts
...
private swiperController: SwiperController = new SwiperController()
...
Swiper(this.swiperController) {
Text("0")
.width('90%')
.height('100%')
.backgroundColor(Color.Gray)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("1")
.width('90%')
.height('100%')
.backgroundColor(Color.Green)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("2")
.width('90%')
.height('100%')
.backgroundColor(Color.Blue)
.textAlign(TextAlign.Center)
.fontSize(30)
}
.loop(true)
```
![loop_true](figures/loop_true.gif)
Example of setting **loop** to **false**:
```ts
Swiper(this.swiperController) {
Text("0")
.width('90%')
.height('100%')
.backgroundColor(Color.Gray)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("1")
.width('90%')
.height('100%')
.backgroundColor(Color.Green)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("2")
.width('90%')
.height('100%')
.backgroundColor(Color.Blue)
.textAlign(TextAlign.Center)
.fontSize(30)
}
.loop(false)
```
![loop_false](figures/loop_false.gif)
## Automatic Playback
The **autoPlay** attribute sets whether to enable automatic playback for child component switching. Its default value is **false**.
When **autoPlay** is set to **true**, automatic playback is enabled for child component switching. The playback interval is specified by the **interval** attribute, which is **3000** by default, in milliseconds.
Example of setting **autoPlay** to **true**:
```ts
Swiper(this.swiperController) {
Text("0")
.width('90%')
.height('100%')
.backgroundColor(Color.Gray)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("1")
.width('90%')
.height('100%')
.backgroundColor(Color.Green)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("2")
.width('90%')
.height('100%')
.backgroundColor(Color.Pink)
.textAlign(TextAlign.Center)
.fontSize(30)
}
.loop(true)
.autoPlay(true)
.interval(1000)
```
![autoPlay](figures/autoPlay.gif)
## Navigation Dots Indicator
The **\<Swiper>** component provides a navigation dots indicator, which is displayed in the bottom center of the component. You can customize the position and style of the navigation dots indicator through the **indicatorStyle **attribute.
With the **indicatorStyle** attribute, you can set the position of the navigation dots indicator relative to the edges of the **\<Swiper>** component, in addition to the size, color, and mask of each navigation dot as well as the color of the selected navigation dot.
Example of using the navigation dots indicator in its default style:
```ts
Swiper(this.swiperController) {
Text("0")
.width('90%')
.height('100%')
.backgroundColor(Color.Gray)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("1")
.width('90%')
.height('100%')
.backgroundColor(Color.Green)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("2")
.width('90%')
.height('100%')
.backgroundColor(Color.Pink)
.textAlign(TextAlign.Center)
.fontSize(30)
}
```
![indicator](figures/indicator.PNG)
Example of customizing the style of the navigation dots indicator, with the diameter of 30 vp, left margin of 0, and color of red:
```ts
Swiper(this.swiperController) {
Text("0")
.width('90%')
.height('100%')
.backgroundColor(Color.Gray)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("1")
.width('90%')
.height('100%')
.backgroundColor(Color.Green)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("2")
.width('90%')
.height('100%')
.backgroundColor(Color.Pink)
.textAlign(TextAlign.Center)
.fontSize(30)
}
.indicatorStyle({
size: 30,
left: 0,
color: Color.Red
})
```
![ind](figures/ind.PNG)
## Page Switching Mode
The **\<Swiper>** component supports three page switching modes: using the swipe gesture, using the navigation dots indicator, and using the controller.
Switch pages through the controller:
```ts
@Entry
@Component
struct SwiperDemo {
private swiperController: SwiperController = new SwiperController();
build() {
Column({ space: 5 }) {
Swiper(this.swiperController) {
Text("0")
.width(250)
.height(250)
.backgroundColor(Color.Gray)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("1")
.width(250)
.height(250)
.backgroundColor(Color.Green)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("2")
.width(250)
.height(250)
.backgroundColor(Color.Pink)
.textAlign(TextAlign.Center)
.fontSize(30)
}
.indicator(true)
Row({ space: 12 }) {
Button('showNext')
.onClick(() => {
this.swiperController.showNext(); // Switch to the next page through the controller.
})
Button('showPrevious')
.onClick(() => {
this.swiperController.showPrevious(); // Switch to the previous page through the controller.
})
}.margin(5)
}.width('100%')
.margin({ top: 5 })
}
}
```
![controll](figures/controll.gif)
## Playback Direction
You can set the playback direction for the \<Swiper> component through its **vertical** attribute.
When **vertical** is set to **true**, vertical swiping is used. The default value of **vertical** is **false**.
Example of using horizontal swiping:
```ts
Swiper(this.swiperController) {
...
}
.indicator(true)
.vertical(false)
```
![horizontal-swiping](figures/horizontal-swiping.PNG)
Example of using vertical swiping:
```ts
Swiper(this.swiperController) {
...
}
.indicator(true)
.vertical(true)
```
![vertical-swiping](figures/vertical-swiping.PNG)
## Child Components Per Page
You can set the number of child components per page for the **\<Swiper>** component through its [displayCount](../reference/arkui-ts/ts-container-swiper.md#attributes) attribute.
To display two child components per page:
```ts
Swiper(this.swiperController) {
Text("0")
.width(250)
.height(250)
.backgroundColor(Color.Gray)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("1")
.width(250)
.height(250)
.backgroundColor(Color.Green)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("2")
.width(250)
.height(250)
.backgroundColor(Color.Pink)
.textAlign(TextAlign.Center)
.fontSize(30)
Text("3")
.width(250)
.height(250)
.backgroundColor(Color.Blue)
.textAlign(TextAlign.Center)
.fontSize(30)
}
.indicator(true)
.displayCount(2)
```
![two](figures/two.PNG)
en/application-dev/ui/arkts-popup-and-menu-components-popup.md 0 → 100644
浏览文件 @ 846edb1b
# Popup
You can bind the **Popup** attribute to a component to create a popup, specifying its content and interaction logic, and display state. It is mainly used for screen recording and message notification.
Popups can be defined with [PopupOptions](../reference/arkui-ts/ts-universal-attributes-popup.md#popupoptions) or [CustomPopupOptions](../reference/arkui-ts/ts-universal-attributes-popup.md#custompopupoptions8). In **PopupOptions**, you can set **primaryButton** and **secondaryButton** to include buttons in the popup. In **CustomPopupOptions**, you can create a custom popup through the [builder](../quick-start/arkts-builder.md) parameter.
## Text Popup
Text popups are usually used to display text only and do not allow for user interactions. Bind the **Popup** attribute to a component. When the **show** parameter in the **bindPopup** attribute is set to **true**, a popup is displayed.
If you bind the **Popup** attribute to a **\<Button>** component, each time the **\<Button>** button is clicked, the Boolean value of **handlePopup** changes. When it changes to **true**, the popup is displayed.
```ts
@Entry
@Component
struct PopupExample {
@State handlePopup: boolean = false
build() {
Column() {
Button('PopupOptions')
.onClick(() => {
this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, {
message: 'This is a popup with PopupOptions',
})
}.width('100%').padding({ top: 5 })
}
}
```
![en-us_image_0000001511740524](figures/en-us_image_0000001511740524.png)
## Popup with a Button
You can add a maximum of two buttons to a popup through the **primaryButton** and **secondaryButton** attributes. For each of the buttons, you can set the **action** parameter to specify the operation to be triggered.
```ts
@Entry
@Component
struct PopupExample22 {
@State handlePopup: boolean = false
build() {
Column() {
Button('PopupOptions').margin({top:200})
.onClick(() => {
this.handlePopup = !this.handlePopup
})
.bindPopup(this.handlePopup, {
message: 'This is a popup with PopupOptions',
primaryButton:{
value:'Confirm',
action: () => {
this.handlePopup = !this.handlePopup
console.info('confirm Button click')
}
},
secondaryButton: {
value: 'Cancel',
action: () => {
this.handlePopup = !this.handlePopup
}
},
})
}.width('100%').padding({ top: 5 })
}
}
```
![en-us_other_0000001500740342](figures/en-us_other_0000001500740342.jpeg)
## Custom Popup
You can create a custom popup with **CustomPopupOptions**, defining custom content in \@Builder. In addition, you can use parameters such as **popupColor** to control the popup style.
```ts
@Entry
@Component
struct Index {
@State customPopup: boolean = false
// Define the popup content in the popup builder.
@Builder popupBuilder() {
Row({ space: 2 }) {
Image($r("app.media.icon")).width(24).height(24).margin({ left: 5 })
Text('This is Custom Popup').fontSize(15)
}.width(200).height(50).padding(5)
}
build() {
Column() {
Button('CustomPopupOptions')
.position({x:100,y:200})
.onClick(() => {
this.customPopup = !this.customPopup
})
.bindPopup(this.customPopup, {
builder: this.popupBuilder, // Content of the popup.
placement:Placement.Bottom, // Position of the popup.
popupColor:Color.Pink // Background color of the popup.
})
}
.height('100%')
}
}
```
To place the popup in a specific position, set the **placement** parameter. The popup builder triggers a popup message to instruct the user to complete the operation.
![en-us_other_0000001500900234](figures/en-us_other_0000001500900234.jpeg)
```ts
@Entry
@Component
struct Index {
@State customPopup: boolean = false
// Define the popup content in the popup builder.
@Builder popupBuilder() {
Row({ space: 2 }) {
Image('/images/shengWhite.png').width(30).objectFit(ImageFit.Contain)
Column(){
Text('Savor Life').fontSize(14).fontWeight(900).fontColor(Color.White).width('100%')
Text('A treasure trove of sing-along songs').fontSize(12).fontColor('#ffeeeeee').width('100%')
}
}.width(230).height(80).padding(5)
}
build() {
Row() {
Text ('Sing along')
Image('/images/sheng.png').width(35).objectFit(ImageFit.Contain)
.onClick(() => {
this.customPopup = !this.customPopup
})
.bindPopup(this.customPopup, {
builder: this.popupBuilder,
})
}
.margin(20)
.height('100%')
}
}
```
en/release-notes/changelogs/OpenHarmony_3.2.10.5/changelogs-arkui.md
浏览文件 @ 846edb1b
......@@ -214,4 +214,4 @@ N/A
To change these variables from the parent component, use the API provided by the **LocalStorage** (such as the **set** API) to assign values to them.
2. For details about how to use **@ObjectLink**, see [@Observed and @ObjectLink](../../../application-dev/quick-start/arkts-state-mgmt-page-level.md).
2. For details about how to use **@ObjectLink**, see [@Observed and @ObjectLink](../../../application-dev/quick-start/arkts-observed-and-objectlink.md).
en/release-notes/changelogs/OpenHarmony_4.0.2.3/changelogs-arkui.md
浏览文件 @ 846edb1b
......@@ -214,7 +214,7 @@ N/A
To change these variables from the parent component, use the API provided by the **LocalStorage** (such as the **set** API) to assign values to them.
2. For details about how to use **@ObjectLink**, see [@Observed and @ObjectLink](../../../application-dev/quick-start/arkts-state-mgmt-page-level.md).
2. For details about how to use **@ObjectLink**, see [@Observed and @ObjectLink](../../../application-dev/quick-start/arkts-observed-and-objectlink.md).
## cl.arkui.3 Change of the onScrollBegin Event of the \<List> and \<Scroll> Components
......@@ -231,8 +231,8 @@ The **onScrollBegin** event is deprecated and must be replaced with the **onScro
| onScrollBegin(event: (dx: number, dy: number) => { dxRemain: number, dyRemain: number }) | onScrollFrameBegin(event: (offset: number, state: ScrollState) => { offsetRemain: number }) |
For details about the **onScrollFrameBegin** event, see the following:
- [Scroll](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-container-scroll.md#events)
- [List](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md#events)
- [Scroll](../../../application-dev/reference/arkui-ts/ts-container-scroll.md#events)
- [List](../../../application-dev/reference/arkui-ts/ts-container-list.md#events)
**Adaptation Guide**
......
zh-cn/application-dev/IDL/idl-guidelines.md
浏览文件 @ 846edb1b
......@@ -160,7 +160,7 @@ OpenHarmony IDL容器数据类型与Ts数据类型、C++数据类型的对应关
若不存在，可对应版本前往[docs仓版本目录](../../release-notes)下载SDK包，以[3.2Beta3版本](../../release-notes/OpenHarmony-v3.2-beta3.md)为例，可通过镜像站点获取。
关于如何替换DevEco Studio的SDK包具体操作，参考[full-SDK替换指南](../quick-start/full-sdk-compile-guide.md)中的替换方法。
关于如何替换DevEco Studio的SDK包具体操作，参考[full-SDK替换指南](../faqs/full-sdk-compile-guide.md)中的替换方法。
得到idl工具的可执行文件后，根据具体场景进行后续开发步骤。
......
zh-cn/application-dev/application-models/Readme-CN.md
浏览文件 @ 846edb1b
......@@ -20,7 +20,7 @@
- [AccessibilityExtensionAbility](accessibilityextensionability.md)
- [EnterpriseAdminExtensionAbility](enterprise-extensionAbility.md)
- [InputMethodExtensionAbility](inputmethodextentionability.md)
- [WindowExtensionAbility](windowextensionability.md)
- [WindowExtensionAbility（仅对系统应用开放）](windowextensionability.md)
- 服务卡片开发指导（Stage模型）
- [服务卡片概述](service-widget-overview.md)
- 开发基于ArkTS UI的卡片
......@@ -73,15 +73,15 @@
- [静态订阅公共事件（仅对系统应用开放）](common-event-static-subscription.md)
- [取消动态订阅公共事件](common-event-unsubscription.md)
- [公共事件发布](common-event-publish.md)
- [移除粘性公共事件](common-event-remove-sticky.md)
- [移除粘性公共事件（仅对系统应用开放）](common-event-remove-sticky.md)
- [后台服务](background-services.md)
- 了解线程模型
- [线程模型概述](thread-model-stage.md)
- [使用Emitter进行线程间通信](itc-with-emitter.md)
- [使用Worker进行线程间通信](itc-with-worker.md)
- 任务管理
- [任务管理场景介绍](mission-management-overview.md)
- [任务管理与启动模式](mission-management-launch-type.md)
- 任务（Mission）管理
- [任务（Mission）管理场景介绍](mission-management-overview.md)
- [任务（Mission）与启动模式](mission-management-launch-type.md)
- [页面栈及任务链](page-mission-stack.md)
- [设置任务快照的图标和名称](mission-set-icon-name-for-task-snapshot.md)
- [Stage模型应用配置文件](config-file-stage.md)
......
zh-cn/application-dev/application-models/common-event-overview.md
浏览文件 @ 846edb1b
......@@ -7,18 +7,15 @@ OpenHarmony通过CES（Common Event Service，公共事件服务）为应用程
公共事件从系统角度可分为：系统公共事件和自定义公共事件。
- 系统公共事件：CES内部定义的公共事件，只有系统应用和系统服务才能发布，例如HAP安装，更新，卸载等公共事件。目前支持的系统公共事件详见[系统公共事件列表](../reference/apis/commonEventManager-definitions.md)。
- 自定义公共事件：应用自定义一些公共事件用来实现跨进程的事件通信能力。
- 系统公共事件：CES内部定义的公共事件，当前仅支持系统应用和系统服务发布，例如HAP安装，更新，卸载等公共事件。目前支持的系统公共事件请参见[系统公共事件列表](../reference/apis/commonEventManager-definitions.md)。
- 自定义公共事件：应用定义的公共事件，可用于实现跨进程的事件通信能力。
公共事件按发送方式可分为：无序公共事件、有序公共事件和粘性公共事件。
- 无序公共事件：CES转发公共事件时，不考虑订阅者是否接收到，且订阅者接收到的顺序与其订阅顺序无关。
- 有序公共事件：CES转发公共事件时，根据订阅者设置的优先级等级，在接收到优先级较高的一个订阅者回复后，再向下一个优先级较低的订阅者转发公共事件。具有相同优先级的订阅者将按随机顺序收到公共事件。
- 无序公共事件：CES在转发公共事件时，不考虑订阅者是否接收到该事件，也不保证订阅者接收到该事件的顺序与其订阅顺序一致。
- 有序公共事件：CES在转发公共事件时，根据订阅者设置的优先级等级，优先将公共事件发送给优先级较高的订阅者，等待其成功接收该公共事件之后再将事件发送给优先级较低的订阅者。如果有多个订阅者具有相同的优先级，则他们将随机接收到公共事件。
- 粘性公共事件：能够让订阅者收到在订阅前已经发送的公共事件就是粘性公共事件。普通的公共事件只能在订阅后发送才能收到，而粘性公共事件的特殊性就是可以先发送后订阅，同时也支持先订阅后发送。发送粘性事件必须是系统应用或系统服务，粘性事件发送后会一直存在系统中，且发送者需要申请`ohos.permission.COMMONEVENT_STICKY`权限，配置方式请参见[配置文件权限声明](../security/accesstoken-guidelines.md#配置文件权限声明)。
......
zh-cn/application-dev/application-models/dataability-overview.md
浏览文件 @ 846edb1b
......@@ -8,4 +8,3 @@ DataAbility，即"使用Data模板的Ability"，主要用于对外部提供统
数据的存放形式多样，可以是数据库，也可以是磁盘上的文件。DataAbility对外提供对数据的增、删、改、查，以及打开文件等接口，这些接口的具体实现由开发者提供。
zh-cn/application-dev/faqs/faqs-arkui-arkts.md 0 → 100644
浏览文件 @ 846edb1b
此差异已折叠。
zh-cn/application-dev/faqs/faqs-compiler-runtime.md 0 → 100644
浏览文件 @ 846edb1b
此差异已折叠。
zh-cn/application-dev/website.md
浏览文件 @ 846edb1b
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或