Curs 10

Arhitecturi soft şi programare pe sisteme integrate II

7. Arhitectura Web Dynpro

Web Dynro for ABAP (cu prescurtare WD4A sau WDA) este standardul actual SAP pentru
dezvoltarea aplicaţiilor Web în mediul ABAP. Conţine un mediu de execuţie şi un mediu de
dezvoltare grafică cu unelte Web Dynpro speciale care formează un framework, integrate în ABAP
Workbench (SE80).
Paradigma după care este realizat acest framework este paradigma MVC. Designul MVC nu
este un concept nou (realizat în 1979 de dezvoltatorii Smalltalk pentru Xerox). De-a lungul timpului
asemenea aplicaţii au crescut în mărime şi complexitate, designul MVC fiind din ce în ce mai
utilizat şi mai acceptat.
MVC vine de la Model-View–Controller şi este un design pattern soft arhitectural care
facilitează decuplarea modelului de date de view (interfaţa cu utilizatorul). Controllerul este o
componentă intermediară care facilitează comunicarea între ele. Orice framework funcţionează pe
principul MVC. Însă, în cazul framework-ului Web Dynpro separarea datelor de design se
concretizează prin intermediul obiectelor care generează date şi a obiectelor care consumă date,
întreaga structură fiind concepută prin componente. Componenta este unitatea fundamentala
programabila in WD4A.
Astfel :
 Modelul este responsabil cu procesarea datelor şi returnarea rezultatelor la controller
 View este responsabil doar cu interfaţa care este afişată la utilizator
 Controller este responsabil cu evaluarea cererilor, trimiterea datelor şi instrucţiunilor la
model, trimiterea datelor la View, … în principiu responsabil cu interacţiunea dintre View şi
Model nefiind o simplă componentă de trecere care conectează Model de View – fig.7.1
(linia continuă reprezintă posibilitatea unui acces direct, linia întreruptă, posibilitatea
referenţierii).
MVC design pattern se comportă ca şi un ghid pentru implementarea părţii de prezentare,
control şi application logic.

Fig.7. 1

Un view este întotdeauna un consumator de date, pe când un controller poate sa fie atât un
consumator cât şi un generator de date. Un Model poate să fie totdeauna doar un generator de date.
 Interfeţele utilizator pot fi dezvoltate în framework-ul WD4A prin utilizarea a două tehnici:
declarative (când structura interfeţei este cunoscută înainte de execuţie) şi dinamice (când structura
interfeţei este parţial cunoscută în timpul execuţiei).
În fig. 7.2 este prezentată arhitectura framework-ului Web Dynpro.

Fig. 7.2

Implementarea clientului poate fi definită pentru web browser (Server-Side Rendering) caz
în care are loc implementarea metadatelor şi generarea paginilor HTML cu funcţionalităţi
JavaScript integrate. Mai poate fi definită o implementare XML care este folosită în prezent pentru
scenarii eCATT (extended Computer Aided Test Tool) precum şi pentru integrarea clientului de tip
SP Smart Board – fig. 7.3 [5].

Mediul de execuţie Web Dynpro

Nucleul mediului de execuţie Web Dynpro
Librăria
de
elemente
UI
Implementarea Implementarea Implementarea
SSR a clientului XML a clientului … urmează

Web eCATT,
Browser SAP Smart Board

Fig. 7.3

Dintre avantajele pe care le oferă Web Dynpo în dezvoltarea aplicaţiilor web amintim [3]:
- posibilitatea utilizării uneltelor grafice
- stricta separare între prezentarea datelor şi procesarea lor
- posibilitatea utilizării şi reutilizării componentelor
 - modificarea uşoară a aplicaţiei datorită uneltelor de care dispune
- posibilitatea de acces la datele din contextul aplicaţiei care rămân intacte chiar dacă
pagina se schimbă
- transportul automat al datelor prin data binding
- verificarea automată a intrărilor
- accesul la interfaţa utilizator
- integrarea în totalitate în mediul de dezvoltare ABAP.

Observaţie: Conceptele de bază Web Dynpro ABAP sunt la fel cu conceptele de bază din Web
Dynpro JAVA însă funcţionalităţile pe care le oferă depind de la caz la caz.

8. Convenţii, notaţii şi cuvinte rezervate

Framework-ul WD4A foloseşte termenul de context, pentru colecţia de date structurate pe

noduri cu atribute, din controller. De exemplu pentru numele unui context nod framework-ul WD4A
generează nume pentru definiţii de tipuri (if _V _default= >element _nume_nod) care este limitat la
30 de caractere. Atenţie la numele pentru context nod şi context atribut !
Pentru o transparenţă a aplicaţiilor Web Dynpro se propune o convenţie de notaţii pentru numele
elementelor View [5] – tabelul 8.1.

Tabelul 8.1. Lista prefixelor pentru elementele View.

Element View Prefix Exemplu
Button BTN_* BTN_DELETE
ButtonRow BTR_* BTR_MODELE
Caption CPT_* CPT_STUDENT
DropDownByIndex DDI_* DDI_ORASE
DropDownByKey DDK_* DDK_JUDETE
FileUpload FUD_* FUD_CURS
Group GRP_* GRP_FORMULAR
HorizontalGutter HOG_* HOG_ELEMENT
InputField INP_* INP_PRENUME
Label LBL_* LBL_OUTPUT
LinkToAction LTA_* LTA_DISPLAY
LinkToURL LTU_* LTU_MATERIALE
RadioButton RBT_* RBT_CASATORIT
RadioButtonGroupByIndex RBI_* RBI_STARE
RadioButtonGroupByKey RBK_* RBK_TIP
RoadMap RMP_* RMP_MODULE
RoadMapStep STP_* STP_MODUL
Table TBL_* TBL_STUDENT
TextEdit TXE_* TXE_NUME
TextView TXV_* TXV_DENUMIRE
TimedTrigger TTR_* TTR_NOTIFICARE
TransparntContainer TCO_* TCO_TABEL
Tray TRY_* TRY_FORMULAR
Tree TRE_* TRE_RECURSIV
TreeNodeType TNT_* TNT_IERARHIE
TreeItemType TIT_* TIT_FILE
ViewContainerUIElement VCU_* VCU_SELECT
 Pentru elementele de tip componente lista prefixelor [5] este prezentată în tabelul 8.2.

Tabelul 8.2. Lista prefixelor pentru elemente de tip componente

Element Prefix Exemplu
Window W_* W_DEFAULT
View V_* V_DEFAULT
Inbound-Plug IP_* IP_START
Outbound-Plug OP_* OP_EXIT

Pentru a distinge diferite părţi componente se foloseşte o convenţie de stil de scriere [5]
prezentată în tabelul 8.3.

Tabelul 8.3. Stiluri de scriere pentru distingerea diferitelor părţi componente

Parte componentă Exemplu
Element InputField InputField
Prefix (ID) pentru element INP_PRET
InputField
Property text
Property value inherit
Context node STUDENT
Context atribute ADRESA
Controller atribute mv_*, ms_*, mt_*…
Contoller actions DO_SET_COUNTER

În plus, framework-ul WD4A conţine şi o serie de cuvinte rezervate [5] prezentate în tabelul
8.4.

Tabelul 8.4. Alte cuvinte rezervate

Cuvinte rezervate
CONTROLLER CONTROLLER_NAME COMMAND
COMPONENT EVENT EVENT_NAME
F_APPL_CLASS F_ROOT_INFO F_ROOT_NODE
FIRST_INIT PLUG PARAMETERS
RESULT VIEW VIEW_NAME

9. Realizarea unei componente Web Dynpro for ABAP

O componentă Web Dynpro este o entitatea programabilă, care se poate reutiliza, necesară
pentru o aplicaţie Web Dynpro executabilă.

Prezetăm în detaliu etapele principale ce trebuie parcurse în realizarea unei componente Web
Dynpro for ABAP, pentru a clarifica elementele de limbaj ce descriu părţile ei componente
(structura primară) şi relaţiile ce există între acestea. Componenta afişează un text la Client
(Browser).

9.1 Afisarea unui text în browser prin proprietatea text a elementului view TextView

Pentru realizarea acestui scop se parcurg următoarele etape:

 Alegerea obiectului Web Dynpro Comp./Intf.din lista de obiecte ale tranzactiei SE80
 Adaugarea componentei: Y_WDA_text_0 -fig. 9.1.
 Fig. 9.1

 Click pe Simbolul şi confirmare (Yes) în fereastra Create Object – fig. 9.2.

Fig.9.2

 în fereastra: Web Dynpro: Component/Create interface – fig.9.3 se dă nume (dacă nu

există), descriere, tip şi nume Window.

Fig. 9.3

 După clic pe se alege pachetul si numărul de request corespunzător şi se salvează sau

opţiunea Local Object dacă dorim ca aplicaţia să se salveze în pachetul local – fig. 9.4.

Fig.9.4
 Fig. 9.5
 Componenta rezultată în urma acestor etape este o versiune inactivă a componentei
<Y_WDA_text_0> afişată în Web Dynpro Explorer – fig. 9.5.

Utilitarul Web Dynpro Explorer este complet integrat în ABAP Workbench şi serveşte ca mediu de
dezvoltare pentru framework-ul WD4A. Utilitarul este disponibil prin tranzacţia SE80.
 Se compilează şi se activează componenta 9.6.

Fig. 9.6

Până acum componenta Y_WDA_TEXT_0 cuprinde obiectele prezentate în fig. 9.7.

Fig. 9.7
 Dacă privim fig. 10 descoperim următoarele elemente ale componentei care se genereaza:
Componentcontroller care furnizeaza servicii si date in componenta, Component Interface realizat
dintr-o parte vizuală- Interface Views şi o parte logică – Interface Controller ce raspunde de
comunicarea cu alte componente si Window care reprezinta containerul de view-uri si punctul de
legatura intre aplicatia Web Dynpro executabila si componenta. Fiecarui window ii corespunde in
mod unic un Interface view cu acelasi nume care face legatura cu alte componente si cu aplicatie
Web Dynpro executabila. Pentru interfata cu utilizatorul se poate creea si un View, care va contine
un controller vizibil local. Controller-ele sunt partile active ale componentei care pot furniza
servicii si date. Controller-ele unei componente pot fi- fig.9.8 [http://wiki.sdn.sap.com] View
Controller, controller-e globale care sunt vizibile in toata componenta (ComponentController,
Window Controller, Custom Controller care se creeaza la nevoie si poate furniza servicii si date
intre view-urile grupate) si Interface Controller pentru legatura cu alte componente.

Component Controller este un controller global care furnizeaza servicii si date in componenta.

Fig. 9.8

Fig. 9.9

Componentele WD4A- fig. 9.9 – [6] pot fi utilizate în alte componente WD4A (subiectul îl vom
trata pe larg în capitolul Componentizare), dar ele nu pot fi executate separat. Comunicarea între
elementele a două componente Web Dynpro sau între componentă şi utilizator se realizează prin
interfeţele componentei.

Crearea View-ului
View este utilizat pentru definirea interfeţei vizuale la utilizator– fig. 9.10 – [6].

Fig. 9.10

Pe lângă partea vizibilă (Layout) un view conţine un controller şi un context - fig.9.11 – [6].
Datele la care elementele view sunt legate trebuie stocate în contextul view. Controllerul view
poate conţine metode pentru afişarea datelor sau pentru prelucrarea datelor de intrare de la
utilizator. Fiecare view poate dispune de o conexiune de intrare şi ieşire (inbound şi outbound
plugs, părţi ale controllerului view) astfel că view-urile pot fi legate unele de altele prin legături
de navigare-fig.9.12 – [6] (navigation links). Controlul unei conexiuni de intrare (sau ieşire) se
face printr-o metodă Handler pe care framework-ul WD4A o generează automat.

Fig. 9.11

Fig. 9.12

 se poate alege din lista de obiecte din stanga paginii Web Dynpro Explorer cu tasta dreapta
a mouse-ului Create -> View – fig. 9.13.
 Fig. 9.13

 ca la orice obiect nou creat în ABAP Workbench şi pentru un View apar interogările
pentru descriere –fig.9.14.

Fig. 9.14

 dupa <ENTER> (buton verde) urmează o mască de autorizare SAP WAS ABAP –
fig.9.15.

Fig. 9.15
 după salvare apare în ierarhia de obiecte a componentei un nod nou – fig.9.16 (Views),
sub care View-ul cu descrierea V_DEFAULT .
 Fig.9.16
 Se activează View.

 Rezultat: Componenta, Window (cu nume dat de dezvoltator W_DEFAULT) şi VIEW

(cu nume dat de dezvoltator V_DEFAULT)- fig. 9.17.

Fig. 9.17

 În Paginile View-Editor – fig. 9.16 găsim însuşiri şi putem seta proprietăţi pentru:
o Layout
o Inbound- si Outbound-Plugs,
o Context
o Attribute
o Actions
o Methods

Pe pagina Propeties găsim proprietăţi ale View-ului.

 Layout-ul View-ului va fi construit ierarhic printr-o structură de tip arbore

ROOTUIELEMENTCONTAINER care este generată implicit când View este creeat.
Elementele view sunt adăugate pe rând, realizându-se o ierarhie care are
ROOTUIELEMENTCONTAINER ca nod superior. Acest nod determină layout-ul
elementelor view aranjate sub acest nod. Există 4 categorii layout:
Categoria de layout Caracteristici
FlowLayout Aranjament în rând a elementelor view adaptat automat la dimensiunea
ferestrei utilizatorului. Nu există control asupra spaţiului dintre elemente.
Acesta se ajustează automat
RowLayout Aranjament în rând a elementelor view cu control asupra spaţiului dintre
elemente prin proprietatea RowHeadData. Fiecare element este afişat în
coloana sa corespunzătoare. Lăţimea coloanei variază de la rând la rând
GridLayout Aranjamentul elementelor view în coloană care depinde de numărul prestabilit
al coloanelor
MatrixLayout Aranjamentul elementelor view în coloană la care numărul coloanelor nu este
prestabilit. Poate fi adaptat la dimensiunea ferestrei clientului prin
proprietăţile stretchedHoriyontally şi stretchedVertically

View-Designer: crearea View-Layout

 Imaginea Layout a View-ului este concepută ca WYSIWYG-Editor (What You See Is What
You Get - ce descrie un sistem în care conţinutul afişat în timpul editării este foarte apropiat
cu rezultatul )

Butonul de pe bara cu instrumente a utilitarului Web Dynpro Explorer

afişează sau ascunde View - Designer.
Elementele View pot fi adăugate pe suprafaţa View-Layout prin 2 metode:
o prin Drag & Drop – fig. 9.18

Drag & Drop

Fig. 9.18

o prin inserarea sub nodul ROOTUIELEMENTCONTAINER – fig. 9.19.

 Fig. 9.19 Fig.9.20

Observaţie: care metodă trebuie întrebuinţată la crearea View-Layout, nu are nici o influenţă asupra
rezultatului final.

Elemente View

Elementele View sunt grupate într-o librărie pe categorii – fig.9.20.

o La afişarea unui text trebuie folosit Elementul View TextView .
 Pentru inserarea elementului selectăm nodul
ROOTUIELEMENTCONTAINER cu mouse-ul drept şi în contextul nodului
se alege Insert Element – fig. 9.21.

Fig. 9.21

o Elementul View de tipul TextView cu numele TXV_SALUT apare după nodul

ROOTUIELEMENTCONTAINER şi proprietăţile sale vor apărea pe aceeaşi coloană, în
dreapta View-Layout – fig.9.22.

Fig. 9.22
Majoritatea proprietăţilor elementului View TextView - TXV_SALUT ( sau oricum s-ar numi)
primesc din WD4A-Framework mărimi standard.

 Configurarea pentru TextView View-Element TXV_SALUT:

o Proprietatea text: se tastează un string: “Salut WD4A din View!“

o Proprietatea design: pentru o mai buna prezentare: header1

o Salvare (Ctrl + S) -> Verificare (Ctrl+ F2) -> Activare (Ctrl + F3)

o Rezultatul dupa configurarea elementului TextView -TXV_SALUT – fig. 9.23:

Fig. 9.23
Incapsularea View-ului in Window

Un window este partea colectivă a elementului vizual. O componentă poate conţine mai multe
window-uri şi un window poate conţine mai multe view-uri conectate prin link-uri de navigare.
Unul din aceste view-uri este specificat ca un view de start şi este afişat prima dată când
window-ul este apelat. Un view poate fi afişat în browser numai dacă este integrat într-un
window. Astfel fiecare window are asociat în mod unic un interface view conectat cu o aplicaţie
Web Dynpro din care se poate apela window printr-un URL – fig.9.24- [6]. La execuţie un
window poate afişa doar un singur view la un moment dat. Pentru afişarea simultană a mai
multor view-uri, acestea trebuie grupate înt-un view main folosind elementul view
ViewContainerUIElement. Window-urile pot avea şi ele conexiuni de intrare ieşire (inboud şi
outbound plugs sau interface inboud şi outbound plugs) – fig. 9.25 – [6]. Un empty view este un
view generat automat de framework-ul WD4A într-un window care nu are un alt view inserat.
 Fig.9.24

Fig. 9.25

o în lista de obiecte a componentei WD din stânga se deschide nodul Window şi apoi

prin dublu click fereastra W_DEFAULT se ajunge în editorul Window– fig. 9.26,
9.27.

Fig. 9.26

Fig.9.27

o în partea dreaptă apare editorul Window cu domeniile pentru prezentare şi definire a:

 proprietăţilor
 structurii Window-ului (prezentarea: Window-Tab)
 Inbound- şi Outbound-Plugs,
 context-ului
 atributelor
 metodelor pentru Window W_DEFAULT.
Se realizează un clic dreapta pe W_DFAULT din lista Window-Struktur, comanda Embed View-
fig.9.28.

Fig. 9.28

Din fereastra care apare – fig. 9.29, în câmpul View to Be Embedded, prin input help se selectează
din lista care apare – fig. 9.30 view-ul care trebuie încapsulat.

Fig. 9.29

Fig. 9.30

Se confirmă alegerea făcută prin clic pe butonul - fig. 9.31

Fig. 9.31
Rezultatul obţinându-se în fig. 9.32.

Fig. 9.32

o View-ul va fi încapsulat în structura Window-ului şi pentru că e primul view în structura

Window va fi automat marcat cu proprietata DEFAULT – fig. 9.32.

o Aceasta înseamnă că la chemarea Window-ului este afişat primul View-ul V_DEFAULT

.

o După care se realizează Salvare -> Verificare -> Activare .

o Se poziţionează mouse-ul pe numele componentei în lista de obiecte din partea stângă

şi se aleg : Create -> Web Dynpro-Application –fig. 9.33.

Fig. 9.33

o în fereastra de dialog apare numele aplicaţiei la fel cu numele componentei WD – fig.

9.34. Se mai adaugă şi o descriere, dupa care se dă accept .

Fig. 9.34

o după care apare în partea dreapta a ecranului Application-Editor pentru stabilirea

proprietăţilor aplicaţiei – fig. 9.35.
o denumiri default
care pot fi preluate:

Fig. 9.35

o Valoarea din câmpul Interface View indică Window-ul care va fi chemat la pornirea
aplicaţiei

o Valoarea din câmpul Plug Name cuprinde Startup-Inbound-Plug, care va fi declanşat la

chemarea Windows-ului.

o După ce aplicaţia WD este salvată – fig. 9.36 poate fi testată prin sau – fig. 9.37.

Fig. 9.36
 Fig. 9.37

o la pornire, va fi copiat URL-ul din pagina Property a Application-Editors în rândul

Adress a browser-ului Web. Urmează apoi o pagină de înscriere – fig. 9.38:

Fig. 9.38
o şi înscrierea iniţială – fig. 9.39:

Fig. 9.39

 Rezultatul aplicaţiei: afişarea text-ului prin valoare inţială în View-Element – fig.9.40:

 Fig. 9.40

Procesele care au loc la lansarea în execuţie a aplicaţiei:

o prin Client (Browser) va fi chemată aplicaţia WD4A Y_WDA_TEXT_0

o aplicaţia se subordonează componentei WD cu acelaşi nume Y_WDA_TEXT_0
o Window-ul W_DEFAULT este marcat ca Interface-View şi va fi astfel chemat ca
startup în Inbound-Plug DEFAULT – fig. 9.41
o

.
Fig. 9.41

o în Window este instalat View-ul V_DEFAULT ca DEFAULT-View – fig. 9.42 şi va fi

afişat primul.

Fig. 9.42