Пользователь
0,1
рейтинг
27 июня 2014 в 20:13

Разработка → 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
Konstantin Anikeev @kanikeev
карма
4,0
рейтинг 0,1
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (28)

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

    До меня дошли слухи, что Вишала ушли. Это после него открыли? Кто будет вместо, не известно?
    • 0
      Это хз. Я не настолько знаком с внутренней кухней.
    • 0
      Тоже очень интересует данный вопрос.
  • 0
    А примеры с диаграммами где-то есть? Чем (svg, canvas) они их рисуют?
    • 0
      Тут вот пример с D3 jsbin.com/openui5-custom-d3-chart-and-table/1/edit
      • 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, так что данные худо бедно могу собрать, чтобы с вашего конечно же позволения таки посравнивать

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