~oif-team/ubuntu/natty/qt4-x11/xi2.1

« back to all changes in this revision

Viewing changes to doc/html/model-view-view.html

  • Committer: Bazaar Package Importer
  • Author(s): Adam Conrad
  • Date: 2005-08-24 04:09:09 UTC
  • Revision ID: james.westby@ubuntu.com-20050824040909-xmxe9jfr4a0w5671
Tags: upstream-4.0.0
ImportĀ upstreamĀ versionĀ 4.0.0

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
<?xml version="1.0" encoding="iso-8859-1"?>
 
2
<!DOCTYPE html
 
3
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
 
4
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
5
<!-- /tmp/qt-4.0.0-espenr-1119621036935/qt-x11-opensource-desktop-4.0.0/doc/src/model-view-programming.qdoc -->
 
6
<head>
 
7
    <title>Qt 4.0: View Classes</title>
 
8
    <style>h3.fn,span.fn { margin-left: 1cm; text-indent: -1cm; }
 
9
a:link { color: #004faf; text-decoration: none }
 
10
a:visited { color: #672967; text-decoration: none }
 
11
td.postheader { font-family: sans-serif }
 
12
tr.address { font-family: sans-serif }
 
13
body { background: #ffffff; color: black; }</style>
 
14
    <link rel="prev" href="model-view-creating-models.html" />
 
15
    <link rel="contents" href="model-view-programming.html" />
 
16
    <link rel="next" href="model-view-selection.html" />
 
17
</head>
 
18
<body>
 
19
<table border="0" cellpadding="0" cellspacing="0" width="100%">
 
20
<tr>
 
21
<td align="left" valign="top" width="32"><img src="images/qt-logo.png" align="left" width="32" height="32" border="0" /></td>
 
22
<td width="1">&nbsp;&nbsp;</td><td class="postheader" valign="center"><a href="index.html"><font color="#004faf">Home</font></a>&nbsp;&middot; <a href="classes.html"><font color="#004faf">All&nbsp;Classes</font></a>&nbsp;&middot; <a href="mainclasses.html"><font color="#004faf">Main&nbsp;Classes</font></a>&nbsp;&middot; <a href="annotated.html"><font color="#004faf">Annotated</font></a>&nbsp;&middot; <a href="groups.html"><font color="#004faf">Grouped&nbsp;Classes</font></a>&nbsp;&middot; <a href="functions.html"><font color="#004faf">Functions</font></a></td>
 
23
<td align="right" valign="top" width="230"><img src="images/trolltech-logo.png" align="right" width="203" height="32" border="0" /></td></tr></table><p>
 
24
[Previous: <a href="model-view-creating-models.html">Creating New Models</a>]
 
25
[<a href="model-view-programming.html">Contents</a>]
 
26
[Next: <a href="model-view-selection.html">Handling Selections in Item Views</a>]
 
27
</p>
 
28
<h1 align="center">View Classes</h1>
 
29
<ul><li><a href="#concepts">Concepts</a></li>
 
30
<li><a href="#using-an-existing-view">Using an Existing View</a></li>
 
31
<ul><li><a href="#using-a-model">Using a Model</a></li>
 
32
<li><a href="#using-multiple-views-onto-the-same-model">Using Multiple Views onto the Same Model</a></li>
 
33
</ul>
 
34
<li><a href="#handling-selections-of-items">Handling Selections of Items</a></li>
 
35
<ul><li><a href="#sharing-selections-between-views">Sharing Selections Between Views</a></li>
 
36
</ul>
 
37
</ul>
 
38
<a name="concepts"></a>
 
39
<h2>Concepts</h2>
 
40
<p>In the model/view architecture, the view obtains items of data from the model and presents them to the user. The way that the data is presented need not resemble the representation of the data provided by the model, and may be <i>completely different</i> from the underlying data structure used to store items of data.</p>
 
41
<p>The separation of content and presentation is achieved by the use of a standard model interface provided by <a href="qabstractitemmodel.html">QAbstractItemModel</a>, a standard view interface provided by <a href="qabstractitemview.html">QAbstractItemView</a>, and the use of model indexes that represent items of data in a general way. Views typically manage the overall layout of the data obtained from models. They may render individual items of data themselves, or use <a href="model-view-delegate.html">delegates</a> to handle both rendering and editing features.</p>
 
42
<p>As well as presenting data, views handle navigation between items, and some aspects of item selection. The views also implement basic user interface features, such as context menus and drag and drop. A view can provide default editing facilities for items, or it may work with a <a href="model-view-delegate.html">delegate</a> to provide a custom editor.</p>
 
43
<p>A view can be constructed without a model, but a model must be provided before it can display useful information. Views keep track of the items that the user has selected through the use of <a href="model-view-selection.html">selections</a> which can be maintained separately for each view, or shared between multiple views.</p>
 
44
<p>Some views, such as <a href="qtableview.html">QTableView</a> and <a href="qtreeview.html">QTreeView</a>, display headers as well as items. These are also implemented by a view class, <a href="qheaderview.html">QHeaderView</a>. Headers usually access the same model as the view that contains them. They retrieve data from the model using the <a href="qabstractitemmodel.html#headerData">QAbstractItemModel::headerData</a>() function, and usually display header information in the form of a label. New headers can be subclassed from the <a href="qheaderview.html">QHeaderView</a> class to provide more specialized labels for views.</p>
 
45
<a name="using-an-existing-view"></a>
 
46
<h2>Using an Existing View</h2>
 
47
<p>Qt provides three ready-to-use view classes that present data from models in ways that are familiar to most users. <a href="qlistview.html">QListView</a> can display items from a model as a simple list, or in the form of a classic icon view. <a href="qtreeview.html">QTreeView</a> displays items from a model as a hierarchy of lists, allowing deeply nested structures to be represented in a compact way. <a href="qtableview.html">QTableView</a> presents items from a model in the form of a table, much like the layout of a spreadsheet application.</p>
 
48
<center><img src="images/standard-views.png" /></center><p>The default behavior of the standard views shown above should be sufficient for most applications. They provide basic editing facilities, and can be customized to suit the needs of more specialized user interfaces.</p>
 
49
<a name="using-a-model"></a>
 
50
<h3>Using a Model</h3>
 
51
<p>We take the string list model that <a href="model-view-creating-models.html">we created as an example model</a>, set it up with some data, and construct a view to display the contents of the model. This can all be performed within a single function:</p>
 
52
<pre>&nbsp;   int main(int argc, char *argv[])
 
53
    {
 
54
        QApplication app(argc, argv);
 
55
 
 
56
        QStringList numbers;
 
57
        numbers &lt;&lt; &quot;One&quot; &lt;&lt; &quot;Two&quot; &lt;&lt; &quot;Three&quot; &lt;&lt; &quot;Four&quot; &lt;&lt; &quot;Five&quot;;
 
58
 
 
59
        QAbstractItemModel *model = new StringListModel(numbers);</pre>
 
60
<p>Note that the <tt>StringListModel</tt> is declared as a <a href="qabstractitemmodel.html">QAbstractItemModel</a>. This allows us to use the abstract interface to the model, and ensures that the code will still work even if we replace the string list model with a different model in the future.</p>
 
61
<p>The list view provided by <a href="qlistview.html">QListView</a> is sufficient for presenting the items in the string list model. We construct the view, and set up the model using the following lines of code:</p>
 
62
<pre>&nbsp;       QListView *view = new QListView;
 
63
        view-&gt;setModel(model);</pre>
 
64
<p>The view is shown in the normal way:</p>
 
65
<pre>&nbsp;       view-&gt;show();
 
66
        return app.exec();
 
67
    }</pre>
 
68
<p>The view renders the contents of a model, accessing data via the model's interface. When the user tries to edit an item, the view uses a default delegate to provide an editor widget.</p>
 
69
<center><img src="images/stringlistmodel.png" /></center><p>The above image shows how a <a href="qlistview.html">QListView</a> represents the data in the string list model. Since the model is editable, the view automatically allows each item in the list to be edited using the default delegate.</p>
 
70
<a name="using-multiple-views-onto-the-same-model"></a>
 
71
<h3>Using Multiple Views onto the Same Model</h3>
 
72
<p>Providing multiple views onto the same model is simply a matter of setting the same model for each view. In the following code we create two table views, each using the same simple table model which we have created for this example:</p>
 
73
<pre>&nbsp;       QTableView *firstTableView = new QTableView;
 
74
        QTableView *secondTableView = new QTableView;
 
75
 
 
76
        firstTableView-&gt;setModel(model);
 
77
        secondTableView-&gt;setModel(model);</pre>
 
78
<p>The use of signals and slots in the model/view architecture means that changes to the model can be propagated to all the attached views, ensuring that we can always access the same data regardless of the view being used.</p>
 
79
<center><img src="images/sharedmodel-tableviews.png" /></center><p>The above image shows two different views onto the same model, each containing a number of selected items. Although the data from the model is shown consistently across view, each view maintains its own internal selection model. This can be useful in certain situations but, for many applications, a shared selection model is desirable.</p>
 
80
<a name="handling-selections-of-items"></a>
 
81
<h2>Handling Selections of Items</h2>
 
82
<p>The mechanism for handling selections of items within views is provided by the <a href="qitemselectionmodel.html">QItemSelectionModel</a> class. All of the standard views construct their own selection models by default, and interact with them in the normal way. The selection model being used by a view can be obtained through the <a href="qabstractitemview.html#selectionModel">selectionModel()</a> function, and a replacement selection model can be specified with <a href="qabstractitemview.html#setSelectionModel">setSelectionModel()</a>. The ability to control the selection model used by a view is useful when we want to provide multiple consistent views onto the same model data.</p>
 
83
<p>Generally, unless you are subclassing a model or view, you will not need to manipulate the contents of selections directly. However, the interface to the selection model can be accessed, if required, and this is explored in the chapter on <a href="model-view-selection.html">Handling Selections in Item Views</a>.</p>
 
84
<a name="sharing-selections-between-views"></a>
 
85
<h3>Sharing Selections Between Views</h3>
 
86
<p>Although it is convenient that the view classes provide their own selection models by default, when we use more than one view onto the same model it is often desirable that both the model's data and the user's selection are shown consistently in all views. Since the view classes allow their internal selection models to be replaced, we can achieve a unified selection between views with the following line:</p>
 
87
<pre>&nbsp;       secondTableView-&gt;setSelectionModel(firstTableView-&gt;selectionModel());</pre>
 
88
<p>The second view is given the selection model for the first view. Both views now operate on the same selection model, keeping both the data and the selected items synchronized.</p>
 
89
<center><img src="images/sharedselection-tableviews.png" /></center><p>In the example shown above, two views of the same type were used to display the same model's data. However, if two different types of view were used, the selected items may be represented very differently in each view; for example, a contiguous selection in a table view can be represented as a fragmented set of highlighted items in a tree view.</p>
 
90
<p>
 
91
[Previous: <a href="model-view-creating-models.html">Creating New Models</a>]
 
92
[<a href="model-view-programming.html">Contents</a>]
 
93
[Next: <a href="model-view-selection.html">Handling Selections in Item Views</a>]
 
94
</p>
 
95
<p /><address><hr /><div align="center">
 
96
<table width="100%" cellspacing="0" border="0"><tr class="address">
 
97
<td width="30%">Copyright &copy; 2005 <a href="trolltech.html">Trolltech</a></td>
 
98
<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>
 
99
<td width="30%" align="right"><div align="right">Qt 4.0.0</div></td>
 
100
</tr></table></div></address></body>
 
101
</html>