Update docs (21530)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/release-notes/changelogs/OpenHarmony_4.0.9.2/changelogs-imf.md

+# Input Method Framework Subsystem – Input Method Framework Service Changelog
+
+## cl.imf.1 Change of the Error Code Returned When Permission Verification of on('imeShow') Fails
+
+**Change Impact**
+
+For the **on('imeShow')** API, the return code for system permission verification failure is changed from 201 to 202.
+
+## cl.imf.2 Change of the Error Code Returned When Permission Verification of on('imeHide') Fails
+
+**Change Impact**
+
+For the **on('imeHide')** API, the return code for system permission verification failure is changed from 201 to 202.
+
+## cl.imf.3 Parameter Addition of off
+
+An option **callback** parameter is added to the **off** API to specify the callback to be unsubscribed from. Its value must be the same as that passed in the **on** API.
+
+| API                     | Before Change                               | After Change                                                      |
+| ------------------------- | ------------------------------------- | ------------------------------------------------------------ |
+| off('insertText')         | off(type: 'insertText'): void         | off(type: 'insertText', callback?: (text: string) => void): void |
+| off('deleteLeft')         | off(type: 'deleteLeft'): void         | off(type: 'deleteLeft', callback?: (length: number) => void): void |
+| off('deleteRight')        | off(type: 'deleteRight'): void        | off(type: 'deleteRight', callback?: (length: number) => void): void |
+| off('sendKeyboardStatus') | off(type: 'sendKeyboardStatus'): void | off(type: 'sendKeyboardStatus', callback?: (keyboardStatus: KeyboardStatus) => void): void |
+| off('sendFunctionKey')    | off(type: 'sendFunctionKey'): void    | off(type: 'sendFunctionKey', callback?: (functionKey: FunctionKey) => void): void |
+| off('moveCursor')         | off(type: 'moveCursor'): void         | off(type: 'moveCursor', callback?: (direction: Direction) => void): void |
+| off('handleExtendAction') | off(type: 'handleExtendAction'): void | off(type: 'handleExtendAction', callback?: (action: ExtendAction) => void): void |
+| off('selectByRange')      | off(type: 'selectByRange'): void      | off(type: 'selectByRange', callback?: Callback\<Range\>): void |
+| off('selectByMovement')   | off(type: 'selectByMovement'): void   | off(type: 'selectByMovement', callback?: Callback\<Movement\>): void |
+
+**Change Impact**
+
+When calling the preceding APIs, you can pass the **callback** parameter to specify the callback to unsubscribe from. If this parameter is not passed, all callbacks corresponding to the specified type are unsubscribed from.
+
+**Adaptation Guide**
+
+Follow the description in [@ohos.inputMethod.d.ts](https://gitee.com/openharmony/docs/blob/master/en/application-dev/reference/apis/js-apis-inputmethod.md).

en/release-notes/changelogs/OpenHarmony_4.0.9.3/changelog-@Prop.md

+# Arkui Subsystem State Management Changelog
+
+
+# Support by @Prop for Object Behavior Changes
+
+## cl. Change from Shallow Copy to Deep Copy of Objects by @Prop
+
+**Change Impact**
+
+In API version 9, @Prop supports shallow copy of objects. The specific behavior is as follows:
+
+- Object type: shallow copy of all properties returned by **Object.keys(propObj)**. That is, only the outermost object is copied, and the property in the object points to the data source of the original parent component.
+- Array type: shallow copy of all array items. That is, only the outermost array is copied. Other behaviors are the same as those of the Object type.
+- The prototype of the object and array is copied.
+
+Since API version 10, @Prop supports deep copy of objects. The specific behavior is as follows:
+- Object type: deep copy of all properties returned by **Object.keys(propObj)**.
+- Array type: deep copy of all array items.
+- The prototype of the object and array is copied.
+
+**Adaptation Guide**
+
+The impact of the change on UI rendering mainly lies in @ObjectLink-related scenarios, because @ObjectLink functions as a proxy for its decorated object properties.
+
+The following shows an example:
+
+API version 9: If @Prop objArray in the PropClassArray component changes the property of ClassA or sets a new array item, @ObjectLink obj in ObjectLinkClassA created by the parent component StateClassAArray changes.
+
+The update is caused by the shallow copy from @State stateClassAArray in the parent component StateClassAArray to @Prop objArray in the child component PropClassAArray. The shallow copy copies only the reference of array items, and therefore the data source is changed. As @ObjectLink functions as a proxy for the properties of the data source, the update of @ObjectLink obj (constructed from the StateClassAArray component) in the ObjectLinkClassA component is triggered.
+
+API version 10: In the preceding scenario, the copy from @State stateClassAArray in the parent component StateClassAArray to @Prop objArray in the child component PropClassAArray is a deep copy. As the object of ClassA is completely copied, the data source is not changed, and the update of @ObjectLink obj (constructed from the StateClassAArray component) in the ObjectLinkClassA component is not triggered.
+
+
+![en-us_image_0000001588291546](figures/en-us_image_0000001588291546.png)
+
+
+
+```ts
+let nextId = 0;
+
+@Observed
+class ClassA  {
+  id : number;
+  a : number;
+  constructor(a : number = 0) {
+    this.id = nextId++;
+    this.a = a;
+  }
+}
+
+@Component
+struct ObjectLinkClassA {
+  @ObjectLink obj : ClassA;
+
+  build() {
+    Row() {
+      Text(`ObjectLink: obj: ${this.obj.a}`)
+        .height(100)
+        .onClick(() => {
+          this.obj.a += 1;
+          console.info(`ObjectLink onClick ClassA property changed to  ${this.obj.a}`)
+        })
+    }.border({width: 3, color: Color.Red})
+  }
+}
+
+@Component
+struct PropClassAArray {
+  @Prop objArray : Array<ClassA> = [];
+
+  build() {
+    Column() {
+      Text(`green box: @Prop : Array<ObjectClassA> item [0] + [1]`)
+      Row() {
+        ObjectLinkClassA({ obj:  this.objArray[0] })
+        Text("[0] Assign new ClassA")
+          .height(100)
+          .onClick(() => {
+            this.objArray[0] = new ClassA();
+            console.info(`PropClassAArray[0] onClick ClassA object assign ${this.objArray[0].a}`)
+          })
+        Text("Change ClassA property")
+          .height(100)
+          .onClick(() => {
+            this.objArray[0].a += 1;
+            console.info(`PropClassAArray[1] onClick ClassA property change  ${this.objArray[1].a}`)
+          })
+      }
+    }.border({width: 3, color: Color.Green})
+  }
+}
+
+@Entry
+@Component
+struct StateClassAArray {
+  @State stateClassAArray : Array<ClassA> = [ new ClassA(), new ClassA() ];
+
+  build() {
+    Column() {
+      Column() {
+        Text("Red box: @ObjectLink from @State array item[0]")
+        Row() {
+          ObjectLinkClassA({obj : this.stateClassAArray[0] })
+          Text("Assign new ClassA")
+            .height(100)
+            .onClick(() => {
+              this.stateClassAArray[0] = new ClassA();
+              console.info(`StateClassAArray[0] onClick ClassA object assign ${this.stateClassAArray[0].a}`)
+            })
+          Text("Change ClassA property")
+            .height(100)
+            .onClick(() => {
+              this.stateClassAArray[0].a += 1;
+              console.info(`StateClassAArray onClick stateClassAArray[0] changed to  ${this.stateClassAArray[0].a}`)
+            })
+        }
+
+      }.border({width: 3, color: Color.Blue})
+
+      Divider().height(5)
+
+      // Shallow copy in API version 9: Only the reference pointing to the source array item is copied, and the ClassA instance itself is not copied.
+      // Deep copy in API version 10: The this.stateClassAArray instance is completely copied, including its array items.
+      PropClassAArray({ objArray: this.stateClassAArray })
+    }
+  }
+}
+```

en/release-notes/changelogs/OpenHarmony_4.0.9.3/changelogs-arkui.md

+# ArkUI Subsystem Changelog
+
+
+## cl.arkui.1 Reporting of Unexpected Number of @Extend/@AnimatableExtend Parameters
+
+The @Extend and @AnimatableExtend decorators allow for only one parameter.
+
+**Change Impact**
+
+When there are multiple parameters for the @Extend/@AnimatableExtend decorator, a compilation error is reported.
+
+**Example (incorrect)**:
+
+```ts
+// xxx.ets
+
+@Extend(Text, Button)  // Compilation error: @Extend should have one and only one parameter.
+function fancy() {
+  .width(100)
+}
+
+@AnimatableExtend(Text, Polyline)  //Compilation error: @AnimatableExtend should have one and only one parameter.
+function fancy2() {
+  .height(100)
+}
+
+@Entry
+@Component
+struct Example {
+  build() {
+    Column() {
+      Text('text')
+        .fancy()
+        .fancy2()
+    }
+  }
+}
+```
+
+**Key API/Component Changes**
+
+N/A
+
+**Adaptation Guide**
+
+Make sure the @Extend and @AnimatableExtend decorators contain only one parameter.
+
+The code snippet is as follows:
+```ts
+// xxx.ets
+
+@Extend(Text)
+function fancy() {
+  .width(100)
+}
+
+@AnimatableExtend(Text)
+function fancy2() {
+  .height(100)
+}
+
+@Entry
+@Component
+struct Example {
+  build() {
+    Column() {
+      Text('text')
+        .fancy()
+        .fancy2()
+    }
+  }
+}
+```
+
+## cl.arkui.2 Reporting of @Link/@ObjectLink Member Variables Not Being Configured from Parent Components
+
+The value of an @Link or @ObjectLink decorated member variable in a component must be from the parent component.
+
+**Change Impact**
+
+When the value of an @Link/@ObjectLink decorated member variable in a component is not configured from the parent component, a compilation error is reported.
+
+**Example (incorrect)**:
+
+```ts
+// xxx.ets
+
+@Observed
+class Count {
+  message: string = 'count'
+}
+
+@Entry
+@Component
+struct Parent {
+  @State state1: string = 'state1';
+  @State state2: Count = new Count();
+  build() {
+    Column() {
+      Child()  // Compilation error: Property 'link' in the custom component 'Child' is missing (mandatory to specify).
+               // Compilation error: Property 'objectLink' in the custom component 'Child' is missing (mandatory to specify).
+    }
+  }
+}
+
+@Component
+struct Child {
+  @Link link: string;
+  @ObjectLink objectLink: Count;
+  build() {
+    Column() {
+      Text(this.link)
+        .fontSize(50)
+      Text(this.objectLink.message)
+        .fontSize(50)
+    }
+  }
+}
+```
+
+**Key API/Component Changes**
+
+N/A
+
+**Adaptation Guide**
+
+Configure the @Link and @ObjectLink decorated member variables in components to get their values from the parent component.
+
+The code snippet is as follows:
+```ts
+// xxx.ets
+
+@Observed
+class Count {
+  message: string = 'count'
+}
+
+@Entry
+@Component
+struct Parent {
+  @State state1: string = 'state1';
+  @State state2: Count = new Count();
+  build() {
+    Column() {
+      Child({link: $state1, objectLink: this.state2})
+    }
+  }
+}
+
+@Component
+struct Child {
+  @Link link: string;
+  @ObjectLink objectLink: Count;
+  build() {
+    Column() {
+      Text(this.link)
+        .fontSize(50)
+      Text(this.objectLink.message)
+        .fontSize(50)
+    }
+  }
+}
+```
+## cl.arkui.3 Behavior Change of the onReady Event for \<Canvas>
+
+**Description**
+The **onReady** event is triggered when the component is ready or when the component size changes. After it is triggered, the canvas is cleared.
+
+**Example**
+```ts
+@Entry
+@Component
+struct OnReadyDiff {
+  @State message: string = 'init '
+  @State isShow: boolean = false
+  @State myHeight: number = 300
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(50)
+          .fontWeight(FontWeight.Bold)
+        Button('ChangePosition')
+          .onClick(()=>{
+            this.isShow = !this.isShow
+          })
+        if (this.isShow) {
+          Button('new button')
+            .height(200)
+        }
+        Button('ChangeHeight')
+          .onClick(()=>{
+            this.myHeight = this.myHeight==300?500:300
+          })
+
+        Canvas(this.context)
+          .width(300)
+          .height(this.myHeight)
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.fillRect(0, 0, 100, 100)
+            this.message += 'a '
+          })
+        Button('draw another')
+          .onClick(()=>{
+            this.context.fillRect(100, 100, 100, 100)
+          })
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+```
+
+API version 9: The **onReady** event is triggered when the component is ready, when the component location changes, or when the component size changes.
+
+![stack](figures/api9onReady.gif)
+
+API version 10 and later: The **onReady** event is triggered when the component is ready or when the component size changes. It is not triggered when the component location changes.
+
+![stack](figures/api10onReady.gif)
+
+**Change Impact**
+
+When the component location changes, the **onReady** event is triggered in API version 9 and earlier versions, but not in API version 10 and later versions.
+
+## cl.arkui.4 Change of How Percentage Is Calculated for Margin
+
+Before the change: The margin is calculated twice when set in percentage. The second calculation is conducted after the result of the first calculation has been subtracted from the percentage reference. After the change: The first margin calculation result is used as the final result, and the second calculation is not conducted.
+
+**Change Impact**
+
+This change affects calculation of margins set in percentage.
+
+**Example (incorrect)**:
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct TextInputExample {
+  @State text: string = ''
+  controller: TextInputController = new TextInputController()
+
+  build() {
+    Column(){
+      Row().margin({left:"50%"}).width(100).height(100)
+    }.width("100%").height("100%")
+  }
+}
+```
+
+**Key API/Component Changes**
+
+N/A
+
+**Adaptation Guide**
+
+After the change, the margin percentage reference is fixed at the parent component's width minus its padding, and does not subtract the result of the first margin calculation. As a result, the margin percentage is slightly greater than that before the change. Account for this change when setting the margin percentage.

en/release-notes/changelogs/OpenHarmony_4.0.9.5/changelogs-arkui.md

+# ArkUI Subsystem Changelog
+
+## cl.arkui.1 Visibility Change of the menus Attribute in \<Navigation>
+
+**Change Impact**
+
+The **value** sub-attribute of the **menus** attribute is not displayed. To display the value, you can use a custom builder.
+
+**Example**
+```ts
+@Entry
+@Component
+struct Index {
+  build() {
+    Column() {
+      Navigation() {
+        Text('Navigation')
+      }.title("Navigation Menu")
+      .menus([
+        {icon: 'common/image/icon.png', value: 'menu1'},
+        {icon: 'common/image/icon.png', value: 'menu2'},
+        {icon: 'common/image/icon.png', value: 'menu3'}
+      ])
+    }
+  }
+}
+```
+In API version 9, the **value** sub-attribute of the **menus** attribute is displayed.
+
+![Navigation](figures/navigation_menu_api9.png)
+
+In API version 10, the **value** sub-attribute of the **menus** attribute is not displayed.
+
+![Navigation](figures/navigation_menu_api10.png)
+
+## cl.arkui.2 Change of the Default Display Position for Free Mode of the titleMode Attribute in \<Navigation>
+
+**Change Impact**
+1. In the **\<Navigation>** component, the display position of a custom title with **titleMode** set to **Full** is the same as that with **titleMode** set to **Free**.
+2. If a custom title is used with a label in Free mode, the label is deviated rightwards.
+
+**Example**
+```ts
+@Entry
+@Component
+struct Index {
+  @Builder NavigationTile() {
+    Column() {
+      Text('title').fontColor('#182431').fontSize(30).lineHeight(41)
+      Text('subTitle').fontColor('#182431').fontSize(14).lineHeight(19).margin(top:2, bottom: 20)
+    }
+  }
+
+  build() {
+    Column() {
+      Navigation() {
+        Text('Navigation')
+      }.title(this.NavigationTitle)
+       .titleMode(NavigationTitleMode.Free)
+       .menus([
+        {icon: 'common/image/icon.png', value: 'menu1'}
+       ])
+    }
+  }
+}
+```
+
+Display position in Free mode in API version 9
+
+![Navigation](figures/navigation_title_mode_free_sdk9.png)
+
+Display position in Free mode in API version 10, which is the same as that in Full mode
+
+![Navigation](figures/navigation_title_mode_free_sdk10.png)
+
+## cl.arkui.3 Change of Handling of Invalid Strings
+
+**Change Impact**
+
+An invalid string that contains digits is not parsed into digits. Instead, it is regarded as an invalid value and is set to the default value according to predefined rules.
+
+**Example**
+```ts
+@Entry
+@Component
+struct GridRowExample {
+  @State bgColors: Color[] = [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
+  @State currentBp: string = 'unknown'
+
+  build() {
+    Column() {
+      GridRow({
+        columns: 5,
+        gutter: { x: 5, y: 10 },
+        breakpoints: { value: ["400vp", "600vp", "800vp"],
+          reference: BreakpointsReference.WindowSize },
+        direction: GridRowDirection.Row
+      }) {
+        ForEach(this.bgColors, (color) => {
+          GridCol({ span: { xs: 1, sm: 2, md: 3, lg: 4 } }) {
+            Row().width("100%").height("20vp")
+          }.borderColor(color).borderWidth(2)
+        })
+      }.width("100%").height("100%")
+    }.width("80pv").margin({ left: 10, top: 5, bottom: 5 }).height(200)
+    .border({ color: '#880606', width: 2 })
+  }
+}
+```
+
+API version 9: In the preceding example, the value **"80pv"** of the **width** attribute in **\<GridRow>** is equivalent to **80**.
+
+API version 10: In the preceding example, the value **"80pv"** is regarded as an invalid value. Therefore, the **width** attribute in **\<GridRow>** is set to the default value, which means that the attribute is not set.
+
+## cl.arkui.4 Change of Invalid Values of the loop Attribute in \<Swiper> to true
+
+**Change Impact**
+
+The value used in place of any invalid value of the **loop** attribute in the **\<Swiper>** component is changed from **false** to **true**.
+
+API version 9: The value **false** is used when the **loop** attribute is set to an invalid value.
+
+API version 10: The value **true** is used when the **loop** attribute is set to an invalid value.
+
+## cl.arkui.5 Change of Speed Threshold for Page Turning from 180 px/s to 1200 px/s in \<Swiper>
+
+**Change Impact**
+
+A faster speed is required to turn pages.

en/release-notes/changelogs/v3.2-beta5/changelogs-arkui.md

@@ -39,8 +39,6 @@
     }
     ```
 
-    ![datePicker](../../../application-dev/reference/arkui-ts/figures/datePicker.gif)
-
 2. 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.
 
     The **Length**, **ResourceStr**, and **ResourceColor** types are combinations of primitive data types or reference data types. Therefore, they cannot be used by the aforementioned types of state variables.

en/release-notes/changelogs/v4.0-beta2/Readme-EN.md

-# Readme

en/release-notes/changelogs/v4.0-beta2/changelogs-arkui.md

+# ArkUI Subsystem Changelog
+
+## cl.arkui.1 Visibility Change of the menus Attribute in \<Navigation>
+
+**Change Impact**
+
+The **value** sub-attribute of the **menus** attribute is not displayed. To display the value, you can use a custom builder.
+
+**Example**
+```ts
+@Entry
+@Component
+struct Index {
+  build() {
+    Column() {
+      Navigation() {
+        Text('Navigation')
+      }.title("Navigation Menu")
+      .menus([
+        {icon: 'common/image/icon.png', value: 'menu1'},
+        {icon: 'common/image/icon.png', value: 'menu2'},
+        {icon: 'common/image/icon.png', value: 'menu3'}
+      ])
+    }
+  }
+}
+```
+In API version 9, the **value** sub-attribute of the **menus** attribute is displayed.
+
+![Navigation](figures/navigation_menu_api9.png)
+
+In API version 10, the **value** sub-attribute of the **menus** attribute is not displayed.
+
+![Navigation](figures/navigation_menu_api10.png)
+
+## cl.arkui.2 Change of the Default Display Position for Free Mode of the titleMode Attribute in \<Navigation>
+
+**Change Impact**
+1. In the **\<Navigation>** component, the display position of a custom title with **titleMode** set to **Full** is the same as that with **titleMode** set to **Free**.
+2. If a custom title is used with a label in Free mode, the label is deviated rightwards.
+
+**Example**
+```ts
+@Entry
+@Component
+struct Index {
+  @Builder NavigationTile() {
+    Column() {
+      Text('title').fontColor('#182431').fontSize(30).lineHeight(41)
+      Text('subTitle').fontColor('#182431').fontSize(14).lineHeight(19).margin(top:2, bottom: 20)
+    }
+  }
+
+  build() {
+    Column() {
+      Navigation() {
+        Text('Navigation')
+      }.title(this.NavigationTitle)
+       .titleMode(NavigationTitleMode.Free)
+       .menus([
+        {icon: 'common/image/icon.png', value: 'menu1'}
+       ])
+    }
+  }
+}
+```
+
+Display position in Free mode in API version 9
+
+![Navigation](figures/navigation_title_mode_free_sdk9.png)
+
+Display position in Free mode in API version 10, which is the same as that in Full mode
+
+![Navigation](figures/navigation_title_mode_free_sdk10.png)
+
+## cl.arkui.3 Change of Advanced Animation APIs to System APIs
+
+**Change Impact**
+The **sphericalEffect**, **lightUpEffect**, and **pixelStretchEffect** APIs are changed from public APIs to system APIs, which are not exposed to external developers.
+
+## cl.arkui.4 Specification Change of the onClick Event
+
+**Change Impact**
+1. If a component is bound to both onClick/TapGesture and PanGesture, it responds to PanGesture, but not onClick/TapGesture, when the finger slides beyond the allowed distance.
+2. If a component is bound to only onClick/TapGesture, it responds to onClick/TapGesture when the finger is lifted up after having moved within the component area.
+3. If a component is bound to only onClick/TapGesture, it does not respond to onClick/TapGesture when the finger is lifted up after having moved beyond the component area.