Understand the staticarea initialization logic of SAP ui5 application through the initialization of fileuploader

SAP UI5 FileUploader Dependence on realization ：

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
) {
    

It can be seen that jQuery.

SAP UI5 The framework automatically generates a input The element and one contain browse… The button .

And the following two interfaces are implemented ：

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

sendXHR The default value is false, At this time to use form submit Submit upload data . If it is true, Use XHR Request Submission .Form Submit Data submitted , the Jerry test , Cannot be in Chrome Developer tools network The uploaded file content is observed in .

XMLTemplateProcessor.js detected XML Defined in the view FileUploader Control , Instantiate it , And call init Method ：

Create a TextField：

Used to select local files ：

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

This TextField The type is sap.m.Text:

And then create upload button：

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

Then put the current to be created FileUploader example , namely this The control instance pointed to , Set to TextField and Button Example of parent：

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

Here is a demonstration of how to detect with code sap.m Whether the library is used , Just check button Control metadata , namely getMetadata The result returned by the method is sap.m.Button that will do .

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

SAP UI5 Of applySettings Method , Will in turn XML The settings specified for the control in the view , Set one by one ：

These attributes in the above figure , It's me. XML Properties defined in the view , As shown in the figure below ：

We are SAP UI5 This method call can often be observed in the source code ：sap.ui.getCore().getStaticAreaRef()：

This is a SAP UI5 Apply the last rendered HTML An element in native code ,id by ：sap-ui-static

By constant STATIC_UIAREA_ID Express . This static area Used to hide shapes such as Popups, Shadow, Blocklayer Equal elements .

This static area The initialization of takes Lazy loading Inert loading method ： Initialization 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.");
			}