4. Designs und Erscheinungsbild #

← Gemeinsame Basis · Inhalt · Sprache und RTL →

4.1 Die Designs: zwei Achsen #

Ein Design besteht aus einem Stil und einem Modus:

Das ergibt zehn Designs mit dem Namen <style>-<mode>: fluent-light, fluent-dark, office2007-light, metro-dark…

4.2 Das Standarddesign der Anwendung (empfohlen) #

Setzen Sie das Design einmal für die gesamte Anwendung, bevor das erste Fenster geöffnet wird. Es wird in jede Komponente vor deren erstem Rendering eingespeist: kein Aufblitzen eines hellen Stils in einer dunklen Anwendung.

// Event open des Anwendungsobjekts
PBT_SetDefaultTheme("fluent-dark")
PBT_SetDefaultThemeAccent(RGB(0, 120, 212))   // optional

Ein Wechsel im laufenden Betrieb ist jederzeit möglich: Alle bereits geöffneten Komponenten erhalten sofort das neue Design.

// Umschalten hell / dunkel ueber eine Schaltflaeche der Anwendung
PBT_SetDefaultTheme("fluent-light")

4.3 Das Design einer bestimmten Komponente #

Eine Komponente kann vom Standarddesign abweichen:

uo_editeur.is_theme_style = uo_editeur.THEME_STYLE_OFFICE2007
uo_editeur.is_theme_mode  = uo_editeur.THEME_MODE_DARK
uo_editeur.il_theme_accent = RGB(200, 60, 40)     // -1 = Akzent des Designs

Ein of_reset() bringt die Komponente auf das Standarddesign des Prozesses zurück.

💡 Am gepflegtesten bleibt ein einziges Design für die gesamte Anwendung. Behalten Sie das lokale Design Sonderfällen vor (einem bewusst kontrastierten Bereich, einer Designvorschau).

4.4 Eine Komponente, eine Gruppe oder ein Element umfärben #

Drei Reichweiten, dieselben Eigenschaften. Nichts zu benennen, nichts zu erraten.

// Die ganze Komponente
uo_ruban.il_theme_accent = RGB(0, 120, 90)

// Eine Gruppe : alles darin folgt
uo_ruban.of_tab("accueil").of_group("presse-papiers").il_accent = RGB(0, 120, 90)

// Ein Element
uo_liste.of_item("supprimer").il_text_color = RGB(200, 70, 70)
uo_liste.of_item("supprimer").il_back_color = RGB(255, 235, 235)

// Dieselben zwei, unter dem Zeiger
uo_liste.of_item("supprimer").il_back_color_hover = RGB(255, 220, 220)

// Zurueck zur Farbe der Komponente
uo_liste.of_item("supprimer").il_text_color = -1

-1 stellt die Farbe wieder her, die die Komponente vorgibt und die selbst aus dem Thema stammt. Eine Elementfarbe übersteht den Neuaufbau der Komponente: sie wird von einer Stilregel getragen, die auf das Element zielt, nicht von einer Eigenschaft auf dem Knoten des Augenblicks. of_reset() löscht alles.

il_accent färbt nur um, was die Zone mit dem Akzent malt — eine Auswahl, eine aktive Unterstreichung, einen Fortschrittsbalken. Eine Komponente, die ihn nie benutzt, zeigt davon nichts: für „diesen Eintrag in Rot“ sind il_back_color und il_text_color die richtigen Werkzeuge, gelesen von jeder Komponente mit Elementen.

Die Schrift der ganzen Anwendung #

PBT_SetDefaultFont("Segoe UI", 14)

Ein Aufruf kleidet jede lebende Komponente und die danach erzeugten — die Schrift wird ihnen vor dem ersten Zeichnen eingespielt. Eine leere Familie oder eine Größe von 0 gibt diese Hälfte dem Thema zurück.

4.5 Der Hintergrund der Komponente wird an PowerBuilder gemeldet #

Jede Komponente zeichnet ihren Hintergrund gemäß dem Design und meldet dann ihre Farbe: Das Userobject übernimmt diese Farbe (backcolor) und löst ue_bg_color aus, damit das Fenster und die benachbarten PowerBuilder-Steuerelemente dazu passen.

// Event ue_bg_color einer Komponente
parent.backcolor = al_color
st_titre.backcolor = al_color

Genau dadurch lassen sich PBToolboxAI-Komponenten und native PowerBuilder-Steuerelemente im dunklen Design ohne sichtbaren Übergang mischen.

4.6 Bilder und Symbole #

Überall dort, wo eine Komponente einen Bildpfad erwartet (Symbol einer Schaltfläche, Kachel, [picture=…]…), werden vier Formen akzeptiert:

• mono: verwenden Sie für alle einfarbigen Glyphen (weiße oder schwarze Symbole): Sie werden im hellen wie im dunklen Design automatisch umgefärbt.
• tint: harmonisiert ein farbiges Symbol mit dem Design und erhält dabei seine Verläufe. Niemals auf einer weißen Glyphe verwenden (sie bliebe weiß).
• Ohne Präfix bleibt das mehrfarbige Bild unverändert.

Die Form pfad.dll:name lädt eine Ressource aus einer Bilder-DLL (nach Art von packimages.dll), die schreibgeschützt geöffnet wird (LOAD_LIBRARY_AS_DATAFILE, es wird kein Code ausgeführt). So müssen Sie nicht Hunderte einzelner Dateien ausliefern.

Sofortige Anzeige: of_icon #

Eine kleine Glyphe, die über of_icon() übergeben wird, ist in den Befehl eingebettet (kein Ladevorgang hin und zurück): Sie erscheint schon beim ersten Rendering, ohne das Flackern eines nachträglich geladenen Symbols.

lnv_bar.of_add_button("save", "Speichern", uo_toolbar.of_icon("mono:img\save.svg"))

Im Gebrauch transparent: Ab einer bestimmten Größe liefert of_icon den ursprünglichen Pfad zurück (das Bild wird dann wie gewohnt geladen und zwischengespeichert).

4.7 Rich-Text-Auszeichnung #

Jede beliebige Beschriftung jeder Komponente akzeptiert eine Auszeichnung nach Art von BBCode: Titel einer Registerkarte, Beschriftung einer Schaltfläche, Text der Statusleiste, Toast-Meldung, Titel eines Panels, Text eines Tooltips…

Die Einträge der integrierten Menüs folgen derselben Regel — Kontextmenü einer Registerkarte, ···-Liste der nicht mehr passenden Registerkarten, Spaltenmenüs eines Rasters: Die im Menü angezeigte Beschriftung ist die des Steuerelements, samt Auszeichnung.

Der Text wird als Textknoten und <span> gerendert: eine HTML-Injektion ist nicht möglich.

uo_texte.is_text = "Willkommen bei [b][accent]PBToolboxAI[/accent][/b] [size-=20]v1.0[/size-=20]" &
                   + "[br]Lesen Sie die [hyperlink=https://pbtoolboxai.net]Dokumentation[/hyperlink]."

uo_tab.of_add_page("clients", "[b]Kunden[/b] [size-=20](128)[/size-=20]", uo_clients)

uo_st.is_text = "Das Tag [[b]] macht [b]fett[/b]"   // zeigt an: Das Tag [b] macht fett

Daten unverändert anzeigen. Ein Wert aus Ihrer Datenbank kann Klammern enthalten: Er würde interpretiert. of_escape_markup(), auf jeder Komponente verfügbar, verdoppelt sie für Sie — umschließen Sie die Daten, nie die Auszeichnung, die Sie selbst geschrieben haben.

// Fachdaten koennen Klammern enthalten : ohne Maskierung werden sie
// INTERPRETIERT und der Text in Klammern verschwindet.
ls_libelle = "Saldo [netto]"
uo_st.is_text = "Konto : " + ls_libelle                          // zeigt : Konto :
uo_st.is_text = "Konto : " + uo_st.of_escape_markup(ls_libelle)  // zeigt : Konto : Saldo [netto]

Ein Text ohne Tag verursacht keinerlei Mehraufwand (schneller Pfad). Unbekannte Tags werden ignoriert und ihr Inhalt bleibt erhalten. Ein [hyperlink] öffnet sich überall — Beschriftung, Registerkartentitel, Statusleistenfeld, Toast, Dialog: der Unterbau erledigt das. Das Event ue_action dagegen wird nur von interaktiven Textkomponenten (statictext) ausgegeben; anderswo dient [action] allein der Formatierung.

Nur http, https und mailto werden geöffnet. Eine Beschriftung trägt oft Daten aus Ihrer Datenbank: dem System ein beliebiges Schema zu übergeben, würde eine Beschriftung in einen Programmstarter verwandeln.

Ein [foldarea] ist ein Block: Er nimmt die gesamte Breite ein und klappt bei einem Klick auf seine Kopfzeile ein — ohne Umweg über PowerBuilder. Blöcke lassen sich verschachteln, und wenn die Komponente der Höhe ihres Inhalts folgt (ib_auto_height), wird diese Höhe bei jedem Ein- und Ausklappen erneut gemeldet. Der Titel ist ebenfalls Auszeichnungstext: Nichts wird für Sie fett gesetzt, [foldarea:[b]Total[/b]] erledigt das.

← Gemeinsame Basis · Inhalt · Sprache und RTL →