SAP UI5 应用开发教程之四十三 - SAP UI5 自带的

本教程至此，我们已经学习了如下的 SAP UI5 开发辅助工具：

1. Chrome 开发者工具自带的 Elements 和 Sources 面板：

• SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类

• SAP UI5 应用开发教程之三十七 - 使用 Chrome 开发者工具 Console 面板进行元素审查

• SAP UI5 应用开发教程之三十八 - 使用 Chrome 开发者工具查看程序执行出错时的上下文信息

2. Chrome 扩展 UI5 Inspector：

SAP UI5 应用开发教程之四十一 - Chrome 扩展 UI5 Inspector 的离线安装和使用方法

3. SAP UI5 自带的 Diagnostics 诊断工具：

SAP UI5 应用开发教程之四十二 - SAP UI5 自带的 Diagnostics 诊断工具使用方法介绍

本文介绍另一种同样是 SAP UI5 开箱即用的辅助开发工具 Support Assistant.

本步骤的所有源代码，在这个 Github 地址可以下载：

https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/43

Support Assistant 的工作原理有点像 ABAP 的一款代码检查工具 ATC, 全称是 ABAP Test Cockpit.

按下快捷键 Ctrl + Shift + Alt + P 之后，在弹出框里点击 Activate Support Assistant 即可打开这个工具的面板。

Support Assistant 打开的初始界面是一个规则列表(Rules list)，包含了 SAP UI5 自带的代码规范检查标准，在我使用的当前版本里包含 88 条规则，分为 sap.m, sap.ui.layout 和 sap.ui.core 三个类别。

选中某个 rule，能看到该 Rule 的属性(下图图例1)，具体实现( Check Function，就是该规则具体的执行逻辑，当然采用的也是 JavaScript 实现，下图图例2)，以及该条规则的源代码(实际就是前两个面板 properties 和 Check function 的合集)。

选中想要扫描的规则后，点击上图图例4 的 Analyze 按钮执行即可看到结果。

如果大家将本步骤的代码下载到本地，使用 npm install 命令行然后执行 ui5 serve 之后，激活 Support Assistant 之后点击 Analyze，会扫描出如下五条结果：

其中 sap.m 包含 1 条等级为 Medium，2 条等级为 Low 的扫描结果，sap.ui.core 包含 Medium 和 Low 等级的结果各一条。

我们先查看第一条优先级为 Medium 的扫描结果。

双击下图图例1 所示的 Control id，就能在控件树里(下图图例2)自动高亮出当前页面里具体是哪一个 SAP UI5 控件(下图图例3)引起的该条扫描错误。

Details(图例4) 是该条规则扫描的结果：

Input field (__input0) is missing a label.

意思是这个 Input 控件缺少一个匹配的标签(label).

Resolution(图例5)即解决方案：

Define a sap.m.Label for the input field in the xml view and set the labelFor property to this input field Id.

意思是建议我们在 XML 视图里再定义一个 sap.m.Label 控件，同时将 labelFor 属性指向这个扫描出问题的 Input 控件。

图例5 正下方的超链接 SAP Fiori Design Guidelines: Input field，解释了这条规则的设计初衷：总是应当为 Input 控件维护一个有意义的 Label 以提高用户体验：

我们来看看这条规则的检查逻辑。其实现源代码分为三大部分：

1. 使用 getElementsByClassName 获得当前应用所有的 sap.m.Button 控件实例的 id，存储在数组 aInputIds 内。

2. 采用同样的 API 获得所有的 sap.m.Label 列表，然后逐一遍历，找到每个 Label 实例对应的 Input 控件 id 后，就将该 id 从步骤1 获得的数组 aInputIds 内移除。

3. sap.m.Label 列表遍历完毕之后，数组 aInputIds 剩余的元素就是那些没有 Label 维护的 Input 控件。基于这些检索到的 id 报出检查结果。

明白了这些规则检查逻辑之后，对应的修复也就不难了。只需在 HelloPanel.view.xml 里为 Input 控件添加一个 id 属性 JerryInput，然后新定义一个 Label 控件，将其 labelFor 属性指向 Input 控件的 id 属性即可。

修复之后，重新执行 Support Asistant 的扫描，此时检测出的问题个数，已经从 5 降低到 4，其中 Input field (__input0) is missing a label 的问题已经消失，说明我们的修复已经生效了。

只是 Label 添加之后，其文本显示同 Input 的值存在差异，如下图所示。我们会在本教程后续的步骤中介绍如何分析并修复此类显示问题。