<?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" />
<!-- designer-manual.qdoc -->
<title>Qt 4.8: Using Containers in Qt Designer</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style/superfish.css" />
<link rel="stylesheet" type="text/css" href="style/narrow.css" />
<!--[if IE]>
<meta name="MSSmartTagsPreventParsing" content="true">
<meta http-equiv="imagetoolbar" content="no">
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/style_ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="style/style_ie8.css">
<![endif]-->
<script src="scripts/superfish.js" type="text/javascript"></script>
<script src="scripts/narrow.js" type="text/javascript"></script>
</head>
<body class="" onload="CheckEmptyAndLoadList();">
<div class="header" id="qtdocheader">
<div class="content">
<div id="nav-logo">
<a href="index.html">Home</a></div>
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
<div id="narrowsearch"></div>
<div id="nav-topright">
<ul>
<li class="nav-topright-home"><a href="http://qt.digia.com/">Qt HOME</a></li>
<li class="nav-topright-dev"><a href="http://qt-project.org/">DEV</a></li>
<li class="nav-topright-doc nav-topright-doc-active"><a href="http://qt-project.org/doc/">
DOC</a></li>
<li class="nav-topright-blog"><a href="http://blog.qt.digia.com/">BLOG</a></li>
</ul>
</div>
<div id="shortCut">
<ul>
<li class="shortCut-topleft-inactive"><span><a href="index.html">Qt 4.8</a></span></li>
<li class="shortCut-topleft-active"><a href="http://qt-project.org/doc/">ALL VERSIONS </a></li>
</ul>
</div>
<ul class="sf-menu" id="narrowmenu">
<li><a href="#">API Lookup</a>
<ul>
<li><a href="classes.html">Class index</a></li>
<li><a href="functions.html">Function index</a></li>
<li><a href="modules.html">Modules</a></li>
<li><a href="namespaces.html">Namespaces</a></li>
<li><a href="qtglobal.html">Global Declarations</a></li>
<li><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</li>
<li><a href="#">Qt Topics</a>
<ul>
<li><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li><a href="supported-platforms.html">Supported Platforms</a></li>
<li><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</li>
<li><a href="#">Examples</a>
<ul>
<li><a href="all-examples.html">Examples</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="demos.html">Demos</a></li>
<li><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="hd">
<span></span>
</div>
<div class="bd group">
<div class="sidebar">
<div class="searchlabel">
Search index:</div>
<div class="search" id="sidebarsearch">
<form id="qtdocsearch" action="" onsubmit="return false;">
<fieldset>
<input type="text" name="searchstring" id="pageType" value="" />
<div id="resultdialog">
<a href="#" id="resultclose">Close</a>
<p id="resultlinks" class="all"><a href="#" id="showallresults">All</a> | <a href="#" id="showapiresults">API</a> | <a href="#" id="showarticleresults">Articles</a> | <a href="#" id="showexampleresults">Examples</a></p>
<p id="searchcount" class="all"><span id="resultcount"></span><span id="apicount"></span><span id="articlecount"></span><span id="examplecount"></span> results:</p>
<ul id="resultlist" class="all">
</ul>
</div>
</fieldset>
</form>
</div>
<div class="box first bottombar" id="lookup">
<h2 title="API Lookup"><span></span>
API Lookup</h2>
<div id="list001" class="list">
<ul id="ul001" >
<li class="defaultLink"><a href="classes.html">Class index</a></li>
<li class="defaultLink"><a href="functions.html">Function index</a></li>
<li class="defaultLink"><a href="modules.html">Modules</a></li>
<li class="defaultLink"><a href="namespaces.html">Namespaces</a></li>
<li class="defaultLink"><a href="qtglobal.html">Global Declarations</a></li>
<li class="defaultLink"><a href="qdeclarativeelements.html">QML elements</a></li>
</ul>
</div>
</div>
<div class="box bottombar" id="topics">
<h2 title="Qt Topics"><span></span>
Qt Topics</h2>
<div id="list002" class="list">
<ul id="ul002" >
<li class="defaultLink"><a href="qt-basic-concepts.html">Programming with Qt</a></li>
<li class="defaultLink"><a href="qtquick.html">Device UIs & Qt Quick</a></li>
<li class="defaultLink"><a href="qt-gui-concepts.html">UI Design with Qt</a></li>
<li class="defaultLink"><a href="supported-platforms.html">Supported Platforms</a></li>
<li class="defaultLink"><a href="technology-apis.html">Qt and Key Technologies</a></li>
<li class="defaultLink"><a href="best-practices.html">How-To's and Best Practices</a></li>
</ul>
</div>
</div>
<div class="box" id="examples">
<h2 title="Examples"><span></span>
Examples</h2>
<div id="list003" class="list">
<ul id="ul003">
<li class="defaultLink"><a href="all-examples.html">Examples</a></li>
<li class="defaultLink"><a href="tutorials.html">Tutorials</a></li>
<li class="defaultLink"><a href="demos.html">Demos</a></li>
<li class="defaultLink"><a href="qdeclarativeexamples.html">QML Examples</a></li>
</ul>
</div>
</div>
</div>
<div class="wrap">
<div class="toolbar">
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li>Using Containers in Qt Designer</li>
</ul>
</div>
<div class="toolbuttons toolblock">
<ul>
<li id="smallA" class="t_button">A</li>
<li id="medA" class="t_button active">A</li>
<li id="bigA" class="t_button">A</li>
<li id="print" class="t_button"><a href="javascript:this.print();">
<span>Print</span></a></li>
</ul>
</div>
</div>
<div class="content mainContent">
<link rel="prev" href="designer-tab-order.html" />
<link rel="next" href="designer-creating-mainwindows.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="designer-tab-order.html">Qt Designer's Tab Order Editing Mode</a>
<a class="nextPage" href="designer-creating-mainwindows.html">Creating Main Windows in Qt Designer</a>
</p><p/>
<h1 class="title">Using Containers in Qt Designer</h1>
<span class="subtitle"></span>
<!-- $$$designer-using-containers.html-description -->
<div class="descr"> <a name="details"></a>
<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>
<p class="centerAlign"><img src="images/designer-widget-morph.png" alt="" /></p><p><i>Qt Designer</i> provides visual feedback to help you place objects inside your containers. When you drag an object from the widget box (or elsewhere) on the form, each container will be highlighted when the cursor is positioned over it. This indicates that you can drop the object inside, making it 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>
<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.</p>
<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. The table below shows a list of available containers.</p>
<table class="generic">
<tr valign="top" class="odd"><td ><img src="images/designer-containers-frame.png" alt="" /></td><td ><b>Frames</b><p>Frames are used to enclose and group widgets, as well as to provide decoration. They are used as the foundation for more complex containers, but they can also be used as placeholders in forms.</p>
<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>
</td></tr>
<tr valign="top" class="even"><td ><img src="images/designer-containers-groupbox.png" alt="" /></td><td ><b>Group Boxes</b><p>Group boxes are usually used to group together collections of checkboxes and radio buttons with similar purposes.</p>
<p>Among the significant properties of group boxes 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. Each group box can contain its own layout, and this is necessary if it contains other widgets. To add a layout to the group box, click inside it and apply the layout as usual.</p>
</td></tr>
<tr valign="top" class="odd"><td ><img src="images/designer-containers-stackedwidget.png" alt="" /></td><td ><b>Stacked Widgets</b><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 combobox, using signals and slots.</p>
<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 when designing it. These arrows do not appear in 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>Insert Page</b> and <b>Delete Page</b> context menu options allow you to add and remove pages.</p>
</td></tr>
<tr valign="top" class="even"><td ><img src="images/designer-containers-tabwidget.png" alt="" /></td><td ><b>Tab Widgets</b><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>
<p>To delete a tab:</p>
<ul>
<li>Click on its label to make it the current tab.</li>
<li>Select the tab widget and open its context menu.</li>
<li>Select <b>Delete Page</b>.</li>
</ul>
<p>To add a new tab:</p>
<ul>
<li>Select the tab widget and open its context menu.</li>
<li>Select <b>Insert Page</b>.</li>
<li>You can add a page before or after the <i>current</i> page. <i>Qt Designer</i> will create a new widget for that particular tab and insert it into the tab widget.</li>
<li>You can set the title of the current tab by changing the <tt>currentTabText</tt> property in the <b>Property Editor</b>.</li>
</ul>
</td></tr>
<tr valign="top" class="odd"><td ><img src="images/designer-containers-toolbox.png" alt="" /></td><td ><b>ToolBox Widgets</b><p>Toolbox widgets provide a series of pages or compartments in a toolbox. They are handled in a way similar to stacked widgets.</p>
<p>To rename a page in a toolbox, make the toolbox your current pange and change its <tt>currentItemText</tt> property from the <b>Property Editor</b>.</p>
<p>To add a new page, select <b>Insert Page</b> from the toolbox widget's context menu. You can add the page before or after the current page.</p>
<p>To delete a page, select <b>Delete Page</b> from the toolbox widget's context menu.</p>
</td></tr>
<tr valign="top" class="even"><td ><img src="images/designer-containers-dockwidget.png" alt="" /></td><td ><b>Dock Widgets</b><p>Dock widgets are floating panels, often containing input widgets and more complex controls, that are either attached to the edges of the main window in "dock areas", or floated as independent tool windows.</p>
<p>Although dock widgets can be added to any type of form, they are typically used with forms created from the <a href="designer-creating-mainwindows.html">main window template</a>.</p>
</td></tr>
</table>
</div>
<!-- @@@designer-using-containers.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="designer-tab-order.html">Qt Designer's Tab Order Editing Mode</a>
<a class="nextPage" href="designer-creating-mainwindows.html">Creating Main Windows in Qt Designer</a>
</p>
</div>
</div>
</div>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2015 The Qt Company Ltd.
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>
Qt and respective logos are trademarks of The Qt Company Ltd
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>
<script src="scripts/functions.js" type="text/javascript"></script>
</body>
</html>
