diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311494580.png b/en/application-dev/quick-start/figures/en-us_image_0000001311494580.png deleted file mode 100644 index 6c1ea01d448434e7cfd94e174474e72b57d3b4cc..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001311494580.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001311494604.png b/en/application-dev/quick-start/figures/en-us_image_0000001311494604.png deleted file mode 100644 index 6c1ea01d448434e7cfd94e174474e72b57d3b4cc..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001311494604.png and /dev/null differ diff --git a/en/application-dev/quick-start/figures/en-us_image_0000001364174013.png b/en/application-dev/quick-start/figures/en-us_image_0000001364174013.png deleted file mode 100644 index 12978dc861aaa1f826404d9c6838bb8628381615..0000000000000000000000000000000000000000 Binary files a/en/application-dev/quick-start/figures/en-us_image_0000001364174013.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001174104384.png b/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001174104384.png deleted file mode 100644 index e13e20f195beab0c37dbcd33583dc5af1d8098ea..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image1_0000001174104384.png and /dev/null differ diff --git a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104384.png b/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104384.png deleted file mode 100644 index cbd85c4f6340743af87cb7210e2181def3d7c7b1..0000000000000000000000000000000000000000 Binary files a/en/application-dev/reference/arkui-ts/figures/en-us_image_0000001174104384.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image1_0000001204776353.png b/en/application-dev/ui/figures/en-us_image1_0000001204776353.png deleted file mode 100644 index 25330d63162d9999d2c57d3c33bcc20731df7851..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image1_0000001204776353.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001168410342.png b/en/application-dev/ui/figures/en-us_image_0000001168410342.png deleted file mode 100644 index 67b8d1571853fe13079a13ed32aff66bc2fc4452..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001168410342.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001168728872.png b/en/application-dev/ui/figures/en-us_image_0000001168728872.png deleted file mode 100644 index ddf24cd804055371cbd8a753089263f6bcc32b79..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001168728872.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001169678922.png b/en/application-dev/ui/figures/en-us_image_0000001169678922.png deleted file mode 100644 index 9c89860f26331dc11cf8104711be1ad3be918111..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001169678922.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001169759552.png b/en/application-dev/ui/figures/en-us_image_0000001169759552.png deleted file mode 100644 index f910230ebfab9c5315eb1c2bc99f0ca35b3cbe23..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001169759552.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001170167520.png b/en/application-dev/ui/figures/en-us_image_0000001170167520.png deleted file mode 100644 index 2441a46f00b3083dfaa8ec2dcdb1760aa7e2aeb7..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001170167520.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001204538065.png b/en/application-dev/ui/figures/en-us_image_0000001204538065.png deleted file mode 100644 index b775a2bf408dd710861afa0dfa9f756d5181e811..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001204538065.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001204776353.png b/en/application-dev/ui/figures/en-us_image_0000001204776353.png deleted file mode 100644 index b27a7f5358c954fe7e1bd912358d29d456870c2a..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001204776353.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001213968747.png b/en/application-dev/ui/figures/en-us_image_0000001213968747.png deleted file mode 100644 index b60416b59cb77e096d615ba1b25d2b14056abe00..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001213968747.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001214128687.png b/en/application-dev/ui/figures/en-us_image_0000001214128687.png deleted file mode 100644 index 3f2f15792563ec89015abce1fcf30248b3c0288e..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001214128687.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001214210217.png b/en/application-dev/ui/figures/en-us_image_0000001214210217.png deleted file mode 100644 index 18abb7b725fcf0172f189c0f1cf70e9c5ae31642..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001214210217.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001214998349.png b/en/application-dev/ui/figures/en-us_image_0000001214998349.png deleted file mode 100644 index 6a845d64a542809c05f008eef5d1e1ed9d1c22a5..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001214998349.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001215079443.png b/en/application-dev/ui/figures/en-us_image_0000001215079443.png deleted file mode 100644 index 0a53a5742ac5fda3501a93f576b945e21bd2addf..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001215079443.png and /dev/null differ diff --git a/en/application-dev/ui/ts-component-based-builder.md b/en/application-dev/ui/ts-component-based-builder.md deleted file mode 100644 index 318f248e6272400a035e01ca804965f0ca42738c..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/ts-component-based-builder.md +++ /dev/null @@ -1,182 +0,0 @@ -# @Builder - - -The **@Builder** decorated method is used to define the declarative UI description of a component and quickly generate multiple layouts in a custom component. If a custom component is used in the **@Builder** decorated method, this component will be re-created each time the method is invoked. The functionality and syntax of the **@Builder** decorator are the same as those of the **build** function. - - -```ts -// xxx.ets - -@Component -struct CompB { - @State CompValue: string = ''; - - aboutToAppear() { - console.info('CompB aboutToAppear.'); - } - - aboutToDisappear() { - console.info('CompB aboutToDisappear.'); - } - - build() { - Column() { - Button(this.CompValue); - } - } -} - -@Entry -@Component -struct CompA { - size1: number = 100; - @State CompValue1: string = "Hello,CompValue1"; - @State CompValue2: string = "Hello,CompValue2"; - @State CompValue3: string = "Hello,CompValue3"; - - // Use a custom component in the @Builder decorated method. - @Builder CompC(value: string) { - CompB({ CompValue: value }); - } - - @Builder SquareText(label: string) { - Text(label) - .width(1 * this.size1) - .height(1 * this.size1) - } - - @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") - // or as long as tsc is used - } - .width(2 * this.size1) - .height(1 * this.size1) - - this.RowOfSquareTexts("C", "D") - Column() { - // Use the custom component in the @Builder decorated method 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) - } -} -``` -## @BuilderParam8+ -The **@BuilderParam** decorator is used to modify the function type attributes (for example, `@BuilderParam content: () => any;`) in a custom component. When the custom component is initialized, the attributes modified by the **@BuilderParam** decorator 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 initialized. 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, `content: this.specificParam`), define the type of the attribute as a function without a return value (for example, `@BuilderParam content: () => void`). If any parameter is passed when assigning a value to the **@BuilderParam** decorated attribute (for example, `callContent: this.specificParam1("111")`), define the type of the attribute as `any` (for example,`@BuilderParam callContent: any;`). - -```ts -// xxx.ets -@Component -struct CustomContainer { - header: string = ""; - @BuilderParam noParam: () => void; - @BuilderParam withParam: any; - footer: string = ""; - build() { - Column() { - Text(this.header) - .fontSize(50) - this.noParam() - this.withParam() - Text(this.footer) - .fontSize(50) - } - } -} - -@Entry -@Component -struct CustomContainerUser { - @Builder specificNoParam() { - Column() { - Text("noParam").fontSize(50) - } - } - @Builder SpecificWithParam(label: string) { - Column() { - Text(label).fontSize(50) - } - } - - build() { - Column() { - CustomContainer({ - header: "Header", - noParam: this.specificNoParam, - withParam: this.SpecificWithParam("WithParam"), - footer: "Footer", - }) - } - } -} -``` -### Component Initialization Through Trailing Closure -In a custom component, use the **@BuilderParam** decorated attribute to receive a trailing closure. When the custom component is initialized, the component name is followed by a pair of braces ({}) to form a trailing closure (`CustomComponent(){}`). You can consider a trailing closure as a container and add content to it. For example, you can add a component (`{Column(){Text("content")}`) to a trailing closure. The syntax of the closure is the same as that of the **build** function. 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 component's `header` attribute will change to `changeHeader`. In addition, 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(50) - this.closer() - } - } -} -@Builder function specificParam(label1: string, label2: string) { - Column() { - Text(label1) - .fontSize(50) - Text(label2) - .fontSize(50) - } -} -@Entry -@Component -struct CustomContainerUser { - @State text: string = "header" - build() { - Column() { - CustomContainer({ - header: this.text, - }){ - Column(){ - specificParam("111", "22") - }.onClick(()=>{ - this.text = "changeHeader" - }) - } - } - } -} -``` diff --git a/en/application-dev/ui/ts-component-creation-re-initialization.md b/en/application-dev/ui/ts-component-creation-re-initialization.md deleted file mode 100644 index 18134d97195d0ac74600e1d62af0f62aaa8d5686..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/ts-component-creation-re-initialization.md +++ /dev/null @@ -1,97 +0,0 @@ -# Component Creation and Re-initialization - - -## Initial Creation and Rendering - -1. Create the parent component ParentComp. - -2. Locally initialize the state variable isCountDown of ParentComp. - -3. Execute the build function of ParentComp. - -4. Create a preset <Column> component. - 1. Create a preset <Text> component, set the text content to be displayed, and add the <Text> component instance to the <Column> component. - 2. Create the component on the true branch based on the if condition. - 1. Create a preset <Image> component and set the image source address. - 2. Create a TimerComponent using the given constructor. - 1. Create a TimerComponent object. - 2. Initialize the values of member variables locally. - 3. Use the parameters provided by the TimerComponent constructor to update the values of member variables. - 4. Execute the aboutToAppear function of TimerComponent. - 5. Execute the build function of TimerComponent to create the corresponding UI description structure. - 3. Create a preset <Button> component and set the corresponding content. - - -## Status Update - -When a user clicks a button: - -1. The value of the isCountDown state variable of ParentComp is changed to false. - -2. The build function of ParentComp is executed. - -3. The preset <Column> component is reused by the framework and reinitialized. - -4. The child components of <Column> reuse and reinitialize the objects in the memory. - 1. Reuse the preset <Text> component after re-initializing the component using new text content. - 2. Reuse the component on the false branch based on the if condition. - 1. Destroy the components on the original true branch as these components are no longer used. - 1. Destroy the created preset <image> component instance. - 2. Destroy the TimerComponent component instance, and call the aboutToDisappear function. - 2. Create components on the false branch. - 1. Create a preset <Image> component and set the image source address. - 2. Create a TimerComponent again using the given constructor. - 3. Initialize the newly created TimerComponent and call the aboutToAppear and build functions. - 3. Reuse the preset <Button> component, with the new image source address. - - -## Example - - -```ts -// xxx.ets -@Entry -@Component -struct ParentComp { - @State isCountDown: boolean = true - build() { - Column() { - Text(this.isCountDown ? 'Count Down' : 'Stopwatch') - if (this.isCountDown) { - Image('countdown.png') - TimerComponent({counter: 10, changePerSec: -1, showInColor: Color.Red}) - } else { - Image('stopwatch.png') - TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black }) - } - Button(this.isCountDown ? 'Switch to Stopwatch' : 'Switch to Count Down') - .onClick(() => {this.isCountDown = !this.isCountDown}) - } - } -} - -// Manage and display a count down / stop watch timer -@Component -struct TimerComponent { - @State counter: number = 0 - private changePerSec: number = -1 - private showInColor: Color = Color.Black - private timerId : number = -1 - - build() { - Text(`${this.counter}sec`) - .fontColor(this.showInColor) - } - - aboutToAppear() { - this.timerId = setInterval(() => {this.counter += this.changePerSec}, 1000) - } - - aboutToDisappear() { - if (this.timerId > 0) { - clearTimeout(this.timerId) - this.timerId = -1 - } - } -} -``` diff --git a/en/application-dev/ui/ts-custom-component-initialization.md b/en/application-dev/ui/ts-custom-component-initialization.md deleted file mode 100644 index 9c68e81b41aeac32ff00f545a70df3f69c64fcd4..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/ts-custom-component-initialization.md +++ /dev/null @@ -1,129 +0,0 @@ -# Initialization of Custom Components' Member Variables - - -The member variables of a component can be initialized in either of the following ways: - - -- Local initialization. For example: - - ```ts - @State counter: Counter = new Counter() - ``` - -- Initialization using constructor parameters. For example: - - ```ts - 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 | -| -------- | -------- | -------- | -| @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: - - -- The @State decorated variables need to be initialized locally. The initial value can be overwritten by the constructor parameter. - -- The @Prop and @Link decorated variables must be initialized only by constructor parameters. - - -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 | -| -------- | -------- | -------- | -------- | -------- | -| @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: - - -- 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 @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. - -- The @Prop decorated variables of the parent component can be used to initialize the normal variables or @Prop decorated variables of the child component, but not the @State or @Link decorated variables. - -- Passing @StorageLink and @StorageProp from the parent component to the child component is prohibited. - -- In addition to the preceding rules, the TypeScript strong type rules need to be followed. - - -## Example - - -```ts -// xxx.ets -class ClassA { - public a:number - constructor(a: number) { - this.a = a - } -} -@Entry -@Component -struct Parent { - @State parentState: ClassA = new ClassA(1) - - build() { - Column() { - Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { - CompA({ aState: new ClassA(2), aLink: $parentState }) - } - Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { - CompA({ aLink: $parentState }) - } - Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { - CompA({ aState: new ClassA(3), aLink: $parentState }) - } - } - } -} - -@Component -struct CompA { - @State aState: any = false - @Link aLink: ClassA - - build() { - Column() { - CompB({ bLink: $aLink, bProp: this.aState }) - CompB({ bLink: $aState, bProp: false }) - } - } -} - -@Component -struct CompB { - @Link bLink: ClassA - @Prop bProp: boolean - - build() { - Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { - Text(JSON.stringify(this.bLink.a)).fontSize(30) - Text(JSON.stringify(this.bProp)).fontSize(30).fontColor(Color.Red) - }.margin(10) - } -} -``` diff --git a/en/application-dev/ui/ts-custom-component-lifecycle-callbacks.md b/en/application-dev/ui/ts-custom-component-lifecycle-callbacks.md deleted file mode 100644 index 4515aa02c14c714971cff8a59f83a2e19ab18fc2..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/ts-custom-component-lifecycle-callbacks.md +++ /dev/null @@ -1,55 +0,0 @@ -# Custom Component Lifecycle Callbacks - -The lifecycle callbacks of a custom component are used to notify users of the lifecycle of the component. These callbacks are private and are invoked by the development framework at a specified time at runtime. They cannot be manually invoked from applications. - - -## Lifecycle Callback Definitions - -| Name | Description | -| ---------------- | ------------------------------------------------------------ | -| aboutToAppear | Invoked after a new instance of the custom component is created and before its **build** function is executed. You can change state variables in the **aboutToAppear** function. The change will take effect when you execute the **build** function next time.| -| aboutToDisappear | Invoked before the destructor of the custom component is consumed. Do not change state variables in the **aboutToDisappear** function as doing this can cause unexpected errors. For example, the modification of the **@Link** decorated variable may cause unstable application running.| -| onPageShow | Invoked when a page is displayed. This callback is used in the routing process or scenarios where the application is switched to the foreground or background. Only the custom components decorated by **@Entry** take effect.| -| onPageHide | Invoked when a page is hidden. This callback is used in the routing process or scenarios where the application is switched to the foreground or background. Only the custom components decorated by **@Entry** take effect.| -| onBackPress | Invoked when a user clicks the back button. Only the custom components decorated by **@Entry** take effect.
The value **true** is returned if the page processes the return logic instead of performing page routing.
The value **false** is returned if the default return logic is used.
If no value is returned, the default return logic is used.| - - -## Example - -```ts -// xxx.ets -@Entry -@Component -struct CountDownTimerComponent { - @State countDownFrom: number = 10 - private timerId: number = -1 - - aboutToAppear(): void { - this.timerId = setInterval(() => { - if (this.countDownFrom <= 1) { - clearTimeout(this.timerId) - } - this.countDownFrom -= 1 - }, 1000) // decr counter by 1 every second - } - - aboutToDisappear(): void { - if (this.timerId > 0) { - clearTimeout(this.timerId) - this.timerId = -1 - } - } - - build() { - Text(`${this.countDownFrom} sec left`) - } -} -``` - -The example above shows that lifecycle functions are critical for **CountDownTimerComponent** to manage its timer resources. Similar functions include loading resources asynchronously from the network. - - -> **NOTE** -> - Promise and asynchronous callback functions can be used in lifecycle functions, for example, network resource getters and timer setters. -> -> - Do not use **async await** in lifecycle functions. diff --git a/en/application-dev/ui/ts-framework-directory.md b/en/application-dev/ui/ts-framework-directory.md deleted file mode 100644 index 5d2704f3f9647df9c90ead125e723e9a46d8dea6..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/ts-framework-directory.md +++ /dev/null @@ -1,38 +0,0 @@ -# Directory Structure - - -The following figure shows the typical directory structure of the **ets** module (in **entry/src/main**) for an application with feature abilities (FAs). - - -![en-us_image_0000001222967752](figures/en-us_image_0000001222967752.png) - - -The **ets** directory contains the following files: - - -**.ets** files: Extended TypeScript (eTS) files that describe the UI layouts, styles, event interactions, and page logics. - -Functions of the folders and files are as follows: - -- The **app.ets** file manages global application logics and lifecycles. - -- The **pages** directory stores all pages. - -- The **common** directory stores common code files, such as files of custom components and public methods. - - -> **NOTE** -> -> - For details about the **resources** directory in **src/main**, see [Resource File Categories](ui-ts-basic-resource-file-categories.md). ->- TypeScript and JavaScript files can be imported as page files. - -"js" tag configuration: - -Configure the **"js"** tag in the configuration file of your application. The **"js"** tag contains the instance name, page route, and window configuration information. - - -> **NOTE** -> -> For details about the **"js"** tag in the FA model, see [Table 22 Internal structure of the js attribute](../quick-start/package-structure.md#internal-structure-of-the-js-attribute). -> -> For details about the **"js"** tag in the stage model, see [Table 3 Internal structure of the module tag](../quick-start/stage-structure.md#internal-structure-of-the-module-tag). diff --git a/en/application-dev/ui/ts-framework-file-access-rules.md b/en/application-dev/ui/ts-framework-file-access-rules.md deleted file mode 100644 index 5a95d45a9fc17851e29b37c1b6690db95e8af1c4..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/ts-framework-file-access-rules.md +++ /dev/null @@ -1,72 +0,0 @@ -# Rules for Accessing Application Code Files - - -The application code files can be accessed in the following ways: - - -- Use a relative path to reference the code file. For example, if the upper-level directory is **../common/utils/utils**, use **./common/utils/utils** for the current directory. - -- Use the root path of the current module to reference the code file, for example, **common/utils/utils**. - -- Store common code files in the **common** directory. - - -## Example - -```ts -// xxx.ets -import { FoodData, FoodList } from "../common/utils/utils"; - -@Entry -@Component -struct FoodCategoryList { - private foodItems: FoodData[] = [ - new FoodData("Tomato"), - new FoodData("Strawberry"), - new FoodData("Cucumber") - ] - build() { - Column() { - FoodList({ foodItems: this.foodItems }) - } - } -} -``` - -Example for importing a code file: - -```ts -//common/utils/utils.ets - -export class FoodData { - name: string; - constructor(name: string) { - this.name = name; - } -} - -@Component -export struct FoodList { - private foodItems: FoodData[] - - build() { - Column() { - Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) { - Text('Food List') - .fontSize(20) - } - .width(200) - .height(56) - .backgroundColor('#FFf1f3f5') - List() { - ForEach(this.foodItems, item => { - ListItem() { - Text(item.name) - .fontSize(14) - } - }, item => item.toString()) - } - } - } -} -``` diff --git a/en/application-dev/ui/ts-performance-improvement-recommendation.md b/en/application-dev/ui/ts-performance-improvement-recommendation.md deleted file mode 100644 index ee06f5113f1f857d280efd30a6170293eab52d33..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/ts-performance-improvement-recommendation.md +++ /dev/null @@ -1,304 +0,0 @@ -# Recommendations for Improving Performance - -Poor-performing code may work, but will take away from your application performance. This topic presents a line-up of recommendations that you can take to improve your implementation, thereby avoiding possible performance drop. - -## Lazy Loading - -When developing a long list, use of loop rendering, as in the code snippet below, can greatly slow down page loading and increase server load. - -```ts -@Entry -@Component -struct MyComponent { - @State arr: number[] = Array.from(Array(100), (v,k) =>k); // Construct an array of 0 to 99. - build() { - List() { - ForEach(this.arr, (item: number) => { - ListItem() { - Text(`item value: ${item}`) - } - }, (item: number) => item.toString()) - } - } -} -``` - -The preceding code snippet loads all of the 100 list elements at a time during page loading. This is generally not desirable. Instead, what we need is to load data from the data source and create corresponding components on demand. This can be achieved through lazy loading. The sample code is as follows: - -```ts -class BasicDataSource implements IDataSource { - private listeners: DataChangeListener[] = [] - - public totalCount(): number { - return 0 - } - - public getData(index: number): any { - return undefined - } - - registerDataChangeListener(listener: DataChangeListener): void { - if (this.listeners.indexOf(listener) < 0) { - console.info('add listener') - this.listeners.push(listener) - } - } - - unregisterDataChangeListener(listener: DataChangeListener): void { - const pos = this.listeners.indexOf(listener); - if (pos >= 0) { - console.info('remove listener') - this.listeners.splice(pos, 1) - } - } - - notifyDataReload(): void { - this.listeners.forEach(listener => { - listener.onDataReloaded() - }) - } - - notifyDataAdd(index: number): void { - this.listeners.forEach(listener => { - listener.onDataAdd(index) - }) - } - - notifyDataChange(index: number): void { - this.listeners.forEach(listener => { - listener.onDataChange(index) - }) - } - - notifyDataDelete(index: number): void { - this.listeners.forEach(listener => { - listener.onDataDelete(index) - }) - } - - notifyDataMove(from: number, to: number): void { - this.listeners.forEach(listener => { - listener.onDataMove(from, to) - }) - } -} - -class MyDataSource extends BasicDataSource { - private dataArray: string[] = ['item value: 0', 'item value: 1', 'item value: 2'] - - public totalCount(): number { - return this.dataArray.length - } - - public getData(index: number): any { - return this.dataArray[index] - } - - public addData(index: number, data: string): void { - this.dataArray.splice(index, 0, data) - this.notifyDataAdd(index) - } - - public pushData(data: string): void { - this.dataArray.push(data) - this.notifyDataAdd(this.dataArray.length - 1) - } -} - -@Entry -@Component -struct MyComponent { - private data: MyDataSource = new MyDataSource() - - build() { - List() { - LazyForEach(this.data, (item: string) => { - ListItem() { - Row() { - Text(item).fontSize(20).margin({ left: 10 }) - } - } - .onClick(() => { - this.data.pushData('item value: ' + this.data.totalCount()) - }) - }, item => item) - } - } -} -``` - -The preceding code initializes only three list elements during page loading and loads a new list item each time a list element is clicked. - -## Prioritizing Conditional Rendering over Visibility Control - -Use of the visibility attribute to hide or show a component, as in the code snippet below, results in re-creation of the component, leading to performance drop. - -```ts -@Entry -@Component -struct MyComponent { - @State isVisible: Visibility = Visibility.Visible; - - build() { - Column() { - Button ("Show/Hide") - .onClick(() => { - if (this.isVisible == Visibility.Visible) { - this.isVisible = Visibility.None - } else { - this.isVisible = Visibility.Visible - } - }) - Row().visibility(this.isVisible) - .width(300).height(300).backgroundColor(Color.Pink) - }.width('100%') - } -} -``` - -To avoid the preceding issue, use the **if** conditional statement instead. The sample code is as follows: - -```ts -@Entry -@Component -struct MyComponent { - @State isVisible: boolean = true; - - build() { - Column() { - Button ("Show/Hide") - .onClick(() => { - this.isVisible = !this.isVisible - }) - if (this.isVisible) { - Row() - .width(300).height(300).backgroundColor(Color.Pink) - } - }.width('100%') - } -} -``` - -## Prioritizing Flex over Column/Row - -By default, the flex container needs to re-lay out flex items to comply with the **flexShrink** and **flexGrow** settings. This may result in drop in rendering performance. - -```ts -@Entry -@Component -struct MyComponent { - build() { - Flex({ direction: FlexDirection.Column }) { - Flex().width(300).height(200).backgroundColor(Color.Pink) - Flex().width(300).height(200).backgroundColor(Color.Yellow) - Flex().width(300).height(200).backgroundColor(Color.Grey) - } - } -} -``` - -To avoid the preceding issue, replace **Flex** with **Column** and **Row**, which can create the same page layout as **Flex** does. - -```ts -@Entry -@Component -struct MyComponent { - build() { - Column() { - Row().width(300).height(200).backgroundColor(Color.Pink) - Row().width(300).height(200).backgroundColor(Color.Yellow) - Row().width(300).height(200).backgroundColor(Color.Grey) - } - } -} -``` - -## Setting Width and Height for \ Components - -When a **\** component is nested within a **\** component, all of its content will be loaded if its width and height is not specified, which may result in performance drop. - -```ts -@Entry -@Component -struct MyComponent { - private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; - - build() { - Scroll() { - List() { - ForEach(this.arr, (item) => { - ListItem() { - Text(`item value: ${item}`).fontSize(30).margin({ left: 10 }) - }.height(100) - }, (item) => item.toString()) - } - }.backgroundColor(Color.Pink) - } -} -``` - -Therefore, in the above scenario, you are advised to set the width and height for the **\** component as follows: - -```ts -@Entry -@Component -struct MyComponent { - private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; - - build() { - Scroll() { - List() { - ForEach(this.arr, (item) => { - ListItem() { - Text(`item value: ${item}`).fontSize(30).margin({ left: 10 }) - }.height(100) - }, (item) => item.toString()) - }.width('100%').height(500) - }.backgroundColor(Color.Pink) - } -} -``` - -## Minimizing White Blocks During Swiping -To minimize white blocks durign swiping, expand the UI loading range by increasing the value of **cachedCount** for the **\** and **\** components. **cachedCount** indicates the number of list or grid items preloaded outside of the screen. - -If an item needs to request an online image, set **cachedCount** as appropriate so that the the image is downloaded in advance before the item comes into view on the screen, thereby reducing the number of white blocks. - -The following is an example of using **cachedCount**: - -```ts -@Entry -@Component -struct MyComponent { - private source: MyDataSource = new MyDataSource(); - build() { - List() { - LazyForEach (this.source, item => { - ListItem() { - Text("Hello" + item) - .fontSize(100) - .onAppear(()=>{ - console.log("appear:" + item) - }) - } - }) - }.cachedCount(3) // Increase the value to enlarge the range of logs that appear. - } -} -class MyDataSource implements IDataSource { - data: number[] = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]; - public totalCount(): number { - return this.data.length - } - public getData(index: number): any { - return this.data[index] - } - registerDataChangeListener(listener: DataChangeListener): void { - } - unregisterDataChangeListener(listener: DataChangeListener): void { - } -} -``` -**Instructions** - -A greater **cachedCount** value may result in higher CPU and memory overhead of the UI. Adjust the value by taking into account both the comprehensive performance and user experience. \ No newline at end of file diff --git a/en/application-dev/ui/ts-pixel-units.md b/en/application-dev/ui/ts-pixel-units.md deleted file mode 100644 index 032acce26c0cc48faa9cc1584ff1b2e66853908f..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/ts-pixel-units.md +++ /dev/null @@ -1,75 +0,0 @@ -# Pixel Units - -The framework provides four pixel units, with vp as the reference data unit. - - -| Name | Description | -| ---- | ---------------------------------------- | -| px | Physical pixel unit of the screen. | -| vp | Pixel unit specific to the screen density. Pixels in this unit are converted into physical pixels of the screen based on the screen pixel density. This unit is used for values whose unit is not specified. | -| fp | Font pixel, which is similar to vp and varies according to the system font size. | -| lpx | Logical pixel unit of the window. It is the ratio of the actual screen width to the logical width (configured by **[designWidth](../quick-start/package-structure.md)**). For example, if **designWidth** is set to **720** (default value), then 1lpx is equal to 2px for a screen with an actual width of 1440 physical pixels.| - - -## Pixel Unit Conversion - -Conversion between px and other pixel units is supported. - -| API | Description | -| ---------------------------------------- | ---------------------- | -| vp2px(value : number) : number | Converts a value in units of vp to a value in units of px. | -| px2vp(value : number) : number | Converts a value in units of px to a value in units of vp. | -| fp2px(value : number) : number | Converts a value in units of fp to a value in units of px. | -| px2fp(value : number) : number | Converts a value in units of px to a value in units of fp. | -| lpx2px(value : number) : number | Converts a value in units of lpx to a value in units of px.| -| px2lpx(value : number) : number | Converts a value in units of px to a value in units of lpx.| - - -## Example - -```ts -// xxx.ets -@Entry -@Component -struct Example { - build() { - Column() { - Flex({ wrap: FlexWrap.Wrap }) { - Column() { - Text("width(220)") - .width(220).height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') - }.margin(5) - Column() { - Text("width('220px')") - .width('220px').height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White) - }.margin(5) - Column() { - Text("width('220vp')") - .width('220vp').height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') - }.margin(5) - Column() { - Text("width('220lpx') designWidth:720") - .width('220lpx').height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') - }.margin(5) - Column() { - Text("width(vp2px(220) + 'px')") - .width(vp2px(220) + 'px').height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12vp') - }.margin(5) - Column() { - Text("fontSize('12fp')") - .width(220).height(40).backgroundColor(0xF9CF93) - .textAlign(TextAlign.Center).fontColor(Color.White).fontSize('12fp') - }.margin(5) - }.width('100%') - } - } -} -``` - -![en-us_image_0000001267607893](figures/en-us_image_0000001267607893.gif) - diff --git a/en/application-dev/ui/ts-resource-access.md b/en/application-dev/ui/ts-resource-access.md deleted file mode 100644 index 271aaef3ca39ae9db50f9e3b410351dbc202928c..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/ts-resource-access.md +++ /dev/null @@ -1,148 +0,0 @@ -# Resource Access - - -## Accessing Application Resources - -To reference an application resource in a project, use the `"$r('app.type.name')"` format. **app** indicates the resource defined in the **resources** directory of the application. **type** indicates the resource type (or the location where the resource is stored). The value can be **color**, **float**, **string**, **plural**, or **media**. **name** indicates the resource name, which you set when defining the resource. - -When referencing resources in the **rawfile** sub-directory, use the ```"$rawfile('filename')"``` format. Currently, **$rawfile** allows only the **\** component to reference image resources. **filename** indicates the relative path of a file in the **rawfile** directory, and the file name must contain the file name extension. Note that the relative path cannot start with a slash (/). - -> **NOTE** -> -> Resource descriptors accept only strings, such as `'app.type.name'`, and cannot be combined. -> -> `$r` returns a **Resource** object. To obtain the corresponding string, use [getString](../reference/apis/js-apis-resource-manager.md#getstring). - - In the **.ets** file, you can use the resources defined in the **resources** directory. - -```ts -Text($r('app.string.string_hello')) - .fontColor($r('app.color.color_hello')) - .fontSize($r('app.float.font_hello')) -} - -Text($r('app.string.string_world')) - .fontColor($r('app.color.color_world')) - .fontSize($r('app.float.font_world')) -} - -Text($r('app.string.message_arrive', "five of the clock")) // Reference string resources. The second parameter of $r is used to replace %s. - .fontColor($r('app.color.color_hello')) - .fontSize($r('app.float.font_hello')) -} - -Text($r('app.plural.eat_apple', 5, 5)) // Reference plural resources. The first parameter indicates the plural resource, and the second parameter indicates the number of plural resources. The third parameter indicates the substitute of %d. - .fontColor($r('app.color.color_world')) - .fontSize($r('app.float.font_world')) -} - -Image($r('app.media.my_background_image')) // Reference media resources. - -Image($rawfile('test.png')) // Reference an image in the rawfile directory. - -Image($rawfile('newDir/newTest.png')) // Reference an image in the rawfile directory. -``` - - -## Accessing System Resources - - -System resources include colors, rounded corners, fonts, spacing, character strings, and images. By using system resources, you can develop different applications with the same visual style. - - -To reference a system resource, use the ```"$r('sys.type.resource_id')"``` format. Wherein: **sys** indicates a system resource; **type** indicates the resource type, which can be **color**, **float**, **string**, or **media**; **resource_id** indicates the resource ID. - -```ts -Text('Hello') - .fontColor($r('sys.color.ohos_id_color_emphasize')) - .fontSize($r('sys.float.ohos_id_text_size_headline1')) - .fontFamily($r('sys.string.ohos_id_text_font_family_medium')) - .backgroundColor($r('sys.color.ohos_id_color_palette_aux1')) -Image($r('sys.media.ohos_app_icon')) - .border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2}) - .margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')}) - .height(200) - .width(300) -``` -## Resource File Examples - -The content of the **color.json** file is as follows: - - -```json -{ - "color": [ - { - "name": "color_hello", - "value": "#ffff0000" - }, - { - "name": "color_world", - "value": "#ff0000ff" - } - ] -} -``` - -The content of the **float.json** file is as follows: - - -```json -{ - "float":[ - { - "name":"font_hello", - "value":"28.0fp" - }, - { - "name":"font_world", - "value":"20.0fp" - } - ] -} -``` - -The content of the **string.json** file is as follows: - - -```json -{ - "string":[ - { - "name":"string_hello", - "value":"Hello" - }, - { - "name":"string_world", - "value":"World" - }, - { - "name":"message_arrive", - "value":"We will arrive at %s." - } - ] -} -``` - -The content of the **plural.json** file is as follows: - - -```json -{ - "plural":[ - { - "name":"eat_apple", - "value":[ - { - "quantity":"one", - "value":"%d apple" - }, - { - "quantity":"other", - "value":"%d apples" - } - ] - } - ] -} -``` diff --git a/en/application-dev/ui/ui-ts-basic-components-button.md b/en/application-dev/ui/ui-ts-basic-components-button.md deleted file mode 100644 index 71e9af112dd407684f490561f88e1a39aedf0892..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/ui-ts-basic-components-button.md +++ /dev/null @@ -1,196 +0,0 @@ -# Button - - -The **\