update docs

Signed-off-by: Nge-yafang <geyafang@huawei.com>

en/application-dev/device/vibrator-guidelines.md

+# Vibrator Development
+
+
+## When to Use
+
+You can set different vibration effects as needed, for example, customizing vibration effects with different intensities and durations for buttons on the device, and customizing one-shot or periodic vibration effects with different intensities and durations for alarm clocks and incoming calls.
+
+
+## Available APIs
+
+  | Module | API | Description | 
+| -------- | -------- | -------- |
+| ohos.vibrator | vibrate(duration: number): Promise<void> | Triggers vibration with the specified duration. This API uses a promise to return the result. | 
+| ohos.vibrator | vibrate(duration: number, callback?: AsyncCallback<void>): void | Triggers vibration with the specified duration. This API uses a callback to return the result. | 
+| ohos.vibrator | vibrate(effectId: EffectId): Promise<void> | Triggers vibration with the specified effect. This API uses a promise to return the result. | 
+| ohos.vibrator | vibrate(effectId: EffectId, callback?: AsyncCallback<void>): void | Triggers vibration with the specified effect. This API uses a callback to return the result. | 
+| ohos.vibrator | stop(stopMode: VibratorStopMode): Promise<void> | Stops vibration. This API uses a promise to return the result. | 
+| ohos.vibrator | stop(stopMode: VibratorStopMode, callback?: AsyncCallback<void>): void | Stops vibration. This API uses a callback to return the result. | 
+
+
+## How to Develop
+
+1. Declare the permissions required for controlling vibrators on the hardware device in the **config.json** file. 
+     
+   ```
+   "reqPermissions":[
+     {
+        "name":"ohos.permission.ACCELEROMETER",
+        "reason"":"", 
+        "usedScene":{
+         "ability""[
+           ".MainAbility"
+         ],
+         "when":"inuse"
+       }
+     },
+     {
+        "name":"ohos.permission.VIBRATE",
+        "reason"":"", 
+        "usedScene":{
+         "ability""[
+           ".MainAbility"
+         ],
+         "when":"inuse"
+       }
+     },
+     {
+        "name":"ohos.permission.ACTIVITY_MOTION",
+        "reason"":"", 
+        "usedScene":{
+         "ability""[
+           ".MainAbility"
+         ],
+         "when":"inuse"
+       }
+     },
+   ]
+   ```
+
+2. Trigger the device to vibrate.
+     
+   ```
+   import vibrator from "@ohos.vibrator"
+   vibrator.vibrate(duration: number).then((error)=>{
+       if(error){// The call fails, and error.code and error.message are printed.
+          console.log("Promise return failed.error.code"+error.code+"error.message"+error.message);  
+       }else{// The call succeeded. The device starts to vibrate.
+          console.log("Promise returned to indicate a successful vibration.")  
+       };
+   })
+   ```
+
+3. Stop the vibration.
+     
+   ```
+   import vibrator from "@ohos.vibrator"
+   vibrator.stop(stopMode: VibratorStopMode).then((error)=>{
+      if(error){// The call fails, and error.code and error.message are printed.
+          console.log("Promise return failed. error.code"+error.code+"error.message"+error.message);
+      }else{// The call succeeded. The device stops vibration.
+          Console.log("Promise returned to indicate a successful stop.");
+      };
+   })
+   ```

en/application-dev/device/vibrator-overview.md

+# Vibrator Overview
+
+
+The vibrator service opens up the latest capabilities of the vibrator hardware to the maximum extent. By expanding the native vibrator service to implement integrated vibration and interaction design, the service delivers an exquisite integrated vibration experience and differentiated experience, and improves user interaction efficiency and usability.
+
+
+## Working Principles
+
+The vibrator is a Misc device that consists of four modules: Vibrator API, Vibrator Framework, Vibrator Service, and HD_IDL.
+
+  **Figure1** Vibrator in Misc devices
+  ![en-us_image_0000001180249428](figures/en-us_image_0000001180249428.png)
+
+- Vibrator API: provides basic vibrator APIs, including the APIs for querying the vibrator list, querying the vibrator by effect, and triggering and stopping vibration.
+
+- Vibrator Framework: manages the framework layer of the vibrator and communicates with the Misc Device Service.
+
+- Vibrator Service: manages services of vibrators.
+
+- HD_IDL: adapts to different devices.
+
+
+## Constraints
+
+When using a vibrator, you need to declare and obtain the **ohos.permission.VIBRATE** permission first so that you can control the vibration effect.

en/application-dev/ui/Readme-EN.md → en/application-dev/ui/Readme-CN.md

 # UI
 
-- JavaScript-based Web-Like Development Paradigm
+- [ArkUI Overview](arkui-overview.md)
+- JavaScript-based Web-like Development Paradigm
     - [Overview](ui-js-overview.md)
     - Framework
         - [File Organization](js-framework-file.md)
@@ -25,26 +26,27 @@
         - [Developing Animations](ui-js-building-ui-animation.md)
         - [Defining Events](ui-js-building-ui-event.md)
         - [Defining Page Routes](ui-js-building-ui-routes.md)
-     - Common Component Development Guidelines
-        - [Text](ui-js-components-text.md)
-        - [Input](ui-js-components-input.md)
-        - [Button](ui-js-components-button.md)
-        - [List](ui-js-components-list.md)
-        - [Picker](ui-js-components-picker.md)
-        - [Dialog](ui-js-components-dialog.md)
-        - [Form](ui-js-components-form.md)
-        - [Stepper](ui-js-components-stepper.md)
-        - [Tabs](ui-js-component-tabs.md)
-        - [Image](ui-js-components-images.md)
+    - Common Component Development Guidelines
+        - [<text> Development](ui-js-components-text.md)
+        -   [<input> Development](ui-js-components-input.md)
+        -   [<button> Development](ui-js-components-button.md)
+        -   [<list> Development](ui-js-components-list.md)
+        -   [<picker> Development](ui-js-components-picker.md)
+        -   [<dialog> Development](ui-js-components-dialog.md)
+        -   [<form> Development](ui-js-components-form.md)
+        -   [<stepper> Development](ui-js-components-stepper.md)
+        -   [<tabs> Development](ui-js-component-tabs.md)
+        -   [<image> Development](ui-js-components-images.md)
     - Animation Development Guidelines
         - CSS Animation
             - [Defining Attribute Style Animations](ui-js-animate-attribute-style.md)
             - [Defining Animations with the transform Attribute](ui-js-animate-transform.md)
             - [Defining Animations with the background-position Attribute](ui-js-animate-background-position-style.md)
+            - [Defining Animations for SVG Components](ui-js-animate-svg.md)
         - JS Animation
             - [Component Animation](ui-js-animate-component.md)
             - Interpolator Animation
-                 - [Animation Effect](ui-js-animate-dynamic-effects.md)
+                - [Animation Effect](ui-js-animate-dynamic-effects.md)
                 - [Animation Frame](ui-js-animate-frame.md)
     - [Custom Components](ui-js-custom-components.md)
 - TypeScript-based Declarative Development Paradigm
@@ -65,9 +67,9 @@
         - General UI Description Specifications
             - [Basic Concepts](ts-general-ui-concepts.md)
             - Declarative UI Description Specifications
-                - [Parameterless Configuration](ts-parameterless-configuration.md)
+                - [Configuration Without Parameters](ts-parameterless-configuration.md)
                 - [Configuration with Mandatory Parameters](ts-configuration-with-mandatory-parameters.md)
-                - [Attribution Configuration](ts-attribution-configuration.md)
+                - [Attribute Configuration](ts-attribution-configuration.md)
                 - [Event Configuration](ts-event-configuration.md)
                 - [Child Component Configuration](ts-child-component-configuration.md)
             - Componentization
@@ -77,6 +79,7 @@
                 - [@Builder](ts-component-based-builder.md)
                 - [@Extend](ts-component-based-extend.md)
                 - [@CustomDialog](ts-component-based-customdialog.md)
+                - [@Styles](ts-component-based-styles.md)
         - About UI State Management
             - [Basic Concepts](ts-ui-state-mgmt-concepts.md)
             - Managing Component States
@@ -88,19 +91,21 @@
                 - [PersistentStorage](ts-application-states-apis-persistentstorage.md)
                 - [Environment](ts-application-states-apis-environment.md)
             - Managing Other States
-                - [@observed and @objectLink](ts-other-states-observed-objectlink.md)
+                - [@Observed and @ObjectLink](ts-other-states-observed-objectlink.md)
                 - [@Consume and @Provide](ts-other-states-consume-provide.md)
                 - [@Watch](ts-other-states-watch.md)
-        - About Rendering Control Syntax
-            - [if/else](ts-rending-control-syntax-if-else.md)
-            - [ForEach](ts-rending-control-syntax-foreach.md)
-            - [LazyForEach](ts-rending-control-syntax-lazyforeach.md)
+            - About Rendering Control Syntax
+                - [if/else](ts-rending-control-syntax-if-else.md)
+                - [ForEach](ts-rending-control-syntax-foreach.md)
+                - [LazyForEach](ts-rending-control-syntax-lazyforeach.md)
         - About @Component
             - [build Function](ts-function-build.md)
-            - [Custom Component Initialization](ts-custom-component-initialization.md)
+            - [Initialization of Custom Components' Member Variables](ts-custom-component-initialization.md)
             - [Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md)
-            - [Example: Component Creation and Re-Initialization](ts-component-creation-re-initialization.md)
-        - [Syntactic Sugar](ts-syntactic-sugar.md)
+            - [Component Creation and Re-initialization](ts-component-creation-re-initialization.md)
+        - [About Syntactic Sugar](ts-syntactic-sugar.md)
+    - Common Component Development Guidelines
+        - [<web> Development](ui-ts-components-web.md)
     - Experiencing the Declarative UI
         - [Creating a Declarative UI Project](ui-ts-creating-project.md)
         - [Getting to Know Components](ui-ts-components.md)
@@ -110,4 +115,3 @@
         - [Building a Food Category List Layout](ui-ts-building-category-list-layout.md)
         - [Building a Food Category Grid Layout](ui-ts-building-category-grid-layout.md)
         - [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md)
-

en/application-dev/ui/arkui-overview.md

+# ArkUI Overview
+
+
+## Introduction
+
+ArkUI is a UI development framework that provides what you'll need to develop application UIs.
+
+
+## Basic Concepts
+
+- Component: the smallest unit for UI building and display. You build a UI that meets your needs through flexible combinations of components.
+
+- Page: the smallest unit for ArkUI application scheduling. You can design multiple pages for your application, manage their files on a per-page basis, and schedule page redirection through routing APIs, so as to implement decoupling of application functions.
+
+
+## Key Capabilities
+
+- Diverse components: In addition to a wide range of basic components, such as components for text display, image display, and keypress interaction, ArkUI provides media components that support video playback. Better yet, it also provides polymorphic components, which can adapt to styles of different devices.
+
+- Flexible layouts: Creating a responsive UI in ArkUI is easy, with our carefully-designed layout approaches: Besides the classic flexible layout capability, you also have access to the list, grid, and atomic layouts that auto-adapt to screen resolutions.
+
+- Animation: Apart from animations embedded in components, ArkUI offers additional animation features: attribute animation, transition animation, and custom animation.
+
+- UI interaction: ArkUI allows users to interact with your application UI properly, regardless of the system platform and input device. By default, the UI accepts input from touch gestures, remote controls, and mouse devices, with support for the event notification capability.
+
+- Drawing: ArkUI offers advanced drawing capabilities that allow you to draw custom shapes with a range of editors, from images to fill colors and texts.
+
+- Platform API channel: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript APIs in a unified style.
+
+
+## Development Paradigms
+
+ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
+
+
+### Web-like Development Paradigm
+
+The web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs.
+
+
+### Declarative Development Paradigm
+
+The declarative development paradigm uses the TypeScript programming language and extends the declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and state management. The programming mode used is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. With type annotations in TypeScript, you can enforce type checking at compile time. If you are developing large applications, the declarative development paradigm is more applicable.
+
+
+### Web-like Development Paradigm vs. Declarative Development Paradigm
+
+  | Development Paradigm | Language | UI Update Mode | Applicable To | Intended Audience | 
+| -------- | -------- | -------- | -------- | -------- |
+| Web-like development paradigm | JavaScript | Data-driven | Applets and service widgets with simple UIs | Frontend web developers | 
+| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers | 
+
+
+### Framework Structure
+
+![en-us_image_0000001267647869](figures/en-us_image_0000001267647869.png)
+
+As shown above, the two development paradigms share the UI backend engine and language runtime. The UI backend engine implements the six basic capabilities of the ArkUI framework. The declarative development paradigm does not require the JS Framework for managing the page DOM. As such, it has more streamlined rendering and update links and less memory usage. This makes the declarative development paradigm a better choice for building application UIs.