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的架构,那时才能做到举重若轻。

时间: 11-18

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

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

1 UI5代码结构 上一次我们一起用了20秒的时间完成一个UI5版的Hello World.应用打开后有一个按钮,按钮的文字是Hello World,点击这个按钮之后,按钮会慢慢的消失掉(Fade out). 那我们这次就来看一看为了实现这么一个简单的功能,OpenUI5框架至少需要提供哪些内容,或者说我们通过这么一个简单的应用来看一下一个最简单的UI5的应用程序的结构. HTML部分应该不用多说,我们只看和UI5相关的代码,第一部分我们称为Bootstrap,包含以下代码段: <!-- 1.)

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

这篇博文难产了很久,原来是打算一周更新一篇的,上周原计划写MVC,但是写了一半,发现带入了太多的细节,不太符合这个入门系列的主题. 当我们学习一个新的技能的时候,如果一开始就面对大量的细节,很容易陷入其中而只见树木不见森林,所以最后我想我们还是先按照开发文档的节奏,一起来做UI5的最佳实践练习.在练习中对常用的一些控件以及API有一个直观的感受,如果需要细节的信息再去查文档. 这个最佳实践练习的子系列又会分为若干篇,但是不会完全按照Tutorial里面的章节来分,因为我希望每一篇都是都是一个完整

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

什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念经常被混淆,而两者也确实有着非常紧密的关系. 用过SAP的同学们都对SAP的传统的界面(SAP GUI)表示"呵呵",其实传统的SAP GUI的界面功能还是很强大的,但是对于一个新用户来说,学会使用这套界面就需要花上一两 周的时间,所以SAP入门的第一步就是学会使用SAP GUI.此外,传统的SAP GUI只能在Windows和Mac上使用,对于移动端用户没有直接的解决方案,WEBGUI的体验也非常不

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

这次我们来一起学习MVC,这个专题分为两个小节,本次主要是总览以及模型,下一次着重会介绍视图以及控制器,因为控制器其实没有太多可以讲的,所以和视图合并在一块. 1 Model View Controller (MVC)的基本概念 MVC,对于大多数人说,这是一个讲烂了的概念.不过,既然这是一个入门系列,还是要稍微讲一讲. M 代表Model - 模型 一般用来管理数据层,比如绑定后台数据. V 代表View - 视图 一般用来处理展示层,比如具体前端UI的展示. C 代表Controller -

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

继续来学习UI5的MVC模型吧,这次我们来探讨视图与控制器. 1 视图 在MVC中,视图用来定义和渲染UI.在UI5中,视图的类型是可以自定义的,除了以下预定义的四种视图类型之外,你也可以定制自己的视图类型. 预定义的四种视图类型如下: XML view JSON view JS view HTML view 如果你想定义自己的视图类型,可以通过扩展 sap.ui.core.mvc.View 这个基类来实现. 1.1 视图的加载 视图可以通过异步(async)或者同步(sync)的方式加载,默认

oracle学习入门系列之四 oracle数据库简介

oracle学习入门系列之四 oracle数据库简介 终于平滑过渡到oracle了,我们在第一篇中黑了拉里一次,这里就需要给拉里洗白了.话说当年钱钟书先生写完<围城>之后,无意中说,一个鸡蛋就算好吃,也没必要知道下蛋的母鸡是哪只.蛤蟆觉得有点不妥,钱钟书先生那是文人,自然要清高,而且他本是"下蛋"的母鸡当然不愿意被吃蛋的俗人打扰的,况且当时也没有统计粉丝一说.可是我们是吃蛋的啊,而且是大老粗,现在还统计粉丝数量,我们就需要知道谁下的蛋,是不是毒蛋,对不对?也得看看下了这么好

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

公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP UI5上传图片 用XSJS存储在HANA中的方法 前言部分 大家可以关注我的公众号,公众号里的排版更好,阅读更舒适. 正文部分 玩就玩一个高级的,此篇文章包含了SAP UI5,SAP HANA,SAP XS HANA串联起来 业务需求:SAP UI5传输图片,最后存储到HANA中. 下面体验一下梦幻般的做法,O(∩_∩)O

Python学习系列(一)(基础入门)

Python入门 本系列为Python学习相关笔记整理所得,IT人,多学无害,多多探索,激发学习兴趣,开拓思维,不求高大上,只求懂点皮毛,作为知识储备,不至于落后太远.如果兴趣学习者,推荐一个基础视频:http://edu.51cto.com/lesson/id-11637.html 本文主要介绍Python的相关背景,环境搭建. 一.了解Python 1,关于Python的语言特点: 借用Python官网Https://www.python.org的解释: Python is powerful

Python学习系列(四)Python 入门语法规则2

Python学习系列(四)Python 入门语法规则2 2017-4-3 09:18:04 编码和解码 Unicode.gbk,utf8之间的关系 2.对于py2.7, 如果utf8>gbk, utf8解码成Unicode,再将unicode编码成gbk 对于py3.5 如果utf8>gbk, utf8 直接编码成gbk(中间那一步直接被优化了) 3.很多时候,这个可以直接跳过,只有当编码出下问题的时候,再考虑这个知识点 二.运算符 1.算数运算: 2.比较运算: 3.赋值运算: 4.逻辑运算