sap ui5教程（0）简介、环境搭建、创建项目

因为去sap公司实习原因，即将接触sap ui5框架，这里记录我对sap ui5的学习过程

1、简介

SAP UI5： sap ui5是sap公司推出的前端 UI框架，用js编写，有丰富的组件可以组合使用。

OpenUI5: SAP UI5的开源版本，核心框架和SAP UI5一样，但移除了一些库

模式： sap ui5采用MVC（model业务模型,view显示页面,controller控制器）类型的框架设计。

SAP Fiori: 一个前端 交互标准，比起以前的的SAP GUI更加简洁，用户不用花很长时间适应，可以适应不同用户不同终端。

SAP Fiori Apps: 符号Fiori风格的APP（更简单，使用SAP UI5框架开发）

类库： SAP UI5 提供很多核心类库，完成所需功能，如sap.m（移动设备的响应，常用控件List, Table），sap.ui(桌面平台的响应，常用控件table)，sap.ca（标准app类库）。

2、准备和配置开发环境

SAP UI5开发IDE：

• eclipse SAP
• SAP wbe IDE

1、SAP Web IDE
SAP Web IDE 是基于 Eclipse 内核的IDE，分为以下两种：

• 在线的试用版本（但服务器在德国，访问的网速特别慢）
• Personal Edition，在本机启动和编写代码（但功能更新比不上在线版本）

SAP IDE无需配置可以直接使用

2、eclipse的配置
在eclipse的help>install new software中选添加，然后在其中输入该eclipse对应的插件版本的链接（可在 https://tools.hana.ondemand.com/ 查看eclipse版本和插件的对应信息），选择UI Development Toolkit for HTML5进行安装

安装完成重启eclipse即可

3、SAP Web IDE与eclipse比较的优点：

• 支持基于 XML View 的可视化操作，支持控件拖放;
• 支持 Application Descriptor (manifest.json) 文件编辑的 ApplicationDescriptor Editor:
• 根据 Template 生成项目文件的结构，减少开发的工作量。SAP 停止对 Eclipse 开发插件SAP Developer Tools for Eclipse的支持，后续 IDE 功能的更新将主要在 Web IDE。
• 提供内置 Proxy（代理），解决开发页面运行的 cross-origin（跨源） 问题，方便开发测试。

3、操作

1、SAP Web IDE的使用

• 打开IDE: 在https://account.hanatrial.ondemand.com 链接登陆后，选择service-> sap web ide-> go to service

• 创建Fiori项目：点击：New project from template ->SAPUI5 Application ->输入项目名称，Namespace空着 -> 初始化view，view 类型选择xml，填入view名称(这里是app) -> finish

• 运行：右键新建的项目 -> Run -> Run as -> web Application

2、eclipse使用
（1）创建sapui5项目：
Eclipse 中，通过菜单 File -> New -> Other，选中 SAPUI5 Application Development 文件夹下 Application Project
（2）项目配置:
点击 Next，输入项目名，Library 选择 sap.m，去掉 Create an initial View 前面的勾，然后点击 Finish。

注1： sap.ui.commons 和 sap.m 是两个不同的 UI 库，但现在因为跨平台的原因，sap.ui.commons 中控件基本都被标记为 deprecated（不支持），所以我们直接选择 sap.m。
注2： View 代表 MVC 开发模型中的视图 (View)，第一个例子，为了简单，我们先不考虑 MVC 模式。

（3）运行项目： 在 Eclipse 项目文件中，运行index.html，Eclipse 启动 Tomcat。浏览器中 http://localhost:8080 出现天蓝色页面