220 lines
14 KiB
HTML
220 lines
14 KiB
HTML
<!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.33.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="k">static</span><span class="w"> </span><span class="kt">void</span><span class="w"></span>
|
||
<span class="nf">gtk_button_init</span><span class="w"> </span><span class="p">(</span><span class="n">GtkButton</span><span class="w"> </span><span class="o">*</span><span class="n">button</span><span class="p">)</span><span class="w"></span>
|
||
<span class="p">{</span><span class="w"></span>
|
||
<span class="w"> </span><span class="n">GtkStyleContext</span><span class="w"> </span><span class="o">*</span><span class="n">context</span><span class="p">;</span><span class="w"></span>
|
||
|
||
<span class="w"> </span><span class="p">...</span><span class="w"></span>
|
||
|
||
<span class="w"> </span><span class="n">context</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">gtk_widget_get_style_context</span><span class="w"> </span><span class="p">(</span><span class="n">GTK_WIDGET</span><span class="w"> </span><span class="p">(</span><span class="n">button</span><span class="p">));</span><span class="w"></span>
|
||
|
||
<span class="w"> </span><span class="cm">/* Set the "button" class */</span><span class="w"></span>
|
||
<span class="w"> </span><span class="n">gtk_style_context_add_class</span><span class="w"> </span><span class="p">(</span><span class="n">context</span><span class="p">,</span><span class="w"> </span><span class="n">GTK_STYLE_CLASS_BUTTON</span><span class="p">);</span><span class="w"></span>
|
||
<span class="p">}</span><span class="w"></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="k">static</span><span class="w"> </span><span class="n">gboolean</span><span class="w"></span>
|
||
<span class="nf">gtk_spin_button_draw</span><span class="w"> </span><span class="p">(</span><span class="n">GtkSpinButton</span><span class="w"> </span><span class="o">*</span><span class="n">spin</span><span class="p">,</span><span class="w"></span>
|
||
<span class="w"> </span><span class="n">cairo_t</span><span class="w"> </span><span class="o">*</span><span class="n">cr</span><span class="p">)</span><span class="w"></span>
|
||
<span class="p">{</span><span class="w"></span>
|
||
<span class="w"> </span><span class="n">GtkStyleContext</span><span class="w"> </span><span class="o">*</span><span class="n">context</span><span class="p">;</span><span class="w"></span>
|
||
|
||
<span class="w"> </span><span class="p">...</span><span class="w"></span>
|
||
|
||
<span class="w"> </span><span class="n">context</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="n">gtk_widget_get_style_context</span><span class="w"> </span><span class="p">(</span><span class="n">GTK_WIDGET</span><span class="w"> </span><span class="p">(</span><span class="n">spin</span><span class="p">));</span><span class="w"></span>
|
||
|
||
<span class="w"> </span><span class="n">gtk_style_context_save</span><span class="w"> </span><span class="p">(</span><span class="n">context</span><span class="p">);</span><span class="w"></span>
|
||
<span class="w"> </span><span class="n">gtk_style_context_add_class</span><span class="w"> </span><span class="p">(</span><span class="n">context</span><span class="p">,</span><span class="w"> </span><span class="n">GTK_STYLE_CLASS_ENTRY</span><span class="p">);</span><span class="w"></span>
|
||
|
||
<span class="w"> </span><span class="cm">/* Call to entry draw impl with "entry" class */</span><span class="w"></span>
|
||
<span class="w"> </span><span class="n">parent_class</span><span class="o">-></span><span class="n">draw</span><span class="w"> </span><span class="p">(</span><span class="n">spin</span><span class="p">,</span><span class="w"> </span><span class="n">cr</span><span class="p">);</span><span class="w"></span>
|
||
|
||
<span class="w"> </span><span class="n">gtk_style_context_restore</span><span class="w"> </span><span class="p">(</span><span class="n">context</span><span class="p">);</span><span class="w"></span>
|
||
<span class="w"> </span><span class="n">gtk_style_context_save</span><span class="w"> </span><span class="p">(</span><span class="n">context</span><span class="p">);</span><span class="w"></span>
|
||
|
||
<span class="w"> </span><span class="cm">/* Render up/down buttons with the "button" class */</span><span class="w"></span>
|
||
<span class="w"> </span><span class="n">gtk_style_context_add_class</span><span class="w"> </span><span class="p">(</span><span class="n">context</span><span class="p">,</span><span class="w"> </span><span class="n">GTK_STYLE_CLASS_BUTTON</span><span class="p">);</span><span class="w"></span>
|
||
<span class="w"> </span><span class="n">draw_up_button</span><span class="w"> </span><span class="p">(</span><span class="n">spin</span><span class="p">,</span><span class="w"> </span><span class="n">cr</span><span class="p">);</span><span class="w"></span>
|
||
<span class="w"> </span><span class="n">draw_down_button</span><span class="w"> </span><span class="p">(</span><span class="n">spin</span><span class="p">,</span><span class="w"> </span><span class="n">cr</span><span class="p">);</span><span class="w"></span>
|
||
|
||
<span class="w"> </span><span class="n">gtk_style_context_restore</span><span class="w"> </span><span class="p">(</span><span class="n">context</span><span class="p">);</span><span class="w"></span>
|
||
|
||
<span class="w"> </span><span class="p">...</span><span class="w"></span>
|
||
<span class="p">}</span><span class="w"></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="n">gtk_style_context_save</span><span class="w"> </span><span class="p">(</span><span class="n">context</span><span class="p">);</span><span class="w"></span>
|
||
<span class="n">gtk_style_context_set_state</span><span class="w"> </span><span class="p">(</span><span class="n">context</span><span class="p">,</span><span class="w"> </span><span class="n">GTK_STATE_FLAG_ACTIVE</span><span class="p">);</span><span class="w"></span>
|
||
<span class="n">gtk_render_check</span><span class="w"> </span><span class="p">(</span><span class="n">context</span><span class="p">,</span><span class="w"> </span><span class="n">cr</span><span class="p">,</span><span class="w"> </span><span class="n">x</span><span class="p">,</span><span class="w"> </span><span class="n">y</span><span class="p">,</span><span class="w"> </span><span class="n">width</span><span class="p">,</span><span class="w"> </span><span class="n">height</span><span class="p">);</span><span class="w"></span>
|
||
<span class="n">gtk_style_context_restore</span><span class="w"> </span><span class="p">(</span><span class="n">context</span><span class="p">);</span><span class="w"></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.33.1</div>
|
||
</body>
|
||
</html> |