Cómo añadir componentes personalizados a su aplicación

Qodly Studio for 4D es una poderosa herramienta para crear aplicaciones profesionales completas y complejas. Aunque sus componentes pre-construidos son versátiles, las soluciones personalizadas son a veces indispensables.

Los componentes personalizados le permiten construir una solución a medida para su propio proyecto y beneficiarse de muchos componentes construidos por 4D o la comunidad para enriquecer su interfaz de usuario.

Esta entrada de blog, complementada por un tutorial video, le guiará a través del proceso de integración de componentes personalizados en su proyecto Qodly Studio for4D.

Ventajas del uso de componentes personalizados

Los componentes personalizados permiten enriquecer la interfaz usuario de Qodly Studio para aplicaciones 4D, de manera similar a los componentes 4D o los plugins 4D utilizados en los formularios 4D.

Aquí hay algunos ejemplos disponibles públicamente de componentes personalizados:

• Selector de fecha

  

• Widgets de calificación
  
  

• Selector de colores
  
  

• Calendario (mensual, semanal, diario)
  
  

• Gráficos
  
  

• Mapa

  

• Línea de tiempo

  

• Y mucho más.

Los componentes personalizados se crean utilizando React, ofreciendo una base flexible y poderosa para los desarrolladores.

Cómo instalar los componentes personalizados Qodly

1. Elija el componente: navegue por el repositorio de componentes personalizados de Qodly en GitHub y seleccione el componente que desea utilizar.
2. Descargue la última versión: haga clic en el componente, navegue hasta la sección Releases y asegúrese de descargar la última versión. Haga clic en el zip para descargarlo. Asegúrese de que está en la sección Release para la descarga, que descarga un componente pre-construido, no la fuente en sí.
   
   

3. Desde el lado Qodly Studio for 4D:
   1. En la sección Componentes, haga clic en el botón Upload component.
   2. Busque el componente que acaba de descargar o arrástrelo y suéltelo.
   3. Haga clic en Install component, luego en Reload.
   4. El componente debería aparecer en la lista Custom en la sección Componentes.

   

4. El componente ya está listo para su proyecto.