tilesbox — u_pbt_tilesbox #

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

Panneau de tuiles groupées façon écran d'accueil : quatre tailles de tuile, couleurs, pastilles, tuiles animées, groupes repliables et réorganisation à la souris.

▶ Le voir en vrai — Application de démonstration, tuile Tiles box : l'aperçu, le code qui le produit et cette page, côte à côte.

En bref #

Démarrage rapide #

// event open de la fenetre
n_pbt_tilesbox_group lnv_grp

// of_add_group rend le handle du groupe : on y accroche ses tuiles
lnv_grp = uo_tuiles.of_add_group(/*group_id*/ "gestion", /*title*/ "Gestion")

lnv_grp.of_add_tile(/*id*/ "clients",   /*label*/ "Clients",   /*icon_file*/ "mono:img\clients.svg",   /*size*/ "medium")
lnv_grp.of_add_tile(/*id*/ "factures",  /*label*/ "Factures",  /*icon_file*/ "mono:img\factures.svg",  /*size*/ "medium")
lnv_grp.of_add_tile(/*id*/ "stock",     /*label*/ "Stock",     /*icon_file*/ "mono:img\stock.svg",     /*size*/ "small")

// event ue_tile_clicked de uo_tuiles : (string as_group, string as_id)
choose case as_group + "/" + as_id
    case "gestion/clients"  ; open(w_clients)
    case "gestion/factures" ; open(w_factures)
    case "gestion/stock"    ; open(w_stock)
end choose

Le modèle : groupes et tuiles #

Le panneau contient des groupes, chacun avec son titre et son entête repliable. Les tuiles appartiennent à un groupe : leur identifiant n'est unique qu'à l'intérieur de ce groupe. L'accès passe donc toujours par le chemin complet, et les ajouts vivent sur le handle du groupe.

// Chemin obligatoire : groupe puis tuile
uo_tuiles.of_group("gestion").of_tile("factures").is_badge = "12"

Les events portent eux aussi le chemin complet (as_group puis as_id). Voir Socle commun · Les items.

Propriétés #

Méthodes #

Sur un groupe — n_pbt_tilesbox_group #

Sur une tuile — n_pbt_tilesbox_tile #

Les icônes acceptent toutes les formes reconnues par la bibliothèque : chemin, mono:, tint:, ressource de DLL. Sur une grande tuile, préférez une image nette en haute définition ou un SVG.

Les quatre tailles #

Événements #

Exemples #

Tailles mélangées dans un même groupe #

n_pbt_tilesbox_group lnv_grp

uo_tuiles.of_clear()
lnv_grp = uo_tuiles.of_add_group(/*group_id*/ "accueil", /*title*/ "Accueil")

lnv_grp.of_add_tile(/*id*/ "tableau", /*label*/ "Tableau de bord", /*icon_file*/ "mono:img\chart.svg",  /*size*/ "large")
lnv_grp.of_add_tile(/*id*/ "clients", /*label*/ "Clients",         /*icon_file*/ "mono:img\users.svg",  /*size*/ "medium")
lnv_grp.of_add_tile(/*id*/ "agenda",  /*label*/ "Agenda",          /*icon_file*/ "mono:img\cal.svg",    /*size*/ "wide")
lnv_grp.of_add_tile(/*id*/ "aide",    /*label*/ "Aide",            /*icon_file*/ "mono:img\help.svg",   /*size*/ "small")

Pastille, couleur et tuile animée #

n_pbt_tilesbox_tile lnv_tuile

// Une pastille signale un nombre d'elements en attente
uo_tuiles.of_group("accueil").of_tile("clients").is_badge = String(ll_nouveaux)

// Rouge quand le retard devient critique, couleur du theme sinon (0)
if ll_nouveaux > 50 then
    uo_tuiles.of_group("accueil").of_tile("clients").il_badge_color = RGB(200, 30, 30)
else
    uo_tuiles.of_group("accueil").of_tile("clients").il_badge_color = 0
end if

// Une couleur propre met une tuile en avant : fond, texte, et ce que
// chacun devient sous le pointeur
lnv_tuile = uo_tuiles.of_group("accueil").of_tile("tableau")
lnv_tuile.il_back_color = RGB(0, 103, 192)
lnv_tuile.il_back_color_hover = RGB(0, 80, 150)
lnv_tuile.il_text_color = RGB(255, 255, 255)

// Tuile ANIMEE : chaque face ajoutee defile a son tour sur la tuile
lnv_tuile = uo_tuiles.of_group("accueil").of_tile("agenda")
lnv_tuile.of_clear_live_items()
lnv_tuile.of_add_live_item(/*text*/ "3 rendez-vous aujourd'hui")
lnv_tuile.of_add_live_item(/*text*/ "Reunion equipe a 14h00")
lnv_tuile.of_add_live_item(/*text*/ "2 relances en retard")

Un texte fixe plutôt qu'un défilement #

// is_live_text pose UN texte permanent sur la tuile (balisage riche accepte)
uo_tuiles.of_group("accueil").of_tile("tableau").is_live_text = "[b]48[/b] commandes du jour"

Groupes repliables #

n_pbt_tilesbox_group lnv_admin

lnv_admin = uo_tuiles.of_add_group(/*group_id*/ "admin", /*title*/ "Administration")
lnv_admin.of_add_tile(/*id*/ "users",  /*label*/ "Utilisateurs", /*icon_file*/ "mono:img\users.svg", /*size*/ "medium")
lnv_admin.of_add_tile(/*id*/ "params", /*label*/ "Parametres",   /*icon_file*/ "mono:img\gear.svg",  /*size*/ "medium")

// Ce groupe demarre replie : l'utilisateur l'ouvre s'il en a besoin
lnv_admin.ib_collapsed = true

// Un groupe entier peut aussi etre grise selon les droits
lnv_admin.ib_enabled = (is_profil = "ADMIN")

// event ue_group_toggled de uo_tuiles
if as_group = "admin" and not ab_collapsed then of_tracer("Ouverture du volet administration")

Un panneau à groupe unique, sans entête #

// Un seul groupe n'a rien a nommer : son entete ne fait que manger de la hauteur.
// Sans entete, plus de chevron non plus : les tuiles restent toujours visibles.
uo_tuiles.ib_show_group_headers = false
uo_tuiles.of_add_group(/*group_id*/ "tout", /*title*/ "")

Déplacer une tuile entre deux groupes #

Avec ib_reorderable = true, l'utilisateur fait glisser une tuile où il veut, y compris d'un groupe vers un autre. L'event ue_tile_moved livre les deux groupes et la nouvelle position.

uo_tuiles.ib_reorderable = true    // faux par defaut : a demander

// event ue_tile_moved de uo_tuiles
// as_group = groupe d'origine, as_to_group = groupe d'arrivee, al_index = position
if as_group <> as_to_group then
    of_tracer("Tuile " + as_id + " deplacee de " + as_group + " vers " + as_to_group)
end if
uo_tuiles.of_get_layout()    // demander la disposition pour la conserver

// event ue_layout_changed de uo_tuiles : conserver la disposition choisie
is_disposition = as_layout_json

// A l'ouverture suivante : restituer l'ecran tel que l'utilisateur l'avait range
if is_disposition <> "" then uo_tuiles.of_set_layout(is_disposition)

Pour figer l'écran, il suffit de couper la réorganisation :

uo_tuiles.ib_reorderable = false

Réorganiser depuis le code #

// Placer la tuile "aide" en tete de son groupe (positions comptees a partir de 0)
uo_tuiles.of_move_tile(/*group*/ "accueil", /*id*/ "aide", /*index*/ 0)

// Inserer une nouvelle tuile en deuxieme position
uo_tuiles.of_insert_tile(/*group*/ "accueil", /*id*/ "devis", /*text*/ "Devis", /*index*/ 1)

// Retirer une tuile sans toucher au reste
uo_tuiles.of_remove_tile(/*group*/ "accueil", /*id*/ "aide")

Réagir au clic droit #

// event ue_tile_context de uo_tuiles : (as_group, as_id)
// Retenir la tuile visee, puis ouvrir votre propre menu contextuel
is_groupe_vise = as_group
is_tuile_visee = as_id
of_ouvrir_menu_tuile(PointerX(), PointerY())

Bonnes pratiques #

• Une tuile large par écran suffit : c'est le point d'entrée principal, le reste doit rester lisible.
• Les tuiles small n'affichent pas leur libellé — renseignez systématiquement l'info-bulle de l'item.
• Réservez il_back_color aux tuiles qui doivent trancher : au-delà de deux ou trois couleurs, l'écran perd sa hiérarchie. Et si vous posez un fond clair, posez il_text_color avec — le texte du thème n'est pas garanti lisible dessus.
• Préférez of_add_live_item (défilement) à is_live_text (texte fixe) quand vous avez plusieurs informations à faire passer sur la même tuile.
• Si vous laissez la réorganisation active, conservez la disposition via of_get_layout / ue_layout_changed et rejouez of_set_layout à l'ouverture.
• Utilisez ib_visible et ib_enabled (groupe ou tuile) pour l'adapter aux droits de l'utilisateur, plutôt que de reconstruire le panneau.
• Quand l'espace manque pour des tuiles, préférez la navigation latérale compacte du listbar ; pour les actions fréquentes, la toolbar.

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