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的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

Jerry的UI5框架代码自学教程的更多相关文章

  1. 前端测试框架Jest系列教程 -- Asynchronous(测试异步代码)

    写在前面: 在JavaScript代码中,异步运行是很常见的.当你有异步运行的代码时,Jest需要知道它测试的代码何时完成,然后才能继续进行另一个测试.Jest提供了几种方法来处理这个问题. 测试异步 ...

  2. Spring自学教程-介绍、特点、框架(一)

    一.spring是什么,有什么用? 一句话:面向企业应用,使用javabean代替ejb的java应用或web开发. 侵入式的做法就是要求用户代码"知道"框架的代码,表现为用户代码 ...

  3. Yii2框架RESTful API教程(二) - 格式化响应,授权认证和速率限制

    之前写过一篇Yii2框架RESTful API教程(一) - 快速入门,今天接着来探究一下Yii2 RESTful的格式化响应,授权认证和速率限制三个部分 一.目录结构 先列出需要改动的文件.目录如下 ...

  4. 前端测试框架Jest系列教程 -- 简介

    写在前面: 随着互联网日新月异的发展,用户对于页面的美观度,流畅度以及各方面的体验有了更高的要求,我们的网页不再是简单的承载文字,图片等简单的信息传递给用户,我们需要的是更加美观的页面展示,更快的浏览 ...

  5. 前端测试框架Jest系列教程 -- Matchers(匹配器)

    写在前面: 匹配器(Matchers)是Jest中非常重要的一个概念,它可以提供很多种方式来让你去验证你所测试的返回值,本文重点介绍几种常用的Matcher,其他的可以通过官网api文档查看. 常用的 ...

  6. 前端测试框架Jest系列教程 -- Mock Functions

    写在前面: 在写单元测试的时候有一个最重要的步骤就是Mock,我们通常会根据接口来Mock接口的实现,比如你要测试某个class中的某个方法,而这个方法又依赖了外部的一些接口的实现,从单元测试的角度来 ...

  7. 前端测试框架Jest系列教程 -- Global Functions(全局函数)

    写在前面: Jest中定义了很多全局性的Function供我们使用,我们不必再去引用别的包来去实现类似的功能,下面将列举Jest中实现的全局函数. Jest Global Functions afte ...

  8. 前端测试框架Jest系列教程 -- Expect(验证)

    写在前面 在编写测试时,我们通常需要检查值是否满足某些条件,Jest中提供的expect允许你访问很多“Matchers”,这些“匹配器”允许您验证不同的东西. Expect 可以验证什么 Jest中 ...

  9. 前端测试框架Jest系列教程 -- Mock Functions(模拟器)

    写在前面: 在写单元测试的时候有一个最重要的步骤就是Mock,我们通常会根据接口来Mock接口的实现,比如你要测试某个class中的某个方法,而这个方法又依赖了外部的一些接口的实现,从单元测试的角度来 ...

随机推荐

  1. Android View视图系统分析和Scroller和OverScroller分析

    Android  View视图系统分析和Scroller和OverScroller分析 View  视图分析         首先,我们知道.在Android中全部的视图资源(无论是Layout还是V ...

  2. Vue深度学习(3)

    基础 Vue.js允许自定义指令,实质上是让你教 Vue一些新技巧:怎样将数据的变化映射到 DOM 的行为.可以使用 Vue.directive(id, definition) 的方法传入指令 id  ...

  3. EJB:快速入门

    1.EJB概念 2.EJB体系结构 3.SessionBean 3.1 SessionBean 服务端组件 3.2 Remote 与 Local 模式 3.3 Client访问处理流程 3.3.1 R ...

  4. OC金额转大写

    -(NSString *)digitUppercaseWithMoney:(NSString *)money { NSMutableString *moneyStr=[[NSMutableString ...

  5. Protocol Buffer 时间类型定义

    ProtoBuf3中新增了TimeStamp类型,使用示例如下: syntax = "proto3"; import public "google/protobuf/ti ...

  6. Akka Serialization

    Akka本身使用了Protocol Buffers来序列化内部消息(比如gossip message).Akka系统还可以配置自定义序列化机制. 配置conf akka { actor { ## 在a ...

  7. Java之线程安全中的三种同步方式

    一个程序在运行起来时,会转换为进程,通常含有多个线程. 通常情况下,一个进程中的比较耗时的操作(如长循环.文件上传下载.网络资源获取等),往往会采用多线程来解决. 比如,现实生活中,银行取钱问题.火车 ...

  8. ArcGIS API for JavaScript 4.2学习笔记[24] 【IdentifyTask类】的使用(结合IdentifyParameters类)(第七章完结)

    好吧,我都要吐了. 接连三个例子都是类似的套路,使用某个查询参数类的实例,结合对应的Task类,对返回值进行取值.显示. 这个例子是Identify识别,使用了TileLayer这种图层,数据来自Se ...

  9. TXDragon的大火题合集

    还有三个题没写,弃疗了 Solution

  10. bzoj 2565: 最长双回文串

    Description 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(abc的顺序为"abc",逆序为"cba",不相同).输入 ...