Размещен в sapui5 14.11.2017 16:23
Теги: javascript, openui5, sap, sapui5
Напишем наше первое приложение на sapui5! Но это будет не простой "Hello, world", программа будет выводить на экран текст и кнопку. По нажатию на кнопку будет показываться сообщение.
Создадим файл index.html со следующим содержимым:
<!DOCTYPE html> <html> <head> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <title>Hello World</title> <script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_belize' data-sap-ui-libs='sap.m' data-sap-ui-compatVersion='edge' data-sap-ui-preload='async'> </script> <script> sap.ui.getCore().attachInit(function () { var oLabel = new sap.m.Label(); oLabel.setText("Hello, world!"); var oButton = new sap.m.Button(); oButton.setText("Press me!"); oButton.setType(sap.m.ButtonType.Transparent); oButton.attachPress(function(){ sap.m.MessageToast.show("Hello, world!"); }); oLabel.placeAt("content"); oButton.placeAt("content_2"); }); </script> </head> <body class='sapUiBody'> <div id='content'></div> <div id='content_2'></div> </body> </html>
А теперь пройдемся по коду и разберем что тут написано.
Первое, это подключение SAPUI5 (Bootstrapping UI5) к нашему проекту с CDN:
<script id='sap-ui-bootstrap' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_belize' data-sap-ui-libs='sap.m' data-sap-ui-compatVersion='edge' data-sap-ui-preload='async'> </script>
Мы подключили библиотеку и инициализировали со следующими параметрами:
Браузер загружает ядро sapui5 с CDN (https://sapui5.hana.ondemand.com/resources/sap-ui-core.js). Загружаются библиотеки, которые мы указали в атрибуте data-sip-ui-libs. Когда загрузятся все необходимые библиотеки, фраемворк готов к работе. Запускается событие «init» ядра. Этот процесс загрузки и инициализации SAPUI5 называется «начальной загрузкой» (bootstrapping). В нашем примере ресурсы загружаются асинхронно, что повышает производительность.
Когда SAPUI5 загружен, ядро запускает событие init, чтобы сообщить, что библиотека готова к работе. В приложении мы отслеживаем это событие и запускаем логику приложения:
sap.ui.getCore().attachInit(function () {});
В событии реализуем два "контрола": sap.m.Label (https://sapui5.hana.ondemand.com/#/api/sap.m.Label) и sap.m.Button (https://sapui5.hana.ondemand.com/#/api/sap.m.Button):
var oLabel = new sap.m.Label(); … var oButton = new sap.m.Button();
Для Label установим свойство text = "Hello, world!" (текст).
Для Button установим свойство text = "Press me!" (текст кнопки) и свойство Type = sap.m.ButtonType.Transparent (стиль/тип кнопки).
Полный набор свойств к элементам смотрите в документации https://sapui5.hana.ondemand.com/#/api:
oLabel.setText("Hello, world!"); … oButton.setText("Press me!"); oButton.setType(sap.m.ButtonType.Transparent);
Для Button установим событие Press. При нажатии (press) на кнопку будет вызываться метод sap.m.MessageToast.show(), который выведет сообщение "Hello, world!":
oButton.attachPress(function(){ sap.m.MessageToast.show("Hello, world!"); });
В заключении добавим наши элементы к div'ам:
oLabel.placeAt("content"); oButton.placeAt("content_2");
Запускаем приложение!
Исходные коды к первому уроку можно скачать по ссылке https://github.com/kannade/hello_sapui5.
kostia
как же все просто и доступно написан )))))
Olga
Спасибо ! Всё понятно ! ))
kndemchtbk
Muchas gracias. ?Como puedo iniciar sesion?