SAP Business Application Studio(BAS)中Mock Server, Layout Editor, Reusable Libraries的使用

1. 模拟服务器(Mock Server)

1.1 介绍

模拟服务器(Mock Server)可以模拟一个或多个后端服务，用于简化集成测试，并将UI开发与服务开发分离。通过使用模拟服务器，即使后端服务不完整或不稳定，也可以开发和测试UI。

对于从传统SAP WebIDE迁移到SAP BAS中的App, 默认还是未支持mock server的，需要手动添加。通过Application Info (命令面板的 Fiori: Open Application Info ) 界面上的 Add Mock Server Config选项可以启动mock server的安装，安装完成后，在项目中会有如下改变：

• package.json 文件中会包含了start-mock脚本
• package.json 文件中会包含@sap-ux/ui5-middleware-fe-mockserver作为依赖
• ui5-mock.yaml文件会被包含到项目中

通过Run Configuration * Mock或NPM脚本 start-mock可以启动使用mock server的Fiori App程序。

访问 SAP UI5 SDK ，在页面顶部的搜索框中输入 "Mock Server" 可以查到更多如何使用Mock Server的文档。

1.2 模拟数据编辑器（Mock Data Editor）

通过NPM脚本 npm run start-mock 可以预览使用mock data的应用程序，这些mock data是在预览时自动生成的。

如果想生成并保存mock data至.json文件中，可以通过右键项目文件夹启动Open Data Editor（通过 Application Info界面的 Maintain Mock Data可以打开此界面）。

生成完mock data后，这些数据会以json文件的格式存储在webapp/localservice/data下。

生成测试数据的原理是：Data Editor会读取metadata.xml文件（这个文件是定义在manifest.json文件中的dataSources部分），并基于property type来生成模式数据。

所生成的模拟数据样式如下：

2 版面编辑 (Layout Editor)

通过右键Explorer中的视图名称选择Open With > Layout Editor来打开版面编辑器。

在版面编辑器中可显示和更改一个XML视图的内容。

• 控制面板（Control Panel）: 选择和搜索所支持的控件，并可以将所需的控件拖拽至画布Canvas
• 大纲面板（Outline Panel）: 显示视图当前的控件层级结构
• 画布（Canvas）: 提供所选XML视图的图形化显示
• 属性面板（Property Panel）: 显示当前在画布中选择的控件的属性, 可以更改控件和事件
• 布局编辑器工具栏 (Layout Editor Toolbar): 将画布的设备格式更改为智能手机、平板电脑或桌面视图, 将窗格展开并折叠到画布的两侧

任何在版面编辑器中的更改都会直接写入到视图文件中。

3 可重用的库（Reusable Libraries）

可以通过以下步骤，来添加一个SAP Fiori库的引用：

• 从命令面板中，执行命令 Fiori: Add Reference to SAP Fiori Reusable Libraries
• 从Project Folder Path下拉列表中，选择当前工作区中存在的SAP Fiori项目
• 选择可重用库源作为工作空间(库必须首先添加到工作空间中)
• 从列表中选择可重用的库或组件

添加重用库的引用时，会更新以下文件: ui5.yaml, ui5-local.yaml, manifest.json

4 小结

本文介绍了BAS中常见的几个功能，包括mock server, Layout Editor 以及如何添加一个Fiori库引用，更多功能可以查看SAP的官方文档。

5. 参考资料

• SAPUI5https://sapui5.hana.ondemand.com/

•  SAP Help Portal for BAShttps://help.sap.com/docs/bas/sap-business-application-studio/what-is-sap-business-application-studio?version=Cloud