Manuale Sulle Web-Dynpro Application

7/22/2019 Manuale Sulle Web-Dynpro Application

1/28

GRUPPO TELECOM ITALIA

Percorso formativo

SAP: Sviluppo Web DynproScheda tecnica di progetto


2/28

SAP:Environment, Health & Safety

2

SAP: Sviluppo Web Dynpro

Durata: 2 gg (maggio 2011)Tipologia: Corso teorico / pratico

SEDE: Engineering.itVia Riccardo Morandi,3210100 - ROMAAULA: A513

Obiettivi

Prerequisiti

Questo corso permetter di prendere familiarit con lo sviluppo delle web dynpro

portando a conoscerne gli aspetti basilari dello sviluppo

1. Conoscenza della programmazione abap ed OO


3/28


3

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



4/28


4

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



5/28


5

Introduzione alle Web Dynpro

Web Dynpro

Basic

concepts

Modello

MVC

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.

Web dynpro un modello di programmazione client-independent, e cio,

separa il layout dalla logica e si basa su paradigma Model-View-

Controller(MVC):

Model - interagisce con il sistema backend;

View - definisce frontend (layout);

Controller - collega il modello alla view.



6/28


6




7/28


7


I vari

componenti

di una Web

Dynpro in un

esempio diapplicazione

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 viewnel 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.



8/28


8


I vari

componenti

di una Web

Dynpro in un

esempio diapplicazione

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.



9/28


9

Creazione di una Web Dynpro

Eseguire la transazione ABAP Workbench (SE80) e selezionare Web-Dynpro-

Comp./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.



10/28


10

Creazione di una View

Cliccare nella root principale della web dynpro e selezionare create->view.

Selezionare il nome e la descrizione della view.



11/28


11

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.



12/28


12

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.



13/28


13

Creare un elemento UI Campo testo

Nel view editor, passare al tablayout

Inserire, tramite drag and drop, lelemento caption.

Tra gli attributi dellelemento caption, inserire il testo Prova nellattributo

text.



14/28


14

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.



15/28


15

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.



16/28


16




17/28


17


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.



18/28


18

Utilizzo del context, UI element emetodi per l'estrazione e lavisualizzazione dei dati

Passare al tabmethods e selezionare il metodo WDDOINIT. Questo

gestisce linizializzazione della pagina.

Ora scriviamo il codice necessario a reperire i dati da un database ed abindare tali dati da una tabella interna al context. Ricordiamo che lelemento

UI (tabella) gi legato (bindato) alla variabile del context.



19/28


19


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 stessavariabile, anzich per leggerla.

Cliccare su wizard. Selezionare read context. Cliccare sul matchcode.

Selezionare la variabile del context.



20/28


20


Codice generato per la lettura di una tabella del context



21/28


21


Codice modificato per la bindare i dati in una tabella del context



22/28


22

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



23/28


23

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).



24/28


24


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.



25/28


25


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.

.



26/28


26


Le view sono ora incorporate nella window.

Creare il link (navigation link) tra i plugin delle view. Selezionare loutbound

plugin dalla View Chiamante( 1View Creata ), e cliccare su create

navigation link

.



27/28


27


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.

.



28/28


28

Link per Approfondimenti

SCN - Web Dynpro ABAP

http://www.sdn.sap.com/irj/sdn/nw-wdabap

SCN - Web Dynpro for ABAP: Tutorials for Beginnershttp://www.sdn.sap.com/irj/sdn/nw-

wdabap?rid=/webcontent/uuid/367b73e5-0901-0010-daa3-9de4771fc985

SCN ALV

http://www.sdn.sap.com/irj/sdn/nw-

wdabap?rid=/webcontent/uuid/f0b107e4-dc72-2c10-08a7-b822c9abf0e2

SCN Select-options

http://www.sdn.sap.com/irj/sdn/nw-

wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-

b19eefc67184#section4

http://www.sdn.sap.com/irj/sdn/nw-wdabaphttp://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabap?rid=/webcontent/uuid/204f4d81-3bad-2910-98b2-b19eefc67184http://www.sdn.sap.com/irj/sdn/nw-wdabaphttp://www.sdn.sap.com/irj/sdn/nw-wdabaphttp://www.sdn.sap.com/irj/sdn/nw-wdabaphttp://www.sdn.sap.com/irj/sdn/nw-wdabaphttp://www.sdn.sap.com/irj/sdn/nw-wdabaphttp://www.sdn.sap.com/irj/sdn/nw-wdabaphttp://www.sdn.sap.com/irj/sdn/nw-wdabaphttp://www.sdn.sap.com/irj/sdn/nw-wdabap

Manuale Sulle Web-Dynpro Application

Documents

Transcript of Manuale Sulle Web-Dynpro Application