Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Разработка бизнес-приложений на OpenUI5 
Надоричев Николай 
Старший консультант SAPUI5 
MOLGA Consulting 
MoscowJS 28.08.2...
Демо-приложение 
http://i3b.ru/ui5-demo/
Build once. Run on any device.
Область применения 
•Внутренние корпоративные порталы 
•Гибридные desktop-приложения 
•Панели управления 
•Еще кое-что…
Почему OpenUI5?
На что похожа разработка?
Богатый набор стандартных компонентов
Из чего состоит 
Модель 
(JSON, XML, OData, i18n) 
Представление (JSON, XML, JS, HTML) 
Контроллер
Минимальное приложение 
index.html 
view 
|---main.view.xml 
|---main.controller.js 
Структура проекта:
Минимальное приложение 
index.html – Подключение фреймворка: 
<script src="resources/sap-ui-core.js" 
id="sap-ui-bootstrap...
Минимальное приложение 
index.html – Инициализация представления: 
//Указываем, что папка view находится в корне приложени...
Минимальное приложение 
main.view.xml – Представление: 
<core:View 
controllerName="view.main" xmlns:core="sap.ui.core“ 
x...
Минимальное приложение 
main.controller.js – Контроллер: 
sap.ui.controller("view.main", { onInit : function(){ var oModel...
Представления
JSON-представление 
{ "Type": "sap.ui.core.JSONView", 
"controllerName":“view.main", 
"content": [{ 
"Type":"sap.ui.layout...
HTML-представление 
<template data-controller-name=“view.main"> 
<div data-sap-ui-type="sap.ui.layout.VerticalLayout"> 
<d...
JS-представление 
sap.ui.jsview("view.main", { 
getControllerName : function () { 
return "view.main"; 
}, 
createContent ...
Модели
JSON-модель 
{ "appraisee" : "Селедков Михаил", "appraiser" : "Орлова Наталья", "goalJob" : "Ведущий разработчик", "curren...
XML-модель 
<Appraisal> 
<appraisee>Селедков Михаил</appraisee> 
<appraiser>Орлова Наталья</appraiser> 
<goalJob>Ведущий р...
OData-модель 
Основные преимущества: 
•Значения контролов биндятся к URL сервиса 
•Изменение значения на интерфейсе генери...
Многоязыковая поддержка (Resource-модель) 
Специальная модель для хранения локалей: 
•Смена языка без перезагрузки страниц...
Среды разработки 
Eclipse с плагином SAPUI5
Среды разработки 
SAP River RDE
Улучшение UI 
Было:
Улучшение UI 
Стало:
Недостатки 
•Большой вес фреймворка (sap-ui.core.js ~400 КБ) 
•Множество синхронных вызовов
Что дальше? 
Домашняя страница проекта: 
http://sap.github.io/openui5/ 
Официальная документация: https://openui5.hana.ond...
Спасибо! 
Надоричев Николай (@Luanre) 
Старший консультант SAPUI5 
MOLGA Consulting 
http://nadorichev.ru/ 
https://github...
Nächste SlideShare
Wird geladen in …5
×

Разработка бизнес приложений на OpenUI5. Николай Надоричев. MoscowJS 14

1.200 Aufrufe

Veröffentlicht am

Видео: http://youtu.be/q-t3OtJ60w8

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Разработка бизнес приложений на OpenUI5. Николай Надоричев. MoscowJS 14

  1. 1. Разработка бизнес-приложений на OpenUI5 Надоричев Николай Старший консультант SAPUI5 MOLGA Consulting MoscowJS 28.08.2014 OpenUI5. Build once. Run on any device.
  2. 2. Демо-приложение http://i3b.ru/ui5-demo/
  3. 3. Build once. Run on any device.
  4. 4. Область применения •Внутренние корпоративные порталы •Гибридные desktop-приложения •Панели управления •Еще кое-что…
  5. 5. Почему OpenUI5?
  6. 6. На что похожа разработка?
  7. 7. Богатый набор стандартных компонентов
  8. 8. Из чего состоит Модель (JSON, XML, OData, i18n) Представление (JSON, XML, JS, HTML) Контроллер
  9. 9. Минимальное приложение index.html view |---main.view.xml |---main.controller.js Структура проекта:
  10. 10. Минимальное приложение index.html – Подключение фреймворка: <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex"> </script>
  11. 11. Минимальное приложение index.html – Инициализация представления: //Указываем, что папка view находится в корне приложения sap.ui.localResources('view'); //Загрузка и инициализация начального представления var oView = new sap.ui.view({ viewName : 'view.main', type : sap.ui.core.mvc.ViewType.XML, id : 'xmlview' }); //Рендер представления в div с id "content" oView.placeAt("content");
  12. 12. Минимальное приложение main.view.xml – Представление: <core:View controllerName="view.main" xmlns:core="sap.ui.core“ xmlns="sap.ui.commons“ xmlns:layout="sap.ui.layout"> <layout:VerticalLayout> <TextField value="{/name}" /> <TextView text="{path: '/name', formatter : '.helloFormatter'}" /> </layout:VerticalLayout> </core:View>
  13. 13. Минимальное приложение main.controller.js – Контроллер: sap.ui.controller("view.main", { onInit : function(){ var oModel = new sap.ui.model.json.JSONModel({ name : '' }); this.getView().setModel(oModel); }, helloFormatter : function(sValue){ return 'Hello, ' + sValue + '!'; } });
  14. 14. Представления
  15. 15. JSON-представление { "Type": "sap.ui.core.JSONView", "controllerName":“view.main", "content": [{ "Type":"sap.ui.layout.VerticalLayout", "content":[{ "Type":"sap.ui.commons.TextField", "value":"{/name}" },{ "Type":"sap.ui.commons.TextView", "text":{ "path" : "{/name}", "formatter" : ".helloFormatter" } }] }] }
  16. 16. HTML-представление <template data-controller-name=“view.main"> <div data-sap-ui-type="sap.ui.layout.VerticalLayout"> <div data-sap-ui-type="sap.ui.commons.TextField" data-value="{/name}"></div> <div data-sap-ui-type="sap.ui.commons.TextView“ data-value="{path: '/name', formatter : '.helloFormatter'}"></div> </div> </template>
  17. 17. JS-представление sap.ui.jsview("view.main", { getControllerName : function () { return "view.main"; }, createContent : function (oController) { var oLayout = new sap.ui.layout.VerticalLayout(); oLayout.addContent(new sap.ui.commons.TextField({ value : "{/name}" })); oLayout.addContent(new sap.ui.commons.TextView({ text : { path : '{/name}', formatter : oController.helloFormatter } })); return oLayout; } });
  18. 18. Модели
  19. 19. JSON-модель { "appraisee" : "Селедков Михаил", "appraiser" : "Орлова Наталья", "goalJob" : "Ведущий разработчик", "currentJob": "Старший разработчик", "validityPeriodBegin" : "20140101", "validityPeriodEnd" : "20141231", "buttons" : [{ "text" : "Сохранить", "buttonId" : "SAVE" },{ "text" : "Отправить на утверждение", "buttonId" : "NEXT" }], . . .
  20. 20. XML-модель <Appraisal> <appraisee>Селедков Михаил</appraisee> <appraiser>Орлова Наталья</appraiser> <goalJob>Ведущий разработчик</goalJob> <currentJob>Старший разработчик</currentJob> <validityPeriodBegin>20140101</validityPeriodBegin> <validityPeriodEnd>20141231</validityPeriodEnd> <buttons> <text>Сохранить</text> <buttonId>SAVE</buttonId> </buttons> <buttons> <text>Отправить на утверждение</text> <buttonId>NEXT</buttonId> </buttons> . . .
  21. 21. OData-модель Основные преимущества: •Значения контролов биндятся к URL сервиса •Изменение значения на интерфейсе генерирует автоматический запрос на изменение •Поддерживает как XML, так и JSON Подробная информация о протоколе на сайте odata.org
  22. 22. Многоязыковая поддержка (Resource-модель) Специальная модель для хранения локалей: •Смена языка без перезагрузки страницы •Бинд текстов к свойствам элементов •Все локали хранятся в файлах .properties
  23. 23. Среды разработки Eclipse с плагином SAPUI5
  24. 24. Среды разработки SAP River RDE
  25. 25. Улучшение UI Было:
  26. 26. Улучшение UI Стало:
  27. 27. Недостатки •Большой вес фреймворка (sap-ui.core.js ~400 КБ) •Множество синхронных вызовов
  28. 28. Что дальше? Домашняя страница проекта: http://sap.github.io/openui5/ Официальная документация: https://openui5.hana.ondemand.com/
  29. 29. Спасибо! Надоричев Николай (@Luanre) Старший консультант SAPUI5 MOLGA Consulting http://nadorichev.ru/ https://github.com/luanre/

×