PBToolboxAI v5 ← Site

jsontree — u_pbt_jsontree #

← Komponentenreferenz · Inhalt des Handbuchs

jsontree zeigt einen JSON-Wert als einklappbaren Baum, nach Typ gefärbt: ein Konfigurationsbildschirm, eine API-Antwort, ein Integrations-Debug. Sie setzen den JSON-Text in is_json, die Komponente zeigt ihn; ein Klick auf einen Knoten meldet seinen Pfad (ue_node_clicked), ungültiges JSON löst ue_error aus. Sie ändert nichts: sie ist ein BETRACHTER.

▶ Live sehen — Demoanwendung, Kachel JSON tree, mit dem Code und dieser Seite nebeneinander.


Auf einen Blick #

Userobjectu_pbt_jsontree
EingabeDer JSON-Text, in is_json (eine Zeichenkette)
Ein-/AusklappenJeder Container über seine Markierung + / − am Zeilennummernrand, über seinen Pfad (of_expand_path, of_collapse_path), oder alle auf einmal (of_expand_all, of_collapse_all)
RückmeldungEin Klick auf einen Knoten liefert seinen Pfad (ue_node_clicked), den Pfad von n_pbt_json: lines/1/sku; ungültiges JSON löst ue_error aus
OriginaltreueJede Zahl und jeder Schlüssel wird so gezeigt, wie er empfangen wurde: eine 64-Bit-ID bleibt exakt, 1.10 bleibt 1.10, ein doppelter Schlüssel behält beide Einträge

Schnellstart #

// Show an API response as a tree
uo_json.is_json = inv_rest.of_response_text()

// Fold everything, then let the user open what interests them
uo_json.of_collapse_all()

// ue_node_clicked : the path of the node clicked ("lines/1/sku"), the path of
// n_pbt_json -> of_get_string(as_path) on the same text reads its value

Eigenschaften #

EigenschaftTypStandardBeschreibung
is_jsonstring""Der anzuzeigende JSON-Text. Ein Objekt, ein Array, ein Wert; gelesen und als Baum gezeigt, jede Zahl und jeder Schlüssel so, wie empfangen. Leer leert den Baum, ohne Fehler; ungültiges JSON löst ue_error aus und zeigt nichts. Wird genau so zurückgelesen, wie er gesetzt wurde
ib_wrapbooleantrueLange Zeilen brechen um (true, Standard) oder bleiben mit horizontaler Bildlaufleiste auf einer Zeile (false) — ein Code-Editor-Gefühl
ib_search_enabledbooleantrueStrg+F im Baum öffnet ein Suchfeld — dieselbe Suche wie of_search: Tippen hebt hervor, Enter oder F3 nächster, Umschalt+Enter oder Umschalt+F3 vorheriger, Esc schließt. false überlässt das Kürzel einer Anwendung, die aus ihrem eigenen Feld sucht. Das Feld trägt vor dem Zähler drei Schalter, Aa (ib_find_match_case), ab (ib_find_whole_word) und & (ib_find_decoded); eine geänderte Option startet die laufende Suche ab ihrem ersten Vorkommen neu
ib_find_match_casebooleanfalseSuchoption: findet nur Text mit derselben Groß-/Kleinschreibung. Der Schalter Aa des Suchfelds (Strg+F) ist derselbe Schalter; gilt für of_search und für das, was der Benutzer tippt. Live gelesen; of_reset setzt sie auf false zurück
ib_find_whole_wordbooleanfalseSuchoption: findet den Text nur als ganzes Wort (ein Buchstabe, eine Ziffer oder ein _ daneben gehört zum Wort: id wird weder in user_id noch in ids gefunden). Der Schalter ab des Suchfelds ist derselbe Schalter. Live gelesen; of_reset setzt sie auf false zurück
ib_find_decodedbooleanfalseSuchoption: sucht in den decodierten WERTEN — ein Schlüssel und ein String, gelesen wie n_pbt_json sie liest (say "hi" findet die maskierten Anführungszeichen, ein Buchstabe mit Akzent seine Maskierung \u, ein Zeilenumbruch sein \n); die Hervorhebung deckt die ganze Maskierung ab, eine Zahl und die Satzzeichen bleiben wie angezeigt. false sucht im Text, wie er angezeigt wird. Der Schalter & des Suchfelds ist derselbe Schalter. Live gelesen; of_reset setzt sie auf false zurück
is_theme_stylestring""Visueller Stil der Komponente (Konstanten THEME_STYLE_*); leer = der der Anwendung, bei jeder Änderung übernommen
is_theme_modestring""Helle oder dunkle Variante (Konstanten THEME_MODE_*); leer = die der Anwendung, bei jeder Änderung übernommen
il_theme_accentlong-1Akzentfarbe dieser Komponente (-1 = Akzent der Anwendung, sonst der des Designs)
is_tooltipstring""Einfacher Tooltip beim Überfahren der Komponente
is_super_tooltip_titlestring""Titel des erweiterten Tooltips (hat Vorrang vor is_tooltip)
is_super_tooltip_textstring""Text des erweiterten Tooltips (Rich-Markup zulässig)
is_super_tooltip_imagestring""Bild des erweiterten Tooltips

Methoden #

MethodeBeschreibung
of_expand_all ( ) → longKlappt alle Container aus. Kein ue_node_toggled: Keine Geste öffnet den ganzen Baum auf einmal. Liefert 0, -2, wenn die Komponente nicht erzeugt ist
of_collapse_all ( ) → longKlappt alle verschachtelten Container ein (die oberste Ebene bleibt sichtbar). Eine durch das Einklappen verborgene Auswahl geht auf den eingeklappten Block über, und ue_selection_changed meldet es. Kein ue_node_toggled: Keine Geste klappt den ganzen Baum auf einmal ein. Liefert 0, -2, wenn die Komponente nicht erzeugt ist
of_expand_path ( string as_path ) → longÖffnet EINEN Block (Objekt oder Array) über seinen Pfad, und die Blöcke darüber, damit er sichtbar ist. Wie seine Markierung + löst es ue_node_toggled für den Block und für jeden eingeklappten Block darüber aus, der unterwegs aufgeht (nichts für einen schon offenen Block). Liefert 0, -5, wenn kein Block diesen Pfad hat (unbekannt, ein Blatt oder ein leerer Block {} / []), -2, wenn die Komponente nicht erzeugt ist
of_collapse_path ( string as_path ) → longKlappt EINEN Block über seinen Pfad ein. Wie seine Markierung − löst es ue_node_toggled aus, wenn der Block offen war, und ue_selection_changed, wenn die Auswahl auf ihn übergehen muss. Liefert 0, -5, wenn kein Block diesen Pfad hat (unbekannt, ein Blatt oder ein leerer Block {} / []), -2, wenn die Komponente nicht erzeugt ist
of_is_expanded ( string as_path ) → booleantrue, wenn der Block unter diesem Pfad geöffnet ist, LIVE gelesen; false, wenn er eingeklappt ist, und für ein Blatt oder einen unbekannten Pfad. Den Zustand aller Blöcke auf einmal, zum Speichern und Wiederherstellen: of_get_layout
of_get_layout ( ) → stringDie Anordnung des Baums, LIVE gelesen, als zu speichernder JSON-Text: die eingeklappten Blöcke (collapsed, oder expanded, wenn diese Liste kürzer ist — jeder Block, den sie nicht nennt, ist dann eingeklappt), der ausgewählte Pfad (selected, null ohne Auswahl) und die oberste Zeile der Ansicht (top, ein Pfad, nie Pixel). An of_set_layout zurückgeben, auch nach einem neuen Dokument
of_set_layout ( string as_layout_json ) → longGibt dem Baum eine von of_get_layout gelieferte Anordnung zurück: die Faltungen (ein Pfad, den das Dokument nicht mehr hat, wird ignoriert, ein neuer Block behält seine Vorgabe), die Auswahl (ue_selection_changed, wie of_select_path) und die oberste Zeile. ue_layout_changed folgt einmal, wenn sich die Faltungen geändert haben. Liefert 0, -5, wenn der Text kein JSON-Objekt ist, -2, wenn die Komponente nicht erzeugt ist
of_copy ( ) → longLegt die Auswahl in die Zwischenablage, wie Strg+C im Baum: ein Blatt liefert seinen Wert DEKODIERT (eine Zeichenkette ohne Anführungszeichen und Escapes), ein Block seinen eingerückten JSON-Text; ein mit der Maus markiertes Textstück kopiert Strg+C so, wie es ist. Liefert 0, -4, wenn nichts ausgewählt ist, -2, wenn die Komponente nicht erzeugt ist
of_copy_path ( ) → longLegt den PFAD des ausgewählten Knotens in die Zwischenablage (team/1/name, "" für die Wurzel), bereit für n_pbt_json. Liefert 0, -4, wenn nichts ausgewählt ist oder der Pfad einen anderen Knoten liest (of_selected_addressable ist false), -2, wenn die Komponente nicht erzeugt ist
of_clear ( ) → longLeert den Baum (wie is_json = ""); ib_wrap, ib_search_enabled, ib_find_match_case und ib_find_whole_word behalten ihren Wert (of_reset setzt alles zurück). Liefert 0, -2, wenn die Komponente nicht erzeugt ist
of_expand_to_level ( long al_level ) → longZeigt den Baum bis al_level: Blöcke ab dieser Tiefe klappen ein (1 = die direkten Kinder des Wurzelblocks, 0 klappt die Wurzel ein). Kein ue_node_toggled; eine Auswahl, die es auf einen eingeklappten Block verschiebt, löst ue_selection_changed aus. Liefert 0, -2, wenn die Komponente nicht erzeugt ist
of_search ( string as_query ) → longHebt jedes Vorkommen hervor (standardmäßig ohne Groß-/Kleinschreibung — siehe ib_find_match_case —, nur ganze Wörter mit ib_find_whole_word; zwei in einer Zeile zählen zwei) und springt zum ersten; nur die Blöcke, die das AKTUELLE Vorkommen verbergen, klappen auf, und of_clear_search klappt sie wieder ein. ue_search_result sagt, wie viele. Gesucht wird im ANGEZEIGTEN Text: ein maskiertes Zeichen wird maskiert gesucht (C:\\Temp) — mit ib_find_decoded in den decodierten Werten. Eine leere Suche ist of_clear_search. Das Suchfeld öffnet sich mit der Suche darin und dem Fokus darauf (dasselbe wie Strg+F): Eingabe geht zum nächsten; mit ib_search_enabled auf false hebt der Baum nur hervor. Liefert 0 oder einen negativen Code
of_search_next ( ) → longGeht zum NÄCHSTEN Vorkommen (nach dem letzten zurück zum ersten); ue_search_result gibt die neue Position. Liefert 0 oder einen negativen Code
of_search_prev ( ) → longGeht zum VORHERIGEN Vorkommen (vor dem ersten zurück zum letzten); ue_search_result gibt die neue Position. Liefert 0 oder einen negativen Code
of_clear_search ( ) → longLöscht die Suche: keine Hervorhebung und kein aktuelles Vorkommen mehr (of_match_count liefert 0), das Suchfeld leert und schließt sich, und die von der Suche geöffneten Blöcke klappen wieder ein wie vor ihr. Liefert 0 oder einen negativen Code
of_select_path ( string as_path ) → longWählt den Knoten bei as_path aus und scrollt zu ihm,; wie die Tastatur löst es ue_selection_changed aus (nichts, wenn der Knoten schon ausgewählt ist); die eingeklappten Blöcke, die ihn verbergen, klappen auf. as_path ist ein Pfad von n_pbt_json (lines/1/sku, "" = die Wurzel). Liefert 0, -5, wenn kein Knoten diesen Pfad hat (die Auswahl bleibt), -2, wenn die Komponente nicht erzeugt ist
of_selected_path ( ) → stringDer Pfad des ausgewählten Knotens, LIVE gelesen: der Pfad von n_pbt_json, Ebenen durch / verbunden und ein Array-Index ab 1 gezählt (lines/1/sku), unverändert an of_get_string auf demselben Text zu übergeben. Ein / oder ein ~ eines Schlüssels wird ~1 bzw. ~0 geschrieben, wie in JSON Pointer: application~1json ist der Schlüssel application/json. of_selected_addressable sagt false für den seltenen Knoten, dessen Pfad einen anderen liest. "" ist die Wurzel oder keine Auswahl: of_has_selection unterscheidet sie
of_selected_value ( ) → stringDer JSON-Wert der gewählten Zeile, wenn sie ein BLATT ist (ein String behält seine Anführungszeichen, bereit zum Einfügen), LIVE gelesen. Leer bei einem Container oder ohne Auswahl
of_selected_text ( ) → stringDer WERT des ausgewählten Blatts, dekodiert, LIVE gelesen: eine Zeichenkette ohne Anführungszeichen und Maskierungen, eine Zahl oder true/false/null wie geschrieben. Leer für einen Container oder ohne Auswahl
of_has_selection ( ) → booleantrue, wenn ein Knoten ausgewählt ist, LIVE gelesen — die Wurzel eingeschlossen, deren Pfad "" ist
of_selected_addressable ( ) → booleantrue, wenn der Pfad des ausgewählten Knotens, an n_pbt_json auf demselben Dokument gegeben, DIESEN Knoten liest — LIVE gelesen. false ohne Auswahl und unter dem ZWEITEN von zwei gleichen Schlüsseln (sein Pfad liest den ersten). Ein LEERER Schlüssel ist eine leere Pfadebene (a//b, / für den an der Wurzel): er ist adressierbar
of_selected_type ( ) → stringDer JSON-Typ des ausgewählten Knotens, mit den Wörtern von n_pbt_json.of_type: object, array, string, number, boolean oder null — LIVE gelesen. "" ohne Auswahl
of_selected_count ( ) → longDie Anzahl der Mitglieder (ein Objekt) oder Elemente (ein Array) des ausgewählten Knotens, so gezählt wie n_pbt_json.of_count — LIVE gelesen. -1 für einen Wert, der kein Block ist, oder ohne Auswahl, -2, wenn die Komponente nicht erzeugt ist
of_match_count ( ) → longLiefert die Anzahl der VORKOMMEN der aktuellen Suche (zwei in einer Zeile zählen zwei), LIVE gelesen — die 12 einer Statuszeile 3 / 12. 0 ohne Suche
of_match_index ( ) → longLiefert die 1-basierte Position des aktuellen Treffers, LIVE gelesen — die 3 einer Statuszeile 3 / 12. 0 ohne Treffer

Ereignisse #

EreignisWann
ue_node_clicked (string as_path)Der Benutzer hat einen Knoten angeklickt oder Eingabe auf einem ausgewählten Blatt gedrückt: sein Pfad, der Pfad von n_pbt_json (lines/1/sku, "" für die Wurzel, ein / oder ~ eines Schlüssels als ~1 bzw. ~0 geschrieben) — of_get_string(as_path) auf demselben Text liest seinen Wert. Eingabe auf einem Block klappt ihn ein und erreicht nie die Standardschaltfläche des Fensters
ue_node_rclicked (string as_path, long al_x, long al_y)Rechtsklick auf einen Knoten oder Menütaste (Umschalt+F10) im Baum: der Knoten wird zuerst ausgewählt (ue_selection_changed, wenn sich die Auswahl bewegt hat), as_path ist sein Pfad, al_x / al_y der Punkt auf dem BILDSCHIRM, in Pixeln. Öffnen Sie dort Ihr eigenes Menü (ein u_pbt_contextmenu): der Baum hat keines
ue_node_toggled (string as_path, boolean ab_expanded)Ein Block wurde eingeklappt (ab_expanded = false) oder geöffnet (true): vom Benutzer (seine Markierung + / −, die Pfeile, Eingabe oder Leertaste) oder von of_expand_path / of_collapse_path. of_expand_all, of_collapse_all und of_expand_to_level lösen es nicht aus: Keine Geste klappt den ganzen Baum ein
ue_layout_changed (string as_layout_json)Die Faltungen haben sich geändert — eine Geste, ein Befehl Ihres Codes (of_collapse_all eingeschlossen), ein neues Dokument, of_set_layout: as_layout_json ist die ganze Anordnung, wie of_get_layout sie liefert, bereit zum Speichern. Eine Änderung der Auswahl oder des Bildlaufs löst es nicht aus
ue_selection_changed (string as_path)Die Auswahl hat sich ohne Klick bewegt, durch den Benutzer oder Ihren Code: Pfeile, Pos1/Ende, Bild auf/ab, of_select_path, oder ein Einklappen, das die ausgewählte Zeile verbirgt (die Auswahl geht dann auf den eingeklappten Block über) — ein Mausklick meldet ue_node_clicked
ue_search_result (long al_count, long al_index)Eine Suche hat begonnen oder ist weitergegangen: al_count Vorkommen insgesamt, das aktuelle ist al_index (ab 1, 0 wenn keins) — genug, um „3 / 12“ anzuzeigen; wenn sich eine Suche schließt (Esc im Suchfeld, of_clear_search, of_reset, ib_search_enabled = false), einmal (0, 0)
ue_error (string as_message)Der Text in is_json ist kein gültiges JSON: die Meldung sagt warum, mit Zeile und Spalte, in der Anzeigesprache; der Baum bleibt leer. Auch ausgelöst für ein Dokument, das zu groß zum Anzeigen ist (mehr als 1.500.000 Zeilen)

Beispiel #

Eine API-Antwort erkunden #

// Fetch the order : the tree shows the response, or empties on a failure
if inv_rest.of_get(/*url*/ "https://api.example.com/orders/4152") = 200 then
	uo_json.is_json = inv_rest.of_response_text()
	uo_json.of_collapse_all()          // the reader opens what interests them
else
	uo_json.of_clear()
end if

Den Wert eines angeklickten Knotens lesen #

// Instance variable of the window : the response, parsed ONCE by n_pbt_json
n_pbt_json inv_doc

// When the response arrives : the tree shows it, n_pbt_json parses the same text once
uo_json.is_json = inv_rest.of_response_text()
inv_doc.of_load(/*json*/ inv_rest.of_response_text())

// ue_node_clicked of uo_json : the value at the clicked path, nothing parsed again
st_value.text = inv_doc.of_get_string(/*path*/ as_path)

// or, without a second parser : the value of the selected leaf, decoded
st_value.text = uo_json.of_selected_text()

Ganze Wörter suchen, Groß-/Kleinschreibung beachtet #

// Whole words only, with the same case : "id" is not found inside "user_id"
uo_json.ib_find_match_case = true
uo_json.ib_find_whole_word = true
uo_json.of_search(/*query*/ "id")

Die Faltungen behalten, wenn die Antwort aktualisiert wird #

// Local variables
string ls_layout

// The folds, the selected node and the line at the top, kept before the new text
ls_layout = uo_json.of_get_layout()
uo_json.is_json = inv_rest.of_response_text()

// The same blocks fold again ; a path the new text no longer has is ignored
uo_json.of_set_layout(/*layout_json*/ ls_layout)

Ein Menü auf einem Knoten #

// ue_node_rclicked of uo_json : the node is selected, open YOUR menu at that point of the screen
uo_menu.of_show(/*x*/ al_x, /*y*/ al_y)

// ue_item_selected of uo_menu : copy the value, or the path for n_pbt_json
choose case as_keys
	case "copy"
		uo_json.of_copy()
	case "copypath"
		uo_json.of_copy_path()
end choose

Bewährte Praxis #


Vom gemeinsamen Sockel geerbt #

Diese Mitglieder gibt es bei jeder visuellen Komponente — sie sind nicht dieser eigen. Sie werden einmal in den übergreifenden Kapiteln beschrieben; diese Tabelle sagt nur, wo man sie liest.

MitgliederRolleBeschrieben in
of_resetDie Komponente zurücksetzen3.6 Eine Komponente zurücksetzen: of_reset()
of_register_shortcut · of_clear_shortcutsTastenkürzel der Komponente3.5 Tastenkombinationen
of_is_created · of_is_ready · of_get_last_errorOb sie entstanden ist, ob sie bereit ist, was fehlschlug3.7 Diagnose
of_save_as_png · of_save_as_jpgDie Darstellung als Bild exportieren3.8 Die Darstellung als Bild exportieren
of_set_redrawÄnderungen zu einem einzigen Neuzeichnen bündeln3.10 Best Practices
of_preload_iconsSymbole ohne VerzögerungSofortige Anzeige: of_icon
of_set_translationEine Beschriftung der Komponente übersetzen5.2 Eine Beschriftung anpassen: of_set_translation
of_focus_webviewDer Komponente den Fokus geben6.4 Tastatur und Fokus
of_print · of_print_to_pdfDrucken oder ein PDF schreiben6.9 Drucken
of_set_property · of_get_property · of_component_nameEine Eigenschaft über ihren Namen steuern3.1 Die Eigenschaften-Engine
is_accessible_name · is_accessible_descriptionName und Beschreibung, die ein Bildschirmleser sagt3.4 Optionale Eigenschaften und Events

← Komponentenreferenz · Inhalt des Handbuchs