Merge branch 'master' of gitee.com:openharmony/docs into master

Signed-off-by: Nxsz233 <xushizhe@huawei.com>

CODEOWNERS

@@ -520,4 +520,3 @@ zh-cn/application-dev/reference/errorcodes/errorcode-webview.md @HelloCrease
 zh-cn/application-dev/reference/errorcodes/errorcode-window.md @ge-yafang
 zh-cn/application-dev/reference/errorcodes/errorcode-workScheduler.md @HelloCrease
 zh-cn/application-dev/reference/errorcodes/errorcode-zlib.md @RayShih
-zh-cn/release-notes/changelogs @majiajun518
\ No newline at end of file

README.md

@@ -18,15 +18,15 @@ This repository stores device and application development documents provided by
 
  - master: the latest version.
 
- - OpenHarmony 3.2 Beta1. [Learn more](en/release-notes/OpenHarmony-v3.2-beta1.md)
+ - OpenHarmony 3.2 Beta3. [Learn more](en/release-notes/OpenHarmony-v3.2-beta3.md)
 
  - OpenHarmony 3.1 Release. [Learn more](en/release-notes/OpenHarmony-v3.1-release.md)
 
-   This version is upgraded to OpenHarmony 3.1.1 LTS. [Learn more](en/release-notes/OpenHarmony-v3.1.1-release.md)
+   This version is upgraded to OpenHarmony 3.1.3 Release. [Learn more](en/release-notes/OpenHarmony-v3.1.3-release.md)
 
  - OpenHarmony 3.0 LTS. [Learn more](en/release-notes/OpenHarmony-v3.0-LTS.md)
 
-   This version is upgraded to OpenHarmony 3.0.5 LTS. [Learn more](en/release-notes/OpenHarmony-v3.0.5-LTS.md)
+   This version is upgraded to OpenHarmony 3.0.6 LTS. [Learn more](en/release-notes/OpenHarmony-v3.0.6-LTS.md)
 
  - OpenHarmony 2.2 Beta2. [Learn more](en/release-notes/OpenHarmony-v2.2-beta2.md)
 
@@ -34,14 +34,14 @@ This repository stores device and application development documents provided by
 
 ### Historical Stable Versions
 
-OpenHarmony_v1.x_release: OpenHarmony v1.1.4 LTS. [Learn more](en/release-notes/OpenHarmony-v1-1-4-LTS.md)
+OpenHarmony_v1.x_release: OpenHarmony v1.1.5 LTS. [Learn more](en/release-notes/OpenHarmony-v1.1.5-LTS.md)
 
 [More versions](en/release-notes/)
 
 
 ## Third-Party Open-Source Software and License Notice
 
-Third-party license: [Third-Party Open-Source Software and License Notice](en/contribute/third-party-open-source-software-and-license-notice.md)
+Third-party license: [Third-Party Open-Source Software and License Notice](en/contribute/open-source-software-and-license-notice.md)
 
 ## Contribution
 

en/application-dev/dfx/hiappevent-guidelines.md

@@ -64,7 +64,7 @@ For details about the result codes, see [Event Verification Result Codes](#event
 
 The following uses a one-time event watcher as an example to illustrate the development procedure.
 
-1. Create an eTS application project. In the displayed **Project** window, choose **entry** > **src** > **main** > **ets** > **pages** > **index.ets**, and double-click **index.ets**. Then, add three buttons to simulate the process of watching for application events. Wherein, button 1 is used to invoke application event logging, button 2 to add an event watcher that automatically triggers a callback, and button 3 to remove the watcher. The complete sample code is as follows:
+1. Create an ArkTS application project. In the displayed **Project** window, choose **entry** > **src** > **main** > **ets** > **pages** > **index.ets**, and double-click **index.ets**. Then, add three buttons to simulate the process of watching for application events. Wherein, button 1 is used to invoke application event logging, button 2 to add an event watcher that automatically triggers a callback, and button 3 to remove the watcher. The complete sample code is as follows:
 
    ```ts
    import hiAppEvent from '@ohos.hiAppEvent';

en/application-dev/faqs/faqs-ui-ets.md

-# ArkUI (eTS) Development
+# ArkUI (ArkTS) Development
 
 
 
@@ -72,7 +72,7 @@ Applicable to: OpenHarmony SDK 3.2.2.5, stage model of API version 9
 
 2. Convert data in Uint8Array format to the string type by calling the **String.fromCharCode** API.
 
-Reference: [Resource Management](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis/js-apis-resource-manager.md)
+Reference: [Resource Management](../reference/apis/js-apis-resource-manager.md)
 
 Example:
 
@@ -94,7 +94,7 @@ 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 Management](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis/js-apis-resource-manager.md#getstring)
+Reference: [Resource Management](../reference/apis/js-apis-resource-manager.md#getstring)
 
 ## What should I do if the global static variables of a class do not work?
 
@@ -102,8 +102,6 @@ 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.
 
-Reference: [AppStorage](https://docs.openharmony.cn/pages/v3.2Beta/en/application-dev/ui/ts-application-states-appstorage.md/)
-
 ## How do I obtain resources in the stage model?
 
 Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9
@@ -154,9 +152,9 @@ build() {
 
 Applicable to: OpenHarmony SDK 3.2.2.5, stage model of API version 9
 
-No. Currently, **CustomDialog** can be used only on eTS pages.
+No. Currently, **CustomDialog** can be used only on ArkTS pages.
 
-Reference: [Custom Dialog Box](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md)
+Reference: [Custom Dialog Box](../reference/arkui-ts/ts-methods-custom-dialog-box.md)
 
 ## How do I transfer variables in CustomDialog to variables on pages?
 
@@ -210,7 +208,7 @@ Applicable to: OpenHarmony SDK 3.2.5.3, stage model of API version 9
 
 By default, child components in a **\<GridContainer>** are horizontally aligned to the left. To center them, perform the following steps:
 
-Nest a **\<Row>** component and set it to **justifyContent(FlexAlign.Center)**. For details, see [Grid Layout](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/ui/ui-ts-layout-grid-container.md).
+Nest a **\<Row>** component and set it to **justifyContent(FlexAlign.Center)**. For details, see [Grid Layout](../reference/arkui-ts/ts-container-gridcontainer.md).
 
   Example:
 
@@ -267,13 +265,13 @@ export default class MainAbility extends Ability {
 }
 ```
 
-## How do I execute JavaScript functions in the \<Web> component in eTS code?
+## How do I execute JavaScript functions in the \<Web> component in ArkTS code?
 
 Applicable to: OpenHarmony SDK 3.2.3.5, stage model of API version 9
 
 Call the **runJavaScript** API in the **WebController** to asynchronously execute JavaScript scripts. This API uses a callback to return the execution result. Note: **runJavaScript** can only be called after **loadUrl** has been completed. For example, it can be called in **onPageEnd**.
 
-Reference: [Web](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/arkui-ts/ts-basic-components-web.md)
+Reference: [Web](../reference/arkui-ts/ts-basic-components-web.md)
 
 ## How do I fix misidentification of the pan gesture where container nesting is involved?
 

en/application-dev/notification/background-agent-scheduled-reminder-guide.md

@@ -37,7 +37,7 @@ For details about the APIs, see [reminderAgent](../reference/apis/js-apis-remind
    import reminderAgent from '@ohos.reminderAgent';
    import notification from '@ohos.notification';
    export default {
-       // eTS project:
+       // ArkTS project:
        let timer : reminderAgent.ReminderRequestTimer = {
            reminderType: reminderAgent.ReminderType.REMINDER_TYPE_TIMER,
            triggerTimeInSeconds: 10,
@@ -67,7 +67,7 @@ For details about the APIs, see [reminderAgent](../reference/apis/js-apis-remind
    Sample code for defining a reminder agent for a calendar event:
 
     ```js
-    // eTS project:
+    // ArkTS project:
     let calendar : reminderAgent.ReminderRequestCalendar = {
         reminderType: reminderAgent.ReminderType.REMINDER_TYPE_CALENDAR,
         dateTime: {
@@ -113,7 +113,7 @@ For details about the APIs, see [reminderAgent](../reference/apis/js-apis-remind
     Sample code for defining a reminder agent for an alarm:
 
     ```js
-    // eTS project:
+    // ArkTS project:
     let alarm : reminderAgent.ReminderRequestAlarm = {
         reminderType: reminderAgent.ReminderType.REMINDER_TYPE_ALARM,
         hour: 11,

en/application-dev/quick-start/Readme-EN.md

 # Quick Start
-
 - Getting Started
-  - [Preparations](start-overview.md)
+  - [Before You Start](start-overview.md)
   - [Getting Started with ArkTS in Stage Model](start-with-ets-stage.md)
   - [Getting Started with ArkTS in FA Model](start-with-ets-fa.md)
-  - [Getting Started with JavaScript in FA Model](start-with-js-fa.md)
+  - [Getting Started with JavaScript in FA Model](start-with-js-fa.md)  
 - Development Fundamentals
   - [Application Package Structure Configuration File (FA Model)](package-structure.md)
   - [Application Package Structure Configuration File (Stage Model)](stage-structure.md)
   - [SysCap](syscap.md)
-  - [HarmonyAppProvision Configuration File](app-provision-structure.md)
-
+  - [Resource Categories and Access](resource-categories-and-access.md)
+  - Learning ArkTS
+    - [Getting Started with ArkTS](arkts-get-started.md)
+    - ArkTS Syntax (Declarative UI)
+      - [Basic UI Description](arkts-basic-ui-description.md)
+      - State Management
+        - [Basic Concepts](arkts-state-mgmt-concepts.md)
+        - [State Management with Page-level Variables](arkts-state-mgmt-page-level.md)
+        - [State Management with Application-level Variables](arkts-state-mgmt-application-level.md)
+      - [Dynamic UI Element Building](arkts-dynamic-ui-elememt-building.md)
+      - [Rendering Control](arkts-rendering-control.md)
+      - [Restrictions and Extensions](arkts-restrictions-and-extensions.md)
\ No newline at end of file

en/application-dev/quick-start/arkts-basic-ui-description.md

+# Basic UI Description
+
+In ArkTS, you define a custom component by using decorators **@Component** and **@Entry** to decorate a data structure declared with the **struct** keyword. A custom component provides a **build** function, where you must write the basic UI description in chain call mode. For details about the UI description, see [UI Description Specifications](#ui-description-specifications).
+
+## Basic Concepts
+
+- struct: a data structure that can be used to implement custom components and cannot have inheritance. The **new** keyword can be omitted when initializing a struct.
+
+- Decorator: a special type of declaration that can be applied to classes, structures, or class attributes to add new functionality to them. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines.
+
+  ```ts
+  @Entry
+  @Component
+  struct MyComponent {
+  }
+  ```
+
+- **build** function: a function that complies with the **Builder** API definition and is used to define the declarative UI description of components. A **build** function must be defined for custom components, and custom constructors are prohibited for custom components.
+
+  ```ts
+  interface Builder {
+      build: () => void
+  }
+  ```
+
+- **@Component**: a decorator applied to a struct to equip it with the component-based capability. The **build** method must be implemented for UI creation.
+
+- **@Entry**: a decorator applied to a struct to make it the entry to a page, which is rendered and displayed when the page is loaded.
+
+- **@Preview**: a decorator applied to struct to make it previewable in the DevEco Studio Previewer. The decorated component is created and displayed when the residing page is loaded.
+
+  > **NOTE**
+  >
+  > In a single source file, you can use up to 10 **@Preview** decorators to decorate custom components. For details, see [Previewing ArkTS Components](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-previewing-app-service-0000001218760596#section146052489820).
+
+- Chain call: a syntax for configuring the attribute methods, event methods, and more of UI components by using the dot notation.
+
+## UI Description Specifications
+
+### Structs Without Parameters
+
+A struct without parameters is a component whose API definition has empty parentheses. No parameter needs to be passed to this type of component, for example, the **Divider** component in the following snippet:
+
+```ts
+Column() {
+    Text('item 1')
+    Divider()
+    Text('item 2')
+}
+```
+
+### Structs with Mandatory Parameters
+
+A struct with mandatory parameters is a component whose API definition expects parameters enclosed in the parentheses. You can use constants to assign values to the parameters.
+
+Sample code:
+
+- Set the mandatory parameter **src** of the **\<Image>** component as follows:
+
+  ```ts
+  Image('https://xyz/test.jpg')
+  ```
+
+- Set the mandatory parameter **content** of the **\<Text>** component as follows:
+
+  ```ts
+  Text('test')
+  ```
+
+You can use variables or expressions to assign values to parameters. The result type returned by an expression must meet the parameter type requirements. For details about the variables, see [State Management with Page-level Variables](arkts-state-mgmt-page-level.md) and [State Management with Application-level Variables](arkts-state-mgmt-application-level.md). For example, set a variable or expression to construct the **\<Image>** and **\<Text>** components:
+
+```ts
+Image(this.imagePath)
+Image('https://' + this.imageUrl)
+Text(`count: ${this.count}`)
+```
+
+### Attribute Configuration
+
+Component attributes are configured using an attribute method, which follows the corresponding component and is bound to the component using the "**.**" operator.
+
+- Example of configuring the font size attribute of the **\<Text>** component:
+
+  ```ts
+  Text('test')
+      .fontSize(12)
+  ```
+
+- Example of configuring multiple attributes at the same time by using the "**.**" operator to implement chain call:
+
+  ```ts
+  Image('test.jpg')
+      .alt('error.jpg')    
+      .width(100)    
+      .height(100)
+  ```
+
+- Example of passing variables or expressions in addition to constants:
+
+  ```ts
+  Text('hello')
+      .fontSize(this.size)
+  Image('test.jpg')
+      .width(this.count % 2 === 0 ? 100 : 200)    
+      .height(this.offset + 100)
+  ```
+
+-  For attributes of built-in components, ArkUI also provides some predefined [enumeration types](../reference/arkui-ts/ts-appendix-enums.md), which you can pass as parameters to methods if they meet the parameter type requirements. For example, you can configure the font color and weight attributes of the **\<Text>** component as follows:
+
+  ```ts
+  Text('hello')
+      .fontSize(20)
+      .fontColor(Color.Red)
+      .fontWeight(FontWeight.Bold)
+  ```
+
+### Event Configuration
+
+Events supported by components are configured using event methods, which each follow the corresponding component and are bound to the component using the "**.**" operator.
+
+- Example of using a lambda expression to configure the event of a component:
+
+  ```ts
+  Button('add counter')
+      .onClick(() => {
+          this.counter += 2
+      })
+  ```
+
+- Example of using an anonymous function expression to configure the event of a component (**bind** must be used to ensure that the contained components are referenced by **this** in the function body):
+
+  ```ts
+  Button('add counter')
+      .onClick(function () {
+          this.counter += 2
+      }.bind(this))
+  ```
+
+- Example of using a component's member function to configure the event of the component:
+
+  ```ts
+  myClickHandler(): void {
+    this.counter += 2
+  }
+  
+  ...
+
+  Button('add counter')
+    .onClick(this.myClickHandler)
+  ```
+
+### Child Component Configuration
+
+For a component that supports child components, for example, a container component, add the UI descriptions of the child components inside parentheses. The **\<Column>**, **\<Row>**, **\<Stack>**, **\<Grid>**, and **\<List>** components are all container components.
+
+- Simple example of the **\<Column>** component:
+
+  ```ts
+  Column() {
+      Text('Hello')
+          .fontSize(100)
+      Divider()
+      Text(this.myText)
+          .fontSize(100)
+          .fontColor(Color.Red)
+  }
+  ```
+
+- Example of nesting multiple child components in the **\<Column>** component:
+
+  ```ts
+  Column() {
+    Row() {
+      Image('test1.jpg')
+        .width(100)
+        .height(100)
+      Button('click +1')
+        .onClick(() => {
+          console.info('+1 clicked!')
+        })
+    }
+
+    Divider()
+    Row() {
+      Image('test2.jpg')
+        .width(100)
+        .height(100)
+      Button('click +2')
+        .onClick(() => {
+          console.info('+2 clicked!')
+        })
+    }
+
+    Divider()
+    Row() {
+      Image('test3.jpg')
+        .width(100)
+        .height(100)
+      Button('click +3')
+        .onClick(() => {
+          console.info('+3 clicked!')
+        })
+    }
+  }
+  ```

en/application-dev/quick-start/arkts-dynamic-ui-elememt-building.md

+# Dynamic UI Element Building
+
+After you've created a custom component (as described in [Basic UI Description](arkts-basic-ui-description.md)), you can customize the internal UI structure for the component, by drawing on the capability of dynamic UI element building.
+
+## @Builder
+
+The **@Builder** decorator is used to decorate a function for quickly generating multiple layouts in a custom component. This function can be declared outside the **build** function and used in the **build** function or other **@Builder** decorated functions. The following example shows how to use **@Builder**.
+
+```ts
+// xxx.ets
+@Component
+struct CompB {
+  @State CompValue: string = ''
+
+  aboutToAppear() {
+    console.info('CompB aboutToAppear.')
+  }
+
+  aboutToDisappear() {
+    console.info('CompB aboutToDisappear.')
+  }
+
+  build() {
+    Column() {
+      Button(this.CompValue)
+        .margin(5)
+    }
+  }
+}
+
+@Entry
+@Component
+struct CompA {
+  size1: number = 100
+  @State CompValue1: string = "Hello,CompValue1"
+  @State CompValue2: string = "Hello,CompValue2"
+  @State CompValue3: string = "Hello,CompValue3"
+
+  // Use the custom component CompB in the @Builder decorated function CompC.
+  @Builder CompC(value: string) {
+    CompB({ CompValue: value })
+  }
+
+  @Builder SquareText(label: string) {
+    Text(label)
+      .fontSize(18)
+      .width(1 * this.size1)
+      .height(1 * this.size1)
+  }
+
+  // Use the @Builder decorated function SquareText in the @Builder decorated function RowOfSquareTexts.
+  @Builder RowOfSquareTexts(label1: string, label2: string) {
+    Row() {
+      this.SquareText(label1)
+      this.SquareText(label2)
+    }
+    .width(2 * this.size1)
+    .height(1 * this.size1)
+  }
+
+  build() {
+    Column() {
+      Row() {
+        this.SquareText("A")
+        this.SquareText("B")
+      }
+      .width(2 * this.size1)
+      .height(1 * this.size1)
+
+      this.RowOfSquareTexts("C", "D")
+      Column() {
+        // Use the @Builder decorated custom components three times.
+        this.CompC(this.CompValue1)
+        this.CompC(this.CompValue2)
+        this.CompC(this.CompValue3)
+      }
+      .width(2 * this.size1)
+      .height(2 * this.size1)
+    }
+    .width(2 * this.size1)
+    .height(2 * this.size1)
+  }
+}
+```
+![builder](figures/builder.PNG)
+
+## @BuilderParam<sup>8+</sup>
+
+The **@BuilderParam** decorator is used to decorate the function type attributes (for example, **@BuilderParam noParam: () => void**) in a custom component. When the custom component is initialized, the attributes decorated by **@BuilderParam** must be assigned values.
+
+### Background
+
+In certain circumstances, you may need to add a specific function, such as a click-to-jump action, to a custom component. However, embedding an event method directly inside of the component will add the function to all places where the component is imported. This is where the **@BuilderParam** decorator comes into the picture. When initializing a custom component, you can assign a **@Builder** decorated method to the **@BuilderParam** decorated attribute, thereby adding the specific function to the custom component.
+
+### Component Initialization Through Parameters
+
+When initializing a custom component through parameters, assign a **@Builder** decorated method to the **@BuilderParam** decorated attribute — **content**, and call the value of **content** in the custom component. If no parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, **noParam: this.specificNoParam**), define the type of the attribute as a function without a return value (for example, **@BuilderParam noParam: () => void**). If any parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, **withParam: this.SpecificWithParam('WithParamA')**), define the type of the attribute as **any** (for example, **@BuilderParam withParam: any**).
+
+```ts
+// xxx.ets
+@Component
+struct CustomContainer {
+  header: string = ''
+  @BuilderParam noParam: () => void
+  @BuilderParam withParam: any
+  footer: string = ''
+
+  build() {
+    Column() {
+      Text(this.header)
+        .fontSize(30)
+      this.noParam()
+      this.withParam()
+      Text(this.footer)
+        .fontSize(30)
+    }
+  }
+}
+
+@Entry
+@Component
+struct CustomContainerUser {
+  @Builder specificNoParam() {
+    Column() {
+      Text('noParam').fontSize(30)
+    }
+  }
+
+  @Builder SpecificWithParam(label: string) {
+    Column() {
+      Text(label).fontSize(30)
+    }
+  }
+
+  build() {
+    Column() {
+      CustomContainer({
+        header: 'HeaderA',
+        noParam: this.specificNoParam,
+        withParam: this.SpecificWithParam('WithParamA'),
+        footer: 'FooterA'
+      })
+      Divider()
+        .strokeWidth(3)
+        .margin(10)
+      CustomContainer({
+        header: 'HeaderB',
+        noParam: this.specificNoParam,
+        withParam: this.SpecificWithParam('WithParamB'),
+        footer: 'FooterB'
+      })
+    }
+  }
+}
+```
+
+![builder1](figures/builder1.PNG)
+
+### Component Initialization Through Trailing Closure
+
+In a custom component, the **@BuilderParam** decorated attribute can be initialized using a trailing closure. During initialization, the component name is followed by a pair of braces ({}) to form a trailing closure (**CustomContainer(){}**). You can consider a trailing closure as a container and add content to it. For example, you can add a component (**{Column(){...}**) to the closure. The syntax of the closure is the same as that of **build**. In this scenario, the custom component has one and only one **@BuilderParam** decorated attribute.
+
+Example: Add a **\<Column>** component and a click event to the closure, and call the **specificParam** method decorated by **@Builder** in the new **\<Column>** component. After the **\<Column>** component is clicked, the value of the **CustomContainer** component's **header** attribute will change from **header** to **changeHeader**. When the component is initialized, the content of the trailing closure will be assigned to the **closer** attribute decorated by **@BuilderParam**.
+
+```ts
+// xxx.ets
+@Component
+struct CustomContainer {
+  header: string = ''
+  @BuilderParam closer: () => void
+
+  build() {
+    Column() {
+      Text(this.header)
+        .fontSize(30)
+      this.closer()
+    }
+  }
+}
+
+@Builder function specificParam(label1: string, label2: string) {
+  Column() {
+    Text(label1)
+      .fontSize(30)
+    Text(label2)
+      .fontSize(30)
+  }
+}
+
+@Entry
+@Component
+struct CustomContainerUser {
+  @State text: string = 'header'
+
+  build() {
+    Column() {
+      CustomContainer({
+        header: this.text,
+      }) {
+        Column() {
+          specificParam('testA', 'testB')
+        }.backgroundColor(Color.Yellow)
+        .onClick(() => {
+          this.text = 'changeHeader'
+        })
+      }
+    }
+  }
+}
+```
+
+![builder2](figures/builder2.gif)
+
+## @Styles
+
+The **@Styles** decorator helps avoid repeated style setting, by extracting multiple style settings into one method. When declaring a component, you can invoke this method and use the **@Styles** decorator to quickly define and reuse the custom styles of a component. **@Styles** supports only universal attributes.
+
+**@Styles** can be defined inside or outside a component declaration. When it is defined outside a component declaration, the component name must be preceded by the keyword **function**.
+
+```ts
+// xxx.ets
+@Styles function globalFancy () {
+  .width(150)
+  .height(100)
+  .backgroundColor(Color.Pink)
+}
+
+@Entry
+@Component
+struct FancyUse {
+  @Styles componentFancy() {
+    .width(100)
+    .height(200)
+    .backgroundColor(Color.Yellow)
+  }
+
+  build() {
+    Column({ space: 10 }) {
+      Text('FancyA')
+        .globalFancy()
+        .fontSize(30)
+      Text('FancyB')
+        .globalFancy()
+        .fontSize(20)
+      Text('FancyC')
+        .componentFancy()
+        .fontSize(30)
+      Text('FancyD')
+        .componentFancy()
+        .fontSize(20)
+    }
+  }
+}
+```
+
+![styles](figures/styles.PNG)
+
+**@Styles** can also be used inside the **[StateStyles](../reference/arkui-ts/ts-universal-attributes-polymorphic-style.md)** attribute declaration of a component, to assign state-specific attributes to the component.
+
+In **StateStyles**, **@Styles** decorated methods defined outside the component can be directly called, while those defined inside can be called only with the keyword **this**.
+
+```ts
+// xxx.ets
+@Styles function globalFancy () {
+  .width(120)
+  .height(120)
+  .backgroundColor(Color.Green)
+}
+
+@Entry
+@Component
+struct FancyUse {
+  @Styles componentFancy() {
+    .width(80)
+    .height(80)
+    .backgroundColor(Color.Red)
+  }
+
+  build() {
+    Row({ space: 10 }) {
+      Button('Fancy')
+        .stateStyles({
+          normal: {
+            .width(100)
+            .height(100)
+            .backgroundColor(Color.Blue)
+          },
+          disabled: this.componentFancy,
+          pressed: globalFancy
+        })
+    }
+  }
+}
+```
+
+![styles1](figures/styles1.gif)
+
+## @Extend
+
+The **@Extend** decorator adds new attribute methods to built-in components, such as **\<Text>**, **\<Column>**, and **\<Button>**. In this way, the built-in components are extended instantly.
+
+```ts
+// xxx.ets
+@Extend(Text) function fancy (fontSize: number) {
+  .fontColor(Color.Red)
+  .fontSize(fontSize)
+  .fontStyle(FontStyle.Italic)
+  .fontWeight(600)
+}
+
+@Entry
+@Component
+struct FancyUse {
+  build() {
+    Row({ space: 10 }) {
+      Text("Fancy")
+        .fancy(16)
+      Text("Fancy")
+        .fancy(24)
+      Text("Fancy")
+        .fancy(32)
+    }
+  }
+}
+
+```
+
+> **NOTE**
+>
+> - The **@Extend** decorator cannot be defined inside the struct of a custom component.
+> - The **@Extend** decorator supports only attribute methods.
+
+![extend](figures/extend.PNG)
+
+## @CustomDialog
+
+The **@CustomDialog** decorator is used to decorate custom dialog boxes, enabling their content and styles to be dynamically set.
+
+```ts
+// xxx.ets
+@CustomDialog
+struct DialogExample {
+  controller: CustomDialogController
+  action: () => void
+
+  build() {
+    Row() {
+      Button('Close CustomDialog')
+        .onClick(() => {
+          this.controller.close()
+          this.action()
+        })
+    }.padding(20)
+  }
+}
+
+@Entry
+@Component
+struct CustomDialogUser {
+  dialogController: CustomDialogController = new CustomDialogController({
+    builder: DialogExample({ action: this.onAccept }),
+    cancel: this.existApp,
+    autoCancel: true
+  });
+
+  onAccept() {
+    console.info('onAccept');
+  }
+
+  existApp() {
+    console.info('Cancel dialog!');
+  }
+
+  build() {
+    Column() {
+      Button('Click to open Dialog')
+        .onClick(() => {
+          this.dialogController.open()
+        })
+    }
+  }
+}
+```
+
+![customdialog](figures/customDialog.gif)

en/application-dev/quick-start/arkts-get-started.md

+# Getting Started with ArkTS
+
+As its name implies, ArkTS is a superset of TypeScript. It is the preferred, primary programming language for application development in OpenHarmony.
+
+- ArkTS offers all the features of TS.
+
+- ArkTS extends TS mainly by adding [declarative UI](arkts-basic-ui-description.md) capabilities, which allow you to develop high-performance applications in a more natural and intuitive manner.
+
+  The declarative UI capabilities offered by ArkTS include the following:
+
+  - [Basic UI description](arkts-basic-ui-description.md): A wide variety of decorators, custom components, and UI description mechanisms work with the built-in components, event methods, and attribute methods in ArkUI, jointly underpinning UI development.
+  - [State management](arkts-state-mgmt-page-level.md): In the multi-dimensional state management mechanism for ArkUI, UI-related data can be used not only within a component, but also be transferred between different component levels (for example, between parent and child components, between grandparent and grandchild components, or globally) in a device or even across devices. In addition, data transfer can be classified as one-way (read-only) or two-way (mutable). You can use these capabilities at your disposal to implement linkage between data and the UI.
+  - [Dynamic UI element building](arkts-dynamic-ui-elememt-building.md): In ArkTS, you can dynamically build UI elements, customizing the internal UI structure of components or extending the native components with custom component styles.
+  - [Rendering control](arkts-rendering-control.md): ArkTS provides conditional rendering and loop rendering. Conditional rendering can render state-specific content based on the application status. Loop rendering iteratively obtains data from the data source and creates the corresponding component during each iteration.
+  - [Restrictions and extensions](arkts-restrictions-and-extensions.md): ArkTS provides extensions, such as two-way binding. However, it is not without its restrictions. 
+
+- ArkTS will continue to evolve to accommodate changing application development and running requirements, and gradually adds more features, such as parallelism and concurrency enhancement, typed system enhancement, and distributed development paradigm.
+
+Below is sample code to illustrate the building blocks of ArkTS. It implements a simple UI with two text segments, one divider, and one button. When the user clicks the button, the text content changes from "Hello World" to "Hello ArkUI".
+
+![arkts-get-started](figures/arkts-get-started.png)
+
+As shown above, ArkTS has the following building blocks:
+
+- Decorators: used to decorate classes, structures, methods, and variables for custom definitions. In the preceding sample code, **@Entry**, **@Component**, and **@State** are decorators. Specifically, **@Component** indicates a custom component, **@Entry** indicates an entry component, and **@State** indicates a state variable in the component, whose change will trigger re-rendering of the UI.
+- Custom components: reusable UI units that can be used in flexible combinations. In the preceding sample code, the structure **Hello** decorated by **@Component** is a custom component.
+- UI description: declarative description of the UI structure, such as the code block of the **build()** method.
+- Built-in components: basic, container, media, drawing, and canvas components preset in ArkTS. You can directly invoke such components as **\<Column>**, **\<Text>**, **\<Divider>**, and **\<Button>** components in the sample code.
+- Attribute methods: methods used to configure component attributes, such as **fontSize()**, **width()**, **height()**, and **color()**. You can configure multiple attributes of a component in method chaining mode.
+- Event methods: methods used to add the logic for a component to respond to an event. In the sample code, **onClick()** following **Button** is an event method. You can configure response logic for multiple events in method chaining mode.

en/application-dev/quick-start/arkts-rendering-control.md

@@ -125,8 +125,8 @@ interface DataChangeListener {
 | Name       | Type             | Mandatory| Description                                                    |
 | ------------- | --------------------- | ---- | ------------------------------------------------------------ |
 | dataSource    | IDataSource           | Yes  | Object used to implement the **IDataSource** API. You need to implement related APIs.         |
-| itemGenerator | (item: any) => void   | Yes  | A lambda function used to generate one or more child components for each data item in an array. A single child component or a list of child components must be included in parentheses.|
-| keyGenerator  | (item: any) => string | No  | An anonymous function used to generate a unique and fixed key value for each data item in an array. This key value must remain unchanged for the data item even when the item is relocated in the array. When the item is replaced by a new item, the key value of the new item must be different from that of the existing item. This key-value generator is optional. However, for performance reasons, it is strongly recommended that the key-value generator be provided, so that the development framework can better identify array changes. For example, if no key-value generator is provided, a reverse of an array will result in rebuilding of all nodes in **LazyForEach**.|
+| itemGenerator | (item: any, index?: number) => void   | Yes  | A lambda function used to generate one or more child components for each data item in an array. A single child component or a list of child components must be included in parentheses.|
+| keyGenerator  | (item: any, index?: number) => string | No  | An anonymous function used to generate a unique and fixed key value for each data item in an array. This key value must remain unchanged for the data item even when the item is relocated in the array. When the item is replaced by a new item, the key value of the new item must be different from that of the existing item. This key-value generator is optional. However, for performance reasons, it is strongly recommended that the key-value generator be provided, so that the development framework can better identify array changes. For example, if no key-value generator is provided, a reverse of an array will result in rebuilding of all nodes in **LazyForEach**.|
 
 ### Description of IDataSource
 
@@ -142,14 +142,14 @@ interface DataChangeListener {
 | Name                                                    | Description                                  |
 | -------------------------------------------------------- | -------------------------------------- |
 | onDataReloaded(): void                                   | Invoked when all data is reloaded.                    |
-| onDataAdded(index: number): void (deprecated)            | Invoked when data is added to the position indicated by the specified index.       |
-| onDataMoved(from: number, to: number): void (deprecated) | Invoked when data is moved from the **from** position to the **to** position.|
-| onDataDeleted(index: number): void (deprecated)          | Invoked when data is deleted from the position indicated by the specified index.       |
-| onDataChanged(index: number): void (deprecated)          | Invoked when data in the position indicated by the specified index is changed.       |
-| onDataAdd(index: number): void 8+                        | Invoked when data is added to the position indicated by the specified index.       |
-| onDataMove(from: number, to: number): void 8+            | Invoked when data is moved from the **from** position to the **to** position.|
-| onDataDelete(index: number): void 8+                     | Invoked when data is deleted from the position indicated by the specified index.       |
-| onDataChange(index: number): void 8+                     | Invoked when data in the position indicated by the specified index is changed.       |
+| onDataAdded(index: number): void<sup>deprecated</sup>           | Invoked when data is added to the position indicated by the specified index. This API is deprecated since API version 8. You are advised to use **onDataAdd**.      |
+| onDataMoved(from: number, to: number): void<sup>deprecated</sup> | Invoked when data is moved from the **from** position to the **to** position. This API is deprecated since API version 8. You are advised to use **onDataMove**.|
+| onDataDeleted(index: number): void<sup>deprecated</sup>         | Invoked when data is deleted from the position indicated by the specified index. This API is deprecated since API version 8. You are advised to use **onDataDelete**.       |
+| onDataChanged(index: number): void<sup>deprecated</sup>          | Invoked when data in the position indicated by the specified index is changed. This API is deprecated since API version 8. You are advised to use **onDataChange**.      |
+| onDataAdd(index: number): void<sup>8+</sup>                     | Invoked when data is added to the position indicated by the specified index.       |
+| onDataMove(from: number, to: number): void<sup>8+</sup>           | Invoked when data is moved from the **from** position to the **to** position.|
+| onDataDelete(index: number): void<sup>8+</sup>                     | Invoked when data is deleted from the position indicated by the specified index.       |
+| onDataChange(index: number): void<sup>8+</sup>                     | Invoked when data in the position indicated by the specified index is changed.       |
 
 ## Example
 

en/application-dev/quick-start/arkts-restrictions-and-extensions.md

+# Restrictions and Extensions
+
+## Restrictions on Using ArkTS in Generators
+
+ArkTS has the following restrictions on generators:
+
+- Expressions can be used only in character strings (${expression}), **if/else** statements, **ForEach** parameters, and component parameters.
+
+- No expressions should cause any application state variables (that is, variables decorated by **@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 applies to anonymous function implementations of event methods (such as **onClick**).
+
+## Two-Way Binding of Variables
+
+ArkTS supports two-way binding through **$$**, which is usually used for variables whose state values change frequently.
+
+- **$$** supports variables of primitive types and variables decorated by **@State**, **@Link**, or **@Prop**.
+- **$$** supports only the **show** parameter of the **[bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md)** attribute method, the **checked** attribute of the **[\<Radio>](../reference/arkui-ts/ts-basic-components-radio.md)** component, and the **refreshing** parameter of the **[\<Refresh>](../reference/arkui-ts/ts-container-refresh.md)** component.
+- When the variable bound to **$$** changes, only the current component is rendered, which improves the rendering speed.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct bindPopupPage {
+  @State customPopup: boolean = false
+
+  build() {
+    Column() {
+      Button('Popup')
+        .margin(20)
+        .onClick(() => {
+          this.customPopup = !this.customPopup
+        })
+        .bindPopup($$this.customPopup, {
+          message: "showPopup"
+        })
+    }
+  }
+}
+```
+
+![popup](figures/popup.gif)
+
+## Restrictions on Data Type Declarations of State Variables
+
+The data type declaration of the **@State**, **@Provide**, **@Link**, or **@Consume** decorated state variables can consist of only one of the primitive data types or reference data types.
+
+Example:
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct IndexPage {
+  // Incorrect: @State message: string | Resource = 'Hello World'
+  @State message: string = 'Hello World'
+
+  build() {
+    Row() {
+      Column() {
+        Text(`${this.message}`)
+          .fontSize(50)
+          .fontWeight(FontWeight.Bold)
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+![hello](figures/hello.PNG)
+
+## Initialization and Restrictions of Custom Components' Member Variables
+
+The member variables of a component can be initialized in either of the following ways:
+
+- Local initialization:
+
+  ```ts
+  @State counter: Counter = new Counter()
+  ```
+- Initialization using constructor parameters:
+
+  ```ts
+  MyComponent({counter: $myCounter})
+  ```
+
+The allowed method depends on the decorator of the state variable, as shown in the following table.
+
+| Decorator       | Local Initialization| Initialization Using Constructor Parameters|
+| ------------ | ----- | ----------- |
+| @State       | Mandatory   | Optional         |
+| @Prop        | Forbidden   | Mandatory         |
+| @Link        | Forbidden   | Mandatory         |
+| @StorageLink | Mandatory   | Forbidden         |
+| @StorageProp | Mandatory   | Forbidden         |
+| @Provide     | Mandatory   | Optional         |
+| @Consume     | Forbidden   | Forbidden         |
+| @ObjectLink  | Forbidden   | Mandatory         |
+| Normal member variable      | Recommended   | Optional         |
+
+As indicated by the preceding table:
+
+- The **@State** decorated variables must be initialized locally. Their initial values can be overwritten by the constructor parameters.
+
+- The **@Prop** and **@Link** decorated variables must be initialized only by constructor parameters.
+
+Comply with the following rules when using constructors to initialize member variables:
+
+| From the Variable in the Parent Component (Below) to the Variable in the Child Component (Right)| @State | @Link  | @Prop  | Normal Variable|
+| -------------------------------------------- | ------ | ------ | ------ | -------- |
+| @State                                       | Not allowed| Allowed  | Allowed  | Allowed    |
+| @Link                                        | Not allowed| Allowed  | Not recommended| Allowed    |
+| @Prop                                        | Not allowed| Not allowed| Allowed  | Allowed    |
+| @StorageLink                                 | Not allowed| Allowed  | Not allowed| Not allowed  |
+| @StorageProp                                 | Not allowed| Not allowed| Not allowed| Allowed    |
+| Normal variable                                    | Allowed  | Not allowed| Not allowed| Allowed    |
+
+As indicated by the preceding table:
+
+- The normal variables of the parent component can be used to initialize the **@State** decorated variables of the child component, but not the **@Link** or **@Prop** decorated variables.
+
+- The **@State** decorated variable of the parent component can be used to initialize the **@Prop**, **@Link** (using **$**), or normal variables of the child component, but not the **@State** decorated variables of the child component.
+
+- The **@Link** decorated variables of the parent component can be used to initialize the **@Link** decorated or normal variables of the child component. However, initializing the **@State** decorated members of the child component can result in a syntax error. In addition, initializing the **@Prop** decorated variables is not recommended.
+
+- The **@Prop** decorated variables of the parent component can be used to initialize the normal variables or **@Prop** decorated variables of the child component, but not the **@State** or **@Link** decorated variables.
+
+- Passing **@StorageLink** and **@StorageProp** from the parent component to the child component is prohibited.
+
+- In addition to the preceding rules, the TypeScript strong type rules need to be followed.

en/application-dev/quick-start/arkts-state-mgmt-application-level.md

+# State Management with Application-level Variables
+
+This topic covers how to manage the application status with application-level variables. For details about the APIs, see [State Management with Application-level Variables](../reference/arkui-ts/ts-state-management.md).
+
+## AppStorage
+
+The [AppStorage](../reference/arkui-ts/ts-state-management.md#appstorage) is a singleton object in an application that provides central storage for changing state attributes of an application. It is created by the UI framework when the application is started and destroyed when the application exits.
+
+The **AppStorage** contains all the state attributes that need to be accessed throughout the application. It retains all attributes and their values as long as the application remains running, and the attribute values can be accessed through unique key values.
+
+Components can synchronize the application state data with the **AppStorage** through decorators. The application service logic can also be implemented by accessing the **AppStorage** through APIs.
+
+The selection state attribute of the **AppStorage** can be synchronized with different data sources or data sinks. These data sources and data sinks can be local or remote devices and provide different functions, such as data persistence. Such data sources and data sinks can be implemented independently of the UI in the service logic.
+
+By default, the attributes in the **AppStorage** are mutable. If needed, **AppStorage** can also use immutable (read-only) attributes.
+
+> **NOTE**
+>
+> [Worker](../reference/apis/js-apis-worker.md) can interact with the main thread only through [postMessage](../reference/apis/js-apis-worker.md#postmessage).
+
+### @StorageLink Decorator
+
+Two-way data binding can be established between components and the **AppStorage** through state variables decorated by **@StorageLink(*key*)**. Wherein, **key** is the attribute key value in the **AppStorage**. When a component containing the **@StorageLink** decorated variable is created, the variable is initialized using the value in the **AppStorage**. Changes made to this variable in the component will be first synchronized to the **AppStorage**, and then to other bound instances, such as **PersistentStorage** or other bound UI components.
+
+### @StorageProp Decorator
+
+One-way data binding can be established between components and the **AppStorage** through state variables decorated by **@StorageProp(*key*)**. Wherein, **key** is the attribute key value in the **AppStorage**. When a component containing the **@StorageProp** decorated variable is created, the variable is initialized using the value in the **AppStorage**. Changes made to the value in the **AppStorage** will cause the bound UI component to update the state.
+
+### Example
+
+Each time the user clicks the **Count** button, the value of **this.varA** will increase by 1. This variable is synchronized with **varA** in the **AppStorage**. Each time the user clicks the language button, the value of **languageCode** in the **AppStorage** will be changed, and the change is synchronized to the **this.languageCode** variable.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ComponentA {
+  @StorageLink('varA') varA: number = 2
+  @StorageProp('languageCode') languageCode: string = 'en'
+  private label: string = 'count'
+
+  aboutToAppear() {
+    this.label = (this.languageCode === 'en') ? 'Number' : 'Count'
+  }
+
+  build() {
+    Column() {
+      Row({ space: 20 }) {
+        Button(`${this.label}: ${this.varA}`)
+          .onClick(() => {
+            AppStorage.Set<number>('varA', AppStorage.Get<number>('varA') + 1)
+          })
+        Button(`language: ${this.languageCode}`)
+          .onClick(() => {
+            if (AppStorage.Get<string>('languageCode') === 'zh') {
+              AppStorage.Set<string>('languageCode', 'en')
+            } else {
+              AppStorage.Set<string>('languageCode', 'zh')
+            }
+            this.label = (this.languageCode === 'en') ? 'Number' : 'Count'
+          })
+      }
+      .margin({ bottom: 50 })
+
+      Row() {
+        Button (`Change @StorageLink decorated variable: ${this.varA}`).height(40).fontSize(14)
+          .onClick(() => {
+            this.varA++
+          })
+      }.margin({ bottom: 50 })
+
+      Row() {
+        Button (`Change @StorageProp decorated variable: ${this.languageCode}`).height(40).fontSize(14)
+          .onClick(() => {
+            if (this.languageCode === 'zh') {
+              this.languageCode = 'en'
+            } else {
+              this.languageCode = 'zh'
+            }
+          })
+      }
+    }
+  }
+}
+```
+
+![appstorage](figures/appstorage.gif)
+
+## LocalStorage
+
+> **NOTE**
+> 
+> This API is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
+
+The **LocalStorage** is a storage unit in an application. Its lifecycle follows its associated ability. In the stage model, the **LocalStorage** provides global data isolation between abilities and applies to where a data sharing scope smaller than that provided by the **AppStorage** is required. The **LocalStorage** also provides storage for application-wide mutable and immutable state attributes, which are used for building part of the application UI, such as an ability UI. The **LocalStorage** resolves the data interference between the application and the abilities and, in multi-instance scenarios, data interference between different **Ability** instances under the same **Ability** class. In distributed migration scenarios, **Ability**, as the minimum unit for the system to schedule applications, allows for easier component data migration when working with the **LocalStorage**.
+
+At the application layer, multiple **LocalStorage** instances can be created for an application, each corresponding to an ability of the application.
+
+An application can have multiple abilities. At most one **LocalStorage** instance can be allocated to the components in an ability. In addition, all components in the ability inherit access to the objects stored in the **LocalStorage** instance.
+
+A component can access a maximum of one **LocalStorage** instance, and one **LocalStorage** instance can be assigned to multiple components.
+
+### @LocalStorageLink Decorator
+
+Two-way data binding can be established between a component and the **LocalStorage** through the component's state variable decorated by **@LocalStorageLink(*key*)**. Wherein, **key** is the attribute key value in the **LocalStorage**. When a component that contains a **@LocalStorageLink** decorated state variable is created, the state variable is initialized with the initial value in the **LocalStorage**. If no initial value is assigned in the **LocalStorage**, the state variable will use the value defined by **@LocalStorageLink**. Changes made to the **@LocalStorageLink** decorated variable in a component will be first synchronized to the **LocalStorage**, and then to other bound UI components under the same ability.
+
+### @LocalStorageProp Decorator
+
+One-way data binding can be established between a component and the **LocalStorage** through the component's state variable decorated by **@LocalStorageProp(*key*)**. Wherein, **key** is the attribute key value in the **LocalStorage**. When a component that contains a **@LocalStorageProp** decorated state variable is created, the state variable is initialized with the initial value in the **LocalStorage**. Changes made to the value in the **LocalStorage** will cause all UI components under the current ability to update the state.
+
+> **NOTE**
+>
+> If a **LocalStorage** instance has initial values assigned when being created, these values will be used for the **@LocalStorageLink** and **@LocalStorageProp** decorated state variables in the component. Otherwise, the initial values assigned for **@LocalStorageLink** and **@LocalStorageProp** will be used instead.
+
+### Example 1: Creating a LocalStorage Instance in an Ability
+
+The **LocalStorage** is loaded through the **loadContent** API. For details, see [loadContent](../reference/apis/js-apis-window.md#loadcontent9-1).
+
+```ts
+// MainAbility.ts
+import Ability from '@ohos.application.Ability'
+
+export default class MainAbility extends Ability {
+    storage: LocalStorage
+
+    onCreate() {
+        this.storage = new LocalStorage()
+        this.storage.setOrCreate('storageSimpleProp', 121)
+        console.info('[Demo MainAbility onCreate]')
+    }
+
+    onDestroy() {
+        console.info('[Demo MainAbility onDestroy]')
+    }
+
+    onWindowStageCreate(windowStage) {
+        // storage is passed to the loadContent API as a parameter.
+        windowStage.loadContent('pages/index', this.storage)
+    }
+
+    onWindowStageDestroy() {
+        console.info('[Demo] MainAbility onWindowStageDestroy')
+    }
+
+    onForeground() {
+        console.info('[Demo] MainAbility onForeground')
+    }
+
+    onBackground() {
+        console.info('[Demo] MainAbility onBackground')
+    }
+}
+```
+
+The **@Component** decorated component obtains data.
+
+```ts
+// index.ets
+let storage = LocalStorage.GetShared()
+
+@Entry(storage)
+@Component
+struct LocalStorageComponent {
+  @LocalStorageLink('storageSimpleProp') simpleVarName: number = 0
+
+  build() {
+    Column() {
+      Button(`LocalStorageLink: ${this.simpleVarName.toString()}`)
+        .margin(20)
+        .onClick(() => {
+          this.simpleVarName += 1
+        })
+      Text(JSON.stringify(this.simpleVarName))
+        .fontSize(50)
+      LocalStorageComponentProp()
+    }.width('100%')
+  }
+}
+
+@Component
+struct LocalStorageComponentProp {
+  @LocalStorageProp('storageSimpleProp') simpleVarName: number = 0
+
+  build() {
+    Column() {
+      Button(`LocalStorageProp: ${this.simpleVarName.toString()}`)
+        .margin(20)
+        .onClick(() => {
+          this.simpleVarName += 1
+        })
+      Text(JSON.stringify(this.simpleVarName))
+        .fontSize(50)
+    }.width('100%')
+  }
+}
+```
+
+![appstorage1](figures/appstorage1.gif)
+
+### Example 2: Defining LocalStorage on the Entry Page
+
+```ts
+// xxx.ets
+let storage = new LocalStorage({ "PropA": 47 })
+
+@Entry(storage)
+@Component
+struct ComA {
+  @LocalStorageLink("PropA") storageLink: number = 1
+
+  build() {
+    Column() {
+      Text(`Parent from LocalStorage ${this.storageLink}`)
+        .fontSize(18)
+        .margin(20)
+        .onClick(() => this.storageLink += 1)
+      Child()
+    }
+  }
+}
+
+@Component
+struct Child {
+  @LocalStorageLink("PropA") storageLink: number = 1
+
+  build() {
+    Text(`Child from LocalStorage ${this.storageLink}`)
+      .fontSize(18)
+      .margin(20)
+      .onClick(() => this.storageLink += 1)
+  }
+}
+```
+
+![appstorage2](figures/appstorage2.gif)
+
+## PersistentStorage
+
+[PersistentStorage](../reference/arkui-ts/ts-state-management.md#persistentstorage) provides a set of static methods for managing persistent data of applications. Persistent data with specific tags can be linked to the **AppStorage**, and then the persistent data can be accessed through the **AppStorage** APIs. Alternatively, the **@StorageLink** decorator can be used to access the variable that matches the specific key.
+
+> **NOTE**
+>
+> - When using the **PersistProp** API in **PersistentStorage**, ensure that the input key exists in the **AppStorage**.
+> - The **DeleteProp** API in **PersistentStorage** takes effect only for the data that has been linked during the current application startup.
+
+```ts
+// xxx.ets
+PersistentStorage.PersistProp('highScore', '0')
+
+@Entry
+@Component
+struct PersistentComponent {
+  @StorageLink('highScore') highScore: string = '0'
+  @State currentScore: number = 0
+
+  build() {
+    Column() {
+      if (this.currentScore === Number(this.highScore)) {
+        Text(`new highScore : ${this.highScore}`).fontSize(18)
+      }
+      Button(`goal!, currentScore : ${this.currentScore}`)
+        .margin(20)
+        .onClick(() => {
+          this.currentScore++
+          if (this.currentScore > Number(this.highScore)) {
+            this.highScore = this.currentScore.toString()
+          }
+        })
+    }.width('100%')
+  }
+}
+```
+
+![appstorage3](figures/appstorage3.gif)
+
+## Environment
+
+[Environment](../reference/arkui-ts/ts-state-management.md#environment) is a singleton object created by the framework when the application is started. It provides the **AppStorage** with an array of environment state attributes required by the application. These attributes, such as the system language and color mode, describe the device environment where the application runs. **Environment** and its attributes are immutable, and all attribute values are of simple types. The following example shows how to obtain whether accessibility is enabled from **Environment**:
+
+```ts
+Environment.EnvProp('accessibilityEnabled', 'default')
+var enable = AppStorage.Get('accessibilityEnabled')
+```
+
+**accessibilityEnabled** is the default system variable identifier provided by **Environment**. You need to bind the corresponding system attribute to the **AppStorage**. Then, you can use the methods or decorators in the **AppStorage** to access the corresponding system attribute data.

en/application-dev/quick-start/arkts-state-mgmt-concepts.md

+# Basic Concepts
+
+In the multi-dimensional state management mechanism for ArkUI, UI-related data can be used not only within a component, but also be transferred between different component levels (for example, between parent and child components, between grandparent and grandchild components, or globally). In addition, data transfer can be classified as one-way (read-only) or two-way (mutable). You can use these capabilities at your disposal to implement linkage between data and the UI.
+
+
+![](figures/CoreSpec_figures_state-mgmt-overview.png)
+
+
+## State Management with Page-level Variables
+
+| Decorator     | Decorates...                 | Description                                                        |
+| ----------- | ------------------------- | ------------------------------------------------------------ |
+| @State      | Primitive data types, classes, and arrays   | If the decorated state data is modified, the **build** method of the component will be called to update the UI. |
+| @Prop       | Primitive data types             | This decorator is used to establish one-way data binding between the parent and child components. When the data associated with the parent component is modified, the UI of the current component is re-rendered.|
+| @Link       | Primitive data types, classes, and arrays   | This decorator is used to establish two-way data binding between the parent and child components. The internal state data of the parent component is used as the data source. Any changes made to one component will be reflected to the other.|
+| @Observed   | Class                       | This decorator is used to indicate that the data changes in the class will be managed by the UI page.       |
+| @ObjectLink | Objects of **@Observed** decorated classes| When the decorated state variable is modified, the parent and sibling components that have the state variable will be notified for UI re-rendering.|
+| @Consume    | Primitive data types, classes, and arrays   | When the **@Consume** decorated variable detects the update of the **@Provide** decorated variable, the re-rendering of the current custom component is triggered.|
+| @Provide    | Primitive data types, classes, and arrays   | As the data provider, **@Provide** can update the data of child nodes and trigger page re-rendering.|
+
+## State Management with Application-level Variables
+
+**AppStorage** is the central store of the application states in the entire UI. ArkUI creates a singleton **AppStorage** object for the application and provides the corresponding decorators and APIs for the application.
+
+- **@StorageLink**: works in a way similar to that of **@Consume**. The difference is that the target object is obtained from the **AppStorage** based on the given name. **@StorageLink** establishes two-way binding between the decorated UI component and **AppStorage** to synchronize data.
+- **@StorageProp**: synchronizes UI component attributes with the **AppStorage** unidirectionally. That is, the value change in the **AppStorage** will trigger an update of the corresponding UI component, but the change of the UI component will not cause an update of the attribute value in the **AppStorage**.
+- Service logic implementation API: adds, reads, modifies, or deletes the state data of applications. The changes made by this API will be synchronized to the UI component for UI update.
+- **PersistentStorage**: provides a set of static methods for managing persistent data of applications. Persistent data with specific tags can be linked to the **AppStorage**, and then the persistent data can be accessed through the **AppStorage** APIs. Alternatively, the **@StorageLink** decorator can be used to access the variable that matches the specific key.
+- **Environment**: provides the **AppStorage** with an array of environment state attributes that are required by the application and describe the device environment where the application runs. It is a singleton object created by the framework when the application is started.

en/application-dev/quick-start/arkts-state-mgmt-page-level.md

+# State Management with Page-level Variables
+
+This topic covers how to manage the states with page-level variables with the **@State**, **@Prop**, **@Link**, **@Provide**, **@Consume**, **@ObjectLink**, **@Observed**, and **@Watch** decorators.
+
+For details about the constraints of the **@State**, **@Provide**, **@Link**, and **@Consume** decorated state variables, see [Restrictions on Data Type Declarations of State Variables](./arkts-restrictions-and-extensions.md).
+
+## @State
+
+The **@State** decorated variable is the internal state data of the component. When the state data is modified, the **build** method of the component is called to refresh the UI.
+
+The **@State** data has the following features:
+
+- Support for multiple types: The following types are supported: strong types by value and by reference, including **class**, **number**, **boolean**, **string**, as well as arrays of these types, that is, **Array\<class>**, **Array\<number>**, **Array\<boolean>**, and **Array\<string>**. **object** and **any** are not supported.
+- Support for multiple instances: Multiple instances can coexist in a component. The internal state data of different instances is independent.
+- **Private**: An attribute marked with **@State** can only be accessed within the component.
+- Local initialization required: Initial values must be allocated to all **@State** decorated variables. Uninitialized variables may cause undefined framework exceptions.
+- Support for setting of initial attribute values based on the state variable name: When creating a component instance, you can explicitly specify the initial value of the **@State** decorated attribute based on the variable name.
+
+**Example**
+
+In the following example:
+
+- Two **@State** decorated variables, **count** and **title**, have been defined for **MyComponent**. If the value of **count** or **title** changes, the **build** method of **MyComponent** needs to be called to render the component again.
+
+- The **EntryComponent** has multiple **MyComponent** instances. The internal status change of the first **MyComponent** instance does not affect the second **MyComponent** instance.
+
+- When creating a **MyComponent** instance, initialize the variables in the component based on the variable name. For example:
+
+  ```ts
+  MyComponent({ title: { value: 'Hello World 2' }, count: 7 })
+  ```
+
+```ts
+// xxx.ets
+class Model {
+  value: string
+
+  constructor(value: string) {
+    this.value = value
+  }
+}
+
+@Entry
+@Component
+struct EntryComponent {
+  build() {
+    Column() {
+      MyComponent ({ count: 1,increaseBy:2 }) // First MyComponent instance
+      MyComponent({ title: { value:'Hello World 2' }, count: 7 }) // Second MyComponent instance
+    }
+  }
+}
+
+@Component
+struct MyComponent {
+  @State title: Model = { value: 'Hello World' }
+  @State count: number = 0
+  private toggle: string = 'Hello World'
+  private increaseBy: number = 1
+
+  build() {
+    Column() {
+      Text(`${this.title.value}`).fontSize(30)
+      Button('Click to change title')
+        .margin(20)
+        .onClick(() => {
+          // Change the value of the internal status variable title.
+          this.title.value = (this.toggle == this.title.value) ? 'Hello World' : 'Hello ArkUI'
+        })
+
+      Button(`Click to increase count=${this.count}`)
+        .margin(20)
+        .onClick(() => {
+          // Change the value of the internal status variable count.
+          this.count += this.increaseBy
+        })
+    }
+  }
+}
+```
+
+
+## @Prop
+
+**@Prop** and **@State** have the same semantics but different initialization modes. Variables decorated by **@Prop** must be initialized using the **@State** decorated variable provided by their parent components. The **@Prop** decorated variable can be modified in the component, but the modification is not updated to the parent component; that is, **@Prop** uses one-way data binding.
+
+The **@Prop** decorated state variable has the following features:
+
+- Support for simple types: The number, string, and boolean types are supported.
+- Private: Data is accessed only within the component.
+- Support for multiple instances: A component can have multiple attributes decorated by **@Prop**.
+- Support for initialization with a value passed to the @Prop decorated variable: When a new instance of the component is created, all **@Prop** decorated variables must be initialized. Initialization inside the component is not supported.
+
+**Example**
+
+In the preceding example, when the user presses **+1** or **-1**, the status of the parent component changes and the **build** method is executed again. In this case, a new **CountDownComponent** instance is created. The **countDownStartValue** attribute of the parent component is used to initialize the **@Prop** decorated variable of the child component. When the **count - costOfOneAttempt** button of the child component is touched, the value of the **@Prop** decorated variable **count** is changed. As a result, the **CountDownComponent** is rendered again. However, the change of the **count** value does not affect the **countDownStartValue** value of the parent component.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ParentComponent {
+  @State countDownStartValue: number = 10 // Initialize countDownStartValue
+
+  build() {
+    Column() {
+      Text(`Grant ${this.countDownStartValue} nuggets to play.`).fontSize(18)
+      Button('+1 - Nuggets in New Game')
+        .margin(15)
+        .onClick(() => {
+          this.countDownStartValue += 1
+        })
+
+      Button('-1  - Nuggets in New Game')
+        .margin(15)
+        .onClick(() => {
+          this.countDownStartValue -= 1
+        })
+      // When creating a child component, you must provide the initial value of its @Prop decorated variable count in the constructor parameter and initialize the regular variable costOfOneAttempt (not @Prop decorated).
+      CountDownComponent({ count: this.countDownStartValue, costOfOneAttempt: 2 })
+    }
+  }
+}
+
+@Component
+struct CountDownComponent {
+  @Prop count: number
+  private costOfOneAttempt: number
+
+  build() {
+    Column() {
+      if (this.count > 0) {
+        Text(`You have ${this.count} Nuggets left`).fontSize(18)
+      } else {
+        Text('Game over!').fontSize(18)
+      }
+
+      Button('count - costOfOneAttempt')
+        .margin(15)
+        .onClick(() => {
+          this.count -= this.costOfOneAttempt
+        })
+    }
+  }
+}
+```
+
+
+## @Link
+
+Two-way binding can be established between the **@Link** decorated variable and the **@State** decorated variable of the parent component. The **@Link** data has the following features:
+
+- Support for multiple types: The **@Link** decorated variables support the data types the same as the **@State** decorated variables; that is, the value can be of the following types: class, number, string, boolean, or arrays of these types.
+- Private: Data is accessed only within the component.
+- Single data source: The variable of the parent component used for initializing the **@Link** decorated variable must be a **@State** decorated variable.
+- **Two-way binding**: When a child component changes the **@Link** decorated variable, the **@State** decorated variable of its parent component is also changed.
+- Support for initialization with the variable reference passed to the @Link decorated variable: When creating an instance of the component, you must use the naming parameter to initialize all **@Link** decorated variables. **@Link** decorated variables can be initialized by using the reference of the **@State** or **@Link** decorated variable. Wherein, the **@State** decorated variables can be referenced using the **'$'** operator.
+
+> **NOTE**
+>
+> **@Link** decorated variables cannot be initialized within the component.
+
+**Simple Type Example**
+
+The **@Link** semantics are derived from the '**$**' operator. In other words, **$isPlaying** is the two-way binding of the internal state **this.isPlaying**. When the button in the **PlayButton** child component is touched, the value of the **@Link** decorated variable is changed, and **PlayButton** together with the **\<Text>** and **\<Button>** components of the parent component is refreshed. Similarly, when the button in the parent component is touched, the value of **this.isPlaying** is changed, and **PlayButton** together with the **\<Text>** and **\<Button>** components of the parent component is refreshed.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Player {
+  @State isPlaying: boolean = false
+
+  build() {
+    Column() {
+      PlayButton({ buttonPlaying: $isPlaying })
+      Text(`Player is ${this.isPlaying ? '' : 'not'} playing`).fontSize(18)
+      Button('Parent:' + this.isPlaying)
+        .margin(15)
+        .onClick(() => {
+          this.isPlaying = !this.isPlaying
+        })
+    }
+  }
+}
+
+@Component
+struct PlayButton {
+  @Link buttonPlaying: boolean
+
+  build() {
+    Column() {
+      Button(this.buttonPlaying ? 'pause' : 'play')
+        .margin(20)
+        .onClick(() => {
+          this.buttonPlaying = !this.buttonPlaying
+        })
+    }
+  }
+}
+```
+
+**Complex Type Example**
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct Parent {
+  @State arr: number[] = [1, 2, 3]
+
+  build() {
+    Column() {
+      Child({ items: $arr })
+      Button('Parent Button: splice')
+        .margin(10)
+        .onClick(() => {
+          this.arr.splice(0, 1, 60)
+        })
+      ForEach(this.arr, item => {
+        Text(item.toString()).fontSize(18).margin(10)
+      }, item => item.toString())
+    }
+  }
+}
+
+
+@Component
+struct Child {
+  @Link items: number[]
+
+  build() {
+    Column() {
+      Button('Child Button1: push')
+        .margin(15)
+        .onClick(() => {
+          this.items.push(100)
+        })
+      Button('Child Button2: replace whole item')
+        .margin(15)
+        .onClick(() => {
+          this.items = [100, 200, 300]
+        })
+    }
+  }
+}
+```
+
+**Example of Using @Link, @State, and @Prop Together**
+
+In the following example, **ParentView** contains two child components: **ChildA** and **ChildB**. The **counter** state variable of **ParentView** is used to initialize the **@Prop** decorated variable of **ChildA** and the **@Link** decorated variable of **ChildB**.
+
+- **@Link** establishes two-way binding between **ChildB** and **ParentView**.Value changes of the **counterRef** state variable in **ChildB** will be synchronized to **ParentView** and **ChildA**.
+- **@Prop** establishes one-way binding between **ChildA** and **ParentView**. Value changes of the **counterVal** state variable in **ChildA** will trigger a re-render of **ChildA**, but will not be synchronized to **ParentView** or **ChildB**.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct ParentView {
+  @State counter: number = 0
+
+  build() {
+    Column() {
+      ChildA({ counterVal: this.counter })
+      ChildB({ counterRef: $counter })
+    }
+  }
+}
+
+@Component
+struct ChildA {
+  @Prop counterVal: number
+
+  build() {
+    Button(`ChildA: (${this.counterVal}) + 1`)
+      .margin(15)
+      .onClick(() => {
+        this.counterVal += 1
+      })
+  }
+}
+
+@Component
+struct ChildB {
+  @Link counterRef: number
+
+  build() {
+    Button(`ChildB: (${this.counterRef}) + 1`)
+      .margin(15)
+      .onClick(() => {
+        this.counterRef += 1
+      })
+  }
+}
+```
+
+## @Observed and @ObjectLink
+
+When you need to set up bidirectional synchronization for a parent variable (**parent_a**) between the parent and child components, you can use **@State** to decorate the variable (**parent_a**) in the parent component and use **@Link** to decorate the corresponding variable (**child_a**) in the child component. In this way, data can be synchronized between the parent component and the specific child component, and between the parent component and its other child components. As shown below, bidirectional synchronization is configured for variables of **ClassA** in the parent and child components. If attribute **c** of the variable in child component 1 has its value changed, the parent component will be notified to synchronize the change. If attribute **c** in the parent component has its value changed, all child components will be notified to synchronize the change.
+
+![en-us_image_0000001251090821](figures/en-us_image_0000001251090821.png)
+
+In the preceding example, full synchronization is performed for a data object. If you want to synchronize partial information of a data object in a parent component, and if the information is a class object, use **@ObjectLink** and **@Observed** instead, as shown below.
+
+![en-us_image_0000001206450834](figures/en-us_image_0000001206450834.png)
+
+### Configuration Requirements
+
+- **@Observed** applies to classes, and **@ObjectLink** applies to variables.
+
+- The variables decorated by **@ObjectLink** must be of the class type.
+  - The classes must be decorated by **@Observed**.
+  - Parameters of the simple types are not supported. You can use **@Prop** to perform unidirectional synchronization.
+
+- **@ObjectLink** decorated variables are immutable.
+  - Attribute changes are allowed. If an object is referenced by multiple **@ObjectLink** decorated variables, all custom components that have these variables will be notified for re-rendering.
+
+- Default values cannot be set for **@ObjectLink** decorated variables.
+  - The parent component must be initialized with a TypeScript expression that involves variables decorated by **@State**, **@Link**, **@StorageLink**, **@Provide**, or **@Consume**.
+
+- **@ObjectLink** decorated variables are private variables and can be accessed only within the component.
+
+
+### Example
+
+```ts
+// xxx.ets
+// Use @ObjectLink and @Observed to set up bidirectional synchronization for the class object ClassA between the parent component ViewB and the child component ViewA. In this way, changes made to ClassA in ViewA will be synchronized to ViewB and other child components bound to ClassA.
+var nextID: number = 0
+
+@Observed
+class ClassA {
+  public name: string
+  public c: number
+  public id: number
+
+  constructor(c: number, name: string = 'OK') {
+    this.name = name
+    this.c = c
+    this.id = nextID++
+  }
+}
+
+@Component
+struct ViewA {
+  label: string = 'ViewA1'
+  @ObjectLink a: ClassA
+
+  build() {
+    Row() {
+      Button(`ViewA [${this.label}] this.a.c= ${this.a.c} +1`)
+        .onClick(() => {
+          this.a.c += 1
+        })
+    }.margin({ top: 10 })
+  }
+}
+
+@Entry
+@Component
+struct ViewB {
+  @State arrA: ClassA[] = [new ClassA(0), new ClassA(0)]
+
+  build() {
+    Column() {
+      ForEach(this.arrA, (item) => {
+        ViewA({ label: `#${item.id}`, a: item })
+      }, (item) => item.id.toString())
+      ViewA({ label: `this.arrA[first]`, a: this.arrA[0] })
+      ViewA({ label: `this.arrA[last]`, a: this.arrA[this.arrA.length - 1] })
+
+      Button(`ViewB: reset array`)
+        .margin({ top: 10 })
+        .onClick(() => {
+          this.arrA = [new ClassA(0), new ClassA(0)]
+        })
+      Button(`ViewB: push`)
+        .margin({ top: 10 })
+        .onClick(() => {
+          this.arrA.push(new ClassA(0))
+        })
+      Button(`ViewB: shift`)
+        .margin({ top: 10 })
+        .onClick(() => {
+          this.arrA.shift()
+        })
+    }.width('100%')
+  }
+}
+```
+
+
+## @Consume and @Provide
+
+As the data provider, **@Provide** can update the data of child nodes and trigger page rendering. After **@Consume** detects that the **@Provide** decorated variable is updated, it will initiate re-rendering of the current custom component.
+
+> **NOTE**
+>
+> To avoid infinite loops caused by circular reference, exercise caution when using **@Provide** and **@Consume**.
+
+### @Provide
+
+| Name          | Description                                                        |
+| -------------- | ------------------------------------------------------------ |
+| Decorator parameter    | A constant of the string type, which is used to set an alias for a decorated variable. If an alias is specified, implement the data update for this alias. If there is no alias, use the variable name as the alias. **@Provide(*'alias'*)** is recommended.|
+| Synchronization mechanism      | The **@Provide** decorated variable is similar to the **@State** decorated variable. You can change the value of the variable to trigger a re-render. You can also modify the **@Consume** decorated variable to modify the **@State** decorated variable reversely.|
+| Initial value        | The initial value must be set.                                            |
+| Page re-rendering scenarios| Page re-rendering is triggered in the following scenarios:<br>- Changes of variables of simple types (boolean, string, and number)<br>- Changes of the **@Observed** decorated classes or their attributes<br>- Addition, deletion, or updating of elements in an array|
+
+### @Consume
+
+| Type  | Description            |
+| ------ | ---------------- |
+| Initial value| The default initial value cannot be set.|
+
+### Example
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct CompA {
+  @Provide("reviewVote") reviewVotes: number = 0;
+
+  build() {
+    Column() {
+      CompB()
+      Button(`CompA: ${this.reviewVotes}`)
+        .margin(10)
+        .onClick(() => {
+          this.reviewVotes += 1;
+        })
+    }
+  }
+}
+
+@Component
+struct CompB {
+  build() {
+    Column() {
+      CompC()
+    }
+  }
+}
+
+@Component
+struct CompC {
+  @Consume("reviewVote") reviewVotes: number
+
+  build() {
+    Column() {
+      Button(`CompC: ${this.reviewVotes}`)
+        .margin(10)
+        .onClick(() => {
+          this.reviewVotes += 1
+        })
+    }.width('100%')
+  }
+}
+```
+
+## @Watch
+
+**@Watch** is used to listen for changes of state variables. The syntax structure is as follows:
+
+```ts
+@State @Watch("onChanged") count : number = 0
+```
+
+As shown above, add an **@Watch** decorator to the target state variable to register an **onChanged** callback. When the state variable **count** is changed, the **onChanged** callback will be triggered.
+
+**@Watch** can be used to listen for value changes of variables decorated by **@State**, **@Prop**, **@Link**, **@ObjectLink**, **@Provide**, **@Consume**, **@StorageProp**, and **@StorageLink**.
+
+
+>  **NOTE**
+>
+>  **@Watch** cannot be used to listen for in-depth data modification, such as changes of object values in an array.
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct CompA {
+  @State @Watch('onBasketUpdated') shopBasket: Array<number> = [7, 12, 47, 3]
+  @State totalPurchase: number = 0
+  @State addPurchase: number = 0
+
+  aboutToAppear() {
+    this.updateTotal()
+  }
+
+  updateTotal(): number {
+    let sum = 0;
+    this.shopBasket.forEach((i) => {
+      sum += i
+    })
+    // Calculate the total amount of items in the shopping basket. If the amount exceeds 100, the specified discount will be applied.
+    this.totalPurchase = (sum < 100) ? sum : 0.9 * sum
+    return this.totalPurchase
+  }
+
+  // This method is triggered when the value of shopBasket is changed.
+  onBasketUpdated(propName: string): void {
+    this.updateTotal()
+  }
+
+  build() {
+    Column() {
+      Button('add to basket ' + this.addPurchase)
+        .margin(15)
+        .onClick(() => {
+          this.addPurchase = Math.round(100 * Math.random())
+          this.shopBasket.push(this.addPurchase)
+        })
+      Text(`${this.totalPurchase}`)
+        .fontSize(30)
+    }
+  }
+}
+```

en/application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md

@@ -13,4 +13,4 @@ HUAWEI DevEco Studio For OpenHarmony (DevEco Studio for short) is a one-stop int
 - **One-stop information acquisition**: A one-stop information acquisition platform that takes into account the developer journey of learning, development, and help seeking, in order to facilitate developer activities.
 - **Efficient code debugging**: Various debugging capabilities such as TS, JS, and C/C++ code breakpoint setting, single-step execution, and variable viewing, improving the efficiency of analyzing application/service issues.
 
-For more information, see [DevEco Studio (OpenHarmony) User Guide](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-deveco-studio-overview-0000001263280421).
+For more information, see [DevEco Studio User Guide (OpenHarmony)](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-deveco-studio-overview-0000001263280421).

en/application-dev/quick-start/full-sdk-switch-guide.md

@@ -16,7 +16,7 @@ Manually download the system-specific full SDK package from the mirror. For deta
 
 ## Checking the Local SDK Location
 
-In this example, an eTS project is used. For a JS project, replace **ets** with **js**.
+In this example, an ArkTS project is used. For a JS project, replace **ets** with **js**.
 
 In DevEco Studio, choose **Tools** > **OpenHarmony SDK Manager** to check the location of the local SDK.
 

en/application-dev/quick-start/start-overview.md

@@ -2,10 +2,8 @@
 
 This document is intended for novices at developing OpenHarmony applications. It will introduce you to the OpenHarmony project directory structure and application development process, by walking you through a stripped-down, real-world example – building two pages and implementing redirection between them. The following figure shows how the pages look on the DevEco Studio Previewer.
 
-
 ![en-us_image_0000001364254729](figures/en-us_image_0000001364254729.png)
 
-
 Before you begin, there are two basic concepts that will help you better understand OpenHarmony: UI framework and ability.
 
 

en/application-dev/quick-start/start-with-ets-fa.md

@@ -5,31 +5,33 @@
 >
 >  To use ArkTS, your DevEco Studio must be V3.0.0.601 Beta1 or later.
 >
->  For best possible results, use [DevEco Studio V3.0.0.993](https://developer.harmonyos.com/cn/develop/deveco-studio#download) for your development.
+>  For best possible results, use [DevEco Studio V3.1.0.100](https://developer.harmonyos.com/cn/develop/deveco-studio) for your development.
 
 
-## Creating an eTS Project
+## Creating an ArkTS Project
 
 1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. On the **OpenHarmony** tab of the **Choose Your Ability Template** page, select **Empty Ability** and click **Next**.
 
    ![01](figures/01.png)
 
-2. In the project configuration page, set **Compile SDK** to **8** or **9** (in the latter case, you also need to set **Model** to **FA**) and **Language** to **eTS** and retain the default values for other parameters.
+2. In the project configuration page, set **Compile SDK** to **8** or **9** (in the latter case, you also need to set **Model** to **FA**) and **Language** to **ArkTS** and retain the default values for other parameters.
 
    ![02](figures/02.png)
 
    > **NOTE**
-   >
+   > 
    > If you are using DevEco Studio V3.0 Beta3 or later, you can use the [low-code development](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652) mode apart from the traditional coding approach.
-   >
+   > 
    > On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
-   >
+   > 
    > To use the low-code development mode, turn on **Enable Super Visual** on the page shown above.
 
 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
 
 
-## eTS Project Directory Structure
+## ArkTS Project Directory Structure (FA Model)
+
+![en-us_image_0000001384652328](figures/en-us_image_0000001384652328.png)
 
 - **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)).
   - **src > main > ets**: a collection of eTS source code.
@@ -40,11 +42,11 @@
   - **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource Categories and Access](resource-categories-and-access.md#resource-categories).
   - **src > main > config.json**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details about the configuration file, see [Application Package Structure Configuration File (FA Model)](package-structure.md).
   - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**.
-  - **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
+  - **hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation.
 
 - **build-profile.json5**: application-level configuration information, including the signature and product configuration.
 
-- **hvigorfile.js**: application-level compilation and build task script.
+- **hvigorfile.ts**: application-level build script.
 
 
 ## Building the First Page
@@ -114,18 +116,18 @@
 
 3. On the toolbar in the upper right corner of the editing window, click **Previewer**. Below is how the first page looks in the Previewer.
 
-   ![en-us_image_0000001364254741](figures/en-us_image_0000001364254741.png)
+   ![en-us_image_0000001311334976](figures/en-us_image_0000001311334976.png)
 
 
 ## Building the Second Page
 
 1. Create the second page.
 
-   - Create the second page file: In the **Project** window, choose **entry** > **src** > **main** > **ets** > **MainAbility**. Right-click the **pages** folder, choose **New** > **eTS File**, name the page **second**, and click **Finish**. Below is the structure of the **second** folder.
-
+   - Create the second page file: In the **Project** window, choose **entry** > **src** > **main** > **ets** > **MainAbility**. Right-click the **pages** folder, choose **New** > **ArkTS File**, name the page **second**, and click **Finish**. Below is the structure of the **second** folder.
       ![en-us_image_0000001311334932](figures/en-us_image_0000001311334932.png)
 
       > **NOTE**
+      > 
       > You can also right-click the **pages** folder and choose **New** > **Page** from the shortcut menu. In this scenario, you do not need to manually configure page routes.
    - Configure the route for the second page, by setting **pages/second** under **module - js - pages** in the **config.json** The sample code is as follows: The sample code is as follows:
      
@@ -184,7 +186,7 @@
 
 ## Implementing Page Redirection
 
-You can implement page redirection through the [page router](../reference/apis/js-apis-router.md#routerpush), which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
+You can implement page redirection through the [page router](../reference/apis/js-apis-router.md), which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
 
 1. Implement redirection from the first page to the second page.
 
@@ -192,6 +194,7 @@ You can implement page redirection through the [page router](../reference/apis/j
    
    ```ts
    // index.ets
+   // Import the router module.
    import router from '@ohos.router';
    
    @Entry
@@ -236,6 +239,7 @@ You can implement page redirection through the [page router](../reference/apis/j
    
    ```ts
    // second.ets
+   // Import the router module.
    import router from '@ohos.router';
    
    @Entry
@@ -273,9 +277,9 @@ You can implement page redirection through the [page router](../reference/apis/j
    }
    ```
 
-3. Open the **index.ets** file and click ![en-us_image_0000001311175120](figures/en-us_image_0000001311175120.png) in the Previewer to refresh the file. The display effect is shown in the figure below.
+3. Open the **index.ets** file and click ![en-us_image_0000001311015192](figures/en-us_image_0000001311015192.png) in the Previewer to refresh the file. The display effect is shown in the figure below.
 
-   ![en-us_image_0000001364173989](figures/en-us_image_0000001364173989.png)
+   ![en-us_image_0000001364254729](figures/en-us_image_0000001364254729.png)
 
 
 ## Running the Application on a Real Device
@@ -286,8 +290,8 @@ You can implement page redirection through the [page router](../reference/apis/j
 
    ![06](figures/06.png)
 
-3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001311494580](figures/en-us_image_0000001311494580.png). The display effect is shown in the figure below.
+3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001364054485](figures/en-us_image_0000001364054485.png). The display effect is shown in the figure below.
 
-   ![en-us_image_0000001363934577](figures/en-us_image_0000001363934577.png)
+   ![en-us_image_0000001364254729](figures/en-us_image_0000001364254729.png)
 
 Congratulations! You have finished developing your OpenHarmony application in ArkTS in the FA model. To learn more about OpenHarmony application development, see [Application Development Overview](../application-dev-guide.md).

en/application-dev/quick-start/start-with-ets-stage.md

@@ -2,13 +2,13 @@
 
 
 > **NOTE**
->
+> 
 > To use ArkTS, your DevEco Studio must be V3.0.0.900 Beta3 or later.
->
-> For best possible results, use [DevEco Studio V3.0.0.993](https://developer.harmonyos.com/cn/develop/deveco-studio#download) for your development.
+> 
+> For best possible results, use [DevEco Studio V3.1.0.100](https://developer.harmonyos.com/cn/develop/deveco-studio) for your development.
 
 
-## Creating an eTS Project
+## Creating an ArkTS Project
 
 1. If you are opening DevEco Studio for the first time, click **Create Project**. If a project is already open, choose **File** > **New** > **Create Project** from the menu bar. On the **OpenHarmony** tab of the **Choose Your Ability Template** page, select **Empty Ability** and click **Next**.
 
@@ -29,36 +29,32 @@
 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
 
 
-## eTS Project Directory Structure
+## ArkTS Project Directory Structure (Stage Model)
 
 ![en-us_image_0000001364054489](figures/en-us_image_0000001364054489.png)
 
-- **AppScope > app.json5**: application-level configuration information.
-
 - **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)).
   - **src > main > ets**: a collection of eTS source code.
-  - **src > main > ets > Application > AbilityStage.ts**: implementation of AbilityStage APIs.
-  - **src > main > ets > MainAbility**: entry to your application/service.
-  - **src > main > ets > MainAbility > MainAbility.ets**: ability lifecycle file.
-  - **src > main > ets > pages**: pages contained in **MainAbility**.
+  - **src > main > ets > entryability**: entry to your application/service.
+  - **src > main > ets > pages**: pages included in your application/service.
   - **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource Categories and Access](resource-categories-and-access.md#resource-categories).
   - **src > main > module.json5**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details about the configuration file, see [Application Package Structure Configuration File (Stage Model)](stage-structure.md).
   - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**.
-  - **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
+  - **hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation.
 
 - **build-profile.json5**: application-level configuration information, including the signature and product configuration.
 
-- **hvigorfile.js**: application-level compilation and build task script.
+- **hvigorfile.ts**: application-level build script.
 
 
 ## Building the First Page
 
 1. Use the **\<Text>** component.
 
-   After the project synchronization is complete, choose **entry** > **src** > **main** > **ets** > **pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **\<Text>** component. The sample code in the **index.ets** file is shown below:
+   After the project synchronization is complete, choose **entry** > **src** > **main** > **ets** > **pages** in the **Project** window and open the **Index.ets** file. You can see that the file contains a **\<Text>** component. The sample code in the **Index.ets** file is shown below:
    
    ```ts
-   // index.ets
+   // Index.ets
    @Entry
    @Component
    struct Index {
@@ -80,10 +76,10 @@
 
 2. Add a **\<Button>** component.
 
-   On the default page, add a **\<Button>** component to respond to user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
+   On the default page, add a **\<Button>** component to respond to user clicks and implement redirection to another page. The sample code in the **Index.ets** file is shown below:
    
    ```ts
-   // index.ets
+   // Index.ets
    @Entry
    @Component
    struct Index {
@@ -125,29 +121,30 @@
 
 1. Create the second page.
 
-   - Create the second page file: In the **Project** window, choose **entry** > **src** > **main** > **ets**. Right-click the **pages** folder, choose **New** > **eTS File**, name the page **second**, and click **Finish**. Below is the structure of the **second** folder.
+   - Create the second page file: In the **Project** window, choose **entry** > **src** > **main** > **ets**. Right-click the **pages** folder, choose **New** > **ArkTS File**, name the page **Second**, and click **Finish**. Below is the structure of the **Second** folder.
 
       ![09](figures/09.png)
 
       > **NOTE**
+      >
       > You can also right-click the **pages** folder and choose **New** > **Page** from the shortcut menu. In this scenario, you do not need to manually configure page routes.
-   - Configure the route for the second page: In the **Project** window, choose **entry** > **src** > **main** > **resources** > **base** > **profile**. In the **main_pages.json** file, set **pages/second** under **src**. The sample code is as follows:
+   - Configure the route for the second page: In the **Project** window, choose **entry** > **src** > **main** > **resources** > **base** > **profile**. In the **main_pages.json** file, set **pages/Second** under **src**. The sample code is as follows:
      
       ```json
       {
         "src": [
-          "pages/index",
-          "pages/second"
+          "pages/Index",
+          "pages/Second"
         ]
       }
       ```
 
 2. Add **\<Text>** and **\<Button>** components.
 
-   Add **\<Text>** and **\<Button>** components and set their styles, as you do for the first page. The sample code in the **second.ets** file is shown below:
+   Add **\<Text>** and **\<Button>** components and set their styles, by referring to the first page. The sample code in the **Second.ets** file is shown below:
    
    ```ts
-   // second.ets
+   // Second.ets
    @Entry
    @Component
    struct Second {
@@ -182,14 +179,15 @@
 
 ## Implementing Page Redirection
 
-You can implement page redirection through the [page router](../reference/apis/js-apis-router.md#routerpush), which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
+You can implement page redirection through the [page router](../reference/apis/js-apis-router.md), which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
 
 1. Implement redirection from the first page to the second page.
 
-   In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below:
+   In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **Index.ets** file is shown below:
    
    ```ts
-   // index.ets
+   // Index.ets
+   // Import the router module.
    import router from '@ohos.router';
    
    @Entry
@@ -218,7 +216,7 @@ You can implement page redirection through the [page router](../reference/apis/j
            .height('5%')
            // Bind the onClick event to the Next button so that clicking the button redirects the user to the second page.
            .onClick(() => {
-             router.push({ url: 'pages/second' })
+             router.push({ url: 'pages/Second' })
            })
          }
          .width('100%')
@@ -230,10 +228,11 @@ You can implement page redirection through the [page router](../reference/apis/j
 
 2. Implement redirection from the second page to the first page.
 
-   In the **second.ets** file of the second page, bind the **onClick** event to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.ets** file is shown below:
+   In the **Second.ets** file of the second page, bind the **onClick** event to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **Second.ets** file is shown below:
    
    ```ts
-   // second.ets
+   // Second.ets
+   // Import the router module.
    import router from '@ohos.router';
    
    @Entry
@@ -271,9 +270,9 @@ You can implement page redirection through the [page router](../reference/apis/j
    }
    ```
 
-3. Open the **index.ets** file and click ![en-us_image_0000001311015192](figures/en-us_image_0000001311015192.png) in the Previewer to refresh the file. The display effect is shown in the figure below.
+3. Open the **Index.ets** file and click ![en-us_image_0000001311015192](figures/en-us_image_0000001311015192.png) in the Previewer to refresh the file. The display effect is shown in the figure below.
 
-   ![en-us_image_0000001364254773](figures/en-us_image_0000001364254773.png)
+   ![en-us_image_0000001364254729](figures/en-us_image_0000001364254729.png)
 
 
 ## Running the Application on a Real Device
@@ -286,6 +285,6 @@ You can implement page redirection through the [page router](../reference/apis/j
 
 3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001364054485](figures/en-us_image_0000001364054485.png). The display effect is shown in the figure below.
 
-   ![en-us_image_0000001311334972](figures/en-us_image_0000001311334972.png)
+   ![en-us_image_0000001364254729](figures/en-us_image_0000001364254729.png)
 
 Congratulations! You have finished developing your OpenHarmony application in ArkTS in the stage model. To learn more about OpenHarmony application development, see [Application Development Overview](../application-dev-guide.md).

en/application-dev/quick-start/start-with-js-fa.md

@@ -17,11 +17,11 @@
    ![04](figures/04.png)
 
    > **NOTE**
-   >
+   > 
    > If you are using DevEco Studio V2.2 Beta1 or later, you can use the [low-code development](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652) mode apart from the traditional coding approach.
-   >
+   > 
    > On the low-code development pages, you can design your application UI in an efficient, intuitive manner, with a wide array of UI editing features.
-   >
+   > 
    > To use the low-code development mode, turn on **Enable Super Visual** on the page shown above.
 
 3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
@@ -29,6 +29,8 @@
 
 ## JavaScript Project Directory Structure
 
+![en-us_image_0000001435376433](figures/en-us_image_0000001435376433.png)
+
 - **entry**: OpenHarmony project module, which can be built into an OpenHarmony Ability Package ([HAP](../../glossary.md#hap)).
   - **src > main > js**: a collection of JavaScript source code.
   - **src > main > js > MainAbility**: entry to your application/service.
@@ -39,11 +41,11 @@
   - **src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see [Resource Limitations and Access](../ui/js-framework-resource-restriction.md).
   - **src > main > config.json**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details about the configuration file, see [Application Package Structure Configuration File (FA Model)](package-structure.md).
   - **build-profile.json5**: current module information and build configuration options, including **buildOption** and **targets**.
-  - **hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
+  - **hvigorfile.ts**: module-level build script. You can customize related tasks and code implementation.
 
 - **build-profile.json5**: application-level configuration information, including the signature and product configuration.
 
-- **hvigorfile.js**: application-level compilation and build task script.
+- **hvigorfile.ts**: application-level build script.
 
 
 ## Building the First Page
@@ -177,7 +179,7 @@
 
 ## Implementing Page Redirection
 
-You can implement page redirection through the [page router](../reference/apis/js-apis-router.md#routerpush), which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
+You can implement page redirection through the [page router](../reference/apis/js-apis-router.md), which finds the target page based on the page URL. Import the **router** module and then perform the steps below:
 
 1. Implement redirection from the first page to the second page.
 
@@ -185,6 +187,7 @@ You can implement page redirection through the [page router](../reference/apis/j
    
    ```js
    // index.js
+   // Import the router module.
    import router from '@ohos.router';
    
    export default {
@@ -202,6 +205,7 @@ You can implement page redirection through the [page router](../reference/apis/j
    
    ```js
    // second.js
+   // Import the router module.
    import router from '@ohos.router';
    
    export default {
@@ -211,7 +215,7 @@ You can implement page redirection through the [page router](../reference/apis/j
    }
    ```
 
-3. Open any file in the **index** folder and click ![en-us_image_0000001364174013](figures/en-us_image_0000001364174013.png) in the Previewer to refresh the file. The display effect is shown in the figure below.
+3. Open any file in the **index** folder and click ![en-us_image_0000001311015192](figures/en-us_image_0000001311015192.png) in the Previewer to refresh the file. The display effect is shown in the figure below.
 
    ![en-us_image_0000001311175132](figures/en-us_image_0000001311175132.png)
 
@@ -224,8 +228,8 @@ You can implement page redirection through the [page router](../reference/apis/j
 
    ![06](figures/06.png)
 
-3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001311494604](figures/en-us_image_0000001311494604.png). The display effect is shown in the figure below.
+3. On the toolbar in the upper right corner of the editing window, click ![en-us_image_0000001364054485](figures/en-us_image_0000001364054485.png). The display effect is shown in the figure below.
 
-   ![en-us_image_0000001363934589](figures/en-us_image_0000001363934589.png)
+   ![en-us_image_0000001311175132](figures/en-us_image_0000001311175132.png)
 
 Congratulations! You have finished developing your OpenHarmony application in JavaScript in the FA model. To learn more about OpenHarmony application development, see [Application Development Overview](../application-dev-guide.md).

en/application-dev/reference/apis/Readme-EN.md

@@ -6,7 +6,7 @@
     - [@ohos.ability.featureAbility](js-apis-featureAbility.md)
     - [@ohos.ability.particleAbility](js-apis-particleAbility.md)
     - ability/[dataAbilityHelper](js-apis-dataAbilityHelper.md)
-    - app/[context](js-apis-Context.md)  
+    - app/[context](js-apis-Context.md) 
   - Stage Model
     - [@ohos.application.Ability](js-apis-application-ability.md)
     - [@ohos.application.AbilityConstant](js-apis-application-abilityConstant.md)
@@ -60,13 +60,34 @@
   - [@ohos.notification](js-apis-notification.md)
   - application/[EventHub](js-apis-eventhub.md)
 - Bundle Management 
+  - [@ohos.bundle.appControl](js-apis-appControl.md)
+  - [@ohos.bundle.bundleManager](js-apis-bundleManager.md)
+  - [@ohos.bundle.bundleMonitor](js-apis-bundleMonitor.md)
+  - [@ohos.bundle.defaultAppManager](js-apis-defaultAppManager.md)
+  - [@ohos.bundle.distributedBundle](js-apis-distributedBundle.md)
+  - [@ohos.bundle.freeInstall](js-apis-freeInstall.md)
+  - [@ohos.bundle.installer](js-apis-installer.md)
+  - [@ohos.bundle.launcherBundleManager](js-apis-launcherBundleManager.md)
   - [@ohos.zlib](js-apis-zlib.md)
+  - bundleManager/[abilityInfo](js-apis-bundleManager-abilityInfo.md)
+  - bundleManager/[applicationInfo](js-apis-bundleManager-applicationInfo.md)
+  - bundleManager/[bundleInfo](js-apis-bundleManager-bundleInfo.md)
+  - bundleManager/[dispatchInfo](js-apis-bundleManager-dispatchInfo.md)
+  - bundleManager/[elementName](js-apis-bundleManager-elementName.md)
+  - bundleManager/[extensionAbilityInfo](js-apis-bundleManager-extensionAbilityInfo.md)
+  - bundleManager/[hapModuleInfo](js-apis-bundleManager-hapModuleInfo.md)
+  - bundleManager/[launcherAbilityInfo](js-apis-bundleManager-launcherAbilityInfo.md)
+  - bundleManager/[metadata](js-apis-bundleManager-metadata.md)
+  - bundleManager/[packInfo](js-apis-bundleManager-packInfo.md)
+  - bundleManager/[permissionDef](js-apis-bundleManager-permissionDef.md)
+  - bundleManager/[remoteAbilityInfo](js-apis-bundleManager-remoteAbilityInfo.md)
+  - bundleManager/[shortcutInfo](js-apis-bundleManager-shortcutInfo.md)
 - UI Page
   - [@ohos.animator](js-apis-animator.md)
   - [@ohos.mediaquery](js-apis-mediaquery.md)
   - [@ohos.promptAction](js-apis-promptAction.md)
   - [@ohos.router](js-apis-router.md)
- - Graphics 
+- Graphics 
   - [@ohos.animation.windowAnimationManager](js-apis-windowAnimationManager.md)
   - [@ohos.display ](js-apis-display.md)
   - [@ohos.effectKit](js-apis-effectKit.md)
@@ -85,8 +106,7 @@
   - [@ohos.i18n](js-apis-i18n.md)
   - [@ohos.intl](js-apis-intl.md)
   - [@ohos.resourceManager](js-apis-resource-manager.md)
-- Resource Scheduling  
-  - [@ohos.backgroundTaskManager](js-apis-backgroundTaskManager.md)
+- Resource Scheduling
   - [@ohos.distributedMissionManager](js-apis-distributedMissionManager.md)
   - [@ohos.reminderAgentManager](js-apis-reminderAgentManager.md)
   - [@ohos.resourceschedule.backgroundTaskManager](js-apis-resourceschedule-backgroundTaskManager.md)
@@ -96,8 +116,7 @@
 - Security
   - [@ohos.abilityAccessCtrl](js-apis-abilityAccessCtrl.md)
   - [@ohos.privacyManager](js-apis-privacyManager.md)
-  - [@ohos.security.cert](js-apis-cert.md)
-  - [@ohos.security.cryptoFramework]js-apis-cryptoFramework.md)
+  - [@ohos.security.cryptoFramework](js-apis-cryptoFramework.md)
   - [@ohos.security.huks ](js-apis-huks.md)
   - [@ohos.userIAM.faceAuth](js-apis-useriam-faceauth.md)
   - [@ohos.userIAM.userAuth ](js-apis-useriam-userauth.md)
@@ -136,11 +155,8 @@
   - [@ohos.net.connection](js-apis-net-connection.md)
   - [@ohos.net.ethernet](js-apis-net-ethernet.md)
   - [@ohos.net.http](js-apis-http.md)
-  - [@ohos.net.policy](js-apis-net-policy.md)
   - [@ohos.net.sharing](js-apis-net-sharing.md)
   - [@ohos.net.socket](js-apis-socket.md)
-  - [@ohos.net.statistics](js-apis-net-statistics.md)
-  - [@ohos.net.tlsSocket](js-apis-tlsSocket.md)
   - [@ohos.net.webSocket](js-apis-webSocket.md)
   - [@ohos.request](js-apis-request.md)
 - Connectivity
@@ -197,19 +213,18 @@
   - [@ohos.runningLock](js-apis-runninglock.md)
   - [@ohos.sensor](js-apis-sensor.md)
   - [@ohos.settings](js-apis-settings.md)
+  - [@ohos.systemParameterV9](js-apis-system-parameterV9.md)
   - [@ohos.thermal](js-apis-thermal.md)
   - [@ohos.update](js-apis-update.md)
   - [@ohos.usb](js-apis-usb.md)
   - [@ohos.vibrator](js-apis-vibrator.md)
-- Account Management  
+- Account Management
   - [@ohos.account.appAccount](js-apis-appAccount.md)
   - [@ohos.account.distributedAccount](js-apis-distributed-account.md)
   - [@ohos.account.osAccount](js-apis-osAccount.md)
 - Custom Management
-  - [@ohos.configPolicy](js-apis-config-policy.md)
+  - [@ohos.configPolicy](js-apis-configPolicy.md)
   - [@ohos.EnterpriseAdminExtensionAbility](js-apis-EnterpriseAdminExtensionAbility.md)
-  - [@ohos.enterpriseDeviceManager](js-apis-enterprise-device-manager.md)
-  - enterpriseDeviceManager/[DeviceSettingsManager](js-apis-enterpriseDeviceManager-DeviceSettingsManager.md)
  - Language Base Class Library 
   - [@ohos.buffer](js-apis-buffer.md)
   - [@ohos.convertxml](js-apis-convertxml.md)
@@ -252,6 +267,7 @@
   - [@ohos.prompt](js-apis-prompt.md)
   - [@ohos.reminderAgent](js-apis-reminderAgent.md)
   - [@ohos.systemParameter](js-apis-system-parameter.md)
+  - [@ohos.workScheduler](js-apis-workScheduler.md)
   - [@system.app](js-apis-system-app.md)
   - [@system.battery](js-apis-system-battery.md)
   - [@system.bluetooth](js-apis-system-bluetooth.md)
@@ -277,6 +293,7 @@
   - bundle/[bundleInfo](js-apis-bundle-BundleInfo.md)
   - bundle/[bundleInstaller](js-apis-bundle-BundleInstaller.md)
   - bundle/[bundleStatusCallback](js-apis-Bundle-BundleStatusCallback.md)
+  - bundle/[customizeData](js-apis-bundle-CustomizeData.md)
   - bundle/[elementName](js-apis-bundle-ElementName.md)
   - bundle/[hapModuleInfo](js-apis-bundle-HapModuleInfo.md)
   - bundle/[launcherAbilityInfo](js-apis-bundle-LauncherAbilityInfo.md)

en/application-dev/reference/apis/development-intro.md

@@ -53,5 +53,5 @@ The following description is provided for each API in the reference document to
 
 OpenHarmony supports two development languages: JS and TS.
 
-- When a code block is labeled with `js`, the sample code can be used in the JS and eTS projects.
-- When a code block is labeled with `ts`, the sample code can be used only in the eTS project.
+- When a code block is labeled with `js`, the sample code can be used in the JS and ArkTS projects.
+- When a code block is labeled with `ts`, the sample code can be used only in the ArkTS project.

en/application-dev/reference/apis/js-apis-Bundle-BundleStatusCallback.md

@@ -4,16 +4,18 @@ The **BundleStatusCallback** module provides bundle callback information, which
 
 > **NOTE**
 >
-> The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
+> This module is deprecated since API version 9. You are advised to use [bundleMonitor](js-apis-bundleMonitor.md) instead.
 
-## BundleStatusCallback
+
+## BundleStatusCallback<sup>(deprecated)<sup>
+> This API is deprecated since API version 9. You are advised to use [bundleMonitor](js-apis-bundleMonitor.md) instead.
 
 **System API**: This is a system API and cannot be called by third-party applications.
 
 **System capability**: SystemCapability.BundleManager.BundleFramework
 
-| Name  | Type                                         | Description                                  |
+| Type  | Callback                                         | Description                                  |
 | ------ | --------------------------------------------- | -------------------------------------- |
-| add    | (bundleName : string, userId: number) => void | Callback invoked when a **launcherStatusCallback** is added.|
-| update | (bundleName : string, userId: number) => void | Callback invoked when a **launcherStatusCallback** is updated.|
-| remove | (bundleName : string, userId: number) => void | Callback invoked when a **launcherStatusCallback** is removed.|
+| add    | (bundleName : string, userId: number) => void | Used to obtain information when a bundle is installed.|
+| update | (bundleName : string, userId: number) => void | Used to obtain information when a bundle is updated.|
+| remove | (bundleName : string, userId: number) => void | Used to obtain information when a bundle is uninstalled.|

en/application-dev/reference/apis/js-apis-Bundle-InnerBundleManager.md

-# innerBundleManager
+# innerBundleManager<sup>(deprecated)</sup>
 
-The **innerBundleManager** module manages internal bundles.
+The **innerBundleManager** module provides APIs for the **Home Screen** application.
 
-> **NOTE**
 > 
 > The initial APIs of this module are supported since API version 8. Newly added APIs will be marked with a superscript to indicate their earliest API version.
+> This module is deprecated since API version 9. You are advised to use [launcherBundleManager](js-apis-launcherBundleManager.md) and [bundleMonitor](js-apis-bundleMonitor.md) instead.
 
 ## Modules to Import
 
-```
+```typescript
 import innerBundleManager from '@ohos.bundle.innerBundleManager';
 ```
 
@@ -16,20 +16,13 @@ import innerBundleManager from '@ohos.bundle.innerBundleManager';
 
 SystemCapability.BundleManager.BundleFramework
 
-## Required Permissions
-
-| Permission                                      | Permission Level    | Description                        |
-| ------------------------------------------ | ------------ | ---------------------------- |
-| ohos.permission.GET_BUNDLE_INFO_PRIVILEGED | system_basic | Permission to query information about all applications.          |
-| ohos.permission.LISTEN_BUNDLE_CHANGE       | system_grant | Permission to listen for application changes.|
-
-For details, see [Permission Levels](../../security/accesstoken-overview.md#permission-levels).
 
-## innerBundleManager.getLauncherAbilityInfos
+## innerBundleManager.getLauncherAbilityInfos<sup>(deprecated)</sup>
 
 getLauncherAbilityInfos(bundleName: string, userId: number, callback: AsyncCallback&lt;Array&lt;LauncherAbilityInfo&gt;&gt;) : void;
 
 Obtains the launcher ability information based on a given bundle name. This API uses an asynchronous callback to return the result.
+> This API is deprecated since API version 9. You are advised to use [launcherBundleManager#getLauncherAbilityInfo](js-apis-launcherBundleManager.md) instead.
 
 **Required permissions**
 
@@ -45,19 +38,19 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-| Name      | Type                                                        | Mandatory| Description                                                 |
+| Name    | Type                                                        | Mandatory| Description                                                 |
 | ---------- | ------------------------------------------------------------ | ---- | ----------------------------------------------------- |
 | bundleName | string                                                       | Yes  | Bundle name of an application.                             |
 | userId     | number                                                       | Yes  | User ID. The default value is the user ID of the caller. The value must be greater than or equal to 0.|
 | callback   | AsyncCallback\<Array<[LauncherAbilityInfo](js-apis-bundle-LauncherAbilityInfo.md)>> | Yes  | Callback used to return an array of the launcher ability information.           |
 
 
-
-## innerBundleManager.getLauncherAbilityInfos
+## innerBundleManager.getLauncherAbilityInfos<sup>(deprecated)</sup>
 
 getLauncherAbilityInfos(bundleName: string, userId: number) : Promise&lt;Array&lt;LauncherAbilityInfo&gt;&gt;
 
 Obtains the launcher ability information based on a given bundle name. This API uses a promise to return the result.
+> This API is deprecated since API version 9. You are advised to use [launcherBundleManager#getLauncherAbilityInfo](js-apis-launcherBundleManager.md) instead.
 
 **Required permissions**
 
@@ -73,7 +66,7 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-| Name      | Type  | Mandatory| Description                                                 |
+| Name    | Type  | Mandatory| Description                                                 |
 | ---------- | ------ | ---- | ----------------------------------------------------- |
 | bundleName | string | Yes  | Bundle name of an application.                             |
 | userId     | number | Yes  | User ID. The default value is the user ID of the caller. The value must be greater than or equal to 0.|
@@ -84,11 +77,12 @@ This is a system API and cannot be called by third-party applications.
 | ------------------------------------------------------------ | ------------------------- |
 | Promise\<Array<[LauncherAbilityInfo](js-apis-bundle-LauncherAbilityInfo.md)>> | Promise used to return an array of the launcher ability information.|
 
-## innerBundleManager.on
+## innerBundleManager.on<sup>(deprecated)</sup>
 
 on(type:"BundleStatusChange", bundleStatusCallback : BundleStatusCallback, callback: AsyncCallback&lt;string&gt;) : void;
 
 Registers a callback to receive bundle status changes. This API uses an asynchronous callback to return the result.
+> This API is deprecated since API version 9. You are advised to use [bundleMonitor#on](js-apis-bundleMonitor.md) instead.
 
 **Required permissions**
 
@@ -104,17 +98,18 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-| Name                | Type                 | Mandatory| Description                                                |
+| Name             | Type                 | Mandatory| Description                                              |
 | -------------------- | --------------------- | ---- | ---------------------------------------------------- |
 | type                 | string | Yes  | Event type. Only **BundleStatusChange** is supported.            |
 | bundleStatusCallback | [BundleStatusCallback](js-apis-Bundle-BundleStatusCallback.md) | Yes  | Callback to register.                                  |
 | callback             | AsyncCallback\<string> | Yes  | Callback used to return a successful result or error information.|
 
-## innerBundleManager.on
+## innerBundleManager.on<sup>(deprecated)</sup>
 
-on(type:"BundleStatusChange", bundleStatusCallback : BundleStatusCallback): Promise&lt;string&gt;
+on(type:"BundleStatusChange", bundleStatusCallback : BundleStatusCallback) : Promise&lt;string&gt;
 
 Registers a callback to receive bundle status changes. This API uses a promise to return the result.
+> This API is deprecated since API version 9. You are advised to use [bundleMonitor#on](js-apis-bundleMonitor.md) instead.
 
 **Required permissions**
 
@@ -130,7 +125,7 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-| Name                | Type                                                        | Mandatory| Description                                      |
+| Name              | Type                                                        | Mandatory| Description                                      |
 | -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------ |
 | type                 | string                                                       | Yes  | Event type. Only **BundleStatusChange** is supported.|
 | bundleStatusCallback | [BundleStatusCallback](js-apis-Bundle-BundleStatusCallback.md) | Yes  | Callback to register.                        |
@@ -141,11 +136,12 @@ This is a system API and cannot be called by third-party applications.
 | --------------- | ----------------------------------- |
 | Promise\<string> | Promise used to return a successful result or error information.|
 
-## innerBundleManager.off
+## innerBundleManager.off<sup>(deprecated)</sup>
 
 off(type:"BundleStatusChange", callback: AsyncCallback&lt;string&gt;) : void;
 
 Deregisters the callback that receives bundle status changes. This API uses an asynchronous callback to return the result.
+> This API is deprecated since API version 9. You are advised to use [bundleMonitor#off](js-apis-bundleMonitor.md) instead.
 
 **Required permissions**
 
@@ -161,16 +157,17 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-| Name    | Type                 | Mandatory| Description                                                |
+| Name | Type                 | Mandatory| Description                                              |
 | -------- | --------------------- | ---- | ---------------------------------------------------- |
 | type     | string | Yes  | Event type. Only **BundleStatusChange** is supported.              |
 | callback | AsyncCallback\<string> | Yes  | Callback used to return a successful result or error information.|
 
-## innerBundleManager.off
+## innerBundleManager.off<sup>(deprecated)</sup>
 
-off(type:"BundleStatusChange"): Promise&lt;string&gt;
+off(type:"BundleStatusChange") : Promise&lt;string&gt;
 
 Deregisters the callback that receives bundle status changes. This API uses a promise to return the result.
+> This API is deprecated since API version 9. You are advised to use [bundleMonitor#off](js-apis-bundleMonitor.md) instead.
 
 **Required permissions**
 
@@ -187,8 +184,8 @@ This is a system API and cannot be called by third-party applications.
 **Parameters**
 
 | Name| Type  | Mandatory| Description                                      |
-| ---- | ------ | ---- | ------------------------------------------ |
-| type | string | Yes  | Event type. Only **BundleStatusChange** is supported.|
+| ------ | ------ | ---- | ------------------------------------------ |
+| type   | string | Yes  | Event type. Only **BundleStatusChange** is supported.|
 
 **Return value**
 
@@ -196,11 +193,12 @@ This is a system API and cannot be called by third-party applications.
 | --------------- | ----------------------------------- |
 | Promise\<string> | Promise used to return a successful result or error information.|
 
-## innerBundleManager.getAllLauncherAbilityInfos
+## innerBundleManager.getAllLauncherAbilityInfos<sup>(deprecated)</sup>
 
 getAllLauncherAbilityInfos(userId: number, callback: AsyncCallback&lt;Array&lt;LauncherAbilityInfo&gt;&gt;) : void;
 
 Obtains the information about all launcher abilities. This API uses an asynchronous callback to return the result.
+> This API is deprecated since API version 9. You are advised to use [launcherBundleManager#getAllLauncherAbilityInfo](js-apis-launcherBundleManager.md) instead.
 
 **Required permissions**
 
@@ -216,16 +214,17 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-| Name    | Type                                                        | Mandatory| Description                                                 |
+| Name  | Type                                                        | Mandatory| Description                                                 |
 | -------- | ------------------------------------------------------------ | ---- | ----------------------------------------------------- |
 | userId   | number                                                       | Yes  | User ID. The default value is the user ID of the caller. The value must be greater than or equal to 0.|
 | callback | AsyncCallback\<Array<[LauncherAbilityInfo](js-apis-bundle-LauncherAbilityInfo.md)>> | Yes  | Callback used to return an array of the launcher ability information.           |
 
-## innerBundleManager.getAllLauncherAbilityInfos
+## innerBundleManager.getAllLauncherAbilityInfos<sup>(deprecated)</sup>
 
 getAllLauncherAbilityInfos(userId: number) : Promise&lt;Array&lt;LauncherAbilityInfo&gt;&gt;
 
 Obtains the information about all launcher abilities. This API uses a promise to return the result.
+> This API is deprecated since API version 9. You are advised to use [launcherBundleManager#getAllLauncherAbilityInfo](js-apis-launcherBundleManager.md) instead.
 
 **Required permissions**
 
@@ -241,7 +240,7 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-| Name  | Type  | Mandatory| Description                                                 |
+| Name| Type  | Mandatory| Description                                                 |
 | ------ | ------ | ---- | ----------------------------------------------------- |
 | userId | number | Yes  | User ID. The default value is the user ID of the caller. The value must be greater than or equal to 0.|
 
@@ -251,11 +250,12 @@ This is a system API and cannot be called by third-party applications.
 | ------------------------------------------------------------ | ------------------------- |
 | Promise\<Array<[LauncherAbilityInfo](js-apis-bundle-LauncherAbilityInfo.md)>> | Promise used to return an array of the launcher ability information.|
 
-## innerBundleManager.getShortcutInfos
+## innerBundleManager.getShortcutInfos<sup>(deprecated)</sup>
 
 getShortcutInfos(bundleName :string, callback: AsyncCallback&lt;Array&lt;ShortcutInfo&gt;&gt;) : void;
 
 Obtains the shortcut information based on a given bundle name. This API uses an asynchronous callback to return the result.
+> This API is deprecated since API version 9. You are advised to use [launcherBundleManager#getShortcutInfo](js-apis-launcherBundleManager.md) instead.
 
 **Required permissions**
 
@@ -271,16 +271,17 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-| Name      | Type                                                        | Mandatory| Description                                          |
+| Name    | Type                                                        | Mandatory| Description                                          |
 | ---------- | ------------------------------------------------------------ | ---- | ---------------------------------------------- |
 | bundleName | string                                                       | Yes  | Bundle name of an application.                      |
 | callback   | AsyncCallback\<Array<[ShortcutInfo](js-apis-bundle-ShortcutInfo.md)>> | Yes  | Callback used to return an array of the shortcut information.|
 
-## innerBundleManager.getShortcutInfos
+## innerBundleManager.getShortcutInfos<sup>(deprecated)</sup>
 
 getShortcutInfos(bundleName : string) : Promise&lt;Array&lt;ShortcutInfo&gt;&gt;
 
 Obtains the shortcut information based on a given bundle name. This API uses a promise to return the result.
+> This API is deprecated since API version 9. You are advised to use [launcherBundleManager#getShortcutInfo](js-apis-launcherBundleManager.md) instead.
 
 **Required permissions**
 
@@ -296,7 +297,7 @@ This is a system API and cannot be called by third-party applications.
 
 **Parameters**
 
-| Name      | Type  | Mandatory| Description                    |
+| Name    | Type  | Mandatory| Description                    |
 | ---------- | ------ | ---- | ------------------------ |
 | bundleName | string | Yes  | Bundle name of an application.|
 

en/application-dev/reference/apis/js-apis-bundle-AbilityInfo.md

@@ -3,11 +3,14 @@
 Unless otherwise specified, ability information is obtained through **GET_BUNDLE_DEFAULT**.
 
 > **NOTE**
+>
 > The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
-## AbilityInfo
+## AbilityInfo<sup>(deprecated)<sup>
 
-**System capability**: SystemCapability.BundleManager.BundleFramework
+> This API is deprecated since API version 9. You are advised to use [AbilityInfo](js-apis-bundleManager-abilityInfo.md) instead.
+
+ **System capability**: SystemCapability.BundleManager.BundleFramework
 
 | Name                 | Type                                                    | Readable| Writable| Description                                     |
 | --------------------- | -------------------------------------------------------- | ---- | ---- | ----------------------------------------- |
@@ -24,7 +27,7 @@ Unless otherwise specified, ability information is obtained through **GET_BUNDLE
 | backgroundModes       | number                                                   | Yes  | No  | Background service mode of the ability.<br>This attribute can be used only in the FA model.    |
 | isVisible             | boolean                                                  | Yes  | No  | Whether the ability can be called by other applications.        |
 | formEnabled           | boolean                                                  | Yes  | No  | Whether the ability provides the service widget capability.<br>This attribute can be used only in the FA model.|
-| type                  | AbilityType                                              | Yes  | No  | Ability type.<br>This attribute can be used only in the FA model.           |
+| type                  | AbilityType                                              | Yes  | No  | Ability type.<br>This attribute can be used only in the FA model. |
 | orientation           | DisplayOrientation                                       | Yes  | No  | Ability display orientation.                        |
 | launchMode            | LaunchMode                                               | Yes  | No  | Ability launch mode.                        |
 | permissions           | Array\<string>                                           | Yes  | No  | Permissions required for other applications to call the ability.<br>The value is obtained by passing **GET_ABILITY_INFO_WITH_PERMISSION**.|
@@ -36,13 +39,5 @@ Unless otherwise specified, ability information is obtained through **GET_BUNDLE
 | uri                   | string                                                   | Yes  | No  | URI of the ability.<br>This attribute can be used only in the FA model.|
 | labelId               | number                                                   | Yes  | No  | Ability label ID.                          |
 | subType               | AbilitySubType                                           | Yes  | No  | Subtype of the template that can be used by the ability.<br>This attribute can be used only in the FA model.|
-| metaData<sup>8+</sup> | Array\<[CustomizeData](js-apis-bundle-CustomizeData.md)> | Yes  | No  | Custom metadata of the ability.<br>The value is obtained by passing **GET_ABILITY_INFO_WITH_METADATA**.|
-| metadata<sup>9+</sup> | Array\<[Metadata](js-apis-bundle-Metadata.md)>           | Yes  | No  | Metadata of the ability.<br>The value is obtained by passing **GET_ABILITY_INFO_WITH_METADATA**.|
+| metadata<sup>8+</sup> | Array\<[CustomizeData](js-apis-bundle-CustomizeData.md)>           | Yes  | No  | Metadata of the ability.<br>The value is obtained by passing **GET_ABILITY_INFO_WITH_METADATA**.|
 | enabled<sup>8+</sup>  | boolean                                                  | Yes  | No  | Whether the ability is enabled.                          |
-| supportWindowMode<sup>9+</sup>  | Array\<[SupportWindowMode](js-apis-Bundle.md)> | Yes  | No  | Window modes supported by the ability.                     |
-| maxWindowRatio<sup>9+</sup>  | number                                            | Yes  | No  | Maximum window ratio supported by the ability.                     |
-| minWindowRatio<sup>9+</sup>  | number                                            | Yes  | No  | Minimum window ratio supported by ability.                     |
-| maxWindowWidth<sup>9+</sup>  | number                                            | Yes  | No  | Maximum window width supported by the ability.                     |
-| minWindowWidth<sup>9+</sup>  | number                                            | Yes  | No  | Minimum window width supported by the ability.                     |
-| maxWindowHeight<sup>9+</sup>  | number                                           | Yes  | No  | Maximum window height supported by the ability.                     |
-| minWindowHeight<sup>9+</sup>  | number                                           | Yes  | No  | Minimum window height supported by the ability.                     |

en/application-dev/reference/apis/js-apis-bundle-ApplicationInfo.md

@@ -6,7 +6,9 @@ The **ApplicationInfo** module provides application information. Unless otherwis
 >
 > The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
-## ApplicationInfo
+## ApplicationInfo<sup>(deprecated)<sup>
+
+> This API is deprecated since API version 9. You are advised to use [ApplicationInfo](js-apis-bundleManager-applicationInfo.md) instead.
 
 **System capability**: SystemCapability.BundleManager.BundleFramework
 
@@ -18,11 +20,9 @@ The **ApplicationInfo** module provides application information. Unless otherwis
 | systemApp                  | boolean                                                      | Yes  | No  | Whether the application is a system application. The default value is **false**.                         |
 | enabled                    | boolean                                                      | Yes  | No  | Whether the application is enabled. The default value is **true**.                        |
 | label                      | string                                                       | Yes  | No  | Application label.                                              |
-| labelId<sup>(deprecated)</sup> | string                                                       | Yes  | No  | Application label ID.<br>\- **NOTE**: This attribute is deprecated from API version 9. Use **labelIndex** instead. |
-| labelIndex<sup>9+</sup>    | number                                                       | Yes  | No  | Index of the application label.|
+| labelId<sup>(deprecated)</sup> | string                                                       | Yes  | No  | Application label ID.<br>\- **NOTE**: This attribute is deprecated from API version 9. Use **labelIndex** instead.|
 | icon                       | string                                                       | Yes  | No  | Application icon.                                              |
-| iconId<sup>(deprecated)</sup> | string                                                       | Yes  | No  | Application icon ID.<br>\- **NOTE**: This attribute is deprecated from API version 9. Use **iconIndex** instead. |
-| iconIndex<sup>9+</sup>     | number                                                       | Yes  | No  | Index of the application icon.|
+| iconId<sup>(deprecated)</sup> | string                                                       | Yes  | No  | Application icon ID.<br>\- **NOTE**: This attribute is deprecated from API version 9. Use **iconIndex** instead.|
 | process                    | string                                                       | Yes  | No  | Process in which the application runs. If this parameter is not set, the bundle name is used.                  |
 | supportedModes             | number                                                       | Yes  | No  | Running modes supported by the application.                                      |
 | moduleSourceDirs           | Array\<string>                                               | Yes  | No  | Relative paths for storing application resources.                                |
@@ -31,14 +31,7 @@ The **ApplicationInfo** module provides application information. Unless otherwis
 | entryDir                   | string                                                       | Yes  | No  | Path for storing application files.                                      |
 | codePath<sup>8+</sup>      | string                                                       | Yes  | No  | Installation directory of the application.                                          |
 | metaData<sup>8+</sup>      | Map\<string, Array\<[CustomizeData](js-apis-bundle-CustomizeData.md)>> | Yes  | No  | Custom metadata of the application.<br>The value is obtained by passing **GET_APPLICATION_INFO_WITH_METADATA**.|
-| metadata<sup>9+</sup>      | Map\<string, Array\<[Metadata](js-apis-bundle-Metadata.md)>> | Yes  | No  | Metadata of the application.<br>The value is obtained by passing **GET_APPLICATION_INFO_WITH_METADATA**.|
 | removable<sup>8+</sup>     | boolean                                                      | Yes  | No  | Whether the application is removable.                                      |
 | accessTokenId<sup>8+</sup> | number                                                       | Yes  | No  | Access token ID of the application.                                     |
 | uid<sup>8+</sup>           | number                                                       | Yes  | No  | UID of the application.                                               |
 | entityType<sup>8+</sup>    | string                                                       | Yes  | No  | Entity type of the application.                                          |
-| fingerprint<sup>9+</sup>   | string                                                       | Yes  | No  | Signing certificate fingerprint of the application, that is, the SHA-256 checksum of the signing certificate that you request for the application.<br>The value is obtained by passing **GET_APPLICATION_INFO_WITH_CERTIFICATE_FINGERPRINT**.|
-| iconResource<sup>9+</sup> | [Resource](js-apis-resource-manager.md#resource9) | Yes| No| Icon resource of the application.|
-| labelResource<sup>9+</sup> | [Resource](js-apis-resource-manager.md#resource9) | Yes| No| Label resource of the application.|
-| descriptionResource<sup>9+</sup> | [Resource](js-apis-resource-manager.md#resource9) | Yes| No| Description resource of the application.|
-| appDistributionType<sup>9+</sup>   | string                                                       | Yes  | No  | Distribution type of the application signing certificate. The options are **app_gallery**, **enterprise**, **os_integration**, and **crowdtesting**.   |
-| appProvisionType<sup>9+</sup>   | string                                                       | Yes  | No  | Type of the application signing certificate file. The options are **debug** and **release**.|

en/application-dev/reference/apis/js-apis-bundle-BundleInfo.md

@@ -6,7 +6,11 @@ The **BundleInfo** module provides bundle information. Unless otherwise specifie
 >
 > The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
-## BundleInfo
+
+
+## BundleInfo<sup>(deprecated)<sup>
+
+> This API is deprecated since API version 9. You are advised to use [BundleInfo](js-apis-bundleManager-bundleInfo.md) instead.
 
  **System capability**: SystemCapability.BundleManager.BundleFramework
 
@@ -35,11 +39,12 @@ The **BundleInfo** module provides bundle information. Unless otherwise specifie
 | minCompatibleVersionCode          | number                                                       | Yes  | No  | Earliest version compatible with the bundle in the distributed scenario.                        |
 | entryInstallationFree             | boolean                                                      | Yes  | No  | Whether installation-free is supported for the entry module.                                       |
 | reqPermissionStates<sup>8+</sup>  | Array\<number>                                               | Yes  | No  | Permission grant state.                                        |
-| extensionAbilityInfo<sup>9+</sup> | Array\<[ExtensionAbilityInfo](js-apis-bundle-ExtensionAbilityInfo.md)> | Yes  | No  | Extension ability information.<br>The value is obtained by passing **GET_BUNDLE_WITH_EXTENSION_ABILITY**.|
 
 
 
-## ReqPermissionDetail
+## ReqPermissionDetail<sup>(deprecated)<sup>
+
+> This API is deprecated since API version 9. You are advised to use [ReqPermissionDetail](js-apis-bundleManager-bundleInfo.md) instead.
 
 Provides the detailed information of the permissions to request from the system.
 
@@ -49,12 +54,13 @@ Provides the detailed information of the permissions to request from the system.
 | --------------------- | ----------------------- | ---- | ---- | ---------------------- |
 | name                  | string                  | Yes  | Yes  | Name of the permission to request.  |
 | reason                | string                  | Yes  | Yes  | Reason for requesting the permission.  |
-| reasonId<sup>9+</sup> | number                  | Yes  | Yes  | ID of the reason for requesting the permission.|
 | usedScene             | [UsedScene](#usedscene) | Yes  | Yes  | Application scenario and timing for using the permission.|
 
 
 
-## UsedScene
+## UsedScene<sup>(deprecated)<sup>
+
+> This API is deprecated since API version 9. You are advised to use [UsedScene](js-apis-bundleManager-bundleInfo.md) instead.
 
 Describes the application scenario and timing for using the permission.
 

en/application-dev/reference/apis/js-apis-bundle-CustomizeData.md

 # CustomizeData
 
-
+The **CustomizeData** module provides custom metadata.
 
 > **NOTE**
 >
 > The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
+## CustomizeData<sup>(deprecated)</sup>
 
-
-Provides custom metadata.
-
-## CustomizeData
+> This API is deprecated since API version 9. You are advised to use [Metadata](js-apis-bundleManager-metadata.md) instead.
 
 **System capability**: SystemCapability.BundleManager.BundleFramework
 
-
-
 | Name              | Type  | Readable| Writable| Description            |
 | ------------------ | ------ | ---- | ---- | ---------------- |
 | name               | string | Yes  | Yes  | Custom metadata name.|

en/application-dev/reference/apis/js-apis-bundle-ElementName.md

@@ -6,11 +6,11 @@ The **ElementName** module provides the element name information, which can be o
 >
 > The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
-## ElementName<sup>(deprecated)<sup>
+## ElementName<sup>(deprecated)</sup>
 
 > This API is deprecated since API version 9. You are advised to use [ElementName](js-apis-bundleManager-elementName.md) instead.
 
- **System capability**: SystemCapability.BundleManager.BundleFramework
+**System capability**: SystemCapability.BundleManager.BundleFramework
 
 | Name                    | Type    | Readable| Writable| Description                      |
 | ----------------------- | ---------| ---- | ---- | ------------------------- |
@@ -19,6 +19,3 @@ The **ElementName** module provides the element name information, which can be o
 | abilityName             | string   | Yes  | Yes  | Name of the ability.              |
 | uri                     | string   | Yes  | Yes  | Resource ID.                |
 | shortName               | string   | Yes  | Yes  | Short name of the ability.              |
-| moduleName<sup>9+</sup> | string   | Yes  | Yes  | Name of the HAP file to which the ability belongs.  |
-
-<!--no_check-->
\ No newline at end of file

en/application-dev/reference/apis/js-apis-bundle-HapModuleInfo.md

 # HapModuleInfo
 
-
+The **HapModuleInfo** module provides module information. Unless otherwise specified, all attributes are obtained through **GET_BUNDLE_DEFAULT**.
 
 > **NOTE**
 >
 > The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
 
-The **HapModuleInfo** module provides module information. Unless otherwise specified, all attributes are obtained through **GET_BUNDLE_DEFAULT**.
+## HapModuleInfo<sup>(deprecated)<sup>
 
-## HapModuleInfo
+> This API is deprecated since API version 9. You are advised to use [HapModuleInfo](js-apis-bundleManager-hapModuleInfo.md) instead.
 
 **System capability**: SystemCapability.BundleManager.BundleFramework
 
@@ -29,7 +29,3 @@ The **HapModuleInfo** module provides module information. Unless otherwise speci
 | moduleName                        | string                                                       | Yes  | No  | Module name.              |
 | mainAbilityName                   | string                                                       | Yes  | No  | Name of the main ability.     |
 | installationFree                  | boolean                                                      | Yes  | No  | Whether installation-free is supported.      |
-| mainElementName<sup>9+</sup>      | string                                                       | Yes  | No  | Information about the main ability.     |
-| extensionAbilityInfo<sup>9+</sup> | Array\<[ExtensionAbilityInfo](js-apis-bundle-ExtensionAbilityInfo.md)> | Yes  | No  | Information about the Extension ability.|
-| metadata<sup>9+</sup>             | Array\<[Metadata](js-apis-bundle-Metadata.md)>               | Yes  | No  | Metadata of the ability.     |
-| hashValue<sup>9+</sup>            | string                                                       | Yes  | No  | Hash value of the module.<br>The value is obtained by passing **GET_BUNDLE_WITH_HASH_VALUE**.|