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.");
			}
```

透過 FileUploader 的初始化，瞭解 SAP UI5 應用的 StaticArea 初始化邏輯

相關文章