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
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="highlight.min.css">
<script src="highlight.min.js"></script><script>
hljs.configure({languages: ['cpp']});
hljs.highlightAll();
</script><title>Chapter 11. The TreeView widget</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="generator" content="DocBook XSL Stylesheets Vsnapshot">
<link rel="home" href="index.html" title="Programming with gtkmm 4">
<link rel="up" href="index.html" title="Programming with gtkmm 4">
<link rel="prev" href="sec-listmodel-trees.html" title="Displaying Trees">
<link rel="next" href="sec-treeview.html" title="The View">
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<div class="navheader">
<table width="100%" summary="Navigation header">
<tr><th colspan="3" align="center">Chapter 11. The TreeView widget</th></tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="sec-listmodel-trees.html"><img src="icons/prev.png" alt="Prev"></a> </td>
<th width="60%" align="center"> </th>
<td width="20%" align="right"> <a accesskey="n" href="sec-treeview.html"><img src="icons/next.png" alt="Next"></a>
</td>
</tr>
</table>
<hr>
</div>
<div class="chapter">
<div class="titlepage"><div><div><h1 class="title">
<a name="chapter-treeview"></a>Chapter 11. The TreeView widget</h1></div></div></div>
<div class="toc">
<p><b>Table of Contents</b></p>
<ul class="toc">
<li><span class="section"><a href="chapter-treeview.html#sec-treeview-model">The Model</a></span></li>
<li><span class="section"><a href="sec-treeview.html">The View</a></span></li>
<li><span class="section"><a href="sec-iterating-over-model-rows.html">Iterating over Model Rows</a></span></li>
<li><span class="section"><a href="sec-treeview-selection.html">The Selection</a></span></li>
<li><span class="section"><a href="sec-treeview-sort.html">Sorting</a></span></li>
<li><span class="section"><a href="sec-treeview-draganddrop.html">Drag and Drop</a></span></li>
<li><span class="section"><a href="sec-treeview-contextmenu.html">Popup Context Menu</a></span></li>
<li><span class="section"><a href="sec-treeview-examples.html">Examples</a></span></li>
</ul>
</div>
<div class="note" style="margin-left: 0.5in; margin-right: 0.5in;"><table border="0" summary="Note">
<tr>
<td rowspan="2" align="center" valign="top" width="25"><img alt="[Note]" src="icons/note.png"></td>
<th align="left">Note</th>
</tr>
<tr><td align="left" valign="top"><p><code class="classname">Gtk::TreeView</code> is deprecated since <span class="application">gtkmm</span> 4.10.
In new code, use <code class="classname">Gtk::ListView</code> for lists and
<code class="classname">Gtk::ColumnView</code> for tabular lists.
</p></td></tr>
</table></div>
<p>
The <code class="classname">Gtk::TreeView</code> widget can contain lists or trees of
data, in columns.
</p>
<div class="section">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="sec-treeview-model"></a>The Model</h2></div></div></div>
<p>
Each <code class="classname">Gtk::TreeView</code> has an associated
<code class="classname">Gtk::TreeModel</code>, which contains the data displayed by the
<code class="classname">TreeView</code>. Each <code class="classname">Gtk::TreeModel</code> can
be used by more than one <code class="classname">Gtk::TreeView</code>. For instance,
this allows the same underlying data to be displayed and edited in 2 different
ways at the same time. Or the 2 Views might display different columns from the
same Model data, in the same way that 2 SQL queries (or "views") might
show different fields from the same database table.
</p>
<p>
Although you can theoretically implement your own Model, you will normally use
either the <code class="classname">ListStore</code> or <code class="classname">TreeStore</code>
model classes.
</p>
<p><a class="ulink" href="https://gnome.pages.gitlab.gnome.org/gtkmm/classGtk_1_1TreeModel.html" target="_top">Reference</a></p>
<div class="section">
<div class="titlepage"><div><div><h3 class="title">
<a name="treeview-model-liststore"></a>ListStore, for rows</h3></div></div></div>
<p>
The <code class="classname">ListStore</code> contains simple rows of data, and each row
has no children.
</p>
<div class="figure">
<a name="figure-treeview-liststore-model"></a><p class="title"><b>Figure 11.1. TreeView - ListStore</b></p>
<div class="figure-contents">
<div class="screenshot">
<div class="mediaobject"><img src="figures/treeview_list.png" alt="TreeView - ListStore"></div>
</div>
</div>
</div>
<br class="figure-break">
<p><a class="ulink" href="https://gnome.pages.gitlab.gnome.org/gtkmm/classGtk_1_1ListStore.html" target="_top">Reference</a></p>
</div>
<div class="section">
<div class="titlepage"><div><div><h3 class="title">
<a name="treeview-model-treestore"></a>TreeStore, for a hierarchy</h3></div></div></div>
<p>
The <code class="classname">TreeStore</code> contains rows of data, and each row may
have child rows.
</p>
<div class="figure">
<a name="figure-treeview-treestore-model"></a><p class="title"><b>Figure 11.2. TreeView - TreeStore</b></p>
<div class="figure-contents">
<div class="screenshot">
<div class="mediaobject"><img src="figures/treeview_tree.png" alt="TreeView - TreeStore"></div>
</div>
</div>
</div>
<br class="figure-break">
<p><a class="ulink" href="https://gnome.pages.gitlab.gnome.org/gtkmm/classGtk_1_1TreeStore.html" target="_top">Reference</a></p>
</div>
<div class="section">
<div class="titlepage"><div><div><h3 class="title">
<a name="treeview-model-columns"></a>Model Columns</h3></div></div></div>
<p>
The <code class="classname">TreeModelColumnRecord</code> class is used to keep track
of the columns and their data types. You add
<code class="classname">TreeModelColumn</code> instances to the
<code class="classname">ColumnRecord</code> and then use those
<code class="classname">TreeModelColumn</code>s when getting and setting the data in
model rows. You will probably find it convenient to derive a new
<code class="classname">TreeModelColumnRecord</code> which has your
<code class="classname">TreeModelColumn</code> instances as member data.
</p>
<pre class="programlisting"><code class="code">class ModelColumns : public Gtk::TreeModelColumnRecord
{
public:
ModelColumns()
{ add(m_col_text); add(m_col_number); }
Gtk::TreeModelColumn<Glib::ustring> m_col_text;
Gtk::TreeModelColumn<int> m_col_number;
};
ModelColumns m_Columns;</code></pre>
<p>
You specify the <code class="classname">ColumnRecord</code> when creating the Model,
like so:
</p>
<pre class="programlisting"><code class="code">Glib::RefPtr<Gtk::ListStore> refListStore =
Gtk::ListStore::create(m_Columns);</code></pre>
<p>
As a <code class="classname">TreeModelColumnRecord</code> describes structure, not data,
it can be shared among multiple models, and this is preferable for efficiency.
However, the instance (such as <code class="varname">m_Columns</code> here) should usually
not be static, because it often needs to be instantiated after
<span class="application">glibmm</span> has been initialized. The best solution is
to make it a lazily instantiated singleton, so that it will be constructed
on-demand, whenever the first model accesses it.
</p>
</div>
<div class="section">
<div class="titlepage"><div><div><h3 class="title">
<a name="treeview-adding-rows"></a>Adding Rows</h3></div></div></div>
<p>
Add rows to the model with the <code class="methodname">append()</code>,
<code class="methodname">prepend()</code>, or <code class="methodname">insert()</code> methods.
</p>
<pre class="programlisting"><code class="code">auto iter = m_refListStore->append();</code></pre>
<p>You can dereference the iterator to get the Row:
</p>
<pre class="programlisting"><code class="code">auto row = *iter;</code></pre>
<div class="section">
<div class="titlepage"><div><div><h4 class="title">
<a name="treeview-adding-child-rows"></a>Adding child rows</h4></div></div></div>
<p>
<code class="classname">Gtk::TreeStore</code> models can have child items. Add them
with the <code class="methodname">append()</code>, <code class="methodname">prepend()</code>, or
<code class="methodname">insert()</code> methods, like so:
</p>
<pre class="programlisting"><code class="code">auto iter_child =
m_refTreeStore->append(row.children());</code></pre>
</div>
</div>
<div class="section">
<div class="titlepage"><div><div><h3 class="title">
<a name="treeview-setting-values"></a>Setting values</h3></div></div></div>
<p>
You can use the <code class="methodname">operator[]</code> overload to set the data for a
particular column in the row, specifying the
<code class="classname">TreeModelColumn</code> used to create the model.
</p>
<pre class="programlisting"><code class="code">row[m_Columns.m_col_text] = "sometext";</code></pre>
</div>
<div class="section">
<div class="titlepage"><div><div><h3 class="title">
<a name="treeview-getting-values"></a>Getting values</h3></div></div></div>
<p>
You can use the <code class="methodname">operator[]</code> overload to get the data in a
particular column in a row, specifying the
<code class="classname">TreeModelColumn</code> used to create the model.
</p>
<pre class="programlisting"><code class="code">auto strText = row[m_Columns.m_col_text];
auto number = row[m_Columns.m_col_number];</code></pre>
<p>
The compiler will complain if you use an inappropriate type. For
instance, this would generate a compiler error:
</p>
<pre class="programlisting"><code class="code">//compiler error - no conversion from ustring to int.
int number = row[m_Columns.m_col_text];</code></pre>
</div>
<div class="section">
<div class="titlepage"><div><div><h3 class="title">
<a name="treeview-hidden-columns"></a>"Hidden" Columns</h3></div></div></div>
<p>
You might want to associate extra data with each row. If so, just add
it as a Model column, but don't add it to the View.
</p>
</div>
</div>
</div>
<div class="navfooter">
<hr>
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left">
<a accesskey="p" href="sec-listmodel-trees.html"><img src="icons/prev.png" alt="Prev"></a> </td>
<td width="20%" align="center"> </td>
<td width="40%" align="right"> <a accesskey="n" href="sec-treeview.html"><img src="icons/next.png" alt="Next"></a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">Displaying Trees </td>
<td width="20%" align="center"><a accesskey="h" href="index.html"><img src="icons/home.png" alt="Home"></a></td>
<td width="40%" align="right" valign="top"> The View</td>
</tr>
</table>
</div>
</body>
</html>
|
