其他分享
首页 > 其他分享> > 通过 FileUploader 的初始化,了解 SAP UI5 应用的 StaticArea 初始化逻辑

通过 FileUploader 的初始化,了解 SAP UI5 应用的 StaticArea 初始化逻辑

作者:互联网

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... 的按钮。

并且实现了下列两个接口:

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

标签:初始化,sap,FileUploader,core,StaticArea,library,ui,UI5,SAP
来源: https://www.cnblogs.com/sap-jerry/p/16535067.html