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 ) {
可以看到还使用了 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(); } } });
这个 TextField 的类型是 sap.m.Text
:
然后再创建 upload button:
this.oBrowse = library.FileUploaderHelper.createButton(this.getId() + "-fu_button");
接着把当前待创建的 FileUploader 实例,即 this 指向的控件实例,设置成 TextField 和 Button 实例的 parent:
this.oFilePath.setParent(this); this.oBrowse.setParent(this);
这里演示了如何用代码检测 sap.m
库是否被使用,只需要检查 button 控件的元数据,即 getMetadata 方法返回的结果是不是 sap.m.Button
即可。
// check if sap.m library is used this.bMobileLib = this.oBrowse.getMetadata().getName() == "sap.m.Button";
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."); }