SAPUI5 para dummies parte 4: un ejercicio completo paso a paso


Introducci贸n y resumen


En la publicaci贸n de blog anterior , aprendimos c贸mo mover nuestra aplicaci贸n actual a una aplicaci贸n Master-Detail que muestra Business Partner como una lista (master) y su informaci贸n detallada con las 贸rdenes de venta dentro de la p谩gina de detalles (detail).


驴Qu茅 se cubrir谩 en este ejercicio?


Con la Parte 4 de esta serie de publicaciones de blog, aprenderemos c贸mo crear una segunda p谩gina de desglose con informaci贸n sobre los detalles del Pedido de venta y mostrar una tabla de art铆culos del Pedido de venta.


La parte m谩s importante de este ejercicio es comprender c贸mo Eliminar (parte de las operaciones CRUD) un Art铆culo de Orden de Venta de una Orden de Venta.


  • ODataModel : ya lo hemos usado para mostrar informaci贸n del lado del servidor sobre nuestro socio comercial, venta de pedidos. Ahora lo usaremos para mostrar el Art铆culo de pedido de venta y eliminarlos del conjunto. Para este prop贸sito, vamos a usar el m茅todo remove

Esta es nuestra tarea principal en este ejercicio, pero no es lo 煤nico que hemos hecho en el c贸digo. Aqu铆 hay una lista de las cosas que tiene que hacer para llegar al resultado final:


  • Agregue una nueva ruta y destino en el manifest.json para navegar a la p谩gina BusinessPartnerSeleOrderItem
  • Escuche el evento de clic de pedido de venta y navegue hasta el detalle del pedido de venta (donde mostraremos los detalles del pedido de venta y los art铆culos del pedido de venta)
  • Agregue una barra de filtro para filtrar la tabla del art铆culo de pedido de venta
  • Agregar un ViewSettingsDialog para ordenar / agrupar art铆culos de pedido de venta
  • Expanda la propiedad de navegaci贸n ToProduct de una entidad SaleOrderItem para mostrar la informaci贸n del Producto en las filas de la tabla

NB: He encontrado muchos problemas en SaleOrderItemsSet cuando necesitaba filtrar, ordenar y agrupar elementos. Siempre necesita saber qu茅 campos est谩n habilitados (lado del servidor implementado) para filtrar, ordenar o agrupar.


La comunicaci贸n entre equipos es un elemento clave en el desarrollo de software

En este caso, DeliveryDate no se puede ordenar, la categor铆a y el nombre del producto no se pueden ordenar y filtrar, etc. As铆 que recuerde siempre comunicarse adecuadamente con su equipo de back-end para obtener la implementaci贸n del lado del servidor que necesita su aplicaci贸n front-end.


Codifiquemos: Eliminar operaci贸n


Entonces, 驴qu茅 necesita hacer para eliminar un registro?


UI / UX


Somos un desarrollador front-end (o full-stack) y UI / UX es una parte importante de nuestro trabajo. Necesitamos crear una interfaz y una experiencia de usuario que permita a nuestros usuarios hacer el trabajo en el menor tiempo posible, con menos pasos posibles y no odien la aplicaci贸n que est谩n usando al final del d铆a. El resultado de nuestro trabajo es un usuario feliz que hace su trabajo con menos tiempo y error y una empresa que gana m谩s dinero.



Para lograr esta UI / UX, puede aprovechar algunas propiedades de ListBase, que se extiende en nuestra tabla. Para agregar el bot贸n Eliminar (la X grande) solo necesita establecer la propiedad del modo Tabla en Eliminar y luego controlar el evento de eliminaci贸n activado cuando el usuario hace clic en el bot贸n.


Implementaci贸n de JavaScript


onDeleteItem: function(oEvent) { var controller = this; var oModel = this.getView().getModel(); var sPath = oEvent.getParameter("listItem").getBindingContextPath(); var oResourceBundle = this.getView().getModel("i18n").getResourceBundle(); var bCompact = !!this.getView().$().closest(".sapUiSizeCompact").length; controller.byId("tableSalesOrderItem").setBusy(true); oModel.remove(sPath, { success: function(oData, response) { MessageBox.success( oResourceBundle.getText("deleteSaleItemSuccess"), { styleClass: bCompact ? "sapUiSizeCompact" : "" }); controller.byId("tableSalesOrderItem").setBusy(false); }, error: function(oError) { MessageBox.error( oResourceBundle.getText("deleteSaleItemError"), { styleClass: bCompact ? "sapUiSizeCompact" : "" }); controller.byId("tableSalesOrderItem").setBusy(false); } }); } 

Entonces, 驴qu茅 hemos hecho aqu铆?


  1. Obtenemos la ruta (que identifica la URL REST de nuestro elemento) del contexto de enlace de la lista.
  2. Obtenemos la referencia ODataModel del marco (estamos usando el modelo predeterminado, por lo que no necesitamos especificar un nombre de modelo para el m茅todo getModel)
  3. Ponemos nuestra mesa en ocupado. Esto mostrar谩 un indicador de ocupado sugiriendo al usuario que estamos haciendo alguna comunicaci贸n con el servidor.
  4. Llamamos al m茅todo .remove que tiene 2 par谩metros. El primero es la ruta del elemento que nos gustar铆a eliminar y el segundo es un Objeto de diferentes par谩metros. Puede consultarlos todos en la documentaci贸n oficial . Solo necesitamos la devoluci贸n de llamada al evento de 茅xito y error para dar una respuesta correcta al usuario y eliminar el estado ocupado.

Entonces, 驴qu茅 sucede despu茅s del m茅todo .remove en la UI / UX?


Bueno, es bastante simple. El registro se elimina, el marco de trabajo ODataModel se actualiza autom谩ticamente y, gracias al mecanismo de enlace de SAPUI5, la tabla tambi茅n se actualiza autom谩ticamente.


Que significa Que el marco se encargue de actualizar tambi茅n la tabla con los nuevos datos (se ha eliminado un elemento) y no tenemos que preocuparnos por ello;)


Conclusi贸n y 驴qu茅 sigue en la Parte 5?


Si desea ver el resultado final, puede ir directamente a la rama step_4 de nuestro Proyecto GitHub .


En la siguiente parte, manejaremos la operaci贸n de Actualizaci贸n de un Art铆culo de Orden de Venta completando nuestras operaciones CRUD.


Desafortunadamente, no puedo implementar la operaci贸n Crear porque parece ser alg煤n tipo de problema de validaci贸n del lado del servidor con los datos que estoy tratando de enviar y el error es muy cr铆ptico: D


Comentarios necesarios


驴Qu茅 opinas de esta serie? 驴Desea centrarse m谩s en alg煤n aspecto espec铆fico de SAPUI5?


隆Escr铆belo en la secci贸n de comentarios! 隆Feliz codificaci贸n para todos!

Source: https://habr.com/ru/post/437786/


All Articles