Novità SAP ABAP: abap2UI5

Novità SAP ABAP: abap2UI5

Un progetto molto recente nel mondo SAP è abap2UI5. Ma cosa è questa Novità SAP ABAP: abap2UI5? Si tratta di un progetto open source per lo sviluppo di app UI5 esclusivamente in ABAP.

Abap2UI5 è un framework open-source creato dalla community ABAP con lo scopo di sviluppare in SAP con un approccio ABAP puro per lo sviluppo di app UI5, completamente senza JavaScript, OData e RAP. Quindi con una modalità simile al passato, quando bastavano solo poche righe di ABAP per visualizzare moduli e tabelle di input utilizzando schermate di selezione e ALV. La Novità SAP ABAP: abap2UI5 è progettato con un ingombro minimo del sistema, funzionando sia in ambienti on-premise che in cloud.

Con questo articolo vogliamo dare una panoramica sulla Novità SAP ABAP: abap2UI5. Parleremo delle caratteristiche di abap2UI5, raccontando un pò il suo processo di sviluppo.

Quali saranno i contenuti che trovate nell’articolo “Novità SAP ABAP: abap2UI5”? Parleremo di:

Introduzione: sviluppo di app UI5 esclusivamente in ABAP

1.Informazioni sul progetto abap2UI5
Come detto sopra, questo framework consente l’o sviluppo l’utilizzo in ABAP puro per lo sviluppo di app UI5, vuole aiutare gli sviluppatori ABAP a ridurre la complessità che comporta lo sviluppo UI con Javascript.

1.1 Funzionalità, compatibilità e installazione

• 100% ABAP: sviluppo puramente in ABAP (senza JavaScript, DDL, EML o personalizzazione)
• Facile da usare: implementa solo una singola interfaccia per un’applicazione UI5 ​​autonoma
• Impronta di sistema minima: basata su un semplice gestore HTTP (nessun BSP, OData, CDS, BOPF o RAP)
• Predisposto per cloud e on-premise: funziona con entrambe le versioni del linguaggio (ABAP per cloud, ABAP standard)
• Ampia compatibilità di sistema: funziona su tutte le versioni ABAP (da NW 7.02 a ABAP Cloud Stacks)
• Installazione semplice: progetto abapGit, non è richiesta la distribuzione di app aggiuntive

Utilizziamo abapGit per l’installazione, estraiamo il repository, creiamo un nuovo servizio HTTP e chiamamo abap2UI5. Questo progetto abap2UI5 è compatibile con tutte le versioni ABAP:

• Ambiente BTP ABAP (ABAP per Cloud)
• S/4 Ambiente ABAP cloud pubblico S/4 (ABAP per cloud)
• S/4 Cloud privato o on-premise (ABAP per cloud, ABAP standard)
• R/3 NetWeaver AS ABAP 7.50 o versione successiva (ABAP standard)
• R/3 NetWeaver AS ABAP da 7.02 a 7.42 (ABAP standard): utilizza questo repository downport

1.2 Esempio di base
Di seguito troviamo una semplice app abap2UI5 con un input e un output di messaggi :

CLASS z2ui5_cl_app_hello_world DEFINITION PUBLIC.

PUBLIC SECTION.
INTERFACES z2ui5_if_app.
DATA quantity TYPE string.

ENDCLASS.

CLASS z2ui5_cl_app_hello_world IMPLEMENTATION.
METHOD z2ui5_if_app~main.

CASE client->get( )-event.
  WHEN 'BUTTON_POST'.
    client->message_toast_display( |{ quantity } Product ABC - send to the server| ).

ENDCASE.

client->view_display( z2ui5_cl_xml_view=>factory(
  )->page( 'abap2UI5 - Hello World App'
     )->simple_form( )->content( ns = `form`
        )->title( 'Input here and send it to the server...'
        )->label( 'Product-ABC'
        )->input( client->_bind_edit( quantity )
        )->button( text = 'post' press = client->_event( 'BUTTON_POST' )
  )->stringify( ) ).

ENDMETHOD.
ENDCLASS.

Come si può vedere, per sviluppare un’app UI5 con abap2UI5 è sufficiente creare una nuova classe e implementare il metodo main della seguente interfaccia:

INTERFACE z2ui5_if_app PUBLIC.

METHODS main
IMPORTING
client TYPE REF TO z2ui5_if_client.

ENDINTERFACE.

Se lo lanciamo e lo proviamo, tutto funzionerà perfettamente e immediatamente, offrendo trasferimento dati bidirezionale, gestione degli eventi e un’interfaccia utente

2. Processo di sviluppo

Esaminiamo passo dopo passo il processo di sviluppo, iniziando dalla vista, passando poi al controller e infine esamineremo il modello.

2.1 Vista

Abap2UI5 offre la possibilità di sviluppare viste UI5 simili a un’applicazione freestyle UI5. Avremo completa libertà nella strutturazione della vista e la flessibilità di utilizzare un’ampia gamma di controlli UI5. La vista può essere definita direttamente come stringa o creata utilizzando la classe z2ui5_cl_xml_view.

Esaminiamo l’app menzionata in precedenza e confrontiamo la sua UI5-View con la sua controparte abap2UI5:

UI5-View rispetto a abap2UI5-View

<Page title="Page title" >

<f:SimpleForm title="Form Title">

    <f:content>

        <Title text="Input" />

        <Label text="quantity"/>

        <Input value="{/oUpdate/QUANTITY}"/>

        <Label text="product" />

        <Input value="tomato" />

        <Button press="onEvent" text="post"/>

    </f:content>

</f:SimpleForm>
</Page>

view->page( title = 'Page title' )

    )->simple_form( 'Form Title'

      )->content( 'f'

         )->title( 'Input'

         )->label( 'quantity'

         )->input( client->_bind_edit( quantity )

         )->label( 'product'

         )->input( value = product editable = abap_false

         )->button( text  = 'post'  

                    press = client->_event( 'BUTTON_POST' ) ).

In abap2UI5, la vista XML viene generata in ABAP e la classe funge da aiuto per semplificare la creazione di XML. Tuttavia, alla fine, entrambi gli approcci producono lo stesso risultato, con la differenza fondamentale che in abap2UI5 la vista viene trasmessa dal backend.

Questo è solo un semplice esempio e nel nostro articolo ne espanderemo le funzionalità per includere tabelle, elenchi, schermate di selezione, grafici e altro ancora.

abap2UI5 Control Library

Ecco una selezione di controlli UI5 disponibili che possiamo utilizzare con la classe z2ui5_cl_xml_view:

Ulteriori controlli verranno aggiunti in futuro.

La maggior parte dei controlli UI5 sono compatibili con abap2UI5 senza richiedere ulteriori aggiustamenti. Ad esempio, è possibile utilizzare gli input poiché sono costituiti solo da attributi che possono essere rinviati direttamente al server. I controlli che si basano su logica JavaScript aggiuntiva devono essere modificati per funzionare con abap2UI5. Devono prima essere incapsulati in un controllo personalizzato.

Successivamente utilizzeremo un controllo personalizzato per caricare e scaricare file e vederemo come implementare il proprio controllo personalizzato in abap2UI5.

2.2 Controller

L’interfaccia z2ui5_if_app è costituita dal metodo ‘main’, che ci dà il controllo sull’app UI5 frontend, simile al controller JavaScript di un’applicazione freestyle UI5. Di conseguenza, sembrano simili:

Controller UI5 rispetto al controller abap2UI5

sap.ui.controller("sap.ui.myApp.controller.one", {

onInit: function() {

},

onBeforeRendering: function() {  

},

onEvent: function() {

},

onAfterRendering: function() {  

},

onExit: function() {

}   
});

METHOD z2ui5_if_app~main.

IF check_initialized = abap_false.

  check_initialized = abap_true.

  "set init values here...

ENDIF.

CASE client->get( )-event.

  WHEN 'POST'.

    "event handling here...

ENDCASE.

"view rendering here...

client->view_display( z2ui5_cl_xml_view=>factory(

    )->shell( )->page(  )->simple_form( 'Title'

"....

ENDMETHOD.

Il framework abap2UI5 reindirizza la gestione degli eventi dal controller frontend all’implementazione backend della nostra classe, garantendoci completa libertà nel backend per determinare come rispondere a eventi frontend specifici.

A questo scopo viene utilizzato un singolo metodo ‘principale’ (simile a quello che fa if_oo_adt_classrun), senza separare la vista e il controller. Questo approccio crea flessibilità e consente all’utente di strutturare le proprie app in base alle proprie preferenze. Pertanto, questo metodo funge semplicemente da livello fondamentale, sul quale gli utenti possono costruire la propria logica attraverso metodi distinti. Ad esempio, uno potrebbe avere un metodo per l’inizializzazione, un altro per la gestione dei comandi utente e così via.

Successivamente, esaminiamo come possono essere attivati ​​gli eventi sul frontend.

2.3 Eventi

Sono disponibili i seguenti eventi:

Evento (comando utente)

view->( )->button(

 text  = 'post' 

 press = client->_event( 'BUTTON_POST' ) ).

Di solito è sufficiente inviare un semplice comando utente al server: utilizzare il metodo _event

Evento (chiusura popup)

view->button(

 text  = 'close'

 press = client->_event_client( client->cs_event-popup_close ) ).

Possiamo chiudere un popup nel frontend con questo evento: daremo uno sguardo più dettagliato ai popup successivamente.

Se fossero necessarie più funzioni evento, la struttura potrà essere ampliata in futuro.

2.4 Model e Data Binding

Quando i valori devono essere visualizzati nel frontend, vanno definiti come attributi pubblici nella nostra app abap2UI5. Questi attributi saranno vincolati dal framework, quindi è necessario avere la possibilità di assegnarli dall’esterno. Inoltre, se i nostri valori verranno aggiornati anche nel frontend, assicuriamoci che non siano definiti come di sola lettura, altrimenti abap2UI5 genererà un errore quando tenterà di modificarli. Esistono tre modi per associare i dati e inviarli al frontend:

XML diretto

view( )->label( 'product'

  )->input( value = product editable = abap_false ).

Possiamo scrivere il valore nell’attributo, abap2UI5 lo scriverà direttamente nell’UI5-XML-View e lo invierà al frontend.

Bind local

view( )->label( 'product'
)->input( value = view->_bind_local( product ) ).

Possiamo associare i valori localmente, che possiamo utilizzare per variabili locali che non sono attributi pubblici della nostra classe. Il loro valore viene salvato proprio in questo momento. I casi d’uso, ad esempio, sono tabelle con contenuti per aiuti di valore.

One-way Binding

view->( )->label( 'product'
)->input( value = view->_bind( product ) editable = abap_false ).

È possibile utilizzare l’associazione unidirezionale, i valori vengono quindi scritti nel modello di visualizzazione e associati a UI5-XML-View. Ciò è utile per modelli di dati complessi come le tabelle. Lo vedremo più in dettaglio nel prossimo post del blog

Two-way Binding

view( )->label( 'quantity'

  )->input( value = view->_bind_edit( quantity ) editable = abap_true ).​

È possibile utilizzare l’associazione bidirezionale, è simile all’associazione unidirezionale, ma invia anche valori dal frontend al server. Questa modalità di associazione è utile per input e tabelle modificabili.

Quando definiamo la vista, consideriamo il trasferimento dei dati al frontend. Per mantenere piccolo il payload della richiesta, utilizziamo l’associazione unidirezionale per impostazione predefinita e l’associazione bidirezionale solo quando necessario, ad esempio quando i valori devono essere aggiornati dal frontend. Oltre a ciò, abap2UI5 si occupa di tutto il resto trasformando i dati in JSON, inviandoli al frontend e riportando i valori aggiornati.

3. Qual è il prossimo passo?

Abbiamo quindi appena definito le funzionalità del progetto abap2UI5. Questa però era solo una panoramica. abap2UI5 è in continua evoluzione. Se desideriamo approfondire argomenti specifici, tutte le funzionalità di abap2UI5 sul repository degli esempi , anch’esso regolarmente aggiornato con nuove funzionalità.

4. Conclusione

Con questo articolo abbiamo fornito una introduzione al framework abap2UI5, sebbene questo scritto sia stato piuttosto tecnico. Trattasi comunque di uno strumento nuovissimo e che crediamo in Italia sia ancora sconosciuto. Tuttavia può succedere anche che si diffondi in breve tempo specialmente nella community degli abappisti.

(fonte)

Innovaformazione, scuola informatica specialistica promuove i sistemi informativi SAP ed eroga formazione alle aziende su SAP e ABAP. Trovate sul nostro sito i dettagli del Corso SAP ABAP erogato alle aziende.

INFO: info@innovaformazione.net / Tel. 3471012275 (Dario Carrassi)