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

置顶 已于 2025-05-16 00:16:00 修改
阅读量2.4w 收藏 191
点赞数 33
分类专栏： 一套适合 SAP UI5 开发人员循序渐进的学习教程 文章标签： sap javascript ui5 SAP UI5 Fiori
于 2021-10-05 21:11:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i042416/article/details/120618353
版权

一套适合 SAP UI5 初学者循序渐进的学习教程

本专栏计划的文章数在 400 篇左右，到 2025年5月16日为止，目前已经更新了 253 篇，专栏完成度为 63.3%，完成度已经超过一半了.

本套教程是笔者从 2013 年接触 SAP UI5 至今的实战开发经验的提炼和总结，内容设计由浅入深，每篇文章平均写作时间为4小时，总共花费的写作时间已经超过800小时了。

教程的每篇文章，都同时包含理论知识讲解和实际开发例子。每个例子的源代码都由笔者亲自编写，并且保证能够成功运行。

每位学习者在学习过程中遇到问题，都可以在文末评论区留言，笔者会确保 100% 回复。

笔者会根据学习者的反馈来增添原本不在自己写作计划中的内容。也就是说，大家在学习 SAP UI5 过程中遇到的疑问，其知识点很可能会出现在这篇教程里进行深入阐述。

大家在学习过程中对本套教程有任何疑问和写作意见，可以在教程文章下评论，或者在这个《一套适合 SAP UI5 开发人员循序渐进的学习教程》读者意见反馈和下一步写作计划表里评论。我在写作过程中，会根据大家的反馈，对教程的内容进行补充和修订。

教程目录

说明

笔者曾经在 SAP 官方英文社区和 汪子熙 微信公众号上发表过多篇关于 SAP UI5 工作原理和源码解析的文章。

在笔者这篇文章 对 SAP UI5 一无所知的新手，从哪些材料开始学习比较好？ 曾经提到，笔者也是从 SAP UI5 菜鸟一路走过来，深知只有 ABAP 开发背景的开发者，向 SAP UI5 开发领域转型的不易，因此我在业余时间设计了这份适合 SAP UI5 不同水平的学习者的学习教程，把开发一个完整的 SAP UI5 应用的流程，拆分成若干个步骤，力求每个步骤里，把涉及到的知识点都涵盖到。

这些知识点可能不像我的 UI5 源码分析系列文章那么深入，但力求做到深入浅出，重要的知识点都配上详细的截图来辅助文字的介绍，便于教程学习者的理解。

本教程每一个步骤的源代码，都存放在我的 Github 上，分别用文件夹 01，02，03 等等来标识，例如步骤 1 的源代码在这里。

每一个步骤均是前一步骤的基础上，添加了若干新特性。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者，按照顺序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字讲解，自己动手，以加深理解。

对于已经有一定基础的 SAP UI5 开发人员，可以通过本文的目录，跳过前面一部分比较基础的章节，直接挑选对自己工作项目有关，或者包含某些知识点自己尚未掌握的章节来有针对性地学习。

大家如果对教程的每个步骤有任何疑问，欢迎在教程对应的步骤文章里给我评论，进行留言。我虽然平时开发工作很忙，但是保证会定期查看大家给我留下的评论，对于里面涉及到的技术疑问，我一定会抽时间做出解答。
t

问题解答

本区域列出了学习 SAP UI5 的朋友，通过知乎咨询和我的知识星球等各种渠道向我提出的关于 SAP UI5 问题的解答和相关讨论。

大家在学习这套课程过程中遇到任何关于 SAP UI5 的问题，都可以在对应教程文章末尾评论区留言，我每天会抽时间阅读留言评论区，并更新文章来进行解答。

如果提出的问题很典型或者引出了新的重要知识点，我也会专门新写一篇文章来阐述。

使用技巧和故障排查指南

本区域列出了笔者进行 SAP UI5 开发过程中日积月累搜集到的一些开发小技巧和故障排查指南。

SAP UI5 教程大全之 01 面向初学者的 SAPUI5 简介
iCloudEnd的博客
04-25 1483
市场上有一些非常好的 HTML5 UI 框架，例如：Twitter Bootstrap、Foundation、Sencha Touch、KendoUI 等等。SAP 推出了 SAPUI5，正式名称为“HTML5 的 UI 开发工具包”。 SAPUI5 使用模型视图控制器 (MVC) 概念将信息的表示与用户交互分开。 模型、视图和控制器被分配了以下角色： 视图负责定义和呈现 UI。 模型管理应用程序数据。 控制器通过修改视图和模型对视图事件和用户交互做出反应。 在 Eclipse 上安装 SAPUI5 S
SAP-ABAP：SAP物料主数据管理精要指南
baidu_35680696的博客
03-17 1060
fill:#333;color:#333;color:#333;fill:none;物料主数据基础属性业务视图分类体系物料编码/类型/描述采购/生产/销售视图特性/类/检索优化。
SAP UI5学习笔记
weixin_39289390的博客
11-26 766
meta> 确定字符集，utf-8支持所有文字和字符。DOCTYPE> H5都必须以此开头；
SAPUI5-基础知识-概念&学习路径
总钻风来巡山
12-22 925
SAPUI5 基础知识
19. SAP UI5 应用开发教程之十九 - SAP UI5 数据类型和复杂的数据绑定
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
01-26 2508
通过本教程前面的步骤SAP UI5 初学者教程之十七 - 聚合绑定在 UI5 复合控件中的使用的介绍，我们已经学会了如何在 SAP UI5 里显示列表，如下图所示： 本步骤我们给该列表添加更多的业务数据，比如每张发票的金额。 按照本文的步骤完成的 SAP UI5 应用，列表如下图所示： 可以看到，同前一个步骤相比，现在 Invoices 表格里，每张发票的金额和货币单位已经显示出来了。 为了实现这个效果，本步骤的源代码位于我的 Github 这个文件夹下面： https://github.com/wan
SAPUI5 学习笔记（1）
路一的博客
05-29 458
创建一个APP的步骤及相关名词： app folder - 就是我们看到的WebContent; root HTML file - 就是index.html, 被创建在app folder中；一个HTML文件通常包含2部分：head和body, head告诉浏览器怎么处理这个文件，body描述页面是什么样子的; bootstrap - SAPUI5的加载和初始化； SAPUI5 contr
Jerry的UI5框架代码自学教程
weixin_30699955的博客
01-06 130
SAP UI5对View元素基于jQuery的操作方式，使得其学习曲线相对Angular/React来说比较平缓，至少对于我个人而言是这样。对于已经有jQuery经验的前端开发人员来说很容易上手。 使用UI5开发SAP UI应用，在开发过程中往往会遇到各种各样的问题，比如最后出来的UI效果和你预料的不一样，或者console里面显示一些奇奇怪怪的error message. 对于后者来...
126. SAP UI5 进阶 - JSON 模型字段里的值，显示在最终 UI5 界面上的奥秘分析
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
09-08 941
从我们在 XML 视图里书写了这行代码 ，到最后打开浏览器看到了 Input 元素显示出 `Hello World`，背后经历了这些事情： (1) XML 视图的 `App.view.xml` 文件被加载，解析，Input 的 value 属性的绑定路径被解析。 (2) App.controller.js 内的 JSONModel.setModel 方法调用，根据前一步骤解析出的绑定路径...
SAP OData 开发教程 - 从入门到提高(包含 SEGW, RAP 和 CDP)
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
06-26 9023
在 SAP 产品里，存在多种 OData 服务的开发方式，其中最典型的三类，SEGW, RAP(Restful ABAP Programming) 和 CDP(Cloud Application Program)，就是笔者在本教程里会为大家分享和讲解的内容。同笔者的另一个 SAP UI5 教程《SAP UI5 应用开发教程的学习目录 - 循序渐进，由浅入深，适合不同水平的 SAP UI5 开发人员》一样，本教程笔者计划通过 300 篇以上的文章篇幅，分别介绍这三类 SAP 主流的 OData 服务开发技术。
视频教程-SAP Fiori开发视频教程--由浅入深学习Fiori开发-其他
weixin_30267211的博客
05-28 1367
SAP Fiori开发视频教程--由浅入深学习Fiori开发 ABAP/Fi...
Fiori Elements 从入门到精通开发教程的文章目录
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
07-09 2244
Fiori Elements 开发技术相对 SAP 其他历史悠久，发展成熟的开发技术来说，是一个新事物。正因如此，迄今为止国内深入讲解 Fiori Elements 应用的中文材料几乎没有。
SAPUI5 详细讲解
01-21
SAPUI5 详细讲解
SAP UI5 OData开发
08-29
SAP UI5作为前端开发框架，使用SAP Gataway开发后端OData Service
SAP UI5 文档
03-13
SAP UI5 文档SAP UI5 文档SAP UI5 文档SAP UI5 文档SAP UI5 文档
SAPUI5基础知识1 - 概览，库，支持工具，自学教程
SAP领域技术博客
05-06 2464
本文介绍了SAPUI5的基础概念，常用库，调试工具和支持工具，同时给出了自学SAPUI5的demo教程的访问方式。
作为一名 ABAP 资深顾问，下一步可以选择哪一门 SAP 技术作为主攻方向？
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
06-14 857
这是 Jerry 2021 年的第 41 篇文章，也是汪子熙公众号总共第 318 篇原创文章。 一位朋友向我发起了知乎咨询： 关于这个话题，Jerry 曾经写过一篇文章：ABAP开发人员未来应该学些什么。 其英文版发布在 SAP 社区博客上并被管理员置顶，获得了超过一万阅读量。 当时文章里我建议的四个学习方向是： (1) 熟悉一门函数式编程语言 (2) 了解 Spring (3) 熟悉 JavaScript (4) 了解一种 NoSQL 数据库 后来我补充了第五点，熟悉 SAP Cloud Platf
SAPUI5基础知识2 - 手动创建一个SAPUI5的项目
SAP领域技术博客
05-20 1895
本文通过一个hello world应用程序，展示了如何手动创建出一个SAPUI5的项目，并如何运行SAPUI5应用程序。
sap UI5开始教程——环境配置和helloworld
qq_54432686的博客
10-19 626
现在，启动网络服务器，提供“webapp”文件夹的源代码，然后在浏览器中打开 index.html 文件，或者直接进入网址：http://localhost:8080/index.html。我们加载来两个 UI 控件 —— 一个按钮和一个消息 toast ——并将按钮放在具有内容 ID 的元素中。这样，我们可以轻松地引用将在此步骤中创建的其他文件。为了方便起见，我们使用 OpenUI5 的内容交付网络(CND)路径。标签，我们使用典型的引导参数加载和初始化 SAPUI5。
SAPUI5学习第四天-----（06）MVC概念差不多了。下一步：Component Configuration！
'尤其是十月的风'的博客
05-31 472
Component Configuration 在我们介绍了Model-View-Controller(MVC)概念的所有三个部分之后，我们现在来讨论SAPUI5的另一个重要的结构方面。 在这一步中，我们将把所有UI资源封装在一个独立于index.html文件的组件中。Component 是SAPUI5应用程序中使用的独立和可重用的部件。现在，每当我们访问资源时，我们将相对于组件(而不是相对于index.html)执行此操作。这种架构上的改变使我们的应用程序可以在比静态的index.html页面更灵活的环境
sapui5
最新发布
03-21
### SAPUI5 开发指南与最佳实践 #### 使用 abap2UI5 进行开发 abap2UI5 是一种用于在 ABAP 环境中开发 SAP UI5 应用程序的方法。这种方法允许开发者完全基于 ABAP 技术栈构建前端应用，而无需依赖外部工具链或框架。通过结合 `abap2UI5` 和其配套项目（如 `abap2UI5-samples`），可以更高效地掌握实际操作技能[^1]。 为了更好地理解如何利用此方法进行开发，建议参考官方文档中的具体案例分析以及逐步说明。这些资料通常会详细介绍从基础架构搭建到复杂业务逻辑实现的过程，并附带清晰的代码片段供模仿学习。 #### 配置合适的开发环境 无论采用哪种技术路径，在正式着手编写任何一行代码前都需要先准备好相应的开发平台。对于希望快速上手的新手来说，推荐使用 **SAP Web IDE**；而对于那些倾向于更加灵活控制权的老练程序员，则可以选择设置自己的本地化解决方案——比如借助于 **Easy UI5** 工具自动生成初始模板文件夹结构作为起点[^2]。 一旦完成上述准备工作之后就可以继续深入探讨关于数据绑定模式的选择问题了。例如创建OData服务模型就是其中非常重要的一步骤之一。 #### 设计符合Fiori原则的应用界面 除了功能性的考量之外，视觉呈现同样不可忽视。为此,SAP特别推出了名为 @sap/ux-specification 的专用插件包集合, 它们能够有效辅助设计师按照既定的标准去塑造产品外观样式特征等等属性值设定工作流程等方面都提供了详尽的帮助信息[^3]. 以下是几个关键要点总结: - 始终遵循最新的UX/UI趋势调整布局安排. - 利用预定义控件减少定制需求量的同时也提高了跨团队协作效率. ```javascript // Example of defining a simple button control within XML view file format commonly used inside most modern-day enterprise software solutions built upon top-level frameworks such as AngularJS or React Native but here specifically tailored towards meeting corporate requirements set forth by large multinational corporations operating across multiple industries worldwide including finance services sector etc... <mvc:View xmlns:mvc="sap.ui.core.mvc" controllerName="my.controller.Main"> <Button text="Press Me!" press=".onPress"/> </mvc:View> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

汪子熙

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值