sapui5Aan de slag met sapui5


Opmerkingen

Wat is SAPUI5?

Op basis van de bovenstaande theorie introduceerde SAP een op HTML5 gebaseerde ontwikkeltoolkit, SAPUI5, die een consistente gebruikerservaring aanmoedigt. Door de bovenstaande theorie te gebruiken, reageren apps die zijn gebouwd met SAPUI5 op alle browsers en apparaten. Ze werken op smartphones, tablets en desktops. De bedieningselementen van de gebruikersinterface passen zich automatisch aan de mogelijkheden van elk apparaat aan. Om dit te doen, biedt SAPUI5 robuuste ontwikkelingsconcepten om apps te maken met zakelijke, browsergebaseerde zakelijke applicaties. Kortom, UI5 is een client UI-technologie op basis van JavaScript, CSS en HTML5. Servers spelen een rol bij het implementeren van uw applicaties, het opslaan van de SAPUI5-bibliotheken en het verbinden met een database. Afhankelijk van de omgeving waarin u SAPUI5 gebruikt, worden de bibliotheken en uw applicaties bijvoorbeeld opgeslagen op SAP HANA Cloud Platform of een andere applicatieserver. Het favoriete middel om toegang te krijgen tot bedrijfsgegevens voor uw toepassing is met behulp van het oData-model.

De SAP UI-ontwikkelingstoolkit voor HTML5 is een gebruikersinterfacetechnologie die wordt gebruikt om client-applicaties te bouwen en aan te passen. De runtime is een HTML5-renderingbibliotheek aan de client met een uitgebreide set standaard- en extensiebesturingselementen en een lichtgewicht programmeermodel.

Er zijn twee smaken, OpenUI5 (de Open Sourced- versie) en SAPUI5 (de originele gelicentieerde versie). Beide hebben dezelfde technische kernmechanismen en worden gezamenlijk UI5 genoemd.

UI5 biedt vele functies waarmee u eenvoudig geavanceerde gebruikersinterfaces kunt maken en uitbreiden:

  • Het ondersteunt RIA-achtige client-side functies op basis van JavaScript
  • Het ondersteunt CSS3, waarmee u thema's op een effectieve manier kunt aanpassen aan de branding van uw bedrijf
  • Het is gebaseerd op ingebouwde uitbreidingsconcepten op code- en applicatieniveau
  • Het gebruikt de open source jQuery-bibliotheek als basis
  • Het ondersteunt SAP-productstandaarden volledig
  • Het voldoet aan OpenAjax en kan samen met standaard JavaScript-bibliotheken worden gebruikt
  • Het biedt uitgebreide responsieve controles om platformonafhankelijke gebruikersinterfaces te creëren met minder inspanning
  • Het biedt volledige ondersteuning voor Translation / i18n
  • Het beschikt over de Fiori Design-taal die is gebaseerd op uitgebreid UX-onderzoek

U kunt uw eerste UI5 pagina begon hier . Zie ook de ontwikkelaarshandleiding en API-referentie, beschikbaar in de respectieve SDK-referenties: OpenUI5 SDK , SAPUI5 SDK . Demo-apps zijn hier te vinden

Hallo Wereld

<!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 Wereld

<!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>
 

Plaats de bootstrapping-code in attachInit omdat deze wordt geactiveerd nadat de kernbibliotheek is geladen

Hallo Wereld!

We beginnen met het maken van een HTML-pagina voor de app. Daar definiëren we de metatags, een scripttag om de SAPUI5-bibliotheken te laden en een tijdelijke aanduiding voor de inhoud van de 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>
 

Pas het pad aan waar de bronnen zich bevinden (<>: <>) volgens uw installatie. Voor OpenUI5 kunt u src = " https://openui5.hana.ondemand.com/resources/sap-ui-core.js gebruiken ". Gebruik bijvoorbeeld src = " https://sapui5.hana.ondemand.com/resources/sap-ui-core.js " voor toegang tot SAPUI5 op het SAP HANA Cloud Platform.