Jerry的SAP UI5框架代码自学教程

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和未来有约会

Radiant: 基于Ruby on Rails的内容管理系统

Radiant是一个开源的CMS[内容管理系统],建立于Ruby on Rails。Radiant是为一些小的开发团队而创建的[Publishing for S...

20710
来自专栏云计算

用Google Analytics分析WordPress

Google Analytics(分析)提供与您网站的访问者流量和销售相关的详细统计信息,让您更好地了解您的受众群体。对任何有兴趣增加访客群的网站所有者都有好处...

5831
来自专栏FreeBuf

未越狱的iPhone/iPad也中招:走近强大的间谍软件XAgent与MadCap

趋势科技的安全专家在调查一起网络间谍活动时,发现了一款特别的iOS设备间谍程序。它可以窃取未越狱iOS用户的照片、短信、联系人列表和其他数据。但值得注意的是,这...

1956
来自专栏即时通讯技术

IM开发基础知识补课:正确理解前置HTTP SSO单点登陆接口的原理

一个安全的信息系统,合法身份检查是必须环节。尤其IM这种以“人”为中心的社交体系,身份认证更是必不可少。

1662
来自专栏macOS 开发学习

macOS 开发 - 小基础拾遗

通过熟悉一个App的启动过程,有利于我们理解开发时代码的执行过程,以及帮助我们修复一些系统Bug都是非常有意义的.一个macOS的App启动与iOS App启动...

942
来自专栏携程技术中心

干货 | 揭秘携程三端通用框架中的CRNWEB

1433
来自专栏知晓程序

开发 | 用 4 天时间,他撸了一个「星巴克」同款小程序

当我们还在家中吹着空调,敲着代码,吃着西瓜的时候,可能你的她还在炎炎夏日下大汗淋漓……

991
来自专栏知晓程序

开发|只需 10 分钟!让你的小程序轻松接入「微信支付」

你可能需要花半天时间看微信支付文档,再花半天调试支付签名,最后还得加两天时间搞定支付回调通知以及和自己的业务结合。

1742
来自专栏IT派

前端UI框架小汇总

IT派 - {技术青年圈} 持续关注互联网、大数据、人工智能领域 移动端UI框架 Mint UI(饿了么团队) 中文官网:http://mint-ui....

9594
来自专栏wblearn

我的Web开发实战总结(一)写在前面截图快速查询与快递单号我的待办事物办理与信息查询公告通知销售业绩与新客户业绩工作看板排行榜写在最后

最近一直在做项目,感觉没什么分享的所以一直没写。 今天不上班,就把最近做的一个demo做个简单的总结。

1001

扫码关注云+社区

领取腾讯云代金券