>
>
>
>
>
>
>
>
>
Desarrollo de Interfaces en SAP UI5/BTP: Guía Práctica para la Integración de Vistas y Controladores
El desarrollo en SAP UI5 y Business Technology Platform (BTP) es un viaje hacia la creación de aplicaciones modernas y funcionales. En este artículo, exploraremos la interacción entre la vista y el controlador en el entorno UI5/BTP. Profundizaremos en cómo esta relación es clave para el diseño de aplicaciones dinámicas y eficientes. Para obtener más información sobre cómo llevar tus proyectos SAP al siguiente nivel, contacta con el Grupo EBIM aquí. ¡Comencemos!.
Para obtener más información sobre cómo llevar tus proyectos SAP al siguiente nivel, visita nuestra página de consultoría especializada en Proyectos SAP y descubre cómo podemos ayudarte a optimizar tus procesos
Cuando desarrollamos vista UI5 en BTP nos percatamos que cada vista tiene asociado un controlador, pero como se muestra dicha relación a nivel de código. Para ello se muestra los siguientes pasos o puntos a tener en cuenta.
Configuración de Vista y el Controlador
El identificador único para el controlador debe especificarse en la propia definición del controlador.
En la vista XML se hace referencia al controlador en el atributo controllerName.
Como se muestra estos atributos incluyen el espacio de nombres. La vista también ha sido definida en el archivo manifest, por un lado, se ha establecido como vista raíz y por otro en la sección routing se ha definido tanto en el route como en el target. Cada vez que creemos una vista nueva, tendremos que agregarla al routing del manifest (si lo haces a través del wizard automáticamente se añadirán).
Implementación de controles y eventos
Ahora vamos a incluir un control en nuestra vista. Para elegir un control puedes ir a https://sapui5.hana.ondemand.com/#/controls y elegir uno. Nosotros vamos a escoger uno fácil para empezar:
Agregaremos un button a nuestra página y después le asociaremos un evento que se dispare cuando hacemos clic en el botón.
Para ello, en nuestra vista xml dentro de content agregamos:
<Button text=»Default» press=»onPress» />
Hemos definido con xml un tipo Button y le hemos añadido que en el evento press del propio button se ejecute el método onPress que definiremos en el controlador.
Si nos vamos a la referencia de la api y buscamos button, podemos ver los eventos que tiene ese control:
Puede interesarte: Las ventajas de SAP S/4HANA para las empresas
Manejo de eventos en el controlador
Ahora en nuestro controlador agregamos un nuevo método que llamaremos onPress que simplemente lanzará una alerta:
onPress: function (evt) {
alert(«botón pulsado»);
}
Como puedes observar la función alert no está muy bien vista por el ide, en concreto por eslint, la herramienta de análisis de código ya que nos lo advierte. Esto es porque la instrucción alert se considera molesta para la interfaz de usuario y debería ser reemplazada por algo más apropiado que después haremos, pero no pasa nada, de momento continuamos.
Si ejecutamos el código podemos observar el botón que hemos creado y si lo pulsamos podemos ver la alerta en pantalla:
Vamos a cambiar ahora el código para que en vez de un alert se nos muestre un mensaje propio de ui5.
Para esto cambiamos la línea del alert por esta:
MessageToast.show(evt.getSource().getId() + » Pressed»);
Ahora observaremos que aún hay una advertencia, pero esta vez no es por eslint, sino porque MessageToast no está definido. Para poder usar este método, hemos de incluirlo en la definición del controlador. Para ello haremos este cambio:
sap.ui.define([
«sap/ui/core/mvc/Controller»,
«sap/m/MessageToast»
], function (Controller, MessageToast )
Hemos incluido la librería sap.m.MessageToast en la definición y le hemos puesto un alias dentro de function (MessageToast ) para cuando queramos llamarla. De esta forma podemos ir agregando bibliotecas o archivos externos en nuestro controlador.
Con este cambio, ya la advertencia desaparecerá y la aplicación si la probamos de nuevo, lanzará un mensaje propio de ui5.
Hemos agregado en el propio mensaje esta instrucción: evt.getSource().getId()
Como observarás en el método onPress hay un argumento que le pasamos como parámetro (evt). Este argumento nos va a proporcionar datos sobre el control que disparó el evento. En este ejemplo simplemente hemos accedido a la forma de obtener su id. Si metiéramos en la vista más botones, podríamos usar el mismo método onPress para esos otros botones y con la instrucción anterior podríamos determinar qué botón dispara el evento. Vamos también a asignarle un id a cada botón:
<mvc:View controllerName=»com.sapbtpspain.Test.controller.View1″ xmlns:mvc=»sap.ui.core.mvc» xmlns:core=»sap.ui.core»
displayBlock=»true» xmlns=»sap.m»>
<Shell id=»shell»>
<App id=»app»>
<pages>
<Page id=»page» title=»{i18n>title}»>
<content>
<Button id=»idBoton1″ text=»Botón 1″ press=»onPress»/>
<Button id=»idBoton2″ text=»Botón 2″ press=»onPress»/>
<Button id=»idBoton3″ text=»Botón 3″ press=»onPress»/>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
Cuando hacemos clic en un botón se nos mostrará el id del botón pulsado.
En GRUPO EBIM desarrollamos soluciones TI a la medida de las necesidades de tu empresa. Somos expertos en consultoría TI y desarrollo de plataformas para SAP y Oracle; además, contamos con un equipo de profesionales dispuestos a brindar soluciones de gestión y manejo de datos. ¡Llena nuestro formulario de contacto y obtén más información sobre los servicios que ofrecemos!
