L’arborescence : le widget GtkTreeView

1. Introduction
2. La création du modèle
3. La création du vue
4. Insérer les colonnes
5. Exemple

1. Introduction

Le widget GtkTreeView permet d’afficher des données sous forme d’une liste ou d’un arbre. Les données à afficher sont organisés en lignes et en colonnes. Les utilisateurs peuvent utiliser la souris ou le clavier pour sélectionner une ligne ou plusieurs lignes dans l'arborescence.

GtkTreeView utilise un principe de conception MVC (Modèle –Vue – Contrôleur (en anglais : Model-View-controller)).

GtkTreeView est un héritier direct de GtkContainer.

2. La création du modèle

Pour créer un modèle on va commencer par créer un pointeur vers GtkTreeModel.

GTK + propose quatre types de classe de modèle intégrés dans l'arbre, mais dans ce cours nous allons voir seulement GtkListStore et GtkTreeStore . Ces derniers sont des héritiers directs de GObject .
GtkListStore est utilisé pour la création d’un modèle de type liste tandis que GtkTreeStore est utilisé pour la création d’un modèle de type arbre. Leurs syntaxes sont respectivement :
GtkListStore* gtk_list_store_new(gint n_columns, ...);
GtkTreeStore* gtk_tree_store_new(gint n_columns, ...);

Une fois qu’on a créé la liste ou l’arbre, il faut insérer les éléments. Bien qu’il y ait plusieurs façon de le faire, nous allons nous intéresser à ces deux syntaxes :
Pour une liste :
void gtk_list_store_append(GtkListStore *list_store, GtkTreeIter *iter);
list_store est la liste qui a été créée précédemment . iter est la position de la ligne nouvellement créée.
pour un arbre :
void gtk_tree_store_append(GtkTreeStore *tree_store, GtkTreeIter *iter, GtkTreeIter *parent);

Maintenant il faut définir les valeurs de chaque colonne :
Voici les syntaxes :
Pour une liste :
void gtk_list_store_set(GtkListStore *list_store, GtkTreeIter *iter, ...);
pour un arbre :
void gtk_tree_store_set(GtkTreeStore *tree_store, GtkTreeIter *iter, ...);

3. La création du vue

C’est maintenant que nous allons utiliser notre widget GtkTreeView.
On va commencer par créer un pointeur vers GtkWidget. Puis ensuite passer à l’initialisation.
Pour l’initialisation d’une vue, il n’y a que deux syntaxes (à vous d’utiliser celle qui vous convient):
GtkWidget* gtk_tree_view_new(void);
GtkWidget* gtk_tree_view_new_with_model(GtkTreeModel *model);

4. Insérer les colonnes

Pour les colonnes, on va commencer par créer un pointeur ver GtkCellRenderer et puis passer à l’initialisation.
Voici les syntaxes d’initialisation :
GtkCellRenderer* gtk_cell_renderer_text_new(void); // pour afficher un label
GtkCellRenderer* gtk_cell_renderer_toggle_new(void);//pour afficher une case à cocher
GtkCellRenderer* gtk_cell_renderer_pixbuf_new(void);//pour afficher une image

Une fois que tout est fait, on va ajouter les colonnes à la vue en utilisant une de ces syntaxes :
gint gtk_tree_view_append_column(GtkTreeView *tree_view, GtkTreeViewColumn *column);
gint gtk_tree_view_insert_column(GtkTreeView *tree_view, GtkTreeViewColumn *column, gint position);

Et voila maintenant il ne reste qu’à fixer nos modèles.

5. Exemple

Voici une capture de ce que nous allons faire:

Code C :
#include <gtk/gtk.h> enum{ colonne_nom = 0, colonne_prenom, colonne_pays, n_colonnes }; void model_data_new(GtkTreeModel* store,const gchar* nom, const gchar* prenom, const guint pays) { GtkTreeIter iter; gtk_list_store_append(GTK_LIST_STORE(store), &iter); gtk_list_store_set(GTK_LIST_STORE(store), &iter, colonne_nom, nom, colonne_prenom, prenom, colonne_pays, pays, -1); } GtkTreeModel* create_model() { GtkListStore *store; store = gtk_list_store_new (n_colonnes, G_TYPE_STRING,G_TYPE_STRING,G_TYPE_STRING); return GTK_TREE_MODEL(store); } void arrange_tree_view(GtkWidget* view) { GtkCellRenderer* renderer; // colonne 1: nom renderer = gtk_cell_renderer_text_new (); gtk_tree_view_insert_column_with_attributes( GTK_TREE_VIEW(view), -1, "nom", renderer, "text", colonne_nom, NULL); // colonne 2: prenom gtk_tree_view_insert_column_with_attributes( GTK_TREE_VIEW(view), -1, "prenom", renderer, "text", colonne_prenom, NULL); // colonne 3: pays gtk_tree_view_insert_column_with_attributes( GTK_TREE_VIEW(view), -1, "pays", renderer, "text", colonne_pays, NULL); } int main( int argc, char *argv[] ) { GtkWidget * mafenetre; /* Ceci est appelé dans toutes les applications GTK. Les arguments sont analysés     À partir de la ligne de commande et sont retournés à l'application. */ gtk_init ( &argc, &argv ); mafenetre=gtk_window_new(GTK_WINDOW_TOPLEVEL); gtk_window_set_title(GTK_WINDOW(mafenetre), "Samomoi"); gtk_window_set_position(GTK_WINDOW(mafenetre), GTK_WIN_POS_CENTER); gtk_window_set_default_size(GTK_WINDOW(mafenetre), 400, 100); gtk_window_set_icon_from_file(GTK_WINDOW(mafenetre), "icone.gif", NULL); g_signal_connect( G_OBJECT( mafenetre ), "destroy", gtk_main_quit, NULL); GtkWidget* view; view = gtk_tree_view_new(); gtk_container_add( GTK_CONTAINER(mafenetre), view); // Orgganisation du vue arrange_tree_view(view); // fixation de modèle GtkTreeModel* store = create_model(); gtk_tree_view_set_model ( GTK_TREE_VIEW(view), store); model_data_new(store, "Karihila", "Ali", "Comores"); model_data_new(store, "Hassane", "Yousouf", "Maroc"); model_data_new(store, "Abdoulkassim", "dajaber", "Algerie"); model_data_new(store, "Bakayoko", "Justin", "Cote D'ivoire"); model_data_new(store, "Dubois", "Josephine", "France"); g_object_unref( store ); gtk_widget_show_all ( mafenetre ); gtk_main (); return 0; }

Une question? Cliquez ici pour la poser.

Retour sur le portail du langage C/C++