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

« back to all changes in this revision

Viewing changes to doc/html/designer-using-containers.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/designer-manual.qdoc -->
 
6
<head>
 
7
    <title>Qt 4.0: Using Containers in Qt Designer</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="designer-editing-mode.html" />
 
15
    <link rel="contents" href="designer-manual.html" />
 
16
    <link rel="next" href="designer-connection-mode.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="designer-editing-mode.html">Qt Designer's Form Editing Mode</a>]
 
25
[<a href="designer-manual.html">Contents</a>]
 
26
[Next: <a href="designer-connection-mode.html">Editing Signals and Slots</a>]
 
27
</p>
 
28
<h1 align="center">Using Containers in Qt Designer</h1>
 
29
<p>Container widgets provide high level control over groups of objects on a form. They can be used to perform a variety of functions, such as managing input widgets, providing paged and tabbed layouts, or just acting as decorative containers for other objects.</p>
 
30
<p>Since many containers offer specialized functionality, they require a little more explanation than ordinary widgets in order to make the most of them.</p>
 
31
<ul><li><a href="#general-features">General Features</a></li>
 
32
<li><a href="#frames">Frames</a></li>
 
33
<li><a href="#group-boxes">Group Boxes</a></li>
 
34
<li><a href="#stacked-widgets">Stacked Widgets</a></li>
 
35
<li><a href="#tab-widgets">Tab Widgets</a></li>
 
36
<li><a href="#toolbox-widgets">Toolbox Widgets</a></li>
 
37
</ul>
 
38
<a name="general-features"></a>
 
39
<h2>General Features</h2>
 
40
<p>Since containers are designed to hold other objects, <i>Qt Designer</i> provides visual feedback to help you place objects inside them. When dragging an object from the toolbox or from elsewhere on the form, each container will become highlighted as the cursor is positioned over it. This indicates that you can drop the object inside, and that it will become a child object of the container. This feedback is important because it is easy to place objects close to containers without actually placing them inside. Both widgets and spacers can be used inside containers.</p>
 
41
<p>Stacked widgets, tab widgets, and toolboxes are handled specially in <i>Qt Designer</i>. Normally, when adding pages (tabs, pages, compartments) to these containers in your own code, you need to supply existing widgets, either as placeholders or containing child widgets. In <i>Qt Designer</i>, these are automatically created for you, so you can add child objects to each page straight away. New pages are added to each of these containers in the same way: Select the container on the form, open the context menu, and select <b>Add Page</b>. To delete the current page, select the container widget then select the <b>Delete Page</b> from the context menu.</p>
 
42
<p>Each container typically allows its child objects to be arranged in one or more layouts. The type of layout management provided depends on each container, although setting the layout is usually just a matter of selecting the container by clicking it, and applying a layout.</p>
 
43
<a name="frames"></a>
 
44
<h2>Frames</h2>
 
45
<center><img src="images/designer-containers-frame.png" /></center><p>Frames are used to enclose and group widgets, and to provide decoration. They are used as the foundation for more complex containers, but they can also be used as placeholders in forms.</p>
 
46
<p>The most important properties of frames are <tt>frameShape</tt>, <tt>frameShadow</tt>, <tt>lineWidth</tt>, and <tt>midLineWidth</tt>. These are described in more detail in the <a href="qframe.html">QFrame</a> class description.</p>
 
47
<p>Each frame can contain its own layout. Select the frame and apply the layout as usual.</p>
 
48
<a name="group-boxes"></a>
 
49
<h2>Group Boxes</h2>
 
50
<center><img src="images/designer-containers-groupbox.png" /></center><p>Group boxes are usually used to group together collections of checkboxes and radio buttons with similar purposes.</p>
 
51
<p>The most important properties of groupboxes are <tt>title</tt>, <tt>flat</tt>, <tt>checkable</tt>, and <tt>checked</tt>. These are demonstrated in the <a href="widgets-groupbox.html">Group Box</a> example, and described in the <a href="qgroupbox.html">QGroupBox</a> class documentation.</p>
 
52
<p>Each group box can contain its own layout, and this is needed if it contains other widgets. To add a layout to the group box, click inside it and apply the layout as usual.</p>
 
53
<a name="stacked-widgets"></a>
 
54
<h2>Stacked Widgets</h2>
 
55
<center><img src="images/designer-containers-stackedwidget.png" /></center><p>Stacked widgets are collections of widgets in which only the topmost layer is visible. Control over the visible layer is usually managed by another widget, such as a combobox, using signals and slots.</p>
 
56
<p><i>Qt Designer</i> shows arrows in the top-right corner of the stack to allow you to see all the widgets in the stack; these do not appear in either the preview or in the final component. To navigate between pages in the stack, select the stacked widget and use the <b>Next Page</b> and <b>Previous Page</b> entries from the context menu. The <b>Add Page</b> and <b>Delete Page</b> context menu options allow you add and remove pages.</p>
 
57
<p>Each page in the stack can be given its own layout, and this is necessary if the page contains other objects. To add a layout to a page, click inside the widget and apply the layout as usual.</p>
 
58
<a name="tab-widgets"></a>
 
59
<h2>Tab Widgets</h2>
 
60
<center><img src="images/designer-containers-tabwidget.png" /></center><p>Tab widgets allow the developer to split up the contents of a widget into different labelled sections, only one of which is displayed at any given time. By default, the tab widget contains two tabs, and these can be deleted or renamed as required. You can also add additional tabs.</p>
 
61
<p>To delete a tab, make it the current tab by clicking on its label, select the tab widget, open the context menu over the tab, and select <b>Delete Page</b>. To add a new tab <i>to the left</i> of the current tab, select the tab widget, open the context menu, and select <b>Add Page</b>. <i>Qt Designer</i> will create a new widget for that tab, and insert it into the tab widget. The title of the current tab can be set by selecting the tab widget, and changing the <tt>currentTabText</tt> property in the Property Editor.</p>
 
62
<p>Each tab can be given its own layout, and one must be defined for each tab that contains other objects. To add a layout to a tab, click inside it and apply the layout as usual.</p>
 
63
<a name="toolbox-widgets"></a>
 
64
<h2>Toolbox Widgets</h2>
 
65
<center><img src="images/designer-containers-toolbox.png" /></center><p>Toolbox widgets provide a series of pages or compartments in a toolbox, much like the toolbox used in Qt 3's <i>Qt Designer</i>. Toolboxes are handled in much the same way as stacked widgets.</p>
 
66
<p>To rename a page in a toolbox, make it the current page, open the Property Editor, and change the <tt>currentItemText</tt> property. To add a new page <i>above</i> the current page in the toolbox, select the toolbox widget, open the context menu, and select <b>Add Page</b>. To delete the current page, select the toolbox widget, open the context menu, and select <b>Delete Page</b>.</p>
 
67
<p>Each page in the toolbox can be given its own layout, and this is necessary if it contains other objects. To add a layout to a page, click inside it and apply the layout as usual.</p>
 
68
<p>
 
69
[Previous: <a href="designer-editing-mode.html">Qt Designer's Form Editing Mode</a>]
 
70
[<a href="designer-manual.html">Contents</a>]
 
71
[Next: <a href="designer-connection-mode.html">Editing Signals and Slots</a>]
 
72
</p>
 
73
<p /><address><hr /><div align="center">
 
74
<table width="100%" cellspacing="0" border="0"><tr class="address">
 
75
<td width="30%">Copyright &copy; 2005 <a href="trolltech.html">Trolltech</a></td>
 
76
<td width="40%" align="center"><a href="trademarks.html">Trademarks</a></td>
 
77
<td width="30%" align="right"><div align="right">Qt 4.0.0</div></td>
 
78
</tr></table></div></address></body>
 
79
</html>