SAP UI5 FileUploader 实现的依赖：

![](https://img-blog.csdnimg.cn/img_convert/8e7920662a393e28dcb34d986b2c3dfb.png)

```javascript
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
) {
```

可以看到还使用了 jQuery。

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

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

- sap.ui.core.IFormContent
- sap.ui.unified.IProcessableBlobs

sendXHR 的默认值为 false, 此时使用 form submit 提交上传数据。如果是 true，使用 XHR 请求提交。Form Submit 提交的数据，经 Jerry 测试，无法在 Chrome 开发者工具 network 里观察到上传的文件内容。
![](https://img-blog.csdnimg.cn/img_convert/28f2a8a06eefc11108b2f693802deb66.png)

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

![](https://img-blog.csdnimg.cn/img_convert/295791fde3ad0d0b2ef2de1935e108fc.png)

创建一个 TextField：
![](https://img-blog.csdnimg.cn/img_convert/bc129f9e2ca1b75b077c83774a85ab58.png)

用于选择本地文件：
```javascript
this.oFilePath = library.FileUploaderHelper.createTextField(this.getId() + "-fu_input").addEventDelegate({
			onAfterRendering: function () {
				if (that.getWidth()) {
					that._resizeDomElements();
				}
			}
		});
```

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

![](https://img-blog.csdnimg.cn/img_convert/f6c2bbfa51cbfd7039395f64ae4a9a3e.png)

然后再创建 upload button：
```javascript
this.oBrowse = library.FileUploaderHelper.createButton(this.getId() + "-fu_button");
```

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

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

```javascript
// check if sap.m library is used
this.bMobileLib = this.oBrowse.getMetadata().getName() == "sap.m.Button";
```
SAP UI5 的 applySettings 方法，会依次将 XML 视图里对控件指定的设置，一个一个进行设置：
![](https://img-blog.csdnimg.cn/img_convert/6c4907651254c7a540ba0609b3262c57.png)

上图这些属性，就是我在 XML 视图里定义的属性，如下图所示：
![](https://img-blog.csdnimg.cn/img_convert/9d1ce7069c64879e52a4718add4c808f.png)

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

![](https://img-blog.csdnimg.cn/img_convert/a2569e615a310a96f5fb0aec65db9bce.png)

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

![](https://img-blog.csdnimg.cn/img_convert/27c0a117331b06e72e35f8c1976f7998.png)

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

这个 static area 的初始化采取 Lazy loading 的惰性加载方式：只有真正需要时才会执行初始化操作。
```javascript
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.");
			}
```

ITPub博客

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

最新文章