sapui5 Handledning
Komma igång med sapui5
Sök…
Anmärkningar
Vad är SAPUI5?
Baserat på teorin ovan introducerade SAP en HTML5-baserad utvecklingsverktygssats, SAPUI5, som uppmuntrar till en konsekvent användarupplevelse. Genom att använda teorin ovan reagerar appar som byggs med SAPUI5 över webbläsare och enheter - de körs på smartphones, surfplattor och stationära datorer. UI-kontrollerna anpassar sig automatiskt till varje enhets funktioner. För att göra detta tillhandahåller SAPUI5 robusta utvecklingskoncept för att skapa appar med webbläsarbaserade affärsapplikationer för konsumentkvalitet. Kort sagt är UI5 en klient-UI-teknik baserad på JavaScript, CSS och HTML5. Servrar kommer in för att distribuera dina applikationer, lagra SAPUI5-bibliotek och ansluta till en databas. Beroende på den miljö du använder SAPUI5 lagras biblioteken och dina applikationer till exempel på SAP HANA Cloud Platform eller en annan applikationsserver. Det föredragna sättet att få tillgång till affärsdata för din applikation är att använda oData-modellen.
SAP UI: s utvecklingsverktygssats för HTML5 är ett användargränssnittsteknologi som används för att bygga och anpassa klientapplikationer. Runtime är ett klientsidan HTML5-renderingbibliotek med en rik uppsättning standard- och förlängningskontroller och en lätt programmeringsmodell.
Det finns två smaker, OpenUI5 (Open Sourced-versionen) och SAPUI5 (den ursprungliga licensierade versionen). Båda har samma tekniska kärnmekanismer och kallas kollektivt UI5.
UI5 har många funktioner som gör att du enkelt kan skapa och utöka de senaste användargränssnitten:
- Det stöder RIA-liknande funktioner på klientsidan baserad på JavaScript
- Det stöder CSS3, som gör att du kan anpassa teman till ditt företags varumärke på ett effektivt sätt
- Det är baserade inbyggda utdragbarhetskoncept på kod- och applikationsnivå
- Det använder open source jQuery-biblioteket som en grund
- Det stöder SAP-produktstandarder helt
- Den överensstämmer med OpenAjax och kan användas tillsammans med vanliga JavaScript-bibliotek
- Det erbjuder omfattande responsiva kontroller för att skapa plattformsoberoende användargränssnitt med mindre ansträngning
- Det erbjuder komplett översättning / i18n-stöd
- Det har Fiori Design-språk som är baserat på omfattande UX-forskning
Du kan komma igång med din första UI5-sida här . För mer information se utvecklarhandboken och API-referens, tillgängliga i respektive SDK-referenser: OpenUI5 SDK , SAPUI5 SDK . Demo-appar finns här
Hej världen!
Vi börjar med att skapa en HTML-sida för appen. Där definierar vi metataggar, en skripttagg för att ladda SAPUI5-biblioteken och en platshållare för appens innehåll.
<!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>
Anpassa sökvägen där resurserna finns (<>: <>) enligt din installation. För OpenUI5 kan du använda src = " https://openui5.hana.ondemand.com/resources/sap-ui-core.js ". För att komma åt SAPUI5 på SAP HANA Cloud Platform, till exempel, använd src = " https://sapui5.hana.ondemand.com/resources/sap-ui-core.js ".
Hej världen
<!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>
Hej världen
<!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>
Placera bootstrapping-koden i attachInit eftersom den kommer att triggas efter att kärnbiblioteket laddats