1. Introducción al Componente

Mx Antd PopConfirm: Un Widget Pluggable de Mendix basado en el componente PopConfirm de Ant Design, que proporciona un diálogo de confirmación flotante completamente funcional. En comparación con los diálogos modales emergentes centrados en pantalla completa, la forma de interacción es más ligera.

2. Componente Mx Antd PopConfirm

El componente PopConfirm tiene como objetivo proporcionar un cuadro de diálogo de confirmación simple donde los desarrolladores pueden implementar operaciones que requieren confirmación del usuario. Su diseño también está basado en Ant Design, adoptando el diseño limpio de diálogo y el método de interacción de Ant Design. Sobre esta base, proporcionamos botones de "Confirmar" y "Cancelar" por defecto, facilitando a los desarrolladores la creación de ventanas emergentes que solicitan a los usuarios confirmar una acción o decisión a través de este componente. Este componente implementa un requisito de interacción común para los desarrolladores de Mendix, simplificando el esfuerzo de desarrollo de implementar diálogos de confirmación nativos, haciendo que el diseño de la interfaz y la interacción sean más eficientes y ligeros. Al mismo tiempo, su combinación con el componente Button puede satisfacer los requisitos de diseño de la mayoría de las páginas básicas.

Ejemplo de operación simple a continuación:

Este proyecto Demo puede ser accedido a través de este enlace: Demo de Widget Mendix Antd

El Repo Github del componente está aquí, también puede personalizarlo basándose en este componente o contactarnos si lo necesita: Repo Github

2.1. Características del Componente

1. Proporciona capacidad de renderizado de título de diálogo basada en el ensamblaje de texto textTemplate de Mendix.
2. Texto de botón Confirmar/Cancelar personalizable.
3. Posición relativa del diálogo personalizable (placement), con 12 opciones por defecto.
4. Estilos CSS de diálogo personalizables a través de Class Name en elementos de configuración.
5. Además del estilo predeterminado con botones duales, se puede definir un estilo simplificado con solo botón de Confirmar.
6. El contenedor puede acomodar varios tipos de Widgets Mendix (siempre que soporten eventos OnClick).

2.2. Instalación y Uso del Componente

1. Descargue el archivo mpk desde Marketplace o Github Release y añádalo al directorio del proyecto {YourMendixProjectFolder}/widgets/, o descárguelo directamente a través de Marketplace en Studio Pro.
2. Seleccione cualquier página y añada un Antd PopConfirm a la página.
3. Añada componentes hijos al PopConfirm anterior, que pueden ser Button, Antd Button, Badge, Text, Label, y otros componentes. Para implementar texto de Title dinámico, el componente PopConfirm necesita ser colocado en un componente Data container.
4. Configure las propiedades necesarias para el componente, incluyendo: Title, Placement, Confirm Text, Confirm Event, Cancel Text, Cancel Event.
5. Ejecute y verifique el efecto.

2.3. Descripción de Elementos de Configuración del Componente

Sección General

• Title: Título del diálogo.
• Disabled: Si deshabilitar el diálogo, por defecto es No.
• Placement: Posición del diálogo relativa a los componentes hijos, con 12 opciones.
• Class Name: Estilo del diálogo.

Sección de Configuración de Confirmación

• Confirm Text: Texto del botón de confirmación.
• On Confirm Event: Evento de clic del botón de confirmación.

Sección de Configuración de Cancelación

• Show Cancel: Si mostrar el botón de cancelación, por defecto es Yes.
• Cancel Text: Texto del botón de cancelación.
• On Cancel Event: Evento de clic del botón de cancelación.

Ingeniería del Proyecto del Componente

Este es el componente Mx Antd Button y Popconfirm desarrollado por nuestro miembro del equipo Gavin antes de dejar el equipo Mendix de Siemens. Es parte del proyecto Mendix-Antd liderado por el equipo Mendix China, que se esfuerza por llevar los widgets antd al mundo Mendix para ayudar a los desarrolladores de Mendix a enfocarse más en la funcionalidad del negocio en lugar de la implementación de widgets UI.

Dirección Github del proyecto: Mendix Antd Widget Show

Dirección de demostración Demo del proyecto: Demo de Widget Mendix Antd