Sei sulla pagina 1di 28

GRUPPO TELECOM ITALIA

Percorso formativo

SAP: Sviluppo Web Dynpro


Scheda tecnica di progetto

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Durata: 2 gg (maggio 2011) Tipologia: Corso teorico / pratico SEDE: Engineering.it Via Riccardo Morandi,32 10100 - ROMA AULA: A513

Obiettivi

Questo corso permetter di prendere familiarit con lo sviluppo delle web dynpro portando a conoscerne gli aspetti basilari dello sviluppo

Prerequisiti

1.

Conoscenza della programmazione abap ed OO

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


PROGRAMMA 16 e 17 Maggio 2011

Introduzione alle web dynpro Creazione del layout e view Navigazione tra view Definizione di attributi e metodi Creazione dei PLUG Creazione campi di input e select option Creazione tabelle Cenni allintegrazione di ALV

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


INDICE
Introduzione alle Web Dynpro. 5-8 Creazione di una Web Dynpro. 9 Creazione di una View. 10 Assegnare una View ad una Window. 11 Creare una variabile nel context. 12 Creare un elemento UI Campo testo. 13 Creare un elemento UI Campo input. 14 Creare un elemento UI Tabella. 15 - 17 Utilizzo del context, UI element e metodi per l'estrazione e la visualizzazione dei dati. 18-21 Creare una Web Dynpro Application. 22 Creazione dei PLUG. 23 Navigazione tra view. 24 - 27 Link per Approfondimenti. 28

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Introduzione alle Web Dynpro
Web Dynpro Basic concepts

Web dynpro (WD) lo standard SAP per la tecnologia UI (User Interface). Tale tecnologia serve per sviluppare applicazioni web. In altre parole, le Web Dynpro sono il modello di programmazione SAP per l'interfaccia utente sul web.

Modello MVC

Web dynpro un modello di programmazione client-independent, e cio, separa il layout dalla logica e si basa su paradigma Model-ViewController(MVC):
Model - interagisce con il sistema backend; View - definisce frontend (layout); Controller - collega il modello alla view.

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Introduzione alle Web Dynpro

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Introduzione alle Web Dynpro
I vari componenti di una Web Dynpro in un esempio di applicazione

Prendiamo ad esempio una applicazione per visualizzare i dati dei dipendenti. View - una view una schermata e contiene gli elementi di input ed ouput. Ad esempio un campo di testo per l'inserimento del nome del dipendente ed una tabella per la visualizzazione dei dati. Controller - ogni view ha un controller dedicato. Il controller gestisce le interazioni input/output ed esegue la gestione degli eventi in base alle azioni previste nella view. Ad esempio estrae e rende disponibile alla view i dati di un dipendente dopo il click di un pulsante quindi fa si da far scatenare un azione. Windows - una window contiene uno o pi view. Per visualizzare una view nel browser, quest'ultima deve essere inserita in una window. La window gestisce i plugin di entrata e di uscita ed ha un controller dedicato. Component - un component contiene tutti gli elementi come views, windows, controllers, ecc. necessari per eseguire una applicazione Web Dynpro e agisce come punto di ingresso dell'applicazione. Diversi component possono interagire tra di loro tramite le interfacce.
7

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Introduzione alle Web Dynpro
I vari componenti di una Web Dynpro in un esempio di applicazione

Application - identificato da un URL (Uniform Resource Locator) ed direttamente eseguibile per l'utente. Quando l'utente richiama la URL, la WD crea un'istanza del component applicativo, avviando il componente di primo livello(component controller) e la view definita iniziale. Context - repository di dati. I dati utilizzati in ogni componente vengono memorizzate in un context dedicato o in quello globale. Component Controller - il controller globale. Quando una WD viene richiesta attraverso l'URL il component controller viene istanziato. E 'visibile a tutti i componenti dellapplicazione. Interface Controller - visibile all'interno e all'esterno dell'applicazione. Viene utilizzato per lo scambio di dati tra diverse applicazioni. Plugs - possono essere suddivisi in inbound plugins e outbound plugins. I plugins sono utilizzati per la navigazione tra le view. Per spostarsi da una view all'altra, il plugin di uscita della view chiamante deve essere collegato al plugin di entrata della view chiamata. Quando un plugin viene chiamato, si attiva un metodo dedicato del gestore degli eventi.

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Creazione di una Web Dynpro
Eseguire la transazione ABAP Workbench (SE80) e selezionare Web-DynproComp./Intf.

Inserire il nome della web dynpro e cliccare su display. Nella finestra di dialogo selezionare web dynpro component. In questa finestra possibile creare la window di default.

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Creazione di una View
Cliccare nella root principale della web dynpro e selezionare create->view.

Selezionare il nome e la descrizione della view.

10

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Assegnare una View ad una Window
Aprire la window tramite doppio click sulloggetto window nel men ad albero.

Esplodere il ramo views nel men ad albero e trascinare la view creata precedentemente (drag and drop) allinterno della window.

11

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Creare una variabile nel context
Aprire il view editor per la view principale (doppio click sulla view). Passare al tab context. Creare un nodo o attributo cliccando su context.

Selezionare le propriet del nodo o attributo.

12

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Creare un elemento UI Campo testo
Nel view editor, passare al tab layout Inserire, tramite drag and drop, lelemento caption. Tra gli attributi dellelemento caption, inserire il testo Prova nellattributo text.

13

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Creare un elemento UI Campo input
Inserire, tramite drag and drop, lelemento textview. Nellattributo text dellelemento, cliccare su binding. In questo modo il valore dellattributo text dellelemento UI sar bindato ad una variabile del context.

Selezionare la variabile del context da far corrispondere allelemento UI.

14

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Creare un elemento UI - Tabella
Cliccare sulla root principale del layout ROOTUIELEMENTCONTAINER. Nel men a tendina cliccare su insert element.

Selezionare un nome per lelemento e il tipo elemento table

Selezionare create binding dalloggetto appena creato. In questo modo la tabella sar legata ad un nodo del context. Automaticamente verranno create tante colonne quanti sono i campi della tabella nel context. I dati contenuti nella variabile saranno bindati allelemento UI.

15

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Creare un elemento UI - Tabella

16

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Creare un elemento UI - Tabella
Selezionare la variabile del context.

Selezionare a quale attributo dellelemento UI dovranno essere bindati i dati presenti nel context. Ad esempio, per visualizzare i dati a video, i dati presenti nel context dovranno essere bindati allattributo text delle colonne.

17

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Utilizzo del context, UI element e metodi per l'estrazione e la visualizzazione dei dati
Passare al tab methods e selezionare il metodo WDDOINIT. Questo gestisce linizializzazione della pagina.

Ora scriviamo il codice necessario a reperire i dati da un database ed a bindare tali dati da una tabella interna al context. Ricordiamo che lelemento UI (tabella) gi legato (bindato) alla variabile del context.

18

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Utilizzo del context, UI element e metodi per l'estrazione e la visualizzazione dei dati
Il tool di sviluppo delle web dynpro mette a disposizione un wizard che permette di scrivere automaticamente il codice necessario a compiere diverse attivit. Utilizziamo il wizard per leggere una variabile del context, successivamente modifichiamo il codice creato per bindare la stessa variabile, anzich per leggerla. Cliccare su wizard. Selezionare read context. Cliccare sul matchcode. Selezionare la variabile del context.

19

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Utilizzo del context, UI element e metodi per l'estrazione e la visualizzazione dei dati
Codice generato per la lettura di una tabella del context

20

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Utilizzo del context, UI element e metodi per l'estrazione e la visualizzazione dei dati
Codice modificato per la bindare i dati in una tabella del context

21

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Creare una Web Dynpro Application
Nel men ad albero cliccare sul web dynpro component. Selezionare dal men create->web dynpro application.

Inserire il nome e la descrizione e cliccare su continue

22

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Creazione dei PLUG
Creare un outbound plugin nella view chiamante( 1 View creata ).

Creare un inbound plugin nella view chiamata( 2 View creata ).

Per gestire il ritorno dalla View Chiamata alla view chiamante, devi creare su Outbound Plugs della View Chiamata, un evento, ad esempio RETURN_OUTPUT_VIEW, da richiamare poi allinterno dell Inbound Plugs della view principale (chiamante).
23

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Navigazione tra view
Oltre alla creazione dei plugin, per navigare tra le view necessario scatenare levento navigation. Allinterno del codice di un metodo o di un evento, ad esempio sullevento di un click di un pulsante, tramite wizard selezioniamo start navigation. Aprendo il matchcode si vedono tutti i plugin disponibili.

24

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Navigazione tra view
Le view devono essere incorporate nella window. La windows contiene la view di default, necessario inserire anche la view successiva. Selezionare dal men ad albero la window. Cliccare sulloggetto window, poi su Embed view.

Selezionare la view da incorporare.

.
25

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Navigazione tra view
Le view sono ora incorporate nella window.

Creare il link (navigation link) tra i plugin delle view. Selezionare loutbound plugin dalla View Chiamante( 1 View Creata ), e cliccare su create navigation link

.
26

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Navigazione tra view
Selezionare linbound plugin per determinare la destinazione della navigazione dal plugin outbound della View Chiamante.

Ripetere loperazione sulloutbound plugin di ritorno dalla pagina chiamata alla pagina chiamante.

.
27

SAP:Environment, Health & Safety

SAP: Sviluppo Web Dynpro


Link per Approfondimenti
SCN - Web Dynpro ABAP http://www.sdn.sap.com/irj/sdn/nw-wdabap

SCN - Web Dynpro for ABAP: Tutorials for Beginners http://www.sdn.sap.com/irj/sdn/nwwdabap?rid=/webcontent/uuid/367b73e5-0901-0010-daa3-9de4771fc985

SCN ALV http://www.sdn.sap.com/irj/sdn/nwwdabap?rid=/webcontent/uuid/f0b107e4-dc72-2c10-08a7-b822c9abf0e2

SCN Select-options http://www.sdn.sap.com/irj/sdn/nwwdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2b19eefc67184#section4


28