SAPUI5教程——框架简介以及应用实践
阅读原文时间:2021年04月20日阅读:1

前言

SAPUI5是SAP公司推出的一款前端UI技术框架,基于HTML5技术,开发语言为Javascript, 诞生于2011年,此款移动框架和SAP 系列产品贴合紧密,开发迅速,符合SAP系统的整体风格,SAPUI5是一款封闭框架(收费), 如果拥有SAP Netweaver License才可以免费试用,与SAPUI5相对应的还有一款开源框架被托管在github平台,大家可以去fork,学习一下。

作为一款重量级的框架,必然存在丰富的UI组件,SAPUI5提供了200+模块组件,可以自由组合,定制你需要的移动应用。

开发工具

开发SAPUI5可以使用多个IDE, 比如:

Eclipse: 最早一个开发工具,基于Eclipse的Plugin做的支持,可以让我在本地开发出你想要的app, 并可以借助代理server运行你的应用。

SAP WEBIDE: 一个收费版,基于BS结构的IDE工具,收费的工具,可以直接运行浏览器当中,次浏览器基于SCP云服务。

SAP Local WEBIDE: 一个WEB IDE的本地服务版本,主要是在本地搭建一个server, localhost运行你的webIDE, 但是功能比较局限,不支持部署,但是加载速度很快。

另外此核心类库支持debug运行调试,ctrl+alt+shift+s即可。

核心类库

SAPUI5提供了丰富的类库供我们选择,比如支持移动设备的sap.m, 支持图表的chart库,以及地图功能map库。

但是在实际项目中, 应用比较广泛的类库,主要有一下几个:

sap.m

主要用于移动设备的响应式组件,并支持很多移动设备特性检测,比如检测touch等,此库下面List, Table等组件使用比较广泛,而且包含了下拉刷新的功能,非常完善,并自动适应不同尺寸平台。

sap.ui

UI库包含的组件是最为丰富的,主要用于适应桌面平台,同样可以支持响应式的设计,比如sap.ui.table等组件。

sap.ca

sap.ca是官方标准app的常用类库,如果在实际开发过程当中想要拓展标准应用,必须要了解此类库的一些特性,否则拓展起来会有很大问题。

MVC模式

SAPUI5框架是一个MVC类型的框架设计,采用Model View Controller模式:

常用组件

SAPUI5提供了比较丰富的组件,借助于这些组件可以让我们迅速的开发应用,那么常用的组件有哪些呢,我们来看一下:

SplitApp

这是一个Master Detail形式的结构,可以在移动,桌面不同尺寸的设备上自适应,也是大部分app需要采用的一种架构形式。

List

列表在任何应用中是比较常见的,List在SAPUi5定义功能比较完善,支持分批加载数据,提高运行效率,支持下拉等功能,并提供给我们丰富的标准Item, 可以简单配置使用,更可以根据自身需求定义item。

Table

这是一个表单性质的的组件,支持响应式,很多是够我们做一个表单展示需要此控件的支持。自身也携带了丰富的property供我们选择。

总结

总体来讲,SAPUI5的发展势头,以及产品迭代仍旧呈现一个良好的趋势,配合SCP云的到来,SAPUI5(SAP Fiori)变得愈发普及,希望更多的人能够关注和学习,共同交流。

个人微信公众号