[Previous] [Contents] [Next]

11. CList Widget

The CList widget has replaced the List widget (which is still available).

The CList widget is a multi-column list widget that is capable of handling literally thousands of rows of information. Each column can optionally have a title, which itself is optionally active, allowing us to bind a function to its selection.

11.1 Creating a CList Widget

Creating a CList is quite straightforward, once you have learned about widgets in general. It provides the almost standard two ways, that is the hard way, and the easy way. But before we create it, there is one thing we should figure out beforehand: how many columns should it have?

Not all columns have to be visible and can be used to store data that is related to a certain cell in the list.

 FUNCTION gtk_clist_new( columns : gint ) : pGtkWidget;

 FUNCTION gtk_clist_new_with_titles( columns : gint ;
      titles : ARRAY OF pgchar ) : pGtkWidget;

The first form is very straightforward, the second might require some explanation. Each column can have a title associated with it, and this title can be a label or a button that reacts when we click on it. If we use the second form, we must provide pointers to the title texts, and the number of pointers should equal the number of columns specified. Of course we can always use the first form, and manually add titles later.

Note: The CList widget does not have its own scrollbars and should be placed within a ScrolledWindow widget if your require this functionality. This is a change from the GTK 1.0 implementation.

[Previous] [Contents] [Next]

11.2 Modes of Operation

There are several attributes that can be used to alter the behaviour of a CList. First there is:

 PROCEDURE gtk_clist_set_selection_mode( clist : pGtkCList ; mode : LONGINT );

which, as the name implies, sets the selection mode of the CList. The first argument is the CList widget, and the second specifies the cell selection mode. At the time of this writing, the following modes are vailable to us:

GTK_SELECTION_SINGLE - The selection is either NIL or contains a GList pointer for a single selected item.
GTK_SELECTION_BROWSE - The selection is NIL if the list contains no widgets or insensitive ones only, otherwise it contains a GList pointer for one GList structure, and therefore exactly one list item.
GTK_SELECTION_MULTIPLE - The selection is NIL if no list items are selected or a GList pointer for the first selected item. That in turn points to a GList structure for the second selected item and so on. This is currently the default for the CList widget.
GTK_SELECTION_EXTENDED - The selection is always NIL.

Others might be added in later revisions of GTK.

We can also define what the border of the CList widget should look like. It is done through

 PROCEDURE gtk_clist_set_shadow_type( clist : pGtkCList ; border : LONGINT );

The possible values for the second argument are:

GTK_SHADOW_NONEGTK_SHADOW_INGTK_SHADOW_OUT
GTK_SHADOW_ETCHED_INGTK_SHADOW_ETCHED_OUT 

 

[Previous] [Contents] [Next]

11.3 Working with Titles

When you create a CList widget, you will also get a set of title buttons automatically. They live in the top of the CList window, and can act either as normal buttons that respond to being pressed, or they can be passive, in which case they are nothing more than a title. There are four different procedures that aid us in setting the status of the title buttons:

 PROCEDURE gtk_clist_column_title_active( clist : pGtkCList ; column : gint );

 PROCEDURE gtk_clist_column_title_passive( clist : pGtkCList ; column : gint );

 PROCEDURE gtk_clist_column_titles_active( clist : pGtkCList );

 PROCEDURE gtk_clist_column_titles_active( clist : pGtkCList );

An active title is one which acts as a normal button, a passive one is just a label. The first two calls above will activate/deactivate the title button above the specific column, while the last two calls activate/deactivate all title buttons in the supplied clist widget.

But of course there are those cases when we don't want them at all, and so they can be hidden and shown at will using the following two calls.

 PROCEDURE gtk_clist_column_titles_show( clist : pGtkCList );

 PROCEDURE gtk_clist_column_titles_hide( clist : pGtkCList );

For titles to be really useful we need a mechanism to set and change them, and this is done using

 PROCEDURE gtk_clist_set_column_title( clist : pGtkCList ; column : gint ;
      title : pgchar );

Note that only one column's title can be set at a time, so if all the titles are known from the beginning, then I really suggest using gtk_clist_new_with_titles() (as described above) to set them. It saves you coding time, and makes your program smaller. There are some cases where getting the job done the manual way is better, and that's when not all titles will be text. CList provides us with title buttons that can in fact incorporate whole widgets, for example a pixmap. It's all done through

 PROCEDURE gtk_clist_set_column_widget( clist : pGtkCList ; column : gint ;
      widget : pGtkWidget );

which should require no special explanation.

[Previous] [Contents] [Next]

11.4 Manipulating the List Itself

It is possible to change the justification for a column, and it is done through

 PROCEDURE gtk_clist_set_column_justification( clist : pGtkCList ; column : gint ;
      justification : LONGINT );

justification can take the following values:

GTK_JUSTIFY_LEFT - The text in the column will begin from the left edge.
GTK_JUSTIFY_RIGHT - The text in the column will begin from the right edge.
GTK_JUSTIFY_CENTER - The text is placed in the centre of the column.
GTK_JUSTIFY_FILL - The text will use up all available space in the column. It is normally done by inserting extra blank spaces between words (or between individual letters if it's a single word). Much in the same way as any ordinary WYSIWYG text editor.

The next function is a very important one, and should be standard in the setup of all CList widgets. When the list is created, the width of the various columns are chosen to match their titles, and since this is seldom the right width we have to set it using

 PROCEDURE gtk_clist_set_column_width( clist : pGtkCList ; column : gint ;
      width : gint );

Note that the width is given in pixels and not letters. The same goes for the height of the cells in the columns, but as the default value is the height of the current font this isn't as critical to the application. Still, it is done through

 PROCEDURE gtk_clist_set_row_height( clist : pGtkCList ; height : gint );

Again, note that the height is given in pixels.

We can also move the list around without user interaction, however, it does require that we know what we are looking for. Or in other words, we need the row and column of the item we want to scroll to.

 PROCEDURE gtk_clist_moveto( clist : pGtkCList ; row : gint ; column : gint ;
      row_align : gfloat ; col_align : gfloat );

The gfloat row_align is pretty important to understand. It's a value between 0.0 and 1.0, where 0.0 means that we should scroll the list so the row appears at the top, while if the value of row_align is 1.0, the row will appear at the bottom instead. All other values between 0.0 and 1.0 are also valid and will place the row between the top and the bottom. The last argument, gfloat col_align works in the same way, though 0.0 marks left and 1.0 marks right instead.

Depending on the application's needs, we don't have to scroll to an item that is already visible to us. So how do we know if it is visible? As usual, there is a function to find that out as well.

 FUNCTION gtk_clist_row_is_visible( clist : pGtkCList ; row : gint ) : LONGINT;

The return value is is one of the following:

GTK_VISIBILITY_NONEGTK_VISIBILITY_PARTIAL GTK_VISIBILITY_FULL

Note that it will only tell us if a row is visible. Currently there is no way to determine this for a column. We can get partial information though, because if the return is GTK_VISIBILITY_PARTIAL, then some of it is hidden, but we don't know if it is the row that is being cut by the lower edge of the listbox, or if the row has columns that are outside.

We can also change both the foreground and background colours of a particular row. This is useful for marking the row selected by the user, and the two procedures used to do it are:

 PROCEDURE gtk_clist_set_foreground( clist : pGtkCList ; row : gint ;
      colour : pGdkColor );

 PROCEDURE gtk_clist_set_background( clist : pGtkCList ; row : gint ;
      colour : pGdkColor );

Please note that the colours must have been previously allocated.

[Previous] [Contents] [Next]

11.5 Adding Rows to the List

We can add rows in three ways. They can be prepended or appended to the list using

 FUNCTION gint gtk_clist_prepend( clist : pGtkCList ;
      text : ARRAY OF pchar ) : gint;

 FUNCTION gtk_clist_append( clist : pGtkCList ;
      text : ARRAY OF pchar ) : gint;

The return value of these two functions indicate the index of the row that was just added. We can insert a row at a given place using

 PROCEDURE gtk_clist_insert( clist : pGtkCList ; row : gint ;
      text : ARRAY OF pchar ) : gint;

In these calls we have to provide a collection of pointers that are the texts we want to put in the columns. The number of pointers should equal the number of columns in the list. If the text argument is NIL, then there will be no text in the columns of the row. This is useful, for example, if we want to add pixmaps instead (something that has to be done manually).

Also, please note that the numbering of both rows and columns start at 0.

To remove an individual row we use

 PROCEDURE gtk_clist_remove( clist : pGtkCList ; row : gint );

There is also a call that removes all rows in the list. This is a lot faster than calling gtk_clist_remove() once for each row, which is the only alternative.

 PROCEDURE gtk_clist_clear( clist : pGtkCList );

There are also two convenience functions that should be used when a lot of changes have to be made to the list. This is to prevent the list flickering while being repeatedly updated, which may be highly annoying to the user. So instead it is a good idea to freeze the list, do the updates to it, and finally thaw it which causes the list to be updated on the screen.

 PROCEDURE gtk_clist_freeze( clist : pGtkCList );

 PROCEDURE gtk_clist_thaw( clist : pGtkCList );

 

[Previous] [Contents] [Next]

11.6 Setting Text and Pixmaps in the Cells

A cell can contain a pixmap, text or both. To set them the following procedures are used:

 PROCEDURE gtk_clist_set_text( clist : pGtkCList ; row : gint ; column : gint
      text : pgchar );

 PROCEDURE gtk_clist_set_pixmap( clist : pGtkCList ; row : gint ; column : gint
      pixmap : pGdkPixmap ; mask : pGdkBitmap );

 PROCEDURE gtk_clist_set_pixtext( clist : pGtkCList ; row : gint ; column : gint
      text : pgchar ; spacing : guint8 ; pixmap : pGdkPixmap ; mask : pGdkBitmap);

It's quite straightforward. All the calls have the CList as the first argument, followed by the row and column of the cell, followed by the data to be set. The spacing argument in gtk_clist_set_pixtext() is the number of pixels between the pixmap and the beginning of the text. In all cases the data is copied into the widget.

To read back the data, we instead use

 FUNCTION gtk_clist_get_text( clist : pGtkCList ; row : gint ; column : gint ;
      text : ppgchar ) : gint;

 FUNCTION gtk_clist_get_pixmap( clist : pGtkCList ; row : gint ; column : gint ;
      pixmap : ppGdkPixmap ; mask : ppGdkBitmap ) : gint;

 FUNCTION gtk_clist_get_pixtext( clist : pGtkCList ; row : gint ; column : gint
      text : ppgchar ; spacing : pguint8 ; pixmap : ppGdkPixmap ;
      mask : ppGdkBitmap) : gint;

The returned pointers are all pointers to the data stored within the widget, so the referenced data should not be modified or released. It isn't necessary to read it all back in case you aren't interested. Any of the pointers that are meant for return values (all except the clist) can be NIL. So if we want to read back only the text from a cell that is of type pixtext, then we would do the following, assuming that clist, row and column already exist:

 VAR mytext : pgchar;
 BEGIN gtk_clist_get_pixtext( clist, row, column, @mytext, NIL, NIL, NIL );  END;

There is one more call that is related to what's inside a cell in the clist, and that's

 FUNCTION gtk_clist_get_cell_type( clist : pGtkCList ; row : gint ; column : gint ) :
      LONGINT;

which returns the type of data in a cell. The return value is one of

GTK_CELL_EMPTYGTK_CELL_TEXTGTK_CELL_PIXMAP
GTK_CELL_PIXTEXTGTK_CELL_WIDGET 

There is also a procedure that will let us set the indentation, both vertical and horizontal, of a cell. The indentation value is of type gint, given in pixels, and can be both positive and negative.

 PROCEDURE gtk_clist_set_shift( clist : pGtkCList ; row : gint ; column : gint ;
      vertical : gint ; horizontal : gint );

 

[Previous] [Contents] [Next]

11.7 Storing Data Pointers

With a CList it is possible to set a data pointer for a row. This pointer will not be visible for the user, but is merely a convenience for the programmer to associate a row with a pointer to some additional data.

The procedures/functions should be fairly self-explanatory by now.

 PROCEDURE gtk_clist_set_row_data( clist : pGtkCList ; row : gint ;
      data : gpointer );

 PROCEDURE gtk_clist_set_row_data_full( clist : pGtkCList ; row : gint ;
      data : gpointer ; destroy : LONGINT );

 FUNCTION gtk_clist_get_row_data( clist : pGtkCList ; row : gint ) : gpointer;

 FUNCTION gtk_clist_find_row_from_data( clist : pGtkCList ; data : gpointer ) : gint;

 

[Previous] [Contents] [Next]

11.8 Working with Selections

There are also procedures available that let us force the (un)selection of a row. These are:

 PROCEDURE gtk_clist_select_row( clist : pGtkCList ; row : gint ; column : gint );

 PROCEDURE gtk_clist_select_row( clist : pGtkCList ; row : gint ; column : gint );

And also a function that will take x and y coordinates (for example, read from the mousepointer), and map that onto the list, returning the corresponding row and column.

 FUNCTION gtk_clist_get_selection_info( clist : pGtkCList ; x : gint ; y : gint ;
       row : pgint ; column : pgint ) : gint;

When we detect something of interest (it might be movement of the pointer, a click somewhere in the list) we can read the pointer coordinates and find out where in the list the pointer is. Cumbersome? Luckily, there is a simpler way...

[Previous] [Contents] [Next]

11.9 The Signals that Bring it Together

As with all other widgets, there are a few signals that can be used. The CList widget is derived from the Container widget, and so has all the same signals, but also adds the following:

select_row - This signal will send the following information, in order:
      clist : pGtkCList, row : gint, column : gint, event : pGtkEventButton

unselect_row - When the user unselects a row, this signal is activated.
      It sends the same information as select_row.

click_column - Send
      clist : pGtkCList, column : gint

So if we want to connect a callback to select_row, the callback would be declared like this:

 PROCEDURE select_row_callback( widget : pGtkWidget ; row : gint ; column : gint ;
      event : pGdkEventButton ; data : gpointer );

The callback is connected as usual with

 gtk_signal_connect(GTK_OBJECT(clist), 'select_row',
      GTK_SIGNAL_FUNC(@select_row_callback), NIL);

 

[Previous] [Contents] [Next]

11.10 A CList Example

CList Example

 { Converted from C to Pascal by Frank Loemker <floemker@techfak.uni-bielefeld.de> }
 PROGRAM clist;

 USES glib, gdk, gtk;

 { ------------------------------------button_add_clicked---------------------------------- }
 PROCEDURE button_add_clicked( data: pGtkCList ); cdecl;
 { Something silly to add to the list. 4 rows of 2 columns each }
 CONST drink : ARRAY[0..3, 0..1] OF pgchar =
(('Milk', '3 millilitres'),
('Water', '6 litres'),
('Carrots', '2'),
('Snakes', '55'));
 VAR indx : Integer;  BEGIN { Here we do the actual adding of the text. It's done once for each row. }
FOR indx := 0 TO 3 DO gtk_clist_append(data, @drink[indx]);
 END; { --------------------------------button_add_clicked------------------------------------ }

 { ----------------------------------button_clear_clicked--------------------------------- }
 PROCEDURE button_clear_clicked( data : pGtkCList ); cdecl;
 BEGIN { Clear the list using gtk_clist_clear. This is much faster than calling gtk_clist_remove once for each row. }
gtk_clist_clear(data);
 END; { ------------------------------button_clear_clicked--------------------------------- }

 { -----------------------------button_hide_show_clicked------------------------------- }
 PROCEDURE button_hide_show_clicked( data : pGtkCList ); cdecl;
 CONST flag : Integer = 0; { Just a flag to remember the status. 0 = currently visible }
 BEGIN IF flag = 0 THEN
BEGIN { Hide the titles and set the flag to 1 }
gtk_clist_column_titles_hide(data);
inc(flag);
END
ELSE { if flag = 1 }
BEGIN { Show the titles and reset flag to 0 }
gtk_clist_column_titles_show(data);
dec(flag);
END;
 END; { ------------------------------------button_hide_show_clicked------------------------------- }

 { ----------------------------------selection_made------------------------------ }
 PROCEDURE selection_made( thelist : pGtkCList ; row, column : gint ;
      event : pGdkEventButton ; data : gpointer ); cdecl;
 { If we come here, then the user has selected a row in the list. }
 VAR text : pgchar;  BEGIN { Get the text that is stored in the selected row and column which was clicked in.
    We will receive it as a pointer in the argument text. }

gtk_clist_get_text(thelist, row, column, @text);

{ Just prints some information about the selected row }
writeln('You selected row ', row,
      '. More specifically you clicked in column ', column,
      ', and the text in this cell is ', text, #10);
 END; { ----------------------------------selection_made------------------------------ }

 { -----------------------------------Globals---------------------------------- }
 CONST titles : ARRAY[0..1] OF pgchar = ('Ingredients', 'Amount');  VAR window, vbox, hbox, scroll, thelist, button_add, button_clear, button_hide_show : pGtkWidget;  { ------------------------------Main Program--------------------------------- }
 BEGIN gtk_init(@argc, @argv);
gtk_rc_init;

window := gtk_window_new(GTK_WINDOW_TOPLEVEL);
gtk_widget_set_usize(pGtkWidget(window), 300, 150);

gtk_window_set_title(pGtkWindow(window), 'GtkCList Example');
gtk_signal_connect(pGtkObject(window),'destroy',
      tGtkSignalFunc(@gtk_main_quit), NIL);

vbox := gtk_vbox_new(false, 5);
gtk_container_set_border_width(pGtkContainer(vbox), 5);
gtk_container_add(pGtkContainer(window), vbox);

{ Create the ScrolledWindow to pack the CList in. }
scroll := gtk_scrolled_window_new(NIL, NIL);
gtk_scrolled_window_set_policy(pGtkScrolledWindow(scroll),
      GTK_POLICY_AUTOMATIC, GTK_POLICY_ALWAYS);
gtk_box_pack_start(pGtkBox(vbox), scroll, true, true, 0);

{ Create the GtkCList. For this example we use 2 columns }
thelist := gtk_clist_new_with_titles(2, titles);
gtk_container_add(pGtkContainer(scroll), thelist);

{ When a selection is made, we want to know about it. The callback used is selection_made, and it's code can be found above }
gtk_signal_connect(pGtkObject(thelist), 'select_row',
      tGtksignalfunc(@selection_made), NIL);

{ It isn't necessary to shadow the border, but it looks nice :) }
gtk_clist_set_shadow_type(pGtkCList(thelist), GTK_SHADOW_OUT);

{ What however is important, is that we set the column widths as they will never be right otherwise.
    Note that the columns are numbered from 0 and up (to 1 in this case). }

gtk_clist_set_column_width(pGtkCList(thelist), 0, 150);
gtk_clist_set_column_width(pGtkCList(thelist), 1, 100);

{ Create the buttons and add them to the window. See the button tutorial for more examples and comments on this. }
hbox := gtk_hbox_new(false, 0);
gtk_box_pack_start(pGtkBox(vbox), hbox, false, true, 0);

button_add := gtk_button_new_with_label('Add List');
button_clear := gtk_button_new_with_label('Clear List');
button_hide_show := gtk_button_new_with_label('Hide/Show titles');

gtk_box_pack_start(pGtkBox(hbox), button_add, true, true, 0);
gtk_box_pack_start(pGtkBox(hbox), button_clear, true, true, 0);
gtk_box_pack_start(pGtkBox(hbox), button_hide_show, true, true, 0);

{ Connect our callbacks to the three buttons }
gtk_signal_connect_object(pGtkObject(button_add), 'clicked',
      tGtksignalfunc(@button_add_clicked), gpointer(thelist));
gtk_signal_connect_object(pGtkObject(button_clear), 'clicked',
      tGtksignalfunc(@button_clear_clicked), gpointer(thelist));
gtk_signal_connect_object(pGtkObject(button_hide_show), 'clicked',
      tGtksignalfunc(@button_hide_show_clicked), gpointer(thelist));

{ The interface is completely set up so we show all the widgets and enter the gtk_main loop }
gtk_widget_show_all(window);
gtk_main();
 END. { -----------------------------------Main Program-----------------------------------}

 

[Previous] [Contents] [Next]