tab — u_pbt_tab #

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

Onglets modernes hébergeant de vrais contrôles PowerBuilder : bandeau repositionnable, icônes par onglet, onglets fermables, réordonnancement à la souris.

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

En bref #

L'argument clé : une page n'est pas une maquette HTML, c'est un dragobject PowerBuilder — un userobject, une DataWindow, un groupe de contrôles, voire un autre composant PBToolboxAI. Le composant se charge du positionnement, du redimensionnement et de l'affichage/masquage au changement d'onglet. Voir Héberger de vrais contrôles PowerBuilder.

Démarrage rapide #

// event open de la fenetre : chaque page est un controle PB deja pose sur la fenetre
uo_tabs.of_add_page(/*key*/ "customers",  /*title*/ "Clients",  /*page*/ uo_page_customers)
uo_tabs.of_add_page(/*key*/ "invoices", /*title*/ "Factures", /*page*/ uo_page_invoices, /*closable*/ true)

// Une icone par onglet, posee sur le handle de la page
uo_tabs.of_page(/*key*/ "customers").is_icon  = "mono:img\customers.svg"
uo_tabs.of_page(/*key*/ "invoices").is_icon = "mono:img\invoice.svg"

// Affiche le premier onglet
uo_tabs.of_select_page(/*key*/ "customers")

// event ue_selection_changed de uo_tabs : (string as_from_key, string as_key)
// Une cle vide : plus aucun onglet n'est affiche (tous masques)
if as_key <> "" then of_load_page(as_key)

Propriétés #

Propriétés d'une page — n_pbt_tab_page #

Obtenues par of_page(id), elles se modifient à chaud, sans reconstruire le bandeau.

Méthodes #

of_add_page renvoie un code négatif si l'identifiant est vide, déjà utilisé, ou si le contrôle passé n'est pas valide ou déjà hébergé.

Quand il y a trop d'onglets — ils se réduisent pour tenir dans la bande, mais pas en dessous d'une largeur lisible : l'icône et la croix de fermeture prennent leur place en plus du titre, jamais à sa place. Ceux qui ne tiennent plus sortent de la bande, et un bouton ··· apparaît à son extrémité : il ouvre la liste de tous les onglets visibles, l'actif coché, et le choix bascule dessus. L'onglet actif reste toujours affiché. La bande ne défile pas — ce bouton est le chemin d'accès aux onglets sortis du cadre. Rien à coder, le comportement est automatique.

Au clavier et à la souris — Ctrl+Tab et Ctrl+Page suivante passent à l'onglet suivant, Ctrl+Maj+Tab et Ctrl+Page précédente au précédent : seuls comptent les onglets qui peuvent devenir actifs (les masqués et les grisés sont sautés), et le parcours reboucle. Ces touches répondent quand le clavier est dans la bande d'onglets ou dans une page qu'elle héberge — un contrôle PowerBuilder de la page comme un autre composant posé dedans ; depuis un contrôle placé hors du tab, elles restent à la fenêtre. C'est un geste de l'utilisateur : ue_selection_changing est posée si ib_veto_selection est actif, puis ue_selection_changed suit. Un clic du milieu sur un onglet fermable le ferme, exactement comme sa croix : même question ue_tab_closing si ib_veto_close est actif, puis ue_tab_closed ; sur un onglet grisé ou non fermable, il ne fait rien. Rien à coder. Maj+F10 ou la touche Menu sur un onglet ouvre son menu sous l'onglet ; Ctrl+Maj+flèche déplace l'onglet qui a le focus quand ib_reorderable est à true. Si une page a besoin de Ctrl+Tab pour elle-même, mettez ib_cycle_keys à false.

Événements #

Exemples #

Un classeur de pages métier #

// event open : les userobjects de page sont deja poses sur la fenetre
uo_tabs.of_set_redraw(/*on*/ false)

// Un onglet par userobject de page
uo_tabs.of_add_page(/*key*/ "identity", /*title*/ "Identite",  /*page*/ uo_identity)
uo_tabs.of_add_page(/*key*/ "addresses", /*title*/ "Adresses",  /*page*/ uo_addresses)
uo_tabs.of_add_page(/*key*/ "accounting",   /*title*/ "Comptabilite", /*page*/ uo_accounting)

// Une icone par onglet, posee sur le handle de la page
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 seul rendu pour tout, puis le premier onglet s'affiche
uo_tabs.of_set_redraw(/*on*/ true)
uo_tabs.of_select_page(/*key*/ "identity")

Documents fermables, ouverts à la demande #

// Local variables
string ls_key, ls_label

// Ouvrir un document dans un nouvel onglet fermable : sa cle et son titre
ls_key = "report42"
ls_label = "Rapport 42"
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)
// L'onglet est deja retire ; il reste a liberer vos donnees metier.
of_free_document(as_key)

// La croix sur l'onglet actif seulement, un point sur une page qui detient
// du travail non enregistre, et un compteur sur une autre
uo_tabs.is_close_mode = uo_tabs.CLOSE_ACTIVE
uo_tabs.of_page(/*key*/ "report42").ib_modified = true
uo_tabs.of_page(/*key*/ "inbox").is_badge = "3"

Pages créées à la demande #

Une page lourde n'a pas besoin d'exister avant d'être visitée : ajoutez-la sans son contrôle, et créez-le dans ue_page_needed, comme le CreateOnDemand d'un Tab PowerBuilder.

// event open de la fenetre : les pages lourdes sont ajoutees SANS leur controle
uo_tabs.of_add_page(/*key*/ "orders", /*title*/ "Commandes")
uo_tabs.of_add_page(/*key*/ "history", /*title*/ "Historique")

// event ue_page_needed de uo_tabs : (string as_key)
// Local variables
u_orders luo_orders

// La page est montree pour la premiere fois : creer son controle, puis le donner
if as_key = "orders" then
    parent.OpenUserObject(luo_orders)
    uo_tabs.of_supply_page(/*key*/ as_key, /*page*/ luo_orders)
end if

Réordonnancement à la souris #

// 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 = nouvelle position, a partir de 1 (comme of_move_page) : on memorise l'ordre choisi.
of_save_order(as_key, ai_index)

Bandeau vertical #

// Bande d'onglets sur le cote gauche, utile quand les libelles sont longs
uo_tabs.is_position = uo_tabs.POSITION_START

Griser ou masquer un onglet selon les droits #

// Le chemin passe toujours par le handle de la page
uo_tabs.of_page(/*key*/ "accounting").ib_enabled = of_is_allowed("accounting")
uo_tabs.of_page(/*key*/ "audit").ib_visible  = gb_expert_mode

Réagir à la sélection #

// 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

Refuser un changement d'onglet ou une fermeture #

// Les deux questions sont a ACTIVER : sans ces lignes, le composant ne demande
// rien et change de page ou ferme tout de suite.
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)
// Renvoyer FALSE garde l'utilisateur sur la page qu'il quitte.
if of_page_modified(as_from_key) then
    if MessageBox("Modifications", "Quitter sans enregistrer ?", Question!, YesNo!) = 2 then
        return false
    end if
end if
return true

// event ue_tab_closing de uo_tabs : (string as_key)
// Renvoyer FALSE garde l'onglet et sa page hebergee ouverts.
return not of_page_modified(as_key)

Repartir d'un bandeau vide #

// of_reset rend CHAQUE page hebergee a sa fenetre d'origine avant de vider
uo_tabs.of_reset()
uo_tabs.of_add_page(/*key*/ "home", /*title*/ "Accueil", /*page*/ uo_home)

Bonnes pratiques #

• Les contrôles hébergés doivent exister avant l'appel : posez-les sur la fenêtre à la conception, le composant se charge de les masquer et de les repositionner.
• Chargez les pages une fois à l'open, puis pilotez uniquement la sélection : c'est plus rapide qu'ajouter et retirer des pages en continu.
• Appelez of_preload_icons au démarrage si vos onglets portent des icônes : sans cela, la première ouverture d'un onglet masqué montre un court délai avant l'icône.
• Les deux questions sont opt-in : posez ib_veto_selection / ib_veto_close à true pour pouvoir refuser un changement d'onglet ou une fermeture (un événement laissé vide autorise toujours l'action). Chaque question coûte un aller-retour vers PowerBuilder.
• Un contrôle hébergé est une fenêtre native : il se dessine au-dessus de la couche web. Aucun effet visuel du composant ne peut passer par-dessus lui.
• N'oubliez pas of_reset() avant de reconstruire un bandeau : sans lui, réutiliser un identifiant de page échoue et les contrôles précédents restent affichés.
• Pour des zones redimensionnables et détachables plutôt que des pages exclusives, préférez dockcontainer.
• Au clavier, la bande d'onglets suit son axe : Gauche/Droite (inversées en écriture de droite à gauche), Haut/Bas en position start/end, Début/Fin, Entrée ou Espace pour activer, Suppr pour fermer un onglet fermable. Les onglets désactivés et ceux sortis de la bande sont sautés.
• Beaucoup de pages lourdes ? Ajoutez-les sans leur contrôle (of_add_page(key, title)) et créez chacune dans ue_page_needed : l'écran s'ouvre vite, et seules les pages visitées existent.

Hérité du socle commun #

Ces membres existent sur tous les composants visuels — ils ne sont pas propres à celui-ci. Ils sont détaillés une seule fois, dans les chapitres transverses ; cette table dit seulement où les lire.

Deux aides ne sont pas héritées : of_icon et of_escape_markup vivent sur n_pbt_utils. Déclarez-en une — n_pbt_utils lnv_utils, rien à créer — et appelez-les dessus.

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