diff --git a/zh-cn/application-dev/application-models/arkts-ui-widget-creation.md b/zh-cn/application-dev/application-models/arkts-ui-widget-creation.md index 71c48410fea0aee1420ae1dab44b9dfa81ff1e63..248c23ea425fb67ad814d1402d100d799d0c5a34 100644 --- a/zh-cn/application-dev/application-models/arkts-ui-widget-creation.md +++ b/zh-cn/application-dev/application-models/arkts-ui-widget-creation.md @@ -1,16 +1,23 @@ # 创建一个ArkTS卡片 -在已有的应用工程中，创建ArkTS卡片，具体的操作方式如下。 +创建卡片当前有两种入口： -1. 创建卡片。 +- 创建工程时，选择Application，默认不带卡片，可以在创建工程后右键新建卡片。 +- 创建工程时，选择Atomic Service，默认自带卡片，也可以在创建工程后右键新建卡片。 + +![WidgetCreateProject](figures/WidgetCreateProject.png) + +在已有的应用工程中，可以通过右键新建ArkTS卡片，具体的操作方式如下。 + +1. 右键新建卡片。 ![WidgetProjectCreate1](figures/WidgetProjectCreate1.png) 2. 根据实际业务场景，选择一个卡片模板。 ![WidgetProjectCreate2](figures/WidgetProjectCreate2.png) - + 3. 在选择卡片的开发语言类型（Language）时，选择ArkTS选项，然后单击“Finish”，即可完成ArkTS卡片创建。 ![WidgetProjectCreate3](figures/WidgetProjectCreate3.png) - + ArkTS卡片创建完成后，工程中会新增如下卡片相关文件：卡片生命周期管理文件（EntryFormAbility.ets）、卡片页面文件（WidgetCard.ets）和卡片配置文件（form_config.json）。 ![WidgetProjectView](figures/WidgetProjectView.png) diff --git a/zh-cn/application-dev/application-models/arkts-ui-widget-event-formextensionability.md b/zh-cn/application-dev/application-models/arkts-ui-widget-event-formextensionability.md index dd1c84a41983ed354da06789357626beb1d3126a..776b129a1fabf15885e43d19f5949878acf9be02 100644 --- a/zh-cn/application-dev/application-models/arkts-ui-widget-event-formextensionability.md +++ b/zh-cn/application-dev/application-models/arkts-ui-widget-event-formextensionability.md @@ -11,12 +11,19 @@ @Entry(storage) @Component struct WidgetCard { - @LocalStorageProp('title') title: string = 'init'; - @LocalStorageProp('detail') detail: string = 'init'; + @LocalStorageProp('title') title: string = 'Title default'; + @LocalStorageProp('detail') detail: string = 'Description default'; build() { Column() { - Button('刷新') + Column() { + Text(`${this.title}`) + .margin(5).fontWeight(FontWeight.Medium).fontSize('14fp') + Text(`${this.detail}`) + .margin(5).fontColor(Color.Gray).fontSize('12fp').height('25%') + }.width('100%').alignItems(HorizontalAlign.Start) + Button('UPDATE') + .margin(15).width('90%') .onClick(() => { postCardAction(this, { 'action': 'message', @@ -25,11 +32,7 @@ } }); }) - Text(`${this.title}`) - Text(`${this.detail}`) - } - .width('100%') - .height('100%') + }.width('90%').height('90%').margin('5%') } } ``` @@ -46,8 +49,8 @@ // Called when a specified message event defined by the form provider is triggered. console.info(`FormAbility onEvent, formId = ${formId}, message: ${JSON.stringify(message)}`); let formData = { - 'title': 'Title Update Success.', // 和卡片布局中对应 - 'detail': 'Detail Update Success.', // 和卡片布局中对应 + 'title': 'Title Update.', // 和卡片布局中对应 + 'detail': 'Description update success.', // 和卡片布局中对应 }; let formInfo = formBindingData.createFormBindingData(formData) formProvider.updateForm(formId, formInfo).then((data) => { @@ -61,5 +64,8 @@ } ``` - 运行效果如下图所示。 - ![WidgetUpdatePage](figures/WidgetUpdatePage.png) + 运行效果如下图所示。 + + | 初始状态 | 点击刷新 | + | ------------------------------------------------------- | ----------------------------------------------------- | + | ![WidgetUpdateBefore](figures/widget-update-before.PNG) | ![WidgetUpdateAfter](figures/widget-update-after.PNG) | diff --git a/zh-cn/application-dev/application-models/arkts-ui-widget-event-router.md b/zh-cn/application-dev/application-models/arkts-ui-widget-event-router.md index f32017a7ed10f405f292bd6ad26139df5613d189..e54036d3971d65b2a12cf45baec3640f079e6337 100644 --- a/zh-cn/application-dev/application-models/arkts-ui-widget-event-router.md +++ b/zh-cn/application-dev/application-models/arkts-ui-widget-event-router.md @@ -1,7 +1,7 @@ # 使用router事件跳转到指定UIAbility - 在卡片中使用**postCardAction**接口的router能力，能够快速拉起卡片提供方应用的指定UIAbility，因此UIAbility较多的应用往往会通过卡片提供不同的跳转按钮，实现一键直达的效果。例如相机卡片，卡片上提供拍照、录像等按钮，点击不同按钮将拉起相机应用的不同UIAbility，从而提高用户的体验。 + ![WidgerCameraCard](figures/WidgerCameraCard.png) diff --git a/zh-cn/application-dev/application-models/arkts-ui-widget-working-principles.md b/zh-cn/application-dev/application-models/arkts-ui-widget-working-principles.md index e40413e81bc389fd857b19081dc3b7bdd17159de..7585bbc02e566a5747acb8ba75acab6f8e224929 100644 --- a/zh-cn/application-dev/application-models/arkts-ui-widget-working-principles.md +++ b/zh-cn/application-dev/application-models/arkts-ui-widget-working-principles.md @@ -26,7 +26,7 @@ - 统一开发范式，提升开发体验和开发效率。 - OpenHarmony在2022年发布了声明式范式的UI开发框架，而卡片还延续了css/hml/json三段式类Web范式的开发方式，提高了开发者的学习成本，提供ArkTS卡片能力后，统一了卡片和页面的开发范式，页面的布局可以直接复用到卡片布局中，提升开发体验和开发效率。 + 提供ArkTS卡片能力后，统一了卡片和页面的开发范式，页面的布局可以直接复用到卡片布局中，提升开发体验和开发效率。 **图3** 卡片工程结构对比 ![WidgetProject](figures/WidgetProject.png) diff --git a/zh-cn/application-dev/application-models/figures/WidgetCreateProject.png b/zh-cn/application-dev/application-models/figures/WidgetCreateProject.png new file mode 100644 index 0000000000000000000000000000000000000000..2372e68a25c116ace77374eba86a8ea7a0680988 Binary files /dev/null and b/zh-cn/application-dev/application-models/figures/WidgetCreateProject.png differ diff --git a/zh-cn/application-dev/application-models/figures/WidgetUpdatePage.png b/zh-cn/application-dev/application-models/figures/WidgetUpdatePage.png deleted file mode 100644 index 24ba6ae125dac0acf426e61d6a9dd71630f55294..0000000000000000000000000000000000000000 Binary files a/zh-cn/application-dev/application-models/figures/WidgetUpdatePage.png and /dev/null differ diff --git a/zh-cn/application-dev/application-models/figures/widget-update-after.PNG b/zh-cn/application-dev/application-models/figures/widget-update-after.PNG new file mode 100644 index 0000000000000000000000000000000000000000..fddb9f651685332324af9a4d065c29638a58c0ba Binary files /dev/null and b/zh-cn/application-dev/application-models/figures/widget-update-after.PNG differ diff --git a/zh-cn/application-dev/application-models/figures/widget-update-before.PNG b/zh-cn/application-dev/application-models/figures/widget-update-before.PNG new file mode 100644 index 0000000000000000000000000000000000000000..6355f1b66707af8073a2e1dea7f05e839f3a9818 Binary files /dev/null and b/zh-cn/application-dev/application-models/figures/widget-update-before.PNG differ