OpenUI5 - новий javascript фреймворк від SAP


 
Нещодавно сталася подія, яка незаслужено залишилося без уваги на Хабре. Компанія SAP прислухалася до прохань розробників і відкрила код свого комерційного фреймворка для створення веб додатків. Хотілося б виправити це прикре упущення.
 
А почалося все ще в 2010 році, коли німецька компанія SAP, один з найбільших у світі розробників програмного забезпечення, почала підготовку до переходу на новий користувальницький інтерфейс. В якості технології була обрана зв'язка HTML5 і Javascript.
 
 
Як тільки SAPUI5 був представлений як комерційний продукт співтовариство розробників відразу почало збирати підписи до петиції з проханням відкрити вихідний код фреймворка і зробити його вільним для розробників. Цієї весни вихідний код був відкритий і опублікований під ліцензією Apache License 2.0.
Відкритий фреймворк називається OpenUI5 і доступний для скачування за наступною адресою: http://openui5.org/download.html
 
До достоїнств OpenUI5 можна віднести наступні пункти:
 
     
  • Багата бібліотека візуальних компонентів
  •  
  • Можливість розширювати стандартні компоненти. Зрозуміло, можна писати і свої.
  •  
  • Підтримка MVC, причому View може бути оголошений як HTML, XML, JSON або Javascript
  •  
  • Моделі даних (oData, XML, JSON) та їх прив'язка до візуальних компонентів
  •  
  • Підтримка HTML шаблонів
  •  
  • Локалізація додатків
  •  
  • Підтримка як десктопних, так і мобільних браузерів.
  •  
 
Однак, краще один раз спробувати, ніж сто разів прочитати. Наведу найпростіший приклад програми на OpenUI5.
Для початку візьмемо порожній шаблон HTML файлу.
 
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Hello world</title>
</head>
<body>
</body>
</html>

Тепер підключимо фреймворк, помістивши завантаження скрипта в заголовок файлу.
 
 
<script id='sap-ui-bootstrap'
        src=' https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
        data-sap-ui-theme='sap_bluecrystal'
        data-sap-ui-libs='sap.ui.commons'></script>

А також додамо в тіло HTML div-елемент, всередині якого буде поміщено додаток. Div-елементу присвоїмо id = 'content', щоб знати, як знайти його в документі.
 
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <title>Hello World</title>
    <script id='sap-ui-bootstrap'
        src='resources/sap-ui-core.js'
        data-sap-ui-theme='sap_bluecrystal'
        data-sap-ui-libs='sap.ui.commons'></script>
</head>
<body>
    <div id='content'></div>
</body>
</html>

Після цього залишається додати код самого додатка. Наше додаток складається з кнопки, яка видає alert при натисканні.
 
 
<script>
    var btn = new sap.ui.commons.Button({
        text:'Жмакни меня!',
        press: function() {
            alert("Привет хабр!")
        }
    });
    btn.placeAt('content');
</script>

Всі додаток складається з двох операторів: спочатку створюємо кнопку через new sap.ui.commons.Button (), потім поміщаємо її в наш div з ідентифікатором 'content' c допомогою placeAt ().
Програма готова до тестування. Можна зберегти отриманий файл як html і запустити його в браузері.
 
 
 
Варто набити руку і з більш складними програмами також не виникне проблем.
 
 
 
Сподіваюся, що зміг пробудити початковий інтерес до фреймворку.
Більше інформації можна знайти за наступними лінками (на жаль все англійською):
 
Сторінка проекту: http://openui5.org/
Керівництво розробника: https://openui5.hana.ondemand.com/ # docs / guide / Documentation.html
Приклади додатків: https://openui5.hana.ondemand.com/ # demoapps.html
Форуми розробників на SCN (SAP Community Network): http://scn.sap.com/community/developer-center/front-end/content

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.