diff --git a/en/application-dev/quick-start/Readme-EN.md b/en/application-dev/quick-start/Readme-EN.md index 64e2d51d737e740216286689bab453b583daeddc..9b89cfd83f8a3af29bda3fe76016d269561282cb 100644 --- a/en/application-dev/quick-start/Readme-EN.md +++ b/en/application-dev/quick-start/Readme-EN.md @@ -1,13 +1,22 @@ # Quick Start - - Getting Started - - [Preparations](start-overview.md) + - [Before You Start](start-overview.md) - [Getting Started with ArkTS in Stage Model](start-with-ets-stage.md) - [Getting Started with ArkTS in FA Model](start-with-ets-fa.md) - - [Getting Started with JavaScript in FA Model](start-with-js-fa.md) + - [Getting Started with JavaScript in FA Model](start-with-js-fa.md) - Development Fundamentals - [Application Package Structure Configuration File (FA Model)](package-structure.md) - [Application Package Structure Configuration File (Stage Model)](stage-structure.md) - [SysCap](syscap.md) - - [HarmonyAppProvision Configuration File](app-provision-structure.md) - + - [Resource Categories and Access](resource-categories-and-access.md) + - Learning ArkTS + - [Getting Started with ArkTS](arkts-get-started.md) + - ArkTS Syntax (Declarative UI) + - [Basic UI Description](arkts-basic-ui-description.md) + - State Management + - [Basic Concepts](arkts-state-mgmt-concepts.md) + - [State Management with Page-level Variables](arkts-state-mgmt-page-level.md) + - [State Management with Application-level Variables](arkts-state-mgmt-application-level.md) + - [Dynamic UI Element Building](arkts-dynamic-ui-elememt-building.md) + - [Rendering Control](arkts-rendering-control.md) + - [Restrictions and Extensions](arkts-restrictions-and-extensions.md) \ No newline at end of file diff --git a/en/application-dev/quick-start/arkts-basic-ui-description.md b/en/application-dev/quick-start/arkts-basic-ui-description.md new file mode 100644 index 0000000000000000000000000000000000000000..d20efe12859e944d9d78fb71688dc4aada729228 --- /dev/null +++ b/en/application-dev/quick-start/arkts-basic-ui-description.md @@ -0,0 +1,205 @@ +# Basic UI Description + +In ArkTS, you define a custom component by using decorators **@Component** and **@Entry** to decorate a data structure declared with the **struct** keyword. A custom component provides a **build** function, where you must write the basic UI description in chain call mode. For details about the UI description, see [UI Description Specifications](#ui-description-specifications). + +## Basic Concepts + +- struct: a data structure that can be used to implement custom components and cannot have inheritance. The **new** keyword can be omitted when initializing a struct. + +- Decorator: a special type of declaration that can be applied to classes, structures, or class attributes to add new functionality to them. Multiple decorators can be applied to the same target element and defined on a single line or multiple lines. It is recommended that the decorators be defined on multiple lines. + + ```ts + @Entry + @Component + struct MyComponent { + } + ``` + +- **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. + + ```ts + interface Builder { + build: () => void + } + ``` + +- **@Component**: a decorator applied to a struct to equip it with the component-based capability. The **build** method must be implemented for UI creation. + +- **@Entry**: a decorator applied to a struct to make it the entry to a page, which is rendered and displayed when the page is loaded. + +- **@Preview**: a decorator applied to struct to make it previewable in the DevEco Studio Previewer. The decorated component is created and displayed when the residing page is loaded. + + > **NOTE** + > + > In a single source file, you can use up to 10 **@Preview** decorators to decorate custom components. For details, see [Previewing ArkTS Components](https://developer.harmonyos.com/en/docs/documentation/doc-guides/ohos-previewing-app-service-0000001218760596#section146052489820). + +- Chain call: a syntax for configuring the attribute methods, event methods, and more of UI components by using the dot notation. + +## UI Description Specifications + +### Structs Without Parameters + +A struct without parameters is a component whose API definition has empty parentheses. No parameter needs to be passed to this type of component, for example, the **Divider** component in the following snippet: + +```ts +Column() { + Text('item 1') + Divider() + Text('item 2') +} +``` + +### Structs with Mandatory 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. + +Sample code: + +- Set the mandatory parameter **src** of the **\** component as follows: + + ```ts + Image('https://xyz/test.jpg') + ``` + +- Set the mandatory parameter **content** of the **\** component as follows: + + ```ts + Text('test') + ``` + +You can use variables or expressions to assign values to parameters. The result type returned by an expression must meet the parameter type requirements. For details about the variables, see [State Management with Page-level Variables](arkts-state-mgmt-page-level.md) and [State Management with Application-level Variables](arkts-state-mgmt-application-level.md). For example, set a variable or expression to construct the **\** and **\** components: + +```ts +Image(this.imagePath) +Image('https://' + this.imageUrl) +Text(`count: ${this.count}`) +``` + +### Attribute Configuration + +Component attributes are configured using an attribute method, which follows the corresponding component and is bound to the component using the "**.**" operator. + +- Example of configuring the font size attribute of the **\** component: + + ```ts + Text('test') + .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) + ``` + +- Example of passing variables or expressions in addition to constants: + + ```ts + Text('hello') + .fontSize(this.size) + Image('test.jpg') + .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 **\** component as follows: + + ```ts + Text('hello') + .fontSize(20) + .fontColor(Color.Red) + .fontWeight(FontWeight.Bold) + ``` + +### Event Configuration + +Events supported by components are configured using event methods, which each follow the corresponding component and are bound to the component using the "**.**" operator. + +- Example of using a lambda expression to configure the event of a component: + + ```ts + Button('add counter') + .onClick(() => { + this.counter += 2 + }) + ``` + +- Example of using an anonymous function expression to configure the event of a component (**bind** must be used to ensure that the contained components are referenced by **this** in the function body): + + ```ts + Button('add counter') + .onClick(function () { + this.counter += 2 + }.bind(this)) + ``` + +- Example of using a component's member function to configure the event of the component: + + ```ts + myClickHandler(): void { + this.counter += 2 + } + + ... + + Button('add counter') + .onClick(this.myClickHandler) + ``` + +### Child Component Configuration + +For a component that supports child components, for example, a container component, add the UI descriptions of the child components inside parentheses. The **\**, **\**, **\**, **\**, and **\** components are all container components. + +- Simple example of the **\** component: + + ```ts + Column() { + Text('Hello') + .fontSize(100) + Divider() + Text(this.myText) + .fontSize(100) + .fontColor(Color.Red) + } + ``` + +- Example of nesting multiple child components in the **\** component: + + ```ts + Column() { + Row() { + Image('test1.jpg') + .width(100) + .height(100) + Button('click +1') + .onClick(() => { + console.info('+1 clicked!') + }) + } + + Divider() + Row() { + Image('test2.jpg') + .width(100) + .height(100) + Button('click +2') + .onClick(() => { + console.info('+2 clicked!') + }) + } + + Divider() + Row() { + Image('test3.jpg') + .width(100) + .height(100) + Button('click +3') + .onClick(() => { + console.info('+3 clicked!') + }) + } + } + ``` diff --git a/en/application-dev/quick-start/arkts-dynamic-ui-elememt-building.md b/en/application-dev/quick-start/arkts-dynamic-ui-elememt-building.md new file mode 100644 index 0000000000000000000000000000000000000000..a781f1d81c83a306c135b412b14ded55d032cb02 --- /dev/null +++ b/en/application-dev/quick-start/arkts-dynamic-ui-elememt-building.md @@ -0,0 +1,385 @@ +# Dynamic UI Element Building + +After you've created a custom component (as described in [Basic UI Description](arkts-basic-ui-description.md)), you can customize the internal UI structure for the component, by drawing on the capability of dynamic UI element building. + +## @Builder + +The **@Builder** decorator is used to decorate a function for quickly generating multiple layouts in a custom component. This function can be declared outside the **build** function and used in the **build** function or other **@Builder** decorated functions. The following example shows how to use **@Builder**. + +```ts +// xxx.ets +@Component +struct CompB { + @State CompValue: string = '' + + aboutToAppear() { + console.info('CompB aboutToAppear.') + } + + aboutToDisappear() { + console.info('CompB aboutToDisappear.') + } + + build() { + Column() { + Button(this.CompValue) + .margin(5) + } + } +} + +@Entry +@Component +struct CompA { + size1: number = 100 + @State CompValue1: string = "Hello,CompValue1" + @State CompValue2: string = "Hello,CompValue2" + @State CompValue3: string = "Hello,CompValue3" + + // Use the custom component CompB in the @Builder decorated function CompC. + @Builder CompC(value: string) { + CompB({ CompValue: value }) + } + + @Builder SquareText(label: string) { + Text(label) + .fontSize(18) + .width(1 * this.size1) + .height(1 * this.size1) + } + + // Use the @Builder decorated function SquareText in the @Builder decorated function RowOfSquareTexts. + @Builder RowOfSquareTexts(label1: string, label2: string) { + Row() { + this.SquareText(label1) + this.SquareText(label2) + } + .width(2 * this.size1) + .height(1 * this.size1) + } + + build() { + Column() { + Row() { + this.SquareText("A") + this.SquareText("B") + } + .width(2 * this.size1) + .height(1 * this.size1) + + this.RowOfSquareTexts("C", "D") + Column() { + // Use the @Builder decorated custom components three times. + this.CompC(this.CompValue1) + this.CompC(this.CompValue2) + this.CompC(this.CompValue3) + } + .width(2 * this.size1) + .height(2 * this.size1) + } + .width(2 * this.size1) + .height(2 * this.size1) + } +} +``` +![builder](figures/builder.PNG) + +## @BuilderParam8+ + +The **@BuilderParam** decorator is used to decorate the function type attributes (for example, **@BuilderParam noParam: () => void**) in a custom component. When the custom component is initialized, the attributes decorated by **@BuilderParam** must be assigned values. + +### Background + +In certain circumstances, you may need to add a specific function, such as a click-to-jump action, to a custom component. However, embedding an event method directly inside of the component will add the function to all places where the component is imported. This is where the **@BuilderParam** decorator comes into the picture. When initializing a custom component, you can assign a **@Builder** decorated method to the **@BuilderParam** decorated attribute, thereby adding the specific function to the custom component. + +### Component Initialization Through Parameters + +When initializing a custom component through parameters, assign a **@Builder** decorated method to the **@BuilderParam** decorated attribute — **content**, and call the value of **content** in the custom component. If no parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, **noParam: this.specificNoParam**), define the type of the attribute as a function without a return value (for example, **@BuilderParam noParam: () => void**). If any parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, **withParam: this.SpecificWithParam('WithParamA')**), define the type of the attribute as **any** (for example, **@BuilderParam withParam: any**). + +```ts +// xxx.ets +@Component +struct CustomContainer { + header: string = '' + @BuilderParam noParam: () => void + @BuilderParam withParam: any + footer: string = '' + + build() { + Column() { + Text(this.header) + .fontSize(30) + this.noParam() + this.withParam() + Text(this.footer) + .fontSize(30) + } + } +} + +@Entry +@Component +struct CustomContainerUser { + @Builder specificNoParam() { + Column() { + Text('noParam').fontSize(30) + } + } + + @Builder SpecificWithParam(label: string) { + Column() { + Text(label).fontSize(30) + } + } + + build() { + Column() { + CustomContainer({ + header: 'HeaderA', + noParam: this.specificNoParam, + withParam: this.SpecificWithParam('WithParamA'), + footer: 'FooterA' + }) + Divider() + .strokeWidth(3) + .margin(10) + CustomContainer({ + header: 'HeaderB', + noParam: this.specificNoParam, + withParam: this.SpecificWithParam('WithParamB'), + footer: 'FooterB' + }) + } + } +} +``` + +![builder1](figures/builder1.PNG) + +### Component Initialization Through Trailing Closure + +In a custom component, the **@BuilderParam** decorated attribute can be initialized using a trailing closure. During initialization, the component name is followed by a pair of braces ({}) to form a trailing closure (**CustomContainer(){}**). You can consider a trailing closure as a container and add content to it. For example, you can add a component (**{Column(){...}**) to the closure. The syntax of the closure is the same as that of **build**. In this scenario, the custom component has one and only one **@BuilderParam** decorated attribute. + +Example: Add a **\** component and a click event to the closure, and call the **specificParam** method decorated by **@Builder** in the new **\** component. After the **\** component is clicked, the value of the **CustomContainer** component's **header** attribute will change from **header** to **changeHeader**. When the component is initialized, the content of the trailing closure will be assigned to the **closer** attribute decorated by **@BuilderParam**. + +```ts +// xxx.ets +@Component +struct CustomContainer { + header: string = '' + @BuilderParam closer: () => void + + build() { + Column() { + Text(this.header) + .fontSize(30) + this.closer() + } + } +} + +@Builder function specificParam(label1: string, label2: string) { + Column() { + Text(label1) + .fontSize(30) + Text(label2) + .fontSize(30) + } +} + +@Entry +@Component +struct CustomContainerUser { + @State text: string = 'header' + + build() { + Column() { + CustomContainer({ + header: this.text, + }) { + Column() { + specificParam('testA', 'testB') + }.backgroundColor(Color.Yellow) + .onClick(() => { + this.text = 'changeHeader' + }) + } + } + } +} +``` + +![builder2](figures/builder2.gif) + +## @Styles + +The **@Styles** decorator helps avoid repeated style setting, by extracting multiple style settings into one method. When declaring a component, you can invoke this method and use the **@Styles** decorator to quickly define and reuse the custom styles of a component. **@Styles** supports only universal attributes. + +**@Styles** can be defined inside or outside a component declaration. When it is defined outside a component declaration, the component name must be preceded by the keyword **function**. + +```ts +// xxx.ets +@Styles function globalFancy () { + .width(150) + .height(100) + .backgroundColor(Color.Pink) +} + +@Entry +@Component +struct FancyUse { + @Styles componentFancy() { + .width(100) + .height(200) + .backgroundColor(Color.Yellow) + } + + build() { + Column({ space: 10 }) { + Text('FancyA') + .globalFancy() + .fontSize(30) + Text('FancyB') + .globalFancy() + .fontSize(20) + Text('FancyC') + .componentFancy() + .fontSize(30) + Text('FancyD') + .componentFancy() + .fontSize(20) + } + } +} +``` + +![styles](figures/styles.PNG) + +**@Styles** can also be used inside the **[StateStyles](../reference/arkui-ts/ts-universal-attributes-polymorphic-style.md)** attribute declaration of a component, to assign state-specific attributes to the component. + +In **StateStyles**, **@Styles** decorated methods defined outside the component can be directly called, while those defined inside can be called only with the keyword **this**. + +```ts +// xxx.ets +@Styles function globalFancy () { + .width(120) + .height(120) + .backgroundColor(Color.Green) +} + +@Entry +@Component +struct FancyUse { + @Styles componentFancy() { + .width(80) + .height(80) + .backgroundColor(Color.Red) + } + + build() { + Row({ space: 10 }) { + Button('Fancy') + .stateStyles({ + normal: { + .width(100) + .height(100) + .backgroundColor(Color.Blue) + }, + disabled: this.componentFancy, + pressed: globalFancy + }) + } + } +} +``` + +![styles1](figures/styles1.gif) + +## @Extend + +The **@Extend** decorator adds new attribute methods to built-in components, such as **\**, **\**, and **\