init project

LoginPage

@@ -0,0 +1 @@
+Subproject commit ef20cd75780d3bab0ef53f812a731a5da03a8291

RankingDemo/.gitignore

@@ -0,0 +1,11 @@
+/node_modules
+/oh_modules
+/local.properties
+/.idea
+**/build
+/.hvigor
+.cxx
+/.clangd
+/.clang-format
+/.clang-tidy
+**/.test

RankingDemo/AppScope/app.json5

@@ -0,0 +1,10 @@
+{
+  "app": {
+    "bundleName": "com.example.rankingdemo",
+    "vendor": "example",
+    "versionCode": 1000000,
+    "versionName": "1.0.0",
+    "icon": "$media:app_icon",
+    "label": "$string:app_name"
+  }
+}

RankingDemo/AppScope/resources/base/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "RankingDemo"
+    }
+  ]
+}

RankingDemo/build-profile.json5

@@ -0,0 +1,27 @@
+{
+  "app": {
+    "signingConfigs": [],
+    "compileSdkVersion": 9,
+    "compatibleSdkVersion": 9,
+    "products": [
+      {
+        "name": "default",
+        "signingConfig": "default",
+      }
+    ]
+  },
+  "modules": [
+    {
+      "name": "entry",
+      "srcPath": "./entry",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    }
+  ]
+}

RankingDemo/entry/.gitignore

@@ -0,0 +1,6 @@
+/node_modules
+/oh_modules
+/.preview
+/build
+/.cxx
+/.test

RankingDemo/entry/build-profile.json5

@@ -0,0 +1,14 @@
+{
+  "apiType": 'stageMode',
+  "buildOption": {
+  },
+  "targets": [
+    {
+      "name": "default",
+      "runtimeOS": "HarmonyOS"
+    },
+    {
+      "name": "ohosTest",
+    }
+  ]
+}

RankingDemo/entry/hvigorfile.ts

@@ -0,0 +1,2 @@
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+export { hapTasks } from '@ohos/hvigor-ohos-plugin';

RankingDemo/entry/oh-package.json5

@@ -0,0 +1,10 @@
+{
+  "name": "entry",
+  "version": "1.0.0",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "author": "",
+  "license": "",
+  "dependencies": {}
+}
+

RankingDemo/entry/src/main/ets/common/bean/RankData.ets

@@ -0,0 +1,5 @@
+export class RankData {
+  public fruitName: Resource;
+  private vote: string;
+  private id: string;
+}

RankingDemo/entry/src/main/ets/common/constants/Constants.ets

@@ -0,0 +1,186 @@
+/**
+ * The font size of application.
+ */
+export enum FontSize {
+  SMALL = 14,
+  MIDDLE = 16,
+  LARGE = 20,
+};
+
+/**
+ * The font weight of application
+ */
+export enum FontWeight {
+  BOLD = '400',
+  BOLDER = '500'
+}
+
+/**
+ * The weight is global default value for component size.
+ */
+export const WEIGHT = '100%';
+
+/**
+ * The title of TitleComponent.
+ */
+export const TITLE: Resource = $r('app.string.title');
+
+/**
+ * The Style of ListHeaderComponent.
+ */
+export const ListHeaderStyle = {
+  /**
+   * The weight of font
+   */
+  FONT_WEIGHT: 400,
+
+  /**
+   * The layout weight of left.
+   */
+  LAYOUT_WEIGHT_LEFT: '30%',
+
+  /**
+   * The layout weight of center.
+   */
+  LAYOUT_WEIGHT_CENTER: '50%',
+
+  /**
+   * The layout weight of right
+   */
+  LAYOUT_WEIGHT_RIGHT: '20%'
+}
+
+/**
+ * The Style of ListItemComponent
+ */
+export const ItemStyle = {
+  /**
+   * The line height of text
+   */
+  TEXT_LAYOUT_SIZE: 24,
+
+  /**
+   * The border radius of circle text.
+   */
+  CIRCLE_TEXT_BORDER_RADIUS: 24,
+
+  /**
+   * The size of circle text.
+   */
+  CIRCLE_TEXT_SIZE:24,
+
+  /**
+   * The height of item
+   */
+  BAR_HEIGHT: 48,
+
+  /**
+   * The layout weight of left
+   */
+  LAYOUT_WEIGHT_LEFT: '30%',
+
+  /**
+   * The layout weight of center
+   */
+  LAYOUT_WEIGHT_CENTER: '50%',
+
+  /**
+   * The layout weight of right.
+   */
+  LAYOUT_WEIGHT_RIGHT: '20%',
+
+  /**
+   * The width of border.
+   */
+  BORDER_WIDTH: 1,
+
+  /**
+   * The blue color of item.
+   */
+  COLOR_BLUE: $r('app.color.item_color'),
+
+  /**
+   * The black color of item.
+   */
+  COLOR_BLACK: $r('app.color.item_color_black')
+}
+
+/**
+ * The style of RankPage
+ */
+export const Style = {
+  /**
+   * The padding of ranking
+   */
+  RANK_PADDING: 15,
+
+  /**
+   * The width of ranking content
+   */
+  CONTENT_WIDTH: '90%',
+
+  /**
+   * The border radius.
+   */
+  BORDER_RADIUS: 20,
+
+  /**
+   * The stroke width of divider.
+   */
+  STROKE_WIDTH: 1,
+
+  /**
+   * The top margin of ranking header.
+   */
+  HEADER_MARGIN_TOP: 20,
+
+  /**
+   * The bottom margin of ranking header.
+   */
+  HEADER_MARGIN_BOTTOM: 15,
+
+  /**
+   * The height of list.
+   */
+  LIST_HEIGHT: '65%'
+}
+
+/**
+ * The Style of TitleComponent
+ */
+export const TitleBarStyle = {
+  /**
+   * The image size of back button
+   */
+  IMAGE_BACK_SIZE: 21,
+
+  /**
+   * The size of loading image.
+   */
+  IMAGE_LOADING_SIZE: 22,
+
+  /**
+   * The right margin of back button
+   */
+  IMAGE_BACK_MARGIN_RIGHT: 18,
+
+  /**
+   * The height of TitleComponent
+   */
+  BAR_HEIGHT: 47,
+
+  /**
+   * The horizontal margin of TitleComponent.
+   */
+  BAR_MARGIN_HORIZONTAL: 26,
+
+  /**
+   * The top margin of TitleComponent
+   */
+  BAR_MARGIN_TOP: 10,
+
+  /**
+   * The weight of Row layout
+   */
+  WEIGHT: '50%'
+}

RankingDemo/entry/src/main/ets/entryability/EntryAbility.ts

@@ -0,0 +1,41 @@
+import UIAbility from '@ohos.app.ability.UIAbility';
+import hilog from '@ohos.hilog';
+import window from '@ohos.window';
+
+export default class EntryAbility extends UIAbility {
+  onCreate(want, launchParam) {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
+  }
+
+  onDestroy() {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
+  }
+
+  onWindowStageCreate(windowStage: window.WindowStage) {
+    // Main window is created, set main page for this ability
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+
+    windowStage.loadContent('pages/RankPage', (err, data) => {
+      if (err.code) {
+        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+        return;
+      }
+      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
+    });
+  }
+
+  onWindowStageDestroy() {
+    // Main window is destroyed, release UI related resources
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+  }
+
+  onForeground() {
+    // Ability has brought to foreground
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
+  }
+
+  onBackground() {
+    // Ability has back to background
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
+  }
+}

RankingDemo/entry/src/main/ets/model/DataModel.ets

@@ -0,0 +1,109 @@
+/*
+ * Copyright (c) 2022 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.
+ */
+
+/*
+ * the Mock file instead of network data.
+ */
+export { rankData1, rankData2 }
+
+const rankData1: object[] = [
+  {
+    'id': '1',
+    'name': $r('app.string.fruit_apple'),
+    'vote': '12080',
+  },
+  {
+    'id': '2',
+    'name': $r('app.string.fruit_grapes'),
+    'vote': '10320',
+  },
+  { 'id': '3',
+    'name': $r('app.string.fruit_watermelon'),
+    'vote': '9801',
+  },
+  {
+    'id': '4',
+    'name': $r('app.string.fruit_banana'),
+    'vote': '8431',
+  },
+  { 'id': '5',
+    'name': $r('app.string.fruit_pineapple'),
+    'vote': '7546',
+  },
+  { 'id': '6',
+    'name': $r('app.string.fruit_durian'),
+    'vote': '7431',
+  },
+  { 'id': '7',
+    'name': $r('app.string.fruit_red_grape'),
+    'vote': '7187',
+  },
+  { 'id': '8',
+    'name': $r('app.string.fruit_pears'),
+    'vote': '7003',
+  },
+  { 'id': '9',
+    'name': $r('app.string.fruit_carambola'),
+    'vote': '6794',
+  },
+  { 'id': '10',
+    'name': $r('app.string.fruit_guava'),
+    'vote': '6721',
+  },
+];
+
+const rankData2: object[] = [
+  { 'id': '11',
+    'name': $r('app.string.fruit_watermelon'),
+    'vote': '8836',
+  },
+  { 'id': '12',
+    'name': $r('app.string.fruit_apple'),
+    'vote': '8521',
+  },
+
+  { 'id': '13',
+    'name': $r('app.string.fruit_banana'),
+    'vote': '8431',
+  },
+  { 'id': '14',
+    'name': $r('app.string.fruit_grapes'),
+    'vote': '7909',
+  },
+  { 'id': '15',
+    'name': $r('app.string.fruit_red_grape'),
+    'vote': '7547',
+  },
+  { 'id': '16',
+    'name': $r('app.string.fruit_pears'),
+    'vote': '7433',
+  },
+  { 'id': '17',
+    'name': $r('app.string.fruit_pineapple'),
+    'vote': '7186',
+  },
+  { 'id': '18',
+    'name': $r('app.string.fruit_durian'),
+    'vote': '7023',
+  },
+  { 'id': '19',
+    'name': $r('app.string.fruit_guava'),
+    'vote': '6794',
+  },
+  { 'id': '20',
+    'name': $r('app.string.fruit_carambola'),
+    'vote': '6721',
+  },
+];

RankingDemo/entry/src/main/ets/pages/RankPage.ets

@@ -0,0 +1,71 @@
+import { RankViewModel } from '../viewmodel/RankViewModel';
+import { RankData } from "../common/bean/RankData"
+import { TitleComponent } from "../view/TitleComponent"
+import ListHeaderComponents from "../view/ListHeaderComponent"
+import { TITLE, Style,WEIGHT } from "../common/constants/Constants"
+import ListItemComponent from '../view/ListItemComponent'
+
+let rankModel: RankViewModel = new RankViewModel();
+
+@Preview
+@Entry
+@Component
+struct RankPage {
+  @State dataSource1: RankData[] = [];
+  @State dataSource2: RankData[] = [];
+  @State isSwitchDataSource: boolean = true;
+
+  aboutToAppear() {
+    this.dataSource1 = rankModel.loadRankDataSource1();
+    this.dataSource2 = rankModel.loadRankDataSource2();
+  }
+  build() {
+    Column() {
+      // The component in the top
+      TitleComponent({ isRefreshData: $isSwitchDataSource, title: TITLE })
+      // The head style of List component
+      ListHeaderComponents({
+        paddingValue: {
+          left: Style.RANK_PADDING,
+          right: Style.RANK_PADDING
+        },
+        widthValue: Style.CONTENT_WIDTH
+      })
+        .margin({
+          top: Style.HEADER_MARGIN_TOP,
+          bottom: Style.HEADER_MARGIN_BOTTOM
+        })
+      // The style of List component.
+      this.RankList(Style.CONTENT_WIDTH)
+    }
+    .backgroundColor($r('app.color.background'))
+    .height(WEIGHT)
+    .width(WEIGHT)
+  }
+
+  @Builder RankList(widthValue: Length) {
+    Column() {
+      List() {
+        ForEach(this.isSwitchDataSource ? this.dataSource1 : this.dataSource2,
+          (item, index) => {
+            ListItem() {
+              ListItemComponent({ index: index + 1, name: item.name, vote: item.vote, isSwitchDataSource: this.isSwitchDataSource })
+            }
+          },
+          item => JSON.stringify(item)
+        )
+      }
+      .width(WEIGHT)
+      .height(Style.LIST_HEIGHT)
+      .divider({ strokeWidth: Style.STROKE_WIDTH })
+    }
+    .padding({
+      left: Style.RANK_PADDING,
+      right: Style.RANK_PADDING
+    })
+    .borderRadius(Style.BORDER_RADIUS)
+    .width(widthValue)
+    .alignItems(HorizontalAlign.Center)
+    .backgroundColor(Color.White)
+  }
+}

RankingDemo/entry/src/main/ets/view/ListHeaderComponent.ets

@@ -0,0 +1,28 @@
+import { FontSize,ListHeaderStyle } from "../common/constants/Constants"
+
+@Component
+export default struct ListHeaderComponent {
+  paddingValue: Padding | Length;
+  widthValue: Length;
+
+  build() {
+    Row() {
+      Text($r('app.string.page_number'))
+        .width(ListHeaderStyle.LAYOUT_WEIGHT_LEFT)
+        .fontSize(FontSize.SMALL)
+        .fontColor($r('app.color.font_description'))
+      Text($r('app.string.page_type'))
+        .width(ListHeaderStyle.LAYOUT_WEIGHT_CENTER)
+        .fontSize(FontSize.SMALL)
+        .fontWeight(ListHeaderStyle.FONT_WEIGHT)
+        .fontColor($r('app.color.font_description'))
+      Text($r('app.string.page_vote'))
+        .width(ListHeaderStyle.LAYOUT_WEIGHT_RIGHT)
+        .fontSize(FontSize.SMALL)
+        .fontWeight(ListHeaderStyle.FONT_WEIGHT)
+        .fontColor($r('app.color.font_description'))
+    }
+    .width(this.widthValue)
+    .padding(this.paddingValue)
+  }
+}

RankingDemo/entry/src/main/ets/view/ListItemComponent.ets

@@ -0,0 +1,65 @@
+import { FontSize,FontWeight,ItemStyle, WEIGHT } from "../common/constants/Constants"
+
+@Component
+export default struct ListItemComponent {
+  index: number;
+  private name: Resource;
+  @Prop vote: string;
+  @Prop isSwitchDataSource: boolean;
+  @State isChange: boolean = false
+
+  build() {
+    Row() {
+      Column() {
+        if (this.isRenderCircleText()) {
+          this.CircleText(this.index)
+        } else {
+          Text(this.index.toString())
+            .lineHeight(ItemStyle.TEXT_LAYOUT_SIZE)
+            .textAlign(TextAlign.Center)
+            .width(ItemStyle.TEXT_LAYOUT_SIZE)
+            .fontWeight(FontWeight.BOLD)
+            .fontSize(FontSize.SMALL)
+        }
+      }
+      .width(ItemStyle.LAYOUT_WEIGHT_LEFT)
+      .alignItems(HorizontalAlign.Start)
+
+      Text(this.name)
+        .width(ItemStyle.LAYOUT_WEIGHT_CENTER)
+        .fontWeight(FontWeight.BOLDER)
+        .fontSize(FontSize.MIDDLE)
+        .fontColor(this.isChange ? ItemStyle.COLOR_BLUE : ItemStyle.COLOR_BLACK)
+
+      Text(this.vote)
+        .width(ItemStyle.LAYOUT_WEIGHT_RIGHT)
+        .fontWeight(FontWeight.BOLD)
+        .fontSize(FontSize.SMALL)
+        .fontColor(this.isChange ? ItemStyle.COLOR_BLUE : ItemStyle.COLOR_BLACK)
+    }
+    .height(ItemStyle.BAR_HEIGHT)
+    .width(WEIGHT)
+    .onClick(() => {
+      this.isSwitchDataSource = !this.isSwitchDataSource;
+      this.isChange = !this.isChange
+    })
+  }
+
+  @Builder CircleText(index: number) {
+    Row() {
+      Text(this.index.toString())
+        .fontWeight(FontWeight.BOLD)
+        .fontSize(FontSize.SMALL)
+        .fontColor(Color.White);
+    }
+    .justifyContent(FlexAlign.Center)
+    .borderRadius(ItemStyle.CIRCLE_TEXT_BORDER_RADIUS)
+    .size({ width: ItemStyle.CIRCLE_TEXT_SIZE,
+      height: ItemStyle.CIRCLE_TEXT_SIZE })
+    .backgroundColor($r('app.color.circle_text_background'))
+  }
+
+  isRenderCircleText(): boolean {
+    return this.index === 1 || this.index === 2 || this.index === 3
+  }
+}

RankingDemo/entry/src/main/ets/view/TitleComponent.ets

@@ -0,0 +1,48 @@
+
+import {FontSize, TitleBarStyle, WEIGHT} from "../common/constants/Constants"
+
+@Component
+export struct TitleComponent {
+  @Link isRefreshData: boolean;
+  @State title: Resource = $r('app.string.title_default')
+
+  build() {
+    Row() {
+      Row() {
+        Image($r('app.media.ic_public_back'))
+          .width(TitleBarStyle.IMAGE_BACK_SIZE)
+          .height(TitleBarStyle.IMAGE_BACK_SIZE)
+          .margin({ right: TitleBarStyle.IMAGE_BACK_MARGIN_RIGHT })
+          .onClick(() => {
+
+          })
+        Text(this.title)
+          .fontSize(FontSize.LARGE)
+      }
+      .width(TitleBarStyle.WEIGHT)
+      .height(WEIGHT)
+      .justifyContent(FlexAlign.Start)
+
+      Row() {
+        Image($r('app.media.loading'))
+          .width(TitleBarStyle.IMAGE_LOADING_SIZE)
+          .height(TitleBarStyle.IMAGE_LOADING_SIZE)
+          .onClick(() => {
+            this.isRefreshData = !this.isRefreshData
+          })
+      }
+      .width(TitleBarStyle.WEIGHT)
+      .height(WEIGHT)
+      .justifyContent(FlexAlign.End)
+    }
+    .justifyContent(FlexAlign.SpaceAround)
+    .width(WEIGHT)
+    .height(TitleBarStyle.BAR_HEIGHT)
+    .padding({
+      left: TitleBarStyle.BAR_MARGIN_HORIZONTAL,
+      right: TitleBarStyle.BAR_MARGIN_HORIZONTAL
+    })
+    .margin({ top: TitleBarStyle.BAR_MARGIN_TOP })
+
+  }
+}

RankingDemo/entry/src/main/ets/viewmodel/RankViewModel.ets

@@ -0,0 +1,10 @@
+import {rankData1, rankData2} from "../model/DataModel";
+
+export class RankViewModel {
+  loadRankDataSource1() :any[] {
+    return rankData1
+  }
+  loadRankDataSource2(): any[] {
+    return rankData2
+  }
+}

RankingDemo/entry/src/main/module.json5

@@ -0,0 +1,37 @@
+{
+  "module": {
+    "name": "entry",
+    "type": "entry",
+    "description": "$string:module_desc",
+    "mainElement": "EntryAbility",
+    "deviceTypes": [
+      "phone",
+      "tablet"
+    ],
+    "deliveryWithInstall": true,
+    "installationFree": false,
+    "pages": "$profile:main_pages",
+    "abilities": [
+      {
+        "name": "EntryAbility",
+        "srcEntry": "./ets/entryability/EntryAbility.ts",
+        "description": "$string:EntryAbility_desc",
+        "icon": "$media:icon",
+        "label": "$string:EntryAbility_label",
+        "startWindowIcon": "$media:icon",
+        "startWindowBackground": "$color:start_window_background",
+        "exported": true,
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

RankingDemo/entry/src/main/resources/base/element/color.json

@@ -0,0 +1,28 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "item_color",
+      "value": "#007DFF"
+    },
+    {
+      "name": "item_color_black",
+      "value": "#182431"
+    },
+    {
+      "name": "background",
+      "value": "#F1F3F5"
+    },
+    {
+      "name": "font_description",
+      "value": "#989A9C"
+    },
+    {
+      "name": "circle_text_background",
+      "value": "#007dff"
+    }
+  ]
+}

RankingDemo/entry/src/main/resources/base/element/string.json

@@ -0,0 +1,76 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "label"
+    },
+    {
+      "name": "page_type",
+      "value": "veriety"
+    },
+    {
+      "name": "page_number",
+      "value": "ranking"
+    },
+    {
+      "name": "page_vote",
+      "value": "vote"
+    },
+    {
+      "name": "title",
+      "value": "Ranking List"
+    },
+    {
+      "name": "title_default",
+      "value": "  "
+    },
+    {
+      "name": "fruit_apple",
+      "value": "apple"
+    },
+    {
+      "name": "fruit_watermelon",
+      "value": "watermelon"
+    },
+    {
+      "name": "fruit_banana",
+      "value": "banana"
+    },
+    {
+      "name": "fruit_grapes",
+      "value": "grapes"
+    },
+    {
+      "name": "fruit_red_grape",
+      "value": "grape"
+    },
+    {
+      "name": "fruit_pears",
+      "value": "pears"
+    },
+    {
+      "name": "fruit_pineapple",
+      "value": "pineapple"
+    },
+    {
+      "name": "fruit_durian",
+      "value": "durian"
+    },
+    {
+      "name": "fruit_guava",
+      "value": "guava"
+    },
+    {
+      "name": "fruit_carambola",
+      "value": "carambola"
+    }
+  ]
+}

RankingDemo/entry/src/main/resources/base/media/ic_public_back.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 24 24" version="1.1">
+    <title>Public/ic_public_back</title>
+    <defs>
+        <path d="M5.31079777,13.7499686 L11.2803301,19.7196699 L11.3140714,19.7556673 C11.5727547,20.0502619 11.5615076,20.4991526 11.2803301,20.7803301 C10.9991526,21.0615076 10.5502619,21.0727547 10.2556673,20.8140714 L10.2196699,20.7803301 L3.18929777,13.7499686 L5.31079777,13.7499686 Z M11.2803301,3.21966991 C11.5615076,3.5008474 11.5727547,3.94973814 11.3140714,4.24433269 L11.2803301,4.28033009 L4.3105,11.25 L21,11.25 C21.3994202,11.25 21.7259152,11.56223 21.7487268,11.9559318 L21.75,12 C21.75,12.3994202 21.43777,12.7259152 21.0440682,12.7487268 L21,12.75 L3.10355339,12.75 C2.8383369,12.75 2.58398299,12.6446432 2.39644661,12.4571068 C2.01893979,12.0796 2.00635623,11.4753589 2.35869593,11.0827365 L2.39644661,11.0428932 L10.2196699,3.21966991 C10.5125631,2.9267767 10.9874369,2.9267767 11.2803301,3.21966991 Z" id="_path-1"/>
+    </defs>
+    <g id="_Public/ic_public_back" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="_mask-2" fill="white">
+            <use xlink:href="#_path-1"/>
+        </mask>
+        <use id="_形状结合" fill="#212121"  xlink:href="#_path-1"/>
+    </g>
+</svg>

RankingDemo/entry/src/main/resources/base/profile/main_pages.json

@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/RankPage"
+  ]
+}

RankingDemo/entry/src/main/resources/en_US/element/string.json

@@ -0,0 +1,76 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "label"
+    },
+    {
+      "name": "page_type",
+      "value": "veriety"
+    },
+    {
+      "name": "page_number",
+      "value": "ranking"
+    },
+    {
+      "name": "page_vote",
+      "value": "vote"
+    },
+    {
+      "name": "title",
+      "value": "Ranking List"
+    },
+    {
+      "name": "title_default",
+      "value": "  "
+    },
+    {
+      "name": "fruit_apple",
+      "value": "apple"
+    },
+    {
+      "name": "fruit_watermelon",
+      "value": "watermelon"
+    },
+    {
+      "name": "fruit_banana",
+      "value": "banana"
+    },
+    {
+      "name": "fruit_grapes",
+      "value": "grapes"
+    },
+    {
+      "name": "fruit_red_grape",
+      "value": "grape"
+    },
+    {
+      "name": "fruit_pears",
+      "value": "pears"
+    },
+    {
+      "name": "fruit_pineapple",
+      "value": "pineapple"
+    },
+    {
+      "name": "fruit_durian",
+      "value": "durian"
+    },
+    {
+      "name": "fruit_guava",
+      "value": "guava"
+    },
+    {
+      "name": "fruit_carambola",
+      "value": "carambola"
+    }
+  ]
+}

RankingDemo/entry/src/main/resources/zh_CN/element/string.json

@@ -0,0 +1,76 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "模块描述"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "label"
+    },
+    {
+      "name": "page_type",
+      "value": "种类"
+    },
+    {
+      "name": "page_number",
+      "value": "排名"
+    },
+    {
+      "name": "page_vote",
+      "value": "得票数"
+    },
+    {
+      "name": "title",
+      "value": "排行榜"
+    },
+    {
+      "name": "title_default",
+      "value": "  "
+    },
+    {
+      "name": "fruit_apple",
+      "value": "苹果"
+    },
+    {
+      "name": "fruit_watermelon",
+      "value": "西瓜"
+    },
+    {
+      "name": "fruit_banana",
+      "value": "香蕉"
+    },
+    {
+      "name": "fruit_grapes",
+      "value": "葡萄"
+    },
+    {
+      "name": "fruit_red_grape",
+      "value": "红提"
+    },
+    {
+      "name": "fruit_pears",
+      "value": "梨子"
+    },
+    {
+      "name": "fruit_pineapple",
+      "value": "菠萝"
+    },
+    {
+      "name": "fruit_durian",
+      "value": "榴莲"
+    },
+    {
+      "name": "fruit_guava",
+      "value": "番石榴"
+    },
+    {
+      "name": "fruit_carambola",
+      "value": "杨桃"
+    }
+  ]
+}

RankingDemo/entry/src/ohosTest/ets/test/Ability.test.ets

@@ -0,0 +1,35 @@
+import hilog from '@ohos.hilog';
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium'
+
+export default function abilityTest() {
+  describe('ActsAbilityTest', function () {
+    // Defines a test suite. Two parameters are supported: test suite name and test suite function.
+    beforeAll(function () {
+      // Presets an action, which is performed only once before all test cases of the test suite start.
+      // This API supports only one parameter: preset action function.
+    })
+    beforeEach(function () {
+      // Presets an action, which is performed before each unit test case starts.
+      // The number of execution times is the same as the number of test cases defined by **it**.
+      // This API supports only one parameter: preset action function.
+    })
+    afterEach(function () {
+      // Presets a clear action, which is performed after each unit test case ends.
+      // The number of execution times is the same as the number of test cases defined by **it**.
+      // This API supports only one parameter: clear action function.
+    })
+    afterAll(function () {
+      // Presets a clear action, which is performed after all test cases of the test suite end.
+      // This API supports only one parameter: clear action function.
+    })
+    it('assertContain',0, function () {
+      // Defines a test case. This API supports three parameters: test case name, filter parameter, and test case function.
+      hilog.info(0x0000, 'testTag', '%{public}s', 'it begin');
+      let a = 'abc'
+      let b = 'b'
+      // Defines a variety of assertion methods, which are used to declare expected boolean conditions.
+      expect(a).assertContain(b)
+      expect(a).assertEqual(a)
+    })
+  })
+}

RankingDemo/entry/src/ohosTest/ets/test/List.test.ets

@@ -0,0 +1,5 @@
+import abilityTest from './Ability.test'
+
+export default function testsuite() {
+  abilityTest()
+}

RankingDemo/entry/src/ohosTest/ets/testability/TestAbility.ets

@@ -0,0 +1,48 @@
+import UIAbility from '@ohos.app.ability.UIAbility';
+import AbilityDelegatorRegistry from '@ohos.app.ability.abilityDelegatorRegistry';
+import hilog from '@ohos.hilog';
+import { Hypium } from '@ohos/hypium';
+import testsuite from '../test/List.test';
+import window from '@ohos.window';
+
+export default class TestAbility extends UIAbility {
+    onCreate(want, launchParam) {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility onCreate');
+        hilog.info(0x0000, 'testTag', '%{public}s', 'want param:' + JSON.stringify(want) ?? '');
+        hilog.info(0x0000, 'testTag', '%{public}s', 'launchParam:'+ JSON.stringify(launchParam) ?? '');
+        var abilityDelegator: any
+        abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator()
+        var abilityDelegatorArguments: any
+        abilityDelegatorArguments = AbilityDelegatorRegistry.getArguments()
+        hilog.info(0x0000, 'testTag', '%{public}s', 'start run testcase!!!');
+        Hypium.hypiumTest(abilityDelegator, abilityDelegatorArguments, testsuite)
+    }
+
+    onDestroy() {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility onDestroy');
+    }
+
+    onWindowStageCreate(windowStage: window.WindowStage) {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility onWindowStageCreate');
+        windowStage.loadContent('testability/pages/Index', (err, data) => {
+            if (err.code) {
+                hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+                return;
+            }
+            hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s',
+                JSON.stringify(data) ?? '');
+        });
+    }
+
+    onWindowStageDestroy() {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility onWindowStageDestroy');
+    }
+
+    onForeground() {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility onForeground');
+    }
+
+    onBackground() {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility onBackground');
+    }
+}

RankingDemo/entry/src/ohosTest/ets/testability/pages/Index.ets

@@ -0,0 +1,34 @@
+import hilog from '@ohos.hilog';
+
+@Entry
+@Component
+struct Index {
+  aboutToAppear() {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility index aboutToAppear');
+  }
+ @State message: string = 'Hello World'
+   build() {
+         Row() {
+           Column() {
+             Text(this.message)
+               .fontSize(50)
+               .fontWeight(FontWeight.Bold)
+             Button() {
+               Text('next page')
+                 .fontSize(20)
+                 .fontWeight(FontWeight.Bold)
+             }.type(ButtonType.Capsule)
+             .margin({
+               top: 20
+             })
+             .backgroundColor('#0D9FFB')
+             .width('35%')
+             .height('5%')
+             .onClick(()=>{
+             })
+           }
+             .width('100%')
+         }
+             .height('100%')
+   }
+ }

RankingDemo/entry/src/ohosTest/ets/testrunner/OpenHarmonyTestRunner.ts

@@ -0,0 +1,49 @@
+import hilog from '@ohos.hilog';
+import TestRunner from '@ohos.application.testRunner';
+import AbilityDelegatorRegistry from '@ohos.app.ability.abilityDelegatorRegistry';
+
+var abilityDelegator = undefined
+var abilityDelegatorArguments = undefined
+
+async function onAbilityCreateCallback() {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'onAbilityCreateCallback');
+}
+
+async function addAbilityMonitorCallback(err: any) {
+    hilog.info(0x0000, 'testTag', 'addAbilityMonitorCallback : %{public}s', JSON.stringify(err) ?? '');
+}
+
+export default class OpenHarmonyTestRunner implements TestRunner {
+    constructor() {
+    }
+
+    onPrepare() {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'OpenHarmonyTestRunner OnPrepare ');
+    }
+
+    async onRun() {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'OpenHarmonyTestRunner onRun run');
+        abilityDelegatorArguments = AbilityDelegatorRegistry.getArguments()
+        abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator()
+        var testAbilityName = abilityDelegatorArguments.bundleName + '.TestAbility'
+        let lMonitor = {
+            abilityName: testAbilityName,
+            onAbilityCreate: onAbilityCreateCallback,
+        };
+        abilityDelegator.addAbilityMonitor(lMonitor, addAbilityMonitorCallback)
+        var cmd = 'aa start -d 0 -a TestAbility' + ' -b ' + abilityDelegatorArguments.bundleName
+        var debug = abilityDelegatorArguments.parameters['-D']
+        if (debug == 'true')
+        {
+            cmd += ' -D'
+        }
+        hilog.info(0x0000, 'testTag', 'cmd : %{public}s', cmd);
+        abilityDelegator.executeShellCommand(cmd,
+            (err: any, d: any) => {
+                hilog.info(0x0000, 'testTag', 'executeShellCommand : err : %{public}s', JSON.stringify(err) ?? '');
+                hilog.info(0x0000, 'testTag', 'executeShellCommand : data : %{public}s', d.stdResult ?? '');
+                hilog.info(0x0000, 'testTag', 'executeShellCommand : data : %{public}s', d.exitCode ?? '');
+            })
+        hilog.info(0x0000, 'testTag', '%{public}s', 'OpenHarmonyTestRunner onRun end');
+    }
+}

RankingDemo/entry/src/ohosTest/module.json5

@@ -0,0 +1,37 @@
+{
+  "module": {
+    "name": "entry_test",
+    "type": "feature",
+    "description": "$string:module_test_desc",
+    "mainElement": "TestAbility",
+    "deviceTypes": [
+      "phone",
+      "tablet"
+    ],
+    "deliveryWithInstall": true,
+    "installationFree": false,
+    "pages": "$profile:test_pages",
+    "abilities": [
+      {
+        "name": "TestAbility",
+        "srcEntry": "./ets/testability/TestAbility.ets",
+        "description": "$string:TestAbility_desc",
+        "icon": "$media:icon",
+        "label": "$string:TestAbility_label",
+        "exported": true,
+        "startWindowIcon": "$media:icon",
+        "startWindowBackground": "$color:start_window_background",
+        "skills": [
+          {
+            "actions": [
+              "action.system.home"
+            ],
+            "entities": [
+              "entity.system.home"
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

RankingDemo/entry/src/ohosTest/resources/base/element/color.json

@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    }
+  ]
+}

RankingDemo/entry/src/ohosTest/resources/base/element/string.json

@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_test_desc",
+      "value": "test ability description"
+    },
+    {
+      "name": "TestAbility_desc",
+      "value": "the test ability"
+    },
+    {
+      "name": "TestAbility_label",
+      "value": "test label"
+    }
+  ]
+}

RankingDemo/entry/src/ohosTest/resources/base/profile/test_pages.json

@@ -0,0 +1,5 @@
+{
+  "src": [
+    "testability/pages/Index"
+  ]
+}

RankingDemo/hvigor/hvigor-config.json5

@@ -0,0 +1,6 @@
+{
+  "hvigorVersion": "2.4.2",
+  "dependencies": {
+    "@ohos/hvigor-ohos-plugin": "2.4.2"
+  }
+}

RankingDemo/hvigorfile.ts

@@ -0,0 +1,2 @@
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+export { appTasks } from '@ohos/hvigor-ohos-plugin';

RankingDemo/hvigorw

@@ -0,0 +1,48 @@
+#!/bin/bash
+
+# ----------------------------------------------------------------------------
+#  Hvigor startup script, version 1.0.0
+# 
+#  Required ENV vars:
+#  ------------------
+#    NODE_HOME - location of a Node home dir
+#    or 
+#    Add /usr/local/nodejs/bin to the PATH environment variable
+# ----------------------------------------------------------------------------
+
+HVIGOR_APP_HOME=$(dirname $(readlink -f $0))
+HVIGOR_WRAPPER_SCRIPT=${HVIGOR_APP_HOME}/hvigor/hvigor-wrapper.js
+warn() {
+	echo ""
+	echo -e "\033[1;33m`date '+[%Y-%m-%d %H:%M:%S]'`$@\033[0m"
+}
+
+error() {
+	echo ""
+	echo -e "\033[1;31m`date '+[%Y-%m-%d %H:%M:%S]'`$@\033[0m"
+}
+
+fail() {
+	error "$@"
+	exit 1
+}
+
+# Determine node to start hvigor wrapper script
+if [ -n "${NODE_HOME}" ];then
+   EXECUTABLE_NODE="${NODE_HOME}/bin/node"
+   if [ ! -x "$EXECUTABLE_NODE" ];then
+       fail "ERROR: NODE_HOME is set to an invalid directory,check $NODE_HOME\n\nPlease set NODE_HOME in your environment to the location where your nodejs installed"
+   fi
+else
+   EXECUTABLE_NODE="node"
+   which ${EXECUTABLE_NODE} > /dev/null 2>&1 || fail "ERROR: NODE_HOME is not set and not 'node' command found in your path"
+fi
+
+# Check hvigor wrapper script
+if [ ! -r "$HVIGOR_WRAPPER_SCRIPT" ];then
+	fail "ERROR: Couldn't find hvigor/hvigor-wrapper.js in ${HVIGOR_APP_HOME}"
+fi
+
+# start hvigor-wrapper script
+exec "${EXECUTABLE_NODE}" \
+	"${HVIGOR_WRAPPER_SCRIPT}" "$@"

RankingDemo/hvigorw.bat

@@ -0,0 +1,64 @@
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Hvigor startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+set WRAPPER_MODULE_PATH=%APP_HOME%\hvigor\hvigor-wrapper.js
+set NODE_EXE=node.exe
+
+goto start
+
+:start
+@rem Find node.exe
+if defined NODE_HOME goto findNodeFromNodeHome
+
+%NODE_EXE% --version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto execute
+
+echo.
+echo ERROR: NODE_HOME is not set and no 'node' command could be found in your PATH.
+echo.
+echo Please set the NODE_HOME variable in your environment to match the
+echo location of your NodeJs installation.
+
+goto fail
+
+:findNodeFromNodeHome
+set NODE_HOME=%NODE_HOME:"=%
+set NODE_EXE_PATH=%NODE_HOME%/%NODE_EXE%
+
+if exist "%NODE_EXE_PATH%" goto execute
+echo.
+echo ERROR: NODE_HOME is not set and no 'node' command could be found in your PATH.
+echo.
+echo Please set the NODE_HOME variable in your environment to match the
+echo location of your NodeJs installation.
+
+goto fail
+
+:execute
+@rem Execute hvigor
+"%NODE_EXE%" %WRAPPER_MODULE_PATH% %*
+
+if "%ERRORLEVEL%" == "0" goto hvigorwEnd
+
+:fail
+exit /b 1
+
+:hvigorwEnd
+if "%OS%" == "Windows_NT" endlocal
+
+:end

RankingDemo/oh-package-lock.json5

@@ -0,0 +1,13 @@
+{
+  "lockfileVersion": 1,
+  "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
+  "specifiers": {
+    "@ohos/hypium@1.0.6": "@ohos/hypium@1.0.6"
+  },
+  "packages": {
+    "@ohos/hypium@1.0.6": {
+      "resolved": "https://repo.harmonyos.com/ohpm/@ohos/hypium/-/hypium-1.0.6.tgz",
+      "integrity": "sha512-bb3DWeWhYrFqj9mPFV3yZQpkm36kbcK+YYaeY9g292QKSjOdmhEIQR2ULPvyMsgSR4usOBf5nnYrDmaCCXirgQ=="
+    }
+  }
+}

RankingDemo/oh-package.json5

@@ -0,0 +1,13 @@
+{
+  "name": "rankingdemo",
+  "version": "1.0.0",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "author": "",
+  "license": "",
+  "dependencies": {
+  },
+  "devDependencies": {
+    "@ohos/hypium": "1.0.6"
+  }
+}

ToDoListArkTS/.gitignore

@@ -0,0 +1,11 @@
+/node_modules
+/oh_modules
+/local.properties
+/.idea
+**/build
+/.hvigor
+.cxx
+/.clangd
+/.clang-format
+/.clang-tidy
+**/.test

ToDoListArkTS/AppScope/app.json5

@@ -0,0 +1,10 @@
+{
+  "app": {
+    "bundleName": "com.example.todolistarkts",
+    "vendor": "example",
+    "versionCode": 1000000,
+    "versionName": "1.0.0",
+    "icon": "$media:app_icon",
+    "label": "$string:app_name"
+  }
+}

ToDoListArkTS/AppScope/resources/base/element/string.json

@@ -0,0 +1,8 @@
+{
+  "string": [
+    {
+      "name": "app_name",
+      "value": "ToDoListArkTS"
+    }
+  ]
+}

ToDoListArkTS/build-profile.json5

@@ -0,0 +1,27 @@
+{
+  "app": {
+    "signingConfigs": [],
+    "compileSdkVersion": 9,
+    "compatibleSdkVersion": 9,
+    "products": [
+      {
+        "name": "default",
+        "signingConfig": "default",
+      }
+    ]
+  },
+  "modules": [
+    {
+      "name": "entry",
+      "srcPath": "./entry",
+      "targets": [
+        {
+          "name": "default",
+          "applyToProducts": [
+            "default"
+          ]
+        }
+      ]
+    }
+  ]
+}

ToDoListArkTS/entry/.gitignore

@@ -0,0 +1,6 @@
+/node_modules
+/oh_modules
+/.preview
+/build
+/.cxx
+/.test

ToDoListArkTS/entry/build-profile.json5

@@ -0,0 +1,14 @@
+{
+  "apiType": 'stageMode',
+  "buildOption": {
+  },
+  "targets": [
+    {
+      "name": "default",
+      "runtimeOS": "HarmonyOS"
+    },
+    {
+      "name": "ohosTest",
+    }
+  ]
+}

ToDoListArkTS/entry/hvigorfile.ts

@@ -0,0 +1,2 @@
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+export { hapTasks } from '@ohos/hvigor-ohos-plugin';

ToDoListArkTS/entry/oh-package.json5

@@ -0,0 +1,10 @@
+{
+  "name": "entry",
+  "version": "1.0.0",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "author": "",
+  "license": "",
+  "dependencies": {}
+}
+

ToDoListArkTS/entry/src/main/ets/common/constant/CommonConstant.ets

@@ -0,0 +1,61 @@
+/**
+ * Style constants that can be used by all modules
+ */
+export default class CommonConstants {
+
+  /**
+   * Full width or height.
+   */
+  static readonly FULL_LENGTH: string = '100%';
+
+  /**
+   * Title width
+   */
+  static readonly TITLE_WIDTH: string = '80%';
+
+  /**
+   * List default width
+   */
+  static readonly LIST_DEFAULT_WIDTH: string = '93.3%'
+
+
+  /**
+   * Space of column
+   */
+  static readonly COLUMNS_SPACE: number = 16;
+
+  /**
+   * Title height
+   */
+
+  /**
+   * Opacity of default
+   */
+  static readonly OPACITY_DEFAULT: number = 1;
+
+  /**
+   * Opacity of completed
+   */
+  static readonly OPACITY_COMPLETED: number = 0.4;
+
+  /**
+   * BorderRadius of list item.
+   */
+  static readonly BORDER_RADIUS: number = 24;
+
+  /**
+   * Text of font-weight
+   */
+  static readonly FONT_WEIGHT: number = 500;
+
+  /**
+   * agents data.
+   */
+  static readonly TODO_DATA: Array<string> = [
+    "早起晨练",
+    "准备早餐",
+    "阅读名著",
+    "学习ArkTs",
+    "看剧放松"
+  ]
+}

ToDoListArkTS/entry/src/main/ets/entryability/EntryAbility.ts

@@ -0,0 +1,41 @@
+import UIAbility from '@ohos.app.ability.UIAbility';
+import hilog from '@ohos.hilog';
+import window from '@ohos.window';
+
+export default class EntryAbility extends UIAbility {
+  onCreate(want, launchParam) {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
+  }
+
+  onDestroy() {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
+  }
+
+  onWindowStageCreate(windowStage: window.WindowStage) {
+    // Main window is created, set main page for this ability
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
+
+    windowStage.loadContent('pages/ToDoListPage', (err, data) => {
+      if (err.code) {
+        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+        return;
+      }
+      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
+    });
+  }
+
+  onWindowStageDestroy() {
+    // Main window is destroyed, release UI related resources
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
+  }
+
+  onForeground() {
+    // Ability has brought to foreground
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
+  }
+
+  onBackground() {
+    // Ability has back to background
+    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
+  }
+}

ToDoListArkTS/entry/src/main/ets/pages/ToDoListPage.ets

@@ -0,0 +1,35 @@
+import DataModel from "../viewmodel/DataModel"
+import CommonConstants from "../common/constant/CommonConstant"
+import ToDoItem from "../views/ToDoItem"
+
+@Entry
+@Component
+struct ToDoListPage {
+  private totalTasks: Array<string> = []
+
+  aboutToAppear() {
+    this.totalTasks = DataModel.getData()
+  }
+
+  build() {
+    Column({ space: CommonConstants.COLUMNS_SPACE }) {
+      Text($r('app.string.page_title'))
+        .fontSize($r('app.float.title_font_size'))
+        .fontWeight(FontWeight.Bold)
+        .lineHeight('app.float.title_font_height')
+        .width(CommonConstants.TITLE_WIDTH)
+        .margin({
+          top: $r('app.float.title_margin_top'),
+          bottom: $r('app.float.title_margin_bottom')
+        })
+        .textAlign(TextAlign.Start)
+
+      ForEach(this.totalTasks, (item: string) => {
+        ToDoItem({content: item})
+      }, (item: string) => JSON.stringify(item))
+    }
+    .width(CommonConstants.FULL_LENGTH)
+    .height(CommonConstants.FULL_LENGTH)
+    .backgroundColor($r('app.color.page_background'))
+  }
+}

ToDoListArkTS/entry/src/main/ets/viewmodel/DataModel.ets

@@ -0,0 +1,19 @@
+import CommonConstants from "../common/constant/CommonConstant"
+
+/**
+ * Saving and manipulating data displayed on the page
+ */
+export class DataModel {
+  /**
+   * Save Data
+   */
+  private tasks: Array<string> = CommonConstants.TODO_DATA;
+
+  /**
+   * Get the data
+   */
+  getData(): Array<string> {
+    return this.tasks;
+  }
+}
+export default new DataModel();

ToDoListArkTS/entry/src/main/ets/views/ToDoItem.ets

@@ -0,0 +1,38 @@
+import CommonConstants from "../common/constant/CommonConstant"
+
+@Component
+export default struct ToDoItem {
+  private content?: string;
+  @State isComplete: boolean = false;
+
+  @Builder labelIcon(icon: Resource) {
+    Image(icon)
+      .objectFit(ImageFit.Contain)
+      .width($r('app.float.checkbox_width'))
+      .height($r('app.float.checkbox_width'))
+      .margin($r('app.float.checkbox_margin'))
+  }
+
+  build() {
+    Row() {
+      if (this.isComplete) {
+        this.labelIcon($r('app.media.ic_ok'))
+      } else {
+        this.labelIcon($r('app.media.ic_default'))
+      }
+      Text(this.content)
+        .fontSize($r('app.float.item_font_size'))
+        .fontWeight(CommonConstants.FONT_WEIGHT)
+        .opacity(this.isComplete ? CommonConstants.OPACITY_COMPLETED : CommonConstants.OPACITY_DEFAULT)
+        .decoration({type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None})
+    }
+    .width(CommonConstants.LIST_DEFAULT_WIDTH)
+    .height($r('app.float.list_item_height'))
+    .borderRadius(CommonConstants.BORDER_RADIUS)
+    .backgroundColor($r('app.color.start_window_background'))
+    .onClick(() => {
+      this.isComplete = !this.isComplete
+    })
+  }
+
+}

ToDoListArkTS/entry/src/main/module.json5

@@ -0,0 +1,37 @@
+{
+  "module": {
+    "name": "entry",
+    "type": "entry",
+    "description": "$string:module_desc",
+    "mainElement": "EntryAbility",
+    "deviceTypes": [
+      "phone",
+      "tablet"
+    ],
+    "deliveryWithInstall": true,
+    "installationFree": false,
+    "pages": "$profile:main_pages",
+    "abilities": [
+      {
+        "name": "EntryAbility",
+        "srcEntry": "./ets/entryability/EntryAbility.ts",
+        "description": "$string:EntryAbility_desc",
+        "icon": "$media:icon",
+        "label": "$string:EntryAbility_label",
+        "startWindowIcon": "$media:icon",
+        "startWindowBackground": "$color:start_window_background",
+        "exported": true,
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

ToDoListArkTS/entry/src/main/resources/base/element/color.json

@@ -0,0 +1,12 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    },
+    {
+      "name": "page_background",
+      "value": "#F1F3F5"
+    }
+  ]
+}

ToDoListArkTS/entry/src/main/resources/base/element/float.json

@@ -0,0 +1,36 @@
+{
+  "float": [
+    {
+      "name": "checkbox_width",
+      "value": "28vp"
+    },
+    {
+      "name": "checkbox_margin",
+      "value": "20vp"
+    },
+    {
+      "name": "item_font_size",
+      "value": "20fp"
+    },
+    {
+      "name": "title_font_size",
+      "value": "28vp"
+    },
+    {
+      "name": "title_font_height",
+      "value": "33vp"
+    },
+    {
+      "name": "title_margin_top",
+      "value": "24vp"
+    },
+    {
+      "name": "title_margin_bottom",
+      "value": "12vp"
+    },
+    {
+      "name": "list_item_height",
+      "value": "64vp"
+    }
+  ]
+}

ToDoListArkTS/entry/src/main/resources/base/element/string.json

@@ -0,0 +1,20 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "label"
+    },
+    {
+      "name": "page_title",
+      "value": "待办"
+    }
+  ]
+}

ToDoListArkTS/entry/src/main/resources/base/profile/main_pages.json

@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/ToDoListPage"
+  ]
+}

ToDoListArkTS/entry/src/main/resources/en_US/element/string.json

@@ -0,0 +1,20 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "label"
+    },
+    {
+      "name": "page_title",
+      "value": "ToDo"
+    }
+  ]
+}

ToDoListArkTS/entry/src/main/resources/zh_CN/element/string.json

@@ -0,0 +1,20 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "模块描述"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "label"
+    },
+    {
+      "name": "page_title",
+      "value": "待办"
+    }
+  ]
+}

ToDoListArkTS/entry/src/ohosTest/ets/test/Ability.test.ets

@@ -0,0 +1,35 @@
+import hilog from '@ohos.hilog';
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from '@ohos/hypium'
+
+export default function abilityTest() {
+  describe('ActsAbilityTest', function () {
+    // Defines a test suite. Two parameters are supported: test suite name and test suite function.
+    beforeAll(function () {
+      // Presets an action, which is performed only once before all test cases of the test suite start.
+      // This API supports only one parameter: preset action function.
+    })
+    beforeEach(function () {
+      // Presets an action, which is performed before each unit test case starts.
+      // The number of execution times is the same as the number of test cases defined by **it**.
+      // This API supports only one parameter: preset action function.
+    })
+    afterEach(function () {
+      // Presets a clear action, which is performed after each unit test case ends.
+      // The number of execution times is the same as the number of test cases defined by **it**.
+      // This API supports only one parameter: clear action function.
+    })
+    afterAll(function () {
+      // Presets a clear action, which is performed after all test cases of the test suite end.
+      // This API supports only one parameter: clear action function.
+    })
+    it('assertContain',0, function () {
+      // Defines a test case. This API supports three parameters: test case name, filter parameter, and test case function.
+      hilog.info(0x0000, 'testTag', '%{public}s', 'it begin');
+      let a = 'abc'
+      let b = 'b'
+      // Defines a variety of assertion methods, which are used to declare expected boolean conditions.
+      expect(a).assertContain(b)
+      expect(a).assertEqual(a)
+    })
+  })
+}

ToDoListArkTS/entry/src/ohosTest/ets/test/List.test.ets

@@ -0,0 +1,5 @@
+import abilityTest from './Ability.test'
+
+export default function testsuite() {
+  abilityTest()
+}

ToDoListArkTS/entry/src/ohosTest/ets/testability/TestAbility.ets

@@ -0,0 +1,48 @@
+import UIAbility from '@ohos.app.ability.UIAbility';
+import AbilityDelegatorRegistry from '@ohos.app.ability.abilityDelegatorRegistry';
+import hilog from '@ohos.hilog';
+import { Hypium } from '@ohos/hypium';
+import testsuite from '../test/List.test';
+import window from '@ohos.window';
+
+export default class TestAbility extends UIAbility {
+    onCreate(want, launchParam) {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility onCreate');
+        hilog.info(0x0000, 'testTag', '%{public}s', 'want param:' + JSON.stringify(want) ?? '');
+        hilog.info(0x0000, 'testTag', '%{public}s', 'launchParam:'+ JSON.stringify(launchParam) ?? '');
+        var abilityDelegator: any
+        abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator()
+        var abilityDelegatorArguments: any
+        abilityDelegatorArguments = AbilityDelegatorRegistry.getArguments()
+        hilog.info(0x0000, 'testTag', '%{public}s', 'start run testcase!!!');
+        Hypium.hypiumTest(abilityDelegator, abilityDelegatorArguments, testsuite)
+    }
+
+    onDestroy() {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility onDestroy');
+    }
+
+    onWindowStageCreate(windowStage: window.WindowStage) {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility onWindowStageCreate');
+        windowStage.loadContent('testability/pages/Index', (err, data) => {
+            if (err.code) {
+                hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
+                return;
+            }
+            hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s',
+                JSON.stringify(data) ?? '');
+        });
+    }
+
+    onWindowStageDestroy() {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility onWindowStageDestroy');
+    }
+
+    onForeground() {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility onForeground');
+    }
+
+    onBackground() {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility onBackground');
+    }
+}

ToDoListArkTS/entry/src/ohosTest/ets/testability/pages/Index.ets

@@ -0,0 +1,34 @@
+import hilog from '@ohos.hilog';
+
+@Entry
+@Component
+struct Index {
+  aboutToAppear() {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'TestAbility index aboutToAppear');
+  }
+ @State message: string = 'Hello World'
+   build() {
+         Row() {
+           Column() {
+             Text(this.message)
+               .fontSize(50)
+               .fontWeight(FontWeight.Bold)
+             Button() {
+               Text('next page')
+                 .fontSize(20)
+                 .fontWeight(FontWeight.Bold)
+             }.type(ButtonType.Capsule)
+             .margin({
+               top: 20
+             })
+             .backgroundColor('#0D9FFB')
+             .width('35%')
+             .height('5%')
+             .onClick(()=>{
+             })
+           }
+             .width('100%')
+         }
+             .height('100%')
+   }
+ }

ToDoListArkTS/entry/src/ohosTest/ets/testrunner/OpenHarmonyTestRunner.ts

@@ -0,0 +1,49 @@
+import hilog from '@ohos.hilog';
+import TestRunner from '@ohos.application.testRunner';
+import AbilityDelegatorRegistry from '@ohos.app.ability.abilityDelegatorRegistry';
+
+var abilityDelegator = undefined
+var abilityDelegatorArguments = undefined
+
+async function onAbilityCreateCallback() {
+    hilog.info(0x0000, 'testTag', '%{public}s', 'onAbilityCreateCallback');
+}
+
+async function addAbilityMonitorCallback(err: any) {
+    hilog.info(0x0000, 'testTag', 'addAbilityMonitorCallback : %{public}s', JSON.stringify(err) ?? '');
+}
+
+export default class OpenHarmonyTestRunner implements TestRunner {
+    constructor() {
+    }
+
+    onPrepare() {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'OpenHarmonyTestRunner OnPrepare ');
+    }
+
+    async onRun() {
+        hilog.info(0x0000, 'testTag', '%{public}s', 'OpenHarmonyTestRunner onRun run');
+        abilityDelegatorArguments = AbilityDelegatorRegistry.getArguments()
+        abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator()
+        var testAbilityName = abilityDelegatorArguments.bundleName + '.TestAbility'
+        let lMonitor = {
+            abilityName: testAbilityName,
+            onAbilityCreate: onAbilityCreateCallback,
+        };
+        abilityDelegator.addAbilityMonitor(lMonitor, addAbilityMonitorCallback)
+        var cmd = 'aa start -d 0 -a TestAbility' + ' -b ' + abilityDelegatorArguments.bundleName
+        var debug = abilityDelegatorArguments.parameters['-D']
+        if (debug == 'true')
+        {
+            cmd += ' -D'
+        }
+        hilog.info(0x0000, 'testTag', 'cmd : %{public}s', cmd);
+        abilityDelegator.executeShellCommand(cmd,
+            (err: any, d: any) => {
+                hilog.info(0x0000, 'testTag', 'executeShellCommand : err : %{public}s', JSON.stringify(err) ?? '');
+                hilog.info(0x0000, 'testTag', 'executeShellCommand : data : %{public}s', d.stdResult ?? '');
+                hilog.info(0x0000, 'testTag', 'executeShellCommand : data : %{public}s', d.exitCode ?? '');
+            })
+        hilog.info(0x0000, 'testTag', '%{public}s', 'OpenHarmonyTestRunner onRun end');
+    }
+}

ToDoListArkTS/entry/src/ohosTest/module.json5

@@ -0,0 +1,37 @@
+{
+  "module": {
+    "name": "entry_test",
+    "type": "feature",
+    "description": "$string:module_test_desc",
+    "mainElement": "TestAbility",
+    "deviceTypes": [
+      "phone",
+      "tablet"
+    ],
+    "deliveryWithInstall": true,
+    "installationFree": false,
+    "pages": "$profile:test_pages",
+    "abilities": [
+      {
+        "name": "TestAbility",
+        "srcEntry": "./ets/testability/TestAbility.ets",
+        "description": "$string:TestAbility_desc",
+        "icon": "$media:icon",
+        "label": "$string:TestAbility_label",
+        "exported": true,
+        "startWindowIcon": "$media:icon",
+        "startWindowBackground": "$color:start_window_background",
+        "skills": [
+          {
+            "actions": [
+              "action.system.home"
+            ],
+            "entities": [
+              "entity.system.home"
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

ToDoListArkTS/entry/src/ohosTest/resources/base/element/color.json

@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    }
+  ]
+}

ToDoListArkTS/entry/src/ohosTest/resources/base/element/string.json

@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_test_desc",
+      "value": "test ability description"
+    },
+    {
+      "name": "TestAbility_desc",
+      "value": "the test ability"
+    },
+    {
+      "name": "TestAbility_label",
+      "value": "test label"
+    }
+  ]
+}

ToDoListArkTS/entry/src/ohosTest/resources/base/profile/test_pages.json

@@ -0,0 +1,5 @@
+{
+  "src": [
+    "testability/pages/Index"
+  ]
+}

ToDoListArkTS/hvigor/hvigor-config.json5

@@ -0,0 +1,6 @@
+{
+  "hvigorVersion": "2.4.2",
+  "dependencies": {
+    "@ohos/hvigor-ohos-plugin": "2.4.2"
+  }
+}

ToDoListArkTS/hvigorfile.ts

@@ -0,0 +1,2 @@
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+export { appTasks } from '@ohos/hvigor-ohos-plugin';

ToDoListArkTS/hvigorw

@@ -0,0 +1,48 @@
+#!/bin/bash
+
+# ----------------------------------------------------------------------------
+#  Hvigor startup script, version 1.0.0
+# 
+#  Required ENV vars:
+#  ------------------
+#    NODE_HOME - location of a Node home dir
+#    or 
+#    Add /usr/local/nodejs/bin to the PATH environment variable
+# ----------------------------------------------------------------------------
+
+HVIGOR_APP_HOME=$(dirname $(readlink -f $0))
+HVIGOR_WRAPPER_SCRIPT=${HVIGOR_APP_HOME}/hvigor/hvigor-wrapper.js
+warn() {
+	echo ""
+	echo -e "\033[1;33m`date '+[%Y-%m-%d %H:%M:%S]'`$@\033[0m"
+}
+
+error() {
+	echo ""
+	echo -e "\033[1;31m`date '+[%Y-%m-%d %H:%M:%S]'`$@\033[0m"
+}
+
+fail() {
+	error "$@"
+	exit 1
+}
+
+# Determine node to start hvigor wrapper script
+if [ -n "${NODE_HOME}" ];then
+   EXECUTABLE_NODE="${NODE_HOME}/bin/node"
+   if [ ! -x "$EXECUTABLE_NODE" ];then
+       fail "ERROR: NODE_HOME is set to an invalid directory,check $NODE_HOME\n\nPlease set NODE_HOME in your environment to the location where your nodejs installed"
+   fi
+else
+   EXECUTABLE_NODE="node"
+   which ${EXECUTABLE_NODE} > /dev/null 2>&1 || fail "ERROR: NODE_HOME is not set and not 'node' command found in your path"
+fi
+
+# Check hvigor wrapper script
+if [ ! -r "$HVIGOR_WRAPPER_SCRIPT" ];then
+	fail "ERROR: Couldn't find hvigor/hvigor-wrapper.js in ${HVIGOR_APP_HOME}"
+fi
+
+# start hvigor-wrapper script
+exec "${EXECUTABLE_NODE}" \
+	"${HVIGOR_WRAPPER_SCRIPT}" "$@"

ToDoListArkTS/hvigorw.bat

@@ -0,0 +1,64 @@
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Hvigor startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+set WRAPPER_MODULE_PATH=%APP_HOME%\hvigor\hvigor-wrapper.js
+set NODE_EXE=node.exe
+
+goto start
+
+:start
+@rem Find node.exe
+if defined NODE_HOME goto findNodeFromNodeHome
+
+%NODE_EXE% --version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto execute
+
+echo.
+echo ERROR: NODE_HOME is not set and no 'node' command could be found in your PATH.
+echo.
+echo Please set the NODE_HOME variable in your environment to match the
+echo location of your NodeJs installation.
+
+goto fail
+
+:findNodeFromNodeHome
+set NODE_HOME=%NODE_HOME:"=%
+set NODE_EXE_PATH=%NODE_HOME%/%NODE_EXE%
+
+if exist "%NODE_EXE_PATH%" goto execute
+echo.
+echo ERROR: NODE_HOME is not set and no 'node' command could be found in your PATH.
+echo.
+echo Please set the NODE_HOME variable in your environment to match the
+echo location of your NodeJs installation.
+
+goto fail
+
+:execute
+@rem Execute hvigor
+"%NODE_EXE%" %WRAPPER_MODULE_PATH% %*
+
+if "%ERRORLEVEL%" == "0" goto hvigorwEnd
+
+:fail
+exit /b 1
+
+:hvigorwEnd
+if "%OS%" == "Windows_NT" endlocal
+
+:end

ToDoListArkTS/oh-package-lock.json5

@@ -0,0 +1,13 @@
+{
+  "lockfileVersion": 1,
+  "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
+  "specifiers": {
+    "@ohos/hypium@1.0.6": "@ohos/hypium@1.0.6"
+  },
+  "packages": {
+    "@ohos/hypium@1.0.6": {
+      "resolved": "https://repo.harmonyos.com/ohpm/@ohos/hypium/-/hypium-1.0.6.tgz",
+      "integrity": "sha512-bb3DWeWhYrFqj9mPFV3yZQpkm36kbcK+YYaeY9g292QKSjOdmhEIQR2ULPvyMsgSR4usOBf5nnYrDmaCCXirgQ=="
+    }
+  }
+}

ToDoListArkTS/oh-package.json5

@@ -0,0 +1,13 @@
+{
+  "name": "todolistarkts",
+  "version": "1.0.0",
+  "description": "Please describe the basic information.",
+  "main": "",
+  "author": "",
+  "license": "",
+  "dependencies": {
+  },
+  "devDependencies": {
+    "@ohos/hypium": "1.0.6"
+  }
+}