1 UI5代碼結構
上一次我們一起用了20秒的時間完成一個UI5版的Hello World。應用打開後有一個按鈕，按鈕的文字是Hello World，點擊這個按鈕之後，按鈕會慢慢的消失掉(Fade out)。
那我們這次就來看一看爲了實現這麼一個簡單的功能，OpenUI5框架至少需要提供哪些內容，或者說我們通過這麼一個簡單的應用來看一下一個最簡單的UI5的應用程序的結構。
HTML部分應該不用多說，我們只看和UI5相關的代碼，第一部分我們稱爲Bootstrap，包含以下代碼段：
<!-- 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。
接下來這一段我們稱爲Application，我們的應用的主體就在這裏了，包含的是如下代碼段：
<!-- 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：
<div id="uiArea"></div>
一個div，並將其id設置爲我們之前所用到的uiArea。
簡單嗎？非常簡單，第一部分Bootstrap引入運行環境以及一些常用配置文件，第二部分Application中加入HTML控件以及相應的後臺數據和業務邏輯，並將其放入到第三部分UI-AREA中。
最後還是再看一下，有些囉嗦，熟悉UI5開發的可以直接無視，但是對於UI5開的新手來說，掌握了這個基本結構，就清楚了UI5程序的最基本的脈絡。
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。