tab — u_pbt_tab #

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

Pestañas modernas que alojan controles reales de PowerBuilder: banda reposicionable, iconos por pestaña, pestañas que se pueden cerrar, reordenación con el ratón.

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

De un vistazo #

El argumento clave: una página no es una maqueta HTML, es un dragobject de PowerBuilder: un userobject, una DataWindow, un grupo de controles o incluso otro componente PBToolboxAI. El componente se encarga de la colocación, del redimensionamiento y de mostrar u ocultar al cambiar de pestaña. Consulte Alojar controles reales de PowerBuilder.

Inicio rápido #

// event open de la ventana : cada pagina es un control PB ya puesto en la ventana
uo_tabs.of_add_page(/*key*/ "customers",  /*title*/ "Clientes",  /*page*/ uo_page_customers)
uo_tabs.of_add_page(/*key*/ "invoices", /*title*/ "Facturas", /*page*/ uo_page_invoices, /*closable*/ true)

// Un icono por pestana, puesto sobre el handle de la pagina
uo_tabs.of_page(/*key*/ "customers").is_icon  = "mono:img\customers.svg"
uo_tabs.of_page(/*key*/ "invoices").is_icon = "mono:img\invoice.svg"

// Muestra la primera pestana
uo_tabs.of_select_page(/*key*/ "customers")

// event ue_selection_changed de uo_tabs : (string as_from_key, string as_key)
of_load_page(as_key)

Propiedades #

Propiedades de una página — n_pbt_tab_page #

Obtenidas mediante of_page(id), se modifican en caliente, sin reconstruir la banda.

Métodos #

of_add_page devuelve un código negativo si el identificador está vacío, ya se utiliza, o si el control pasado no es válido o ya está alojado.

Cuando hay demasiadas pestañas — se reducen para caber en la banda, pero nunca por debajo de un ancho legible: el icono y la cruz de cierre ocupan su sitio además del título, nunca en su lugar. Las que ya no caben salen de la banda, y en su extremo aparece un botón ···: abre la lista de todas las pestañas visibles, con la activa marcada, y la elección cambia a ella. La pestaña activa siempre permanece visible. La banda no se desplaza — ese botón es el camino hacia las pestañas fuera del marco. Nada que programar, el comportamiento es automático.

Teclado y ratón — Ctrl+Tab y Ctrl+Av Pág pasan a la pestaña siguiente, Ctrl+Mayús+Tab y Ctrl+Re Pág a la anterior: solo cuentan las pestañas que pueden activarse (las ocultas y las atenuadas se saltan), y el recorrido vuelve a empezar. Estas teclas responden cuando el teclado está en la banda de pestañas o en una página que aloja — un control PowerBuilder de la página igual que otro componente colocado en ella; desde un control situado fuera del tab, se quedan en la ventana. Es un gesto del usuario: se plantea ue_selection_changing si ib_veto_selection está activo, y luego sigue ue_selection_changed. Un clic central en una pestaña que se puede cerrar la cierra, exactamente como su aspa: la misma pregunta ue_tab_closing si ib_veto_close está activo, y luego ue_tab_closed; en una pestaña atenuada o que no se puede cerrar no hace nada. Nada que programar.

Eventos #

Ejemplos #

Un archivador de páginas de negocio #

// event open : los userobjects de pagina ya estan puestos en la ventana
uo_tabs.of_set_redraw(/*on*/ false)

// Una pestana por cada userobject de pagina
uo_tabs.of_add_page(/*key*/ "identity", /*title*/ "Identidad",  /*page*/ uo_identity)
uo_tabs.of_add_page(/*key*/ "addresses", /*title*/ "Direcciones",  /*page*/ uo_addresses)
uo_tabs.of_add_page(/*key*/ "accounting",   /*title*/ "Contabilidad", /*page*/ uo_accounting)

// Un icono por pestana, puesto en el handle de la pagina
uo_tabs.of_page(/*key*/ "identity").is_icon = "mono:img\user.svg"
uo_tabs.of_page(/*key*/ "addresses").is_icon = "mono:img\map.svg"
uo_tabs.of_page(/*key*/ "accounting").is_icon   = "mono:img\euro.svg"

// Un solo renderizado para todo y luego se muestra la primera pestana
uo_tabs.of_set_redraw(/*on*/ true)
uo_tabs.of_select_page(/*key*/ "identity")

Documentos que se pueden cerrar, abiertos bajo demanda #

// Abrir un documento en una nueva pestana que se pueda cerrar
uo_tabs.of_add_page(/*key*/ ls_key, /*title*/ ls_label, /*page*/ uo_editor, /*closable*/ true, /*icon*/ "mono:img\doc.svg")
uo_tabs.of_select_page(/*key*/ ls_key)

// event ue_tab_closed de uo_tabs : (string as_key)
// La pestana ya se ha retirado ; solo queda liberar sus datos de negocio.
of_free_document(as_key)

Reordenación con el ratón #

// The user may drag a tab to a new place
uo_tabs.ib_reorderable = true

// event ue_tab_reordered de uo_tabs : (string as_key, integer ai_index)
// ai_index = nueva posicion, a partir de 1 (como of_move_page) : se memoriza el orden elegido.
of_save_order(as_key, ai_index)

Banda vertical #

// Banda de pestanas en el lado izquierdo, util cuando las etiquetas son largas
uo_tabs.is_position = uo_tabs.POSITION_START

Atenuar u ocultar una pestaña según los permisos #

// El camino pasa siempre por el handle de la pagina
uo_tabs.of_page(/*key*/ "accounting").ib_enabled = of_is_allowed("accounting")
uo_tabs.of_page(/*key*/ "audit").ib_visible  = gb_expert_mode

Reaccionar a la selección #

// event ue_selection_changed de uo_tabs : (string as_from_key, string as_key)
choose case as_key
    case "identity" ; uo_identity.of_refresh()
    case "addresses" ; uo_addresses.of_refresh()
    case "accounting"   ; uo_accounting.of_refresh()
end choose

Rechazar un cambio de pestaña o un cierre #

// Las dos preguntas hay que ACTIVARLAS: sin estas lineas el componente no
// pregunta nada y cambia de pagina o cierra de inmediato.
uo_tabs.ib_veto_selection = true
uo_tabs.ib_veto_close     = true

// event ue_selection_changing de uo_tabs : (string as_from_key, string as_key)
// Devolver FALSE mantiene al usuario en la pagina que abandona.
if of_page_modified(as_from_key) then
    if MessageBox("Modificaciones", "¿Salir sin guardar?", Question!, YesNo!) = 2 then
        return false
    end if
end if
return true

// event ue_tab_closing de uo_tabs : (string as_key)
// Devolver FALSE mantiene abiertos la pestana y su pagina alojada.
return not of_page_modified(as_key)

Volver a empezar con una banda vacía #

// of_reset devuelve CADA pagina alojada a su ventana de origen antes de vaciar
uo_tabs.of_reset()
uo_tabs.of_add_page(/*key*/ "home", /*title*/ "Inicio", /*page*/ uo_home)

Buenas prácticas #

• Los controles alojados deben existir antes de la llamada: colóquelos en la ventana en fase de diseño, el componente se encarga de ocultarlos y recolocarlos.
• Cargue las páginas una sola vez en el open y después controle únicamente la selección: es más rápido que añadir y retirar páginas continuamente.
• Llame a of_preload_icons al arrancar si sus pestañas llevan iconos: de lo contrario, la primera apertura de una pestaña oculta muestra un breve retardo antes del icono.
• Las dos preguntas se plantean de forma predeterminada: un evento dejado vacío autoriza siempre la acción, no tiene nada que hacer. Desactívelas con ib_veto_selection / ib_veto_close a false si arbitrar no le sirve, porque cada pregunta cuesta una ida y vuelta hasta PowerBuilder.
• Un control alojado es una ventana nativa: se dibuja por encima de la capa web. Ningún efecto visual del componente puede pasar por delante de él.
• No olvide of_reset() antes de reconstruir una banda: sin él, reutilizar un identificador de página falla y los controles anteriores permanecen visibles.
• Para zonas redimensionables y desacoplables en lugar de páginas exclusivas, prefiera dockcontainer.
• Con el teclado, la barra de pestañas sigue su eje: Izquierda/Derecha (invertidas en escritura de derecha a izquierda), Arriba/Abajo en las posiciones start/end, Inicio/Fin, Intro o Espacio para activar, Supr para cerrar una pestaña que se puede cerrar. Las pestañas desactivadas y las que salen de la barra se saltan.

Heredado de la base común #

Estos miembros existen en todos los componentes visuales — no son propios de este. Se detallan una sola vez, en los capítulos transversales; esta tabla solo dice dónde leerlos.

Dos ayudas no se heredan: of_icon y of_escape_markup viven en n_pbt_utils. Declare uno — n_pbt_utils lnv_utils, nada que crear — y llámelas sobre él.

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