sapui5 Tutorial
Iniziare con sapui5
Ricerca…
Osservazioni
Cos'è SAPUI5?
Sulla base della teoria precedente, SAP ha introdotto un toolkit di sviluppo basato su HTML5, SAPUI5, che incoraggia un'esperienza utente coerente. Utilizzando la teoria di cui sopra, le app create con SAPUI5 sono reattive su browser e dispositivi, che funzionano su smartphone, tablet e desktop. I controlli dell'interfaccia utente si adattano automaticamente alle funzionalità di ciascun dispositivo. Per fare ciò, SAPUI5 offre solidi concetti di sviluppo per creare app con applicazioni aziendali consumer-based basate su browser. In poche parole, UI5 è una tecnologia di interfaccia utente client basata su JavaScript, CSS e HTML5. I server entrano in gioco per la distribuzione delle applicazioni, l'archiviazione delle librerie SAPUI5 e la connessione a un database. A seconda dell'ambiente in cui si sta utilizzando SAPUI5, le librerie e le applicazioni vengono memorizzate, ad esempio, su SAP HANA Cloud Platform o su un altro server applicazioni. Il mezzo preferito per accedere ai dati aziendali per la tua applicazione è utilizzando il modello oData.
Il toolkit di sviluppo dell'interfaccia utente SAP per HTML5 è una tecnologia di interfaccia utente utilizzata per creare e adattare le applicazioni client. Il runtime è una libreria di rendering HTML5 lato client con un ricco set di controlli standard ed estensioni e un modello di programmazione leggero.
Ci sono due versioni, OpenUI5 (la versione Open Sourced) e SAPUI5 (la versione con licenza originale). Entrambi hanno gli stessi meccanismi di base tecnici e sono collettivamente indicati come UI5.
UI5 offre molte funzionalità che consentono di creare e ampliare facilmente interfacce utente all'avanguardia:
- Supporta RIA come le funzionalità lato client basate su JavaScript
- Supporta CSS3, che ti consente di adattare i temi al marchio della tua azienda in modo efficace
- È basato su concetti di estensibilità integrati a livello di codice e di applicazione
- Utilizza la libreria jQuery open source come base
- Supporta pienamente gli standard di prodotto SAP
- È compatibile con OpenAjax e può essere utilizzato insieme alle librerie JavaScript standard
- Offre ampi controlli reattivi per creare interfacce utente indipendenti dalla piattaforma con meno sforzo
- Offre il supporto completo di Translation / i18n
- Presenta il linguaggio Fiori Design basato su una vasta ricerca UX
Puoi iniziare la tua prima pagina UI5 qui . Inoltre, per ulteriori informazioni, consultare la guida per gli sviluppatori e il riferimento API, disponibile nei rispettivi riferimenti SDK: OpenUI5 SDK , SAPUI5 SDK . Le app demo possono essere trovate qui
Ciao mondo!
Iniziamo con la creazione di una pagina HTML per l'app. Qui definiamo i meta tag, un tag script per caricare le librerie SAPUI5 e un segnaposto per il contenuto dell'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>
Adattare il percorso in cui si trovano le risorse (<>: <>) in base all'installazione. Per OpenUI5 è possibile utilizzare src = " https://openui5.hana.ondemand.com/resources/sap-ui-core.js ". Per accedere a SAPUI5 su SAP HANA Cloud Platform, ad esempio, utilizzare src = " https://sapui5.hana.ondemand.com/resources/sap-ui-core.js ".
Ciao mondo
<!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>
Ciao mondo
<!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>
Inserisci il codice di bootstrap in attachInit perché verrà attivato dopo il caricamento della libreria principale