-```
-
-
-```
-/* index.css */
-.container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: #F1F3F5;
-}
-```
-
-
-
-
-## Setting the Picker Type
-
-Set the type attribute of the <picker> component. For example, set it to date.
-
-
-```
-
-
-```
-
-
-```
-/* index.css */
-.container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: #F1F3F5;
-}
-.pickertext{
- margin-bottom: 30px;
-}
-```
-
-
-```
-// xxx.js
-export default {
- data: {
- rangetext:['15', "20", "25"],
- textvalue:'Select text',
- datevalue:'Select date',
- }
-}
-```
-
-
-
->  **NOTE**:
-> - When setting the value range of a common selector, you must use the data binding mode.
->
-> - The lunarswitch attribute of the date selector is only supported on phones and tablets.
-
-
-## Setting the Time Format
-
-Set the hours attribute to specify the time format used by the time selector. Available values include 12 and 24, indicating the 12-hour format and 24-hour format, respectively.
-
-
-```
-
-
-```
-
-
-```
-/* index.css */
-.container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: #F1F3F5;
-}
-.pickertime {
- margin-bottom:50px;
- width: 300px;
- height: 50px;
-}
-```
-
-
-
->  **NOTE**:
-> - When hours is set to 12, the time is displayed in 12-hour format and distinguished by a.m. and p.m.
->
-> - When hours is set to 24, the time is displayed in 24-hour format.
-
-
-## Adding Response Events
-
-To confirm and cancel selection, add change and cancel events.
-
-
-```
-
-
-```
-
-
-```
-/* index.css */
-.container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: #F1F3F5;
-}
-.pickermuitl {
- margin-bottom:20px;
- width: 600px;
- height: 50px;
- font-size: 25px;
- letter-spacing:15px;
-}
-```
-
-
-```
-// xxx.js
-import prompt from '@system.prompt';
-export default {
- data: {
- multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"]],
- multitextvalue:'Select multi-line text',
- multitextselect:[0,0,0],
- },
- multitextonchange(e) {
- this.multitextvalue=e.newValue;
- prompt.showToast({ message:"Multi-column text changed to:" + e.newValue })
- },
- multitextoncancel() {
- prompt.showToast({ message:"multitextoncancel" })
- },
-}
-```
-
-
-
-
-## Example Scenario
-
-
-Implement a health check-in application by using the <picker> component.
-
-```
-
-
-
Health check-in
-
-
-
-
-
-
Having fever or cold symptoms
-
-
-
-
-
Close contact with someone with COVID-19
-
-
-
-
-
-```
-
-```
-/* index.css */
-.doc-page {
- flex-direction: column;
- background-color: #F1F3F5;
-}
-.title {
- margin-top: 30px;
- margin-bottom: 30px;
- margin-left: 50px;
- font-weight: bold;
- color: #0000ff;
- font-size: 38px;
-}
-.out-container {
- flex-direction: column;
- align-items: center;
-}
-.pick {
- width: 80%;
- height: 76px;
- border: 1px solid #0000ff;
- border-radius: 20px;
- padding-left: 12px;
-}
-.txt {
- width: 80%;
- font-size: 18px;
- text-align: left;
- margin-bottom: 12px;
- margin-left: 12px;
-}
-.dvd {
- margin-top: 30px;
- margin-bottom: 30px;
- margin-left: 80px;
- margin-right: 80px;
- color: #6495ED;
- stroke-width: 6px;
-}
-```
-
-```
-// xxx.js
-import pmt from '@system.prompt'
-export default {
- data: {
- yorn1:'No',
- yorn2:'No',
- pos:'Home',
- yesno:['Yes', 'No'],
- posarr:['Home', 'Company'],
- datevalue:'Select time',
- datetimeselect:'2012-5-6-11-25',
- dateselect:'2021-9-17',
- showbuild:true
- },
- onInit() {
- },
- isFever(e) {
- this.yorn1 = e.newValue
- },
- isTouch(e) {
- this.yorn2 = e.newValue
- },
- setPos(e) {
- this.pos = e.newValue
- if (e.newValue === 'Non-research center') {
- this.showbuild = false
- } else {
- this.showbuild = true
- }
- },
- setbuild(e) {
- this.build = e.newValue
- },
- dateonchange(e) {
- e.month=e.month+1;
- this.datevalue = e.year + "-" + e.month + "-" + e.day;
- pmt.showToast({ message:"date:"+e.year+"-"+e.month+"-"+e.day })
- },
- showtoast() {
- pmt.showToast({
- message: 'Submitted.',
- duration: 2000,
- gravity: 'center'
- })
- }
-}
-```
-
-
-
diff --git a/en/application-dev/device/ui/ui-js-components-stepper.md b/en/application-dev/device/ui/ui-js-components-stepper.md
deleted file mode 100644
index d9a13be87c74e1e602c5352f6f324cf5d08ed6ea..0000000000000000000000000000000000000000
--- a/en/application-dev/device/ui/ui-js-components-stepper.md
+++ /dev/null
@@ -1,401 +0,0 @@
-# <stepper> Development
-
-
-When multiple steps are required to complete a task, you can use the <stepper> component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
-
-
->  **NOTE**:
-> This component is supported since API version 5.
-
-
-## Creating a <stepper> Component
-
-Create a <stepper> component in the .hml file under pages/index.
-
-
-```
-
-
-
- Step 1
-
-
- Step 2
-
-
-
-```
-
-
-```
-/* xxx.css */
-.container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- background-color: #F1F3F5;
-}
-text{
- width: 100%;
- height: 100%;
- text-align: center;
-}
-```
-
-
-
-
-## Setting the Index
-
-Set index to the index value of the step that you want to display by default.
-
-
-```
-
-
-
-
- stepper-item1
-
-
- stepper-item2
-
-
- stepper-item3
-
-
-
-```
-
-
-```
-/* index.css */
-.container {
- flex-direction: column;
- background-color:#F1F3F5;
-}
-text{
- width: 100%;
- height: 100%;
- text-align: center;
-}
-```
-
-
-
-Set the label attribute to customize the button text for the <stepper-item>.
-
-
-```
-
-
-
-
- stepper-item1
-
-
- stepper-item2
-
-
- stepper-item3
-
-
- stepper-item4
-
-
-
-```
-
-
-```
-/* index.css */
-.container {
- flex-direction: column;
- background-color:#F1F3F5;
-}
-text{
- width: 100%;
- height: 100%;
- text-align: center;
-}
-```
-
-
-```
-/* index.js */
-export default {
- data: {
- label_1:{ nextLabel: 'NEXT', status: 'normal' },
- label_2:{
- prevLabel: 'BACK',
- nextLabel: 'NEXT',
- status: 'normal'
- },
- label_3:{
- prevLabel: 'BACK',
- nextLabel: 'END',
- status: 'disabled'
- },
- },
-}
-```
-
-
-
-
-## Setting the Style
-
- By default, the <stepper> component fills entire space of its container. The sample code below shows how to set the border and background color using the border and background-color attributes.
-
-```
-
-
-
-
-
- stepper-item1
-
-
-
-
-```
-
-
-```
-/* index.css */
-.container {
- flex-direction: column;
- align-items: center;
- justify-content: center;
- background-color:#F1F3F5;
-}
-.stepperContent{
- width: 300px;
- height: 300px;
-}
-.stepperClass{
- border:1px solid silver ; background-color: white;
-}
-text{
- width: 100%;
- height: 100%;
- text-align: center;
-}
-```
-
-
-
-
-## Adding Events
-
-The <stepper> component supports the finish, change, next, back, and skip events.
-
-- When the change and next or back events exist at the same time, the next or back event is executed before the change event.
-
-- Before resetting the index attribute, you must remove the current value. Otherwise, the value change cannot be detected.
-
-```
-
-
-
-
-
- stepper-item1
-
-
- stepper-item2
-
-
- stepper-item3
-
-
-
-
-```
-
-
-```
-/* xxx.css */
-.doc-page {
- flex-direction: column;
- align-items: center;
- justify-content: center;
-}
-stepper-item{
- width: 100%;
- flex-direction: column;
- align-self: center;
- justify-content: center;
-}
-text{
- margin-top: 45%;
- justify-content: center;
- align-self: center;
- margin-bottom: 50px;
-}
-button{
- width: 80%;
- height: 60px;
- margin-top: 20px;
-}
-```
-
-
-```
-/* index.js */
-import prompt from '@system.prompt';
-export default {
- data: {
- index:0,
- },
- stepperSkip(){
- this.index = null;
- this.index=2;
- },
- skipClick(){
- this.$element('stepperId').setNextButtonStatus({status: 'skip', label: 'SKIP'});
- },
- stepperFinish(){
- prompt.showToast({
- message: 'All Finished'
- })
- },
- stepperChange(e){
- console.log("stepperChange"+e.index)
- prompt.showToast({
- message: 'Previous step: '+e.prevIndex+"-------Current step:"+e.index
- })
- },
- stepperNext(e){
- console.log("stepperNext"+e.index)
- prompt.showToast({
- message: 'Current step:'+e.index+"-------Next step:"+e.pendingIndex
- })
- var index = {pendingIndex:e.pendingIndex }
- return index;
- },
- stepperBack(e){
- console.log("stepperBack"+e.index)
- var index = {pendingIndex: e.pendingIndex }
- return index;
- }
-}
-```
-
-
-
-
-## Example Scenario
-
-Select the options displayed on the page. Your selection will be shown in real time. Click the next button to dynamically change the font color and font size on the page.
-
-Use the <stepper> component to navigate through the steps. Create a [<toggle>](../reference/arkui-js/js-components-basic-toggle.md) component to implement the functions of selection and displaying the selection result. Then use the [<select>](../reference/arkui-js/js-components-basic-select.md) component to dynamically change the font color or size of the selected options.
-
-
-```
-
-
-
-
-
Select error types:
-
- {{error}}
-
-
-
-
-
-
-
Toggle
-
-
-
-
-
-
- text-color
-
- {{$item}}
-
-
-
- font-size
-
- {{$item}}
-
-
-
-
-
-
-```
-
-
-```
-/* xxx.css */
-.container {
- flex-direction: column;
- align-items: center;
- justify-content: center;
- background-color:#F1F3F5;
-}
-.dvd {
- stroke-width: 8px;
- color: orangered;
- margin: 65px;
-}
-.tog{
- margin-right: 20px;
- margin-top: 30px;
-}
-```
-
-
-```
-/* index.js */
-import prompt from '@system.prompt';
-import router from '@system.router';
-let myset = new Set();
-export default {
- data: {
- error: '',
- tcolor:'#FF4500',
- color_list:['#FF4500','#5F9EA0','#0000FF'],
- tsize: '12px',
- size_list: ['12px', '30px', '8px', '50px'],
- label1: {
- prevLabel: 'The text on the left of the starting step is invalid.',
- nextLabel: 'Toggle'
- },
- label2: {
- prevLabel: 'toggle',
- nextLabel: 'END'
- },
- togglelist1:['Program error', 'Software', 'System', 'Application'],
- },
- multiTog(arg, e) {
- this.error = ' '
- if (e.checked) {
- myset.add(arg)
- } else {
- myset.delete(arg)
- }
- for (let item of myset) {
- this.error += item + ' '
- }
- },
- settcolor(e) {
- this.tcolor = e.newValue
- },
- settsize(e) {
- this.tsize = e.newValue
- }
-}
-```
-
-
diff --git a/en/application-dev/device/ui/ui-js-components-text.md b/en/application-dev/device/ui/ui-js-components-text.md
deleted file mode 100644
index 68fc3006a34b48456df5a99ebbbcf39fd338f5d4..0000000000000000000000000000000000000000
--- a/en/application-dev/device/ui/ui-js-components-text.md
+++ /dev/null
@@ -1,279 +0,0 @@
-# <text> Development
-
-
-The <text> component is used to display a piece of textual information. For details, see [text](../reference/arkui-js/js-components-basic-text.md).
-
-
-## Creating a <text> Component
-
-Create a <text> component in the .hml file under pages/index.
-
-
-```
-
-
- Hello World
-
-```
-
-
-```
-/* xxx.css */
-.container {
- width: 100%;
- height: 100%;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- background-color: #F1F3F5;
-}
-```
-
-
-
-
-## Setting the Text Style and Attributes
-
-- Adding a text style
-
-
- Set the color, font-size, allow-scale, word-spacing, and text-valign attributes to apply the color, size, zoom, spacing, and vertical alignment styles to the text.
-
- ```
-
-
-
- This is a passage
-
-
- This is a passage
-
-
- ```
-
-
-
- ```
- /* xxx.css */
- .container {
- width: 100%;
- height: 100%;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- background-color: #F1F3F5;
- }
- ```
-
-
- 
-
-- Adding a text modifier
-
-
- Set the text-decoration attribute to add a line to selected text. Set the text-decoration-color attribute to apply specific color to the added line. For values of text-decoration, see [Text Style](../reference/arkui-js/js-components-basic-text.md).
-
- ```
-
-
-
- This is a passage
-
-
- This is a passage
-
-
- ```
-
- ```
- /* xxx.css */
- .container {
- width: 100%;
- height: 100%;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- text{
- font-size: 50px;
- }
- ```
-
-
- 
-
-- Hiding text content
-
-
- Set the text-overflow attribute to ellipsis so that overflowed text is displayed as an ellipsis.
-
- ```
-
-
-
- This is a passage
-
-
- ```
-
- ```
- /* xxx.css */
- .container {
- width: 100%;
- height: 100%;
- flex-direction: column;
- align-items: center;
- background-color: #F1F3F5;
- justify-content: center;
- }
- .text{
- width: 200px;
- max-lines: 1;
- text-overflow:ellipsis;
- }
- ```
-
-
- >  **NOTE**:
- > - text-overflow must be used together with max-lines.
- >
- > - max-lines indicates the maximum number of lines in the text.
-
-
-
-
-
-- Setting the text line breaking mode
-
-
- Set the word-break attribute to specify how to break lines of text. For values of word-break, see [Text Styles](../reference/arkui-js/js-components-basic-text.md).
-
- ```
-
-
-
-
- Welcome to the world
-
-
- Welcome to the world
-
-
-
- ```
-
- ```
- /* xxx.css */
- .container {
- background-color: #F1F3F5;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- .content{
- width: 50%;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
- .text1{
- height: 200px;
- border:1px solid #1a1919;
- margin-bottom: 50px;
- text-align: center;
- word-break: break-word;
- font-size: 40px;
- }
- .text2{
- height: 200px;
- border:1px solid #0931e8;
- text-align: center;
- word-break: break-all;
- font-size: 40px;
- }
- ```
-
-
- 
-
-- Setting the [<span>](../reference/arkui-js/js-components-basic-span.md)child component
-
-```
-
-
-
- This is a passage
-
-
- This 1 is a 1 passage
-
-
-```
-
-
-
-
-
->  **NOTE**:
-> - When the <span> child component is used to form a text paragraph, incorrect <span> attribute settings (for example, setting of font-weight to 1000) will result in abnormal display of the text paragraph.
->
-> - When the <span> child component is being used, do not include any text you want to show in the <text> component, as such text will not be displayed if you do so.
-
-
-## Example Scenario
-
-Use the <text> component to display text content through data binding. Use the <span> child component to hide or display text content by setting the show attribute.
-
-
- ```
-
-
-
-
- {{ content }}
-
-
-
- {{ content }}
-
- 1
-
- Hide clip
-
-
- ```
-
-
-```
-/* xxx.css */
-.container {
- align-items: center;
- flex-direction: column;
- justify-content: center;
- background-color: #F1F3F5;
-}
-.title {
- font-size: 26px;
- text-align:center;
- width: 200px;
- height: 200px;
-}
-```
-
-
-```
-// xxx.js
-export default {
- data: {
- isShow:true,
- content: 'Hello World'
- },
- onInit(){ },
- test(e) {
- this.isShow = e.checked
- }
-}
-```
-
-
diff --git a/en/application-dev/device/ui/ui-js-custom-components.md b/en/application-dev/device/ui/ui-js-custom-components.md
deleted file mode 100644
index c2a5c96faa10df363c415c32ec9e80db9a752560..0000000000000000000000000000000000000000
--- a/en/application-dev/device/ui/ui-js-custom-components.md
+++ /dev/null
@@ -1,106 +0,0 @@
-# Custom Components
-
-
-The ArkUI that uses the JavaScript-based web-like development paradigm supports custom components for you to extend existing components. You can encapsulate custom private attributes and events into new components to reuse them multiple times in your project. This also improves code readability. The following is an example:
-
-
-- Building a custom component
-
- ```
-
-
- {{title}}
- Click to view the hidden text.
- hello world
-
- ```
-
-
- ```
- /* comp.css */
- .item {
- width: 700px;
- flex-direction: column;
- height: 300px;
- align-items: center;
- margin-top: 100px;
- }
- .text-style {
- width: 100%;
- text-align: center;
- font-weight: 500;
- font-family: Courier;
- font-size: 36px;
- }
- .title-style {
- font-weight: 500;
- font-family: Courier;
- font-size: 50px;
- color: #483d8b;
- }
- ```
-
-
- ```
- // comp.js
- export default {
- props: {
- title: {
- default: 'title',
- },
- showObject: {},
- },
- data() {
- return {
- showObj: this.showObject,
- };
- },
- childClicked () {
- this.$emit('eventType1', {text: 'Receive the parameters from the child component.'});
- this.showObj = !this.showObj;
- },
- }
- ```
-
-- Introducing the custom component
-
- ```
-
-
-
- Parent component: {{text}}
-
- ```
-
-
- ```
- /* xxx.css */
- .container {
- background-color: #f8f8ff;
- flex: 1;
- flex-direction: column;
- align-content: center;
- }
- ```
-
-
- ```
- // xxx.js
- export default {
- data: {
- text: 'Start'
- isShow: false,
- },
- textClicked (e) {
- this.text = e.detail.text;
- },
- }
- ```
-
-
-In this example, the parent component passes the customized attribute through title to the child component, and the child component receives the attribute value in props. The child component passes text to the parent through the bound event, and the passed value is obtained via e.detail. To successfully bind the child component event to the parent component, ensure that the event name meet the requirements for event binding. For details, see [Basic Usage of Custom Components](../reference/arkui-js/js-components-custom-basic-usage.md). The following figures show how the custom component works.
-
- figure1 Running effect
-
- 
diff --git a/en/application-dev/device/ui/ui-js-overview.md b/en/application-dev/device/ui/ui-js-overview.md
deleted file mode 100644
index 39612e9d878502f3a855b24dae62eee1ea8b5436..0000000000000000000000000000000000000000
--- a/en/application-dev/device/ui/ui-js-overview.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# Overview
-
-
-The web-like development paradigm uses the classical three-stage programming model, in which OpenHarmony Markup Language (HML) is used for building layouts, CSS for defining styles, and JavaScript for adding processing logic. UI components are associated with data through one-way data-binding. This means that when data changes, the UI automatically updates with the new data. This development paradigm has a low learning curve for frontend web developers, allowing them to quickly transform existing web applications into ArkUI applications. It could be helpful if you are developing small- and medium-sized applications with simple UIs.
-
-
-## Overall Architecture
-
-ArkUI with the JavaScript-based web-like development paradigm consists of the following layers: application layer, frontend framework layer, engine layer, and porting layer.
-
-
-
-
-
-- Application
-
- Contains applications with FAs you developed. The FA application in this document refers to the application with FAs developed using JavaScript.
-
-- Framework
-
- Parses UI pages and provides the Model-View-ViewModel (MVVM), page routing, custom components and more for front end development.
-
-- Engine
-
- Accomplishes animation parsing, Document Object Model (DOM) building, layout computing, rendering command building and drawing, and event management.
-
-- Porting Layer
-
- Abstracts the platform layer to provide abstract interfaces to connect to the platform. For example, event interconnection, rendering pipeline interconnection, and lifecycle interconnection.
diff --git a/en/application-dev/device/ui/ui-ts-building-category-grid-layout.md b/en/application-dev/device/ui/ui-ts-building-category-grid-layout.md
deleted file mode 100644
index 9a2e8febf63fcff3a00531ea4d31a348b1523e75..0000000000000000000000000000000000000000
--- a/en/application-dev/device/ui/ui-ts-building-category-grid-layout.md
+++ /dev/null
@@ -1,373 +0,0 @@
-# Building a Food Category Grid Layout
-
-
-The diet application allows food on the home page to display in list or grid mode. You can implement switching between food categories through tabs in grid mode.
-
-
-1. Import the Category enumeration type to the FoodCategoryList page.
-
- ```
- import { Category, FoodData } from '../model/FoodData'
- ```
-
-2. Create the FoodCategoryList and FoodCategory components. The FoodCategoryList component is used as the entry component of the new page, and the initializeOnStartup method is invoked in the entry component.
-
- ```
- @Component
- struct FoodList {
- private foodItems: FoodData[]
- build() {
- ......
- }
- }
-
- @Component
- struct FoodCategory {
- private foodItems: FoodData[]
- build() {
- ......
- }
- }
-
- @Entry
- @Component
- struct FoodCategoryList {
- private foodItems: FoodData[] = initializeOnStartup()
- build() {
- ......
- }
- }
- ```
-
-3. Create the showList member variable in the FoodCategoryList component to control the rendering switchover between the list layout and grid layout. The conditional rendering statement if...else... is required.
-
- ```
- @Entry
- @Component
- struct FoodCategoryList {
- private foodItems: FoodData[] = initializeOnStartup()
- private showList: boolean = false
-
- build() {
- Stack() {
- if (this.showList) {
- FoodList({ foodItems: this.foodItems })
- } else {
- FoodCategory({ foodItems: this.foodItems })
- }
- }
- }
- }
- ```
-
-4. In the upper right corner of the page, create an icon for switching between the list and grid layouts. Set the stack alignment mode to TopEnd, top-bottom alignment. Create an image component, and set the click event, that is, negation of showList.
-
- ```
- @Entry
- @Component
- struct FoodCategoryList {
- private foodItems: FoodData[] = initializeOnStartup()
- private showList: boolean = false
-
- build() {
- Stack({ alignContent: Alignment.TopEnd }) {
- if (this.showList) {
- FoodList({ foodItems: this.foodItems })
- } else {
- FoodCategory({ foodItems: this.foodItems })
- }
- Image($r('app.media.Switch'))
- .height(24)
- .width(24)
- .margin({ top: 15, right: 10 })
- .onClick(() => {
- this.showList = !this.showList
- })
- }.height('100%')
- }
- }
- ```
-
-5. Add the @State decorator. After you click the switch tab in the upper right corner, the page does not change. This is because the showList does not have state data and its change does not trigger the page refresh. You need to add the @State decorator to make it state data. The change of the @State decorator will cause re-rendering of the component where the decorator is located.
-
- ```
- @Entry
- @Component
- struct FoodCategoryList {
- private foodItems: FoodData[] = initializeOnStartup()
- @State private showList: boolean = false
-
- build() {
- Stack({ alignContent: Alignment.TopEnd }) {
- if (this.showList) {
- FoodList({ foodItems: this.foodItems })
- } else {
- FoodCategory({ foodItems: this.foodItems })
- }
- Image($r('app.media.Switch'))
- .height(24)
- .width(24)
- .margin({ top: 15, right: 10 })
- .onClick(() => {
- this.showList = !this.showList
- })
- }.height('100%')
- }
- }
-
- ```
-
- When you click the switch icon, the FoodList component is displayed. When you click the switch icon again, the FoodList component is hidden.
-
- 
-
-6. Create a tab to display all food categories (All). Create the
component and its child component TabContent in the FoodCategory component, and set tabBar to All. Set the width of the TabBars to 280 and the layout mode to Scrollable. This means that the TabBars can be scrolled when the total length exceeds 280. The component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a TabContent.
-
- ```
- @Component
- struct FoodCategory {
- private foodItems: FoodData[]
- build() {
- Stack() {
- Tabs() {
- TabContent() {}.tabBar('All')
- }
- .barWidth(280)
- .barMode(BarMode.Scrollable)
- }
- }
- }
- ```
-
- 
-
-7. Create the FoodGrid component to function as a child component of the TabContent component.
-
- ```
- @Component
- struct FoodGrid {
- private foodItems: FoodData[]
- build() {}
- }
-
- @Component
- struct FoodCategory {
- private foodItems: FoodData[]
- build() {
- Stack() {
- Tabs() {
- TabContent() {
- FoodGrid({ foodItems: this.foodItems })
- }.tabBar('All')
- }
- .barWidth(280)
- .barMode(BarMode.Scrollable)
- }
- }
- }
- ```
-
-8. Implement a 2 x 6 grid layout (12 food data resources in total). Create a Grid component, and set columnsTemplate to ('1fr 1fr'), rowsTemplate to ('1fr 1fr 1fr 1fr 1fr 1fr'), and both rowsGap and columnsGap to 8. Create a Scroll component so that it can be slid.
-
- ```
- @Component
- struct FoodGrid {
- private foodItems: FoodData[]
- build() {
- Scroll() {
- Grid() {
- ForEach(this.foodItems, (item: FoodData) => {
- GridItem() {}
- }, (item: FoodData) => item.id.toString())
- }
- .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
- .columnsTemplate('1fr 1fr')
- .columnsGap(8)
- .rowsGap(8)
- }
- .scrollBar(BarState.Off)
- .padding({left: 16, right: 16})
- }
- }
- ```
-
-9. Create a FoodGridItem component to display the food image, name, and calories and implement the UI layout. The FoodGridItem component is a child component of the GridItem component. The height of each FoodGridItem is 184, and the line spacing is 8. The total height of the Grid component is calculated as follows: (184 + 8) x 6 – 8 = 1144.
-
- ```
- @Component
- struct FoodGridItem {
- private foodItem: FoodData
- build() {
- Column() {
- Row() {
- Image(this.foodItem.image)
- .objectFit(ImageFit.Contain)
- .height(152)
- .width('100%')
- }.backgroundColor('#FFf1f3f5')
- Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
- Text(this.foodItem.name)
- .fontSize(14)
- .flexGrow(1)
- .padding({ left: 8 })
- Text(this.foodItem.calories + 'kcal')
- .fontSize(14)
- .margin({ right: 6 })
- }
- .height(32)
- .width('100%')
- .backgroundColor('#FFe5e5e5')
- }
- .height(184)
- .width('100%')
- }
- }
-
- @Component
- struct FoodGrid {
- private foodItems: FoodData[]
- build() {
- Scroll() {
- Grid() {
- ForEach(this.foodItems, (item: FoodData) => {
- GridItem() {
- FoodGridItem({foodItem: item})
- }
- }, (item: FoodData) => item.id.toString())
- }
- .rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')
- .columnsTemplate('1fr 1fr')
- .columnsGap(8)
- .rowsGap(8)
- .height(1144)
- }
- .scrollBar(BarState.Off)
- .padding({ left: 16, right: 16 })
- }
- }
- ```
-
- 
-
-10. Create the Category.Vegetable, Category.Fruit, Category.Nut, Category.SeaFood, and Category.Dessert tabs.
-
- ```
- @Component
- struct FoodCategory {
- private foodItems: FoodData[]
- build() {
- Stack() {
- Tabs() {
- TabContent() {
- FoodGrid({ foodItems: this.foodItems })
- }.tabBar('All')
-
- TabContent() {
- FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Vegetable)) })
- }.tabBar('Vegetable')
-
- TabContent() {
- FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Fruit)) })
- }.tabBar('Fruit')
-
- TabContent() {
- FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Nut)) })
- }.tabBar('Nut')
-
- TabContent() {
- FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Seafood)) })
- }.tabBar('Seafood')
-
- TabContent() {
- FoodGrid({ foodItems: this.foodItems.filter(item => (item.category === Category.Dessert)) })
- }.tabBar('Dessert')
- }
- .barWidth(280)
- .barMode(BarMode.Scrollable)
- }
- }
- }
- ```
-
-11. Set the number of rows and height of grids for different food categories. Because the number of foods varies according to the category, the ''1fr 1fr 1fr 1fr 1fr 1fr ' constant cannot be used to set the number of rows to 6.
- Create member variables gridRowTemplate and HeightValue, and set the number of grid rows and height by using these member variables.
-
-
- ```
- @Component
- struct FoodGrid {
- private foodItems: FoodData[]
- private gridRowTemplate : string = ''
- private heightValue: number
- build() {
- Scroll() {
- Grid() {
- ForEach(this.foodItems, (item: FoodData) => {
- GridItem() {
- FoodGridItem({foodItem: item})
- }
- }, (item: FoodData) => item.id.toString())
- }
- .rowsTemplate(this.gridRowTemplate)
- .columnsTemplate('1fr 1fr')
- .columnsGap(8)
- .rowsGap(8)
- .height(this.heightValue)
- }
- .scrollBar(BarState.Off)
- .padding({left: 16, right: 16})
- }
- }
- ```
-
- Invoke the aboutToAppear API to calculate the number of rows (gridRowTemplate) and height (heightValue).
-
-
- ```
- aboutToAppear() {
- var rows = Math.round(this.foodItems.length / 2);
- this.gridRowTemplate = '1fr '.repeat(rows);
- this.heightValue = rows * 192 - 8;
- }
- ```
-
- The custom component provides two lifecycle callbacks: aboutToAppear and aboutToDisappear. aboutToAppear is executed after the custom component is created and before the build method of the custom component is executed. aboutToDisappear is executed when the custom component is deinitialized.
-
- 
-
-
- ```
- @Component
- struct FoodGrid {
- private foodItems: FoodData[]
- private gridRowTemplate : string = ''
- private heightValue: number
-
- aboutToAppear() {
- var rows = Math.round(this.foodItems.length / 2);
- this.gridRowTemplate = '1fr '.repeat(rows);
- this.heightValue = rows * 192 - 8;
- }
-
- build() {
- Scroll() {
- Grid() {
- ForEach(this.foodItems, (item: FoodData) => {
- GridItem() {
- FoodGridItem({foodItem: item})
- }
- }, (item: FoodData) => item.id.toString())
- }
- .rowsTemplate(this.gridRowTemplate)
- .columnsTemplate('1fr 1fr')
- .columnsGap(8)
- .rowsGap(8)
- .height(this.heightValue)
- }
- .scrollBar(BarState.Off)
- .padding({left: 16, right: 16})
- }
- }
- ```
-
- 
diff --git a/en/application-dev/device/ui/ui-ts-building-category-list-layout.md b/en/application-dev/device/ui/ui-ts-building-category-list-layout.md
deleted file mode 100644
index 78c21c0a62c8c3d3d450867052c35168b62cbbc0..0000000000000000000000000000000000000000
--- a/en/application-dev/device/ui/ui-ts-building-category-list-layout.md
+++ /dev/null
@@ -1,261 +0,0 @@
-# Building a Food Category List Layout
-
-
-Use the List component and ForEach loop to build the food category list layout.
-
-
-1. Create a page file named FoodCategoryList.ets in the pages directory, rename the index.ets file FoodDetail.ets, and add the renamed file to the "pages" tag in the config.json file. The first page under the tag is the home page.
-
- ```
- "js": [
- {
- "pages": [
- "pages/FoodCategoryList",
- "pages/FoodDetail"
- ],
- ]
- ```
-
-2. Create a List component named FoodList as the page entry point. Then, add a ListItem component named FoodListItem as its child component. The List component is used to display data of the same type. Its child component is used to display specific items in the list.
-
- ```
- @Component
- struct FoodListItem {
- build() {}
- }
-
- @Entry
- @Component
- struct FoodList {
- build() {
- List() {
- ListItem() {
- FoodListItem()
- }
- }
- }
- }
- ```
-
-3. Import the FoodData class and initializeOnStartup method.
-
- ```
- import { FoodData } from '../model/FoodData'
- import { initializeOnStartup } from '../model/FoodDataModels'
- ```
-
-4. Configure the FoodList and FoodListItem components to pass values. Create a member variable named foodItems of the FoodData[] type in the FoodList component and invoke the initializeOnStartup method to assign a value to the variable. Create a member variable foodItem of the FoodData type in the FoodListItem component. Pass the foodItems[0] of the first element in the parent foodItems array as a parameter to FoodListItem.
-
- ```
- import { FoodData } from '../model/FoodData'
- import { initializeOnStartup } from '../model/FoodDataModels'
-
- @Component
- struct FoodListItem {
- private foodItem: FoodData
- build() {}
- }
-
- @Entry
- @Component
- struct FoodList {
- private foodItems: FoodData[] = initializeOnStartup()
- build() {
- List() {
- ListItem() {
- FoodListItem({ foodItem: this.foodItems[0] })
- }
- }
- }
- }
- ```
-
-5. Declare the UI layout of the FoodListItem child component. Create a Flex component, including the food image thumbnail, food name, and calories in the food.
-
- ```
- import { FoodData } from '../model/FoodData'
- import { initializeOnStartup } from '../model/FoodDataModels'
-
- @Component
- struct FoodListItem {
- private foodItem: FoodData
- build() {
- Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
- Image(this.foodItem.image)
- .objectFit(ImageFit.Contain)
- .height(40)
- .width(40)
- .backgroundColor('#FFf1f3f5')
- .margin({ right: 16 })
- Text(this.foodItem.name)
- .fontSize(14)
- .flexGrow(1)
- Text(this.foodItem.calories + ' kcal')
- .fontSize(14)
- }
- .height(64)
- .margin({ right: 24, left:32 })
- }
- }
-
- @Entry
- @Component
- struct FoodList {
- private foodItems: FoodData[] = initializeOnStartup()
- build() {
- List() {
- ListItem() {
- FoodListItem({ foodItem: this.foodItems[0] })
- }
- }
- }
- }
- ```
-
- 
-
-6. Create two FoodListItem objects. Create two FoodListItem objects in the List component and pass the first element this.foodItems[0] and the second element foodItem: this.foodItems[1] to the FoodListItem.
-
- ```
- import { FoodData } from '../model/FoodData'
- import { initializeOnStartup } from '../model/FoodDataModels'
-
- @Component
- struct FoodListItem {
- private foodItem: FoodData
- build() {
- Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
- Image(this.foodItem.image)
- .objectFit(ImageFit.Contain)
- .height(40)
- .width(40)
- .backgroundColor('#FFf1f3f5')
- .margin({ right: 16 })
- Text(this.foodItem.name)
- .fontSize(14)
- .flexGrow(1)
- Text(this.foodItem.calories + ' kcal')
- .fontSize(14)
- }
- .height(64)
- .margin({ right: 24, left:32 })
- }
- }
-
- @Entry
- @Component
- struct FoodList {
- private foodItems: FoodData[] = initializeOnStartup()
- build() {
- List() {
- ListItem() {
- FoodListItem({ foodItem: this.foodItems[0] })
- }
- ListItem() {
- FoodListItem({ foodItem: this.foodItems[1] })
- }
- }
- }
- }
- ```
-
- 
-
-7. Import ForEach so that you do not need to create FoodListItem objects one by one.
-
- ```
- ForEach(
- arr: any[], // Array to be iterated
- itemGenerator: (item: any) => void, // child component generator
- keyGenerator?: (item: any) => string // (optional) Unique key generator, which is recommended.
- )
- ```
-
- The ForEach group has three parameters. The first parameter is the array to be traversed, the second parameter is the lambda function for generating child components, and the third parameter is the key value generator. The third parameter is optional. Yet, for performance reasons, it is strongly recommended that you provide it. keyGenerator enables the development framework to better recognize array changes without having to rebuild all nodes after item changes.
-
- Traverse the foodItems array to cyclically create the ListItem component. Pass each item in foodItems as a parameter to the FoodListItem component.
-
-
- ```
- ForEach(this.foodItems, item => {
- ListItem() {
- FoodListItem({ foodItem: item })
- }
- }, item => item.id.toString())
- ```
-
- The code is as follows:
-
-
- ```
- import { FoodData } from '../model/FoodData'
- import { initializeOnStartup } from '../model/FoodDataModels'
-
- @Component
- struct FoodListItem {
- private foodItem: FoodData
- build() {
- Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
- Image(this.foodItem.image)
- .objectFit(ImageFit.Contain)
- .height(40)
- .width(40)
- .backgroundColor('#FFf1f3f5')
- .margin({ right: 16 })
- Text(this.foodItem.name)
- .fontSize(14)
- .flexGrow(1)
- Text(this.foodItem.calories + ' kcal')
- .fontSize(14)
- }
- .height(64)
- .margin({ right: 24, left:32 })
- }
- }
-
- @Entry
- @Component
- struct FoodList {
- private foodItems: FoodData[] = initializeOnStartup()
- build() {
- List() {
- ForEach(this.foodItems, item => {
- ListItem() {
- FoodListItem({ foodItem: item })
- }
- }, item => item.id.toString())
- }
- }
- }
- ```
-
-8. Add a title for the FoodList.
-
- ```
- @Entry
- @Component
- struct FoodList {
- private foodItems: FoodData[] = initializeOnStartup()
- build() {
- Column() {
- Flex({justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center}) {
- Text('Food List')
- .fontSize(20)
- .margin({ left:20 })
- }
- .height('7%')
- .backgroundColor('#FFf1f3f5')
- List() {
- ForEach(this.foodItems, item => {
- ListItem() {
- FoodListItem({ foodItem: item })
- }
- }, item => item.id.toString())
- }
- .height('93%')
- }
- }
- }
- ```
-
- 
diff --git a/en/application-dev/device/ui/ui-ts-building-data-model.md b/en/application-dev/device/ui/ui-ts-building-data-model.md
deleted file mode 100644
index 633fb0e94d63dc21ee993a87f768a0df5cd299ff..0000000000000000000000000000000000000000
--- a/en/application-dev/device/ui/ui-ts-building-data-model.md
+++ /dev/null
@@ -1,99 +0,0 @@
-# Building a Food Data Model
-
-
-On the created page, we use various items to describe food, such as food names, calories, proteins, fats, carbohydrates, and vitamin C. This form of coding is impractical in actual development. Therefore, you need to create food data models to store and manage data in a unified manner.
-
-
-
-
-
-1. Create a folder named model and create a file named FoodData.ets therein.
- 
-
-2. Define a food data storage model, FoodData, and an enum variable, Category. The FoodData class contains the food ID, name, category, image, calories, protein, fat, carbohydrates, and vitamin C attributes.
- The eTS programming language is an extension of the TS language and also supports the TS syntax.
-
-
- ```
- enum Category {
- Fruit,
- Vegetable,
- Nut,
- Seafood,
- Dessert
- }
-
- let NextId = 0;
- class FoodData {
- id: string;
- name: string;
- image: Resource;
- category: Category;
- calories: number;
- protein: number;
- fat: number;
- carbohydrates: number;
- vitaminC: number;
-
- constructor(name: string, image: Resource, category: Category, calories: number, protein: number, fat: number, carbohydrates: number, vitaminC: number) {
- this.id = `${ NextId++ }`;
- this.name = name;
- this.image = image;
- this.category = category;
- this.calories = calories;
- this.protein = protein;
- this.fat = fat;
- this.carbohydrates = carbohydrates;
- this.vitaminC = vitaminC;
- }
- }
- ```
-
-3. Store food image resources in the resources > phone > media directory. Use food names as the image names.
- 
-
-4. Create food resource data. Create FoodDataModels.ets in the model folder and declare a food composition array, FoodComposition on the page.
- In this example, 12 pieces of food data are used. You can customize more data resources when needed. Use LazyForEach to load data if a large amount of food data is involved. The following nutritional data is sourced from the Internet.
-
-
- ```
- const FoodComposition: any[] = [
- { 'name': 'Tomato', 'image': $r('app.media.Tomato'), 'category': Category.Vegetable, 'calories': 17, 'protein': 0.9, 'fat': 0.2, 'carbohydrates': 3.9, 'vitaminC': 17.8 },
- { 'name': 'Walnut', 'image': $r('app.media.Walnut'), 'category': Category.Nut, 'calories': 654 , 'protein': 15, 'fat': 65, 'carbohydrates': 14, 'vitaminC': 1.3 },
- { 'name': 'Cucumber', 'image': $r('app.media.Cucumber'), 'category': Category.Vegetable, 'calories': 30, 'protein': 3, 'fat': 0, 'carbohydrates': 1.9, 'vitaminC': 2.1 },
- { 'name': 'Blueberry', 'image': $r('app.media.Blueberry'), 'category': Category.Fruit, 'calories': 57, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 14, 'vitaminC': 9.7 },
- { 'name': 'Crab', 'image': $r('app.media.Crab'), 'category': Category.Seafood, 'calories': 97, 'protein': 19, 'fat': 1.5, 'carbohydrates': 0, 'vitaminC': 7.6 },
- { 'name': 'IceCream', 'image': $r('app.media.IceCream'), 'category': Category.Dessert, 'calories': 207, 'protein': 3.5, 'fat': 11, 'carbohydrates': 24, 'vitaminC': 0.6 },
- { 'name': 'Onion', 'image': $r('app.media.Onion'), 'category': Category.Vegetable, 'calories': 39, 'protein': 1.1, 'fat': 0.1, 'carbohydrates': 9, 'vitaminC': 7.4 },
- { 'name': 'Mushroom', 'image': $r('app.media.Mushroom'), 'category': Category.Vegetable, 'calories': 22, 'protein': 3.1, 'fat': 0.3, 'carbohydrates': 3.3, 'vitaminC': 2.1 },
- { 'name': 'Kiwi', 'image': $r('app.media.Kiwi'), 'category': Category.Fruit, 'calories': 60 , 'protein': 1.1, 'fat': 0.5, 'carbohydrates': 15, 'vitaminC': 20.5 },
- { 'name': 'Pitaya', 'image': $r('app.media.Pitaya'), 'category': Category.Fruit, 'calories': 60, 'protein': 1.2, 'fat': 0, 'carbohydrates': 10, 'vitaminC': 60.9 },
- { 'name': 'Avocado', 'image': $r('app.media.Avocado'), 'category': Category.Fruit, 'calories': 160, 'protein': 2, 'fat': 15, 'carbohydrates': 9, 'vitaminC': 10 },
- { 'name': 'Strawberry', 'image': $r('app.media.Strawberry'), 'category': Category.Fruit, 'calories': 32, 'protein': 0.7, 'fat': 0.3, 'carbohydrates': 8, 'vitaminC': 58.8 }
- ]
- ```
-
-5. Create the initializeOnStartUp method to initialize the FoodData array. Export the FoodData class from FoodData.ets, and import FoodData and Category in FoodDataModels.ets.
-
- ```
- // FoodData.ets
- export enum Category {
- ......
- }
- export class FoodData {
- ......
- }
- // FoodDataModels.ets
- import { Category, FoodData } from './FoodData'
-
- export function initializeOnStartup(): Array {
- let FoodDataArray: Array = []
- FoodComposition.forEach(item => {
- FoodDataArray.push(new FoodData(item.name, item.image, item.category, item.calories, item.protein, item.fat, item.carbohydrates, item.vitaminC ));
- })
- return FoodDataArray;
- }
- ```
-
-
-The data resources for the diet application are now ready. You can continue to create a food category list by loading the data.
diff --git a/en/application-dev/device/ui/ui-ts-components-web.md b/en/application-dev/device/ui/ui-ts-components-web.md
deleted file mode 100644
index c1a6363dfd7588d4ad9854539b1d8d54f47ef8c1..0000000000000000000000000000000000000000
--- a/en/application-dev/device/ui/ui-ts-components-web.md
+++ /dev/null
@@ -1,195 +0,0 @@
-# Web
-
-The \ component can be used to display web pages. For details, see [Web API](../reference/arkui-ts/ts-basic-components-web.md).
-
-## Creating a Component
-
-Create a \ component in the .ets file under main/ets/MainAbility/pages. Then, in the created component, use src to specify the web page URI to be referenced, and bind a controller to the component to call the component APIs.
-
- ```
- // xxx.ets
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController();
- build() {
- Column() {
- Web({ src: 'https://www.example.com', controller: this.controller })
- }
- }
- }
- ```
-
-## Setting Styles and Attributes
-
-When using the \ component, you need to specify the styles and attributes. The sample code is as follows.
-
-```
-// xxx.ets
-@Entry
-@Component
-struct WebComponent {
- fileAccess: boolean = true;
- controller: WebController = new WebController();
- build() {
- Column() {
- Text('Hello world!')
- .fontSize(20)
- Web({ src: 'https://www.example.com', controller: this.controller })
- // Set the height and padding.
- .height(500)
- .padding(20)
- // Set the file access permission and script execution permission.
- .fileAccess(this.fileAccess)
- .javaScriptAccess(true)
- Text('End')
- .fontSize(20)
- }
- }
-}
-```
-## Adding Events and Methods
-
-Add the onProgressChange event for the \ component, which is triggered when the loading progress changes and returns the progress value in its callback. Assign the progress value to the \ component to control the status of the component. When the progress reaches 100%, the \ component is hidden, and the web page loading is complete.
-
-```
-// xxx.ets
-@Entry
-@Component
-struct WebComponent {
- @State progress: number = 0;
- @State hideProgress: boolean = true;
- fileAccess: boolean = true;
- controller: WebController = new WebController();
- build() {
- Column() {
- Text('Hello world!')
- .fontSize(20)
- Progress({value: this.progress, total: 100})
- .color('#0000ff')
- .visibility(this.hideProgress ? Visibility.None : Visibility.Visible)
- Web({ src: 'https://www.example.com', controller: this.controller })
- .fileAccess(this.fileAccess)
- .javaScriptAccess(true)
- .height(500)
- .padding(20)
- // Add an onProgressChange event.
- .onProgressChange(e => {
- this.progress = e.newProgress;
- // When the progress reaches 100%, the progress bar disappears.
- if (this.progress === 100) {
- this.hideProgress = true;
- } else {
- this.hideProgress = false;
- }
- })
- Text('End')
- .fontSize(20)
- }
- }
-}
-```
-Add the runJavaScript method to the onPageEnd event. The onPageEnd event is triggered when the web page finishes loading. In this case, the runJavaScript method can be used to execute JavaScript scripts in the HTML file. In the sample code below, when the web page finishes loading, the onPageEnd event is triggered to call the test method in the HTML file and print information on the console.
-
-```
-// xxx.ets
-@Entry
-@Component
-struct WebComponent {
- @State progress: number = 0;
- @State hideProgress: boolean = true;
- fileAccess: boolean = true;
- // Define the controller for the \ component.
- controller: WebController = new WebController();
- build() {
- Column() {
- Text('Hello world!')
- .fontSize(20)
- Progress({value: this.progress, total: 100})
- .color('#0000ff')
- .visibility(this.hideProgress ? Visibility.None : Visibility.Visible)
- // Initialize the \ component and bind it to the controller.
- Web({ src: $rawfile('index.html'), controller: this.controller })
- .fileAccess(this.fileAccess)
- .javaScriptAccess(true)
- .height(500)
- .padding(20)
- .onProgressChange(e => {
- this.progress = e.newProgress;
- if (this.progress === 100) {
- this.hideProgress = true;
- } else {
- this.hideProgress = false;
- }
- })
- .onPageEnd(e => {
- // test() is defined in index.html.
- this.controller.runJavaScript({ script: 'test()' });
- console.info('url: ', e.url);
- })
- Text('End')
- .fontSize(20)
- }
- }
-}
-```
-
-Create an HTML file in main/resources/rawfile.
-
-```
-
-
-
- component where videos can be played dynamically. Embed a video resource into an HTML page, and then use the \ component controller to invoke the onActive and onInactive methods to activate and pause page rendering, respectively. When the page is hidden, the \ component stops rendering and the video playback pauses. When the page is displayed, the \ component is activated and the video playback resumes.
-
- ```
- // xxx.ets
- @Entry
- @Component
- struct WebComponent {
- controller: WebController = new WebController();
- build() {
- Column() {
- Web({ src: $rawfile('index.html'), controller: this.controller })
- .fileAccess(true)
- }
- }
-
- onPageHide() {
- // Invoked when the page is hidden.
- this.controller.onInactive();
- }
-
- onPageShow() {
- // Invoked when the page is displayed.
- this.controller.onActive();
- }
- }
- ```
-
- ```
-
-
-
-
-
-
-
-
-
- ```
diff --git a/en/application-dev/device/ui/ui-ts-components.md b/en/application-dev/device/ui/ui-ts-components.md
deleted file mode 100644
index c6676800713d25a34656222a9704746c15a13737..0000000000000000000000000000000000000000
--- a/en/application-dev/device/ui/ui-ts-components.md
+++ /dev/null
@@ -1,82 +0,0 @@
-# Getting to Know Components
-
-
-Before customizing a component, get to know what the [component and decorator](#components-and-decorators) are and initialize the component. Then, [modify the component attributes and constructor parameters](#modifying-component-attributes-and-constructor-parameters) to customize a component.
-
-
-## Components and Decorators
-
-In a declarative UI, all pages are composed of components. The data structure of the component is struct, and the decorator [@Component](ts-component-based-component.md) is the component-based flag. The struct decorated by @Component indicates that the struct has the component capability.
-
-The method for declaring a custom component is as follows:
-
-
-```
-@Component
-struct MyComponent {}
-```
-
-In an IDE project template, MyComponent is a custom component that can display text in the center. You can describe your UI structures in the build method of the component, by complying with the API constraints of the Builder.
-
-
-```
-interface Builder {
- build: () => void
-}
-```
-
-The component decorated by [@Entry](ts-component-based-entry.md) indicates that the component is the main entry of the page and can also be considered as the root node of the page. **NOTE** that a page must have one and only one @Entry. Only the @Entry decorated component and its child components are displayed on the page.
-
-@Component and @Entry are basic and important decorators. To put it simply, a decorator assigns a capability to an object to be decorated. For example, @Entry assigns the capability of the page entry, and @Component assigns the component capability.
-
-With a basic knowledge of the component and decorator, you are ready to develop a diet application.
-
-
-## Modifying Component Attributes and Constructor Parameters
-
-When you create a system component, the default style is used. You can change the display of the component by changing its attributes and styles.
-
-1. Modify the fontSize attribute of the component to change the font size of the component. In this example, the font size is set to 26 and font weight 500. Two configuration methods are available for setting the font weight:
- 1. The value of the number type ranges from 100 to 900. The default value is 400. A larger value indicates a thicker font.
- 2. fontWeight is a built-in enumeration type. Its value can be Lighter, Normal, Bold, or Bolder.
-
- The attribute method must follow the component and be connected by the operator ".". You can also configure multiple attributes of the component in method chaining mode.
-
-
- ```
- @Entry
- @Component
- struct MyComponent {
- build() {
- Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
- Text('Hello World')
- .fontSize(26)
- .fontWeight(500)
- }
- .width('100%')
- .height('100%')
- }
- }
- ```
-
- 
-
-2. Change the display content of the component from Hello World to Tomato by modifying the constructor parameters of the component.
-
- ```
- @Entry
- @Component
- struct MyComponent {
- build() {
- Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
- Text('Tomato')
- .fontSize(26)
- .fontWeight(500)
- }
- .width('100%')
- .height('100%')
- }
- }
- ```
-
- 
diff --git a/en/application-dev/device/ui/ui-ts-creating-project.md b/en/application-dev/device/ui/ui-ts-creating-project.md
deleted file mode 100644
index 23bd070dff61aa90e7c29e51ef44fe7b5c85f389..0000000000000000000000000000000000000000
--- a/en/application-dev/device/ui/ui-ts-creating-project.md
+++ /dev/null
@@ -1,69 +0,0 @@
-# Creating a Declarative UI Project
-
-
-Before creating a project, you need to install DevEco Studio.
-
-
-1. Open DevEco Studio and click Create Project. If there is already a project, choose File > New > New project.
- 
-
-2.
-
-
- On the page for selecting an ability template, select [Standard]Empty Ability.
-
- 
-
-3.
- Install the OpenHarmony SDK.
-
- 
-
-4. On the project configuration page, set Project Name to HealthyDiet, Project Type to Application, Device Type to Phone, Language to eTS, and Compatible API Version to SDK: API Version 7. By default, DevEco Studio saves the project to drive C. You can change the save path by setting Save Location. When you are done, click Finish.
-
-
- 
-
-5. After the project is created, open the app.ets file.
- The app.ets file provides the onCreate and onDestroy methods for the application lifecycle. onCreate is called when an application is created, and onDestroy is called when an application is destroyed. Global variables can be declared in the app.ets file, wherein the declared data and methods are shared by the entire application.
-
- ```
- export default {
- onCreate() {
- console.info('Application onCreate')
- },
- onDestroy() {
- console.info('Application onDestroy')
- },
- }
- ```
-
-6. In the project navigation tree, open index.ets. This page displays the current UI description. The declarative UI framework automatically generates a component-based struct, which complies with the Builder API declaration. The current layout and components are declared in the build method.
-
- ```
- @Entry
- @Component
- struct MyComponent {
- build() {
- Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
- Text('Hello World')
- .fontSize(50)
- .fontWeight(FontWeight.Bold)
- }
- .width('100%')
- .height('100%')
- }
- }
- ```
-
-7. Click Previewer on the right to open the Previewer window. In the Previewer window of the phone type, Hello World is displayed in the middle and in bold.
- If the Previewer button is unavailable, choose Settings > SDK Manager >OpenHarmony SDK > Tools to check whether the Previewer is installed.
-
- 
-
-8. Install the application on the phone and run the application. Connect the phone to the computer. After the IDE identifies the phone, click Run'entry'.
- 
-
- Before the installation, you must configure an application signature. For details, see [Configuring the OpenHarmony App Signature](../quick-start/configuring-the-openharmony-app-signature.md). After the installation is complete, click the Run icon on the screen to open the application. Hello World is displayed in the center of the screen.
-
- 
diff --git a/en/application-dev/device/ui/ui-ts-creating-simple-page.md b/en/application-dev/device/ui/ui-ts-creating-simple-page.md
deleted file mode 100644
index c4edd001c5d1a15479d0e535d7838d0a20fe562c..0000000000000000000000000000000000000000
--- a/en/application-dev/device/ui/ui-ts-creating-simple-page.md
+++ /dev/null
@@ -1,558 +0,0 @@
-# Creating a Simple Page
-
-
-In this section, we will develop an infographic food details page, by building custom components through the container components <Stack> and <Flex> as well as basic components <Image> and <Text>.
-
-
-## Building the Stack Layout
-
-1. Create a food name.
- Delete the code of the build method in the project template, create a <Stack> component, and place the <Text> component in the braces of the <Stack> component so that the <Text> component becomes a child component of the <Stack> component. A <Stack> component consists of one or more child components. The latter child component overwrites the former one.
-
- ```
- @Entry
- @Component
- struct MyComponent {
- build() {
- Stack() {
- Text('Tomato')
- .fontSize(26)
- .fontWeight(500)
- }
- }
- }
- ```
-
- 
-
-2. Display food pictures.
- Create an <Image> component and specify a URL for it. The <Image> and <Text> components are mandatory. To display the <Text> component above the <Image> component, you need to declare the <Image> component first. Image resources are stored in the rawfile folder in resources. When referencing the resources in the rawfile folder, use the $rawfile('_filename_ loaded) format, where filename indicates the relative path of the file in the rawfile folder. Currently, $rawfile only allows the <Image> component to reference image resources.
-
- ```
- @Entry
- @Component
- struct MyComponent {
- build() {
- Stack() {
- Image($rawfile('Tomato.png'))
- Text('Tomato')
- .fontSize(26)
- .fontWeight(500)
- }
- }
- }
- ```
-
- 
-
-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, set Resource Type to Media (image resource), and set the resource qualifier to Device-Phone (currently, phones are used).
-
- 
-
- Click OK. The phone.media folder is generated in the resources folder. Place Tomato.png in the folder.
-
- 
-
- You can then can reference the application resource in the $r('app.type.name') format, that is, $r('app.media.Tomato').
-
-
- ```
- @Entry
- @Component
- struct MyComponent {
- build() {
- Stack() {
- 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.
- If the image fills the entire screen, the possible causes are as follows:
- 1. The width and height of the image are not set.
-
- 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.
-
-
- ```
- @Entry
- @Component
- struct MyComponent {
- build() {
- Stack() {
- Image($r('app.media.Tomato'))
- .objectFit(ImageFit.Contain)
- .height(357)
- Text('Tomato')
- .fontSize(26)
- .fontWeight(500)
- }
- }
- }
- ```
-
- 
-
-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
- @Component
- struct MyComponent {
- build() {
- Stack({ alignContent: Alignment.BottomStart }) {
- Image($r('app.media.Tomato'))
- .objectFit(ImageFit.Contain)
- .height(357)
- Text('Tomato')
- .fontSize(26)
- .fontWeight(500)
- }
- }
- }
- ```
-
- 
-
-6. You can change the background color of the food image by setting the background color of the stack. You can set the background color in either of the following ways:
- 1. By using the 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. By using the parameter of the string type. The supported color formats are rgb, rgba, and HEX. For example, you can set the background color to blue by setting backgroundColor(??\#0000FF??) and set the background color to white by setting backgroundColor(??rgb(255, 255, 255)??).
-
-
- ```
- @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')
- }
- }
- ```
-
- 
-
-7. Adjust the left and bottom margin of the <Text> component. Margin is a shorthand attribute. You can specify the margins of the four edges in a unified manner or separately. The configuration method is as follows:
- 1. When the parameter is set to Length, the outer margins of the four edges are specified. For example, margin(20) indicates that the outer margins of the top, right, bottom, and left edges are all 20.
- 2. {top?: Length, right?: Length, bottom?: Length, left?:Length} specifies the margins of the four edges. For example, margin({ left: 26, bottom: 17.4 }) indicates that the left margin is 26 and the bottom margin is 17.4.
-
-
- ```
- @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)
- .margin({left: 26, bottom: 17.4})
- }
- .backgroundColor('#FFedf2f5')
- }
- }
- ```
-
- 
-
-8. Adjust the structure between components and semanticize component names. Create the FoodDetail page entry component, create a column 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.
- A column is a container component whose child components are vertically arranged. It is a linear layout in essence. Therefore, only the alignment in the cross axis direction can be set.
-
-
- ```
- @Component
- struct FoodImageDisplay {
- build() {
- Stack({ alignContent: Alignment.BottomStart }) {
- Image($r('app.media.Tomato'))
- .objectFit(ImageFit.Contain)
- Text('Tomato')
- .fontSize(26)
- .fontWeight(500)
- .margin({ left: 26, bottom: 17.4 })
- }
- .height(357)
- .backgroundColor('#FFedf2f5')
- }
- }
-
- @Entry
- @Component
- struct FoodDetail {
- build() {
- Column() {
- FoodImageDisplay()
- }
- .alignItems(HorizontalAlign.Center)
- }
- }
- ```
-
-
-## Building the Flex Layout
-
-You can use the Flex layout to build a food composition table. In this way you do not need to worry about the width and height calculation. The size of different cells can be flexibly set based on the proportion.
-
-1. Create a ContentTable component as a child component of the FoodDetail component.
-
- ```
- @Component
- struct FoodImageDisplay {
- build() {
- Stack({ alignContent: Alignment.BottomStart }) {
- Image($r('app.media.Tomato'))
- .objectFit(ImageFit.Contain)
- .height(357)
- Text('Tomato')
- .fontSize(26)
- .fontWeight(500)
- .margin({ left: 26, bottom: 17.4 })
- }
- .backgroundColor('#FFedf2f5')
- }
- }
-
- @Component
- struct ContentTable {
- build() {}
- }
-
- @Entry
- @Component
- struct FoodDetail {
- build() {
- Column() {
- FoodImageDisplay()
- ContentTable()
- }
- .alignItems(HorizontalAlign.Center)
- }
- }
- ```
-
-2. Create a Flex 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 Flex component and set its height to 280, and the top, right, and left margins to 30. The Flex component contains three Text 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
- struct ContentTable {
- build() {
- Flex() {
- Text('Calories')
- .fontSize(17.4)
- .fontWeight(FontWeight.Bold)
- Text('Calories')
- .fontSize(17.4)
- Text('17kcal')
- .fontSize(17.4)
- }
- .height(280)
- .padding({ top: 30, right: 30, left: 30 })
- }
- }
-
- @Entry
- @Component
- struct FoodDetail {
- build() {
- Column() {
- FoodImageDisplay()
- ContentTable()
- }
- .alignItems(HorizontalAlign.Center)
- }
- }
- ```
-
- 
-
-3. Adjust the layout and set the proportion (layoutWeight) of each part. Set the proportion of the category name to 1, and the total proportion of 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
- struct FoodImageDisplay {
- build() {
- Stack({ alignContent: Alignment.BottomStart }) {
- Image($m('Tomato.png'))
- .objectFit(ImageFit.Contain)
- .height(357)
- Text('Tomato')
- .fontSize(26)
- .fontWeight(500)
- .margin({ left: 26, bottom: 17.4 })
- }
- .backgroundColor('#FFedf2f5')
- }
- }
-
- @Component
- struct ContentTable {
- build() {
- Flex() {
- Text('Calories')
- .fontSize(17.4)
- .fontWeight(FontWeight.Bold)
- .layoutWeight(1)
- Flex() {
- Text('Calories')
- .fontSize(17.4)
- .flexGrow(1)
- Text('17kcal')
- .fontSize(17.4)
- }
- .layoutWeight(2)
- }
- .height(280)
- .padding({ top: 30, right: 30, left: 30 })
- }
- }
-
- @Entry
- @Component
- struct FoodDetail {
- build() {
- Column() {
- FoodImageDisplay()
- ContentTable()
- }
- .alignItems(HorizontalAlign.Center)
- }
- }
- ```
-
- 
-
-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
- struct ContentTable {
- build() {
- Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
- Flex() {
- Text('Calories')
- .fontSize(17.4)
- .fontWeight(FontWeight.Bold)
- .layoutWeight(1)
- Flex() {
- Text('Calories')
- .fontSize(17.4)
- .flexGrow(1)
- Text('17kcal')
- .fontSize(17.4)
- }
- .layoutWeight(2)
- }
- Flex() {
- Text('Nutrition')
- .fontSize(17.4)
- .fontWeight(FontWeight.Bold)
- .layoutWeight(1)
- Flex() {
- Text('Protein')
- .fontSize(17.4)
- .flexGrow(1)
- Text('0.9g')
- .fontSize(17.4)
- }
- .layoutWeight(2)
- }
- Flex() {
- Text(' ')
- .fontSize(17.4)
- .fontWeight(FontWeight.Bold)
- .layoutWeight(1)
- Flex() {
- Text('Fat')
- .fontSize(17.4)
- .flexGrow(1)
- Text('0.2g')
- .fontSize(17.4)
- }
- .layoutWeight(2)
- }
- Flex() {
- Text(' ')
- .fontSize(17.4)
- .fontWeight(FontWeight.Bold)
- .layoutWeight(1)
- Flex() {
- Text('Carbohydrates')
- .fontSize(17.4)
- .flexGrow(1)
- Text('3.9g')
- .fontSize(17.4)
- }
- .layoutWeight(2)
- }
- Flex() {
- Text(' ')
- .fontSize(17.4)
- .fontWeight(FontWeight.Bold)
- .layoutWeight(1)
- Flex() {
- Text('vitaminC')
- .fontSize(17.4)
- .flexGrow(1)
- Text('17.8mg')
- .fontSize(17.4)
- }
- .layoutWeight(2)
- }
- }
- .height(280)
- .padding({ top: 30, right: 30, left: 30 })
- }
- }
-
- @Entry
- @Component
- struct FoodDetail {
- build() {
- Column() {
- FoodImageDisplay()
- ContentTable()
- }
- .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.
- 
-
- 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 eTS 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
- struct ContentTable {
- @Builder IngredientItem(title:string, name: string, value: string) {
- Flex() {
- Text(title)
- .fontSize(17.4)
- .fontWeight(FontWeight.Bold)
- .layoutWeight(1)
- Flex({ alignItems: ItemAlign.Center }) {
- Circle({width: 6, height: 6})
- .margin({right: 12})
- .fill(colorValue)
- Text(name)
- .fontSize(17.4)
- .flexGrow(1)
- Text(value)
- .fontSize(17.4)
- }
- .layoutWeight(2)
- }
- }
- }
- ```
-
- 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
- struct ContentTable {
- ......
- 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 })
- }
- }
- ```
-
- The overall code of the ContentTable component is as follows:
-
-
- ```
- @Component
- struct ContentTable {
- @Builder IngredientItem(title:string, name: string, value: string) {
- Flex() {
- Text(title)
- .fontSize(17.4)
- .fontWeight(FontWeight.Bold)
- .layoutWeight(1)
- Flex() {
- Text(name)
- .fontSize(17.4)
- .flexGrow(1)
- Text(value)
- .fontSize(17.4)
- }
- .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 })
- }
- }
-
- @Entry
- @Component
- struct FoodDetail {
- build() {
- Column() {
- FoodImageDisplay()
- ContentTable()
- }
- .alignItems(HorizontalAlign.Center)
- }
- }
- ```
-
- 
-
-You've learned how to build a simple food details page. Read on to learn how to define the page layout and connection.
-
-## Samples
-
-The following sample is provided to help you better understand how to use build a simple page:
-
-- [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSBuildCommonView)
-
- This sample shows how to build a common view to display the picture of tomatoes and nutrition information, with the stack layout and flex layout.
diff --git a/en/application-dev/device/ui/ui-ts-overview.md b/en/application-dev/device/ui/ui-ts-overview.md
deleted file mode 100644
index bb34ef82c1acff6cbbb552461d07f6021dcc3e61..0000000000000000000000000000000000000000
--- a/en/application-dev/device/ui/ui-ts-overview.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# Overview
-
-
-The TypeScript-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.
-
-
-- 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
- 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 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
- Development has never been so easy, with a diverse array of encapsulated system capability APIs, from UI design to system capability invoking.
-
-
-## Overall Architecture
-
-
-
-
-
-- 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.
diff --git a/en/application-dev/device/ui/ui-ts-page-redirection-data-transmission.md b/en/application-dev/device/ui/ui-ts-page-redirection-data-transmission.md
deleted file mode 100644
index 575b56f4091b96d56c17146ad32d8aa75a94a3de..0000000000000000000000000000000000000000
--- a/en/application-dev/device/ui/ui-ts-page-redirection-data-transmission.md
+++ /dev/null
@@ -1,282 +0,0 @@
-# Implementing Page Redirection and Data Transmission
-
-
-This section describes how to implement page redirection and data transmission between pages:
-
-
-1. Page redirection: Click a food item on the food list page to go to the food details page. Click the back button on the food details page to go back to the food list page.
-
-2. Data transmission between pages: After you click a food item, FoodDetail receives data from the previous page and renders the corresponding food details page.
-
-
-## Page Redirection
-
-The declarative UI paradigm provides two mechanisms for page redirection:
-
-1. Navigator: encapsulates the page routing capability. After the page target is specified, all child components in the page target have the routing capability.
-
-2. Router APIs: called to implement various operations of page routing. You'll need to import router before calling the router APIs.
-
-The procedure below uses these two mechanisms for redirection between the page list page and food details page.
-
-1. Click FoodListItem. The FoodDetail page is displayed. Create a Navigator component in FoodListItem to enable its child components to have the routing function. The target page is 'pages/FoodDetail'.
-
- ```
- @Component
- struct FoodListItem {
- private foodItem: FoodData
- build() {
- Navigator({ target: 'pages/FoodDetail' }) {
- Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
- Image(this.foodItem.image)
- .objectFit(ImageFit.Contain)
- .height(40)
- .width(40)
- .backgroundColor('#FFf1f3f5')
- .margin({ right: 16 })
- Text(this.foodItem.name)
- .fontSize(14)
- .flexGrow(1)
- Text(this.foodItem.calories + ' kcal')
- .fontSize(14)
- }
- .height(64)
- }
- .margin({ right: 24, left:32 })
- }
- }
- ```
-
- 
-
-2. Click FoodGridItem. The FoodDetail page is displayed. Import the router module, and then call the push API of this module to push the FoodDetail page to the route stack to implement page redirection.
-
- ```
- import router from '@system.router'
-
- @Component
- struct FoodGridItem {
- private foodItem: FoodData
- build() {
- Column() {
- ......
- }
- .height(184)
- .width('100%')
- .onClick(() => {
- router.push({ uri: 'pages/FoodDetail' })
- })
- }
- }
- ```
-
- 
-
-3. Add the icon for returning from the FoodDetail page to the food list page. Save the Back.png file to the resources > phone > media directory. Create a custom component PageTitle, which contains the back icon and Food Detail text. Call the router.back() API of the router to display the top page of the route stack, that is, the upper-level page.
-
- ```
- // FoodDetail.ets
- import router from '@system.router'
-
- @Component
- struct PageTitle {
- build() {
- Flex({ alignItems: ItemAlign.Start }) {
- Image($r('app.media.Back'))
- .width(21.8)
- .height(19.6)
- Text('Food Detail')
- .fontSize(21.8)
- .margin({left: 17.4})
- }
- .height(61)
- .backgroundColor('#FFedf2f5')
- .padding({ top: 13, bottom: 15, left: 28.3 })
- .onClick(() => {
- router.back()
- })
- }
- }
- ```
-
-4. Create the Stack component in the FoodDetail component, including the FoodImageDisplay and PageTitle child components. Set the alignment mode to TopStart.
-
- ```
- @Entry
- @Component
- struct FoodDetail {
- build() {
- Column() {
- Stack( { alignContent: Alignment.TopStart }) {
- FoodImageDisplay()
- PageTitle()
- }
- ContentTable()
- }
- .alignItems(HorizontalAlign.Center)
- }
- }
- ```
-
- 
-
-
-## Data Transmission Between Pages
-
-We have implemented the redirection and going back of the FoodCategoryList and FoodDetail pages. At this point, the tomato details page is displayed no matter which FoodListItem/FoodGridItem is clicked. This is because the data transmission between pages is not yet configured. To configure data transmission between pages, set the routing with parameters as follows:
-
-1. Set the params attribute in the Navigator of the FoodListItem component. The params attribute accepts the key-value object.
-
- ```
- // FoodList.ets
- @Component
- struct FoodListItem {
- private foodItem: FoodData
- build() {
- Navigator({ target: 'pages/FoodDetail' }) {
- ......
- }
- .params({ foodData: this.foodItem })
- }
- }
- ```
-
- The router API called by FoodGridItem also has the capability of redirection with parameters. The method of using the router API is similar to that of using the Navigator.
-
-
- ```
- router.push({
- uri: 'pages/FoodDetail',
- params: { foodData: this.foodItem }
- })
- ```
-
-2. Import the FoodData class to the FoodDetail page and add the foodItem member variable to the FoodDetail component.
-
- ```
- // FoodDetail.ets
- import { FoodData } from '../model/FoodData'
-
- @Entry
- @Component
- struct FoodDetail {
- private foodItem: FoodData
- build() {
- ......
- }
- }
- ```
-
-3. Obtain the value of foodData. Call router.getParams().foodData to obtain the data corresponding to foodData carried when the FoodCategoryList page is displayed.
-
- ```
- @Entry
- @Component
- struct FoodDetail {
- private foodItem: FoodData = router.getParams().foodData
-
- build() {
- ......
- }
- }
- ```
-
-4. Re-build the components on the FoodDetail page. During building, the food information on the FoodDetail page is all directly declared constants. You need to use the passed FoodData data to assign a new value to the constants. The code is as follows:
-
- ```
- @Component
- struct PageTitle {
- build() {
- Flex({ alignItems: ItemAlign.Start }) {
- Image($r('app.media.Back'))
- .width(21.8)
- .height(19.6)
- Text('Food Detail')
- .fontSize(21.8)
- .margin({left: 17.4})
- }
- .height(61)
- .backgroundColor('#FFedf2f5')
- .padding({ top: 13, bottom: 15, left: 28.3 })
- .onClick(() => {
- router.back()
- })
- }
- }
-
- @Component
- struct FoodImageDisplay {
- private foodItem: FoodData
- build() {
- Stack({ alignContent: Alignment.BottomStart }) {
- Image(this.foodItem.image)
- .objectFit(ImageFit.Contain)
- Text(this.foodItem.name)
- .fontSize(26)
- .fontWeight(500)
- .margin({ left: 26, bottom: 17.4 })
- }
- .height(357)
- .backgroundColor('#FFedf2f5')
- }
- }
-
- @Component
- struct ContentTable {
- private foodItem: FoodData
-
- @Builder IngredientItem(title:string, name: string, value: string) {
- Flex() {
- Text(title)
- .fontSize(17.4)
- .fontWeight(FontWeight.Bold)
- .layoutWeight(1)
- Flex() {
- Text(name)
- .fontSize(17.4)
- .flexGrow(1)
- Text(value)
- .fontSize(17.4)
- }
- .layoutWeight(2)
- }
- }
-
- build() {
- Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Start }) {
- this.IngredientItem('Calories', 'Calories', this.foodItem.calories + 'kcal')
- this.IngredientItem('Nutrition', 'Protein', this.foodItem.protein + 'g')
- this.IngredientItem('', 'Fat', this.foodItem.fat + 'g')
- this.IngredientItem('', 'Carbohydrates', this.foodItem.carbohydrates + 'g')
- this.IngredientItem('', 'VitaminC', this.foodItem.vitaminC + 'mg')
- }
- .height(280)
- .padding({ top: 30, right: 30, left: 30 })
- }
- }
-
- @Entry
- @Component
- struct FoodDetail {
- private foodItem: FoodData = router.getParams().foodData
-
- build() {
- Column() {
- Stack( { alignContent: Alignment.TopStart }) {
- FoodImageDisplay({ foodItem: this.foodItem })
- PageTitle()
- }
- ContentTable({ foodItem: this.foodItem })
- }
- .alignItems(HorizontalAlign.Center)
- }
- }
- ```
-
-## Samples
-
-The following sample is provided to help you better understand how to define the page layout and connection:
-
-- [eTSDefiningPageLayoutAndConnection](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSDefiningPageLayoutAndConnection)
-
- This sample exemplifies the basic usage of the list layout, grid layout, and page routing, by building the food list page and food details page.
diff --git a/en/application-dev/device/vibrator-guidelines.md b/en/application-dev/device/vibrator-guidelines.md
new file mode 100644
index 0000000000000000000000000000000000000000..88bdeb6884eee52e1591993ec60099d31eb77e3c
--- /dev/null
+++ b/en/application-dev/device/vibrator-guidelines.md
@@ -0,0 +1,84 @@
+# Vibrator Development
+
+
+## When to Use
+
+You can set different vibration effects as needed, for example, customizing vibration effects with different intensities and durations for buttons on the device, and customizing one-shot or periodic vibration effects with different intensities and durations for alarm clocks and incoming calls.
+
+
+## Available APIs
+
+ | Module | API | Description |
+| -------- | -------- | -------- |
+| ohos.vibrator | vibrate(duration: number): Promise<void> | Triggers vibration with the specified duration. This API uses a promise to return the result. |
+| ohos.vibrator | vibrate(duration: number, callback?: AsyncCallback<void>): void | Triggers vibration with the specified duration. This API uses a callback to return the result. |
+| ohos.vibrator | vibrate(effectId: EffectId): Promise<void> | Triggers vibration with the specified effect. This API uses a promise to return the result. |
+| ohos.vibrator | vibrate(effectId: EffectId, callback?: AsyncCallback<void>): void | Triggers vibration with the specified effect. This API uses a callback to return the result. |
+| ohos.vibrator | stop(stopMode: VibratorStopMode): Promise<void> | Stops vibration. This API uses a promise to return the result. |
+| ohos.vibrator | stop(stopMode: VibratorStopMode, callback?: AsyncCallback<void>): void | Stops vibration. This API uses a callback to return the result. |
+
+
+## How to Develop
+
+1. Declare the permissions required for controlling vibrators on the hardware device in the **config.json** file.
+
+ ```
+ "reqPermissions":[
+ {
+ "name":"ohos.permission.ACCELEROMETER",
+ "reason"":"",
+ "usedScene":{
+ "ability""[
+ ".MainAbility"
+ ],
+ "when":"inuse"
+ }
+ },
+ {
+ "name":"ohos.permission.VIBRATE",
+ "reason"":"",
+ "usedScene":{
+ "ability""[
+ ".MainAbility"
+ ],
+ "when":"inuse"
+ }
+ },
+ {
+ "name":"ohos.permission.ACTIVITY_MOTION",
+ "reason"":"",
+ "usedScene":{
+ "ability""[
+ ".MainAbility"
+ ],
+ "when":"inuse"
+ }
+ },
+ ]
+ ```
+
+2. Trigger the device to vibrate.
+
+ ```
+ import vibrator from "@ohos.vibrator"
+ vibrator.vibrate(duration: number).then((error)=>{
+ if(error){// The call fails, and error.code and error.message are printed.
+ console.log("Promise return failed.error.code"+error.code+"error.message"+error.message);
+ }else{// The call succeeded. The device starts to vibrate.
+ console.log("Promise returned to indicate a successful vibration.")
+ };
+ })
+ ```
+
+3. Stop the vibration.
+
+ ```
+ import vibrator from "@ohos.vibrator"
+ vibrator.stop(stopMode: VibratorStopMode).then((error)=>{
+ if(error){// The call fails, and error.code and error.message are printed.
+ console.log("Promise return failed. error.code"+error.code+"error.message"+error.message);
+ }else{// The call succeeded. The device stops vibration.
+ Console.log("Promise returned to indicate a successful stop.");
+ };
+ })
+ ```
diff --git a/en/application-dev/device/vibrator-overview.md b/en/application-dev/device/vibrator-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..3d8f187054dd1f0da3e3099bd10e3cb28e5a9b15
--- /dev/null
+++ b/en/application-dev/device/vibrator-overview.md
@@ -0,0 +1,25 @@
+# Vibrator Overview
+
+
+The vibrator service opens up the latest capabilities of the vibrator hardware to the maximum extent. By expanding the native vibrator service to implement integrated vibration and interaction design, the service delivers an exquisite integrated vibration experience and differentiated experience, and improves user interaction efficiency and usability.
+
+
+## Working Principles
+
+The vibrator is a Misc device that consists of four modules: Vibrator API, Vibrator Framework, Vibrator Service, and HD_IDL.
+
+ **Figure1** Vibrator in Misc devices
+ 
+
+- Vibrator API: provides basic vibrator APIs, including the APIs for querying the vibrator list, querying the vibrator by effect, and triggering and stopping vibration.
+
+- Vibrator Framework: manages the framework layer of the vibrator and communicates with the Misc Device Service.
+
+- Vibrator Service: manages services of vibrators.
+
+- HD_IDL: adapts to different devices.
+
+
+## Constraints
+
+When using a vibrator, you need to declare and obtain the **ohos.permission.VIBRATE** permission first so that you can control the vibration effect.