tab — u_pbt_tab #

← Component reference · Guide contents

Modern tabs hosting real PowerBuilder controls: repositionable tab strip, per-tab icons, closable tabs, mouse reordering.

▶ See it live — Demo application, Tab tile: the preview, the code behind it and this page, side by side.

At a glance #

The key point: a page is not an HTML mockup, it is a PowerBuilder dragobject — a userobject, a DataWindow, a group of controls, or even another PBToolboxAI component. The component takes care of positioning, resizing and showing/hiding it when the tab changes. See Hosting real PowerBuilder controls.

Quick start #

// window open event : each page is a PB control already placed on the window
uo_onglets.of_add_page("clients",  "Customers",  uo_page_clients)
uo_onglets.of_add_page("factures", "Invoices", uo_page_factures, /*closable*/ true)

// One icon per tab, set on the page handle
uo_onglets.of_item("clients").is_icon  = "mono:img\clients.svg"
uo_onglets.of_item("factures").is_icon = "mono:img\invoice.svg"

uo_onglets.of_select_page("clients")

// ue_selection_changed event of uo_onglets : (string as_from_id, string as_id)
of_charger_page(as_id)

Properties #

Properties of a page — n_pbt_tab_page #

Obtained through of_item(id), they can be changed on the fly, without rebuilding the strip.

Methods #

of_add_page returns a negative code if the identifier is empty, already in use, or if the control passed in is not valid.

When there are too many tabs — they shrink to fit the band, but never below a readable width: the icon and the closing cross take their room on top of the title, never out of it. Those that no longer fit are taken out of the band, and a ··· button appears at its end: it opens the list of every visible tab, the active one ticked, and the choice switches to it. The active tab always stays on screen. The band does not scroll — that button is the way to the tabs beyond the fold. Nothing to code, the behaviour is automatic.

Events #

Examples #

A binder of business pages #

// open event : the page userobjects are already placed on the window
uo_onglets.of_set_redraw(false)

uo_onglets.of_add_page(/*id*/ "identite", /*title*/ "Identity",  /*page*/ uo_identite)
uo_onglets.of_add_page(/*id*/ "adresses", /*title*/ "Addresses",  /*page*/ uo_adresses)
uo_onglets.of_add_page(/*id*/ "compta",   /*title*/ "Accounting", /*page*/ uo_compta)

uo_onglets.of_item("identite").is_icon = "mono:img\user.svg"
uo_onglets.of_item("adresses").is_icon = "mono:img\map.svg"
uo_onglets.of_item("compta").is_icon   = "mono:img\euro.svg"

uo_onglets.of_set_redraw(true)
uo_onglets.of_select_page("identite")

Closable documents, opened on demand #

// Open a document in a new closable tab
uo_onglets.of_add_page(/*id*/ ls_cle, /*title*/ ls_libelle, /*page*/ uo_editeur, &
                       /*closable*/ true, /*icon*/ "mono:img\doc.svg")
uo_onglets.of_select_page(ls_cle)

// ue_tab_closed event of uo_onglets : (string as_id)
// The tab is already removed ; all that is left is releasing your business data.
of_liberer_document(as_id)

Mouse reordering #

uo_onglets.ib_reorderable = true

// ue_tab_reordered event of uo_onglets : (string as_id, integer ai_index)
// ai_index = new position, starting from 1 : we store the chosen order.
of_enregistrer_ordre(as_id, ai_index)

Vertical strip #

// Tab strip along the left side, useful when the captions are long
uo_onglets.is_position = uo_onglets.POSITION_START

Graying out or hiding a tab according to permissions #

// The path always goes through the page handle
uo_onglets.of_item("compta").ib_enabled = of_a_le_droit("compta")
uo_onglets.of_item("audit").ib_visible  = gb_mode_expert

Reacting to the selection #

// ue_selection_changed event of uo_onglets : (string as_from_id, string as_id)
choose case as_id
    case "identite" ; uo_identite.of_rafraichir()
    case "adresses" ; uo_adresses.of_rafraichir()
    case "compta"   ; uo_compta.of_rafraichir()
end choose

Refusing a tab change or a close #

// Both questions are asked by DEFAULT: nothing to enable. These lines do the
// opposite, removing them where arbitration is useless.
uo_onglets.ib_veto_selection = false
uo_onglets.ib_veto_close     = false

// ue_selection_changing event of uo_onglets : (string as_from_id, string as_id)
// Returning FALSE keeps the user on the page being left.
if of_page_modifiee(as_from_id) then
    if MessageBox("Changes", "Leave without saving ?", Question!, YesNo!) = 2 then
        return false
    end if
end if
return true

// ue_tab_closing event of uo_onglets : (string as_id)
// Returning FALSE keeps the tab and its hosted page open.
return not of_page_modifiee(as_id)

Starting again from an empty strip #

// of_reset hands EVERY hosted page back to its original window before clearing
uo_onglets.of_reset()
uo_onglets.of_add_page("accueil", "Home", uo_accueil)

Best practices #

• The hosted controls must exist before the call: place them on the window at design time, the component takes care of hiding and repositioning them.
• Load the pages once in the open event, then drive the selection only: that is faster than continuously adding and removing pages.
• Call of_preload_icons at startup if your tabs carry icons: without it, the first time a hidden tab is opened there is a short delay before the icon appears.
• Both questions are asked by default: an event left empty always allows the action, you have nothing to do. Switch them off with ib_veto_selection / ib_veto_close set to false if arbitration is useless to you, since every question costs a round trip to PowerBuilder.
• A hosted control is a native window: it draws on top of the web layer. No visual effect of the component can pass over it.
• Do not forget of_reset() before rebuilding a strip: without it, reusing a page identifier fails and the previous controls stay on screen.
• For resizable and detachable areas rather than exclusive pages, prefer dockcontainer.

← Component reference · Guide contents