> > > > > > > > >
GRUPO EBIM 24 Ago 24

Guía para la Creación de Web Dynpro en SAP

Compartir
  • Copiado en el portapapeles

Web Dynpro es el recurso tecnológico que ofrece la plataforma SAP Web Application Server para manejar la capa de presentación de las aplicaciones, es decir, la interfaz de usuario de las aplicaciones Web. Web Dynpro provee un conjunto de herramientas para modelar y diseñar las interfaces de usuario basándose en el paradigma MVC (Model View Controler).

Pasos para la creación de la componente de la Web Dynpro: Atributos y Nodos

1) Ir a la transacción SE80 y elegir la opción Web Dynpro Comp./ Intf. En este mismo paso serán creados: la componente (Component), la Interfaz (Interface) y la ventana (Window) de la Web Dynpro.

2) Al elegir esta opción se solicitará un nombre para la componente a crear, Z_WEB_DYNPRO_EJEMPLO, y también se solicita ingresar el nombre de la Ventana (Windows), que en este caso se dio el mismo nombre Z_WEB_DYNPRO_EJEMPLO, como se muestra en la siguiente figura: (Posteriormente como con toda aplicación, se lo deberá asignar a un Paquete y luego asociarlo a una Orden de transporte.)

3) En la pantalla obtenida, sólo resta completar una Descripción:

En este punto de los pasos creados ya se puede observar cómo se va conformando la Web Dynpro a crear:

1. Componet Controller: Sólo hay un controlador de componente por componente Web Dynpro. Este es un controlador global, visible para todos los otros controladores. El controlador componente (COMPONENTCONTROLLER)impulsa la funcionalidad de todo el componente. Este controlador no tiene una interfaz visual.

2. Component Interface:permite la comunicación entre los elementos de dos componentes de Web Dynpro.

3. Windows: Aloja las vistas creadas que se verán al ejecutar la aplicación Web Dynpro.

 

4) Luego, hacer Doble Click en COMPONENTCONTROLLER, y verificar que la aplicación esté en modo de cambio para definir el Context, dentro del cual se colocaran los datos que conformara mi modelo: atributos y nodos.

5) Para esta Web Dynpro se creará solo un Atributo y un Nodo. Se define el Atributo: el nombre (AEROLINEA) y el tipo de dato del atributo (STRING) y luego Aceptar.

6) Luego se crea el nodo, que en este caso va a hacer referencia a la tabla SFLIGHT:

7) Se define el nodo con nombre SFLIGHT e indicar que referencia a la tabla SFLIGHT (parámetro Dictionary structure) y hacer Click en Add Attribute from Structure.

8) Se obtiene la siguiente pantalla donde se seleccionarán los campos que tendrá el nodo definido y luego Aceptar. Es importante recordar Guardar los cambios al finalizar (botón SAVE).

Pasos para la creación de la vista de una Web Dynpro

Una vez creada la componente de la Web Dynpro ABAP, es necesario crear la vista, que va a contener los objetos visualizables en la aplicación Web Dynpro.

1) Sobre la componente definida (Z_WEB_DYNPRO_EJEMPLO) presionar botón derecho del mouse → Create  View

2) Se le asigna el nombre a la vista: ‘Vista1’ y se completa el campo Descripción y luego Aceptar.

3) Al crear la vista, aparece la siguiente pantalla para insertar los objetos visualizables de la aplicación, y seleccionar desde allí la solapa Context:

4) En este punto es necesario que la vista cuente con los datos que obtiene del COMPONENTCONTROLLER definido anteriormente, para poder utilizarlo como referencia.

5) El pasaje se realiza mediante la copia del nodo y atributo del contexto del COMPONENTCONTROLLER al contexto de la vista ‘Vista1’.

6) Para realizar la copia se elije en el campo View/Controller Names la opción: COMPONENTCONTROLLER, y se selecciona los radioButton correspondientes (los que están marcados) y luego Aceptar.

7) Se hace Click en CONTEXT y luego Aceptar.

8) La siguiente imagen muestra la copia realizada al contexto de la ‘Vista1’.

9) En la solapa de Layout de la vista ‘Vista1’ se define el diseño de la vista, en el que se insertarán los siguientes elementos: Label (Etiqueta), Input field (Campo para el ingreso de dato por parte del usuario) y un Table (Resultado de la búsqueda seleccionada) (Elegir Insert Element)

10) Se crea el elemento Input Field de la vista ‘Vista1‘ con el nombre I_AEROLINEA y Aceptar.

11) En este paso se «mapea» el Input field con el atributo del contexto, presionando el botón del campo Value.

12) Se establece el «mapeo» indicado seleccionando el atributo AEROLINEA’ y Aceptar para finalizar el “mapeo”.

13) Una vez finalizada la creación del Input field, se crea el Label, que se lo asocia desde el campo LabelFor al Input field I_AEROLINEA y en el campo Text se escribe una etiqueta relacionada con el ingreso de dato, por ejemplo: Aerolinea

14) Una vez completada la inserción de todos los elementos, donde el último elemento creado fue Table y se lo creó con nombre ‘TABLA’, se realiza un enlace (Create Binding) para referenciar al Nodo del contexto y así poder definir los campos que lo integran:

15) Se presiona el botón Context para el posterior despliegue del contexto dentro de la vista ‘Vista1’.

16) Luego, se selecciona el nodo SFLIGHT, que tiene los campos que conformarán la estructura de la tabla. Luego Aceptar.

17) En esta pantalla se puede indicar el modo de visualización de la tabla (para este ejemplo se lo dejó en TextView) y con ésto queda completado el “enlace” de la tabla con el contexto. Finalmente, Aceptar.

18) Una vez “mapeados” los valores de cada elemento, se necesita crear un evento asociado al elemento I_AEROLINEA. Para eso se hace Click en el botón onEnter, que es el que se ejecutará cuando el usuario presione Enter.

19) Para crear el evento se le asigna el nombre: OBTENGO_DATOS, en el campo Action, y se completa el campo Descripción. Luego Aceptar.

20) Es necesario definir el código que estará asociado a la acción del evento. Para escribir dicho código, se realiza Doble Click en ‘OBTENGO DATOS’NOTA: el código asociado a este evento se encuentra al final de este artículo. (*)

21) Al completar los pasos anteriores del paso II), ya se tiene la vista ‘Vista1’ creada. Es necesario guardar los cambios y luego activar los objetos inactivos de la aplicación como se muestra en la pantalla. Luego Aceptar.

Los pasos I) y II) crearon el COMPONENT CONTROLLER y la VISTA, respectivamente, de la aplicación Web Dynpro for ABAP.

El paso siguiente (III) completa la componente Windows, que conforma una aplicación Web Dynpro ABAP.

Paso que completa la componente Windows que conforma una Web Dynpro ABAP

1) En este paso se procede a añadir a la Ventana (Windows) las vistas que serán utilizadas y se reflejarán en la web, y conforman la parte “visible” de la Web Dynpro.

Para este ejemplo se selecciona la vista ‘Vista1’ y se lo “arrastra” hasta la solapa de Window debajo de la ventana con nombre ‘Z_WEB_DYNPRO_EJEMPLO’. Se guardan los cambios y se activa

Pasos para la creación y ejecución de la Aplicación Web Dynpro (Web Dynpro Application)

Para que la aplicación Web Dynpro ABAP pueda ser invocada desde el Browser, es necesario crear una “Web dynpro Application” .

1) Posicionarse en el panel izquierdo sobre el objeto Z_WEB_DYNPRO_EJEMPLO. Elegir Create → Web Dynpro Application y asignarle como nombre, por ejemplo, el que tiene por defecto (‘Z_WEB_DYNPRO_EJEMPLO’) y una Descripción asociada. Luego indicar el Paquete donde se creará la aplicación.

2) Una vez creada la Web Dynpro Appplication, para ejecutarla es necesario posicionarse sobre la nueva componente creada, presionar botón derecho del mouse y elegir el item Test

3) Al presionar Test , la aplicación Web Dynpro ABAP se abrirá en una ventana del Browser para su ejecución. Ingrese la aerolínea y presione Enter:

4) Finalmente, en la imagen siguiente se muestra la tabla con el resultado final de la ejecución, con los datos de la aerolínea ingresada, en el ejemplo: LH.

En conclusión, esta guía para la creación de Web Dynpro en SAP proporciona una base sólida para desarrollar aplicaciones web avanzadas dentro del ecosistema SAP. Al seguir los pasos detallados, los desarrolladores pueden crear interfaces de usuario intuitivas y eficientes, mejorando la experiencia y optimizando procesos empresariales.

Implementar Web Dynpro no solo facilita el desarrollo modular y reutilizable, sino que también asegura que las aplicaciones se mantengan alineadas con las necesidades tecnológicas actuales y futuras del negocio.


En GRUPO EBIM desarrollamos soluciones TI a la medida de las necesidades de tu empresa. Somos expertos en consultoría SAP, Outsourcing de personal TI, y contamos con un equipo de profesionales dispuestos a brindar soluciones digitales escalables para tu negocio. ¡Llena nuestro formulario de contacto y obtén más información sobre los servicios que ofrecemos!

ES
Abrir chat
Hola 👋
¿En qué podemos ayudarte?