OPEN(SAP) UI5 学习入门系列之四:更好的入门系列-官方Walkthrough
好久没有更新了,实在不知道应该写一些什么内容,因为作为入门系列,实际上应该更多的是操作而不是理论,而在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的更多相关文章
- OPEN(SAP) UI5 学习入门系列之二: 最佳实践练习(上)
这篇博文难产了很久,原来是打算一周更新一篇的,上周原计划写MVC,但是写了一半,发现带入了太多的细节,不太符合这个入门系列的主题. 当我们学习一个新的技能的时候,如果一开始就面对大量的细节,很容易陷入 ...
- OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(下)
1 UI5代码结构 上一次我们一起用了20秒的时间完成一个UI5版的Hello World.应用打开后有一个按钮,按钮的文字是Hello World,点击这个按钮之后,按钮会慢慢的消失掉(Fade o ...
- [转]OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(上)
本文转自:http://www.cnblogs.com/qianmarv/p/4671394.html 1 扫盲 什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念 ...
- OPEN(SAP) UI5 学习入门系列之一:扫盲与热身(上)
什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念经常被混淆,而两者也确实有着非常紧密的关系. 用过SAP的同学们都对SAP的传统的界面(SAP GUI)表示“呵呵 ...
- OPEN(SAP) UI5 学习入门系列之三:MVC (上) - 模型
这次我们来一起学习MVC,这个专题分为两个小节,本次主要是总览以及模型,下一次着重会介绍视图以及控制器,因为控制器其实没有太多可以讲的,所以和视图合并在一块. 1 Model View Control ...
- OPEN(SAP) UI5 学习入门系列之三:MVC (下) - 视图与控制器
继续来学习UI5的MVC模型吧,这次我们来探讨视图与控制器. 1 视图 在MVC中,视图用来定义和渲染UI.在UI5中,视图的类型是可以自定义的,除了以下预定义的四种视图类型之外,你也可以定制自己的视 ...
- OPEN(SAP) UI5 学习入门系列之二: 最佳实践练习(下)
上期我们完成了一个简单的主从页面,但是页面是静态的,不能交互,功能也很简单,只有一个销售订单的列表. 我们今天就一鼓作气把代码全都写完,由于本次的代码量较大,所以只对重点代码部分进行讲解. 具体每个文 ...
- 【HANA系列】SAP UI5上传图片 用XSJS存储在HANA中的方法
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP UI5上传图片 用XSJ ...
- SQL Server 学习系列之四(SQL 内幕)
SQL Server 学习系列之四(SQL 内幕) SQL Server 学习系列之一(薪酬方案+基础) SQL Server 学习系列之二(日期格式问题) SQL Server 学习系列之三(SQL ...
随机推荐
- db2 函数、存储过程示例
1.函数 --drop function getMaxDate; create FUNCTION getMaxDate (y int, m int ) returns date begin DECLA ...
- L1-3 宇宙无敌加法器 - 令人激动的一道题目
L1-3 宇宙无敌加法器 - 令人激动的一道题目 感觉好久没有这么认真的做一道题了,今天看到一句话, 说是编程是一个工程型的工作,想要学好,"无他,唯手熟尔" 之前觉得自己笨,怀疑 ...
- 修改主机hosts文件 访问外网
参考:详解google Chrome浏览器(理论篇) 感谢原博主 Alan_beijing 的分享,博客:Alan_beijing hosts文件所在位置: a.Windows系统: C:\Windo ...
- hdu 1241 搬寝室 水dp
搬寝室 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem Desc ...
- mac 下如何建立vue-cli项目
command+space : terminal //检测是否存在node node -v //检测是否带有npm安装管理工具 npm -v //具备进行下一步 //在documnets下建立vue文 ...
- webstorm拉取git代码
在webstorm中VCS → git → clone → url就是你的git代码地址,parent Directory(你要放到的目录),Directiory Name(起一个项目名称)
- zabbix自动化运维学习笔记(服务器安装)
最近博主开始接触自动化运维.首先就是zabbix这个开源的监控系统 一开始博主只是在自己的虚拟机上尝试安装.最后终于开始在公司的服务器上正式安装,教程博主也是通过度娘找的 这是原文:链接 安装环境:C ...
- 超好用的ip归属区域查询
源码如下: #!/usr/bin/env python#-*-coding:utf-8-*- import requestsfrom bs4 import BeautifulSoupimport re ...
- classpath到底指的哪里
之前一直对classpath不太明白到底指的哪里,今天研究了一下,做个总结.. classpath顾名思义就是指类路径,但是这样解释可能还是不明白,这里拿一个SpringBoot应用编译后生成的tar ...
- Gruntjs提高生产力(三)
以下例子来自真实项目,有所删减 grunt-test project 目录结构如下 一我的目的: 1.在src-dev目录中开发最终产出于src目录 2.src-dev中的index目录相当于一个wi ...