!2223 add ace component

Merge pull request !2223 from tomatoDevboy/master

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

@@ -59,6 +59,7 @@
         },
         "pages": [
           "pages/index",
+          "pages/toggle",
           "pages/actionSheet",
           "pages/gauge",
           "pages/ellipse",
@@ -66,7 +67,6 @@
           "pages/systemRouterB",
           "pages/marquee",
           "pages/stepper",
-          "pages/gridContainer",
           "pages/list",
           "pages/general-properties/sizeSetting",
           "pages/general-properties/positionSetting",
@@ -94,6 +94,7 @@
           "pages/general-properties/flex",
           "pages/swiper",
           "pages/gridPage",
+          "pages/span",
           "pages/text",
           "pages/badge",
           "pages/canvas",
@@ -110,7 +111,49 @@
           "pages/tabs",
           "pages/tapGesture",
           "pages/progress",
-          "pages/animate"
+          "pages/animate",
+          "pages/column",
+          "pages/rating",
+          "pages/canvas2",
+          "pages/shape",
+          "pages/motionPath",
+          "pages/scrollCode",
+          "pages/transition",
+          "pages/priorityGesture",
+          "pages/parallelGesture",
+          "pages/alertDialog",
+          "pages/blank",
+          "pages/sharedTransition",
+          "pages/sharedTransition2",
+          "pages/alphabetIndexer",
+          "pages/line",
+          "pages/circle",
+          "pages/aboutToDisappear",
+          "pages/timeStamp",
+          "pages/bindMenu",
+          "pages/bindPopup",
+          "pages/gridContainer",
+          "pages/direction",
+          "pages/divider",
+          "pages/listItem",
+          "pages/systemPrompt",
+          "pages/configuration",
+          "pages/sourceType",
+          "pages/NavigatorBackCode",
+          "pages/NavigatorCode",
+          "pages/NavigatorDetailCode",
+          "pages/PieceCode",
+          "pages/sourceType",
+          "pages/pageTransition",
+          "pages/pageTransition2",
+          "pages/scrollBar",
+          "pages/search",
+          "pages/pageTransition2",
+          "pages/lifecycle",
+          "pages/pageTransition2",
+          "pages/navigation",
+          "pages/stateStyle",
+          "pages/focus"
         ],
         "name": ".MainAbility",
         "window": {

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/NavigatorBackCode.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 NavigatorBackCode {
+  build() {
+    Column() {
+      Navigator({ target: 'pages/NavigatorCode', type: NavigationType.Back }) {
+        Text('Return to Navigator Page').width('100%').textAlign(TextAlign.Center)
+      }
+    }.width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/NavigatorCode.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 NavigatorCode {
+  @State active: boolean = false;
+  @State Text: string = 'news';
+  @State typeValue: NavigationType = NavigationType.Back;
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      var navigationTypeValue = eventData.data.typeValue;
+      console.info("navigationTypeValue:" + navigationTypeValue);
+      if (navigationTypeValue != null) {
+        this.typeValue = navigationTypeValue;
+        console.info("this.typeValue:" + this.typeValue);
+      } else {
+        console.info("navigationTypeValue is null or empty " + NavigatorCode);
+      }
+    } else {
+      console.info("NavigatorCode page color not change called:" + JSON.stringify(eventData));
+    }
+  }
+
+  onPageShow() {
+    console.info('navigatorCode page show called');
+    var stateChangeEvent = {
+      eventId: 90,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+
+    var stateChangeEvent = {
+      eventId: 101,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack)
+  }
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
+      Navigator({ target: 'pages/NavigatorDetailCode', type: NavigationType.Push }) {
+        Text('Go to ' + this.Text + ' page').width('100%').textAlign(TextAlign.Center)
+      }.params({ text: this.Text }).key('button')
+
+      Navigator() {
+        Text('Back to previous page').width('100%').textAlign(TextAlign.Center)
+      }.active(this.active)
+      .onClick(() => {
+        this.active = true
+      })
+    }.height(150).width(350).padding(35)
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/NavigatorDetailCode.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 router from '@system.router'
+
+@Entry
+@Component
+struct NavigatorDetailCode {
+  @State text: string = router.getParams().text
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
+      Navigator({ target: 'pages/NavigatorBackCode', type: NavigationType.Push }) {
+        Text('Go to back page').width('100%').height(20)
+      }
+
+      Text('This is ' + this.text + ' page').width('100%').textAlign(TextAlign.Center)
+    }
+    .width('100%').height(200).padding({ left: 35, right: 35, top: 35 })
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/PieceCode.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 PieceCode {
+  @State fontColor: Color = "#FF008000";
+
+  onPageShow() {
+  }
+
+  build() {
+    Column() {
+      Piece({ content: "piece" , icon: "1" })
+        .iconPosition(IconPosition.End)
+        .fontColor(this.Color)
+        .fontStyle(FontStyle.Italic)
+        .key("piece")
+    }.width('100%').margin({ top: 300 })
+    .height('100%')
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/aboutToDisappear.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 ParentComp {
+  @State isCountDown: boolean = true
+  build() {
+    Column() {
+      Text(this.isCountDown ? 'Count Down' : 'Stopwatch')
+      if (this.isCountDown) {
+        Image($rawfile('ic_health_heart.png')).width(50).height(50)
+        TimerComponent({counter: 10, changePerSec: -1, showInColor: Color.Red})
+      } else {
+        Image($rawfile('ic_health_heart.png')).width(150).height(150)
+        TimerComponent({counter: 0, changePerSec: +1, showInColor: Color.Black })
+      }
+      Button(this.isCountDown ? 'Swtich to Stopwatch' : 'Switch to Count Down')
+        .onClick(() => {
+          this.isCountDown = !this.isCountDown
+        })
+      .key('button1')
+    }
+  }
+}
+
+@Component
+struct TimerComponent {
+  @State counter: number = 0
+  private changePerSec: number = -1
+  private showInColor: Color = Color.Black
+  private timerId : number = -1
+  @State onActionCalled :boolean = false
+
+  build() {
+    Text(`${this.counter}sec`)
+      .fontColor(this.showInColor)
+  }
+
+  aboutToAppear() {
+    this.timerId = setInterval(() => {this.counter += this.changePerSec}, 1000)
+  }
+
+  aboutToDisappear() {
+    if (this.timerId > 0) {
+      clearTimeout(this.timerId)
+      console.info('ting--1');
+      try {
+        var backData = {
+          data: {
+            "ACTION": this.onActionCalled,
+          }
+        }
+        var backEvent = {
+          eventId: 160,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("button1 start to emit action state")
+        events_emitter.emit(backEvent, backData)
+      } catch (err) {
+        console.info("button1 emit action state err: " + JSON.stringify(err.message))
+      }
+      this.timerId = -1
+    }
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/alertDialog.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 AlertDialogExample {
+  build() {
+    Column({ space: 5 }) {
+      Button('one button dialog')
+        .onClick(() => {
+          AlertDialog.show(
+            {
+              title: 'title',
+              message: 'text',
+              confirm: {
+                value: 'button',
+                action: () => {
+                  console.info('Button-clicking callback')
+                }
+              },
+              cancel: () => {
+                console.info('Closed callbacks')
+              }
+            }
+          )
+        })
+        .backgroundColor(0x317aff)
+      Button('two button dialog')
+        .onClick(() => {
+          AlertDialog.show(
+            {
+              title: 'title',
+              message: 'text',
+              primaryButton: {
+                value: 'cancel',
+                action: () => {
+                  console.info('Callback when the first button is clicked')
+                }
+              },
+              secondaryButton: {
+                value: 'ok',
+                action: () => {
+                  console.info('Callback when the second button is clicked')
+                }
+              },
+              cancel: () => {
+                console.info('Closed callbacks')
+              }
+            }
+          )
+        }).backgroundColor(0x317aff)
+    }.width('100%').margin({ top: 5 })
+  }
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/alphabetIndexer.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 AlphabetIndexerSample {
+  private value: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q',
+  'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
+  @State color: Color = Color.Red;
+  @State fontSize: string = 20;
+  @State fontWeight: FontWeight = FontWeight.Bolder;
+  @State fontFamily: string = 'sans-serif';
+  @State fontStyle: FontStyle = FontStyle.Italic;
+
+  build() {
+    AlphabetIndexer({ arrayValue: this.value, selected: 0 })
+      .selectedColor(0xffffff)
+      .popupColor(0xFFFAF0)
+      .selectedBackgroundColor(0xCCCCCC)
+      .popupBackground(0xD2B48C)
+      .usingPopup(true)
+      .selectedFont({ size: 16, weight: FontWeight.Bolder })
+      .popupFont({ size: 30, weight: FontWeight.Bolder })
+      .itemSize(28)
+      .alignStyle(IndexerAlign.Left)
+      .onSelected((index: number) => {
+        console.info(this.value[index] + '被选中了');
+      })
+      .margin({ left: 50 })
+      .font({size: this.fontSize, weight: this.fontWeight, family: this.fontFamily, style: this.fontStyle })
+      .color(this.color)
+      .key('alphabetIndexer')
+  }
+  onPageShow() {
+    console.info('alphabetIndexer page show called');
+    var stateChangeEvent = {
+      eventId: 71,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("alphabetIndexer page state change called:" + JSON.stringify(eventData));
+      let font = JSON.parse(eventData.data.font);
+      if(font) {
+        this.fontSize = font.size;
+        this.fontWeight = font.weight;
+        this.fontFamily = font.family;
+        this.fontStyle = font.style;
+      }
+    }
+  }
+}

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

@@ -18,16 +18,23 @@ import events_emitter from '@ohos.emitter';
 @Entry
 @Component
 struct BadgeExample {
-  @State counts: number = 1
-  @State message: string = 'new'
+  @State counts: number = 1;
+  @State message: string = 'new';
   @State fontSizeValue: number = 20;
+  @State colorValue: Color = Color.Red;
 
   private stateChangCallBack = (eventData) => {
     if (eventData != null) {
       console.info("Badge page state change called:" + JSON.stringify(eventData));
-      if(eventData.data.fontSizeValue != null) {
+      if (eventData.data.fontSizeValue != null) {
         this.fontSizeValue = eventData.data.fontSizeValue;
       }
+      if (eventData.data.colorValue != null) {
+        this.colorValue = eventData.data.colorValue;
+      }
+      if (eventData.data.message != null) {
+        this.message = eventData.data.message;
+      }
     }
   }
 
@@ -45,7 +52,7 @@ struct BadgeExample {
       Badge({
         count: this.counts,
         maxCount: 99,
-        style: { color: 0xFFFFFF, fontSize: this.fontSizeValue, badgeSize: 50, badgeColor: Color.Red }
+        style: { color: this.colorValue, fontSize: this.fontSizeValue, badgeSize: 50, badgeColor: Color.Red }
       }) {
         Button('message')
           .onClick(() => {
@@ -53,6 +60,26 @@ struct BadgeExample {
           })
           .width(200).height(100).backgroundColor(0x317aff).fontSize(20)
       }.width(100).height(50).key('badge')
+
+      Badge({
+        value: this.message,
+        style: { color: this.colorValue, fontSize: 9, badgeSize: 20, badgeColor: Color.Red }
+      }) {
+        Text('message')
+          .width(80).height(50).fontSize(16).lineHeight(37)
+          .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED)
+      }.width(80).height(50).key('badge2')
+
+      Badge({
+        value: '',
+        position: 1,
+        style: { badgeSize: 6, badgeColor: Color.Red }
+      }) {
+        Text('message')
+          .width(90).height(50).fontSize(16).lineHeight(37)
+          .borderRadius(10).textAlign(TextAlign.Center).backgroundColor(0xF3F4ED)
+      }.width(90).height(50)
+
     }.width('100%').margin({ top: 5 })
   }
 }
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/bindMenu.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 MenuExample {
+  @State onActionCalled: boolean = true
+  @Builder MenuBuilder() {
+    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+      Text('text1')
+        .fontSize(20)
+        .width(100)
+        .height(50)
+        .textAlign(TextAlign.Center)
+      Divider().height(10)
+      Text('text2')
+        .fontSize(20)
+        .width(100)
+        .height(50)
+        .textAlign(TextAlign.Center)
+      Divider().height(10)
+      Button('button')
+        .key('button')
+        .fontSize(20)
+        .width(100)
+        .height(50)
+        .onClick(() => {
+          console.info("bindMenu button START")
+          try {
+            var backData = {
+              data: {
+                "ACTION": this.onActionCalled,
+              }
+            }
+            var backEvent = {
+              eventId: 123,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.info("bindMenuTest_0100 start to emit action state")
+            events_emitter.emit(backEvent, backData)
+          } catch (err) {
+            console.info("bindMenuTest_0100 emit action state err: " + JSON.stringify(err.message))
+          }
+        })
+    }.width(100)
+  }
+
+  build() {
+    Column() {
+      Text('click for menu')
+        .key('text')
+    }
+    .width('100%')
+    .margin({ top: 5 })
+    .bindMenu(this.MenuBuilder)
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/bindPopup.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 PopupExample {
+  @State noHandlePopup: boolean = false
+  @State handlePopup: boolean = false
+  @State customPopup: boolean = false
+  @State maskColor: string = 0x33000000
+  @State enableArrow: boolean = true
+  @State placementOnTop: boolean = false
+
+  @Builder popupBuilder() {
+    Row({ space: 2 }) {
+      Image($rawfile('ic_health_heart.png')).width(24).height(24).margin({ left: -5 }).key('image')
+      Text('Custom Popup').fontSize(12).key('text')
+    }.width(100).height(50).backgroundColor(Color.White)
+  }
+
+  build() {
+    Flex({ direction: FlexDirection.Column }) {
+      Button('no handle popup')
+        .key('button2')
+        .onClick(() => {
+          this.noHandlePopup = !this.noHandlePopup
+          try {
+            var backData = {
+              data: {
+                "placementOnTop": this.placementOnTop,
+              }
+            }
+            var backEvent = {
+              eventId: 238,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.info("button2 start to emit action state")
+            events_emitter.emit(backEvent, backData)
+          } catch (err) {
+            console.info("button2 emit action state err: " + JSON.stringify(err.message))
+          }
+        })
+        .bindPopup(this.noHandlePopup, {
+          message: 'content1 content1',
+          placementOnTop: this.placementOnTop,
+          onStateChange: (e) => {
+            console.info(e.isVisible.toString())
+            if (!e.isVisible) {
+              this.noHandlePopup = false
+            }
+          }
+        })
+        .position({ x: 100, y: 50 })
+
+      Button('custom popup 1')
+        .key('button1')
+        .onClick(() => {
+          try {
+            var backData = {
+              data: {
+                "maskColor": this.maskColor,
+                "enableArrow": this.enableArrow
+              }
+            }
+            var backEvent = {
+              eventId: 237,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.info("button1 start to emit action state")
+            events_emitter.emit(backEvent, backData)
+          } catch (err) {
+            console.info("button1 emit action state err: " + JSON.stringify(err.message))
+          }
+        })
+        .position({ x: 100, y: 200 })
+
+      Button('custom popup')
+        .key('button')
+        .onClick(() => {
+          this.customPopup = !this.customPopup
+          try {
+            var backData = {
+              data: {
+                "maskColor": this.maskColor,
+                "enableArrow": this.enableArrow
+              }
+            }
+            var backEvent = {
+              eventId: 236,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.info("button start to emit action state")
+            events_emitter.emit(backEvent, backData)
+          } catch (err) {
+            console.info("button emit action state err: " + JSON.stringify(err.message))
+          }
+        })
+        .bindPopup(this.customPopup, {
+          builder: this.popupBuilder,
+          placement: Placement.Bottom,
+          maskColor: this.maskColor,
+          popupColor: Color.White,
+          enableArrow: this.enableArrow,
+          onStateChange: (e) => {
+            if (!e.isVisible) {
+              this.customPopup = false
+            }
+          }
+        })
+        .position({ x: 100, y: 350 })
+    }.width('100%').padding({ top: 5 })
+  }
+
+  onPageShow() {
+    console.info('customPopupOption page show called');
+    var stateChangeEvent = {
+      eventId: 126,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack)
+  }
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("customPopupOption page state change called:" + JSON.stringify(eventData));
+      if (eventData.data.enableArrow != null) {
+        this.enableArrow = eventData.data.enableArrow;
+      }
+      if (eventData.data.maskColor != null) {
+        this.maskColor = eventData.data.maskColor;
+      }
+    }
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/blank.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 BlankExample {
+  @State colorValue: Color = Color.Blue;
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("Blank page state change called:" + JSON.stringify(eventData));
+      if (eventData.data.colorValue != null) {
+        this.colorValue = eventData.data.colorValue;
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('Blank page show called');
+    var stateChangeEvent = {
+      eventId: 90,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+
+  build() {
+    Column() {
+      Row() {
+        Text('Bluetooth').fontSize(18)
+        Blank().color(this.colorValue).key('blank')
+        Toggle({ type: ToggleType.Switch })
+      }.width('100%').backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 })
+    }.backgroundColor(0xEFEFEF).padding(20)
+  }
+}
\ No newline at end of file

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

@@ -81,6 +81,7 @@ struct CanvasExample {
               this.fill();
               this.textMetrics();
               this.getBitImageSize();
+              this.rotate();
             })
             .key('canvas1')
         }.width('100%').height('350%')
@@ -319,7 +320,8 @@ struct CanvasExample {
   }
   rotate() {
     this.context.rotate(45 * Math.PI / 180);
-    this.context.fillRect(70, 20, 50, 50);
+    this.context.fillRect(180, 20, 50, 50);
+    this.context.rotate(-45 * Math.PI / 180);
   }
   transform() {
     this.context.fillStyle = 'rgb(0,0,0)';

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/circle.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 CircleExample {
+  @State width: string = "450px";
+  @State height: string = "450px";
+  onPageShow() {
+    console.info('[circle] page show called');
+    var stateChangeEvent = {
+      eventId: 455,
+      priority: events_emitter.EventPriority.LOW
+    }
+    console.info('[circle] page show calledA');
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+  private stateChangCallBack = (eventData) => {
+    console.info("[circle] page stateChangCallBack");
+    if (eventData != null) {
+      console.info("[circle] page state change called:" + JSON.stringify(eventData));
+      if(eventData.data.width != null) {
+        this.width = eventData.data.width;
+      }
+      if(eventData.data.height != null) {
+        this.height = eventData.data.height;
+      }
+    }
+  }
+  build() {
+    Flex({ justifyContent: FlexAlign.SpaceAround }) {
+      Circle({ width: 150, height: 150 })
+      Circle()
+        .width(`${this.width}`)
+        .height(`${this.height}`)
+        .key('circle')
+    }.width('100%').height('100%').margin({ top: 5 })
+  }
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/configuration.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 Configuration from '@system.configuration';
+import events_emitter from '@ohos.emitter';
+@Entry
+@Component
+struct promptExample {
+  build(){
+    Column(){
+      Button('click')
+      .key('button')
+      .backgroundColor('#FF0B8FE2')
+      .fontSize(20)
+      .margin({top: 20})
+        .onClick(()=>{
+          console.info('button is start');
+          let localeInfo = Configuration.getLocale();
+          console.info('localeInfo result is' + JSON.stringify(localeInfo));
+          try{
+            var backData = {
+              data: {
+                "COUNTRY": localeInfo.countryOrRegion,
+                "DIR":localeInfo.dir
+              }
+            }
+            console.log("backData is" + JSON.stringify(backData.data));
+            var backEvent = {
+              eventId: 36,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.info("confituration start to emit action state");
+            events_emitter.emit(backEvent, backData);
+          }catch{
+            console.info("confituration emit action state err: " + JSON.stringify(err.message));
+          }
+        })
+    }
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/direction.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 Index {
+  @State direction:FlexDirection = FlexDirection.Column
+  build() {
+    Flex({ direction: this.direction, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Text('Hello World')
+        .fontSize(60)
+        .fontWeight(500)
+      Button('Next')
+        .fontSize(40)
+        .fontWeight(500)
+        .width(280)
+        .height(60)
+    }
+    .key('direction')
+    .width('100%')
+    .height('100%')
+  }
+
+  onPageShow() {
+    console.info('direction page show called');
+    var stateChangeEvent = {
+      eventId: 985,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack)
+  }
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("direction page state change called:" + JSON.stringify(eventData));
+      if (eventData.data.direction != null) {
+        this.direction = eventData.data.direction;
+      }
+    }
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/divider.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 DividerExample {
+  @State color: Color = 0xCCCCCC
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
+      Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC)
+      Row().width('100%').height(40).backgroundColor(0xF1F3F5)
+      Divider()
+      Row().width('100%').height(40).backgroundColor(0xF1F3F5)
+
+      Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC)
+      Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
+        Text('bravery')
+        Divider().vertical(true).margin(20).height(15)
+        Text('effort')
+        Divider().vertical(true).margin(20).height(15)
+        Text('upward')
+      }.width(250)
+
+      Text('Custom Styles').fontSize(9).fontColor(0xCCCCCC)
+      Row().width('100%').height(40).backgroundColor(0xF1F3F5)
+      Divider()
+        .key('Divider')
+        .vertical(false)
+        .strokeWidth(5)
+        .color(this.color)
+        .lineCap(LineCapStyle.Round)
+      Row().width('100%').height(40).backgroundColor(0xF1F3F5)
+    }
+    .width('100%').height(350).padding({ left: 35, right: 35, top: 35 })
+  }
+
+    onPageShow() {
+    console.info('divider page show called');
+    var stateChangeEvent = {
+    eventId: 917,
+    priority: events_emitter.EventPriority.LOW
+  }
+  events_emitter.on(stateChangeEvent, this.stateChangCallBack)
+  }
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("divider page state change called:" + JSON.stringify(eventData));
+      if (eventData.data.color != null) {
+        this.color = eventData.data.color;
+      }
+    }
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/focus.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 FocusableExample {
+  @State textOne: string = ''
+  @State textTwo: string = ''
+  @State textThree: string = 'The third button cannot be focused'
+  @State oneButtonColor: string = '#FF0000'
+  @State twoButtonColor: string = '#FFC0CB'
+  @State threeButtonColor: string = '#87CEFA'
+
+  build() {
+    Column({ space:20 }){
+      Button(this.textOne)
+        .backgroundColor(this.oneButtonColor)
+        .width(300).height(70).fontColor(Color.Black)
+        .focusable(true)
+        .onFocus(() => {
+          this.textOne = 'First Button onFocus'
+          this.oneButtonColor = '#AFEEEE'
+        })
+        .onBlur(() => {
+          this.textOne = 'First Button onBlur'
+          this.oneButtonColor = '#FFC0CB'
+        })
+      Button(this.textTwo)
+        .backgroundColor(this.twoButtonColor)
+        .width(300).height(70).fontColor(Color.Black)
+        .focusable(true)
+        .onFocus(() => {
+          this.textTwo = 'Second Button onFocus'
+          this.twoButtonColor = '#AFEEEE'
+        })
+        .onBlur(() => {
+          this.textTwo = 'Second Button onBlur'
+          this.twoButtonColor = '#FFC0CB'
+        })
+      Button(this.textThree)
+        .backgroundColor(this.threeButtonColor)
+        .width(300).height(70).fontColor(Color.Black)
+        .focusable(false)
+        .onFocus(() => {
+          this.textThree = 'Third Button onFocus'
+          this.threeButtonColor = '#AFEEEE'
+        })
+        .onBlur(() => {
+          this.textThree = 'Third Button onBlur'
+          this.threeButtonColor = '#FFC0CB'
+        })
+    }.width('100%').margin({ top:20 })
+  }
+}
\ No newline at end of file

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

@@ -18,7 +18,7 @@ import events_emitter from '@ohos.emitter'
 @Entry
 @Component
 struct FlexExample {
-
+  @State direction: FlexDirection = FlexDirection.Row
   private stateChangCallBack = (eventData) => {
     if (eventData != null) {
       console.info("Flex page state change called:" + JSON.stringify(eventData));
@@ -117,7 +117,7 @@ struct FlexExample {
           .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)
+      }.key('flex').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/gridContainer.ets

@@ -98,6 +98,7 @@ struct GridContainerExample {
               md: { span: 2, offset: 10 },
               lg: { span: 6, offset: 6 }
             })
+
             .height(50)
             .backgroundColor(0x00BFFF)
             .textAlign(TextAlign.Center)

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/lifecycle.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 EllipseExample {
+
+  onActive(){
+    console.log("lifecycle-->onActive")
+  }
+  onInactive(){
+    console.log("lifecycle-->onInactive")
+  }
+  onShow(){
+    console.log("lifecycle-->onShow")
+  }
+  onCastTempToNormal(){
+    console.log("lifecycle-->onCastTempToNormal")
+  }
+  onVisibilityChanged(){
+    console.log("lifecycle-->onVisibilityChanged")
+  }
+  onTriggerEvent(){
+    console.log("lifecycle-->onTriggerEvent")
+  }
+  onDelete(){
+    console.log("lifecycle-->onDelete")
+  }
+  onAcquireFormState(){
+    console.log("lifecycle-->onAcquireFormState")
+  }
+  onHide(){
+    console.log("lifecycle-->onHide")
+  }
+  onWindowDisplayModeChanged(){
+    console.log("lifecycle-->onWindowDisplayModeChanged")
+  }
+  onStartContinuation(){
+    console.log("lifecycle-->onStartContinuation")
+  }
+  onSaveData(){
+    console.log("lifecycle-->onSaveData")
+  }
+  onCompleteContinuation(){
+    console.log("lifecycle-->onCompleteContinuation")
+  }
+  onRestoreData(){
+    console.log("lifecycle-->onRestoreData")
+  }
+  onRemoteTerminated(){
+    console.log("lifecycle-->onRemoteTerminated")
+  }
+  onSaveAbilityState(){
+    console.log("lifecycle-->onSaveAbilityState")
+  }
+  onRestoreAbilityState(){
+    console.log("lifecycle-->onRestoreAbilityState")
+  }
+  onInactive(){
+    console.log("lifecycle-->onInactive")
+  }
+  onActive(){
+    console.log("lifecycle-->onActive")
+  }
+  onNewWant(){
+    console.log("lifecycle-->onNewWant")
+  }
+  onMemoryLevel(){
+    console.log("lifecycle-->onMemoryLevel")
+  }
+  onCommand(){
+    console.log("lifecycle-->onCommand")
+  }
+  onStop(){
+    console.log("lifecycle-->onStop")
+  }
+  onConnect(){
+    console.log("lifecycle-->onConnect")
+  }
+  onDisconnect(){
+    console.log("lifecycle-->onDisconnect")
+  }
+  onReconnect(){
+    console.log("lifecycle-->onReconnect")
+  }
+  update(){
+    console.log("lifecycle-->update")
+  }
+  normalizeUri(){
+    console.log("lifecycle-->normalizeUri")
+  }
+  batchInsert(){
+    console.log("lifecycle-->batchInsert")
+  }
+  denormalizeUri(){
+    console.log("lifecycle-->denormalizeUri")
+  }
+  openFile(){
+    console.log("lifecycle-->openFile")
+  }
+  getFileTypes(){
+    console.log("lifecycle-->getFileTypes")
+  }
+  onInitialized(){
+    console.log("lifecycle-->onInitialized")
+  }
+  getType(){
+    console.log("lifecycle-->getType")
+  }
+
+  build(){
+    Column(){
+      Button('click')
+        .key('button')
+        .backgroundColor('#FF0B8FE2')
+        .fontSize(20)
+        .margin({top: 20})
+    }
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/line.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 LineExample {
+  @State startPoint:Point = [0,0]
+  @State endPoint:Point = [50,100]
+  build() {
+    Column() {
+      Line({ width: 50, height: 100 }).startPoint(this.startPoint).endPoint(this.endPoint)
+      .key('line')
+    }.margin({ top: 5 })
+  }
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("line page state change called:" + JSON.stringify(eventData));
+      if (eventData.data.startPoint != null) {
+        this.startPoint[0] = eventData.data.startPoint;
+      }
+      if (eventData.data.startPointOne != null) {
+        this.startPoint[1] = eventData.data.startPointOne;
+      }
+      if (eventData.data.endPoint != null) {
+        this.endPoint[0] = eventData.data.endPoint;
+      }
+      if (eventData.data.endPointOne != null) {
+        this.endPoint[1] = eventData.data.endPointOne;
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('line page show called');
+    var stateChangeEvent = {
+      eventId: 233,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/listItem.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 ListItemExample {
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+  @State editFlag: boolean = false;
+  @State sticky: Sticky = Sticky.Normal;
+  @State editMode: boolean = true;
+
+  onPageShow() {
+    console.info('[ListItem] page show called');
+    var stateChangeEvent = {
+      eventId: 1015,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+
+    var stateChangeEventOne = {
+      eventId: 1016,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEventOne, this.stateChangCallBack);
+  }
+
+  private stateChangCallBack = (eventData) => {
+    console.info("[ListItem] page stateChangCallBack");
+    if (eventData != null) {
+      console.info("[ListItem] page state change called:" + JSON.stringify(eventData));
+      if(eventData.data.sticky != null) {
+        this.sticky = eventData.data.sticky;
+      }
+    }
+    if (eventData != null) {
+      console.info("[ListItem] page state change called:" + JSON.stringify(eventData));
+      if(eventData.data.editMode != null) {
+        this.editMode = eventData.data.editMode;
+      }
+    }
+  }
+
+  build() {
+    Column() {
+      List({ space: 20, initialIndex: 0 }) {
+        ListItem() {
+          Text('sticky:Normal , click me edit list')
+            .width('100%').height(40).fontSize(12).fontColor(0xFFFFFF)
+            .textAlign(TextAlign.Center).backgroundColor(0x696969)
+            .onClick(() => {
+              this.editFlag = !this.editFlag
+            })
+        }.sticky(this.sticky).key('ListItem')
+
+        ForEach(this.arr, (item) => {
+          ListItem() {
+            Text('' + item)
+              .width('100%').height(100).fontSize(16)
+              .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
+          }.editable(this.editFlag)
+        }, item => item)
+      }
+      .key('List')
+      .editMode(this.editMode)
+      .onItemDelete((index: number) => {
+        console.info(this.arr[index - 1] + 'Delete')
+        this.arr.splice(index - 1,1)
+        this.editFlag = false
+        return true
+      })
+      .width('90%')
+    }.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/loadingProgress.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 LoadingProgressExample {
+  build() {
+    Column({ space: 5 }) {
+      Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      LoadingProgress()
+        .color(Color.Blue)
+    }.width('100%').margin({ top: 6 })
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/navigation.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 NavigationExample {
+  private arr: number[] = [0, 1, 2, 3, 4, 5]
+  @State hideBar: boolean = true
+  @State toolBar: boolean = true
+  @State hideToolBar: boolean = false
+  @State hideTitleBar: boolean = false
+  @State hideBackButton: boolean = false
+  @State onActionCalled: boolean = false
+  @State titleMode: NavigationTitleMode = NavigationTitleMode.Free
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("tabs page state change called:" + JSON.stringify(eventData));
+      if (eventData.data.vertical != null) {
+        this.titleMode = eventData.data.titleMode;
+      }
+      if (eventData.data.hideToolBar != null) {
+        this.hideToolBar = parseInt(eventData.data.hideToolBar);
+      }
+      if (eventData.data.hideTitleBar != null) {
+        this.hideTitleBar = parseInt(eventData.data.hideTitleBar);
+      }
+      if (eventData.data.hideBackButton != null) {
+        this.hideBackButton = parseInt(eventData.data.hideBackButton);
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('progress page show called');
+    var stateChangeEvent = {
+      eventId: 555,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack)
+  }
+
+  @Builder NavigationTitle() {
+    Column() {
+      Text('title')
+        .width(80)
+        .height(60)
+        .fontColor(Color.Blue)
+        .fontSize(30)
+    }
+    .onClick(() => {
+      console.log("title")
+    })
+  }
+
+  @Builder NavigationMenus() {
+    Row() {
+      Image('images/add.png')
+        .width(25)
+        .height(25)
+      Image('comment/more.png')
+        .width(25)
+        .height(25)
+        .margin({ left: 30 })
+    }.width(100)
+  }
+
+  build() {
+    Column() {
+      Navigation() {
+        Search({ value: '', placeholder: "" }).width('85%').margin(26)
+        List({ space: 5, initialIndex: 0 }) {
+          ForEach(this.arr, (item) => {
+            ListItem() {
+              Text('' + item)
+                .width('90%')
+                .height(80)
+                .backgroundColor('#3366CC')
+                .borderRadius(15)
+                .fontSize(16)
+                .textAlign(TextAlign.Center)
+            }.editable(true)
+          }, item => item)
+        }
+        .listDirection(Axis.Vertical)
+        .key('Navigation')
+        .height(300)
+        .margin({ top: 10, left: 18 })
+        .width('100%')
+
+        Button(this.hideBar ? "tool bar" : "hide bar")
+          .backgroundColor(0x2788D9).width(200).height(100).fontSize(20)
+          .key('NavigationContent1')
+          .onClick(() => {
+            this.hideBar = !this.hideBar;
+            console.info('navigationContent1 current action state is: ' + this.hideBar);
+            try {
+              var backData = {
+                data: {
+                  "ACTION": this.hideBar,
+                }
+              }
+              var backEvent = {
+                eventId: 44,
+                priority: events_emitter.EventPriority.LOW
+              }
+              console.info("navigationContent1 start to emit action state")
+              events_emitter.emit(backEvent, backData)
+            } catch (err) {
+              console.info("navigationContent1 emit action state err: " + JSON.stringify(err.message))
+            }
+          })
+          .margin({ left: 135, top: 60 })
+      }
+      .title(this.NavigationTitle)
+      .subTitle('subtitle')
+      .menus(this.NavigationMenus)
+      .titleMode(NavigationTitleMode.Free)
+      .hideTitleBar(false)
+      .hideBackButton(false)
+      .onTitleModeChanged((titleModel: NavigationTitleMode) => {
+        console.log('titleMode')
+      })
+      .toolBar({ items: [
+        { value: 'app', icon: 'images/grid.svg', action: () => {
+          console.log("app")
+        } },
+        { value: 'add', icon: 'images/add.svg', action: () => {
+          console.log("add")
+        } },
+        { value: 'collect', icon: 'images/collect.svg', action: () => {
+          console.log("collect")
+        } }] })
+      .hideToolBar(this.hideBar)
+    }
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/pageTransition.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 PageTransitionExample1 {
+  @State scale: number = 1
+  @State opacity: number = 1
+  @State active: boolean = false
+  @State type: RouteType	 = NavigationType.Push
+
+  build() {
+    Column() {
+      Navigator({ target: 'pages/pageTransition2', type: this.type }) {
+        Image($rawfile('ic_health_heart.png'))
+          .width("100%")
+          .height("100%")
+      }
+      .key('Navigator')
+      .onClick(() => {
+        this.active = true
+        console.info('pageTransition current action state is: ' + this.active);
+        try {
+          var backData = {
+            data: {
+              "scale" : this.scale,
+              "opacity" : this.opacity,
+            }
+          }
+          var backEvent = {
+            eventId: 96,
+            priority: events_emitter.EventPriority.LOW
+          }
+          console.info("pageTransition start to emit action state")
+          events_emitter.emit(backEvent, backData)
+        } catch (err) {
+          console.info("pageTransition emit action state err: " + JSON.stringify(err.message))
+        }
+      })
+    }.scale({ x: this.scale }).opacity(this.opacity)
+  }
+
+  pageTransition() {
+    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
+      .onEnter((type: RouteType, progress: number) => {
+        this.scale = 1
+        this.opacity = progress
+      })
+    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
+      .onExit((type: RouteType, progress: number) => {
+        this.scale = 1 - progress
+        this.opacity = 1
+      })
+  }
+
+  onPageShow() {
+    console.info('active page show called');
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack)
+
+    var stateChangeEventOne = {
+      eventId: 95,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEventOne, this.stateChangCallBack)
+  }
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("active page state change called:" + JSON.stringify(eventData));
+      if (eventData.data.scale != null) {
+       this.scale = parseInt(eventData.data.scale);
+      }
+      if (eventData.data.opacity != null) {
+        this.opacity = parseInt(eventData.data.opacity);
+      }
+      if (eventData.data.type != null) {
+        this.type = eventData.data.type;
+     }
+    }
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/pageTransition2.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 AExample {
+  @State scale: number = 1
+  @State opacity: number = 1
+  @State active: boolean = false
+  build() {
+    Column() {
+      Navigator({ target: 'pages/pageTransition' ,type: NavigationType.Push}) {
+        Image($rawfile('ic_health_heart.png')).width("100%").height("100%")
+      }
+    }.height("100%").width("100%").scale({ x: this.scale }).opacity(this.opacity)
+  }
+  pageTransition() {
+    PageTransitionEnter({ duration: 1200, curve: Curve.Linear })
+      .onEnter((type: RouteType, progress: number) => {
+        this.scale = 1
+        this.opacity = progress
+      })
+    PageTransitionExit({ duration: 1500, curve: Curve.Ease })
+      .onExit((type: RouteType, progress: number) => {
+        this.scale = 1 - progress
+        this.opacity = 1
+      })
+  }
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/panel.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 PanelExample {
+  @State show: boolean = true
+  @State type: PanelType = PanelType.Foldable
+  @State mode: PanelMode = PanelMode.Half
+
+  private stateChangCallBack = (eventData) => {
+    console.info("rating page stateChangCallBack");
+    if (eventData != null) {
+      console.info("rating page state change called:" + JSON.stringify(eventData.data.rating));
+      if(eventData.data.type != null) {
+        this.type = eventData.data.type;
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('rating page show called');
+    var stateChangeEvent = {
+      eventId: 440,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack)
+    var stateChangeEventTwo = {
+      eventId: 441,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEventTwo, this.stateChangCallBack)
+    var stateChangeEventThree = {
+      eventId: 442,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEventThree, this.stateChangCallBack)
+  }
+
+  build() {
+    Column() {
+      Text('2021-09-30    Today Calendar: 1.afternoon......Click for details')
+        .width('90%').height(50).borderRadius(10)
+        .backgroundColor(0xFF0000).padding({ left: 20 })
+        .onClick(() => {
+          this.show = !this.show
+        })
+      Panel(this.show) {
+        Column() {
+          Text('HAHA')
+          Divider()
+          Text('1. afternoon 4:00 The project meeting')
+        }
+      }
+      .type(this.type).mode(this.mode)
+      .dragBar(true)
+      .halfHeight(500)
+      .key('Panel')
+      .onChange((value: any) => {
+        console.info(`width:${value.width},height:${value.height},mode:${value.mode}`)
+      })
+    }.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/radio.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 RadioExample {
+  build() {
+    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
+      Column() {
+        Text('Radio1')
+        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
+          .height(50)
+          .width(50)
+          .onChange((value: boolean) => {
+            console.log('Radio1 status is ' + value)
+          })
+      }
+      Column() {
+        Text('Radio2')
+        Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
+          .height(50)
+          .width(50)
+          .onChange((value: boolean) => {
+            console.log('Radio2 status is ' + value)
+          })
+      }
+      Column() {
+        Text('Radio3')
+        Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
+          .height(50)
+          .width(49)
+          .onChange((value: boolean) => {
+            console.log('Radio3 status is ' + value)
+          })
+      }
+    }.padding({ top: 30 })
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/row.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.
+ */
+@Entry
+@Component
+struct RowExample {
+  build() {
+    Column({ space: 5 }) {
+      Text('space').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Row({ space: 5 }) {
+        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
+        Row().width('30%').height(50).backgroundColor(0x00FFFF)
+      }.width('90%').height(107).border({ width: 1 })
+
+      Text('alignItems(Top)').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Row() {
+        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
+        Row().width('30%').height(50).backgroundColor(0x00FFFF)
+      }.alignItems(VerticalAlign.Top).height('15%').border({ width: 1 })
+
+      Text('alignItems(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Row() {
+        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
+        Row().width('30%').height(50).backgroundColor(0x00FFFF)
+      }.alignItems(VerticalAlign.Center).height('15%').border({ width: 1 })
+
+      Text('justifyContent(End)').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Row() {
+        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
+        Row().width('30%').height(50).backgroundColor(0x00FFFF)
+      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.End)
+
+      Text('justifyContent(Center)').fontSize(9).fontColor(0xCCCCCC).width('90%')
+      Row() {
+        Row().width('30%').height(50).backgroundColor(0xAFEEEE)
+        Row().width('30%').height(49).backgroundColor(0x00FFFF)
+      }.width('90%').border({ width: 1 }).justifyContent(FlexAlign.Center)
+    }.width('100%')
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/scrollBar.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 ScrollBarExample {
+  private scroller: Scroller = new Scroller()
+  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+  @State directionValue: ScrollBarDirection = ScrollBarDirection.Vertical;
+  @State stateValue: BarState= BarState.Off;
+
+  private stateChangCallBack = (eventData) => {
+    console.info("scrollBar page state change called:" + JSON.stringify(eventData));
+    if (eventData != null) {
+      if (eventData.data.directionValue != null) {
+        let directionObject = JSON.parse(eventData.data.directionObject);
+        this.directionValue = directionObject.directionValue;
+      }
+      if (eventData.data.stateValue != null) {
+        let stateObject = JSON.parse(eventData.data.stateObject);
+        this.stateValue = stateObject.stateValue;
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('scrollBar page show called');
+    var stateChangeEvent = {
+      eventId: 80,
+      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() {
+      Stack({ alignContent: Alignment.End }) {
+        Scroll(this.scroller) {
+          Flex({ direction: FlexDirection.Column }) {
+            ForEach(this.arr, (item) => {
+              Row() {
+                Text(item.toString())
+                  .width('90%')
+                  .height(100)
+                  .backgroundColor('#3366CC')
+                  .borderRadius(15)
+                  .fontSize(16)
+                  .textAlign(TextAlign.Center)
+                  .margin({ top: 5 })
+              }
+            }, item => item)
+          }.margin({ left: 52 })
+        }
+        .scrollBar(BarState.Off)
+        .scrollable(ScrollDirection.Vertical)
+
+        ScrollBar({ scroller: this.scroller, direction: this.directionValue, state: this.stateValue }) {
+          Text()
+            .width(30)
+            .height(100)
+            .borderRadius(10)
+            .backgroundColor('#C0C0C0')
+        }.key('scroll').width(30).backgroundColor('#ededed')
+      }
+    }
+  }
+}
\ No newline at end of file

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

@@ -18,7 +18,7 @@ import events_emitter from '@ohos.emitter';
 @Entry
 @Component
 struct scrollCode {
-  @State scrollable: ScrollDirection = ScrollDirection.Vertical;
+  @State scrollable: ScrollDirection = ScrollDirection.None;
   @State scrollBar: BarState = BarState.On;
   @State scrollBarColor: Color = "#FF0000FF";
   @State scrollBarWidth: number = 30;
@@ -120,22 +120,37 @@ struct scrollCode {
       .onScrollEnd(() => {
         console.info('Scroll Stop')
       })
-
       Button('scroll 100')
         .onClick(() => {
           this.scroller.scrollTo({ xOffset: 0, yOffset: this.scroller.currentOffset().yOffset + 100 })
-        })
-        .margin({ top: 10, left: 20 })
+        }).margin({ top: 170, left: 20 })
       Button('back top')
         .onClick(() => {
           this.scroller.scrollEdge(Edge.Top)
         })
-        .margin({ top: 60, left: 20 })
-      Button('next page')
-        .onClick(() => {
+        .margin({ top: 120, left: 20 })
+      Button('next page').backgroundColor(0x2788D9).width(200).height(100).fontSize(20)
+        .onClick((event: ClickEvent) => {
+          this.onClickValue = true;
+          try {
+            var backData = {
+              data: {
+                "scrollToIndex": 10,
+                "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))
+          }
           this.scroller.scrollPage({ next: true })
-        })
-        .margin({ top: 110, left: 20 })
+        }).key('button').margin({ top: 10, left: 20 })
     }.width('100%').height('100%').backgroundColor(0xDCDCDC)
   }
 }
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/search.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 SearchExample {
+  @State textFontValue: number= 10;
+  @State searchButtonValue: string= ''
+  @State caretPositionValue: string= 10
+  private stateChangCallBack = (eventData) => {
+    console.info("search page state change called:" + JSON.stringify(eventData));
+    if (eventData != null) {
+      if (eventData.data.textFontValue != null) {
+        this.textFontValue = eventData.data.textFontValue;
+      }
+      if (eventData.data.searchButtonValue != null) {
+        this.searchButtonValue = eventData.data.searchButtonValue;
+      }
+      if (eventData.data.caretPositionValue != null) {
+        this.caretPositionValue = eventData.data.caretPositionValue;
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('span page show called');
+    var stateChangeEvent = {
+      eventId: 40,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+
+  build() {
+    Column() {
+      Navigation() {
+        Search({ value: '', placeholder: "", searchButton: "bbb" }).width('85%').margin(26)
+          .key('search')
+      }
+    }
+  }
+}
+
+

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/sharedTransition.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 SharedTransitionExample {
+  @State scale: number = 1
+  @State opacity: number = 1
+  @State active: boolean = false
+  @State duration: number = 1000
+  @State delay: number = 0
+
+  build() {
+    List() {
+      ListItem() {
+        Row() {
+          Navigator({ target: 'pages/sharedTransition2', type: NavigationType.Push }) {
+            Image($rawfile('ic_health_heart.png')).width(50).height(50)
+              .sharedTransition('sharedImage1', { duration:this.duration , delay: this.delay })
+          }
+          .key('Navigator')
+          .padding({ left: 10 })
+          .onClick(() => {
+            this.active = true
+            console.info('SharedTransition current action state is: ' + this.active);
+            try {
+              var backData = {
+                data: {
+                  "duration" : this.duration,
+                  "delay" : this.delay,
+                }
+              }
+              var backEvent = {
+                eventId: 556,
+                priority: events_emitter.EventPriority.LOW
+              }
+              console.info("SharedTransition start to emit action state")
+              events_emitter.emit(backEvent, backData)
+            } catch (err) {
+              console.info("SharedTransition emit action state err: " + JSON.stringify(err.message))
+            }
+          })
+          Text('SharedTransition').width(80).height(80).textAlign(TextAlign.Center)
+        }
+      }
+    }
+  }
+
+  onPageShow() {
+    console.info('sharedTransition page show called');
+    var stateChangeEvent = {
+      eventId: 555,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack)
+  }
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("sharedTransition page state change called:" + JSON.stringify(eventData));
+      if (eventData.data.duration != null) {
+        this.duration = eventData.data.duration;
+      }
+      if (eventData.data.delay != null) {
+        this.delay = eventData.data.delay;
+      }
+    }
+  }
+}
+
+

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/canvas3.ets → ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/sharedTransition2.ets

@@ -17,30 +17,11 @@ import events_emitter from '@ohos.emitter'
 
 @Entry
 @Component
-struct Canvas3Example {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-
+struct SharedTransition2Example {
   build() {
-    Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) {
-      Column() {
-        Canvas(this.context)
-          .width('100%')
-          .height('100%')
-          .backgroundColor('#ffff00')
-          .onReady(() => {
-            this.rotate();
-          })
-          .key('canvas3')
-      }.width('100%').height('100%')
-    }
-    .width('100%')
-    .height('100%')
-  }
-  onPageShow() {
+    Stack() {
+      Image($rawfile('ic_health_heart.png')).width(150).height(150).sharedTransition('sharedImage1')
+    }.width('100%').height(400)
   }
-  rotate() {
-    this.context.rotate(45 * Math.PI / 180);
-    this.context.fillRect(200, 20, 100, 100);
-  }
-}
\ No newline at end of file
+}
+

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/sourceType.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 = '';
+
+  build() {
+    Column() {
+      Button('Touch').backgroundColor(0x2788D9).width(100).height(500).fontSize(20)
+        .onTouch((event: TouchEvent) => {
+          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(this.text = 'source：' + event.source);
+          try {
+            var backData = {
+              data: {
+                "event": JSON.stringify(event),
+              }
+            }
+            var backEvent = {
+              eventId: 155,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.info("sourceTypeTest_0100 start to emit action state")
+            events_emitter.emit(backEvent, backData)
+          } catch (err) {
+            console.info("sourceTypeTest_0100 emit 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/span.ets

@@ -21,6 +21,7 @@ struct SpanExample {
   @State decorationValue:object={ type: TextDecorationType.None, color: Color.Red }
   @State textCaseValue:TextCase=TextCase.Normal
   @State fontSizeValue:number=40
+  @State fontColorValue: Color= 0xCCCCCC
 
   private stateChangCallBack = (eventData) => {
     console.info("span page state change called:" + JSON.stringify(eventData));
@@ -31,6 +32,9 @@ struct SpanExample {
       if (eventData.data.textCaseValue != null) {
         this.textCaseValue = eventData.data.textCaseValue;
       }
+      if (eventData.data.fontColorValue != null) {
+        this.fontColorValue = eventData.data.fontColorValue;
+      }
     }
   }
 
@@ -47,11 +51,17 @@ struct SpanExample {
       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);
   }
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
-      Text('Basic Usage').fontSize(9).fontColor(0xCCCCCC)
+      Text('Basic Usage').fontSize(9).fontColor(this.fontColorValue).key('fontColor')
       Text() {
         Span('This is the Span component').fontSize(this.fontSizeValue).textCase(this.textCaseValue)
           .decoration(this.decorationValue).key('decoration')

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/stateStyle.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 StyleExample {
+  @State isEnable: boolean = true
+
+  @Styles pressedStyles() {
+        .backgroundColor("#ED6F21")
+        .borderRadius(10)
+        .borderStyle(BorderStyle.Dashed)
+        .borderWidth(2)
+        .borderColor("#33000000")
+        .width(120)
+        .height(30)
+        .opacity(1)
+  }
+
+  @Styles disabledStyles() {
+        .backgroundColor("#E5E5E5")
+        .borderRadius(10)
+        .borderStyle(BorderStyle.Solid)
+        .borderWidth(2)
+        .borderColor("#2a4c1919")
+        .width(90)
+        .height(25)
+        .opacity(1)
+  }
+
+  @Styles normalStyles() {
+        .backgroundColor("#0A59F7")
+        .borderRadius(10)
+        .borderStyle(BorderStyle.Solid)
+        .borderWidth(2)
+        .borderColor("#33000000")
+        .width(100)
+        .height(25)
+        .opacity(1)
+  }
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
+      Text("normal")
+        .fontSize(14)
+        .fontColor(Color.White)
+        .opacity(0.5)
+        .stateStyles({
+          normal: this.normalStyles,
+        })
+        .margin({ bottom: 20 })
+        .textAlign(TextAlign.Center)
+      Text("pressed")
+        .backgroundColor("#0A59F7")
+        .borderRadius(20)
+        .borderStyle(BorderStyle.Dotted)
+        .borderWidth(2)
+        .borderColor(Color.Red)
+        .width(100)
+        .height(25)
+        .opacity(1)
+        .fontSize(14)
+        .fontColor(Color.White)
+        .stateStyles({
+          pressed: this.pressedStyles,
+        })
+        .margin({ bottom: 20 })
+        .textAlign(TextAlign.Center)
+      Text(this.isEnable == true ? "effective" : "disabled")
+        .backgroundColor("#0A59F7")
+        .borderRadius(20)
+        .borderStyle(BorderStyle.Solid)
+        .borderWidth(2)
+        .borderColor(Color.Gray)
+        .width(100)
+        .height(25)
+        .opacity(1)
+        .fontSize(14)
+        .fontColor(Color.White)
+        .enabled(this.isEnable)
+        .stateStyles({
+          disabled: this.disabledStyles,
+        })
+        .textAlign(TextAlign.Center)
+      Text("control disabled")
+        .onClick(() => {
+          this.isEnable = !this.isEnable
+          console.log(`${this.isEnable}`)
+        })
+    }
+    .width(350).height(300)
+  }
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/systemPrompt.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
+@Component
+struct promptExample {
+  @State text: string = 'item1'
+  @State color: string = '#000000'
+  build(){
+    Column(){
+      Button('showActionMenu')
+      .key('button1')
+      .backgroundColor('#FF0B8FE2')
+      .fontSize(20)
+      .margin({top: 20})
+      .onClick(()=>{
+        prompt.showActionMenu({
+              title: 'Title Info',
+              buttons: [
+                {
+                  text: this.text,
+                  color: this.color,
+                },
+              ],
+              success: function(data) {
+                console.log('dialog success callback，click button : ' + data.tapIndex);
+              },
+              fail: function(data) {
+                console.log('dialog fail callback' + data.errMsg);
+              },
+            });
+      })
+      Button('showDialog')
+      .key('button2')
+      .backgroundColor('#FF0B8FE2')
+      .fontSize(20)
+      .margin({top: 20})
+      .onClick(()=> {
+        prompt.showDialog({
+          title: 'Title Info',
+          message: 'Message Info',
+          buttons: [
+            {
+              text: this.text,
+              color: this.color,
+            },
+          ],
+          success: function(data) {
+            console.log('dialog success callback，click button : ' + data.index);
+          },
+          cancel: function() {
+            console.log('dialog cancel callback');
+          },
+        });
+      })
+      }
+    }
+}
\ No newline at end of file

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

@@ -17,12 +17,13 @@ import events_emitter from '@ohos.emitter'
 @Entry
 @Component
 struct TextExample {
-  @State fontSize: number = 9
+  @State fontSize: number = 9;
+  @State fontColor: string = "0xCCCCCC";
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
       Text('lineHeight')
         .fontSize(this.fontSize)
-        .fontColor(0xCCCCCC)
+        .fontColor(this.fontColor)
         .key('text')
       Image($rawfile('test.png'))
         .key('image')
@@ -39,6 +40,12 @@ struct TextExample {
       priority: events_emitter.EventPriority.LOW
     }
     events_emitter.on(stateChangeEvent, this.stateChangCallBack)
+
+    var stateChangeEventOne = {
+      eventId: 198,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEventOne, this.stateChangCallBack)
   }
 
   private stateChangCallBack = (eventData) => {
@@ -47,6 +54,9 @@ struct TextExample {
       if (eventData.data.fontSize != null) {
         this.fontSize = parseInt(eventData.data.fontSize);
       }
+      if (eventData.data.fontColor != null) {
+        this.fontColor = eventData.data.fontColor;
+      }
     }
   }
 }

ace/ace_ets_component/entry/src/main/ets/MainAbility/pages/timeStamp.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 = ''
+  build() {
+    Column() {
+      Button('Click').backgroundColor(0x2788D9)
+        .key('button')
+        .onClick((event: ClickEvent) => {
+          this.text = event.timestamp
+          console.info(this.text)
+          try {
+            var backData = {
+              data: {
+                "Text": this.text,
+              }
+            }
+            var backEvent = {
+              eventId: 235,
+              priority: events_emitter.EventPriority.LOW
+            }
+            console.info("button start to emit action state")
+            events_emitter.emit(backEvent, backData)
+          } catch (err) {
+            console.info("button emit action state err: " + JSON.stringify(err.message))
+          }
+        })
+      Text(this.text).padding(15)
+    }.height(300).width('100%').padding(35)
+  }
+}
\ No newline at end of file

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

@@ -18,7 +18,7 @@ import events_emitter from '@ohos.emitter';
 @Entry
 @Component
 struct ToggleExample {
-  @State selectedColor : color = '#330A59F7';
+  @State selectedColor : Color = '#330A59F7';
   @State toggleType : ToggleType = ToggleType.Button;
   @State isOn : boolean = false;
 
@@ -29,6 +29,12 @@ struct ToggleExample {
       priority: events_emitter.EventPriority.LOW
     }
     events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+
+    var stateChangeEventOne = {
+      eventId: 1012,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEventOne, this.stateChangCallBack);
   }
 
   private stateChangCallBack = (eventData) => {

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

@@ -19,13 +19,14 @@ import events_emitter from '@ohos.emitter'
 struct TransitionExample {
   @State btn1: boolean = false
   @State show: string = "show"
+  @State opacity: number = 1
   @State onActionCalled: boolean = false
   @State transitionTypeOne: TransitionType = TransitionType.Insert
   @State transitionTypeTwo: TransitionType = TransitionType.Delete
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) {
-      Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50}).key('button')
+      Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50}).key('button').opacity(this.opacity)
         .onClick(() => {
           this.onActionCalled = true;
           try {
@@ -54,10 +55,28 @@ struct TransitionExample {
         })
       if (this.btn1) {
         Button() {
-          Image($r('app.media.bg')).width("80%").height(300).key('image')
+          Image($rawfile('test.png')).width("80%").height(300).key('image')
         }.transition({ type: this.transitionTypeOne, scale: {x:0,y:1.0} }).key('button1')
         .transition({ type: this.transitionTypeTwo, scale: { x: 1.0, y: 0.0 } })
       }
     }.height(400).width("100%").padding({top:100})
   }
+
+  onPageShow() {
+    console.info('transition page show called');
+    var stateChangeEvent = {
+      eventId: 112,
+      priority: events_emitter.EventPriority.LOW
+    }
+    events_emitter.on(stateChangeEvent, this.stateChangCallBack);
+  }
+
+  private stateChangCallBack = (eventData) => {
+    if (eventData != null) {
+      console.info("transition state change called:" + JSON.stringify(eventData));
+      if (eventData.data.opacity != null) {
+        this.opacity = parseInt(eventData.data.opacity);
+      }
+    }
+  }
 }
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/AboutToDisappearJsunit.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 aboutToDisappearJsunit() {
+  describe('aboutToDisappearTest', function () {
+    beforeEach(async function (done) {
+      console.info("aboutToDisappear beforeEach start");
+      let options = {
+        uri: 'pages/aboutToDisappear',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get aboutToDisappear state pages:" + JSON.stringify(pages));
+        if (!("aboutToDisappear" == pages.name)) {
+          console.info("get aboutToDisappear state pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push aboutToDisappear page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push aboutToDisappear page error:" + err);
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("aboutToDisappear after each called");
+    });
+
+    it('aboutToDisappearTest_0100', 0, async function (done) {
+      console.info('aboutToDisappearTest_0100 START');
+      await Utils.sleep(1500);
+      let callback = (indexEvent) => {
+        console.info("aboutToDisappearTest_0100 get state result is: " + JSON.stringify(indexEvent));
+        expect(indexEvent.data.ACTION).assertEqual(false);
+      }
+      let indexEvent = {
+        eventId: 160,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(indexEvent, callback);
+      } catch (err) {
+        console.info("aboutToDisappearTest_0100 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info("aboutToDisappearTest_0100 click result is: " + JSON.stringify(sendEventByKey('button1',10,"")));
+      await Utils.sleep(1000);
+      console.info('aboutToDisappearTest_0100 END');
+      done();
+    });
+  })
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/AlphabetIndexerJsunit.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 Utils from './Utils';
+import events_emitter from '@ohos.events.emitter';
+
+export default function alphabetIndexerJsunit() {
+  describe('alphabetIndexerTest', function () {
+    beforeEach(async function (done) {
+      console.info("alphabetIndexer beforeEach start");
+      let options = {
+        uri: 'pages/alphabetIndexer',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get alphabetIndexer state pages:" + JSON.stringify(pages));
+        if (!("alphabetIndexer" == pages.name)) {
+          console.info("get alphabetIndexer state pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push alphabetIndexer page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push alphabetIndexer page error:" + err);
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("alphabetIndexer after each called");
+    });
+
+    it('testAlphabetIndexer01', 0, async function (done) {
+      console.info('[testAlphabetIndexer01] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('alphabetIndexer');
+      let obj = JSON.parse(strJson);
+      console.info("[testAlphabetIndexer01] alphabetIndexer obj is: " + JSON.stringify(obj));
+      let font = JSON.parse(obj.$attrs.font);
+      console.info("[testAlphabetIndexer01] font: " + JSON.stringify(font));
+      expect(font.size).assertEqual(20);
+      expect(font.weight).assertEqual('FontWeight.Bolder');
+      expect(font.family).assertEqual('sans-serif');
+      expect(font.style).assertEqual('FontStyle.Italic');
+      console.info('testAlphabetIndexer01 END');
+      done();
+    });
+
+    it('testAlphabetIndexer02', 0, async function (done) {
+      console.info('[testAlphabetIndexer02] START');
+      try {
+        let obj = {
+          size: 25,
+          weight: 400,
+          family: 'Arial',
+          style: FontStyle.Normal
+        }
+        let eventData = {
+          data: {
+            "font": JSON.stringify(obj)
+          }
+        }
+        var innerEvent = {
+          eventId: 71,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testAlphabetIndexer02] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testAlphabetIndexer02] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let strJsonNew = getInspectorByKey('alphabetIndexer');
+      let objNew = JSON.parse(strJsonNew);
+      console.info("[testAlphabetIndexer02] alphabetIndexer obj is: " + JSON.stringify(objNew));
+      let font = JSON.parse(objNew.$attrs.font);
+      console.info("[testAlphabetIndexer02] font: " + JSON.stringify(font));
+      expect(font.size).assertEqual(25);
+      expect(font.weight).assertEqual("FontWeight.400");
+      expect(font.family).assertEqual('Arial');
+      expect(font.style).assertEqual('FontStyle.Normal');
+      console.info('testAlphabetIndexer02 END');
+      done();
+    });
+  });
+}

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

@@ -30,7 +30,7 @@ export default function badgeJsunit() {
         router.clear();
         let pages = router.getState();
         console.info("get badge state pages: " + JSON.stringify(pages));
-        if (!("appear" == pages.name)) {
+        if (!("badge" == pages.name)) {
           console.info("get badge state pages.name: " + JSON.stringify(pages.name));
           result = await router.push(options);
           await Utils.sleep(2000);
@@ -168,5 +168,81 @@ export default function badgeJsunit() {
       done();
     });
 
+    it('testBadge06', 0, async function (done) {
+      console.info('[testBadge06] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('badge2');
+      let obj = JSON.parse(strJson);
+      console.info("[testBadge06] component obj is: " + JSON.stringify(obj));
+      expect(obj.$type).assertEqual('Badge');
+      expect(obj.$attrs.value).assertEqual('new');
+      done();
+    });
+
+    it('testBadge07', 0, async function (done) {
+      console.info('[testBadge07] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('badge2');
+      let obj = JSON.parse(strJson);
+      console.info("[testBadge07] component obj is: " + JSON.stringify(obj));
+      let style = JSON.parse(obj.$attrs.style);
+      expect(obj.$type).assertEqual('Badge');
+      expect(style.color).assertEqual('#FFFF0000');
+      done();
+    });
+
+    it('testBadge08', 0, async function (done) {
+      console.info('[testBadge08] START');
+      await Utils.sleep(1000);
+      try {
+        var eventData = {
+          data: {
+            "colorValue": Color.Blue,
+          }
+        }
+        var innerEvent = {
+          eventId: 70,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testBadge08] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testBadge08] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let strJsonNew = getInspectorByKey('badge2');
+      let objNew = JSON.parse(strJsonNew);
+      console.info("[testBadge08] component objNew is: " + JSON.stringify(objNew));
+      let style = JSON.parse(objNew.$attrs.style);
+      expect(style.color).assertEqual('#FF0000FF');
+      done();
+    });
+
+    it('testBadge09', 0, async function (done) {
+      console.info('[testBadge09] START');
+      await Utils.sleep(1000);
+      try {
+        var eventData = {
+          data: {
+            "message": "test",
+          }
+        }
+        var innerEvent = {
+          eventId: 70,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testBadge09] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testBadge09] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let strJsonNew = getInspectorByKey('badge2');
+      let objNew = JSON.parse(strJsonNew);
+      console.info("[testBadge09] component objNew is: " + JSON.stringify(objNew));
+      expect(objNew.$attrs.value).assertEqual('test');
+      done();
+    });
+
   })
 }

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/BindMenuJsunit.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 aboutToDisappearJsunit() {
+  describe('bindMenuTest', function () {
+    beforeEach(async function (done) {
+      console.info("bindMenu beforeEach start");
+      let options = {
+        uri: 'pages/bindMenu',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get bindMenu state pages:" + JSON.stringify(pages));
+        if (!("bindMenu" == pages.name)) {
+          console.info("get bindMenu state pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push bindMenu page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push bindMenu page error:" + err);
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("bindMenu after each called");
+    });
+
+    it('bindMenuTest_0100', 0, async function (done) {
+      console.info('bindMenuTest_0100 START');
+      console.info("bindMenuTest_0100 text click result is: " + JSON.stringify(sendEventByKey('text',10,"")));
+      await Utils.sleep(1500);
+      let callback = (indexEvent) => {
+        console.info("bindMenuTest_0100 get state result is: " + JSON.stringify(indexEvent));
+        expect(indexEvent.data.ACTION).assertEqual(true);
+      }
+      let indexEvent = {
+        eventId: 123,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(indexEvent, callback);
+      } catch (err) {
+        console.info("bindMenuTest_0100 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info("bindMenuTest_0100 button click result is: " + JSON.stringify(sendEventByKey('button',10,"")));
+      await Utils.sleep(1000);
+      console.info('bindMenuTest_0100 END');
+      done();
+    });
+  })
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/BindPopupJsunit.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 Utils from './Utils';
+import events_emitter from '@ohos.events.emitter';
+
+export default function customPopupOptionJsunit(){
+  describe('bindPopupTest', function (){
+    beforeEach(async function (done) {
+      let options = {
+        uri: 'pages/bindPopup',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get bindPopup state success " + JSON.stringify(pages));
+        if (!("bindPopup" == pages.name)) {
+          console.info("get bindPopup state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(1000);
+          console.info("push bindPopup page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push bindPopup page error: " + err);
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("bindPopup after each called");
+    });
+
+    it('bindPopupTest_0100', 0, async function (done) {
+      console.info('bindPopupTest_0100 START');
+      await Utils.sleep(1500);
+      let callback = (indexEvent) => {
+        console.info("bindPopupTest_0100 get state result is: " + JSON.stringify(indexEvent));
+        expect(indexEvent.data.enableArrow).assertEqual(true);
+        expect(indexEvent.data.maskColor).assertEqual(0x33000000);
+      }
+      let indexEvent = {
+        eventId: 236,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(indexEvent, callback);
+      } catch (err) {
+        console.info("bindPopupTest_0100 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info("bindPopupTest_0100 click result is: " + JSON.stringify(sendEventByKey('button',10,"")));
+      await Utils.sleep(1000);
+      console.info("bindPopupTest_0100 click Two result is: " + JSON.stringify(sendEventByKey('image',10,"")));
+      await Utils.sleep(1000);
+      console.info('bindPopupTest_0100 END');
+      done();
+    });
+
+    it('bindPopupTest_0200', 0, async function (done) {
+      console.info('bindPopupTest_0200 START');
+      try {
+        let eventData = {
+          data: {
+            "enableArrow": false,
+            "maskColor": 0x33000009
+          }
+        }
+        let indexEvent = {
+          eventId: 126,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("bindPopupTest_0200 start to publish emit");
+        events_emitter.emit(indexEvent, eventData);
+      } catch (err) {
+        console.log("bindPopupTest_0200 change component data error: " + err.message);
+      }
+      await Utils.sleep(1500);
+      let callbackOne = (indexEventOne) => {
+        console.info("bindPopupTest_0200 get state result is: " + JSON.stringify(indexEventOne));
+        expect(indexEventOne.data.enableArrow).assertEqual(false);
+        expect(indexEventOne.data.maskColor).assertEqual(0x33000009);
+      }
+      let indexEventOne = {
+        eventId: 237,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(indexEventOne, callbackOne);
+      } catch (err) {
+        console.info("bindPopupTest_0200 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info("bindPopupTest_0200 click result is: " + JSON.stringify(sendEventByKey('button1',10,"")));
+      await Utils.sleep(1000);
+      console.info('bindPopupTest_0200 END');
+      done();
+    });
+
+    it('bindPopupTest_0300', 0, async function (done) {
+      console.info('bindPopupTest_0300 START');
+      await Utils.sleep(1500);
+      let callback = (indexEvent) => {
+        console.info("bindPopupTest_0300 get state result is: " + JSON.stringify(indexEvent));
+        expect(indexEvent.data.placementOnTop).assertEqual(false);
+      }
+      let indexEvent = {
+        eventId: 238,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(indexEvent, callback);
+      } catch (err) {
+        console.info("bindPopupTest_0300 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info("bindPopupTest_0300 click result is: " + JSON.stringify(sendEventByKey('button2',10,"")));
+      await Utils.sleep(1000);
+      console.info('bindPopupTest_0300 END');
+      done();
+    });
+  })
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/BlankJsunit.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 blankJsunit() {
+  describe('appInfoTest', function () {
+    beforeEach(async function (done) {
+      console.info("blank beforeEach start");
+      let options = {
+        uri: 'pages/blank',
+      }
+      let result;
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get blank state pages: " + JSON.stringify(pages));
+        if (!("blank" == pages.name)) {
+          console.info("get blank state pages.name: " + JSON.stringify(pages.name));
+          result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push blank page result: " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push blank page error: " + err);
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("blank after each called");
+    })
+
+    it('testBlank01', 0, async function (done) {
+      console.info('[testBlank01] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('blank');
+      let obj = JSON.parse(strJson);
+      console.info("[testBlank01] component obj is: " + JSON.stringify(obj));
+      expect(obj.$type).assertEqual('Blank');
+      expect(obj.$attrs.color).assertEqual('#FF0000FF');
+      expect(obj.$attrs.min).assertEqual('0.000000px');
+      done();
+    });
+
+    it('testBlank02', 0, async function (done) {
+      console.info('[testBlank02] START');
+      await Utils.sleep(1000);
+      try {
+        var eventData = {
+          data: {
+            "colorValue": Color.Red,
+          }
+        }
+        var innerEvent = {
+          eventId: 90,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testBlank02] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testBlank02] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let strJsonNew = getInspectorByKey('blank');
+      let objNew = JSON.parse(strJsonNew);
+      console.info("[testBlank02] component objNew is: " + JSON.stringify(objNew));
+      expect(objNew.$type).assertEqual('Blank');
+      expect(objNew.$attrs.color).assertEqual('#FFFF0000');
+      done();
+    });
+  })
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/CircleJsunit.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 circleJsunit() {
+  describe('circleTest', function () {
+    beforeEach(async function (done) {
+      console.info("circle beforeEach start");
+      let options = {
+        uri: 'pages/circle',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get circle state pages:" + JSON.stringify(pages));
+        if (!("circle" == pages.name)) {
+          console.info("get circle state pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push circle page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push circle page error:" + JSON.stringify(result));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("circle after each called");
+    });
+
+    it('circleTest_0100', 0, async function (done) {
+      console.info('circleTest_0100 START');
+      let strJson = getInspectorByKey('circle');
+      console.info("circleTest_0100 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("circleTest_0100 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.height).assertEqual('450.00px');
+      expect(obj.$attrs.width).assertEqual('450.00px');
+      done();
+    });
+
+    it('circleTest_0200', 0, async function (done) {
+      console.info('[circleTest_0200] START');
+      try {
+        var eventData = {
+          data: {
+            "width": '500px',
+            "height": '500px',
+          }
+        }
+        console.info('[circleTest_0200] START');
+        var innerEvent = {
+          eventId:455,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[circleTest_0200] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[circleTest_0200] change component data error: " + err.message);
+      }
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('circle');
+      let obj = JSON.parse(strJson);
+      console.info("[circleTest_0200] component objNew is: " + JSON.stringify(obj));
+      expect(obj.$attrs.height).assertEqual('500.00px');
+      expect(obj.$attrs.width).assertEqual('500.00px');
+      console.info('circleTest_0200 END');
+      done();
+    });
+
+    it('circleTest_0300', 0, async function (done) {
+      console.info('[circleTest_0300] START');
+      try {
+        var eventData = {
+          data: {
+            "width": '-a',
+            "height": '-b',
+          }
+        }
+        console.info('[circleTest_0300] START');
+        var innerEvent = {
+          eventId:455,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[circleTest_0300] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[circleTest_0300] change component data error: " + err.message);
+      }
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('circle');
+      let obj = JSON.parse(strJson);
+      console.info("[circleTest_0300] component objNew is: " + JSON.stringify(obj));
+      expect(obj.$attrs.height).assertEqual('0.00px');
+      expect(obj.$attrs.width).assertEqual('0.00px');
+      console.info('circleTest_0300 END');
+      done();
+    });
+
+  })
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/ConfigurationJsunit.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 transFormJsunit() {
+  describe('appInfoTest', function () {
+    beforeEach(async function (done) {
+      console.info("prompt beforeEach start");
+      let options = {
+        uri: 'pages/configuration',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get prompt state pages:" + JSON.stringify(pages));
+        if (!("prompt " == pages.name)) {
+          console.info("get prompt state pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push prompt  page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push prompt  page error:" + err);
+      }
+      done();
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("prompt each called");
+    });
+    it('configurationTest_0100', 0, async function (done) {
+      console.info('configurationTest_0100 is start');
+      try {
+        let callBackConfiguration = (backData) => {
+          console.info("configurationTest_0100 get configurationEvent result is: " + JSON.stringify(backData));
+          expect(backData.data.COUNTRY).assertEqual('');
+          expect(backData.data.DIR).assertEqual('ltr');
+        }
+        var configurationEvent = {
+          eventId: 36,
+          priority: events_emitter.EventPriority.LOW
+        }
+        events_emitter.on(configurationEvent, callBackConfiguration);
+      } catch (err) {
+        console.info("configurationTest_0100 on configurationEvent err : " + JSON.stringify(err));
+      }
+      console.info("testAppear01 click result is: " + JSON.stringify(sendEventByKey('button', 10, "")));
+      console.info('[configurationTest01] END');
+      done();
+    });
+  })
+}
+
+
+
+

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/DirectionJsunit.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 Utils from './Utils';
+import events_emitter from '@ohos.events.emitter';
+
+export default function directionJsunit(){
+  describe('directionTest', function (){
+    beforeEach(async function (done) {
+      let options = {
+        uri: 'pages/direction',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get direction state success " + JSON.stringify(pages));
+        if (!("direction" == pages.name)) {
+          console.info("get direction state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(1000);
+          console.info("push direction page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push direction page error: " + err);
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("direction after each called");
+    });
+
+    it('directionTest_0100', 0, async function (done) {
+      console.info('directionTest_0100 START');
+      let strJson = getInspectorByKey('direction');
+      console.info("directionTest_0100 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("directionTest_0100 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.constructor.direction).assertEqual("FlexDirection.Column");
+      done();
+    });
+
+    it('directionTest_0200', 0, async function (done) {
+      console.info('directionTest_0200 START');
+      try {
+        let eventData = {
+          data: {
+            "direction": FlexDirection.Row,
+          }
+        }
+        let indexEvent = {
+          eventId: 985,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("directionTest_0200 start to publish emit");
+        events_emitter.emit(indexEvent, eventData);
+      } catch (err) {
+        console.log("directionTest_0200 change component data error: " + err.message);
+      }
+      await Utils.sleep(1000);
+      let strJsonNew = getInspectorByKey('direction');
+      let objNew = JSON.parse(strJsonNew);
+      console.info("directionTest_0200 component objNew is: " + JSON.stringify(objNew));
+      expect(objNew.$attrs.constructor.direction).assertEqual('FlexDirection.Row');
+      console.info('directionTest_0200 END');
+      done();
+    });
+
+    it('directionTest_0300', 0, async function (done) {
+      console.info('directionTest_0300 START');
+      try {
+        let eventData = {
+          data: {
+            "direction": 666,
+          }
+        }
+        let indexEvent = {
+          eventId: 985,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("directionTest_0300 start to publish emit");
+        events_emitter.emit(indexEvent, eventData);
+      } catch (err) {
+        console.log("directionTest_0300 change component data error: " + err.message);
+      }
+      await Utils.sleep(1000);
+      let strJsonNew = getInspectorByKey('direction');
+      let objNew = JSON.parse(strJsonNew);
+      console.info("directionTest_0300 component objNew is: " + JSON.stringify(objNew));
+      expect(objNew.$attrs.constructor.direction).assertEqual('FlexDirection.Row');
+      console.info('directionTest_0300 END');
+      done();
+    });
+  })
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/DividerJsunit.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 dividerJsunit() {
+  describe('dividerTest', function () {
+    beforeEach(async function (done) {
+      let options = {
+        uri: 'pages/divider',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get divider state success " + JSON.stringify(pages));
+        if (!("divider" == pages.name)) {
+          console.info("get divider state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(1000);
+          console.info("push divider page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push divider page error: " + err);
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("divider after each called");
+    });
+
+    it('dividerTest_0100', 0, async function (done) {
+      console.info('dividerTest_0100 START');
+      let strJson = getInspectorByKey('Divider');
+      console.info("dividerTest_0100 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("dividerTest_0100 component obj is: " + JSON.stringify(obj));
+      expect(obj.$type).assertEqual('Divider');
+      done();
+    });
+
+    it('dividerTest_0200', 0, async function (done) {
+      console.info('dividerTest_0200 START');
+      let strJson = getInspectorByKey('Divider');
+      console.info("dividerTest_0200 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("dividerTest_0200 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.color).assertEqual('#FFCCCCCC');
+      console.info('dividerTest_0200 END');
+      done();
+    });
+
+    it('dividerTest_0300', 0, async function (done) {
+      console.info('dividerTest_0300 START');
+      try {
+        let eventData = {
+          data: {
+            "color": '#FF000990',
+          }
+        }
+        let indexEvent = {
+          eventId: 917,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("dividerTest_0300 start to publish emit");
+        events_emitter.emit(indexEvent, eventData);
+      } catch (err) {
+        console.log("dividerTest_0300 change component data error: " + err.message);
+      }
+      await Utils.sleep(3000);
+      let strJsonNew = getInspectorByKey('Divider');
+      let objNew = JSON.parse(strJsonNew);
+      console.info("dividerTest_0300 component objNew is: " + JSON.stringify(objNew));
+      expect(objNew.$attrs.color).assertEqual('#FF000990');
+      console.info('dividerTest_0300 END');
+      done();
+    });
+  })
+}

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

@@ -63,8 +63,7 @@ export default function ellipseJsunit() {
       try {
         var eventData = {
           data: {
-            "width": '500px',
-            "height": '500px'
+            "width": '100px'
           }
         }
         var innerEvent = {
@@ -80,10 +79,35 @@ 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.000000px');
-      expect(obj.$attrs.width).assertEqual('500.000000px');
+      expect(obj.$attrs.width).assertEqual('100.000000px');
       console.info('testEllipse02 END');
       done();
     });
+
+    it('testEllipse03', 0, async function (done) {
+      console.info('[testEllipse03] START');
+      try {
+        var eventData = {
+          data: {
+            "height": '500px'
+          }
+        }
+        var innerEvent = {
+          eventId: 5,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testEllipse03] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testEllipse03] change component data error: " + err.message);
+      }
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('ellipse');
+      let obj = JSON.parse(strJson);
+      console.info("[testEllipse03] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.height).assertEqual('500.000000px');
+      console.info('testEllipse03 END');
+      done();
+    });
   })
 }

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

@@ -61,6 +61,7 @@ export default function girdContainerJsunit() {
       done();
     });
 
+
     it('testGirdContainer02', 0, async function (done) {
       console.info('[testEllipse02] START');
       try {

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/LineJsunit.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 Utils from './Utils';
+import events_emitter from '@ohos.events.emitter';
+
+export default function LineJsunit(){
+  describe('LineTest', function () {
+    beforeEach(async function (done) {
+      let options = {
+        uri: 'pages/line',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get line state success " + JSON.stringify(pages));
+        if (!("line" == pages.name)) {
+          console.info("get line state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(1000);
+          console.info("push line page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push line page error: " + err);
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("line after each called");
+    });
+
+    it('lineTest_0100', 0, async function (done) {
+      console.info('lineTest_0100 START');
+      let strJson = getInspectorByKey('line');
+      console.info("lineTest_0100 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("lineTest_0100 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.startPoint[0]).assertEqual(0);
+      done();
+    });
+
+    it('lineTest_0200', 0, async function (done) {
+      console.info('lineTest_0200 START');
+      let strJson = getInspectorByKey('line');
+      console.info("lineTest_0200 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("lineTest_0200 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.startPoint[1]).assertEqual(0);
+      done();
+    });
+
+    it('lineTest_0300', 0, async function (done) {
+      console.info('lineTest_0300 START');
+      let strJson = getInspectorByKey('line');
+      console.info("lineTest_0300 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("lineTest_0300 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.endPoint[0]).assertEqual(50);
+      done();
+    });
+
+    it('lineTest_0400', 0, async function (done) {
+      console.info('lineTest_0400 START');
+      let strJson = getInspectorByKey('line');
+      console.info("lineTest_0400 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("lineTest_0400 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.endPoint[1]).assertEqual(100);
+      done();
+    });
+
+    it('lineTest_0500', 0, async function (done) {
+      console.info('lineTest_0500 START');
+      await Utils.sleep(1000);
+      try {
+        var eventData = {
+          data: {
+            "startPoint": 50,
+            "startPointOne": 50,
+          }
+        }
+        var innerEvent = {
+          eventId: 233,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("lineTest_0500 start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("lineTest_0500 change component error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      var strJson = getInspectorByKey('line');
+      var obj = JSON.parse(strJson);
+      console.info("lineTest_0500 component obj is: " + JSON.stringify(obj.$attrs.startPoint[0]));
+      console.info("lineTest_0500 component objOne is: " + JSON.stringify(obj.$attrs.startPoint[1]));
+      expect(obj.$attrs.startPoint[0]).assertEqual(50);
+      expect(obj.$attrs.startPoint[1]).assertEqual(50);
+      done();
+    });
+
+    it('lineTest_0600', 0, async function (done) {
+      console.info('lineTest_0600 START');
+      await Utils.sleep(1000);
+      try {
+        var eventData = {
+          data: {
+            "endPoint": 100,
+            "endPointOne": 150,
+          }
+        }
+        var innerEvent = {
+          eventId: 233,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("lineTest_0600 start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("lineTest_0600 change component error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      var strJson = getInspectorByKey('line');
+      var obj = JSON.parse(strJson);
+      console.info("lineTest_0600 component obj is: " + JSON.stringify(obj.$attrs.endPoint[0]));
+      console.info("lineTest_0600 component objOne is: " + JSON.stringify(obj.$attrs.endPoint[1]));
+      expect(obj.$attrs.endPoint[0]).assertEqual(100);
+      expect(obj.$attrs.endPoint[1]).assertEqual(150);
+      done();
+    });
+
+    it('lineTest_0700', 0, async function (done) {
+      console.info('lineTest_0700 START');
+      await Utils.sleep(1000);
+      try {
+        var eventData = {
+          data: {
+            "startPoint": 'A',
+            "startPointOne": 'B',
+          }
+        }
+        var innerEvent = {
+          eventId: 233,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("lineTest_0700 start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("lineTest_0700 change component error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      var strJson = getInspectorByKey('line');
+      var obj = JSON.parse(strJson);
+      console.info("lineTest_0700 component obj is: " + JSON.stringify(obj.$attrs.startPoint[0]));
+      console.info("lineTest_0700 component objOne is: " + JSON.stringify(obj.$attrs.startPoint[1]));
+      expect(obj.$attrs.startPoint[0]).assertEqual(0);
+      expect(obj.$attrs.startPoint[1]).assertEqual(0);
+      done();
+    });
+
+    it('lineTest_0800', 0, async function (done) {
+      console.info('lineTest_0900 START');
+      await Utils.sleep(1000);
+      try {
+        var eventData = {
+          data: {
+            "endPoint": 'A',
+            "endPointOne": 'B',
+          }
+        }
+        var innerEvent = {
+          eventId: 233,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("lineTest_0800 start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("lineTest_0800 change component error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      var strJson = getInspectorByKey('line');
+      var obj = JSON.parse(strJson);
+      console.info("lineTest_0800 component obj is: " + JSON.stringify(obj.$attrs.endPoint[0]));
+      console.info("lineTest_0800 component objOne is: " + JSON.stringify(obj.$attrs.endPoint[1]));
+      expect(obj.$attrs.endPoint[0]).assertEqual(0);
+      expect(obj.$attrs.endPoint[1]).assertEqual(0);
+      done();
+    });
+  })
+}
\ No newline at end of file

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

@@ -64,10 +64,34 @@ import toggleJsunit from './ToggleJsunit.test.ets';
 import shapeJsunit from './ShapeJsunit.test.ets'
 import motionPathJsunit from './MotionPathJsunit.test.ets';
 import scrollCodeJsunit from './ScrollCodeJsunit.test.ets';
-import canvas3Jsunit from './Canvas3Jsunit.test.ets';
 import transitionJsunit from './TransitionJsunit.test.ets';
 import priorityGestureJsunit from './PriorityGestureJsunit.test.ets';
 import parallelGestureJsunit from './ParallelGestureJsunit.test.ets';
+import blankJsunit from './BlankJsunit.test.ets';
+import sharedTransitionJsunit from './SharedTransitionJsunit.test.ets';
+import alphabetIndexerJsunit from './AlphabetIndexerJsunit.test.ets';
+import lineJsunit from './LineJsunit.test.ets';
+import circleJsunit from './CircleJsunit.test.ets';
+import aboutToDisappearJsunit from './AboutToDisappearJsunit.test.ets';
+import bindMenuJsunit from './BindMenuJsunit.test.ets';
+import bindPopupJsunit from './BindPopupJsunit.test.ets';
+import directionJsunit from './DirectionJsunit.test.ets';
+import timeStampJsunit from './TimeStampJsunit.test.ets';
+import listItemJsunit from './ListItemJsunit.test.ets';
+import navigatorCodeJsunit from './NavigatorCodeJsunit.test.ets';
+import pieceJsunit from './PieceJsunit.test.ets';
+import dividerJsunit from './DividerJsunit.test.ets';
+import systemAppJsunit from './SystemAppJsunit.test.ets';
+import systempromptJsunit from './SystempromptJsunit.test.ets';
+import configurationJsunit from './ConfigurationJsunit.test.ets';
+import sourceTypeJsunit from './SourceTypeJsunit.test.ets';
+import pageTransitionJsunit from './PageTransitionJsunit.test.ets';
+import navigationJsunit from './NavigationJsunit.test.ets';
+import loadingProgressJsunit from './LoadingProgressJsunit.test.ets';
+import radioJsunit from './RadioJsunit.test.ets';
+import rowJsunit from './RowJsunit.test.ets';
+import scrollBarJsunit from './ScrollBarJsunit.test.ets';
+import searchJsunit from './SearchJsunit.test.ets';
 
 export default function testsuite() {
   gaugeJsunit();
@@ -105,7 +129,6 @@ export default function testsuite() {
   badgeJsunit();
   canvasJsunit();
   canvas2Jsunit();
-  canvas3Jsunit();
   longPressGestureJsUnit();
   buttonJsunit();
   responseRegionJsunit();
@@ -126,4 +149,29 @@ export default function testsuite() {
   transitionJsunit();
   priorityGestureJsunit();
   parallelGestureJsunit();
-}
\ No newline at end of file
+  blankJsunit();
+  sharedTransitionJsunit();
+  alphabetIndexerJsunit();
+  lineJsunit();
+  circleJsunit();
+  aboutToDisappearJsunit();
+  timeStampJsunit();
+  bindMenuJsunit();
+  bindPopupJsunit();
+  directionJsunit();
+  dividerJsunit();
+  systempromptJsunit();
+  configurationJsunit();
+  sourceTypeJsunit();
+  pageTransitionJsunit();
+  navigationJsunit();
+  loadingProgressJsunit();
+  radioJsunit();
+  rowJsunit();
+  listItemJsunit();
+  navigatorCodeJsunit();
+  pieceJsunit();
+  searchJsunit();
+  scrollBarJsunit();
+  systemAppJsunit();
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/ListItemJsunit.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 listItemJsunit() {
+  describe('listItemTest', function () {
+    beforeEach(async function (done) {
+      console.info("listItem beforeEach start");
+      let options = {
+        uri: 'pages/listItem',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get listItem state pages:" + JSON.stringify(pages));
+        if (!("listItem" == pages.name)) {
+          console.info("get listItem state pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push listItem page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push listItem page error:" + err);
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("listItem after each called");
+    });
+
+    it('testListItem01', 0, async function (done) {
+      console.info('[testListItem01] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('ListItem');
+      let obj = JSON.parse(strJson);
+      console.info("[testListItem01] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.sticky).assertEqual('Sticky.Normal');
+      console.info('testListItem01 END');
+      done();
+    });
+
+    it('testListItem02', 0, async function (done) {
+      console.info('[testListItem02] START');
+      try {
+        var eventData = {
+          data: {
+            "sticky": Sticky.None
+          }
+        }
+        var innerEvent = {
+          eventId: 1015,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testListItem02] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testListItem02] change component data error: " + err.message);
+      }
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('ListItem');
+      let obj = JSON.parse(strJson);
+      console.info("[testListItem02] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.sticky).assertEqual('Sticky.None');
+      console.info('testListItem02 END');
+      done();
+    });
+
+    it('testListItem03', 0, async function (done) {
+      console.info('[testListItem03] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('List');
+      let obj = JSON.parse(strJson);
+      console.info("[testListItem03] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.editMode).assertEqual('true');
+      console.info('testListItem03 END');
+      done();
+    });
+
+    it('testListItem04', 0, async function (done) {
+      console.info('[testEllipse03] START');
+      try {
+        var eventData = {
+          data: {
+            "editMode": false
+          }
+        }
+        var innerEvent = {
+          eventId: 1016,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testListItem04] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testListItem04] change component data error: " + err.message);
+      }
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('List');
+      let obj = JSON.parse(strJson);
+      console.info("[testListItem04] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.editMode).assertEqual('false');
+      console.info('testListItem04 END');
+      done();
+    });
+  })
+}

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/LoadingProgressJsunit.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.
+ */
+
+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 loadingProgressJsunit() {
+  describe('loadingProgressTest', function () {
+    beforeEach(async function (done) {
+      let options = {
+        uri: 'pages/loadingProgress',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get loadingProgress state success " + JSON.stringify(pages));
+        if (!("loadingProgress" == pages.name)) {
+          console.info("get loadingProgress state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(4000);
+          console.info("push loadingProgress page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push loadingProgress page error " + err);
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("loadingProgress after each called");
+    });
+  })
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/NavigationJsunit.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.
+ */
+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 navigationJsunit() {
+  describe('appInfoTest', function () {
+    beforeEach(async function (done) {
+      console.info("navigation beforeEach start");
+      let options = {
+        uri: 'pages/navigation',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get navigation state pages:" + JSON.stringify(pages));
+        if (!("navigation" == pages.name)) {
+          console.info("get navigation state pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push navigation page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push navigation page error:" + JSON.stringify(err));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("navigation after each called");
+    });
+
+    it('testNavigation_100', 0, async function (done) {
+      console.info('[testNavigation_100] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('Navigation');
+      let obj = JSON.parse(strJson);
+      console.info("[testNavigation_100] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.width).assertEqual("100.000000%");
+      console.info('[testNavigation_100] END');
+      done();
+    });
+
+    it('testNavigation_200', 0, async function (done) {
+      console.info('testNavigation_200 START');
+      await Utils.sleep(1000);
+      let callback = (indexEvent) => {
+        console.info("testNavigation_200 get state result is: " + JSON.stringify(indexEvent));
+        expect(indexEvent.data.ACTION).assertEqual(false);
+      }
+      let indexEvent = {
+        eventId: 44,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(indexEvent, callback);
+      } catch (err) {
+        console.info("testNavigation_200 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info("testNavigation_200 click result is: " + JSON.stringify(sendEventByKey('NavigationContent1',10,"")));
+      await Utils.sleep(2000);
+      console.info('testNavigation_200 END');
+      done();
+    });
+
+    it('testNavigation_300', 0, async function (done) {
+      console.info('[testNavigation_300] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('Navigation');
+      let obj = JSON.parse(strJson);
+      console.info("[testNavigation_300] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.height).assertEqual("300.000000vp");
+      console.info('[testNavigation_300] END');
+      done();
+    });
+
+    it('testNavigation_400', 0, async function (done) {
+      console.info('testNavigation_400 START');
+      await Utils.sleep(1000);
+      let callback = (indexEvent) => {
+        console.info("testNavigation_400 get state result is: " + JSON.stringify(indexEvent));
+        expect(indexEvent.data.ACTION).assertEqual(true);
+      }
+      let indexEvent = {
+        eventId: 44,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(indexEvent, callback);
+      } catch (err) {
+        console.info("testNavigation_400 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info("testNavigation_400 click result is: " + JSON.stringify(sendEventByKey('NavigationContent1',10,"")));
+      await Utils.sleep(2000);
+      console.info('testNavigation_400 END');
+      done();
+    });
+
+    it('testNavigation_500', 0, async function (done) {
+      console.info('[testNavigation_500] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('Navigation');
+      let obj = JSON.parse(strJson);
+      console.info("[testNavigation_500] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.align).assertEqual("Alignment.Center");
+      console.info('[testNavigation_500] END');
+      done();
+    });
+  })
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/NavigatorCodeJsunit.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 navigatorCodeJsunit() {
+  beforeEach(async function (done) {
+    console.info("NavigatorClick beforeEach start");
+    let options = {
+      uri: 'pages/NavigatorCode',
+    }
+    try {
+      router.clear();
+      let pages = router.getState();
+      console.info("get NavigatorClick state pages:" + JSON.stringify(pages));
+      if (!("NavigatorClick" == pages.name)) {
+        console.info("get NavigatorClick state pages.name:" + JSON.stringify(pages.name));
+        let result = await router.push(options);
+        await Utils.sleep(2000);
+        console.info("push NavigatorClick page result:" + JSON.stringify(result));
+      }
+    } catch (err) {
+      console.error("push NavigatorClick page error:" + JSON.stringify(result));
+    }
+    done()
+  });
+
+  afterEach(async function () {
+    await Utils.sleep(1000);
+    console.info("NavigatorClick after each called");
+  });
+
+    it('test_NavigatorClick_001', 0, async function (done) {
+      console.info('[test_NavigatorClick_001] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('NavigatorClick');
+      let obj = JSON.parse(strJson);
+      console.info("[test_NavigatorClick_001] component obj is: " + JSON.stringify(obj));
+      await Utils.sleep(1000);
+      expect(obj.$attrs.active).assertEqual('false');
+      done();
+    });
+
+    it('test_NavigatorClick_004', 0, async function (done) {
+      console.info('[test_NavigatorClick_004] START');
+      await Utils.sleep(1000);
+      try {
+        var eventData = {
+          data: {
+            "typeValue": "NavigationType.Back"
+          }
+        }
+        var innerEvent = {
+          eventId: 101,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[test_NavigatorClick_004] start to publish emit" + JSON.stringify(eventData));
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[test_NavigatorClick_004] change component error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      var strJson = getInspectorByKey('NavigatorType');
+      var obj = JSON.parse(strJson);
+      console.info("[test_NavigatorClick_004] component obj is: " + JSON.stringify(obj.$attrs.type));
+      expect(obj.$attrs.type).assertEqual('NavigationType.Back');
+      done();
+    });
+
+  it('test_NavigatorClick_004', 0, async function (done) {
+    await Utils.sleep(1000)
+    var callback = (eventData) => {
+      console.info("[test_NavigatorClick_004] get event state result is: " + JSON.stringify(eventData));
+      expect(eventData.data.ACTION).assertEqual(10)
+    }
+    var innerEvent = {
+      eventId: 30,
+      priority: events_emitter.EventPriority.LOW
+    }
+    try {
+      events_emitter.on(innerEvent, callback)
+    } catch (err) {
+      console.info("[test_NavigatorClick_004] on events_emitter err : " + JSON.stringify(err));
+    }
+    console.info('[test_NavigatorClick_004] sendEventByKey ' + JSON.stringify(sendEventByKey('button', 10, "")));
+    await Utils.sleep(1000)
+    console.info('[test_NavigatorClick_004] testSendTouchEvent END');
+    done();
+  });
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/PageTransitionJsunit.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 pageTransitionJsunit() {
+  describe('pageTransitionTest', function () {
+    beforeEach(async function (done) {
+      console.info("pageTransition beforeEach start");
+      let options = {
+        uri: 'pages/pageTransition',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get pageTransition state pages:" + JSON.stringify(pages));
+        if (!("pageTransition" == pages.name)) {
+          console.info("get pageTransition state pages.name:" + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push pageTransition page result:" + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push pageTransition page error:" + JSON.stringify(err));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("pageTransition after each called");
+    });
+
+    it('pageTransitionTest_0100', 0, async function (done) {
+      console.info('pageTransitionTest_0100 START');
+      let strJson = getInspectorByKey('Navigator');
+      let obj = JSON.parse(strJson);
+      console.info("pageTransitionTest_0100 component obj is: " + JSON.stringify(obj));
+      expect(obj.$type).assertEqual('Navigator');
+      expect(obj.$attrs.target).assertEqual('pages/pageTransition2');
+      console.info('pageTransitionTest_0100 END');
+      done();
+    });
+
+    it('pageTransitionTest_0200', 0, async function (done) {
+      console.info('pageTransitionTest_0200 START');
+      let strJson = getInspectorByKey('Navigator');
+      console.info("pageTransitionTest_0200 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("pageTransitionTest_0200 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.active).assertEqual('false');
+      console.info('pageTransitionTest_0200 END');
+      done();
+    });
+
+    it('pageTransitionTest_0300', 0, async function (done) {
+      console.info('pageTransitionTest_0300 START');
+      let strJson = getInspectorByKey('Navigator');
+      console.info("pageTransitionTest_0300 component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("pageTransitionTest_0300 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.type).assertEqual('NavigationType.Push');
+      console.info('pageTransitionTest_0300 END');
+      done();
+    });
+
+    it('pageTransitionTest_0400', 0, async function (done) {
+      console.info('pageTransitionTest_0400 START');
+      try {
+        let eventData = {
+          data: {
+            "scale": 6,
+            "opacity": 5,
+          }
+        }
+        let indexEvent = {
+          eventId: 95,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("pageTransitionTest_0400 start to publish emit");
+        events_emitter.emit(indexEvent, eventData);
+      } catch (err) {
+        console.log("pageTransitionTest_0400 change component data error: " + err.message);
+      }
+      let callback = (indexEventOne) => {
+        console.info("pageTransitionTest_0400 get state result is: " + JSON.stringify(indexEventOne));
+        expect(indexEventOne.data.scale).assertEqual(6);
+        expect(indexEventOne.data.opacity).assertEqual(5);
+      }
+      let indexEventOne = {
+        eventId: 96,
+        priority: events_emitter.EventPriority.LOW
+      }
+      try {
+        events_emitter.on(indexEventOne, callback);
+      } catch (err) {
+        console.info("pageTransitionTest_0400 on events_emitter err : " + JSON.stringify(err));
+      }
+      console.info("pageTransitionTest_0400 click result is: " + JSON.stringify(sendEventByKey('Navigator',10,"")));
+      await Utils.sleep(2000);
+      console.info('pageTransitionTest_0400 END');
+      done();
+    });
+  })
+}
+

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/PanelJsunit.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.
+ */
+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 panelJsunit() {
+  describe('panelTest', function () {
+    beforeEach(async function (done) {
+      let options = {
+        uri: 'pages/panel',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get panel state success " + JSON.stringify(pages));
+        if (!("panel" == pages.name)) {
+          console.info("get panel state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(4000);
+          console.info("push panel page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push panel page error " + JSON.stringify(err));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("panel after each called");
+    });
+
+    it('testPanel_100', 0, async function (done) {
+      console.info('testPanel_100 START');
+      await Utils.sleep(1000);
+      try {
+        let eventData = {
+          data: {
+            "type": "PanelType.Minibar"
+          }
+        }
+        var innerEvent = {
+          eventId: 440,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("testPanel_100 start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("testPanel_100 change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('Panel');
+      let obj = JSON.parse(strJson);
+      console.info("testPanel_100 component obj is: " + JSON.stringify(obj));
+      await Utils.sleep(2000);
+      expect(obj.$attrs.type).assertEqual("PanelType.Minibar");
+      console.info('testPanel_100 END');
+      done();
+    });
+
+    it('testPanel_200', 0, async function (done) {
+      console.info('testPanel_200 START');
+      await Utils.sleep(1000);
+      try {
+        let eventData = {
+          data: {
+            "mode": "PanelMode.Mini"
+          }
+        }
+        var innerEvent = {
+          eventId: 441,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("testPanel_200 start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("testPanel_200 change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('Panel');
+      let obj = JSON.parse(strJson);
+      console.info("testPanel_200 component obj is: " + JSON.stringify(obj));
+      await Utils.sleep(2000);
+      expect(obj.$attrs.mode).assertEqual("PanelMode.Mini");
+      console.info('testPanel_200 END');
+      done();
+    });
+
+    it('testPanel_300', 0, async function (done) {
+      console.info('testPanel_300 START');
+      await Utils.sleep(1000);
+      try {
+        let eventData = {
+          data: {
+            "show": "true"
+          }
+        }
+        var innerEvent = {
+          eventId: 442,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("testPanel_300 start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("testPanel_300 change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('Panel');
+      let obj = JSON.parse(strJson);
+      console.info("testPanel_300 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.show).assertEqual("true");
+      console.info('testPanel_300 END');
+      done();
+    });
+
+    it('testPanel_400', 0, async function (done) {
+      console.info('testPanel_400 START');
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('Panel');
+      let obj = JSON.parse(strJson);
+      console.info("testPanel_400 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.dragBar).assertEqual("true");
+      console.info('testPanel_400 END');
+      done();
+    });
+
+    it('testPanel_500', 0, async function (done) {
+      console.info('testPanel_500 START');
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('Panel');
+      let obj = JSON.parse(strJson);
+      console.info("testPanel_500 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.fullHeight).assertEqual("0.000000vp");
+      console.info('testPanel_500 END');
+      done();
+    });
+
+    it('testPanel_600', 0, async function (done) {
+      console.info('testPanel_600 START');
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('Panel');
+      let obj = JSON.parse(strJson);
+      console.info("testPanel_600 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.halfHeight).assertEqual("500.000000vp");
+      console.info('testPanel_600 END');
+      done();
+    });
+
+    it('testPanel_700', 0, async function (done) {
+      console.info('testPanel_700 START');
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('Panel');
+      let obj = JSON.parse(strJson);
+      console.info("testPanel_700 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.miniHeight).assertEqual("0.000000vp");
+      console.info('testPanel_700 END');
+      done();
+    });
+  })
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/Canvas3Jsunit.test.ets → ace/ace_ets_component/entry/src/main/ets/MainAbility/test/PieceJsunit.test.ets

@@ -15,42 +15,45 @@
  */
 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 canvasJsunit() {
-  describe('canvas3Test', function () {
+export default function pieceJsunit() {
+  describe('appInfoTest', function () {
     beforeEach(async function (done) {
-      console.info("canvas3 beforeEach start");
       let options = {
-        uri: 'pages/canvas3',
+        uri: 'pages/PieceCode',
       }
       try {
         router.clear();
         let pages = router.getState();
-        console.info("get canvas3 state pages:" + JSON.stringify(pages));
-        if (!("canvas3" == pages.name)) {
-          console.info("get canvas3 state pages.name:" + JSON.stringify(pages.name));
+        console.info("get PieceCode state success " + JSON.stringify(pages));
+        if (!("PieceCode" == pages.name)) {
+          console.info("get PieceCode pages success " + JSON.stringify(pages.name));
           let result = await router.push(options);
           await Utils.sleep(2000);
-          console.info("push canvas3 page result:" + JSON.stringify(result));
+          console.info("push PieceCode page success " + JSON.stringify(result));
         }
       } catch (err) {
-        console.error("push canvas3 page error:" + err);
+        console.error("push PieceCode page error " + JSON.stringify(err));
       }
       done()
     });
 
     afterEach(async function () {
-      await Utils.sleep(1000);
-      console.info("canvas3 after each called");
+      await Utils.sleep(2000);
+      console.info("PieceCode after each called");
     });
 
-    it('testCanvas01', 0, async function (done) {
-      console.info('[testCanvas01] START');
+    it('test_pieceCode_001', 0, async function (done) {
+      console.info('[test_pieceCode_001] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('piece');
+      console.info("[test_pieceCode_001] strJson: " + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("[test_pieceCode_001] component obj is: " + JSON.stringify(obj));
       await Utils.sleep(1000);
-      console.info('[testCanvas01]----------- START');
-      console.info('testCanvas01 END');
       done();
     });
-  });
-}
+  })
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/RadioJsunit.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.
+ */
+
+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 progressJsunit() {
+  describe('progressTest', function () {
+    beforeEach(async function (done) {
+      let options = {
+        uri: 'pages/progress',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get progress state success " + JSON.stringify(pages));
+        if (!("progress" == pages.name)) {
+          console.info("get progress state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(4000);
+          console.info("push progress page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push progress page error " + err);
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("progress after each called");
+    });
+
+    it('testProgress_600', 0, async function (done) {
+      console.info('[testProgress_600] START');
+      await Utils.sleep(1000);
+      let strJson = getInspectorByKey('CPValue');
+      let obj = JSON.parse(strJson);
+      console.info("testProgress_600 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.width).assertEqual("100.000000vp");
+      console.info('testProgress_600 END');
+      done();
+    });
+  })
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/RowJsunit.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.
+ */
+
+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 rowJsunit() {
+  describe('rowTest', function () {
+    beforeEach(async function (done) {
+      let options = {
+        uri: 'pages/row',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get row state success " + JSON.stringify(pages));
+        if (!("row" == pages.name)) {
+          console.info("get row state success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(4000);
+          console.info("push row page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push row page error " + JSON.stringify(err));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(1000);
+      console.info("row after each called");
+    });
+
+    it('testRow_100', 0, async function (done) {
+      console.info('testRow_100 START');
+      let strJson1 = getInspectorByKey('LPValue');
+      let objLP = JSON.parse(strJson1);
+      console.info("testRow_100 component objLP is: " + objLP.$attrs.value);
+      await Utils.sleep(1000);
+      try {
+        let eventData = {
+          data: {
+            "value": 100
+          }
+        }
+        var innerEvent = {
+          eventId: 55,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("testRow_100 start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("testRow_100 change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('LPValue');
+      let obj = JSON.parse(strJson);
+      console.info("testRows_100 component obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.value).assertEqual("100.000000");
+      console.info('testRow_100 END');
+      done();
+    });
+  })
+}
\ No newline at end of file

ace/ace_ets_component/entry/src/main/ets/MainAbility/test/ScrollBarJsunit.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 scrollBarJsunit() {
+  describe('appInfoTest', function () {
+    beforeEach(async function (done) {
+      let options = {
+        uri: 'pages/scrollBar',
+      }
+      try {
+        router.clear();
+        let pages = router.getState();
+        console.info("get scrollBar state success " + JSON.stringify(pages));
+        if (!("span" == pages.name)) {
+          console.info("get scrollBar success " + JSON.stringify(pages.name));
+          let result = await router.push(options);
+          await Utils.sleep(2000);
+          console.info("push scrollBar page success " + JSON.stringify(result));
+        }
+      } catch (err) {
+        console.error("push scrollBar page error " + JSON.stringify(err));
+      }
+      done()
+    });
+
+    afterEach(async function () {
+      await Utils.sleep(2000);
+      console.info("scrollBar after each called");
+    });
+
+    it('testScrollBar001', 0, async function (done) {
+      console.info('[testScrollBar001] START');
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('scroll');
+      console.info("[testScrollBar001] component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("[testScrollBar001] direction:" + obj.$attrs.direction);
+      expect(obj.$attrs.direction).assertEqual('ScrollBarDirection.Vertical');
+      done();
+    });
+
+    it('testScrollBar002', 0, async function (done) {
+      console.info('[testScrollBar002] START');
+      let object = {
+        "directionValue": ScrollBarDirection.Horizontal
+      };
+      try {
+        var eventData = {
+          data: {
+            "directionObject": JSON.stringify(object)
+          }
+        }
+        var innerEvent = {
+          eventId: 80,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testScrollBar002] start to publish emit:" + JSON.stringify(eventData.data));
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testScrollBar002] change component data error: " + err.message);
+      }
+      await Utils.sleep(4000);
+      let strJson = getInspectorByKey('scroll');
+      let obj = JSON.parse(strJson);
+      console.info("[testScrollBar002] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.direction).assertEqual('ScrollBarDirection.Vertical');
+      console.info('testScrollBar002 END');
+      done();
+    });
+
+    it('testScrollBar003', 0, async function (done) {
+      console.info('[testScrollBar003] START');
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('scroll');
+      console.info("[testScrollBar003] component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("[testScrollBar003] state:" + obj.$attrs.state);
+      expect(obj.$attrs.state).assertEqual('BarState.Off');
+      done();
+    });
+
+    it('testScrollBar004', 0, async function (done) {
+      console.info('[testScrollBar004] START');
+      try {
+        let eventData = {
+          data: {
+            "stateValue":"BarState.On"
+          }
+        }
+        let indexEvent = {
+          eventId: 41,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testScrollBar004] start to publish emit");
+        events_emitter.emit(indexEvent, eventData);
+      } catch (err) {
+        console.log("[testScrollBar004] change component data error: " + err.message);
+      }
+      await Utils.sleep(4000);
+      let strJson = getInspectorByKey('scroll');
+      console.info("[testScrollBar004] component strJson:" + strJson);
+      let obj = JSON.parse(strJson);
+      console.info("[testScrollBar004] state:" + obj.$attrs.state);
+      expect(obj.$attrs.state).assertEqual('BarState.Off');
+      done();
+    });
+  })
+}
\ No newline at end of file

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

@@ -82,5 +82,31 @@ export default function enableJsunit() {
       console.info('testZIndex02 END');
       done();
     });
+
+    it('testZIndex03', 0, async function (done) {
+      console.info('[testZIndex03] START');
+      try {
+        var eventData = {
+          data: {
+            "zIndex": -5
+          }
+        }
+        var innerEvent = {
+          eventId: 84,
+          priority: events_emitter.EventPriority.LOW
+        }
+        console.info("[testZIndex03] start to publish emit");
+        events_emitter.emit(innerEvent, eventData);
+      } catch (err) {
+        console.log("[testZIndex03] change component data error: " + err.message);
+      }
+      await Utils.sleep(2000);
+      let strJson = getInspectorByKey('zIndex');
+      let obj = JSON.parse(strJson);
+      console.info("[testZIndex03] obj is: " + JSON.stringify(obj));
+      expect(obj.$attrs.zIndex).assertEqual(-5);
+      console.info('testZIndex03 END');
+      done();
+    });
   })
 }