1# 通过message事件刷新卡片内容
2
3在卡片页面中可以通过[postCardAction](../reference/apis-arkui/js-apis-postCardAction.md#postcardaction)接口触发message事件拉起FormExtensionAbility,然后由FormExtensionAbility刷新卡片内容,下面是这种刷新方式的简单示例。
4
5> **说明:**
6>
7> 本文主要介绍动态卡片的事件开发。对于静态卡片,请参见[FormLink](../reference/apis-arkui/arkui-ts/ts-container-formlink.md)。
8
9- 在卡片页面通过注册Button的onClick点击事件回调,并在回调中调用postCardAction接口触发message事件拉起FormExtensionAbility。卡片页面中使用[LocalStorageProp](../quick-start/arkts-localstorage.md#localstorageprop)装饰需要刷新的卡片数据。
10
11  ```ts
12  let storageUpdateByMsg = new LocalStorage();
13
14  @Entry(storageUpdateByMsg)
15  @Component
16  struct UpdateByMessageCard {
17    @LocalStorageProp('title') title: ResourceStr = $r('app.string.default_title');
18    @LocalStorageProp('detail') detail: ResourceStr = $r('app.string.DescriptionDefault');
19
20    build() {
21      Column() {
22        Column() {
23          Text(this.title)
24            .fontColor('#FFFFFF')
25            .opacity(0.9)
26            .fontSize(14)
27            .margin({ top: '8%', left: '10%' })
28          Text(this.detail)
29            .fontColor('#FFFFFF')
30            .opacity(0.6)
31            .fontSize(12)
32            .margin({ top: '5%', left: '10%' })
33        }.width('100%').height('50%')
34        .alignItems(HorizontalAlign.Start)
35
36        Row() {
37          Button() {
38            Text($r('app.string.update'))
39              .fontColor('#45A6F4')
40              .fontSize(12)
41          }
42          .width(120)
43          .height(32)
44          .margin({ top: '30%', bottom: '10%' })
45          .backgroundColor('#FFFFFF')
46          .borderRadius(16)
47          .onClick(() => {
48            postCardAction(this, {
49              action: 'message',
50              params: { msgTest: 'messageEvent' }
51            });
52          })
53        }.width('100%').height('40%')
54        .justifyContent(FlexAlign.Center)
55      }
56      .width('100%')
57      .height('100%')
58      .alignItems(HorizontalAlign.Start)
59      .backgroundImage($r('app.media.CardEvent'))
60      .backgroundImageSize(ImageSize.Cover)
61    }
62  }
63  ```
64
65- 在FormExtensionAbility的onFormEvent生命周期中调用[updateForm](../reference/apis-form-kit/js-apis-app-form-formProvider.md#updateform)接口刷新卡片。
66
67  ```ts
68  import { BusinessError } from '@kit.BasicServicesKit';
69  import { formBindingData, FormExtensionAbility, formProvider } from '@kit.FormKit';
70  import { hilog } from '@kit.PerformanceAnalysisKit';
71
72  const TAG: string = 'EntryFormAbility';
73  const DOMAIN_NUMBER: number = 0xFF00;
74
75  export default class EntryFormAbility extends FormExtensionAbility {
76    onFormEvent(formId: string, message: string): void {
77      // Called when a specified message event defined by the form provider is triggered.
78      hilog.info(DOMAIN_NUMBER, TAG, `FormAbility onFormEvent, formId = ${formId}, message: ${JSON.stringify(message)}`);
79
80      class FormDataClass {
81        title: string = 'Title Update.'; // 和卡片布局中对应
82        detail: string = 'Description update success.'; // 和卡片布局中对应
83      }
84
85      let formData = new FormDataClass();
86      let formInfo: formBindingData.FormBindingData = formBindingData.createFormBindingData(formData);
87      formProvider.updateForm(formId, formInfo).then(() => {
88        hilog.info(DOMAIN_NUMBER, TAG, 'FormAbility updateForm success.');
89      }).catch((error: BusinessError) => {
90        hilog.info(DOMAIN_NUMBER, TAG, `Operation updateForm failed. Cause: ${JSON.stringify(error)}`);
91      })
92    }
93    //...
94  }
95  ```
96
97  运行效果如下图所示。
98
99  | 初始状态                                                | 点击刷新                                              |
100  | ------------------------------------------------------- | ----------------------------------------------------- |
101  | ![WidgetUpdateBefore](figures/widget-update-before.PNG) | ![WidgetUpdateAfter](figures/widget-update-after.PNG) |
102