sapui5 учебник
Начало работы с sapui5
Поиск…
замечания
Что такое SAPUI5?
Основываясь на вышеприведенной теории, SAP представила инструментарий для разработки на базе HTML5, SAPUI5, который поощряет один постоянный пользовательский интерфейс. Используя вышеприведенную теорию, приложения, созданные с использованием SAPUI5, реагируют на браузеры и устройства - они работают на смартфонах, планшетах и настольных компьютерах. Элементы пользовательского интерфейса автоматически адаптируются к возможностям каждого устройства. Для этого SAPUI5 обеспечивает надежные концепции разработки для создания приложений с бизнес-приложениями на основе бизнес-приложений. Вкратце, UI5 - это клиентский интерфейс, основанный на JavaScript, CSS и HTML5. Серверы приходят в игру для развертывания ваших приложений, хранения библиотек SAPUI5 и подключения к базе данных. В зависимости от среды, в которой вы используете SAPUI5, библиотеки и ваши приложения хранятся, например, в SAP HANA Cloud Platform или другом сервере приложений. Предпочтительным средством доступа к бизнес-данным для вашего приложения является использование модели oData.
Инструментарий разработки SAP UI для HTML5 - это технология пользовательского интерфейса, которая используется для создания и адаптации клиентских приложений. Время выполнения - это клиентская библиотека рендеринга HTML5 с богатым набором стандартных и расширенных элементов управления и легкая модель программирования.
Существует два варианта: OpenUI5 (версия Open Sourced) и SAPUI5 (исходная лицензионная версия). Оба имеют одинаковые технические основные механизмы и в совокупности называются UI5.
UI5 предоставляет множество функций, позволяющих вам легко создавать и расширять современные пользовательские интерфейсы:
- Он поддерживает RIA как клиентские функции на основе JavaScript
- Он поддерживает CSS3, который позволяет эффективно адаптировать темы к брендингу вашей компании
- Он основан на встроенных концепциях расширяемости на уровне кода и приложения
- Он использует библиотеку jQuery с открытым исходным кодом в качестве основы
- Он полностью поддерживает стандарты продуктов SAP
- Он соответствует OpenAjax и может использоваться вместе со стандартными библиотеками JavaScript
- Он предлагает множество гибких средств управления для создания независимых пользовательских интерфейсов платформы с меньшими усилиями
- Он предлагает полную поддержку Translation / i18n
- В нем есть язык дизайна Fiori , основанный на обширных исследованиях UX
Вы можете получить свою первую страницу UI5, начатую здесь . Также для получения дополнительной информации см. Руководство разработчика и ссылку на API, доступную в соответствующих ссылках SDK: OpenUI5 SDK , SAPUI5 SDK . Демо-приложения можно найти здесь
Привет, мир!
Начнем с создания HTML-страницы для приложения. Там мы определяем метатеги, тег сценария для загрузки библиотек SAPUI5 и местозаполнитель для содержимого приложения.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Hello World App</title>
<script src="http://<<server>>:<<port>>/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m">
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
Адаптируйте путь, в котором расположены ресурсы (<>: <>) в соответствии с вашей установкой. Для OpenUI5 вы можете использовать src = " https://openui5.hana.ondemand.com/resources/sap-ui-core.js ". Например, для доступа к SAPUI5 на облачной платформе SAP HANA используйте src = " https://sapui5.hana.ondemand.com/resources/sap-ui-core.js ".
Привет, мир
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>SAPUI5 Hello World</title>
<!-- Load SAPUI5 , theme and control library -->
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"></script>
<!-- Create a UI5 button and place it onto the page -->
<script>
new sap.m.Button({
text:"Hello world",
press: function(){
alert("hello SapUI5!");
}
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</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'/>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="1.24"
data-sap-ui-resourceroots='{"<projectname>": "./"}'>
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.getCore().attachInit( function () {
new sap.ui.core.ComponentContainer ("<ComponentId(can be anyname you wish)>",{
height : "100%",
name : "<name of component>"
}).placeAt('content');
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
Поместите код начальной загрузки в attachInit, потому что он будет запущен после загрузки основной библиотеки