Programmation par Objets en C++

(1)

Programmation par Objets en C++

Cl ´ement PERNET

L3-MI, UFR IM²AG, Universit ´e Grenoble Alpes

(2)

Plan du cours

Programmation graphique et ´ev ´enementielle (6-7)

(3)

Plan

Programmation graphique et év énementielle (6-7) G én éralit és

La GUI wxWidget

Premiers composants : textes Gestion des ´Evennements Organisation en panels Composants usuels

(4)

Plan

La GUI wxWidget

(5)

Programmation graphique et ´ev ´enementielle

Programme `a interface console

I l’utilisateur se laisse guider par le programme I dialogues ´equentiel

I En mode texte

Programme `a interface graphique

GUI : Graphical User Interface

I aspect graphique des contr ôles (boutons, fen être, boˆıtes, menus d éroulants, ...)

I l’utilisateur donne des ordres (clics sur menus, boutons, ...) I comportement ´ev ´enementieldu programme et non plus

s ´equentiel

(6)

Programmation graphique et ´ev ´enementielle

Programme `a interface console

I l’utilisateur se laisse guider par le programme I dialogues ´equentiel

I En mode texte

Programme `a interface graphique

GUI : Graphical User Interface

I aspect graphique des contr ôles (boutons, fen être, boˆıtes, menus d éroulants, ...)

I l’utilisateur donne des ordres (clics sur menus, boutons, ...) I comportement ´ev ´enementieldu programme et non plus

s ´equentiel

(7)

Quelques biblioth `eques C++ de GUI (les + connues)

Depuis Syst Desktop env.

Utilis ´e par license

wxWidget 1992 Win, Linux, Mac, iOS

Dropbox, aMule, Audacity, fileZilla, hugin, ...

wxWidget Licence

≈LGPL

Qt 1995 Win,

Linux, Mac, iOS, android, ...

KDE, blackberry, Telsa in-car UI

VLC, Adobe, Telegram, OBS, Mathematica, ...

GPL, LGPL, commerciale

GTK+ 1996 Win, Linux, Mac

Gnome, Cinnamon

Chromium, GIMP, inkscape, ...

GPL, LGPL, commerciale

(8)

Plan

La GUI wxWidget

(9)

Installation de wxWidget

https://www.wxwidgets.org/

Installation sous Linux Ubuntu

$> sudo apt install build-essential

$> sudo apt install libwxgtk3.0-gtk3-dev

$> cd /usr/include

$> sudo ln -sf wx-3.0/wx wx

Dans le Makefile :

CXXFLAGS=‘wx-config --cxxflags‘

LDLIBS=‘wx-config --libs‘

(10)

Fonctionnement : une premi `ere fen ˆetre

I Une f ênetre est un objet d ériv é dewxFrame fenetre.h

#include <wx/wx.h>

class Fenetre : public wxFrame{

public:

Fenetre(const wxString& title);

};

fenetre.cpp

#include <fenetre.h>

Fenetre::Fenetre(const wxString& title)

: wxFrame (NULL, wxID_ANY, title, wxDefaultPosition, wxSize(250, 150)) {

Centre();

}

(11)

Fonctionnement : une premi `ere fen ˆetre

I Toute application xwWidget repose sur un objet d’une classe d ´eriv ´ee dewxApp.

Initialisation : la m éthode virtuelleOnInitdoit être red éfinie

class MyApp : public wxApp { public:

bool OnInit() override;

};

(12)

Fonctionnement : une premi `ere fen ˆetre

I Toute application xwWidget repose sur un objet d’une classe d ´eriv ´ee dewxApp.

Initialisation : la m éthode virtuelleOnInitdoit être red éfinie

I pour cr ´eer la fen ˆetre principale I est la rendre visible

};

bool MyApp::OnInit() {

Fenetre *fenetre = new Fenetre(wxT("Ma Fenetre"));

fenetre->Show(true);

return true;

}

IMPLEMENT_APP(MyApp)

}

(13)

Instanciation et lancement automatique

IMPLEMENT_APP(MyApp)etDECLARE_APPg ´en `erent automatiquement :

I lemain

I qui instancie un objet deMyApp

I et appelle sonOnInit. Sifalseest retourn ´e : arr ˆet de l’application

I cr é é la fonction globalewxGetApp()renvoyant une ref érence vers cet objet

(14)

Une premi ère fen être (r ésum é)

fenetre.h

public:

};

fenetre.cpp

Fenetre::Fenetre(const wxString&

title)

: wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(250, 150)) { Centre(); // pour centrer la

fenˆetre au milieu de l’´e cran

}

main.h

};

main.cpp

#include "main.h"

#include "fenetre.h"

bool MyApp::OnInit() {

Fenetre *fenetre = new Fenetre (wxT("Ma Fenetre"));

fenetre->Show(true);

return true;

}

IMPLEMENT_APP(MyApp);

(15)

Plan

La GUI wxWidget

(16)

Ajout de composants `a une fen ˆetre

I comme attributs (pointeurs)

I construits explicitement (new) dans le constructeur de la fen ˆetre

I connaˆıt sa fen être car pass ée (parthis) à son constructeur

I associ ´e `a un identifiant (simpleintd’unenum)

I puis évetuellement cr éation d’év énementsliant l’objet (ID)

à une m éthode d écrivant l’action à faire.

(17)

Le texte statique : la classe

wxStaticText fenetre.h

public:

wxStaticText * monTxT;

};

enum {STATICTXT_monTxT = 101 }; // ID du composant

fenetre.cpp

:wxFrame(NULL,wxID_ANY,title,wxDefaultPosition,wxSize(280,160)){

monTxt = new wxStaticText (this, // passage de la fenetre STATICTXT_monTxT, // ID

_T("Un texte"), // texte wxDefaultPosition,// position wxDefaultSize // taille );

}

(18)

Le text statique : la classe

wxStaticText

I lorsqu’il n’y a qu’un composant sur une fen être, il est redimensionn é à la taille maximale de la fen être.

(19)

La barre d’ ´etat

Dans le constructeur de la fen ˆetre :CreateStatusBar(n) pour cr ´eernzones

Fenetre(...) : wxFrame(...){

...

CreateStatusBar (2); // avec 2 zones de texte SetStatusText(wxT("Bonjour zone 0"),0);

SetStatusText(wxT("Bonjour zone 1"),1);

}

Syst `eme de pile de messages :

getStatusBar(): retourne 1 ptr vers la StatusBar de la fen. pushStatusText("txt", i): empile ”txt” dans la zonei popStatusText(i): d ´epile le texte de la zonei

(20)

La barre d’ ´etat

Dans le constructeur de la fen ˆetre :CreateStatusBar(n) pour cr ´eernzones

Fenetre(...) : wxFrame(...){

...

CreateStatusBar (2); // avec 2 zones de texte SetStatusText(wxT("Bonjour zone 0"),0);

SetStatusText(wxT("Bonjour zone 1"),1);

}

Syst `eme de pile de messages :

getStatusBar(): retourne 1 ptr vers la StatusBar de la fen.

pushStatusText("txt", i): empile ”txt” dans la zonei popStatusText(i): d ´epile le texte de la zonei

(21)

Plan

La GUI wxWidget

(22)

Gestion des ´evennements

Prog. év énementielle :les actions sont d éclench ées par des

´ev ´enements provenant :

de l’utilisateur : clic souris sur un bouton, un menu, saisie de texte, survol d’une zone par la souris, touche press ´ee,

ou autre : timer écoul é, activit é r éseau, etc

Un év énement est d écrit par :

un type : valeur du typewxEventType, ID unique de la nature de l’ ´ev ´enement

une classe : objet d’une classe d ériv ée dewxEventcontenant les informations li ées à l’evt : plusieurs types partagent la m ême classe (ex :wxCommandEvent pour boutons et s élection de list-box)

une source : l’objet ayant g én ér é l’ayant g én ér é

(23)

Gestion des ´evennements

Prog. év énementielle :les actions sont d éclench ées par des

´ev ´enements provenant :

de l’utilisateur : clic souris sur un bouton, un menu, saisie de texte, survol d’une zone par la souris, touche press ´ee,

ou autre : timer écoul é, activit é r éseau, etc Un év énement est d écrit par :

un type : valeur du typewxEventType, ID unique de la nature de l’ ´ev ´enement

une classe : objet d’une classe d ériv ée dewxEventcontenant les informations li ées à l’evt : plusieurs types partagent la m ême classe (ex :wxCommandEvent pour boutons et s élection de list-box)

une source : l’objet ayant g én ér é l’ayant g én ér é

(24)

Gestion des ´ev ´enements

Deux modes :

statique : La table des év énements (par macros) fix ée à la compilation

ne peut g érer que les év énements de l’objet o ù elle est d éfinie

dynamique : La table des ´ev ´enementsBind

lie n’importe quel év énement à n’importe quelle fonction

modifiable à l’ éx écution

(25)

Gestion des ´ev ´enements

La table des ´ev ´enements

I Gestion localis ée à une classe d ériv ée de

wxEventHandler. C’est le cas dewxWindow, wxFrame en g én éral g ér é dans la fen être portant les composants

I wxDECLARE_EVENT_TABLE()dans la d ´eclaration de la classe

I une/des m éthodes gestionnaire d’ év énement : void monGest (EvtType& ev);

o ùEvtTypeest d ériv ée dewxEvent

I D ´efinition (dans le cpp de d ´efinition de la classe)

wxBEGIN_EVENT_TABLE(MaFenetre, wxFrame) EVT_BUTTON(BUTTON_id, MyFrame::MonGest) EVT_MENU(MENU_about, MyFrame::GestAbout) EVT_SIZE(MyFrame::GestSize)

wxEND_EVENT_TABLE()

(26)

Gestion des ´ev ´enements

wxEventHandler. C’est le cas dewxWindow, wxFrame en g én éral g ér é dans la fen être portant les composants I wxDECLARE_EVENT_TABLE()dans la d éclaration de la

classe

wxEND_EVENT_TABLE()

(27)

Gestion des ´ev ´enements

classe

wxEND_EVENT_TABLE()

(28)

Gestion des ´ev ´enements

classe

wxEND_EVENT_TABLE()

(29)

Gestion des ´ev ´enements

I Un boucle infinie attend l’apparition d’un ´ev ´ennement I Lorsqu’il y en a un, il passe au crible de la table

I S’il y a correspondance, le gestionnaire indiqu é est lanc é callback: le programmeur r éprend la main

L’argument pass é au gestionnaire v éhicule les informations sp écifiques à l’ év énement :

void MaFenetre::GestQuit (wxCommandEvent& ev){

Close(true);

}

void MaFenetre::GestSize(wxSizeEvent& event){

wxSize size = event.GetSize();

...

}

(30)

Un exemple : le bouton

La classewxButton

fenetre.h

public:

wxButton * monBtnQuit;

wxButton * monBtnChgTxt;

// méthodes callback: exécutées lorsque le bouton est appuyé void SiQuit (wxCommandEvent& event );

void SiChgTxt (wxCommandEvent& event );

DECLARE_EVENT_TABLE() // déclaration de la table d’événements

};

enum {BUTTON_quit = 101, BUTTON_chgtxt = 102 };// ID des boutons

(31)

Le bouton

fenetre.cpp

: wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize (250, 150)) {

// construction des boutons

monBtnQuit = new wxButton (this, // passage de la fenetre BUTTON_quit, // ID

_T("Quit"), // texte wxPosition(20,20),// position wxDefaultSize // taille );

monBtnChgTxt = new wxButton (this, BUTTON_chgtxt, _T("Change Txt"),

wxPosition(20,60),wxDefaultSize);

}

BEGIN_EVENT_TABLE(Fenetre,wxFrame )//Indique qu’il faut ex´ecuter EVT_BUTTON ( BUTTON_quit, Fenetre::SiQuit ) // SiQuit EVT_BUTTON ( BUTTON_chgtxt, Fenetre::SiTitre ) // SiTitre END_EVENT_TABLE() // quand le bouton est press´e

void Fenetre::SiQuit (wxCommandEvent& ev){Close(TRUE);}

void Fenetre::SiTitre(wxCommandEvent& ev){SetTitle("Nv titre");}

(32)

Le bouton

(33)

Plan

La GUI wxWidget

(34)

Panel de disposition

Pour structurer les composants au sein d’une fen ˆetre, on les dispose dans desPanels

fenetre.h

public:

wxButton * monBtnQuit;

wxButton * monBtnTitre;

wxStaticText * monTxt;

wxPanel * monPanelG; // Panel Gauche wxPanel * monPanelD; // Panel Droite void SiQuit (wxCommandEvent& ev);

void SiBonsoir (wxCommandEvent& ev);

DECLARE_EVENT_TABLE() };

enum {BUTTON_Quit = 101, BUTTON_Bonsoir = 102, STATICTXT_txt = 103

};

(35)

Panel de disposition

fenetre.cpp

Fenetre::Fenetre(const wxString& title):wxFrame(...) { monPanelG = new wxPanel (this,wxID_ANY,

wxPoint(1,1),wxSize(120,120));

monPanelD = new wxPanel (this,wxID_ANY,

wxPoint(140,1),wxSize(120,120));

monBtnQuit = new wxButton (monPanelG, BUTTON_Quit, wxT("Quit") ,

wxPoint(20,20));

monBtnTitre = new wxButton (monPanelG, BUTTON_Bonsoir, wxT("Bonsoir"), wxPoint(20,60));

monTxt = new wxStaticText (monPanelD, STATICTXT_txt,

wxT("Bonjour"), wxPoint(20,20));

}

void Fenetre::SiQuit (wxCommandEvent& ev){Close(TRUE);}

void Fenetre::SiBonsoir (wxCommandEvent& ev){

monTxt->SetLabel("Bonsoir");

}

BEGIN_EVENT_TABLE(Fenetre,wxFrame )

EVT_BUTTON ( BUTTON_Quit, Fenetre::SiQuit ) EVT_BUTTON ( BUTTON_Bonsoir, Fenetre::SiBonsoir ) END_EVENT_TABLE()

(36)

Panel de disposition

(37)

Disposition semi-automatis ´ee : les sizer

wsSizer

Gestionnaires de positionnement : I Permettent de :

I d ´ecrire le positionnement de composants graphiques de fac¸on haut-niveau

I g ´erer les modifications lors d’un redimensionnement I De plusieurs types :

wxBoxSizer wxGridSizer wxFlexGridSizer

...

A approfondir vous-m ˆeme si besoin !`

(38)

Plan

La GUI wxWidget

(39)

Zone de saisie de texte

wxTextCtrl: affiche un texte ´editable

I Construction :

wxTextCtrl * t = new wxTextCtrl(this, ID, wxT("Un texte"),wxPosition,wxSize);

I int GetNumberOfLines()

I int GetLineLength(int LineNb) I wsString GetLineText(int LineNb) I Surcharge de l’op ´erateur<<avecwsStringet

std::streambuf I Ev ´enements :´

I EVT_TEXT: quand le texte est chang ´e

I EVT_TEXT_ENTER: quand la toucheENTREEa ét é press ée

(40)

Zone de saisie de texte

I Construction :

(41)

Zone de saisie de texte

I Construction :

std::streambuf

I Ev ´enements :´

(42)

Zone de saisie de texte

I Construction :

(43)

Composant de dessin graphique

wxPaintDC

I outil pour dessiner sur la zone client de la fen ˆetre, via un

´ev ´enemmentwxPaintEvent

I Un év énementwxPaintEventest g én ér é à la cr éation de la f én être et à chaque redimensionnement

I D’autres Device Contexts (DC) sont disponibles : I wxPostScriptDC: dans un fichier PS I wxPrinter: sur une imprimante I wxScreen: n’importe o ù sur l’ écran I wxMemory: dans un bitmap en m émoire

(44)

Composant de dessin graphique : dessin d’une ligne

fenetre.h

public:

void OnPaint(wxPaintEvent& event);

DECLARE_EVENT_TABLE()

};

(45)

Composant de dessin graphique : dessin d’une ligne

fenetre.cpp

Fenetre::Fenetre(const wxString& title): wxFrame(NULL, wxID_ANY, title, wxDefaultPosition, wxSize(280, 160)) {}

void Fenetre::OnPaint(wxPaintEvent& ev){

wxPaintDC dc(this); // constr. du wxPaint `a chaque appel wxCoord x1 = 50, y1 = 60, x2 = 190, y2 = 60;

dc.DrawLine(x1, y1, x2, y2); // tracer de la ligne }

BEGIN_EVENT_TABLE(Fenetre,wxFrame)

EVT_PAINT (Fenetre::OnPaint ) // call back de OnPaint END_EVENT_TABLE()

(46)

Composant de dessin graphique : dessin de formes

fenetre.cpp

void Fenetre::OnPaint(wxPaintEvent& ev){

wxPaintDC dc(this); // constr. du wxPaint `a chaque appel dc.DrawText(wxT("Voici quelques formes"), 10, 10); // un txt dc.DrawPoint(130,10); dc.DrawPoint(132,12); // 2 points wxColour green; green.Set(wxT("#619e1b")); // couleur RGB dc.SetPen(wxPen(*wxRED, 1, wxSOLID)); // crayon rouge

dc.SetBrush(*wxBLUE_BRUSH); // brosse bleue pr´ed´efinie dc.DrawRectangle(10, 50, 50, 50); // un rectangle

dc.SetPen(wxPen(green,5,wxSOLID)); // crayon ´epais vert dc.DrawEllipse(80, 50, 50, 60); // une ellipse }

BEGIN_EVENT_TABLE(Fenetre,wxFrame)

EVT_PAINT (Fenetre::OnPaint ) // call back de OnPaint END_EVENT_TABLE()

(47)

Les horloges wxTimer

I Cr ´ee une horloge

I un callback à chaque tic d’horloge (rend la main de façon r éguili ère) : év énnementEVT_TIMER

I intervalle des tics, donn ´e en argument (millisecondes) `a wxTimer::Start

fenetre.h

class Fenetre : public wxFrame{ int val;

static const int interval = 1000; // 1000 ms public:

Fenetre(const wxString& title); wxStaticText * txt;

wxTimer * timer;

void OnTimer(wxTimerEvent& event); DECLARE_EVENT_TABLE()

};

enum{myTIMER_ID = 101,myTXT_ID = 102};

(48)

Les horloges wxTimer

I Cr ´ee une horloge

I un callback à chaque tic d’horloge (rend la main de façon r éguili ère) : év énnementEVT_TIMER

I intervalle des tics, donn ´e en argument (millisecondes) `a wxTimer::Start

fenetre.h

int val;

static const int interval = 1000; // 1000 ms public:

wxStaticText * txt;

wxTimer * timer;

void OnTimer(wxTimerEvent& event);

DECLARE_EVENT_TABLE() };

enum{myTIMER_ID = 101,myTXT_ID = 102};

(49)

Les horloges wxTimer

fenetre.cpp

:wxFrame(NULL,wxID_ANY,title,wxDefaultPosition,wxSize(200,140)), val(0) {

txt = new wxStaticText (this, myTXT_ID, wxString("0"), wxPoint(20,20), wxSize(20,100));

timer = new wxTimer(this, myTIMER_ID);

timer->Start(interval);

}

void Fenetre::OnTimer(wxTimerEvent& ev){

val++;

txt->SetLabel(wxString::Format(wxT("%i"),val));

}

BEGIN_EVENT_TABLE(Fenetre,wxFrame )//Indique qu’il faut ex´ecuter EVT_TIMER (myTIMER_ID,Fenetre::OnTimer)

END_EVENT_TABLE() // quand le bouton est press´e

(50)

Les horloges wxTimer

fenetre.cpp

}

val++;

}

(51)

Les horloges wxTimer

fenetre.cpp

}

val++;

}

(52)

Les horloges wxTimer

fenetre.cpp

}

val++;

}

(53)

Les horloges wxTimer

fenetre.cpp

}

val++;

}

(54)

Les horloges wxTimer

fenetre.cpp

}

val++;

}