sapui5 Samouczek
Rozpoczęcie pracy z sapui5
Szukaj…
Uwagi
Co to jest SAPUI5?
W oparciu o powyższą teorię SAP wprowadził oparty na HTML5 zestaw narzędzi programistycznych SAPUI5, który zachęca do korzystania z jednego spójnego interfejsu użytkownika. Korzystając z powyższej teorii, aplikacje zbudowane przy użyciu SAPUI5 reagują na przeglądarki i urządzenia - działają na smartfonach, tabletach i komputerach stacjonarnych. Kontrolki interfejsu użytkownika automatycznie dostosowują się do możliwości każdego urządzenia. Aby to zrobić, SAPUI5 zapewnia solidne koncepcje programistyczne do tworzenia aplikacji z aplikacjami biznesowymi klasy konsumenckiej opartymi na przeglądarce. W skrócie, UI5 to technologia interfejsu użytkownika klienta oparta na JavaScript, CSS i HTML5. W grę wchodzą serwery do wdrażania aplikacji, przechowywania bibliotek SAPUI5 i łączenia się z bazą danych. W zależności od środowiska, w którym korzystasz z SAPUI5, biblioteki i aplikacje są przechowywane na przykład na platformie SAP HANA Cloud Platform lub innym serwerze aplikacji. Preferowanym sposobem dostępu do danych biznesowych dla Twojej aplikacji jest użycie modelu oData.
Zestaw narzędzi programistycznych SAP UI dla HTML5 to technologia interfejsu użytkownika służąca do tworzenia i dostosowywania aplikacji klienckich. Środowisko wykonawcze to biblioteka renderowania HTML5 po stronie klienta z bogatym zestawem kontrolek standardowych i rozszerzeń oraz lekkim modelem programowania.
Istnieją dwa smaki: OpenUI5 (wersja Open Sourced) i SAPUI5 (oryginalna wersja licencjonowana). Oba mają te same techniczne podstawowe mechanizmy i są wspólnie określane jako UI5.
Interfejs użytkownika oferuje wiele funkcji umożliwiających łatwe tworzenie i rozszerzanie najnowocześniejszych interfejsów użytkownika:
- Obsługuje RIA, podobnie jak funkcje po stronie klienta oparte na JavaScript
- Obsługuje CSS3, który pozwala efektywnie dostosowywać motywy do marki Twojej firmy
- Opiera się na wbudowanych koncepcjach rozszerzalności na poziomie kodu i aplikacji
- Wykorzystuje bibliotekę jQuery typu open source jako podstawę
- W pełni obsługuje standardy produktów SAP
- Jest zgodny z OpenAjax i może być używany razem ze standardowymi bibliotekami JavaScript
- Oferuje szerokie responsywne elementy sterujące do tworzenia niezależnych od platformy interfejsów użytkownika przy mniejszym wysiłku
- Oferuje pełną obsługę tłumaczeń / i18n
- Zawiera język Fiori Design oparty na szeroko zakrojonych badaniach UX
Można dostać pierwszą stronę UI5 rozpoczął tutaj . Aby uzyskać więcej informacji, zobacz przewodnik dla programistów i odniesienie do interfejsu API, dostępne w odpowiednich odnośnikach SDK: OpenUI5 SDK , SAPUI5 SDK . Aplikacje demo można znaleźć tutaj
Witaj świecie!
Zaczynamy od utworzenia strony HTML dla aplikacji. Tam definiujemy metatagi, tag skryptu do załadowania bibliotek SAPUI5 oraz symbol zastępczy dla zawartości aplikacji.
<!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>
Dostosuj ścieżkę, w której znajdują się zasoby (<>: <>), zgodnie z instalacją. W przypadku OpenUI5 możesz użyć src = " https://openui5.hana.ondemand.com/resources/sap-ui-core.js ". Aby uzyskać dostęp do SAPUI5 na platformie SAP HANA Cloud Platform, użyj na przykład src = " https://sapui5.hana.ondemand.com/resources/sap-ui-core.js ".
Witaj świecie
<!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>
Witaj świecie
<!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>
Umieść kod ładowania początkowego w attachInit, ponieważ zostanie on uruchomiony po załadowaniu biblioteki podstawowej