乐趣区

关于typescript:通过-FileUploader-的初始化了解-SAP-UI5-应用的-StaticArea-初始化逻辑

jiezi

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.");
            }
退出移动版