add sample for js service widget

Signed-off-by: caopan <caopan8@huawei.com>

UI/JsFACard/README.md

@@ -0,0 +1,14 @@
+# JS Service Widget Development<a name="EN-US_TOPIC_0000001119874784"></a>
+
+### Introduction<a name="section103mcpsimp"></a>
+
+This sample demonstrates service widgets. Service widgets are used to present important information about apps, allowing users to access desired services instantly via shortcut gestures.
+
+### Usage<a name="section105mcpsimp"></a>
+
+Swipe up the icon of the sample app, select a service widget size, and touch  **ADD TO HOME SCREEN**  to add the service widget to the home screen. Alternatively, touch and hold the sample app icon until  **Service Widgets**  is displayed, touch  **Service Widgets**, select a service widget size, and touch  **ADD TO HOME SCREEN**  to add the service widget to the home screen. You can touch a service widget on the home screen to go to the home page of the sample app.
+
+### Constraints<a name="section118mcpsimp"></a>
+
+This sample can only be run on large-system devices. A maximum of 16 service widgets can be configured for a single app.
+

UI/JsFACard/READNE_zh.md

@@ -0,0 +1,14 @@
+# JS 卡片开发<a name="ZH-CN_TOPIC_0000001119874784"></a>
+
+### 简介<a name="section103mcpsimp"></a>
+
+本示例展示了服务卡片功能，通过服务卡片将用户应用程序的重要信息展示在桌面，用户可通过快捷手势使用卡片，以达到服务直达、减少层级跳转的目的。
+
+### 使用说明<a name="section105mcpsimp"></a>
+
+上滑本示例应用图标，选择需要的卡片尺寸添加到屏幕，也可以长按示例应用，等待出现服务卡片字样，点击后选择卡片尺寸，添加到桌面。可以点击在桌面上的卡片进入示例应用的主页面。
+
+### 约束与限制<a name="section118mcpsimp"></a>
+
+本示例仅支持在大型系统上运行，对于同一个应用，最多支持配置16张卡片。
+

UI/JsFACard/build.gradle

@@ -0,0 +1,36 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+apply plugin: 'com.huawei.ohos.app'
+
+ohos {
+    compileSdkVersion 5
+    defaultConfig {
+        compatibleSdkVersion 4
+    }
+}
+
+buildscript {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.huawei.ohos:hap:2.4.4.2'
+    }
+}
+
+allprojects {
+    repositories {
+        maven {
+            url 'https://repo.huaweicloud.com/repository/maven/'
+        }
+        maven {
+            url 'https://developer.huawei.com/repo/'
+        }
+        jcenter()
+    }
+}

UI/JsFACard/entry/build.gradle

@@ -0,0 +1,19 @@
+apply plugin: 'com.huawei.ohos.hap'
+ohos {
+    compileSdkVersion 5
+    defaultConfig {
+        compatibleSdkVersion 4
+    }
+    buildTypes {
+        release {
+            proguardOpt {
+                proguardEnabled false
+                rulesFiles 'proguard-rules.pro'
+            }
+        }
+    }
+}
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
+}

UI/JsFACard/entry/src/main/config.json

@@ -0,0 +1,140 @@
+{
+  "app": {
+    "bundleName": "ohos.samples.jsfacard",
+    "version": {
+      "code": 1000000,
+      "name": "1.0.0"
+    }
+  },
+  "deviceConfig": {},
+  "module": {
+    "package": "ohos.samples.jsfacard",
+    "name": ".MyApplication",
+    "mainAbility": "ohos.samples.jsfacard.MainAbility",
+    "deviceType": [
+      "default"
+    ],
+    "distro": {
+      "deliveryWithInstall": true,
+      "moduleName": "entry",
+      "moduleType": "entry",
+      "installationFree": false
+    },
+    "abilities": [
+      {
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ],
+        "name": "ohos.samples.jsfacard.MainAbility",
+        "icon": "$media:icon",
+        "description": "$string:mainability_description",
+        "formsEnabled": true,
+        "label": "$string:entry_MainAbility",
+        "type": "page",
+        "forms": [
+          {
+            "jsComponentName": "jsmusictemplate",
+            "isDefault": true,
+            "formConfigAbility": "ability://ohos.samples.jsfacard.MainAbility",
+            "scheduledUpdateTime": "10:30",
+            "defaultDimension": "2*4",
+            "name": "jsmusictemplate",
+            "description": "This is a service widget",
+            "colorMode": "auto",
+            "type": "JS",
+            "supportDimensions": [
+              "2*4"
+            ],
+            "updateEnabled": true,
+            "updateDuration": 1
+          },
+          {
+            "jsComponentName": "card",
+            "isDefault": false,
+            "formConfigAbility": "ability://ohos.samples.jsfacard.MainAbility",
+            "scheduledUpdateTime": "10:30",
+            "defaultDimension": "2*4",
+            "name": "card",
+            "description": "This is a service widget",
+            "colorMode": "auto",
+            "type": "JS",
+            "supportDimensions": [
+              "2*4"
+            ],
+            "updateEnabled": true,
+            "updateDuration": 1
+          },
+          {
+            "jsComponentName": "jscardtemplate",
+            "isDefault": false,
+            "formConfigAbility": "ability://ohos.samples.jsfacard.MainAbility",
+            "scheduledUpdateTime": "10:30",
+            "defaultDimension": "4*4",
+            "name": "jscardtemplate",
+            "description": "This is a service widget",
+            "colorMode": "auto",
+            "type": "JS",
+            "supportDimensions": [
+              "4*4"
+            ],
+            "updateEnabled": true,
+            "updateDuration": 1
+          }
+        ],
+        "launchType": "standard"
+      }
+    ],
+    "js": [
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "default",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        }
+      },
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "card",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        },
+        "type": "form"
+      },
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "jscardtemplate",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        },
+        "type": "form"
+      },
+      {
+        "pages": [
+          "pages/index/index"
+        ],
+        "name": "jsmusictemplate",
+        "window": {
+          "designWidth": 720,
+          "autoDesignWidth": true
+        },
+        "type": "form"
+      }
+    ]
+  }
+}

UI/JsFACard/entry/src/main/java/ohos/samples/jsfacard/MainAbility.java

@@ -0,0 +1,85 @@
+/*
+ * 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.
+ */
+
+package ohos.samples.jsfacard;
+
+import ohos.aafwk.ability.FormBindingData;
+import ohos.aafwk.ability.FormException;
+import ohos.aafwk.ability.ProviderFormInfo;
+import ohos.aafwk.content.Intent;
+import ohos.ace.ability.AceAbility;
+import ohos.hiviewdfx.HiLog;
+import ohos.hiviewdfx.HiLogLabel;
+import ohos.utils.zson.ZSONObject;
+
+/**
+ * Main ability
+ *
+ * @since 2021-07-05
+ */
+public class MainAbility extends AceAbility {
+    private static final HiLogLabel TAG = new HiLogLabel(HiLog.DEBUG, 0x0, MainAbility.class.getName());
+
+    private static final String STATUS = "status";
+
+    private static final String PLAY = "play";
+
+    private static final String PAUSE = "pause";
+
+    private static boolean isStatus = true;
+
+    @Override
+    public void onStart(Intent intent) {
+        HiLog.info(TAG, "onStart");
+        super.onStart(intent);
+    }
+
+    @Override
+    protected ProviderFormInfo onCreateForm(Intent intent) {
+        HiLog.info(TAG, "onCreateForm");
+        return super.onCreateForm(intent);
+    }
+
+    @Override
+    protected void onUpdateForm(long formId) {
+        HiLog.info(TAG, "onUpdateForm");
+        super.onUpdateForm(formId);
+    }
+
+    @Override
+    protected void onDeleteForm(long formId) {
+        HiLog.info(TAG, "onDeleteForm: formId=" + formId);
+        super.onDeleteForm(formId);
+    }
+
+    @Override
+    protected void onTriggerFormEvent(long formId, String message) {
+        super.onTriggerFormEvent(formId, message);
+        ZSONObject zsonObject = new ZSONObject();
+        if (isStatus) {
+            zsonObject.put(STATUS, PAUSE);
+            isStatus = false;
+        } else {
+            zsonObject.put(STATUS, PLAY);
+            isStatus = true;
+        }
+        FormBindingData formBindingData = new FormBindingData(zsonObject);
+        try {
+            updateForm(formId, formBindingData);
+        } catch (FormException e) {
+            HiLog.info(TAG, "onTriggerFormEvent:" + e.getMessage());
+        }
+    }
+}

UI/JsFACard/entry/src/main/java/ohos/samples/jsfacard/MyApplication.java

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+package ohos.samples.jsfacard;
+
+import ohos.aafwk.ability.AbilityPackage;
+
+/**
+ * MyApplication
+ *
+ * @since 2021-07-05
+ */
+public class MyApplication extends AbilityPackage {
+    @Override
+    public void onInitialize() {
+        super.onInitialize();
+    }
+}

UI/JsFACard/entry/src/main/js/card/common/ic_default_blue.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>Public/ic_public_list_add_light</title>
+    <desc>Created with Sketch.</desc>
+    <g
+        id="Public/ic_public_list_add_light"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd">
+        <path
+            d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z"
+            id="椭圆形"
+            fill="#0A59F7"></path>
+        <path
+            d="M12.75,17.25 C12.75,17.6642136 12.4142136,18 12,18 C11.5857864,18 11.25,17.6642136 11.25,17.25 L11.25,12.749 L6.75,12.75 C6.33578644,12.75 6,12.4142136 6,12 C6,11.5857864 6.33578644,11.25 6.75,11.25 L11.25,11.249 L11.25,6.75 C11.25,6.33578644 11.5857864,6 12,6 C12.4142136,6 12.75,6.33578644 12.75,6.75 L12.75,17.25 Z M13.75,11.25 L17.25,11.25 C17.6642136,11.25 18,11.5857864 18,12 C18,12.4142136 17.6642136,12.75 17.25,12.75 L13.75,12.75 L13.75,11.25 Z"
+            id="形状"
+            fill="#FFFFFF"></path>
+    </g>
+</svg>

UI/JsFACard/entry/src/main/js/card/i18n/en-US.json

@@ -0,0 +1,6 @@
+{
+  "strings": {
+    "music": "Music",
+    "singer": "Singer"
+  }
+}

UI/JsFACard/entry/src/main/js/card/i18n/zh-CN.json

@@ -0,0 +1,6 @@
+{
+  "strings": {
+    "music": "音乐",
+    "singer": "歌手"
+  }
+}

UI/JsFACard/entry/src/main/js/card/pages/index/index.css

@@ -0,0 +1,79 @@
+/*
+ * 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.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.main-div {
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    padding: 8% 15px;
+    min-height: 126px;
+    max-height: 150px;
+    display-index: 2;
+}
+
+.main-image {
+    width: 126px;
+    aspect-ratio: 1;
+    border-radius: 14px;
+    flex-shrink: 0;
+    display-index: 2;
+}
+
+.right-div {
+    flex-direction: column;
+    margin: 13% 0px 0px;
+    display-index: 1;
+    width: 154px;
+    flex-grow: 1;
+    justify-content: space-evenly;
+}
+
+.bottom-div {
+    flex-direction: column;
+    display-index: 1;
+    height: 100px;
+    padding-start: 12px;
+    padding-end: 12px;
+}
+
+.image-div {
+    justify-content: space-between;
+}
+
+.check-image {
+    width: 30px;
+    aspect-ratio: 1;
+}
+
+.music-text {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 2px;
+}
+
+.singer-text {
+    font-size: 12px;
+    opacity: 0.6;
+    font-weight: normal;
+    margin-bottom: 24px;
+}

UI/JsFACard/entry/src/main/js/card/pages/index/index.hml

@@ -0,0 +1,42 @@
+<!--
+ 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.
+ -->
+
+<div class="container">
+    <div class="main-div" onclick="activeEvent">
+        <image src="/common/ic_default_image.png" class="main-image"></image>
+        <div class="right-div">
+            <text class="music-text" style="margin-start : 14px; padding-left : 10px;">{{ $t('strings.music') }}</text>
+            <text class="singer-text" style="margin-start : 14px; padding-left : 10px;">{{ $t('strings.singer') }}</text>
+            <div style="justify-content : space-between; margin : 0px 3.8%; padding-left : 10px; width : 100%;">
+                <image src="/common/ic_default_blue.svg" class="check-image"></image>
+                <image src="/common/ic_default_blue.svg" class="check-image"></image>
+                <image src="/common/ic_default_blue.svg" class="check-image"></image>
+                <image src="/common/ic_default_blue.svg" class="check-image"></image>
+                <image src="/common/ic_default_blue.svg" class="check-image"></image>
+            </div>
+        </div>
+    </div>
+    <div class="bottom-div">
+        <text class="music-text">{{ $t('strings.music') }}</text>
+        <text class="singer-text">{{ $t('strings.singer') }}</text>
+        <div class="image-div">
+            <image src="/common/ic_default_blue.svg" class="check-image"></image>
+            <image src="/common/ic_default_blue.svg" class="check-image"></image>
+            <image src="/common/ic_default_blue.svg" class="check-image"></image>
+            <image src="/common/ic_default_blue.svg" class="check-image"></image>
+            <image src="/common/ic_default_blue.svg" class="check-image"></image>
+        </div>
+    </div>
+</div>

UI/JsFACard/entry/src/main/js/card/pages/index/index.json

@@ -0,0 +1,13 @@
+{
+  "data": {},
+  "actions": {
+    "activeEvent": {
+      "action": "router",
+      "bundleName": "ohos.samples.jsfacard",
+      "abilityName": "ohos.samples.jsfacard.MainAbility",
+      "params": {
+        "message": "add detail"
+      }
+    }
+  }
+}

UI/JsFACard/entry/src/main/js/default/app.js

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

UI/JsFACard/entry/src/main/js/default/i18n/en-US.json

@@ -0,0 +1,6 @@
+{
+  "strings": {
+    "hello": "Hello",
+    "world": "World"
+  }
+}

UI/JsFACard/entry/src/main/js/default/i18n/zh-CN.json

@@ -0,0 +1,6 @@
+{
+  "strings": {
+    "hello": "您好",
+    "world": "世界"
+  }
+}

UI/JsFACard/entry/src/main/js/default/pages/index/index.css

@@ -0,0 +1,59 @@
+/*
+ * 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.
+ */
+
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.title {
+    font-size: 40px;
+    color: #000000;
+    opacity: 0.9;
+}
+
+@media screen and (device-type: tablet) and (orientation: landscape) {
+    .title {
+        font-size: 100px;
+    }
+}
+
+@media screen and (device-type: wearable) {
+    .title {
+        font-size: 28px;
+        color: #FFFFFF;
+    }
+}
+
+@media screen and (device-type: tv) {
+    .container {
+        background-image: url("../../common/images/Wallpaper.png");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+
+    .title {
+        font-size: 100px;
+        color: #FFFFFF;
+    }
+}
+
+@media screen and (device-type: phone) and (orientation: landscape) {
+    .title {
+        font-size: 60px;
+    }
+}

UI/JsFACard/entry/src/main/js/default/pages/index/index.hml

@@ -0,0 +1,20 @@
+<!--
+ 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.
+ -->
+
+<div class="container">
+    <text class="title">
+        {{ $t('strings.hello') }} {{ title }}
+    </text>
+</div>

UI/JsFACard/entry/src/main/js/default/pages/index/index.js

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

UI/JsFACard/entry/src/main/js/jscardtemplate/i18n/en-US.json

@@ -0,0 +1,8 @@
+{
+  "strings": {
+    "hello": "Hello",
+    "world": "World",
+    "title": "Title",
+    "text": "Text"
+  }
+}

UI/JsFACard/entry/src/main/js/jscardtemplate/i18n/zh-CN.json

@@ -0,0 +1,8 @@
+{
+  "strings": {
+    "hello": "您好",
+    "world": "世界",
+    "title": "标题",
+    "text": "文本"
+  }
+}

UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.css

@@ -0,0 +1,73 @@
+/*
+ * 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.
+ */
+
+.container {
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+}
+
+.header-div {
+    width: 100%;
+    height: 50%;
+    flex-shrink: 0;
+    background-color: dodgerblue;
+    border-top-left-radius: 14px;
+    border-top-right-radius: 14px;
+    flex-direction: column;
+    justify-content: flex-end;
+    padding: 12px;
+}
+
+.header-title {
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 2px;
+    color: white;
+}
+
+.header-description {
+    font-size: 14px;
+    color: white;
+}
+
+.foot-div {
+    justify-content: space-evenly;
+    align-items: center;
+    width: 100%;
+    height: 50%;
+    flex-direction: row;
+    flex-shrink: 0;
+}
+
+.item-div {
+    flex-direction: column;
+    height: 100%;
+    width: 84px;
+    justify-content: center;
+    align-items: center;
+}
+
+.item-image {
+    width: 84px;
+    height: 126px;
+    border-radius: 14px;
+}
+
+.item-title {
+    font-size: 14px;
+    font-weight: 500;
+    margin-top: 2px;
+}

UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.hml

@@ -0,0 +1,43 @@
+<!--
+ 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.
+ -->
+
+<div class="container" onclick="activeEvent">
+    <div class="header-div">
+        <text class="header-title">{{ $t('strings.title') }}</text>
+        <text class="header-description">{{ $t('strings.text') }}</text>
+    </div>
+    <div class="foot-div">
+        <div class="item-div" style="display-index : 5;">
+            <image src="/common/ic_default_image.png" class="item-image"></image>
+            <text class="item-title">{{ $t('strings.title') }}</text>
+        </div>
+        <div class="item-div" style="display-index : 4;">
+            <image src="/common/ic_default_image.png" class="item-image"></image>
+            <text class="item-title">{{ $t('strings.title') }}</text>
+        </div>
+        <div class="item-div" style="display-index : 3;">
+            <image src="/common/ic_default_image.png" class="item-image"></image>
+            <text class="item-title">{{ $t('strings.title') }}</text>
+        </div>
+        <div class="item-div" style="display-index : 2;">
+            <image src="/common/ic_default_image.png" class="item-image"></image>
+            <text class="item-title">{{ $t('strings.title') }}</text>
+        </div>
+        <div class="item-div" style="display-index : 1;">
+            <image src="/common/ic_default_image.png" class="item-image"></image>
+            <text class="item-title">{{ $t('strings.title') }}</text>
+        </div>
+    </div>
+</div>

UI/JsFACard/entry/src/main/js/jscardtemplate/pages/index/index.json

@@ -0,0 +1,13 @@
+{
+  "data": {},
+  "actions": {
+    "activeEvent": {
+      "action": "router",
+      "bundleName": "ohos.samples.jsfacard",
+      "abilityName": "ohos.samples.jsfacard.MainAbility",
+      "params": {
+        "message": "add detail"
+      }
+    }
+  }
+}

UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_favor.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_favor_filled</title>
+    <defs>
+        <path
+            d="M12.1593726,4.65960664 C12.3223335,4.82303542 12.4951682,4.99703924 12.669858,5.17359602 L13.0193352,5.52773659 C13.5401335,6.05692261 14.0295162,6.56095264 14.2709795,6.82323009 L14.2709795,6.82323009 L14.4130459,6.97910741 C14.690336,7.28681354 15.1645691,7.31147058 15.4722753,7.03418046 C15.7799814,6.75689034 15.8046385,6.28265717 15.5273483,5.97495104 C15.1356849,5.54032602 14.1082843,4.49022482 13.2490364,3.62804287 C15.807302,2.24414079 19.0703432,2.63315168 21.2320021,4.7948106 C23.7381758,7.30098428 23.6296302,11.2079931 21.32375,14.2825 C20.619018,15.2221426 19.5405547,16.3935283 18.1571818,17.7279496 L18.1571818,17.7279496 L18.1107695,17.7725634 C17.4340425,18.4208657 16.2634585,19.4492679 14.5931605,20.8635183 L14.5931605,20.8635183 L13.6095931,21.6924482 C12.6786942,22.4737069 11.3208127,22.4723465 10.391481,21.6892241 C8.11075712,19.7673202 6.58183313,18.4344222 5.79364099,17.6797654 L5.79364099,17.6797654 L5.57218695,17.4649031 C4.31819158,16.2390572 3.3345236,15.1598332 2.67652368,14.2825 C0.370643522,11.2079931 0.262097854,7.30098428 2.76827153,4.7948106 C5.29886894,2.26421319 9.33888554,2.16298929 11.9902365,4.49113891 L11.9902365,4.49113891 L12,4.5 Z"
+            id="path-1"></path>
+    </defs>
+    <g
+        id="Public/ic_public_favor_filled"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd">
+        <mask
+            id="mask-2"
+            fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use
+            id="蒙版"
+            fill="#000000"
+            fill-rule="nonzero"
+            xlink:href="#path-1"></use>
+    </g>
+</svg>

UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_ranking.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    width="24px"
+    height="24px"
+    version="1.1"
+    viewBox="0 0 40 40">
+    <g
+        fill="none"
+        fill-rule="evenodd"
+        stroke="none"
+        stroke-width="1">
+        <circle
+            cx="20"
+            cy="20"
+            r="20"
+            fill="#333" />
+        <g
+            fill="#FFF"
+            transform="translate(10 10)">
+            <rect
+                width="5.556"
+                height="10"
+                x="14.444"
+                y="10"
+                fill-opacity=".6"
+                rx="1.667" />
+            <path d="M11.1111111,0 C12.0315857,-3.91133043e-16 12.7777778,0.746192084 12.7777778,1.66666667 L12.7777778,18.3333333 C12.7777778,19.2538079 12.0315857,20 11.1111111,20 L8.88888889,20 C7.96841431,20 7.22222222,19.2538079 7.22222222,18.3333333 L7.22222222,1.66666667 C7.22222222,0.746192084 7.96841431,8.35222253e-16 8.88888889,0 L11.1111111,0 Z M3.88888889,5 C4.80936347,5 5.55555556,5.74619208 5.55555556,6.66666667 L5.55555556,18.3333333 C5.55555556,19.2538079 4.80936347,20 3.88888889,20 L1.66666667,20 C0.746192084,20 9.30271286e-16,19.2538079 0,18.3333333 L0,6.66666667 C-1.12725625e-16,5.74619208 0.746192084,5 1.66666667,5 L3.88888889,5 Z" />
+        </g>
+    </g>
+</svg>

UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_recommend.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+    width="24px"
+    height="24px"
+    version="1.1"
+    viewBox="0 0 40 40">
+    <g
+        fill="none"
+        fill-rule="evenodd"
+        stroke="none"
+        stroke-width="1">
+        <circle
+            cx="20"
+            cy="20"
+            r="20"
+            fill="#333" />
+        <g
+            fill="#FFF"
+            transform="translate(10.906 7.608)">
+            <path d="M9.77976226,0.958061744 C10.9934579,1.12961318 11.8615296,2.21971612 11.7569852,3.44100951 L11.3905719,7.71905357 L18.4457482,7.71951879 C19.5503177,7.71951879 20.4457482,8.61494929 20.4457482,9.71951879 C20.4457482,9.88118886 20.4261455,10.0422625 20.3873694,10.1992136 L18.396187,18.2587594 C18.0683876,19.5855663 16.8852548,20.5231186 15.5186472,20.5390143 L3.03489202,20.6842186 L2.85857192,20.6811764 L3.378,20.6792847 L4.13,20.6702847 L4.13,7.71928474 L5.56357192,7.71905357 L7.00691388,2.75068401 C7.35652687,1.54653293 8.53822551,0.782575075 9.77976226,0.958061744 Z" />
+            <path
+                fill-opacity=".6"
+                d="M4.13,7.71928474 L4.13,20.6702847 L3.378,20.6792847 L2.84549806,20.680543 C1.27582401,20.6011031 0.0187335993,19.3124656 0.00020291567,17.7193135 L0,10.7195188 C-2.02906125e-16,9.06266454 1.34314575,7.71951879 3,7.71951879 L4.13,7.71928474 Z" />
+        </g>
+    </g>
+</svg>

UI/JsFACard/entry/src/main/js/jsmusictemplate/common/ic_search.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_search_filled</title>
+    <defs>
+        <path
+            d="M17.6179267,16.3277876 L20.8132621,19.5240485 C21.2037864,19.9145728 21.2037864,20.5477378 20.8132621,20.9382621 C20.4227378,21.3287864 19.7895728,21.3287864 19.3990485,20.9382621 L16.189979,17.729164 C16.7142906,17.3140255 17.1931651,16.8440081 17.6179267,16.3277876 Z M10.375,2 C15.0003848,2 18.75,5.74961522 18.75,10.375 C18.75,12.5107968 17.9505141,14.4598636 16.6344856,15.9392571 L16.8468572,15.6909887 C16.7564149,15.8009681 16.6632239,15.9086017 16.5673893,16.0137845 C16.4969337,16.0911028 16.4254201,16.1667191 16.3525335,16.240983 C16.338412,16.2553719 16.3241207,16.2698289 16.3097773,16.2842339 C16.2403031,16.3540107 16.1694244,16.4227398 16.0973523,16.4902097 C16.0802283,16.506238 16.063454,16.5218113 16.046616,16.5373165 C15.9709789,16.6069739 15.8937108,16.6755519 15.8151858,16.7427027 C15.8023252,16.7537003 15.7894477,16.7646456 15.7765366,16.7755526 L15.7332842,16.8118433 C14.2811297,18.021995 12.4130822,18.75 10.375,18.75 C5.74961522,18.75 2,15.0003848 2,10.375 C2,5.74961522 5.74961522,2 10.375,2 Z M10.375,4 C6.85418472,4 4,6.85418472 4,10.375 C4,13.8958153 6.85418472,16.75 10.375,16.75 C13.8958153,16.75 16.75,13.8958153 16.75,10.375 C16.75,6.85418472 13.8958153,4 10.375,4 Z"
+            id="path-1"></path>
+    </defs>
+    <g
+        id="Public/ic_public_search_filled"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd">
+        <mask
+            id="mask-2"
+            fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use
+            id="形状结合"
+            fill="#000000"
+            fill-rule="nonzero"
+            xlink:href="#path-1"></use>
+    </g>
+</svg>

UI/JsFACard/entry/src/main/js/jsmusictemplate/common/pause.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="32px"
+    height="32px"
+    version="1.1"
+    viewBox="0 0 24 24"
+    >
+    <defs>
+        <path
+            id="uxs-a"
+            d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M9.5,7.5 C10.0522847,7.5 10.5,7.94771525 10.5,8.5 L10.5,15.5 C10.5,16.0522847 10.0522847,16.5 9.5,16.5 C8.94771525,16.5 8.5,16.0522847 8.5,15.5 L8.5,8.5 C8.5,7.94771525 8.94771525,7.5 9.5,7.5 Z M14.5,7.5 C15.0522847,7.5 15.5,7.94771525 15.5,8.5 L15.5,15.5 C15.5,16.0522847 15.0522847,16.5 14.5,16.5 C13.9477153,16.5 13.5,16.0522847 13.5,15.5 L13.5,8.5 C13.5,7.94771525 13.9477153,7.5 14.5,7.5 Z" />
+    </defs>
+    <g
+        fill="none"
+        fill-rule="evenodd"
+        stroke="none"
+        stroke-width="1">
+        <mask
+            id="uxs-b"
+            fill="#fff">
+            <use xlink:href="#uxs-a" />
+        </mask>
+        <use
+            fill="#000"
+            fill-rule="nonzero"
+            xlink:href="#uxs-a" />
+        <rect
+            width="24"
+            height="24"
+            x="0"
+            y="0"
+            mask="url(#uxs-b)" />
+    </g>
+</svg>

UI/JsFACard/entry/src/main/js/jsmusictemplate/common/play.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px"
+    height="32px"
+    viewBox="0 0 24 24"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Public/ic_public_play_norm</title>
+    <defs>
+        <path
+            d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,2.5 C6.75329488,2.5 2.5,6.75329488 2.5,12 C2.5,17.2467051 6.75329488,21.5 12,21.5 C17.2467051,21.5 21.5,17.2467051 21.5,12 C21.5,6.75329488 17.2467051,2.5 12,2.5 Z M16.1490452,13.0797236 L10.8798388,16.1534274 C10.2835239,16.5012777 9.51812673,16.2998574 9.17027637,15.7035425 C9.0587605,15.5123725 9,15.295022 9,15.0737038 L9,8.92629625 C9,8.23594031 9.55964406,7.67629625 10.25,7.67629625 C10.4713183,7.67629625 10.6886687,7.73505675 10.8798388,7.84657262 L16.1490452,10.9202764 C16.7453601,11.2681267 16.9467804,12.0335239 16.5989301,12.6298388 C16.4902816,12.8160933 16.3352998,12.9710751 16.1490452,13.0797236 Z"
+            id="path-1"></path>
+    </defs>
+    <g
+        id="Public/ic_public_play_norm"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd">
+        <mask
+            id="mask-2"
+            fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use
+            id="形状结合"
+            fill="#000000"
+            fill-rule="nonzero"
+            xlink:href="#path-1"></use>
+    </g>
+</svg>

UI/JsFACard/entry/src/main/js/jsmusictemplate/i18n/en-US.json

@@ -0,0 +1,8 @@
+{
+  "strings": {
+    "search": "search",
+    "favor": "favor",
+    "recommend": "search",
+    "ranking": "favor"
+  }
+}

UI/JsFACard/entry/src/main/js/jsmusictemplate/i18n/zh-CN.json

@@ -0,0 +1,8 @@
+{
+  "strings": {
+    "search": "搜索",
+    "favor": "喜欢",
+    "recommend": "推荐",
+    "ranking": "排行"
+  }
+}

UI/JsFACard/entry/src/main/js/jsmusictemplate/pages/index/index.css

@@ -0,0 +1,116 @@
+/*
+ * 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.
+ */
+
+.background {
+    width: 100%;
+    height: 100%;
+    background-image: url("/common/ic_default_image.png");
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+    background-color: #4D000000;
+    align-items: center;
+    backdrop-filter: blur(2px);
+    padding: 12px 0px 0px 12px;
+}
+
+.cover-image {
+    flex-shrink: 0;
+    flex-weight: 3;
+    min-width: 126px;
+    margin-right: 12px;
+    height: 100%;
+    margin-bottom: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+}
+
+.default_image {
+    border-radius: 14px;
+}
+
+.status-image {
+    width: 32px;
+    height: 32px;
+}
+
+.absolute-text {
+    font-size: 16px;
+    color: white;
+    position: absolute;
+    left: 12px;
+    bottom: 18px;
+}
+
+.absolute-button {
+    color: white;
+    position: absolute;
+    left: 12px;
+    bottom: 18px;
+}
+
+.main-div {
+    flex-direction: column;
+    flex-weight: 2;
+    min-width: 75px;
+    margin-right: 12px;
+    justify-content: space-between;
+}
+
+.wrap-div {
+    flex-weight: 1;
+    margin-bottom: 12px;
+    background-color: #19FFFFFF;
+    border-radius: 14px;
+    width: 100%;
+    min-height: 46px;
+    flex-wrap: wrap;
+    flex-direction: column;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+}
+
+.image-div {
+    width: 24px;
+    aspect-ratio: 1;
+    flex-shrink: 0;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+}
+
+.image-text {
+    font-size: 12px;
+    color: white;
+    text-align: center;
+    margin: 0px 12px;
+}
+
+.large-display-index {
+    display-index: 3;
+}
+
+.medium-display-index {
+    display-index: 2;
+}
+
+.small-display-index {
+    display-index: 1;
+}

UI/JsFACard/entry/src/main/js/jsmusictemplate/pages/index/index.hml

@@ -0,0 +1,60 @@
+<!--
+ 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.
+ -->
+
+<div class="background">
+    <div class="container">
+        <stack class="large-display-index cover-image">
+            <image src="/common/ic_default_image.png" class="default_image"></image>
+            <image src="/common/{{ status }}.svg" onclick="messageEvent" class="status-image"></image>
+        </stack>
+        <div class="main-div medium-display-index">
+            <div class="wrap-div medium-display-index">
+                <image src="/common/ic_search.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.search') }}</text>
+            </div>
+            <div class="wrap-div medium-display-index">
+                <image src="/common/ic_favor.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.favor') }}</text>
+            </div>
+            <div class="wrap-div small-display-index">
+                <image src="/common/ic_ranking.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.ranking') }}</text>
+            </div>
+            <div class="wrap-div small-display-index">
+                <image src="/common/ic_recommend.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.recommend') }}</text>
+            </div>
+        </div>
+
+        <div class="main-div small-display-index">
+            <div class="wrap-div medium-display-index">
+                <image src="/common/ic_ranking.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.ranking') }}</text>
+            </div>
+            <div class="wrap-div medium-display-index">
+                <image src="/common/ic_recommend.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.recommend') }}</text>
+            </div>
+            <div class="wrap-div small-display-index">
+                <image src="/common/ic_favor.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.favor') }}</text>
+            </div>
+            <div class="wrap-div small-display-index">
+                <image src="/common/ic_search.svg" class="image-div"></image>
+                <text class="image-text">{{ $t('strings.search') }}</text>
+            </div>
+        </div>
+    </div>
+</div>

UI/JsFACard/entry/src/main/js/jsmusictemplate/pages/index/index.json

@@ -0,0 +1,13 @@
+{
+  "data": {
+    "status": "play"
+  },
+  "actions": {
+    "messageEvent": {
+      "action": "message",
+      "params": {
+        "message": "music change status"
+      }
+    }
+  }
+}

UI/JsFACard/entry/src/main/resources/base/element/string.json

@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "JsFACard"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS card example"
+    }
+  ]
+}

UI/JsFACard/entry/src/main/resources/base/layout/immersion_widget.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ 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.
+ -->
+<DirectionalLayout
+    xmlns:ohos="http://schemas.huawei.com/res/ohos"
+    ohos:height="match_parent"
+    ohos:orientation="vertical"
+    ohos:width="match_parent">
+
+    <Text
+        ohos:height="match_parent"
+        ohos:id="$+id:text_hello"
+        ohos:layout_alignment="center"
+        ohos:text_alignment="center"
+        ohos:text_size="50"
+        ohos:width="match_parent" />
+</DirectionalLayout>

UI/JsFACard/entry/src/main/resources/en/element/string.json

@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "JsFACard"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS card example"
+    }
+  ]
+}

UI/JsFACard/entry/src/main/resources/zh/element/string.json

@@ -0,0 +1,12 @@
+{
+  "string": [
+    {
+      "name": "entry_MainAbility",
+      "value": "Js卡片"
+    },
+    {
+      "name": "mainability_description",
+      "value": "JS卡片示例"
+    }
+  ]
+}

UI/JsFACard/settings.gradle

@@ -0,0 +1 @@
+include ':entry'