tilesbox — u_pbt_tilesbox #

← Referência dos componentes · Índice do guia

Painel de mosaicos agrupados ao estilo de um ecrã inicial: quatro tamanhos de mosaico, cores, emblemas, mosaicos animados, grupos recolhíveis e reorganização com o rato.

▶ Ver ao vivo — Aplicação de demonstração, mosaico Tiles box: a pré-visualização, o código que o produz e esta página, lado a lado.

Em resumo #

Início rápido #

// event open da janela
n_pbt_tilesbox_group lnv_grp

// of_add_group devolve o handle do grupo: e nele que se penduram os mosaicos
lnv_grp = uo_tuiles.of_add_group(/*group_id*/ "gestion", /*title*/ "Gestão")

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*/ "Faturas",  /*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

O modelo: grupos e mosaicos #

O painel contém grupos, cada um com o seu título e o seu cabeçalho recolhível. Os mosaicos pertencem a um grupo: o respetivo identificador só é único dentro desse grupo. O acesso passa, portanto, sempre pelo caminho completo, e as adições vivem no handle do grupo.

// Caminho obrigatorio: grupo e depois mosaico
uo_tuiles.of_group("gestion").of_tile("factures").is_badge = "12"

Os eventos transportam igualmente o caminho completo (as_group seguido de as_id). Ver Base comum · Os items.

Propriedades #

Métodos #

Num grupo — n_pbt_tilesbox_group #

Num mosaico — n_pbt_tilesbox_tile #

Os ícones aceitam todas as formas reconhecidas pela biblioteca: caminho, mono:, tint:, recurso de DLL. Num mosaico grande, é preferível uma imagem nítida em alta definição ou um SVG.

Os quatro tamanhos #

Eventos #

Exemplos #

Tamanhos misturados num mesmo grupo #

n_pbt_tilesbox_group lnv_grp

uo_tuiles.of_clear()
lnv_grp = uo_tuiles.of_add_group(/*group_id*/ "accueil", /*title*/ "Início")

lnv_grp.of_add_tile(/*id*/ "tableau", /*label*/ "Painel de controlo", /*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*/ "Ajuda",              /*icon_file*/ "mono:img\help.svg",   /*size*/ "small")

Emblema, cor e mosaico animado #

n_pbt_tilesbox_tile lnv_tuile

// Um emblema assinala um numero de elementos em espera
uo_tuiles.of_group("accueil").of_tile("clients").is_badge = String(ll_nouveaux)

// Vermelho quando o atraso se torna critico, cor do tema 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

// Uma cor propria destaca um mosaico : fundo, texto e aquilo em que cada um
// se torna sob o ponteiro
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 face adicionada desfila a sua vez no 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 reuniões hoje")
lnv_tuile.of_add_live_item(/*text*/ "Reunião de equipa às 14h00")
lnv_tuile.of_add_live_item(/*text*/ "2 lembretes em atraso")

Um texto fixo em vez de um desfile #

// is_live_text coloca UM texto permanente no mosaico (formatacao com etiquetas aceite)
uo_tuiles.of_group("accueil").of_tile("tableau").is_live_text = "[b]48[/b] encomendas do dia"

Grupos recolhíveis #

n_pbt_tilesbox_group lnv_admin

lnv_admin = uo_tuiles.of_add_group(/*group_id*/ "admin", /*title*/ "Administração")
lnv_admin.of_add_tile(/*id*/ "users",  /*label*/ "Utilizadores", /*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 comeca recolhido: o utilizador abre-o se precisar
lnv_admin.ib_collapsed = true

// Um grupo inteiro pode tambem ser esbatido consoante os direitos
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("Abertura do painel de administração")

Um painel de grupo único, sem cabeçalho #

// Um so grupo nao tem nada a nomear: o seu cabecalho apenas consome altura.
// Sem cabecalho, tambem deixa de haver galao: os mosaicos ficam sempre visiveis.
uo_tuiles.ib_show_group_headers = false
uo_tuiles.of_add_group(/*group_id*/ "tout", /*title*/ "")

Deslocar um mosaico entre dois grupos #

Com ib_reorderable = true, o utilizador arrasta um mosaico para onde quiser, incluindo de um grupo para outro. O evento ue_tile_moved fornece os dois grupos e a nova posição.

uo_tuiles.ib_reorderable = true    // false por omissao : e preciso pedir

// event ue_tile_moved de uo_tuiles
// as_group = grupo de origem, as_to_group = grupo de destino, al_index = posicao
if as_group <> as_to_group then
    of_tracer("Mosaico " + as_id + " deslocado de " + as_group + " para " + as_to_group)
end if
uo_tuiles.of_get_layout()    // solicitar a disposicao para a conservar

// event ue_layout_changed de uo_tuiles: conservar a disposicao escolhida
is_disposition = as_layout_json

// Na abertura seguinte: repor o ecra tal como o utilizador o tinha arrumado
if is_disposition <> "" then uo_tuiles.of_set_layout(is_disposition)

Para fixar o ecrã, basta desativar a reorganização:

uo_tuiles.ib_reorderable = false

Reorganizar a partir do código #

// Colocar o mosaico "aide" no inicio do seu grupo (posicoes contadas a partir de 0)
uo_tuiles.of_move_tile(/*group*/ "accueil", /*id*/ "aide", /*index*/ 0)

// Inserir um novo mosaico na segunda posicao
uo_tuiles.of_insert_tile(/*group*/ "accueil", /*id*/ "devis", /*text*/ "Orçamentos", /*index*/ 1)

// Retirar um mosaico sem mexer no resto
uo_tuiles.of_remove_tile(/*group*/ "accueil", /*id*/ "aide")

Reagir ao clique com o botão direito #

// event ue_tile_context de uo_tuiles: (as_group, as_id)
// Reter o mosaico visado e abrir em seguida o seu proprio menu contextual
is_groupe_vise = as_group
is_tuile_visee = as_id
of_ouvrir_menu_tuile(PointerX(), PointerY())

Boas práticas #

• Um único mosaico large por ecrã é suficiente: é o ponto de entrada principal, o resto deve manter-se legível.
• Os mosaicos small não apresentam a sua etiqueta — o tooltip do item deve ser preenchido sistematicamente.
• il_back_color deve ser reservado aos mosaicos que precisam de sobressair: para além de duas ou três cores, o ecrã perde a sua hierarquia. E se puser um fundo claro, ponha também il_text_color — o texto do tema não é garantidamente legível por cima.
• É preferível of_add_live_item (desfile) a is_live_text (texto fixo) quando há várias informações a transmitir no mesmo mosaico.
• Se a reorganização for deixada ativa, a disposição deve ser conservada através de of_get_layout / ue_layout_changed e of_set_layout reexecutado na abertura.
• Devem utilizar-se ib_visible e ib_enabled (grupo ou mosaico) para adaptar o painel aos direitos do utilizador, em vez de o reconstruir.
• Quando falta espaço para mosaicos, é preferível a navegação lateral compacta da listbar; para as ações frequentes, a toolbar.

← Referência dos componentes · Índice do guia