4.5.3. 应用程序组件示例

在本节中，我们将展示创建应用程序组件并在项目中使用的完整示例。该组件将提供 "客户管理(Customer Management)"功能，并包括 客户(Customer) 实体和相应的 UI 界面。应用程序将使用组件中的 Customer 实体作为其 订单(Order) 实体中的引用。

app components sample
创建客户管理组件

  1. 在 Studio 中创建一个新项目，并在 New project 界面上指定以下参数：

    • Project name - customers

    • Project namespace - cust

    • Root package - com.company.customers

  2. 打开 Project properties 窗口，在 Main 标签页上将 Module prefix 设置为 cust。

  3. 创建至少有 name 属性的 Customer 实体。在 Instance name 字段，设置 name pattern 属性。

    如果组件包含 @MappedSuperclass 持久化类，请确保它们在同一个项目中有后代实体（即使用 @Entity 注解）。否则，这些基类将无法被正确增强（enhanced），并无法在应用程序中使用它们。

  4. 生成 DB 脚本并为 Customer 实体创建标准界面：cust_Customer.browse 和 cust_Customer.edit。

  5. 切换到菜单编辑器（menu designer），将 application-cust 菜单项更名为 customerManagement。然后，打开 Main Message Pack 部分的 messages.properties，为新的 customerManagement 设置标题。

  6. 通过点击主菜单 CUBA > Advanced > App Component Descriptor 生成 组件描述文件 app-component.xml。

  7. 测试客户管理功能：

    • 主菜单选择 CUBA > Create Database。

    • 启动应用程序：点击主工具栏 CUBA Application 配置旁边的调试按钮。

    • 浏览器打开 http://localhost:8080/cust。

  8. 通过点击 CUBA > Advanced > Install App Component 菜单项将应用程序组件安装到本地 Maven 仓库中。

创建 Sales 应用程序

  1. 在 Studio 中创建一个新项目，并在 New project 界面上指定以下参数：

    • Project name - sales

    • Project namespace - sales

    • Root package - com.company.sales

  2. 打开 Project properties 窗口，并在 Repositories 部分中将本地 Maven 仓库添加到仓库列表。

  3. 在 App components 面板上单击 Custom components 旁边的加号按钮。在 Custom application component 对话框中，输入客户管理组件的 Maven 坐标，比如，com.company.customers:cust-global:0.1-SNAPSHOT。点击 OK 按钮保存项目属性设置。如果 Studio 建议更改 Gradle 脚本，同意即可。

  4. 创建 Order 实体并添加 date 和 amount 属性。然后添加 customer 属性，与 Customer 实体多对一关联 - Customer 在 Type 下拉列表中可用。

  5. 生成 DB 脚本并为 Order 实体创建标准界面。在创建标准界面时，先创建一个包含 customer 属性的 order-with-customer 视图，并将该视图用于界面展示。

  6. 测试应用程序功能：

    • 在主菜单选择 CUBA > Create Database。

    • 启动应用程序：点击主工具栏 CUBA Application 配置旁边的调试按钮。

    • 浏览器打开 http://localhost:8080/cust。应用程序将包含两个顶层菜单：Customer Management 和 Application，并都带有相应的功能。

修改客户管理组件

假设现在必须更改组件功能（在 Customer 中添加一个属性），然后重新装配应用程序以合并更改。

  1. 在 Studio 中打开 customers 项目。

  2. 编辑 Customer 实体并添加 address 属性。在浏览和编辑界面都需要包含此属性。

  3. 生成数据库脚本 - 将创建更新表的脚本。保存脚本。

  4. 测试组件中的更改：

    • 在主菜单选择 CUBA > Update Database。

    • 启动应用程序：点击主工具栏 CUBA Application 配置旁边的调试按钮。

    • 浏览器打开 http://localhost:8080/cust。

  5. 通过执行 CUBA > Advanced > Install App Component 菜单项将应用程序组件重新安装到本地 Maven 仓库中。

  6. 关闭 Studio 中的 sales 项目（如果已打开）并再次打开它。这是在 Studio 中下载新组件源代码所必须的。

  7. 点击 CUBA > Build Tasks > Clean，然后再点击 CUBA > Build Tasks > Assemble 菜单项。

  8. 点击主菜单 CUBA > Update Database - 会执行客户管理组件的更新脚本。

  9. 启动应用程序：点击主工具栏 CUBA Application 配置旁边的调试按钮。

  10. 浏览器打开 http://localhost:8080/app 应用程序会有包含新 address 属性的 Customer 实体以及界面。