卡片编辑开发指导

桌面提供统一的卡片编辑页，卡片提供方使用卡片框架提供的FormEditExtensionAbility开发卡片编辑功能。

开发步骤

1. 在工程的entry模块中，新建名为EntryFormEditAbility的代码文件。在EntryFormEditAbility文件中，实现startSecondPage方法，在onSessionCreate回调方法中，加载一级卡片编辑页，并将startSecondPage方法的实现传递给一级卡片编辑页。

   // src/main/ets/entryformeditability/EntryFormEditAbility.ets
   
   import { FormEditExtensionAbility } from '@kit.FormKit';
   import { Want,UIExtensionContentSession } from '@kit.AbilityKit';
   import { ExtensionEvent } from '../pages/model/ExtensionEvent';
   
   const TAG: string = 'FormEditDemo[EntryFormEditAbility] -->';
   export default class EntryFormEditAbility extends FormEditExtensionAbility {
     onCreate() {
       console.info(`${TAG} onCreate`);
     }
     onForeground(): void {
       console.info(`${TAG} EntryFormEditAbility onForeground.....`);
     }
     onBackground(): void {
       console.info(`${TAG} EntryFormEditAbility onBackground......`);
     }
     onDestroy(): void {
       console.info(`${TAG} EntryFormEditAbility onDestroy......`);
     }
     onSessionCreate(want: Want, session: UIExtensionContentSession) {
       console.info(`${TAG} onSessionCreate start..... want: ${JSON.stringify(want)}`);
       let storage: LocalStorage = new LocalStorage();
       let extensionEvent: ExtensionEvent = new ExtensionEvent();
       extensionEvent.setStartSecondPage(() => this.startSecondPage());
       storage.setOrCreate('extensionEvent', extensionEvent);
       try {
         session.loadContent('pages/Extension', storage);
       } catch (e) {
         console.error(`${TAG} EntryFormEditAbility loadContent err, want: ${JSON.stringify(e)}`);
       }
     }
     onSessionDestroy(session: UIExtensionContentSession) {
       console.info(`${TAG} onSessionDestroy`);
     }
     private startSecondPage(): void {
       const bundleName: string = this.context.extensionAbilityInfo.bundleName;
       const secPageAbilityName: string = 'FormEditSecPageAbility';
       console.info(`${TAG} startSecondPage. bundleName: ${bundleName}, secPageAbilityName: ${secPageAbilityName}.`);
       try {
         this.context.startSecondPage({
           bundleName: bundleName,
           parameters: {
             "secPageAbilityName": secPageAbilityName
           }
         });
       } catch (err) {
         console.error(`${TAG} startSecondPage failed: ${err}`);
       }
     }
   };
   

2. 新增Extension文件，用于展示卡片一级编辑页。

   // src/main/ets/pages/Extension.ets
   
   import { UIExtensionContentSession } from '@kit.AbilityKit';
   import { ExtensionEvent } from './model/ExtensionEvent';
   
   let storage = new LocalStorage();
   const TAG: string = 'FormEditDemo[Extension] -->';
   @Entry(storage)
   @Component
   struct Extension {
     @State message: string = 'UIExtension Provider';
     private session: UIExtensionContentSession | undefined = storage.get<UIExtensionContentSession>('session');
     private extensionEvent: ExtensionEvent | undefined = storage.get<ExtensionEvent>('extensionEvent');
     onPageShow() {
       if (!this.session || !this.extensionEvent) {
         console.info(`${TAG} onPageShow. extensionEvent: ${JSON.stringify(this.extensionEvent)}, session: ${JSON.stringify(this.session)}.`);
       }
     }
     build() {
       Row() {
         Column() {
           Text(this.message)
             .fontSize(20)
             .fontWeight(FontWeight.Bold)
             .textAlign(TextAlign.Center)
           Button("添加")
             .width('80%')
             .type(ButtonType.Capsule)
             .margin({
               top: 20
             })
             .onClick(() => {
               console.info(`${TAG} Button onClick`);
               this.extensionEvent?.startFormEditSecondPage();
             })
         }
       }
       .justifyContent(FlexAlign.Center)
       .width('100%')
     }
   }
   

3. 新增ExtensionEvent文件，使用startFormEditSecondPage方法调用startSecondPage方法。

   // src/main/ets/pages/model/ExtensionEvent.ets
   
   const TAG: string = 'FormEditDemo[ExtensionEvent] -->';
   export class ExtensionEvent {
     private startSecondPage: () => void = () => {
       console.info(`${TAG} startSecondPage is empty!`);
     };
     public setStartSecondPage(startSecondPage: () => void) {
       console.info(`${TAG} setStartSecondPage`);
       this.startSecondPage = startSecondPage;
     }
     public startFormEditSecondPage(): void {
       console.info(`${TAG} startFormEditSecondPage`);
       this.startSecondPage();
     }
   }
   
   

4. 在应用的module.json5配置文件中添加卡片编辑配置信息。

   "extensionAbilities": [
     {
       "name": "EntryFormEditAbility",
       "srcEntry": "./ets/entryformeditability/EntryFormEditAbility.ets",
       "type": "formEdit"
     }
   ]
   

5. 在卡片的form_config.json配置文件中添加formConfigAbility配置项信息。

   {
     "forms": [
       {
         "name": "widget",
         "displayName": "$string:widget_display_name",
         "description": "$string:widget_desc",
         "src": "./ets/widget/pages/WidgetCard.ets",
         "uiSyntax": "arkts",
         "formConfigAbility": "ability://EntryFormEditAbility",
         "window": {
           "designWidth": 720,
           "autoDesignWidth": true
         },
         "colorMode": "auto",
         "isDynamic": true,
         "isDefault": true,
         "updateEnabled": false,
         "scheduledUpdateTime": "10:30",
         "updateDuration": 1,
         "defaultDimension": "1*2",
         "supportDimensions": [
           "1*2",
           "2*2",
           "2*4",
           "4*4"
         ]
       }
     ]
   }
   

6. 在开发视图的resource/base/profile/main_pages.json文件中，注册Extension页面文件。

   {
     "src": [
       "pages/Index",
       "pages/Extension"
     ]
   }