You are on page 1of 20

ABAP Web Dynpro:

Tutorial 3 - Creación de
una tabla en Web Dynpro
ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro………………………………….....3

Objetivos del desarrollo…………………………………………………………………………………………………3

Procedimiento……………………………………………………………………………………………………………….3

Creación de un componente Web Dynpro………………………………………………………….3

Creación de una nueva Vista y Asignación de la Vista a una Ventana………………...6

Creación del vinculo entre las vista…………………………………………………………………….9

Creación de los botones en las vistas………………………..…………………………..…………13

Creación de una Aplicación Web Dynpro………………………………………………………….17

Activar y Ejecutar la Aplicación…………………………………………………………………..…….19

Resultado……………………………………………………………………………………………………………………..21

Ayuda en línea SAP……………………………………………………………………………………………………….21

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 2
ABAP Web Dynpro:
Tutorial 3 - Creación de una tabla en Web Dynpro

Objetivos del desarrollo

En este tutorial paso a paso se creará una aplicación Web Dynpro para el manejo de una tabla.
Para la vista, se va a crear un elemento UI de tipo tabla vinculada en el diseño de vista. Ese
elemento se muestra en el explorador en tiempo de ejecución. Además, se creará una aplicación
Web Dynpro para este componente, que se puede ejecutar en el navegador.

Procedimiento

Creación de un componente Web Dynpro

1.- Iniciar el ABAP Workbench (SE80) y seleccionar la opción Web-Dynpro-Comp/Intf. De la lista


de objetos disponibles.

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 3
2.- Para crear un nuevo componente Web Dynpro, introducimos el nombre ZHRPA_0003 para el
nuevo componente en el dialogo de selección de la lista de objetos, y seleccionamos Visualizar.

3.- En la ventana de dialogo que debe de aparecer, se puede introducir la descripción del nuevo
objeto y seleccionar el tipo de componente Web Dynpro que se va a crear. En la ventana de
dialogo se puede hacer el cambio de nombre de la ventana que viene por defecto.

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 4
Asignamos el componente ZHRPA_0003 al paquete $TMP

Como resultado, ahora se puede ver el nuevo árbol de objetos del componente Web Dynpro
creado ZHRPA_0003, el cual va a contener el controlador de los objetos del componente, la
interfaz del componente (que contiene el controlador del las interfaces de entrada y las vistas
del controlador) y las ventanas. Puedes acceder a los objetos presionando doble-click.

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 5
Creación de la Vista y Asignación de la Vista a una Ventana

1.- Click derecho en el componente Web Dynpro ZHRPA_0003 en el árbol de objetos, se debe
desplegar el menú contextual para crear una nueva vista

2.- Crear una nueva vista y colocar MAIN

El editor de vistas se iniciara en la parte derecha de la pantalla. Para abrir la ventana de Layout y
el diseñador de vistas, Una ventana emergente te pedirá un usuario y una contraseña para iniciar
el Servidor de Aplicaciones Web de SAP. El usuario y la contraseña que se debe de usar es con el
cual nos logueamos en SAP.

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 6
3.- Salvar la vista

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 7
4.- Ahora abrir la Ventana ZHRPA_0003, dando doble-click sobre la ventana ZHRPA_0003.
Cambiar a modo Modificación.

5.- Ahora abrir la ventana principal y mover la vista creada dentro de la estructura de la ventana
en la parte derecha de la pantalla utilizando Marcar y Arrastrar.

6.- Salvar los cambios.

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 8
Creación del contexto en la vista MAIN

1.- Abrir el editor de vistas y cambiar a la pestaña CONTEXT, Crear un nodo en el contexto en el
controlador de la vista.

Mantener la propiedades acorde a la imagen mostrada a continuación. Seleccionar la tabla


PA0002 como estructura del diccionario y seleccionar la cardinalidad “0..N”.

Seleccionar el botón Add Attibutes from Structure y seleccionar los componentes que se
utilizaran

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 9
2.- Presionar OK , y como resultado tendremos la siguiente ventana

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 10
Creación del elemento UI correspondiente al nodo de la tabla

1.- Abrir el editor de vistas y cambiar a la pestaña Layout, Insertar un elemento.

Nombrar a la tabla PA0002.

2.- Creación del BINDING entre la tabla PA0002_TABLE y el NODO PA0002, seleccionamos la
tabla y presionamos click derecho para que se levante el menú contextual, y seleccionamos la
opción CREATE BINDING

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 11
3.- Seleccionamos el botón CONTEXT

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 12
4.- Seleccionamos el nodo PA0002 y presionamos continuar.

5.- Asegurarnos de que las entradas que queramos mostrar estén seleccionadas con el Checkbox
y presionamos continuar.

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 13
Tendremos un resultado como este

5.- Salvamos la Vista

6.- Salvar los cambios

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 14
Suplir de datos a la tabla PA0002 en tiempo de ejecución

1.- Ir a la tabla métodos de la vista MAIN y presionar doble-click sobre el método WDDOINIT.
Introducir el siguiente código.

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 15
Creación de una Aplicación Web Dynpro

1.- Click en el componente Web Dynpro ZHRPA_0003 en el árbol de objetos y abrir el menú
contextual para crear la nueva aplicación.

2.- Introducir el nombre (o aceptar el nombre propuesto) y presionar Continuar (Enter).

3.- Salvar el objeto.

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 16
24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 17
Activar y Ejecutar la Aplicación

1.- Activar todos los Objetos.

2.- Seleccionar todos los objetos relevantes y presionar Continuar (Enter).

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 18
3.- Iniciar la aplicación, presionar click derecho sobre la aplicación Web Dynpro, en el menú
contextual seleccionar la opción Test, o presionar F8.

El Navegador se debería iniciar con la Aplicación Web Dynpro creada. Loguearse con el usuario y
la contraseña utilizada anteriormente.

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 19
Resultado

Hemos creado un nuevo componente Web Dynpro que contiene una tabla. En las vistas hemos
creado un nodo tipo tabla y hemos hecho el binding contra el elemento UI. Además hemos
creado una Aplicación Web Dynpro que puede ser iniciada directamente con un URL.

Ayuda en línea SAP

Más información acerca de ABAP Web Dynpro, se puede encontrar en el portal de ayuda de SAP,
en el link a continuación.

http://help.sap.com/saphelp_nw04s/helpdata/en/77/3545415ea6f523e10000000a155106/fram
eset.htm

24/09/2013 ABAP Web Dynpro: Tutorial 3 - Creación de una tabla en Web Dynpro 20