Урок 1. SAPUI5. Первая программа «Hello, world».

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

Напишем наше первое приложение на sapui5! Но это будет не простой «Hello, world», программа будет выводить на экран текст и кнопку. По нажатию на кнопку будет показываться сообщение.

программа 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>

Мы подключили библиотеку и инициализировали со следующими параметрами:

  1. В качестве оформления выбираем тему «sap_belize».
  2. Загружаем библиотеку пользовательского интерфейса «sap.m», содержащую различные элементы управления.
  3. Чтобы использовать новейшие функции OpenUI5, мы определяем совместимость как «edge».
  4. Инициализируем асинхронный вариант подгрузки библиотек.

Браузер загружает ядро 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.