...

пятница, 27 июня 2014 г.

[Из песочницы] OpenUI5 – новый javascript фреймворк от SAP


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



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




Как только SAPUI5 был представлен как коммерческий продукт сообщество разработчиков тут же начало собирать подписи к петиции с просьбой открыть исходный код фреймворка и сделать его свободным для разработчиков. Этой весной исходный код был открыт и опубликован под лицензией Apache License 2.0.

Открытый фреймворк называется OpenUI5 и доступен для скачивания по следующему адресу: http://ift.tt/1wKGarY


К достоинствам 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=' http://ift.tt/1jjwC3v'
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/

Руководство разработчика: http://ift.tt/1wKGaZ3

Примеры приложений: http://ift.tt/1wKG9Em

Форумы разработчиков на SCN (SAP Community Network): http://ift.tt/1qjkl2c


This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.


Комментариев нет:

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