OPEN(SAP) UI5 学习入门系列之四:更好的入门系列-官方Walkthrough

时间:2022-01-09 00:17:43

好久没有更新了,实在不知道应该写一些什么内容,因为作为入门系列,实际上应该更多的是操作而不是理论,而在UI5 SDK中的EXPLORER里面有着各种控件的用法,所以在这里也没有必要再来一遍,还是看官方的用法更地道。

看一下基于最新的库所推荐的项目结构。

另外,我觉得对于初学者来说是一个非常好的消息,就是UI5版本从1.28更新到1.30以及更高之后,Tutorial系列有了重大更新,之前的Get Started->Tutorials->Application Best Practice现在改为Tutorial->Walkthrough,跟随着Walkthrough把所有的步骤走完,基本上UI5就算可以入门了,每一个步骤在EXPLORED中可以看到效果,并且可以下载到完整的代码,所以基于这个原因,我觉得我之前写的入门系列基本上可以不用再看了,跟着这个Walkthrough走就足够了。

链接贴在这里:https://openui5.hana.ondemand.com/#docs/guide/3da5f4be63264db99f2e5b04c5e853db.html

除了Walkthrough之外,1.30及更高版本的更新还增加了不少其他的改动,这里列举一下我觉得比较重要的部分,这些内容在做Walkthrough的过程应该也都会感受到。

项目目录结构

在之前的版本中,官方的最佳实践或者样例代码一般都是把视图文件和控制器文件放到一个目录中,显然,这种组织代码的方式对于管理稍大型的应用就会显得比较混乱,但是官方之前对于如何组织代码并未给出明确的方式,而在1.30版本更新之后,在文档中专门有一篇来介绍目录结构。这里我就大致的介绍一下。

三个主要的目录是root, webapp以及test目录。

  • root 目录 
    顾名思义,是整个项目的根目录,目录名可以是任意的项目名称,在这个目录之下包含的文件应该是你写的APP的代码以外的一些辅助文件,比如工程文件或者是一些说明性的文件,如果这些文件比较多,也可以在这之下再创建一个目录来管理。比如可以把所有的文档文件都放在doc目录中等等。
  • webapp 目录 
    这个目录包含的是应用的所有代码文件,比如视图文件,处理逻辑的js文件,本地化资源文件i18n文件,模型文件(可选),以及测试相关的文件(放到单独的test目录中)。
  • test 目录 
    这个目录应该用来存放测试相关的文件。

具体细节还是看官方的介绍吧:https://openui5.hana.ondemand.com/#docs/guide/003f755d46d34dd1bbce9ffe08c8d46a.html

应用描述符文件

在1.28及之前,单独的一个应用可以被包到Component中,可以通过Component的metadata来描述一些应用的信息,比如依赖的库,资源文件(css、i18n)等等,或者应用公共的一些配置信息,都放到Component.js中。 从1.30开始,UI5引入了应用描述符文件manifest.json,官方是这么说的:

The descriptor for applications, components, and libraries is inspired by the Web Application Manifest concept introduced by the W3C. The descriptor provides a central, machine-readable and easy-to-access location for storing metadata associated with an application, an application component, or a library.

我们可以把应用的一些配置信息都放到这个manifest.json里面,UI5提供了API来检索相应的配置信息,同时,当我们需要把这个app放到Fiori Launchpad的时候,一些相应的配置信息也会被Fiori Launchpad读到。

总结

UI5的Developer Guide的可读性越来越强,所以建议如果想要真正掌握UI5还是要静下心来花点时间把Guide都过一遍,不过惭愧的是我自己都没有完完整整的看过,都是碰到哪里不明白了再去查找,好在1.30之后,增加了搜索的功能,可以快速的定位到自己感兴趣的部分。

至于这个UI5学习入门系列,就像最开始说的,我觉得基于现在官方Guide足够强大已经没有再自己造车轮的必要了。如果要进一步的深入的学习,JavsScript的深入理解是必不可少的,同时要看到SAP现在也是在积极的拥抱开源,在UI5库中用到不少开源的库,所以对于这些库我们也需要做深入的了解,然后在这个基础之上我们再去理解UI5的架构,那时才能做到举重若轻。

OPEN(SAP) UI5 学习入门系列之四:更好的入门系列-官方Walkthrough的更多相关文章

  1. OPEN(SAP) UI5 学习入门系列之二: 最佳实践练习(上)

    这篇博文难产了很久,原来是打算一周更新一篇的,上周原计划写MVC,但是写了一半,发现带入了太多的细节,不太符合这个入门系列的主题. 当我们学习一个新的技能的时候,如果一开始就面对大量的细节,很容易陷入 ...

  2. OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(下)

    1 UI5代码结构 上一次我们一起用了20秒的时间完成一个UI5版的Hello World.应用打开后有一个按钮,按钮的文字是Hello World,点击这个按钮之后,按钮会慢慢的消失掉(Fade o ...

  3. [转]OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(上)

    本文转自:http://www.cnblogs.com/qianmarv/p/4671394.html 1 扫盲 什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念 ...

  4. OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(上)

    什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念经常被混淆,而两者也确实有着非常紧密的关系. 用过SAP的同学们都对SAP的传统的界面(SAP GUI)表示“呵呵 ...

  5. OPEN(SAP) UI5 学习入门系列之三:MVC (上) - 模型

    这次我们来一起学习MVC,这个专题分为两个小节,本次主要是总览以及模型,下一次着重会介绍视图以及控制器,因为控制器其实没有太多可以讲的,所以和视图合并在一块. 1 Model View Control ...

  6. OPEN(SAP) UI5 学习入门系列之三:MVC (下) - 视图与控制器

    继续来学习UI5的MVC模型吧,这次我们来探讨视图与控制器. 1 视图 在MVC中,视图用来定义和渲染UI.在UI5中,视图的类型是可以自定义的,除了以下预定义的四种视图类型之外,你也可以定制自己的视 ...

  7. OPEN(SAP) UI5 学习入门系列之二: 最佳实践练习(下)

    上期我们完成了一个简单的主从页面,但是页面是静态的,不能交互,功能也很简单,只有一个销售订单的列表. 我们今天就一鼓作气把代码全都写完,由于本次的代码量较大,所以只对重点代码部分进行讲解. 具体每个文 ...

  8. 【HANA系列】SAP UI5上传图片 用XSJS存储在HANA中的方法

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP UI5上传图片 用XSJ ...

  9. SQL Server 学习系列之四(SQL 内幕)

    SQL Server 学习系列之四(SQL 内幕) SQL Server 学习系列之一(薪酬方案+基础) SQL Server 学习系列之二(日期格式问题) SQL Server 学习系列之三(SQL ...

随机推荐

  1. HTTP学习补充一

    1 HTTP协议协商 1.1 NPN NPN:Next Protocol Negotiation,是由Google公司开发的用于SPDY进行协议协商扩展. 协商过程: 服务端在收到客户端的client ...

  2. dblink连接的目标端 session不断的问题。

    来源于:http://blog.itpub.net/22782896/viewspace-676842/ 1.在使用了dblink的存储过程中,可以显示的手动关闭dblink连接,具体写法如下(测试存 ...

  3. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(31)-MVC使用RDL报表

    系列目录 这次我们来演示MVC3怎么显示RDL报表,坑爹的微软把MVC升级到5都木有良好的支持报表,让MVC在某些领域趋于短板 我们只能通过一些方式来使用rdl报表. Razor视图不支持asp.ne ...

  4. CSDN——【低调的草原狼】——Ext4.2学习目录整理

    最近在研究ExtJS,发现CSDN中有个博客中一系列文档非常优秀,但是没有对目录进行整理,在此稍作整理,也为以后自己研究打下一个基础: 原文作者:低调的草原狼 目录:     1.ExtJS4.2学习 ...

  5. DOM操作-倒排序子元素

    代码: —————————————————————————————— <script type="text/javascript">                // ...

  6. 手机自动化测试:Appium源码之api&lpar;1&rpar;

    手机自动化测试:Appium源码之api(1)   AppiumDriver getAppStrings() 默认系统语言对应的Strings.xml文件内的数据. driver.getAppStri ...

  7. 叼叼叼,HTML5日期&lpar;Date&rpar;类型和文本&lpar;Text&rpar;类型互相转换

    <input placeholder="From" class="form-control" type="text" onfocus= ...

  8. 测试那些事儿—软测必备的Linux知识(二)

    linux常用命令 用户登录linux后,可以在Linux的命令提示符后面输入命令与系统进行交互. 1.磁盘管理 1.1 cd 切换目录:让登录用户在不同的目录间切换 常用的目录切换 cd~ 进入当前 ...

  9. Spring5源码解析-Spring框架中的单例和原型bean

    Spring5源码解析-Spring框架中的单例和原型bean 最近一直有问我单例和原型bean的一些原理性问题,这里就开一篇来说说的 通过Spring中的依赖注入极大方便了我们的开发.在xml通过& ...

  10. EventHandler中如何提升用户权限(模拟管理员权限)

    不论是在工作流或是EventHandler中,我们经常希望模拟管理员权限,从而可以通过程序自定义列表项的权限. 在工作流中可以用如下代码来提升权限:(以下代码实现的功能是断开列表项所继承的权限,除管理 ...