Урок 8. SapUI5: Модели. Взаимодействие интерфейса с моделью. Биндинг.

sap.ui.getCore().attachInit(function() {
	new sap.m.Shell({
		app: new sap.ui.core.ComponentContainer({
			async	: true,
			height : "100%",
			name : "alfa.DataBindingExample",
			propagateModel : true		})
	}).placeAt("content");
});

<root>
	<stores>
		<store name="Ленинский проспект">
			<info>
				<employees>45</employees>
				<manager>Кузнецова Ирина Семеновна</manager>
			</info>
			<product count="123" price="54.99" weight="23.79">Яблоки</product>
			<product count="54" price="103.99" weight="15.17">Груши</product>
			<product count="95" price="65" weight="197">Апельсины</product>
			<product count="4" price="165" weight="9">Манго</product>
			<product count="144" price="85" weight="932">Грейпфруты</product>
		</store>
		<store name="Академическая">
			<info>
				<employees>25</employees>
				<manager>Петрова Елена Ивановна</manager>
			</info>
			<product count="93" price="45" weight="23.79">Груши</product>
			<product count="23" price="120" weight="321">Апельсины</product>
			<product count="900" price="100" weight="153">Яблоки</product>
		</store>
	</stores>
</root>

onInit: function() {
	var oMdl = new sap.ui.model.xml.XMLModel(); // определяем модель
	oMdl.loadData("model/products.xml"); //загружаем данные
	this.getView().setModel(oMdl); //устанавливаем модель для данного представления
}

<mvc:view displayBlock="true" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml"
	controllerName="alfa.DataBindingExample.controller.XmlModelView" xmlns:z="sap.ui.layout">
	<panel class="panelStyle" headerText="XML модель" expandable="true" expanded="false">
		<content>
			<z:verticallayout>
				<text text="Название магазина 2: {/stores/store/1/@name}"></text>
				<text text="Количество продукта 2: {/stores/store/1/product/1/@count}"></text>
			</z:verticallayout>
			<list headerText="Магазины" noDataText="Drop list items here" items="{/stores/store/}">
				<standardlistitem type="Navigation" title="{@name}" description="{info/manager}" icon="sap-icon://picture"
					counter="{ path: 'info/employees/text()', formatter : '.formatter.formatToInt' }"></standardlistitem>
			</list>
		</content>
	</panel>
</mvc:view>

{
	"stores": [{
		"name" : "Ленинский проспект",
		"info": {
			"employees": 45,
			"manager": "Кузнецова Ирина Семеновна"
		},
		"products": [{
			"name": "Яблоки",
			"count": "123",
			"price": 54.99
		}, 
…
		]
	}, {
		"name" : "Академическая",
		"info": {
			"employees": 25,
			"manager": "Петрова Елена Ивановна"
		},
		"products": [{
			"name": "Апельсины",
			"count": "93",
			"price": 45
		},
…
]
	}]
}

onInit: function() {
	var oMdl = new sap.ui.model.json.JSONModel(); //определяем модель
	oMdl.loadData("model/prod.json"); //загружаем модель
	this.getView().setModel(oMdl); //устанавливаем модель
	this.changeTableBinding();
},

<text text="Магазин 2: {/stores/1/name}"></text>
<text text="Количество продукта 2: {/stores/1/products/1/count}"></text>
<list mode="SingleSelectMaster" headerText="Магазины" noDataText="Drop list items here" id="__list0" items="{/stores}"
	selectionChange="onSelList">
<standardlistitem type="Navigation" title="{name}" description="{info/manager}" counter="{info/employees}" icon="sap-icon://picture" id="__item0"></standardlistitem>
</list>

onSelList: function(oEvt) { //нажали на элемент из List
	this.changeTableBinding(); //вызвали метод changeTableBinding
},
 
changeTableBinding: function() {
	var oList = this.getView().byId("__list0"); // получили ссылку на List
	var oItem = oList.getSelectedItem(); // взяли выбранный элемент
	// взяли oItem.getBindingContext().sPath и определили на какой магазин нажали (смотрите картинку ниже)
       var i = oItem ? oItem.getBindingContext().sPath.split("/")[2] : 0;
 
	var oTbl = this.getView().byId("table0"); //получили ссылку на таблицу
	var oBindInfo = oTbl.getBindingInfo("items"); //получаем информацию о биндинге таблицы
 
	if (!oBindInfo) {
		return;
	}
	oTbl.bindItems({ // биндим новые строки в зависимости от нажатого магазина (i)
        //Таблица будет забиндина либо на /stores/0/products, либо на /stores/1/products
		path: "/stores/" + i + "/products",
		template: oBindInfo.template
	});
}

<table id="table0" headerText="Продукты" items="{}">
</table>

{
    	"path": "/Northwind/Northwind.svc/",
        "target": {
        "type": "destination",
        "name": "northwind"
      },
      "description": "northwind service"
    }

onInit: function() {
	var oMdl = new sap.ui.model.odata.v2.ODataModel("/Northwind/Northwind.svc/", {
		defaultCountMode: CountMode.Inline,
		useBatch: false
	});
	this.getView().setModel(oMdl);

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"./../model/formatter",
	"sap/m/GroupHeaderListItem",
	"sap/ui/model/Sorter",	"sap/ui/model/Filter",	"sap/ui/model/odata/CountMode",	"sap/ui/model/FilterOperator"], function(Controller, Formatter, GroupHeaderListItem, Sorter, Filter, CountMode, FilterOperator) {
	"use strict";

oMdl.read("/Employees", {
	urlParameters: {
		"$expand": "Orders",
		"$select": "EmployeeID,LastName,FirstName,Orders/OrderDate,Orders/ShipName",
		"$orderby": "EmployeeID desc",
		"$inlinecount": "allpages",
		"$skip": "5",
		"$top": "2"
	},
	filters: [
		new sap.ui.model.Filter({
			path: "EmployeeID",
			operator: "GE",
			value1: "1"
		})
	],
	success: function(oEvt) {
		if (oEvt) {
//тут мы должны получить ответ в параметре и забиндить результат на элемент
	}
	},
	error: function(oEvt) {
		if (oEvt) {
 
	}
	}
});
},

if (oEvt) {
	var oJsonModel = new sap.ui.model.json.JSONModel(oEvt); //oResults);
 
	//выберем представление <em>idMain</em> -> представление <em>ListingView</em> (находиться в <em>idMain</em>) -> таблицу <em>files</em> и установим для таблицы модель с именем <em>model2</em>
	sap.ui.getCore().byId("idMain").byId("ListingView").byId("files").setModel(oJsonModel, "model2");
}

<table selectionChange="onTblSel" mode="SingleSelectMaster" id="table0" headerText="Сотрудники"
				items="{ path: '/Employees', parameters: { select : 'Photo, EmployeeID,LastName,FirstName,City,HireDate' }, sorter : { path : 'City', descending: false, group: '.getGroup' }, groupHeaderFactory: '.getGroupHeader' }">
				<!--parameters: { select : 'Photo, EmployeeID,LastName,FirstName,City,HireDate' },-->
	<items>
		<columnlistitem id="firstItem" press="onTblDetail">
			<cells>
				<image src="{ path: 'Photo', formatter: '.formatter.formatImg' }"></image>
				<text text="{LastName}"></text>
				<text text="{FirstName}"></text>
				<datepicker dateValue="{HireDate}" displayFormat="dd.MM.yyyy" editable="false"></datepicker>
			</cells>
		</columnlistitem>
	</items>
</table>

getGroup: function(oContext) {
	return oContext.getProperty('City');
},
 
getGroupHeader: function(oGroup) {
	return new GroupHeaderListItem({
		title: oGroup.key,
		upperCase: false
	});
},

onTblSel: function() {
	this.changeTableBinding(); //Вызываем метод changeTableBinding
},
 
changeTableBinding: function() {
	var oTbl = this.getView().byId("table0"); //получаем ссылку на таблицу
	var oItem = oTbl.getSelectedItem(); //получаем ссылку на выбранную строку
	if (!oItem) {
		return;
	}
	var oBndCnt = oItem.getBindingContext(); // getBindingContext() от выбранной строки
	if (!oBndCnt) {
		return;
	}
 
	var oSelObj = oBndCnt.getObject(); // выбранный элемент
 
	var oTblDtl = this.getView().byId("tableDtl"); //Получаем ссылку на таблицу, в которую будем выводить
	var oBindInfo = oTbl.getBindingInfo("items");
 
	if (oBindInfo) {
		oTblDtl.bindRows({
			path: "/Employees(" + oSelObj.EmployeeID + ")/Orders", // oBindInfo.path, 
			template: oBindInfo.template,
			parameters: {
				select: "OrderID, ShipPostalCode, ShipCountry, ShipCity, ShipAddress, ShipName, OrderDate, ShippedDate, Freight"
			}
		});
         }
},

<t:column id="orderIdCol" filterProperty="OrderID" sortProperty="OrderID" hAlign="Center" width="5rem"></t:column>
…
<t:column id="addrCol" filterProperty="ShipAddress" sortProperty="ShipPostalCode, ShipCountry, ShipCity" hAlign="Center" width="20rem"></t:column>

onInit: function() {
	// Resource Model i18n
	var oResourceModel = new sap.ui.model.resource.ResourceModel({
		bundleName: "alfa.DataBindingExample.i18n.i18n"
	});
 
	// Устанавливаем для ядра с именем i18n
	sap.ui.getCore().setModel(oResourceModel, "i18n");

// коммент
firstName=Имя
lastName=Фамилия
midName=Отчество
errorPernr=При обработке табельных номеров {0} {1} {2} {3} {4} {5} {6} {7} {8} {9} {10} {11} {12} {13} {14} {15} произошла ошибка
…

<panel class="panelStyle" headerText="{i18n>panels.TitleRes}" expandable="true" expanded="false">	<content>
		<l:verticallayout width="100%">
			<l:content>
				<button text="Отобразить сообщение" press="onShowMessage"></button>
			</l:content>
		</l:verticallayout>
	</content>
</panel>

onShowMessage: function() {
	var aP = [];
	for (var i = 0; i < = 20; i++) {
		aP.push("0000000" + i);
	} //Сделали массив вида: [00000001, 00000002, 00000003, 00000004, 00000005…]
 
 
//Создаем текстовое сообщение. Берем маску errorPernr из модели i18n/i18n_ru_RU.properties и используем ее с массивом
	var sMsg = sap.ui.getCore().getModel("i18n").getResourceBundle().getText("errorPernr", aP);
 
//Глобальная передача данных. Об этом чуть ниже
	jQuery.sap.getObject("sap.alfa.dataBinding", 0);
	if (sap.alfa.dataBinding) {
		sMsg += " " + sap.alfa.dataBinding.key1;
	}
 
	sap.m.MessageToast.show(sMsg); //выводим сообщение
	}

// Использование глобальных данных
jQuery.sap.getObject("sap.alfa.dataBinding", 0);
sap.alfa.dataBinding = {
	key1: "Эта строка из глобального объекта"
};

sMsg += " " + sap.alfa.dataBinding.key1;

onInit: function() {
	// Ввод данных One-Way Data Binding vs Two-Way Data Binding
	var oData = {
		firstName: "Иван",
		lastName: "Иванов",
		midName: "Петрович"
	};
 
	var oMdl = new sap.ui.model.json.JSONModel(oData);
	// значение считывается из модели единственный раз
	// oMdl.setDefaultBindingMode(sap.ui.model.BindingMode.OneTime);
	// из модели данные передаются на view
	oMdl.setDefaultBindingMode(sap.ui.model.BindingMode.OneWay);
	// из модели данные передаются на view и из view обновляется модель
	// oMdl.setDefaultBindingMode(sap.ui.model.BindingMode.TwoWay);
	this.getView().setModel(oMdl, "inputData");
},

<label text="{i18n>firstName}" width="100%"/>
<input id="fName" width="100%" value="{inputData/>/firstName}" valueLiveUpdate="true"/>
</label><label text="{i18n>lastName}" width="100%"/>
<input id="lName" width="100%" value="{inputData/>/lastName}" valueLiveUpdate="true"/>
</label><label text="{i18n>midName}" width="100%"/>
<input id="mName" width="100%" value="{inputData/>/midName}" valueLiveUpdate="true"/>
<text width="100%" text="Введенное ФИО: {inputData>/lastName} {inputData&gt;/firstName} {inputData>/midName}"/>
<button text="Обновить значение модели из view" press="onRefreshMdl"></button>
</text></label>

onRefreshMdl: function() {
	var oMdl = this.getView().getModel("inputData");
	var sFName = this.getView().byId("fName").getValue();
	var sLName = this.getView().byId("lName").getValue();
	var sMName = this.getView().byId("mName").getValue();
	oMdl.setData({
		firstName: sFName,
		lastName: sLName,
		midName: sMName
	});
}