jsontree — `u_pbt_jsontree` #

← Référence des composants · Sommaire du guide

jsontree affiche une valeur JSON comme un arbre repliable, coloré par type : un écran de configuration, une réponse d'API, un débogage d'intégration. Vous posez le texte JSON dans is_json, le composant le montre ; un clic sur un nœud rapporte son chemin (ue_node_clicked), un JSON invalide lève ue_error. Il ne modifie rien : c'est un VISUALISEUR.

▶ Le voir en vrai — Application de démonstration, tuile JSON tree, avec le code et cette page côte à côte.

En bref #

Userobject	`u_pbt_jsontree`
Entrée	Le texte JSON, dans `is_json` (une chaîne)
Plier / déplier	Chaque conteneur au chevron, ou tout d'un coup (`of_expand_all`, `of_collapse_all`)
Retour	Un clic sur un nœud donne son chemin (`ue_node_clicked`) ; un JSON invalide lève `ue_error`

Démarrage rapide #

// 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

Propriétés #

Propriété	Type	Défaut	Description
`is_json`	string	`""`	Le texte JSON à montrer. Un objet, un tableau, une valeur ; lu et affiché comme un arbre. Vide efface l'arbre ; un JSON invalide lève `ue_error` et n'affiche rien
`ib_wrap`	boolean	`true`	Les lignes longues reviennent à la ligne (`true`, par défaut) ou restent sur une ligne avec une barre horizontale (`false`) — un rendu d'éditeur de code
`ib_search_enabled`	boolean	`true`	Ctrl+F dans l'arbre ouvre une zone de recherche — la même recherche que `of_search` : taper surligne, Entrée suivant, Maj+Entrée précédent, Échap ferme. `false` laisse le raccourci à une application qui cherche depuis sa propre zone
`is_theme_style`	string	`fluent`	Style visuel du composant (constantes `THEME_STYLE_*`)
`is_theme_mode`	string	`light`	Variante claire ou sombre (constantes `THEME_MODE_*`)
`il_theme_accent`	long	`-1`	Couleur d'accent de ce composant (`-1` = accent du thème)
`is_tooltip`	string	`""`	Info-bulle simple affichée au survol du composant
`is_super_tooltip_title`	string	`""`	Titre de l'info-bulle enrichie (prend le pas sur `is_tooltip`)
`is_super_tooltip_text`	string	`""`	Texte de l'info-bulle enrichie (balisage riche accepté)
`is_super_tooltip_image`	string	`""`	Image de l'info-bulle enrichie

Méthodes #

Méthode	Description
`of_expand_all ( )` → long	Déplie tous les conteneurs. Rend `0`, `-1` si le composant n'est pas créé
`of_collapse_all ( )` → long	Replie tous les conteneurs imbriqués (le niveau du haut reste visible). Rend `0`, `-1` si le composant n'est pas créé
`of_clear ( )` → long	Vide l'arbre (comme `is_json = ""`). Rend `0`, `-1` si le composant n'est pas créé
`of_expand_to_level ( long al_level )` → long	Montre l'arbre jusqu'à `al_level` : les blocs à cette profondeur ou plus se replient (`1` = les enfants directs du bloc racine, `0` replie la racine)
`of_search ( string as_query )` → long	Surligne chaque occurrence (sans casse) et saute à la première, ouvrant tout ancêtre replié ; `ue_search_result` dit combien. Une requête vide efface la recherche. La zone de recherche s'ouvre avec la requête dedans et le focus dessus (la même que Ctrl+F) : Entrée passe à la suivante ; avec `ib_search_enabled` à `false`, l'arbre surligne seulement
`of_search_next ( )` → long	Passe à la correspondance SUIVANTE (revient à la première après la dernière) ; `ue_search_result` donne la nouvelle position. Rend `0`, ou un code négatif
`of_search_prev ( )` → long	Passe à la correspondance PRÉCÉDENTE (revient à la dernière avant la première) ; `ue_search_result` donne la nouvelle position. Rend `0`, ou un code négatif
`of_clear_search ( )` → long	Efface la recherche : plus de surlignage ni de correspondance courante (`of_match_count` rend 0), la zone de recherche se vide et se ferme. Rend `0`, ou un code négatif
`of_select_path ( string as_path )` → long	Sélectionne et défile jusqu'à la ligne à `as_path` SANS lever d'événement (c'est l'appli qui l'a pilotée)
`of_selected_path ( )` → string	Le chemin d'accès de la ligne sélectionnée, lu EN DIRECT (`b.c`, `d[0]`) — ce qu'un bouton Copier copie. Vide si rien n'est sélectionné
`of_selected_value ( )` → string	La valeur JSON de la ligne sélectionnée quand c'est une FEUILLE (une chaîne garde ses guillemets, prête à coller), lue EN DIRECT. Vide pour un conteneur ou sans sélection
`of_match_count ( )` → long	Rend le nombre de correspondances de la recherche courante, lu EN DIRECT — le `12` d'une barre d'état `3 / 12`. `0` sans recherche
`of_match_index ( )` → long	Rend la position (1-basée) de la correspondance courante, lue EN DIRECT — le `3` d'une barre d'état `3 / 12`. `0` sans correspondance

Événements #

Événement	Quand
`ue_node_clicked (string as_path)`	L'utilisateur a cliqué un nœud : son chemin d'accès pointé (`lines.0.sku`), à relire dans vos données
`ue_selection_changed (string as_path)`	La ligne sélectionnée a changé au CLAVIER (flèches, Début/Fin) — un clic souris rapporte `ue_node_clicked`
`ue_search_result (long al_count, long al_index)`	Une recherche a démarré ou avancé : `al_count` correspondances en tout, la courante est `al_index` (1-basé, 0 si aucune) — de quoi afficher « 3 / 12 »
`ue_error (string as_message)`	Le texte de `is_json` n'est pas un JSON valide : le message dit pourquoi, l'arbre reste vide

Exemple #

Explorer la réponse d'une 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

Bonnes pratiques #

C'est un visualiseur, pas un éditeur : il montre le JSON, il ne le change pas. Pour lire une valeur, prenez le chemin de ue_node_clicked et allez la chercher dans vos propres données.
Un gros JSON se replie : of_collapse_all d'abord, l'utilisateur ouvre ce qui l'intéresse — un millier de nœuds ouverts d'un coup est illisible.
Un JSON invalide ne casse rien : ue_error le dit, l'arbre reste vide. C'est le retour à montrer, pas un plantage.

Hérité du socle commun #

Ces membres existent sur tous les composants visuels — ils ne sont pas propres à celui-ci. Ils sont détaillés une seule fois, dans les chapitres transverses ; cette table dit seulement où les lire.

Membres	Rôle	Détaillé dans
`of_reset`	Remettre le composant à zéro	3.6 Remettre un composant à zéro : `of_reset()`
`of_register_shortcut` · `of_clear_shortcuts`	Raccourcis clavier du composant	3.5 Les raccourcis clavier
`of_is_created` · `of_is_ready` · `of_get_last_error`	S'il est né, s'il est prêt, ce qui a échoué	3.7 Diagnostic
`of_save_as_png` · `of_save_as_jpg`	Exporter le rendu en image	3.8 Exporter le rendu en image
`of_set_redraw`	Grouper les modifications en un seul repaint	3.10 Bonnes pratiques
`of_preload_icons`	Icônes affichées sans délai	Affichage instantané : `of_icon`
`of_set_translation`	Traduire un libellé du composant	5.2 Adapter un libellé : `of_set_translation`
`of_focus_webview`	Donner le focus au composant	6.4 Clavier et focus
`of_print` · `of_print_to_pdf`	Imprimer, ou écrire un PDF	6.9 Imprimer
`of_set_property` · `of_get_property` · `of_component_name`	Piloter une propriété par son nom	3.1 Le moteur de propriétés