SAP UI的Unified Shell发展历史和用法介绍

最新推荐文章于 2025-12-13 17:05:30 发布
最新推荐文章于 2025-12-13 17:05:30 发布
阅读量114 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： ui JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/python_bug262/article/details/133481612
JavaScript 专栏收录该内容
313 篇文章 ¥59.90 ¥99.00
订阅专栏
本文深入探讨SAP UI的Unified Shell，它始于SAP UI5的1.30版本，旨在解决UI组件集成问题。文章介绍了其发展历程，如应用导航、用户设置和个性化功能，以及通知和消息系统。还提供了一个JavaScript示例，展示如何创建带有导航栏和内容区域的基本应用外壳。

Unified Shell是SAP UI的一个组件，它提供了一个统一的外壳框架，用于构建SAP应用程序的用户界面。在本文中，我们将深入探讨Unified Shell的发展历史和用法，并附带相应的JavaScript源代码示例。

  1. Unified Shell的发展历史
    Unified Shell最早出现在SAP UI5框架的1.30版本中，它是为了解决SAP应用程序中不同UI组件的集成问题而引入的。在早期版本中，Unified Shell提供了一个统一的顶级容器，用于承载不同的UI组件，例如导航栏、工具栏和内容区域。

随着时间的推移，Unified Shell不断演进和改进。在后续版本中，它引入了更多功能和特性，例如：

  • 应用程序导航：Unified Shell提供了一个导航栏，用于切换不同的应用程序和视图。它支持添加自定义导航项目，并提供了导航历史记录和书签功能。

  • 用户设置和个性化：Unified Shell允许用户自定义应用程序的外观和行为。用户可以选择不同的主题和布局，并配置个人首选项，例如语言和字体大小。

  • 通知和消息：Unified Shell可以显示通知和消息，以便及时向用户提供重要信息。它支持不同类型的消息，例如成功消息、错误消息和警告消息。

  1. Unified Shell的用法介绍

下面是一个使用Unified Shell的简单示例，该示例展示了如何创建一个基本的应用程序外壳，并添加导航栏和内容区域：


                

                
                
        

    


  


        

                

                  

                  

                  了解本专栏
                  
                  
                    
                  订阅专栏 解锁全文
                   
                

        


    



                



	

		

			

				
					
174. SAP UI5 的 Unified Shell 发展历史和用法介绍

				
			

			

				

					2007 年 ~ 2025 年，深耕 SAP 技术 18 年
				

				

					07-14
					
					353
					
				

			

		

		

			
				
在 SAP UI5 发展历史上，`sap.ui.unified.Shell` 是另一个比较重要的容器控件。

Shell 控件是 SAP UI5 应用里所有控件的根控件(Root control)，可以理解成控件树形层级结构里的根节点，只是后来随着 SAP UI5 的演进，Fiori Launchpad 诞生之后，因为该 Shell 控件的部分功能和 Fiori Launchpad 有重叠，所以慢慢退出了历史舞台。

			
		

	



                

            
              



	

		

			

				
					
SAP UI5 navpopover Factory 的使用方法介绍

				
			

			

				

					2007 年 ~ 2025 年，深耕 SAP 技术 18 年
				

				

					09-17
					
					333
					
				

			

		

		

			
				
因此，SAP 建议仅当开发人员可以控制应用程序的 OData 元数据时，才使用 SmartLink。SmartLink 与所有 SAPUI5 智能控件一样，会检索和分析 OData 服务的元数据和注释。每个 SAPUI5 模块文件必须在顶层包含一个未命名的模块定义：sap.ui.define 调用。此外，为了避免副作用，所有与模块相关的函数都必须在回调函数中定义。对于异步加载，SAP UI5 应用程序模块必须促进 SAPUI5 中与异步模块定义 (AMD) 标准一致的模块定义和处理概念。

			
		

	



              


  
              

                


	

		

			

				
					
统一而不失灵活：SAP UI5 命名空间 sap.ui.unified 的定位、作用与实践

				
			

			

				

					2007 年 ~ 2025 年，深耕 SAP 技术 18 年
				

				

					08-17
					
					3844
					
				

			

		

		

			
				
unified强调“统一”。在官方 API 文档中，这个命名空间被描述为“同时面向移动与桌面场景的统一控件”，它不是某一端的专属库，而是承上启下的公共能力层。换句话说，致力于把跨端通用的复杂交互，沉淀为可复用的控件与类型，供上层应用与其他库调用。

			
		

	





	

		

			

				
					
SAP UI5 sap.ui.unified：跨端通用控件库的定位、家族与实战

				
			

			

				

					2007 年 ~ 2025 年，深耕 SAP 技术 18 年
				

				

					09-03
					
					139
					
				

			

		

		

			
				
当你在构建企业级应用时，会很快遇到一个经典问题：同一个交互模式是否能在桌面与移动端复用？这个命名空间正是为此而生——它提供一组跨设备可复用的基础控件，例如Calendar家族、MenuCurrency等，既可独立使用，也常被sap.m控件在内部组合与复用。官方文档将其概括为面向桌面与移动两端场景的统一控件库，这一点从库的定义页面可以直接看到。为了把这套库讲清楚，下面从定位与关系、核心控件家族、设计与可访问性、性能与加载、演进与替代建议、以及可落地的代码示例等维度展开，尽量把抽象概念落到真实开发细节上。

			
		

	



		

			
		



	

		

			

				
					
SAP UI5 sap.ushell 命名空间全解：从统一外壳到应用服务的完整地图

				
			

			

				

					2007 年 ~ 2025 年，深耕 SAP 技术 18 年
				

				

					09-05
					
					142
					
				

			

		

		

			
				
在 SAP UI5 的世界里，sap.ushell是承载 SAP Fiori Launchpad 的统一外壳（Unified Shell），它提供引导、渲染、导航、个性化、用户信息、通知等一整套运行时服务。应用并不直接实例化这些服务，而是向外壳请求受管实例，以便在同一安全与导航上下文中协同工作。官方文档将这种外壳称为，并给出了推荐的引导方式与库依赖，比如在独立场景使用引导脚本配合一起启动外壳。sap.ushell不是 openUI5 的一部分，而是 SAP UI5 的专有库；

			
		

	





	

		

			

				
					
sap.m.Shell 在 SAP UI5 中的定位、能力与使用场景全解

				
			

			

				

					2007 年 ~ 2025 年，深耕 SAP 技术 18 年
				

				

					08-17
					
					137
					
				

			

		

		

			
				
笔者下面这套教程的配套源代码里，经常使用  这个控件：一套适合 SAP UI5 开发人员循序渐进的学习教程在 SAP UI5 的控件体系里， 是一个用于包裹整套应用的根级容器。它的设计目标很明确：当你的应用不运行在 Fiori Launchpad 这样的宿主外壳中时， 负责提供一个全局的视觉外框与背景层，内部再承载  或  来完成页面级的导航与内容展示。官方文档将它描述为应用的根元素，并提到它会在桌面浏览器上自动做出视觉适配，例如在应用四周加上边框或所谓的 letterbox 限宽效果，以提升可读性与品牌一

			
		

	





	

		

			

				
					
131. SAP UI5 Cross Application Navigation (跨应用间跳转)的本地模拟实现

				
			

			

				

					2007 年 ~ 2025 年，深耕 SAP 技术 18 年
				

				

					09-16
					
					778
					
				

			

		

		

			
				
SAP UI5 Cross Application Navigation 是一种需要在 Fiori Launchpad 环境下，借助 Unified Shell Service 提供的跨应用跳转服务才能正常工作的业务场景。

本文介绍了如何在 SAP UI5 本地运行环境下，通过自行创建 Mock 服务并覆写 SAP UI5 Cross Application Navigation 服务的 getService 方法的实现方式，达到在本地仍然能以模拟运行的方式，进行跨应用间跳转场景的使用目的。

			
		

	





	

		

			

				
					
sapui5 ajax,SAPUI5 sap.ui.table.Table(SAPUI5 sap.ui.table.Table)

				
			

			

				

					weixin_39949673的博客
				

				

					08-06
					
					509
					
				

			

		

		

			
				
SAPUI5 sap.ui.table.Table(SAPUI5 sap.ui.table.Table)有没有办法保存SAPUI5-Table的列设置？ 如果用户注销并再次重新登录，则应保存表属性。 我要做的是保存可以通过用户交互操纵的列设置。属性： showColumnVisibilityMenu:true我正在使用sap.ui.table.Tablevar oTable = new sap.u...

			
		

	





	

		

			

				
					
SAP UI5 应用开发教程的学习目录 - 循序渐进，由浅入深，适合不同水平的 SAP UI5 开发人员

					
热门推荐

				
			

			

				

					2007 年 ~ 2025 年，深耕 SAP 技术 18 年
				

				

					10-05
					
					2万+
					
				

			

		

		

			
				
笔者在业余时间设计了这份 SAP UI5 学习教程，把开发一个完整的 SAP UI5 应用的流程，拆分成若干个步骤，力求每个步骤里，把涉及到的知识点都涵盖到。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者，按照顺序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字讲解，自己动手，以加深理解。
对于已经有一定基础的 SAPUI5 开发人员，可以通过本文的目录，跳过前面一部分比较基础的章节，直接挑选对自己工作项目有关，或者包含某些知识点自己尚未掌握的章节来有针对性地学习。

			
		

	





	

		

			

				
					
pcie笔记

				
			

			

				

					bortonyu的博客
				

				

					12-11
					
					737
					
				

			

		

		

			
				
模式全称描述共用参考时钟Root Complex（RC）和 Endpoint（EP）使用同一颗外部 RefclkSRNSRC 和 EP 使用独立时钟源，但 不允许展频（SSC）SRISRC 和 EP 使用独立时钟源，允许各自带有 SSC 抖动txt复制编辑FS 表示信号的总摆幅，用于判断是否满足发送器输出的最大电压范围（如 800mV full swing）。Full Swing 模式下：FS ∈ [24, 63]Reduced Swing 模式下：FS ∈ [12, 63]

			
		

	





	

		

			

				
					
Qt C++ 多线程网络请求落地指南：解决卡顿与数据同步痛点

				
			

			

				

					2202_75382767的博客
				

				

					12-08
					
					943
					
				

			

		

		

			
				
本文介绍了Qt多线程网络请求的实现方案，解决主线程卡顿和数据同步问题。核心方案是将网络请求移至子线程处理，通过信号槽与主线程通信。文章详细剖析了卡顿根源，并提供了基础实现代码，包括封装网络请求工作类和使用QThread管理子线程。该方案遵循Qt线程安全原则，确保UI流畅性和数据正确性。

			
		

	





	

		

			

				
					
华为云 DevUI初体验：如何快速入门项目搭建

				
			

			

				

					康宝的博客
				

				

					12-10
					
					516
					
				

			

		

		

			
				
本文详细介绍了基于Angular 18和华为云DevUI的企业级Web应用开发环境搭建流程。主要内容包括：Node.js 20+环境准备、Angular CLI 18安装、项目初始化配置（选择SCSS样式）、DevUI组件库及图标库的安装。文章重点说明了如何在项目中正确配置DevUI样式和模块，并演示了基础组件的使用。通过这套技术方案，开发者可以快速构建具备丰富UI组件支持的企业级应用，提高开发效率。

			
		

	





	

		

			

				
					
【Android FrameWork】第二十八天：Activity 的 UI 绘制全过程

				
			

			

				

					u012739527的博客
				

				

					12-11
					
					838
					
				

			

		

		

			
				
Activity → PhoneWindow → DecorView → ContentParent → 开发者布局（如 R.layout.activity_main），形成 “Activity - 窗口 - 根视图 - 自定义布局” 的四层 UI 载体结构，为后续绘制奠定基础。载体初始化：Activity 创建时初始化 PhoneWindow，PhoneWindow 创建 DecorView 并确定 ContentParent。布局加载。

			
		

	





	

		

			

				
					
字节工程营总结

				
			

			

				

					2301_78856868的博客
				

				

					12-10
					
					1682
					
				

			

		

		

			
				
需求：实现一个截屏工具我的目标：确保基本功能的基础上，首先优化工具的性能（因为本项目是以C++开发、如果不以性能为目标的话个人感觉用 Electron（Web+Node.js）更适合），提升工具的跨平台能力、多语言支持，优化代码的可维护性和可拓展性。

			
		

	





	

		

			

				
					
Flutter 架构演进：从单体到模块化，构建可扩展的大型应用体系

				
			

			

				

					2501_93814044的博客
				

				

					12-10
					
					838
					
				

			

		

		

			
				
Flutter 架构演进：从单体到模块化，构建可扩展的大型应用体系

			
		

	





	

		

			

				
					
Flutter 全屏页面路由完全指南：从原理到实战

				
			

			

				

					tangweiguo03051987的博客
				

				

					12-11
					
					427
					
				

			

		

		

			
				
通过以上方案，你可以灵活地在 Flutter 应用中实现全屏页面，并提供良好的用户体验。在实际开发中，我们经常需要某些页面（如视频播放器、游戏、图片查看器等）以全屏模式显示。本文将详细介绍在 Flutter 中实现全屏页面的各种方法、最佳实践和常见问题解决方案。全屏的本质是隐藏状态栏、导航栏等系统 UI 元素，让应用内容占据整个屏幕。SystemUiMode.immersiveSticky 全屏模式，可临时显示系统 UI 图片查看、阅读器。方案一：基于页面生命周期的实现。问题3：多个全屏页面连续跳转。

			
		

	





	

		

			

				
					
面试复习题--jetpack 的理解

				
			

			

				

					hqiangtai的博客
				

				

					12-12
					
					671
					
				

			

		

		

			
				
Android 架构稳定性判定核心看「崩溃 / ANR / 性能」量化指标 + 场景适配能力；架构合理性判定核心看「分层 / 拆分 / 依赖」设计原则 + 业务适配度。判定时需结合移动端特性，避免照搬服务端架构的评判标准，重点关注资源限制、系统适配、生命周期安全三大核心点。如果需要，我可以基于此体系整理一份「Android 架构稳定性 & 合理性评估清单（可直接填写）」，覆盖所有检查项和评分标准，方便项目自查或评审使用。jetpack 库的说明及优缺点。

			
		

	





	

		

			

				
					
material3和xml的UI会相差很大么？

				
			

			

				

					hnlgzb的专栏
				

				

					12-11
					
					576
					
				

			

		

		

			
				
既然你在学 Kotlin + Compose，千万不要试图把 M3 改回 M2 的样子，那是在“逆天而行”。XML 时代：设计师给你一张图，你要写大量 XML 代码去还原圆角、阴影。Compose/M3 时代：直接使用标准组件。比如 Button，在 M3 里默认就是圆的，不需要你写 shape = RoundedCornerShape(...)。比如 Scaffold，它自动帮你处理好了 M3 的背景色和布局结构。M3 的 UI 看起来更宽大、更圆润、颜色更淡雅。

			
		

	





	

		

			

				
					
【Quest开发】用unity UI快速实现交互

					
最新发布

				
			

			

				

					m0_73117967的博客
				

				

					12-13
					
					201
					
				

			

		

		

			
				
快速配置quest里的UI交互

			
		

	





	

		

			

				
					
sapui5读入excel

				
			

			

				

					09-04
				

			

		

		

			
				
SAPUI5是一种用于构建现代Web应用程序的UI开发框架，它提供了许多功能丰富的控件和工具。要在SAPUI5中读取Excel文件，可以使用JavaScript库，如ExcelJS或xlsx。

首先，需要引入所选JavaScript库的相关资源文件。然后，使用相关API将Excel文件加载到前端应用程序中。例如，使用ExcelJS库，可以通过以下步骤读取Excel文件数据：

1. 创建一个FileReader对象，用于读取选择的Excel文件。
2. 注册一个事件监听器，当文件加载完成时触发。
3. 使用ExcelJS的Workbook类将文件数据加载为Workbook对象。
4. 使用Workbook对象的工作表方法获取所需的工作表。
5. 使用工作表对象的数据方法获取数据。
6. 对数据进行处理和操作。

以下是一个简单的示例，说明如何在SAPUI5中使用ExcelJS读取Excel文件的数据：

```
var oFileUploader = new sap.ui.unified.FileUploader({
    name: "fileUploader",
    uploadOnChange: false,
    change: function(oEvent) {
        var oFile = oEvent.getParameter("files")[0];
        var oReader = new FileReader();

        oReader.onload = function(e) {
            var arrayBuffer = e.target.result;
            var workbook = new ExcelJS.Workbook();
            
            workbook.xlsx.load(arrayBuffer).then(function() {
                var worksheet = workbook.getWorksheet(1); // 获取第一个工作表
                // 处理数据
                worksheet.eachRow(function(row, rowNumber) {
                    // 迭代每一行数据
                    row.eachCell(function(cell) {
                        // 处理每个单元格的数据
                    });
                });
            });
        };

        oReader.readAsArrayBuffer(oFile);
    }
});

// 将oFileUploader添加到SAPUI5应用程序中的相应容器中，以便用户可以选择Excel文件进行上传
...
```

这只是一个基本示例，实际操作可能会根据具体需求进行调整。使用ExcelJS或其他相关库，您可以根据自己的应用程序需求读取和处理Excel文件中的数据。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值