Web Dynpro ABAP

Fundamentos

Julio 2011

Temario

Introduccin
Arquitectura
Uso de las herramientas aplicado a
casos

Introduccin

SAP y la WEB

Necesidad de adaptar SAP para aplicaciones WEB:

Historia:
ITS (1995)
BSP(2001) .Primer solucin para conexin a Internet
integrada a SAP
Web Dynpro JAVA(2004)
Web Dynpro ABAP(2005)

Introduccin

SAP y la WEB

Model View Controller:

A partir de BSP SAP adapta la metodologa MVC
MVC:
Creada en 1979, MVC apunta a separar la Interface de Usuario
del Modelo de datos

Introduccin

SAP y la WEB

Model View Controller:

Introduccin

SAP y la WEB

Model View Controller:

La metodologa MVC provee a la interface de Usuario(View) y a
los Controllers capas que permiten acceder al Modelo de
datos .Estos permanecen invisibles tanto para las View como
para los Controllers.

Introduccin

SAP y la WEB

Model View Controller:

Ejemplo:

Introduccin

SAP y la WEB

Analogas con Module Pool:

View
Controller
Model:

= ~ Dynpro
=~
=~

PBO PAI
Programa Module Pool

Arquitectura
Desarrollo de un Componente WebDynpro
No se necesita saber HTML
Se necesitan conocimientos de POO
Editor Grfico:
Las interfaces con el Usuario son declaradas en un entorno grfico
Cdigo ABAP:
A travs de Mtodos
Ejecutable:
El Compilador traslada lo definido a travs del Entorno Grfico y el Cdigo
ABAP a un Ejecutable

Arquitectura

Tpicos:

Componentes, Windows, Vistas, Aplicaciones

Vistas (Views): UI Elements y sus propiedades
Vistas: Navegacin
Controles(Controllers): Tipos
Mtodos Hook: Flow del Programa
Assistance class: Interface general entre Componente y Modelo
Contextos(Context): Transferencia de datos entre Vistas
Controles y Modelos

10

Arquitectura

Tpicos:

Windows: (No incluidas en la Metodologa MVC)

Tres propsitos:
Embebe todas las posibles vistas a publicar
Manejo del Layout si hay Vistas que se publican en
paralelo
Navegacin entre Vistas

11

Arquitectura

12

Arquitectura

13

Arquitectura
Component Controller:
Hay uno solo por WebDynpro Component
Comprende Atributos Mtodos Eventos y Contextos
Los Objetos del Component Controller estn disponibles para el
resto
Views:
Primariamente contiene los elementos UI (User Interface)
Cada View tiene su propio Controller capaz de responder a
acciones del Usuario
Windows:
Integra las Views y la navegacin entre ellas
Component Interface:
Permite el diseo Cross Component
14

Arquitectura
Creacin de una View

15

Arquitectura
Creacin de un UI

16

Arquitectura
Creacin de una Aplicacin WebDynpro

17

Arquitectura
Creacin de una Aplicacin WebDynpro

18

Arquitectura
Windows: Navegacin entre Views. Outbound e Inbound
Plugs
Navigation Links

19

Arquitectura
Navegacin entre Views:
Crear Botn . Crear Plug de Outbound. Crear Action
En Vista 1:

20

Arquitectura
Navegacin entre Views:
Crear Botn . Crear Plug de Inbound.
En Vista 1:

21

Arquitectura
Navegacin entre Views:
Repetir en Vista 2 lo hecho para Vista 1
En la Window:
Agregar segunda Vista

22

Arquitectura
Navegacin entre Views:
Repetir en Vista 2 lo hecho para Vista 1
En la Window:
Definir la navegacin

23

Arquitectura
Controllers:
Component Controllers: Punto de acceso global de un
Componente WebDynpro y es usado para:
Comunicacin entre Componentes WebDynpro
Intercambio de datos entre las Windows Views de un
Componente
WebDynpro y el Modelo(Binding) .
View Controllers: Solo visible dentro de la View
correspondiente. Como puede verse en la creacin de Plugs y
Acciones, se ocupa de resolver los trigger y controlar las
propiedades de los elementos UI comprendidos en la View.
Windows Controllers: Visible dentro de la Windows y las View
embebidas , tienen un uso similar a las View dentro de la
Window.
Custom Controllers: Especialmente tiles para intercambio
de datos entre Windows y Views.

24

Arquitectura
Component Controllers:
Atributos :

Mtodos:

25

Arquitectura
View Controllers:
Atributos :

Mtodos:

26

Arquitectura
Windows Controllers:
Atributos :

Mtodos:

27

Arquitectura
Mtodos:
Propiamente dichos: Como los Mtodos POO
Event Handlers: Como los Eventos POO
Supply Functions: Se usan para llenar automticamente los
Contextos
Mtodos HOOK:
Son Mtodos Standard que permiten interferir en la secuencia
de ejecucin de la aplicacin en determinado punto.

28

Arquitectura
Ejemplo de secuencia de ejecucin del Mtodo WDOINITI:

29

Arquitectura

Context
El Contexto (Context) representa la Interface que permite
intercambiar datos entre los UI (User Interfaces) y el Sistema a
travs de los Controllers
Estructura:

30

Arquitectura

Context:
Data Binding
Data Binding permite establecer una relacin directa entre
elementos UI y los atributos del contexto.
Esto incluye tanto valores como propiedades.
Si por ejemplo tomamos un elemento UI Input Fields, podemos
bindear el valor con un atributo del contexto, y tambin
podemos bindear la propiedad de invisible con un atributo
boleano del contexto. Esto permitir manejar desde el contexto no
solamente el valor del campo sino tambin si se har visible o no.

Mapping:
Permite relacionar Contextos de diferentes Controllers.
En tiempo de ejecucin los datos no son copiados sino
referenciados, lo que significa que los datos solamente
existen en el Contexto original.
Si por ejemplo dos o ms vistas tienen datos similares
tendra sentido almacenarlos en un nico contexto.
31 Habitualmente se trata del Component Controller, aunque
tambin podra usarse el Window Controller.

Arquitectura

Context
Creacin de un Nodo:

Cardinality: Cantidad de elementos que pued tener un Nodo

Selection: Cantidad de elementos de un Nodo leidos en run time
Lead Selection: Determina cul de los Elementos de un Nodo se
muestra en la UI
32

Arquitectura

Context
Lead Selection:

33

Arquitectura

Context
Interfaces (de clases) que permiten el manejo de Nodos y
Atributos:
IF_WD_CONTEXT_NODE
IF_WD_CONTEXT_ELEMENT
Mtodos principales para el Nodo:

34

Arquitectura

Context
Mtodos principales para Elementos:

35

Arquitectura

Caso 1:
Tabla de ranking de Helados:
Crear un Nodo en el Context del Component
Controller
Crear un Atributo para el Gusto en el Context de la
View
Crear un Campo de Entrada para el ingreso del gusto
Bind del Campo de Entrada con el Contexto
Accion ADD_ICECREAM para :
Leer el Campo VALUE
Invocar el Mtodo ADD_ICECREAM
Limpiar el valor del Campo en la Pantalla
Mtodo ADD_ICECREAM para :
Posicionarse en el Nodo
Incrementar la variable global
gv_ranking_counter
Almacenar en el Nodo
Mtodo
36

Arquitectura

Caso 1:
Tabla de ranking de Helados:
Crear un Nodo en el Context del Component
Controller

37

Arquitectura

Caso 1:
Tabla de ranking de Helados:
Crear un Atributo para el Gusto en el Context de la
View

38

Arquitectura

Caso 1:

Tabla de ranking de Helados:

Crear un Campo de Entrada para el ingreso del gusto
Bind con el Campo VALUE del contexto de la View
Action ADD_ICECREAM en el Evento OnEnter

39

Arquitectura

Caso 1:

Tabla de ranking de Helados:

Action ADD_ICECREAM en el Evento OnEnter
DATA:LV_ICECREAMTYPECHAR_LG_32.
*ReadValue
callmethodwd_context->get_attribute
exporting
name='VALUE'
importing
value=lv_icecream.
*RankIceCream
wd_comp_controller->add_icecream(name=lv_icecream).
*DeletevalueVALUEinputfield/Attribute
callmethodwd_context->set_attribute
exporting
name='VALUE'
value=''.

40

Arquitectura

Caso 1:

Tabla de ranking de Helados:

Definir Campo Global gv_ranking_counter

41

Arquitectura

Caso 1:

Tabla de ranking de Helados:

Mtodo ADD_ICECREAM en el Component Controller
DATAlo_nd_icecreamTYPEREFTOif_wd_context_node.
DATAls_icecreamTYPEwd_this->element_icecream.
*navigatefrom<CONTEXT>to<ICECREAM>vialeadselection
lo_nd_icecream=wd_context->get_child_node(name=wd_this>wdctx_icecream).
*@TODOhandlenonexistantchild
*IFlo_nd_icecreamISINITIAL.
*ENDIF.
add 1 to wd_this->gv_ranking_counter.
ls_icecream-ranking=wd_this->gv_ranking_counter.
ls_icecream-name=name.
*appendalinetothenode
lo_nd_icecream>bind_structure(new_item=ls_icecreamset_initial_elements=abap_false).

42

Arquitectura

Caso 1:
Mostrar Ranking en la Vista V_RESULT:
Mapping del Nodo
Insertar UI DropDownByIndex
Bind la propiedad TEXT con el Atributo RANKING del
Nodo
Accin APPLY_CONTEXT_CHANGE en OnSelect
Insertar UI TEXTVIEW para ver el nombre del Gusto

43

Arquitectura

Caso 1:
Mostrar Ranking en la Vista V_RESULT:
Mapping del Nodo

44

Arquitectura

Caso 1:
Mostrar Ranking en la Vista V_RESULT:
Insertar UI DropDownByIndex
Bind la propiedad TEXT con el Atributo RANKING del
Nodo

45

Arquitectura

Caso 1:
Mostrar Ranking en la Vista V_RESULT:
Accin APPLY_CONTEXT_CHANGE en OnSelect

46

Arquitectura

Caso 1:
Mostrar Ranking en la Vista V_RESULT:

47

Arquitectura

Caso 1:
Mostrar Ranking en la Vista V_RESULT:
Insertar UI TEXTVIEW para ver el nombre del Gusto

Bind con atributo NAME del Nodo

48

Supply Functions
Se ejecuta si el Nodo no tiene datos

Supply Functions

Supply Functions
DATA lt_icecream TYPE wd_this->Elements_icecream.
DATA ls_icecream LIKE LINE OF lt_icecream.
** Agregar elemento al NODO
add 1 to wd_this->gv_ranking_counter.
ls_icecream-ranking = wd_this->GV_RANKING_COUNTER.
ls_icecream-name

= 'Helado de Vainilla'.

append ls_icecream to lt_icecream.

*
** bind all the elements
node->bind_table(
new_items

lt_icecream

set_initial_elements = abap_true ).

Eliminar Elementos del ranking

Mtodo REMOVE_ICECREAM:
data: lo_nd_icecream type ref to if_wd_context_node,
lo_el_icecream type ref to if_wd_context_element.
lo_nd_icecream = wd_context->get_child_node( wd_this->wdctx_icecream ).
lo_el_icecream = lo_nd_icecream->get_lead_selection( ).
lo_nd_icecream->remove_element( lo_el_icecream ).
* wd_this->fire_set_properties_evt( )

Eliminar Elementos del ranking

En Layout de V_RESULT agregar Boton REMOVE

Eliminar Elementos del ranking

Asociar al Botn la accin REMOVE

Eliminar Elementos del ranking

Accin REMOVE
method ONACTIONREMOVE .
WD_COMP_CONTROLLER->remove_icecream( ).
endmethod.

Caso 2:
Consulta de la Deuda de un Cliente
Objetivo:
Se presenta una Pantalla para que el Usuario ingrese Sociedad y Cliente
En la misma Pantalla se publica la Deuda
Tareas:
Nodos: Definir Nodo de Seleccin y Nodo de Publicacin
Modelo: Definir el Modelo en el Component Controller:
.Mtodo PUBLICAR:
Lee el Nodo con la Seleccin
Invoca la Funcin de SAP que devuelve la Deuda
Carga el Nodo de Publicacin
Views:
Seleccin: Crear UI Elements para la Seleccin
Publicacin: Crear UI Elements para la Publicacin
Navegacin:

Plugs para navegar desde la Pantalla de Seleccin a la de Publicacin

Window:
Embeber Pantallas
Liinkear Navegacin

Caso 2:
Nodo Seleccin

Caso 2:
Nodo Seleccin

Caso 2:
Nodo Publicacin

Caso 2:
Nodo Publicacin

Caso 2:
Nodo Publicacin

CASO 2:
Uso de Mtodos HOOK:
Inicializar campos de Seleccin :
Va Supply Function
Va Valor por default en el atributo
Va Programacin
Crear un Mtodo llamado set_seleccion que inicialice los campo de
seleccin
Para invocarlo usaremos el HOOK Method WDOINIT del Component
Controller

Caso 2:
Inicializar Campos de seleccin : Mtodo
SET_SELECCION
parameter; seleccion importing type zmhgbukrskunnr
DATAlo_nd_seleccionTYPEREFTOif_wd_context_node.
DATAlo_el_seleccionTYPEREFTOif_wd_context_element.
DATAls_seleccionTYPEwd_this->element_seleccion.
*navigatefrom<CONTEXT>to<SELECCION>vialeadselection
lo_nd_seleccion=wd_context->get_child_node(name=wd_this->wdctx_seleccion).
*@TODOhandlenonexistantchild
*IFlo_nd_seleccionISINITIAL.
*ENDIF.
*getelementvialeadselection
lo_el_seleccion=lo_nd_seleccion->get_element().
*@TODOhandlenotsetleadselection
IFlo_el_seleccionISINITIAL.
ENDIF.
*@TODOfillstaticattributes
*ls_seleccion=xxx->get_yyy().
ls_seleccion-sociedad=seleccion-sociedad.
ls_seleccion-cliente=seleccion-cliente.
*setalldeclaredattributes
lo_el_seleccion->set_static_attributes(
static_attributes=ls_seleccion).

Caso 2:
Inicializar campo seleccin Clase:
Mtodo WDOINIT
Utilidad del WIZARD

Wizard

Caso 2:
Inicializar campo seleccin Clase:
Mtodo WDOINIT
method WDDOINIT .
data:l_selecciontypeZMHGBUKRSKUNNR.
l_seleccion-sociedad='ACSA'.
l_seleccion-cliente='1278711'.
wd_this->set_seleccion(
seleccion=l_seleccion"zmhgbukrskunnr
). endmethod.

Caso 2:
Modelo:
Crear Mtodo publicar
Parameter: RS_VALUE returning type zwdseleccion
Poner a partir de aca toso los metodos

Caso 2:
View Container :
En la Vista V_MAIN_LAYOUT definir View Containers
para Seleccin y para Publicacin

Caso 2:
Crear View V_SELECTION para ingresar los Campos
de Seleccin y mapear con el Contexto del
Controller

Caso 2:
Definir UI Elements en View v_Seleccin:
IF_BUKRS Bind con Campo BUKRS del Contexto

Caso 2:
Definir UI Elements en View v_Seleccin:
IF_KUNNR Bind con Campo KUNNR del Contexto

Caso 2:
Declarar Views en la Windows

Caso 2:
View de Publicacion:
Mapear con el Contexto y Crear definir Tabla

Caso 2:
Crear Tabla usando WIZARD : Binding

Caso 2:
Crear Tabla usando WIZARD : Binding

Caso 2:
Test: Crear Aplicacin

Caso 2: Mtodo publicar:

PARAMETER RS_VALUE Returning type ZWDSELECCION
method PUBLICAR .
DATAlo_nd_seleccionTYPEREFTOif_wd_context_node.
DATAlo_el_seleccionTYPEREFTOif_wd_context_element.
DATAls_seleccionTYPEwd_this->element_seleccion.
*navigatefrom<CONTEXT>to<SELECCION>vialeadselection
lo_nd_seleccion=wd_context->get_child_node(name=wd_this->wdctx_seleccion).
*@TODOhandlenonexistantchild
*IFlo_nd_seleccionISINITIAL.
*ENDIF.
*getelementvialeadselection
lo_el_seleccion=lo_nd_seleccion->get_element().
*@TODOhandlenotsetleadselection
IFlo_el_seleccionISINITIAL.
ENDIF.
*getalldeclaredattributes
lo_el_seleccion->get_static_attributes(
IMPORTING
static_attributes=ls_seleccion).
wd_this->execute_bapi_ar_acc_getopenite(
companycode=ls_seleccion-sociedad"bapi3007_1-comp_code
customer=ls_seleccion-cliente"bapi3007_1-customer
).
wd_this->set_publicacion(
deuda=wd_this->lineitems"zbapi3007_2
).
endmethod.

Caso 2: Mtodo executeopenitems:

PARAMETERS:
COMPAMYCODE

IMPORTING

BAPI3007_1-COMP_CODE

CUSTOMER

IMPORTING

BAPI3007_1-COMP_CUSTOMER

METHOD EXECUTEOPENITEMS .
*declarationsforcontextnavigation
DATAlo_elementTYPEREFTOif_wd_context_element.
DATAlt_elementsTYPEwdr_context_element_set.
datal_kunnrtypekunnr.
*declarationsforparameters
*getallinvolvedchildnodes
*getinputfromcontext
l_kunnr=customer.
CALLFUNCTION'CONVERSION_EXIT_ALPHA_INPUT'
EXPORTING
input=l_kunnr
IMPORTING
OUTPUT=l_kunnr
.
*theinvocation-errorsarealwaysfatal!!!
CALLFUNCTION'BAPI_AR_ACC_GETOPENITEMS'
EXPORTING
companycode=companycode
customer=l_kunnr
keydate=sy-datum
"noteditems=wd_this->noteditems
"secindex=wd_this->secindex
"IMPORTING
"return=wd_this->return
TABLES
lineitems=wd_this->lineitems
.
*storeoutputtocontext
ENDMETHOD.

Caso 2: Mtodo set_publicacion:

PARAMETERS:
DEUDA
METHOD

IMPORTING

set_publicacion

ZBAPI3007_2

DATAlo_nd_publicacionTYPEREFTOif_wd_context_node.
DATAls_publicacionTYPEwd_this->element_publicacion.
DATAlt_publicacionTYPEwd_this->elements_publicacion.
datar_deudatypeBAPI3007_2.
*navigatefrom<CONTEXT>to<PUBLICACION>vialeadselection
lo_nd_publicacion=wd_context->get_child_node(name=wd_this->wdctx_publicacion).
*@TODOhandlenonexistantchild
*IFlo_nd_publicacionISINITIAL.
*ENDIF.
loopatdeudaintor_deuda.
move-correspondingr_deudatols_publicacion.
appendls_publicaciontolt_publicacion.
endloop.
*appendalinetothenode
lo_nd_publicacion->bind_table(new_items=lt_publicacionset_initial_elements=abap_true).
ENDMETHOD.

Caso 2: Navegacin

Caso 2: Navegacin
Desde seleccin a Publicacin:

Caso 2: Navegacin
Desde Publicacin seleccin:

Caso 3: Cross Component

Uso de un Componente externo

Un componente puede ser usado desde Otro Componente

Por lo tanto un Componente no necesariamente debe ser ejecutado
va una Aplicacin Web
Pueden programarse entonces Componentes para programar
actividades repetitivas. Luego sern invocados desde el Componente
ejecutable

Caso 3: Cross Component

Uso de un Componente externo
Ejemplo:
Dado el Componente ZWDC_05_NATIONS

Caso 3: Cross Component

Uso de un Componente externo
Ejemplo:
Mtodo supply:
DATAlt_t005tTYPEwd_this->Elements_t005t.
DATAls_t005tLIKELINEOFlt_t005t.
select*fromt005tintotablelt_t005t
wherespras=sy-langu
orderbyland1.
*
**bindalltheelements
node->bind_table(
new_items=lt_t005t
set_initial_elements=abap_true).
*

Caso 3: Cross Component

Uso de un Componente externo
Ejemplo:
ViewV_NATIONS:

Caso 3: Cross Component

Uso de un Componente externo
Ejemplo:
Resumen del objetivo del Componente:
A travs de una Supply Function carga la Tabla de Paises en el
Contexto
Permite navegar de Pais en Pais a travs del UI
DropdownbyIndex

Caso 3: Cross Component

Uso de un Componente externo
Ejemplo:
El Componente ZWDC_05_NATIONS es usado por el
Componente ejecutable ZWDC_05_MAIN

Caso 3: Cross Component

Uso de un Componente externo
Ejemplo:
El Componente ZWDC_05_NATIONS es usado por el
Componente ejecutable ZWDC_05_MAIN

Caso 3: Cross Component

Uso de un Componente externo
Ejemplo:
El Componente ZWDC_05_NATIONS es usado por el
Componente ejecutable ZWDC_05_MAIN