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östue_erroraus. Sie ändert nichts: sie ist ein BETRACHTER.
▶ Live sehen — Demoanwendung, Kachel JSON tree, mit dem Code und dieser Seite nebeneinander.
Auf einen Blick #
| Userobject | u_pbt_jsontree |
| Eingabe | Der JSON-Text, in is_json (eine Zeichenkette) |
| Ein-/Ausklappen | Jeder 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ückmeldung | Ein 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 |
| Originaltreue | Jede 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 #
| Eigenschaft | Typ | Standard | Beschreibung |
|---|---|---|---|
is_json | string | "" | 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_wrap | boolean | true | Lange Zeilen brechen um (true, Standard) oder bleiben mit horizontaler Bildlaufleiste auf einer Zeile (false) — ein Code-Editor-Gefühl |
ib_search_enabled | boolean | true | Strg+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_case | boolean | false | Suchoption: 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_word | boolean | false | Suchoption: 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_decoded | boolean | false | Suchoption: 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_style | string | "" | Visueller Stil der Komponente (Konstanten THEME_STYLE_*); leer = der der Anwendung, bei jeder Änderung übernommen |
is_theme_mode | string | "" | Helle oder dunkle Variante (Konstanten THEME_MODE_*); leer = die der Anwendung, bei jeder Änderung übernommen |
il_theme_accent | long | -1 | Akzentfarbe dieser Komponente (-1 = Akzent der Anwendung, sonst der 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 | Beschreibung |
|---|---|
of_expand_all ( ) → long | Klappt 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 ( ) → long | Klappt 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 ) → long | Klappt 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 ) → boolean | true, 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 ( ) → string | Die 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 ) → long | Gibt 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 ( ) → long | Legt 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 ( ) → long | Legt 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 ( ) → long | Leert 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 ) → long | Zeigt 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 ) → long | Hebt 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 ( ) → long | Geht 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 ( ) → long | Geht 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 ( ) → long | Lö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 ) → long | Wä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 ( ) → string | Der 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 ( ) → string | Der 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 ( ) → string | Der 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 ( ) → boolean | true, wenn ein Knoten ausgewählt ist, LIVE gelesen — die Wurzel eingeschlossen, deren Pfad "" ist |
of_selected_addressable ( ) → boolean | true, 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 ( ) → string | Der 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 ( ) → long | Die 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 ( ) → long | Liefert 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 ( ) → long | Liefert die 1-basierte Position des aktuellen Treffers, LIVE gelesen — die 3 einer Statuszeile 3 / 12. 0 ohne Treffer |
Ereignisse #
| Ereignis | Wann |
|---|---|
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 #
- Ein Betrachter, kein Editor: er zeigt das JSON, er ändert es nicht. Um einen Wert zu lesen, übergeben Sie den Pfad von
ue_node_clickedann_pbt_json.of_get_stringauf demselben Text, oder lesen Sieof_selected_text. - Ein großes JSON bleibt flüssig: nur die Zeilen auf dem Bildschirm werden gezeichnet, eine Antwort von mehreren hundert KB lässt sich ohne Wartezeit mit der Tastatur durchgehen. Zuerst
of_collapse_allbleibt am lesbarsten. - Ungültiges JSON zerbricht nichts:
ue_errorsagt es (mit Zeile und Spalte des Fehlers), der Baum bleibt leer. Das ist die Rückmeldung, die man zeigt, kein Absturz. - Jeder Schlüssel hat einen Pfad: ein
/oder~darin wird~1bzw.~0geschrieben (JSON Pointer), undn_pbt_jsonliest ihn so —paths/~1users~1{id}für eine OpenAPI-Spezifikation. Ein LEERER Schlüssel ist eine leere Ebene (a//b,/für den an der Wurzel). Eine Ausnahme, dieof_selected_addressablemeldet: alles unter dem zweiten von zwei gleichen Schlüsseln (der Pfad bezeichnet den ersten). - Von rechts nach links: ein JSON-Dokument ist ein Text von links nach rechts, und der Baum bleibt es in einer RTL-Anwendung (nur das Suchfeld folgt der Richtung der Anwendung).
- Die Tastatur bleibt beim Baum: Eingabe klappt einen Block ein oder „klickt“ ein Blatt (
ue_node_clicked), nie die Standardschaltfläche des Fensters; Esc schließt zuerst ein offenes Suchfeld und geht dann an das Fenster; die schließenden Zeilen (},]) sind keine Positionen der Auswahl; Strg+C kopiert die Auswahl (of_copy) oder das mit der Maus markierte Textstück; die Leertaste klappt einen Block ein und rollt die Ansicht nie; die Menütaste (Umschalt+F10) löstue_node_rclickedaus. - Sehr große Dokumente: über 1.500.000 Zeilen wird das Dokument mit
ue_errorabgelehnt, statt stillschweigend abgeschnitten zu werden. Der Druck (of_print,of_print_to_pdf) gibt aus, was aufgeklappt ist, bis zu 10.000 Zeilen: ein eingeklappter Block wird eingeklappt gedruckt (vorherof_expand_all, um alles zu drucken).
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.
| Mitglieder | Rolle | Beschrieben in |
|---|---|---|
of_reset | Die Komponente zurücksetzen | 3.6 Eine Komponente zurücksetzen: of_reset() |
of_register_shortcut · of_clear_shortcuts | Tastenkürzel der Komponente | 3.5 Tastenkombinationen |
of_is_created · of_is_ready · of_get_last_error | Ob sie entstanden ist, ob sie bereit ist, was fehlschlug | 3.7 Diagnose |
of_save_as_png · of_save_as_jpg | Die Darstellung als Bild exportieren | 3.8 Die Darstellung als Bild exportieren |
of_set_redraw | Änderungen zu einem einzigen Neuzeichnen bündeln | 3.10 Best Practices |
of_preload_icons | Symbole ohne Verzögerung | Sofortige Anzeige: of_icon |
of_set_translation | Eine Beschriftung der Komponente übersetzen | 5.2 Eine Beschriftung anpassen: of_set_translation |
of_focus_webview | Der Komponente den Fokus geben | 6.4 Tastatur und Fokus |
of_print · of_print_to_pdf | Drucken oder ein PDF schreiben | 6.9 Drucken |
of_set_property · of_get_property · of_component_name | Eine Eigenschaft über ihren Namen steuern | 3.1 Die Eigenschaften-Engine |
is_accessible_name · is_accessible_description | Name und Beschreibung, die ein Bildschirmleser sagt | 3.4 Optionale Eigenschaften und Events |