使用声明式 API

学习目标

  • 以声明方式在 HTML 页面中嵌入组件

用于初始组件的声明式 API

借助声明式 sap/ui/core/ComponentSupport API，可以直接在 HTML 标记中定义初始启动的组件。这为使用 JavaScript 的命令式方式提供了一种替代方案。

声明式组件支持默认不激活，必须通过引导（bootstrap）启用。为此，必须将以下属性添加到引导脚本中，以加载 ComponentSupport 模块（参见图 Using the Declarative API）：

data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"

声明式 API 代码示例。

模块加载完成后，sap/ui/core/ComponentSupport 的 run 函数会被自动调用。它会扫描 DOM，查找包含名为 data-sap-ui-component 的特殊数据属性的 HTML 元素。所有标记了此数据属性的 DOM 元素都会被视为容器元素，并在其中插入一个 sap/ui/core/ComponentContainer。

随后使用其他数据属性来定义所创建的组件容器实例的构造函数参数。在所示示例中，指定了以下数据属性：

  • data-id 此属性用于传递要创建的组件容器实例的 Id。

  • data-name data-name 属性包含要实例化的组件名称。

  • data-settings 为 data-settings 属性指定的对象会在创建组件实例时传递给该实例。在示例中，它用于设置组件实例 Id。

注意

该 ComponentSupport 模块会以“清单优先（manifest first）”方式强制对组件进行异步模块加载。这意味着 manifest.json 文件会在评估组件之前加载，以优化加载行为（见上文）。

直接在 HTML 标记中定义初始启动的组件

业务场景

在本练习中，您将使用初始组件的声明式 API，在 HTML 页面的 <body> 中声明上一练习中定义的组件。这会通过框架自动实例化该组件并将其嵌入 HTML 页面。上一练习中用于实例化组件并将其放置到 HTML 页面上的代码随后不再需要，并被删除。*模板：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：*sol/6_components模型解决方案：*Git 仓库：https://github.com/SAP-samples/sapui5-development-learning-journey.git，分支：sol/7_declarative_API_for_components

任务 1：移除组件的实例化

步骤

  1. 从 *webapp* 文件夹中删除 *index.js* 模块。

  2. 在项目结构中打开 *index.js* 文件的上下文菜单。

  3. 选择 *Delete Permanently*。

  4. 选择 Delete 以确认。

任务 2：在 HTML 页面的 <body> 中声明组件

步骤

  1. 确保 *index.html* 页面已在编辑器中打开。

  2. 由于上一步中删除了 *index.js* 模块，请从引导脚本中删除以下属性：

data-sap-ui-onInit="module:sap/training/exc/index"

  1. 将以下属性添加到引导脚本中，以启用 ComponentSupport 模块：

data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"

结果

引导脚本现在应如下所示： index.html 文件，突出显示 data-sap-ui-onInit 行。 4. 将以下 <div> 标记添加到 HTML 页面的 <body> 中，以便在 onInit 事件触发时实例化该组件：

<div
data-sap-ui-component
data-id="container"
data-name="sap.training.exc"
data-settings='{"id" : "sap.training.exc"}'
> </div>

结果

HTML 页面的

现在应如下所示： ![index.html 文件，突出显示 div 标记。](../../assets/UX400-developing-uis-with-sapui5-1/UX400_23_Declarative_API_2.png) 5. 从 SAP Business Application Studio 启动您的应用程序进行测试运行。 1. 在您的 *sapui5-development-learning-journey* 项目中右键单击任意子文件夹，然后从出现的上下文菜单中选择 *Preview Application*。 2. 在出现的对话框中选择名为 *start-noflp* 的 npm 脚本。 3. 在打开的应用程序中，检查该组件是否以 *App* 视图作为根视图显示。