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
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- widgets-tutorial.qdoc -->
<title>Qt 4.8: Widgets Tutorial - Nested Layouts</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="content">
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
</div>
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="all-examples.html">Examples</a></li>
<li>Widgets Tutorial - Nested Layouts</li>
</ul>
</div>
</div>
<div class="content mainContent">
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#setting-up-the-model">Setting up the Model</a></li>
</ul>
</div>
<h1 class="title">Widgets Tutorial - Nested Layouts</h1>
<span class="subtitle"></span>
<!-- $$$tutorials/widgets/nestedlayouts-description -->
<div class="descr"> <a name="details"></a>
<p>Files:</p>
<ul>
<li><a href="tutorials-widgets-nestedlayouts-main-cpp.html">tutorials/widgets/nestedlayouts/main.cpp</a></li>
<li><a href="tutorials-widgets-nestedlayouts-nestedlayouts-pro.html">tutorials/widgets/nestedlayouts/nestedlayouts.pro</a></li>
</ul>
<p>Just as widgets can contain other widgets, layouts can be used to provide different levels of grouping for widgets. Here, we want to display a label alongside a line edit at the top of a window, above a table view showing the results of a query.</p>
<p>We achieve this by creating two layouts: <tt>queryLayout</tt> is a <a href="qhboxlayout.html">QHBoxLayout</a> that contains <a href="qlabel.html">QLabel</a> and <a href="qlineedit.html">QLineEdit</a> widgets placed side-by-side; <tt>mainLayout</tt> is a <a href="qvboxlayout.html">QVBoxLayout</a> that contains <tt>queryLayout</tt> and a <a href="qtableview.html">QTableView</a> arranged vertically.</p>
<div class="qt-code"><table class="generic">
<tr valign="top" class="odd"><td ><pre class="cpp"> <span class="preprocessor">#include <QtGui></span>
<span class="type">int</span> main(<span class="type">int</span> argc<span class="operator">,</span> <span class="type">char</span> <span class="operator">*</span>argv<span class="operator">[</span><span class="operator">]</span>)
{
<span class="type"><a href="qapplication.html">QApplication</a></span> app(argc<span class="operator">,</span> argv);
<span class="type"><a href="qwidget.html">QWidget</a></span> window;
<span class="type"><a href="qlabel.html">QLabel</a></span> <span class="operator">*</span>queryLabel <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlabel.html">QLabel</a></span>(
<span class="type"><a href="qapplication.html">QApplication</a></span><span class="operator">::</span>translate(<span class="string">"nestedlayouts"</span><span class="operator">,</span> <span class="string">"Query:"</span>));
<span class="type"><a href="qlineedit.html">QLineEdit</a></span> <span class="operator">*</span>queryEdit <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qlineedit.html">QLineEdit</a></span>();
<span class="type"><a href="qtableview.html">QTableView</a></span> <span class="operator">*</span>resultView <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qtableview.html">QTableView</a></span>();
<span class="type"><a href="qhboxlayout.html">QHBoxLayout</a></span> <span class="operator">*</span>queryLayout <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qhboxlayout.html">QHBoxLayout</a></span>();
queryLayout<span class="operator">-</span><span class="operator">></span>addWidget(queryLabel);
queryLayout<span class="operator">-</span><span class="operator">></span>addWidget(queryEdit);
<span class="type"><a href="qvboxlayout.html">QVBoxLayout</a></span> <span class="operator">*</span>mainLayout <span class="operator">=</span> <span class="keyword">new</span> <span class="type"><a href="qvboxlayout.html">QVBoxLayout</a></span>();
mainLayout<span class="operator">-</span><span class="operator">></span>addLayout(queryLayout);
mainLayout<span class="operator">-</span><span class="operator">></span>addWidget(resultView);
window<span class="operator">.</span>setLayout(mainLayout);
<span class="comment">// Set up the model and configure the view...</span>
window<span class="operator">.</span>setWindowTitle(
<span class="type"><a href="qapplication.html">QApplication</a></span><span class="operator">::</span>translate(<span class="string">"nestedlayouts"</span><span class="operator">,</span> <span class="string">"Nested layouts"</span>));
window<span class="operator">.</span>show();
<span class="keyword">return</span> app<span class="operator">.</span>exec();
}</pre>
</td><td ><img src="images/widgets-tutorial-nestedlayouts.png" alt="" /></td></tr>
</table>
</div><p>Note that we call the <tt>mainLayout</tt>'s <a href="qboxlayout.html#addLayout">addLayout()</a> function to insert the <tt>queryLayout</tt> above the <tt>resultView</tt> table.</p>
<p>We have omitted the code that sets up the model containing the data shown by the <a href="qtableview.html">QTableView</a> widget, <tt>resultView</tt>. For completeness, we show this below.</p>
<p>As well as <a href="qhboxlayout.html">QHBoxLayout</a> and <a href="qvboxlayout.html">QVBoxLayout</a>, Qt also provides <a href="qgridlayout.html">QGridLayout</a> and <a href="qformlayout.html">QFormLayout</a> classes to help with more complex user interfaces. These can be seen if you run <a href="designer-manual.html#qt-designer">Qt Designer</a>.</p>
<a name="setting-up-the-model"></a>
<h2>Setting up the Model</h2>
<p>In the code above, we did not show where the table's data came from because we wanted to concentrate on the use of layouts. Here, we see that the model holds a number of items corresponding to rows, each of which is set up to contain data for two columns.</p>
<pre class="cpp"> <span class="type"><a href="qstandarditemmodel.html">QStandardItemModel</a></span> model;
model<span class="operator">.</span>setHorizontalHeaderLabels(
<span class="type"><a href="qstringlist.html">QStringList</a></span>() <span class="operator"><</span><span class="operator"><</span> <span class="type"><a href="qapplication.html">QApplication</a></span><span class="operator">::</span>translate(<span class="string">"nestedlayouts"</span><span class="operator">,</span> <span class="string">"Name"</span>)
<span class="operator"><</span><span class="operator"><</span> <span class="type"><a href="qapplication.html">QApplication</a></span><span class="operator">::</span>translate(<span class="string">"nestedlayouts"</span><span class="operator">,</span> <span class="string">"Office"</span>));
<span class="type"><a href="qlist.html">QList</a></span><span class="operator"><</span><span class="type"><a href="qstringlist.html">QStringList</a></span><span class="operator">></span> rows <span class="operator">=</span> <span class="type"><a href="qlist.html">QList</a></span><span class="operator"><</span><span class="type"><a href="qstringlist.html">QStringList</a></span><span class="operator">></span>()
<span class="operator"><</span><span class="operator"><</span> (<span class="type"><a href="qstringlist.html">QStringList</a></span>() <span class="operator"><</span><span class="operator"><</span> <span class="string">"Verne Nilsen"</span> <span class="operator"><</span><span class="operator"><</span> <span class="string">"123"</span>)
<span class="operator"><</span><span class="operator"><</span> (<span class="type"><a href="qstringlist.html">QStringList</a></span>() <span class="operator"><</span><span class="operator"><</span> <span class="string">"Carlos Tang"</span> <span class="operator"><</span><span class="operator"><</span> <span class="string">"77"</span>)
<span class="operator"><</span><span class="operator"><</span> (<span class="type"><a href="qstringlist.html">QStringList</a></span>() <span class="operator"><</span><span class="operator"><</span> <span class="string">"Bronwyn Hawcroft"</span> <span class="operator"><</span><span class="operator"><</span> <span class="string">"119"</span>)
<span class="operator"><</span><span class="operator"><</span> (<span class="type"><a href="qstringlist.html">QStringList</a></span>() <span class="operator"><</span><span class="operator"><</span> <span class="string">"Alessandro Hanssen"</span> <span class="operator"><</span><span class="operator"><</span> <span class="string">"32"</span>)
<span class="operator"><</span><span class="operator"><</span> (<span class="type"><a href="qstringlist.html">QStringList</a></span>() <span class="operator"><</span><span class="operator"><</span> <span class="string">"Andrew John Bakken"</span> <span class="operator"><</span><span class="operator"><</span> <span class="string">"54"</span>)
<span class="operator"><</span><span class="operator"><</span> (<span class="type"><a href="qstringlist.html">QStringList</a></span>() <span class="operator"><</span><span class="operator"><</span> <span class="string">"Vanessa Weatherley"</span> <span class="operator"><</span><span class="operator"><</span> <span class="string">"85"</span>)
<span class="operator"><</span><span class="operator"><</span> (<span class="type"><a href="qstringlist.html">QStringList</a></span>() <span class="operator"><</span><span class="operator"><</span> <span class="string">"Rebecca Dickens"</span> <span class="operator"><</span><span class="operator"><</span> <span class="string">"17"</span>)
<span class="operator"><</span><span class="operator"><</span> (<span class="type"><a href="qstringlist.html">QStringList</a></span>() <span class="operator"><</span><span class="operator"><</span> <span class="string">"David Bradley"</span> <span class="operator"><</span><span class="operator"><</span> <span class="string">"42"</span>)
<span class="operator"><</span><span class="operator"><</span> (<span class="type"><a href="qstringlist.html">QStringList</a></span>() <span class="operator"><</span><span class="operator"><</span> <span class="string">"Knut Walters"</span> <span class="operator"><</span><span class="operator"><</span> <span class="string">"25"</span>)
<span class="operator"><</span><span class="operator"><</span> (<span class="type"><a href="qstringlist.html">QStringList</a></span>() <span class="operator"><</span><span class="operator"><</span> <span class="string">"Andrea Jones"</span> <span class="operator"><</span><span class="operator"><</span> <span class="string">"34"</span>);
foreach (<span class="type"><a href="qstringlist.html">QStringList</a></span> row<span class="operator">,</span> rows) {
<span class="type"><a href="qlist.html">QList</a></span><span class="operator"><</span><span class="type"><a href="qstandarditem.html">QStandardItem</a></span> <span class="operator">*</span><span class="operator">></span> items;
foreach (<span class="type"><a href="qstring.html">QString</a></span> text<span class="operator">,</span> row)
items<span class="operator">.</span>append(<span class="keyword">new</span> <span class="type"><a href="qstandarditem.html">QStandardItem</a></span>(text));
model<span class="operator">.</span>appendRow(items);
}
resultView<span class="operator">-</span><span class="operator">></span>setModel(<span class="operator">&</span>model);
resultView<span class="operator">-</span><span class="operator">></span>verticalHeader()<span class="operator">-</span><span class="operator">></span>hide();
resultView<span class="operator">-</span><span class="operator">></span>horizontalHeader()<span class="operator">-</span><span class="operator">></span>setStretchLastSection(<span class="keyword">true</span>);</pre>
<p>The use of models and views is covered in the <a href="examples-itemviews.html">Item Views Examples</a> and in the <a href="model-view-programming.html">Model/View Programming</a> overview.</p>
</div>
<!-- @@@tutorials/widgets/nestedlayouts -->
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2012 Nokia Corporation and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Nokia, Qt and their respective logos are trademarks of Nokia Corporation
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
</body>
</html>
|
