WEB DYNPRO ABAP

¿Qué es Web Dynpro?

Para responder esta pregunta tenemos que mirar a la plataforma tecnología SAP Netweaver.

Como podemos ver, cuatro capas son distinguidas en este contexto:

1. Plataforma de aplicación 
2. Integración de Procesos 
3. Integración de la información 
4. Integración con las personas/usuarios

La plataforma de aplicación representa la base técnica de casi todos los otros productos de SAP. Esto es el motivo porque la plataforma de aplicaciones juega un rol importante en el SAP Netweaver.

La plataforma de aplicación esencialmente ofrece dos interfaces de programación:

1. ABAP
2. JAVA (J2EE)

Para crear aplicaciones ABAP y JAVA tenemos dos entornos independientes de desarrollo

1. ABAP Workbench for ABAP 
2. SAP Netweaver Developer Studio for JAVA

Ambos entornos de desarollo ofrecen la posibilidad de crear aplicaciones basadas en Web construidos utilizando técnicas de programación declarativos basados en el paradigma: MODELO-VISTA-CONTROLADOR (MVC)

ABAP Workbench es un entorno de desarollo propio de SAP utilizado para desarrollar aplicaciones empresariales multicapa basado en ABAP. Este entorno de desarrollo ofrece el explorador Web Dynpro para crear componentes Web Dynpro ABAP.

Antes de pasar a la parte práctica y realizar una demostración de una aplicación Web Dynpro ABAP; para profundizar más sobre la introducción de este tema te recomiendo leer el libro: "Web Dynpro ABAP for practitioners" escrito por los autores Ulrich Gellert y Ana Daniela Cristea.

A continuación mostraremos un aplicativo que consiste en mostrar las ciudades del Perú y al momento de seleccionar alguna ciudad, el aplicativo mostrará los destinos turísticos y las festividades de la ciudad seleccionada.

Imagen del aplicativo final.

Detalle del Desarollo del aplicativo

Crearemos las siguientes tablas:

1. ZTPERU_CITIES: Ciudades del Perú
2. ZTTOUR_CITIES: Destinos turísticos de las ciudades del Perú
3. ZTPERU_FEST2015: Perú: Festividades y eventos 2015

Definición de la Tabla: ZTPERU_CITIES: Ciudades del Perú

Contenido de la tabla: ZTPERU_CITIES: Ciudades del Perú

Definición de la Tabla: ZTTOUR_CITIES: Destinos turísticos de las ciudades del Perú

Contenido de la Tabla: ZTTOUR_CITIES: Destinos turísticos de las ciudades del Perú

Definición de la Tabla: ZTPERU_FEST2015: Perú: Festividades y eventos 2015

Contenido de la Tabla: ZTPERU_FEST2015: Perú: Festividades y eventos 2015

Clic aquí para ver la data de las ciudades del Perú que se utilizaron para este Post

Tenemos listo las tablas y la data.

Crearemos una vista de base de datos la cual contendrá valores de los campos de las tablas ZTPERU_CITIES y ZTTOUR_CITIES

Creamos un TIPO TABLA: ZTT_TOURCITY

Crearemos una clase la cual tendrá los siguientes métodos estáticos.
GET_PLACES_BY_CITY: Obtener lugares turísticos por Ciudad

Interactuamos con el método:
ZCL_AAQ_DEMO3->GET_PLACES_BY_CITY

Como parámetro de entrada tenemos el código de la ciudad.

Por ejemplo, ingresamos la ciudad: CITY09 y ejecutamos, como resultado nos retorna 18 entradas

Crearemos una vista de base de datos la cual contendrá valores de los campos de las tablas ZTPERU_CITIES y ZTPERU_FEST2015

Creamos un TIPO TABLA: ZTT_FESTCITY

Dentro de la clase ZCL_AAQ_DEMO3 crearemos el siguiente método estático.
GET_EVENTS_BY_CITY: Obtener Festividades y/o eventos por Ciudad

Interactuamos con el método:
ZCL_AAQ_DEMO3->GET_EVENTS_BY_CITY

Como parámetro de entrada tenemos el código de la ciudad
Por ejemplo, ingresamos la ciudad: CITY09 y ejecutamos.

Nos retorna 6 entradas.

Como observamos ya tenemos la data armada con la cual el usuario puede interactuar y consultar la información de las ciudades, lugares turísticos y fechas de las festividades.

Ahora esto lo haremos más amigable creando interfaces de usuario.

Para eso en esta oportunidad trabajaremos con los componentes Web Dynpro lo cual lo podemos crear desde la transacción SE80

Crearemos un nuevo componente Webdynpro
ZWEB_AAQ_DEMO3

En el layout pondremos varios elementos donde la integración de cada uno de los elementos tendrá como resultado la GUI con la cual interactuará el usuario.

Podemos agregar una serie de elementos como: label, input field, table, etc.

Element einfügen: Insertar elemento
Container-Formular erzeugen: crear contenedor de formulario

Seleccionamos 'Insertar elemento' y comenzaremos insertando elementos tipo PAGE_HEADER

Bereich einfügen: Insertar área
Element entfernen: Quitar elemento

Seleccionamos 'Insertar área'

De la misma manera debajo de PH_FESTCITY seleccionamos 'Insertar área' 

Luego si deseamos podemos cambiar los ID de cada Page Header Area

Inhalt einfügen: Insertar contenido
Bereich löschen: Borrar área

Selecccionamos 'Insertar contenido' y luego seleccionamos el tipo 'TRANSPARENT CONTAINER'

Clic derecho sobre Transparent Container TCO_TOURCITY para insertar otro elemento

Seleccionamos 'Insert Toolbar'

Al Toolbar Button TBTN_SEARCH en propiedades modificamos sus valores

Para el elemento CAPTION le asignamos valor a la propiedad text
Text = Seleccione la ciudad

Agregamos un nuevo grupo la cual contendrá el ALV donde se mostrará los registros en base a la Ciudad seleccionada por el Usuario.

Ahora agregaremos texto a cada PAGE HEADER

PH_TOURCITY: PERÚ: Destinos turísticos por Ciudad

PH_FESTCITY: PERÚ: Festividades y/o eventos por Ciudad

Similar a los elementos insertados para PH_TOURCITY 

Ahora insertaremos los elementos para PH_FESTCITY

Crearemos una Aplicación Web Dynpro

Grabamos y activamos los objetos:

Una vez que los objetos ya se encuentran activos, abrimos un navegador y copiamos el link

Ya vamos teniendo una idea de cómo se mostrará la aplicación en la Web, cierto?

Deseas ver la versión completa de este post en pdf? click aquí.

Nos vemos en el siguiente Blog 
MAGALEX