专栏首页Jerry的SAP技术分享一个用于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).

看到Example app listens on port 3000后,浏览器输入localhost:3000/wt即可看到仅包含了一个button控件的SAP UI5页面:

可以用任何文本编辑器打开这个文件夹,该页面的源代码在walkthrough子文件夹的index.html里:

上图高亮部分的源代码,即SAP UI5 button控件的创建代码,可以直接从下面SAP UI5官网上拷贝获得:

https://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控件)

浏览器里输入另一个url:

http://localhost:3000/ui5/

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

该应用也展示了Master List里的搜索,以及根据选中的服务订单字段(Amount,State)进行聚合的功能,以及SAP UI5的页面跳转功能实现。

最重要的是,这个脚手架应用没有引入任何后台API的依赖。

这个Master-Detail的应用实现在webapp文件夹下。在webapp文件夹下的Component.js里,能看到直接使用了本地存储的json文件作为model的数据源:

这个脚手架应用基于nodejs,可以用命令cf push上传到SAP云平台的CloudFoundry环境,或者直接将整个文件夹拷贝到阿里云/腾讯云这类虚拟主机上,然后直接执行命令行node local.js启动应用。

具体步骤在我之前的文章如何在阿里云上运行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元素

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 通过最简单的button控件,深入学习SAP UI5框架代码系列之零

    Jerry曾经作为SAP成都研究院的Fiori应用开发人员,从事了将近3年的SAP CRM Fiori应用开发,在使用SAP UI5的过程中,遇到过形形色色的问...

    Jerry Wang
  • 国内SAP UI5使用者关于性能优化和UI5 Web Component的讨论

    有朋友提问:有UI5性能优化或者代码压缩的文章吗?UI5什么都好就是第一次加载太慢

    Jerry Wang
  • 深入学习SAP UI5框架代码系列之三:HTML原生事件 VS UI5 Semantic事件

    这是Jerry 2020年的第80篇文章,也是汪子熙公众号总共第262篇原创文章。

    Jerry Wang
  • 通过最简单的button控件,深入学习SAP UI5框架代码系列之零

    Jerry曾经作为SAP成都研究院的Fiori应用开发人员,从事了将近3年的SAP CRM Fiori应用开发,在使用SAP UI5的过程中,遇到过形形色色的问...

    Jerry Wang
  • 深入学习SAP UI5框架代码系列之三:HTML原生事件 VS UI5 Semantic事件

    这是Jerry 2020年的第80篇文章,也是汪子熙公众号总共第262篇原创文章。

    Jerry Wang
  • SAP WebIDE里UI5应用的隐藏文件project.json

    在SAP WebIDE UI5应用编辑器里的菜单View->Show Hidden files点击后,即可发现项目文件夹下有一个隐藏文件project.json...

    Jerry Wang
  • 如何使用SAP UI5 SDK网站查询指定控件的属性如何使用

    一个朋友向我提问,SAP UI5 input控件,如何实现inputField内容靠右显示?

    Jerry Wang
  • Python---获取div标签中的文字

    compile 函数用于编译正则表达式,生成一个正则表达式( Pattern )对象,供 match() 和 search() 这两个函数使用。

    明天依旧可好
  • SAP的这三款CRM解决方案,您能区分清楚么

    我的一位同事, John Burton, 在2017年12月底写过一篇博文:Explaining SAP’s portfolio of “CRM Service...

    Jerry Wang
  • 【观点】从大数据看美国的“柠檬危机”

    柠檬价格连创新高,令美国人高呼“柠檬危机”来了,但通过大数据分析历年柠檬的价格表明,柠檬定价受季节性因素影响较大,春季历来是价格高点,但随着产量...

    小莹莹

扫码关注云+社区

领取腾讯云代金券