Contents: Creating tree view
For this tutorial, you'll need glade >= 3.6, since creating non-widget objects is not possible in previous versions.
I would also recommend you to read GtkTreeView tutorial and Micah Carrick's glade tutorial before trying to follow this one, since I won't be discussing underlying principles much.
Do we start glade now? No, not yet. We need to create an outline of our application. We'll create simple application with GtkTreeView. Tree view will have 3 columns:
- "Image" column that will display image and it's name
- "Penetration" column that will display progress bar
- "Description" column with some text
- pixbuf cell renderer for displaying image (in first column)
- text cell renderer for displaying image name (in first column)
- progress cell renderer for progress bar and (in second column)
- another text cell renderer for description (in third column)
Now we can (finally;) start glade.
After startup, a small dialog ask us about some project properties. Most of the options are fine default, but just make sure you select proper gtk version or GtkBuilder will moan badly when trying to create GUI if your version is less that the one specified in builder file. You've been warned;)
We'll first create out model and populate it with data. Open the widget gallery and click Tree Model -> List Store. Under "Objects", we see our newly created GtkListStore. Let's modify it a bit by changing it's name to "datastore" and adding three columns:
If you ever manually created GtkListStore, you may wonder where all of the G_TYPE_* macros go in column definitions. In glade, you can simply specify type without the macros. So GDK_TYPE_PIXBUF is in glade simply specified as GdkPixbuf, G_TYPE_STRING as gchararray, G_TYPE_INT as gint ... And you don't event need to know their exact name by heart, since glade offers helpful popup.
Now we'll scroll down a bit add some data into our model. Stock item ids are taken from here. And since glade hides some of the descriptions, I wrote down my original table here too.
.-----------+----------+---------------------------------.
| Image | Progress | Desc |
+-----------+----------+---------------------------------+
| gtk-add | 12 | Add icon is bad at penetrating. |
| gtk-cdrom | 78 | CD-ROM image fares pretty well. |
| gtk-cut | 98 | Scissors rock!! |
`-----------+----------+---------------------------------'
|
And that's it. We now have our model part of Model/View/Controller (MVC) complex.
Now we'll create a window and connect it's "destroy" signal to gtk_main_quit function, add vbox with two rows to it and pack GtkTreeView into upper section of vbox (lower section is only a placeholder for the next part of the tutorial, where we'll be adding some controls to our application). When we place our tree view into vbox, glade ask us about model. We'll click on "..." and select "datastore" model, click OK and OK again. And controller part of MVC is done too. Now for the last part - creating display components.
To add columns and renderers to out tree view, we need to select it and the click "Edit ..." button. Another window will open, looking something like this:
In general tab, we'll only rename "treeview1" to "treeview". We could change entries in our data store in this window too, but we already did that when creating model.
Now we'll open "Hierarchy" tab and start creating columns and renderers. First we need to add column for images and their names. We click on "Add" button and edit newly created GtkTreeViewColumn by renaming it to "imgcol" and setting title to "Image".
After we're done with editing, we need to right-click on our column and select "Add child Pixbuf item". This will add GtkCellRendererPixbuf renderer to the column. We'll rename this renderer to "imgcell" and set it's stock id property to Image model column.
Now we need to add text renderer which will display image's name, but this time we'll be adding it a little different. First, we select previous cell renderer and then click "Add" button. This created new cell renderer, without the defined type. We'll rename this cell renderer to "namecell", set it's type to "Text" and it's text property to "Image" model column.
Now we need to create second column for progress bar. Select the last tree view column inside the left part of the window where columns and renderers reside and click "Add" button. Then rename newly created column to "progresscol" like we renamed first column and set title to "Penetration". Now create new progress cell renderer. Did you manage to do it by yourself? If you did, congratulations. If not, you should right-click your column and select "Add child Progress item". Now rename this cell renderer to "progresscell" and set it's "Value" property to "Progress" model column.
And now it's time for you to create last column, rename it to "desccol", set it's title to "Description"; add text cell renderer to it, rename it to "desccell" and set it's "text" property to "Desc" model column. After you're finished, your Hierarchy tab should look something like this:
Close the Edit window and you should see your tree view already populated with some data. And that is actually all that we needed to do today. All that is left for us to do is to store glade project and test our product. I wrote a simple C application that will load our builder file and create an application from it.
/*
* treeview.c - Application for testing builder file.
*
* Compile with:
* gcc -o treeview treeview.c $(pkg-config --cflags --libs gtk+-2.0 gmodule-export-2.0)
*/
#include <gtk/gtk.h>
int
main(
int
argc,
char
**argv )
{
/* Vars */
GtkWidget *window;
GtkBuilder *builder;
GError *error;
/* Initialization */
gtk_init( &argc, &argv );
/* Create builder and load UI file */
builder = gtk_builder_new();
if
( ! gtk_builder_add_from_file( builder,
"treeview.builder"
, &error ) )
{
g_print(
"Error occured while loading UI file!/n"
);
g_print(
"Message: %s/n"
, error->message );
g_free( error );
return
( 1 );
}
/* Get main window and connect signals */
window = GTK_WIDGET( gtk_builder_get_object( builder,
"window1"
) );
gtk_builder_connect_signals( builder, NULL );
/* Destroy builder */
g_object_unref( G_OBJECT( builder ) );
/* Show main window and start main loop */
gtk_widget_show( window );
gtk_main();
return
( 0 );
}
|
558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
