# button — `u_pbt_button` #

← Referencia de componentes · Índice de la guía

> Botón con tema: texto e icono, estilos, distintivo de contador, atajo de teclado, botones predeterminado y de cancelación.

> ▶ Verlo en vivo — Aplicación de demostración, mosaico Button: la vista previa, el código que lo genera y esta página, uno al lado del otro.

## De un vistazo #

Userobject | `u_pbt_button`
Clase de items | — (componente sin items)
Sirve para | Sustituir un `commandbutton` por un botón moderno, con tema, con icono y distintivo
Opciones opt-in | `ib_track_mouse`

## Inicio rápido #

    // event open de la ventana
    uo_bouton.is_text  = "&Guardar"               // & = letra subrayada (mnemotecnico)
    uo_bouton.is_style = uo_bouton.STYLE_PRIMARY // boton de accion principal
    uo_bouton.is_image = "mono:img\save.svg"     // icono recoloreado por el tema
    uo_bouton.is_shortcut = "Ctrl+S"             // atajo mostrado y activo
    uo_bouton.is_tooltip = "Guarda el expediente en curso"

    // event ue_clicked de uo_bouton
    of_enregistrer()

## Constantes #

Constante | Valor | Para
--- | --- | ---
`STYLE_STANDARD` · `STYLE_PRIMARY` · `STYLE_FLAT` | `"standard"` `"primary"` `"flat"` | `is_style`

## Propiedades #

Propiedad | Tipo | Predeterminado | Función
--- | --- | --- | ---
`is_text` | string | `""` | Etiqueta. Acepta el texto enriquecido con etiquetas y el mnemotécnico `&` (`&Guardar` subraya la G); `&&` muestra un ampersand literal
`is_image` | string | `""` | Icono mostrado antes de la etiqueta (formas aceptadas: ruta, `mono:`, `tint:`, recurso de DLL)
`ii_image_size` | integer | `0` | Tamaño del icono en píxeles (`0` = tamaño natural del componente)
`is_style` | string | `"standard"` | Apariencia: `STYLE_STANDARD`, `STYLE_PRIMARY` (fondo de acento, acción principal), `STYLE_FLAT` (sin borde)
`ib_enabled` | boolean | `true` | Botón activo o atenuado
`ib_default` | boolean | `false` | Botón predeterminado: la tecla Intro lo activa; un filete de acento lo señala
`ib_cancel` | boolean | `false` | Botón de cancelación: la tecla Esc lo activa
`is_shortcut` | string | `""` | Atajo de teclado (`"Ctrl+S"`, `"F5"`, `"Ctrl+Shift+N"`), mostrado en el tooltip y activo cuando el botón tiene el foco
`ii_badge` | integer | `0` | Distintivo de contador en la esquina superior derecha (`0` = ninguno)
`il_badge_color` | long | `0` | Fondo del distintivo, en RGB de PowerBuilder (`0` = el color que viene del tema). El color del texto se elige automáticamente para que el contador siga siendo legible
`ii_badge_size` | integer | `0` | Altura del distintivo en píxeles (`0` = el tamaño que viene del tema). El tamaño de la fuente se ajusta solo: el contador sigue centrado sea cual sea la dimensión
`ib_track_mouse` | boolean | `false` | Opt-in: activa `ue_mouse_enter` / `ue_mouse_leave`
`is_theme_style` | string | `fluent` | Estilo visual del componente (constantes `THEME_STYLE_*`)
`is_theme_mode` | string | `light` | Variante clara u oscura (constantes `THEME_MODE_*`)
`il_theme_accent` | long | `-1` | Color de acento de este componente (`-1` = acento del tema)
`is_tooltip` | string | `""` | Tooltip simple mostrado al pasar el ratón por el componente
`is_super_tooltip_title` | string | `""` | Título del tooltip enriquecido (prevalece sobre `is_tooltip`)
`is_super_tooltip_text` | string | `""` | Texto del tooltip enriquecido (se acepta el marcado enriquecido)
`is_super_tooltip_image` | string | `""` | Imagen del tooltip enriquecido

## Métodos #

Método | Función
--- | ---
`of_reset ( )` | Devuelve todas las propiedades a sus valores predeterminados
`of_set_redraw (boolean)` | Agrupa una ráfaga de modificaciones en una sola representación
`of_save_as_png (string)` · `of_save_as_jpg (string)` | Exporta la representación como imagen

## Eventos #

Evento | Se activa cuando
--- | ---
`ue_clicked ( )` | Se hace clic en el botón, o se activa mediante Intro / Esc / su atajo
`ue_rclicked ( )` | Clic derecho en el botón
`ue_mouse_enter ( )` | El ratón entra — requiere `ib_track_mouse = true`
`ue_mouse_leave ( )` | El ratón sale — requiere `ib_track_mouse = true`
`ue_ready ( )` | El componente ha terminado de cargarse; todo lo enviado antes se ha reproducido
`ue_runtime_missing ( )` | El runtime WebView2 está ausente: el componente permanece vacío
`ue_bg_color (long al_color)` | El componente ha calculado el color de fondo de su tema; el userobject ya lo ha adoptado (`backcolor`)

## Ejemplos #

### Los tres estilos #

    uo_ok.is_text     = "Aceptar"
    uo_ok.is_style    = uo_ok.STYLE_PRIMARY
    uo_ok.ib_default  = true          // tecla Intro

    uo_annuler.is_text   = "Cancelar"
    uo_annuler.is_style  = uo_annuler.STYLE_STANDARD
    uo_annuler.ib_cancel = true       // tecla Esc

    uo_aide.is_text  = "Ayuda"
    uo_aide.is_style = uo_aide.STYLE_FLAT   // discreto, sin borde

### Icono y distintivo de notificación #

    uo_messages.is_text  = "Mensajes"
    uo_messages.is_image = "mono:img\mail.svg"
    uo_messages.ii_image_size = 20
    uo_messages.ii_badge = 12             // distintivo "12"

    // Actualizar el contador: el distintivo desaparece en 0
    uo_messages.ii_badge = ll_non_lus

    // Un distintivo rojo para una alerta, en lugar del color del tema.
    // El color del texto se elige solo para seguir siendo legible.
    uo_messages.il_badge_color = RGB(200, 30, 30)

    // Volver al color que viene del tema
    uo_messages.il_badge_color = 0

### Etiqueta enriquecida #

    uo_bouton.is_text = "[b]Exportar[/b] [size-=20]· CSV[/size-=20]"
    uo_bouton.is_text = "Estado [picture=mono:img\ok.svg,14,14]"

### Botón de acción principal con atajo y ayuda #

    uo_valider.of_set_redraw(false)

    uo_valider.is_text     = "&Confirmar el pedido"
    uo_valider.is_style    = uo_valider.STYLE_PRIMARY
    uo_valider.is_shortcut = "Ctrl+Enter"
    uo_valider.ib_default  = true
    uo_valider.is_super_tooltip_title = "Confirmar"
    uo_valider.is_super_tooltip_text  = "Envía el pedido al proveedor." &
                                        + "[br][br][size-=15]Acción irreversible.[/size-=15]"

    uo_valider.of_set_redraw(true)

### Reaccionar al paso del cursor #

    uo_bouton.ib_track_mouse = true

    // event ue_mouse_enter de uo_bouton
    uo_statut.of_item("main").is_text = "Guarda el expediente en curso"

## Buenas prácticas #

- Un solo botón `primary` por pantalla: es la acción esperada.
- `ib_default` e `ib_cancel` sustituyen la gestión manual de Intro / Esc en su ventana.
- Utilice `mono:` para los iconos monocromos: seguirán tanto el tema claro como el oscuro.
- Llame a `of_reset()` antes de reutilizar un botón para otra acción.

← Referencia de componentes · Índice de la guía