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
Ссылка на GitHub: http://sap.github.io/

P.S. добавил ссылку на GitHub
Поделиться публикацией
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама
Комментарии 28
  • 0
    • +3
      Поздравляю, дождались!
      На самом деле очень удобная вещь.
      А самое главное, что разработчики в SAP наконец-то стали прислушиваться к пожеланиям.
    • –11
      Константин, привет )

      До меня дошли слухи, что Вишала ушли. Это после него открыли? Кто будет вместо, не известно?
      • 0
        Это хз. Я не настолько знаком с внутренней кухней.
        • 0
          Тоже очень интересует данный вопрос.
        • 0
          А примеры с диаграммами где-то есть? Чем (svg, canvas) они их рисуют?
          • 0
            • 0
              Т.е. в OpenUI5 своих диаграмм нет
              • 0
                SAP не включил в OpenUI5 библиотеку для рисования диаграмм. Эта библиотека(sap.viz) есть в платной версии(той, которая SAPUI5). Я под капот не заглядывал, но пример использования вот
          • 0
            Привлекла внимание строчка: btn.placeAt(...). Их подход предлолагает манипулирование DOM-элементами из кода, как в jQuery?
            • 0
              Да, jQuery активно используется самим фреймворком
              • 0
                Странно из данной строчки делать вывод о манипулировании DOM-элементами. Тут btn — это виджет и манипулируют скорее им, чем его DOM представлением.
                • 0
                  Я о том и говорю. В данном коде некий управляющий код (контроллер?) манипулирует DOM'ом, размещая виджет в элементе, выбирая его по ID. Мне куда более легким в понимании и поддержке кажется подход из AngularJS — контроллер управляет только неким объектом с данными, а представление существует отдельно от него и может отображать данные из этого объекта или изменять их.
                  • 0
                    Меня смутило сравнение с jQuery, там то вообще никакой абстракции от DOM Element-ов нету. А при таком подходе достаточно разместить виджеты и дальше работать с их свойствами никоим образом не затрагивая отображение.
                    • +1
                      Остается открытым вопрос — почему виджеты нельзя разместить на уровне представления? Там это было бы более логично сделать, нежели в коде.

                      В вышеупомянутом AngularJS для этого используются «директивы» — выглядят как кастомные HTML-теги или атрибуты. Надо вставить в контейнер кнопку — пишешь так:

                      <div>
                          <my-button caption="Click me" ng-click="..." other-property="..." />
                      </div>
                      

                      Не скажу по поводу других JS-фреймворков, но из тех, что я использовал, примерно такой же подход используется в WPF (для разработки десктопных приложений на .NET). Только вместо «директив» там «пользовательские элементы управления». Использование же селекторов в коде контроллера для меня заведомо означает кривизну в архитектуре.
                      • 0
                        Вы просто пока не изучили фреймворк. Есть поддержка MVC. Причем view можно объявить как XML, JSON, HTML или Javascript. И объявляется он отдельно от контроллера.

                        Я использовал самый простейший пример.
                        • 0
                          Все бы хорошо, но между определениями контролов в разных типах view слишком много отличий. Я не нашел исчерпывающий хелп по всем типам описания. Что вдвойне забавно: в описании API как примеры идут js-views, а в мобильный сэмплах- XML-views.
                          • 0
                            Не совсем вас понял.

                            Вот кнопка для JS-View

                            new sap.ui.commons.Button("MyButton", {text:"Hello JS View"});
                            

                            вот для XML-View

                            <Button id="MyButton" text="Hello XML View"/>
                            

                            Вот для JSON-View

                            {
                                "Type":"sap.ui.commons.Button",
                                "id":"MyButton",
                                "text":"Press Me"
                            }
                            


                            Если вы считает, что отличия заключаются в том, что для JS-View кнопка создается через javascript, а для XML-View объявляется как XML — то иначе никак и не получится. Если вы имеете ввиду интерфейс для создания, то он одинаков. Все свойства, которые есть у кнопки в JS-View, — есть и в XML.

                            Разные технологии в примерах — это да. Тут могу только догадываться, что разные части документации, API и примеров писались разными людьми, предпочитающими тот или иной тип.
                            • 0
                              Проблема в том, что созданная Вами кнопка в js и созданная в XML view кнопки будут иметь разные ID, не смотря на то, что как кажется Вы их объявили одинаково. В случае XML фреймворк к ID припишет еще и ID самого view, и тогда будет корректно работать код (который используется, в примерах постоянно)
                              this.getView().byId("MyButton")
                              

                              а для JS-view в этом разе надо писать
                              sap.ui.getCore().byId("MyButton")
                              

                              И только путем неких изысканий удастся узнать, что что бы картина в обоих типах view была одинаковая, в js надо было создавать ID контрола несколько иначе
                               this.getView().createId("MyButton")
                              
                              • 0
                                Теперь понял, о чем вы. Сам не сталкивался с такой проблемой, т.к. всегда XML использовал.

                                Однако эта особенность описана в документации:

                                If you want to define IDs for controls inside a JSView to guarantee their uniqueness when reusing views, you can not give hardcoded IDs, but have to give the view the opportunity to add its own instance ID as a prefix. This is done by using the View.createId(...) method. For the example above, this is done as follows:

                                var oButton = new sap.ui.commons.Button(this.createId("myButton"), {text:"Hello JS View"});
                                

                                This is not required for declarative view types as the view parser can manage this automatically

                                Собственно понятно, что JS-View это программное, а не декларативное объявление. Поэтому и парсер там не работает автоматом, и вам его придется запускать вручную.
              • +2
                Фреймворк использует jQuery как дом библиотеку.
                Пишу на нем несколько лет и видел как он развивался.

                За последние два года есть существенный скачок как в качестве так и в скорости. Мобильная версия контролов sap.m — доминирующая и должна заменить старые десктопные со временем.

                Использовать имеет смысл только если необходимо работать с саповскими приложениями с бэкендом на хане или на абапе. Для разработки сайтиков или админок есть вещи получше :)
                • +3
                  Приведите пжлст примеры того, что получше для админок
                  • +1
                    Присоедияюсь к вопросу.
                  • 0
                    Из платных — sencha, из бесплатных — dojo или angular/ember/backbone/что то там еще с обвязкой ui плагинов.
                  • 0
                    «1000 и 1 js framework».
                    • 0
                      dojo на порядок круче, богаче, модульнее, продуманнее. документация и примеры в сравнение не идут. До сих пор на официальном ресурсе — sapui5.netweaver.ondemand.com/sdk/#demoapps.html — выложено аж 9(!!!) демоприложений, примитивнейших — не хватило дожать до 10… Это совсем не тот уровень, который стоило бы ожидать от ведущего разработчика ПО.
                      angular, prototype, и пр. тоже каждый по своему хороши.
                      нафига интересно было писать свою библиотеку контролов? даже IBM этого делать не стал, используют dojo во многих своих разработках и кастомных проектах. у SAP свой путь, только последнее время возникают вопросы — а куда он ведет?..
                      • 0
                        Не дожали до 10 говорите…
                        Может вы просто не нашли демки…
                        https://openui5.hana.ondemand.com/explored.html
                        Или просто не знаете про Fiori…
                        Catalog of SAP Fiori Apps
                        И много чего еще…

                        По поводу своих контролов очень просто.
                        Приложение на английском языке должно запускаться у клиентов по всему миру.
                        Отгадайте на каком языке покажут контролы браузеры в разных странах.
                        Отгадайте, какие региональные настройки будут в стандартных контролах.
                        Кстати, у dojo тоже куча своих контролов. Нафига?

                        Ну а по поводу
                        dojo на порядок круче, богаче, модульнее, продуманнее. документация и примеры в сравнение не идут.

                        Как же можно сравнивать 2 фреймворка, если один из них вы точно не знаете?
                        • 0
                          Уважаемый, ссылка которую вы привели, не содержат демоприложений. Это примеры использования компонентов, другими словами сэмплы, которые принято включать в любую техническую документацию (не хватало еще чтобы и этого не было!!)
                          Фиори к OpenUI5 никаким боком не относится, не знаю о чем это вы, возможно недопонял…

                          Насчет знаю-незнаю и как можно сравнивать — а вот так, что вижу то и сравниваю. На основании опять же увиденного никакого желания глубже изучать OpenUI5 пока не возникало. К тому же есть мнение профессиональных консультантов, знакомых. Да и сам я около 10 лет занимался SAP, так что данные худо бедно могу собрать, чтобы с вашего конечно же позволения таки посравнивать

                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.