# Getting Started with eTS in the Low-Code Approach
> **NOTE**<br/>This feature is supported in DevEco Studio V3.0 Beta3 and later versions.
> **NOTE**
>
> This feature is supported in DevEco Studio V3.0 Beta3 and later versions.
>
> The component lineup that supports low-code development in eTS is now at its preliminary stage and will be expanding in coming versions.
>
...
...
@@ -15,7 +17,7 @@ You can develop applications or services in the low-code approach using either o
- Create a project that supports low-code development. This method is used as an example in this topic.
- In an existing project, create a .visual file for development.
- In an existing project, create a .visual file for development. For details, see [Creating a .visual File That Supports Low-Code Development](#building-the-second-page).
## Creating a Project That Supports Low-Code Development
# Getting Started with JavaScript in the Low-Code Approach
> **NOTE**<br/>This feature will be available in DevEco Studio V2.2 Beta1 and later versions.
> **NOTE**
>
> This feature will be available in DevEco Studio V2.2 Beta1 and later versions.
>
> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
...
...
@@ -13,7 +15,7 @@ You can develop applications or services in the low-code approach using either o
- Create a project that supports low-code development. This method is used as an example in this topic.
- In an existing project, create a Visual file for development.
- In an existing project, create a Visual file for development. For details, see [Creating a .visual File That Supports Low-Code Development](#building-the-second-page).
## Creating a Project That Supports Low-Code Development
This module provides JS APIs for obtaining the root directories of the storage and public files.
> **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.
> - The APIs of this module are system APIs and cannot be called by third-party applications.
This module provides JS APIs for obtaining the root directories of the storage and public files.
> **NOTE**<br>The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> **NOTE**
>
> The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import
...
...
@@ -14,31 +15,31 @@ import inputMethod from '@ohos.inputMethod';
In the following API examples, you must first use [getInputMethodController](#getInputMethodController) to obtain an **InputMethodController** instance, and then call the APIs using the obtained instance.
In the following API examples, you must first use [getInputMethodSetting](#getInputMethodSetting) to obtain an **InputMethodSetting** instance, and then call the APIs using the obtained instance.
>  **NOTE**<br>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.
> **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.
## Modules to Import
...
...
@@ -13,7 +14,7 @@ import inputMethodEngine from '@ohos.inputMethodEngine';
| callback | function | No | Callback used to return the result. |
**Example**
...
...
@@ -578,7 +578,7 @@ Subscribes to the download task failure event. This API uses an asynchronous cal
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| type | string | Yes | Type of the subscribed event. The value is **fail** (download failure). |
| type | string | Yes | Type of the subscribed event. The value is **'fail'** (download failure). |
| callback | function | Yes | Callback for the download task failure event. |
Parameters of the callback function
...
...
@@ -612,7 +612,7 @@ Unsubscribes from the download task failure event. This API uses an asynchronous
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| type | string | Yes | Type of the event to unsubscribe from. The value is **fail** (download failure). |
| type | string | Yes | Type of the event to unsubscribe from. The value is **'fail'** (download failure). |
| callback | function | No | Callback for the download task failure event. |
Parameters of the callback function
...
...
@@ -948,7 +948,7 @@ Resumes this download task. This API uses an asynchronous callback to return the
| enableMetered | boolean | No | Download allowed in metered connections. |
| enableRoaming | boolean | No | Download allowed on a roaming network. |
| description | string | No | Description of the download session. |
| filePath<sup>7+</sup> | string | No | Download path. (The default path is [ERROR:Invalid link:en-us_topic_0000001135742582.xml#xref8132147102215,link:en-us_topic_0000001127125012.xml#section1856519365229](en-us_topic_0000001127125012.xml#section1856519365229)).<br/>- filePath:'workspace/test.txt': The **workspace** directory is created in the default path to store files.<br/>- filePath:'test.txt': Files are stored in the default path.<br/>- filePath:'workspace/': The **workspace** directory is created in the default path to store files. |
| filePath<sup>7+</sup> | string | No | Download path. (The default path is **'internal://cache/'**.<br/>- filePath:'workspace/test.txt': The **workspace** directory is created in the default path to store files.<br/>- filePath:'test.txt': Files are stored in the default path.<br/>- filePath:'workspace/': The **workspace** directory is created in the default path to store files. |
| networkType | number | No | Network type allowed for download. |
| title | string | No | Title of the download session. |
| textFont | [Font](../../ui/ts-types.md) | - | Text font for the search text box. |
| copyOption<sup>9+</sup> | boolean\|[CopyOption](ts-basic-components-text.md) | true | Whether copy and paste is allowed. |
## Events
| Name | Description |
| -------- | -------- |
| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or tap the search button on a soft keyboard.<br> -**value**: current text input. |
| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> -**value**: current text input. |
| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> -**value**: text copied. |
| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> -**value**: text cut. |
| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> -**value**: text pasted. |
| onSubmit(callback: (value: string) => void) | Triggered when users click the search icon or the search button, or tap the search button on a soft keyboard.<br> -**value**: current text input. |
| onChange(callback: (value: string) => void) | Triggered when the input in the text box changes.<br> -**value**: current text input. |
| onCopy(callback: (value: string) => void) | Triggered when data is copied to the pasteboard.<br> -**value**: text copied. |
| onCut(callback: (value: string) => void) | Triggered when data is cut from the pasteboard.<br> -**value**: text cut. |
| onPaste(callback: (value: string) => void) | Triggered when data is pasted from the pasteboard.<br> -**value**: text pasted. |
## SearchController
Defines the controller of the **\<Search>** component.
#### Objects to Import
### Objects to Import
```
controller: SearchController = new SearchController()
| refreshing | boolean | Yes| - | Whether the current component is being refreshed.|
| offset | Length | No| 16 | Distance to the top of the parent component from the **<Refresh\>** component that comes to rest after a successful pull-down gesture.|
| friction | number | No| 62 | Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100. <br/>- **0** indicates that the **<Refresh\>** component is not sensitive to the pull-down gesture. <br/>- **100** indicates that the **<Refresh\>** component is highly sensitive to the pull-down gesture. <br/>- A larger value indicates a more sensitive response of the **<Refresh\>** component to the pull-down gesture.|
| friction | number \| string | No| 62 | Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100. <br/>- **0** indicates that the **<Refresh\>** component is not sensitive to the pull-down gesture. <br/>- **100** indicates that the **<Refresh\>** component is highly sensitive to the pull-down gesture. <br/>- A larger value indicates a more sensitive response of the **<Refresh\>** component to the pull-down gesture.|
> This animationis supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Shared element transition can be used for transition between pages, for example, transition from an image on the current page to the next page.
## Type
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| sharedTransition | id: string,<br/>options?: Object | - | If the same ID is configured for a component on the two pages, this shared component is transited. If this parameter is set to an empty string, no shared elements are transited. |
...
...
@@ -31,8 +29,6 @@ The example shows the transition of a shared element from a page and page B.
> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...
...
@@ -12,12 +13,12 @@ None
## Events
| Name | Bubble Supported | Description |
| Name | Bubbling Supported | Description |
| -------- | -------- | -------- |
| onClick(callback: (event?: ClickEvent) => void) | No | Called when a click event occurs. For details about the event parameters, see [ClickEvent](#clickevent). |
### ClickEvent
## ClickEvent
| Name | Type | Description |
| -------- | -------- | -------- |
...
...
@@ -25,30 +26,30 @@ None
| screenY | number | Y coordinate of the click relative to the upper edge of the screen. |
| x | number | X coordinate of the click relative to the left edge of the component being clicked. |
| y | number | Y coordinate of the click relative to the upper edge of the component being clicked. |
| target<sup>8+</sup> | EventTarget | Target element that is clicked. |
| target<sup>8+</sup> | [EventTarget](#eventtarget8) | Target element that is clicked. |
| timestamp | number | Timestamp of the event. |
- EventTarget<sup>8+</sup> attributes
## EventTarget<sup>8+</sup>
| Name | Type | Description |
| -------- | -------- | -------- |
| area | Area | Area information of the target element.|
| Name | Type | Description |
| -------- | -------- | -------- |
| area | [Area](#area8) | Area information of the target element.|
- Area<sup>8+</sup> attributes
## Area<sup>8+</sup>
| Name | Type | Description |
| -------- | -------- | -------- |
| width | number | Width of the target element, in vp. |
| height | number | Height of the target element, in vp. |
| position | Position | Position of the upper left corner of the target element relative to that of the parent element. |
| globalPosition | Position | Position of the upper left corner of the target element relative to that of the page. |
| Name | Type | Description |
| -------- | -------- | -------- |
| width | number | Width of the target element, in vp. |
| height | number | Height of the target element, in vp. |
| position | [Position](#position8) | Position of the upper left corner of the target element relative to that of the parent element. |
| globalPosition | [Position](#position8) | Position of the upper left corner of the target element relative to that of the page. |
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
| Name | Bubble Supported | Description |
| Name | Bubbling Supported | Description |
| -------- | -------- | -------- |
| onDragStart(callback: (event: [DragEvent](#DragEvent), extraParams?: string) =>\|[Custom Builder](../../ui/ts-types.md)) | No | Triggered when the component bound to the event is dragged for the first time.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam.<br/>Return value: object being dragged, which is used for prompts displayed when the object is dragged.<br/>> **NOTE**<br/>> - A drag event can be triggered by a 150 ms long press.<br/>> <br/>> - If the duration of a long-press gesture is set to less than or equal to 150 ms, the callback for the long-press gesture takes precedence. Otherwise, the callback for the drag event takes precedence. |
| onDragEnter(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item enters a valid drop target.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam.<br/>> **NOTE**<br/>> This event is valid only when the **onDrop** event is listened to. |
| onDragMove(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item moves in a valid drop target.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam.<br/>> **NOTE**<br/>> This event is valid only when the **onDrop** event is listened to. |
| onDragLeave(callback: (event: [DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item leaves a valid drop target.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam.<br/>> **NOTE**<br/>> This event is valid only when the **onDrop** event is listened to. |
| onDrop(callback: (event:[DragEvent](#DragEvent), extraParams?: string) => void) | No | Triggered when the dragged item is dropped on a valid drop target.<br/>-**event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>-**extraParams**: additional information about the drag event. For details, see extraParam. |
| onDragStart(callback: (event: DragEvent, extraParams?: string) =>\|[Custom Builder](../../ui/ts-types.md)) | No | Triggered when the component bound to the event is dragged for the first time.<br/>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>- **extraParams**: additional information about the drag event. For details, see **extraParam**.<br/>Return value: object being dragged, which is used for prompts displayed when the object is dragged.<br/>A drag event can be triggered by a 150 ms long press.<br/>If the duration of a long-press gesture is set to less than or equal to 150 ms, the callback for the long-press gesture takes precedence. Otherwise, the callback for the drag event takes precedence. |
| onDragEnter(callback: (event: DragEvent, extraParams?: string) => void) | No | Triggered when the dragged item enters a valid drop target.<br/>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>- **extraParams**: additional information about the drag event. For details, see **extraParam**.<br/>This event is valid only when the **onDrop** event is listened to. |
| onDragMove(callback: (event: DragEvent, extraParams?: string) => void) | No | Triggered when the dragged item moves in a valid drop target.<br/>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>- **extraParams**: additional information about the drag event. For details, see **extraParam**.<br/>This event is valid only when the **onDrop** event is listened to. |
| onDragLeave(callback: (event: DragEvent, extraParams?: string) => void) | No | Triggered when the dragged item leaves a valid drop target.<br/>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>- **extraParams**: additional information about the drag event. For details, see **extraParam**.<br/>This event is valid only when the **onDrop** event is listened to. |
| onDrop(callback: (event:DragEvent, extraParams?: string) => void) | No | Triggered when the dragged item is dropped on a valid drop target.<br/>- **event**: information about the drag event, including the coordinates of the item that is being dragged.<br/>- **extraParams**: additional information about the drag event. For details, see **extraParam**. |
- extraParam
Returns additional information required for dragging an item.
**extraParam** is a string converted from a JSON object. You can obtain the following attributes using the JSON object converted from **Json.parse**.
| Name | Type | Description |
| -------- | -------- | -------- |
| selectedIndex | number | Index of the dragged item in the parent container. The value of **selectedindex** starts from **0**.<br/>> **NOTE**<br/>> This attribute is valid only in the **ListItem** component. |
| insertIndex | number | Index of the element into which the dragged item is dropped in the **List** component. The value of **insertIndex** starts from **0**.<br/>> **NOTE**<br/>> This attribute is valid only in the drag event of the **List** component. |
| selectedIndex | number | Index of the dragged item in the parent container. The value of **selectedIndex** starts from **0**.<br/>This attribute is valid only in the **\<ListItem>** component. |
| insertIndex | number | Index of the element into which the dragged item is dropped in the **List** component. The value of **insertIndex** starts from **0**.<br/>This attribute is valid only in the drag event of the **\<List>** component. |
### DragEvent
- APIs
| Name | Return Value Type | Description |
| -------- | -------- | -------- |
| getX() | number | X-coordinate of the item that is being dragged, in vp. |
| getY() | number | Y-coordinate of the item that is being dragged, in vp. |
| Name | Return Value Type | Description |
| -------- | -------- | -------- |
| getX() | number | X-coordinate of the item that is being dragged, in vp. |
| getY() | number | Y-coordinate of the item that is being dragged, in vp. |
> This method is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> **NOTE**
>
> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
...
...
@@ -12,20 +13,20 @@ None
## Events
| Name | Bubble Supported | Description |
| Name | Bubbling Supported | Description |
| -------- | -------- | -------- |
| onKeyEvent(event: (event?: KeyEvent) => void) | Yes | Called when a key event occurs. For details about the event parameters, see [KeyEvent Object](#KeyEvent Object). |
### KeyEvent Object
## KeyEvent
- Attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| type | KeyType | Type of a key. |
| type | [KeyType](#keytype-enums) | Type of a key. |
| keyCode | number | Key code. |
| keyText | string | Key value. |
| keySource | KeySource | Type of the input device that triggers the key event. |
| keySource | [KeySource](#keysource-enums) | Type of the input device that triggers the key event. |
| deviceId | number | ID of the input device that triggers the key event. |
| metaKey | number | State of the metakey when the key is pressed. The value **1** means the pressed state, and **0** means the unpressed state. |
| timestamp | number | Timestamp when the key is pressed. |
...
...
@@ -35,35 +36,38 @@ None
| -------- | -------- |
| stopPropagation(): void | Stops the event from bubbling upwards or downwards. |
- KeyType enums
| Name | Description |
| -------- | -------- |
| Down | The key is pressed. |
| Up | The key is released. |
## KeyType Enums
| Name | Description |
| -------- | -------- |
| Down | The key is pressed. |
| Up | The key is released. |
- KeySource enums
| Name | Description |
| -------- | -------- |
| Unknown | Unknown input device. |
| Keyboard | The input device is a keyboard. |
- Common KeyCode description
| Value | Behavior | Physical Button |
| -------- | -------- | -------- |
| 19 | Upward | Up button. |
| 20 | Downward | Down button. |
| 21 | Leftward | Left button. |
| 22 | Rightward | Right button. |
| 23 | OK | **OK** key on a remote control. |
| 66 | OK | **Enter** key on a keyboard. |
| 160 | OK | **Enter** button on the numeric keypad. |
## KeySource Enums
| Name | Description |
| -------- | -------- |
| Unknown | Unknown input device. |
| [KeyCode](#common-keycode-enums) | The input device is a keyboard. |
## Common KeyCode Enums
| Value | Behavior | Physical Button |
| -------- | -------- | -------- |
| 19 | Upward | Up button. |
| 20 | Downward | Down button. |
| 21 | Leftward | Left button. |
| 22 | Rightward | Right button. |
| 23 | OK | **OK** key on a remote control. |
| 66 | OK | **Enter** key on a keyboard. |
| 160 | OK | **Enter** button on the numeric keypad. |
> This event is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...
...
@@ -12,46 +13,44 @@ None
## Events
| Name | Pop-up | Description |
| Name | Bubbling Supported | Description |
| -------- | -------- | -------- |
| onTouch(callback: (event?: TouchEvent) => void) | Yes | Invoked when a touch action is triggered. For details about the event parameters, see [TouchEvent](#touchevent). |
| onTouch(callback: (event?: TouchEvent) => void) | Yes | Invoked when a touch action is triggered. For details about **event**, see [TouchEvent](#touchevent). |
### TouchEvent
## TouchEvent
- Attributes
| Name | Type | Description |
| -------- | -------- | -------- |
| type | TouchType | Type of a touch event. |
| touches | Array<TouchObject> | All finger information. |
| changedTouches | Array<TouchObject> | Finger information changed. |
| touches | Array<[TouchObject](#touchobject)> | All finger information. |
| changedTouches | Array<[TouchObject](#touchobject)> | Finger information changed. |
| timestamp | number | Timestamp of the event. |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | Target of the event. |
| target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md#eventtarget8) | Target of the event. |
- APIs
| API | Description |
| -------- | -------- |
| stopPropagation(): void | Pop-up of the stop event. |
| stopPropagation(): void | Bubbling of the stop event. |
- TouchObject
| Name | Type | Description |
| -------- | -------- | -------- |
| type | TouchType | Type of a touch event. |
| id | number | Unique identifier of a finger. |
| screenX | number | X coordinate of the touch point relative to the left edge of the screen. |
| screenY | number | Y coordinate of the touch point relative to the upper edge of the device screen. |
| x | number | X coordinate of the touch point relative to the left edge of the element to touch. |
| y | number | Y coordinate of the touch point relative to the upper edge of the element to touch. |
- TouchType
| Name | Description |
| -------- | -------- |
| Down | Trigger a touch event when a finger is pressed. |
| Up | Trigger a touch event when a finger is lifted. |
| Move | Trigger a touch event when a finger moves on the screen in pressed state. |
| Cancel | Trigger an event when a touch event is canceled. |
## TouchObject
| Name | Type | Description |
| -------- | -------- | -------- |
| type | [TouchType](#touchtype) | Type of a touch event. |
| id | number | Unique identifier of a finger. |
| screenX | number | X coordinate of the touch point relative to the left edge of the screen. |
| screenY | number | Y coordinate of the touch point relative to the upper edge of the device screen. |
| x | number | X coordinate of the touch point relative to the left edge of the element to touch. |
| y | number | Y coordinate of the touch point relative to the upper edge of the element to touch. |
## TouchType
| Name | Description |
| -------- | -------- |
| Down | Trigger a touch event when a finger is pressed. |
| Up | Trigger a touch event when a finger is lifted. |
| Move | Trigger a touch event when a finger moves on the screen in pressed state. |
| Cancel | Trigger an event when a touch event is canceled. |
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
...
...
@@ -12,13 +13,13 @@ None
## Events
| Name | Bubble Supported | Description |
| Name | Bubbling Supported | Description |
| -------- | -------- | -------- |
| onHover(callback: (isHover: boolean) => void) | No | Triggered when the mouse cursor enters or leaves the component.<br/>**isHover**: whether the mouse cursor hovers over the component. The value **true** means that the mouse cursor enters the component, and the value **false** means that the mouse cursor leaves the component. |
| onMouse(callback: (event?: MouseEvent) => void) | Yes | Triggered when the component is clicked by a mouse button or the mouse cursor moves on the component. The **event** parameter indicates the timestamp, mouse button, action, coordinates of the clicked point on the entire screen, and coordinates of the clicked point relative to the component when the event is triggered. |
### MouseEvent
## MouseEvent
- Attributes
| Name | Type | Description |
...
...
@@ -28,32 +29,32 @@ None
| screenY | number | Y-coordinate of the clicked point relative to the upper left corner of the screen. |
| x | number | X-coordinate of the clicked point relative to the upper left corner of the component. |
| y | number | Y-coordinate of the clicked point relative to the upper left corner of the component. |
