Widget Botón

El widget Botón proporciona vínculos a páginas y vistas de sección en su aplicación o 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 avance 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 volver a acceder a esta ventana posteriormente, haga clic en el botón Estilo rápido Estilo rápido en la barra de herramientas del widget). También puede configurar su propio diseño de botón eligiendo colores y fuentes para los estados regular y cursor en la configuración avanzada.

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

Ajustes

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.
  • Definir vínculo: agregue un vínculo al botón para que abra una dirección web o una vista de sección o página en su aplicación. Si vincula a una dirección web, escriba una URL (que comience con https://).Si conecta el botón a una fuente de datos, elija una fuente dinámica para la URL usando Atributo o 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 va a aparecer 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.
  • Avanzado: invalide la fuente y colores heredados del tema de la aplicación para dar estilo a los dos estados del botón: Regular es el estado del botón sin interacción con el usuario y Cursor 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.