一个用于SAP UI5学习的脚手架应用,没有任何后台API的依赖

简介: 一个用于SAP UI5学习的脚手架应用,没有任何后台API的依赖

Jerry的系列 通过最简单的button控件,深入学习SAP UI5框架代码系列之零 里面曾经提到,我们会使用单步调试的方式,来学习SAP UI5框架的部分源代码实现。


如果找一个现成的SAP UI5应用来调试,势必会增加我们调试的复杂度,所以对于这类调试任务,Jerry最喜欢的方式就是首先搭建一个小的脚手架应用(即很多英文的前端开发博客里提到的scaffold),隔离所有不必要的依赖,只包含了待调试的最小范围的特性(mini scope).


以本系列为例,自始至终我们使用的SAP UI5应用,只包含一个最简单的button控件。


Jerry已经准备好了这样一个应用,放在我的github上,大家可以下载或者clone到本地。


进入项目文件夹下,首先运行命令行npm install, 然后执行node local.js(当然,你需要首先安装npm和nodejs).

image.pngimage.pngimage.pnghttps://sapui5.hana.ondemand.com/1.32.11/#test-resources/sap/ui/commons/demokit/Button.html


(Jerry写这个英文系列时用的button来自sap.ui.commons命名空间,在最新版本的UI5里面已经depreciated了,SAP推荐使用sap.m命名空间下的新button控件)

image.png浏览器里输入另一个url:

http://localhost:3000/ui5/

能看到一个典型的Fiori Master-Detail风格的应用,左边的Master List里显示服务订单列表,任意点击一个,在屏幕右边能看到该订单的明细页面。

image.pngimage.png具体步骤在我之前的文章如何在阿里云上运行SAP UI5应用里有介绍。


本系列的所有文章,都会使用本文介绍的脚手架应用来调试SAP UI5的框架代码。感谢阅读。


系列目录

SAP UI5应用开发人员了解UI5框架代码的意义

UI5 module懒加载机制

UI5 控件渲染机制

HTML原生事件 VS SAP UI5 Semantic事件

UI5控件元数据实现细节

UI5控件的实例数据实现细节

UI5控件数据绑定的实现原理

UI5控件数据绑定的三种模式:One Way,Two Way和OneTime实现原理比较

UI5控件ID的生成逻辑

UI5控件的多语言(国际化,Internationalization,i18n)支持的实现原理

XML视图里的button控件

button控件和它背后的DOM元素


相关文章
|
4月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
4月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
4月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
4月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
4月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
4月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
|
4月前
|
Web App开发 前端开发 JavaScript
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
|
4月前
|
Web App开发 JSON JavaScript
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
|
4月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题