diff --git a/en/application-dev/ui/figures/en-us_image_0000001223287704.png b/en/application-dev/ui/figures/en-us_image_0000001169599582.png similarity index 100% rename from en/application-dev/ui/figures/en-us_image_0000001223287704.png rename to en/application-dev/ui/figures/en-us_image_0000001169599582.png diff --git a/en/application-dev/ui/figures/en-us_image_0000001215199399.png b/en/application-dev/ui/figures/en-us_image_0000001215199399.png new file mode 100644 index 0000000000000000000000000000000000000000..c508bb8764c28f228e2c0a33dd6ee97e48dfe682 Binary files /dev/null and b/en/application-dev/ui/figures/en-us_image_0000001215199399.png differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001222807792.png b/en/application-dev/ui/figures/en-us_image_0000001222807792.png deleted file mode 100644 index 2923d13dcf52b856158b440de03df929abc4955b..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001222807792.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001222967772.png b/en/application-dev/ui/figures/en-us_image_0000001222967772.png deleted file mode 100644 index e2b4a1b1ce009bec2c798eb1c353ebc7790ac9d9..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001222967772.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001222967776.png b/en/application-dev/ui/figures/en-us_image_0000001222967776.png deleted file mode 100644 index 767315d2f69278028746341e79f88ad179930338..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001222967776.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001222967780.png b/en/application-dev/ui/figures/en-us_image_0000001222967780.png deleted file mode 100644 index 653da4be405165f59cbbe570e9d4d64747fa7495..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001222967780.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001223127732.png b/en/application-dev/ui/figures/en-us_image_0000001223127732.png deleted file mode 100644 index aaa0cbf699a302616ce142f43ea3b96df99d75ac..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001223127732.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001267607901.png b/en/application-dev/ui/figures/en-us_image_0000001267607901.png deleted file mode 100644 index 49182b6d8f1c96dcbaac493179fdab3d4b9a7bd4..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001267607901.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001267647873.png b/en/application-dev/ui/figures/en-us_image_0000001267647873.png deleted file mode 100644 index b6045521e10cf66733222c0b85b1b65dd20cb66f..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001267647873.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001267767869.png b/en/application-dev/ui/figures/en-us_image_0000001267767869.png deleted file mode 100644 index a6d0026ba316551ff0819493b84ae8c9cb063289..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001267767869.png and /dev/null differ diff --git a/en/application-dev/ui/figures/en-us_image_0000001267887861.png b/en/application-dev/ui/figures/en-us_image_0000001267887861.png deleted file mode 100644 index 5accde8bbb1146e3bade9d6cc4d35127dd58b86f..0000000000000000000000000000000000000000 Binary files a/en/application-dev/ui/figures/en-us_image_0000001267887861.png and /dev/null differ diff --git a/en/application-dev/ui/ui-ts-creating-simple-page.md b/en/application-dev/ui/ui-ts-creating-simple-page.md index bd08135a143e3b87d15c30b739b10f3eb22dfbda..d02b74638768c4e61b2355118eedb7cc46358b50 100644 --- a/en/application-dev/ui/ui-ts-creating-simple-page.md +++ b/en/application-dev/ui/ui-ts-creating-simple-page.md @@ -2,14 +2,16 @@ In this section, we will develop an infographic food details page, by building custom components through the container components **\** and **\** as well as basic components **\** and **\**. +Before creating a page, create an ArkTS project. For details, see [Creating an ArkTS Project in FA model](../quick-start/start-with-ets-stage.md#creating-an-arkts-project) or [Creating an ArkTS Project in Stage model](../quick-start/start-with-ets-fa.md#creating-an-arkts-project). + ## Building the Stack Layout 1. Create a food name. - Delete the code of the **build** method in the project template, create a **\** component, and place the **\** component in the braces of the **\** component. When the **\** component contains multiple child components, the latter child component overwrites the former one. + In the **index.ets** file, create a **\** component, and place the **\** component in the braces of the **\** component. When the **\** component contains multiple child components, the latter child component overwrites the former one. - ``` + ```ts @Entry @Component struct MyComponent { @@ -20,16 +22,16 @@ In this section, we will develop an infographic food details page, by building c .fontWeight(500) } } -} + } ``` - ![en-us_image_0000001222967780](figures/en-us_image_0000001222967780.png) + ![en-us_image_0000001214128687](figures/en-us_image_0000001214128687.png) 2. Display food pictures. - - Create an **\** component and specify a URL for it. To display the **\** component above the **\** component, declare the **\** component first. Image resources are stored in the **rawfile** folder in **resources**. When referencing the resources in the **rawfile** folder, use the `$rawfile('filename')` format, where **filename** indicates the relative path of the file in the **rawfile** folder. Currently,` $rawfile` only allows the **\** component to reference image resources. - - ``` + + Create an **\** component and specify a URL for it. To display the **\** component above the **\** component, declare the **\** component first. Image resources are stored in the **rawfile** folder in **resources**. When referencing the resources in the **rawfile** folder, use the `$rawfile('filename')` format, where **filename** indicates the relative path of the file in the **rawfile** folder. `$rawfile` only allows the **\** component to reference image resources. + + ```ts @Entry @Component struct MyComponent { @@ -45,119 +47,86 @@ In this section, we will develop an infographic food details page, by building c ``` -![en-us_image_0000001267887861](figures/en-us_image_0000001267887861.png) + ![en-us_image_0000001168410342](figures/en-us_image_0000001168410342.png) 3. Access images through resources. In addition to specifying the image path, you can also use the media resource symbol **$r** to reference resources based on the resource qualifier rules in the **resources** folder. Right-click the **resources** folder, choose **New** > **Resource Directory** from the shortcut menu, and set **Resource Type** to **Media** (image resource). Place **Tomato.png** in the **media** folder. You can then reference the application resources in the `$r('app.type.name')` format, which is `$r('app.media.Tomato')` in this example. - -``` -@Entry + + ```ts + @Entry @Component struct MyComponent { build() { Stack() { - Image($r('app.media.Tomato')) - .objectFit(ImageFit.Contain) - .height(357) - Text('Tomato') - .fontSize(26) - .fontWeight(500) + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) } } } -``` - - -4. Set the width and height of the image, and set the **objectFit** attribute of the image to **ImageFit.Contain**, which means to keep the aspect ratio of the image to ensure that the image is completely displayed within the boundary. + ``` +4. Set the width and height of the image, and set the **objectFit** attribute of the image to **ImageFit.Contain**, which means to keep the aspect ratio of the image to ensure that the image is completely displayed within the boundary. + If the image fills the entire screen, the possible causes are as follows: - - The width and height of the image are not set. - - The default attribute of **objectFit** of the image is **ImageFit.Cover**, that is, the image is zoomed in or zoomed out to fill the entire display boundary with the aspect ratio locked. + 1. The width and height of the image are not set. -``` -@Entry + 2. The default attribute of **objectFit** of the image is **ImageFit.Cover**, that is, the image is zoomed in or zoomed out to fill the entire display boundary with the aspect ratio locked. + + ```ts + @Entry @Component struct MyComponent { build() { Stack() { - Image($r('app.media.Tomato')) - .objectFit(ImageFit.Contain) - .height(357) - Text('Tomato') - .fontSize(26) - .fontWeight(500) + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) } } } -``` - - - ![en-us_image_0000001223127732](figures/en-us_image_0000001223127732.png) + ``` -5. Set the food image and name layout. + ![en-us_image_0000001214210217](figures/en-us_image_0000001214210217.png) - Set **alignContent** of the **\** component to **Alignment.BottomStart**. Similar to **FontWeight**, **Alignment** is a built-in enumeration type provided by the framework. +5. Set the food image and name layout. Set the alignment mode of the stack to bottom alignment. By default, the stack is center aligned. Set **alignContent** to **Alignment.BottomStart**. Similar to **FontWeight**, **Alignment** is a built-in enumeration type provided by the framework. -``` -@Entry + ```ts + @Entry @Component struct MyComponent { build() { Stack({ alignContent: Alignment.BottomStart }) { - Image($r('app.media.Tomato')) - .objectFit(ImageFit.Contain) - .height(357) - Text('Tomato') - .fontSize(26) - .fontWeight(500) + Image($r('app.media.Tomato')) + .objectFit(ImageFit.Contain) + .height(357) + Text('Tomato') + .fontSize(26) + .fontWeight(500) } } } -``` - - - ![en-us_image_0000001267647873](figures/en-us_image_0000001267647873.png) - -6. You can change the background color of the food image by setting the background color of the **\** component in any of the following ways: - 1. Using a built-in enumeration value of **Color** provided by the framework. For example, **backgroundColor(Color.Red)** indicates that the background color is set to red. - 2. Using a value of the string type. The supported color formats are rgb, rgba, and HEX. For example, you can set the background color to blue through **backgroundColor(??#0000FF??)** and set the background color to white through **backgroundColor(??rgb(255, 255, 255)??)**. - 3. Using a value of the number type. Hexadecimal color values are supported. For example, **backgroundColor(0xFF0000)** indicates that the background color is red. - - 4. Using a value of the Resource type. For details about the Resource type, see [Resource Access](ts-resource-access.md). - - -``` -@Entry - @Component - struct MyComponent { - build() { - Stack({ alignContent: Alignment.BottomStart }) { - Image($r('app.media.Tomato')) - .objectFit(ImageFit.Contain) - .height(357) - Text('Tomato') - .fontSize(26) - .fontWeight(500) - } - .backgroundColor('#FFedf2f5') - } -} -``` + ``` + ![en-us_image_0000001168728872](figures/en-us_image_0000001168728872.png) - ![en-us_image_0000001222967772](figures/en-us_image_0000001222967772.png) +6. Adjust the left and bottom margin of the **\** component. **margin** is a shorthand attribute. You can specify the margins of the four edges in a unified manner or separately. -7. Adjust the left and bottom margin of the **\** component. Margin is a shorthand attribute. You can specify the margins of the four edges in a unified manner or separately. - - To set the margins of the four edges in a unified manner, use the **Margin(Length)** format. For example, **margin(20)** indicates that the margins of the top, right, bottom, and left edges are all 20. - - - To set the margins of the four edges separately, use the **{top?: Length, right?: Length, bottom?: Length, left?:Length}** format. For example, **margin({ left: 26, bottom: 17.4 })** indicates that the left margin is 26 and the bottom margin is 17.4. + 1. To set the margins of the four edges in a unified manner, use the **Margin(Length)** format. For example, **margin(20)** indicates that the margins of the top, right, bottom, and left edges are all 20. + 2. To set the margins of the four edges separately, use the **{top?: Length, right?: Length, bottom?: Length, left?:Length}** format. For example, **margin({ left: 26, bottom: 17.4 })** indicates that the left margin is 26 and the bottom margin is 17.4. -``` -@Entry + ```ts + @Entry @Component struct MyComponent { build() { @@ -169,21 +138,19 @@ In this section, we will develop an infographic food details page, by building c .fontSize(26) .fontWeight(500) .margin({left: 26, bottom: 17.4}) - } - .backgroundColor('#FFedf2f5') + } } } -``` - + ``` - ![en-us_image_0000001222967776](figures/en-us_image_0000001222967776.png) + ![en-us_image_0000001213968747](figures/en-us_image_0000001213968747.png) -8. Adjust the structure between components and semanticize component names. Create the **FoodDetail** page entry component, create a **\** component in **FoodDetail**, and set the alignment to **alignItems(HorizontalAlign.Center)**. Change the name of the **MyComponent** component to **FoodImageDisplay**, which is a child component of the **FoodDetail** component. +7. Adjust the structure between components and semanticize component names. Create the **FoodDetail** page entry component, create a **\** component in **FoodDetail**, and set the alignment to **alignItems(HorizontalAlign.Center)**. Change the name of the **MyComponent** component to **FoodImageDisplay**, which is a child component of the **FoodDetail** component. The **\** component is a container whose child components are vertically arranged. It is in linear layout in essence. Therefore, only the alignment in the cross axis direction can be set. -``` -@Component + ```ts + @Component struct FoodImageDisplay { build() { Stack({ alignContent: Alignment.BottomStart }) { @@ -194,11 +161,10 @@ In this section, we will develop an infographic food details page, by building c .fontWeight(500) .margin({ left: 26, bottom: 17.4 }) } - .height(357) - .backgroundColor('#FFedf2f5') + .height(357) } } - + @Entry @Component struct FoodDetail { @@ -209,9 +175,7 @@ In this section, we will develop an infographic food details page, by building c .alignItems(HorizontalAlign.Center) } } -``` - - + ``` ## Building the Flex Layout @@ -219,8 +183,8 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz 1. Create a **ContentTable** component as a child component of the **FoodDetail** component. -``` -@Component + ```ts + @Component struct FoodImageDisplay { build() { Stack({ alignContent: Alignment.BottomStart }) { @@ -232,15 +196,15 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz .fontWeight(500) .margin({ left: 26, bottom: 17.4 }) } - .backgroundColor('#FFedf2f5') } } - + @Component struct ContentTable { - build() {} + build() { + } } - + @Entry @Component struct FoodDetail { @@ -252,19 +216,17 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz .alignItems(HorizontalAlign.Center) } } -``` - + ``` 2. Create a **\** component to display two food composition categories in the tomato: **Calories** and **Nutrition**. - **Calories** contains information about calories. **Nutrition** contains information about protein, fat, carbohydrates, and vitamin C. - + Create the **Calories** class. Create a **\** component and set its height to **280**, and the top, right, and left margins to **30**. The **Flex** component contains three **\** child components, which represent the category name (**Calories**), content name (**Calories**), and contain value (**17 kcal**), respectively. By default, child components in the **Flex** component are arranged horizontally. - + In the following example, code of **FoodImageDisplay** is omitted, and only code of **ContentTable** is provided. -``` -@Component + ```ts + @Component struct ContentTable { build() { Flex() { @@ -280,7 +242,7 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz .padding({ top: 30, right: 30, left: 30 }) } } - + @Entry @Component struct FoodDetail { @@ -292,15 +254,15 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz .alignItems(HorizontalAlign.Center) } } -``` - - - ![en-us_image_0000001267767869](figures/en-us_image_0000001267767869.png) - + ``` + + + ![en-us_image_0000001169759552](figures/en-us_image_0000001169759552.png) + 3. Adjust the layout and set the proportion (**layoutWeight**) of each part. Set **layoutWeight** of the category name to **1**, and **layoutWeight** of the content name and content value to **2**. The content name and content value are in a same **Flex**, and the content name occupies all remaining space **flexGrow(1)**. -``` -@Component + ```ts + @Component struct FoodImageDisplay { build() { Stack({ alignContent: Alignment.BottomStart }) { @@ -311,11 +273,10 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz .fontSize(26) .fontWeight(500) .margin({ left: 26, bottom: 17.4 }) - } - .backgroundColor('#FFedf2f5') + } } } - + @Component struct ContentTable { build() { @@ -337,7 +298,7 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz .padding({ top: 30, right: 30, left: 30 }) } } - + @Entry @Component struct FoodDetail { @@ -349,17 +310,16 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz .alignItems(HorizontalAlign.Center) } } -``` - - - ![en-us_image_0000001267607901](figures/en-us_image_0000001267607901.png) - + ``` + + ![en-us_image_0000001215079443](figures/en-us_image_0000001215079443.png) + 4. Create the **Nutrient** class in a similar process. **Nutrition** consists of four parts: **Protein**, **Fat**, **Carbohydrates**, and **VitaminC**. The names of the last three parts are omitted in the table and represented by spaces. Set **FlexDirection.Column**, **FlexAlign.SpaceBetween**, and **ItemAlign.Start**. - -``` -@Component + + ```ts + @Component struct ContentTable { build() { Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { @@ -438,7 +398,7 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz .padding({ top: 30, right: 30, left: 30 }) } } - + @Entry @Component struct FoodDetail { @@ -450,19 +410,18 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz .alignItems(HorizontalAlign.Center) } } -``` + ``` + +5. Use the custom constructor **\@Builder** to simplify the code. It can be found that the food groups in each food composition table are actually of the same UI structure. + ![en-us_image_0000001169599582](figures/en-us_image_0000001169599582.png) -5. Use the custom constructor **\@Builder** to simplify the code. It can be found that the food groups in each food composition table are actually of the same UI structure. - - ![en-us_image_0000001223287704](figures/en-us_image_0000001223287704.png) - Currently, all food groups are declared, resulting in code duplication and redundancy. You can use **\@Builder** to build a custom method and abstract the same UI structure declaration. The **\@Builder** decorated method and the **build** method for the **@Component** decorated component are used to declare some UI rendering structures and comply with the same ArkTS syntax. You can define one or more methods decorated by **\@Builder**, but a component decorated by **@Component** can have only one **build** method. - + Declare the **IngredientItem** method decorated by **\@Builder** in **ContentTable** to declare the UI descriptions for the category name, content name, and content value. -``` - @Component + ```ts + @Component struct ContentTable { @Builder IngredientItem(title:string, name: string, value: string) { Flex() { @@ -481,13 +440,12 @@ Use the **Flex** layout to build a food composition table. In this way, cell siz } } } -``` - + ``` -When the **IngredientItem** API is called in the **build** method of **ContentTable**, **this** needs to be used to invoke the method in the scope of the component to distinguish the global method call. + When the **IngredientItem** API is called in the **build** method of **ContentTable**, **this** needs to be used to invoke the method in the scope of the component to distinguish the global method call. -``` -@Component + ```ts + @Component struct ContentTable { ...... build() { @@ -502,13 +460,12 @@ When the **IngredientItem** API is called in the **build** method of **ContentTa .padding({ top: 30, right: 30, left: 30 }) } } -``` - + ``` -The overall code of the **ContentTable** component is as follows: + The overall code of the **ContentTable** component is as follows: -``` -@Component + ```ts + @Component struct ContentTable { @Builder IngredientItem(title:string, name: string, value: string) { Flex() { @@ -526,21 +483,20 @@ The overall code of the **ContentTable** component is as follows: .layoutWeight(2) } } - - build() { - Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { - this.IngredientItem('Calories', 'Calories', '17kcal') - this.IngredientItem('Nutrition', 'Protein', '0.9g') - this.IngredientItem('', 'Fat', '0.2g') - this.IngredientItem('', 'Carbohydrates', '3.9g') - this.IngredientItem('', 'VitaminC', '17.8mg') - } - .height(280) - .padding({ top: 30, right: 30, left: 30 }) - } - + + build() { + Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) { + this.IngredientItem('Calories', 'Calories', '17kcal') + this.IngredientItem('Nutrition', 'Protein', '0.9g') + this.IngredientItem('', 'Fat', '0.2g') + this.IngredientItem('', 'Carbohydrates', '3.9g') + this.IngredientItem('', 'VitaminC', '17.8mg') + } + .height(280) + .padding({ top: 30, right: 30, left: 30 }) + } } - + @Entry @Component struct FoodDetail { @@ -552,9 +508,8 @@ The overall code of the **ContentTable** component is as follows: .alignItems(HorizontalAlign.Center) } } -``` - + ``` - ![en-us_image_0000001222807792](figures/en-us_image_0000001222807792.png) + ![en-us_image_0000001215199399](figures/en-us_image_0000001215199399.png) You've learned how to build a simple food details page. Read on to learn how to define the page layout and connection. diff --git a/en/application-dev/ui/ui-ts-overview.md b/en/application-dev/ui/ui-ts-overview.md index 9c0b3ec07c524a87b8327ef447d516d501255330..54c17f4a4a5e095af269bc1d6ecbde10f7c75ec7 100644 --- a/en/application-dev/ui/ui-ts-overview.md +++ b/en/application-dev/ui/ui-ts-overview.md @@ -1,58 +1,50 @@ # Overview -The TypeScript-based declarative development paradigm of ArkUI is a simplified, high-performance UI development framework for cross-device applications. - +The ArkTS-based declarative development paradigm of ArkUI is a simplified, high-performance UI development framework for cross-device applications. ## Basic Capabilities -In ArkUI that uses the TypeScript-based declarative development paradigm, the programming mode is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. The UI capabilities are provided from three dimensions: component, animation, and state management. System capability APIs are also provided to allow for effortless invocation of system capabilities. - -For details about the UI components, see [Component Reference (TypeScript-based Declarative Development Paradigm)](../reference/arkui-ts/ts-universal-events-click.md). +In ArkUI that uses the ArkTS-based declarative development paradigm, the programming mode is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. The UI capabilities are provided from three dimensions: component, animation, and state management. System capability APIs are also provided to allow for effortless invocation of system capabilities. +To accelerate your journey with ArkUI development, take time to learn the [ArkTS programming language](../quick-start/arkts-get-started.md) and the [built-in components](../reference/arkui-ts/ts-universal-events-click.md) provided in ArkUI. +- **Out-of-the-box components** -- Out-of-the-box components - A wide range of preset system components are provided. You can set the rendering effect of these components in method chaining mode. You can combine system components to form custom components. In this way, page components are divided into independent UI units to implement independent creation, development, and reuse of different units on pages, making pages more engineering-oriented. +- **A diverse array of animation APIs** -- A diverse array of animation APIs - By drawing from the standard SVG drawing capability and various open animation APIs, you can customize animation tracks by encapsulating physical models or calling the provided APIs. +- **State and data management** -- State and data management - State data management provides clear page update and rendering processes and pipes through decorators with different functions. State management covers UI component states and application states. With these features, you are able to build an application-wide data update and UI rendering process. +- **System capability APIs** -- System capability APIs - Development has never been so easy, with a diverse array of encapsulated system capability APIs, from UI design to system capability invoking. ## Overall Architecture +![en-us_image_0000001223287712](figures/en-us_image_0000001223287712.png) + +- **Declarative UI frontend** + Provides basic language specifications of the UI development paradigm, built-in UI components, layouts, and animations, and multiple state management mechanisms, with a wide array of APIs for you to call as required. -![en-us_image_0000001223287712](figures/en-us_image_0000001223287712.png) +- **Language runtime** + + Provides parsing for the UI paradigm syntax, cross-language invoking, and a TS-based high-performance running environment. + +- **Declarative UI backend engine** + + Provides UI rendering pipelines that are compatible with different development paradigms, multiple basic components, layout calculation, dynamic effects, and interaction events, with state management and drawing capabilities. + +- **Render engine** + + Provides efficient drawing capabilities, which enable rendering instructions collected by the rendering pipeline to be drawn to the screen. + +- **Porting layer** -- Declarative UI frontend - -Provides basic language specifications of the UI development paradigm, built-in UI components, layouts, and animations, and multiple state management mechanisms, with a wide array of APIs for you to call as required. - -- Language runtime - -Provides the parsing capability for the UI paradigm syntax and allows for cross-language API calls for a high-performance running environment of the TS language. - -- Declarative UI backend engine - -Provides UI rendering pipelines that are compatible with different development paradigms, multiple basic components, layout calculation, dynamic effects, and interaction events, with state management and drawing capabilities. - -- Render engine - -Provides efficient drawing capabilities, which enable rendering instructions collected by the rendering pipeline to be drawn to the screen. - -- Porting layer - Provides abstract APIs to connect to different systems, such as system rendering pipelines and lifecycle scheduling.