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。