Vous êtes sur la page 1sur 23

Chapitre 11 : Les interfaces graphiques

261

Chapitre 11

Les interfaces graphiques (wxWidgets)

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

262

1. Dfinition de linterface graphique


- Une interface graphique est un ensemble de programmes permettant d'utiliser un systme donn de manire plus souple et intuitive que les lignes de commande qui sont parfois difficiles comprendre.

- Avec la rapidit croissante de linternet, de plus en plus des personnes ou des socits aimeraient offrir des services ou contrler divers quipements partir du rseau.

- Linterface graphique ct utilisateur devra donc fonctionner indpendamment du matriel, et doit agir comme un simple client recevant et envoyant des donnes critiques (ncessitant des mesures de scurit appropries) ou des donnes non critiques.

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

263

Quand vous voyez ceci

En ralit vous avez cod ceci

- Il existe donc des composants graphiques qui en contiennent d'autres (et grent leur apparition, leur positionnement, ...) et d'autres qui n'en contiennent pas tels les boutons poussoirs, les fentres textes de saisie, ... Ces derniers sont parfois appels les contrles.

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

264

2. Botes outils et Langages de programmation


- Java Dvelopp par la compagnie SUN en 1995. Indpendant de la plateforme. AWT est le paquetage de base pour construire et manipuler des interfaces graphiques. Il est parmi les paquetages originaux de Java. Swing est le nouveau paquetage. Ses composantes sont crites, manipules et affiches compltement en Java ("pur" java). Java est dans sa version 6. - Microsoft Avant 2001, il y avait deux possibilits : Visual Basic ou bien Visual C/C++ (MFC). o Visual Basic : pour des applications simples, pas complexes de tous les jours. o Visual C/C++ (MFC : Microsoft Foundation Classes) : pour les interfaces plus complexes ncessitant une forte interaction avec le gestionnaire de fentre la Windows etc. Linterface de dveloppement tait Visual Studio 6 .

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

265

.NET (depuis 2000) o Sa naissance Juillet 2000, et cest le premier framework dont la version 1.0 a t rendue publique le 15 janvier 2002. o Laspect le plus intressant de .NET se situe au niveau de la plateforme de dveloppement et des langages quil met en avant. o Il a permis dunifier lenvironnement de dveloppement. o Avant son arrive, le choix dun outil ou dune technologie de dveloppement de Microsoft tait une tche assez ardue! Lexplication est que les solutions taient vastes et pouvaient impliquer un des gadgets Visual Basic 6.0, que C++, VBScript, MFC, DCOM, ATL etc. o Par ailleurs, Microsoft perdait du terrain devant la concurrence de SUN et son langage Java. o Il fallait une solution intgre, ouverte vers le web. o Lobjectif est donc le dveloppement de manire simple dapplications web inter portables do larrive de .NET . o La version actuelle du framework est la 3.0, alors que celle de linterface de dveloppement est Visual Studio 2005 .

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

266

- C/C++ : Qt : dveloppe par Trolltech . Langage : C++. Disponible sous licence GPL ou commerciale. Disponible sous GPL depuis peu la communaut Windows. Exemple : KDE, gestionnaire de fentre sous Linux. Navigateur Opera. wxWidgets : dveloppe par la communaut Open Source . Langage : C++. Lancien nom wxWindows . Disponible sous licence LGPL. Disponible depuis plus dune dizaine dannes. Exemple : AOL Communicator. GTK+/GTKMM : dveloppe par la communaut Open Source . Langage : C (gtkmm C++) Elle a vu le jour cause des contraintes de licences associes lutilisation de Qt. Version Windows chaotique ! Il faut tre sacrment trs patient ! Exemple : Gnome, gestionnaire de fentre sous Linux. Gimp (images). Pour la suite de ce cours, nous allons dcrire la bibliothque wxWidgets .

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

267

3. Bote outils wxWidgets


3.1. Gnralits - wxWidgets est un logiciel libre qui est compos dun ensemble doutils, regroups dans une bibliothque et conus pour fonctionner les uns avec les autres de faon complmentaire. - wxWidgets est sous License LGPL (Library General Public Licence). Ceci facilite la redistribution des binaires. - wxWidgets a lavantage de fonctionner avec la plupart des compilateurs. - wxWidgets donne linterface graphique lapparence du systme dexploitation sur laquelle elle a t dveloppe. Ceci permet dviter le dpaysement. - wxWidgets est disponible sur une multitude de plateformes Windows, Linux, Unix, MacOS, Palm etc. - Cette bote outils a vu le jour en 1992 suite au travail de Julian Smart , un chercheur de luniversit dEdinburgh. - Julian Smart a dvelopp la librairie pour raliser des interfaces graphiques sous Windows (w) et Sun (x) et ceci, dans un environnement fentr (Windows Manager) do le nom de dpart wxWindows . - Au dpart, cette librairie visait une compatibilit avec MFC 1.0 (Windows) et XView (Sun).

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

268

- Des modifications ont t apportes la librairie pour supporter un mode natif win32. Elle a laiss tomber XView au profit de Xt et Motif. - Par la suite, la librairie wxWidgets a t compltement repense pour la rendre claire, efficace et portable dautres systmes. Ainsi, en 1997 la version 2 de lAPI a vu le jour. - Depuis des classes non graphiques ont t ajoutes pour supporter diverses oprations comme la programmation rseau, le multitche, etc. - En 2004, la demande Microsoft, wxWindows a t renomme wxWidgets . 3.2. Outils ncessaires pour utiliser wxWidgets - La librairie peut-tre tlcharge partir de cette adresse : http://www.wxwidgets.org/ - En ralit, vous nallez tlcharger que le code source de cette librairie. - Il faudra donc la compiler par un compilateur donn pour une plateforme donne. Par la suite, il faudra linstaller pour quelle soit disponible durant le processus de compilation dun programme base de wxWidgets . - Toutes les informations relatives une installation et une utilisation sous Windows sont regroupes dans des fichiers ou rpertoires dont le nom comporte le tag msw . voir par exemple le rpertoire CHEMIN_wxWidgets\docs\msw .

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

269

- Pour gnrer cette librairie, nous vous conseillons dexcuter dabord la commande configure avant celle de make . En effet, la commande configure permet dajuster les paramtres du makefile utilis avec la commande make pour tenir compte de votre environnement de travail. - Si linstallation vous semble trop complique, vous pouvez tlcharger la version wxdevcpp disponible partir de cette adresse : http://wxdsgn.sourceforge.net - Cette version intgre de manire transparente wxWidgets loutil de dveloppement devcpp , - Attention : il est recommand de dsinstaller les versions antrieures de devcpp avant dinstaller wx-devcpp . 3.3. Quelques Tutoriaux - Il y a deux manires de dcrire lutilisation de wxWidgets : - Soit utiliser linterface de dveloppement associe pour raliser des interfaces graphiques : Voir ce lien pour une srie de tutoriaux : http://wxdsgn.sourceforge.net/tutorials/index.php - Soit coder manuellement ces interfaces graphiques. Voir pour cela le tutorial de David BEECH : (En-HTML) : http://www.bzzt.net/~wxwidgets/icpp_wx1.html (En-PDF) : http://www.bzzt.net/~wxwidgets/icpp_wx.pdf

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

270

(EN-ZIP) : http://www.bzzt.net/~wxwidgets/wxtute.zip (Fr-Traduction) : http://phenix.developpez.com/Tutoriel_wxWindows/Tutoriel%20WxWindows_1.htm - Pour ce cours, nous allons suivre lapproche manuelle et nous allons de temps autre dvelopper les exemples du tutorial de David BEECH . 3.4. Livres de rfrence Cross-Platform GUI Programming with wxWidgets Stefan Csomor, Kevin Hock, Julian Smart. Prentice Hall. - Une copie lectronique est disponible partir de cette adresse : http://www.phptr.com/content/images/0131473816/downloads/0131473816_book.pdf

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

271

4. Dveloppement dune interface graphique laide de wxWidgets


Une interface graphique avec wxWidgets consiste en : - Une application objet ; chaque application wxWidgets doit driver de la classe wxApp . - Un objet cadre frame ; cest la fentre principale. Elle contient une bordure et un titre. Un cadre peut avoir des objets comme une barre de menu, une barre d'tat, une barre doutils, une icne, etc. Il ne faudra pas confondre cette fentre avec la fentre de premier niveau ( Window ) qui est sans bordure (aucun affichage lcran). La frame est une instance de la classe wxFrame . Cette classe fournit une fentre dont la taille et la position peuvent tre modifies par le programmeur. - Les deux classes wxApp et wxFrame font parties de wxWindows . Pour pouvoir les utiliser il faudra inclure dans le programme le fichier den-tte wx/wx.h . 4.1. Cration dune application wxWidgets - Pour crer une application wxWidgets , on labore dabord une classe qui drive de la classe wxApp . - Lapplication va tre reprsente par une seule instance de cette classe drive. - Dans la classe drive, on surcharge la mthode bool OnInit( ) .

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

272

- Au lancement de notre application, le programme va excuter automatiquement la mthode virtuelle bool OnInit( ) . Par dfaut cette mthode ne fait rien. Nous allons la redfinir en consquence pour lui demander douvrir la fentre principale de notre application. - La mthode bool OnInit() renvoie true si les oprations se sont droules correctement, elle renvoie false dans le cas contraire. Dans ce cas lapplication est dtruite. - Dans la mthode OnInit nous allons crer lobjet cadre. Nous allons dfinir sa forme et son comportement.

// Fichier EditeurTxTApp.h #ifndef EDITEURTXTAPP_H #define EDITEURTXTAPP_H // Dclare la classe Application EditeurTxTApp // La dclaration minimale que l'on puisse crire class EditeurTxTApp : public wxApp { public: // Cette mthode doit tre redfinie. // Elle sera appele au dmarrage de l'application virtual bool OnInit(); }; #endif

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

273

// Fichier EditeurTxTApp.cpp #include <wx/wx.h> #include " EditeurTxTApp.h"

// // // // // // // // //

Le code pour crer une instance de EditeurTxTApp est interne, cach. Vous devez quand mme dire wxWidgets la nature de l'objet crer. Pour cela, nous allons faire appel la macro IMPLEMENT_APP . Cette dernire va demander wxWidgets de crer l'objet pass en argument ici EditeurTxTApp . La macro remplace en quelque sorte le point d'entre i.e. la fonction main , ou int WINAPI WinMain( ... ) la fonction associe une interface graphique

IMPLEMENT_APP(EditeurTxTApp) // Code de l'initialisation de l'application bool EditeurTxTApp::OnInit() { // On cre une instance de la classe wxFrame // On dfinit le texte qui saffichera dans le haut // de la fentre, son emplacement et sa taille. wxFrame *frame = new wxFrame((wxFrame*) NULL, -1, "Editeur de texte simpliste");

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

274

// // // // // //

On rend visible cette frame . Cette mthode ne fait pas partie de la classe wxFrame mais plutt de wxWindow . wxFrame a accs cette mthode car cette classe drive de wxWindow . Il faut avoir toujours en tte une ide du contenu des classes suprieures

frame->Show(TRUE); // // // // On informe que notre frame est la fentre principale. Ainsi lappel cette mthode permet de mettre la frame au dessus de toutes les fentres afin davoir le focus.

SetTopWindow(frame); // Retourne true si la cration s'est bien droule return true; }

- Nous navons mentionn nulle part dans le fichier EditeurTxTApp.cpp un appel pour dtruire la frame , une instance de EditeurTxTApp . La raison est toute simple : en mettant la frame comme tant la fentre principale de notre application, lapplication va se charger de la dtruire pour nous lors de la fermeture de cette dernire.

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

275

- Le rsultat obtenu est comme suit :

4.2. Utilisation de wxFrame - La classe wxFrame nous fournit les lments dune fentre standard, une fentre dont la taille peuttre modifie. - Comme dans lexemple prcdent, une fentre va avoir une bordure paisse et un titre. - Une fentre peut avoir aussi optionnellement une barre de menu, une barre d'tat, une barre doutils, une icne etc. - Une frame peut agir comme conteneur dautres composantes (boutons, zne de texte etc.) mais pas une autre fentre ni une autre frame . - wxFrame drive de wxWindows .

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

276

4.2.1 Cration dune frame

- Normalement, nous devons concevoir une classe qui drive de la classe wxFrame . - Cette manire va nous permettre dajouter des fonctionnalits propres notre classe, tout en profitant des fonctionnalits de la classe de base wxFrame .
// Fichier EditeurTxTApp.h #ifndef EDITEURTXTAPP_H #define EDITEURTXTAPP_H class EditeurTxTApp : public wxApp { public: virtual bool OnInit(); }; // Cration de la classe associe la fentre principale // qui va contenir un titre, une bordure etc. class TexteFrame : public wxFrame { public: // constructeur TexteFrame( const wxChar *titre, int xpos, int ypos, int width, int height); // destructeur ~TexteFrame(); }; #endif

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

277

// Fichier " EditeurTxTApp.cpp " #include <wx/wx.h> #include "EditeurTxTApp.h"

IMPLEMENT_APP(EditeurTxTApp)

bool EditeurTxTApp::OnInit() { // Crer la fentre principale. // Elle a un nom, un point de dpart (x,y), // une largeur et une hauteur TexteFrame *frame = new TexteFrame("Editeur de texte simpliste", 50, 50, 450, 300); frame->Show(TRUE); SetTopWindow(frame); return true; }

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

278

// Rien ajouter de particulier dans le constructeur. // On passe directement les paramtres au constructeur // de la classe de base TexteFrame::TexteFrame (const wxChar *titre, int xpos, int ypos, int width, int height) : wxFrame ( (wxFrame *) NULL, -1, titre, wxPoint(xpos, ypos), wxSize(width, height) ) {} // Idem rien de spcial dans le destructeur TexteFrame::~TexteFrame() {}

- Le constructeur de wxFrame est appel partir du constructeur de TexteFrame . - Le cast de NULL dans (wxFrame *) NULL est ncessaire pour assurer la portabilit entre les compilateurs. En effet certains compilateurs dfinissent NULL avec la valeur 0L . Dans ce cas aucune conversion vers un pointeur nest permise. Pour toute la suite de ce cours les pointeurs NULL seront forcement cast un type appropri.

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

279

- Le constructeur de wxFrame est dfini ainsi :


wxFrame(wxWindow* parent, wxWindowID id, const wxString& titre, const wxPoint& pos = wxDefaultPosition, const wxSize& dimension = wxDefaultSize, long style = wxDEFAULT_FRAME_STYLE, const wxString& nom = "frame");

- parent est un pointeur la fentre parent. Dans lexemple EditeurTxTApp , la frame na aucun parent ce qui explique la valeur (wxFrame *) NULL passe comme premier argument. - id est lidentificateur de la fentre. - titre est le titre de la fentre. Il sera affich en haut de la frame . - pos cest la position de la fentre. Il sagit du coin en haut gauche de notre fentre. La valeur est une instance de la classe wxPoint . Par exemple : pour positionner la frame aux coordonnes (5,20), il faut crire wxPoint(5,20) au niveau de ce paramtre. Une valeur (-1,-1) qui correspond la valeur par dfaut wxDefaultPosition , indique la position par dfaut choisie par le gestionnaire de fentres. - dimension correspond la dimension de la fentre. La valeur est une instance de la classe wxSize . Par exemple : pour que la frame ait une taille de (100x200) pixels, il faut crire wxSize(200,400) au niveau de ce paramtre. Une valeur (-1,-1) qui correspond la valeur par dfaut wxDefaultSize , indique la taille par dfaut choisie par le gestionnaire de fentres.

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

280

- style est le style de la fentre. wxWidgets dfinit plusieurs styles (voir la documentation) comme par exemple wxDEFAULT_FRAME_STYLE . Ce dernier dfinit la bote par dfaut qui contient les lments suivants (wxMINIMIZE | wxMAXIMIZE_BOX | wxRESIZE_BOX | wxSYSTEM_MENU | wxCAPTION). - nom est le nom de la frame . On lutilise assez souvent pour associer la frame un item.
TexteFrame *frame = new TexteFrame("Editeur de texte simpliste", 50, 50, 450, 300); TexteFrame::TexteFrame (const wxChar *titre, int xpos, int ypos, int width, int height) : wxFrame ( (wxFrame *) NULL, -1, titre, wxPoint(xpos, ypos), wxSize(width, height) ){}

titre = Editeur de texte simpliste , wxPoint(50,50), wxSize(450, 300). - La classe wxFrame contient CreateToolBar , GetTitle etc. plusieurs mthodes membres comme CreateStatusBar ,

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

281

4.2.2 Utilisation des contrles

- Aprs avoir construit une application minimaliste, nous allons lenrichir avec les outils ncessaires pour le traitement de texte. - wxTextCtrl est la classe en charge de laffichage et ldition du texte. - Il fournit les fonctionnalits dun diteur de texte comme : linsertion, la slection et la suppression de texte ; le couper, copier, coller ; le mouvement du curseur etc. - Le texte affich peut-tre sur une seule ligne ou plusieurs lignes cest juste une question de style . Ce style est choisi au dpart et permet dindiquer la fentre comment disposer le texte fourni lcran.
class TexteFrame : public wxFrame { public: // constructeur TexteFrame( const wxChar *titre, int xpos, int ypos, int width, int height); // destructeur ~TexteFrame(); private: // letexte est un pointeur vers un contrleur // de texte wxTextCtrl wxTextCtrl *leTexte; };

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

282

- On napporte des modifications que dans le constructeur de la classe comme suit :


TexteFrame::TexteFrame (const wxChar *titre, int xpos, int ypos, int width, int height) : wxFrame ( (wxFrame *) NULL, -1, titre, wxPoint(xpos, ypos), wxSize(width, height) ) { // Initialisation du pointeur la valeur "NULL caste" leTexte = (wxTextCtrl *) NULL; // // // // "leTexte = new wxTextCtrl( ... )" contient un paramtre "this" qui est une rfrence la fentre parent. Dans ce cas "this" pointe vers le cadre parent qui est en train ou qui vient juste d'tre construit.

leTexte = new wxTextCtrl ( this, -1, wxString("Maintenant c'est vous de taper un texte ...\n\n"), wxDefaultPosition, wxDefaultSize, wxTE_MULTILINE|wxTE_RICH2 );

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

283

// On fixe la couleur des caractres en rouge leTexte->SetDefaultStyle(wxTextAttr(wxColour(255,0,0))); leTexte->AppendText("En rouge?\n"); // On fixe la couleur de fond en gris clair leTexte->SetDefaultStyle(wxTextAttr (wxNullColour, *wxLIGHT_GREY)); leTexte->AppendText("Sur fond gris?\n"); // On change la couleur des caractres. Le fond reste le // mme i.e. gris clair leTexte->SetDefaultStyle(wxTextAttr(*wxBLUE)); leTexte->AppendText("En bleu sur fond gris?\n");

- Le texte Maintenant cest vous de taper un texte En rouge ? Sur fond gris ? En bleu sur fond gris sera affich comme texte par dfaut. - Le parent de wxTextCtrl est TexteFrame , on lui passe donc le pointeur this .

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

284

- Le constructeur de wxTextCtrl est dfini comme suit :


wxTextCtrl(wxWindow* parent, wxWindowID id, const wxString& valeur = "", const wxPoint& pos = wxDefaultPosition, const wxSize& dimension = wxDefaultSize, long style = 0, const wxValidator& validator = wxDefaultValidator, const wxString& nom = wxTextCtrlNameStr);

- On remarque que le constructeur wxTextCtrl est similaire dans sa forme au constructeur de la classe wxFrame . En effet, les constructeurs des classes qui drivent de wxWindow suivent le mme pattern. - parent est un pointeur la fentre parent. Il ne doit pas tre NULL . - id est lidentificateur de la fentre. Cest un id pour permettre le contrle de cet lment. -1 indique la valeur par dfaut. - valeur est le texte par dfaut. - pos cest la position (x, y) du coin en haut gauche. - dimension correspond dimension du contrleur (largeur, hauteur).

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

285

- style est le style de la fentre. wxTextCtrl dfinit des styles additionnels. Nous avons pris en exemple wxTE_MULTILINE pour signifier que le contrleur de texte permet dafficher le texte sur plusieurs lignes et wxTE_RICHE2 et ce, afin de profiter dun contrleur riche en fonctionnalits. Ce dernier sous le systme Windows permet dajuster correctement la couleur des caractres, du fond de lcran etc. Ce paramtre est ignor sur un systme autre que Windows . Les styles peuvent tre combins en utilisant loprateur binaire | comme : wxTE_MULTILINE|wxTE_RICH2 ou bien wxTE_MULTILINE|wxTE_RICH2|wxTE_CENTRE (plusieurs lignes avec un contrleur riche de niveau 2 et le texte est justifi au centre). - validator permet de valider les donnes qui sont transmises depuis le(s) contrle(s) vers la structure de donnes du programme. Il peut tre utilis pour limiter les entres exclusivement au format texte ou bien des donnes numriques.
-

nom est le nom de la fentre utilise pour le contrle.

- L aussi, nous navons mentionn nulle part dans le fichier EditeurTxTApp.cpp un appel pour dtruire le pointeur leTexte . Cela nest pas ncessaire, car le parent de wxTextCtrl , TexteFrame va se charger de dtruire lensemble de ses enfants par relation quand il est dtruit. - Nous avons fait appel dans lexemple plusieurs mthodes dfinies dans wxTextCtrl comme SetDefaultStyle et AppendText . La premire permet de dfinir le style par dfaut alors que la seconde permet dajouter dans le contrleur un texte. - Pour le style par dfaut, nous avons utilis des instances de wxTextAttr et wxColour . Le premier reprsente les attributs dun texte donn (couleur, taille, alignement etc.), alors que le second reprsente une combinaison des trois couleurs (rouge, vert et bleu). Il permet de fixer la couleur du dessin.

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

286

4.2.3 Ajouter une barre de menus

- Nous allons ajouter des menus pour permettre aux utilisateurs de cette application de lire le contenu dun fichier ou bien de prserver le texte modifi dans un fichier. - Nous distinguons deux types de menus : wxMenuBar et wxMenu . La barre de menus contient les noms des menus de haut niveau. Dans cet exemple, nous allons ajouter deux menus de haut niveau Fichier et Info . Le menu Fichier va contenir 3 menus items : Ouvrir , Sauvegarder et Quitter . Le menu Info contient litem Apropos . - Chaque menu ncessite un identificateur unique ID . Ces identificateurs sont utiliss pour associer les items avec leurs actions. La valeur de ID est un entier non nul.

// Fichier " EditeurTxTApp.h " #ifndef EDITEURTXTAPP_H #define EDITEURTXTAPP_H enum { ID_QUITTER = 1, ID_OUVRIR = 100, ID_SAUVEGARDER = 200, ID_APROPOS = 300 };

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

287

class EditeurTxTApp : public wxApp { public: virtual bool OnInit(); }; // Cration de la classe associe la fentre principale // qui va contenir un titre, une bordure etc. class TexteFrame : public wxFrame { public: // constructeur TexteFrame( const wxChar *titre, int xpos, int ypos, int width, int height); // destructeur ~TexteFrame(); private: // " letexte " est un pointeur vers un contrleur // de texte " wxTextCtrl " wxTextCtrl *leTexte; // une barre de menus : la barre de menus est // la pice situe en haut du cadre wxMenuBar *menuBar;

// un menu : cest un menu droulant vers le bas. wxMenu *fichierMenu; wxMenu *infoMenu; }; #endif

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

288

- Dans la classe TextFrame nous avons dfini une barre de menus wxMenuBar *menuBar et deux menus de haut niveau wxMenu *fichierMenu et wxMenu *infoMenu . - Le seul changement notable dans le fichier EditeurTxTApp.cpp se situe au niveau du constructeur de classe TexteFrame comme suit :
// Fichier " EditeurTxTApp.cpp " TexteFrame::TexteFrame (const wxChar *titre, int xpos, int ypos, int width, int height) : wxFrame ( (wxFrame *) NULL, -1, titre, wxPoint(xpos, ypos), wxSize(width, height) ) {

// Initialisation du pointeur la valeur "NULL caste" leTexte = (wxTextCtrl *) NULL; menuBar = (wxMenuBar *) NULL; fichierMenu = (wxMenu *) NULL;

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

289

leTexte = new wxTextCtrl ( this, -1, wxString("Maintenant c'est vous de taper un texte ...\n\n"), wxDefaultPosition, wxDefaultSize, wxTE_MULTILINE|wxTE_RICH2 ); //Nous avons cre une instance de wxMenu pour Fichier fichierMenu = new wxMenu; // Nous utilisons les mthodes Append() et AppendSeparator() // pour ajouter des items et des sparateurs ditems au menu // fichierMenu fichierMenu->Append(ID_OUVRIR, "&Ouvrir fichier"); fichierMenu->Append(ID_SAUVEGARDER, "&Sauvegarder fichier"); fichierMenu->AppendSeparator(); fichierMenu->Append(ID_QUITTER, "&Quitter"); // Place la cration du menu Apropos infoMenu = new wxMenu(); infoMenu->Append(ID_APROPOS, "&Apropos");

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

290

// // // // // // // // // //

Pour finir nous allons crer une instance de wxMenuBar, laquelle nous allons associer les menus Fichier et Apropos . Nous dclarons les proprits des menus dans un ordre inverse. Dabord les items puis le menu et pour terminer la barre de menus. C'est le principe des poupes russes. Noter comment le & est utilis dans les chanes "&Fichier" et "&Info". Cest un raccourci clavier un des lments de la barre de menus ou les items dun menu donn.

menuBar = new wxMenuBar; menuBar->Append(fichierMenu, "&Fichier"); menuBar->Append(infoMenu, "&Info"); // Nous utilisons par la suite la mthode SetMenuBar() // pour ajouter la barre de menus notre cadre SetMenuBar(menuBar); }

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

291

4.2.4 Ajouter une barre dtat

- La barre dtat permet dafficher des champs au bas de la frame . Ces champs sont sous la forme de chanes de caractres. - Nous utilisons les mthodes : CreateStatusBar pour la cration de la barre dtat dun ou plusieurs champs ; SetStatusText pour initialiser un champ donn et SetStatusWidths pour calibrer la largeur du champ dtat. - On napporte des modifications que dans le constructeur de la classe comme suit :
TexteFrame::TexteFrame (const wxChar *titre, int xpos, int ypos, int width, int height) : wxFrame ( (wxFrame *) NULL, -1, titre, wxPoint(xpos, ypos), wxSize(width, height) ) { // [] // On ajoute ces lignes la fin du constructeur // Nous allons ajouter notre cadre, une barre // d'tat contenant 3 champs CreateStatusBar(3);

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

292

// // // //

Nous ajustons les valeurs des champs l'aide de la mthode SetStatusBarText("string", numero_du_champ) de wxFrame. Dans cet exemple o la barre d'tat a 3 champs, "index_champ" prend une des valeurs: 0, 1 ou 2.

SetStatusText("champ 1", 0); SetStatusText("champ 2", 1); SetStatusText("champ 3", 2); }

- Lutilisateur de lapplication ne pourra pas grer cette barre dtat puisque sa gestion est uniquement du ressort de la frame .

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

293

4.2.5 Gestion des vnements des menus

- Vu que lapplication a des menus, lutilisateur aimerait bien les manipuler via le clavier ou la souris. Pour ce faire, le programme devra associer des traitements appropris aux actions possibles de l'utilisateur. - On distingue deux types d'vnements : vnements de bas niveau comme appuyer ou relcher un bouton de souris. vnements logiques comme cliquer sur une souris. - Si vous appuyez par exemple sur la lettre A , vous produisez les vnements suivants : 4 vnements de bas niveau : o appuie sur la touche shift o appuie sur la touche A o relchement de la touche A o relchement de la touche shift 1 vnement logique : o frappe du caractre A . - Un vnement reu dun menu est du type wxCommandEvent . - L'ide consiste dclarer dans la classe une mthode membre pour chaque vnement qui doit tre trait. Il est d'usage de donner comme prfixe ces mthodes le mot On (ou A ).

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

294

- Afin de traiter tous les vnements associs aux menus, nous allons les regrouper dans une table. Nous utilisons pour cela la directive DECLARE_EVENT_TABLE . - L'implmentation de la table est code dans le fichier .cpp comme suit :
BEGIN_EVENT_TABLE (NomClasse, NomClasseBase) EVT_TYPE (parametres, fonction) [....] END_EVENT_TABLE()

- On peut avoir dans le programme plusieurs tables d'vnements. Pour cette raison, nous devons prciser le nom de la classe dans la directive BEGIN_EVENT_TABLE .
-

Afin d'attacher une mthode quelconque un vnement donn, nous utilisons la directive EVT_TYPE . Il y a plusieurs types d'vnements: EVT_MENU , EVT_BUTTON etc.

- Les modifications apporter au fichier EditeurTxTApp.h sont comme suit :


// Fichier " EditeurTxTApp.h "

#ifndef EDITEURTXTAPP_H #define EDITEURTXTAPP_H

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

295

class EditeurTxTApp : public wxApp { public: virtual bool OnInit(); }; class TexteFrame : public wxFrame { public: // constructeur TexteFrame( const wxChar *titre, int xpos, int ypos, int width, int height); // destructeur ~TexteFrame(); // Menu Fichier | Ouvrir void OnFichierOuvrir(wxCommandEvent &event); // Menu Fichier | Sauvegarder void OnFichierSauvegarder(wxCommandEvent &event); // Menu Fichier | Quitter void OnFichierQuitter(wxCommandEvent &event); // Menu Info | Apropos void OnInfoApropos(wxCommandEvent &event); protected: DECLARE_EVENT_TABLE();

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

296

private: wxTextCtrl *leTexte; wxMenuBar *menuBar; wxMenu *fichierMenu; wxMenu *infoMenu; // // // // // Pour une question de design nous avons inclus directement dans la classe les identificateurs de menu. Le premier va prendre la valeur 100, le 2nd va avoir la valeur 101, le 3e 102 et le 4e 103, cause des proprits de enum .

enum { ID_QUITTER = 100, ID_OUVRIR, ID_SAUVEGARDER, ID_APROPOS }; }; #endif

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

297

- Nous ajoutons les lignes de code ci-dessous la fin du fichier EditeurTxTApp.cpp comme suit :
// Fichier " EditeurTxTApp.cpp " // [] BEGIN_EVENT_TABLE(TexteFrame, wxFrame) EVT_MENU(ID_OUVRIR, TexteFrame::OnFichierOuvrir) EVT_MENU(ID_SAUVEGARDER, TexteFrame::OnFichierSauvegarder) EVT_MENU(ID_QUITTER, TexteFrame::OnFichierQuitter) EVT_MENU(ID_APROPOS, TexteFrame::OnInfoApropos) END_EVENT_TABLE() void TexteFrame::OnFichierOuvrir(wxCommandEvent &event){ wxLogMessage("Fichier|Ouvrir"); } void TexteFrame::OnFichierSauvegarder(wxCommandEvent &event){ wxLogMessage("Fichier|Sauvegarder"); } void TexteFrame::OnFichierQuitter(wxCommandEvent &event){ Close(FALSE); } void TexteFrame::OnInfoApropos(wxCommandEvent &event){ wxLogMessage("Info|Apropos"); } // Fin fichier " EditeurTxTApp.cpp "

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

298

4.3. Utilisation des Dialog - Une bote de dialogue est une fentre avec une barre de titre. - La fentre peut tre dplace et peut contenir des contrleurs et dautres fentres. - Nous distinguons deux types de dialogue : modal (en anglais modal ) et non modal (en anglais modeless ). - Une bote de dialogue modal est une bote qui, en attente dune rponse, bloque laccs votre interface graphique tant quelle na pas reu de rponse. Un exemple est la bote sauvegarder sous qui, lorsque vous faites appel, vous ne pouvez plus accder la fentre parente tant que vous navez pas effectu la sauvegarde ou bien annul lopration de sauvegarde. - Une bote de dialogue non modal est tout le contraire dune bote de dialogue modal. Mme aprs avoir lanc cette bote de dialogue, laccs la fentre parente reste possible. Un exemple est le gestionnaire de favoris dans un navigateur. Le navigateur va ouvrir une fentre part pour grer les favoris et il vous permet en parallle daccder la fentre parente ici le navigateur. - Dans lapplication nous avons deux menus items pour louverture et la sauvegarde de fichiers. Nous pouvons utiliser dans ce cas la fentre de dialogue wxFileDialog . - Quand une bote de dialogue est utilise, elle doit tre dun look familier lusager du systme. Par exemple : pour ouvrir un fichier sous Windows nous allons faire appel wxFileDialog qui fera appel la fentre de dialogue de Windows car lusager est plus familier avec cette dernire. Il en sera de mme sur un autre systme.

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

299

- wxWindows fournit aux programmeurs un certain nombre de botes de dialogue parmi lesquelles : Classe (bote de dialogue) wxColourDialog wxFontDialog wxPrintDialog wxFileDialog wxDirDialog wxTextEntryDialog wxMessageDialog wxSingleChoiceDialog Description Affiche une bote de dialogue pour choisir une couleur Affiche une bote de dialogue pour choisir une fonte Affiche une bote de dialogue pour configurer une imprimante ou imprimer un document Affiche une bote de dialogue pour la sauvegarde ou louverture dun fichier Affiche une bote de dialogue pour choisir un rpertoire Affiche une bote de dialogue pour demander lusager dinsrer une seule ligne de texte Affiche une bote de dialogue avec un message sur une ligne ou plusieurs lignes avec les choix suivants : Ok, Yes (Oui), No (Non) et Cancel (Annuler) Affiche une bote de dialogue avec une liste de chanes et lusager doit en slectionner une

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

300

4.3.1 wxFileDialog

Cette bote de dialogue prsente lusager la possibilit de choisir un nom quand il veut ouvrir ou sauvegarder un fichier.

- Le constructeur de wxFileDialog est comme suit :


wxFileDialog(wxWindow* parent, const wxString& message = "Choisir un fichier", const wxString& RepParDefaut = "", const wxString& FichierParDefaut = "", const wxString& joker = "*.*", long style = 0, const wxPoint& pos = wxDefaultPosition);

- parent est la fentre qui dtient ce dialogue. - message est le titre du dialogue. - RepParDefaut est le nom du rpertoire o la bote de dialogue doit se positionner par dfaut. - FichierParDefaut est le nom du fichier utiliser par dfaut. - joker ( wildcard en anglais est quelque chose comme *.* ou bien *.txt . Ce paramtre est utilis pour filtrer les rponses affiches par la bote de dialogue. Il est possible de lister plusieurs

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

301

extensions la fois en utilisant la syntaxe description|extension comme suit : Tous les fichiers(*.*)|*.*|Fichiers Textes(*.txt)|*.txt|Fichiers Bitmap(*.bmp)|*.bmp . - style est le type de la bote de dialogue qui peut-tre : Style wxOPEN wxSAVE wxHide_READONLY wxOVERWRITE_PROMPT wxMULTIPLE - pos non utilise. Description Utiliser pour louverture Utiliser pour la sauvegarde Utiliser pour cacher les fichiers en mode de lecture uniquement Utiliser pour demander une confirmation quand un fichier sera cras Utiliser pour louverture uniquement. Elle permet la slection de plusieurs fichiers la fois

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

302

- Nous allons modifier le cur des deux mthodes c et c du fichier EditeurTxTApp.cpp comme suit :
// Fichier " EditeurTxTApp.cpp " // [] void TexteFrame::OnFichierOuvrir(wxCommandEvent &event){ wxFileDialog *dlg = new wxFileDialog(this, "Ouvrir un fichier texte", "", "", "Tous les fichiers(*.*)|*.*|Fichiers textes(*.txt)|*.txt", wxOPEN, wxDefaultPosition); if ( dlg->ShowModal() == wxID_OK ) leTexte->LoadFile(dlg->GetFilename()); dlg->Destroy(); } void TexteFrame::OnFichierSauvegarder(wxCommandEvent &event){ wxFileDialog *dlg = new wxFileDialog(this, "Sauvegarder un fichier texte", "", "", "Tous les fichiers(*.*)|*.*|Fichiers textes(*.txt)|*.txt", wxSAVE, wxDefaultPosition); if ( dlg->ShowModal() == wxID_OK ) leTexte->SaveFile(dlg->GetPath()); dlg->Destroy(); } // Fin fichier " EditeurTxTApp.cpp "

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

303

- Nous avons prcis dans la premire mthode que la bote de dialogue doit tre du type wxOpen et dans la seconde mthode du type wxSave . - Dans les deux mthodes nous avons fait appel la mthode ShowModal . Ceci signifie quaucune autre fentre ne peut obtenir le focus. Nous avons donc cr des botes de dialogue modal. Cette mthode retourne wxID_OK si lusager a appuy sur le bouton OK et, wxID_CANCEL dans le cas contraire. - La mthode GetFilename rcupre le nom du fichier slectionn lors de lopration douverture de fichier, alors que la mthode GetPath va retourner le chemin complet (nom fichier et nom du rpertoire) du fichier slectionn. - Nous utilisons les mthodes LoadFile et SaveFile dfinies dans wxTextCtrl pour charger ou sauvegarder le fichier. - Pour chaque bote de dialogue nous avons fait appel la mthode Destroy au lieu de dtruire les pointeurs directement. Ceci pour des raisons de consistance. wxWidgets retardent ainsi la destruction des botes de dialogue tant quil na pas termin le traitement de tous les vnements les affectant. wxWidgets vitent ainsi denvoyer des requtes des botes de dialogue dj dtruites. - Dans les deux oprations dcrites ci-dessous, nous constatons que dans les deux cas wxWidgets a fait appel aux interfaces de Windows responsables de louverture ou de la sauvegarde de fichiers. Ainsi lusager dun tel systme nest pas dpays quand il rencontre ce genre de botes de dialogue.

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

304

- Nous obtenons les rsultats suivants dans le cas dune ouverture dun fichier :

- On constate que le filtre est *.* , ce qui a permis dafficher tous les fichiers qui se trouvent dans le rpertoire courant de lapplication.

Mohamed N. Lokbani

v1.01

Programmation avance en C++

Chapitre 11 : Les interfaces graphiques

305

- Nous obtenons les rsultats suivants dans le cas dune sauvegarde dun fichier :

- Dans ce cas nous avons opt pour le filtre est *.txt . Comme le rpertoire ne contient aucun fichier texte, la fentre ne propose aucun fichier.

Mohamed N. Lokbani

v1.01

Programmation avance en C++