sapui5 Tutorial
Erste Schritte mit sapui5
Suche…
Bemerkungen
Was ist SAPUI5?
Basierend auf der obigen Theorie hat SAP ein HTML5-basiertes Entwicklungs-Toolkit, SAPUI5, eingeführt, das eine einheitliche Benutzererfahrung ermöglicht. Mit Hilfe der obigen Theorie reagieren Apps, die mit SAPUI5 erstellt wurden, auf Browser und Geräte - auf Smartphones, Tablets und Desktops. Die Steuerelemente der Benutzeroberfläche passen sich automatisch an die Fähigkeiten der einzelnen Geräte an. Zu diesem Zweck bietet SAPUI5 robuste Entwicklungskonzepte zur Erstellung von Apps mit browserbasierten Geschäftsanwendungen für Endkunden. Kurz gesagt, UI5 ist eine Client-UI-Technologie, die auf JavaScript, CSS und HTML5 basiert. Server werden eingesetzt, um Ihre Anwendungen bereitzustellen, die SAPUI5-Bibliotheken zu speichern und eine Verbindung zu einer Datenbank herzustellen. Abhängig von der Umgebung, in der Sie SAPUI5 verwenden, werden die Bibliotheken und Ihre Anwendungen beispielsweise auf der SAP HANA Cloud Platform oder einem anderen Anwendungsserver gespeichert. Das bevorzugte Mittel für den Zugriff auf Geschäftsdaten für Ihre Anwendung ist das oData-Modell.
Das SAP UI Development Toolkit für HTML5 ist eine Benutzeroberflächentechnologie, mit der Clientanwendungen erstellt und angepasst werden. Die Laufzeitumgebung ist eine clientseitige HTML5-Rendering-Bibliothek mit einem umfangreichen Satz von Standard- und Erweiterungssteuerelementen und einem einfachen Programmiermodell.
Es gibt zwei Varianten, OpenUI5 (die Open-Sourced-Version) und SAPUI5 (die ursprünglich lizenzierte Version). Beide haben die gleichen technischen Kernmechanismen und werden zusammen als UI5 bezeichnet.
UI5 bietet viele Funktionen, mit denen Sie auf einfache Weise moderne Benutzeroberflächen erstellen und erweitern können:
- Es unterstützt RIA-ähnliche clientseitige Funktionen, die auf JavaScript basieren
- Es unterstützt CSS3, mit dem Sie Themen effektiv an das Branding Ihres Unternehmens anpassen können
- Es basiert auf integrierten Erweiterungskonzepten auf Code- und Anwendungsebene
- Es verwendet die Open Source-Bibliothek jQuery als Grundlage
- Es unterstützt vollständig SAP-Produktstandards
- Es entspricht OpenAjax und kann zusammen mit Standard-JavaScript-Bibliotheken verwendet werden
- Es bietet umfangreiche responsive Steuerelemente, um plattformunabhängige Benutzeroberflächen mit weniger Aufwand zu erstellen
- Es bietet volle Unterstützung für Translation / I18n
- Es enthält die Fiori Design-Sprache, die auf umfangreichen UX-Untersuchungen basiert
Sie können Ihre erste UI5-Seite hier starten. Weitere Informationen finden Sie im Entwicklerhandbuch und in der API-Referenz, die in den entsprechenden SDK-Referenzen verfügbar ist: OpenUI5 SDK , SAPUI5 SDK . Demo-Apps finden Sie hier
Hallo Welt!
Wir beginnen mit dem Erstellen einer HTML-Seite für die App. Dort definieren wir die Meta-Tags, ein Script-Tag zum Laden der SAPUI5-Bibliotheken und einen Platzhalter für den Inhalt der App.
<!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>
Passen Sie den Pfad, in dem sich die Ressourcen befinden (<>: <>) an Ihre Installation an. Für OpenUI5 können Sie src = " https://openui5.hana.ondemand.com/resources/sap-ui-core.js " verwenden. Für den Zugriff auf SAPUI5 auf der SAP HANA Cloud Platform verwenden Sie beispielsweise src = " https://sapui5.hana.ondemand.com/resources/sap-ui-core.js ".
Hallo Welt
<!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>
Hallo Welt
<!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>
Platzieren Sie den Bootstrapping-Code in attachInit, da dieser nach dem Laden der Core-Bibliothek ausgelöst wird