Модели и привязка данных в SAPUI5 (Models and Databinding).

12.02.201813.02.2018 - adminРубрика: SAPUI5Метки: data binding sapui5, Databinding, JSON Model, oData Model, Resource Model, sapui5, XML Model

SAPUI5 поддерживает концепцию MVC (Model-View-Controller ). Рассмотрим модели данных (Models) и их привязку к визуальным компонентам (View). Модель предоставляет доступ к данным различных форматов.

SAPUI5 предоставляет следующие предопределенные модели:

XML Model. Клиентская модель. Данные содержатся в файле xml. Для маленьких наборов данных, которые полностью доступны клиенту.
JSON Model. Клиентская модель. Данные содержатся в файле json. Отличается от XML модели только форматом предоставления данных.
oData Model. Серверная модель. Привязка элементов управления к данным из служб oData. Набор данных доступен только на сервере, а клиент получает данные по запросу.
Resource Model. Предназначен в основном для обеспечения текстов на разных языках, для разработки многоязычных интерфейсов, локализации приложений.

Инициализация и привязка модели данных в проектах SAPUI5

При установке модели надо различать некоторые моменты:

Установка модели глобально для всего приложения:
sap.ui.getCore().setModel(oModel2);
Установка модели глобально с присвоением имени:
sap.ui.getCore().setModel(oModel2, “model_2“);
Установка модели для всего представления (view):
this.getView().setModel(oModel2, “model_2”);
Установка модели напрямую для элемента:
sap.ui.getCore().byId(“idMain–itext”).setModel(oModel3);

Рассмотренные ниже примеры можно посмотреть и импортировать к себе в SAP Web IDE здесь:
abc.training.test3_.zip

XML Модель.

В проект добавим xml файл dataxml.xml со следующими данными:

<?xml version="1.0" encoding="UTF-8"?>
<root>
<select>
<element id="1">
<City>Москва</City>
</element>
<element id="2">
<City>Казань</City>
</element>
<element id="3">
<City>Нижнекамск</City>
</element>
</select>
</root>

В контроллере вьюшки abc.training.test3.controller.ViewMain в процедуре onInit подключим модель:

var oModel2 = new sap.ui.model.xml.XMLModel();
oModel2.loadData("data/dataxml.xml");
this.getView().setModel(oModel2, "model_2");

Если набор данных компактен и мал, то создавать xml файл не нужно. Вместо метода loadData, воспользуйтесь методом setXML:

var oModel2 = new sap.ui.model.xml.XMLModel();

oModel2.setXML("<root><select><element><City>Москва</City></element><element><City>Казань</City></element><element><City>Нижнекамск</City></element></select></root>");

this.getView().setModel(oModel2, "model_2");

В представлении abc.training.test3.view.ViewMain выводим XML модель данных в элементе управления <List>:

<List id="list2" headerText="Города (данные из формата XML)" items="{model_2>/select/element/}">
<StandardListItem title="{model_2>City}" description="{model_2>@id}"/>
</List>

При работе с xml моделью, надо помнить, что первый элемент <root> в пути не участвует!

Результат работы приложения:

JSON Модель.

В проект добавим JSON файл data.json с данными:

{
"select":
[
{ "City": "Москва" },
{ "City": "Казань" },
{ "City": "Нижнекамск" }
]
}

В контроллере представления abc.training.test3.controller.ViewMain в процедуре onInit подключим модель с другим именем:

var oModel1 = new sap.ui.model.json.JSONModel();
oModel1.loadData("data/data.json");
sap.ui.getCore().setModel(oModel1, "model_1");

В представлении abc.training.test3.view.ViewMain выводим JSON модель данных в элементах управления <List> и <Text>:

<List id="list1" headerText="Города (данные из формата JSON)" items="{model_1>/select}">
<items>
<StandardListItem title="{model_1>City}" description=""/>
</items>
</List>
<Text text="{model_1>/select/0/City/}"/>
<Text text="{model_1>/select/1/City/}"/>
<Text text="{model_1>/select/2/City/}"/>

Результат работы приложения с моделью данных JSON:

Resource Модель.

При создании проекта по шаблону, создается папка i18n с файлом i18n.properties. В этом файле текстовые данные для локализации вашего проекта под английский язык. Для того, чтоб добавить поддержку русского интерфейса, создадим методом копирования новый файл i18n_ru.properties.

В контроллере представления abc.training.test3.controller.ViewMain в процедуре onInit подключим ресурсную модель:

var oResourceModel = new sap.ui.model.resource.ResourceModel({
bundleName : "abc.training.test3.i18n.i18n"
});
sap.ui.getCore().setModel(oResourceModel, "i18n");

SapUI5 сам понимает какой языковой файл загрузить в зависимости от настроек браузера, вашего языка региона.

Во вьюшке abc.training.test3.view.ViewMain для элемента <List> создадим соединение для данных {i18n>jsontitle}:

<List id="list1" headerText="{i18n>jsontitle}" items="{model_1>/select}">
<items>
<StandardListItem title="{model_1>City}" description=""/>
</items>
</List>

В файл i18n_ru.properties добавим имя jsontitle=Города (данные из формата JSON):

title=Подключение данных
appTitle = Приложение тестирования DataBinding
appDescription=рассматриваем различные методы подключения данных
#XHED:
jsontitle=Города (данные из формата JSON)

Результат работы приложения (Можно задать язык загрузки, добавив параметр sap-ui-language=RU в url.):

oData Модель.

Серверная модель данных. Сервис oData будет возвращать наборы данных по запросам пользователя. Подключается в контроллере представления abc.training.test3.controller.ViewMain, в процедуре onInit:

onInit: function() {
var sUrl = "/sap/opu/odata/sap/ZCO_BUDGETFS_SRV/";
var oModel = new ODataModel(sUrl, {
useBatch: false
});
this.getView().setModel(oModel);
}

Весь процесс подключения и вывода данных представлен в этом примере “Подключение oData сервиса в проект SAPUI5 в SAP Web IDE“.

Удачи в изучении SAPUI5! Будут вопросы, пишите в комментариях!

SAPUI5 – фреймворк от SAP