Tutoriel - Introduction au Ruban de Windows...

Tutoriel - Introduction au Ruban de Windows 7 Ajout d'un Ruban à une application Win32

Microsoft France Division DPE:

Mentions légales

Ce document est un projet et peut faire l’objet de modifications avant d'être mis en vente sur le marché de logiciels qui y sont décrits.

Les informations contenues dans ce document représentent l'opinion actuelle de Microsoft Corporation sur les questions analysées à la date

de publication. Étant donné que Microsoft doit répondre aux conditions changeantes du marché, il ne devrait pas être interprété comme un

engagement de la part de Microsoft, et Microsoft ne peut garantir l'exactitude de toute information présentée après la date de publication.

Ce tutoriel est diffusé à titre informatif uniquement. MICROSOFT NE DONNE AUCUNE GARANTIE, EXPRESSE, IMPLICITE OU STATUTAIRE, DE

L'INFORMATION DANS CE DOCUMENT.

Le respect de toutes les lois applicables en matière de droits d'auteur relève de la responsabilité de l'utilisateur.

Sans limiter les droits d'auteur, aucune partie de ce document ne peut être reproduite, stockée ou introduite dans un système d'extraction ou

transmise sous aucune forme ou par quelque moyen que ce soit (électronique, mécanique, par photocopie, enregistrement ou autre), ou pour

toute effet, sans l'autorisation expresse et écrite de Microsoft Corporation.

Microsoft peut déposer des brevets, demandes de brevets, marques, droits d'auteur ou autres droits de propriété intellectuelle couvrant les

sujets de ce document. Sauf dans les cas expressément prévus par un contrat de licence conclu avec Microsoft, la fourniture de ce document

ne vous donne aucun droit de licence sur ces brevets, marques, droits d'auteur ou autres droits de propriété intellectuelle.

© 2008 Microsoft Corporation. Tous droits réservés.

Microsoft, MS-DOS, Windows, Windows NT, Windows Server, Windows Vista, Active Directory, ActiveSync, ActiveX, Direct3D, DirectDraw,

DirectInput, DirectMusic, DirectPlay, DirectShow, DirectSound, DirectX, Expression, FrontPage, HighMAT, Internet Explorer, JScript , Microsoft

Press, MSN, Outlook, PowerPoint, SideShow, Silverlight, Visual Basic, Visual C + +, Visual InterDev, Visual J + +, Visual Studio, WebTV,

médias de Windows, Win32, Win32s, et Zune sont des marques déposées ou des marques déposées de Microsoft Corporation aux les États-

Unis et / ou dans d'autres pays.

Les noms de sociétés et de produits mentionnés dans ce document sont des marques déposées de leurs propriétaires respectifs.

Sommaire Objectifs ......................................................................................................................................................................2

Présentation ...............................................................................................................................................................2

Pré requis ....................................................................................................................................................................2

Anatomie des Ruban Windows ..................................................................................................................................3

Audience .....................................................................................................................................................................3

Pour plus d'informations ............................................................................................................................................3

Exercice 1 Création et ajout d'un ruban à une application Win32 ............................................................................3

Exercice 2 Ajout d'un contrôle simple à notre Ruban. ............................................................................................ 11

Exercice 3 Ajout de contrôles et de groupes à un Ruban existant. ........................................................................ 18

Exercice 4 Mapper les commandes Win32 existantes sur les commandes de Ruban. ........................................... 25

Conclusion. .............................................................................................................................................................. 27

Temps estimé pour compléter ce tutoriel 85 Minutes au Total (divisé en 4 exercices)

Objectifs A la fin de ce tutoriel, vous aurez appris à :

Configurer un projet Visual Studio pour l'utilisation des Rubans

Intégrer les Rubans à une application Win32 (HWND)

Ajouter des contrôles tels que buttons, checkboxes, tabs, et autres.

Connecter une application avec des contrôles Ruban

Personnaliser l'affichage des contrôles

Présentation Ce tutoriel s'adresse aux développeurs C++ qui développent des applications de bureau et qui souhaitent tirer

profit des avantages de Windows 7 en y ajoutant des Rubans.

Ce tutoriel vous explique comment.....

Pré requis Microsoft Visual Studio 2008 (ou supérieure)

Windows 7 SDK

Anatomie des Ruban Windows Ce tutoriel utilise la terminologie commune Ruban Windows pour décrire les différentes parties de l'interface

utilisateur.. Le diagramme suivant vous en expose les concepts.

Application Menu

Quick Access

Toolbar

Tab Help

Dialog Box LauncherGroup (also known as “Chunk”)

Audience Avant de travailler sur ce tutoriel, il serait utile (mais pas obligatoire) de connaitre :

Le développement Win32 et le langage C++

D'avoir des bases sur la programmation COM et ses concepts

Visual Studio

Pour plus d'informations

La documentation des Rubans Windows sur MSDN (Anglais)

http://msdn.microsoft.com/en-us/library/dd371191.aspx

Lignes directrices sur le développement des Ruban Windows sur MSDN (Anglais)

http://msdn.microsoft.com/en-us/library/cc872782.aspx

Présentation sur "The Microsoft Office Fluent user interface" (Anglais)

http://office.microsoft.com/en-us/products/HA101679411033.aspx

Exercice 1

Création et ajout d'un ruban à une application Win32 Temps estimé : 25 minutes

Dans cet exercice, nous partons d'un projet Visual Studio vide, puis nous allons construire le code nécessaire

pour compiler et initialiser les Rubans dans une application Win32.

http://msdn.microsoft.com/en-us/library/dd371191.aspx

http://msdn.microsoft.com/en-us/library/cc872782.aspx

http://office.microsoft.com/en-us/products/HA101679411033.aspx

Informations :

Les API du Ruban sont divisées en 2 parties : Des balises XML pour définir la structure et l'organisation des

contrôles Ruban, des interfaces COM C++ à initialiser et pour la gestion des évènements.

Les balises seront compilées dans un format binaire à l'aide de l'outils UICC.exe afin de les utiliser lors de

l'exécution.

Nous verrons dans cet exercice comment configurer Visual Studio pour compiler les balises XML

automatiquement.

Tous les fichiers de cet exercice sont localisés dans le répertoire “ 05 - Ruban\Exercice1\AppRuban\”.

**Note: dans ce tutoriel, le code et/ou les balises XML qui existe déjà dans les fichiers sources seront colorisés en

gris (exemple). Ceci afin de donner plus de sens au contexte lorsque vous suivrez les instructions d'ajout de

nouveau code dans ses fichiers.

↙ Création d'un nouveau projet dans Visual Studio.

A cette étape vous allez créer un nouveau projet et ajouter un Ruban à une application.

1. Lancez Visual Studio.

2. Créez un nouveau projet File New Project…

3. Sous “Visual C++” sélectionnez “Win32”. Puis “Win32 Project”.

4. Entrez “AppRuban" comme nom de projet.

5. Puis “OK”, puis sur l'écran suivant sélectionnez “Finish”.

6. Compilez l'application et lancez -la (touche F5). Une fenêtre avec un menu simple s'ouvre.

↙ Création du fichier de balises XML pour le Ruban.

Vous allez maintenant ajouter quelques balises XML Ruban dans votre projet. les balises définirons les

commandes exposées dans le Ruban, ainsi que les contrôles associés à ces commandes.

1. Créez un nouveau fichier nommé “BalisesRuban.xml” et ajoutez le au projet. Dans la fenêtre Solution Explorer, cliquez sur le bouton droit sur le nom de projet Add New Item. Sous “Visual C++” sélectionnez “Web”. Puis sélectionnez “XML File (.xml)”, et ajoutez le nom de fichier “BalisesRuban.xml”.

2. Copiez/Collez les balises suivantes dans le fichier BaliseRuban.xml que vous venez de créer.

<Application xmlns='http://schemas.microsoft.com/windows/2009/Ribbon'>

<Application.Commands>

<Command Name="TabAcceuil" Symbol="cmdTabAcceuil" Id="30000">

<Command.LabelTitle>

<String Id ="200">Acceuil</String>

</Command.LabelTitle>

</Command >

</Application.Commands>

<Application.Views>

<Ribbon>

<Ribbon.Tabs>

<Tab CommandName="TabAcceuil">

</Tab>

</Ribbon.Tabs>

</Ribbon>

</Application.Views>

</Application>

Note: Nous verrons dans l'exercice 2 plus en détail le format XML du Ruban

↙ Configuration de Visual Studio pour une compilation automatique du

fichier de balises

1. Dans Visual Studio, sélectionnez le fichier XML crée, click-droit, puis ajoutez la ligne suivante au niveau

du champ Command Line :

UICC.exe BalisesRuban.xml BaliseRuban.bml /res:Rubanres.rc

UICC.exe est le nouveau compilateur de Ruban utilisé pour générer un fichier de ressources

2. Dans la même page de propriété dans le champ Outputs, ajoutez la ligne suivante :

BaliseRuban.bml;Rubanres.rc

3. Ensuite , vous devez inclure le fichier de ressources Rubanres.rc dans votre projet.

Pour ce faire, il faut ouvrir le fichier de ressources en mode "code". Sélectionnez le fichier, click-droit

puis sélectionnez "view code".

#include "Rubanres.rc"

Note Importante : Si vous n'arrivez pas à compiler correctement l'application, suivez les étapes suivantes :

1. Dans Windows : Click sur bouton démarrez All Programs Microsoft Windows SDK v7.0 Visual

Studio Registration Windows SDK Configuration Tool et sélectionnez la version 7 du SDK.

2. Si cela ne compile toujours pas (ne trouve pas l'outil UICC.exe), activez le menu ToolsOptionsProjects

and Solutions VC++ Directories

Pour les fichiers exécutables, ajoutez le chemin suivant C:\Program Files\Microsoft

SDKs\Windows\v7.0\Bin.

↙ Création de l'hôte pour le Ruban.

Un hôte est utilisé pour recevoir les notifications en provenance du Ruban. Il est alors nécessaire d'initialiser le

ruban.

1. Configurez votre projet afin d'utiliser les ATL.

Dans l'explorateur de Solution, cliquez-droit sur le nom de projet Properties "Configuration

Properties”, et sélectionnez “General”. Dans le champ “Use of ATL” choisissez au choix :

Static Link to ATL

-ou-

Dynamic Link to ATL

2. Ajoutez un nouveau fichier nommé “Ruban.cpp”.

l'explorateur de Solution, cliquez-droit sur le nom de projet Add New Item. Sous “Visual C++”

sélectionnez “Code”. Sélectionnez “C++ File (.cpp)”, et dans le champ Name appelez le fichier

“Ruban.cpp”.

3. Editez le fichier “Ruban.cpp” et ajoutez les entêtes suivant :

Entête précompilés :

#include "stdafx.h"

Entêtes ATL/COM :

#include <atlbase.h>

#include <atlcom.h>

#include <initguid.h>

et finalement l'entête pour les Ruban

#include <UIRibbon.h>

Dans le fichier Ruban.cpp, implémentez l'interface IUIApplication définie dans le fichier

UIRibbon.h.

Nous rentrerons plus en détail sur cette interface dans les prochains exercices, pour l'instant nous

déclarons que nos 3 fonctions retournent E_NOTIMPL.

class CApplication

: public CComObjectRootEx<CComMultiThreadModel>

, public IUIApplication

{

public:

BEGIN_COM_MAP(CApplication)

COM_INTERFACE_ENTRY(IUIApplication)

END_COM_MAP()

STDMETHOD(OnViewChanged)(UINT32 nViewID, __in UI_VIEWTYPE typeID,

__in IUnknown* pView, UI_VIEWVERB verb, INT32 uReasonCode)

{

return E_NOTIMPL;

}

STDMETHOD(OnCreateUICommand)(UINT32 nCmdID, __in UI_COMMANDTYPE

typeID, __deref_out IUICommandHandler** ppCommandHandler)

{

return E_NOTIMPL;

}

STDMETHOD(OnDestroyUICommand)(UINT32 commandId, __in

UI_COMMANDTYPE typeID, __in_opt IUICommandHandler*

pCommandHandler)

{

return E_NOTIMPL;

}

};

↙ Création et Initialisation du Ruban.

1. Maintenant que vous avez implémenté la classe CApplication, déclarez en global la variable

g_pFramework du type IUIFramework*. Ce pointeur nous servira à instancier la plateforme de Ruban.

IUIFramework* g_pFramework = NULL;

Puis à la fin du fichier Ruban.cpp, ajoutez les lignes de codes suivantes :

HRESULT InitialisationRuban(HWND hWindowFrame)

{

hWindowFrame est le handlede la fenêtre principale

2. Appelez CoCreateInstance pour instancier la classe CLSID_UIRibbonFramework et obtenir

un pointeur sur l'interface IUIFramework. C'est l'interface principale de la plateforme Ruban.

::CoCreateInstance(CLSID_UIRibbonFramework, NULL,

CLSCTX_INPROC_SERVER, IID_PPV_ARGS(&g_pFramework));

3. Instanciez l'objet CApplication.

CComObject<CApplication> *pApplication = NULL;

CComObject<CApplication>::CreateInstance(&pApplication);

4. Initialisez la plateforme Ruban.

g_pFramework->Initialize(hWindowFrame, pApplication);

5. Puis chargez les balises.

g_pFramework->LoadUI(GetModuleHandle(NULL), L"APPLICATION_RIBBON");

6. Fermez la fonction.

return 0;

}

↙ Intégration avec l'application.

1. Initialisez COM dans l'application. Ouvrez le fichier AppRuban.cpp et ajoutez-y en début, le code suivant : #include <atlbase.h>

CComModule _Module;

extern HRESULT InitRibbon(HWND hWindowFrame);

2. Dans la fonction _tWinMain, ajoutez-y en début :

CoInitialize(NULL);

et à la fin avant l'instruction “return” :

CoUninitialize();

3. Dans la fonction InitInstance, juste avant la méthode ShowWindow faite un appel à la méthode InitialisationRuban.

InitialisationRuban(hWnd);

4. Compilez l'application

5. Lancez l'application. Une application avec un Ruban vide apparaît.

Vous noterez que la seule modification à ce stade est l'appel à InitialisationRuban. le reste du code ajouté sont

des initialisations standard COM.

↙ Compléter l'intégration.

1. Dans le fichier Ruban.cpp, ajoutez la fonction DestructionRuban.

void DestructionRuban()

{

if (g_pFramework)

{

g_pFramework->Destroy();

g_pFramework->Release();

g_pFramework = NULL;

}

}

2. Dans me fichier AppRuban.cpp, déclarez la fonction DestructionRuban() :

#include <atlbase.h>

CComModule _Module;

extern HRESULT InitialisationRuban(HWND host);

extern void DestructionRuban();

3. Dans la fonction WndProc du fichier AppRuban.cpp, ajoutez l'appel à la méthode DestructionRuban() au

niveau du message WM_DESTROY :

case WM_DESTROY:

DestructionRuban();

PostQuitMessage(0);

break;

4. Vous remarquerez que lors du redimensionnement de la fenêtre le ruban clignote. Vous pouvez

contourner ce problème en ajoutant le style WS_CLIPCHILDREN à la méthode CreateWindow .

hWnd = CreateWindow(szWindowClass, szTitle,

WS_OVERLAPPEDWINDOW | WS_CLIPCHILDREN,

CW_USEDEFAULT, 0, CW_USEDEFAULT, 0, NULL, NULL,

hInstance, NULL);

Note: Le clignotement est du au faite que l'on dessine pardessus le ruban. le Style WS_CLIPCHILDREN

exclue les fenêtres enfants lorsqu'un message WM_PAINT est envoyé à la fenêtre parent.

Exercice 2

Ajout d'un contrôle simple à notre Ruban. Temps estimé : 40 minutes

Vous devez avoir terminé l'Exercice 1 pour commencez cet Exercice 2, dans lequel nous allons écrire du code

pour ajouter des contrôles à notre Ruban. Vous apprendrez la manière d'obtenir des notifications des contrôles

Ruban, et la manière de configurer ou de récupérer leurs propriétés.

Informations :

Tous les fichiers de cet exercice sont localisés dans le répertoire “ 05 - Ruban\Exercice2\AppRuban\”.

↙ Ajout d'un bouton à notre Onglet.

A cette étape nous allons ajouter un contrôle bouton au Ruban :

1. A partir du projet utilisé dans l'Exercice 1. ou chargez le projet Visual Studio de Exercice1/AppRuban.sln .

2. Dans le fichier BalisesRuban.xml à la section <Application.Commands> ajoutez les balises

suivantes pour définir les commandes des nouveaux contrôles.

<Command Name="GroupPrincipal" Symbol="cmdGroupPrincipal" Id="30001"/>

<Command Name="MonBouton" Symbol="cmdMonBouton" Id="30002"/>

3. Ajoutons maintenant notre nouveau bouton à l'intérieure de notre nouveau groupe.. Un ruban contient

des onglets et à l'intérieure des onglets il y a les groupes. Ces groupes contiennent les contrôles que

vous voyez dans le Ruban avec lesquels vous pouvez interagir. Ajoutez à l'intérieur de l'onglet

<Tab CommandName="TabAcceuil">:

<Group CommandName="GroupPrincipal">

<Button CommandName="MonBouton"/>

</Group>

4. Compilez et lancez l'application. Vous noterez un bouton vide à l'intérieur d'un nouveau groupe. Pour le

voir apparaître passer la souris au dessus de lui.

↙ Ajout d'un étiquette, d'un ToolTip, et d'une icône à notre bouton.

Toutes les ressources utilisées par notre ruban, sont définies dans un fichier d'entête. Dans un premier temps

vous apprendrez la manière de générer cet entête. Puis, vous définirez les différents attributs (Etiquette, Icônes,

ToolTip) pour les différentes commandes.

1. Configurez les propriétés du projet afin de générer avec UICC.exe un fichier d'entête :

a. Cliquez-droit sur le fichier BalisesRuban.xml Properties Custom build step

b. Dans le champ “Command Line” ajoutez la ligne suivante avant /res:Rubanres.rc :

/header:ribbonres.h

Ensuite la commande suivante :

UICC.exe BalisesRuban.xml BaliseRuban.bml

/header:BalisesRubanres.h /res:Rubanres.rc

Dans le champ “Outputs” ajoutez :

; BalisesRubanres.h

Cliquez “OK” pour fermer la fenêtre des propriétés

2. Cliquez-droit sur le fichier AppRuban.rc View Code et ajoutez la ligne suivante au-dessus de la ligne

Rubanres.rc.

#include "BalisesRubanres.h"

#include "Rubanres.rc"

3. Copiez l'image Button_Image.bmp du répertoire BITMAPS (inclu avec ce tutoriel) dans le répertoire du

projet. (la ou se trouve le fichier AppRuban.rc).

4. Dans l'explorateur de solution ajoutez Button_Image.bmp au projet en cliquant droit sur le nom de

projet Add Existing Item Button_Image.bmp

5. A cette étape, nous allons ajouter une étiquette, un tooltip et une image à notre bouton.

Dans le fichier BalisesRuban.xml, changez la définition pour la commande cmdMonBouton

<Application.Commands> :

<Command Name="MonBouton" Symbol="cmdMonBouton" Id="30002" LabelTitle="Mon

Bouton">

<Command.TooltipTitle>Mon Bouton</Command.TooltipTitle>

<Command.TooltipDescription>Cliquez sur mon

Bouton</Command.TooltipDescription>

<Command.LargeImages>

<Image Source="Button_Image.bmp"/>

</Command.LargeImages>

</Command>

6. Compilez et lancez l'application.

7. Ajoutez des étiquettes aux autres contrôles Remplacez : <Command Name="GroupPrincipal" Symbol="cmdGroupprincipal" Id="30001" />

Par : <Command Name="GroupPrincipal" Symbol="cmdGroupprincipal" Id="30001"

LabelTitle="Principal" />

8. Compilez et lancez l'application. Notez que le groupe GroupPrincipal à désormais une étiquette.

↙ Affichage d'une boîte de message lorsque le bouton est cliqué.

Un gestionnaire de commande (IUICommandHandler) est une interface que l'application doit implémenter afin

de manipuler les notifications lorsque l'utilisateur interagit avec les commandes de contrôles. Il expose les

méthodes Execute et UpdateProperty . La méthode Execute est appelée par la plateforme de Ruban pour notifier

l'application qu'un évènement est survenu.

1. Ajoutez le fichier d'entête suivant dans le fichier AppRuban.cpp:



BalisesRubanres.h est généré par UICC.exe et contient les commandes qui ont été définies dans le fichier

de balises XML.

2. Dans le fichier Ruban.cpp, modifiez la classe CApplication afin qu'elle implémente l'interface IUICommandHandler pour tous les contrôles du projet.. class CApplication

: public CComObjectRootEx<CComMultiThreadModel>

, public IUIApplication

, public IUICommandHandler

3. Puis ajoutez COM_INTERFACE_ENTRY(IUICommandHandler) à la COM_MAP existante :

BEGIN_COM_MAP(CApplication)

COM_INTERFACE_ENTRY(IUIApplication)

COM_INTERFACE_ENTRY(IUICommandHandler)

END_COM_MAP()

4. Ajoutez le code suivant à la classe CApplication, afin d'implémenter les 2 méthodes de l'interface IUICommandHandler : STDMETHODIMP Execute(UINT nCmdID,

UI_EXECUTIONVERB verb,

__in_opt const PROPERTYKEY* key,

__in_opt const PROPVARIANT* ppropvarValue,

__in_opt IUISimplePropertySet* pCommandExecutionProperties)

{

HRESULT hr = S_OK;

switch (verb)

{

case UI_EXECUTIONVERB_EXECUTE:

if (nCmdID == cmdMonBouton)

{

MessageBox(NULL, L"Vous avez cliquez sur mon Bouton

!",

L"la méthode Execute", MB_OK);

}

break;

}

return hr;

}

STDMETHODIMP UpdateProperty(UINT nCmdID,

__in REFPROPERTYKEY key,

__in_opt const PROPVARIANT* ppropvarCurrentValue,

__out PROPVARIANT* ppropvarNewValue)

{

return E_NOTIMPL;

}

5. Puis ajoutez le test suivant pour la méthode CApplication::OnCreateUICommand :

STDMETHOD(OnCreateUICommand)(UINT32 nCmdID, __in UI_COMMAND_TYPE

typeID, __deref_out IUICommandHandler** ppCommandHandler)

{


{

return QueryInterface(IID_PPV_ARGS(ppCommandHandler));

}

return E_NOTIMPL;

}

6. Compilez et lancez l'application, si vous appuyez sur le bouton, le message apparaît..

↙ Ajout d'un contrôle checkbox.

1. Ajoutez les balises suivantes au fichier de BalisesRuban.xml à la section <Application.Commands>

<Command Name="MonChoix" Symbol="cmdMonChoix" Id="30003" LabelTitle="Mon

Choix">

<Command.TooltipTitle>Mon Choix</Command.TooltipTitle>

<Command.TooltipDescription>Selectionnez Mon Choix

!</Command.TooltipDescription>


<Image Source="Button_Image.bmp"/>


</Command>

Ajoutez une CheckBox dans le groupe principal en ajoutant les balises suivantes :

<Group CommandName="GroupPrincipal">

<CheckBox CommandName="MonChoix"/>


</Group>

2. Associez un gestionnaire de commande au contrôle checkbox. Dans la méthode OnCreateUICommand

modifiez l'instruction comme suit :

if (nCmdID == cmdMonBouton || nCmdID == cmdMonChoix )

{

return QueryInterface(IID_PPV_ARGS(ppCommandHandler));

}

3. Dans la méthode Execute ajoutez le code suivant :

case UI_EXECUTIONVERB_EXECUTE:


{

MessageBox(NULL, L"Vous avez cliquez sur mon Bouton !",

L"La méthode Execute", MB_OK);

}

else if (nCmdID == cmdMonChoix)

{

MessageBox(NULL, L"Ceci est mon choix !", L"Mon Choix

Execute", MB_OK);

}

break;


↙ Du contrôle checkbox au bouton bascule.

En modifiant un contrôle CheckBox vers un bouton Bascule, pas besoin de modifier le code C++.

1. Dans le fichier BalisesRuban.xml remplacez la ligne :

<CheckBox CommandName="MonChoix"/>

Par :

<ToggleButton CommandName="MonChoix"/>


↙ Specification d'un modéle SizeDefinition pour un groupe.

Le modèle SizeDefinition fournit des informations physisques pour l'affichage des contrôles à l'intérieure d'un

groupe. La plateforme de ruban Windows inclue des modèles prédéfinies, mais il est possible de définir ses

propres modèles.

Puisqu'il il y a deux boutons dans un groupe, nous allons utiliser le modèle standard prédéfinit "TwoButtons"

1. Ajoutez le modèle SizeDefinition suivant à notre groupe GroupPrincipal

<Group CommandName="GroupPrincipal" SizeDefinition="TwoButtons">

2. Compilez et lancez l'application. Notez désormais la taille et la nouvelle disposition des boutons dans le

groupe.

↙ Maintenant nous allons utlisez le bouton bascule pour activer/désactiver

le contrôle bouton.

1. Ajoutez une donnée membre privée _fEnabled à la classe CApplication.

private:

BOOL _fEnabled;

2. Au début du fichier Ruban.cpp ajoutez la ligne


#include <UIRibbonPropertyHelpers.h>


3. Liez l'application a la librarie Link to propsys.lib in the linker properties. Cliquez-droit sur le nom du

projet AppRuban properties Linker Input. Dans le champ “Additional Dependencies” field,

ajoutez le fichier propsys.lib. puis "OK".

4. Dans le fichier Ruban.cpp, à l'intérieure de la méthode Execute, remplacez le code suivant :

MessageBox(NULL, L"Ceci est mon choix !", L"Mon Choix Execute",

MB_OK);

par le code :

PROPVARIANT var, varNew;

hr = g_pFramework->GetUICommandProperty(cmdMonChoix,

UI_PKEY_BooleanValue, &var);

if (FAILED(hr))

{

return hr;

}

hr = PropVariantToBoolean(var, &_fEnabled);

if (FAILED(hr))

{

return hr;

}

_fEnabled = !_fEnabled;

hr = UIInitPropertyFromBoolean(UI_PKEY_Enabled, _fEnabled, &varNew);

if (FAILED(hr))

{

return hr;

}

hr = g_pFramework->SetUICommandProperty(cmdMonBouton, UI_PKEY_Enabled,

varNew);

if (FAILED(hr))

{

return hr;

}

5. Compilez et lancez l'application. Testez l'application en activant le bouton bascule.

↙ Mise à jour d'une étiquette à l'exécution.

1. Dans le fichier Ruban.cpp, ajoutez le code suivant à la méthode Execute au niveau de l'instruction

else if (nCmdID == cmdMonChoix) :

hr = g_pFramework->InvalidateUICommand(cmdMonChoix,

UI_INVALIDATIONS_PROPERTY, &UI_PKEY_Label);

if (FAILED(hr))

{

return hr;

}

2. Remplacez l'implémentation de la méthode UpdateProperty avec le code qui changera l'étiquette du bouton Bascule. Remplacez return E_NOTIMPL; Par : UNREFERENCED_PARAMETER(ppropvarCurrentValue);

HRESULT hr = E_FAIL;

if (key == UI_PKEY_Label)

{

// Mise à jour de l'étiquette du bouton bascule"

if (nCmdID == cmdMonChoix)

{

if (_fEnabled)

{

hr = UIInitPropertyFromString(UI_PKEY_Label,

L"Désactivez le bouton", ppropvarNewValue);

}

else

{

hr = UIInitPropertyFromString(UI_PKEY_Label,

L"Activez le bouton", ppropvarNewValue);

}

}

}

return hr;

3. Compilez et lancez l'application et testez le bouton bascule.

Notez que l'on peut définir les ressources des commandes soit par balises, soit par code (ou les deux).

Exercice 3

Ajout de contrôles et de groupes à un Ruban existant. Temps estimé : 10 minutes

Vous devez avoir complété l'Exercice 2 avant de débuter cet exercice.

Informations : Tous les fichiers de cet exercice sont localisés dans le répertoire “ 05 -

Ruban\Exercice3\AppRuban\”.

↙ Ajout de contrôles et groupes à un onglet.

1. A partir du projet utilisé dans l'Exercice 2. ou chargez le projet Visual Studio de Exercice2/AppRuban.sln .

2. .Dans le fichier BalisesRuban.xml, au niveau de la balise <Application.Commands> ajoutez les

balises suivantes pour définir des commandes dans de nouveaux groupes

<Command Name="GroupDatabase" Symbol="cmdGroupDatabase" Id="30004">

<Command.LabelTitle>Base de données</Command.LabelTitle>

</Command>

<Command Name="GroupClipboard" Symbol="cmdGroupClipboard" Id="30005">

<Command.LabelTitle>Press Papier</Command.LabelTitle>

</Command>

3. Ajoutez des bitmaps aux ressources du projet en copiant le contenu du répertoire BITMAPS à votre

projet.

Puis ajoutez-les au projet, en cliquant droit sur le nom de projet Add existing Item (sélectionnez

chaque bitmap suivantes ::

AddTableL.bmp

AddTableS.bmp

Copy.bmp

Cut.bmp

DeleteTableL.bmp

DeleteTableS.bmp

Paste.bmp

PrintRelationshipsL.bmp

PrintRelationshipsS.bmp

4. Au niveau de la balise <Application.Commands> ajoutez les commandes pour les nouveaux

boutons.

<Command Name="AddTable" Symbol="cmdAddTable" Id="30006"

LabelTitle="Ajouter une Table">

<Command.TooltipTitle>Ajout d'une Table</Command.TooltipTitle>

<Command.TooltipDescription>Ajout d'une

Table</Command.TooltipDescription>


<Image Source="AddTableL.bmp"/>


</Command>

<Command Name="DeleteTable" Symbol="cmdDeleteTable" Id="30007"

LabelTitle="Supprimer une Table">

<Command.TooltipTitle>Suppression d'une Table</Command.TooltipTitle>

<Command.TooltipDescription>Suppression d'une



<Image Source="DeleteTableL.bmp"/>


</Command>

<Command Name="PrintRelationships" Symbol="cmdPrintRelationships"

Id="30008" LabelTitle="Imprimer les relations">

<Command.TooltipTitle>Imprimer les Relations</Command.TooltipTitle>

<Command.TooltipDescription>Imprimer les relations

</Command.TooltipDescription>


<Image Source="PrintRelationshipsL.bmp"/>


</Command>

<Command Name="Paste" Symbol="cmdPaste" Id="30009"

LabelTitle="Coller">

<Command.TooltipTitle>Coller</Command.TooltipTitle>

<Command.TooltipDescription>Coller</Command.TooltipDescription>


<Image Source="Paste.bmp"/>


</Command>

<Command Name="Cut" Symbol="cmdCut" Id="30010" LabelTitle="Couper">

<Command.TooltipTitle>Couper</Command.TooltipTitle>

<Command.TooltipDescription>Couper</Command.TooltipDescription>

<Command.SmallImages>

<Image Source="Cut.bmp"/>

</Command.SmallImages>

</Command>

<Command Name="Copy" Symbol="cmdCopy" Id="30011" LabelTitle="Copier">

<Command.TooltipTitle>Copier</Command.TooltipTitle>

<Command.TooltipDescription>Copier</Command.TooltipDescription>


<Image Source="Copy.bmp"/>


</Command>

5. Au niveau de la balise <Tab CommandName="TabAcceuil"> ajoutez les balises suivantes


<Group CommandName="GroupPrincipal" Template="TwoButtons">

<ToggleButton CommandName="MonChoix"/>


</Group>

<Group CommandName="GroupDatabase" SizeDefinition="ThreeButtons">

<Button CommandName="AddTable"/>

<Button CommandName="DeleteTable"/>

<Button CommandName="PrintRelationships"/>

</Group>

<Group CommandName="GroupClipboard" SizeDefinition

="BigButtonsAndSmallButtonsOrInputs">

<ControlGroup>

<Button CommandName="Paste"/>

</ControlGroup>

<ControlGroup>

<Button CommandName="Cut"/>

<Button CommandName="Copy"/>

</ControlGroup>

</Group>

</Tab>

6. Compilez et lancez l'application. Notez la disposition des boutons de chaque groupe en fonction des

différents modèles de SizeDefinition.

7. Maintenant déplacer la bordure droite de la fenêtre vers la gauche. Notez la flèche de déplacement sur

le ruban qui apparaît pour ce déplacer dans le Ruban, si jamais des contrôles ne sont pas visible.

↙ Redimensionnement automatique.

Nous allons maintenant voir comment il est possible que les contrôles d'un ruban et d'un groupe se

redimensionne automatiquement en fonction du redimensionnement de la fenêtre.

1. Ajoutez la balise de mise à l'échelle à l'ongle TabAcceuil. <Tab CommandName="TabAcceuil">:


<Tab.ScalingPolicy>

<ScalingPolicy>

<ScalingPolicy.IdealSizes>

<Scale Group="GroupPrincipal" Size="Large"/>

<Scale Group ="GroupDatabase" Size="Large"/>

<Scale Group ="GroupClipboard" Size="Large"/>

</ScalingPolicy.IdealSizes>

<Scale Group ="GroupClipboard" Size="Medium"/>

<Scale Group ="GroupClipboard" Size="Popup"/>

<Scale Group ="GroupDatabase" Size="Medium"/>

</ScalingPolicy>

</Tab.ScalingPolicy>

2. Maintenant compilez l'application et lancez-la. Redimensionnez la fenêtre afin qu'elle soit plus petite

que le Ruban.

Les groupes se redimensionnent automatiquement.

3. Vous constatez ici quelles que détails subtiles.

Que le groupe Press Papier n'a plus n'a pas d'Icone. Il faut alors lui en rajoutez un.

Que les icônes du groupe Base de données utilisés pour l'affichage réduit ne sont pas très précis

dans leur définition. Ceci est du au faite que le Ruban dans notre définition, prend le grand icone

et essai de le réduire. Pour éviter ce phénomène, nous allons utiliser des icones 16*16.

4. Ajoutez les balises suivantes à la balise <Application.Commands> :

<Command Name="GroupClipboard" Symbol="cmdGroupClipboard" Id="30005">

<Command.LabelTitle>Press Papier</Command.LabelTitle>


<Image Source="Paste.bmp"/>


</Command>

<Command Name="AddTable" Symbol="cmdAddTable" Id="30006"

LabelTitle="Add Table">

<Command.TooltipTitle>Ajout d'une Table</Command.TooltipTitle>

<Command.TooltipDescription>Ajout d'une Table



<Image Source="AddTableL.bmp"/>



<Image Source="AddTableS.bmp"/>


</Command>

<Command Name="DeleteTable" Symbol="cmdDeleteTable" Id="30007"

LabelTitle="Delete Table">

<Command.TooltipTitle>Supprimer une Table</Command.TooltipTitle>

<Command.TooltipDescription>Supprimer une



<Image Source="DeleteTableL.bmp"/>



<Image Source="DeleteTableS.bmp"/>


</Command>

<Command Name="PrintRelationships" Symbol="cmdPrintRelationships"

Id="30008" LabelTitle="Imprimer les relations">

<Command.TooltipTitle>Imprimer les relations </Command.TooltipTitle>

<Command.TooltipDescription>Imprimer les relations

</Command.TooltipDescription>


<Image Source="PrintRelationshipsL.bmp"/>



<Image Source="PrintRelationshipsS.bmp"/>


</Command>

5. Compilez et lancez le projet. Notez maintenant la manière dont les icônes d'affichent, juste en modifiant

les balises XML, mais en ne touchant pas au code C++ .

Exercice 4

Mapper les commandes Win32 existantes sur les commandes de Ruban. Temps estimé : 10 minutes

Vous devez avoir terminé l'Exercice 3 pour commencez cet Exercice 4, dans lequel nous allons mapper les

commandes de notre application Win32 (IDM_EXIT, IDM_ABOUT) de départ sur les commandes d'un ruban.

Nous allons également intégrer le bouton d'aide à notre ruban, ainsi que la barre d'accès rapide

Informations : Tous les fichiers de cet exercice sont localisés dans le répertoire “ 05 -

Ruban\Exercice4\AppRuban\”.

↙ Mapper les commandes Win32 sur des commandes de Ruban

1. Ouvrez le fichier Ruban.cpp et ajoutez-y une référence globale au handle de la fenêtre parent. IUIFramework* g_pFramework = NULL;

HWND _hwndParent;

2. Dans la méthode InitialisationRuban, ajoutez en début la ligne de code suivante :

_hwndParent=hWindowFrame;

Nous utiliserons notre handle de fenêtre dans la méthode Execute pour envoyer un message à la

fenêtre parent.

3. Dans la méthode Execute, modifiez les lignes suivantes : if (nCmdID == cmdMonBouton)

{

MessageBox(NULL, L"Vous avez cliqué sur mon bouton !",L"La méthode Execute ",

MB_OK);

} else if (nCmdID == cmdMonChoix )...

//Code omis pour plus de clarté

par une instruction de type switch

switch (nCmdID)

{

case cmdMonBouton:

//Code omis pour plus de clarté.....

case cmdMonChoix:

. //Code omis pour plus de clarté.....

default :

SendMessage(_hwndParent,WM_COMMAND, nCmdID, 0);

break;

}

4. La méthode SendMessage, envoi le message WM_COMMAND a la fenêtre parent, avec un numéro de

commande (nCmdID) correspondant au numéro de message de départ (ex 105 pour fermer la fenêtre)

5. Ouvrez le fichier BalisesRuban.xml, au niveau de la balise <Application.Commands> ajoutez-y <Command Name='Fermer' Symbol="cmdFermer" Id="105" LabelTitle='Fermer'>


<Image Source='ExitHH.bmp'/>


</Command><Command Name="Aide" Symbol="cmdAide" Id="104"/>

A noter que nous avons utilisés les mêmes numéros d'ID définis dans le fichier resource.h, pour les

commandes IDM_EXIT, et IDM_ABOUT

6. Compilez et exécutez l'application. Désormais le bouton Fermer est actif.

↙ Ajout d'un bouton aide et de la barre d'accès rapide à notre ruban.

1. Ouvrez le ficher BalisesRuban.xml ajoutez-y les lignes suivantes au niveau de la balise

<Application.Commands>

<Command Name="QAT" Symbol="cmdQAT" Id="50000" />

2. Ajoutez-y également au niveau de la balise <Application.Views> les balises suivantes : <Ribbon.HelpButton>

<HelpButton CommandName="Aide" />

</Ribbon.HelpButton>

<Ribbon.QuickAccessToolbar>

<QuickAccessToolbar CommandName="QAT">

<QuickAccessToolbar.ApplicationDefaults>

<Button CommandName="MonBouton"

ApplicationDefaults.IsChecked="false"/>

<Button CommandName="Fermer"

ApplicationDefaults.IsChecked="true"/>

</QuickAccessToolbar.ApplicationDefaults>

</QuickAccessToolbar>

</Ribbon.QuickAccessToolbar>

3. Compilez et lancez l'application : Le bouton d'aide apparait alors à droite du Ruban et est actif, ainsi que

la barre d'accès rapide, avec par défaut le bouton Fermer.

Conclusion. Ce tutoriel n'aborde que les bases du développement de Ruban Windows, mais nous espérons qu'il vous a

donné envie de continuer.

Tutoriel - Introduction au Ruban de Windows...

Documents

Transcript of Tutoriel - Introduction au Ruban de Windows...