Curso Web Dynpro v1

Consultora + Integracin + I nnovacin
WEB DYNPRO FOR ABAP
ABRIL 2011 | MADRID
www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
Consultora + Integracin + I nnovacin INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
USUARIO COMPONENT DINMICA AVANZADOS
Web Dynpro ABAP es el estndar de SAP de tecnologa Interfaces de

Web Dynpro Usuario (UI) para el desarrollo de aplicaciones Web.
Definicin.
Es un entorno de ejecucin y desarrollo grfico con herramientas
especiales integradas en el Workbench de ABAP(SE80).
Proporciona un marco que se desarroll debido a que SAP necesitaba un

entorno de desarrollo de aplicaciones basadas en Web que reuniese
todos los requisitos exigidos por su software actual.
Como punto inicial de partida, se tom el diseo Modelo Vista Controlador

(MVC) que formar la base de la arquitectura Web Dynpro.
www.netcheck.es
01 02 03 04 05 06 07
Web Dynpro
Evolucin.
www.netcheck.es
01 02 03 04 05 06 07
Uso de herramientas grficas y declarativas que reducen

Web Dynpro significativamente el esfuerzo de implementacin.
Ventajas.
Diseo estructurado.
Separacin estricta entre la presentacin, y los datos del proceso.
Reutilizacin y mejor mantenimiento por el uso de componentes.
Navegacin y diseo se cambian fcilmente.
Acceso a los datos en cualquier momento a travs del contexto de la
aplicacin.
Transporte automtico de datos mediante enlazado (data binding).

Verificacin automtica de entradas.
Integracin completa en el entorno de desarrollo de ABAP. Cosa que no
ocurre con Web Dynpro for Java.
www.netcheck.es
01 02 03 04 05 06 07
Modelo Vista Web Dynpro est basado en el Modelo Vista Controlador:

Controlador Separacin clara de lgica de negocio y lgica de presentacin.
Introduccin.
Metamodelo uniforme para todos los tipos de Interfaces de
Usuario.
Amplia independencia entre la plataforma y la interfaz.
www.netcheck.es
01 02 03 04 05 06 07
Modelo Vista
Controlador
Introduccin.
Enlaza las capas de Genera los datos de
Capa de interaccin de negocio
usuario y negocio. la aplicacin sin tener
Todos los procesos en cuenta como van
intermedios se a ser mostrados.
MODELO
realizan aqu.
Peticin
CONTROLADOR
Respuesta Capa de interaccin de usuario
Presenta los datos
de la aplicacin sin
VISTA tener en cuenta
como han sido
generados.
www.netcheck.es
01 02 03 04 05 06 07
Componente Es una entidad reutilizable y ejecutable.

Web Dynpro Contiene un determinado nmero de ventanas, vistas, y sus
Definicin. correspondientes controladores.
Otros Componentes Web Dynpro pueden ser referenciados.
www.netcheck.es
01 02 03 04 05 06 07
Aplicacin Web Es el enlace de entrada al componente web dynpro.

Dynpro
Definicin.
Puede ser llamada desde una interfaz de usuario.
Como programa independiente se conecta con una direccin URL
que puede ser accedida por un usuario.
No contiene informacin alguna acerca de los elementos que se

encuentran detrs del Interfaz de Vista.
www.netcheck.es
2.1 2.2 2.3
VISTA VENTANA COTROLADOR
Vista Describe la presentacin en pantalla de los elementos de interfaz de

Definicin. usuario (IU).
Cada componente Web Dynpro tiene al menos una vista

La vista est compuesta por el layout, conectores de E/S y controlador de
vista.
www.netcheck.es
2.1 2.2 2.3
Vista La navegacin entre vistas esta soportada por conectores.

Definicin. Los conectores son de entrada o salida.
Un conector slo puede pertenecer a una vista
La entrada a una vista provoca la llamada al manejador de eventos.
Para navegar de una vista a otra, se ha de llamar al conector de salida de
la primera que estar unido al conector de entrada de la segunda por
medio de un enlace de navegacin.
www.netcheck.es
2.1 2.2 2.3
Ventana Es un contenedor de vistas.

Definicin.
Debe existir una vista inicial.
Slo puede haber una vista activa.
En ella se define como va a ser la navegacin entre vistas
La ventana esta compuesta por conectores de E/S y controlador de
ventana.
www.netcheck.es
2.1 2.2 2.3
2.3
WINDOW CONTROLLER
Consultora + Integracin + I nnovacin VISTA VENTANA COTROLADOR
Controlador Son la parte activa de un componente Web Dynpro.

Definicin. Definen como interacta el usuario con la aplicacin.
En una aplicacin hay distintas instancias de controladores (componente,
ventana , vista e interfaz)
Los datos a los que un controlador tiene acceso estn definidos en su

correspondiente contexto.
El controlador de componente es visible por los dems controladores.

El controlador de interfaz no es editable. Para aadir contexto, eventos o
mtodos, se debe marcar el flag de interfaz en sus correspondientes del
controlador de componente.
www.netcheck.es
2.3.1
2.3.1 2.3.2 2.3.3
2.3.3
CONTEXT
CONTEXTO MAPEO Y EVENTOS
EVENT
Consultora + Integracin + I nnovacin ENLAZADO DE
DATOS
Contexto Es el lugar donde se almacenan los datos que usan el controlador y la

vista.
Definicin.
Los datos de un contexto estn organizados como una estructura
jerrquica o de rbol.
Debe ser creado de acuerdo a la estructura de la aplicacin.

Cada contexto posee un nodo raz (root node), de el dependen
subnodos que a su vez pueden contener atributos y subnodos.
www.netcheck.es
2.3.1
2.3.1 2.3.2 2.3.3
2.3.3
CONTEXT
EVENT
DATOS
Contexto Una forma de ver/imaginar un contexto en ejecucin, es tomar, cada nodo

como una tabla:
Definicin.
Nodo raiz
Persona
Nombre
Edad
Elemento (en ejecucin),

Columna Columna sera equivalente a un
registro de una tabla
Nombre Edad
Tabla Nodo A
Juan 24
Miguel 27 Atributo (en ejecucin), sera

equivalente a un campo de uno
Antonio 25
de los registros
www.netcheck.es
2.3.1 2.3.2 2.3.3
DATOS
Contexto Cardinalidad: Es el nmero de elementos que puede contener un nodo

Propiedades. durante la ejecucin.
Nodo A Nombre Edad

Juan 24 1 Nmero de registros que
puede tener la tabla.
Antonio 25 n
Lead Selection: Indica que elemento de una coleccin de nodos est

actualmente siendo procesado. Web Dynpro realiza un seguimiento
automtico de este elemento.
Nodo A Nombre
Edad
Juan 24
Lead Selection Miguel 27 = Registro seleccindo de

Antonio 25
la tabla.
www.netcheck.es
2.3.1 2.3.2 2.3.3
DATOS
Contexto Singelton: Limita el contenido de un nodo de contexto en ejecucin.

Propiedades. Como resultado, los elementos del nodo en cuestin solo son
instanciados para un elemento del nodo padre.
Funcin Supply: Este mtodo es llamado cada vez que la lead

selection cambia o hay un intento de lectura de un elemento de un
nodo singleton.
El propsito de rellenar un contexto utilizando una funcin supply es til

cuando el contenido del nodo solamente deba estar disponible bajo
demanda.
www.netcheck.es
2.3.1 2.3.2 2.3.3
DATOS
Contexto
Ejemplo alquiler de Contexto en tiempo de diseo Nodo raiz
coches.
Vehculo
Da de alta
Matrcula
Contexto en ejecucin
Nodo raz
Coche rojo Coche azul Coche amarillo
01/03/08 15/02/08 21/02/08
RVB 1982 JMB 9082 CFH 2525
www.netcheck.es
2.3.1 2.3.2 2.3.3
DATOS
Contexto
Ejemplo alquiler de Contexto en tiempo de diseo
coches sin Singleton
Nodo Raz
Vehculo
Da de alta
Matrcula
Cliente
Alquilado DESDE
Alquilado HASTA
www.netcheck.es
2.3.1 2.3.2 2.3.3
DATOS
Contexto
Ejemplo alquiler de
coches sin Singleton
Nodo Raz
Coche Rojo
Coche Azul
01/01/08
15/02/08
RVB 1982
JMB 9082
Jess Sergio Fernando Isidro
07/02/09 20/03/09
16/08/08 10/01/09
14/02/09 25/02/09
30/08/08 17/01/09
El nmero de instancias de los nodos hijo podra facilmente comenzar a

crecer de forma exponencial, lo cual podra tener importantes
consecuencias para el consumo de memoria de la aplicacin.
www.netcheck.es
2.3.1 2.3.2 2.3.3
DATOS
Contexto
Ejemplo alquiler de
coches con
Singleton LEAD SELECTION
Nodo Raz
Coche Rojo
Coche Azul Coche Amarillo
01/01/08
15/02/08 21/02/08
RVB 1982
JMB 9082 CFH 2525
Fernando Isidro
16/08/08 10/01/09
30/08/08 17/01/09
Solo se instancian los nodos hijo, para aquel nodo que tiene la Lead
Selecction.
www.netcheck.es
2.3.1 2.3.2 2.3.3
DATOS
Contexto Data Binding: Los elementos IU de la vista son enlazados con el contexto
de la vista. Cualquier cambio del usuario sobre los elementos UI son
Definiciones. reflejados en el contexto.
A su vez el contexto de la vista es enlazado con el contexto del

controlador de componente.
www.netcheck.es
2.3.1 2.3.2 2.3.3
DATOS
Contexto Evento: Es cualquier suceso ante el cual puede reaccionar el sistema.

Definiciones.
Accin: Es un mecanismo lanzado por el evento para comunicarse con el
controlador de vista. Al crear una accin, automticamente se genera un
mtodo asociado a la misma.
Mtodos
Acciones
Eventos del sistema
Acciones declaradas
por el programador
www.netcheck.es
5.1
01 5.2
02 5.3
03 5.4
04 5.5
05 5.6
06 #
07
INTRODUCCIN ARQUITECTURA ELEMENTOS DE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
NUESTRA INTERFAZ DE BSICO CROSS PROGRAMACIN CONCEPTOS
OBJETIVO VISIN USUARIO
SOLUCIN SERVICIOS COMPONENT ALIANZAS
SOLUCIONES DINMICA AVANZADOS
Elemento IU Es cualquier entidad grfica que ocupa una posicin en el layout de la

vista.
Definicin.
Estn organizados como una estructura jerrquica o de rbol.
Por defecto el nodo raz se llama RootUIElementContainer y su tipo es
TransparentContainer.
Existen elementos que no son visibles en pantalla pero si ocupan una

posicin en la jerarqua como por ejemplo TransparentContainer.
www.netcheck.es
5.1
01 5.2
02 5.3
03 5.4
04 5.5
05 5.6
06 07
#
Elemento IU Todos los elementos IU disponibles se dividen en categoras y pueden ser

seleccionados utilizando drag & drop en el editor de vista.
Categoras.
InputField, CheckBox,
TextView, RadioButton,
TextEdit ItemListBox
InteractiveForm,
FileUpload
Group, TabStrip,
PageHeader
Button,
LinkToAction
Table, Tree,
DateNavigator Image, Gant,
ProgressIndicator

www.netcheck.es
5.1
01 5.2
02 03
5.3 5.4
04 5.5
05 5.6
06 07
#
Elemento IU El editor de vista es una herramienta especfica que permite editar el layout de
la vista.
Layout.
Pestaa
Layout
Jerarqua de
Elementos IU
Biblioteca de Aadir
elementos mediante Propiedades
IU men de los
Contextual elementos IU
Drag & Drop
Layout de la
Vista
Botn derecho -> Create
View -> Main View
www.netcheck.es
5.1
01 5.2
02 5.3
03 5.4
04 5.5
05 5.6
06 07
#
Elemento IU Es asociar una propiedad de un elemento IU con un atributo del contexto

del controlador de la vista.
Enlazar el
contexto.
Si el usuario modifica el valor del contexto asociado a la propiedad, esta
cambiar.
2) Crear el elemento IU 3) Enlazar el elemento IU 1) Declarar el atributo

en el Layout al atributo del contexto en el contexto
www.netcheck.es
5.1
01 5.2
02 5.3
03 5.4
04 5.5
05 5.6
06 07
#
Elemento IU Para programar el comportamiento de un elemento IU sin necesidad de

acceder al propio elemento, se crea un atributo de contexto del mismo
Control del
tipo de datos que la propiedad.
comportamiento.
Los mtodos manejadores de accin podrn modificar el valor del
contexto y por lo tanto el comportamiento del elemento.
El elemento IU
readOnly puede
ser controlado
mediante un
atributo de tipo
WDY_BOOLEAN
('X' == Verdadero,
Se declara un nuevo == Falso).
atributo, del tipo
correcto, para controlar
el atributo readOnly.
www.netcheck.es
5.1
01 5.2
02 5.3
03 5.4
04 5.5
05 5.6
06 07
#
Elemento IU Esta tcnica ofrece control de programacin sobre cualquier propiedad

enlazable de un elemento IU.
Control del
comportamiento.
Permite controlar la apariencia del layout de la vista sin necesidad de
acceder a los objetos de los elementos.
La propiedad readOnly se
puede enlazar a un atributo
de contexto booleano.
El input field podr abrirse

para el usuario si se estable
el valor del contexto a ==
Verdadero.
www.netcheck.es
5.1
01 5.2
02 5.3
03 5.4
04 5.5
05 5.6
06 07
#
Elemento IU Simples, son capaces de mostrar informacin por si mismo (Group,

Tray).
Tipos.
Compuestos, necesitan de elementos IU hijos poder mostrar
informacin (Table).
Elemento IU compuesto Table.
Elemento IU compuesto TableColumn.
Cada elemento IU TableColumn tiene

un elemento Caption y otro TextView
(en este caso) como hijos.
www.netcheck.es
5.1
01 5.2
02 5.3
03 5.4
04 5.5
05 5.6
06 #
07
Elemento IU Es la forma en que se distribuyen los elementos IU en la pantalla.

Layout.
La propiedad layout de un elemento coincide con la de su contenedor.
FlowLayout coloca los elementos de izquierda a derecha de la pantalla, si
el espacio horizontal es pequeo para mostrar los elementos en una sola
lnea son reagrupados automticamente.
GridLayout posiciona los elementos IU en un contenedor con forma de

cuadrcula. El nmero de columnas de cuadricula se especifica con la
propiedad colCount.
MatrixLayout coloca los elementos como una estructura de cuadricula. El

subelemento MatrixHeadData para especificar el elemento que aparece
al principio de cada lnea. Las elementos se alinean verticalmente.
RowLayout coloca los elementos en una sola fila. El subelemento

RowHeadData permite especificar que elementos aparecen al comienzo
de cada nueva fila del contenedor.
www.netcheck.es
01 02 03 04 05 06 07
Atributos El sistema genera atributos por defecto en los controladores al crear un

predefinidos componente web dynpro.
Definicin. No pueden ser eliminados y son necesarios para el desarrollo del

componente.
WD_CONTEXT: Existe en todos los controladores y es una referencia al

contexto del controlador en el que nos encontramos.
WD_THIS: Existe en todos los controladores y es una referencia al propio

controlador.
WD_COMP_CONTROLLER: Existe en el controlador de ventana y vista. Es

una referencia al controlador de componente.
Se puede consultar las declaraciones de datos internas que hace el

componente cuando creamos el contexto en el siguiente botn.
www.netcheck.es
01 02 03 04 05 06 07
Mtodos Tambin llamados mtodos Hook, son generados por el sistema al

predefinidos crear un componente web dynpro.
Definicin. No pueden ser eliminados pero si programados.
Varan en funcin del controlador en el que nos encontremos.
El sistema decide cuando son llamados y no el programador.
WDDOINIT, WDDOEXIT: Existen en todos los controladores y son el
primero y el ltimo en ejecutarse.
WDDOAFTERACTION,WDDOBEFOREACTION , DDOMODIFYVIEW,
WDDOONCONTEXTMENU pertenecen al controlador de vista.
WDDOAPPLICATIONSTATECHANGE, WDDOBEFORENAVIGATION,
WDDOPOSTPROCESSING del controlador de componente.
WDDOONCLOSE, WDDOONOPEN del controlador de ventana.
www.netcheck.es
01 02 03 04 05 06 07
Ejercicio 1 Crear un nuevo componente con dos vistas.

Objetivo. La vista principal consta de dos campos de entrada y un botn.
Al pulsar el botn se navega a la segunda vista.
La segunda vista consta de dos campos de entrada que muestran la
informacin recogida en la vista principal.
www.netcheck.es
01 02 03 04 05 06 07
Ejercicio 1 1. Crear componente (ZWD_G#_E# donde G# es el nmero de

grupo y E# el nmero de ejercicio).
Pasos a seguir.
2. Crear un nodo (flight_info) en el contexto del controlador de
componente (estructura sflight, campos carrid y connid).
3. Crear contexto para la vista principal.
4. Aadir los elementos UI y enlazarlos con el contexto.
5. Crear una segunda vista(output_view) y contexto.
6. Aadir los elementos UI y enlazarlos con el contexto.
7. Crear conector de salida para la vista principal (o_output).
8. Crear conector de entrada para la segunda vista (I_main).
www.netcheck.es
01 02 03 04 05 06 07
9. Incluir la segunda vista en la ventana.

Ejercicio 1
Pasos a seguir. 10. Crear enlace de navegacin para las vistas en la ventana del
componente.
11. Crear accin (GO) para el evento onclick del botn en la vista
principal.
12. Programar el mtodo asociado a la accin con la llamada al

conector de salida (se recomienda usar el asistente).
13. Crear aplicacin (ZAPP_G#_E# ).
14. Correr aplicacin y depurar errores.
www.netcheck.es
01 02 03 04 05 06 07
1. Crear componente y asignar nombres a la ventana y vista principal

Ejercicio 1
Solucin.
www.netcheck.es
01 02 03 04 05 06 07
2. Sobre el nodo raz.

Ejercicio 1
Solucin.
Aadir atributos desde estructura.
www.netcheck.es
01 02 03 04 05 06 07
3. Arrastrar los nodos del contexto del controlador de componente a la

Ejercicio 1 vista para enlazarlos.
Solucin.
4. Sobre RootElementContainer aadimos un elemento Group.
www.netcheck.es
01 02 03 04 05 06 07
Sobre el Group crear formulario del nodo de contexto flight_info.

Ejercicio 1
Solucin.
Jugar con las propiedades de los elementos (layout, layout data)
www.netcheck.es
01 02 03 04 05 06 07
5. Sobre la carpeta de vistas

Ejercicio 1
Solucin.
6. Ajustar la propiedad readonly de los elementos input_field.
www.netcheck.es
01 02 03 04 05 06 07
7. Pestaa Outbound Plugs.

Ejercicio 1
Solucin.
8. Pestaa Inbound Plugs.
www.netcheck.es
01 02 03 04 05 06 07
9. En la pestaa window.
Ejercicio 1
Solucin.
10. Sobre el conector de salida.
www.netcheck.es
01 02 03 04 05 06 07
11. Pulsar nuevo, en el evento onclick de las propiedades del botn.

Ejercicio 1
Solucin.
12. Ver el mtodo creado en la pestaa methods y programarlo.
www.netcheck.es
01 02 03 04 05 06 07
13. Sobre el componente creamos y guardamos.

Ejercicio 1
Solucin.
14. Sobre la aplicacin.
www.netcheck.es
01 02 03 04 05 06 07
Ejercicio 2
Usaremos el mtodo WDDOINIT del controlador de la vista para inicializar
el campo Airline con el valor AA.
Objetivo.
www.netcheck.es
01 02 03 04 05 06 07
1. Copiar el componente creado para el ejercicio 1

Ejercicio 2 (ZWD_G# _E2).
Pasos a seguir.
2. Programar el mtodo WDINIT para ello:
I. Obtener la referencia del nodo flight_info.

II. Obtener el elemento lead selection.
III. Establecer AA como valor inicial.
3. Crear la aplicacin
4. Correr la aplicacin y depurar errores.
www.netcheck.es
01 02 03 04 05 06 07
1. Sobre el componente.
Ejercicio 2
Solucin.
2. Mtodo WDINIT.
www.netcheck.es
01 02 03 04 05 06 07
Ejercicio 3
Crear un elemento IU Table en la vista output_view, para mostrar los
resultados de acuerdo a la entrada del usuario.
Objetivo.
www.netcheck.es
01 02 03 04 05 06 07
Ejercicio 3 1. Copiar el componente creado para el ejercicio 2 (ZWD_G# _E3).

Pasos a seguir.
2. Crear un nodo(flight_tab) en el contexto del controlador de
componente (estructura sflight, campos carrid, connid, fldate,
planetype, seatsmax y seatsocc).
3. Enlazar el nuevo nodo con el contexto de la vista output_view
4. Aadir un group y dentro de este un elemento table enlazado al nuevo

nodo en la vista output_view.
5. Crear un mtodo en el controlador del

componente(rellenar_flight_tab). Este recoge los datos del nodo
flight_info con los que hace una select a la tabla sflight e introduce el
resultado en el nodo flight_tab.
6. Modificar la accin GO de main_view para que llame al mtodo

creado en el controlador de componente antes de navegar a
output_view.
7. Crear aplicacin, correr aplicacin y depurar errores.
www.netcheck.es
01 02 03 04 05 06 07
4. Sobre el elemento table.

Ejercicio 3
Solucin.
www.netcheck.es
01 02 03 04 05 06 07
5. En el controlador del componente.

Ejercicio 3
Solucin.
www.netcheck.es
01 02 03 04 05 06 07
6. En el mtodo correspondiente a la accin.

Ejercicio 3
Solucin.
www.netcheck.es
01 02 03 04 05 06 07
Ejercicio 4
Crear una tabla que muestre las reservas de pasajeros cuando
seleccionemos un vuelo en la tabla que muestra los resultados de la
Objetivo. entrada del usuario.
www.netcheck.es
01 02 03 04 05 06 07
1. Copiar el componente del ejercicio 3 (ZWD_G# _E4).

Ejercicio 4
Pasos a seguir. 2. Crear un subnodo singleton(booking_tab) en flight_tab, en el contexto del
controlador de componente (estructura sbook, campos bookid,
customid, custtype, luggweight, class y passname).
3. Enlazar el nuevo nodo con el contexto de la vista output_view
4. Aadir un group y dentro de este un elemento table enlazado al nuevo

nodo en la vista output_view.
5. Crear una funcin supply(booking_read) para el nodo booking_tab.
6. Programar la funcin booking_read para obtener los atributos del nodo

padre (flight_tab), leer las reservas de la tabla de diccionario sbook e
insertar los registros en el nodo(booking_tab).
www.netcheck.es
01 02 03 04 05 06 07
5. En las propiedades del nodo escribir el nombre de la funcin y activar.

Ejercicio 4
Solucin.
www.netcheck.es
01 02 03 04 05 06 07
6. En el controlador del componente.

Ejercicio 4
Solucin.
www.netcheck.es
01 02 03 04 05 06 07
INTRODUCCION ARQUITECTURA ELEMENTOSDE DESARROLLO DESARROLLO DESSARROLLO DESARROLLO
CROSS- Son componentes web dynpro reutilizables.

COMPONENT Es posible construir una aplicacin Web Dynpro que conste de diferentes
Definicin. componentes, tiene sentido cuando varios componentes acceden a un
mismo conjunto de datos.
El interfaz de componente permite la comunicacin entre componentes y

llamadas del usuario al componente .
www.netcheck.es
01 02 03 04 05 06 07
Crear un componente que muestre los datos personales de una persona.

Ejercicio 5
Objetivo. Incluir el componente creado para que muestre los datos del cliente al
seleccionar una reserva.
www.netcheck.es
01 02 03 04 05 06 07
1. Crear componente ZWD_G# _E5_AUX.

Ejercicio 5
Pasos a seguir. 2. Crear un nodo (customer_data) en el contexto del controlador de
componente (estructura scustom, campos id, name, street, postbox,
postcode, city, country, telephone).
3. Enlazar el nuevo nodo con el contexto de la vista main_view.
4. Crear un group y dentro de este enlazar el nuevo nodo como formulario.
5. Crear un mtodo de interfaz en el controlador del

componente(mostrar_cliente) con un parmetro de entrada
(customer_id de tipo scustom-id). Este busca los datos del usuario y los
inserta en el nodo. Usar clase cl_abapwd_flight_model par obtener los
datos del usuario.
7. Aadir el componente AUX al componente que acabamos de crear.
www.netcheck.es
01 02 03 04 05 06 07
8. Enlazar el interfaz del componente AUX con la vista output_view.

Ejercicio 5
Pasos a seguir. 9. Aadir un elemento ViewContainerUIElement en la vista output_view del
componente ZWD_G# _E5.
10. Crear una accin(cargar_datos_cliente) para el evento

OnLeadSelection de la tabla que muestra las reservas.
11. Programar el mtodo asociado a la accin para que obtenga el

parmetro customer_id correspondiente al registro seleccionado en la
tabla de reservas y llame al mtodo de interfaz mostrar_cliente del
componente AUX que enlazamos.
12. En la ventana(main_window) enlazar el elemento

viewContainerUIElement de la vista output_view con el componente
AUX.
www.netcheck.es
01 02 03 04 05 06 07
Ejercicio 5 5. Marcar el flag de interfaz.

Solucin.
www.netcheck.es
01 02 03 04 05 06 07
Ejercicio 5 7. En la pestaa used components del componente.

Solucin.
Nombre de componente
Tipo de componente
8. En la pestaa propiedades de la vista.
www.netcheck.es
01 02 03 04 05 06 07
11. En el mtodo correspondiente a la accin.

Ejercicio 5
Solucin.
www.netcheck.es
01 02 03 04 05 06 07
Ejercicio 5 12. En el mtodo correspondiente a la accin.

Solucin.
www.netcheck.es
01 02 03 04 05 06 07
CROSS-
COMPONENT
Es una forma de alimentar a un componente sin tener que usar mtodos de
interface.
Mapeo inverso.
Consiste en mapear un nodo de un componente web dynpro A con el
de otro componente web dynpro B.
El componente B est contenido dentro del A.

El tipo de los nodos de ambos componentes debe de ser el mismo.
Para que esta operacin pueda llevarse a cabo, es necesario que el nodo
del componente B tenga activados los flag de interface y elemento de
entrada externa.
Pararealizar el mapeo es necesario crear un controlador de uso de

componente en el A.
www.netcheck.es
01 02 03 04 05 06 07
Ejercicio 6 Realizar el ejercicio 5 pero alimentando al componente AUX por medio

Objetivo. de mapeo inverso en vez de por mtodos de interface.
www.netcheck.es
01 02 03 04 05 06 07
Ejercicio 6 1. Activar los flag necesarios del componente ZWD_G# _E5_AUX para poder
realizar el mapeo inverso.
Pasos a seguir.
3. Crear un nodo (customer_data) en el contexto del controlador de

componente (estructura scustom, campos id, name, street, postbox,
postcode, city, country, telephone).
4. Modificar el mtodo asociado a la accin cargar_datos_cliente para

que obtenga el atributo customer_id correspondiente al registro
seleccionado en la tabla de reservas, obtenga los datos
correspondientes al cliente y los inserte en el nodo creado anteriormente.
5. Crear un controlador de uso para el componente AUX.
6. Mapear el nodo customer_data del controlador de componente

(ZWD_G# _E6) con el nodo del componente AUX en el controlador de
uso.
www.netcheck.es
01 02 03 04 05 06 07
Ejercicio 6 4. Mtodo asociado a la accin.

Solucin.
www.netcheck.es
01 02 03 04 05 06 07
Ejercicio 6 5. Sobre el componente usado.

Solucin.
6. Sobre el controlador de interfaz del componente usado, nuevo.
www.netcheck.es
01 02 03 04 05 06 07
Ejercicio 6
Solucin.
www.netcheck.es
MADRID BARCELONA
c/ Velzquez, 70 Gran Va Carlos III, 84

www.netcheck.es
3 y 4 planta 3 planta
Consultora + Integracin + Innovacin 28001 Madrid 08028 Barcelona
T.: +34 91 5784738 T.:+34 93 492 34 18
Fax: +34 91 7810159 Fax:+34 93 496 57 01
www.netcheck.es
MADRID BARCELONA
c/ Velzquez, 70 Gran Va Carlos III, 84

www.netcheck.es
3 y 4 planta 3 planta
Consultora + Integracin + Innovacin 28001 Madrid 08028 Barcelona
T.: +34 91 5784738 T.:+34 93 492 34 18
Fax: +34 91 7810159 Fax:+34 93 496 57 01
www.netcheck.es

Curso Web Dynpro v1

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Curso Web Dynpro v1

Hochgeladen von

Copyright:

Verfügbare Formate

Consultora + Integracin + I nnovacin

WEB DYNPRO FOR ABAP

ABRIL 2011 | MADRID

Web Dynpro ABAP es el estndar de SAP de tecnologa Interfaces de

Proporciona un marco que se desarroll debido a que SAP necesitaba un

Como punto inicial de partida, se tom el diseo Modelo Vista Controlador

Uso de herramientas grficas y declarativas que reducen

Transporte automtico de datos mediante enlazado (data binding).

Modelo Vista Web Dynpro est basado en el Modelo Vista Controlador:

Amplia independencia entre la plataforma y la interfaz.

Componente Es una entidad reutilizable y ejecutable.

Otros Componentes Web Dynpro pueden ser referenciados.

Aplicacin Web Es el enlace de entrada al componente web dynpro.

No contiene informacin alguna acerca de los elementos que se

Vista Describe la presentacin en pantalla de los elementos de interfaz de

Cada componente Web Dynpro tiene al menos una vista

Vista La navegacin entre vistas esta soportada por conectores.

Ventana Es un contenedor de vistas.

Controlador Son la parte activa de un componente Web Dynpro.

Los datos a los que un controlador tiene acceso estn definidos en su

El controlador de componente es visible por los dems controladores.

Contexto Es el lugar donde se almacenan los datos que usan el controlador y la

Debe ser creado de acuerdo a la estructura de la aplicacin.

Contexto Una forma de ver/imaginar un contexto en ejecucin, es tomar, cada nodo

Elemento (en ejecucin),

Miguel 27 Atributo (en ejecucin), sera

Contexto Cardinalidad: Es el nmero de elementos que puede contener un nodo

Nodo A Nombre Edad

Lead Selection: Indica que elemento de una coleccin de nodos est

Lead Selection Miguel 27 = Registro seleccindo de

Contexto Singelton: Limita el contenido de un nodo de contexto en ejecucin.

Funcin Supply: Este mtodo es llamado cada vez que la lead

El propsito de rellenar un contexto utilizando una funcin supply es til

Coche rojo Coche azul Coche amarillo

01/03/08 15/02/08 21/02/08

RVB 1982 JMB 9082 CFH 2525

El nmero de instancias de los nodos hijo podra facilmente comenzar a

A su vez el contexto de la vista es enlazado con el contexto del

Contexto Evento: Es cualquier suceso ante el cual puede reaccionar el sistema.

Eventos del sistema

Elemento IU Es cualquier entidad grfica que ocupa una posicin en el layout de la

Existen elementos que no son visibles en pantalla pero si ocupan una

Elemento IU Todos los elementos IU disponibles se dividen en categoras y pueden ser

Elemento IU Es asociar una propiedad de un elemento IU con un atributo del contexto

2) Crear el elemento IU 3) Enlazar el elemento IU 1) Declarar el atributo

Elemento IU Para programar el comportamiento de un elemento IU sin necesidad de

Elemento IU Esta tcnica ofrece control de programacin sobre cualquier propiedad

El input field podr abrirse

Elemento IU Simples, son capaces de mostrar informacin por si mismo (Group,

Elemento IU compuesto Table.

Elemento IU compuesto TableColumn.

Cada elemento IU TableColumn tiene

Elemento IU Es la forma en que se distribuyen los elementos IU en la pantalla.

GridLayout posiciona los elementos IU en un contenedor con forma de

MatrixLayout coloca los elementos como una estructura de cuadricula. El

RowLayout coloca los elementos en una sola fila. El subelemento

Atributos El sistema genera atributos por defecto en los controladores al crear un

Definicin. No pueden ser eliminados y son necesarios para el desarrollo del

WD_CONTEXT: Existe en todos los controladores y es una referencia al

WD_THIS: Existe en todos los controladores y es una referencia al propio

WD_COMP_CONTROLLER: Existe en el controlador de ventana y vista. Es

Se puede consultar las declaraciones de datos internas que hace el

Mtodos Tambin llamados mtodos Hook, son generados por el sistema al

WDDOONCLOSE, WDDOONOPEN del controlador de ventana.