Урок 3. SAPUI5. SAP Web IDE. Представления (Views).

Опубликовано автором

SAP Web IDE.

До сих пор мы не задумывались о системе разработки и писали все в обычном текстовом редакторе.
Но, когда растет количество проектов, их сложность, количество файлов в проекте, разумно использовать какую-нибудь систему разработки.

Вариантов всего 2:

  1. Eclipse — довольно старая и хорошо известная система разработки.
  2. SAP Web IDE — облачная система разработки от Sap. Существует локальная версия Personal Edition (https://tools.hana.ondemand.com/#sapui5)

На самом деле вариант один — SAP Web IDE. Мы будем идти в ногу со временем и выберем облачную систему разработки. По словам самого Sap: «Пакет SAPUI5 Tools for Eclipse уже несколько лет не обновляется и не будет!»

Идем на https://account.hanatrial.ondemand.com/ и регистрируем p-аккаунт.
После регистрации переходим на https://account.hanatrial.ondemand.com/cockpit#/home/overview и выбираем Europe (Rot) — Trial:
SAP Web IDE

Жмем сюда:
SAP Web IDE

Переходим в раздел Services:
SAP Web IDE

Там ищем SAP Web IDE и нажимаем:
SAP Web IDE

На следующей странице ищем ссылочку «Go to Service«.

Добро пожаловать в SAP Web IDE!

А теперь плавно перейдем от прошлого урока и реализуем программу с тремя представлениями (views). Причем одно из них будет XML View, другое Json view, а третье JavaScript view.

Но, писать код мы не будем, а сразу импортируем готовый пример в Web IDE:

В следующем окне вставляем ссылку https://github.com/kannade/views_sapui5.git и жмем Clone.

views sapui5

Файл index.html:

/views_sapui5/blob/master/webapp/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

< !DOCTYPE HTML>
<html>
 
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8"/>
 
<title>sap.training.views</title>
 
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"sap.training": ""}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
 
<script>
var oXMLView = sap.ui.view({
id: "idXMLView",
viewName: "sap.training.view.MyXMLView",
type: sap.ui.core.mvc.ViewType.XML
});
oXMLView.placeAt("content");
 
var oJSONView = sap.ui.view({
id: "idJSONView",
viewName: "sap.training.view.MyJSONView",
type: sap.ui.core.mvc.ViewType.JSON
});
oJSONView.placeAt("content");
</script>
</head>
 
<body class="sapUiBody" id="content">
</body>
 
</html>

Подключили SapUI5, задали пространство имен sap.training ссылающееся на корневую папку.

Определили два представления:

  • oXMLView — представление в xml.
  • oJSONView — представление в json.

Файл view/MyJSONView.view.json — JSON представление

/views_sapui5/blob/master/webapp/view/MyJSONView.view.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14

 {
"Type": "sap.ui.core.mvc.JSONView",
"controllerName": "sap.training.controller.MyJSONView",
"content": [{
"Type": "sap.m.Text",
"text": "Текст из JSON view"
},
{
"Type": "sap.m.CheckBox",
"text": "No",
"select": "onCBSelect",
"id": "idCheckBox"
}]
}

Файл view/MyJSView.view.js — JavaScript представление

/views_sapui5/blob/master/webapp/view/MyJSView.view.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

 sap.ui.jsview("sap.training.view.MyJSView", {
 
getControllerName: function() {
return "sap.training.controller.MyJSView";
},
 
createContent: function(oController) {
 
var oText = new sap.m.Text({
text: "Текст из js view"
});
 
var oCheckBox = new sap.m.CheckBox(this.createId("idCheckBox"),{
text: "No"
});
 
oCheckBox.attachSelect(oController.onCBSelect, oController);
 
return [oText, oCheckBox];
}
 
});

Файл view/MyXMLView.view.xml — XML представление

/views_sapui5/blob/master/webapp/view/MyXMLView.view.xml
1
2
3
4
5
6
7
8
9

<mvc:view controllerName="sap.training.controller.MyXMLView" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
 
<text text="Это xml view" class="sapUiSmallMarginTop"></text>
<checkbox id="idCheckBox" select="onCBSelect" text="No"></checkbox>
 
<mvc:jsview id="idJSView" viewName="sap.training.view.MyJSView"></mvc:jsview> 
</mvc:view>

Во всех трех представлениях мы добавили sap.m.Text и sap.m.Checkbox, к которому применили событие select (при постановке галочки в чекбоксе будет срабатывать событие onCBSelect из соответствующего контроллера).

В XML представлении view/MyXMLView.view.xml мы вставили JavaScript представление (sap.training.view.MyJSView — {пространство имен sap.training}/view/MyJSView.view.js)

Файл controller/MyJSONView.controller.js:

/views_sapui5/blob/master/webapp/controller/MyJSONView.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

 sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
 
return Controller.extend("sap.training.controller.MyJSONView", {
 
onCBSelect: function() {
 
/*@type sap.m.CheckBox */
var oCheckBox = this.getView().byId("idCheckBox");
if (oCheckBox.getSelected()){
oCheckBox.setText("Yes");
} else {
oCheckBox.setText("No");
}
 
}
});
 
});

Файл controller/MyJSView.controller.js:

/views_sapui5/blob/master/webapp/controller/MyJSView.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

 sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
 
return Controller.extend("sap.training.controller.MyJSView", {
 
onCBSelect: function() {
 
/*@type sap.m.CheckBox */
var oCheckBox = this.getView().byId("idCheckBox");
if (oCheckBox.getSelected()){
oCheckBox.setText("Yes");
} else {
oCheckBox.setText("No");
}
 
}
 
});
 
});

Файл controller/MyXMLView.controller.js:

/views_sapui5/blob/master/webapp/controller/MyXMLView.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
"use strict";
 
return Controller.extend("sap.training.controller.MyXMLView", {
 
onCBSelect: function() {
 
/*@type sap.m.CheckBox */
var oCheckBox = this.getView().byId("idCheckBox");
if (oCheckBox.getSelected()){
oCheckBox.setText("Yes");
} else {
oCheckBox.setText("No");
}
 
}
 
});
});

Все три контроллера идентичны!
Мы определяем метод onCBSelect.
В котором смотрим, если oCheckBox нажат, то меняем атрибут «текст».

Таким образом в одном проекте можно использовать несколько различных (XML, JS, JSON) представлений.
Это просто пример, в реальных проектах, конечно, все стараются придерживаться одного стиля и реализуют как правило XML представления.
Одна из причин, по которой разработчики выбирают XML — визуальный редактор!
Попробуйте открыть представление в визуальном редакторе:
Layout Editor

Здорово? 🙂

Исходники можно скачать по ссылке — https://github.com/kannade/views_sapui5.