AYUDA EN LÍNEA
 WINDEVWEBDEV Y WINDEV MOBILE

Este contenido se ha traducido automáticamente.  Haga clic aquí  para ver la versión en inglés.
Ayuda / Desarrollar una aplicación o un sitio web / Controles, ventanas y páginas / Controles: tipos disponibles / Control Botón
  • Presentación
  • Imágenes associated con un control Botón en una ventana
  • Presentación
  • Caso especial: imágenes para gestionar los estados de control Botón
  • Animaciones en la control Botón
  • Image y posicionamiento de texto
  • Personaliza la forma de la control Botón mediante las opciones de estilo
  • Imágenes associated con un botón en un Page
  • Image de estilo botón y CSS
  • Image de botón y opciones específicas
  • Configuración avanzada de imágenes
  • Configuración del modo de visualización (botón en una ventana)
  • Image de botón multilingüe
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Otros
Procedimientos almacenados
Imágenes y botones
Presentación
WINDEV, WEBDEV y WINDEV Mobile incluyen muchas características para mejorar la apariencia de las aplicaciones y sitios.
WINDEVUniversal Windows 10 AppAndroidiPhone/iPadJava En una ventana, puede:
  • utilizar imágenes en los controles de los botones. Estas imágenes pueden:
    • definir los diferentes estados de la control.
    • ser animado.
    • se sitúe en relación con el texto que aparece en el control.
    • para definir la forma de la control.
  • Definir las sombras en los cuerpos de los controles de los botones.
WEBDEV - Código Servidor En una página, puede definir las imágenes que se utilizarán en la control desde las opciones de estilo CSS. También puede utilizar diferentes tipos de imágenes para la control.
La mayoría de estas opciones pueden definirse en las pestañas "General" y "Estilo" de la ventana del control description.
WINDEVUniversal Windows 10 AppAndroidWidget Android iPhone/iPadJava
Imágenes associated con un control Botón en una ventana

Presentación

En una ventana, tiene dos opciones para definir la imagen associated con un control Botón:
  • Image: esta Image aparecerá sobre el botón, independientemente de su forma.
    Ejemplo: control Botón con un Image y sin borde:
    Punta: Para obtener los mejores resultados, la Image debe ser 5 píxeles más pequeña que la control Botón (horizontal y verticalmente).
  • Image del borde del botón: esta Image se utiliza para redefinir fácilmente la forma del botón. Por ejemplo:
Estas imágenes se seleccionan en la ventana de control description (pestaña "General"):
Observaciones:
  • La biblioteca de imágenes incluida con WINDEV o WINDEV Mobile permite elegir las imágenes (borde e imagen) associated con el control. Para abrir esta biblioteca, despliegue el botón Botón desplegable y seleccione "Catálogo"..
  • Para editar las opciones de Image (modo de visualización, simetría, ...), despliegue el botón Botón desplegable y seleccione "Opciones de visualización, transparencia, simetría" (véase Configuración del modo de visualización (botón en una ventana)).
  • Widget Android Sólo puede set el Image del borde del botón.

Caso especial: imágenes para gestionar los estados de control Botón

WINDEV y WINDEV Mobile le permiten gestionar los diferentes estados de los botones: Normal, pulsada, Grayed fuera, enfocada y rondando. Para obtener más información, consulte Estados de una control Botón.
Si los estados de una control Botón se definen mediante imágenes, puedes:
  • utilizar dos Image s (Image que aparece en el control y Image en el marco), cada uno con 5 estados. Con esta solución, puede utilizar el mismo borde Image para varios controles de botones y utilizar otro Image encima.
  • incluir la Image que aparece en la control directamente en el borde Image. En este caso, especifique sólo la imagen del borde en el control description.
En reposo, pulsado, Grayed fuera, seleccionada, botón de rastreo
En reposo, pulsado, Grayed fuera, seleccionada, botón de rastreo
Para un borde Image (y/o Image visualizado en el botón) con múltiples estados, WINDEV le permite:
  • estirar la Image (si la control Botón es mayor que la Image, por ejemplo). Existen varias posibilidades:
    • No hay que estirar.
    • Estirar horizontalmente (3 imágenes). Se utilizan los siguientes criterios:
      • la Image se divide en tres secciones
      • La sección 1 corresponde a la zona izquierda
      • La sección 3 corresponde a la zona derecha
      • La sección 2 corresponde a la zona media. El tamaño de esta sección es igual a 16 píxeles. Esta sección se repetirá tantas veces como sea necesario hasta que el botón Image alcance el tamaño deseado.
    • Se estira horizontal y verticalmente.
    • Estiramiento personalizado con Escala de 9 sectores.
  • WINDEVWindows un halo alrededor del control Botón.
    Para evitar problemas de visualización cuando se colocan varios botones uno al lado del otro, el tamaño del halo debe definirse en píxeles (horizontal y verticalmente).

Animaciones en la control Botón

También puede animar las imágenes de los controles de los botones. Para ello, la control Botón puede:
  • utilizar una Image animada . En este caso, la Image mostrada en la control será animada (por ejemplo, GIF animado). La animación se gestiona automáticamente.
  • utilizar una Image que será animada por WINDEV o WINDEV Mobile. En este caso, la imagen mostrada en el control contiene una set con todos los dibujos de la animación (los dibujos horizontales representan los estados del botón). El número de pasos de la animación debe especificarse en la pestaña "General" de la ventana description de control Botón.
WINDEVAndroidWidget Android Java

Image y posicionamiento de texto

Cuando un Image contiene un título y un icono (Image), tiene la posibilidad de configurar la posición relativa del Image y del texto en el estilo control:
  1. Visualizar la ventana description de control Botón ("description" en el menú contextual).
  2. Mostrar la pestaña "Estilo.
  3. Seleccione el elemento "Leyenda" y configure la posición de la leyenda mediante la opción "Posición"..
WINDEV La opción "Posicionamiento libre" le permite gestionar por completo la posición de Image y la leyenda. La flecha al lado de la opción le permite acceder a la ventana de configuración:
La sección roja corresponde a la zona de subtítulos y la azul a la zona Image. Es posible:
  • Configure uno de los estados de los botones o todos los estados de los botones.
  • Especifique la posición exacta de Image y de la leyenda (al píxel).
  • Especifique un anclaje diferente para la Image y el título.
Observaciones:
  • el posicionamiento libre sólo se puede utilizar si el botón utilizó una Icon específica . Si la Icon está incluida en el fondo Image, el posicionamiento libre no está disponible.
  • Una vez definido el posicionamiento libre para un botón, puede abrir los ajustes de posición seleccionando la opción "Editar leyenda y posición Icon" (menú contextual del botón).
  • Los botones de flecha proponen varias opciones que le permiten manipular fácilmente el Image o la leyenda: Snap up, Snap down, Center, ....
WINDEVUniversal Windows 10 AppAndroidWidget Android iPhone/iPad

Personaliza la forma de la control Botón mediante las opciones de estilo

Puede configurar la forma de la control Botón mediante las opciones de estilo.
Para configurar la forma de la control Botón:
  1. Vaya a la pestaña "Estilo" de la ventana de control description.
  2. Seleccione el elemento "Fuera Border ".
  3. En "Border", seleccione el Border deseado .
    • Haga clic en para configurar el borde (las opciones de configuración son diferentes según el tipo de borde elegido).
    • Haga clic en (a la derecha de la opción "Borde") para configurar la sombra del borde. Si utiliza una sombra, puede elegir:
      • el desplazamiento X e Y de la sombra,
      • el porcentaje de opacidad,
      • el radio de desenfoque,
      • el color de la sombra.
        Observación: Los controles de botones que utilizan el tema XP no admiten sombras.
  4. Validar.
Observaciones:
  • Algunas opciones no son Visible si el botón incluye un borde/fondo Image.
  • Puede elegir fronteras específicas para cada estado de la control Botón: Normal, sobre, pulsado, centrado, Grayed.
  • El borde "Redondo" sirve para get un botón redondo. En ese caso:
    • la transparencia es soportada automáticamente.
    • El clic se adapta a la forma: si el usuario hace clic en la esquina de la control, fuera del círculo, el clic se ignora.
  • La opción "Personalizado" le permite personalizar completamente los bordes haciendo clic en el botón Icon :
Imágenes associated con un botón en un Page
WEBDEV - Código Servidor En una página, las imágenes associated con un botón se pueden definir en el estilo de botón:
  • mediante el estilo CSS (elemento "Botón CSS" de la pestaña "Estilo" del control description).
  • a través de las opciones de imagen (elemento "Botón (Imágenes)" de la pestaña "Estilo" del control description).
WEBDEV - Código Servidor

Image de estilo botón y CSS

Para definir la imagen associated con el botón a través del estilo CSS:
  1. Vaya a la pestaña "Estilo" de la ventana de control description.
  2. Seleccione el elemento "Botón (CSS).
  3. Mostrar las opciones avanzadas (enlace "Más opciones").
  4. En la pestaña "Fondo", tiene la posibilidad de definir el Image utilizado y sus características.
WEBDEV - Código Servidor

Image de botón y opciones específicas

Para definir la imagen associated con el botón a través de las opciones WEBDEV:
  1. Vaya a la pestaña "Estilo" de la ventana de control description.
  2. Seleccione el elemento "Botón (Imágenes).
  3. Se pueden utilizar dos tipos de imágenes:
    • Una imagen set.
      Esta imagen set contiene:
      • horizontalmente: los diferentes estados del botón: inactiva, pulsada, Grayed, seleccionada, rondando.
      • verticalmente: los diferentes estados de la animación de los botones (se recomiendan 5 o 6 pasos).
    • Imágenes independientes. En este caso, sólo se admiten las imágenes del estado Normal y del estado hovered.
      • Normal: esta Image se utilizará para representar el botón.
      • Sobre: esta Image se mostrará cuando el cursor del ratón pase por encima del botón. Si no se especifica esta Image, no habrá efecto hover.
      • La opción "Catálogo" del botón Botón desplegable permite elegir los dos tipos de imágenes a partir de una biblioteca de imágenes proporcionada con WEBDEV. Para ello:
        1. Haga clic en el botón Botón desplegable y seleccione "Catálogo".
        2. Seleccione el tema "".
        3. Seleccione "Botones gráficos".
        4. Seleccione el botón deseado.
        5. Validar, especificar las características de la Image para generar y validar. Las dos imágenes se copian automáticamente en el proyecto y se asignan al botón.
      • La opción "Fusionar Image s en un set" evita el efecto de parpadeo cuando el Image cambia al pasar el ratón por encima..
Observación: La opción "Estirar" permite gestionar el estiramiento de las imágenes associated con el botón cuando éste se redimensiona en el editor. Usted puede:
  • estirar la Image en anchura,
  • estirar la Image en anchura y altura,
  • utilizar la Escala de 9 sectores para configurar el estiramiento.
Configuración avanzada de imágenes
WINDEVUniversal Windows 10 AppAndroidiPhone/iPadJava

Configuración del modo de visualización (botón en una ventana)

Al describir los Image s de un botón, se puede configurar el modo de visualización de Image:
  1. Haga clic en Botón desplegable.
  2. En el menú que aparece, seleccione "Opciones de visualización, transparencia, simetría"..
  3. En la ventana que se muestra, puede configurar:
    • el modo de visualización de la imagen
    • su rotación
    • su transparencia
    • su simetría.
Observación: Si el Image es multilingüe, esta configuración se aplica a todos los idiomas.

Image de botón multilingüe

Si su sitio o aplicación es multilingüe, se puede seleccionar un botón Image diferente para cada idioma. Esta opción es útil cuando las imágenes associated con el botón contienen la leyenda del botón.
Para gestionar imágenes multilingües:
  1. Mostrar la description de control Botón.
  2. Pulse el botón Botón desplegable junto a la imagen ruta.
  3. Seleccione "Multilingüe"..
  4. La ventana de gestión de imágenes multilingües se abre. Por defecto, el mismo fichero es associated con todas las lenguas soportadas por la ventana o por el Page.
  5. Para cada idioma, pulse el botón Botón desplegable. Usted puede:
    • Seleccione la Image correspondiente al idioma de su ordenador (opción "Examinar").
    • Seleccione el Image correspondiente a la lengua en el catálogo Image (opción "Catálogo").
    En el momento de la ejecución, se mostrará el botón Image correspondiente en función del idioma seleccionado por Nación.
  6. Validar. La leyenda "Valor multilingüe" aparece en el nombre de Image.
Ver también
Versión mínima requerida
  • Versión 9
Esta página también está disponible para…
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 09/04/2023

Señalar un error o enviar una sugerencia | Ayuda local