tilesbox — u_pbt_tilesbox #

← Referencia de componentes · Índice de la guía

Panel de mosaicos agrupados al estilo de una pantalla de inicio: cuatro tamaños de mosaico, colores, distintivos, mosaicos animados, grupos plegables y reorganización con el ratón.

▶ Verlo en vivo — Aplicación de demostración, mosaico Tiles box: la vista previa, el código que lo genera y esta página, uno al lado del otro.

De un vistazo #

Inicio rápido #

// event open de la ventana
n_pbt_tilesbox_group lnv_grp

// of_add_group devuelve el handle del grupo: en el se enganchan sus mosaicos
lnv_grp = uo_tuiles.of_add_group(/*group_id*/ "gestion", /*title*/ "Gestión")

lnv_grp.of_add_tile(/*id*/ "clients",   /*label*/ "Clientes",   /*icon_file*/ "mono:img\clients.svg",   /*size*/ "medium")
lnv_grp.of_add_tile(/*id*/ "factures",  /*label*/ "Facturas",  /*icon_file*/ "mono:img\factures.svg",  /*size*/ "medium")
lnv_grp.of_add_tile(/*id*/ "stock",     /*label*/ "Almacén",     /*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

El modelo: grupos y mosaicos #

El panel contiene grupos, cada uno con su título y su encabezado plegable. Los mosaicos pertenecen a un grupo: su identificador solo es único dentro de ese grupo. El acceso pasa por tanto siempre por la ruta completa, y las adiciones viven en el handle del grupo.

// Ruta obligatoria: grupo y luego mosaico
uo_tuiles.of_group("gestion").of_tile("factures").is_badge = "12"

Los eventos también llevan la ruta completa (as_group y luego as_id). Véase Base común · Los items.

Propiedades #

Métodos #

En un grupo — n_pbt_tilesbox_group #

En un mosaico — n_pbt_tilesbox_tile #

Los iconos aceptan todas las formas reconocidas por la biblioteca: ruta, mono:, tint:, recurso de DLL. En un mosaico grande, es preferible una imagen nítida en alta definición o un SVG.

Los cuatro tamaños #

Eventos #

Ejemplos #

Tamaños mezclados en un mismo grupo #

n_pbt_tilesbox_group lnv_grp

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

lnv_grp.of_add_tile(/*id*/ "tableau", /*label*/ "Cuadro de mando", /*icon_file*/ "mono:img\chart.svg",  /*size*/ "large")
lnv_grp.of_add_tile(/*id*/ "clients", /*label*/ "Clientes",         /*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*/ "Ayuda",            /*icon_file*/ "mono:img\help.svg",   /*size*/ "small")

Distintivo, color y mosaico animado #

n_pbt_tilesbox_tile lnv_tuile

// Un distintivo senala un numero de elementos pendientes
uo_tuiles.of_group("accueil").of_tile("clients").is_badge = String(ll_nouveaux)

// Rojo cuando el retraso pasa a ser critico, color del tema en caso contrario (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

// Un color propio destaca un mosaico : fondo, texto y lo que cada uno
// pasa a ser bajo el puntero
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)

// Mosaico ANIMADO: cada cara anadida desfila por turno sobre el mosaico
lnv_tuile = uo_tuiles.of_group("accueil").of_tile("agenda")
lnv_tuile.of_clear_live_items()
lnv_tuile.of_add_live_item(/*text*/ "3 citas hoy")
lnv_tuile.of_add_live_item(/*text*/ "Reunión de equipo a las 14:00")
lnv_tuile.of_add_live_item(/*text*/ "2 avisos con retraso")

Un texto fijo en lugar de un desplazamiento #

// is_live_text pone UN texto permanente sobre el mosaico (se acepta texto enriquecido con etiquetas)
uo_tuiles.of_group("accueil").of_tile("tableau").is_live_text = "[b]48[/b] pedidos del día"

Grupos plegables #

n_pbt_tilesbox_group lnv_admin

lnv_admin = uo_tuiles.of_add_group(/*group_id*/ "admin", /*title*/ "Administración")
lnv_admin.of_add_tile(/*id*/ "users",  /*label*/ "Usuarios", /*icon_file*/ "mono:img\users.svg", /*size*/ "medium")
lnv_admin.of_add_tile(/*id*/ "params", /*label*/ "Parámetros",   /*icon_file*/ "mono:img\gear.svg",  /*size*/ "medium")

// Este grupo arranca plegado: el usuario lo abre si lo necesita
lnv_admin.ib_collapsed = true

// Un grupo entero tambien puede atenuarse segun los permisos
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("Apertura del panel de administración")

Un panel de grupo único, sin encabezado #

// Un solo grupo no tiene nada que nombrar : su encabezado solo consume altura.
// Sin encabezado, tampoco hay galon : los mosaicos permanecen siempre visibles.
uo_tuiles.ib_show_group_headers = false
uo_tuiles.of_add_group(/*group_id*/ "tout", /*title*/ "")

Mover un mosaico entre dos grupos #

Con ib_reorderable = true, el usuario arrastra un mosaico a donde quiere, incluso de un grupo a otro. El evento ue_tile_moved entrega los dos grupos y la nueva posición.

uo_tuiles.ib_reorderable = true    // false por defecto : hay que pedirlo

// event ue_tile_moved de uo_tuiles
// as_group = grupo de origen, as_to_group = grupo de destino, al_index = posicion
if as_group <> as_to_group then
    of_tracer("Mosaico " + as_id + " movido de " + as_group + " a " + as_to_group)
end if
uo_tuiles.of_get_layout()    // solicitar la disposicion para conservarla

// event ue_layout_changed de uo_tuiles: conservar la disposicion elegida
is_disposition = as_layout_json

// En la siguiente apertura: restituir la pantalla tal como el usuario la habia ordenado
if is_disposition <> "" then uo_tuiles.of_set_layout(is_disposition)

Para fijar la pantalla, basta con desactivar la reorganización:

uo_tuiles.ib_reorderable = false

Reorganizar desde el código #

// Colocar el mosaico "aide" al principio de su grupo (posiciones contadas a partir de 0)
uo_tuiles.of_move_tile(/*group*/ "accueil", /*id*/ "aide", /*index*/ 0)

// Insertar un nuevo mosaico en segunda posicion
uo_tuiles.of_insert_tile(/*group*/ "accueil", /*id*/ "devis", /*text*/ "Presupuestos", /*index*/ 1)

// Retirar un mosaico sin tocar el resto
uo_tuiles.of_remove_tile(/*group*/ "accueil", /*id*/ "aide")

Reaccionar al clic derecho #

// event ue_tile_context de uo_tuiles: (as_group, as_id)
// Retener el mosaico afectado y abrir despues su propio menu contextual
is_groupe_vise = as_group
is_tuile_visee = as_id
of_ouvrir_menu_tuile(PointerX(), PointerY())

Buenas prácticas #

• Basta con un mosaico large por pantalla: es el punto de entrada principal, el resto debe seguir siendo legible.
• Los mosaicos small no muestran su etiqueta — rellene sistemáticamente el tooltip del item.
• Reserve il_back_color para los mosaicos que deben destacar: más allá de dos o tres colores, la pantalla pierde su jerarquía. Y si pone un fondo claro, ponga también il_text_color — el texto del tema no está garantizado legible encima.
• Prefiera of_add_live_item (desplazamiento) a is_live_text (texto fijo) cuando tenga varias informaciones que transmitir en el mismo mosaico.
• Si deja activa la reorganización, conserve la disposición mediante of_get_layout / ue_layout_changed y vuelva a aplicar of_set_layout en la apertura.
• Utilice ib_visible e ib_enabled (grupo o mosaico) para adaptarlo a los permisos del usuario, en lugar de reconstruir el panel.
• Cuando falte espacio para los mosaicos, prefiera la navegación lateral compacta de listbar; para las acciones frecuentes, la toolbar.

← Referencia de componentes · Índice de la guía