]> Pileus Git - ~andy/gtk/blob - docs/reference/gtk/drawing-model.xml
Deprecate some widget flags
[~andy/gtk] / docs / reference / gtk / drawing-model.xml
1 <?xml version="1.0"?>
2 <!DOCTYPE refentry PUBLIC "-//OASIS//DTD DocBook XML V4.3//EN"
3                "http://www.oasis-open.org/docbook/xml/4.3/docbookx.dtd" [
4 ]>
5 <refentry id="chap-drawing-model">
6 <refmeta>
7 <refentrytitle>The GTK+ Drawing Model</refentrytitle>
8 <manvolnum>3</manvolnum>
9 <refmiscinfo>GTK Library</refmiscinfo>
10 </refmeta>
11
12 <refnamediv>
13 <refname>The GTK+ Drawing Model</refname>
14 <refpurpose>
15     The GTK+ drawing model in detail
16 </refpurpose>
17 </refnamediv>
18
19
20   <refsect1 id="drawing-overview">
21     <title>Overview of the drawing model</title>
22
23     <para>
24       This chapter describes the GTK+ drawing model in detail.  If you
25       are interested in the procedure which GTK+ follows to draw its
26       widgets and windows, you should read this chapter; this will be
27       useful to know if you decide to implement your own widgets.  This
28       chapter will also clarify the reasons behind the ways certain
29       things are done in GTK+; for example, why you cannot change the
30       background color of all widgets with the same method.
31     </para>
32
33     <para>
34       Programs that run in a windowing system generally create
35       rectangular regions in the screen called
36       <firstterm>windows</firstterm>.  Traditional windowing systems
37       do not automatically save the graphical content of windows, and
38       instead ask client programs to repaint those windows whenever it
39       is needed.  For example, if a window that is stacked below other
40       windows gets raised to the top, then a client program has to
41       repaint the area that was previously obscured.  When the
42       windowing system asks a client program to redraw part of a
43       window, it sends an <firstterm>exposure event</firstterm> to the
44       program for that window.
45     </para>
46
47     <para>
48       Here, "windows" means "rectangular regions with automatic
49       clipping", instead of "toplevel application windows".  Most
50       windowing systems support nested windows, where the contents of
51       child windows get clipped by the boundaries of their parents.
52       Although GTK+ and GDK in particular may run on a windowing
53       system with no such notion of nested windows, GDK presents the
54       illusion of being under such a system.  A toplevel window may
55       contain many subwindows and sub-subwindows, for example, one for
56       the menu bar, one for the document area, one for each scrollbar,
57       and one for the status bar.  In addition, controls that receive
58       user input, such as clickable buttons, are likely to have their
59       own subwindows as well.
60     </para>
61
62     <para>
63       Generally, the drawing cycle begins when GTK+ receives an
64       exposure event from the underlying windowing system:  if the
65       user drags a window over another one, the windowing system will
66       tell the underlying window that it needs to repaint itself.  The
67       drawing cycle can also be initiated when a widget itself decides
68       that it needs to update its display.  For example, when the user
69       types a character in a <link
70       linkend="GtkEntry"><classname>GtkEntry</classname></link>
71       widget, the entry asks GTK+ to queue a redraw operation for
72       itself.
73     </para>
74
75     <para>
76       The following sections describe how GTK+ decides which widgets
77       need to be repainted, and how widgets work internally in terms
78       of the resources they use from the windowing system.
79     </para>
80
81     <refsect2 id="window-no-window-widgets">
82       <title>Window and no-window widgets</title>
83
84       <para>
85         A <link linkend="GdkWindow"><classname>GdkWindow</classname></link>
86         represents a window from the underlying windowing system on which GTK+
87         is running.  For example, on X11 it corresponds to a
88         <type>Window</type>; on Win32, it corresponds to a <type>HANDLE</type>.
89         The windowing system generates events for these windows.  The GDK
90         interface to the windowing system translates such native events into
91         <link linkend="GdkEvent"><structname>GdkEvent</structname></link>
92         structures and sends them on to the GTK layer.  In turn, the GTK layer
93         finds the widget that corresponds to a particular
94         <classname>GdkWindow</classname> and emits the corresponding event
95         signals on that widget.
96       </para>
97
98       <para>
99         When the program needs to redraw a region of a
100         <classname>GdkWindow</classname>, GDK generates an event of
101         type <link
102         linkend="GDK_EVENT_EXPOSE"><constant>GDK_EVENT_EXPOSE</constant></link>
103         for that window.  The GTK+ widget layer in turn finds the
104         widget that corresponds to that window, and emits the <link
105         linkend="GtkWidget-expose-event">expose-event signal</link>
106         for that widget.
107       </para>
108
109       <para>
110         In principle, each widget could have a
111         <classname>GdkWindow</classname> of its own.  With such a
112         scheme, the drawing cycle would be trivial:  when GDK notifies
113         the GTK layer about an exposure event for a
114         <classname>GdkWindow</classname>, the GTK layer would simply
115         emit the <link linkend="GtkWidget-expose-event">expose-event
116         signal</link> for that widget.  The widget's expose event
117         handler would subsequently repaint the widget.  No further
118         work would be necessary; the windowing system would generate
119         exposure events for each window that needs it, and then each
120         corresponding widget would draw itself in turn.
121       </para>
122
123       <para>
124         However, in practice it is convenient to have widgets which do
125         not have a <classname>GdkWindow</classname> of their own, but
126         rather share the one from their parent widget.  Such widgets
127         have called <function>gtk_widget_set_has_window</function> to
128         disable it; this can be tested easily with the <link
129         linkend="gtk-widget-get-has-window"><function>gtk_widget_get_has_window()</function></link>
130         function.  As such, these are called <firstterm>no-window
131         widgets</firstterm>.
132       </para>
133
134       <para>
135         No-window widgets are useful for various reasons:
136       </para>
137
138       <itemizedlist>
139         <listitem>
140           <para>
141             Some widgets may want the parent's background to show through, even
142             when they draw on parts of it.  For example, consider a theme that
143             uses textured backgrounds, such as gradients or repeating
144             patterns.  If each widget had its own window, and in turn its own
145             gradient background, labels would look bad because there would be a
146             visible break with respect to their surroundings.  <xref
147               linkend="figure-windowed-label"/> shows this undesirable effect.
148           </para>
149
150           <figure id="figure-windowed-label">
151             <title>Windowed label vs. no-window label</title>
152
153             <graphic fileref="figure-windowed-label.png" format="png"/>
154           </figure>
155         </listitem>
156
157         <listitem>
158           <para>
159             Reducing the number of windows creates less traffic between GTK+ and
160             the underlying windowing system, especially when getting events.
161           </para>
162         </listitem>
163       </itemizedlist>
164
165       <para>
166         On the other hand, widgets that would benefit from having a "hard"
167         clipping region may find it more convenient to create their own
168         windows.  Also, widgets which want to receive events resulting from
169         user interaction may find it convenient to use windows of their own as
170         well.  Widgets may have more than one window if they want to
171         define different regions for capturing events.
172       </para>
173     </refsect2>
174
175     <refsect2 id="hierarchical-drawing">
176       <title>Hierarchical drawing</title>
177
178       <para>
179         When the GTK layer receives an exposure event from GDK, it
180         finds the widget that corresponds to the window which received
181         the event.  By definition, this corresponds to a widget that
182         has the <constant>GTK_NO_WINDOW</constant> flag turned
183         <emphasis>off</emphasis> (otherwise, the widget wouldn't own
184         the window!).  First this widget paints its background, and
185         then, if it is a container widget, it tells each of its
186         <constant>GTK_NO_WINDOW</constant> children to paint
187         themselves.  This process is applied recursively for all the
188         <constant>GTK_NO_WINDOW</constant> descendants of the original
189         widget.
190       </para>
191
192       <para>
193         Note that this process does not get propagated to widgets
194         which have windows of their own, that is, to widgets which
195         have the <constant>GTK_NO_WINDOW</constant> flag turned off.
196         If such widgets require redrawing, then the windowing system
197         will already have sent exposure events to their corresponding
198         windows.  As such, there is no need to
199         <firstterm>propagate</firstterm> the exposure to them on the
200         GTK+ side.
201       </para>
202
203       <para>
204         <xref
205         linkend="figure-hierarchical-drawing"/> shows how a simple toplevel window would
206         paint itself when it contains only <constant>GTK_NO_WINDOW</constant> descendants:
207
208         <orderedlist>
209           <listitem>
210             <para>
211               The outermost, thick rectangle is a toplevel <link
212                 linkend="GtkWindow"><classname>GtkWindow</classname></link>,
213               which is not a <constant>GTK_NO_WINDOW</constant> widget &mdash;
214               as such, it does receive its exposure event as it comes from GDK.
215               First the <classname>GtkWindow</classname> would paint its own
216               background.  Then, it would ask its only child to paint itself,
217               numbered 2.
218             </para>
219           </listitem>
220           <listitem>
221             <para>
222               The dotted rectangle represents a <link
223                 linkend="GtkVBox"><classname>GtkVBox</classname></link>, which
224               has been made the sole child of the
225               <classname>GtkWindow</classname>.  Boxes are just layout
226               containers that do not paint anything by themselves, so this
227               <classname>GtkVBox</classname> would draw nothing, but rather ask
228               its children to draw themselves.  The children are numbered 3 and
229               6.
230             </para>
231           </listitem>
232           <listitem>
233             <para>
234               The thin rectangle is a <link
235                 linkend="GtkFrame"><classname>GtkFrame</classname></link>,
236               which has two children:  a label for the frame, numbered 4, and
237               another label inside, numbered 5.  First the frame would draw its
238               own beveled box, then ask the frame label and its internal child to
239               draw themselves.
240             </para>
241           </listitem>
242           <listitem>
243             <para>
244               The frame label has no children, so it just draws its text:  "Frame&nbsp;Label".
245             </para>
246           </listitem>
247           <listitem>
248             <para>
249               The internal label has no children, so it just draws its text:  "This
250               is some text inside the frame!".
251             </para>
252           </listitem>
253           <listitem>
254             <para>
255               The dotted rectangle represents a <link
256                 linkend="GtkHBox"><classname>GtkHBox</classname></link>.  Again,
257               this does not draw anything by itself, but rather asks its children
258               to draw themselves.  The children are numbered 7 and 9.
259             </para>
260           </listitem>
261           <listitem>
262             <para>
263               The thin rectangle is a <link
264                 linkend="GtkButton"><classname>GtkButton</classname></link> with
265               a single child, numbered 8.  First the button would draw its
266               beveled box, and then it would ask its child to draw itself.
267             </para>
268           </listitem>
269           <listitem>
270             <para>
271               This is a text label which has no children, so it just draws its
272               own text:  "Cancel".
273             </para>
274           </listitem>
275           <listitem>
276             <para>
277               Similar to number 7, this is a button with a single child, numbered
278               10.  First the button would draw its beveled box, and then it would
279               ask its child to draw itself.
280             </para>
281           </listitem>
282           <listitem>
283             <para>
284               Similar to number 8, this is a text label which has no children,
285               so it just draws its own text:  "OK".
286             </para>
287           </listitem>
288         </orderedlist>
289       </para>
290
291       <figure id="figure-hierarchical-drawing">
292         <title>Hierarchical drawing order</title>
293
294         <graphic fileref="figure-hierarchical-drawing.png" format="png"/>
295       </figure>
296
297       <para>
298         To avoid the flickering that would result from each widget drawing
299         itself in turn, GTK+ uses a double-buffering mechanism.  The following
300         sections describe this mechanism in detail.
301       </para>
302     </refsect2>
303
304     <refsect2 id="notes-on-drawing-no-window-widgets">
305       <title>Notes on drawing no-window widgets</title>
306
307       <para>
308         Remember that the coordinates in a <link
309         linkend="GdkEventExpose">GdkEventExpose</link> are relative to
310         the <classname>GdkWindow</classname> that received the event,
311         <emphasis>not</emphasis> to the widget whose expose-event
312         handler is being called.  If your widget owns the window, then
313         these coordinates are probably what you expect.  However, if
314         you have a <constant>GTK_NO_WINDOW</constant> widget that
315         shares its parent's window, then the event's coordinates will
316         be offset by your widget's allocation:  remember that the
317         allocation is always relative to the parent
318         <emphasis>window</emphasis> of the widget, not to the parent
319         <emphasis>widget</emphasis> itself.
320       </para>
321
322       <para>
323         For example, if you have a no-window widget whose allocation
324         is {&nbsp;x=5,&nbsp;y=6,
325         <replaceable>width</replaceable>,&nbsp;<replaceable>height</replaceable>&nbsp;},
326         then your drawing origin should be at (5,&nbsp;6), not at
327         (0,&nbsp;0).
328       </para>
329     </refsect2>
330
331     <refsect2 id="include-inferiors">
332       <title>Drawing over child windows</title>
333
334       <para>
335         When you draw on a <classname>GdkWindow</classname>, your
336         drawing gets clipped by any child windows that it may
337         intersect.  Sometimes you need to draw over your child windows
338         as well; for example, when drawing a drag-handle to resize
339         something.  In this case, turn on the <link
340         linkend="GDK-INCLUDE-INFERIORS:CAPS">GDK_INCLUDE_INFERIORS</link>
341         subwindow mode for the <link
342         linkend="gdk-Graphics-Contexts">GdkGC</link> which you use for
343         drawing.
344       </para>
345     </refsect2>
346   </refsect1>
347
348   <refsect1 id="double-buffering">
349     <title>Double buffering</title>
350
351     <para>
352       When the GTK layer receives an exposure event from GDK, it first finds
353       the <literal>!<constant>GTK_NO_WINDOW</constant></literal> widget that
354       corresponds to the event's window.  Then, it emits the <link
355         linkend="GtkWidget-expose-event">expose-event signal</link> for that
356       widget.  As described above, that widget will first draw its background,
357       and then ask each of its <constant>GTK_NO_WINDOW</constant> children to
358       draw themselves.
359     </para>
360
361     <para>
362       If each of the drawing calls made by each subwidget's
363       <literal>expose-event</literal> handler were sent directly to the
364       windowing system, flicker could result.  This is because areas may get
365       redrawn repeatedly:  the background, then decorative frames, then text
366       labels, etc.  To avoid flicker, GTK+ employs a <firstterm>double
367         buffering</firstterm> system at the GDK level.  Widgets normally don't
368       know that they are drawing to an off-screen buffer; they just issue their
369       normal drawing commands, and the buffer gets sent to the windowing system
370       when all drawing operations are done.
371     </para>
372
373     <!-- FIXME: figure with a timeline of non-double-buffered and
374          double-buffered paints:
375
376          onscreen:
377          [garbage]
378          [background]
379          [button-frame]
380          [icon]
381          [label]
382
383
384          onscreen:             offscreen:
385          [garbage]
386                                [background]
387                                [button-frame]
388                                [icon]
389                                [label]
390          [final result]
391     -->
392
393     <para>
394       Two basic functions in GDK form the core of the double-buffering
395       mechanism:  <link
396       linkend="gdk_window_begin_paint_region"><function>gdk_window_begin_paint_region()</function></link>
397       and <link
398       linkend="gdk_window_end_paint"><function>gdk_window_end_paint()</function></link>.
399       The first function tells a <classname>GdkWindow</classname> to
400       create a temporary off-screen buffer for drawing.  All
401       subsequent drawing operations to this window get automatically
402       redirected to that buffer.  The second function actually paints
403       the buffer onto the on-screen window, and frees the buffer.
404     </para>
405
406     <refsect2 id="automatic-double-buffering">
407       <title>Automatic double buffering</title>
408
409       <para>
410         It would be inconvenient for all widgets to call
411         <function>gdk_window_begin_paint_region()</function> and
412         <function>gdk_window_end_paint()</function> at the beginning
413         and end of their expose-event handlers.
414       </para>
415
416       <para>
417         To make this easier, most GTK+ widgets have the
418         <constant>GTK_DOUBLE_BUFFERED</constant> <link
419         linkend="GtkWidgetFlags">widget flag</link> turned on by
420         default.  When GTK+ encounters such a widget, it automatically
421         calls <function>gdk_window_begin_paint_region()</function>
422         before emitting the expose-event signal for the widget, and
423         then it calls <function>gdk_window_end_paint()</function>
424         after the signal has been emitted.  This is convenient for
425         most widgets, as they do not need to worry about creating
426         their own temporary drawing buffers or about calling those
427         functions.
428       </para>
429
430       <para>
431         However, some widgets may prefer to disable this kind of
432         automatic double buffering and do things on their own.  To do
433         this, turn off the <constant>GTK_DOUBLE_BUFFERED</constant>
434         flag in your widget's constructor.
435       </para>
436
437       <example id="disabling-double-buffering">
438         <title>Disabling automatic double buffering</title>
439
440         <programlisting>
441 static void
442 my_widget_init (MyWidget *widget)
443 {
444   ...
445
446   GTK_WIDGET_UNSET_FLAGS (widget, GTK_DOUBLE_BUFFERED);
447
448   ...
449 }
450         </programlisting>
451       </example>
452
453       <para>
454         When is it convenient to disable double buffering?  Generally,
455         this is the case only if your widget gets drawn in such a way
456         that the different drawing operations do not overlap each
457         other.  For example, this may be the case for a simple image
458         viewer:  it can just draw the image in a single operation.
459         This would <emphasis>not</emphasis> be the case with a word
460         processor, since it will need to draw and over-draw the page's
461         background, then the background for highlighted text, and then
462         the text itself.
463       </para>
464
465       <para>
466         Even if you turn off the
467         <constant>GTK_DOUBLE_BUFFERED</constant> flag on a widget, you
468         can still call
469         <function>gdk_window_begin_paint_region()</function> and
470         <function>gdk_window_end_paint()</function> by hand to use
471         temporary drawing buffers.
472       </para>
473     </refsect2>
474   </refsect1>
475
476   <refsect1 id="app-paintable-widgets">
477     <title>App-paintable widgets</title>
478
479     <para>
480       Generally, applications use the pre-defined widgets in GTK+ and
481       they do not draw extra things on top of them (the exception
482       being <classname>GtkDrawingArea</classname>).  However,
483       applications may sometimes find it convenient to draw directly
484       on certain widgets like toplevel windows or event boxes.  When
485       this is the case, GTK+ needs to be told not to overwrite your
486       drawing afterwards, when the window gets to drawing its default
487       contents.
488     </para>
489
490     <para>
491       <classname>GtkWindow</classname> and
492       <classname>GtkEventBox</classname> are the only two widgets
493       which will draw their default contents unless you turn on the
494       <constant>GTK_APP_PAINTABLE</constant> <link
495       linkend="GtkWidgetFlags">widget flag</link>.  If you turn on
496       this flag, then they will not draw their contents and let you do
497       it instead.
498     </para>
499
500     <para>
501       The expose-event handler for <classname>GtkWindow</classname> is
502       implemented effectively like this:
503     </para>
504
505     <programlisting>
506 static gint
507 gtk_window_expose (GtkWidget      *widget,
508                    GdkEventExpose *event)
509 {
510   if (!gtk_widget_get_app_paintable (widget))
511     gtk_paint_flat_box (widget->style, widget->window, GTK_STATE_NORMAL, 
512                         GTK_SHADOW_NONE, event->area, widget, "base", 0, 0, -1, -1);
513
514   if (GTK_WIDGET_CLASS (gtk_window_parent_class)->expose_event)
515     return GTK_WIDGET_CLASS (gtk_window_parent_class)->expose_event (widget, event);
516
517   return FALSE;
518 }
519     </programlisting>
520
521     <para>
522       The expose-event handler for <classname>GtkEventBox</classname>
523       is implemented in a similar fashion.
524     </para>
525
526     <para>
527       Since the <link linkend="GtkWidget-expose-event">expose-event
528         signal</link> runs user-connected handlers
529       <emphasis>before</emphasis> the widget's default handler, what
530       happens is this:
531     </para>
532
533     <orderedlist>
534       <listitem>
535         <para>
536           Your own expose-event handler gets run.  It paints something
537           on the window or the event box.
538         </para>
539       </listitem>
540
541       <listitem>
542         <para>
543           The widget's default expose-event handler gets run.  If
544           <constant>GTK_APP_PAINTABLE</constant> is turned off (this
545           is the default), <emphasis>your drawing will be
546           overwritten</emphasis>.  If that flag is turned on, the
547           widget will not draw its default contents and preserve your
548           drawing instead.
549         </para>
550       </listitem>
551
552       <listitem>
553         <para>
554           The expose-event handler for the parent class gets run.
555           Since both <classname>GtkWindow</classname> and
556           <classname>GtkEventBox</classname> are descendants of
557           <classname>GtkContainer</classname>, their no-window
558           children will be asked to draw themselves recursively, as
559           described in <xref linkend="hierarchical-drawing"/>.
560         </para>
561       </listitem>
562     </orderedlist>
563
564     <formalpara>
565       <title>Summary of app-paintable widgets</title>
566
567       <para>
568         Turn on the <constant>GTK_APP_PAINTABLE</constant> flag if you
569         intend to draw your own content directly on a
570         <classname>GtkWindow</classname> and
571         <classname>GtkEventBox</classname>.  You seldom need to draw
572         on top of other widgets, and
573         <classname>GtkDrawingArea</classname> ignores this flag, as it
574         <emphasis>is</emphasis> intended to be drawn on.
575       </para>
576     </formalpara>
577   </refsect1>
578 </refentry>
579
580 <!--
581 Local variables:
582 mode: xml
583 sgml-parent-document: ("gtk-docs.sgml" "book" "part" "refentry")
584 End:
585 -->