diff --git a/en/application-dev/reference/apis/js-apis-uitest.md b/en/application-dev/reference/apis/js-apis-uitest.md index 971d25f95d622ee681abff44ffb97ff9b3524572..147cbb7c36120e4ffca27ac710915d683bee1ee4 100644 --- a/en/application-dev/reference/apis/js-apis-uitest.md +++ b/en/application-dev/reference/apis/js-apis-uitest.md @@ -1,7 +1,16 @@ # UiTest ->**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 **UiTest** module provides APIs that you can use to simulate UI actions during testing, such as clicks, double-clicks, long-clicks, and swipes. + +This module provides the following functions: + +- [By](#by): provides UI component feature description APIs for component filtering and matching. +- [UiComponent](#uicomponent): represents a component on the UI and provides APIs for obtaining component attributes, clicking a component, scrolling to search for a component, and text injection. +- [UiDriver](#uidriver): works as the entry class and provides APIs for features such as component matching/search, key injection, coordinate clicking/sliding, and screenshot. + +>**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 @@ -12,14 +21,14 @@ import {UiDriver,BY,MatchPattern} from '@ohos.uitest' ## By -The UiTest framework provides a wide range of UI component feature description APIs in the **By** class to filter and match components.
+The UiTest framework provides a wide range of UI component feature description APIs in the **By** class to filter and match components. The API capabilities provided by the **By** class exhibit the following features:
1. Allow one or more attributes as the match conditions. For example, you can specify both the **text** and **id** attributes to find the target component.
2. Provide multiple match patterns for component attributes.
3. Support absolute positioning and relative positioning for components. APIs such as [By.isBefore](#byisbefore) and [By.isAfter](#byisafter) can be used to specify the features of adjacent components to assist positioning.
All APIs provided in the **By** class are synchronous. You are advised to use the static constructor **BY** to create a **By** object in chain mode. ```js BY.text('123').type('button') ``` -### By.text +### text text(txt: string, pattern?: MatchPattern): By @@ -128,11 +137,11 @@ let by = BY.type('button') // Use the static constructor BY to create a By objec ``` -### By.clickable +### clickable clickable(b?: bool): By -Specifies the clickable attribute of the target component. +Specifies the clickable status of the target component. **System capability**: SystemCapability.Test.UiTest @@ -151,7 +160,7 @@ Specifies the clickable attribute of the target component. **Example** ```js -let by = BY.clickable(true) // Use the static constructor BY to create a By object and specify the clickable status attribute of the target component. +let by = BY.clickable(true) // Use the static constructor BY to create a By object and specify the clickable status of the target component. ``` @@ -159,7 +168,7 @@ let by = BY.clickable(true) // Use the static constructor BY to create a By obje scrollable(b?: bool): By -Specifies the scrollable status attribute of the target component. +Specifies the scrollable status of the target component. **System capability**: SystemCapability.Test.UiTest @@ -178,14 +187,14 @@ Specifies the scrollable status attribute of the target component. **Example** ```js -let by = BY.scrollable(true) // Use the static constructor BY to create a By object and specify the scrollable status attribute of the target component. +let by = BY.scrollable(true) // Use the static constructor BY to create a By object and specify the scrollable status of the target component. ``` ### By.enabled enabled(b?: bool): By -Specifies the enabled status attribute of the target component. +Specifies the enabled status of the target component. **System capability**: SystemCapability.Test.UiTest @@ -204,14 +213,14 @@ Specifies the enabled status attribute of the target component. **Example** ```js -let by = BY.enabled(true) // Use the static constructor BY to create a By object and specify the enabled status attribute of the target component. +let by = BY.enabled(true) // Use the static constructor BY to create a By object and specify the enabled status of the target component. ``` ### By.focused focused(b?: bool): By -Specifies the focused status attribute of the target component. +Specifies the focused status of the target component. **System capability**: SystemCapability.Test.UiTest @@ -230,14 +239,14 @@ Specifies the focused status attribute of the target component. **Example** ```js -let by = BY.focused(true) // Use the static constructor BY to create a By object and specify the focused status attribute of the target component. +let by = BY.focused(true) // Use the static constructor BY to create a By object and specify the focused status of the target component. ``` ### By.selected selected(b?: bool): By -Specifies the selected status attribute of the target component. +Specifies the selected status of the target component. **System capability**: SystemCapability.Test.UiTest @@ -256,7 +265,7 @@ Specifies the selected status attribute of the target component. **Example** ```js -let by = BY.selected(true) // Use the static constructor BY to create a By object and specify the selected status attribute of the target component. +let by = BY.selected(true) // Use the static constructor BY to create a By object and specify the selected status of the target component. ``` ### By.isBefore @@ -316,6 +325,7 @@ let by = BY.isAfter(BY.text('123')) // Use the static constructor BY to create a In **UiTest**, the **UiComponent** class represents a component on the UI and provides APIs for obtaining component attributes, clicking a component, scrolling to search for a component, and text injection. All APIs provided in this class use a promise to return the result and must be invoked using **await**. + ### UiComponent.click click(): Promise\ @@ -639,7 +649,7 @@ async function demo() { ### UiComponent.scrollSearch -scrollSearch(by: By): Promise\ +scrollSearch(by:By): Promise\ Scrolls on this component to search for the target component (applicable to component that support scrolling, such as **\**). @@ -667,12 +677,14 @@ async function demo() { } ``` + + ## UiDriver -The **UiDriver** class is the main entry to the **uitest** test framework. It provides APIs for features such as component matching/search, key injection, coordinate clicking/sliding, and screenshot. +The **UiDriver** class is the main entry to the UiTest framework. It provides APIs for features such as component matching/search, key injection, coordinate clicking/sliding, and screenshot. All APIs provided by this class, except for **UiDriver.create()**, use a promise to return the result and must be invoked using **await**. -### UiDriver.create +### create static create(): UiDriver @@ -746,7 +758,7 @@ async function demo() { } ``` -### UiDriver.findComponents +### findComponents findComponents(by: By): Promise\> @@ -850,8 +862,8 @@ Clicks a specific point of this **UiDriver** object based on the given coordinat | Name| Type | Mandatory| Description | | ------ | ------ | ---- | -------------------------------------- | -| x | number | Yes | X coordinate of the target point.| -| y | number | Yes | Y coordinate of the target point.| +| x | number | Yes | X-coordinate of the target point.| +| y | number | Yes | Y-coordinate of the target point.| **Example** @@ -874,8 +886,8 @@ Double-clicks a specific point of this **UiDriver** object based on the given co | Name| Type | Mandatory| Description | | ------ | ------ | ---- | -------------------------------------- | -| x | number | Yes | X coordinate of the target point.| -| y | number | Yes | Y coordinate of the target point.| +| x | number | Yes | X-coordinate of the target point.| +| y | number | Yes | Y-coordinate of the target point.| **Example** @@ -886,7 +898,7 @@ async function demo() { } ``` -### UiDriver.longClick +### longClick longClick(x: number, y: number): Promise\ @@ -898,8 +910,8 @@ Long-clicks a specific point of this **UiDriver** object based on the given coor | Name| Type | Mandatory| Description | | ------ | ------ | ---- | -------------------------------------- | -| x | number | Yes | X coordinate of the target point.| -| y | number | Yes | Y coordinate of the target point.| +| x | number | Yes | X-coordinate of the target point.| +| y | number | Yes | Y-coordinate of the target point.| **Example** @@ -912,7 +924,7 @@ async function demo() { ### UiDriver.swipe -swipe(startx: number, starty: number, endx: number, endy: number): Promise\ +swipe(startx: number, starty: number, endx: number, endy: number, speed: number): Promise\ Swipes on this **UiDriver** object from the start point to the end point based on the given coordinates. @@ -920,12 +932,13 @@ Swipes on this **UiDriver** object from the start point to the end point based o **Parameters** -| Name| Type | Mandatory| Description | -| ------ | ------ | ---- | -------------------------------------- | -| startx | number | Yes | X coordinate of the start point.| -| starty | number | Yes | Y coordinate of the start point.| -| endx | number | Yes | X coordinate of the end point.| -| endy | number | Yes | Y coordinate of the end point.| +| Name| Type | Mandatory| Description | +| ------ | ------ | ---- | ---------------------------------------- | +| startx | number | Yes | X-coordinate of the start point. | +| starty | number | Yes | Y-coordinate of the start point. | +| endx | number | Yes | X-coordinate of the end point. | +| endy | number | Yes | Y-coordinate of the end point. | +| speed | number | No | Scroll speed, in pixels/s. The default value is **600**.| **Example** @@ -965,6 +978,7 @@ async function demo() { } ``` + ## MatchPattern Enumerates the match patterns supported for component attributes. @@ -977,5 +991,3 @@ Enumerates the match patterns supported for component attributes. | CONTAINS | 1 | Containing the given value. | | STARTS_WITH | 2 | Starting from the given value.| | ENDS_WITH | 3 | Ending with the given value.| - -### diff --git a/en/application-dev/reference/arkui-js/js-components-svg-text.md b/en/application-dev/reference/arkui-js/js-components-svg-text.md index 22a98102bd7f0cc0ee7293644031aa955d612a44..7d73532324f203f78c000d7a5587a7315ed444b0 100644 --- a/en/application-dev/reference/arkui-js/js-components-svg-text.md +++ b/en/application-dev/reference/arkui-js/js-components-svg-text.md @@ -2,11 +2,12 @@ The **** component is used to display a piece of textual information. ->![](../../public_sys-resources/icon-note.gif) **NOTE:** ->- This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. ->- The text content must be written in the content area. The **tspan** sub-element label can be nested to segment the text content. The **textPath** sub-element label can be nested to draw the text content based on the specified path. ->- **** can be nested only by the parent element label **svg**. ->- Only the default font **sans-serif** is supported. +> **NOTE** +> +> - This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. +> - The text content must be written in the content area. The **tspan** sub-element label can be nested to segment the text content. The **textPath** sub-element label can be nested to draw the text content based on the specified path. +> - **** can be nested only by the parent element label **svg**. +> - Only the default font **sans-serif** is supported. ## Required Permissions @@ -14,7 +15,7 @@ None ## Child Components -**Tspan**, **textpath**, **animate**, and **animateTransform are** supported. +**\**, **\**, **\**, and **\** are supported. ## Attributes @@ -39,7 +40,7 @@ The attributes in the following table are supported. ## Example -``` +```css /* xxx.css */ .container { flex-direction: row; @@ -50,7 +51,7 @@ The attributes in the following table are supported. } ``` -``` +```html
@@ -72,7 +73,7 @@ The attributes in the following table are supported. Attribute animation example -``` +```css /* xxx.css */ .container { flex-direction: row; @@ -83,11 +84,12 @@ Attribute animation example } ``` -``` +```html
+ text attribute x|opacity|rotate @@ -99,7 +101,7 @@ Attribute animation example ![](figures/text-animate-part1.gif) -``` +```html
@@ -114,7 +116,7 @@ Attribute animation example ![](figures/text-animate-part2.gif) -``` +```html
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md index abba7c987d32cb45c0fe1513c0d8adeb02a7cc33..934cb61fd75f6508e22d0f10c88507c1ce9c01bc 100644 --- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md +++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md @@ -1,7 +1,9 @@ # Gradient Color +Create a more gorgeous look for a component by applying a gradient color effect to it. -> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE** +> **NOTE** +> > This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -15,31 +17,32 @@ None | Name | Type | Default Value | Description | | -------- | -------- | -------- | -------- | -| linearGradient | {
angle?: [Angle](../../ui/ts-types.md),
direction?:GradientDirection,
colors: Array<[ColorStop](../../ui/ts-types.md)>
repeating?: boolean
} | - | Linear gradient.
**angle**: angle of the linear gradient.
**direction**: direction of the linear gradient.
**colors**: description of the gradient colors.
**repeating**: whether the colors are repeated. | +| linearGradient | {
angle?: [Angle](../../ui/ts-types.md),
direction?:GradientDirection,
colors: Array<[ColorStop](../../ui/ts-types.md)>
repeating?: boolean
} | - | Linear gradient.
**angle**: angle of the linear gradient.
**direction**: direction of the linear gradient. It does not take effect when **angle** is set.
**colors**: description of the gradient colors.
**repeating**: whether the colors are repeated. | | sweepGradient | {
center: Point,
start?: angle,
end?: angle,
colors: Array<[ColorStop](../../ui/ts-types.md)>
repeating?: boolean
} | - | Angle gradient.
**center**: center point of the angle gradient.
**start**: start point of the angle gradient.
**end**: end point of the angle gradient.
**colors**: description of the gradient colors.
**repeating**: whether the colors are repeated. | | radialGradient | {
center: Point,
radius: Length,
colors: Array<[ColorStop](../../ui/ts-types.md)>
repeating: boolean
} | - | Radial gradient.
**center**: center point of the radial gradient.
**radius**: radius of the radial gradient.
**colors**: description of the gradient colors.
**repeating**: whether the colors are repeated. | +- GradientDirection -- GradientDirection enums - **GradientDirection** is used to describe the gradient direction. + Enumerates the gradient directions. - | Name | Description | + | Name | Description | | -------- | -------- | - | Left | The gradient direction is from right to left. | - | Top | The gradient direction is from bottom to top. | - | Right | The gradient direction is from left to right. | - | Bottom | The gradient direction is from top to bottom. | - | LeftTop | The gradient direction is upper left. | - | LeftBottom | The gradient direction is lower left. | - | RightTop | The gradient direction is upper right. | - | RightBottom | The gradient direction is lower right. | - | None | No gradient. | + | Left | The gradient direction is from right to left. | + | Top | The gradient direction is from bottom to top. | + | Right | The gradient direction is from left to right. | + | Bottom | The gradient direction is from top to bottom. | + | LeftTop | The gradient direction is upper left. | + | LeftBottom | The gradient direction is lower left. | + | RightTop | The gradient direction is upper right. | + | RightBottom | The gradient direction is lower right. | + | None | No gradient. | ## Example -``` +```ts +// xxx.ets @Entry @Component struct ColorGradientExample { @@ -51,7 +54,6 @@ struct ColorGradientExample { .height(50) .linearGradient({ angle: 90, - direction: GradientDirection.Left, colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] }) Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) diff --git a/en/application-dev/ui/ts-custom-component-initialization.md b/en/application-dev/ui/ts-custom-component-initialization.md index 15008a60b98bf273a408e4e86386e2487e443513..78eaa00baa815cb00f458d0ce1b970594b4c54f3 100644 --- a/en/application-dev/ui/ts-custom-component-initialization.md +++ b/en/application-dev/ui/ts-custom-component-initialization.md @@ -5,32 +5,32 @@ The member variables of a component can be initialized in either of the followin - Local initialization. For example: - + ``` @State counter: Counter = new Counter() ``` - Initialization using constructor parameters. For example: - + ``` - MyComponent(counter: $myCounter) + MyComponent({counter: $myCounter}) ``` The allowed method depends on the decorator of the state variable, as shown in the following table. - | Decorator Type | Local Initialization | Initialization Using Constructor Parameters | +| Decorator Type | Local Initialization | Initialization Using Constructor Parameters | | -------- | -------- | -------- | -| @State | Mandatory | Optional | -| @Prop | Forbidden | Mandatory | -| @Link | Forbidden | Mandatory | -| @StorageLink | Mandatory | Forbidden | -| @StorageProp | Mandatory | Forbidden | -| @Provide | Mandatory | Optional | -| @Consume | Forbidden | Forbidden | -| @ObjectLink | Forbidden | Mandatory | -| Normal member variable | Recommended | Optional | +| @State | Mandatory | Optional | +| @Prop | Forbidden | Mandatory | +| @Link | Forbidden | Mandatory | +| @StorageLink | Mandatory | Forbidden | +| @StorageProp | Mandatory | Forbidden | +| @Provide | Mandatory | Optional | +| @Consume | Forbidden | Forbidden | +| @ObjectLink | Forbidden | Mandatory | +| Normal member variable | Recommended | Optional | As indicated by the preceding table: @@ -44,14 +44,14 @@ As indicated by the preceding table: Comply with the following rules when using constructors to initialize member variables: - | From the Variable in the Parent Component (Below) to the Variable in the Child Component (Right) | @State | @Link | @Prop | Normal Variable | +| From the Variable in the Parent Component (Below) to the Variable in the Child Component (Right) | @State | @Link | @Prop | Normal Variable | | -------- | -------- | -------- | -------- | -------- | -| @State | Not allowed | Allowed | Allowed | Allowed | -| @Link | Not allowed | Allowed | Not recommended | Allowed | -| @Prop | Not allowed | Not allowed | Allowed | Allowed | -| @StorageLink | Not allowed | Allowed | Not allowed | Allowed | -| @StorageProp | Not allowed | Not allowed | Not allowed | Allowed | -| Normal variable | Allowed | Not allowed | Not allowed | Allowed | +| @State | Not allowed | Allowed | Allowed | Allowed | +| @Link | Not allowed | Allowed | Not recommended | Allowed | +| @Prop | Not allowed | Not allowed | Allowed | Allowed | +| @StorageLink | Not allowed | Allowed | Not allowed | Allowed | +| @StorageProp | Not allowed | Not allowed | Not allowed | Allowed | +| Normal variable | Allowed | Not allowed | Not allowed | Allowed | As indicated by the preceding table: @@ -59,7 +59,7 @@ As indicated by the preceding table: - The normal variables of the parent component can be used to initialize the @State decorated variables of the child component, but not the @Link or @Prop decorated variables. -- The @State decorated variable of the parent component can be used to initialize the @Prop, @Link (using $), or normal variables of the child component, but not the @State decorated variables of the child component. +- The @State decorated variable of the parent component can be used to initialize the @Prop, @Link (using `$`), or normal variables of the child component, but not the @State decorated variables of the child component. - The @Link decorated variables of the parent component can be used to initialize the @Link decorated or normal variables of the child component. However, initializing the @State decorated members of the child component can result in a syntax error. In addition, initializing the @Prop decorated variables is not recommended. @@ -72,7 +72,7 @@ As indicated by the preceding table: ## Example - + ``` @Entry @Component @@ -97,7 +97,7 @@ struct CompA { Row() { CompB({bLink: $aLink, // valid init a @Link with reference of another @Link, bProp: this.aState}) // valid init a @Prop with value of a @State - CompB({aLink: $aState, // invalid: type missmatch expected ref to ClassA, provided reference to boolean + CompB({aLink: $aState, // invalid: type mismatch expected ref to ClassA, provided reference to boolean bProp: false}) // valid init a @Prop by constants value } }