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://www.noobyard.com/tag/http://localhost:8080 出現天藍色頁面