Главная

OpenUI5 – новый javascript фреймворк от SAP

2014-06-27 в 16:13, admin, рубрики: javascript, javascript framework, sap, SAPUI5, метки: javascript, javascript framework, sap, SAPUI5

OpenUI5 – новый javascript фреймворк от SAP

Недавно произошло событие, которое незаслуженно осталось без внимания на Хабре. Компания SAP прислушалась к просьбам разработчиков и открыла код своего коммерческого фреймворка для создания веб приложений. Хотелось бы исправить это досадное упущение.

А началось все еще в 2010 году, когда немецкая компания SAP, один из крупнейших в мире разработчиков программного обеспечения, начала подготовку к переходу на новый пользовательский интерфейс. В качестве технологии была выбрана связка HTML5 и Javascript.

OpenUI5 – новый javascript фреймворк от SAP
Как только 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 и запустить его в браузере.

OpenUI5 – новый javascript фреймворк от SAP