155 lines
8.9 KiB
HTML
155 lines
8.9 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 V1.79.1">
|
||
<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 (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"><pre class="programlisting">
|
||
static void
|
||
gtk_button_init (GtkButton *button)
|
||
{
|
||
GtkStyleContext *context;
|
||
|
||
...
|
||
|
||
context = gtk_widget_get_style_context (GTK_WIDGET (button));
|
||
|
||
/* Set the "button" class */
|
||
gtk_style_context_add_class (context, GTK_STYLE_CLASS_BUTTON);
|
||
}
|
||
</pre></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"><pre class="programlisting">
|
||
static gboolean
|
||
gtk_spin_button_draw (GtkSpinButton *spin,
|
||
cairo_t *cr)
|
||
{
|
||
GtkStyleContext *context;
|
||
|
||
...
|
||
|
||
context = gtk_widget_get_style_context (GTK_WIDGET (spin));
|
||
|
||
gtk_style_context_save (context);
|
||
gtk_style_context_add_class (context, GTK_STYLE_CLASS_ENTRY);
|
||
|
||
/* Call to entry draw impl with "entry" class */
|
||
parent_class->draw (spin, cr);
|
||
|
||
gtk_style_context_restore (context);
|
||
gtk_style_context_save (context);
|
||
|
||
/* Render up/down buttons with the "button" class */
|
||
gtk_style_context_add_class (context, GTK_STYLE_CLASS_BUTTON);
|
||
draw_up_button (spin, cr);
|
||
draw_down_button (spin, cr);
|
||
|
||
gtk_style_context_restore (context);
|
||
|
||
...
|
||
}
|
||
</pre></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"><pre class="programlisting">
|
||
gtk_style_context_save (context);
|
||
gtk_style_context_set_state (context, GTK_STATE_FLAG_ACTIVE);
|
||
gtk_render_check (context, cr, x, y, width, height);
|
||
gtk_style_context_restore (context);
|
||
</pre></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</div>
|
||
</body>
|
||
</html> |