通过 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… 的按钮。

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

  • 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.");
      }
相关文章
|
16天前
|
Linux C++ Windows
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
【Azure 应用服务】Azure App Service(Windows)环境中如何让.NET应用调用SAP NetWeaver RFC函数
|
3天前
|
C# Android开发 开发者
Uno Platform 高级定制秘籍:深度解析与实践样式和模板应用,助你打造统一且高效的跨平台UI设计
【9月更文挑战第7天】Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 创建跨平台 UI 应用,覆盖 Windows、iOS、Android、macOS 和 WebAssembly。本文介绍 Uno Platform 中样式和模板的应用,助力开发者提升界面一致性与开发效率。样式定义控件外观,如颜色和字体;模板则详细定制控件布局。通过 XAML 定义样式和模板,并可在资源字典中全局应用或嵌套扩展。合理利用样式和模板能简化代码、保持设计一致性和提高维护性,帮助开发者构建美观高效的跨平台应用。
10 1
|
11天前
|
JavaScript 前端开发 安全
[译] 在 Vue 组件中分离 UI 和业务逻辑。
[译] 在 Vue 组件中分离 UI 和业务逻辑。
|
4月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
9天前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
23 0
|
9天前
|
C# 开发者 设计模式
WPF开发者必读:命令模式应用秘籍,轻松简化UI与业务逻辑交互,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,命令模式是简化UI与业务逻辑交互的关键技术,通过将请求封装为对象,实现UI操作与业务逻辑分离,便于代码维护与扩展。本文介绍命令模式的概念及实现方法,包括使用`ICommand`接口、`RelayCommand`类及自定义命令等方式,并提供示例代码展示如何在项目中应用命令模式。
17 0
|
9天前
|
开发者 Android开发 UED
打造流畅应用:深入探索如何在Xamarin项目中选择并实现最佳UI/UX设计的实践指南
【8月更文挑战第31天】在数字化时代,UI/UX设计成为应用成功的关键。Xamarin以高效开发和强大兼容性著称,其设计理念“一次编写,处处运行”需充分适应多平台特性,提供一致体验。选择Xamarin.Forms或结合Xamarin.Native可实现跨平台UI设计;遵循各平台设计指南,保持布局一致性和简洁性;通过用户测试不断优化。最终,结合技术和用户需求,打造美观实用的应用,脱颖而出。
20 0
|
27天前
数字化核心构建问题之SAP为应用软件扎根客户打基础如何解决
数字化核心构建问题之SAP为应用软件扎根客户打基础如何解决
10 0
|
2月前
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
Element UI 【表格合计】el-table 实战范例 -- 添加单位,自定义计算逻辑
108 0
|
4月前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
115 0
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
下一篇
DDNS