Come creare una barra degli strumenti di tipo Internet Explorer

Una delle principali funzionalità dell'interfaccia utente di Windows Internet Explorer è la barra degli strumenti. Non solo offre agli utenti l'accesso a un'ampia gamma di funzionalità, ma consente anche agli utenti di personalizzare il layout in base alle proprie preferenze personali.

La schermata seguente mostra la barra degli strumenti di Internet Explorer ed evidenzia alcune delle funzionalità principali.

screen shot of the windows internet explorer toolbar, with labels for eight features

Questa barra degli strumenti è essenzialmente costituita da un controllo rebar con quattro bande: tre barre degli strumenti e una barra dei menu. Poiché viene implementato con l'API dei controlli comuni, gli sviluppatori possono creare barre degli strumenti con qualsiasi o tutte le relative funzionalità. Questo argomento illustra le funzionalità essenziali della barra degli strumenti di Internet Explorer e come implementarle nell'applicazione.

Controllo Rebar

La struttura sottostante della barra degli strumenti di Internet Explorer è fornita da un controllo rebar. Questo controllo consente agli utenti di personalizzare la disposizione di una raccolta di strumenti. Ogni barra di rebar contiene una o più bande, che in genere sono rettangoli lunghi e stretti che contengono una finestra figlio, in genere un controllo barra degli strumenti.

Il controllo rebar visualizza le relative bande in un'area rettangolare, in genere nella parte superiore della finestra. Questo rettangolo è suddiviso in una o più strisce che rappresentano l'altezza di una banda. Ogni banda può essere su una striscia separata o più bande possono essere posizionate sulla stessa striscia.

Un controllo rebar offre agli utenti due modi per disporre i propri strumenti:

  • Ogni banda ha in genere un gripper al bordo sinistro. I gripper vengono utilizzati quando due o più bande su una singola striscia superano la larghezza della finestra. Trascinando il gripper verso sinistra o destra, gli utenti possono controllare la quantità di spazio allocata a ogni banda.
  • Gli utenti possono spostare le bande all'interno del rettangolo di visualizzazione della barra di rebar trascinando e rilasciando. Il controllo rebar cambia quindi lo schermo in modo da contenere la nuova disposizione delle bande. Se tutte le bande vengono rimosse da una striscia, l'altezza della barra di rebar verrà ridotta, ampliando l'area di visualizzazione.

Un'applicazione può aggiungere o rimuovere bande in base alle esigenze. In genere, le applicazioni consentono agli utenti di selezionare le bande che desiderano visualizzare tramite il menu Visualizza o un menu di scelta rapida.

Se la larghezza combinata delle bande su una striscia supera la larghezza della finestra, il controllo rebar regola la larghezza in base alle esigenze. Alcuni degli strumenti potrebbero essere coperti dalla banda adiacente.

La versione 5.80 dei controlli comuni consente di rendere gli strumenti coperti da un'altra banda accessibile all'utente. Se imposti il flag RBBS_Uedizione Standard CHEVRON nel membro fStyle della struttura REBARBANDINFO della band, verrà visualizzata una freccia di espansione per le barre degli strumenti coperte. Quando un utente fa clic sulla freccia di espansione, viene visualizzato un menu che lo consente di usare gli strumenti nascosti. La schermata seguente di Microsoft Internet Explorer 6 mostra il menu visualizzato quando viene coperta la parte della barra degli strumenti standard.

screen shot that shows the menu displayed by clicking the chevron

Poiché ogni banda contiene un controllo, è possibile offrire maggiore flessibilità tramite l'API del controllo. Ad esempio, è possibile implementare la personalizzazione della barra degli strumenti per consentire all'utente di aggiungere, spostare o eliminare pulsanti su una barra degli strumenti.

Implementazione del controllo Rebar

La maggior parte delle funzionalità della barra degli strumenti di Internet Explorer è effettivamente implementata nelle singole bande. L'implementazione del controllo rebar è semplice ed è elencata di seguito.

  1. Creare il controllo rebar con CreateWindowEx. Impostare dwExStyle su WS_EX_TOOLWINDOW e lpClassName su REBARCLASSNAME. Internet Explorer usa gli stili di finestra seguenti:

    Impostare gli altri parametri in base alle esigenze dell'applicazione.

  2. Creare un controllo con CreateWindowEx o una funzione di creazione di controlli specializzata, ad esempio CreateToolbarEx.

  3. Inizializzare una banda per il controllo compilando i membri di REBARBANDINFO. Includere lo stile RBBS_Uedizione Standard CHEVRON con il membro fStyle per abilitare le frecce.

  4. Aggiungere la banda al controllo rebar con un messaggio RB_INedizione Standard RTBAND.

  5. Ripetere i passaggi da 2 a 4 per le bande rimanenti.

  6. Implementare i gestori per le notifiche della barra di ripristino. In particolare, sarà necessario gestire RBN_CHEVRONPUSHED per visualizzare un menu a discesa quando si fa clic su una freccia di espansione. Per altre informazioni, vedere Gestione di chevrons.

I gripper sono inclusi per impostazione predefinita. Per omettere il gripper per una banda, impostare il flag RBBS_NOGRIPPER nel membro fStyle della struttura REBARBANDINFO della band. Per altre informazioni sull'implementazione dei controlli rebar, vedere Informazioni sui controlli Rebar.

Gestione di chevrons

Quando un utente fa clic su una freccia di espansione, il controllo rebar invia all'applicazione una notifica di RBN_CHEVRONPUSHED . La struttura NMREBARCHEVRON passata con la notifica contiene l'identificatore della banda e una struttura RECT con il rettangolo occupato dalla freccia di espansione. Il gestore deve determinare quali pulsanti sono nascosti e visualizzare i comandi associati in un menu a comparsa.

La procedura seguente illustra come gestire una notifica di RBN_CHEVRONPUSHED :

  1. Recuperare il rettangolo di delimitazione corrente per la banda selezionata inviando il controllo rebar un messaggio di RB_GETRECT .
  2. Recuperare il numero totale di pulsanti inviando il controllo della barra degli strumenti della banda a un messaggio di TB_BUTTONCOUNT .
  3. A partire dal pulsante all'estrema sinistra, recuperare il rettangolo di delimitazione del pulsante inviando il controllo barra degli strumenti a un messaggio TB_GETITEMRECT.
  4. Passare i rettangoli di banda e pulsante alla funzione IntersectRect. Questa funzione restituirà una struttura RECT che corrisponde alla parte visibile del pulsante.
  5. Passare il rettangolo del pulsante e il rettangolo per la parte visibile del pulsante alla funzione EqualRect.
  6. Se EqualRect restituisce TRUE, l'intero pulsante è visibile. Ripetere i passaggi da 3 a 5 per il pulsante successivo sulla barra degli strumenti. Se EqualRect restituisce FAL edizione Standard, il pulsante è almeno parzialmente nascosto e tutti i pulsanti rimanenti saranno completamente nascosti. Continuare con il passaggio successivo.
  7. Creare un menu a comparsa con voci per ognuno dei pulsanti nascosti.
  8. Visualizzare il menu a comparsa usando la funzione TrackPopupMenu. Usare il rettangolo di espansione passato con la notifica RBN_CHEVRONPUSHED per posizionare il menu. Il menu deve essere immediatamente sotto la freccia di espansione, con i bordi sinistro allineati.
  9. Gestire i comandi di menu.

Barre degli strumenti

La maggior parte della complessità della barra degli strumenti di Internet Explorer risiede nell'implementazione di controlli che costituiscono le bande rebar. Internet Explorer visualizza in genere quattro bande:

  • Barra dei menu
  • Barra degli strumenti standard
  • Barra degli strumenti dei collegamenti
  • Barra degli strumenti degli indirizzi

Tutte queste bande, inclusa la barra dei menu, contengono effettivamente i controlli della barra degli strumenti. In questa sezione viene illustrata l'implementazione delle barre degli strumenti standard e dei collegamenti. La barra dei menu è un po ' più complicata e viene discussa separatamente in Come creare una barra dei menu di stile di Internet Explorer.

Le procedure di base per l'implementazione dei controlli barra degli strumenti sono descritte in Informazioni sui controlli barra degli strumenti. Questa sezione è incentrata su alcune delle funzionalità più recenti della barra degli strumenti usate da Internet Explorer per aumentare l'usabilità del controllo.

Pulsanti a discesa

I pulsanti a discesa supportano più comandi. Quando l'utente fa clic su un pulsante a discesa, il pulsante visualizza un menu a comparsa anziché avviare un comando. L'utente avvia un comando selezionandolo dal menu. La schermata seguente mostra un pulsante a discesa e un menu dalla barra degli strumenti standard di Internet Explorer.

screen shot showing the mail drop-down menu

La funzionalità a discesa può essere aggiunta a qualsiasi stile di pulsante aggiungendo un flag di stile al membro fStyle della struttura TBBUTTON del pulsante. Esistono tre stili di pulsante a discesa, tutti usati da Internet Explorer:

  • I pulsanti a discesa semplici hanno lo stile BTNS_DROPDOWN. Sembrano pulsanti normali, ma visualizzano un menu quando si fa clic anziché avviare un comando.

  • I pulsanti freccia a discesa semplici hanno lo stile BTNS_WHOLEDROPDOWN. Hanno una freccia visualizzata accanto all'immagine o al testo del pulsante. Oltre alla differenza di aspetto, sono identici ai pulsanti a discesa semplici. Il pulsante Posta utilizzata come esempio nell'illustrazione precedente è un pulsante freccia a discesa.

  • Pulsanti freccia a discesa che aggiungono lo stile esteso TBSTYLE_EX_DRAWDDARROWS a BTNS_DROPDOWN hanno una freccia separata dal testo o dall'immagine. Questo stile di pulsante combina la funzionalità dei pulsanti a discesa e standard. Se l'utente fa clic sulla freccia, viene visualizzato un menu e l'utente può scegliere tra diversi comandi. Se l'utente fa clic sul pulsante adiacente, avvia un comando predefinito. La schermata seguente mostra il pulsante Indietro di Internet Explorer, che usa una freccia separata.

    screen shot that shows the menu of the back split button

Quando l'utente fa clic su un pulsante a discesa con gli stili freccia normale o semplice, il controllo barra degli strumenti invia all'applicazione una notifica TBN_DROPDOWN . Quando l'applicazione riceve questo messaggio, è responsabile della creazione e della visualizzazione del menu e della gestione del comando selezionato.

Quando l'utente fa clic su una freccia separata, il controllo barra degli strumenti invia all'applicazione una notifica di TBN_DROPDOWN . L'applicazione deve gestirla nello stesso modo in cui gestisce gli altri due tipi di pulsanti a discesa. Se l'utente fa clic sul pulsante principale, l'applicazione riceve un messaggio di WM_COMMAND con l'ID comando del pulsante, come se fosse un pulsante standard. Le applicazioni rispondono in genere avviando il comando superiore nel menu a discesa, ma è possibile rispondere in modo appropriato.

Pulsanti in stile elenco

Con i pulsanti standard, se si aggiunge testo, viene visualizzato sotto la bitmap. La schermata seguente mostra i pulsanti Ricercae Preferiti di Internet Explorer con testo standard del pulsante.

screen shot showing the search and favorites toolbar with standard buttons

Microsoft Internet Explorer 5 e versioni successive usano lo stile TBSTYLE_LIST. Il testo si trova a destra della bitmap, riducendo l'altezza del pulsante e ampliando l'area di visualizzazione. La figura seguente mostra i pulsanti Cerca e Preferiti di Internet Explorer 6 con lo stile TBSTYLE_LIST.

screen shot showing the search and favorites toolbar using list-style buttons

Chevrons

Quando l'utente riorganizzerà le bande nel controllo rebar, una parte di una barra degli strumenti potrebbe essere coperta. Se la banda è stata creata con lo stile RBBS_Uedizione Standard CHEVRON, il controllo rebar visualizzerà una freccia di espansione sul bordo destro della barra degli strumenti. L'utente fa clic sulla freccia di espansione per visualizzare un menu con gli strumenti nascosti.

Rilevamento frequente

Quando il rilevamento rapido è abilitato, un pulsante diventa attivo quando il cursore si trova su di esso. Il pulsante attivo è in genere distinto dagli altri pulsanti sulla barra degli strumenti da un'immagine distintiva. Per impostazione predefinita, viene visualizzato un pulsante attivo sopra il resto della barra degli strumenti. Quando un nuovo pulsante diventa attivo, l'applicazione riceve una notifica di TBN_HOTITEMCHANGE . La figura seguente mostra i pulsanti Ricerca e Preferiti di Internet Explorer 5, con un pulsante Di ricerca attivo. Oltre ad avere un aspetto sollevato, la bitmap grigia del pulsante è stata sostituita con una bitmap colorata.

screen shot showing the search and favorites buttons, with a hot search button

Per abilitare il rilevamento rapido, creare un controllo della barra degli strumenti con lo stile TBSTYLE_FLAT o TBSTYLE_LIST. Questi sono definiti barre degli strumenti flat perché i singoli pulsanti non sono in alcun modo evidenziati in alcun modo. Le bitmap vengono semplicemente visualizzate l'una accanto all'altra. Assumono un aspetto simile a un pulsante solo quando sono caldi. Questi due stili sono anche trasparenti, il che significa che lo sfondo delle icone sarà il colore della finestra client sottostante.

Per visualizzare una bitmap diversa quando il pulsante è attivo, creare un secondo elenco di immagini che contiene immagini ad accesso frequente per tutti i pulsanti sulla barra degli strumenti. Le dimensioni e l'ordine di queste immagini devono essere uguali a quelle dell'elenco delle immagini predefinite. Inviare il controllo della barra degli strumenti a un messaggio TB_edizione Standard THOTIMAGELIST per impostare l'elenco di immagini ad accesso frequente.