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

時間 2019-12-10

標籤 open sap ui5 學習入門系列之一掃盲熱身简体版

原文原文鏈接

1 UI5代碼結構

上一次咱們一塊兒用了20秒的時間完成一個UI5版的Hello World。應用打開後有一個按鈕，按鈕的文字是Hello World，點擊這個按鈕以後，按鈕會慢慢的消失掉(Fade out)。javascript

那咱們此次就來看一看爲了實現這麼一個簡單的功能，OpenUI5框架至少須要提供哪些內容，或者說咱們經過這麼一個簡單的應用來看一下一個最簡單的UI5的應用程序的結構。html

HTML部分應該不用多說，咱們只看和UI5相關的代碼，第一部分咱們稱爲Bootstrap，包含如下代碼段：java

<!-- 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>

這是一段嵌入的javascript代碼，首先引入了UI5的核心運行時庫sap-ui-core.js，接下來代碼經過標籤設定了兩個屬性，分別是主題： data-sap-ui-theme ，以及在應用中將會引用到的UI庫： data-sap-ui-lib。web

接下來這一段咱們稱爲Application，咱們的應用的主體就在這裏了，包含的是以下代碼段：bootstrap

  <!-- 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>

這段代碼也很容易理解，首先建立一個button的對象，而後設置button對象顯示的文本爲"Hello World!"，接着爲這個按鈕註冊一個點擊事件——按下去的時候按鈕本身會消失，最後把這個按鈕放在一個叫作uiArea的地方。 uiArea在哪裏呢？接下來看第三段代碼。瀏覽器

第三段代碼就稱之爲UI-AREA：tomcat

<div id="uiArea"></div>

一個div，並將其id設置爲咱們以前所用到的uiArea。app

簡單嗎？很是簡單，第一部分Bootstrap引入運行環境以及一些經常使用配置文件，第二部分Application中加入HTML控件以及相應的後臺數據和業務邏輯，並將其放入到第三部分UI-AREA中。框架

最後仍是再看一下，有些囉嗦，熟悉UI5開發的能夠直接無視，可是對於UI5開的新手來講，掌握了這個基本結構，就清楚了UI5程序的最基本的脈絡。webapp

Figure 1: UI5應用的結構

2 UI5 Mobile

UI5中最重要的庫是sap.m，目前大多數SAP Fiori的應用都是基於這個庫來開發，使用這個庫可讓應用在不一樣的終端、平臺以前無縫切換，響應式的設計可讓應用的UI在不一樣分辨率的設備上呈現出最適合的界面。

2.1 一個簡單的例子

下面咱們用sap.m庫來開發一個典型的移動端網頁應用，這個應用由兩個頁面組成，兩個頁面能夠自由切換，第二頁面有一個按鈕，點擊能夠顯示當前客戶端的設備信息。

直接上代碼以下：

<!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>Mobile App Example</title>
  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
  <script id="sap-ui-bootstrap"
          src="http://localhost:8080/openui5/resources/sap-ui-core.js"
          data-sap-ui-libs= "sap.m"
          data-sap-ui-theme= "sap_bluecrystal">
  </script>

  <script>
      // create a mobile App
      var app = new sap.m.App("myApp", {
        initialPage:"page1"});

      var page1 = new sap.m.Page("page1", {
        title: "Initial Page",
        content : new sap.m.Button({ 
          text : "Go to Page 2",
          press: function() {
            app.to("page2"); 
          }
        })
      });

      var page2 = new sap.m.Page("page2", {
        title: "Page 2",
        showNavButton: true,
        navButtonPress: function(){ 
          app.back();         
        }
      });

      var oTextarea = new sap.m.TextArea({
        value : "output area",
        width : "100%",
        rows : 12
      });

      var oButton = new sap.m.Button({
        text: "Click to get Device Information",
        enabled: true,
        press : function() {
          var output = "";
          for (property in sap.ui.Device.system.SYSTEMTYPE) {
            var systemtype = sap.ui.Device.system.SYSTEMTYPE[property];
            output += systemtype + ': ' + sap.ui.Device.system[systemtype] +';\n';
          }
          oTextarea.setValue(output);
        }                               
      });

      page2.addContent(oButton);
      page2.addContent(oTextarea);

      app.addPage(page1).addPage(page2); // add both pages to the App
      app.placeAt("content"); // place the App into the HTML document
    </script>
  </head>
  <body class="sapUiBody">
    <div id="content"></div>
  </body>
</html>

在tomcat下的webapps/ex1下新建一個文件叫作index2.html，把上面的代碼貼入，保存後直接打開瀏覽器運行：

http://localhost:8080/ex1/index2.html

打開瀏覽器的開發者工具，以Chrome爲例，按F12，選擇Device爲 Apple iPhone 6,並按F5刷新，你應該能夠看到以下界面：點擊Go to Page2，切換到第二個頁面，而後點擊Click to get Device Information，能夠獲得當前設備的信息。

Figure 2: UI5 Mobile第一個例子

2.2 用到的控件

以上是一個很簡單的例子，從中咱們用到了這麼幾個控件：

2.2.1 sap.m.App

通常而言sap.m.App (如下簡稱App)是做爲UI5移動應用的根節點元素(root element)，因此在一個UI5 移動應用的一開始，咱們就建立一個App對象，並把這個App置入UI Area中。

咱們能夠對這個控件作一些定製化，查看這個控件的API Reference，看到它有這麼幾個屬性：

homeIcon
backgroundColor
backgroundImage
backgroundRepeat
backgroundOpacity

咱們隨便挑一個屬性來看一下怎麼用，就設置背景顏色吧，使用 backgroundColor

找到以下代碼：

var app = new sap.m.App("myApp", {initialPage:"page1"});

改成：

var app = new sap.m.App("myApp", {
  backgroundColor: "blue",
  initialPage:"page1"});

從新打開應用的url，顯示效果以下：

Figure 3: UI5 Mobile第一個例子-修改App背景顏色

好吧，很難看不是嗎，因此儘可能不要去修改背景、前景之類的，由於咱們有指定主題，因此若是你須要定製不一樣的界面風格，儘可能經過定製主題來實現，這個咱們在以後會一塊兒來探討。

2.2.2 sap.m.Page

App是應用的主容器，可是一個應用會有多個頁面，每個頁面就是一個Page。對一個Mobile來講，一個應用每次只能顯示一個Page到當前屏幕。若是是一個Tablet或者Desktop，能夠顯示一個做爲導航的 Page和一個詳細信息的Page，好比典型的Master Detail應用。

在上面的例子中，咱們建立了兩個Page，並經過App的addPage方法把兩個Page都添加到App中，並指定page1做爲初始頁面。

頁面的導航或者說路由如何實現？能夠看到UI5中很大程度上封裝並簡化了導航的操做，經過App的實例對象的to方法和back方法能夠方便的在Page之間進行切換，固然前提是你已經把Page添加到App中。若是你想在運行時動態添加頁面的話，在添加頁面以前是不能經過to方法來導航的。固然了，由於這個例子只有兩個頁面，因此相對來講頁面導航比較簡單，若是是一個複雜的應用，頁面深度在兩層以上，簡單的經過App的to和back就沒法知足需求了，這就須要用到component和route來實現了，這裏先簡單的提一下，之後應該會有專題來介紹的。

總的來講，Page是一個移動應用顯示屏幕的最基本(Fundamental)容器，屏幕上的其餘控件都須要放在Page的content下，或者經過Page的AddContent方法來逐個加入。

2.2.3 sap.m.TextArea

這個不要多介紹了，多行文本框，能夠顯示多行文本，例子中展現了一個最基本的用法。

2.2.4 sap.m.Button

按鈕，也無需多介紹，按鈕做爲網頁中最多見的控件在UI5中有不少種樣式和用法，咱們這裏用的是一個最基本的按鈕控件。這裏給按鈕添加了一個方法，經過sap.ui.Device類讓其能夠顯示當前設備的類型。

3 總結

UI5學習入門系列的第一篇：掃盲與熱身到這裏就結束了，咱們從中瞭解了UI5的起源、和SAP Fiori的關係，而且作了兩個小練習，一個用了UI5通用控件庫，另外一個用了UI5的移動庫，代碼自己的功能不重要，最主要的是對UI5的應用有一個直觀的感覺，大致知道UI5的應用的結構，在後續的文章中我會一一介紹一些重要的控件及其用法，最後咱們經過一個綜合的練習來結束入門系列，這是我目前的想法。

要說明的是，在之後的系列博文中咱們基本上都會使用移動庫 sap.m 來進行開發，這也是最符合SAP的Best Practice。