Урок 7. SapUI5: Диалоговые окна и фрагменты + i18n

Размещен в sapui5 08.12.2017 14:29
Теги: , , ,

В уроке 4 мы познакомились с фрагментами и использовали их не по назначению.

Фрагменты надо использовать в повторяющихся элементах пользовательского интерфейса, где нет необходимости использовать логику (фрагменты не имеют собственного контроллера).

Один из самых лучших примеров использования фрагментов — Диалоговые окна (sap.m.Dialog)!

Пример — https://github.com/kannade/dialog_sapui5.

Создадим новый проект.
Подключим в index.html представление sap.training.view.Main ({пространство имен sap.training}/view/Main.view.xml):

/dialog_sapui5/blob/master/webapp/index.html
1
2
3
4
5
6
7
8
9
var oView = sap.ui.view({
    id: "idMain",
    viewName: "sap.training.view.Main",
    type: sap.ui.core.mvc.ViewType.XML
});
 
oView.placeAt("content");

В представлении sap.training.view.Main ({пространство имен sap.training}/view/Main.view.xml) сделаем кнопку с событием press="onOpenDialog" и текстовое поле:

/dialog_sapui5/blob/master/webapp/view/Main.view.xml
1
2
3
4
5
<button press="onOpenDialog" text="{i18n>openDialog}"/>
<text id="idText"></text></button>

Опишем фрагмент sap.training.view.Dialog ({пространство имен sap.training}/view/Dialog.fragment.xml), который будет отвечать за само диалоговое окно:

/dialog_sapui5/blob/master/webapp/view/Dialog.fragment.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<core:fragmentdefinition xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form" xmlns="sap.m">
	<dialog title="Диалоговое окно в фрагменте">
		<beginbutton>
			<button press="onCloseDialog" text="{i18n>dialogClose}"/>
		</button></beginbutton>
		<content>
			<f:simpleform>
				<f:content>
					<label text="Имя"></label>
					<input id="idInput"/>
				</f:content>
			</f:simpleform>
		</content>
	</dialog>
</core:fragmentdefinition>

А теперь перейдем к контроллеру sap.training.controller.Main ({пространство имен sap.training}/controller/Main.controller.js).

Первое — создадим модель i18n.

В представлениях для вывода текста мы используем такие конструкции {i18n>dialogClose}.

«i18n» — сокращение от английского слова «internationalization» (Интернационализация).

«i18n» — это модель, упрощающая адаптацию приложения к языковым особенностям региона пользователя.
В данном примере в файле i18n определим две фразы:

/dialog_sapui5/blob/master/webapp/i18n/i18n.properties
1
2
openDialog=Открыть диалоговое окно
dialogClose=Ok

Так как главное представление мы задали напрямую, а не через Shell (ComponentContainer), то i18n придется создать принудительно:

/dialog_sapui5/blob/master/webapp/controller/Main.controller.js
1
2
3
4
5
6
7
8
9
10
onInit: function() {
			//так как подключаем не shell, создадим модель i18n
			var oResourceModel = new sap.ui.model.resource.ResourceModel({				bundleName: "sap.training.i18n.i18n"
			});
 
			// Устанавливаем для ядра с именем i18n
			sap.ui.getCore().setModel(oResourceModel, "i18n"); 
		},

Переходим к самому главному, определяем три метода для работы с диалоговым окном

/dialog_sapui5/blob/master/webapp/controller/Main.controller.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
_getDialog: function() {	 if (!this._oDialog) {
		 //создаем фрагмент
		 this._oDialog = sap.ui.xmlfragment("idFrag", "sap.training.view.Dialog", this);
 
		 //Добавляем зависимости для корректного отображения модели
		 this.getView().addDependent(this._oDialog);
			}
		 return this._oDialog;
		},
 
onOpenDialog: function() {	 this._getDialog().open();
		},
 
onCloseDialog: function() {	 this._getDialog().close();
 
                //обращаемся к полю ввода, расположенного в фрагменте
		var oInput = sap.ui.core.Fragment.byId("idFrag", "idInput");
		var oText = this.getView().byId("idText");
		oText.setText("Привет " + oInput.getValue());
		}

С этим примером все :).
Диалоговое окно при клике открывается и закрывается, но не верьте мне на слово, попробуйте САМИ!

P.S.: Фрагменту можно задать собственный контроллер!

Посмотрите на 4 строку

/dialog_sapui5/blob/master/webapp/controller/Main.controller.js
1
2
3
4
_getDialog: function() {
	 if (!this._oDialog) {
		 //создаем фрагмент
		 this._oDialog = sap.ui.xmlfragment("idFrag", "sap.training.view.Dialog", this);
/dialog_sapui5/blob/master/webapp/controller/Main.controller.js
1
2
3
4
_getDialog: function() {
	 if (!this._oDialog) {
		 //создаем фрагмент
		 this._oDialog = sap.ui.xmlfragment("idFrag", "sap.training.view.Dialog", sap.ui.controller("sap.training.controller.FragCont"));

В таком случае фрагмент будет иметь контроллер /controller/FragCont.controller.js.

Оставить комментарий: