update docs (12813)

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

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

@@ -15,7 +15,7 @@ In ArkTS, you define a custom component by using decorators **@Component** and *
   }
   ```
 
-- **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.
+- **build** function: A custom component must implement the **build** function and must implement no constructor. The **build** function meets the definition of the **Builder** API and is used to define the declarative UI description of components.
 
   ```ts
   interface Builder {
@@ -49,9 +49,9 @@ Column() {
 }
 ```
 
-### Structs with Mandatory Parameters
+### Structs with 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.
+A struct with 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:
 
@@ -61,7 +61,7 @@ Sample code:
   Image('https://xyz/test.jpg')
   ```
 
-- Set the mandatory parameter **content** of the **\<Text>** component as follows:
+- Set the optional parameter **content** of the **\<Text>** component as follows:
 
   ```ts
   Text('test')
@@ -83,35 +83,35 @@ Component attributes are configured using an attribute method, which follows the
 
   ```ts
   Text('test')
-      .fontSize(12)
+    .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)
+    .alt('error.jpg')    
+    .width(100)    
+    .height(100)
   ```
 
 - Example of passing variables or expressions in addition to constants:
 
   ```ts
   Text('hello')
-      .fontSize(this.size)
+    .fontSize(this.size)
   Image('test.jpg')
-      .width(this.count % 2 === 0 ? 100 : 200)    
-      .height(this.offset + 100)
+    .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)
+    .fontSize(20)
+    .fontColor(Color.Red)
+    .fontWeight(FontWeight.Bold)
   ```
 
 ### Event Configuration
@@ -146,7 +146,7 @@ Events supported by components are configured using event methods, which each fo
   ...
 
   Button('add counter')
-    .onClick(this.myClickHandler)
+    .onClick(this.myClickHandler.bind(this))
   ```
 
 ### Child Component Configuration
@@ -158,11 +158,11 @@ For a component that supports child components, for example, a container compone
   ```ts
   Column() {
       Text('Hello')
-          .fontSize(100)
+        .fontSize(100)
       Divider()
       Text(this.myText)
-          .fontSize(100)
-          .fontColor(Color.Red)
+        .fontSize(100)
+        .fontColor(Color.Red)
   }
   ```
 

en/application-dev/reference/arkui-ts/ts-types.md

@@ -18,6 +18,10 @@ You can use `$r` or `$rawfile` to create a **Resource** object, but its attribut
 
   **filename**: name of the file in the **resources/rawfile** directory of the project.
 
+  > **NOTE**
+  >
+  > When referencing resources of the **Resource** type, make sure the data type is the same as that of the attribute method. For example, if an attribute method supports the **string | Resource** types, the data type of the **Resource** type must be string.
+
 ## Length
 
 The **Length** type is used to represent a size unit.
@@ -138,12 +142,12 @@ The **LengthConstrain** type is used to describe the maximum and minimum lengths
 
 The **Font** type is used to set the text style.
 
-| Name    | Type                                      | Mandatory  | Description                                      |
-| ------ | ---------------------------------------- | ---- | ---------------------------------------- |
-| size   | [Length](#length)                        | No   | Font size. If the value is of the number type, the unit fp is used.         |
-| weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No   | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.|
-| family | string \| [Resource](#resource)          | No   | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**.|
-| style  | [FontStyle](ts-appendix-enums.md#fontstyle) | No   | Font style.                              |
+| Name  | Type                                                        | Mandatory| Description                                                        |
+| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
+| size   | [Length](#length)                                            | No  | Font size. If the value is of the number type, the unit fp is used. The value cannot be a percentage.|
+| weight | [FontWeight](ts-appendix-enums.md#fontweight) \| number \| string | No  | Font weight. For the number type, the value ranges from 100 to 900, at an interval of 100. The default value is **400**. A larger value indicates a larger font weight.|
+| family | string \| [Resource](#resource)                              | No  | Font family of the text. Use commas (,) to separate multiple fonts. The priority of the fonts is the sequence in which they are placed. An example value is **'Arial, sans-serif'**. Currently, only the **'sans-serif'** font is supported.|
+| style  | [FontStyle](ts-appendix-enums.md#fontstyle)                  | No  | Font style.                                        |
 
 ## Area<sup>8+</sup>
 
@@ -212,4 +216,4 @@ The **CustomBuilder** type is used to define custom UI descriptions in component
 
 | Name           | Type                  | Description                                      |
 | ------------- | ---------------------- | ---------------------------------------- |
-| CustomBuilder | ()&nbsp;=&gt;&nbsp;any | Must be decorated by **@Builder**. For details, see [@Builder](../../quick-start/arkts-dynamic-ui-elememt-building.md#builder).|
+| CustomBuilder | () =&gt; any | Must be decorated by **@Builder**. For details, see [@Builder](../../quick-start/arkts-dynamic-ui-elememt-building.md#builder).|

en/application-dev/reference/arkui-ts/ts-universal-focus-event.md

 # Focus Event
 
-A focus event is triggered when the page focus moves between components. It can be used to change the content of a component.
+A focus event is triggered when the page focus moves between components. It can be used to process related logic within the component.
 
 >  **NOTE**
 >
 >  - The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
+>
 >  - Currently, only the Tab button and arrow buttons on the external keyboard can be used to trigger the focus event.
+>
+>  - Components that have default interaction logic, such as **\<Button>** and **\<TextInput>**, are focusable by default. Other components, such as **\<Text>** and **\<Image>**, are not focusable by default. Only focusable components can trigger a focus event. To enable a component to be focusable, set its **focusable** attribute to **true**.
 
 
 ## Events
 
 | Name                                  | Bubbling Supported| Description       |
 | ---------------------------------------- | -------- | --------------- |
-| onFocus(event: () =&gt; void) | No       | Triggered when the current component obtains focus.|
+| onFocus(event: () =&gt; void) | No  | Triggered when the current component obtains focus.|
 | onBlur(event:() =&gt; void)    | No       | Triggered when the current component loses focus.|
 
->  **NOTE**
->
->  The following components support focus events: **\<Button>**, **\<Text>**, **\<Image>**, **\<List>**, and **\<Grid>**.
-
 
 ## Example
 
@@ -27,44 +26,52 @@ A focus event is triggered when the page focus moves between components. It can
 @Entry
 @Component
 struct FocusEventExample {
-  @State textOne: string = ''
-  @State textTwo: string = ''
-  @State textThree: string = ''
-  @State oneButtonColor: string = '#FF0000'
+  @State oneButtonColor: string = '#FFC0CB'
   @State twoButtonColor: string = '#87CEFA'
   @State threeButtonColor: string = '#90EE90'
 
   build() {
-    Column({ space:20 }){
-      Button(this.textOne)
+    Column({ space: 20 }) {
+      // You can use the up and down arrow keys on an external keyboard to move the focus between the three buttons. When a button gains focus, its color changes. When it loses focus, its color changes back.
+      Button('First Button')
         .backgroundColor(this.oneButtonColor)
-        .width(260).height(70).fontColor(Color.Black)
+        .width(260)
+        .height(70)
+        .fontColor(Color.Black)
         .focusable(true)
         .onFocus(() => {
-          this.textOne = 'First Button onFocus'
-          this.oneButtonColor = '#AFEEEE'
+          this.oneButtonColor = '#FF0000'
         })
         .onBlur(() => {
-          this.textOne = 'First Button onBlur'
           this.oneButtonColor = '#FFC0CB'
         })
-      Button(this.textTwo)
+      Button('Second Button')
         .backgroundColor(this.twoButtonColor)
-        .width(260).height(70).fontColor(Color.Black)
+        .width(260)
+        .height(70)
+        .fontColor(Color.Black)
         .focusable(true)
-      Button(this.textThree)
+        .onFocus(() => {
+          this.twoButtonColor = '#FF0000'
+        })
+        .onBlur(() => {
+          this.twoButtonColor = '#87CEFA'
+        })
+      Button('Third Button')
         .backgroundColor(this.threeButtonColor)
-        .width(260).height(70).fontColor(Color.Black)
+        .width(260)
+        .height(70)
+        .fontColor(Color.Black)
         .focusable(true)
         .onFocus(() => {
-          this.textThree = 'Third Button onFocus'
-          this.threeButtonColor = '#AFEEEE'
+          this.threeButtonColor = '#FF0000'
         })
         .onBlur(() => {
-          this.textThree = 'Third Button onBlur'
-          this.threeButtonColor = '#FFC0CB'
+          this.threeButtonColor = '#90EE90'
         })
-    }.width('100%').margin({ top:20 })
+    }.width('100%').margin({ top: 20 })
   }
 }
 ```
+
+ ![focus](figures/focus.png)