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 出现天蓝色页面
这里写图片描述

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

1、简介

2、准备和配置开发环境

3、操作

浏览过的版块