sapui5 Tutoriel
Démarrer avec sapui5
Recherche…
Remarques
Qu'est ce que SAPUI5?
Sur la base de la théorie ci-dessus, SAP a introduit SAPUI5, un outil de développement basé sur HTML5, qui encourage une expérience utilisateur cohérente. En utilisant la théorie ci-dessus, les applications créées à l'aide de SAPUI5 sont réactives sur tous les navigateurs et appareils - elles s'exécutent sur des smartphones, des tablettes et des ordinateurs de bureau. Les contrôles de l'interface utilisateur s'adaptent automatiquement aux capacités de chaque périphérique. Pour ce faire, SAPUI5 fournit des concepts de développement robustes pour créer des applications avec des applications professionnelles basées sur un navigateur grand public. En résumé, UI5 est une technologie d'interface client basée sur JavaScript, CSS et HTML5. Les serveurs entrent en jeu pour déployer vos applications, stocker les bibliothèques SAPUI5 et se connecter à une base de données. Selon l'environnement dans lequel vous utilisez SAPUI5, les bibliothèques et vos applications sont stockées par exemple sur SAP HANA Cloud Platform ou un autre serveur d'applications. Le moyen privilégié d’accéder aux données métiers de votre application consiste à utiliser le modèle oData.
Le kit d'outils de développement SAP UI pour HTML5 est une technologie d'interface utilisateur utilisée pour créer et adapter des applications client. Le moteur d'exécution est une bibliothèque de rendu HTML5 côté client avec un ensemble complet de contrôles standard et d'extension et un modèle de programmation léger.
Il existe deux versions , OpenUI5 (la version Open Sourced) et SAPUI5 (la version sous licence originale). Les deux ont les mêmes mécanismes techniques de base et sont collectivement appelés UI5.
UI5 fournit de nombreuses fonctionnalités pour vous permettre de créer et d'étendre facilement des interfaces utilisateur de pointe:
- Il prend en charge les fonctionnalités côté client RIA basées sur JavaScript
- Il prend en charge CSS3, ce qui vous permet d'adapter efficacement les thèmes à l'image de marque de votre entreprise.
- Il repose sur des concepts d’extensibilité intégrés au niveau du code et de l’application.
- Il utilise la bibliothèque open source jQuery comme base
- Il prend entièrement en charge les normes de produit SAP
- Il est conforme à OpenAjax et peut être utilisé avec les bibliothèques JavaScript standard
- Il offre des contrôles réactifs étendus pour créer des interfaces utilisateur indépendantes de la plate-forme avec moins d'effort
- Il offre une prise en charge complète de la traduction / i18n
- Il comporte le langage de conception de Fiori basé sur la recherche étendue d'UX
Vous pouvez obtenir votre première page UI5 ici . Pour plus d'informations, reportez-vous au guide du développeur et à la référence de l'API, disponibles dans les références du SDK respectif: OpenUI5 SDK , SAPUI5 SDK . Des applications de démonstration peuvent être trouvées ici
Bonjour le monde!
Nous commençons par créer une page HTML pour l'application. Nous y définissons les balises meta, une balise de script pour charger les bibliothèques SAPUI5 et un espace réservé pour le contenu de l'application.
<!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>
Adaptez le chemin d'accès aux ressources (<>: <>) en fonction de votre installation. Pour OpenUI5, vous pouvez utiliser src = " https://openui5.hana.ondemand.com/resources/sap-ui-core.js ". Pour accéder à SAPUI5 sur la plateforme SAP HANA Cloud, par exemple, utilisez src = " https://sapui5.hana.ondemand.com/resources/sap-ui-core.js ".
Bonjour le monde
<!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>
Bonjour le monde
<!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>
Placez le code d'amorçage dans attachInit car il sera déclenché après le chargement de la bibliothèque principale