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的官方文档。