Proyecto Abap2ui5: desarrollo de pantallas de selección UI5 en ABAP puro (no se necesita implementación de aplicaciones ni javascript)
By s4pcademy
En ABAP Cloud ya no hay SAP GUI y una cosa que extraño mucho es la pantalla de selección anterior. Simplemente escriba unas pocas líneas de código abap y se generará automáticamente una aplicación con interfaz gráfica de usuario y manejo de eventos. El enfoque IF_OO_ADT_CLASSRUN no es un reemplazo, porque no puede transferir ninguna entrada y tampoco obtiene una aplicación UI5 independiente que pueda usar un usuario final.
Entonces, ¿cómo podemos llevar el enfoque de la pantalla de selección al nuevo entorno ABAP Cloud (sin SAP GUI)?
Una solución es este pequeño proyecto abapgit: abap2ui5 (abapGit)
Con abap2ui5 puede crear aplicaciones UI5 independientes y listas para usar en ABAP puro. No se necesita implementación de aplicaciones ni javascript. La transferencia de datos y el manejo de eventos en el backend se integran automáticamente. Actualmente tiene el ámbito de funciones de la pantalla de selección anterior. Ejemplo:
Toda la funcionalidad se basa en un solo controlador http. La aplicación frontend es una aplicación ui5 genérica de una página y el marco genera dinámicamente en tiempo de ejecución UI5 XMLViews y JSON View Models basados en la implementación abap del cliente.
Comencemos con un ejemplo básico:
Instala el abap2ui5 proyecto con abapGit primero. Después de eso, puede encontrar la interfaz Z2UI5_IF_APP en su sistema:
INTERFACE z2ui5_if_app PUBLIC.
INTERFACES if_serializable_object.
METHODS set_view
IMPORTING
view TYPE REF TO z2ui5_if_view.
METHODS on_event
IMPORTING
client TYPE REF TO z2ui5_if_client.
ENDINTERFACE.A continuación, cree una nueva aplicación abap2ui5 creando una clase abap global que implemente la interfaz anterior. Puede utilizar el siguiente fragmento de código:
CLASS z2ui5_cl_app_demo_01 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
DATA product TYPE string.
DATA quantity TYPE string.
DATA check_initialized TYPE abap_bool.
ENDCLASS.
CLASS z2ui5_cl_app_demo_01 IMPLEMENTATION.
METHOD z2ui5_if_app~on_event.
"set initial values
IF check_initialized = abap_false.
check_initialized = abap_true.
product="tomato".
quantity = '500'.
ENDIF.
"user event handling
CASE client->event( )->get_id( ).
WHEN 'BUTTON_POST'.
"do something
client->popup( )->message_toast( |{ product } { quantity } ST - GR successful| ).
ENDCASE.
ENDMETHOD.
METHOD z2ui5_if_app~set_view.
"define selection screen
view->factory_selscreen_page( title="My ABAP Application - Z2UI5_CL_APP_DEMO_01"
)->begin_of_block( 'Selection Screen Title'
)->begin_of_group( 'Stock Information'
)->label( 'Product'
)->input( product
)->label( 'Quantity'
)->input( quantity
)->button( text="Post Goods Receipt" on_press_id = 'BUTTON_POST'
).
ENDMETHOD.
ENDCLASS.Como puede ver, definió la vista y parte de la lógica del controlador en abap. Hasta ahora no hay nada más que hacer. Su aplicación ahora está lista para usar.
Para iniciar la aplicación, llame a la interfaz http Z2UI5_HTTP_CLOUD del proyecto en su navegador. Puede encontrar la url en este paquete del proyecto:
Cambie la aplicación de parámetros de URL con el nombre de su nueva clase abap, se ve similar a esto:
Cuando está en un sistema local, necesita encontrar la URL por transacción SICF.
A continuación, llame a la URL en su navegador y su nueva aplicación estará lista para usar:
¡Eso es todo lo que tienes que hacer! Ahora siéntase libre de cambiar la vista y agregar su propia lógica personalizada al controlador.
Transferencia de datos y gestión de eventos
Ahora cambiamos los valores en la interfaz a papa y la cantidad de 200:
Luego establecemos un punto de interrupción en Eclipse y echamos un vistazo al sistema backend:
Como puede ver, los atributos de la clase cambiaron a papa y 200. Entonces obtuvimos una transferencia de datos funcional entre el cliente y el servidor y viceversa. Además, el brindis de mensajes se activa en el backend y se lanza en el frontend con los valores actualizados:
Importante: Para la transferencia de valor entre frontend y backend, los atributos deben estar en la sección pública de la clase implementada.
El enfoque abap2ui5 está influenciado por dos ideas generales:
Primero, el enfoque IF_OO_ADT_CLASSRUN es muy poderoso. Como cliente, es muy cómodo que solo necesite implementar una interfaz. Además, el enfoque 100% basado en código fuente hace que sea muy fácil de usar y copiar entre sistemas y proyectos.
En segundo lugar en el último año hubo este muy agradable entrada en el blog (Gracias a Patricio VILLENEUVE ) sobre la idea de desarrollo frontend basado en una aplicación de una sola página combinada con actualizaciones asincrónicas de ajax («JSON over the wire»).
Abap2ui5 está influenciado por estas dos ideas. El usuario solo necesita implementar una interfaz para desarrollar una aplicación ui5 que funcione completamente y la interfaz se mantiene lo más pequeña posible, por lo que no se necesita una implementación de aplicación específica o javascript. Todo se crea en el backend durante el tiempo de ejecución.
Comunicación servidor-cliente:
Al llamar al servicio HTTP abap2ui5, primero se envía al cliente una aplicación ui5 genérica de una página:
Después de eso, cada evento crea un viaje de ida y vuelta ajax entre el servidor y el cliente. Los valores actualizados y la información del evento se envían con la solicitud al backend. La respuesta incluye un nuevo modelo de vista UI5 XML View+JSON.
Servidor->Cliente:
Por ejemplo, la respuesta de la aplicación al comienzo de la publicación del blog se ve así:
Modelo de vista JSON:
Vista XML:
Cliente->Servidor:
Y después de que la entrada cambió, la solicitud con los valores actualizados y la información del evento se ve así:
Persistencia, sensación de estado:
La interfaz HTTP se basa en REST, por lo que no hay sesión de servidor entre dos solicitudes. No obstante, la implementación contiene todos los atributos de clase, porque la interfaz abap2ui5 también implementa la interfaz IF_SERIALIZABLE_OBJECT. Con cada solicitud se crea un UUID y el objeto se guarda en la base de datos: 
La siguiente solicitud vuelve a crear el objeto. Por ejemplo, esta es la razón por la cual el atributo check_initialized solo es falso para la solicitud inicial.
Ahora puede crear aplicaciones más complejas, hay muchos controles que aún funcionan para crear sus propias pantallas de selección. Echa un vistazo a la repositorio GitHub para un ejemplo más detallado. Se puede implementar en abap así:
Y el controlador se ve así:
Características del proyecto:
- fácil de usar: 100% basado en código fuente, solo implemente una interfaz abap para una aplicación ui5 independiente
- ligero: basado en un solo controlador http (sin odata, sin segw, sin bsp, sin rap, sin cd), compatible con pilas abap muy antiguas
- instalación fácil: proyecto abapgit, no se necesita implementación de aplicaciones adicionales ni javascript
Compatible con todas las pilas de abap y versiones de idioma disponibles:
- Entorno BTP ABAP (Abap Cloud)
- Nube pública S/4 (nube de Abap)
- S/4 Nube Privada o Local (Abap Cloud, Abap Standard)
- R/3 NW 7.5 y downport a versiones anteriores posibles (Estándar Abap)
El objetivo del proyecto abap2ui5 es crear una forma fácil y rápida de generar pantallas de selección en el nuevo entorno de nube abap. Por supuesto, también está trabajando en un sistema local. El cliente tiene un esfuerzo mínimo para crear aplicaciones y no está obligado a aprender nuevas tecnologías e idiomas. El conocimiento de abap y la lógica de la pantalla de selección anterior es suficiente para usar este proyecto y crear aplicaciones ui5.
En abap2ui5 en (abapGit) encontrará toda la información que necesita para utilizar este proyecto.
Entonces, ¿qué piensas de este enfoque?
Los próximos pasos podrían incluir más controles y extender el manejo de eventos.
¡Gracias por leer esta entrada de blog!
