File: gtk-migrating-GtkStyleContext-checklist.html

package info (click to toggle)
gtk%2B3.0 3.22.11-1
  • links: PTS, VCS
  • area: main
  • in suites: stretch
  • size: 182,828 kB
  • ctags: 82,378
  • sloc: ansic: 1,165,043; xml: 9,259; makefile: 6,914; sh: 5,179; python: 402; perl: 370; cpp: 34; sed: 16
file content (220 lines) | stat: -rw-r--r-- 13,215 bytes parent folder | download 
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>A checklist for widgets: GTK+ 3 Reference Manual</title>
<meta name="generator" content="DocBook XSL Stylesheets Vsnapshot">
<link rel="home" href="index.html" title="GTK+ 3 Reference Manual">
<link rel="up" href="gtk-migrating-GtkStyleContext.html" title="Theming changes">
<link rel="prev" href="gtk-migrating-GtkStyleContext-css.html" title="Using the CSS file format">
<link rel="next" href="gtk-migrating-GtkStyleContext-parsing.html" title="Parsing of custom resources">
<meta name="generator" content="GTK-Doc V1.25.1 (XML mode)">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<table class="navigation" id="top" width="100%" summary="Navigation header" cellpadding="2" cellspacing="5"><tr valign="middle">
<td width="100%" align="left" class="shortcuts"></td>
<td><a accesskey="h" href="index.html"><img src="home.png" width="16" height="16" border="0" alt="Home"></a></td>
<td><a accesskey="u" href="gtk-migrating-GtkStyleContext.html"><img src="up.png" width="16" height="16" border="0" alt="Up"></a></td>
<td><a accesskey="p" href="gtk-migrating-GtkStyleContext-css.html"><img src="left.png" width="16" height="16" border="0" alt="Prev"></a></td>
<td><a accesskey="n" href="gtk-migrating-GtkStyleContext-parsing.html"><img src="right.png" width="16" height="16" border="0" alt="Next"></a></td>
</tr></table>
<div class="section">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="gtk-migrating-GtkStyleContext-checklist"></a>A checklist for widgets</h2></div></div></div>
<p>
      When porting your widgets to use <a class="link" href="GtkStyleContext.html" title="GtkStyleContext"><span class="type">GtkStyleContext</span></a>, this checklist
      might be useful.
    </p>
<div class="orderedlist"><ol class="orderedlist" type="1">
<li class="listitem">
        Replace <a class="link" href="GtkWidget.html#GtkWidget-style-set" title="The “style-set” signal"><span class="type">“style-set”</span></a> handlers with
        <a class="link" href="GtkWidget.html#GtkWidget-style-updated" title="The “style-updated” signal"><span class="type">“style-updated”</span></a> handlers.
      </li>
<li class="listitem">
<p>
          Try to identify the role of what you're rendering with any number
          of classes. This will replace the detail string. There is a predefined
          set of CSS classes which you can reuse where appropriate. Doing so
          will give you theming 'for free', whereas custom classes will require
          extra work in the theme. Note that complex widgets are likely to
          need different styles when rendering different parts, and style
          classes are one way to achieve this. This could result in code like
          the following (simplified) examples:
        </p>
<div class="example">
<a name="id-1.6.4.7.3.2.2"></a><p class="title"><b>Example 46. Setting a permanent CSS class</b></p>
<div class="example-contents">
  <table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td class="listing_lines" align="right"><pre>1
2
3
4
5
6
7
8
9
10
11
12</pre></td>
        <td class="listing_code"><pre class="programlisting"><span class="gtkdoc kwb">static void</span>
<span class="function">gtk_button_init</span> <span class="gtkdoc opt">(</span>GtkButton <span class="gtkdoc opt">*</span>button<span class="gtkdoc opt">)</span>
<span class="gtkdoc opt">{</span>
  GtkStyleContext <span class="gtkdoc opt">*</span>context<span class="gtkdoc opt">;</span>

  <span class="gtkdoc opt">...</span>

  context <span class="gtkdoc opt">=</span> <span class="function"><a href="GtkWidget.html#gtk-widget-get-style-context">gtk_widget_get_style_context</a></span> <span class="gtkdoc opt">(</span><span class="function">GTK_WIDGET</span> <span class="gtkdoc opt">(</span>button<span class="gtkdoc opt">));</span>

  <span class="comment">/* Set the &quot;button&quot; class */</span>
  <span class="function"><a href="GtkStyleContext.html#gtk-style-context-add-class">gtk_style_context_add_class</a></span> <span class="gtkdoc opt">(</span>context<span class="gtkdoc opt">,</span> GTK_STYLE_CLASS_BUTTON<span class="gtkdoc opt">);</span>
<span class="gtkdoc opt">}</span></pre></td>
      </tr>
    </tbody>
  </table>
</div>

</div>
<br class="example-break"><p>
          Or
        </p>
<div class="example">
<a name="id-1.6.4.7.3.2.4"></a><p class="title"><b>Example 47. Using dynamic CSS classes for different elements</b></p>
<div class="example-contents">
  <table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td class="listing_lines" align="right"><pre>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</pre></td>
        <td class="listing_code"><pre class="programlisting"><span class="gtkdoc kwb">static</span> gboolean
<span class="function">gtk_spin_button_draw</span> <span class="gtkdoc opt">(</span>GtkSpinButton <span class="gtkdoc opt">*</span>spin<span class="gtkdoc opt">,</span>
                      cairo_t       <span class="gtkdoc opt">*</span>cr<span class="gtkdoc opt">)</span>
<span class="gtkdoc opt">{</span>
  GtkStyleContext <span class="gtkdoc opt">*</span>context<span class="gtkdoc opt">;</span>

  <span class="gtkdoc opt">...</span>

  context <span class="gtkdoc opt">=</span> <span class="function"><a href="GtkWidget.html#gtk-widget-get-style-context">gtk_widget_get_style_context</a></span> <span class="gtkdoc opt">(</span><span class="function">GTK_WIDGET</span> <span class="gtkdoc opt">(</span>spin<span class="gtkdoc opt">));</span>

  <span class="function"><a href="GtkStyleContext.html#gtk-style-context-save">gtk_style_context_save</a></span> <span class="gtkdoc opt">(</span>context<span class="gtkdoc opt">);</span>
  <span class="function"><a href="GtkStyleContext.html#gtk-style-context-add-class">gtk_style_context_add_class</a></span> <span class="gtkdoc opt">(</span>context<span class="gtkdoc opt">,</span> GTK_STYLE_CLASS_ENTRY<span class="gtkdoc opt">);</span>

  <span class="comment">/* Call to entry draw impl with &quot;entry&quot; class */</span>
  parent_class<span class="gtkdoc opt">-&gt;</span><span class="function">draw</span> <span class="gtkdoc opt">(</span>spin<span class="gtkdoc opt">,</span> cr<span class="gtkdoc opt">);</span>

  <span class="function"><a href="GtkStyleContext.html#gtk-style-context-restore">gtk_style_context_restore</a></span> <span class="gtkdoc opt">(</span>context<span class="gtkdoc opt">);</span>
  <span class="function"><a href="GtkStyleContext.html#gtk-style-context-save">gtk_style_context_save</a></span> <span class="gtkdoc opt">(</span>context<span class="gtkdoc opt">);</span>

  <span class="comment">/* Render up/down buttons with the &quot;button&quot; class */</span>
  <span class="function"><a href="GtkStyleContext.html#gtk-style-context-add-class">gtk_style_context_add_class</a></span> <span class="gtkdoc opt">(</span>context<span class="gtkdoc opt">,</span> GTK_STYLE_CLASS_BUTTON<span class="gtkdoc opt">);</span>
  <span class="function">draw_up_button</span> <span class="gtkdoc opt">(</span>spin<span class="gtkdoc opt">,</span> cr<span class="gtkdoc opt">);</span>
  <span class="function">draw_down_button</span> <span class="gtkdoc opt">(</span>spin<span class="gtkdoc opt">,</span> cr<span class="gtkdoc opt">);</span>

  <span class="function"><a href="GtkStyleContext.html#gtk-style-context-restore">gtk_style_context_restore</a></span> <span class="gtkdoc opt">(</span>context<span class="gtkdoc opt">);</span>

  <span class="gtkdoc opt">...</span>
<span class="gtkdoc opt">}</span></pre></td>
      </tr>
    </tbody>
  </table>
</div>

</div>
<br class="example-break"><p>
          Note that <a class="link" href="GtkStyleContext.html" title="GtkStyleContext"><span class="type">GtkStyleContext</span></a> only provides fg/bg colors, so text/base
          is done through distinctive theming of the different classes. For
          example, an entry would usually be black on white while a button
          would usually be black on light grey.
        </p>
</li>
<li class="listitem">
<p>
          Replace all <code class="literal">gtk_paint_*()</code> calls with corresponding
          <code class="literal">gtk_render_*()</code> calls.
        </p>
<p>
          The most distinctive changes are the use of <a class="link" href="gtk3-Standard-Enumerations.html#GtkStateFlags" title="enum GtkStateFlags"><span class="type">GtkStateFlags</span></a> to
          represent the widget state and the lack of <a class="link" href="gtk3-Standard-Enumerations.html#GtkShadowType" title="enum GtkShadowType"><span class="type">GtkShadowType</span></a>. Note
          that widget state is now passed implicitly via the context, so
          to render in a certain state, you have to temporarily set the
          state on the context, as in the following example:
        </p>
<div class="example">
<a name="id-1.6.4.7.3.3.3"></a><p class="title"><b>Example 48. Rendering with a specific state</b></p>
<div class="example-contents">
  <table class="listing_frame" border="0" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td class="listing_lines" align="right"><pre>1
2
3
4</pre></td>
        <td class="listing_code"><pre class="programlisting"><span class="function"><a href="GtkStyleContext.html#gtk-style-context-save">gtk_style_context_save</a></span> <span class="gtkdoc opt">(</span>context<span class="gtkdoc opt">);</span>
<span class="function"><a href="GtkStyleContext.html#gtk-style-context-set-state">gtk_style_context_set_state</a></span> <span class="gtkdoc opt">(</span>context<span class="gtkdoc opt">,</span> GTK_STATE_FLAG_ACTIVE<span class="gtkdoc opt">);</span>
<span class="function"><a href="GtkStyleContext.html#gtk-render-check">gtk_render_check</a></span> <span class="gtkdoc opt">(</span>context<span class="gtkdoc opt">,</span> cr<span class="gtkdoc opt">,</span> x<span class="gtkdoc opt">,</span> y<span class="gtkdoc opt">,</span> width<span class="gtkdoc opt">,</span> height<span class="gtkdoc opt">);</span>
<span class="function"><a href="GtkStyleContext.html#gtk-style-context-restore">gtk_style_context_restore</a></span> <span class="gtkdoc opt">(</span>context<span class="gtkdoc opt">);</span></pre></td>
      </tr>
    </tbody>
  </table>
</div>

</div>
<br class="example-break"><p>
          For <a class="link" href="GtkStyleContext.html#gtk-render-check" title="gtk_render_check ()"><code class="function">gtk_render_check()</code></a> and <a class="link" href="GtkStyleContext.html#gtk-render-option" title="gtk_render_option ()"><code class="function">gtk_render_option()</code></a>, the <em class="parameter"><code>shadow_type</code></em>
          parameter is replaced by the <a class="link" href="gtk3-Standard-Enumerations.html#GTK-STATE-FLAG-ACTIVE:CAPS"><span class="type">GTK_STATE_FLAG_ACTIVE</span></a> and
          <a class="link" href="gtk3-Standard-Enumerations.html#GTK-STATE-FLAG-INCONSISTENT:CAPS"><span class="type">GTK_STATE_FLAG_INCONSISTENT</span></a> state flags. For things such as
          pressed/unpressed button states, <a class="link" href="gtk3-Standard-Enumerations.html#GTK-STATE-FLAG-ACTIVE:CAPS"><span class="type">GTK_STATE_FLAG_ACTIVE</span></a> is used,
          and the CSS may style normal/active states differently to render
          outset/inset borders, respectively.
        </p>
</li>
<li class="listitem">
        The various <code class="literal">gtk_widget_modify_*()</code> functions to
        override colors or fonts for individual widgets have been replaced
        by similar <code class="literal">gtk_widget_override_*()</code> functions.
      </li>
<li class="listitem">
        It is no longer necessary to call <a class="link" href="GtkWidget.html#gtk-widget-style-attach" title="gtk_widget_style_attach ()"><code class="function">gtk_widget_style_attach()</code></a>,
        <a class="link" href="GtkStyle.html#gtk-style-attach" title="gtk_style_attach ()"><code class="function">gtk_style_attach()</code></a>, <a class="link" href="GtkStyle.html#gtk-style-detach" title="gtk_style_detach ()"><code class="function">gtk_style_detach()</code></a> or <a class="link" href="GtkWidget.html#gtk-widget-ensure-style" title="gtk_widget_ensure_style ()"><code class="function">gtk_widget_ensure_style()</code></a>.
      </li>
<li class="listitem">
        Replace all uses of xthickness/ythickness. <a class="link" href="GtkStyleContext.html" title="GtkStyleContext"><span class="type">GtkStyleContext</span></a> uses the
        CSS box model, and there are border-width/padding/margin properties to
        replace the different applications of X and Y thickness. Note that all
        of this is merely a guideline. Widgets may choose to follow it or not.
      </li>
</ol></div>
</div>
<div class="footer">
<hr>Generated by GTK-Doc V1.25.1</div>
</body>
</html>