1. Sobre Nosotros

Mindrose Team es un equipo de servicios técnicos profesional. En la etapa actual, nos centramos principalmente en proporcionar construcción y desarrollo de sistemas de aplicaciones digitales, inteligentes y móviles empresariales basados en la plataforma de bajo código Mendix, y proporcionamos automatización y empoderamiento empresarial basado en procesos basados en capacidades de IA.

El equipo está formado por desarrolladores certificados senior/intermedios de Mendix y exploradores de IA, todos con rica experiencia y capacidades en consultoría, desarrollo e implementación de información empresarial.

2. Descripción General de los Componentes

Los componentes Mx Antd Button y Popconfirm desarrollados por nuestro miembro del equipo Gavin son parte del proyecto Mendix-Antd dirigido por el equipo de Mendix China. Este proyecto se esfuerza por llevar los componentes antd al mundo Mendix para ayudar a los desarrolladores de Mendix a centrarse más en la funcionalidad empresarial en lugar de la implementación de componentes de UI.

Dirección de Github del proyecto: Mendix Antd Widget Show

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

Aquí están las introducciones de los dos componentes:

• Mx Antd Button: Un Widget Pluggable de Mendix basado en el componente Button de Ant Design, que marca (o encapsula) comandos de operación, responde al comportamiento de clic del usuario y desencadena la lógica empresarial correspondiente.
• Mx Antd PopConfirm: Un Widget Pluggable de Mendix basado en el componente PopConfirm de Ant Design, que proporciona un cuadro de diálogo de confirmación flotante emergente completamente funcional. En comparación con los diálogos modales emergentes centrados en pantalla completa, la forma de interacción es más ligera.

3. Componente Mx Antd PopConfirm

Aquí hay un ejemplo de operación simple:

Este proyecto Demo se puede acceder a través de este enlace: Mendix Antd Widget Demo

El Repo Github del componente está aquí, si es necesario puede personalizar basado en este componente o contactarnos: Github Repo

3.1. Características del Componente

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

3.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 descargue directamente a través de Marketplace en Studio Pro.
2. Seleccione cualquier página, 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 confirme el efecto.

3.3. Descripción de la Configuración del Componente

Sección General

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

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 se muestra 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.

4. Componente Mx Antd Button

Aquí hay un ejemplo de operación simple:

Este proyecto Demo se puede acceder a través de este enlace: Mendix Antd Widget Demo

El Repo Github del componente está aquí, si es necesario puede personalizar basado en el código fuente o contactarnos: Github Repo

4.1. Características del Componente

1. Proporcionamos cinco tipos de botones en Ant Design.

   • Botón Primario: Usado para puntos de acción primarios, solo un botón primario en un área de operación.
   • Botón Predeterminado: Usado para un grupo de puntos de acción sin distinción primaria/secundaria.
   • Botón Discontinuo: Comúnmente usado para operaciones de adición.
   • Botón de Texto: Usado para los puntos de acción menos importantes.
   • Botón de Enlace: Generalmente usado para enlaces, es decir, navegación a ciertas ubicaciones.

2. Y tres propiedades de estado para usar con lo anterior.

   • Peligro: Operaciones peligrosas como eliminar/mover/modificar permisos, generalmente necesitan confirmación secundaria.
   • Fantasma: Usado en lugares con colores de fondo complejos, comúnmente usado en página de inicio/producto y otros escenarios de visualización.
   • Desactivado: Cuando los puntos de acción no están disponibles, generalmente necesita explicación de texto.

3. Proporciona tres niveles de tamaño: grande, mediano y pequeño.

4. Proporciona tres opciones de forma: Predeterminado, Círculo y Redondo.

5. Proporciona configuración Block para implementar botones de ancho completo del contenedor padre.

4.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 descargue directamente a través de Marketplace en Studio Pro.
2. Seleccione cualquier página, añada un Antd Button a la página.
3. Configure las propiedades necesarias para el componente. Incluyendo: Caption, Type, Shape, Size, Block, OnClick Event, etc.
4. Ejecute y confirme el efecto.

4.3. Descripción de la Configuración del Componente

Sección Principal

• Caption: Texto del botón.
• Button Type: Establece el tipo de botón.
• Button Shape: Establece la forma del botón.
• Button Size: Establece el tamaño del botón.
• Button Block: Establece si es un botón de ancho completo.

Sección de Estado

• Disabled: Si se desactiva el evento del botón, por defecto es No.
• Danger: Si es un botón de peligro, por defecto es No.
• Ghost: Si es un botón fantasma, por defecto es No.

Sección de Eventos

• OnClick Event: Evento de clic del botón.

5. Filosofía de Diseño y Planes Futuros

El diseño del componente Button está basado en el componente Button de Ant Design, adoptando el estilo de diseño limpio y nítido y las especificaciones de color de Ant Design para adaptarse a escenarios de uso más ricos de Mendix. Los ricos tipos de botones permiten que las páginas logren una jerarquía visual y diseño de detalles más ricos, y estos diferentes tipos y tamaños hacen que sea conveniente para los desarrolladores elegir y usar botones apropiados para satisfacer varios requisitos de operación y página.

El componente PopConfirm tiene como objetivo proporcionar un cuadro de confirmación emergente simple donde los desarrolladores pueden implementar operaciones que necesitan confirmación del usuario a través de este componente. Su diseño también está basado en Ant Design, adoptando el diseño emergente limpio y método de interacción de Ant Design. Sobre esta base, proporcionamos botones de "confirmar" y "cancelar" por defecto, facilitando a los desarrolladores mostrar mensajes emergentes para que los usuarios confirmen ciertas operaciones o decisiones 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 ventanas emergentes de confirmación nativas, 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 la mayoría de los requisitos de diseño de página básicos.

Si tiene más ideas y requisitos, no dude en compartirlos. Continuaremos profundizando nuestro trabajo en esfuerzos posteriores.

Cover Image by Vilius Kukanauskas from Pixabay.