SAP UI5 - Guida rapida

SAP fornisce vari strumenti che gli utenti possono utilizzare per migliorare la propria esperienza utente per creare app con interfacce utente avanzate per applicazioni aziendali Web. Gli strumenti di abilitazione più comuni includono:

  • Designer di temi
  • NWBC e pannello laterale
  • Schermate FPM
  • Strumenti di sviluppo SAP UI5

Le app basate sul Web create utilizzando SAP UI5 offrono un'esperienza utente più coerente ed è possibile accedervi su dispositivi come tablet, smartphone e laptop. Utilizzando il gateway NetWeaver con UI5, è possibile definire una netta separazione tra l'interfaccia utente e la logica aziendale.

SAP UI5 fornisce le seguenti funzionalità chiave:

  • Concetti di estensibilità a livello di codice e applicazione.
  • Capacità di creare modelli di interfaccia utente complessi e layout predefiniti per casi d'uso tipici.
  • Model-View-Controller (MVC) e metodi di associazione dati.
  • Supporto per l'interazione con la tastiera e funzioni di accessibilità.
  • SAP UI5 si basa su standard aperti come JavaScript, CSS e HTML5.
  • Supporto per temi basato su CSS.

Di seguito sono riportati i vantaggi dell'utilizzo dell'interfaccia utente SAP nelle aziende:

  • Aiuta ad aumentare la produttività.
  • Aumenta l'adattamento dell'utente.
  • Meno errori manuali.
  • Riduci il costo della formazione.
  • Alte prestazioni del sistema SAP.
  • API perfettamente progettata e può essere utilizzata facilmente.

SAP UI5 ─ Versione

Di seguito è riportato l'elenco delle recenti versioni di UI5 che sono state introdotte. Ogni interfaccia utente5 fornisce nuove funzionalità e miglioramenti rispetto alle versioni precedenti, supporto della piattaforma, miglioramenti dell'usabilità, ecc.

  • SAP UI5 1.26
  • SAP UI5 1.28
  • SAP UI5 1.30
  • SAP UI5 1.32
  • SAP UI5 1.34
  • SAP UI5 1.36
  • SAP UI5 1.38 e molti altri come SAP UI5 1.6

Schema di versione

SAP UI5 utilizza il numero di versione a 3 cifre. Ad esempio, SAPUI5 1.36.5. Qui, la cifra (1) specifica la versione principale. La seconda cifra (36) specifica il numero di versione secondaria. La terza cifra specifica il numero di versione della patch (5).

In ciascuna interfaccia utente SAP5, la versione principale e secondaria, nonché la versione patch, possono essere utilizzate per identificare le patch.

SAP UI5 vs Open UI5

SAP UI5 e Open UI5 forniscono entrambi l'ambiente di sviluppo dell'interfaccia utente. Tuttavia, sono diversi l'uno dall'altro nei seguenti aspetti:

SAP UI5 fa parte della suite di prodotti SAP e non è una licenza separata. È integrato con diversi prodotti SAP come:

  • SAP NW 7.4 o versioni successive
  • SAP NetWeaver AS 7.3x
  • SAP HANA Cloud e soluzione on premise

Open UI5 è una tecnologia open source per lo sviluppo di applicazioni ed è stata rilasciata con Apache 2.0.

SAP UI5 non è un prodotto separato ed è disponibile con la suite di prodotti SAP Open UI5 è una piattaforma open source gratuita per lo sviluppo di applicazioni
SAP UI5 è integrato con
  • SAP HANA
  • Piattaforma cloud SAP HANA
  • Versioni superiori di SAP NetWeaver

Open UI5 è stato introdotto con la licenza Apache 2.0

OpenUI5 è Open Source ed è disponibile su GitHub

Supporto browser UI5

SAP UI5 supporta tutti i principali browser di Microsoft, Google e Firefox con le ultime versioni. Tuttavia, le funzionalità supportate variano a seconda della versione del browser e del fornitore.

Nell'architettura SAP UI5, hai tre livelli:

  • Nella parte superiore si trova il livello di presentazione, in cui i componenti UI5 vengono utilizzati da dispositivi come dispositivi mobili, tablet e laptop.

  • Al livello intermedio, ci sono i client dell'applicazione che includono le librerie SAP UI5 per la creazione di temi e il controllo. Le librerie di controllo UI5 includono

    • Sap.viz

    • Sap.ui.commons (controlli come campi di testo e pulsanti)

    • Sap.ui.table (controlli di input per tabella)

    • Sap.ui.ux3

    • Sap.m (include il controllo dell'input per i dispositivi mobili)

  • In fondo, c'è il componente del server opzionale. Ciò include SAP NetWeaver Application Server per ABAP / Java, backend SAP, motore HANA XS per lo sviluppo o database.

SAP UI5 ha più componenti che sono oggetti indipendenti e riutilizzabili nell'applicazione UI5. Questi componenti possono essere sviluppati da persone diverse e possono essere utilizzati in progetti diversi.

Un'applicazione può utilizzare i componenti da posizioni diverse e quindi è possibile ottenere facilmente la struttura di un'applicazione. È possibile creare diversi tipi di componenti nello sviluppo di SAP UI5.

Componenti senza volto

I componenti senza volto vengono utilizzati per ottenere i dati dal sistema di backend e non contengono un'interfaccia utente.

Example- Fanno parte della classe sap.ui.core.component

Componenti dell'interfaccia utente

I componenti dell'interfaccia utente vengono utilizzati per aggiungere funzionalità di rendering e rappresentare un'area o un elemento dello schermo nell'interfaccia utente.

Example- Il componente dell'interfaccia utente può essere un pulsante con le impostazioni per eseguire alcune attività. Fa parte della classe: sap.ui.core.UIComponent

Note- sap.ui.core.component è la classe base per i componenti senza volto e dell'interfaccia utente. Per definire la funzione di estensibilità, i componenti possono ereditare dalla classe base o da altri componenti nello sviluppo dell'interfaccia utente.

Il nome del modulo di un componente è noto come nome del pacchetto e .component dove il nome del pacchetto è definito come il nome del parametro passato al costruttore del componente.

I componenti SAP UI5 possono anche essere suddivisi in base al panorama del sistema -

  • Componente lato client: questo include,
    • Librerie di controllo sap.m, sap.ui.common, ecc.
    • Core Javascript
    • Il test include HTML e Javascript
  • Componente lato server
    • Generatore di temi
    • Strumenti di controllo e sviluppo di applicazioni in Eclipse
    • Gestore delle risorse

Struttura di un componente

Ogni componente è rappresentato sotto forma di una cartella e contiene il nome dei componenti e delle risorse necessarie per gestire il componente.

Ogni componente dovrebbe contenere i seguenti file:

  • Component.json file che contiene metadati per la fase di progettazione e viene utilizzato solo per gli strumenti della fase di progettazione.

  • Component.js viene utilizzato per definire proprietà, eventi e metodi dei componenti responsabili dei metadati di runtime.

Come creare un nuovo componente SAP UI5?

Per creare un nuovo componente, devi creare una nuova cartella. Chiamiamolo comebutton.

Il prossimo è creare il file component.js file

Quindi, è necessario estendere la classe base del componente UI sap.ui.core.UIComponent.extend e immettere il nome del componente e il percorso del pacchetto.

Successivamente, per definire un nuovo componente, devi iniziare con il require dichiarazione come segue -

// defining a new UI Component
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("samples.components.button.Component");

// new Component
sap.ui.core.UIComponent.extend("samples.components.button.Component", {
   metadata : {
      properties : {
         text: "string"
      }
   }
});

samples.components.button.Component.prototype.createContent = function(){
   this.oButton = new sap.ui.commons.Button("btn");
   return this.oButton;
};

/*
* Overrides setText method of the component to set this text in the button
*/
samples.components.button.Component.prototype.setText = function(sText) {
   this.oButton.setText(sText);
   this.setProperty("text", sText);
   return this;
};

Il prossimo passo è definire il component.json nella tua cartella come segue:

{
   "name": "samples.components.button",
   "version": "0.1.0",
   "description": "Sample button component",
   "keywords": [
      "button",
      "example"
   ],
   "dependencies": {
   }
}

Come utilizzare un componente

Per utilizzare un componente, è necessario avvolgere il componente in un contenitore di componenti. Non è possibile utilizzare direttamente un componente dell'interfaccia utente in una pagina utilizzando il metodo placeAt. Un altro modo è passare il componente al costruttore componentContainer.

Utilizzo del metodo placeAt

Include l'aggiunta del componente al contenitore e l'utilizzo di placeAt metodo per posizionare il componente sulla pagina.

var oComp = sap.ui.getCore().createComponent({
   name: "samples.components.shell",
   id: "Comp1",
   settings: {appTitle: "Hello John"}
});

var oCompCont = new sap.ui.core.ComponentContainer("CompCont1", {
   component: oComp
});

oCompCont.placeAt("target1");
//using placeAt method

Utilizzo del costruttore componentContainer

Un contenitore di componenti contiene impostazioni specifiche e contiene anche i metodi del ciclo di vita di un controllo regolare. Il segmento di codice seguente mostra come passare il componente al costruttore componentContainer.

var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
   name: " samples.components.shell",
   settings: {text: "Hello John 1"}
});
oCompCont2.placeAt("target2");

Esistono varie librerie JavaScript e CSS che è possibile utilizzare in combinazione per lo sviluppo dell'applicazione. SAPUI5 può utilizzare queste librerie in combinazione e sono chiamate librerie di controllo SAPUI5.

Librerie di controllo SAPUI5 comuni -

  • Sap.ui.commons per campi di controllo, pulsanti, ecc.
  • Sap.m è la libreria di controllo più comune e viene utilizzata per i dispositivi mobili
  • Sap.ui.table include il controllo della tabella
  • Sap.ui.ux3

Note- Libreria di controllo SAPUI5 sap.m è la libreria più comune e viene utilizzata per lo sviluppo di applicazioni. Queste librerie possono essere combinate con altre librerie di controllo.

Combinazioni di librerie di controllo

  • È possibile utilizzare la libreria di controllo sap.m con altre librerie di controllo: sap.ui.unified, sap.viz, sap.ui.table, sap.ui.layout e sap.suite.

  • È possibile combinare le librerie di controllo: sap.ui.commons, sap.ui.table, sap.ui.ux3 e sap.ui.suite tra loro.

  • È inoltre possibile combinare le librerie di controllo sap.ui.commons e sap.ui.ux3 con altre librerie come sap.ui.core, sap.ui.unified, sap.ui.layout e sap.ui.table.

  • Puoi combinare sap.viz con tutte le altre librerie.

La tabella seguente mostra le principali librerie di controllo SAPUI5 e la loro descrizione -

sap.m Libreria con controlli specializzati per dispositivi mobili.
sap.makit La libreria SAPUI5 contiene i grafici di markit.
sap.ui.commons Libreria comune per controlli standard
sap.ui.ux3 Libreria SAPUI5 con controlli che implementano le linee guida SAP User Experience (UX) 3.0
sap.viz Libreria SAPUI5 contenente controlli grafici basati sulla libreria di grafici VIZ.

Il kit di sviluppo SAP UI5 per HTML5 fornisce un ambiente per lo sviluppo di applicazioni basate sul Web e fornisce un'applicazione con un'unica esperienza utente coerente. Le app Web sviluppate con SAP UI5 sono reattive su browser e dispositivi e possono essere eseguite su smartphone, tablet e desktop.

I controlli dell'interfaccia utente si adattano automaticamente alle capacità di ogni dispositivo.

Puoi utilizzare SAP UI5 sulle seguenti piattaforme:

  • SAP HANA
  • Piattaforma cloud SAP HANA
  • SAP NetWeaver per SAP NetWeaver 7.4 o versioni successive
  • Componente aggiuntivo dell'interfaccia utente per SAP NetWeaver per SAP NetWeaver Application Server 7.3x

È possibile distribuire l'applicazione sul server che include l'archiviazione delle librerie e l'acquisizione di dati dal database. È possibile utilizzare il server di applicazioni NetWeaver o la piattaforma HANA Cloud per la distribuzione delle applicazioni e un'applicazione aziendale può accedere ai dati utilizzando il modello OData utilizzando il gateway. Dai un'occhiata alla seguente illustrazione.

Quando un utente invia una richiesta client dal suo cellulare / laptop, viene inviata una richiesta al server per caricare l'applicazione in un browser, si accede ai dati tramite database e si accede alle relative librerie.

Per creare un'applicazione UI5, puoi scaricare gli strumenti per sviluppatori SAP UI5 di Eclipse. Una volta scaricato, puoi decomprimere il file e distribuirlo sul server web. Per ABAP, è possibile installare un componente aggiuntivo dell'interfaccia utente per SAP NetWeaver e questo include anche UI5 ​​Theme Designer.

Prerequisiti per SAP UI5

Per installare e aggiornare il toolkit di sviluppo UI5 per HTML5, devi soddisfare i seguenti prerequisiti:

Piattaforma Eclipse Marte (4,5)
Sistema operativo Sistema operativo Windows (XP, Vista, 7 o 8 / 8.1)
Java Runtime JRE versione 1.6 o successiva, 32 bit o 64 bit
SAP GUI

Rilevante solo durante l'installazione del SAP UI5 ABAP Repository Team Provider

  • Per sistema operativo Windows: GUI SAP per Windows 7.30 / 7.40
Microsoft

Rilevante solo durante l'installazione del SAP UI5 ABAP Repository Team Provider

Per sistema operativo Windows: sono necessarie le DLL VS2010 per la comunicazione con il sistema back-end

Nota: installa la variante x86 o x64, in base alla tua installazione di Eclipse a 32 o 64 bit

Procediamo ora e discutiamo su come installare SAP UI5 Development Kit nel tuo sistema.

Step 1 - Per installare JDK, vai su Oracle.com e cerca la versione JDK richiesta.

Step 2- Scarica ed esegui l'installazione. Riceverai un messaggio come mostrato nello screenshot seguente.

Step 3- Per installare Eclipse, vai su www.Eclipse.org/downloads

Step 4 - Estrai il file come mostrato nello screenshot seguente.

Step 5 - Per eseguire l'installazione, vai alla cartella estratta ed esegui il file dell'applicazione come mostrato nello screenshot seguente.

Step 6 - Per installare gli strumenti SAPUI5, vai su Eclipse → Guida → Installa nuovo software.

Puoi installare direttamente utilizzando l'URL o inserendo il percorso del kit demo UI5.

Step 7 - Successivamente, inserisci l'URL nella finestra di dialogo di installazione https://tools.hana.ondemand.com/mars

Step 8- Per vedere le funzionalità disponibili. Premere il tasto INVIO. È possibile selezionare le funzionalità e fare clic su Avanti. Verrà visualizzato l'elenco delle funzionalità da installare → Fare clic su Avanti.

Step 9 - Accetta il contratto di licenza e fai clic su Fine per avviare l'installazione.

Step 10 - Scarica il kit di sviluppo dell'interfaccia utente per HTML 5 dal seguente link -

http://scn.sap.com/community/developer-center/front-end ed estrai il contenuto nella stessa cartella.

Step 11- Avvia l'ambiente Eclipse. Vai a Aiuto → Installa nuovo software.

Step 12 - Fare clic su Aggiungi → Locale.

Step 13 - Successivamente, vai alla posizione del sito di aggiornamento locale e seleziona la cartella del sito di aggiornamento degli strumenti con la cartella in cui hai estratto il toolkit di sviluppo HTML5 come origine degli aggiornamenti.

Step 14 - Seleziona tutti i plugin e le funzionalità per l'installazione.

Step 15 - Selezionare la finestra di dialogo "Contatta tutti i siti di aggiornamento" durante l'installazione per trovare il software richiesto.

Step 16- Fare clic sul pulsante Fine per completare la configurazione. Riavvia Eclipse.

Step 17 - È possibile verificare l'installazione creando un nuovo progetto applicativo SAPUI5 tramite il menu Eclipse File → New→ Altro in basso. Seleziona la cartella SAP UI5 Application Development ed espandi per creare un nuovo progetto.

Step 18 - Inserisci il nome del progetto, seleziona la libreria e puoi selezionare la casella per creare una vista iniziale.

Step 19- Crea una vista utilizzando un codice di esempio nel progetto. Immettere il nome della visualizzazione e fare clic sul pulsante Avanti.

Step 20- Seleziona il paradigma di sviluppo e clicca su Fine. Vedrai un nuovo progetto di sviluppo SAPUI5 in una nuova finestra come mostrato nello screenshot seguente.

Ora, per presentare la tua applicazione o eseguirla in produzione, puoi distribuire la tua applicazione SAPUI5 sul server Tomcat. Se non hai uno strumento come MAVEN, puoi utilizzare l'opzione di esportazione per esportare manualmente il progetto. Fare clic con il tasto destro su Progetto → Esporta.

Step 21 - Immettere il percorso di destinazione in cui si desidera posizionare il file war file.

Quindi, copia il file war nella directory webapps del tuo apache tomcat. Puoi accedere alla tua applicazione andando in questo percorso:http://localhost:8080/<tua_app> /

Note - In uno scenario normale, molti progetti SAP vengono eseguiti in Internet Explorer, ma per lo sviluppo SAPUI5 si consiglia di utilizzare Google Chrome o Firefox con plug-in firebug poiché entrambi i sistemi consentono l'uso di strumenti e plug-in per eseguire il debug di JavaScript, nonché di utilizzare HTML e CSS .

Il concetto Model-View-Controller (MVC) viene utilizzato nello sviluppo di SAP UI5 per mantenere separati i dati dell'applicazione dalle interazioni dell'utente. Ciò consente di sviluppare le applicazioni Web e apportare modifiche alle applicazioni in modo indipendente.

Model-View-Controller svolge un ruolo diverso nello sviluppo dell'interfaccia utente -

  • Il Model è responsabile della gestione dei dati dell'applicazione nel database / backend.

  • Il Viewè responsabile della definizione dell'interfaccia utente per gli utenti. Quando un utente invia una richiesta dal suo dispositivo, la vista è responsabile della visualizzazione dei dati secondo la richiesta inviata.

  • Il Controller viene utilizzato per controllare i dati e visualizzare gli eventi in base all'interazione dell'utente aggiornando la vista e il modello.

È possibile definire il concetto di Model-View-Controller in SAPUI5 con le seguenti funzionalità:

Modello

  • Il modello funge da ponte tra la vista e i dati dell'applicazione.
  • Il modello viene utilizzato per ottenere la richiesta dalla vista e rispondere secondo l'input dell'utente.
  • Il modello non dipende dalle classi.

Visualizza

  • View è responsabile della gestione della visualizzazione delle informazioni agli utenti.
  • Le viste si basano sul modello.

Controller

  • Il controller è responsabile di prendere l'input fornito dai dispositivi e comunica al modello / vista e di attivare l'azione corretta.

  • I controller sono basati sul modello.

SAP UI5 offre visualizzazioni e controller sotto forma di singoli file:

  • sap.ui.core.mvc.XMLView
  • sap.ui.core.mvc.JSView
  • sap.ui.core.mvc.Controller
  • sap.ui.core.mvc.JSONView

Modello JSON

  • Il modello JSON è un modello lato client e viene utilizzato per piccoli set di dati.
  • Il modello JSON supporta l'associazione a due vie. Il concetto di associazione dati è menzionato nella seconda metà di questo tutorial.
  • Il modello JSON può essere utilizzato per associare i controlli ai dati degli oggetti JavaScript.

Modello XML

  • Il modello XML può essere utilizzato per associare i controlli ai dati XML.
  • XML è anche un modello lato client e quindi viene utilizzato solo per piccoli set di dati.
  • Il modello XML non fornisce alcun meccanismo per il paging basato su server o il caricamento dei delta.
  • Il modello XML supporta anche il data binding bidirezionale.

Le viste vengono definite utilizzando le librerie SAP come segue:

  • XML con HTML, misto o autonomo: Library- sap.ui.core.mvc.XMLView
  • JavaScript: Library- sap.ui.core.mvc.JSView
  • JSON: libreria - sap.ui.core.mvc.JSONView
  • HTML: libreria - sap.ui.core.mvc.HTMLView

Esempio di visualizzazione JavaScript

Sap.ui.jsview(“sap.hcm.address”, {
   getControllerName: function() {
      return “sap.hcm.address”;
   },
   createContent: function(oController) {
      var oButton = new sap.ui.commons.Button({ text: “Hello” });
      oButton.attachPress(function() {
         oController.Hello();
      })
      Return oButton;
   }
});

Esempio di visualizzazione HTML

<template data-controller-name = ”sap.hcm.address’>
   <h1>title</h1>
   <div> Embedded html </div>
   <div class = ”test” data-sap-ui-type = ”sap.ui.commons.Button”
      Id = ”Button1” data-text =  ”Hello” Data-press = ”sayHello”>
   </div>
</template>

Allo stesso modo, puoi creare una vista JSON derivata da sap.ui.core.mvc.JsonView.

{
   “type”:”sap.ui.core.mvc.JsonView”,
   “controllerName”:”sap.hcm.address”,
   ……………………….
   …………………...
   …………………….
}

Confronto dei tipi di visualizzazione

La tabella seguente elenca le funzionalità chiave associate al concetto MVC e il confronto di diversi tipi di visualizzazione rispetto alle funzionalità.

Caratteristica Vista JS Visualizzazione XML Visualizzazione JSON Visualizzazione HTML
Librerie standard e personalizzate sì sì sì sì
Proprietà dei tipi string, int Boolean, float sì sì sì sì
Aggregazione 1: 1, 1: n Associazione 1: 1, 1: n sì sì sì sì
Associazione dati semplice sì sì sì sì
Personalizza associazione dati sì No No No
HTML incorporato No sì No No
Completamento del codice sì sì No No
Modelli sì No No No
Validazione No sì No No
Listener di eventi singoli sì sì sì sì

SAPUI5 Developer Studio fornisce strumenti per facilitare il processo di sviluppo dell'interfaccia utente5. Di seguito sono riportate le funzioni:

  • Procedura guidata per lo sviluppo del controllo
  • Procedura guidata per la creazione del progetto
  • Procedura guidata per la creazione di visualizzazione / controller

Puoi scaricarlo da SAP Marketplace utilizzando il link https://support.sap.com/software.html. Cerca UI Add-on 1.0 per NetWeaver.

Vai a Download di software e inserisci il tuo ID e la password. Quindi, vai a supportare i pacchetti e le patch. Cerca il plugin ide 1.00 di sapui5 tools.

Una traccia del framework SAPUI5 è disponibile anche sotto SCN. Puoi andare a questo linkhttp://scn.sap.com/community/developer-center/front-end

Step 1 - Per creare un nuovo progetto in Studio per sviluppatori UI5, vai su File → Nuovo → Progetto.

Step 2 - Immettere il nome del progetto, il dispositivo di destinazione e creare una visualizzazione iniziale.

Step 3 - Immettere il nome della vista e il tipo di vista nella finestra successiva e fare clic su Avanti.

Step 4- Nell'ultima finestra, vedi il riepilogo del progetto. Ti mostra le proprietà del progetto. Fare clic sul pulsante Fine per creare il progetto.

Step 5- Ti verrà chiesto di passare alla prospettiva Java EE. Fare clic su Sì e si aprirà una nuova finestra del progetto UI5 con una vista iniziale: JSView.

Step 6 - Ora per aggiungere una Shell a questa vista, puoi usare la libreria sap.ui.ux3.Shell ().

Step 7- Poiché Shell non fa parte di sap.ui.commons, è necessario aggiungere la libreria sap.ui.ux3. Puoi aggiungere ulteriori librerie a data-sap-ui-libs.

Per eseguire un'applicazione, hai due opzioni:

  • Esegui sul server
  • Esegui su webapp

Si consiglia l'esecuzione su server in quanto ha una porta fissa e non è come eseguire su webapp con una porta casuale una tantum.

SAP UI5 ─ Configurazione

Come mostrato nella tabella seguente, puoi definire vari attributi di configurazione in SAP UI5 -

Funzioni principali

Le funzioni principali in SAP UI5 sono le seguenti:

  • Sap.ui.getCore() - Viene utilizzato per ottenere un'istanza principale.

  • Sap.ui.getCore().byid(id) - Viene utilizzato per ottenere un'istanza del controllo UI5 creata con id.

  • Sap.ui.getCore().applyChanges() - Viene utilizzato per eseguire e visualizzare immediatamente le modifiche per i controlli UI5.

  • jQuery.sap.domById(id)- Viene utilizzato per ottenere qualsiasi elemento HTML con ID. Se è presente un controllo UI5 con id, l'elemento restituito è l'elemento HTML più in alto del controllo UI5.

  • jQuery.sap.byId(id) - Viene utilizzato per restituire l'oggetto jQuery dell'elemento DOM con l'ID specificato.

Esistono diversi tipi di controlli dell'interfaccia utente che è possibile utilizzare durante lo sviluppo di applicazioni dell'interfaccia utente5. Questi controlli consentono di aggiungere un pulsante, una tabella, immagini, layout, casella combinata e vari altri controlli nell'applicazione UI5.

I tipi di controllo comuni includono:

  • Controlli semplici
  • Controlli complessi
  • Controlli UX3
  • Dialogs
  • Layout

Controllo dell'immagine

Var image = new sap.ui.commons.Image();
Image.setSrc(“Image1.gif”);
Image.setAlt(“alternat.text”);

Combo box

È possibile utilizzare una casella combinata per fornire voci predefinite.

Proprietà: elementi, selectedKey

Var oComboBox2 = new sap.ui.commons.ComboBox (“ComboBox”,{
   Items:{path:”/data”,
      Template:oItemTemplate, filters:[oFilter]},
   Change: function(oEvent){
      Sap.ui.getCore(). byId(“field”).setValue(
         oEvent.oSource.getSelectedKey());
   }
});

Semplice controllo dei pulsanti

Usa attachPresss assegna il gestore eventi per un'azione push.

Var oButton = new sap.ui.commons.Button ({text : “Click”,
   Press: oController.update
});

Controllo del completamento automatico

Per completare automaticamente il valore inserito.

Var uiElement = new sap.ui.commons.AutoComplete({
   Tooltip: ”Enter the product”,
   maxPopupItems: 4
});
For (var i = 0; i<aData.lenght; i++){
   uiElement.addItem(new sap.ui.core.ListItem(
      {text: aData[i].name}));
}

Scatola di controllo da tavolo

È derivato da sap.ui.table e ogni tabella contiene colonne.

Var oTable = new sap.ui.table.Table({
   Columns: [
      New sap.ui.table.Column({
         Label: new sap.ui.commons.lable({ text: “First Column”}),
         Template: new sap.ui.commons.TextView({ text: “{Firstcolumn}” }),
         Width: “120px”
      })

In SAP UI5, data binding conceptviene utilizzato per aggiornare automaticamente i dati associando i dati ai controlli che contengono i dati dell'applicazione. Utilizzando l'associazione dati, è possibile associare controlli semplici come campo di testo, pulsante semplice ai dati dell'applicazione e i dati vengono aggiornati automaticamente quando è presente un nuovo valore.

Utilizzando l'associazione dati bidirezionale, i dati dell'applicazione vengono aggiornati quando il valore del controllo associato cambia. Il valore può essere modificato tramite diversi metodi, come l'input dell'utente, ecc.

In SAP UI5, è possibile utilizzare diversi modelli di dati per il data binding. Questi modelli di dati supportano diverse funzionalità:

Modello JSON

Il modello JSON viene utilizzato per associare oggetti JavaScript ai controlli. Questo modello di dati è un modello lato client ed è consigliato per piccoli set di dati. Non fornisce alcun meccanismo per il paging o il caricamento sul lato server.

Le caratteristiche principali includono:

  • Il modello JSON per il data binding supporta i dati nel formato di notazione JavaScript.
  • Supporta il data binding a due vie.

Creating a model instance −

Var oModel = new sap.ui.model.json.JSONModel(dataUrlorData);

Modello XML

Il modello XML di data binding consente di associare i controlli ai dati XML. Viene utilizzato per oggetti lato client e per piccoli set di dati. Non fornisce alcun meccanismo per il paging o il caricamento lato server.

Le caratteristiche principali includono:

  • Il modello XML di data binding supporta i dati XML.
  • Supporta anche il data binding a due vie.

Creating a model instance −

Var oModel = new sap.ui.model.xml.XMLModel(dataUrlorData);

Modello OData

Il modello OData è un modello lato server, quindi tutti i dati sono disponibili sul lato server. Il lato client può vedere solo righe e campi e non puoi utilizzare l'ordinamento e il filtro sul lato client. È necessario inviare questa richiesta al server per completare queste attività.

L'associazione dati nel modello OData è unidirezionale, ma è possibile abilitare l'associazione bidirezionale utilizzando il supporto di scrittura sperimentale.

Le caratteristiche principali includono:

  • Il modello di associazione dati OData supporta dati conformi a Odata.
  • Questo modello di dati consente di creare richieste OData e gestire le risposte.
  • Supporta l'associazione sperimentale a due vie.

Creating a model instance −

Var oModel = new sap.ui.model.odata.ODataModel (dataUrl [,useJSON, user, pass]);

Assegnazione del modello

È possibile utilizzare il metodo setModel per assegnare il modello a controlli o core specifici.

Sap.ui.getcore().setModel(oModel);

Per associare un modello alla visualizzazione:

Var myView = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS, viewname:”view name”});
myView.setModel(oModel);

Per associare un modello a un controllo:

Var oTable = sap.ui.getCore().byId(“table”);
oTable.setModel(oModel);

È possibile associare le proprietà di un controllo alle proprietà del modello. È possibile associare le proprietà di un modello a un controllo utilizzando il metodo bindproperty -

oControl.bindProperty(“controlProperty”, “modelProperty”);
or by using below methodvar
oControl = new sap.ui.commons.TextView({
   controlProperty: “{modelProperty}”
});

Associazione di aggregazione

È possibile utilizzare l'associazione di aggregazione per associare una raccolta di valori come l'associazione di più righe a una tabella. Per utilizzare l'aggregazione, è necessario utilizzare un controllo che funge da modello.

È possibile definire l'associazione di aggregazione utilizzando il metodo bindAgregation.

oComboBox.bindaggregation( “items”, “/modelaggregation”, oItemTemplate);

Design Patternè un nuovo termine nello sviluppo di SAP UI5 quando parliamo di sviluppo SAP o sistema SAP Fiori. SAP sta lavorando duramente per trovare nuovi modelli di progettazione che supportino lo sviluppo nel sistema SAP utilizzando UI5 SDK.

SAP ha rilasciato diversi tipi di design pattern:

Master-Detail

Questo è un primo passaggio nell'associazione dell'applicazione ed è supportato dal controllo SplitApp di SAP UI5. Questo modello di progettazione supporta l'elenco dei contenuti e consente la selezione delle derivazioni e la visualizzazione dettagliata.

Dettaglio Master-Master

Questo modello di progettazione mostra i dettagli della transazione nella sezione dei dettagli.

Example - Stai effettuando un ordine online e desideri visualizzare una pagina di conferma che mostri ciò che stai acquistando e visualizzare i dettagli della transazione con visualizzazione dettagliata.

A schermo intero

Questo modello di progettazione è consigliato principalmente per la visualizzazione di grafici, dati illustrati e vari tipi di grafici.

Multi-flusso

Questo modello di progettazione è consigliato quando si utilizza un flusso di applicazione complesso ed è necessario utilizzare tutti i modelli di progettazione per creare un'applicazione funzionante.

Nello sviluppo SAPUI5 per applicazioni JavaScript più grandi, il framework UI5 fornisce il supporto integrato per la modularizzazione. ModularizationIl concetto consente di suddividere l'applicazione in parti più piccole che possono essere combinate insieme in fase di esecuzione. Queste parti più piccole dell'applicazione sono chiamate modularizzazione.

È possibile dichiarare il proprio modulo JavaScript chiamando la funzione query jQuery.sap.declare e questa viene utilizzata per tenere traccia del nome del modulo e del modulo già caricato.

Per caricare un modulo, devi usare jQuery.sap.require

Esempio

<script>
   jQuery.sap.require(“sap.ui.commons.MessageBox”);
   ………………………
</script>

Quando un modulo è richiesto jQuery.sap.require e quel modulo non è caricato, viene caricato automaticamente. Chiama il metodo declare quindi quando viene chiamato require sa che il modulo è stato caricato.

SAP UI5 supporta il concetto di localizzazione basato sulla piattaforma Java.

Identifying the Language Code - Per l'identificazione delle lingue, il framework utilizza un codice lingua di tipo stringa.

Resource Bundles - Un file bundle di risorse è un file delle proprietà Java e contiene coppie chiave / valore in cui i valori sono testi dipendenti dalla lingua e le chiavi sono indipendenti dalla lingua e utilizzate dall'applicazione per identificare e accedere ai valori corrispondenti.

I pacchetti di risorse sono una raccolta di file *.propertiesFile. Tutti i file sono denominati con lo stesso nome di base (prefisso che identifica il bundle di risorse), un suffisso opzionale che identifica la lingua contenuta in ogni file efixed .properties estensione.

I suffissi della lingua vengono formati in base alla sintassi delle impostazioni internazionali JDK precedente. Per convenzione, dovrebbe esistere un file senza suffisso di lingua e contenere i testi grezzi non tradotti nella lingua dello sviluppatore. Questo file viene utilizzato se non è possibile trovare una lingua più adatta.

Il pacchetto di risorse sap.ui.commons.message_bundle contiene i seguenti file:

  • sap.ui.commons.message_bundle.properties - Questo file contiene il testo grezzo dello sviluppatore e determina il set di chiavi.

  • sap.ui.commons.message_bundle_en.properties - Questo file contiene testo in inglese.

  • sap.ui.commons.message_bundle_en_US.properties - Questo file contiene testo in inglese americano.

  • sap.ui.commons.message_bundle_en_UK.properties - Questo file contiene testo in inglese britannico.

Uso di testi localizzati nelle applicazioni

SAPUI5 fornisce due opzioni per utilizzare testi localizzati nelle applicazioni: il modulo jQuery.sap.resources e l'associazione dati.

Il codice seguente viene utilizzato per ottenere il bundle di risorse per una determinata lingua:

jQuery.sap.require(“jquery.sap.resources”);
var oBundle = jQuery.sap.resources({url ; sUrl, locale:sLocale});

Il codice seguente viene utilizzato per accedere al testo nel resource bundle:

Var sText = oBundle.getText(sKey);

Il codice seguente viene utilizzato per ottenere l'URL di una risorsa:

Var sUrl = sap.ui.resource(“sap.ui.table”,”messagebundle.properties”);

UN Controlviene utilizzato per definire l'aspetto e l'area dello schermo. Contiene proprietà come larghezza e testo. Queste proprietà vengono utilizzate per modificare l'aspetto o modificare i dati visualizzati dal controllo. È possibile creare controlli aggregati o controlli associati.

Associated controldi un controllo sono definiti come controlli vagamente correlati, che non sono controlli figlio o una parte del controllo principale. I controlli vengono utilizzati per attivare eventi ben definiti.

I controlli in SAPUI5 possono essere creati direttamente utilizzando uno strumento o un file JavaScript. I controlli che vengono creati utilizzando il metodo extent () sono noti anche comeNotepad controls.

Il codice seguente viene utilizzato per definire un controllo utilizzando il metodo Extend:

Sap.ui.core.control.extend (sname, oDefinition);

I parametri che vengono passati a questo controllo -

  • Nome del controllo
  • Definizione del controllo

La definizione di un controllo contiene informazioni su API di controllo, aggregazioni, eventi, ecc. E metodi di implementazione.

Puoi anche creare controlli personalizzati. La definizione di controllo personalizzato può contenere metodi pubblici e privati, metadati e metodi di rendering, ecc.

metadata:{
   properties: {},
   events: {},
   aggregations: {}
},

publicMethod: function() {},
_privateMethod: function() {},
init: function() {}
onclick: function(e) {},
renderer: function(rm, oControl) {}

La creazione di un nuovo controllo eredita da Button -

Sap.ui.commons.Button.extend (sname, oDefinition);

Il metadata nella definizione di controllo è costituito da oggetti per proprietà di controllo, eventi e aggregazioni.

Proprietà

  • Tipo: tipo di dati della proprietà di controllo
  • String: stringa per una proprietà stringa
  • Int o float per le proprietà del numero
  • Int [] per una matrice di numeri interi
  • String [] per un array di stringhe

Eventi

Gli eventi sono definiti solo dal nome evento. Normalmente si passa un oggetto vuoto a un evento. L'applicazione utilizza il flag enablePreventDefault per interrompere l'evento.

Events: {
   Logout:{},
   Close: {
      enablePreventDefault : true
   }
}

È possibile estendere le applicazioni UI5 che sono remote o in Web IDE. Per creare un nuovo progetto di estensione, dovresti avere un'applicazione in remoto o su IDE.

Step 1 - Per creare un nuovo progetto, vai su File → Progetto di estensione.

Step 2 - Selezionare l'area di lavoro per selezionare l'applicazione SAP Fiori desiderata che si desidera utilizzare come applicazione originale.

Step 3- Quando si seleziona un'applicazione, il campo Nome progetto estensione viene compilato con il nome dell'applicazione originale con l'estensione suffisso. È possibile modificare questo nome → Avanti

Step 4 - Se necessario, selezionare la casella di controllo Apri progetto estensione nel riquadro estensibilità per aprire automaticamente il riquadro estensibilità dopo la generazione del progetto.

Step 5 - Fare clic su Fine.

Allo stesso modo, puoi anche estendere le applicazioni che risiedono nella piattaforma SAP HANA Cloud. Segui i passaggi indicati di seguito.

Step 1 - Per creare un nuovo progetto, vai su File → Progetto di estensione.

Step 2 - Selezionare Start → Remoto → SAP HANA Cloud Platform → Seleziona applicazione dalla finestra di dialogo SAP HANA Cloud Platform.

Step 3 - Nella finestra successiva, devi inserire l'account, il nome utente e la password di SAP HANA Cloud Platform.

Step 4 - Seleziona Ottieni applicazioni e cerca l'applicazione che desideri estendere.

Step 5- Selezionare l'applicazione desiderata → OK. Il campo Nome progetto estensione viene popolato automaticamente nella procedura guidata. Se necessario, puoi modificare questo nome.

Step 6- Fare clic su Avanti. Scegli Fine per confermare e creare il tuo progetto di estensione.

Il designer del tema dell'interfaccia utente è uno strumento basato su browser che ti consente di sviluppare i tuoi temi modificando uno dei modelli di temi forniti da SAP.

Example- Puoi cambiare la combinazione di colori o aggiungere il logo della tua azienda. Lo strumento fornisce un'anteprima dal vivo del tema durante la progettazione.

Applica il tuo marchio aziendale e guarda alle applicazioni create con le tecnologie dell'interfaccia utente SAP. Il designer del tema dell'interfaccia utente è uno strumento basato su browser per scenari con temi trasversali. Usalo per creare facilmente i temi della tua identità aziendale modificando uno dei modelli di temi forniti da SAP. Ad esempio, puoi modificare la combinazione di colori o aggiungere il logo della tua azienda. Lo strumento è destinato a diversi gruppi di utenti, inclusi sviluppatori, designer visivi e amministratori.

Piattaforma supportata

  • SAP NetWeaver come ABAP (tramite UI Add-On 1.0 SP4)
  • SAP NetWeaver Portal (7.30 SP10 e versioni successive)
  • SAP HANA Cloud (pianificato)
  • SAP NetWeaver Portal (7.02 pianificato)

Caratteristiche e vantaggi principali

  • Browser-based, graphical WYSIWYG editor - Modifica i valori dei parametri tematici e vede immediatamente come influisce sulla visualizzazione della pagina di anteprima selezionata.

  • Built-in preview pages - Seleziona le pagine di anteprima integrate per vedere come apparirà il tuo tema personalizzato quando viene applicato a un'applicazione -

    • Anteprime dell'applicazione (esempio: approvazione dell'ordine d'acquisto, SAP Fiori Launchpad)

    • Anteprime di controllo

  • Different levels of theming -

    • Temi rapidi (impostazioni del tema cross-technology di base)

    • Temi esperti (impostazioni del tema specifiche della tecnologia)

    • Modifica manuale LESS o CSS

  • Color palette for reuse - Specifica una serie di parametri con i principali valori di colore che definiscono il marchio aziendale.

  • Cross-technology theming - Crea un tema coerente che si applica a vari client e tecnologie dell'interfaccia utente SAP -

    • Librerie standard SAPUI5 (incluse applicazioni SAP Fiori e SAP Fiori Launchpad)

    • Tecnologie di rendering unificato (come Web Dynpro ABAP e Floorplan Manager)

    • SAP NetWeaver Business Client

Client dell'interfaccia utente SAP Le parti dell'interfaccia utente possono essere tematizzate
Web Dynpro ABAP

È possibile applicare temi che non utilizzano i seguenti elementi dell'interfaccia utente:

  • HTMLIsland
  • HTMLContainer
  • Chart
  • FlashIsland
  • SilverlightIsland
  • BusinessGraphics

È possibile utilizzare solo temi creati con il designer di temi dell'interfaccia utente per applicazioni Web Dynpro ABAP a partire da SAP NetWeaver 7.0 EHP2
Floorplan Manager per Web Dynpro ABAP (FPM) È possibile utilizzare applicazioni a tema che non utilizzano HTMLIslands o Chart UIBB
SAPUI5 È possibile creare temi per le librerie SAP Standard. Le librerie SAPUI5 personalizzate non possono essere tematizzate
SAP NetWeaver Business Client (NWBC)

NWBC per desktop (4.0 o versioni successive): è possibile creare temi della shell NWBC e delle pagine di panoramica (pagina indice, pagina nuova scheda, mappa dei servizi).

NWBC per HTML (3.6): puoi creare un tema per la mappa dei servizi. La conchiglia non può essere tematizzata.

Come chiamare un designer di temi in SAP Fiori?

Step 1- Accedi al server SAP Fiori Front-End. Puoi usareT-Code: Theme Designer o usa il collegamento come mostrato nella seguente schermata e accedi.

Step 2- Una volta effettuato l'accesso, avrai tutti i modelli predefiniti forniti da SAP per Theme Designer. Seleziona il tema predefinito e fai clic su Apri.

Step 3 - Inserisci il link Fiori Launchpad e il nome dell'applicazione e fai clic su Aggiungi.

Step 4- Dal lato destro del pannello dello schermo, puoi selezionare Colore, Carattere, Immagine e altre proprietà. È possibile modificare i colori come mostrato nelle schermate seguenti.

Step 5- Per salvare il tema, puoi fare clic sull'icona Salva come mostrato nella seguente schermata. Hai anche un'opzione per salvare e costruire l'opzione.

Dopo aver fatto clic su Salva e crea, inizierà il salvataggio e, una volta completato, riceverai un messaggio di conferma: Salva e crea completato.

Step 6 - Per ottenere il collegamento di questo tema personalizzato, usa il codice T come mostrato nello screenshot seguente -

Step 7 - Seleziona il tema che hai creato e fai clic sulla scheda Informazioni.

Step 8 - Usa Ctrl + Y per copiare l'URL dallo schermo e prenderne nota.

Temi supportati

Questi sono i temi predefiniti forniti con UI5 -

  • Cristallo blu
  • Riflessione d'oro
  • Identificazione visiva mobile
  • Nero ad alto contrasto

Tipi di grafici

Esistono vari tipi di grafici nella libreria di grafici sap.viz.ui5 che possono essere utilizzati per rappresentare i dati aziendali. Di seguito sono riportati alcuni tipi di grafici CVOM: Colonna, Bolla, Linea, Torta, ecc.

Le applicazioni SAP UI5 vengono eseguite su diversi dispositivi mobili come iPad e smartphone. Tuttavia, per una migliore esperienza utente, è necessario controllare l'aspetto, le interazioni tattili e vari altri parametri dell'interfaccia utente.

UI5 contiene una libreria di controlli sap.m che supporta lo sviluppo di applicazioni per dispositivi mobili e supporta tutti i concetti chiave come data binding, MVC, ecc.

Caratteristiche principali

  • Supporto della piattaforma per Android, iOS, BlackBerry
  • Contiene 40 controlli
  • Browser Webkit: Google Chrome
  • Concetti UI5: MVC, localizzazione, modularizzazione, ecc.

In questo capitolo impareremo come creare un progetto in Web IDE. Andiamo passo dopo passo.

Step 1 - Per iniziare un nuovo progetto, vai su File → Nuovo → Progetto

Step 2- Inserisci il nome del progetto. Nella finestra successiva, seleziona il modello.

Step 3 - Selezionare il modello SAPUI5 Mobile Applications → Avanti

Step 4- Il passaggio successivo consiste nel selezionare la connessione dati. Seleziona l'URL del servizio → Seleziona

Step 5 - Nel passaggio successivo, devi eseguire la personalizzazione del modello.

Step 6 - Facendo clic su Avanti, vedrai il file Finish pulsante.

Dopo aver fatto clic su Fine, è possibile visualizzare un nuovo progetto creato con la struttura predefinita dell'applicazione dell'interfaccia utente. Contiene la vista, il modello e il nome del progetto.