В одном из моих проектов мне нужно было использовать адаптивные диаграммы в реальном времени для отображения некоторых данных. Но библиотеки графиков SAPUI5 было недостаточно для обеспечения такой гибкости. Поэтому я решил использовать внешнюю библиотеку для выполнения запроса моего клиента. Проведя небольшое исследование, я понял, что информации об использовании внешних библиотек так мало. Как вы знаете, существует множество отличных библиотек JavaScript для изучения, почему мы их не используем?
If you have not started developing SAPUI5 applications, or don't have an idea where start just check out my previous blogs.
В этом уроке мы собираемся внедрить фреймворк Underscore.js в наш проект.
Underscore.js provides over 100 functions that support both your favorite workaday functional helpers: map, filter, invoke — as well as more specialized goodies: function binding, javascript templating, creating quick indexes, deep equality testing, and so on. underscorejs.org
Таким образом, Underscore.js — это библиотека, которая предоставляет набор инструментов для управления вашими объектами javascript. Он имеет довольно полезные функции для ваших ежедневных сценариев разработки.
Создадим пустой проект SAPUI5.
Мы могли бы реализовать библиотеку Underscore.js, добавив ее на нашу страницу index.html, используя такие теги скрипта;
<script src="http://underscorejs.org/underscore-min.js"></script>
Но большинство наших систем SAP предназначены только для внутреннего использования, поэтому у них не будет доступа к библиотеке javascript на общедоступном сервере.
Создайте папку с именем lib в своем проекте и добавьте файл с именем «underscore.js».
Сейчас мы собираемся скопировать исходный код Underscore.js и вставить его в наш файл.
Open ; http://underscorejs.org/underscore-min.js You will source code of the library copy all and paste it in your 'underscore.js' file. Right click on code editor after you paste all code and click on 'Beautify'.
Вы увидите, что в коде Underscore.js много ошибок и предупреждений. Просто игнорируйте их и сохраняйте файл.
Вы можете проверить все подробности о функциях в Underscore.js по ссылке ниже.
underscorejs.org/#collections
Затем добавьте функцию onInit в файл вашего контроллера и добавьте ключевое слово «отладчик». Мы используем его для отладки нашей функции onInit.
SAPUI5 provides the following lifecycle hooks: onInit: Called when a view is instantiated and its controls (if available) have already been created; used to modify the view before it is displayed to bind event handlers and do other one-time initialization. onExit: Called when the view is destroyed; used to free resources and finalize activities. onAfterRendering: Called when the view has been rendered and, therefore, its HTML is part of the document; used to do post-rendering manipulations of the HTML. SAPUI5 controls get this hook after being rendered. onBeforeRendering: Invoked before the controller view is re-rendered and not before the first rendering; use onInit() for invoking the hook before the first rendering.
Теперь откройте MainView.controller.js и добавьте нашу новую библиотеку в наш файл контроллера.
Я только что скопировал и вставил несколько примеров в Underscore.js.
Окончательная версия нашего кода;
Теперь нажмите «Выполнить» и откройте инструменты разработчика Chrome с помощью F12 перед запуском приложения.
Оно работает!
Надеюсь, вы найдете его полезным в своих проектах.
Удачного кодирования!