通过 FileUploader 的初始化，了解 SAP UI5 应用的 StaticArea 初始化逻辑

SAP UI5 FileUploader 实现的依赖：

sap.ui.define([
	'sap/ui/core/Control',
	'./library',
	'sap/ui/core/LabelEnablement',
	'sap/ui/core/InvisibleText',
	'sap/ui/core/library',
	'sap/ui/Device',
	'./FileUploaderRenderer',
	'sap/ui/dom/containsOrEquals',
	'sap/ui/events/KeyCodes',
	'sap/base/Log',
	'sap/base/security/encodeXML',
	"sap/ui/thirdparty/jquery",
	// jQuery Plugin "addAriaDescribedBy"
	'sap/ui/dom/jquery/Aria'
], function(
	Control,
	library,
	LabelEnablement,
	InvisibleText,
	coreLibrary,
	Device,
	FileUploaderRenderer,
	containsOrEquals,
	KeyCodes,
	Log,
	encodeXML,
	jQuery
) {
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

可以看到还使用了 jQuery。

SAP UI5 框架自动生成一个 input 元素和一个包含了 browse… 的按钮。

并且实现了下列两个接口：

• sap.ui.core.IFormContent
• sap.ui.unified.IProcessableBlobs

sendXHR 的默认值为 false, 此时使用 form submit 提交上传数据。如果是 true，使用 XHR 请求提交。Form Submit 提交的数据，经 Jerry 测试，无法在 Chrome 开发者工具 network 里观察到上传的文件内容。

XMLTemplateProcessor.js 检测到 XML 视图里定义了 FileUploader 控件之后，对其进行实例化，并且调用 init 方法：

创建一个 TextField：

用于选择本地文件：

this.oFilePath = library.FileUploaderHelper.createTextField(this.getId() + "-fu_input").addEventDelegate({
			onAfterRendering: function () {
				if (that.getWidth()) {
					that._resizeDomElements();
				}
			}
		});
1
2
3
4
5
6
7

这个 TextField 的类型是 sap.m.Text:

然后再创建 upload button：

this.oBrowse = library.FileUploaderHelper.createButton(this.getId() + "-fu_button");
1

接着把当前待创建的 FileUploader 实例，即 this 指向的控件实例，设置成 TextField 和 Button 实例的 parent：

this.oFilePath.setParent(this);
this.oBrowse.setParent(this);
1
2

这里演示了如何用代码检测 sap.m 库是否被使用，只需要检查 button 控件的元数据，即 getMetadata 方法返回的结果是不是 sap.m.Button 即可。

// check if sap.m library is used
this.bMobileLib = this.oBrowse.getMetadata().getName() == "sap.m.Button";
1
2

SAP UI5 的 applySettings 方法，会依次将 XML 视图里对控件指定的设置，一个一个进行设置：

上图这些属性，就是我在 XML 视图里定义的属性，如下图所示：

我们在 SAP UI5 源代码里经常能观察到这个方法调用：sap.ui.getCore().getStaticAreaRef()：

这是 SAP UI5 应用最后渲染出来的 HTML 原生代码里的一个元素，id 为：sap-ui-static

通过常量 STATIC_UIAREA_ID 表示。这个 static area 用于隐藏形如 Popups, Shadow, Blocklayer 等元素。

这个 static area 的初始化采取 Lazy loading 的惰性加载方式：只有真正需要时才会执行初始化操作。

var oStaticArea = document.getElementById(STATIC_UIAREA_ID),
			oConfig, oFirstFocusElement;

		if (!oStaticArea) {

			oStaticArea = document.createElement("div");
			oFirstFocusElement = document.createElement("span");
			oConfig = this.getConfiguration();

			if (!this.bDomReady) {
				throw new Error("DOM is not ready yet. Static UIArea cannot be created.");
			}
1
2
3
4
5
6
7
8
9
10
11
12