1# 通过message事件刷新卡片内容 2 3 4在卡片页面中可以通过**postCardAction**接口触发message事件拉起FormExtensionAbility，然后由FormExtensionAbility刷新卡片内容，下面是这种刷新方式的简单示例。 5 6 7- 在卡片页面通过注册Button的onClick点击事件回调，并在回调中调用**postCardAction**接口触发事件至FormExtensionAbility。 8 9 ```ts 10 let storage = new LocalStorage(); 11 @Entry(storage) 12 @Component 13 struct WidgetCard { 14 @LocalStorageProp('title') title: string = 'init'; 15 @LocalStorageProp('detail') detail: string = 'init'; 16 17 build() { 18 Column() { 19 Button('刷新') 20 .onClick(() => { 21 postCardAction(this, { 22 'action': 'message', 23 'params': { 24 'msgTest': 'messageEvent' 25 } 26 }); 27 }) 28 Text(`${this.title}`) 29 Text(`${this.detail}`) 30 } 31 .width('100%') 32 .height('100%') 33 } 34 } 35 ``` 36 37- 在FormExtensionAbility的onFormEvent生命周期中调用[updateForm](../reference/apis/js-apis-app-form-formProvider.md#updateform)接口刷新卡片。 38 39 ```ts 40 import formBindingData from '@ohos.app.form.formBindingData'; 41 import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility'; 42 import formProvider from '@ohos.app.form.formProvider'; 43 44 export default class EntryFormAbility extends FormExtensionAbility { 45 onFormEvent(formId, message) { 46 // Called when a specified message event defined by the form provider is triggered. 47 console.info(`FormAbility onEvent, formId = ${formId}, message: ${JSON.stringify(message)}`); 48 let formData = { 49 'title': 'Title Update Success.', // 和卡片布局中对应 50 'detail': 'Detail Update Success.', // 和卡片布局中对应 51 }; 52 let formInfo = formBindingData.createFormBindingData(formData) 53 formProvider.updateForm(formId, formInfo).then((data) => { 54 console.info('FormAbility updateForm success.' + JSON.stringify(data)); 55 }).catch((error) => { 56 console.error('FormAbility updateForm failed: ' + JSON.stringify(error)); 57 }) 58 } 59 60 ... 61 } 62 ``` 63 64 运行效果如下图所示。 65  66
