jerry的ui5框架代码自学教程

JerryWangSAP JerryWangSAP     2022-10-08     678

关键词:

SAP UI5对View元素基于jQuery的操作方式,使得其学习曲线相对Angular/React来说比较平缓,至少对于我个人而言是这样。对于已经有jQuery经验的前端开发人员来说很容易上手。

使用UI5开发SAP UI应用,在开发过程中往往会遇到各种各样的问题,比如最后出来的UI效果和你预料的不一样,或者console里面显示一些奇奇怪怪的error message. 对于后者来说,这些error message通常都是UI5框架代码报出来的,这并不意味着是UI5框架代码的bug。相反,往往是应用程序中developer自己犯的错,导致UI5框架在runtime执行时出错,exception被框架代码捕捉到,最后显示在console里。

遇到这种情况,如果你一遍又一遍地看自己的应用代码,但是觉得它们的书写都是正确的,找不到线索,那么你要么问问身边其他对UI5比较熟悉的同事,要么自己啃框架的代码慢慢分析到底为什么框架代码执行到你的应用以后会出错。

曾经有刚接触UI5的同事和我讨论过,说对UI5框架代码很感兴趣,想学习,但是迷失在代码海洋里,UI5 core的代码一个文件动辄就是几千上万行,不知道从哪里入手。

对这个困扰我自己的思路是,从最容易的地方入手,采用以点带面的方式学习。
试想下面这个scenario:

" 在UI上画个button,这个button有一个"click me"的label. 点这个button,弹个message出来 ".

Scenario够简单吧,这个效果每个UI5 developer都能做出来,但是你能搞清楚它背后的工作原理么?为什么你在model里设置的文本最后会显示在button label上? 你UI5代码里new出来的button instance最后怎么就变成了html标签?你没有用html native的onclick属性注册事件响应,为什么你最后点击了button,你在controller里定义的event handler仍然会被调用?

真正搞清楚了这些问题,说明你已经对UI5的框架代码有一些认识了。这个时候,凭借这些基础,你可以根据自己的兴趣或者工作需要,用同样的办法去研究UI5框架的其他topic.

这个系列是我2015年做CRM Fiori标准开发的时候写的,教程链接:
https://blogs.sap.com/2015/10/26/a-tutorial-how-i-do-self-study-on-a-given-fiori-control-and-ui5-framework-code-behind/

其内容得到了SAP Walldorf的UI5 developer的认可, 内容的正确性上没有问题。

Another UI5 walkthrough from my previous colleague Wu Ji

Wu Ji以前在SAP工作过,我有幸和他共事过18个月的时间。Wu Ji是一位我非常佩服的专业的程序员,我因为曾经能和他共事而感到荣幸。

这是他的github: https://github.com/j1wu

Wu Ji也写过UI5的walkthrough, 也可以作为研究UI5框架代码的材料:

SAPUI5 walkthrough step 1: Hello World! BaseObject, where where it all began:
https://blogs.sap.com/2016/01/12/sapui5-walkthrough-step-1-hello-world-where-where-it-all-began/

SAPUI5 walkthrough step 2 – bootstrap, dive in – how does attachInit work?
https://blogs.sap.com/2015/10/29/sapui5-walkthrough-and-dive-in-step-2-bootstrap/

SAPUI5 walkthrough step 3 – controls, dive in – how does a control get created?
https://blogs.sap.com/2015/11/03/sapui5-walkthrough-and-dive-in-step-3-controls/

SAPUI5 walkthrough step 4 – XML views, dive in – how does a xml view get created?
https://blogs.sap.com/2015/11/15/sapui5-walkthrough-step-4-xml-views-dive-in-how-does-a-xml-view-get-created/

SAPUI5 walkthrough step 5 – controllers, dive in – how does a controller get created?
https://blogs.sap.com/2015/11/22/sapui5-walkthrough-step-5-controllers-dive-in-how-does-a-controller-get-created/

SAPUI5 walkthrough step 6 – modules, dive in – how does modules work?
https://blogs.sap.com/2015/11/25/how-does-modules-work-in-sapui5/

SAPUI5 walkthrough step 7 – JSON model, dive in – how does JSON model work?
https://blogs.sap.com/2015/12/05/sapui5-walkthrough-step-7-json-model-dive-in-how-does-json-model-work/

SAPUI5 walkthrough step 8 – translatable texts, dive in – how does i18n model work?
https://blogs.sap.com/2015/12/06/sapui5-walkthrough-step-8-translatable-texts-dive-in-how-does-i18n-model-work/

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

黑马程序员ssm框架教程_spring+springmvc+mybatisplus笔记(自学用,持续更新)(代码片段)

Spring的实现有两种方式,一是配置,二是注解目录Spring_day01IOC、DIBean的基本配置、实例化、生命周期Bean的基本配置bean的实例化训练中的不足1:bean的生命周期DI相关内容setter注入构造器注入小结自动注入集合注入Spring... 查看详情

新手自学markdown教程(代码片段)

自学markdownmarkdown简介什么是markdownmarkdown是一种简单的标记语言,可以被编译成HTML界面,也可以单独以纯文本形式显示。markdown目标是"易读易写"兼容HTML1.markdown标题使用=和-标记一级和二级标题我展示的是一级标题=========... 查看详情

如何在sapui5应用里添加使用摄像头拍照的功能

...用。而我同事遇到的实际情况是,需要使用SAPUI5这个前端框架来开发web应用。在有了前一篇文章的知识储备后,在SAPUI5里完成这个功能,可以采取同样的思路。我们先回忆前一篇文章里提到的技术实现的要点:(1)在web应用的HTML... 查看详情

java响应式框架,附超全教程文档

零基础如何学习Java?首先,你要明白一点,Java入门不难!无论你是从事哪个行业,兴趣一定是最好的老师,也是你学习的动力。学习方式1:自学自学模式其实我个人不建议绝大部分的人选择,因... 查看详情

open(sap)ui5学习入门系列之一:扫盲与热身(下)

...们这次就来看一看为了实现这么一个简单的功能,OpenUI5框架至少需要提供哪些内容,或者说我们通过这么一个简单的应用来看一下一个最简单的UI5的应用程序的结构。HTML部分应该不用多说, 查看详情

最简单的sap云平台开发教程-如何开发ui5应用并运行在sap云平台上

选择ServicesCatalog,根据关键字搜索到WebIDE服务,点击超链接打开WebIDE:进入workspace,选择Git->CloneRepository:从我的githubclone:https://github.com/i042416/jerrylistclone完毕之后选择Run->Runindex.html,检查clone是否成功。正常情况下应该看到... 查看详情

html所有ui5控件的常用功能(代码片段)

查看详情

wpf教程_编程入门自学教程_菜鸟教程-免费教程分享

...dowsPresentationFoundation)是微软推出的基于Windows的用户界面框架,属于.NETFramework的一部分。它提供了统一的编程模型、语言和框架,真正做到了分离界面设计人员与开发人员的工作;同时它提供了全新的多媒体交互用户图形界面... 查看详情

瑞思拜!不愧是github上最励志的计算机自学教程!(代码片段)

之前很早就有耳闻过一个名叫JohnWasham的外国小哥自学编程的励志故事,还曾一度登上GitHub热度榜。他为了让自己从一个非CS科班的自学党蜕变成Google的软件工程师,每天坚持自学8~12小时,持续了数月之后,他如愿... 查看详情

python入门自学进阶-web框架——3django的url配置(代码片段)

了解一下Django的配置文件settings.py:"""DjangosettingsforMyPySiteproject.Generatedby'django-adminstartproject'usingDjango3.2.11.Formoreinformationonthisfile,seehttps://docs.djangoproj 查看详情

c++自学教程第一课——你好世界,我是柠檬鲸。(代码片段)

 大家好啊,一年一度的柠檬节——额,好像不止一度的柠檬节,它又到了!在这个悲伤的日子,我决定开启一个C++的教程,主要是为了复习自己的C++知识,另外顺便给新手们一个了解C++的方向。 本教程主要面向C++... 查看详情

重构——抽取方法(代码片段)

到处都是重复的代码?方法体又臭又长看不懂?快来试试抽取方法(ExtractMethod)吧,保证药到病除!何为抽取方法将重复的代码或语义独立的代码抽取成一个方法看好了:Tom抓Jerry(又臭又长版)classTom/***Tom当前的位置**/privatein... 查看详情

python入门自学进阶-web框架——18formmodelform(代码片段)

Form:强大的数据验证,对前端的请求进行数据验证基本的Form使用:fromdjango.shortcutsimportrender,HttpResponsefromdjangoimportformsfromdjango.formsimportfields#一般引入forms就可以,但是字段类型是保存在forms下的fields中的 查看详情

python入门自学进阶-web框架——18formmodelform(代码片段)

Form:强大的数据验证,对前端的请求进行数据验证基本的Form使用:fromdjango.shortcutsimportrender,HttpResponsefromdjangoimportformsfromdjango.formsimportfields#一般引入forms就可以,但是字段类型是保存在forms下的fields中的 查看详情

ui5-文档-4.20-aggregationbinding(代码片段)

现在我们已经为我们的应用建立了一个良好的结构,是时候添加更多的功能了。通过添加一些JSON格式的发票数据,我们开始探索数据绑定的更多特性,这些发票数据显示在面板下面的列表中。 Preview Alistofinvoicesisdisplayedbe... 查看详情

python自学免费教程-怎样自学python编程?从零开始学习python,python开发入门到精通(代码片段)

我做为千万个零基础自学Python转行程序员的成功案例之一,在自学的过程中,踩过很多坑,整理过很多非常优质的免费资料,对于新手小白来说,这些资料一定可以为你提供参考。如果你是小白,我给你整... 查看详情

算法教程(代码片段)

自学算法第二章本章课程承接作者主页中《自学算法》的第一章内容。这套课程特别适合自学算法的小白。每节课程最后还有一道练习题,边学边练,可以帮你及时巩固学习到的知识。如果您在学习其他相关的算法课程&#... 查看详情

关于aui框架自学心得(代码片段)

2018年8月25日今天星期六,这段时间接触到移动端布局框架AUI,借着早上一个小时时间大致看了一下开发文档(后面统称文档),对AUI一点认识。目前2.0版本为最新版,这个版本和1.0比较升级很多。文档中原文讲到“在2.0中,全... 查看详情