Le placement des widgets de Kitone mis en ligne le 05 décembre 2002
Positionnement des widgets avec GTK+
La première fois qu'on utilise GTK+, et plus précisément les
GtkBox, on tombe sur quelques difficultés pour faire une application complexe. Ici, vous ne trouverez pas de code mais juste quelques explications illustrées afin de bien comprendre la démarche du positionnement des widgets.
I. La particularité de GTK+
Là où GTK+ diffère de certaines autres API, c'est qu'il n'y a pas de positionnement avec des pixels. On fournie certains paramètres à GTK+ et il s'occupe du positionnement, de l'étirement, du partage d'un widget, etc. L'avantage est qu'une application utilisant GTK+ bien structurée s'adapte au redimensionnement, à la taille de l'écran et au thème de GTK+ ce qui en fait une application très puissante.
II. Étude d'un exemple : Sabrina
Je vais prendre comme exemple une application que je développe en ce moment, un modeleur 3D. Mais ne faites pas trop attention au fait que ce ne soit pas un traitement de texte ou n'importe quel autre type de logiciel : c'est l'idée qui est à retenir. La raison de ce choix, c'est juste parce que je l'ai sous la main et qu'il y a un placement assez spécial, chose qu'il n'y a pas avec The GIMP puisque chaque partie de la GUI est séparée dans plusieurs fenêtres. Donc, ici, le but est de faire une fenêtre principale avec pleins de widgets dedans. Voilà à quoi doit ressembler l'application finale :
2.1 La mise en cascade de l'interface
Remarque : Ne faites pas trop attention à la grande surface au milieu avec le dessin de la moto, ce n'est pas le plus important.
Bon alors, nous voulons une application qui ressemble à ça. Comment allons nous placer les Box ?
Nous partons d'une simple fenêtre donc d'un container au plus (celui de la fenêtre).
La première chose à faire est d'ajouter une
GtkVBox, afin de pouvoir empiler plusieurs parties :
* la barre d'outil (
GtkToolbar) ;
* la zone de travail qui regroupe la zone où il y a la moto et les commandes à droite ;
* les deux barres d'état (
GtkStatusBar), ce ne sont pas vraiment des status bar mais elles jouent le même rôle.
La première étape est d'ajouter une
GtkVbox afin de pouvoir empiler le bloc
L'idée générale est qu'il ne faut pas avoir peur de créer une première
GtkBox puis une deuxième pour l'imbriquer à son tour dans la première et ainsi de suite. Il faut essayer de penser son application avec des
GtkBox (ou n'importe quel autre container, ça dépend des besoins). Donc il va falloir empiler les choses, la première est la barre d'outils (
GtkToolbar), ensuite une
GtkHBox afin de pouvoir y ajouter deux choses : la zone de travail (moto) et les commandes (
GtkNoteBook). Et puis en bas la
StatusBar? (
GtkStatusBar). Vous pouvez voir qu'ici le sens de la box a son importance :
L'étape ici consiste à ajouter la zone de travail (vert) et le
GtkNoteBook. Mais pour la zone de travail on va paramétrer afin qu'elle s'élargisse sur toute la surface afin qu'elle prenne toute la place disponible dans toute la fenêtre. En ce qui concerne le
GtkNoteBook nous allons le configurer pour qu'il prenne le minimum de la taille. Bien sur tout ça se fait avec les fonctions de
GtkBox. Ici, la chose qui faut mettre en avant est bien sur la zone de travail : il serait inutile d'avoir les commandes (ici
GtkNoteBook) qui utilisent la moitié de la surface. Mais il faut faire en sorte qu'elle s'étire sur toute la surface sans s'étaler :
Ensuite on va s'attaquer à une partie de la
GtkNoteBook. Bien que jusqu'ici vous avez tout ce qu'il vous faut pour commencer.
Je vais découper chaque widget dans la
GtkNoteBook de façon assez précise. Vous allez comprendre pourquoi plus bas.
Ici, nous avons un positionnement vertical des éléments :
Voilà la même chose mais horizontalement (l'application est grisée, gtk_set_sensitive) :
Cette méthode n'est pas obligatoire, mais elle apporte un certain avantage car on peut déplacer n'importe quelle partie, éclater l'application à la manière de the GIMP, changer la place des commandes et cacher certaines parties. Bien sûr, rien ne vous oblige à faire cela. Ca représente du travail en plus, quelques règles à respecter, mais l'utilisateur ne pourra que vous remercier et apprécier votre logiciel qui lui permettra de choisir le positionnement, la taille de la fenêtre, bref pour une fois : « le client est roi ».
Le
GtkNoteBook n'est qu'un container, et un container ce n'est pas une chose très maniable comparé à une
GtkBox. Donc la première chose à faire est d'ajouter une
GtkBox au
NoteBook?. Maintenant il faut organiser de façon à avoir des zones d'environ la même taille. Ainsi si vous voulez maintenant faire apparaître vos commandes horizontalement, il vous suffira de changer la
GtkBox que nous avons ajoutée au noteBook en
GtkHBox. Vous pouvez faire ça à la volé, ça demande un peu de travail avec des gtk_widget_reparent mais il est rare que l'utilisateur veuille changer de placement toutes les 2 minutes pendant qu'il utilise votre logiciel. Alors il suffit de faire un fichier de configurations où il y a juste une information sur le placement, et avant de créer votre application, vous n'avez qu'à lire ce fichier est à créer la
GtkBox adéquate. Bien sûr le même processus est suivi pour le placement des éléments de la GUI dans les
NoteBooks? (spin_button, button, menu, etc.).
2.2 Prendre en compte le dimensionnement des containers
Il faut faire attention sur le paramétrage que l'on donne à
GtkBox sur l'étirement, l'allongement, le partage de l'espace et il ne faut pas hésiter à tester à chaque étape les diverses configurations. Sinon vous pouvez avoir de mauvaises surprises.
Remarque : Les images ont été prises à différents stades du développement. L'intérêt est juste de montrer les surprises que l'on peut rencontrer avec une mauvaise configuration.
Sur cette image, on peut voir que ce n'est pas très joli car les boutons s'étalent et s'élargissent au maximum. Ils ressemblent à des pavés :
Là, c'est à peu près acceptable ; si ce n'est les deux dernières rangées qui ne sont pas encore bien configurées :
Nous allons voir la même application que plus haut mais avec plusieurs types de configuration.
Remarque : Les images ont été prises à plusieurs stades du développement de l'application donc certaines choses ont pu changer et l'important ce n'est pas la zone de travail (le dessin de la moto ou le cube) mais le positionnement des commandes.

Vue 1 : Commandes à droite

Vue 2 : Commandes à gauche

Vue 3 : Commandes en haut

Vue 4 : Eclatées comme The GIMP avec les commandes verticales

Vue 5 : Eclatées avec les commandes horizontales et redimensionnement de la zone de travail réduite
Voilà, avec un peu de courage et quelques règles, on peut faire des applications très puissantes. GTK+ nous montre une fois de plus sa puissance et sa simplicitée.
Kitone
Merci a Spacepig et [Nettoyeur]Fantome pour leur lecture et correction.