SAPUI5教程——框架简介以及应用实践

前言

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)变得愈发普及，希望更多的人能够关注和学习，共同交流。

个人微信公众号