"abilities": [
    {
      "skills": [
        {
          "entities": [
            "entity.system.home"
          ],
          "actions": [
            "action.system.home"
          ]
        }
      ],
      "name": "com.example.mysevercard.MainAbility",
      "icon": "$media:icon",
      "description": "$string:mainability_description",
      "formsEnabled": true,
        //formsEnable的值若设置为true，则表示该Ability支持服务卡片显示
      "label": "$string:entry_MainAbility",
      "type": "page",
         //forms的值是一个json 数组，表示可配置多张服务卡片
      "forms": [
        {
          "jsComponentName": "widget",
            //JS服务卡片名字、其名字需要和js配置的name一致，表示js组件实例
          "isDefault": true,
            //表示该卡片是一个默认卡片
          "scheduledUpdateTime": "10:30",
            //卡片定时/定点触发更新的时间,采用24小时制，精确到分钟。
          "defaultDimension": "2*2",
            //表示默认卡片的尺寸是22，其他的可选12，24，44尺寸。对于需要在服务中心露出的卡片，默认规格必须设置成2*2。
          "name": "widget",
            //表示卡片的类名
          "description": "This is a service widget",
            //表示卡片的描述。取值可以是描述性内容，也可以是对描述性内容的资源索引，以支持多语言。
          "colorMode": "auto",
            //表示卡片的主题样式，取值范围：auto：自适应;dark：深色主题;light：浅色主题。
          "type": "JS",
            //服务卡片类型，有JS和Java两种，本次配置选择为JS。
          "supportDimensions": [
            "2*2"
          ],
            //表示卡片支持的外观规格(1*2、2*2、2*4、4*4)
          "updateEnabled": true,
          "updateDuration": 1
            // updateDuration表示服务卡片刷新的时间间隔，当取值为0时，表示该参数不生效。以30min作为单位，1表示30min，2表示1个小时，以此类推
        }
      ],
      "launchType": "standard"
    }
  ],
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.

//MainAbility.java 
@Override
    protected ProviderFormInfo onCreateForm(Intent intent) {
        
        long formId = intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY, 0);
    String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY);
    int specificationId = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, 0);
    boolean tempFlag = intent.getBooleanParam(AbilitySlice.PARAM_FORM_TEMPORARY_KEY, false);
        HiLog.info(LABEL_LOG, "onCreateForm: " + formId + " " + formName + " " + specificationId);
        FormBindingData formBindingData = new FormBindingData("{\"temperature\": \"60°\"}");
        ProviderFormInfo formInfo = new ProviderFormInfo();
        formInfo.setJsBindingData(formBindingData);
        return formInfo;
    }
    @Override
    protected void onDeleteForm(long formId) {
        // 删除卡片实例数据
        super.onDeleteForm(formId);
        ......
    }

    @Override
    protected void onUpdateForm(long formId) {
        // 若卡片支持定时更新/定点更新/卡片使用方主动请求更新功能，则提供方需要覆写该方法以支持数据更新
        super.onUpdateForm(formId);
        ......
    }

    @Override
    protected void onTriggerFormEvent(long formId, String message) {
        // 若卡片支持触发事件，则需要覆写该方法并实现对事件的触发
        super.onTriggerFormEvent(formId, message);
        ......
    }

    @Override
    protected void onCastTempForm(long formId) {
        //使用方将临时卡片转换为常态卡片触发，提供方需要做相应的处理
        super.onCastTempForm (formId);
        ......
    }
    
    @Override
    protected void onEventNotify(Map<Long, Integer> formEvents) {
        //使用方发起可见或者不可见通知触发，提供方需要做相应的处理
        super.onEventNotify(formEvents);
        ......
    }
   
    @Override
    protected FormState onAcquireFormState(Intent intent) {
    ElementName elementName = intent.getElement();
    if (elementName == null) {
        HiLog.info(LABEL_LOG, "onAcquireFormState bundleName and abilityName are not set in intent");
        return FormState.UNKNOWN;
    }

    String bundleName = elementName.getBundleName();
    String abilityName = elementName.getAbilityName();

        String moduleName = intent.getStringParam(AbilitySlice.PARAM_MODULE_NAME_KEY);
        String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY);
        int specificationId = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, 0);
    if ("form_name2".equals(formName)) {
        return FormState.DEFAULT;
    }
    return FormState.READY;
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.

public class FormAbility extends AceAbility {
    ......
    public static long formId = -1;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
    }
    ....
1.
2.
3.
4.
5.
6.
7.
8.

public class FormAbility extends Ability {
    ......
    public static long formId = -1;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(FormAbilitySlice.class.getName()); //设置路由
    }
    ....
1.
2.
3.
4.
5.
6.
7.
8.
9.

@Override
protected void onUpdateForm(long formId) {
    super.onUpdateForm(formId);
    ZSONObject zsonObject = new ZSONObject();
    zsonObject.put("temperature", "90°");
    FormBindingData formBindingData = new FormBindingData(zsonObject);
    // 调用updateForm接口去更新对应的卡片，仅更新入参中携带的数据信息，其他信息保持不变
    if (!updateForm(formId, formBindingData)) {
        // err process
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

//index.json
{
  "data": {
    "title": "Title",
    "detail": "Text",
    "iconTitle": "Picture"
  },
  "actions": {
    "routerEvent": {
      "action": "router",
      "bundleName": "com.example.mysevercard",
      "abilityName": "com.example.mysevercard.MainAbility",
      "params": {
        "message": "add detail"
      }
    }
  },
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

"js": [   {     "pages": [       "pages/index/index"     ],     "name": "step_form_card",     "window": {       "designWidth": 720,       "autoDesignWidth": true     },     "type": "form"   },   {     "pages": [       "pages/index/index"     ],     "name": "card2X4",     "window": {       "designWidth": 720,       "autoDesignWidth": true     },     "type": "form"   } ]
1.

//hml代码<div class="card_root_layout" on:click="routerEvent">    <div class="div_basic_container">    <!-- 左侧布局 -->        <div class="left_items">        <!-- 左侧主要以文字方式显示步数，开发者可自行编写 -->        </div>    <!-- 右侧布局 -->        <div class="right_items">        <!-- 进度条部分 -->            <div class="progress">            <!-- 进度值 -->                <div class="progressText">                    <text id="progressValue" class="text">{{ percent }}</text>                    <text class="text">%</text>                </div>                <div class="progressDiv">                <!-- 进度条 -->                    <progress type="horizontal" id="progress" percent="{{ percent }}"></progress>                </div>            </div>        <!-- 线型图布局 -->            <div class="chartArea">                <chart type="line" id="chart" datasets="{{ datasets }}" options="{{ options }}"></chart>            </div>        </div>    </div></div>
1.

.card_root_layout {     width: 100%;     height: 100%;     position: relative; }  .div_basic_container {     background-image: url('common/backgroundImg1.JPG');     background-size: 100% 100%;     background-repeat: no-repeat;     position: absolute;     top: 0px;     left: 0px;     flex-direction: row;     width: 100%;     height: 100%; }  .left_items {     width: 40%;     height: 100%;     align-content: flex-start;     flex-direction: column;     position: absolute;     left: 20; }  .right_items {     align-content: flex-start;     width: 50%;     height: 100%;     position: absolute;     right: 20px; }  #stepImg {     align-content: center;     margin-top: 10px;     width: 30px;     height: 30px; }  #chart {     font-size: 10px;     lineColor: #7CFC00; }  .chartArea {     justify-content: flex-end;     width: 100%;     height: 50%;     position: absolute;     bottom: 10px; }  .text {     font-size: 20px;     font-family: SourceHanSansSC-Regular;     color: #CDCACA; }  .progress {     width: 100%;     height: 40%;     flex-direction: row;     margin-top: 18px;     align-content: flex-start; }  .progressDiv {     flex-direction: row; }  #progress {     position: absolute;     width: 80%;     stroke-width: 20px;     background-color: #CDCACA;     color: #324846;     margin-top: 2px; }  .progressText {     flex-direction: row;     width: 40px; }
1.

export default {     data: {         // 线型图数据         datasets: [                 {                     strokeColor: '#CDCACA',                     fillColor: '#CDCACA',                     data: [                             {                                 value: 0,                                 description: '0',                                 textLocation: 'top',                                 textColor: '#CDCACA',                                 pointStyle: {                                     shape: 'circle',                                     size: 5,                                     fillColor: '#FF9C28',                                     strokeColor: '#FF9C28'                                 }                             }                 // 开发者可参考上面数据结构自行设计其他三天的默认数据                      ],                     gradient: true                 }         ],         options: {             xAxis: {                 min: 0,                 max: 3,                 display: false,                 axisTick: 4             },             yAxis: {                 min: 0,                 max: 1000             }         },         steps: 0,         percent: 50,         mileage: 0     },      actions: {         routerEvent: {             action: "router",             bundleName: "com.huawei.cookbook",             abilityName: "com.huawei.cookbook.MainAbility"         }     } }
1.

/** * form database */@Database(entities = {Form.class, SensorData.class}, version = 1)public abstract class FormDatabase extends OrmDatabase {}
1.

@Entity(tableName = "form") public class Form extends OrmObject {     @PrimaryKey()     private Long formId;     private String formName;     private Integer dimension;      /**      * parametric constructor      *      * @param formId form Id      * @param formName form Name      * @param dimension form dimension       */     public Form(Long formId, String formName, Integer dimension) {         this.formId = formId;         this.formName = formName;         this.dimension = dimension;     }     // 开发者自行添加字段的getter和setter 方法。     }
1.

/**  * Sensor Data Storage Table  */ @Entity(tableName = "sensorData") public class SensorData extends OrmObject {     @PrimaryKey()     private String date;     private Integer stepsValue;     /**      * parametric constructor      *      * @param date date      * @param stepsValue stepsValue       */     public SensorData(String date, Integer stepsValue) {         this.date = date;         this.stepsValue = stepsValue;     }     // 开发者自行添加字段的getter和setter 方法。  }
1.

@Override public void onPermissionGranted() {     Intent intentService = new Intent();     Operation operation = new Intent.OperationBuilder()             .withDeviceId("")             .withBundleName(getBundleName())             .withAbilityName(StepSensorService.class.getSimpleName())             .build();     intentService.setOperation(operation);     startAbility(intentService); }
1.

@Override protected ProviderFormInfo onCreateForm(Intent intent) {     ProviderFormInfo providerFormInfo = new ProviderFormInfo();     IntentParams params = intent.getParams();     if (params == null) {         return providerFormInfo;     }     // 获取卡片id     long formId = parseFormId(params);     // 获取卡片名称     String formName = parseFormName(params);     // 获取卡片规格     int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_2X2);     connect = helper.getOrmContext("FormDatabase", "FormDatabase.db", FormDatabase.class);     // 存储卡片信息     Form form = new Form(formId, formName, dimension);     DatabaseUtils.insertForm(form, connect);     // 获取当天的步数     SensorData sensorData = DatabaseUtils.getSensorData(connect, DateUtils.getDate(0));     String stepValue = "";     if (sensorData != null) {         stepValue = sensorData.getStepsValue() + "";     } else {         stepValue = "0";     }     // 获取卡片页面需要的数据     ZSONObject zsonObject = ChartDataUtils.getZsonObject(stepValue, dimension, connect);     providerFormInfo.setJsBindingData(new FormBindingData(zsonObject));     return providerFormInfo; }
1.

@Override protected void onDeleteForm(long formId) {     LogUtils.info(TAG, "onDeleteForm():formId=" + formId);     super.onDeleteForm(formId);     // 删除数据库中的卡片信息     DatabaseUtils.deleteFormData(formId, connect); }
1.

// 处理传感器数据 private void handleSensorData(float value) {     SensorData realSensorData =             DatabaseUtils.getRealSensorData(value, connect,                     DateUtils.getDate(0), DateUtils.getDate(1));     float realValue = realSensorData.getStepsValue();     String stringValue = String.valueOf((int) realValue);     myHandler.postTask(new Runnable() {         @Override         public void run() {             // 存储数据,开发者可自行实现             DatabaseUtils.insertValues(realValue, connect);             // 更新页面，开发者可自行实现             MainAbilitySlice.updatePage(stringValue);             // 更新卡片             updateForms(stringValue);         }     }); }  // 更新卡片 private void updateForms(String value) {     OrmPredicates ormPredicates = new OrmPredicates(Form.class);     List<Form> forms = connect.query(ormPredicates);     for (Form form : forms) {         ZSONObject result = ChartDataUtils.getZsonObject(value, form.getDimension(), connect);         try {             updateForm(form.getFormId(), new FormBindingData(result));         } catch (FormException e) {             connect.delete(form);             LogUtils.error("updateForms", "formid not exit");         }     } }
1.

// 获取卡片更新的数据 public static ZSONObject getZsonObject(String value, int dimension, OrmContext connect) {     ZSONObject result = new ZSONObject();     // 计算进度条进度，百分比     int round = (int) Math.round(Double.parseDouble(value) / TARGET_STEPS * PROGRESS_PERCENT);     result.put("percent", round);     // 步数     result.put("steps", value);     if (dimension == DIMENSION_2X4) {         // 组装chartdatasets         List<ChartValues> datasets = new ArrayList<>(1);         ChartValues chartValues = ChartDataUtils.getChartValues(value, connect);            // 获取点集数据         datasets.add(chartValues);         // chart图表数据         result.put("datasets", datasets);         // 里程         result.put("mileage", Math.round(Integer.parseInt(value) * METER_PER_STEP));     }     return result; }
1.

// 获取chart组件需要的数据点集 public static ChartValues getChartValues(String value, OrmContext connect) {     ChartValues chartValues = new ChartValues();     // 设置填充色颜色，即上图紫色框内的样式     chartValues.setFillColor(GRAY_COLOR);     // 设置线的颜色，即上图黄色框内线条的颜色     chartValues.setStrokeColor(GRAY_COLOR);     chartValues.setGradient(true);     // 获取点的集合     // 获取前三天的点的集合,开发者可自行实现     List<ChartPoint> chartPoints = ChartDataUtils.getChartPoints(connect);     ChartPoint noewChartPoint = ChartDataUtils.getChartPoint(Integer.parseInt(value));     // 加入今天的步数点     chartPoints.add(noewChartPoint);     chartValues.setData(chartPoints);     return chartValues; }
1.

// 获取chart组件点数据 
public static ChartPoint getChartPoint(int value) { 
    ChartPoint chartPoint = new ChartPoint(); 
    // 点的数值 
    chartPoint.setValue(value); 
    // 点的描述 
    chartPoint.setDescription(value + ""); 
    // 点的描述显示位置，此处设置为点的上面 
    chartPoint.setTextLocation(ChartPoint.TextLocation.top.toString()); 
    // 设置描述字体的颜色 
    chartPoint.setTextColor(GRAY_COLOR); 
    PointStyle pointStyle = new PointStyle(); 
    // 设置点的大小 
    pointStyle.setSize(POINT_SIZE); 
    // 设置点的颜色 
    pointStyle.setFillColor(ORANGE_COLOR); 
    // 设置点的外框颜色 
    pointStyle.setStrokeColor(ORANGE_COLOR); 
    // 设置点的样式，此处设置为圆形 
    pointStyle.setShape(PointStyle.PointShape.CIRCLE.toString() 
            .toLowerCase(Locale.ROOT)); 
    chartPoint.setPointStyle(pointStyle); 
    return chartPoint; 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.