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