Migration vers l’infrastructure du ruban Windows

Une application qui s’appuie sur des menus, des barres d’outils et des dialogues traditionnels peut être migrée vers l’interface utilisateur riche, dynamique et contextuelle du système de commande de l’infrastructure du ruban Windows. Il s’agit d’un moyen simple et efficace de moderniser et de redynamiser l’application tout en améliorant l’accessibilité, la facilité d’utilisation et la détectabilité de ses fonctionnalités.

Introduction

En général, la migration d’une application existante vers l’infrastructure du ruban implique les éléments suivants :

• Conception d’une disposition et d’un contrôle de ruban organization qui expose les fonctionnalités de l’application existante et qui est suffisamment flexible pour prendre en charge de nouvelles fonctionnalités.
• Adaptation du code de l’application existante.
• Migration des ressources d’application existantes (chaînes et images) vers l’infrastructure du ruban.

Concevoir la disposition du ruban

Les conceptions d’interface utilisateur du ruban et les dispositions de contrôle potentielles peuvent être identifiées en procédant comme suit :

1. Inventaire de toutes les fonctionnalités existantes.
2. Traduction de cette fonctionnalité en commandes de ruban.
3. Organisation des commandes en groupes logiques.

Prendre l’inventaire

Dans l’infrastructure du ruban, les fonctionnalités exposées par une application qui manipule l’état ou l’affichage d’un espace de travail ou d’un document sont considérées comme une commande. Ce qui constitue une commande peut varier et dépend de la nature et du domaine de l’application existante.

Le tableau suivant répertorie un ensemble de commandes de base pour une application hypothétique d’édition de texte :

Regardez au-delà des menus et barres d’outils existants lors de la création d’un inventaire de commandes. Considérez toutes les façons dont un utilisateur peut interagir avec l’espace de travail. Même si toutes les commandes ne conviennent pas à l’inclusion dans le ruban, cet exercice peut très bien exposer des commandes qui étaient précédemment masquées par des couches d’interface utilisateur.

Translate

Toutes les commandes ne doivent pas être représentées dans l’interface utilisateur du ruban. Par exemple, la saisie de texte, la modification d’une sélection, le défilement ou le déplacement du point d’insertion à l’aide de la souris peuvent tous être considérés comme des commandes dans l’éditeur de texte hypothétique, mais elles ne conviennent pas à l’exposition dans une barre de commandes, car chacune implique une interaction directe avec l’interface utilisateur de l’application.

À l’inverse, certaines fonctionnalités peuvent ne pas être considérées comme une commande au sens traditionnel. Par exemple, au lieu d’être enterrés dans une boîte de dialogue, les ajustements de marge de page d’imprimante peuvent être représentés dans le ruban sous la forme d’un groupe de contrôles Spinner dans un onglet contextuel ou un mode application.

Organiser

Avant de tenter d’organiser l’inventaire des commandes, les instructions relatives à l’expérience utilisateur du ruban doivent être examinées pour connaître les meilleures pratiques lors de l’implémentation d’une interface utilisateur du ruban.

En général, les règles suivantes peuvent être appliquées aux organization de commande du ruban :

• Les commandes qui fonctionnent sur le fichier ou l’application globale appartiennent probablement au menu Application.
• Les commandes fréquemment utilisées telles que Couper, Copier et Coller (comme dans l’exemple d’éditeur de texte) sont généralement placées sur un onglet d’accueil par défaut. Dans les applications plus complexes, elles peuvent être dupliquées ailleurs dans l’interface utilisateur du ruban.
• Les commandes importantes ou fréquemment utilisées peuvent justifier l’inclusion par défaut dans la barre d’outils Accès rapide.

L’infrastructure ribbon fournit également des contrôles ContextMenu et MiniToolbar via la vue ContextPopup. Ces fonctionnalités ne sont pas obligatoires, mais si votre application a un ou plusieurs menus contextuels existants, la migration des commandes qu’ils contiennent peut permettre la réutilisation du codebase existant avec une liaison automatique aux ressources existantes.

Étant donné que chaque application est différente, lisez les instructions et essayez de les appliquer dans toute la mesure du possible. L’un des objectifs de l’infrastructure du ruban est de fournir une expérience utilisateur familière et cohérente, et cet objectif sera plus réalisable si les conceptions pour de nouvelles applications miroir applications ruban existantes autant que possible.

Adapter votre code

Une fois que les commandes du ruban ont été identifiées et organisées en regroupements logiques, le nombre d’étapes impliquées lors de l’incorporation de l’infrastructure du ruban dans le code d’application existant dépend de la complexité de l’application d’origine. En général, il existe trois étapes de base :

• Créez le balisage du ruban en fonction de la organization de commande et de la spécification de disposition.
• Remplacez les fonctionnalités de menu et de barre d’outils héritées par les fonctionnalités du ruban.
• Implémentez un adaptateur IUICommandHandler.

Créer le balisage

La liste des commandes, ainsi que leur organization et leur disposition sont déclarées par le biais du fichier de balisage du ruban utilisé par le compilateur de balisage du ruban.

Le balisage du ruban comporte deux sections principales. La première section est un manifeste des commandes et leurs ressources associées (chaînes et images). La deuxième section spécifie la structure et l’emplacement des contrôles sur le ruban.

Le balisage de l’éditeur de texte simple peut ressembler à l’exemple suivant :

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://schemas.microsoft.com/windows/2009/Ribbon">

  <Application.Commands>
    <Command Name="cmdNew" Id="0xE100" Symbol="ID_CMD_NEW" LabelTitle="New document" />
    <Command Name="cmdSave" Id="0xE103" Symbol="ID_CMD_SAVE" LabelTitle="Save" />
    <Command Name="cmdSaveAs" Id="0xE104" Symbol="ID_CMD_SAVEAS" LabelTitle="Save as" />
    <Command Name="cmdOpen" Id="0xE101" Symbol="ID_CMD_OPEN" LabelTitle="Open" />
    <Command Name="cmdExit" Id="0xE102" Symbol="ID_CMD_EXIT" LabelTitle="Exit" />
    <Command Name="cmdUndo" Id="0xE12B" Symbol="ID_CMD_UNDO" LabelTitle="Undo" />
    <Command Name="cmdCut" Id="0xE123" Symbol="ID_CMD_CUT" LabelTitle="Cut" />
    <Command Name="cmdCopy" Id="0xE122" Symbol="ID_CMD_COPY" LabelTitle="Copy" />
    <Command Name="cmdPaste" Id="0xE125" Symbol="ID_CMD_PASTE" LabelTitle="Paste" />
    <Command Name="cmdDelete" Id="0xE120" Symbol="ID_CMD_DELETE" LabelTitle="Delete" />
    <Command Name="cmdZoom" Id="1242" Symbol="ID_CMD_ZOOM" LabelTitle="Zoom" />
  </Application.Commands>

  <Application.Views>
    <Ribbon>
      <Ribbon.ApplicationMenu>
        <ApplicationMenu>
          <MenuGroup>
            <Button CommandName="cmdNew" />
            <Button CommandName="cmdOpen" />
            <Button CommandName="cmdSave" />
            <Button CommandName="cmdSaveAs" />
          </MenuGroup>
          <MenuGroup>
            <Button CommandName="cmdExit" />
          </MenuGroup>
        </ApplicationMenu>
      </Ribbon.ApplicationMenu>
      <Ribbon.QuickAccessToolbar>
        <QuickAccessToolbar>
          <QuickAccessToolbar.ApplicationDefaults>
            <Button CommandName="cmdSave" />
            <Button CommandName="cmdUndo" />
          </QuickAccessToolbar.ApplicationDefaults>
        </QuickAccessToolbar>
      </Ribbon.QuickAccessToolbar>
      <Ribbon.Tabs>
        <Tab>
          <Group CommandName="grpClipboard" SizeDefinition="FourButtons">
            <Button CommandName="cmdPaste" />
            <Button CommandName="cmdCut" />
            <Button CommandName="cmdCopy" />
            <Button CommandName="cmdDelete" />
          </Group>
        </Tab>
        <Tab>
          <Group CommandName="grpView" SizeDefinition="OneButton">
            <Button CommandName="cmdZoom" />
          </Group>
        </Tab>
      </Ribbon.Tabs>
    </Ribbon>
  </Application.Views>

</Application>

Pour éviter de redéfinir les symboles définis par une infrastructure d’interface utilisateur telle que MFC, l’exemple précédent utilise des noms de symboles légèrement différents pour chaque commande (ID_FILE_NEW et ID_CMD_NEW). Toutefois, l’ID numérique attribué à chaque commande doit rester le même.

Pour intégrer le fichier de balisage à une application, configurez une étape de génération personnalisée pour exécuter le compilateur de balisage du ruban, UICC.exe. Les fichiers d’en-tête et de ressources résultants sont ensuite incorporés dans le projet existant. Si l’exemple d’application ruban de l’éditeur de texte est nommé « RibbonPad », une ligne de commande de build personnalisée similaire à ce qui suit est requise :

UICC.exe res\RibbonPad_ribbon.xml res\RibbonPad_ribbon.bin 
         /header:res\RibbonPad_ribbon.h /res:res\RibbonPad_ribbon.rc2

Le compilateur de balisage crée un fichier binaire, un fichier d’en-tête (H) et un fichier de ressources (RC). Étant donné que l’application existante a probablement un fichier RC existant, incluez les fichiers H et RC générés dans ce fichier RC, comme illustré dans l’exemple suivant :

#ifndef APSTUDIO_INVOKED
/////////////////////////////////////////////////////////////////////////////
//
// Generated from the TEXTINCLUDE 3 resource.
//

#define _AFX_NO_SPLITTER_RESOURCES
#define _AFX_NO_OLE_RESOURCES
#define _AFX_NO_TRACKER_RESOURCES
#define _AFX_NO_PROPERTY_RESOURCES

#if !defined(AFX_RESOURCE_DLL) || defined(AFX_TARG_ENU)
LANGUAGE 9, 1
#pragma code_page(1252)

#include "res\RibbonPad_ribbon.h"  // Ribbon resources
#include "res\RibbonPad_ribbon.rc2"  // Ribbon resources

#include "res\RibbonPad.rc2"  // non-Microsoft Visual C++ edited resources
#include "afxres.rc"    // Standard components
#include "afxprint.rc"  // printing/print preview resources
#endif
#endif    // not APSTUDIO_INVOKED

Remplacer les menus et les barres d’outils hérités

Le remplacement des menus et barres d’outils standard par un ruban dans une application héritée nécessite les éléments suivants :

1. Supprimez les références de ressources de la barre d’outils et du menu du fichier de ressources de l’application.
2. Supprimez tout le code d’initialisation de barre d’outils et de barre de menus.
3. Supprimez tout code utilisé pour attacher une barre d’outils ou une barre de menus à la fenêtre de niveau supérieur de l’application.
4. Instanciez l’infrastructure du ruban.
5. Attachez le ruban à la fenêtre de niveau supérieur de l’application.
6. Chargez le balisage compilé.

L’exemple suivant montre comment initialiser l’infrastructure à l’aide de IUIFramework::Initialize :

int CMainFrame::OnCreate(LPCREATESTRUCT lpCreateStruct)
{
    if (CFrameWnd::OnCreate(lpCreateStruct) == -1)
        return -1;
    
    if (!m_RibbonBar.Create(this, WS_CHILD|WS_DISABLED|WS_VISIBLE|CBRS_TOP|CBRS_HIDE_INPLACE,0))
        return -1;      // fail to create

    if (!m_wndStatusBar.Create(this) || !m_wndStatusBar.SetIndicators(indicators,sizeof(indicators)/sizeof(UINT)))
        return -1;      // fail to create

    // Ribbon initialization
    InitRibbon(this, &m_spUIFramework);

    return 0;
}

L’exemple suivant montre comment utiliser IUIFramework::LoadUI pour charger le balisage compilé :

HRESULT InitRibbon(CMainFrame* pMainFrame, IUnknown** ppFramework)
{
    // Create the IUIFramework instance.
    CComPtr<IUIFramework> spFramework;
    HRESULT hr = ::CoCreateInstance(CLSID_UIRibbonFramework, NULL, CLSCTX_INPROC_SERVER, IID_PPV_ARGS(&spFramework));
    if (FAILED(hr))
        return hr;
    
    // Instantiate the CApplication object.
    CComObject<CApplication>* pApplication;
    hr = CComObject<CApplication>::CreateInstance(&pApplication);   // Refcount is 0
    
    // Call AddRef on the CApplication object. The smart pointer will release the refcount when it is out of scope.
    CComPtr< CComObject<CApplication> > spApplication(pApplication);

    if (FAILED(hr))
        return hr;

    // Initialize and load the Ribbon.
    spApplication->Initialize(pMainFrame);

    hr = spFramework->Initialize(*pMainFrame, spApplication);
    if (FAILED(hr))
        return hr;

    hr = spFramework->LoadUI(GetModuleHandle(NULL), L"APPLICATION_RIBBON");
    if (FAILED(hr))
        return hr;

    // Return IUIFramework interface to the caller.
    hr = spFramework->QueryInterface(ppFramework);

    return hr;
}

La classe CApplication, mentionnée ci-dessus, doit implémenter une paire d’interfaces COM (Component Object Model) définies par l’infrastructure ribbon : IUIApplication et IUICommandHandler.

IUIApplication fournit l’interface de rappel main entre l’infrastructure et l’application (par exemple, la hauteur du ruban est communiquée via IUIApplication::OnViewChanged) tandis que les rappels pour les commandes individuelles sont fournis en réponse à IUIApplication::OnCreateUICommand.

Pointe: Certaines infrastructures d’application, telles que MFC, exigent que la hauteur de la barre de ruban soit prise en compte lors du rendu de l’espace de document de l’application. Dans ce cas, l’ajout d’une fenêtre masquée pour superposer la barre du ruban et forcer l’espace du document à la hauteur souhaitée est nécessaire. Pour obtenir un exemple de cette approche, où une fonction de disposition est appelée en fonction de la hauteur du ruban retournée par la méthode IUIRibbon::GetHeight , consultez l’exemple HTMLEditRibbon.

L’exemple de code suivant illustre une implémentation IUIApplication::OnViewChanged :

// This is the Ribbon implementation that is done by an application.
// Applications have to implement IUIApplication and IUICommandHandler to set up communication with the Windows Ribbon.
class CApplication
    : public CComObjectRootEx<CComSingleThreadModel>
    , public IUIApplication
    , public IUICommandHandler
{
public:

    BEGIN_COM_MAP(CApplication)
        COM_INTERFACE_ENTRY(IUIApplication)
        COM_INTERFACE_ENTRY(IUICommandHandler)
    END_COM_MAP()

    CApplication() : _pMainFrame(NULL)
    {
    }

    void Initialize(CMainFrame* pFrame)
    {
        // Hold a reference to the main frame.
        _pMainFrame = pFrame;
    }

    void FinalRelease()
    {
        // Release the reference.
        _pMainFrame = NULL;
        __super::FinalRelease();
    }

    STDMETHOD(OnViewChanged)(UINT32 nViewID, __in UI_VIEWTYPE typeID, __in IUnknown* pView, UI_VIEWVERB verb, INT32 uReasonCode)
    {
        HRESULT hr;

        // The Ribbon size has changed.
        if (verb == UI_VIEWVERB_SIZE)
        {
            CComQIPtr<IUIRibbon> pRibbon = pView;
            if (!pRibbon)
                return E_FAIL;

            UINT ulRibbonHeight;
            // Get the Ribbon height.
            hr = pRibbon->GetHeight(&ulRibbonHeight);
            if (FAILED(hr))
                return hr;

            // Update the Ribbon bar so that the main frame can recalculate the child layout.
            _pMainFrame->m_RibbonBar.SetRibbonHeight(ulRibbonHeight);
            _pMainFrame->RecalcLayout();
        }

        return S_OK;
    }

    STDMETHOD(OnCreateUICommand)(UINT32 nCmdID, 
                               __in UI_COMMANDTYPE typeID,
                               __deref_out IUICommandHandler** ppCommandHandler)
    {
        // This application uses one command handler for all ribbon commands.
        return QueryInterface(IID_PPV_ARGS(ppCommandHandler));
    }

    STDMETHOD(OnDestroyUICommand)(UINT32 commandId, __in UI_COMMANDTYPE typeID,  __in_opt  IUICommandHandler *commandHandler)
    {        
        return E_NOTIMPL;
    }

private:
    CMainFrame* _pMainFrame;
};

Implémenter un adaptateur IUICommandHandler

Selon la conception de l’application d’origine, il peut être plus facile d’avoir plusieurs implémentations de gestionnaires de commandes ou un seul gestionnaire de commandes de pontage qui appelle la logique de commande d’application existante. De nombreuses applications utilisent des messages WM_COMMAND à cet effet lorsqu’il suffit de fournir un gestionnaire de commandes universel unique qui transfère simplement WM_COMMAND messages vers la fenêtre de niveau supérieur.

Toutefois, cette approche nécessite une gestion spéciale pour les commandes telles que Quitter ou Fermer. Étant donné que le ruban ne peut pas être détruit pendant le traitement d’un message de fenêtre, le message WM_CLOSE doit être publié dans le thread d’interface utilisateur de l’application et ne doit pas être traité de manière synchrone, comme illustré dans l’exemple suivant :

// User action callback, with transient execution parameters.
    STDMETHODIMP Execute(UINT nCmdID,
        UI_EXECUTIONVERB verb, 
        __in_opt const PROPERTYKEY* key,
        __in_opt const PROPVARIANT* ppropvarValue,
        __in_opt IUISimplePropertySet* pCommandExecutionProperties)
    {       
        switch(nCmdID)
        {
        case cmdExit:
            ::PostMessage(*_pMainFrame, WM_CLOSE, nCmdID, 0);
            break;
        default:
            ::SendMessage(*_pMainFrame, WM_COMMAND, nCmdID, 0);
        }
        return S_OK;
    }

    STDMETHODIMP UpdateProperty(UINT32 nCmdID, 
                                __in REFPROPERTYKEY key,
                                __in_opt  const PROPVARIANT *currentValue,
                                __out PROPVARIANT *newValue) 
    {        
        return S_OK;
    }

Migration de ressources

Une fois le manifeste des commandes défini, la structure du ruban a été déclarée et le code d’application adapté pour héberger l’infrastructure du ruban, l’étape finale est la spécification des ressources de chaîne et d’image pour chaque commande.

Ressources de chaînes

Command.LabelTitle est la propriété de chaîne la plus courante définie pour une commande. Elles sont affichées sous forme d’étiquettes de texte pour les onglets, les groupes et les contrôles individuels. Une chaîne d’étiquette à partir d’un élément de menu hérité peut généralement être réutilisée pour un Objet Command.LabelTitle sans modification importante.

Toutefois, les conventions suivantes ont changé avec l’avènement du ruban :

• Le suffixe de points de suspension (...) utilisé pour indiquer une commande de lancement de dialogue n’est plus nécessaire.
• L’esperluette (&) peut toujours être utilisé pour indiquer un raccourci clavier pour une commande qui apparaît dans un menu, mais la propriété Command.Keytip prise en charge par l’infrastructure remplit un objectif similaire.

Pour revenir à l’exemple d’éditeur de texte, les chaînes suivantes pour LabelTitle et Keytip peuvent être spécifiées :

Voici une liste d’autres propriétés de chaîne qui doivent être définies sur la plupart des commandes :

• Command.LabelDescription
• Command.TooltipTitle
• Command.TooltipDescription

Les onglets, groupes et autres fonctionnalités de l’interface utilisateur du ruban peuvent désormais être déclarés avec toutes les ressources de chaîne et d’image spécifiées.

L’exemple de balisage de ruban suivant illustre diverses ressources de chaîne :

<Application.Commands>
    <!-- Tabs -->
    <Command Name="tabHome" LabelTitle="Home" Keytip="H" />
    <Command Name="tabView" LabelTitle="View" Keytip="V" />

    <!-- Groups -->
    <Command Name="grpClipboard" LabelTitle="Clipboard" />
    <Command Name="grpZoom" LabelTitle="Zoom" />

    <!-- App menu commands -->
    <Command Name="cmdNew" Id="0xE100" Symbol="ID_CMD_NEW" LabelTitle="New document" Keytip="N" >
      <Command.TooltipTitle>New (Ctrl+N)</Command.TooltipTitle>
      <Command.TooltipDescription>Create a new document.</Command.TooltipDescription>
    </Command>
    <Command Name="cmdSave" Id="0xE103" Symbol="ID_CMD_SAVE" LabelTitle="Save" Keytip="S">
      <Command.TooltipTitle>Save (Ctrl+S)</Command.TooltipTitle>
      <Command.TooltipDescription>Save the current document.</Command.TooltipDescription>
    </Command>
    <Command Name="cmdSaveAs" Id="0xE104" Symbol="ID_CMD_SAVEAS" LabelTitle="Save as" Keytip="A">
      <Command.TooltipDescription>Save the current document with a new name.</Command.TooltipDescription>
    </Command>
    <Command Name="cmdOpen" Id="0xE101" Symbol="ID_CMD_OPEN" LabelTitle="Open" Keytip="O">
      <Command.TooltipTitle>Open (Ctrl+O)</Command.TooltipTitle>
      <Command.TooltipDescription>Open a document.</Command.TooltipDescription>
    </Command>
    <Command Name="cmdExit" Id="0xE102" Symbol="ID_CMD_EXIT" LabelTitle="Exit" Keytip="X">
      <Command.TooltipDescription>Exit the application.</Command.TooltipDescription>
    </Command>

    <!-- ...other commands -->

  </Application.Commands>

Ressources d’image

L’infrastructure du ruban prend en charge les formats d’image qui offrent une apparence beaucoup plus riche que les formats d’image pris en charge par les composants de menu et de barre d’outils précédents.

Pour Windows 8 et versions ultérieures, l’infrastructure ruban prend en charge les formats graphiques suivants : fichiers bitmap ARGB (BMP) 32 bits et fichiers PNG (Portable Network Graphics) avec transparence.

Pour Windows 7 et les versions antérieures, les ressources d’image doivent être conformes au format graphique BMP standard utilisé dans Windows.

Il n’est pas possible de spécifier une taille par défaut unique pour les ressources d’image dans l’infrastructure du ruban. Toutefois, pour prendre en charge la disposition adaptative des contrôles, les images peuvent être spécifiées dans deux tailles (grandes et petites) . Toutes les images de l’infrastructure du ruban sont mises à l’échelle en fonction de la résolution des points par pouce (ppp) de l’affichage avec la taille exacte rendue en fonction de ce paramètre ppp. Pour plus d’informations, consultez Spécification des ressources d’image de ruban .

L’exemple suivant montre comment un ensemble d’images spécifiques à dpi est référencé dans le balisage :

<Command Name="cmdNew" Id="0xE100" Symbol="ID_CMD_NEW" LabelTitle="New document" Keytip="N" >
      <Command.TooltipTitle>New (Ctrl+N)</Command.TooltipTitle>
      <Command.TooltipDescription>Create a new document.</Command.TooltipDescription>
      <Command.LargeImages>
        <Image Source="cmdNew-32px.png" MinDPI="96" />
        <Image Source="cmdNew-40px.png" MinDPI="120" />
        <Image Source="cmdNew-48px.png" MinDPI="144" />
        <Image Source="cmdNew-64px.png" MinDPI="192" />
      </Command.LargeImages>
      <Command.SmallImages>
        <Image Source="cmdNew-16px.png" MinDPI="96" />
        <Image Source="cmdNew-20px.png" MinDPI="120" />
        <Image Source="cmdNew-24px.png" MinDPI="144" />
        <Image Source="cmdNew-32px.png" MinDPI="192" />
      </Command.SmallImages>
    </Command>

Rubriques connexes

Spécification des ressources d’image de ruban