Widget Botón

El widget Botón proporciona vínculos para abrir páginas, ventanas y vistas de sección en su aplicación, desplazarse a un bloque concreto o a la parte superior de la página, o ir a una dirección web. Puede utilizar una fuente de datos para proporcionar botones dinámicos para los que el texto o vínculo cambie en función de la selección de una entidad (como por ejemplo en un mapa o lista). Puede elegir entre diferentes estilos, tamaños y colores para diseñar botones.

Ejemplos

Use este widget para apoyar los requisitos de diseño de la aplicación como por ejemplo los siguientes:

  • Dispone de una capa de entidades que contiene URL a sitios web y desea utilizar un botón como vínculo para abrir el sitio web asociado con una entidad seleccionada.
  • Su aplicación tiene varias páginas y un menú en la página de inicio para acceder a cada página. También dispone de varias secciones a las que desea que los usuarios accedan rápidamente. Puede crear botones que devuelvan a un usuario a la página de inicio o que avancen a secciones o páginas relevantes desde cualquier sitio de la aplicación.

Notas de uso

Cuando agrega un widget Botón a la página, aparece la ventana Estilo rápido junto al widget donde puede seleccionar entre diseños predefinidos que se coordinan con el tema de su aplicación. (Para acceder de nuevo a esta ventana más adelante, haga clic en el botón Estilo rápido Estilo rápido en la barra de herramientas del widget). También puede configurar el diseño del botón eligiendo colores y fuentes para los estados Predeterminado y Mantener el puntero en los ajustes avanzados.

Si conecta el botón a una fuente de datos, como por ejemplo una capa de entidades, puede utilizar los datos de las entidades para rellenar el texto del botón o la URL del vínculo.

Sugerencia:

Haga clic en el botón Anclar de la barra de herramientas del widget Botón para mantener el widget visible en las páginas de desplazamiento.

Configuración

El widget Botón incluye estos ajustes:

  • Conectar a los datos: conecte opcionalmente el botón a los datos para que pueda establecer un vínculo dinámico, como por ejemplo el uso de una URL desde atributos de entidad.
    • Seleccionar datos: seleccione capas de entidades como una fuente de datos.
  • Establecer vínculo: agregue un vínculo al botón para abrir páginas, ventanas y vistas de sección en su aplicación, desplazarse a un bloque concreto o a la parte superior de la página, o ir a una dirección web. Si vincula a una dirección web, escriba una URL (que empiece por https://). Además de una dirección web, puede usar la opción URL para configurar un vínculo para ir a una dirección de correo electrónico, número de teléfono, etc. Si conecta el botón con una fuente de datos, elija una fuente dinámica para la URL utilizando un Atributo o una Expresión. Puede elegir si el vínculo se abre en la misma ventana que la aplicación, en la ventana superior o en una nueva ventana.
    • Información sobre herramientas: proporcione texto emergente para describir el recurso que abre el botón.
    • Texto: proporcione el texto que desea que aparezca en el botón. Si conecta el botón a datos, puede usar texto dinámico en función de la fuente de datos seleccionando Atributo, Estadística o Expresión.
    • Icono: agregue un icono al botón y elija situarlo en la parte izquierda o derecha del texto del botón. Puede elegir iconos de las galerías General y Flechas, o agregar su propio icono desde un archivo. Haga clic en el botón Eliminar para quitar iconos cargados no utilizados.
      Nota:

      Puede cargar los siguientes formatos de imagen: PNG, GIF, JPG, JPEG y BMP. Para mantener un rendimiento óptimo, hay un límite de tamaño de 10 MB para cada carga.

  • Avanzado: invalide la fuente y colores heredados del tema de la aplicación para dar estilo a los dos estados del botón: Predeterminado es el estado del botón sin interacción con el usuario y Mantener el puntero es el estado del botón iniciado por el usuario cuando señala o hace clic en el botón.
    • Texto: cambie el tamaño de fuente (en píxeles) y color, y proporcione estilo al texto del botón usando formato de negrita, itálica, tachado y subrayado.
    • Fondo: elija un color o imagen de relleno para establecer el fondo del botón. Si elige una imagen, puede colocarla en el botón usando Ajustar, Rellenar, Centro, Tesela o Extender. Si elige Ajustar, el botón muestra el color de relleno de fondo alrededor de la imagen.
    • Borde: elija un color de borde, estilo (como por ejemplo guiones o puntos) y el ancho en píxeles.
    • Esquina: cambie el tamaño del radio (por píxeles o porcentaje) para dar forma a las esquinas del botón. Bloquee los ajustes para sincronizar el radio de las cuatro esquinas.
    • Sombra: agregue un efecto de sombra alrededor del botón usando los siguientes ajustes:
      • Desplazamiento X: establezca la distancia horizontal de la sombra. Un valor negativo coloca la sombra en la parte izquierda del botón y un valor positivo la coloca en la parte derecha.
      • Desplazamiento Y: establezca la distancia vertical de la sombra. Un valor negativo coloca la sombra encima del botón y un valor positivo la coloca debajo.
      • Radio de desenfoque: aplique un efecto de desenfoque en la sombra.
      • Radio de propagación: ajuste el tamaño de la sombra.
      • Color: seleccione un color de sombra.

Opciones de interacción

Puede utilizar un widgets Botón para abrir y cerrar otros widgets.

Para ello, haga clic en Agregar un desencadenador en la pestaña Acción de la configuración del widget Botón. Seleccione el desencadenador Clic en botón y luego seleccione un widget de destino y una acción. Actualmente, puede conectar un widget Botón a los siguientes widgets:

ObjetivoAcción

Widget Barra lateral

Activar/Desactivar barra lateral: abra o cierre la barra lateral.

Widget Controlador de widget

Abrir widget: abre widgets del controlador.