jsontree — u_pbt_jsontree #
← Riferimento dei componenti · Sommario della guida
jsontree mostra un valore JSON come un albero comprimibile, colorato per tipo: una schermata di configurazione, una risposta API, un debug di integrazione. Imposti il testo JSON in
is_json, il componente lo mostra; un clic su un nodo riporta il suo percorso (ue_node_clicked), un JSON non valido sollevaue_error. Non modifica nulla: è un VISUALIZZATORE.
▶ Vederlo dal vivo — Applicazione dimostrativa, tessera JSON tree, con il codice e questa pagina fianco a fianco.
In breve #
| Userobject | u_pbt_jsontree |
| Ingresso | Il testo JSON, in is_json (una stringa) |
| Piega / dispiega | Ogni contenitore con il suo chevron, o tutto in una volta (of_expand_all, of_collapse_all) |
| Ritorno | Un clic su un nodo dà il suo percorso (ue_node_clicked); un JSON non valido solleva ue_error |
Avvio rapido #
// 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 dotted path of the node clicked ("lines.0.sku")
// -> read it in your own data with what the path names
Proprietà #
| Proprietà | Tipo | Predefinito | Descrizione |
|---|---|---|---|
is_json | string | "" | Il testo JSON da mostrare. Un oggetto, un array, un valore; letto e mostrato come albero. Vuoto cancella l'albero; un JSON non valido solleva ue_error e non mostra nulla |
ib_wrap | boolean | true | Le righe lunghe vanno a capo (true, predefinito) o restano su una riga con barra orizzontale (false) — un aspetto da editor di codice |
ib_search_enabled | boolean | true | Ctrl+F nell'albero apre una casella di ricerca — la stessa ricerca di of_search: digitare evidenzia, Invio successivo, Maiusc+Invio precedente, Esc chiude. false lascia la scorciatoia a un'applicazione che cerca dalla propria casella |
is_theme_style | string | fluent | Stile visivo del componente (costanti THEME_STYLE_*) |
is_theme_mode | string | light | Variante chiara o scura (costanti THEME_MODE_*) |
il_theme_accent | long | -1 | Colore d'accento di questo componente (-1 = accento del tema) |
is_tooltip | string | "" | Tooltip semplice mostrato al passaggio del mouse sul componente |
is_super_tooltip_title | string | "" | Titolo del tooltip avanzato (prevale su is_tooltip) |
is_super_tooltip_text | string | "" | Testo del tooltip avanzato (markup avanzato accettato) |
is_super_tooltip_image | string | "" | Immagine del tooltip avanzato |
Metodi #
| Metodo | Descrizione |
|---|---|
of_expand_all ( ) → long | Dispiega ogni contenitore. Rende 0, -1 se il componente non è creato |
of_collapse_all ( ) → long | Piega ogni contenitore annidato (il livello superiore resta visibile). Rende 0, -1 se il componente non è creato |
of_clear ( ) → long | Svuota l'albero (come is_json = ""). Rende 0, -1 se il componente non è creato |
of_expand_to_level ( long al_level ) → long | Mostra l'albero fino a al_level: i blocchi a quella profondità o più si chiudono (1 = i figli diretti del blocco radice, 0 chiude la radice) |
of_search ( string as_query ) → long | Evidenzia ogni occorrenza (senza distinzione di maiuscole) e salta alla prima, aprendo ogni antenato chiuso; ue_search_result dice quante. Una richiesta vuota annulla la ricerca. La casella di ricerca si apre con la richiesta dentro e il focus sopra (la stessa di Ctrl+F): Invio passa alla successiva; con ib_search_enabled a false l'albero evidenzia soltanto |
of_search_next ( ) → long | Passa alla corrispondenza SUCCESSIVA (torna alla prima dopo l'ultima); ue_search_result riporta la nuova posizione |
of_search_prev ( ) → long | Passa alla corrispondenza PRECEDENTE (torna all'ultima prima della prima); ue_search_result riporta la nuova posizione |
of_clear_search ( ) → long | Annulla la ricerca: niente più evidenziazioni né corrispondenza corrente (of_match_count rende 0), la casella di ricerca si svuota e si chiude |
of_select_path ( string as_path ) → long | Seleziona e scorre fino alla riga a as_path SENZA sollevare un evento (l'app l'ha pilotata) |
of_selected_path ( ) → string | Il percorso di accesso della riga selezionata, letto DAL VIVO (b.c, d[0]) — ciò che un pulsante Copia copia. Vuoto se nulla è selezionato |
of_selected_value ( ) → string | Il valore JSON della riga selezionata quando è una FOGLIA (una stringa conserva le virgolette, pronta da incollare), letto DAL VIVO. Vuoto per un contenitore o senza selezione |
of_match_count ( ) → long | Rende quante corrispondenze ha trovato la ricerca corrente, letto DAL VIVO — il 12 di una barra di stato 3 / 12. 0 senza ricerca |
of_match_index ( ) → long | Rende la posizione (1-based) della corrispondenza corrente, letta DAL VIVO — il 3 di una barra di stato 3 / 12. 0 senza corrispondenza |
Eventi #
| Evento | Quando |
|---|---|
ue_node_clicked (string as_path) | L'utente ha cliccato un nodo: il suo percorso d'accesso puntato (lines.0.sku), da rileggere nei tuoi dati |
ue_selection_changed (string as_path) | La riga selezionata è cambiata da TASTIERA (frecce, Inizio/Fine) — un clic del mouse riporta ue_node_clicked |
ue_search_result (long al_count, long al_index) | Una ricerca è partita o si è spostata: al_count corrispondenze in tutto, la corrente è al_index (1-based, 0 se nessuna) — per un « 3 / 12 » |
ue_error (string as_message) | Il testo in is_json non è un JSON valido: il messaggio dice perché, l'albero resta vuoto |
Esempio #
Esplorare una risposta API #
if inv_rest.of_get("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
Buone pratiche #
- È un visualizzatore, non un editor: mostra il JSON, non lo cambia. Per leggere un valore, prendi il percorso da
ue_node_clickede recuperalo nei tuoi dati. - Un JSON grande si piega: prima
of_collapse_all, il lettore apre ciò che gli interessa — mille nodi aperti in una volta è illeggibile. - Un JSON non valido non rompe nulla:
ue_errorlo dice, l'albero resta vuoto. È il ritorno da mostrare, non un crash.
Ereditato dalla base comune #
Questi membri esistono su tutti i componenti visivi — non sono propri di questo. Sono descritti una sola volta, nei capitoli trasversali; questa tabella dice solo dove leggerli.
| Membri | Ruolo | Descritto in |
|---|---|---|
of_reset | Riportare il componente a zero | 3.6 Riportare un componente a zero: of_reset() |
of_register_shortcut · of_clear_shortcuts | Scorciatoie da tastiera del componente | 3.5 Le scorciatoie da tastiera |
of_is_created · of_is_ready · of_get_last_error | Se è nato, se è pronto, cosa è fallito | 3.7 Diagnostica |
of_save_as_png · of_save_as_jpg | Esportare il rendering in immagine | 3.8 Esportare il rendering come immagine |
of_set_redraw | Raggruppare le modifiche in un solo ridisegno | 3.10 Buone pratiche |
of_preload_icons | Icone mostrate senza ritardo | Visualizzazione istantanea: of_icon |
of_set_translation | Tradurre una dicitura del componente | 5.2 Adattare un'etichetta: of_set_translation |
of_focus_webview | Dare il focus al componente | 6.4 Tastiera e focus |
of_print · of_print_to_pdf | Stampare, o scrivere un PDF | 6.9 Stampare |
of_set_property · of_get_property · of_component_name | Pilotare una proprietà per nome | 3.1 Il motore delle proprietà |