Through the initialization of FileUploader, understand the StaticArea initialization logic of SAP UI5 application

Dependencies implemented by 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
) {

You can see that jQuery is also used.

The SAP UI5 framework automatically generates an input element and a button containing browse... .

And implements the following two interfaces:

• sap.ui.core.IFormContent
• sap.ui.unified.IProcessableBlobs

The default value of sendXHR is false, and the upload data is submitted using form submit. If true, submit using XHR request. The data submitted by Form Submit has been tested by Jerry, and the content of the uploaded file cannot be observed in the Chrome developer tool network.

After XMLTemplateProcessor.js detects that the FileUploader control is defined in the XML view, it instantiates it and calls the init method:

Create a TextField:

For selecting local files:

 this.oFilePath = library.FileUploaderHelper.createTextField(this.getId() + "-fu_input").addEventDelegate({
            onAfterRendering: function () {
                if (that.getWidth()) {
                    that._resizeDomElements();
                }
            }
        });

The type of this TextField is sap.m.Text :

Then create the upload button:

 this.oBrowse = library.FileUploaderHelper.createButton(this.getId() + "-fu_button");

Then set the current FileUploader instance to be created, that is, the control instance pointed to by this, as the parent of the TextField and Button instances:

 this.oFilePath.setParent(this);
this.oBrowse.setParent(this);

Here is a demonstration of how to use the code to detect whether the sap.m library is used, just check the metadata of the button control, that is, whether the result returned by the getMetadata method is sap.m.Button .

 // check if sap.m library is used
this.bMobileLib = this.oBrowse.getMetadata().getName() == "sap.m.Button";

The applySettings method of SAP UI5 will sequentially set the settings specified for the controls in the XML view one by one:

These attributes in the above picture are the attributes I defined in the XML view, as shown in the following figure:

We can often observe this method call in the SAP UI5 source code: sap.ui.getCore().getStaticAreaRef() :

This is an element in the HTML native code finally rendered by the SAP UI5 application, the id is: sap-ui-static

Represented by the constant STATIC_UIAREA_ID. This static area is used to hide elements such as Popups, Shadow, Blocklayer, etc.

The initialization of this static area adopts the lazy loading method of lazy loading: the initialization operation will only be performed when it is really needed.

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