使用扩展点

学习目标

  • 集成注释不可用的前端组件

扩展点

SAP Fiori 元素框架基于 SAPUI5 技术。您可能熟悉 SAPUI5 中的模型视图控制器概念。

在 视图中，您可以定义要在 UI 中使用的 UI 控件。

控制器包含用于定义模型和视图交互方式的方法。

模型保存数据，并提供从数据库检索数据以及设置和更新数据的方法。

因此，在自由式 SAPUI5 应用中，您必须定义视图并实施控制器中所需的方法，例如，如果用户选择按钮，则按钮的事件处理器。

SAP Fiori 元素框架在运行时根据预定义平面布置以及应用特定的元数据和注释生成视图。因此，在标准 SAP Fiori 元素应用程序中，在开发环境的项目中没有任何静态视图或控制器。

如果使用扩展点，则必须将静态 xml 片段添加到项目的 *webapp/ext* 文件夹。如果需要，还将添加控制器。页面编辑器可以生成这两个文件，如果尚不存在，则包括 *ext* 文件夹。

扩展点是由 SAP Fiori 元素框架提供的容器，可连接到标准 SAP Fiori 元素运行时。在此，您可以使用基于 HTML5 和 JavaScript 的标准 SAPUI5 编程模型添加特定的 UI 控件或行为。

在自定义扩展中，您可以提供 SAP Fiori 元素不提供的功能，例如流程图或映射。

注意：您可以在 扩展点概览 中找到 SAP Fiori 元素提供的所有扩展点的列表

将自定义部分添加到对象页面

在本练习中，您将将包含自定义代码的自定义部分添加到将显示地理地图的对象页面正文。

前提条件

您已完成配置对象页面**单元中的将飞机详细信息部分添加到子对象页面正文练习（课程：配置对象页面正文的部分）。

观看模拟并执行步骤

此练习包含指导您完成详细步骤的模拟。模拟后可以找到所有步骤。您可以遵循模拟并使用自己的试用账户执行步骤。

练习：开始练习（SAP 官方交互式练习）

步骤

  1. 打开 SAP Business Application Studio。

  2. 右键单击 travels 项目中的 webapp。

  3. 从后续菜单中选择显示页面映射选项。

  4. 从页面编辑器中选择 TravelObjectPage 的编辑图标。

  5. 选择部分行的添加图标。

  6. 从列表中选择添加自定义部分。

  7. 在添加自定义部分对话框的标题字段中输入**行程**。

  8. 从标题字段中选择全局图标。

  9. 从后续弹出窗口中选择应用。

  10. 在片段名称字段中输入 GeoMap。

  11. 选择锚点部分字段的下拉列表。

  12. 从列表中选择预订 (ID:i18nbookings) 。

  13. 从 添加**自定义部分 对话框中选择 添加 。创建自定义部分行程。

  14. 您可以看到 ext 子文件夹已添加到 webapp 文件夹。

  15. 展开 ext 文件夹。

  16. 从列表中选择 GoeMap.fragment.xml。

  17. 您可以看到页面编辑器生成的一些示例代码。

  18. 您可以将内容替换为自定义代码。提供的示例使用硬编码值创建地理地图。在实际应用程序中，地理地图数据将由后端服务公开并与 控件绑定。

<core:FragmentDefinition xmlns:core="sap.ui.core"
xmlns="sap.m"
xmlns:macros="sap.fe.macros"
xmlns:vbm="sap.ui.vbm"
displayBlock="true">
<VBox>
<vbm:AnalyticMap width="100%" xmlns:l="sap.ui.layout" height="600px" initialPosition="-47.48339103742949; 48.70365903454684;0" initialZoom="2" class="sapUiMediumMarginTop">
<vbm:vos>
<vbm:Routes>
<vbm:Route position="8.682127;50.110924;0; -73.780968;40.641766;0" color="rgb(204,0,0)" colorBorder="rgb(255,255,255)" linewidth="3" routetype="Geodesic" />
<vbm:Route position="-73.780968;40.641766;0; -122.389977;37.615223;0" color="rgb(255,128,0)" colorBorder="rgb(255,255,255)" linewidth="3" routetype="Geodesic" />
<vbm:Route position="-122.389977;37.615223;0; 8.682127;50.110924;0" color="rgb(0,153,76)" colorBorder="rgb(255,255,255)" linewidth="3" routetype="Geodesic" />
</vbm:Routes>
<vbm:Spots>
<vbm:Spot position="8.682127;50.110924;0" tooltip="Frankfurt am Main (FRA)" labelType="Default" labelText="Frankfurt am Main (FRA)" labelPos="5" />
<vbm:Spot position="-73.780968;40.641766;0" tooltip="New York (JFK)" labelType="Default" labelText="New York (JFK)" labelPos="5" />
<vbm:Spot position="-122.389977;37.615223;0" tooltip="San Francisco (SFO)" labelType="Default" labelText="San Francisco (SFO)" labelPos="5" />
</vbm:Spots>
</vbm:vos>
</vbm:AnalyticMap>
</VBox>
</core:FragmentDefinition>

  1. 您可以看到 UI 控件缺少标识的错误。选择代码的 <vbm: AnalyticMap 行。

  2. 从代码中选择快速修复图标。

  3. 从列表中选择*"为整个文件生成标识*"选项。为所有 UI 控件生成标识。

  4. 切换到浏览器中的应用预览。

  5. 在对象页中选择路线选项卡。可以看到已在自定义部分中添加的地理地图。

结果

您已成功将包含自定义代码的自定义部分添加到对象页面正文。你在新节中查看了地理地图。