!1985 add ace component

Merge pull request !1985 from tomatoDevboy/master

ace/ace_ets_component/entry/src/main/config.json

@@ -59,12 +59,42 @@
         },
         "pages": [
           "pages/index",
+          "pages/actionSheet",
+          "pages/gauge",
           "pages/ellipse",
           "pages/systemRouterA",
           "pages/systemRouterB",
+          "pages/marquee",
+          "pages/stepper",
           "pages/gridContainer",
+          "pages/list",
+          "pages/general-properties/sizeSetting",
+          "pages/general-properties/positionSetting",
+          "pages/general-properties/shapeClipping",
+          "pages/general-properties/opacitySetting",
           "pages/swiper",
-          "pages/gridPage"
+          "pages/enable",
+          "pages/general-properties/clickEvent",
+          "pages/general-properties/layoutConstraints",
+          "pages/general-properties/colorGradient",
+          "pages/areaChange",
+          "pages/general-properties/textStyle",
+          "pages/appear",
+          "pages/overlay",
+          "pages/general-properties/visibility",
+          "pages/zIndex",
+          "pages/general-properties/touchAble",
+          "pages/general-properties/imageEffects",
+          "pages/general-properties/transForm",
+          "pages/general-properties/touchAble",
+          "pages/general-properties/gridSettings",
+          "pages/general-properties/touch",
+          "pages/general-properties/border",
+          "pages/general-properties/background",
+          "pages/general-properties/flex",
+          "pages/swiper",
+          "pages/gridPage",
+          "pages/general-properties/rotationGesture"
         ],
         "name": ".MainAbility",
         "window": {
@@ -74,4 +104,4 @@
       }
     ]
   }
-}
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/app.ets

-/**
- * Copyright (c) 2021 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export default {
-  onCreate() {
-    console.info('Application onCreate')
-  },
-  onDestroy() {
-    console.info('Application onDestroy')
-  },
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export default {
+  onCreate() {
+    console.info('Application onCreate')
+  },
+  onDestroy() {
+    console.info('Application onDestroy')
+  },
 }
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/actionSheet.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@Entry
+@Component
+struct ActionSheetTest {
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Button('Click to Show ActionSheet')
+        .fontSize(20)
+        .key("actionSheet")
+        .onClick(() => {
+          ActionSheet.show({
+            title: 'ActionSheet title',
+            message: 'message',
+            confirm: {
+              value: 'Confirm button',
+              action: () => {
+                console.log('Get Alert Dialog handled')
+              }
+            },
+            sheets: [
+              {
+                title: 'apples',
+                action: () => {
+                  console.log('apples')
+                }
+              },
+              {
+                title: 'bananas',
+                action: () => {
+                  console.log('bananas')
+                }
+              },
+              {
+                title: 'pears',
+                action: () => {
+                  console.log('pears')
+                }
+              }
+            ]
+          })
+        })
+    }.width('100%')
+    .height('100%')
+  }
+}
+

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/appear.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter'
+import prompt from '@system.prompt'
+
+@Entry
+@Preview
+@Component
+struct AppearExample  {
+  @State isShow: boolean = true
+  @State appearFlag: boolean = false
+  @State disAppearFlag: boolean = false
+  private changeAppear: string = 'Hide Text'
+  private myText: string = 'Text for onAppear'
+
+  onPageShow() {
+    console.info('[appear] page show called');
+    var stateChangeEvent = {
+      eventId: 15,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+
+  private stateChangCallBack = (eventData) => {
+    console.info("[appear] page stateChangCallBack");
+    if (eventData != null) {
+      console.info("[appear] page state change called:" + JSON.stringify(eventData));
+      if(eventData.data.isShow != null) {
+        this.isShow = eventData.data.isShow;
+      }
+    }
+  }
+
+  build() {
+    Column() {
+      Button(this.changeAppear)
+        .key('appear')
+        .onClick(() => {
+          this.isShow = !this.isShow
+        }).margin(3).backgroundColor(0x2788D9)
+      if (this.isShow) {
+        Text(this.myText)
+          .onAppear(() => {
+            this.appearFlag = true
+            this.changeAppear = 'Show Text'
+            console.info('appearFlag current action state is: ' + this.appearFlag);
+            prompt.showToast({ message: 'The text is shown', duration: 2000 })
+            try{
+              var backData = {
+                data: {
+                  "ACTION": this.appearFlag,
+                }
+              }
+              var backEvent = {
+                eventId: 15,
+                priority: events_emitter.EventPriority.LOW
+              }
+              console.info("appearFlag start to emit action state")
+              events_emitter.emit(backEvent, backData)
+            }catch{
+              console.info("appearFlag emit action state err: " + JSON.stringify(err.message))
+            }
+          })
+          .onDisAppear(() => {
+            this.disAppearFlag = true
+            this.changeAppear = 'Hide Text'
+            console.info('disAppearFlag current action state is: ' + this.disAppearFlag);
+            prompt.showToast({ message: 'The text is hidden', duration: 2000 })
+            try{
+              var backData = {
+                data: {
+                  "ACTION": this.disAppearFlag,
+                }
+              }
+              var backEvent = {
+                eventId: 16,
+                priority: events_emitter.EventPriority.LOW
+              }
+              console.info("disAppearFlag start to emit action state")
+              events_emitter.emit(backEvent, backData)
+            }catch{
+              console.info("disAppearFlag emit action state err: " + JSON.stringify(err.message))
+            }
+          })
+      }
+    }.padding(30).width('100%')
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/areaChange.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter';
+@Entry
+@Component
+struct AreaExample {
+  @State value: string = 'Text';
+  @State size: string = '';
+  @State onActionCalled: boolean = false;
+
+  build() {
+    Column() {
+      Text(this.value)
+        .key('text1')
+        .backgroundColor(Color.Green)
+        .margin(30)
+        .fontSize(20)
+        .onClick(() => {
+          this.value = this.value + 'Text'
+          try {
+            var backData = {
+              data: {
+                "value": this.value,
+              }
+            }
+            var backEvent = {
+              eventId: 21,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.info("onClick start to emit action state")
+            events_emitter.emit(backEvent, backData)
+          } catch (err) {
+            console.info("onClick emit action state err: " + JSON.stringify(err.message))
+          }
+        })
+        .onAreaChange((oldValue: Area, newValue: Area) => {
+          console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)} newvalue is ${JSON.stringify(newValue)}`)
+          this.size = JSON.stringify(newValue)
+          this.onActionCalled = true;
+          console.info('onAreaChange current action state is: ' + this.onActionCalled);
+          try {
+            var backData = {
+              data: {
+                "ACTION": this.onActionCalled,
+              }
+            }
+            var backEvent = {
+              eventId: 22,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.info("onAreaChange start to emit action state")
+            events_emitter.emit(backEvent, backData)
+          } catch (err) {
+            console.info("onAreaChange emit action state err: " + JSON.stringify(err.message))
+          }
+        })
+      Text('new area is: \n' + this.size)
+        .key('text2')
+        .margin({ right: 30, left: 30 })
+    }
+    .width('100%').height('100%').margin({ top: 30 })
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/ellipse.ets

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import events_emitter from '@ohos.emitter'
+import events_emitter from '@ohos.emitter';
 
 @Entry
 @Component

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/enable.ets

+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import events_emitter from '@ohos.emitter'
+
+@Entry
+@Component
+struct EnabledExample {
+  @State enabled: boolean = true;
+  @State text: string = "enable";
+
+  onPageShow() {
+    console.info('[enabled] page show called ');
+    var stateChangeEvent = {
+      eventId: 82,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+
+  }
+
+  private stateChangCallBack = (eventData) => {
+    console.info("[stateChangCallBack] stateChangCallBack ");
+    if (eventData != null) {
+      console.info("[stateChangCallBack] state change called: " + JSON.stringify(eventData));
+      if (eventData.data.enabled != null) {
+        this.enabled = eventData.data.enabled
+      }
+      if (eventData.data.text != null) {
+        this.text = eventData.data.text
+      }
+    }
+  }
+
+  build() {
+    Flex({ justifyContent: FlexAlign.SpaceAround }) {
+      Button('disable')
+        .enabled(false)
+        .backgroundColor(0x317aff)
+        .opacity(0.4)
+      Button(this.text)
+        .key('enabled')
+        .backgroundColor(0x317aff)
+        .enabled(this.enabled)
+    }
+    .width('100%')
+    .padding({ top: 5 })
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/gauge.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter';
+
+@Entry
+@Component
+struct GaugeExample {
+  @State gaugeValue: string = 50;
+  @State strokeWidthValue: string = 20;
+  @State startAngleValue: string = 210;
+  @State endAngleValue: string = 150;
+  @State colorValues: Array = [[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]];
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("gauge page state change called:" + JSON.stringify(eventData));
+      if(eventData.data.gaugeValue != null) {
+        this.gaugeValue = eventData.data.gaugeValue;
+      }
+      if(eventData.data.strokeWidthValue != null) {
+        this.strokeWidthValue = eventData.data.strokeWidthValue;
+      }
+      if(eventData.data.startAngleValue != null) {
+        this.startAngleValue = eventData.data.startAngleValue;
+      }
+      if(eventData.data.endAngleValue != null) {
+        this.endAngleValue = eventData.data.endAngleValue;
+      }
+      if(eventData.data.colorValues != null) {
+        this.colorValues = JSON.parse(eventData.data.colorValues);
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('gauge page show called');
+    var stateChangeEvent = {
+      eventId: 1,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+
+    var stateChangeEventTwo = {
+      eventId: 2,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEventTwo, this.stateChangCallBack);
+  }
+
+  build() {
+    Column() {
+      Gauge({ value: 0, min: 0, max: 100 })
+        .key("gauge")
+        .value(`${this.gaugeValue}`)
+        .startAngle(`${this.startAngleValue}`)
+        .endAngle(`${this.endAngleValue}`)
+        .colors(this.colorValues)
+        .strokeWidth(`${this.strokeWidthValue}`)
+        .width(200).height(200)
+    }.width('100%').margin({ top: 300 })
+  }
+}
+

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/background.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter'
+
+@Entry
+@Component
+struct BackgroundExample {
+  @State width: string = "200px";
+  @State height: string = "200px";
+  @State color: Array = [[0x080808], [0xEEEE00], [0xFF0000]];
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("gauge page state change called:" + JSON.stringify(eventData));
+      if(eventData.data.colorValues != null) {
+        this.colorValues = JSON.parse(eventData.data.colorValues);
+      }
+      if(eventData.data.width != null) {
+        this.width = eventData.data.width;
+      }
+      if(eventData.data.height != null) {
+        this.height = eventData.data.height;
+      }
+      if(eventData.data.srcValue != null) {
+        this.srcValue = eventData.data.srcValue;
+      }
+    }
+  }
+
+  private stateChangCallBackTwo = (eventData) => {
+    if (eventData != null) {
+      console.info("Background page state change called:" + JSON.stringify(eventData));
+      if(eventData.data.backgroundColor != null) {
+        this.backgroundColor = eventData.data.backgroundColor;
+      }
+      if(eventData.data.backgroundImage != null) {
+        this.backgroundImage = eventData.data.backgroundImage;
+      }
+      if(eventData.data.backgroundImageSize != null) {
+        this.backgroundImageSize = eventData.data.backgroundImageSize;
+      }
+      if(eventData.data.backgroundImagePosition != null) {
+        this.backgroundImagePosition = eventData.data.backgroundImagePosition;
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('background page show called');
+    var stateChangeEvent = {
+      eventId: 28,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+
+    var stateChangeEventTwo = {
+      eventId: 281,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEventTwo, this.stateChangCallBackTwo);
+  }
+
+  build() {
+    Column({ space: 5 }) {
+      Text('background color').fontSize(9).width('90%').fontColor(0xFF0000).key("fontColor")
+      Row().width('90%').height(50).backgroundColor(0xEEEE00).key("backgroundColor").border({ width: 1 })
+      Text('background image repeat along X').fontSize(9).width('90%').fontColor(0xCCCCCC)
+      Row()
+        .backgroundImage('/images/bg.jpg', ImageRepeat.X)
+        .backgroundImageSize({ width: '250px', height: '140px' })
+        .width('90%')
+        .height(70)
+        .border({ width: 1 })
+      Text('background image repeat along Y').fontSize(9).width('90%').fontColor(0xFF0000)
+      Row()
+        .backgroundImage('/images/bg.jpg', ImageRepeat.Y)
+        .backgroundImageSize({ width: '500px', height: '120px' })
+        .width('90%')
+        .height(100)
+        .border({ width: 1 })
+      Text('background image size').fontSize(9).width('90%').fontColor(0xFF0000)
+      Row()
+        .width('90%').height(150)
+        .backgroundImage('/images/bg.jpg', ImageRepeat.NoRepeat)
+        .backgroundImageSize({ width: 1000, height: 500 })
+        .border({ width: 1 })
+      Text('background fill the box(Cover)').fontSize(9).width('90%').fontColor(0xFF0000)
+      Row()
+        .width(200)
+        .height(50)
+        .backgroundImage('/images/bg.jpg', ImageRepeat.NoRepeat)
+        .backgroundImageSize(ImageSize.Cover)
+        .border({ width: 1 })
+      Text('background fill the box(Contain)').fontSize(9).width('90%').fontColor(0xFF0000)
+      Row()
+        .width(200)
+        .height(50)
+        .backgroundImage('/images/bg.jpg', ImageRepeat.NoRepeat)
+        .backgroundImageSize(ImageSize.Contain)
+        .border({ width: 1 })
+      Text('background image position').fontSize(9).width('90%').fontColor(0xFF0000)
+      Row()
+        .width(100)
+        .height(50)
+        .backgroundImage('/images/bg.jpg', ImageRepeat.NoRepeat)
+        .backgroundImageSize({ width: 1000, height: 560 })
+        .backgroundImagePosition({ x: -500, y: -300 })
+        .border({ width: 1 })
+    }
+    .width('100%').height('100%').padding({ top: 5 })
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/border.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter'
+
+@Entry
+@Component
+struct BorderExample {
+  @State borderStyle: BorderStyle = BorderStyle.Auto;
+  @State borderRadius: number = 70;
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("Border page state change called:" + JSON.stringify(eventData));
+      if(eventData.data.border != null) {
+        this.border = eventData.data.border;
+      }
+      if(eventData.data.borderStyle != null) {
+        this.borderStyle = eventData.data.borderStyle;
+      }
+      if(eventData.data.borderWidth != null) {
+        this.borderWidth = eventData.data.borderWidth;
+      }
+      if(eventData.data.borderColor != null) {
+        this.borderColor = eventData.data.borderColor;
+      }
+      if(eventData.data.borderRadius != null) {
+        this.borderRadius = eventData.data.borderRadius;
+      }
+      console.info("Border borderStyle state change called:" + JSON.stringify(eventData));
+      switch(eventData.data.borderStyle) {
+        case 'Dotted':
+          this.borderStyle = BorderStyle.Dotted;
+          break;
+        case 'Dashed':
+          this.borderStyle = BorderStyle.Dashed;
+          break;
+        case 'Solid':
+          this.borderStyle = BorderStyle.Solid;
+          break;
+        default:
+          this.borderStyle = BorderStyle.Solid;
+      }
+    }
+  }
+
+
+  onPageShow() {
+    console.info('border page show called');
+    var stateChangeEvent = {
+      eventId: 29,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+
+  build() {
+    Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
+      Text('dashed')
+        .borderStyle(BorderStyle.Dashed).borderWidth(5)
+        .borderColor(0xAFEEEE)
+        .borderRadius(this.borderRadius).key("borderRadius")
+        .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
+      Text('Solid')
+        .borderStyle(BorderStyle.Solid).borderWidth(5).key("borderWidth")
+        .borderColor(0xEE0000)
+        .borderRadius(10)
+        .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
+      Text('dotted')
+        .border({ width: 5, color: 0x317AF7, radius: 8, style: BorderStyle.Dotted })
+        .key("borderColor")
+        .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
+    }.width('100%').height(150)
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/clickEvent.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter';
+
+@Entry
+@Component
+struct ClickExample {
+  @State text: string = '';
+  @State onClickValue: boolean = false;
+
+  build() {
+    Column() {
+      Button('Click').backgroundColor(0x2788D9).width(200).height(100).fontSize(20)
+        .onClick((event: ClickEvent) => {
+          console.info(this.text = 'Click Point:' + '\n  screenX:' + event.screenX + '\n  screenY:' + event.screenY
+          + '\n  x :' + event.x + '\n  y:' + event.y + '\ntarget:' + '\n  component globalPos：（'
+          + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + '）\n  width:'
+          + event.target.area.width + '\n  height：' + event.target.area.height);
+          this.onClickValue = true;
+          try {
+            var backData = {
+              data: {
+                "ACTION": this.onClickValue,
+                "event": JSON.stringify(event)
+              }
+            }
+            var backEvent = {
+              eventId: 30,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.info("click to emit action state")
+            events_emitter.emit(backEvent, backData)
+          } catch (err) {
+            console.info("click action state err: " + JSON.stringify(err.message))
+          }
+        }).key('button')
+      Text(this.text).padding(15).fontSize(20).key('text')
+    }.height(350).width('100%').padding(10)
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/colorGradient.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter';
+
+@Entry
+@Component
+struct ColorGradientExample {
+  @State linearGradientValue: object = {
+    angle: 90,
+    direction: GradientDirection.Left,
+    colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]],
+    repeating: true
+  };
+  @State sweepGradientValue: object = {
+    center: [50, 50],
+    start: 0,
+    end: 359,
+    colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]],
+    repeating: true
+  };
+  @State radialGradientValue: object = {
+    center: [50, 50],
+    radius: 60,
+    colors:[[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]],
+    repeating: true
+  };
+
+  private stateChangCallBack = (eventData) => {
+    console.info("[ColorGradient] page stateChangCallBack");
+    if (eventData != null) {
+      console.info("[ColorGradient] page state change called:" + JSON.stringify(eventData));
+      if (eventData.data.linearGradientValue != null) {
+        this.linearGradientValue = JSON.parse(eventData.data.linearGradientValue);
+      }
+      if (eventData.data.sweepGradientValue != null) {
+        this.sweepGradientValue = JSON.parse(eventData.data.sweepGradientValue);
+      }
+      if (eventData.data.radialGradientValue != null) {
+        this.radialGradientValue = JSON.parse(eventData.data.radialGradientValue);
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('[ColorGradient] page show called');
+    var stateChangeEvent = {
+      eventId: 31,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+
+    var stateChangeEvent = {
+      eventId: 32,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+
+    var stateChangeEvent = {
+      eventId: 33,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+
+  build() {
+    Column({ space: 5 }) {
+      Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
+      Row()
+        .width('90%')
+        .height(50)
+        .linearGradient(this.linearGradientValue).key('linearGradient')
+      Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
+      Row()
+        .width(100)
+        .height(100)
+        .sweepGradient(this.sweepGradientValue).key('sweepGradient')
+      Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
+      Row()
+        .width(100)
+        .height(100)
+        .radialGradient(this.radialGradientValue).key('radialGradient')
+    }
+    .width('100%')
+    .padding({ top: 5 })
+  }
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/flex.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter'
+
+@Entry
+@Component
+struct FlexExample {
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("Flex page state change called:" + JSON.stringify(eventData));
+      if(eventData.data.flexBasis != null) {
+        this.flexBasis = eventData.data.flexBasis;
+      }
+      if(eventData.data.flexGrow != null) {
+        this.flexGrow = eventData.data.flexGrow;
+      }
+      if(eventData.data.flexShrink != null) {
+        this.flexShrink = eventData.data.flexShrink;
+      }
+      if(eventData.data.alignSelf != null) {
+        this.alignSelf = eventData.data.alignSelf;
+      }
+    }
+  }
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("Flex page state change called:" + JSON.stringify(eventData));
+      switch(eventData.data.alignSelf) {
+        case 'Auto':
+          this.alignSelf = ItemAlign.Auto;
+          break;
+        case 'Start':
+          this.alignSelf = ItemAlign.Start;
+          break;
+        case 'Center':
+          this.alignSelf = ItemAlign.Center;
+          break;
+        case 'End':
+          this.alignSelf = ItemAlign.End;
+          break;
+        case 'Stretch':
+          this.alignSelf = ItemAlign.Stretch;
+          break;
+        case 'Baseline':
+          this.alignSelf = ItemAlign.Baseline;
+          break;
+        default:
+          this.alignSelf = ItemAlign.Auto;
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('flex page show called');
+    var stateChangeEvent = {
+      eventId: 27,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+
+  build() {
+    Column({ space: 5 }) {
+      Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Flex() {
+        Text('flexBasis("auto")')
+          .flexBasis('auto').key("flexBasis").width('60%').height(100).lineHeight(70)
+          .backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
+        Text('flexBasis(100)')
+          .flexBasis('100').height(100).lineHeight(70)
+          .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
+
+      Text('flexGrow').key("flexGrow").fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Flex() {
+        Text('flexGrow(2)')
+          .flexGrow(2).height(100).lineHeight(70)
+          .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+        Text('flexGrow(1)')
+          .flexGrow(1).height(100).lineHeight(70)
+          .backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
+      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
+
+      Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Flex({ direction: FlexDirection.Row }) {
+        Text('flexShrink(0)')
+          .flexShrink(0).key("flexShrink").width('50%').height(100).lineHeight(70)
+          .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+        Text('no flexShrink')
+          .width('40%').height(100).lineHeight(70).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
+        Text('flexShrink(2)')
+          .flexShrink(2).width('40%').height(100) .lineHeight(70)
+          .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
+
+      Text('alignSelf').key("alignSelf").fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) {
+        Text('no alignSelf,height:80').width('33%').height(80)
+          .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+        Text('alignSelf stretch')
+          .alignSelf(ItemAlign.Stretch).width('33%').height(80).lineHeight(70)
+          .backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
+        Text('no alignSelf,height:100').width('34%').height(100)
+          .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
+      }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
+    }.width('100%').margin({ top: 5 })
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/gridSettings.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter'
+
+@Entry
+@Component
+struct GridSetting {
+  @State smSpan: number = 2;
+  @State smOffset: number = 1;
+  @State gridSpan: number = 1;
+  @State gridOffset: number = 0;
+
+  build(){
+    GridContainer({sizeType: SizeType.SM}) {
+      Row({}) {
+        Row() {
+          Text('Left').fontSize(25)
+        }
+        .gridOffset(this.gridOffset)
+        .height("100%")
+        .backgroundColor(0x66bbb2cb)
+        .key('gridOffset')
+        Row() {
+          Text('Center').fontSize(25)
+        }
+        .useSizeType({
+          xs: { span: 1, offset: 0 }, sm: { span: this.smSpan, offset: this.smOffset },
+          md: { span: 5, offset: 1 }, lg: { span: 7, offset: 2 }
+        })
+        .height("100%")
+        .backgroundColor(0x66b6c5d1)
+        .key('gridRow')
+        Row() {
+          Text('Right').fontSize(25)
+        }
+        .gridSpan(this.gridSpan)
+        .height("100%")
+        .backgroundColor(0x66bbb2cb)
+        .key('gridSpan')
+      }
+      .height(200)
+    }
+    .backgroundColor(0xf1f3f5)
+    .margin({ top: 10 })
+    .key('gridContainer')
+  }
+  onPageShow() {
+    let smChangeEvent = {
+      eventId: 45,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(smChangeEvent, this.stateChangCallBack);
+    let offsetChangeEvent = {
+      eventId: 46,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(offsetChangeEvent, this.stateChangCallBack);
+    let spanChangeEvent = {
+      eventId: 47,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(spanChangeEvent, this.stateChangCallBack);
+  }
+  stateChangCallBack = (eventData) => {
+    console.info("GridSetting page stateChangCallBack" + JSON.stringify(eventData));
+    if (eventData && eventData.data) {
+      if (eventData.data.span) {
+        this.smSpan = eventData.data.span;
+        this.smOffset = eventData.data.offset;
+      } else if (eventData.data.gridOffset) {
+        this.gridOffset = eventData.data.gridOffset;
+      } else if (eventData.data.gridSpan) {
+        this.gridSpan = eventData.data.gridSpan;
+      }
+    }
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/imageEffects.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter'
+
+@Entry
+@Component
+struct ImageEffectsExample {
+  @State blurValue: string = 100;
+  @State backdropBlueValue: string= 30;
+  @State shadowValue: object= { radius: 10, color: Color.Gray, offsetX: 5, offsetY: 5 }
+  @State grayscaleValue: string= 10;
+  @State brightnessValue: string= 20;
+  @State saturateValue: string= 50;
+  @State contrastValue: string= 20;
+  @State invertValue: string= 10;
+  @State hueRotateValue: string= 10
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("imageEffects page state change called:" + JSON.stringify(eventData));
+      if (eventData.data.blurValue != null) {
+        this.blurValue = eventData.data.blurValue;
+      }
+      if (eventData.data.shadowValue != null) {
+        this.shadowValue = JSON.parse(eventData.data.shadowValue);
+      }
+      if (eventData.data.grayscaleValue != null) {
+        this.grayscaleValue = eventData.data.grayscaleValue;
+      }
+      if (eventData.data.brightnessValue != null) {
+        this.brightnessValue = eventData.data.brightnessValue;
+      }
+      if (eventData.data.saturateValue != null) {
+        this.saturateValue = eventData.data.saturateValue;
+      }
+      if (eventData.data.contrastValue != null) {
+        this.contrastValue = eventData.data.contrastValue;
+      }
+      if (eventData.data.invertValue != null) {
+        this.invertValue = eventData.data.invertValue;
+      }
+      if (eventData.data.hueRotateValue != null) {
+        this.hueRotateValue = eventData.data.hueRotateValue;
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('imageEffects page show called');
+    var stateChangeEvent = {
+      eventId: 40,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+
+    var stateChangeEvent2 = {
+      eventId: 41,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent2, this.stateChangCallBack);
+
+    var stateChangeEvent3 = {
+      eventId: 42,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent3, this.stateChangCallBack);
+
+    var stateChangeEvent4 = {
+      eventId: 43,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent4, this.stateChangCallBack);
+
+    var stateChangeEvent5 = {
+      eventId: 44,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent5, this.stateChangCallBack);
+
+    var stateChangeEvent6 = {
+      eventId: 45,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent6, this.stateChangCallBack);
+
+    var stateChangeEvent7 = {
+      eventId: 46,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent7, this.stateChangCallBack);
+
+    var stateChangeEvent8 = {
+      eventId: 47,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent8, this.stateChangCallBack);
+  }
+
+  build() {
+    Column({ space: 10 }) {
+      Text('font blur').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Text('text')
+        .blur(this.blurValue)
+        .width('90%')
+        .height(40)
+        .fontSize(16)
+        .backgroundColor(0xF9CF93)
+        .padding({ left: 5 })
+        .key('centerRow')
+
+      Text('backdropBlur').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Text()
+        .width('90%')
+        .height(40)
+        .fontSize(16)
+        .backdropBlur(this.backdropBlueValue)
+        .backgroundImage('/images/download.png')
+        .backgroundImageSize({ width: 1200, height: 160 })
+        .key('centerRow2')
+
+      Text('shadow').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image('/images/download.png')
+        .width('90%')
+        .height(40)
+        .shadow(this.shadowValue)
+        .key('centerRow3')
+
+      Text('grayscale').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image('/images/download.png')
+        .width('90%')
+        .height(40)
+        .grayscale(`${this.grayscaleValue}`)
+        .key('centerRow4')
+
+      Text('brightness').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image('/images/download.png').width('90%').height(40).brightness(this.brightnessValue).key('centerRow5')
+
+      Text('saturate').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image('/images/download.png').width('90%').height(40).saturate(this.saturateValue).key('centerRow6')
+
+      Text('contrast').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image('/images/download.png').width('90%').height(40).contrast(this.contrastValue).key('centerRow7')
+
+      Text('invert').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image('/images/download.png').width('90%').height(40).invert(`${this.invertValue}`).key('centerRow8')
+
+      Text('hueRotate').fontSize(15).fontColor(0xCCCCCC).width('90%')
+      Image('/images/download.png').width('90%').height(40).hueRotate(`${this.hueRotateValue}`).key('centerRow9')
+    }.width('100%').margin({ top: 5 })
+  }
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/layoutConstraints.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter';
+
+class ContainerInfo {
+  label : string = ''
+  size : string = ''
+};
+
+class ChildInfo {
+  text : string = ''
+  priority : number = 0
+};
+
+@Entry
+@Component
+struct LayoutConstraints {
+  private children : string[] = ['1', '2', '3', '4', '5', '6'];
+  @State aspectRatio: number = 1.5;
+  private container: ContainerInfo[] = [
+    {label: 'Big container', size: '97%'},
+    {label: 'Small container', size: '30%'}];
+  @State priorityChildren: any[] = [
+    {text: '1\n(priority:1)', priority: 1},
+    {text: '2\n(priority:2)', priority: 2},
+    {text: '3\n(priority:3)', priority: 3},
+    {text: '4\n(priority:4)', priority: 4}];
+  @State currentIndex : number = 0;
+
+  build() {
+    Column({ space: 20 }) {
+      Text('using container: row').fontSize(20).fontColor(Color.Black).width('100%')
+      Row({space: 10}) {
+        ForEach(this.children, (item) => {
+          Text(item)
+            .backgroundColor(0xbbb2cb)
+            .fontSize(20)
+            .aspectRatio(this.aspectRatio)
+            .height(60)
+          Text(item)
+            .backgroundColor(0xbbb2cb)
+            .fontSize(20)
+            .aspectRatio(this.aspectRatio)
+            .width(60)
+            .key('aspectRatio')
+        }, item=>item)
+      }
+      .size({width: "100%", height: 100})
+      .backgroundColor(0xd2cab3)
+      .clip(true)
+
+      Text('using container: grid').fontSize(20).fontColor(Color.Black).width('100%')
+      Grid() {
+        ForEach(this.children, (item) => {
+          GridItem() {
+            Text(item)
+              .backgroundColor(0xbbb2cb)
+              .fontSize(40)
+              .aspectRatio(this.aspectRatio)
+          }
+        }, item=>item)
+      }
+      .columnsTemplate('1fr 1fr 1fr')
+      .columnsGap(10)
+      .rowsGap(10)
+      .size({width: "100%", height: 165})
+      .backgroundColor(0xd2cab3)
+
+      Text('displayPriority 4').fontSize(20).fontColor(Color.Black).width('100%')
+      Flex({justifyContent: FlexAlign.SpaceBetween}) {
+        ForEach(this.priorityChildren, (item)=>{
+          if (item.priority === 1 || item.priority === 5) {
+            Text(`1\n(priority:${item.priority})`)
+              .width(135)
+              .height(60)
+              .fontSize(18)
+              .textAlign(TextAlign.Center)
+              .backgroundColor(0xbbb2cb)
+              .displayPriority(item.priority)
+              .key('displayPriority')
+          } else {
+            Text(item.text)
+              .width(135)
+              .height(60)
+              .fontSize(18)
+              .textAlign(TextAlign.Center)
+              .backgroundColor(0xbbb2cb)
+              .displayPriority(item.priority)
+          }
+        }, item=>item.text)
+      }
+      .width(this.container[this.currentIndex].size)
+      .backgroundColor(0xd2cab3)
+    }.padding(10)
+  }
+  onPageShow() {
+    let aspectRatioChangeEvent = {
+      eventId: 26,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(aspectRatioChangeEvent, this.stateChangCallBack);
+
+    let priorityChangeEvent = {
+      eventId: 27,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(priorityChangeEvent, this.stateChangCallBack);
+  }
+  stateChangCallBack = (eventData) => {
+    console.info("LayoutConstraints page stateChangCallBack" + JSON.stringify(eventData));
+    if (eventData) {
+      if (eventData.data.aspectRatio) {
+        this.aspectRatio = eventData.data.aspectRatio;
+      } else if (eventData.data.displayPriority) {
+        let priority = JSON.parse(JSON.stringify(this.priorityChildren));
+        priority[0].priority = eventData.data.displayPriority;
+        this.priorityChildren = [];
+        this.priorityChildren = priority;
+      }
+    }
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/opacitySetting.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter';
+@Entry
+@Component
+struct OpacityExample {
+  @State opacityValue: string = 1;
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("opacity page state change called:" + JSON.stringify(eventData));
+      if(eventData.data.opacityValue != null) {
+        this.opacityValue = eventData.data.opacityValue;
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('opacity page show called');
+    var stateChangeEvent = {
+      eventId: 100,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+
+  build() {
+    Column({ space: 5 }) {
+      Text('opacity(1)').fontSize(9).width('90%').fontColor(0xCCCCCC)
+      Text().width('90%').height(50).opacity(`${this.opacityValue}`).backgroundColor(0xAFEEEE).key("opacity")
+    }
+    .width('100%')
+    .padding({ top: 5 })
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/positionSetting.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter';
+@Entry
+@Component
+struct PositionSetting {
+  @State align: Alignment = Alignment.TopStart;
+  @State direction: Direction = Direction.Rtl;
+  @State position1: {x: string, y: string} = {x: 25, y: 15};
+  @State position2: {x: string, y: string} = {x: '50%', y: '70%'};
+  @State anchor: {x: string, y: string} = {x: 25, y: 25};
+  @State offset: {x: string, y: string} = {x: 10, y: 15};
+
+  build() {
+    Column() {
+      Column({space: 10}) {
+        Text('align').fontSize(20).fontColor(Color.Black).width('90%')
+        Text('top start')
+          .align(this.align)
+          .height(50)
+          .width('90%')
+          .fontSize(20)
+          .backgroundColor(0xFFE4C4)
+          .key('textAlign')
+
+        Text('direction').fontSize(20).fontColor(Color.Black).width('90%')
+        Row() {
+          Text('1').height(50).width('25%').fontSize(20).backgroundColor(0xF5DEB3)
+          Text('2').height(50).width('25%').fontSize(20).backgroundColor(0xD2B48C)
+          Text('3').height(50).width('25%').fontSize(20).backgroundColor(0xF5DEB3)
+          Text('4').height(50).width('25%').fontSize(20).backgroundColor(0xD2B48C)
+        }
+        .width('90%')
+        .direction(this.direction)
+        .key('rowDirection')
+
+        Text('position').fontSize(20).fontColor(Color.Black).width('90%')
+        Row({ space: 20 }) {
+          Text('1')
+            .size({ width: '45%', height: '50' })
+            .backgroundColor(0xdeb887)
+            .border({ width: 1 })
+            .fontSize(20)
+          Text(`2 position(${this.position1.x}, ${this.position1.y})`)
+            .size({ width: '60%', height: '30' })
+            .backgroundColor(0xbbb2cb).border({ width: 1 })
+            .fontSize(20).align(Alignment.Start)
+            .position({ x: this.position1.x, y: this.position1.y })
+            .key('position1')
+          Text('3')
+            .size({ width: '45%', height: '50' })
+            .backgroundColor(0xdeb887)
+            .border({ width: 1 }).fontSize(20)
+          Text(`4 position(${this.position2.x}, ${this.position2.y})`)
+            .size({ width: '50%', height: '50' })
+            .backgroundColor(0xbbb2cb)
+            .border({ width: 1 }).fontSize(20)
+            .position({ x: this.position2.x, y: this.position2.y })
+            .key('position2')
+        }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })
+
+        Text('markAnchor').fontSize(20).fontColor(Color.Black).width('90%')
+        Stack({ alignContent: Alignment.TopStart }) {
+          Row()
+            .size({ width: '100', height: '100' })
+            .backgroundColor(0xdeb887)
+          Image('/images/ic_health_heart.png')
+            .size({ width: 25, height: 25 })
+            .markAnchor({ x: this.anchor.x, y: this.anchor.y })
+            .key('markAnchor')
+          Image('/images/ic_health_heart.png')
+            .size({ width: 25, height: 25 })
+            .markAnchor({ x: 25, y: 25 })
+            .position({ x: '100%', y: '100%' })
+        }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed })
+
+        Text('offset').fontSize(20).fontColor(Color.Black).width('90%')
+        Row() {
+          Text('1').size({ width: '15%', height: '100' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(20)
+          Text(`2\noffset(${this.offset.x}, ${this.offset.y})`)
+            .size({ width: 170, height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 })
+            .fontSize(20).align(Alignment.Start)
+            .offset({ x: this.offset.x, y: this.offset.y })
+            .key('offset')
+          Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(20)
+          Text('4\noffset(-10%, 20%)')
+            .size({ width: 170, height: '50' }) .backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(20)
+            .offset({ x: '-10%', y: '50%' })
+        }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })
+      }
+    }
+    .width('100%').margin({ top: 5 })
+  }
+  onPageShow() {
+    let stateChangeEvent = {
+      eventId: 21,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+
+    let directionChangeEvent = {
+      eventId: 22,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(directionChangeEvent, this.stateChangCallBack);
+
+    let positionChangeEvent = {
+      eventId: 23,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(positionChangeEvent, this.stateChangCallBack);
+
+    let markAnchorChangeEvent = {
+      eventId: 24,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(markAnchorChangeEvent, this.stateChangCallBack);
+
+    let offsetChangeEvent = {
+      eventId: 25,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(offsetChangeEvent, this.stateChangCallBack);
+  }
+  stateChangCallBack = (eventData) => {
+    console.info("position page stateChangCallBack" + JSON.stringify(eventData));
+    if (eventData) {
+      if (eventData.data.textAlign) {
+        this.align = eventData.data.textAlign;
+      } else if (eventData.data.direction) {
+        this.direction = eventData.data.direction;
+      } else if (eventData.data.position1) {
+        this.position1 = JSON.parse(eventData.data.position1);
+        this.position2 = JSON.parse(eventData.data.position2);
+      } else if (eventData.data.markAnchor) {
+        this.anchor = JSON.parse(eventData.data.markAnchor);
+      } else if (eventData.data.offset) {
+        this.offset = JSON.parse(eventData.data.offset);
+      }
+    }
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/rotationGesture.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter';
+
+@Entry
+@Component
+struct RotationGestureExample {
+  @State angle: number = 0
+  @State eventType: string = ''
+  @State isTouched: boolean = false;
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
+      Text('RotationGesture angle:' + this.angle)
+    }
+    .height(300).width(300).padding(20).border({ width:1 })
+    .margin(80).rotate({ x:1, y:2, z:3, angle: this.angle })
+    .key('gesture')
+    .onTouch((event: TouchEvent) => {
+      this.isTouched = true
+      if (event.type === TouchType.Down) {
+        this.eventType = 'Down'
+      }
+      if (event.type === TouchType.Up) {
+        this.eventType = 'Up'
+      }
+      if (event.type === TouchType.Move) {
+        this.eventType = 'Move'
+      }
+      console.info('RotationGesture TouchType:' + this.eventType)
+      try {
+        var backData = {
+          data: {
+            "ACTION": this.isTouched,
+            "EVENT_TYPE": this.eventType
+          }
+        }
+        var backEvent = {
+          eventId: 56,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("RotationGesture start to emit action state")
+        events_emitter.emit(backEvent, backData)
+      } catch (err) {
+        console.info("RotationGesture emit action state err: " + JSON.stringify(err.message))
+      }
+    })
+    .gesture(
+    RotationGesture()
+      .onActionStart((event: RotationGestureEvent) => {
+        console.log('Rotation start')
+      })
+      .onActionUpdate((event: RotationGestureEvent) => {
+        this.angle = event.angle
+      })
+      .onActionEnd(() => {
+        console.log('Rotation end')
+      })
+    )
+  }
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/shapeClipping.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter';
+@Entry
+@Component
+struct ClipAndMaskExample {
+  @State isMaskRect: boolean = true;
+  @State isClipCircle:boolean = true;
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
+      if(eventData.data.maskValue != null) {
+        this.isMaskReact = eventData.data.maskValue;
+      }
+    }
+  }
+
+  private shapeChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("shapeClipping page shape change called:" + JSON.stringify(eventData));
+      if(eventData.data.clipValue != null) {
+        this.isClipCircle = eventData.data.clipValue;
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('shapeClipping page show called');
+    var stateChangeEvent = {
+      eventId: 99,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+
+    var shapeChangeEvent = {
+      eventId: 98,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(shapeChangeEvent, this.shapeChangCallBack);
+  }
+
+  build() {
+    Column({ space: 5 }) {
+      Text('clip')
+        .fontSize(9)
+        .width('90%')
+        .fontColor(0xCCCCCC)
+
+      if (this.isClipCircle) {
+        Image('/images/clip.png')
+          .clip(new Circle({ width: 80, height: 80 }))
+          .width('500px')
+          .height('280px')
+          .key('image_clip')
+      } else {
+        Image('/images/clip.png')
+          .clip(new Rect({ width: 80, height: 60 }))
+          .width('500px')
+          .height('280px')
+          .key('image_clip')
+      }
+
+      Row() {
+        Image('/images/clip.png')
+          .width('500px')
+          .height('280px')
+      }
+      .clip(true)
+      .borderRadius(20)
+      .key('image_clip_true')
+
+      Text('mask')
+        .fontSize(9)
+        .width('90%')
+        .fontColor(0xCCCCCC)
+
+      if (this.isMaskRect) {
+        Image('/images/clip.png')
+          .mask(new Rect({ width: '500px', height: '280px' }).fill(Color.Grey))
+          .width('500px').height('280px')
+          .key('image_mask')
+      } else {
+        Image('/images/clip.png')
+          .mask(new Circle({ width: '280px', height: '280px' }).fill(Color.Grey))
+          .width('500px').height('280px')
+          .key('image_mask')
+      }
+    }
+    .width('100%')
+    .margin({ top: 5 })
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/sizeSetting.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter';
+
+@Entry
+@Component
+struct SizeSetting {
+  @State width: string = 80;
+  @State height: string = 80;
+  @State padding: string = 20;
+  @State margin: string = 20;
+  @State sizeWidth: string = '100%';
+  @State sizeHeight: string = '100%';
+  @State layoutWeight1: string = 1;
+  @State layoutWeight2: string = 2;
+
+  build() {
+    Column({ space: 10 }) {
+      Text('margin and padding:').fontSize(26).fontColor(Color.Black).width('90%')
+      Row() {
+        Row() {
+          Row()
+            .size({ width: this.sizeWidth, height: this.sizeHeight })
+            .backgroundColor(0xAFEEEE)
+            .key('innerRow')
+        }
+        .key('centerRow')
+        .width(this.width)
+        .height(this.height)
+        .padding(this.padding)
+        .margin(this.margin)
+        .backgroundColor(0xFDF5E6)
+      }.backgroundColor(0xFFA500)
+
+      Text('layoutWeight')
+        .fontSize(26)
+        .fontColor(Color.Black)
+        .width('90%')
+      Row() {
+        Text('layoutWeight(1)')
+          .size({ width: '30%', height: 110 })
+          .backgroundColor(0xFFEFD5)
+          .textAlign(TextAlign.Center)
+          .layoutWeight(this.layoutWeight1)
+          .fontSize(20)
+          .key('layoutWeight1')
+        Text('layoutWeight(2)')
+          .size({ width: '30%', height: 110 })
+          .backgroundColor(0xF5DEB3)
+          .textAlign(TextAlign.Center)
+          .layoutWeight(this.layoutWeight2)
+          .fontSize(20)
+          .key('layoutWeight2')
+        Text('no layoutWeight')
+          .size({ width: '30%', height: 110 })
+          .backgroundColor(0xD2B48C)
+          .textAlign(TextAlign.Center)
+          .fontSize(20)
+      }.size({ width: '90%', height: 140 })
+      .backgroundColor(0xAFEEEE)
+
+      Text('constraintSize')
+        .fontSize(26)
+        .fontColor(Color.Black)
+        .width('90%')
+      Row() {
+        Row()
+          .constraintSize({minWidth: '10%', maxWidth: '50%', height: 70})
+          .backgroundColor(0xFFA500)
+        Row()
+          .size({width: '30%', height:70})
+          .backgroundColor(0xAFEEEE)
+      }.size({ width: '90%', height: 140 })
+      .backgroundColor(0xAFEEEE)
+    }.width('100%').margin({ top: 5 })
+  }
+  onPageShow() {
+    let stateChangeEvent = {
+      eventId: 28,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack)
+
+    let sizeChangeEvent = {
+      eventId: 29,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(sizeChangeEvent, this.sizeChangCallBack)
+
+    let weightChangeEvent = {
+      eventId: 32,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(weightChangeEvent, this.weightChangCallBack)
+  }
+  stateChangCallBack = (eventData) => {
+    console.info("size page stateChangCallBack" + JSON.stringify(eventData));
+    if (eventData) {
+      this.width = eventData.data.width;
+      this.height = eventData.data.height;
+      this.padding = eventData.data.padding;
+      this.margin = eventData.data.margin;
+    }
+  }
+  sizeChangCallBack = (eventData) => {
+    console.info("size page sizeChangCallBack" + JSON.stringify(eventData));
+    if (eventData) {
+      this.sizeWidth = eventData.data.width;
+      this.sizeHeight = eventData.data.height;
+    }
+  }
+  weightChangCallBack = (eventData) => {
+    console.info("size page weightChangCallBack" + JSON.stringify(eventData));
+    if (eventData) {
+      this.layoutWeight1 = eventData.data.weight;
+    }
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/textStyle.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter';
+
+@Entry
+@Component
+struct TextStyle {
+  @State fontColor: Color = Color.Red;
+  @State fontSize: string = 20;
+  @State fontStyle: FontStyle = FontStyle.Italic;
+  @State fontWeight: string = 700;
+  @State fontFamily: string = 'sans-serif';
+
+  build() {
+    Column({ space: 20 }) {
+      Text('default text').fontSize(20)
+
+      Text(`text font color ${this.fontColor}`)
+        .fontColor(this.fontColor)
+        .fontSize(20)
+        .key('fontColor')
+
+      Text(`text font size ${this.fontSize}`)
+        .fontSize(this.fontSize)
+        .key('fontSize')
+
+      Text(`text font style ${this.fontStyle}`)
+        .fontStyle(this.fontStyle)
+        .fontSize(20)
+        .key('fontStyle')
+
+      Text(`text fontWeight ${this.fontWeight}`)
+        .fontWeight(this.fontWeight)
+        .fontSize(20)
+        .key('fontWeight')
+
+      Text(`text fontFamily ${this.fontFamily}`)
+        .fontFamily(this.fontFamily)
+        .fontSize(20)
+        .key('fontFamily')
+
+      Text('red 20 Italic bold cursive text')
+        .fontColor(Color.Red)
+        .fontSize(20)
+        .fontStyle(FontStyle.Italic)
+        .fontWeight(700)
+        .fontFamily('cursive')
+        .textAlign(TextAlign.Center)
+        .width('90%')
+
+      Text('Orange 18 Normal source-sans-pro text')
+        .fontColor(Color.Orange)
+        .fontSize(20)
+        .fontStyle(FontStyle.Normal)
+        .fontWeight(400)
+        .fontFamily('source-sans-pro,cursive,sans-serif')
+    }.width('100%').margin({top: 20})
+  }
+  onPageShow() {
+    let fontColorChangeEvent = {
+      eventId: 40,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(fontColorChangeEvent, this.textStyleChangCallBack);
+    let fontSizeChangeEvent = {
+      eventId: 41,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(fontSizeChangeEvent, this.textStyleChangCallBack);
+    let fontStyleChangeEvent = {
+      eventId: 42,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(fontStyleChangeEvent, this.textStyleChangCallBack);
+    let fontWeightChangeEvent = {
+      eventId: 43,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(fontWeightChangeEvent, this.textStyleChangCallBack);
+    let fontFamilyChangeEvent = {
+      eventId: 44,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(fontFamilyChangeEvent, this.textStyleChangCallBack);
+  }
+  textStyleChangCallBack = (eventData) => {
+    console.info("textStyle page stateChangCallBack" + JSON.stringify(eventData));
+    if (eventData && eventData.data) {
+      if (eventData.data.fontColor) {
+        this.fontColor = eventData.data.fontColor;
+      } else if (eventData.data.fontSize) {
+        this.fontSize = eventData.data.fontSize;
+      } else if (eventData.data.fontWeight) {
+        console.log("gao---------" + eventData.data.fontWeight)
+        this.fontWeight = eventData.data.fontWeight;
+      } else if (eventData.data.fontFamily) {
+        this.fontFamily = eventData.data.fontFamily;
+      } else {
+        this.fontStyle = eventData.data.fontStyle;
+      }
+    }
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/touch.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter'
+
+@Entry
+@Preview
+@Component
+struct TouchExample   {
+  @State text: string = ''
+  @State eventType: string = ''
+  @State touchFlag: boolean = false
+
+  onPageShow() {
+    console.info('[touch] page show called');
+    var stateChangeEvent = {
+      eventId: 51,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+
+  private stateChangCallBack = (eventData) => {
+    console.info("[touch] page stateChangCallBack");
+    if (eventData != null) {
+      console.info("[touch] page state change called:" + JSON.stringify(eventData));
+      if(eventData.data.text != null) {
+        this.text = eventData.data.text;
+      }
+      if(eventData.data.eventType != null) {
+        this.eventType = eventData.data.eventType;
+      }
+      if(eventData.data.touchFlag != null) {
+        this.touchFlag = eventData.data.touchFlag
+      }
+    }
+  }
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
+      Button('Touch').backgroundColor(0x2788D9).height(40).width(80)
+        .key('touch')
+        .onTouch((event: Touch) => {
+          if (event.type === TouchType.Down) {
+            this.eventType = 'Down'
+            console.info("[touch] eventType is Down")
+            this.touchFlag = true
+          }
+          if (event.type === TouchType.Up) {
+            this.eventType = 'Up'
+            console.info("[touch] eventType is Up")
+            this.touchFlag = true
+          }
+          if (event.type === TouchType.Move) {
+            this.eventType = 'Move'
+            console.info("[touch] eventType is Move")
+            this.touchFlag = true
+          }
+          console.info('onTouch successful, touchFlag is : ' + this.eventType + ', ' +this.touchFlag)
+          console.info(this.text = 'TouchType:' + this.eventType
+          + '\nDistance between touch point and touch element:\nx: '
+          + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\ncomponent globalPos：（'
+          + event.target.area.globalPos.x + ',' + event.target.area.globalPos.y + '）\nwidth:'
+          + event.target.area.width + '\nheight：' + event.target.area.height)
+          console.log('fang--->A')
+          try{
+            console.log('fang--->B')
+            var backData = {
+              data: {
+                "ACTION": this.touchFlag,
+              }
+            }
+            console.log('fang--->C')
+            var backEvent = {
+              eventId: 51,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.log('fang--->D')
+            console.info("touchFlag start to emit action state")
+            events_emitter.emit(backEvent, backData)
+          }catch{
+            console.info("touchFlag emit action state err: " + JSON.stringify(err.message))
+          }
+        })
+      Text(this.text)
+    }.height(200).width(350)
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/touchAble.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter';
+
+@Entry
+@Component
+struct TouchAbleExample {
+  @State text1: string = '';
+  @State text2: string = '';
+  @State touchableValue: boolean = false;
+
+  private stateChangCallBack = (eventData) => {
+    console.info("[TouchAble] page stateChangCallBack");
+    if (eventData != null) {
+      console.info("[TouchAble] page state change called:" + JSON.stringify(eventData));
+      if (eventData.data.touchableValue != null) {
+        this.touchableValue = eventData.data.touchableValue;
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('[TouchAble] page show called');
+    var stateChangeEvent = {
+      eventId: 50,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+
+  build() {
+    Stack() {
+      Rect()
+        .fill(Color.Gray).width(150).height(150)
+        .onClick(() => {
+          console.info(this.text1 = 'Rect Clicked')
+        })
+        .overlay(this.text1, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+      Ellipse()
+        .fill(Color.Pink).width(150).height(80)
+        .key('ellipse')
+        .touchable(this.touchableValue)
+        .onClick(() => {
+          console.info(this.text2 = 'Ellipse Clicked')
+        })
+        .overlay(this.text2, { align: Alignment.Bottom, offset: { x: 0, y: 20 } })
+    }.margin(100)
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/transForm.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter'
+import Matrix4 from '@ohos.matrix4'
+
+@Entry
+@Component
+struct TransformExample {
+  @State rotateValue: object= {
+    x: 1,
+    y: 1,
+    z: 1,
+    centerX: '50%',
+    centerY: '50%',
+    angle: 300
+  }
+  @State translateValue: object= { x: 100, y: 5 }
+  @State scaleValue: object= { x: 2, y: 0.5 }
+  @State transformValue: object= Matrix4.identity().translate({ x: 100, y: 100, z: 30 })
+
+  private stateChangCallBack = (eventData) => {
+    console.info("transFormExample page state change called:" + JSON.stringify(eventData));
+    if (eventData != null) {
+      if (eventData.data.rotateValue != null) {
+        this.rotateValue = JSON.parse(eventData.data.rotateValue);
+      }
+      if (eventData.data.scaleValue != null) {
+        this.scaleValue = JSON.parse(eventData.data.scaleValue);
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('transFormExample page show called');
+    var stateChangeEvent = {
+      eventId: 40,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+
+    var stateChangeEvent2 = {
+      eventId: 41,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent2, this.stateChangCallBack);
+  }
+
+  build() {
+    Column() {
+      Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30)
+      Row()
+        .rotate(this.rotateValue)
+        .width(100)
+        .height(100)
+        .backgroundColor(0xAFEEEE)
+        .key('rotate')
+
+      Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(30)
+      Row()
+        .translate(this.transformValue)
+        .width(100)
+        .height(100)
+        .backgroundColor(0xAFEEEE)
+        .margin({ bottom: 10 })
+        .key('rotate2')
+
+      Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30)
+      Row()
+        .scale(this.scaleValue)
+        .width(100)
+        .height(100)
+        .backgroundColor(0xAFEEEE)
+        .key('rotate3')
+
+      Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(30)
+      Row()
+        .width(100)
+        .height(100)
+        .backgroundColor(0xAFEEEE)
+        .transform(Matrix4.identity().translate({ x: 100, y: 100, z: 30 }))
+        .key('rotate4')
+    }.width('100%').margin({ top: 5 })
+  }
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/general-properties/visibility.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter';
+
+@Entry
+@Component
+struct VisibilityExample {
+  @State visibility: Visibility = Visibility.Visible;
+
+  onPageShow() {
+    let hiddenChangeEvent = {
+      eventId: 90,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(hiddenChangeEvent, this.hiddenChangCallBack)
+
+    let noneChangeEvent = {
+      eventId: 91,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(noneChangeEvent, this.noneChangCallBack)
+  }
+
+  private hiddenChangCallBack = (eventData) => {
+    console.info("[hiddenChangCallBack] stateChangCallBack");
+    if (eventData != null) {
+      console.info("[hiddenChangCallBack] state change called:" + JSON.stringify(eventData));
+      if(eventData.data.visibility != null) {
+        this.visibility = eventData.data.visibility;
+      }
+    }
+  }
+
+  private noneChangCallBack = (eventData) => {
+    console.info("[noneChangCallBack] stateChangCallBack");
+    if (eventData != null) {
+      console.info("[noneChangCallBack] state change called:" + JSON.stringify(eventData));
+      if(eventData.data.visibility != null) {
+        this.visibility = eventData.data.visibility;
+      }
+    }
+  }
+
+  build() {
+    Column() {
+      Column() {
+        Text('BoxOne').fontSize(9).width('90%').fontColor(0xCCCCCC)
+        Row().visibility(this.visibility).width('90%').height(80).backgroundColor(0xAFEEEE).padding(20).key('box')
+
+        Text('BoxTwo').fontSize(9).width('90%').fontColor(0xCCCCCC)
+        Row().visibility(Visibility.Visible).width('90%').height(80).backgroundColor(0xAFEEEE).padding(20)
+      }.width('90%').border({ width: 1 })
+    }.width('100%').margin({ top: 5 })
+  }
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/index.ets

-// @ts-nocheck
-/**
- * Copyright (c) 2021 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import file from '@system.file';
-
-import {Core, ExpectExtend, InstrumentLog, ReportExtend} from "deccjsunit/index.ets";
-import testsuite from "../test/List.test.ets";
-import featureAbility from "@ohos.ability.featureAbility";
-
-@Entry
-@Component
-struct MyComponent {
-  aboutToAppear() {
-    console.info("start run testcase!!!!")
-    featureAbility.getWant()
-      .then((Want) => {
-        const core = Core.getInstance();
-        const expectExtend = new ExpectExtend({
-          'id': 'extend'
-        });
-        core.addService('expect', expectExtend);
-        const reportExtend = new ReportExtend(file);
-        core.addService('report', reportExtend);
-        core.init();
-        core.subscribeEvent('task', reportExtend);
-        const configService = core.getDefaultService('config');
-        console.info('parameters---->' + JSON.stringify(Want.parameters));
-        configService.setConfig(Want.parameters);
-        testsuite();
-        core.execute();
-        console.info('Operation successful. Data: ' + JSON.stringify(Want));
-      })
-      .catch((error) => {
-        console.error('Operation failed. Cause: ' + JSON.stringify(error));
-      })
-  }
-
-  build() {
-    Flex({
-      direction: FlexDirection.Column,
-      alignItems: ItemAlign.Center,
-      justifyContent: FlexAlign.Center
-    }) {
-      Text('ACE ETS TEST')
-        .fontSize(50)
-        .fontWeight(FontWeight.Bold)
-    }
-    .width('100%')
-    .height('100%')
-  }
-}
-
+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import file from '@system.file';
+
+import {Core, ExpectExtend, InstrumentLog, ReportExtend} from "deccjsunit/index.ets";
+import testsuite from "../test/List.test.ets";
+import featureAbility from "@ohos.ability.featureAbility";
+
+@Entry
+@Component
+struct MyComponent {
+  aboutToAppear() {
+    console.info("start run testcase!!!!")
+    featureAbility.getWant()
+      .then((Want) => {
+        const core = Core.getInstance();
+        const expectExtend = new ExpectExtend({
+          'id': 'extend'
+        });
+        core.addService('expect', expectExtend);
+        const reportExtend = new ReportExtend(file);
+        core.addService('report', reportExtend);
+        core.init();
+        core.subscribeEvent('task', reportExtend);
+        const configService = core.getDefaultService('config');
+        console.info('parameters---->' + JSON.stringify(Want.parameters));
+        configService.setConfig(Want.parameters);
+        testsuite();
+        core.execute();
+        console.info('Operation successful. Data: ' + JSON.stringify(Want));
+      })
+      .catch((error) => {
+        console.error('Operation failed. Cause: ' + JSON.stringify(error));
+      })
+  }
+
+  build() {
+    Flex({
+      direction: FlexDirection.Column,
+      alignItems: ItemAlign.Center,
+      justifyContent: FlexAlign.Center
+    }) {
+      Text('ACE ETS TEST')
+        .fontSize(50)
+        .fontWeight(FontWeight.Bold)
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/list.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter';
+
+@Entry
+@Component
+struct ListExample {
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+  @State listDirection: Axis = Axis.Vertical;
+  @State editMode: boolean = false;
+  @State edgeEffect: EdgeEffect = EdgeEffect.None;
+  @State chainAnimation: boolean = false;
+  @State strokeWidth: number = 2.000000;
+  @State color: string = 0xFFFFFF;
+  @State startMargin: number = 20.000000;
+  @State endMargin: number = 20.000000;
+
+  onPageShow() {
+    console.info('[list] page show called');
+    var stateChangeEvent = {
+      eventId: 80,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+
+    var stateChangeEventTwo = {
+      eventId: 81,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEventTwo, this.stateChangCallBackTwo);
+  }
+
+  private stateChangCallBack = (eventData) => {
+    console.info("[stateChangCallBack] stateChangCallBack");
+    if (eventData != null) {
+      console.info("[stateChangCallBack] state change called:" + JSON.stringify(eventData));
+      if(eventData.data.listDirection != null) {
+        this.listDirection = eventData.data.listDirection;
+      }
+      if(eventData.data.editMode != null) {
+        this.editMode = eventData.data.editMode;
+      }
+      if(eventData.data.edgeEffect != null) {
+        this.edgeEffect = eventData.data.edgeEffect;
+      }
+      if(eventData.data.chainAnimation != null) {
+        this.chainAnimation = eventData.data.chainAnimation;
+      }
+    }
+  }
+
+  private stateChangCallBackTwo = (eventData) => {
+    console.info("[stateChangCallBackTwo] stateChangCallBack");
+    if (eventData != null) {
+      console.info("[stateChangCallBackTwo] state change called:" + JSON.stringify(eventData));
+      if(eventData.data.strokeWidth != null) {
+        this.strokeWidth = eventData.data.strokeWidth;
+      }
+      if(eventData.data.color != null) {
+        this.color = eventData.data.color;
+      }
+      if(eventData.data.startMargin != null) {
+        this.startMargin = eventData.data.startMargin;
+      }
+      if(eventData.data.endMargin != null) {
+        this.endMargin = eventData.data.endMargin;
+      }
+    }
+  }
+
+  build() {
+    Stack({ alignContent: Alignment.TopStart }) {
+      Column() {
+        List({ space: 20, initialIndex: 0 }) {
+          ForEach(this.arr, (item) => {
+            ListItem() {
+              Text('' + item)
+                .width('100%').height(100).fontSize(16)
+                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
+            }.editable(true)
+          }, item => item)
+        }
+        .key('list')
+        .listDirection(this.listDirection)
+        .divider({ strokeWidth: this.strokeWidth, color: this.color, startMargin: this.startMargin, endMargin: this.endMargin })
+        .edgeEffect(this.edgeEffect)
+        .chainAnimation(this.chainAnimation)
+        .onScrollIndex((firstIndex: number, lastIndex: number) => {
+          console.info('first' + firstIndex)
+          console.info('last' + lastIndex)
+        })
+        .editMode(this.editMode)
+        .onItemDelete((index: number) => {
+          console.info(this.arr[index] + 'Delete')
+          this.arr.splice(index, 1)
+          console.info(JSON.stringify(this.arr))
+          this.editFlag = false
+          return true
+        }).width('90%')
+      }.width('100%')
+      Button('edit list')
+        .onClick(() => {
+          this.editMode = !this.editMode
+        }).margin({ top: 5, left: 20 })
+    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/marquee.ets

+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import events_emitter from '@ohos.emitter'
+
+@Entry
+@Component
+struct MarqueeExample {
+  @State start: boolean = false
+  @State fromStart: boolean = true
+  @State step: number = 50
+  @State loop: number = 3
+  @State src: string = "Running Marquee starts rolling"
+  @State onActionCalledOne: boolean = false;
+  @State onActionCalledTwo: boolean = false;
+  @State onActionCalledThree: boolean = false;
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Marquee({
+        start: this.start,
+        step: this.step,
+        loop: this.loop,
+        fromStart: this.fromStart,
+        src: this.src
+      })
+        .key('marquee')
+        .fontColor(Color.White)
+        .fontSize(50)
+        .allowScale(false)
+        .fontWeight(FontWeight.Bold)
+        .backgroundColor(Color.Black)
+        .margin({bottom:40})
+        .onStart(() => {
+          console.log('Marquee animation complete onStart')
+          this.onActionCalledOne = true;
+          console.info('Onstart current action state is: ' + this.onActionCalledOne);
+          try {
+            var backData = {
+              data: {
+                "ACTION": this.onActionCalledOne,
+              }
+            }
+            var backEvent = {
+              eventId: 11,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.info("Onstart start to emit action state")
+            events_emitter.emit(backEvent, backData)
+          } catch (err) {
+            console.info("Onstart emit action state err: " + JSON.stringify(err.message))
+          }
+        })
+        .onBounce(() => {
+          console.log('Marquee animation complete onBounce')
+          this.onActionCalledTwo = true;
+          console.info('Onbounce current action state is: ' + this.onActionCalledTwo);
+          try {
+            var backData = {
+              data: {
+                "ACTION": this.onActionCalledTwo,
+              }
+            }
+            var backEvent = {
+              eventId: 15,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.info("Onbounce start to emit action state")
+            events_emitter.emit(backEvent, backData)
+          } catch (err) {
+            console.info("Onbounce emit action state err: " + JSON.stringify(err.message))
+          }
+        })
+        .onFinish(() => {
+          console.log('Marquee animation complete onFinish')
+          this.onActionCalledThree = true;
+          console.info('Onfinish current action state is: ' + this.onActionCalledThree);
+          try {
+            var backData = {
+              data: {
+                "ACTION": this.onActionCalledThree,
+              }
+            }
+            var backEvent = {
+              eventId: 16,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.info("Onfinish start to emit action state")
+            events_emitter.emit(backEvent, backData)
+          } catch (err) {
+            console.info("Onfinish emit action state err: " + JSON.stringify(err.message))
+          }
+        })
+      Button('start')
+        .key('button')
+        .onClick(() => {
+          this.start = true
+          try {
+            var backData = {
+              data: {
+                "start": this.start,
+              }
+            }
+            var backEvent = {
+              eventId: 10,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.info("start to emit action state")
+            events_emitter.emit(backEvent, backData)
+          } catch (err) {
+            console.info("emit action state err: " + JSON.stringify(err.message))
+          }
+        })
+        .width(200)
+        .height(60)
+        .margin({bottom:20})
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/overlay.ets

+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import events_emitter from '@ohos.emitter'
+
+@Entry
+@Component
+struct OverlayExample {
+  @State title: string = 'old title'
+  @State x: number = 0
+  @State y: number = -15
+  @State Alignment: Alignment = Alignment.Bottom
+
+  onPageShow() {
+    console.info('[overlay] page show called ');
+    var stateChangeEvent = {
+      eventId: 83,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+
+  private stateChangCallBack = (eventData) => {
+    console.info("[stateChangCallBack] stateChangCallBack ");
+    if (eventData != null) {
+      console.info("[stateChangCallBack] state change called: " + JSON.stringify(eventData));
+      if (eventData.data.title != null) {
+        this.title = eventData.data.title
+      }
+      if (eventData.data.x != null) {
+        this.x = eventData.data.x
+      }
+      if (eventData.data.y != null) {
+        this.y = eventData.data.y
+      }
+      if (eventData.data.align != null) {
+        this.Alignment = eventData.data.align
+      }
+    }
+  }
+
+  build() {
+    Column() {
+      Column() {
+        Text('floating layer')
+          .fontSize(12).fontColor(0xCCCCCC).maxLines(1)
+        Column() {
+          Image('/images/img.jpeg')
+            .width(340).height(240)
+            .key('overlay')
+            .overlay(this.title,
+              { align: this.Alignment, offset: { x: this.x, y: this.y } })
+        }.border({ color: Color.Black, width: 2 })
+      }.width('100%')
+    }.padding({ top: 20 })
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/stepper.ets

+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import events_emitter from '@ohos.emitter'
+
+@Entry
+@Component
+struct StepperExample {
+  @State currentIndex: number = 0
+  @State firstState: ItemState = ItemState.Normal
+  @State secondState: ItemState = ItemState.Normal
+
+  build() {
+    Stepper({
+      index: this.currentIndex
+    }) {
+      StepperItem() {
+        Text('Page One')
+          .fontSize(35)
+          .fontColor(Color.Blue)
+          .width(200)
+          .lineHeight(50)
+          .margin({top:250})
+      }
+      .nextLabel('')
+      .position({x: '35%', y: 0})
+      .key('stepperItem1')
+      StepperItem() {
+        Text('Page Two')
+          .fontSize(35)
+          .fontColor(Color.Blue)
+          .width(200)
+          .lineHeight(50)
+          .margin({top:250})
+          .key('text1')
+          .onClick(()=>{
+            this.firstState = this.firstState === ItemState.Skip ? ItemState.Normal : ItemState.Skip
+          })
+      }
+      .nextLabel('Next')
+      .prevLabel('Previous')
+      .status(this.firstState)
+      .position({x: '35%', y: 0})
+      .key('stepperItem2')
+      StepperItem() {
+        Text('Page Three')
+          .fontSize(35)
+          .fontColor(Color.Blue)
+          .width(200)
+          .lineHeight(50)
+          .margin({top:250})
+          .key('text2')
+          .onClick(()=>{
+            this.secondState = this.secondState === ItemState.Waiting ? ItemState.Normal : ItemState.Waiting
+          })
+      }
+      .position({x: '35%', y: 0})
+      .status(this.secondState)
+      .key('stepperItem3')
+      StepperItem() {
+        Text('Page four')
+          .fontSize(35)
+          .fontColor(Color.Blue)
+          .width(200)
+          .lineHeight(50)
+          .margin({top:250})
+      }
+      .position({x: '35%', y: 0})
+      .nextLabel('Finish')
+      .key('stepperItem4')
+    }
+    .onFinish(() => {
+      console.log('onFinish')
+    })
+    .onSkip(() => {
+      console.log('onSkip')
+    })
+    .onChange((prevIndex: number, index: number) => {
+      this.currentIndex = index
+    })
+    .align(Alignment.Center)
+    .key('stepper')
+  }
+
+  onPageShow() {
+    console.info('stepper page show called');
+    var stateChangeEvent = {
+      eventId: 12,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack)
+  }
+
+  private stateChangCallBack = (eventData) => {
+    console.info("stepper page stateChangCallBack" + JSON.stringify(eventData));
+    if (eventData != null) {
+      console.info("stepper page state change called:" + JSON.stringify(eventData));
+      if(eventData.data.currentIndex != null) {
+        this.currentIndex = parseInt(eventData.data.currentIndex);
+      }
+    }
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/swiper.ets

@@ -169,6 +169,18 @@ struct SwiperExample {
       priority: events_emitter.EventPriority.LOW
     }
     events_emitter.on(stateChangeEventOne, this.stateChangCallBack)
+
+    var stateChangeEventTwo = {
+      eventId: 56,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEventTwo, this.stateChangCallBack)
+
+    var stateChangeEventTwo = {
+      eventId: 57,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEventTwo, this.stateChangCallBack)
   }
 
   private stateChangCallBack = (eventData) => {

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/zIndex.ets

+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import events_emitter from '@ohos.emitter'
+
+@Entry
+@Component
+struct zIndexExample {
+  @State zIndex: number = 1;
+
+  onPageShow() {
+    console.info('[zIndex] page show called ');
+    var stateChangeEvent = {
+      eventId: 84,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+
+  }
+
+  private stateChangCallBack = (eventData) => {
+    console.info("[stateChangCallBack] stateChangCallBack ");
+    if (eventData != null) {
+      console.info("[stateChangCallBack] state change called: " + JSON.stringify(eventData));
+      if (eventData.data.zIndex != null) {
+        this.zIndex = eventData.data.zIndex
+      }
+    }
+  }
+
+  build() {
+    Column() {
+      Stack() {
+        Text('first child, zIndex(2)')
+          .size({ width: '40%', height: '60%' }).backgroundColor(0xbbb2cb)
+          .zIndex(2)
+        Text('second child, default zIndex(0)')
+          .size({ width: '90%', height: '80%' }).backgroundColor(0xd2cab3).align(Alignment.TopStart)
+        Text('third child, zIndex(1)')
+          .size({ width: '70%', height: '50%' })
+          .backgroundColor(0xc1cbac)
+          .align(Alignment.TopStart)
+          .zIndex(this.zIndex)
+          .key('zIndex')
+      }
+    }.width('100%').height(200)
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/AppearJsunit.test.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
+import router from '@system.router';
+import events_emitter from '@ohos.events.emitter'
+import Utils from './Utils';
+
+export default function appearJsunit() {
+  describe('appInfoTest', function () {
+    beforeEach(async function (done) {
+      console.info("appear beforeEach start");
+      let options = {
+        uri: 'pages/appear',
+      }
+      let result;
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get appear state pages: " + JSON.stringify(pages));
+        if (!("appear" == pages.name)) {
+          console.info("get appear state pages.name: " + JSON.stringify(pages.name));
+          result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push appear page result: " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push appear page error: " + JSON.stringify(result));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("appear after each called");
+    })
+
+    it('testAppear01', 0, async function (done) {
+      console.info('[testAppear01] START');
+      await Utils.sleep(1000);
+      try {
+        let callBackAppear = (backData) => {
+          console.info("testAppear01 get appearEvent result is: " + JSON.stringify(appearEvent));
+          expect(backData.data.ACTION).assertEqual(true);
+        }
+        var appearEvent = {
+          eventId: 15,
+          priority: events_emitter.EventPriority.LOW
+        }
+        events_emitter.on(appearEvent, callBackAppear);
+      } catch (err) {
+        console.info("testAppear01 on appearEvent err : " + JSON.stringify(err));
+      }
+      console.info("testAppear01 click result is: " + JSON.stringify(sendEventByKey('appear', 10, "")));
+      console.info('[testAppear01] END');
+      done();
+    });
+
+    it('testAppear02', 0, async function (done) {
+      console.info('[testAppear02] START');
+      await Utils.sleep(1000);
+      try {
+        let callBackAppear = (backData) => {
+          console.info("testAppear02 get appearEvent result is: " + JSON.stringify(appearEvent));
+          expect(backData.data.ACTION).assertEqual(true);
+        }
+        var appearEvent = {
+          eventId: 15,
+          priority: events_emitter.EventPriority.LOW
+        }
+        events_emitter.on(appearEvent, callBackAppear);
+      } catch (err) {
+        console.info("testAppear02 on appearEvent err : " + JSON.stringify(err));
+      }
+      console.info("testAppear02 appearEvent click result is: " + JSON.stringify(sendEventByKey('appear', 10, "")));
+
+      try {
+        let callBackDisAppear = (backData) => {
+          console.info("testAppear02 get disAppearEvent result is: " + JSON.stringify(disAppearEvent));
+          expect(backData.data.ACTION).assertEqual(true);
+        }
+        var disAppearEvent = {
+          eventId: 16,
+          priority: events_emitter.EventPriority.LOW
+        }
+        events_emitter.on(disAppearEvent, callBackDisAppear);
+      } catch (err) {
+        console.info("testAppear02 on disAppearEvent err : " + JSON.stringify(err));
+      }
+      console.info("testAppear02 disAppearEvent click result is: " + JSON.stringify(sendEventByKey('appear', 10, "")));
+      console.info('[testAppear02] END');
+      done();
+    });
+
+  })
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/AreaChangeJsunit.test.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
+import router from '@system.router';
+import events_emitter from '@ohos.events.emitter'
+import Utils from './Utils';
+
+export default function areaChangeJsunit() {
+  describe('areaChange', function () {
+    beforeEach(async function (done) {
+      let options = {
+        uri: 'pages/areaChange',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get areaChange state success " + JSON.stringify(pages));
+        if (!("areaChange" == pages.name)) {
+          console.info("get areaChange state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(1000);
+          console.info("push areaChange page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push areaChange page error " + JSON.stringify(result));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("areaChange after each called");
+    });
+
+    it('areaChangeTest_0100', 0, async function (done) {
+      console.info('areaChangeTest_0100 START');
+      let strJson = getInspectorByKey('text1');
+      console.info("areaChangeTest_0100 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("areaChangeTest_0100 component obj is: " + JSON.stringify(obj));
+      expect(obj.$type).assertEqual('Text');
+      expect(obj.$attrs.width).assertEqual('42.000000');
+      expect(obj.$attrs.height).assertEqual('23.000000');
+      console.info('areaChangeTest_0100 END');
+      done();
+    });
+
+    it('areaChangeTest_0200', 0, async function (done) {
+      console.info('areaChangeTest_0200 START');
+      let strJson = getInspectorByKey('text2');
+      console.info("areaChangeTest_0200 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("areaChangeTest_0200 component obj is: " + JSON.stringify(obj));
+      expect(obj.$type).assertEqual('Text');
+      expect(obj.$attrs.width).assertEqual('409.000000');
+      expect(obj.$attrs.height).assertEqual('175.000000');
+      console.info('areaChangeTest_0200 END');
+      done();
+    });
+
+    it('areaChangeTest_0300', 0, async function (done) {
+      console.info('areaChangeTest_0300 START');
+      await Utils.sleep(1000);
+      let callback = (indexEvent) => {
+        console.info("areaChangeTest_0300 get state result is: " + JSON.stringify(indexEvent));
+        expect(indexEvent.data.value).assertEqual('TextText');
+      }
+      let indexEvent = {
+        eventId: 21,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(indexEvent, callback);
+      } catch (err) {
+        console.info("areaChangeTest_0300 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info("areaChangeTest_0300 click result is: " + JSON.stringify(sendEventByKey('text1', 10, "")));
+      var innerEventOne = {
+        eventId: 22,
+        priority: events_emitter.EventPriority.LOW
+      }
+      await Utils.sleep(1500);
+      var callback1 = (eventData) => {
+        console.info("areaChangeTest_0300 get event state result is: " + JSON.stringify(eventData));
+        expect(eventData.data.ACTION).assertEqual(true);
+      }
+      try {
+        events_emitter.on(innerEventOne, callback1);
+      } catch (err) {
+        console.info("areaChangeTest_0300 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info('areaChangeTest_0300 END');
+      done();
+    });
+
+    it('areaChangeTest_0400', 0, async function (done) {
+      console.info('areaChangeTest_0400 START');
+      await Utils.sleep(1000);
+      let callback = (indexEvent) => {
+        console.info("areaChangeTest_0400 get state result is: " + JSON.stringify(indexEvent));
+        expect(indexEvent.data.value).assertEqual('TextTextText');
+      }
+      let indexEvent = {
+        eventId: 21,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(indexEvent, callback);
+      } catch (err) {
+        console.info("areaChangeTest_0400 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info("areaChangeTest_0400 click result is: " + JSON.stringify(sendEventByKey('text1',10,"")));
+      console.info('areaChangeTest_0400 END');
+      done();
+    });
+  })
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/EllipseJsunit.test.ets

@@ -13,9 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets";
 import router from '@system.router';
-import events_emitter from '@ohos.emitter'
+import events_emitter from '@ohos.events.emitter';
 import Utils from './Utils';
 
 export default function ellipseJsunit() {
@@ -52,8 +52,8 @@ export default function ellipseJsunit() {
       let strJson = getInspectorByKey('ellipse');
       let obj = JSON.parse(strJson);
       console.info("[testEllipse02] obj is: " + JSON.stringify(obj));
-      expect(obj.$attrs.height).assertEqual('200.00px');
-      expect(obj.$attrs.width).assertEqual('200.00px');
+      expect(obj.$attrs.height).assertEqual('200.000000px');
+      expect(obj.$attrs.width).assertEqual('200.000000px');
       console.info('testEllipse02 END');
       done();
     });
@@ -80,8 +80,8 @@ export default function ellipseJsunit() {
       let strJson = getInspectorByKey('ellipse');
       let obj = JSON.parse(strJson);
       console.info("[testEllipse02] obj is: " + JSON.stringify(obj));
-      expect(obj.$attrs.height).assertEqual('500.00px');
-      expect(obj.$attrs.width).assertEqual('500.00px');
+      expect(obj.$attrs.height).assertEqual('500.000000px');
+      expect(obj.$attrs.width).assertEqual('500.000000px');
       console.info('testEllipse02 END');
       done();
     });

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/EnableJsunit.test.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
+import router from '@system.router';
+import events_emitter from '@ohos.events.emitter'
+import Utils from './Utils';
+
+export default function enableJsunit() {
+  describe('appInfoTest', function () {
+    beforeEach(async function (done) {
+      console.info("enable beforeEach start");
+      let options = {
+        uri: 'pages/enable',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get enable state pages: " + JSON.stringify(pages));
+        if (!("enable" == pages.name)) {
+          console.info("get enable state pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push enable page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push enable page error:" + JSON.stringify(result));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("enable after each called");
+    });
+
+    it('testEnable01', 0, async function (done) {
+      console.info('[testEnable01] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('enabled');
+      let obj = JSON.parse(strJson);
+      console.info("[testEnable01] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.enabled).assertEqual(true);
+      console.info('[testEnable01] END');
+      done();
+    });
+
+    it('testEnable02', 0, async function (done) {
+      console.info('[testEnable02] START');
+      try {
+        var eventData = {
+          data: {
+            "enabled": false,
+            "text": "disable"
+          }
+        }
+        var innerEvent = {
+          eventId: 82,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testEnable02] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testEnable02] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('enabled');
+      let obj = JSON.parse(strJson);
+      console.info("[testEnable02] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.enabled).assertEqual(false);
+      console.info('testEnable02 END');
+      done();
+    });
+  })
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/GaugeJsunit.test.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets";
+import router from '@system.router';
+import events_emitter from '@ohos.events.emitter';
+import Utils from './Utils';
+
+export default function gaugeJsunit() {
+  describe('appInfoTest', function () {
+    beforeEach(async function (done) {
+      let options = {
+        uri: 'pages/gauge',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get gauge state success " + JSON.stringify(pages));
+        if (!("gauge" == pages.name)) {
+          console.info("get gauge state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push gauge page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push gauge page error " + JSON.stringify(err));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(2000);
+      console.info("gauge after each called");
+    });
+
+    it('testGauge001', 0, async function (done) {
+      console.info('[testGauge001] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('gauge');
+      let obj = JSON.parse(strJson);
+      console.info("[testGauge001] component obj is: " + JSON.stringify(obj));
+      expect(obj.$type).assertEqual('Gauge');
+      expect(obj.$attrs.strokeWidth).assertEqual('20.000000vp');
+      expect(obj.$attrs.width).assertEqual('200.000000vp');
+      expect(obj.$attrs.height).assertEqual('200.000000vp');
+      expect(obj.$attrs.value).assertEqual('50.00');
+      done();
+    });
+
+    it('testGauge002', 0, async function (done) {
+      console.info('[testGauge002] START');
+      await Utils.sleep(1000);
+      try {
+        var eventData = {
+          data: {
+            "gaugeValue": "10",
+            "strokeWidthValue": "30",
+            "startAngleValue": "200",
+            "endAngleValue": "200"
+          }
+        }
+        var innerEvent = {
+          eventId: 1,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testGauge002] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testGauge002] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let strJsonNew = getInspectorByKey('gauge');
+      let objNew = JSON.parse(strJsonNew);
+      console.info("[testGauge002] component objNew is: " + JSON.stringify(objNew));
+      expect(objNew.$attrs.strokeWidth).assertEqual('30.000000vp');
+      expect(objNew.$attrs.value).assertEqual('10.00');
+      done();
+    });
+
+    it('testGauge003', 0, async function (done) {
+      console.info('[testGauge003] START');
+      await Utils.sleep(1000);
+      try {
+        var eventData = {
+          data: {
+            "colorValues": JSON.stringify([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1]])
+          }
+        }
+        var innerEvent = {
+          eventId: 2,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testGauge003] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testGauge003] change component data error: " + err.message);
+      }
+      done();
+    });
+  })
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/GridContainerJsunit.test.ets

@@ -15,7 +15,7 @@
  */
 import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
 import router from '@system.router';
-import events_emitter from '@ohos.emitter'
+import events_emitter from '@ohos.events.emitter';
 import Utils from './Utils';
 
 export default function girdContainerJsunit() {

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/GridJsunit.test.ets

@@ -15,7 +15,7 @@
  */
 import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
 import router from '@system.router';
-import events_emitter from '@ohos.emitter'
+import events_emitter from '@ohos.events.emitter';
 import Utils from './Utils';
 
 export default function gridJsunit() {

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/List.test.ets

@@ -12,16 +12,70 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import gaugeJsunit from './GaugeJsunit.test.ets';
 import ellipseJsunit from './EllipseJsunit.test.ets';
 import systemRouterJsunit from './SystemRouterJsunit.test.ets';
+import marqueeJsunit from './MarqueeJsunit.test.ets';
+import stepperJsunit from './StepperJsunit.test.ets';
 import gridContainerJsunit from './GridContainerJsunit.test.ets';
+import listJsunit from './ListJsunit.test.ets';
+import sizeSettingJsunit from './general-properties/SizeSettingJsunit.test.ets';
+import positionSettingJsunit from './general-properties/PositionSettingJsunit.test.ets';
+import opacitySettingJsunit from './general-properties/OpacitySettingJsunit.test.ets';
 import swiperJsunit from './SwiperJsunit.test.ets';
+import enableJsunit from './EnableJsunit.test.ets';
+import clickEventJsunit from './general-properties/ClickEventJsunit.test.ets';
+import colorGradientJsunit from './general-properties/ColorGradientJsunit.test.ets';
+import visibilityJsunit from './general-properties/VisibilityJsunit.test.ets';
+import layoutConstraintsJsunit from './general-properties/LayoutConstraintsJsunit.test.ets';
+import areaChangeJsunit from './AreaChangeJsunit.test.ets';
+import appearJsunit from './AppearJsunit.test.ets';
+import overlayJsunit from './OverlayJsunit.test.ets';
+import ZIndexJsunit from './ZIndexJsunit.test.ets';
+import touchAbleJsunit from './general-properties/TouchAbleJsunit.test.ets';
+import shapeClippingJsunit from './general-properties/ShapeClippingJsunit.test.ets';
+import textStyleJsunit from './general-properties/TextStyleJsunit.test.ets';
+import imageEffectsJsunit from './general-properties/ImageEffectsJsunit.test.ets';
+import transformJsunit from './general-properties/TransFormJsunit.test.ets';
+import gridSettingsJsunit from './general-properties/GridSettingsJsunit.test.ets';
+import touchJsunit from './general-properties/touchJsunit.test.ets'
+import backgroundJsunit from './general-properties/BackgroundJsunit.test.ets';
+import borderJsunit from './general-properties/BorderJsunit.test.ets';
+import flexJsunit from './general-properties/FlexJsunit.test.ets';
 import gridJsunit from './GridJsunit.test.ets';
+import rotationGestureJsUnit from './general-properties/RotationGestureJsunit.test.ets';
 
 export default function testsuite() {
-    ellipseJsunit();
-    systemRouterJsunit();
-    gridContainerJsunit();
-    swiperJsunit();
-    gridJsunit();
+  gaugeJsunit();
+  ellipseJsunit();
+  systemRouterJsunit();
+  marqueeJsunit();
+  stepperJsunit();
+  gridContainerJsunit();
+  listJsunit();
+  sizeSettingJsunit();
+  positionSettingJsunit();
+  opacitySettingJsunit();
+  swiperJsunit();
+  enableJsunit();
+  clickEventJsunit();
+  layoutConstraintsJsunit();
+  colorGradientJsunit();
+  areaChangeJsunit();
+  appearJsunit();
+  overlayJsunit();
+  visibilityJsunit();
+  ZIndexJsunit();
+  touchAbleJsunit();
+  shapeClippingJsunit();
+  textStyleJsunit();
+  imageEffectsJsunit();
+  transformJsunit();
+  gridSettingsJsunit();
+  touchJsunit();
+  backgroundJsunit();
+  borderJsunit();
+  flexJsunit();
+  gridJsunit();
+  rotationGestureJsUnit();
 }
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/ListJsunit.test.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets";
+import router from '@system.router';
+import events_emitter from '@ohos.events.emitter';
+import Utils from './Utils';
+
+export default function listJsunit() {
+  describe('appInfoTest', function () {
+    beforeEach(async function (done) {
+      console.info("list beforeEach start");
+      let options = {
+        uri: 'pages/list',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get list state pages:" + JSON.stringify(pages));
+        if (!("list" == pages.name)) {
+          console.info("get list state pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push list page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push list page error:" + JSON.stringify(result));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("list after each called");
+    });
+
+    it('testList01', 0, async function (done) {
+      console.info('[testList01] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('list');
+      let obj = JSON.parse(strJson);
+      console.info("[testList01] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.listDirection).assertEqual('Axis.Vertical');
+      expect(obj.$attrs.editMode).assertEqual('false');
+      expect(obj.$attrs.edgeEffect).assertEqual('EdgeEffect.None');
+      expect(obj.$attrs.chainAnimation).assertEqual('false');
+      expect(obj.$attrs.divider.strokeWidth).assertEqual("2.000000vp");
+      expect(obj.$attrs.divider.color).assertEqual("#FFFFFFFF");
+      expect(obj.$attrs.divider.startMargin).assertEqual("20.000000vp");
+      expect(obj.$attrs.divider.endMargin).assertEqual("20.000000vp");
+      console.info('[testList01] END');
+      done();
+    });
+
+    it('testList02', 0, async function (done) {
+      console.info('[testList02] START');
+      try {
+        var eventData = {
+          data: {
+            "listDirection": Axis.Horizontal,
+            "editMode": true,
+            "edgeEffect": EdgeEffect.Spring,
+            "chainAnimation": true
+          }
+        }
+        var innerEvent = {
+          eventId: 80,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testList02] start to publish emit:" + JSON.stringify(eventData.data));
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testList02] change component data error: " + err.message);
+      }
+      await Utils.sleep(4000);
+      let strJson = getInspectorByKey('list');
+      let obj = JSON.parse(strJson);
+      console.info("[testList02] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.listDirection).assertEqual('Axis.Horizontal');
+      expect(obj.$attrs.editMode).assertEqual('true');
+      expect(obj.$attrs.edgeEffect).assertEqual('EdgeEffect.Spring');
+      expect(obj.$attrs.chainAnimation).assertEqual('true');
+      console.info('testList02 END');
+      done();
+    });
+
+    it('testList03', 0, async function (done) {
+      console.info('[testList03] START');
+      try {
+        var eventData = {
+          data: {
+            "strokeWidth": "3.000000vp",
+            "color": "#FF0000FF",
+            "startMargin": "30.000000vp",
+            "endMargin": "30.000000vp"
+          }
+        }
+        var innerEvent = {
+          eventId: 81,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testList03] start to publish emit:" + JSON.stringify(eventData.data));
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testList03] change component data error: " + err.message);
+      }
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('list');
+      let obj = JSON.parse(strJson);
+      console.info("[testList03] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.divider.strokeWidth).assertEqual("3.000000vp");
+      expect(obj.$attrs.divider.color).assertEqual("#FF0000FF");
+      expect(obj.$attrs.divider.startMargin).assertEqual("30.000000vp");
+      expect(obj.$attrs.divider.endMargin).assertEqual("30.000000vp");
+      console.info('testList03 END');
+      done();
+    });
+  })
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/MarqueeJsunit.test.ets

+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @ts-nocheck
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
+import router from '@system.router';
+import Utils from './Utils';
+import events_emitter from '@ohos.events.emitter';
+
+export default function marqueeJsunit() {
+  describe('marqueeTest', function () {
+    beforeEach(async function (done) {
+      let options = {
+        uri: 'pages/marquee',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get marquee state success " + JSON.stringify(pages));
+        if (!("marquee" == pages.name)) {
+          console.info("get marquee state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(4000);
+          console.info("push marquee page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push marquee page error " + JSON.stringify(result));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("marquee after each called");
+    });
+
+
+    it('testMarquee_0100', 0, async function (done) {
+      console.info('testMarquee_0100 START');
+      await Utils.sleep(1500);
+      let callback = (indexEvent) => {
+        console.info("testMarquee_0100 get state result is: " + JSON.stringify(indexEvent));
+        expect(indexEvent.data.start).assertEqual(true);
+      }
+      let indexEvent = {
+        eventId: 10,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(indexEvent, callback);
+      } catch (err) {
+        console.info("testMarquee_0100 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info("testMarquee_0100 click result is: " + JSON.stringify(sendEventByKey('button',10,"")));
+      await Utils.sleep(1000);
+      var callback1 = (eventData) => {
+        console.info("testMarquee_0100 get event state result is: " + JSON.stringify(eventData));
+        expect(eventData.data.ACTION).assertEqual(true);
+      }
+      var innerEventOne = {
+        eventId: 11,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(innerEventOne, callback1);
+      } catch (err) {
+        console.info("testMarquee_0100 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info('testMarquee_0100 END');
+      done();
+    });
+
+    it('testMarquee_0200', 0, async function (done) {
+      console.info('testMarquee_0200 START');
+      await Utils.sleep(1500);
+      let callback = (indexEvent) => {
+        console.info("testMarquee_0200 get state result is: " + JSON.stringify(indexEvent));
+        expect(indexEvent.data.start).assertEqual(true);
+      }
+      let indexEvent = {
+        eventId: 10,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(indexEvent, callback);
+      } catch (err) {
+        console.info("testMarquee_0200 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info("testMarquee_0200 click result is: " + JSON.stringify(sendEventByKey('button',10,"")));
+      await Utils.sleep(1000);
+      var callback1 = (eventData) => {
+        console.info("testMarquee_0200 get event state result is: " + JSON.stringify(eventData));
+        expect(eventData.data.ACTION).assertEqual(true);
+      }
+      var innerEventOne = {
+        eventId: 15,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(innerEventOne, callback1)
+      } catch (err) {
+        console.info("testMarquee_0200 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info('testMarquee_0200 END');
+      done();
+    });
+
+    it('testMarquee_0300', 0, async function (done) {
+      console.info('testMarquee_0300 START');
+      await Utils.sleep(1500);
+      let callback = (indexEvent) => {
+        console.info("testMarquee_0300 get state result is: " + JSON.stringify(indexEvent));
+        expect(indexEvent.data.start).assertEqual(true);
+      }
+      let indexEvent = {
+        eventId: 10,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(indexEvent, callback);
+      } catch (err) {
+        console.info("testMarquee_0300 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info("testMarquee_0300 click result is: " + JSON.stringify(sendEventByKey('button',10,"")));
+      await Utils.sleep(1000);
+      var callback1 = (eventData) => {
+        console.info("testMarquee_0300 get event state result is: " + JSON.stringify(eventData));
+        expect(eventData.data.ACTION).assertEqual(true);
+      }
+      var innerEventOne = {
+        eventId: 16,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(innerEventOne, callback1)
+      } catch (err) {
+        console.info("testMarquee_0300 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info('testMarquee_0300 END');
+      done();
+    });
+  })
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/OverlayJsunit.test.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
+import router from '@system.router';
+import events_emitter from '@ohos.events.emitter'
+import Utils from './Utils';
+
+export default function enableJsunit() {
+  describe('appInfoTest', function () {
+    beforeEach(async function (done) {
+      console.info("overlay beforeEach start");
+      let options = {
+        uri: 'pages/overlay',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get overlay state pages: " + JSON.stringify(pages));
+        if (!("overlay" == pages.name)) {
+          console.info("get overlay state pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push overlay page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push overlay page error:" + JSON.stringify(result));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("overlay after each called");
+    });
+
+    it('testOverlay01', 0, async function (done) {
+      console.info('[testOverlay01] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('overlay');
+      let obj = JSON.parse(strJson);
+      console.info("[testOverlay01] obj is: " + JSON.stringify(obj.$attrs.overlay));
+      expect(obj.$attrs.overlay.title).assertEqual("old title");
+      expect(obj.$attrs.overlay.options.align).assertEqual("Alignment.Bottom");
+      expect(obj.$attrs.overlay.options.offset.x).assertEqual('0.000000vp');
+      expect(obj.$attrs.overlay.options.offset.y).assertEqual('-15.000000vp');
+      console.info('[testOverlay01] END');
+      done();
+    });
+
+    it('testOverlay02', 0, async function (done) {
+      console.info('[testOverlay02] START');
+      try {
+        var eventData = {
+          data: {
+            "title": "new title",
+            "align": "Alignment.TopStart",
+            "x": 30,
+            "y": -30
+          }
+        }
+        var innerEvent = {
+          eventId: 83,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testOverlay02] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testOverlay02] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('overlay');
+      let obj = JSON.parse(strJson);
+      console.info("[testOverlay02] obj is: " + JSON.stringify(obj.$attrs.overlay));
+      expect(obj.$attrs.overlay.title).assertEqual("new title");
+      expect(obj.$attrs.overlay.options.align).assertEqual("Alignment.TopStart");
+      expect(obj.$attrs.overlay.options.offset.x).assertEqual('30.000000vp');
+      expect(obj.$attrs.overlay.options.offset.y).assertEqual('-30.000000vp');
+      console.info('testOverlay02 END');
+      done();
+    });
+  })
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/StepperJsunit.test.ets

+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+// @ts-nocheck
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
+import router from '@system.router';
+import Utils from './Utils';
+import events_emitter from '@ohos.events.emitter';
+
+export default function stepperJsunit() {
+  describe('stepperTest', function () {
+    beforeEach(async function (done) {
+      let options = {
+        uri: 'pages/stepper',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get stepper state success " + JSON.stringify(pages));
+        if (!("stepper" == pages.name)) {
+          console.info("get stepper state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(1000);
+          console.info("push stepper page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push stepper page error " + JSON.stringify(result));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("stepper after each called");
+    });
+
+    it('stepperTest_0100', 0, async function (done) {
+      console.info('stepperTest_0100 START');
+      let strJson = getInspectorByKey('stepper');
+      console.info("stepperTest_0100 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("stepperTest_0100 component obj is: " + JSON.stringify(obj));
+      expect(obj.$type).assertEqual('Stepper');
+      expect(obj.$attrs.index).assertEqual('0');
+      console.info('stepperTest_0100 END');
+      done();
+    });
+
+    it('stepperTest_0200', 0, async function (done) {
+      console.info('stepperTest_0200 START');
+      let strJson = getInspectorByKey('stepper');
+      console.info("stepperTest_0200 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("stepperTest_0200 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.index).assertEqual('0');
+      try {
+        let eventData = {
+          data: {
+            "currentIndex": "1",
+          }
+        }
+        let indexEvent = {
+          eventId: 12,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("stepperTest_0200 start to publish emit");
+        events_emitter.emit(indexEvent, eventData);
+      } catch (err) {
+        console.log("stepperTest_0200 change component data error: " + err.message);
+      }
+      await Utils.sleep(3000);
+      let strJsonNew = getInspectorByKey('stepper');
+      let objNew = JSON.parse(strJsonNew);
+      console.info("stepperTest_0200 component objNew is: " + JSON.stringify(objNew));
+      expect(objNew.$attrs.index).assertEqual('1');
+      console.info('stepperTest_0200 END');
+      done();
+    });
+  })
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/SwiperJsunit.test.ets

@@ -16,7 +16,7 @@
 import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
 import router from '@system.router';
 import Utils from './Utils';
-import events_emitter from '@ohos.emitter';
+import events_emitter from '@ohos.events.emitter';
 
 export default function swiperJsunit() {
   describe('swiperTest', function () {
@@ -28,7 +28,7 @@ export default function swiperJsunit() {
         router.clear();
         let pages = router.getState();
         console.info("get swiper state success " + JSON.stringify(pages));
-        if (!("stepper" == pages.name)) {
+        if (!("swiper" == pages.name)) {
           console.info("get swiper state success " + JSON.stringify(pages.name));
           let result = await router.push(options);
           await Utils.sleep(1000);
@@ -53,59 +53,90 @@ export default function swiperJsunit() {
       console.info("swiperTest_0100 component obj is: " + JSON.stringify(obj));
       expect(obj.$type).assertEqual('Swiper');
       expect(obj.$attrs.index).assertEqual('1');
-      expect(obj.$attrs.autoPlay).assertEqual('true');
-      expect(obj.$attrs.interval).assertEqual('4000');
+      done();
+    });
+
+    it('swiperTest_0200', 0, async function (done) {
+      console.info('swiperTest_0200 START');
+      let strJson = getInspectorByKey('swiper');
+      console.info("swiperTest_0200 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("swiperTest_0200 component obj is: " + JSON.stringify(obj));
       expect(obj.$attrs.indicator).assertEqual('true');
       expect(obj.$attrs.loop).assertEqual('false');
+      console.info('swiperTest_0200 END');
+      done();
+    });
+
+    it('swiperTest_0300', 0, async function (done) {
+      console.info('swiperTest_0300 START');
+      let strJson = getInspectorByKey('swiper');
+      console.info("swiperTest_0300 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("swiperTest_0300 component obj is: " + JSON.stringify(obj));
       expect(obj.$attrs.duration).assertEqual('1000.000000');
       expect(obj.$attrs.vertical).assertEqual('false');
+      console.info('swiperTest_0300 END');
+      done();
+    });
+
+    it('swiperTest_0400', 0, async function (done) {
+      console.info('swiperTest_0400 START');
+      let strJson = getInspectorByKey('swiper');
+      console.info("swiperTest_0400 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("swiperTest_0400 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.autoPlay).assertEqual('true');
+      expect(obj.$attrs.interval).assertEqual('4000');
+      console.info('swiperTest_0400 END');
+      done();
+    });
+
+    it('swiperTest_0500', 0, async function (done) {
+      console.info('swiperTest_0500 START');
+      let strJson = getInspectorByKey('swiper');
+      console.info("swiperTest_0500 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("swiperTest_0500 component obj is: " + JSON.stringify(obj));
       expect(obj.$attrs.itemSpace).assertEqual('0.000000vp');
       expect(obj.$attrs.disableSwipe).assertEqual('false');
-      console.info('swiperTest_0100 END');
+      console.info('swiperTest_0500 END');
       done();
     });
 
-    it('swiperTest_0200', 0, async function (done) {
-      console.info('swiperTest_0200 START');
+    it('swiperTest_0600', 0, async function (done) {
+      console.info('swiperTest_0600 START');
       try {
         let eventData = {
           data: {
             "index": "3",
             "autoPlay": "false",
-            "interval": "3000",
-            "indicator": "false",
-            "duration": "500",
-            "itemSpace": "1",
           }
         }
         let indexEvent = {
           eventId: 17,
           priority: events_emitter.EventPriority.LOW
         }
-        console.info("swiperTest_0200 start to publish emit");
+        console.info("swiperTest_0600 start to publish emit");
         events_emitter.emit(indexEvent, eventData);
       } catch (err) {
-        console.log("swiperTest_0200 change component data error: " + err.message);
+        console.log("swiperTest_0600 change component data error: " + err.message);
       }
       await Utils.sleep(4000);
       let strJsonNew = getInspectorByKey('swiper');
       let objNew = JSON.parse(strJsonNew);
-      console.info("swiperTest_0200 component objNew is: " + JSON.stringify(objNew));
+      console.info("swiperTest_0600 component objNew is: " + JSON.stringify(objNew));
       expect(objNew.$attrs.index).assertEqual('3');
       expect(objNew.$attrs.autoPlay).assertEqual('false');
-      expect(objNew.$attrs.interval).assertEqual('3000');
-      expect(objNew.$attrs.indicator).assertEqual('false');
-      expect(objNew.$attrs.duration).assertEqual('500.000000');
-      expect(objNew.$attrs.itemSpace).assertEqual('1.000000vp');
-      console.info('swiperTest_0200 END');
+      console.info('swiperTest_0600 END');
       done();
     });
 
-    it('swiperTest_0300', 0, async function (done) {
-      console.info('swiperTest_0300 START');
+    it('swiperTest_0700', 0, async function (done) {
+      console.info('swiperTest_0700 START');
       await Utils.sleep(1500);
       let callback = (indexEvent) => {
-        console.info("swiperTest_0300 get state result is: " + JSON.stringify(indexEvent));
+        console.info("swiperTest_0700 get state result is: " + JSON.stringify(indexEvent));
         expect(indexEvent.data.ACTION).assertEqual(true);
       }
       let indexEvent = {
@@ -115,19 +146,19 @@ export default function swiperJsunit() {
       try {
         events_emitter.on(indexEvent, callback);
       } catch (err) {
-        console.info("swiperTest_0300 on events_emitter err : " + JSON.stringify(err));
+        console.info("swiperTest_0700 on events_emitter err : " + JSON.stringify(err));
       }
-      console.info("swiperTest_0300 click result is: " + JSON.stringify(sendEventByKey('button1',10,"")));
+      console.info("swiperTest_0700 click result is: " + JSON.stringify(sendEventByKey('button1',10,"")));
       await Utils.sleep(1000);
-      console.info('swiperTest_0300 END');
+      console.info('swiperTest_0700 END');
       done();
     });
 
-    it('swiperTest_0400', 0, async function (done) {
-      console.info('swiperTest_0400 START');
+    it('swiperTest_0800', 0, async function (done) {
+      console.info('swiperTest_0800 START');
       await Utils.sleep(1500);
       let callback = (indexEvent) => {
-        console.info("swiperTest_0400 get state result is: " + JSON.stringify(indexEvent));
+        console.info("swiperTest_0800 get state result is: " + JSON.stringify(indexEvent));
         expect(indexEvent.data.ACTION).assertEqual(true);
       }
       let indexEvent = {
@@ -137,19 +168,19 @@ export default function swiperJsunit() {
       try {
         events_emitter.on(indexEvent, callback);
       } catch (err) {
-        console.info("swiperTest_0400 on events_emitter err : " + JSON.stringify(err));
+        console.info("swiperTest_0800 on events_emitter err : " + JSON.stringify(err));
       }
-      console.info("swiperTest_0400 click result is: " + JSON.stringify(sendEventByKey('button2',10,"")));
+      console.info("swiperTest_0800 click result is: " + JSON.stringify(sendEventByKey('button2',10,"")));
       await Utils.sleep(1000);
-      console.info('swiperTest_0400 END');
+      console.info('swiperTest_0800 END');
       done();
     });
 
-    it('swiperTest_0500', 0, async function (done) {
-      console.info('swiperTest_0500 START');
+    it('swiperTest_0900', 0, async function (done) {
+      console.info('swiperTest_0900 START');
       await Utils.sleep(1500);
       let callbackOne = (indexEventOne) => {
-        console.info("swiperTest_0500 get state result is: " + JSON.stringify(indexEventOne));
+        console.info("swiperTest_0900 get state result is: " + JSON.stringify(indexEventOne));
         expect(indexEventOne.data.ACTION).assertEqual(true);
       }
       let indexEventOne = {
@@ -159,12 +190,12 @@ export default function swiperJsunit() {
       try {
         events_emitter.on(indexEventOne, callbackOne);
       } catch (err) {
-        console.info("swiperTest_0500 on events_emitter err : " + JSON.stringify(err));
+        console.info("swiperTest_0900 on events_emitter err : " + JSON.stringify(err));
       }
-      console.info("swiperTest_0500 click result is: " + JSON.stringify(sendEventByKey('button2',10,"")));
+      console.info("swiperTest_0900 click result is: " + JSON.stringify(sendEventByKey('button2',10,"")));
       await Utils.sleep(1500);
       let callback = (indexEvent) => {
-        console.info("swiperTest_0500 get state result is: " + JSON.stringify(indexEvent));
+        console.info("swiperTest_0900 get state result is: " + JSON.stringify(indexEvent));
         expect(indexEvent.data.ACTION).assertEqual(true);
       }
       let indexEvent = {
@@ -174,14 +205,14 @@ export default function swiperJsunit() {
       try {
         events_emitter.on(indexEvent, callback);
       } catch (err) {
-        console.info("swiperTest_0500 on events_emitter err : " + JSON.stringify(err));
+        console.info("swiperTest_0900 on events_emitter err : " + JSON.stringify(err));
       }
-      console.info('swiperTest_0500 END');
+      console.info('swiperTest_0900 END');
       done();
     });
 
-    it('swiperTest_0600', 0, async function (done) {
-      console.info('swiperTest_0600 START');
+    it('swiperTest_1000', 0, async function (done) {
+      console.info('swiperTest_1000 START');
       try {
         let eventData = {
           data: {
@@ -193,18 +224,75 @@ export default function swiperJsunit() {
           eventId: 55,
           priority: events_emitter.EventPriority.LOW
         }
-        console.info("swiperTest_0600 start to publish emit");
+        console.info("swiperTest_1000 start to publish emit");
         events_emitter.emit(indexEvent, eventData);
       } catch (err) {
-        console.log("swiperTest_0600 change component data error: " + err.message);
+        console.log("swiperTest_1000 change component data error: " + err.message);
       }
       await Utils.sleep(3000);
       let strJsonNew = getInspectorByKey('swiper');
       let objNew = JSON.parse(strJsonNew);
-      console.info("swiperTest_0600 component objNew is: " + JSON.stringify(objNew));
+      console.info("swiperTest_1000 component objNew is: " + JSON.stringify(objNew));
       expect(objNew.$attrs.loop).assertEqual('true');
       expect(objNew.$attrs.vertical).assertEqual('true');
-      console.info('swiperTest_0600 END');
+      console.info('swiperTest_1000 END');
+      done();
+    });
+
+
+    it('swiperTest_1100', 0, async function (done) {
+      console.info('swiperTest_1100 START');
+      try {
+        let eventData = {
+          data: {
+            "interval": "3000",
+            "indicator": "false",
+          }
+        }
+        let indexEvent = {
+          eventId: 56,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("swiperTest_1100 start to publish emit");
+        events_emitter.emit(indexEvent, eventData);
+      } catch (err) {
+        console.log("swiperTest_1100 change component data error: " + err.message);
+      }
+      await Utils.sleep(4000);
+      let strJsonNew = getInspectorByKey('swiper');
+      let objNew = JSON.parse(strJsonNew);
+      console.info("swiperTest_1100 component objNew is: " + JSON.stringify(objNew));
+      expect(objNew.$attrs.interval).assertEqual('3000');
+      expect(objNew.$attrs.indicator).assertEqual('false');
+      console.info('swiperTest_1100 END');
+      done();
+    });
+
+    it('swiperTest_1200', 0, async function (done) {
+      console.info('swiperTest_1200 START');
+      try {
+        let eventData = {
+          data: {
+            "duration": "500",
+            "itemSpace": "1",
+          }
+        }
+        let indexEvent = {
+          eventId: 57,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("swiperTest_1200 start to publish emit");
+        events_emitter.emit(indexEvent, eventData);
+      } catch (err) {
+        console.log("swiperTest_1200 change component data error: " + err.message);
+      }
+      await Utils.sleep(4000);
+      let strJsonNew = getInspectorByKey('swiper');
+      let objNew = JSON.parse(strJsonNew);
+      console.info("swiperTest_1200 component objNew is: " + JSON.stringify(objNew));
+      expect(objNew.$attrs.duration).assertEqual('500.000000');
+      expect(objNew.$attrs.itemSpace).assertEqual('1.000000vp');
+      console.info('swiperTest_1200 END');
       done();
     });
   })

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/SystemRouterJsunit.test.ets

@@ -16,7 +16,7 @@
 import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
 import router from '@system.router';
 import Utils from './Utils';
-import events_emitter from '@ohos.emitter';
+import events_emitter from '@ohos.events.emitter';
 
 export default function systemRouterJsunit() {
   describe('systemRouterTest', function () {

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/Utils.ets

-// @ts-nocheck
-/**
- * Copyright (c) 2021 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default class Utils {
-  static rect_left;
-  static rect_top;
-  static rect_right;
-  static rect_bottom;
-  static rect_value;
-
-  static sleep(time) {
-    return new Promise((resolve, reject) => {
-      setTimeout(() => {
-        resolve()
-      }, time)
-    }).then(() => {
-      console.info(`sleep ${time} over...`)
-    })
-  }
-
-  static getComponentRect(key) {
-    let strJson = getInspectorByKey(key);
-    let obj = JSON.parse(strJson);
-    console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj));
-    let rectInfo = JSON.parse('[' + obj.$rect + ']')
-    console.info("[getInspectorByKey] rectInfo is: " + rectInfo);
-    this.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0]
-    this.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1]
-    this.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0]
-    this.rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1]
-    return this.rect_value = {
-      "left": this.rect_left, "top": this.rect_top, "right": this.rect_right, "bottom": this.rect_bottom
-    }
-  }
-
-  static async swipe(downX, downY, upX, upY, steps) {
-    console.info('start to swipe')
-    this.drags(downX, downY, upX, upY, steps, false)
-  }
-
-  static async drag(downX, downY, upX, upY, steps) {
-    console.info('start to drag')
-    this.drags(downX, downY, upX, upY, steps, true)
-  }
-
-  static async drags(downX, downY, upX, upY, steps, drag) {
-    var xStep;
-    var yStep;
-    var swipeSteps;
-    var ret;
-    xStep = 0;
-    yStep = 0;
-    ret = false;
-    swipeSteps = steps;
-    if (swipeSteps == 0) {
-      swipeSteps = 1;
-    }
-    xStep = (upX - downX) / swipeSteps;
-    yStep = (upY - downY) / swipeSteps;
-    console.info('move step is: ' + 'xStep: ' + xStep + '    yStep: ' + yStep)
-    var downPonit: TouchObject = {
-      id: 1,
-      x: downX,
-      y: downY,
-      type: TouchType.Down,
-    }
-    console.info('down touch started: ' + JSON.stringify(downPonit))
-    sendTouchEvent(downPonit);
-    console.info('start to move')
-    if (drag) {
-      await this.sleep(500)
-    }
-    for (var i = 1;i <= swipeSteps; i++) {
-      var movePoint: TouchObject = {
-        id: 1,
-        x: downX + (xStep * i),
-        y: downY + (yStep * i),
-        type: TouchType.Move
-      }
-      console.info('move touch started: ' + JSON.stringify(movePoint))
-      ret = sendTouchEvent(movePoint)
-      if (ret == false) {
-        break;
-      }
-      await this.sleep(5)
-    }
-    console.info('start to up')
-    if (drag) {
-      await this.sleep(100)
-    }
-    var upPoint: TouchObject = {
-      id: 1,
-      x: upX,
-      y: upY,
-      type: TouchType.Up,
-    }
-    console.info('up touch started: ' + JSON.stringify(upPoint))
-    sendTouchEvent(upPoint)
-    await this.sleep(500)
-  }
-}
-
-
-
-
+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default class Utils {
+  static rect_left;
+  static rect_top;
+  static rect_right;
+  static rect_bottom;
+  static rect_value;
+
+  static sleep(time) {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        resolve()
+      }, time)
+    }).then(() => {
+      console.info(`sleep ${time} over...`)
+    })
+  }
+
+  static getComponentRect(key) {
+    let strJson = getInspectorByKey(key);
+    let obj = JSON.parse(strJson);
+    console.info("[getInspectorByKey] current component obj is: " + JSON.stringify(obj));
+    let rectInfo = JSON.parse('[' + obj.$rect + ']')
+    console.info("[getInspectorByKey] rectInfo is: " + rectInfo);
+    this.rect_left = JSON.parse('[' + rectInfo[0] + ']')[0]
+    this.rect_top = JSON.parse('[' + rectInfo[0] + ']')[1]
+    this.rect_right = JSON.parse('[' + rectInfo[1] + ']')[0]
+    this.rect_bottom = JSON.parse('[' + rectInfo[1] + ']')[1]
+    return this.rect_value = {
+      "left": this.rect_left, "top": this.rect_top, "right": this.rect_right, "bottom": this.rect_bottom
+    }
+  }
+
+  static async swipe(downX, downY, upX, upY, steps) {
+    console.info('start to swipe')
+    this.drags(downX, downY, upX, upY, steps, false)
+  }
+
+  static async drag(downX, downY, upX, upY, steps) {
+    console.info('start to drag')
+    this.drags(downX, downY, upX, upY, steps, true)
+  }
+
+  static async drags(downX, downY, upX, upY, steps, drag) {
+    var xStep;
+    var yStep;
+    var swipeSteps;
+    var ret;
+    xStep = 0;
+    yStep = 0;
+    ret = false;
+    swipeSteps = steps;
+    if (swipeSteps == 0) {
+      swipeSteps = 1;
+    }
+    xStep = (upX - downX) / swipeSteps;
+    yStep = (upY - downY) / swipeSteps;
+    console.info('move step is: ' + 'xStep: ' + xStep + '    yStep: ' + yStep)
+    var downPonit: TouchObject = {
+      id: 1,
+      x: downX,
+      y: downY,
+      type: TouchType.Down,
+    }
+    console.info('down touch started: ' + JSON.stringify(downPonit))
+    sendTouchEvent(downPonit);
+    console.info('start to move')
+    if (drag) {
+      await this.sleep(500)
+    }
+    for (var i = 1;i <= swipeSteps; i++) {
+      var movePoint: TouchObject = {
+        id: 1,
+        x: downX + (xStep * i),
+        y: downY + (yStep * i),
+        type: TouchType.Move
+      }
+      console.info('move touch started: ' + JSON.stringify(movePoint))
+      ret = sendTouchEvent(movePoint)
+      if (ret == false) {
+        break;
+      }
+      await this.sleep(5)
+    }
+    console.info('start to up')
+    if (drag) {
+      await this.sleep(100)
+    }
+    var upPoint: TouchObject = {
+      id: 1,
+      x: upX,
+      y: upY,
+      type: TouchType.Up,
+    }
+    console.info('up touch started: ' + JSON.stringify(upPoint))
+    sendTouchEvent(upPoint)
+    await this.sleep(500)
+  }
+}
+
+
+
+

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/ZIndexJsunit.test.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
+import router from '@system.router';
+import events_emitter from '@ohos.events.emitter';
+import Utils from './Utils';
+
+export default function enableJsunit() {
+  describe('appInfoTest', function () {
+    beforeEach(async function (done) {
+      console.info("zIndex beforeEach start");
+      let options = {
+        uri: 'pages/zIndex',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get zIndex state pages: " + JSON.stringify(pages));
+        if (!("zIndex" == pages.name)) {
+          console.info("get zIndex state pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push zIndex page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push zIndex page error:" + JSON.stringify(result));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("zIndex after each called");
+    });
+
+    it('testZIndex01', 0, async function (done) {
+      console.info('[testZIndex01] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('zIndex');
+      let obj = JSON.parse(strJson);
+      console.info("[testZIndex01] obj is: " + JSON.stringify(obj.$attrs));
+      expect(obj.$attrs.zIndex).assertEqual(1);
+      console.info('[testZIndex01] END');
+      done();
+    });
+
+    it('testZIndex02', 0, async function (done) {
+      console.info('[testZIndex02] START');
+      try {
+        var eventData = {
+          data: {
+            "zIndex": 4
+          }
+        }
+        var innerEvent = {
+          eventId: 84,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testZIndex02] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testZIndex02] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('zIndex');
+      let obj = JSON.parse(strJson);
+      console.info("[testZIndex02] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.zIndex).assertEqual(4);
+      console.info('testZIndex02 END');
+      done();
+    });
+  })
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/general-properties/BackgroundJsunit.test.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
+import router from '@system.router';
+import events_emitter from '@ohos.events.emitter'
+import Utils from '../Utils.ets';
+
+export default function backgroundJsunit() {
+  describe('backgroundTest', function () {
+    beforeEach(async function (done) {
+      console.info("background beforeEach start");
+      let options = {
+        uri: 'pages/general-properties/background',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get background state success " + JSON.stringify(pages));
+        if (!("background" == pages.name)) {
+          console.info("get background state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push background page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push background page error " + JSON.stringify(result));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("background after each called");
+    });
+
+    it('testBackground_0100', 0, async function (done) {
+      console.info('testBackground_0100 START');
+      await Utils.sleep(4000);
+      let strJson = getInspectorByKey('fontColor');
+      console.info("testBackground_0100 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("testBackground_0100 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.fontColor).assertEqual("#FFFF0000");
+      console.info('testBackground_0100 END');
+      done();
+    });
+
+    it('testBackground_0200', 0, async function (done) {
+      console.info('testBackground_0200 START');
+      await Utils.sleep(1000);
+      try {
+        var eventData = {
+          data: {
+            "color": '0xFF0000'
+          }
+        }
+        var innerEvent = {
+          eventId: 281,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("testBackground_0200 start pages");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("testBackground_0200 change component data error: " + err.message);
+      }
+      await Utils.sleep(3000);
+      let strJson = getInspectorByKey('backgroundColor');
+      console.info("testBackground_0200 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("testBackground_0200 rowDirection: " + obj.$attrs.direction);
+      expect(obj.$attrs.backgroundColor).assertEqual("#FFEEEE00");
+      done();
+    });
+
+    it('testBackground_0300', 0, async function (done) {
+      console.info('testBackground_0300 START');
+      await Utils.sleep(4000);
+      let strJson = getInspectorByKey('backgroundColor');
+      console.info("testBackground_0300 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("testBackground_0300 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.borderWidth).assertEqual("1.000000vp");
+      console.info('testBackground_0300 END');
+      done();
+    });
+  })
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/general-properties/BorderJsunit.test.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
+import router from '@system.router';
+import events_emitter from '@ohos.events.emitter'
+import Utils from '../Utils.ets';
+
+export default function borderJsunit() {
+  describe('borderTest', function () {
+    beforeEach(async function (done) {
+      console.info("border beforeEach start");
+      let options = {
+        uri: 'pages/general-properties/border',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get border state success " + JSON.stringify(pages));
+        if (!("border" == pages.name)) {
+          console.info("get border state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push border page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push border page error " + JSON.stringify(result));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("border after each called");
+    });
+
+    it('testBorder_0100', 0, async function (done) {
+      console.info('testBorder_0100 START');
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('borderWidth');
+      console.info("testBorder_0100 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("testBorder_0100 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.borderWidth).assertEqual("5.000000vp");
+      console.info('testBorder_0100 END');
+      done();
+    });
+
+    it('testBorder_0200', 0, async function (done) {
+      console.info('testBorder_0200 START');
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('borderColor');
+      console.info("testBorder_0200 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("testBorder_0200 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.borderColor).assertEqual("#FF317AF7");
+      console.info('testBorder_0200 END');
+      done();
+    });
+
+    it('testBorder_0300', 0, async function (done) {
+      console.info('testBorder_0300 START');
+      await Utils.sleep(2000);
+      try {
+        var eventData = {
+          data: {
+            "borderRadius": 70
+          }
+        }
+        var innerEvent = {
+          eventId: 29,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testBorder_0300] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testBorder_0300] change component data error: " + err.message);
+      }
+      await Utils.sleep(3000);
+      let strJson = getInspectorByKey('borderRadius');
+      console.info("testBorder_0300 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("testBorder_0300 component obj is: " + obj.$attrs.borderRadius);
+      expect(obj.$attrs.borderRadius).assertEqual("70.000000vp");
+      console.info('testBorder_0300 END');
+      done();
+    });
+  })
+}
+

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/general-properties/ClickEventJsunit.test.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
+import router from '@system.router';
+import events_emitter from '@ohos.events.emitter';
+import Utils from '../Utils.ets';
+
+export default function clickEventJsunit() {
+  beforeEach(async function (done) {
+    console.info("clickEvent beforeEach start");
+    let options = {
+      uri: 'pages/general-properties/clickEvent',
+    }
+    try {
+      router.clear();
+      let pages = router.getState();
+      console.info("get clickEvent state pages:" + JSON.stringify(pages));
+      if (!("opacitySetting" == pages.name)) {
+        console.info("get clickEvent state pages.name:" + JSON.stringify(pages.name));
+        let result = await router.push(options);
+        await Utils.sleep(2000);
+        console.info("push clickEvent page result:" + JSON.stringify(result));
+      }
+    } catch (err) {
+      console.error("push clickEvent page error:" + JSON.stringify(result));
+    }
+    done()
+  });
+
+  afterEach(async function () {
+    await Utils.sleep(1000);
+    console.info("clickEvent after each called");
+  });
+
+  it('testClickEvent001', 0, async function (done) {
+    await Utils.sleep(1000)
+    let rect = await Utils.getComponentRect('button')
+    console.info("[testClickEvent001] rectInfo is " + JSON.stringify(rect));
+    let x_value = rect.left + (rect.right - rect.left) / 2
+    let y_value = rect.top + (rect.bottom - rect.top) / 2
+    console.info("[testClickEvent001] onTouch location is: " + "[x]=== " + x_value + "   [y]===" + y_value);
+    var callback = (eventData) => {
+      console.info("[testClickEvent001] get event state result is: " + JSON.stringify(eventData));
+      expect(eventData.data.ACTION).assertEqual(true)
+      let event = JSON.parse(eventData.data.event);
+      expect(event.screenX).assertEqual(240)
+      expect(event.screenY).assertEqual(60)
+      expect(event.x).assertEqual(240)
+      expect(event.y).assertEqual(60)
+    }
+    var innerEvent = {
+      eventId: 30,
+      priority: events_emitter.EventPriority.LOW
+    }
+    try {
+      events_emitter.on(innerEvent, callback)
+    } catch (err) {
+      console.info("[testClickEvent001] on events_emitter err : " + JSON.stringify(err));
+    }
+    console.info('[testClickEvent001] sendEventByKey ' + JSON.stringify(sendEventByKey('button', 10, "")));
+    await Utils.sleep(1000)
+    console.info('[testClickEvent001] testSendTouchEvent END');
+    done();
+  });
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/general-properties/OpacitySettingJsunit.test.ets

+// @ts-nocheck
+/**
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "deccjsunit/index.ets"
+import router from '@system.router';
+import events_emitter from '@ohos.events.emitter'
+import Utils from '../Utils.ets';
+
+export default function opacitySettingJsunit() {
+  beforeEach(async function (done) {
+    console.info("opacitySetting beforeEach start");
+    let options = {
+      uri: 'pages/general-properties/opacitySetting',
+    }
+    try {
+      router.clear();
+      let pages = router.getState();
+      console.info("get opacitySetting state pages:" + JSON.stringify(pages));
+      if (!("opacitySetting" == pages.name)) {
+        console.info("get opacitySetting state pages.name:" + JSON.stringify(pages.name));
+        let result = await router.push(options);
+        await Utils.sleep(2000);
+        console.info("push opacitySetting page result:" + JSON.stringify(result));
+      }
+    } catch (err) {
+      console.error("push opacitySetting page error:" + JSON.stringify(result));
+    }
+    done()
+  });
+
+  afterEach(async function () {
+    await Utils.sleep(1000);
+    console.info("opacitySetting after each called");
+  });
+
+  it('testOpacitySetting001', 0, async function (done) {
+    console.info('[testOpacitySetting001] START');
+    await Utils.sleep(1000);
+    let strJson = getInspectorByKey('opacity');
+    let obj = JSON.parse(strJson);
+    console.info("[testOpacitySetting001] component obj is: " + JSON.stringify(obj));
+    expect(obj.$attrs.opacity).assertEqual(1);
+    done();
+  });
+
+  it('testOpacitySetting002', 0, async function (done) {
+    console.info('[testOpacitySetting002] START');
+    try {
+      var eventData = {
+        data: {
+          "opacityValue": "0.7"
+        }
+      }
+      var innerEvent = {
+        eventId: 100,
+        priority: events_emitter.EventPriority.LOW
+      }
+      console.info("[testOpacitySetting002] start to publish emit");
+      events_emitter.emit(innerEvent, eventData);
+    } catch (err) {
+      console.log("[testOpacitySetting002] change component data error: " + err.message);
+    }
+    await Utils.sleep(2000);
+    let strJsonNew = getInspectorByKey('opacity');
+    let objNew = JSON.parse(strJsonNew);
+    console.info("[testOpacitySetting002] component objNew is: " + JSON.stringify(objNew));
+    expect(objNew.$attrs.opacity).assertEqual(0.7);
+    done();
+  });
+}
\ No newline at end of file