Tutoriel wxWindows
de David BEECH traduction française par Patrick VALERI
Section C++ du site http://phenix.developez.com créé le 20 Novembre 2003
Remis à jour 17 Septembre 2004
Programmez avec wxWindows
Sixième Étape
Utilisation des « custom dialogs » avec sizers
Introduction aux « sizers » – Une brève explication
J'ai mentionné dans la précédente session que l'entrée en dur du code (hard-coding) était un moyen difficile de construire des boîtes de dialogues. Il y a un autre problème avec cette approche: cela implique que la programmation des boîtes de dialogues pour les opérations de redimensionnement est particulièrement difficile et les utilisateurs aiment être dans la capacité de redimensionner les objets.
Si vous prenez l'exemple de la précédente session (étape 5) et faites un petit changement à l'appel à la boite de dialogue dans l'évènement OnAbout vous verrez ce qui arrive quand la boîte de dialogue est redimensionnée; après que vous ayez construit l'exécutable bien sûr. Ajouter le style wxRESIZE_BORDER comme ci-dessous( Commentaire_5 )
void BasicFrame::OnAbout(wxCommandEvent & event)
{
BasicDialog
aboutDialog ( this,
-1,
"Your very own dialog",
wxPoint(100,100),
wxSize(200,200),
wxRESIZE_BORDER
);
Le dialogue est maintenant redimensionnable mais tout ce que vous avez obtenu en redimensionnant, c'est des champs d'espace vide. Les contrôles restent à l'endroit où ils étaient à l'origine. Vous pouvez bien sûr capturer l'évènement de redimensionnement et recalculer la taille et la position des contrôles: mais il existe un autre moyen plus facile, nous utilisons un sizer. C'est un contrôle qui contient d'autres contrôles et qui redimensionnent automatiquement les contrôles qu'il contient quand le parent du sizer est redimensionné. L'exemple que j'utilise ici est directement dans wxWindows.
Modification de l'étape 5 – Un dialogue personnalisé avec « sizers »
L'image ci-contre montre la boite de dialogue personnalisée à l'état de base. Ce que nous voulons pouvoir faire est de redimensionner la boite de dialogue, de maintenir la position relative des contrôles et la dimension relative du contrôle de texte dans la boite de dialogue.
Nous pouvons utiliser deux sortes de sizer dans cet exemple:
un wxBoxSizer ou,
un wxStaticBoxSizer
Tous deux sont dérivés de la classe abstraite wxSizer.
Le staticbox sizer peut contenir quelques textes statiques, le boxsizer est juste une boîte.
Il est d'usage de modéliser le dialogue et ses « sizers » et je l'ai montré ci-dessous.
Nous avons une hiérarchie de « sizers ». Comme les auteurs de wxWindows disent: l'idée de base dans une boite « sizers »est que les fenêtres soient le plus souvent arrangées dans la géométrie la plus simple, typiquement en une rangée ou une colonne ou toute géométrie de ce genre. Si vous avez une expérience de Delphi ou Visual Basic et avez l'habitude de glisser les contrôles sur une forme de base vous devez, au début, trouver cela, un peu gênant. Faites-moi confiance, et aux auteurs de wxWindows, utiliser les « sizers » est la meilleure méthode.()
Nous pouvons utiliser autant de sizers que nous voulons pour achever une présentation, en même temps et sans effort y apporter le redimensionnement. Nous pouvons aussi y ajouter d'autres fonctionnalité de wxWindows pour faire pour une présentation uniforme à l'écran en utilisant des objets à contrainte de disposition et des scindements de fenêtre(splitter). Nous verrons cela plus tard.
class BasicDialog: public wxDialog
{
public:
BasicDialog( wxWindow *parent,
wxWindowID id,
const wxString &title,
const wxPoint& pos = wxDefaultPosition,
const wxSize& size = wxDefaultSize,
long style = wxDEFAULT_DIALOG_STYLE );
virtual bool Validate();
wxTextCtrl * dialogText;
private:
void OnOk( wxCommandEvent &event );
private:
DECLARE_EVENT_TABLE()
}; |
Le fichier d'en-tête basic.h contient l'interface du dialogue. Pour la plupart, rien n'est changé de l'exemple précédent.
Bien sûr, il n'y a rien ici qui indique que le dialogue utilisera des « sizers » Tout le travail est fait par le constructeur.
BasicDialog::BasicDialog( wxWindow *parent,
wxWindowID id,
const wxString &title,
const wxPoint &position,
const wxSize& size,
long style
)
: wxDialog( parent, id, title, position, size, style )
{
wxString theTextData = "";
wxBoxSizer *topsizer = new wxBoxSizer( wxVERTICAL );
theTextData.append
("Thou art, indeed, just O Lord if I contend with Thee.\n"
"But sir: what I plead is just.\n"
"Why do sinner's ways prosper?\n"
"And why does disappointment all I endeavour end?\n"
"Wert Thou my enemy, O Thou my friend,\n"
"How wouldst Thou defeat and thwart me.\n\n"
); |
Le fichier d'implémentation contient le constructeur BasicDialog. J'ai laissé de coté la plupart du code d'implémentation mais vous pouvez le télécharger si vous le souhaitez (voir plus loin). Nous débutons la définition BasicDialog.
Nous créons quelques variables: theTextData détient le contenu du contrôle wxTextCtrl et nous apportons quelques données – un morceau du poème de Gérard Manley-Hopkins.
Nous avons aussi déclaré un pointeur vers wxBoxSizer nommé topsizer et son constructeur a un argument wxVERTICAL. Cela signifie que quoiqu'on ajoute à ce conteneur, il sera orienter verticalement. C'est de cette façon qu'on a procédé auparavant. Nous allons ajouter d'autres sizers au topsizer et cela va contenir les contrôles visibles.
// crée un contrôle de texte avec une taille réduite 150 x 100
dialogText = new wxTextCtrl( this, -1,
theTextData,
wxDefaultPosition,
wxSize(150, 100),
wxTE_MULTILINE
);
dialogText->SetBackgroundColour(wxColour(0,0,0));
dialogText->SetForegroundColour(wxColour(255,255,255)); |
Nous créons le contrôle de texte et ajoutons nos données.
Puis nous ajoutons le texte contrôle au topsizer.
La méthode Add() hérite de wxSizer et possède un certain nombre de signatures:
| topsizer->Add( dialogText, 1, wxEXPAND | wxALL, 10 ); |
- void Add(wxWindow* window,
- int option = 0,
- int flag = 0,
- int border = 0,
- wxObject*
- userData = NULL)
- void Add(wxSizer* sizer,
- int option = 0,
- int flag = 0,
- int border = 0,
- wxObject*
- userData = NULL)
- void Add(int width, int height,
- int option = 0,
- int flag = 0,
- int border = 0,
- wxObject* userData = NULL)
Cela semble complètement décourageant mais nous pouvons nous y prendre très simplement. Dés lors que nous ajoutons un contrôle visible et non un autre « sizer » il vient que la 1 ère méthode est la seule que nous devons utiliser. Tous ses arguments sauf le premier ont un paramètre par défaut et sont clairs à comprendre excepté userData. Le pointeur wxWindow est celui du contrôle que nous ajoutons. Le second argument indique que la dimension du contrôle peut changer de part l'orientation du sizer, de fait, le contrôle de texte va changer sa taille verticale dés que le top sizer sera redimensionné. Si nous avons utilisé un sizer horizontal alors cela indique que le contrôle conteneur va suivre le sizer à l'horizontal. L'argument wxEXPAND | wxALL est une combinaison d'indicateurs d'alignement, de bordure et defini comment le sizer va redimensionner (wxEXPAND) l'ensemble, dans ce cas, la dimension horizontale et, bien que le contrôle aura ou non une bordure. wxAll indique qu'il y aura une bordure tout autour du contrôle. Nous pouvons résumer cet argument, et voir les autres valeurs possibles:
wxGROW or wxEXPAND – Un enfant peut être redimensionné pour répondre à la nouvelle dimension.
wxSHAPED – Un enfant peut être redimensionné dans des proportions égales.
wxALIGN_CENTER or wxALIGN_CENTRE – Un enfant peut être centré.
wxALIGN_LEFT, wxALIGN_RIGHT, wxALIGN_TOP, wxALIGN_BOTTOM – Une combinaison de paramètres corrects alignera le contrôle enfant conformément à ceux-ci.
wxALIGN_CENTER_VERTICAL ou wxALIGN_CENTRE_VERTICAL, wxALIGN_CENTER_HORIZONTAL ou wxALIGN_CENTRE_HORIZONTAL - Une combinaison de paramètres corrects alignera le contrôle enfant conformément à ceux-ci.
wxTOP, wxBOTTOM, wxLEFT, wxRIGHT or wxALL – Une bordure sera appliquée conformément au paramètre.
Le dernier argument de notre exemple est la largeur de la bordure, s'il y a. Ce dernier argument décrit dans wxWindows nous aide dans ce sens:
• userData – Permet à un objet exotique d'être attaché à l'item du sizer, à l'usage d'une classe dérivée quand les paramètres de redimensionnement sont plus complexes que les options et les indicateurs (flag) ne le permettent.
Je n'ai pas encore exploré cette option, mais imaginez que vous puissiez en faire tout ce que vous voulez. C'est juste une question de méthode.
Maintenant que nous avons un modèle de base pour travailler nous pouvons revenir et nous réessayer à quelques-unes unes de ces combinaisons.
wxBoxSizer *button_sizer = new wxBoxSizer( wxHORIZONTAL );
button_sizer->Add
( new wxButton( this, wxID_OK, "OK" ),
0,
wxALL,
10 );
button_sizer->Add(
new wxButton( this, wxID_CANCEL, "Cancel" ),
0,
wxALL,
10 );
topsizer->Add(
button_sizer,
0,
wxALIGN_CENTER );
SetAutoLayout( TRUE );
SetSizer( topsizer );
topsizer->Fit( this );
topsizer->SetSizeHints( this );
} |
Nous allons maintenant créer un autre sizer contenant les boutons. Puisque les boutons ont un aspect horizontal ce sizer est un sizer horizontal. Dans chaque cas nous fixons la dimension du bouton, ce qui est donné si l'argument 2 est 0 alors les boutons détiennent une dimension par défaut et, nous fixons une bordure autour de taille 10. Puisque nous n'avons d'autres alignements que celui mis par défaut à 0 qui est implicitement le top alignement.
Il n'y a plus que quelques étapes. Maintenant nous allons ajouter le sizer du bouton au topsizer et nous allons utiliser la seconde des méthodes Add()s puisque c'est un sizer que nous allons ajouter et non une fenêtre, c.a.d un contrôle visible. Le bouton est conçu non extensible, sans bordure et sera centré horizontalement dans le topsizer. La fonction SetAutoLayout() est une méthode wxWindow qui obligent wxWindows à faire automatiquement attention aux formes du dialogue quand il est redimensionné. La fonction SetSizer() est une autre méthode wxWindow qui, à la base indique à notre dialogue qu'il est maintenant le propriétaire du sizer. Cela peut être bizarre pour un débutant de voir soudain apparaître une telle méthode mais nous pouvons au mieux juste écrire
this->SetAutoLayout(TRUE). Cela rend plus clair que SetAutoLayout() est une méthode de notre dialogue, elle a hérité de la classe wxWindow via la classe wxDialog.
La méthode Fit() oblige le dialogue à se redimensionner autour du topsizer. La méthode curieusement appelée SetSizeHints() oblige le sizer de régler la taille minimale de la fenêtre à la taille minimum du sizer. Il n'a rien à rajouter là-dessus.
bool BasicDialog::Validate()
{
return TRUE;
}
void BasicDialog::OnOk(wxCommandEvent &event)
{
event.Skip();
} |
Si vous souhaitez voir un exemple qui utilise les dialogues et leurs fonctions alors téléchargez wxbasic6.zip et lisez le code source.
Sommaire
Un petit rappel : En présentant cela je n'ai montré que les détails importants. Vous devez vous rappeler que les exemples contiennent aussi d'autres codes pertinents, par exemple l'identifiant de fenêtres et la table d'événements. J'ai allége les programmes d'exemples pour la présentation dans le but de garder de l'espace et de ne pas s'égarer.
Retour en début de document
Traduction de Patrick VALERI du document de David Beech
Copyright © 1999 - 2001 David Beech
Ce document est issu de http://phenix.developpez.com/ et reste la propriété exclusive de son auteur.
La copie, modification et/ou distribution par quelque moyen que ce soit est soumise à l'obtention préalable de l'autorisation de l'auteur.
Copyright © 2000-2005
