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

1 掃盲
什麼是SAP Fiori？
瞭解SAP UI5必須要從SAP Fiori開始，兩者概念經常被混淆，而兩者也確實有着非常緊密的關係。 用過SAP的同學們都對SAP的傳統的界面（SAP GUI）表示，其實傳統的SAP GUI的界面功能還是很強大的，但是對於一個新用戶來說，學會使用這套界面就需要花上一兩 周的時間，所以SAP入門的第一步就是學會使用SAP
GUI。此外，傳統的SAP GUI只能在Windows和Mac上使用，對於移動端用戶沒有直接的解決方案，WEBGUI的體驗也非常不好。
Figure 1: SAP GUI創建銷售訂單的界面
鑑於此，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。
Figure 2: SAP Fiori界面
如果想了解更多SAP Fiori的信息可以查看官網 以及 All
Things SAP Fiori
什麼SAP UI5、OPEN UI5？
SAP UI5是SAP UI Development Toolkit for HTML5的簡稱，它是一套基於HTML5的UI開發組件，是SAP爲了快速開發前述的Fiori風格的UI、構建企業級產品的javascript框架， 擁有豐富的界面控件、CSS頁面展示模板、上百個工業圖標，同時支持控件的擴展。
那什麼又是OPEN UI5？SAP基於Apache 2.0協議將這套控件貢獻給開源社區，形成的開源版本叫做OPEN UI5，基本上這套版本主要還是由SAP更新，而SAP UI5和OPEN UI5的功能是 比較接近的，或者說OPEN UI5相比於SAP UI5來說，重要功能基本沒有減少。
我們接下來不做區分，統稱UI5，而由於OPEN UI5是開源的，所以基本上以後用到的庫都會是基於OPEN UI5。
UI5和SAP Fiori是什麼關係？
從兩者的定義可以看出來，UI5是一個具體的前端框架，而SAP Fiori是一個前端交互標準，SAP官方基於UI5框架開發符合Fiori風格的App的合集一般稱爲SAP Fiori Apps。

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之旅的第一步。
今天就到這裏吧，在下篇中，我們將會探究我們寫的這段短短的代碼具體是什麼意思。

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

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

1 掃盲

2 搭建環境

2.1 OpenUI5運行庫

2.2 運行環境

2.3 開發環境

3 創建第一個UI5應用

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

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

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

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結