1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975
|
\documentclass[10pt]{article}
\usepackage{a4}
\usepackage{epsfig}
\usepackage{listings}
\lstset{language=Delphi}%
\lstset{basicstyle=\sffamily\small}%
\lstset{commentstyle=\itshape}%
\lstset{keywordstyle=\bfseries}%
%\lstset{blankstring=true}%
\newif\ifpdf
\ifx\pdfoutput\undefined
\pdffalse
\else
\pdfoutput=1
\pdftrue
\fi
\begin{document}
\title{Programming GTK in Free Pascal}
\author{Florian Kl\"ampfl\\and\\Micha\"el Van Canneyt}
\date{September 2000}
\maketitle
\section{Introduction}
In this second article on programming the GTK toolkit, a more advanced use
of the GTK library is presented. Techniques to create a new GTK widget
are discussed by creating two custom widgets.
The first widget is realized by combining existing GTK widgets to create
a new widget, a GTKFileEdit component, modeled after the TFileEdit component
found in the RXLib library for Delphi.
When constructing the second widget, the focus will be on how a widget
should draw itself in GTK.
\section{Preliminaries}
Whatever the method used when creating new GTK widgets, it is necessary to
split the functionality of the widget in 2 parts.
The first part is the functionality that is common to all instances of the
new widget. This part is by far the most important one, and is implemented
in the 'class record'. This record will be initialized with a class
initialization function. It will also contain pointers to callbacks to
draw a particular instance or callbacks to react on user events.
The second part concerns the particular instance of the widget that is
created, it contains the data that determines the state of an instance
after it is created, it is the actual object created by the user. This
part of the widget is implemented in the 'Object record'. For this record
also there is a initalization function.
When the two records have been defined, some standard methods must be
implemented in order to integrate the new widget in the GTK library.
Implementing some methods for the user to manipulate the properties
of the new widget finishes the creation of a new widget.
Since GTK is implemented in C, the programmer must obey some rules in order
to preserve the object-oriented aspect of the GTK library. More precisely,
when defining the class and object records, care must be taken to specify
the parent object or class as the first element in the newly created structure. This
will allow typecasting of the widget to its parent objects.
Taking a look at the \lstinline|TGtkContainer| widget, we see that the declaration
of the object record starts with the declaration of its parent widget
\lstinline|TGtkWidget|:
\begin{lstlisting}{}
TGtkContainer = record
widget : TGtkWidget;
focus_child : PGtkWidget;
flag0 : longint;
resize_widgets : PGSList;
end;
\end{lstlisting}
The same is true for the \lstinline|TGtkContainerClass| record:
\begin{lstlisting}{}
TGtkContainerClass = record
parent_class : TGtkWidgetClass;
n_child_args : guint;
// ...
end;
\end{lstlisting}
For both the components that will be made, such records will be made.
\section{A filename edit component}
The \lstinline|TGTKFileEdit| component presented here is composed out of three
other components; first of all a single line edit control, in which the
user can type a filename if he wishes. The second is a button. The button
is always placed on the right edge of the edit control, and has the same
height. The third component is an image component, which is used to display
an image on the button\footnote{In GTK a button does not necessarily contains a
caption, it is an empty placeholder, which can be filled with whatever
you want, in this case an image. To have the button display a caption,
a label is placed in it.}
Since the edit and button component must be kept together, we use a
\lstinline|TGtkHBox| as the 'Parent' component, and this component will be
used to keep the edit and button control. There is no need to consider the
image component, since it will be placed inside the button.
Having decided that, the structure of the record for the instance of the
component is more or less determined:
\begin{lstlisting}{}
Type
PGtkFileEdit = ^TGtkFileEdit;
TGtkFileEdit = Record
Box : TGtkHBox;
Edit : PGtkEntry;
Button : PGtkButton;
Image : PGtkPixmap;
Dialog : PGtkFileSelection;
end;
\end{lstlisting}
The first field of the record contains the parent record, as required
by the OOP structure of GTK. The other fields are used to contain references
to the other controls used. The \lstinline|Dialog| field will be filled with the
reference to the file selection dialog which is created when the user clicks
the button, at all other times it will contain a \lstinline|nil| pointer.
Remark that the first field is a record, and all other fields are pointers.
Since the fields of the record are 'Public' the user can access the button
and edit components, and set or read their properties, and set additional
signals. (e.g. a 'change' signal for the edit component)
The class record for the {TGTKFileEdit} component should contain as a first
field the parent class record, in this case \lstinline|TgtkHBoxClass|. Furthermore
in the class record the default bitmap that will be displayed on the button
will be stored. For this two fields are needed; one to keep the bitmap
(\lstinline|DefaultPixmap|, and
another one to keep a bitmask that is used to determine the transparant
pixels in the bitmap (\lstinline|DefaultBitMap|):
\begin{lstlisting}{}
PGtkFileEditClass = ^TGtkFileEditClass;
TGtkFileEditClass = Record
Parent_Class : TgtkHBoxClass;
DefaultPixmap : PGdkPixmap;
DefaultBitMap : PGdkBitmap;
end;
\end{lstlisting}
As usual, a pointer type is defined which points to the record. The fields
of the class record will be filled in by the initialization code for our
component, as will be shown below.
A new widget must be registered with GTK by calling the
\lstinline|gtk_type_unique| function. This function returns a unique
identifier that can be used to refer to your new widget. This value
must be accessible when creating new instances.
Usually, this is done by registering the component with the GTK library
inside a function which returns this unique ID to the user:
The \lstinline|GtkFileEdit_get_type| function.
When this function is called for the first time, it will register
the new class with GTK, which will in turn supply a unique ID for the
new component. This ID is returned and also stored, and will be returned
the next times when the \lstinline|GTKFileEdit_get_type| function is called.
The \lstinline|GTKFileEdit_get_type| function looks like this
\lstinline|gtk\_type\_unique|:
\begin{lstlisting}{}
Function GtkFileEdit_get_type : Guint;cdecl;
Const
GtkFileEditInfo : TGtkTypeInfo =
(type_name : 'GtkFileEdit';
object_size : SizeOf(TGtkFileEdit);
class_size : SizeOf(TGtkFileEditClass);
class_init_func : TGtkClassInitFunc(@GtkFileEditClassInit);
object_init_func : TGtkObjectInitFunc(@GtkFileEditInit);
reserved_1 : Nil;
reserved_2 : Nil;
base_class_init_func : Nil
);
begin
if (GtkFileEditType=0) then
GtkFileEditType:=gtk_type_unique(gtk_hbox_get_type,@GtkFileEditInfo);
Result:=GtkFileEditType;
end;
\end{lstlisting}
Registering the new widget is done by passing a \lstinline|TGtkTypeInfo|
record to \lstinline|gtk_type_unique|, where the fields of this record
are filled with the following information:
\begin{description}
\item[type\_name] Contains the name of the type that must be registered.
\item[object\_size] The size of the object record. GTK itself will allocate
the memory when an new instance of the object is created, so it must know the
size of the object.
\item[class\_size] The size of the class object. Only one instance of this
record will be created (by GTK)
\item[class\_init\_func] The address of a function that will initialize the
class record. This function accepts as a single arument a pointer to the
class record to be initialized. This function will normally be called only
once.
\item[object\_init\_func] The address of a function that will initialize
an instance of the object. The function must accept as a single argument
a pointer to an instance of the object. This instance will be created by
GTK. This function is called for each instance of the object.
\end{description}
The other three fields of the record are unfortunately not documented, so
they are left blank.
Along with the \lstinline|TGtkTypeInfo| record, the tyoe the type of the
parent class (acquired with its own \lstinline|gtk_hbox_get_type|
function) is passed to the \lstinline|gtk_type_unique| function.
If a \lstinline|class_init_func| was specified when registering the new type,
then GTK will call this method; it should initialize any class-specific
data in the class record. In the case of the \lstinline|GTKFileEdit|, the bitmap
which is used to fill the button is loaded:
\begin{lstlisting}{}
Procedure GtkFileEditClassInit (CObj : PGtkFileEditClass);cdecl;
begin
With Cobj^ do
DefaultPixMap:=gdk_pixmap_create_from_xpm(Nil,@DefaultBitmap,
Nil,'fileopen.xpm');
end;
\end{lstlisting}
The \lstinline|gdk_pixmap_create_from_xpm| does 2 things: It loads a bitmap
from the \textsf{fileopen.xpm} file and returns a PGdkPixmap pointer.
At the same time it returns a pointer to a bitmask which designates the
transparant regions of the bitmap.
The result of this function is stored in the class record, so the bitmap
is available when a new instance of the class is created.
The \lstinline|GtkFileEditClassInit| and \lstinline|GtkFileEdit_get_type|
functions are not called automatically by GTK. There are basically
2 solutions to do this as described below.
The first one is specific to Free Pascal: the \lstinline|GtkFileEdit_get_type|
can be called from the unit initialization code; This means that the objects
are registered with GTK, even if they're not used. It also means that the
GTK library must be initialized first, and hence should also be initialized
in the initialization code of some unit.
The second method is the method used in C: The function to create a new
instance of the \lstinline|TGTKFileEdit| class, \lstinline|GTKFileEdit_new|,
calls the \lstinline|get_type| function to register the class if needed,
as follows:
\begin{lstlisting}{}
Function GtkFileEdit_new : PGtkWidget;cdecl;
begin
Result:=gtk_type_new(GtkFIleEdit_get_type)
end;
\end{lstlisting}
When the first instance of the \lstinline|GTKFileEdit| widget is created, the
call to \lstinline|GtkFileEdit_get_type| will register the widget class
first. Subsequent calls to create a new instance will just use the stored
value of the ID that identifies the \lstinline|GTKFileEdit| class.
To be able to create an instance of the \lstinline|GTKFileEdit| class, one
more procedure must be implemented, as can be seen from the class
registration code: \lstinline|GtkFileEditInit|. This procedure will
initialize (i.e. create) a new instance of the class; it should do
whatever is necessary so the instance is ready for use.
In the case of the \lstinline|GTKFileEdit| class, this simply means that
all widgets of which the class is composed, must be created and placed to
gether. This is shown in the following code:
\begin{lstlisting}{}
Procedure GtkFileEditInit (Obj : PGtkFileEdit);cdecl;
Var
PClass : PGtkFileEditClass;
begin
PClass:=PGtkFileEditClass(PGtkObject(Obj)^.klass);
With Obj^ do
begin
Edit := PgtkEntry(gtk_entry_new);
Button := PgtkButton(gtk_button_new);
Image := PgtkPixMap(gtk_pixmap_new(PClass^.DefaultPixmap,
PClass^.DefaultBitmap));
gtk_container_add(PGtkContainer(Button),PGtkWidget(Image));
gtk_box_pack_start(PgtkBox(Obj),PGtkWidget(Edit),True,True,0);
gtk_box_pack_start(PgtkBox(Obj),PGtkWidget(Button),False,True,0);
gtk_signal_connect(PgtkObject(Button),'clicked',
TGtkSignalFunc(@GtkFileEditButtonClick),Obj);
end;
gtk_widget_show_all(PGtkWidget(Obj));
end;
\end{lstlisting}
The code is self explanatory; the sub-widgets are created, and a reference
to them is stored in the fields of our instance record. Note that the
ancestor (a \lstinline|gtkHbox|) is not initialized, this has been done
already by the OOP mechanism of GTK.
After the objects are created, they are put together in the horizontal
box, with the options chosen in such a way that the composed widget scales
well if needed. The bitmap image is of course placed in the button.
Lastly, a signal handler is added to the button, so that when it is clicked,
we can take appropriate action (i.e. show a dialog to select a file).
Note that as the \lstinline|Data| parameter for the signal, the reference
to the \lstinline|GTKFileEdit| instance is passed.
Now the class is ready to be created and shown. However, it doesn't do
anything useful yet. The callback for the button click must still be used.
The callback for the button must create a file selection dialog, show it,
and when it has been closed by a click on the 'OK' button, it should set
the text of the edit widget to the name of the selected file.
In order to do this, some extra callbacks are needed, as can be seen in the
following code:
\begin{lstlisting}{}
Procedure GtkFileEditButtonClick (Obj : PGtkObject; Data : PgtkFileEdit);cdecl;
Var
Dialog : PGtkFileSelection;
begin
Dialog := PGtkFileSelection(gtk_file_selection_new('Please select a file'));
Data^.Dialog:=Dialog;
gtk_signal_connect(PGTKObject(Dialog^.ok_button),'clicked',
TGTKSignalFunc(@GtkStoreFileName),data);
gtk_signal_connect_object (PGtkObject((Dialog)^.ok_button),'clicked',
TGTKSIGNALFUNC (@gtk_widget_destroy), PgtkObject(Dialog));
gtk_signal_connect_object (PGtkObject((Dialog)^.cancel_button),'clicked',
TGTKSIGNALFUNC (@gtk_widget_destroy), PgtkObject(Dialog));
gtk_widget_show(PgtkWidget(dialog));
end;
\end{lstlisting}
The listing shows that an instance of the file selection dialog is created,
and that its signals are set up so that when the user clicks the 'Cancel'
button, the file selection dialog is simply destroyed, and when the 'OK'
button is selected, first a callback is called in which the name of the
selected file will be retrieved, and secondly the file selection dialog
is destroyed.
Two remarks concerning this code are in order:
\begin{enumerate}
\item The order in which the signals are connected to the 'clicked' event of
the OK button is important, since they will be triggered in the order that
they were connected.
\item A reference to the dialog is stored in the \lstinline|GTKFileEdit|
instance, and the reference to the \lstinline|GTKFileEdit| is passed as the
\lstinline|Data| parameter of the signal.
\end{enumerate}
Finally, when the 'OK' button of the file selection dialog is clicked, the
following callback is executed to store the filename in the edit widget of
the \lstinline|GTKFileEdit| widget:
\begin{lstlisting}{}
Procedure GtkStoreFileName(Button : PgtkButton;
TheRec : PGtkFileEdit); cdecl;
begin
With TheRec^ do
begin
gtk_entry_set_text(Edit,gtk_file_selection_get_filename(Dialog));
Dialog:=Nil;
end;
end;
\end{lstlisting}
The callback also removes the reference to the file selection dialog. This
could also have been done by explicitly setting a 'destroy' signal handler
for the dialog, but since the dialog is destroyed after the 'OK' button is
clicked, it is done here.
Now the \lstinline|GTKFileEdit| is ready for use. It is possible to add
some utility functions to the class, for instance one to get or set set
the filename:
\begin{lstlisting}{}
Procedure GtkFileEdit_set_filename (Obj : PGtkFileEdit; FileName : String);cdecl;
begin
gtk_entry_set_text(Obj^.Edit,PChar(FileName));
end;
Function GtkFileEdit_get_filename (Obj : PGtkFileEdit) : String;cdecl;
begin
Result:=StrPas(gtk_entry_get_text(Obj^.Edit));
end;
\end{lstlisting}
The widget can now be used like any other GTK widget:
\begin{lstlisting}{}
program ex1;
{$mode objfpc}
uses
glib,gtk,fileedit;
procedure destroy(widget : pGtkWidget ; data: pgpointer ); cdecl;
begin
gtk_main_quit();
end;
var
window,
fileed,
box,
Button : PgtkWidget;
begin
gtk_init (@argc, @argv);
window := gtk_window_new (GTK_WINDOW_TOPLEVEL);
fileed := gtkfileedit_new;
gtk_container_set_border_width(GTK_CONTAINER(Window),5);
box:=gtk_vbox_new(true,10);
button:=gtk_button_new_with_label('Quit');
gtk_box_pack_start(pgtkbox(box),PGtkWidget(fileed),False,False,0);
gtk_box_pack_start(pgtkbox(box),pgtkWidget(button),True,False,0);
gtk_container_add(GTK_Container(window),box);
gtk_signal_connect (PGTKOBJECT (window), 'destroy',
GTK_SIGNAL_FUNC (@destroy), NULL);
gtk_signal_connect_object(PgtkObject(button),'clicked',
GTK_SIGNAL_FUNC(@gtk_widget_destroy),
PGTKOBJECT(window));
gtk_widget_show_all (window);
gtk_main ();
end.
\end{lstlisting}
The result will look something like figure \ref{fig:fileedit}
\begin{figure}[h]
\begin{center}
\caption{The GTKFileEdit in action}\label{fig:fileedit}
\vspace{3mm}
\epsfig{file=gtk2ex/ex1.png}
\end{center}
\end{figure}
This widget is of course not finished, it can be enhanced in many ways:
Some additional functionality would be to provide a filter for the dialog,
or to set the directory initialiy displayed, provide a title for the dialog,
set a different image on the button, verify that the selected file exists,
and so on. these can be added in much the same way that the
\lstinline|GTKFileEdit_get_filename| and
\lstinline|GTKFileEdit_set_filename| were implemented.
The fact that the parts making up the widget, such as the button and the edit
widgets, are available as fields in the instance record makes it possible
for the user to set additional properties, provided by these widgets. One
could imagine the user connecting to the 'changed' signal of the edit, to
check whether or not the filename being typed exists, and enabling or
disabling other widgets accordingly. The usage of the file selection dialog
itself also makes this clear.
\section{A LED digit widget}
The second widget to be presented in this article is a widget displaying
a LED digit; such as found in many CD-Player displays or digital clocks.
This will demonstrate how to draw a widget on the screen.
A descendent which reacts to mouse clicks will also be created, which will
demonstrate how to react to user events such as mouse clicks.
A digit consists out of 7 segments, which can be either lit or not lit
(dimmed). For each of the 10 digits (0..9) the state of each of the segments
must be specified. For this we introduce some types and constants:
\begin{lstlisting}{}
Type
TLEDSegment = (lsTop,lsCenter,lsBottom,
lsLeftTop,lsRightTop,
lsLeftBottom, lsRightBottom);
TLedSegments = Array[TLedSegment] of boolean;
Const
DigitSegments : Array[0..9] of TLEDSegments =
(
(true,false,true,true,true,true,true), // 0
(false,false,false,false,true,false,true), // 1
(true,true,true,false,true,true,false), // 2
(true,true,true,false,true,false,true), // 3
(false,true,false,true,true,false,true), // 4
(true,true,true,true,false,false,true), // 5
(true,true,true,true,false,true,true), // 6
(true,false,false,false,true,false,true), // 7
(true,true,true,true,true,true,true), // 8
(true,true,true,true,true,false,true) // 9
);
\end{lstlisting}
The meaning of each of these types and the constant is obvious.
Each segment is drawn between 2 points, located on a rectangle
with 6 points, as shown in figure \ref{fig:corners}
\begin{figure}
\begin{center}
\caption{Corners of a digit}\label{fig:corners}
\epsfig{file=gtk2ex/corners.png}
\end{center}
\end{figure}
Each segment is drawn between 2 corners: a start corner and an end corner.
For each segment the start and end corner are stored in the
\lstinline|SegmentCorners| array.
\begin{lstlisting}{}
Type
TSegmentCorners = Array [1..2] of Byte;
Const
SegmentCorners : Array [TLEDSegment] of TSegmentCorners =
(
(1,2),
(3,4),
(5,6),
(1,3),
(2,4),
(3,5),
(4,6)
);
\end{lstlisting}
These constants will facilitate the drawing of the digit later on.
For the digit widget, 2 records must again be introduced; one for the class,
and one for the instances of objects:
\begin{lstlisting}{}
Type
TPoint = Record
X,Y : gint;
end;
PGtkDigit = ^TGtkDigit;
TGtkDigit = Record
ParentWidget : TGtkWidget;
borderwidth,
digit : guint;
Corners : Array [1..6] of TPoint;
end;
PGtkDigitClass = ^TGtkDigitClass;
TGtkDigitClass = Record
Parent_Class : TGtkWidgetClass;
end;
\end{lstlisting}
The class record \lstinline|TGtkDigitClass| contains no extra information
in this case, it has the parent class record as its ony field, as required
bythe GTK object model. It could however be used to store some default values to
be applied to new widgets, as was the case for the \lstinline|GTKFileEdit|
widget.
The object record contains three extra fields:
\begin{description}
\item[borderwidth] The distance between the segments and the border of
the widget.
\item[digit] The digit to be displayed.
\item[Corners] this array contains the locations of each of the corners
between which the segments will be drawn.
\end{description}
The \lstinline|GTKDigit| class must be registered with GTK, and this happens
in the same manner as before:
\begin{lstlisting}{}
Function GtkDigit_get_type : Guint;cdecl;
Const
GtkDigitInfo : TGtkTypeInfo =
(type_name : 'GtkDigit';
object_size : SizeOf(TGtkDigit);
class_size : SizeOf(TGtkDigitClass);
class_init_func : TGtkClassInitFunc(@GtkDigitClassInit);
object_init_func : TGtkObjectInitFunc(@GtkDigitInit);
reserved_1 : Nil;
reserved_2 : Nil;
base_class_init_func : Nil
);
begin
if (GtkDigitType=0) then
GtkDigitType:=gtk_type_unique(gtk_widget_get_type,@GtkDigitInfo);
Result:=GtkDigitType;
end;
\end{lstlisting}
In the class initialization code, the real difference between this widget
and the previous one becomes clear:
\begin{lstlisting}{}
Procedure GtkDigitClassInit (CObj : PGtkDigitClass);cdecl;
begin
With PGtkWidgetClass(Cobj)^ do
begin
size_request:=@GTKDigitSizeRequest;
expose_event:=@GTKDigitExpose;
size_allocate:=@GTKDigitSizeAllocate;
end;
end;
\end{lstlisting}
Here GTK is told that, in order to determine the size of the widget,
it should first call \lstinline|GTKDigitSizeRequest|; this will provide
GTK with an initial size for the object. After GTK has placed all widgets
in the window, and has determined the sizes and positions it will allocate
to each widget in the form, it will call \lstinline|GTKDigitSizeAllocate|
to notify the \lstinline|GTKDigit| widget of the size it is being allocated.
Finally, the \lstinline|expose_event| callback is set; this informs GTK that
when a part of the widget should be drawn (because it is visible to the
user), \lstinline|GTKDigitExpose| should be called. There are actually 2
callbacks to draw a widget; one of them is
the \lstinline|draw| function and the other is the (here used)
\lstinline|expose| function. The \lstinline|draw| function of
\lstinline|GTKWidget| just generates an expose event for the entire widget,
and for the current widget this is enough. There are, however, cases where
it may be necessary to differentiate between the two for optmization
purposes.
The object initialization function \lstinline|| simply initializes all fields to their
default values:
\begin{lstlisting}{}
Procedure GtkDigitInit (Obj : PGtkDigit);cdecl;
Var I : longint;
begin
gtk_widget_set_flags(pgtkWidget(obj),GTK_NO_WINDOW);
With Obj^ do
begin
Digit:=0;
BorderWidth:=2;
For I:=1 to 6 do
with Corners[i] do
begin
X:=0;
Y:=0;
end;
end;
end;
\end{lstlisting}
The interesting thing in the initialization function is the call to
\lstinline|gtk_widget_set_flags|; this tells GTK that the
\lstinline|GtkDigit| does not need its own window. Indeed, it will
use its parent window to draw itself when needed.
This also means that no extra resources must be allocated for the widget.
The \lstinline|size_request| callback will in our case simply ask for some
default size for the digit:
\begin{lstlisting}{}
Procedure GTKDigitSizeRequest (Widget : PGtkWidget;
Request : PGtkRequisition);cdecl;
Var BW : guint;
begin
With PGTKDigit(Widget)^ do
BW:=BorderWidth;
With Request^ do
begin
Width:=20+2*BW;
Height:=40+2*BW;
end;
end;
\end{lstlisting}
usually, GTK will allocate a size at least equal to the size requested. It
may however be more than this.
When GTK has decided what the real size of the widget will be, the
\lstinline|GTKDigitSizeAllocate| will be called:
\begin{lstlisting}{}
procedure GTKDigitSizeAllocate(Widget : PGTKWidget;
Allocation : PGTKAllocation);cdecl;
begin
Widget^.Allocation:=Allocation^;
SetDigitCorners(PGtkDigit(Widget),False);
end;
\end{lstlisting}
This procedure first of all stores the allocated size in the widget, and
then it calls \lstinline|SetDigitCorners| to calculate the positions of
the corners of the segments; this is done as follows:
\begin{lstlisting}{}
Procedure SetDigitCorners(Digit : PGtkDigit; IgnoreOffset : Boolean);
Var
BW : guint;
W,H,SX,SY : gint;
i : longint;
Widget : PGTKWidget;
begin
Widget:=PGTKWidget(Digit);
BW:=Digit^.Borderwidth;
If IgnoreOffset then
begin
SX:=0;
SY:=0;
end
else
begin
SX:=Widget^.Allocation.x;
SY:=Widget^.Allocation.y;
end;
W:=Widget^.Allocation.Width-2*BW;
H:=(Widget^.Allocation.Height-2*BW) div 2;
With PGTKDigit(Widget)^ do
For I:=1 to 6 do
begin
Case I of
1,3,5 : Corners[i].X:=SX+BW;
2,4,6 : Corners[i].X:=SX+BW+W;
end;
Case I of
1,2 : Corners[i].Y:=SY+BW;
3,4 : Corners[i].Y:=SY+BW+H;
5,6 : Corners[i].Y:=SY+BW+2*H
end;
end;
end;
\end{lstlisting}
Since the \lstinline|GTKDigit| will draw on its parents window, it must
take into account the offset (x,y) of the allocated size. The reason that
this is parametrized with the \lstinline|IgnoreOffset| parameter will become
clear when the descendent widget is introduced.
This function could be adapted to give e.g. a slight tilt to the digits.
Remains to implement the \lstinline|expose_event| callback:
\begin{lstlisting}{}
Function GTKDigitExpose (Widget : PGTKWidget;
ExposeEvent : PGDKEventExpose) : gint;cdecl;
Var
Segment : TLedSegment;
begin
With PGTKDigit(Widget)^ do
For Segment:=lsTop to lsRightBottom do
if DigitSegments[Digit][Segment] then
gdk_draw_line(widget^.window,
PgtkStyle(widget^.thestyle)^.fg_gc[widget^.state],
Corners[SegmentCorners[Segment][1]].X,
Corners[SegmentCorners[Segment][1]].Y,
Corners[SegmentCorners[Segment][2]].X,
Corners[SegmentCorners[Segment][2]].Y
)
else
gdk_draw_line(widget^.window,
PgtkStyle(widget^.thestyle)^.bg_gc[widget^.state],
Corners[SegmentCorners[Segment][1]].X,
Corners[SegmentCorners[Segment][1]].Y,
Corners[SegmentCorners[Segment][2]].X,
Corners[SegmentCorners[Segment][2]].Y
);
end;
\end{lstlisting}
Here the need for the types and constants, introduced in the
beginning of this section becomes obvious; without them, a huge
case statement would be needed to draw all needed segments.
Note that when a segment of our digit is not 'lit', it is drawn in the
background color. When the digit to be displayed changes, the segments
that are no longer lit, must be 'dimmed' again.
Finally we provide 2 methods to get and set the digit to be dislayed:
\begin{lstlisting}{}
Procedure GtkDigit_set_digit (Obj : PGtkDigit; Digit : guint);cdecl;
begin
if Digit in [0..9] then
begin
Obj^.Digit:=Digit;
gtk_widget_draw(PGTKWidget(Obj),Nil);
end;
end;
Function GtkDigit_get_digit (Obj : PGtkDigit) : guint;cdecl;
begin
Result:=Obj^.Digit;
end;
\end{lstlisting}
Obviously, when setting the digit to be displayed, the widget must be
redrawn, or the display would not change till the next expose event.
Calling \lstinline|gtk_widget_draw| ensures that the digit will be displayed
correctly.
Now the widget is ready for use; it can be created and put on a window
in the same manner as the \lstinline|GTKFileEdit| control; the code will
not be shown, but is available separately.
The result is shown in figure \ref{fig:ex2}.
\begin{figure}
\begin{center}
\caption{The GTKDigit widget in action.}\label{fig:ex2}
\epsfig{file=gtk2ex/ex2.png}
\end{center}
\end{figure}
The widget can be improved in many ways. The segments can be tilted, a
bigger width can be used; the can have rounded edges and so on.
The widget as presented here doesn't react on user events; it has no way
of doing that, since it doesn't have an own window; Therefore a descendent
is made which creates its own window, and which will react on mouse clicks;
this widget will be called \lstinline|GTKActiveDigit|.
The lstinline|GTKActiveDigit| widget is a descendent from its inactive
counterpart. Therefore the class and object records will be (almost) empty:
\begin{lstlisting}{}
Type
PGtkActiveDigit = ^TGtkActiveDigit;
TGtkActiveDigit = Record
ParentWidget : TGtkDigit;
Button : guint8;
end;
PGtkActiveDigitClass = ^TGtkActiveDigitClass;
TGtkActiveDigitClass = Record
Parent_Class : TGtkDigitClass;
end;
\end{lstlisting}
The \lstinline|Button| field is used to store which button was used to click
on the digit.
The registration of the new widget is similar to the one for
\lstinline|GTKDigit|, and doesn't need more explanation:
\begin{lstlisting}{}
Const
GtkActiveDigitType : guint = 0;
Function GtkActiveDigit_get_type : Guint;cdecl;
Const
GtkActiveDigitInfo : TGtkTypeInfo =
(type_name : 'GtkActiveDigit';
object_size : SizeOf(TGtkActiveDigit);
class_size : SizeOf(TGtkActiveDigitClass);
class_init_func : TGtkClassInitFunc(@GtkActiveDigitClassInit);
object_init_func : TGtkObjectInitFunc(@GtkActiveDigitInit);
reserved_1 : Nil;
reserved_2 : Nil;
base_class_init_func : Nil
);
begin
if (GtkActiveDigitType=0) then
GtkActiveDigitType:=gtk_type_unique(gtkdigit_get_type,@GtkActiveDigitInfo);
Result:=GtkActiveDigitType;
end;
Function GtkActiveDigit_new : PGtkWidget;cdecl;
begin
Result:=gtk_type_new(GtkActiveDigit_get_type)
end;
\end{lstlisting}
The first real difference is in the class initialization routine:
\begin{lstlisting}{}
Procedure GtkActiveDigitClassInit (CObj : PGtkActiveDigitClass);cdecl;
begin
With PGtkWidgetClass(Cobj)^ do
begin
realize := @GtkActiveDigitRealize;
size_allocate := @GtkActiveDigitSizeAllocate;
button_press_event:=@GtkActiveDigitButtonPress;
button_release_event:=@GtkActiveDigitButtonRelease;
end;
end;
\end{lstlisting}
The \lstinline|realize| and \lstinline|size_allocate| of the parent widget
\lstinline|GTKDigit| are overriden here. Also 2 events callbacks are
assigned in order to react on mouse clicks.
The object initialization function must undo some work that was done
ba the parent's initialization function:
\begin{lstlisting}{}
Procedure GtkActiveDigitInit (Obj : PGtkActiveDigit);cdecl;
begin
gtk_widget_unset_flags(pgtkWidget(obj),GTK_NO_WINDOW);
With Obj^ do
Button:=0;
end;
\end{lstlisting}
This is necessary, because the \lstinline|GTKActiveDigit| will create it's
own window.
For this widget, the \lstinline|realize| callback must do a little more
work. It must create a window on which the digit will be drawn. The window
is created with some default settings, and the event mask for the window
is set such that the window will respond to mouse clicks:
\begin{lstlisting}{}
Procedure GtkActiveDigitRealize(widget : PgtkWidget);cdecl;
Var
attr : TGDKWindowAttr;
Mask : gint;
begin
GTK_WIDGET_SET_FLAGS(widget,GTK_REALIZED);
With Attr do
begin
x := widget^.allocation.x;
y := widget^.allocation.y;
width:=widget^.allocation.width;
height:=widget^.allocation.height;
wclass:=GDK_INPUT_OUTPUT;
window_type:=gdk_window_child;
event_mask:=gtk_widget_get_events(widget) or GDK_EXPOSURE_MASK or
GDK_BUTTON_PRESS_MASK OR GDK_BUTTON_RELEASE_MASK;
visual:=gtk_widget_get_visual(widget);
colormap:=gtk_widget_get_colormap(widget);
end;
Mask:=GDK_WA_X or GDK_WA_Y or GDK_WA_VISUAL or GDK_WA_COLORMAP;
widget^.Window:=gdk_window_new(widget^.parent^.window,@attr,mask);
widget^.thestyle:=gtk_style_attach(widget^.thestyle,widget^.window);
gdk_window_set_user_data(widget^.window,widget);
gtk_style_set_background(widget^.thestyle,widget^.window,GTK_STATE_ACTIVE);
end;
\end{lstlisting}
After the window was created, its userdata is set to the widget. This
ensures that the events which occur in the window are passed on to our
widget by GTK. Finally the background of the window is set to some
other style than the default style.
The size allocation event should in principle do the same as that for the
\lstinline|GTKDigit| widget, with the exeption that the calculation of the
corners for the segments must now not be done relative to the parent window:
\begin{lstlisting}{}
procedure GTKActiveDigitSizeAllocate(Widget : PGTKWidget;
Allocation : PGTKAllocation);cdecl;
begin
Widget^.allocation:=Allocation^;
if GTK_WIDGET_REALIZED(widget) then
gdk_window_move_resize(widget^.window,
Allocation^.x,
Allocation^.y,
Allocation^.width,
Allocation^.height);
SetDigitCorners(PGTKDigit(Widget),True);
end;
\end{lstlisting}
This explains the need for the \lstinline|IgnoreOffset| parameter in the
\lstinline|SetDigitCorners| function.
All that is left is to implement the mouse click events:
\begin{lstlisting}{}
Function GtkActiveDigitButtonPress(Widget: PGtKWidget;
Event : PGdkEventButton) : gint;cdecl;
begin
PGTKActiveDigit(Widget)^.Button:=Event^.Button;
end;
Function GtkActiveDigitButtonRelease(Widget: PGtKWidget;
Event : PGdkEventButton) : gint;cdecl;
Var
Digit : PGtkDigit;
D : guint;
begin
Digit:=PGTKDigit(Widget);
D:=gtkdigit_get_digit(Digit);
If PGTKActiveDigit(Digit)^.Button=Event^.Button then
begin
If Event^.Button=1 then
GTKDigit_set_digit(Digit,D+1)
else if Event^.Button=3 then
GTKDigit_set_digit(Digit,D-1)
else
GTKDigit_set_digit(Digit,0);
end;
PGTKActiveDigit(Digit)^.Button:=0;
end;
\end{lstlisting}
As can be seen, the digit will be incremented when the left mouse button
is clicked. The digit is decremented when the right button is clicked.
On systems with 3 mouse buttons, a click on the middle mouse button will
reset the digit to 0.
After all this, the widget is ready for use, and should look more or less
like the one in figure \ref{fig:ex3}.
\begin{figure}[h]
\begin{center}
\caption{The GTKActiveDigit in action.}\label{fig:ex3}
\epsfig{file=gtk2ex/ex3.png}
\end{center}
\end{figure}
The widgets presented here are not complete; many improvements can be made,
but their main purpose was to demonstrate that implementing some new widgets
is very easy and can be achieved with little effort; what is more, the OOP
structure of GTK is very suitable for the implementation of small
enhancements to existing components, as was shown with the last widget
presented.
\end{document}
|