提交 6017ae5a 编写于 作者: E ester.zhou

Update docs (18216)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 2c914fe1
......@@ -24,7 +24,7 @@
- [HAR](har-package.md)
- HSP
- [In-Application HSP Development](in-app-hsp.md)
- [Inter-Application HSP Development (for System Applications Only)](cross-app-hsp.md)
- [Inter-Application HSP Development](cross-app-hsp.md)
- Atomic Service
- [Atomic Service Development](atomicService.md)
- [Atomic Service Space Management (for System Applications Only)](atomicService-aging.md)
......
......@@ -372,16 +372,18 @@ let record = pasteboard.createUriRecord('dataability:///com.example.myapplicatio
Defines the properties of all data records on the pasteboard, including the timestamp, data type, and additional data.
The defined properties can be applied to the pasteboard only with the [setProperty](#setproperty9) API.
**System capability**: SystemCapability.MiscServices.Pasteboard
| Name| Type| Readable| Writable| Description |
| -------- | -------- | -------- | -------- |--------------------------------------------------------------------------------------------|
| additions<sup>7+</sup> | {[key:string]:object} | Yes| Yes| Additional data. |
| mimeTypes<sup>7+</sup> | Array&lt;string&gt; | Yes| No| Non-repeating data types of the data records on the pasteboard. |
| tag<sup>7+</sup> | string | Yes| Yes| Custom tag. |
| timestamp<sup>7+</sup> | number | Yes| No| Timestamp when data is written to the pasteboard (unit: ms). |
| localOnly<sup>7+</sup> | boolean | Yes| Yes| Whether the pasteboard content is for local access only. The default value is **false**. This attribute is not supported currently. You are advised to use **shareOption** instead.<br>- **true**: The pasteboard content is set for local access only.<br>- **false**: The pasteboard content can be shared between devices.|
| shareOption<sup>9+</sup> | [ShareOption](#shareoption9) | Yes| Yes| Where the pasteboard content can be pasted. If this attribute is set incorrectly or not set, the default value **CROSSDEVICE** is used. |
| Name| Type| Readable| Writable| Description |
| -------- | -------- | -------- | -------- |----------------|
| additions<sup>7+</sup> | {[key:string]:object} | Yes| Yes| Additional data. |
| mimeTypes<sup>7+</sup> | Array&lt;string&gt; | Yes| No| Non-repeating data types of the data records on the pasteboard. |
| tag<sup>7+</sup> | string | Yes| Yes| Custom tag. |
| timestamp<sup>7+</sup> | number | Yes| No| Timestamp when data is written to the pasteboard (unit: ms). |
| localOnly<sup>7+</sup> | boolean | Yes| Yes| Whether the pasteboard content is for local access only. The default value is **false**. The value will be overwritten by the value of the **shareOption** attribute. You are advised to use the **shareOption** attribute instead. **ShareOption.INAPP** and **ShareOption.LOCALDEVICE** set **localOnly** to **true**, and **ShareOption.CROSSDEVICE** sets **localOnly** to false.<br>- **true**: The pasteboard content is set for local access only.<br>- **false**: The pasteboard content can be shared between devices.|
| shareOption<sup>9+</sup> | [ShareOption](#shareoption9) | Yes| Yes| Where the pasteboard content can be pasted. If this attribute is set incorrectly or not set, the default value **CROSSDEVICE** is used.|
## PasteDataRecord<sup>7+</sup>
......@@ -483,9 +485,9 @@ record.convertToText().then((data) => {
## PasteData
Provides **PasteData** APIs.
Implements a **PasteData** object. Paste data contains one or more data records ([PasteDataRecord](#pastedatarecord7)) and property description objects ([PasteDataProperty](#pastedataproperty7)).
Before calling any **PasteData** API, you must obtain a **PasteData** object.
Before calling any API in **PasteData**, you must use **[createData()](#pasteboardcreatedata9)** or **[getData()](#getdata9)** to create a **PasteData** object.
**System capability**: SystemCapability.MiscServices.Pasteboard
......@@ -737,7 +739,7 @@ let property = pasteData.getProperty();
setProperty(property: PasteDataProperty): void
Sets the property (attributes) for the pasteboard data. Currently, only the **shareOption** attribute is supported.
Sets a [PasteDataProperty](#pastedataproperty7) object.
**System capability**: SystemCapability.MiscServices.Pasteboard
......@@ -753,7 +755,28 @@ Sets the property (attributes) for the pasteboard data. Currently, only the **sh
let pasteData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_HTML, 'application/xml');
let prop = pasteData.getProperty();
prop.shareOption = pasteboard.ShareOption.INAPP;
prop.additions['TestOne'] = 123;
prop.additions['TestTwo'] = {'Test' : 'additions'};
prop.tag = 'TestTag';
pasteData.setProperty(prop);
```
The **localOnly** and **shareOption** attributes of [PasteDataProperty](#pastedataproperty7) are mutually exclusive. The **shareOption** attribute prevails, and its value affect the value of **localOnly**.
```js
prop.shareOption = pasteboard.ShareOption.INAPP;
prop.localOnly = false;
pasteData.setProperty(prop);
pasteData.localOnly //true
prop.shareOption = pasteboard.ShareOption.LOCALDEVICE;
prop.localOnly = false;
pasteData.setProperty(prop);
pasteData.localOnly //true
prop.shareOption = pasteboard.ShareOption.CROSSDEVICE;
prop.localOnly = true;
pasteData.setProperty(prop);
pasteData.localOnly //false
```
### getRecord<sup>9+</sup>
......
# JS Service Widget UI Components
- JS Service Widget UI Framework
- Framework Overview
- [File Organization](js-service-widget-file.md)
- Syntax
- [HML](js-service-widget-syntax-hml.md)
......@@ -8,8 +8,7 @@
- [Multi-Language Capability](js-service-widget-multiple-languages.md)
- [Version Compatibility Adaptation](js-service-widget-version-compatibility.md)
- [Theme Configuration](js-service-widget-theme.md)
- Components
- Universal
- Universal Component Information
- [Universal Attributes](js-service-widget-common-attributes.md)
- [Universal Styles](js-service-widget-common-styles.md)
- [Universal Events](js-service-widget-common-events.md)
......
# ArkUI Overview
ArkUI is a UI development framework for building OpenHarmony applications. It provides effortlessly natural UI syntax and UI development infrastructure including UI components, animation mechanisms, and event interaction, to meet the visualized GUI development requirements of application developers.
## Basic Concepts
ArkUI provides a comprehensive infrastructure for UI development of OpenHarmony applications, including simple UI syntax, a diverse array of UI features (components, layouts, animations, and interaction events), and a powerful previewer.
- **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 [page routing](../reference/apis/js-apis-router.md) APIs, so as to implement decoupling of application functions.
## Basic Concepts
## Key Features
- **UI**: user interface. You can design multiple pages for your application, manage their files on a per-page basis, and schedule page redirection through [routing](arkts-routing.md) APIs, so as to implement decoupling of application functions.
- **UI components**: ArkUI comes with a diverse array of built-in polymorphic components, including basic components (such as text, image, and button), container components with one or more child components, drawing components allowing for customization, and media components that provide video playback capabilities. By being polymorphic, a component provides variant forms to adapt to different types of devices and platforms.
- **Component**: the smallest unit for UI building and display, for example, a list, grid, button, radio button, progress indicator, and text. You build a UI that meets your needs through flexible combinations of components.
- **Flexible layouts**: Creating a responsive UI in ArkUI is easy, with the carefully-designed layout approaches: Besides the basic linear and flexible layouts, you also have access to the advanced list, grid, and column grid layouts as well as the 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.
## Two Development Paradigms
- **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.
ArkUI comes with two development paradigms: [ArkTS-based declarative development paradigm](arkts-ui-development-overview.md) (declarative development paradigm for short) and [JS-compatible web-like development paradigm](../ui/ui-js-overview.md) (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
- **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, keyboards, and mouse devices, with support for event callbacks where you can define interaction logic of your own.
- **Declarative development paradigm**: uses [ArkTS](../quick-start/arkts-get-started.md) – a superset of TypeScript with declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and state management.
- **Platform API channel**: ArkUI provides an API extension mechanism through which platform capabilities are encapsulated to produce JavaScript (JS) APIs in a unified style.
- **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 JS for adding processing logic. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications.
- **Two development paradigms**: ArkUI comes with two development paradigms: [ArkTS-based declarative development paradigm](./ui-ts-overview.md) (declarative development paradigm for short) and [JS-compatible web-like development paradigm](./ui-js-overview.md) (web-like development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
The declarative development paradigm is a better choice for building new application UIs for the following reasons:
| Development Paradigm | Description | Applicable To | Target Audience |
| -------- | ---------------------------------------- | ---------------- | ------------------- |
| Declarative development paradigm | Uses [ArkTS](../quick-start/arkts-get-started.md) – a superset of TypeScript with declarative UI syntax, providing UI drawing capabilities from three dimensions: component, animation, and status 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.| Applications involving technological sophistication and teamwork| Mobile application and system application developers|
| 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 JS for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically refreshes 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.| Small- and medium-sized applications and service widgets with simple UIs | Frontend web developers |
- **Higher development efficiency**: In the declarative development paradigm, 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.
## Framework Structure
- **Higher application performance**: As shown below, the two development paradigms share the UI backend engine and language runtime. However, 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.
![en-us_image_0000001267647869](figures/en-us_image_0000001267647869.png)
- **Future proof**: The declarative development paradigm will continue to develop as the preferred development paradigm in OpenHarmony, providing increasingly more diverse and powerful capabilities.
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 ArkUI. 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.
**Figure 1** ArkUI framework
## Relationship Between UI and Ability Framework
![arkui-framework](figures/arkui-framework.png)
OpenHarmony provides two [application models](../application-models/application-model-description.md): FA model and stage model. The table below describes the relationship between these two models and the two development paradigms of ArkUI.
**FA Model**
## Development Paradigm Support by Application Type
| Type | UI Development Paradigm | Description |
| ---- | -------- | ---------------------------------------- |
| Application | Web-like development paradigm| UI development: HML, CSS, and JS<br>Service entries: files with fixed file names, which are **app.ets** (Page ability), **service.ts** (Service ability), and **data.ts** (Data ability)<br>Service logic: JS and TS|
| | Declarative development paradigm | UI development: ArkTS<br>Service entries: files with fixed file names, which are **app.ets** (Page ability), **service.ts** (Service ability), and **data.ts** (Data ability)<br>Service logic: JS and TS|
| Service widget| Web-like development paradigm| UI development: HML, CSS, and JSON (action)<br>Service entry: **form.ts**<br>Service logic: JS and TS|
| | Declarative development paradigm | Not supported |
The support for development paradigms varies according to the OpenHarmony [application model](../application-models/application-model-composition.md) and page form. For details, see the following table.
**Stage Model**
**Table 1** Supported development paradigms
| Type | UI Development Paradigm | Description |
| -------- | -------------- | ------------------------------------------------------------ |
| Application | Web-like development paradigm | Not supported |
| | Declarative development paradigm| UI development: ArkTS<br>Service entries: derived from **ohos.app.ability.UIAbility**/**ExtensionAbility**<br>Service logic: TS|
| Service widget| Web-like development paradigm | UI development: HML, CSS, and JSON (action)<br>Service entries: derived from **FormExtensionAbility**<br>Service logic: TS|
| | Declarative development paradigm| Not supported |
| Application Model | Page Form | Supported Development Paradigm |
| ----------- | -------- | ------------------------ |
| Stage model (recommended)| Application or service page| Declarative development paradigm (recommended) |
| | Widget | Declarative development paradigm (recommended)<br>Web-like development paradigm|
| FA model | Application or service page| Declarative development paradigm<br>Web-like development paradigm |
| | Widget | Web-like development paradigm |
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册