# button — `u_pbt_button` #

← Komponentenreferenz · Inhalt des Handbuchs

> Gestalteter Button: Text und Symbol, Stile, Zähler-Badge, Tastenkürzel, Standard- und Abbrechen-Button.

> ▶ Live ansehen — Demoanwendung, Kachel Button: die Vorschau, der zugehörige Code und diese Seite, nebeneinander.

## Auf einen Blick #

Userobject | `u_pbt_button`
Item-Klasse | — (Komponente ohne Items)
Wofür | Einen `commandbutton` durch einen modernen, gestalteten Button mit Symbol und Badge ersetzen
Opt-in-Optionen | `ib_track_mouse`

## Schnellstart #

    // Event open des Fensters
    uo_bouton.is_text  = "&Speichern"            // & = unterstrichener Buchstabe (Mnemonik)
    uo_bouton.is_style = uo_bouton.STYLE_PRIMARY // Button der Hauptaktion
    uo_bouton.is_image = "mono:img\save.svg"     // vom Design umgefaerbtes Symbol
    uo_bouton.is_shortcut = "Ctrl+S"             // angezeigtes und aktives Tastenkuerzel
    uo_bouton.is_tooltip = "Speichert die aktuelle Akte"

    // Event ue_clicked von uo_bouton
    of_enregistrer()

## Konstanten #

Konstante | Wert | Für
--- | --- | ---
`STYLE_STANDARD` · `STYLE_PRIMARY` · `STYLE_FLAT` | `"standard"` `"primary"` `"flat"` | `is_style`

## Eigenschaften #

Eigenschaft | Typ | Standard | Zweck
--- | --- | --- | ---
`is_text` | string | `""` | Beschriftung. Akzeptiert die Rich-Text-Auszeichnung und die Mnemonik `&` (`&Speichern` unterstreicht das S); `&&` zeigt ein wörtliches kaufmännisches Und an
`is_image` | string | `""` | Symbol, das vor der Beschriftung angezeigt wird (akzeptierte Formen: Pfad, `mono:`, `tint:`, DLL-Ressource)
`ii_image_size` | integer | `0` | Größe des Symbols in Pixeln (`0` = natürliche Größe der Komponente)
`is_style` | string | `"standard"` | Erscheinungsbild: `STYLE_STANDARD`, `STYLE_PRIMARY` (Akzenthintergrund, Hauptaktion), `STYLE_FLAT` (ohne Rahmen)
`ib_enabled` | boolean | `true` | Button aktiv oder ausgegraut
`ib_default` | boolean | `false` | Standard-Button: Die Eingabetaste löst ihn aus; eine Akzentumrandung kennzeichnet ihn
`ib_cancel` | boolean | `false` | Abbrechen-Button: Die Esc-Taste löst ihn aus
`is_shortcut` | string | `""` | Tastenkürzel (`"Ctrl+S"`, `"F5"`, `"Ctrl+Shift+N"`), im Tooltip angezeigt und aktiv, wenn der Button den Fokus hat
`ii_badge` | integer | `0` | Zähler-Plakette in der oberen rechten Ecke (`0` = keine)
`il_badge_color` | long | `0` | Hintergrund der Plakette, als PowerBuilder-RGB (`0` = die Farbe aus dem Design). Die Textfarbe wird automatisch gewählt, damit der Zähler lesbar bleibt
`ii_badge_size` | integer | `0` | Höhe der Plakette in Pixeln (`0` = die Größe aus dem Design). Die Schriftgröße folgt von selbst: der Zähler bleibt bei jeder Größe zentriert
`ib_track_mouse` | boolean | `false` | Opt-in: aktiviert `ue_mouse_enter` / `ue_mouse_leave`
`is_theme_style` | string | `fluent` | Visueller Stil der Komponente (Konstanten `THEME_STYLE_*`)
`is_theme_mode` | string | `light` | Helle oder dunkle Variante (Konstanten `THEME_MODE_*`)
`il_theme_accent` | long | `-1` | Akzentfarbe dieser Komponente (`-1` = Akzent des Designs)
`is_tooltip` | string | `""` | Einfacher Tooltip beim Überfahren der Komponente
`is_super_tooltip_title` | string | `""` | Titel des erweiterten Tooltips (hat Vorrang vor `is_tooltip`)
`is_super_tooltip_text` | string | `""` | Text des erweiterten Tooltips (Rich-Markup zulässig)
`is_super_tooltip_image` | string | `""` | Bild des erweiterten Tooltips

## Methoden #

Methode | Zweck
--- | ---
`of_reset ( )` | Setzt alle Eigenschaften auf ihren Standard zurück
`of_set_redraw (boolean)` | Fasst eine Folge von Änderungen zu einer einzigen Darstellung zusammen
`of_save_as_png (string)` · `of_save_as_jpg (string)` | Exportiert die Darstellung als Bild

## Events #

Event | Ausgelöst wenn
--- | ---
`ue_clicked ( )` | Der Button wird angeklickt oder durch Eingabetaste / Esc / sein Tastenkürzel ausgelöst
`ue_rclicked ( )` | Rechtsklick auf den Button
`ue_mouse_enter ( )` | Die Maus tritt ein — erfordert `ib_track_mouse = true`
`ue_mouse_leave ( )` | Die Maus verlässt den Bereich — erfordert `ib_track_mouse = true`
`ue_ready ( )` | Die Komponente ist fertig geladen; alles zuvor Gesendete wurde nachgespielt
`ue_runtime_missing ( )` | Die WebView2-Runtime fehlt: die Komponente bleibt leer
`ue_bg_color (long al_color)` | Die Komponente hat ihre Design-Hintergrundfarbe berechnet; das Userobject hat sie bereits übernommen (`backcolor`)

## Beispiele #

### Die drei Stile #

    uo_ok.is_text     = "OK"
    uo_ok.is_style    = uo_ok.STYLE_PRIMARY
    uo_ok.ib_default  = true          // Eingabetaste

    uo_annuler.is_text   = "Abbrechen"
    uo_annuler.is_style  = uo_annuler.STYLE_STANDARD
    uo_annuler.ib_cancel = true       // Esc-Taste

    uo_aide.is_text  = "Hilfe"
    uo_aide.is_style = uo_aide.STYLE_FLAT   // dezent, ohne Rahmen

### Symbol und Benachrichtigungs-Badge #

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

    // Den Zaehler aktualisieren: die Plakette verschwindet bei 0
    uo_messages.ii_badge = ll_non_lus

    // Eine rote Plakette fuer eine Warnung statt der Farbe des Designs.
    // Die Textfarbe wird von selbst gewaehlt, damit sie lesbar bleibt.
    uo_messages.il_badge_color = RGB(200, 30, 30)

    // Zurueck zu der Farbe, die aus dem Design kommt
    uo_messages.il_badge_color = 0

### Angereicherte Beschriftung #

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

### Button der Hauptaktion mit Tastenkürzel und Hilfe #

    uo_valider.of_set_redraw(false)

    uo_valider.is_text     = "&Bestellung bestätigen"
    uo_valider.is_style    = uo_valider.STYLE_PRIMARY
    uo_valider.is_shortcut = "Ctrl+Entrée"
    uo_valider.ib_default  = true
    uo_valider.is_super_tooltip_title = "Bestätigen"
    uo_valider.is_super_tooltip_text  = "Sendet die Bestellung an den Lieferanten." &
                                        + "[br][br][size-=15]Nicht rückgängig zu machende Aktion.[/size-=15]"

    uo_valider.of_set_redraw(true)

### Auf das Überfahren mit der Maus reagieren #

    uo_bouton.ib_track_mouse = true

    // Event ue_mouse_enter von uo_bouton
    uo_statut.of_item("main").is_text = "Speichert die aktuelle Akte"

## Best Practices #

- Nur ein `primary`-Button je Bildschirm: Er ist die erwartete Aktion.
- `ib_default` und `ib_cancel` ersetzen die manuelle Behandlung von Eingabetaste / Esc in Ihrem Fenster.
- Verwenden Sie `mono:` für monochrome Symbole: Sie folgen dem hellen wie dem dunklen Design.
- Rufen Sie `of_reset()` auf, bevor Sie einen Button für eine andere Aktion wiederverwenden.

← Komponentenreferenz · Inhalt des Handbuchs