✒️ABAP El diseño de las pantallas

Lección 2 - Diseño de las Pantallas

1 | Creación de las dynpros o pantallas

Para crear una dynpro o pantalla podemos utilizar el Screen Painter mediante la transacción SE51

o directamente acceder a través de la transacción SE80 tal como haremos de aquí en adelante.

Accedemos a la transacción SE80 con el programa ZPRUEBA_DIALOGO,

presionamos el botón derecho del mouse encima del mismo y seleccionamos la opción Crear/Dynpro.

Imagen 1.1 - Creamos una nueva dynpro

A continuación veremos la siguiente ventana de diálogo donde ingresamos un número de dynpro y presionamos continuar.

Imagen 1.2 - Introducimos un número de dynpro

Una dynpro se identifica mediante un número único dentro de un programa ABAP el cual está formado por cuatro dígitos.

Luego veremos la pantalla donde configuraremos las opciones de la dynpro que son las siguientes:

Imagen 1.3 - Configuramos la dynpro

En la solapa Atributos completaremos los siguientes atributos referentes a la dynpro:

Descripción breve: aquí ingresamos una descripción acorde al objetivo de la dynpro.

Tipo de dynpro: aquí declaramos el tipo de pantalla.

Una dynpro del tipo Normal ocupará toda la pantalla.

Una dynpro del tipo Subscreen es una pantalla que puede mostrarse en una área de cualquier pantalla dentro del Module Pool.

Una dynpro del tipo Ventana de diálogo modal es una pantalla que solo ocupa parte de una pantalla.

Dynpro siguiente: aquí especificaremos el número de la próxima dynpro que se visualizará.

Posición del cursor: aquí especificaremos el elemento de la pantalla en donde quedará posicionado el cursor cuando la dynpro se visualice.

Grupo de dynpros: es un número de cuatro caracteres con el cual podemos asignar muchas dynpros a un grupo de dynpros

para poder modificarlas a todas de manera uniforme.

En la solapa Lista de Elementos veremos la lista de elementos que componen a la dynpro.

Como hasta el momento no hemos creado ninguno en la dynpro,

solo veremos el correspondiente al tipo de elemento de la pantalla OK que existirá en cada dynpro que creemos.

En este campo asignaremos un nombre de variable que, al momento de ejecutarse la dynpro,

contendrá el código de función correspondiente al botón presionado o acción realizada en la pantalla.

Tradicionalmente a este campo se lo denomina OK_CODE tal como vemos a continuación:

Imagen 1.4 - Introducimos el OK_CODE de la dynpro

En cada una de las dynpros que creamos tendremos que asignar el OK_CODE.

Dentro de la solapa Lista de Elementos también vemos las solapas Textos y máscaras de entrada/salida, Atributos especiales

y otras más en donde podremos configurar ciertos aspectos de los elementos que componen a una dynpro.

En la solapa Lógica proceso es donde especificaremos la lógica de procesamiento de la dynpro.

En un principio cuando hayamos creado la dynpro y no tengamos una lógica definida,

visualizaremos la siguiente pantalla con la declaración de los eventos PBO y PAI.

Imagen 1.5 - La lógica de proceso de una dynpro

Al igual que los programas, las dynpros deben activarse para poder ejecutarse dentro de un programa de diálogo.

Ahora que ya terminamos de definir la configuración general de la dynpro, vamos a proceder a crear elementos en la misma.

Para ello, accedemos al Screen Painter presionando el botón Layout o Disposición

Imagen 1.6 - El screen painter

Para modificar o visualizar la dynpro utilizaremos el botón del lápiz .

En el panel que se encuentra a la izquierda de la pantalla vemos los íconos de los elementos que pueden formar parte de una dynpro.

Para utilizarlos, presionamos el mouse en el elemento y volvemos realizar clic en la pantalla.

Los elementos son los siguientes:

Campo de texto (Text Field):

se utiliza para mostrar textos fijos o estáticos en pantalla.

Imagen 1.7 - Los campos de texto

Si hacemos doble clic en el texto visualizaremos la siguiente ventana de diálogo donde configuraremos los atributos del texto.

Imagen 1.8 - Configuramos los atributos del campo de texto

Nombre: es el nombre del elemento.

Texto: es el texto que se mostrará en el elemento.

Nombre ícono: podremos agregar un ícono al texto entre los que visualizamos al presionar el botón a la derecha del campo.

Quick info: es el texto que se visualizará si mantenemos el puntero del mouse encima del texto.

Longitud visualización: aquí podemos seleccionar la cantidad de caracteres que se visualizarán del texto en pantalla.

En la parte inferior de la ventana vemos las solapas Dict, Programa y Visualización.

Dict:

aquí podremos especificar si el campo hace referencia a un campo declarado en el diccionario de datos marcando la tilde en la opción Del Dict,

en cuyo caso, el campo tomará todos los atributos de este. En caso contrario, podemos especificar una rutina de conversión, ayuda de búsqueda y demás.

Programa:

aquí especificaremos si el campo es de entrada, salida o entrada/salida. En el caso de un texto esta opción está deshabilitada.

También podemos configurar ciertos parámetros de la salida como la justificación y los ceros.

Visualización:

aquí seleccionaremos atributos que tienen que ver con la visualización del elemento en la pantalla como son el brillo, si está visible o no, etc.

Campo de entrada/salida (Input/Output Field):

son campos de entrada, salida o entrada/salida que se utilizan para modificar o visualizar datos.

Imagen 1.9 - Los campos de entrada y salida

Muchos de los atributos de este elemento son los mismos que describimos en los Textos. Los que son propios de estos elementos son:

Dropdown:

aquí podemos configurar al campo como si fuera una lista desplegable de valores.

Scrollable:

con esta opción configuramos la posibilidad de desplazarnos en la lista.

En la solapa Dict podemos determinar el formato del campo en la opción Formato.

En la solapa Programa es donde determinamos si el campo es de entrada, salida o entrada/salida . En caso de entrada podemos seleccionar que el campo sea obligatorio, recomendado, posible.

Checkbox:

podemos crear un checkbox en la dynpro.

Imagen 1.10 - Los campos de check

Los atributos propios de este elemento son:

Código de función:

aquí podemos especificar un código de función para el checkbox.

El SY-UCOMM adaptará este código cuando se ejecute la dynpro y se seleccione el checkbox.

Radio Button:

podemos crear un radiobutton en la dynpro.

Imagen 1.11 - Los radio buttons

Los atributos propios de este elemento son los mismos que los que utilizamos en los checkbox.

Podemos agrupar varios Radiobutton de modo que solo se pueda seleccionar uno dentro de un grupo de Radiobutton.

Para ello, en todos los Radiobutton completaremos la opción Grupos tal como vemos a continuación:

Imagen 1.12 - Agrupación de los radio buttons

Por último, los seleccionamos a todos y vamos a la opción del menú Tratar/Agrupación/Grupo de botones de selección/Definir.

Pushbutton: podemos crear botones en la dynpro.

Imagen 1.13 - Los push buttons

El atributo más importante a tener en cuenta es el Código de función que será el valor que tome el SY-UCOMM cuando presionemos este botón.

Tabstrip Control y Tabstrip Control con asistente (with wizard): podemos crear un Tabstrip en nuestra dynpro.

Existen dos formas de crearlo: en forma manual o con el Wizard o asistente.

TABSTRIP

Es un control que tiene una colección de una o más pestañas o solapas.

Cada pestaña o objeto Tab de un TabStrip es un objeto separado que los usuarios pueden seleccionar.

Utilizando el asistente (Wizard) veremos las siguientes pantallas que nos guiarán en la creación del Tabstrip.

Imagen 1.14 - Utilizamos el asistente para la creación del tabstrip

En la segunda pantalla asignamos un nombre al Tabstrip.

Imagen 1.15 - Asignamos un nombre al tabstrip

Luego introducimos los nombres de las solapas. Mínimamente deben existir dos.

Imagen 1.16 - Introducimos los nombre de las pestañas del tabstrip

El código de función de cada una de las solapas.

Imagen 1.17 - Introducimos los códigos de función de cada una de las pestañas

Y podemos crear includes de subrutinas para almacenar la lógica de procesamiento.

Imagen 1.18 - Introducimos los nombres de los includes que vamos a crear

Y presionamos el botón Finalizar para finalizar. En esta pantalla el sistema nos informa que se crearán las Subscreen 0101,0102 y 0103 en nuestro programa.

Imagen 1.19 - Finalizamos la creación del tabstrip

Luego en la dynpro veremos creado el elemento.

Imagen 1.20 - Visualizamos el tabstrip en pantalla

Si hacemos doble clic encima del Tabstrip podremos cambiar todos sus atributos tal como hacemos con los otros elementos.

Box:

un box se utiliza para organizar los elementos de la dynpro.

Imagen 1.21 - Creamos un box dentro del tabstrip para organizar

En el campo Texto completamos el texto que se visualizará en la parte superior izquierda del Box.

Luego si queremos colocar dentro del Box algún elemento de la pantalla solo tendremos que arrastrarlo y soltarlo dentro del Box.

Subscreen area:

una subscreen es una área dentro de una dynpro donde podremos colocar otra dynpro.

Para llamar a una Subscreen utilizaremos las siguientes opciones:

Imagen 1.22 - El área de subscreens

Tabla de Control y Tabla de Control con asistente (with Wizard):

los Table Control son controles que permiten la visualización y modificación de los datos de una tabla.

Como este control es de suma importancia y presenta cierta dificultad en relación a los otros,

lo veremos en detalle en las próximas lecciones.

Imagen 1.23 - La tabla de control

Custom Control:

es un contenedor de una dynpro en donde podemos mostrar otro elemento de la pantalla.

Imagen 1.24 - El control personalizable

Ícono de estado (Status Icon):

se utiliza para mostrar elementos indicando el Status Gui del programa.

Imagen 1.25 - El ícono de estado