OPEN(SAP) UI5 學習入門系列之一：掃盲與熱身（上）

1 掃盲

什麼是SAP Fiori？
瞭解SAP UI5必需要從SAP Fiori開始，二者概念常常被混淆，而二者也確實有着很是緊密的關係。用過SAP的同窗們都對SAP的傳統的界面（SAP GUI）表示「呵呵」，其實傳統的SAP GUI的界面功能仍是很強大的，可是對於一個新用戶來講，學會使用這套界面就須要花上一兩周的時間，因此SAP入門的第一步就是學會使用SAP GUI。此外，傳統的SAP GUI只能在Windows和Mac上使用，對於移動端用戶沒有直接的解決方案，WEBGUI的體驗也很是很差。javascript

Figure 1: SAP GUI建立銷售訂單的界面html

鑑於此，SAP開發了一整套新的用戶交互系統（UX)，叫作SAP Fiori。SAP Fiori的官方定義以下:前端
```
SAP Fiori is the new user experience (UX) for SAP software that applies
modern design principles. SAP solutions, such as the SAP Business Suite
powered by SAP HANA, are using the SAP Fiori UX to provide a personalized,
responsive, and simple user experience.
```
抓住幾個關鍵字， modern design principles 就是符合當前的前端設計潮流，好比簡潔化、平面化， personalized 就是更個性化，更以用戶爲中心，每一個用戶的界面都是不同的， responsive 能夠自適應不一樣的終端， simple user experience 也是最終目的，讓用戶使用起來最簡單，一目瞭然。如今最新發布的SAP第四代ERP產品SAP S/4 HANA就是徹底基於SAP Fiori。java

Figure 2: SAP Fiori界面web

若是想了解更多SAP Fiori的信息能夠查看官網以及 All Things SAP Fiorisql
什麼SAP UI五、OPEN UI5？
SAP UI5是SAP UI Development Toolkit for HTML5的簡稱，它是一套基於HTML5的UI開發組件，是SAP爲了快速開發前述的Fiori風格的UI、構建企業級產品的javascript框架，擁有豐富的界面控件、CSS頁面展現模板、上百個工業圖標，同時支持控件的擴展。apache

那什麼又是OPEN UI5？SAP基於Apache 2.0協議將這套控件貢獻給開源社區，造成的開源版本叫作OPEN UI5，基本上這套版本主要仍是由SAP更新，而SAP UI5和OPEN UI5的功能是比較接近的，或者說OPEN UI5相比於SAP UI5來講，重要功能基本沒有減小。bootstrap

咱們接下來不作區分，統稱UI5，而因爲OPEN UI5是開源的，因此基本上之後用到的庫都會是基於OPEN UI5。瀏覽器

UI5和SAP Fiori是什麼關係？
從二者的定義能夠看出來，UI5是一個具體的前端框架，而SAP Fiori是一個前端交互標準，SAP官方基於UI5框架開發符合Fiori風格的App的合集通常稱爲SAP Fiori Apps。tomcat

2 搭建環境

簡單的掃盲以後，咱們來親自建立一個UI5的應用吧。工欲善其事必先利其器，首先咱們要搭建UI5的開發和運行環境。

2.1 OpenUI5運行庫

截止到今天（2015-07-23），OpenUI5的最新文檔版本是1.28.12，官網(Download)提供了運行時環境以及帶完整文檔的SDK版本下載，因爲咱們常常須要查詢API文檔，因此下載SDK版本是一個更好的選擇。

2.2 運行環境

目前企業級的UI5產品通常運行在SAP HANA或者SAP NetWeaver下，咱們因爲是作練習，並且目前的練習還不須要用到後臺數據，因此Tomcat就能夠知足咱們需求了。下載tomcat地址：http://tomcat.apache.org/ 7.0或者8.0均可以，固然無論哪一個版本，JDK都是須要的，自行下載並配置好環境，啓動tomcat。若是一切運行正常的話，本地瀏覽器打開 http://localhost:8080 應該能夠看到tomcat的界面。

Figure 3: Tomcat Web界面首頁

在tomcat的webapps目錄下建立一個目錄，好比openui5，而後把以前下載的OPENUI5的SDK解壓，扔到openui5目錄下，目錄結構相似 <tomcat path>/webapps/openui5 ，此時打開 http://localhost:8080/openui5

Figure 4: OpenUI5 SDK首頁

有了這個文檔，基本上你就能夠跟着上面的例子一步一步去練習了。在以後準備的一系列的入門教程中，不少內容也是來自於這份SDK文檔。

怎麼使用這份文檔？我我的以爲很是有用的是這裏 http://localhost:8080/openui5/explored.html 從中你基本上能夠找到全部的控件，長什麼樣以及怎麼使用都有詳細的例子。

2.3 開發環境

SAP UI5有Eclipse的插件，我不太清楚對於OpenUI5這個插件是否是也可使用。同時，我以爲手工來創建文件目錄更有助於對UI5項目的結構的理解。因此個人建議是任意一種帶語法高亮的文本編輯器便可。推薦的有EditPlus++，Sublime Text或者Emacs、VIM。

3 建立第一個UI5應用

按照傳統，咱們須要寫一個可以輸出 Hello World 的應用做爲第一個應用。

在<tomcat>/webapps/下新建一個目錄，叫ex1或者任意你喜歡的名字，而後新建一個文件index.html，把下面的代碼貼入。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>SAPUI5 in 20 Seconds</title>
    <!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
    <script id="sap-ui-bootstrap"
        src="http://localhost:8080/openui5/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-libs="sap.ui.commons"></script>

    <!-- 2.) Create a UI5 button and place it onto the page -->
    <script>
        // create the button instance
        Var myButton = new sap.ui.commons.Button("btn");

        // set properties, e.g. the text (there is also a shorter way of setting several properties)
        myButton.setText("Hello World!");

        // attach an action to the button's "press" event (use jQuery to fade out the button)
        myButton.attachPress(function(){$("#btn").fadeOut()});

        // place the button into the HTML element defined below
        myButton.placeAt("uiArea");

        // an alternative, more jQuery-like notation for the same is:  
        /*
        $(function(){
            $("#uiArea").sapui("Button", "btn", {
                text:"Hello World!",
                press:function(){$("#btn").fadeOut();}
            });
         });
         */
     </script>
</head>
<body class="sapUiBody">

    <!-- This is where you place the UI5 button -->
    <div id="uiArea"></div>
</body>
</html>

這個例子在SDK文檔中在UI Development Toolkit for HTML(OpenUI5) -> Get Started -> Tutorials -> Create Your First OpenUI5 Application。這裏是相同的拷貝，只是對於 UI5庫的定位稍做改動，定位到咱們本身的本地資源中。若是你以前沒有下載完整的SDK，而是隻下載了運行時環境，那麼只要把resource這個目錄放在當前的項目目錄中，好比ex1/resources，而後把以上這段代碼

src="http://localhost:8080/openui5/resources/sap-ui-core.js"

換成下面的便可。

src="./resources/sap-ui-core.js"

好了，如今咱們打開 http://localhost:8080/ex1 你將會看到如下：

Figure 5: 第一個練習Hello World

若是你看到上面的界面，恭喜你，咱們完成了這趟UI5之旅的第一步。

今天就到這裏吧，在下篇中，咱們將會探究咱們寫的這段短短的代碼具體是什麼意思。