<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- /tmp/qt-3.0-reggie-28534/qt-x11-free-3.0.2/tools/designer/book/chap-dialogs.leaf:3 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Creating a Qt Application</title>
<style type="text/css"><!--
h3.fn,span.fn { margin-left: 1cm; text-indent: -1cm; }
a:link { color: #004faf; text-decoration: none }
a:visited { color: #672967; text-decoration: none }
body { background: #ffffff; color: black; }
--></style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr bgcolor="#E5E5E5">
<td valign=center>
<a href="index.html">
<font color="#004faf">Home</font></a>
| <a href="classes.html">
<font color="#004faf">All Classes</font></a>
| <a href="mainclasses.html">
<font color="#004faf">Main Classes</font></a>
| <a href="annotated.html">
<font color="#004faf">Annotated</font></a>
| <a href="groups.html">
<font color="#004faf">Grouped Classes</font></a>
| <a href="functions.html">
<font color="#004faf">Functions</font></a>
</td>
<td align="right" valign="center"><img src="logo32.png" align="right" width="64" height="32" border="0"></td></tr></table><p align="right">[<a href="designer-manual-1.html">Prev: Preface</a>] [<a href="designer-manual.html">Home</a>] [<a href="designer-manual-3.html">Next: Creating Main Windows with Actions, Toolbars and Menus</a>]</p>
<h2 align="center">Creating a Qt Application</h2>
<h3><a name="1"></a>Starting and Exiting <em>Qt Designer</em></h3>
<!-- index Starting Qt Designer --><p><em>Qt Designer</em> is controlled in the same way as any other modern desktop application. To start <em>Qt Designer</em> under Windows click the <b>Start</b> button and click <b>Programs|Qt X.x.x|Designer</b>. (X.x.x is the Qt version number, e.g. 3.0.0.) If you're running a Unix or Linux operating system you can either double click the <em>Qt Designer</em> icon or enter <tt>designer &</tt> in an xterm.</p>
<!-- index Exiting Qt Designer --><!-- index Getting Help --><p>When you've finished using <em>Qt Designer</em> click <b>File|Exit</b>; you will be prompted to save any unsaved changes. Help is available by pressing <b>F1</b> or from the <b>Help</b> menu.</p>
<p>To get the most benefit from the tutorial chapters we recommend that you start <em>Qt Designer</em> now and create the example applications as you read. Most of the work involves using <em>Qt Designer</em>'s menus, dialogs and editors, with only small amounts of code to type in.</p>
<p>When you start <em>Qt Designer</em>, by default, you will see a menu bar and various toolbars at the top.<!-- index Widgets and Source window!Object Explorer --><!-- index Object Explorer --><!-- index Pixmaps --> On the left hand side are three windows, the first is the Files window, the second is the Widgets and Source window (the Object Explorer) and the third is the Properties window. The Files window lists the files and images associated with the project; to open any form single click it in the Files list. The Widgets and Source window lists the current form's widgets and slots. The Properties window is used to view and change the properties of forms and widgets. We will cover the use of <em>Qt Designer</em>'s windows, dialogs, menu options and toolbar buttons as we create example applications.</p>
<p>In this chapter we will build an application called 'multiclip' which allows you to store and retrieve multiple text clippings to and from the clipboard.</p>
<p align="center"><img align="middle" src="multiclip.png" width="553" height="273">
</p>
<blockquote><p align="center"><em>The Multiclip Application</em></p></blockquote>
<h3><a name="2"></a>Creating a New Project</h3>
<!-- index Projects --><!-- index Projects!Creating New --><!-- index Creating Projects!Projects --><!-- index Pixmaps!In Projects --><!-- index Pixmaps!Adding to Forms --><p>Whenever you create a new application we <em>strongly</em> recommend that you create a project file and open the project rather than individual<!-- index .ui --> <tt>.ui</tt> files. Using a project has the advantage that all the forms you create for the project are available via a single mouse click rather than having to be loaded individually through file open dialogs. An additional benefit of using project files is that they allow you to store all your images in a single file rather than duplicate them in each form in which they appear. See <a href="designer-manual-4.html">The Designer Approach</a> chapter's <a href="designer-manual-4.html#2">Project management</a> section for detailed information on the benefits of using project files.</p>
<!-- index Adding!Forms --><!-- index Forms!Adding --><p>Start <em>Qt Designer</em> if you haven't already. Click <b>File|New</b> to invoke the <em>New File</em> dialog. Click the 'C++ Project' icon, then click <b>OK</b> to invoke the <em>Project Settings</em> dialog. You need to give the project a name, and we recommend that you put each project in its own subdirectory. Click the ellipsis <b>...</b> button to invoke the <em>Save As</em> dialog and navigate to where you want to put the new project. Click the <b>Create New Folder</b> toolbar button to create the 'multiclip' directory. Double click the 'multiclip' directory to make it the current directory. Enter a file name of 'multiclip.pro', and click the <b>Save</b> button. The 'Project File' field of the <em>Project Settings</em> dialog will have the path and name of your new project; click <b>OK</b> to create the project.</p>
<p align="center"><img align="middle" src="qd-chapdialogs-creatingnewprojects.png" width="565" height="464">
</p>
<blockquote><p align="center"><em>Creating a New Project</em></p></blockquote>
<p>The name of the current project is shown in the <b>Files</b> toolbar which is the top left toolbar by default. Once we have a project we can add forms and begin to build our application. (See <a href="designer-manual-8.html#1">Customizing Qt Designer</a> for information on changing <em>Qt Designer</em>'s toolbars and windows to suit your preferences.)</p>
<h3><a name="3"></a>Creating a New Form</h3>
<!-- index Dialogs!Creating New --><!-- index Creating Forms!Dialogs --><!-- index Adding!Forms --><p>Click <b>File|New</b> to invoke the <em>New File</em> dialog. Several default forms are supplied but we will use the default Dialog form, so just click <b>OK</b>. A new form called 'Form1' will appear. Note that the new form is listed in the Files list and the Properties window shows the form's default property settings.</p>
<p>Click the Value beside the <em>name</em> property and change the form's name to 'MulticlipForm'. Change the form's caption to 'Multiclip'. The properties are ordered in accordance with the inheritance hierarchy, and caption is roughly in the middle of the property editor. Save the form: click <b>File|Save</b>, enter the name 'multiclip.ui', then click the <b>Save</b> button.</p>
<p align="center"><img align="middle" src="qd-chapdialogs-creatingmulticlipform3.png" width="690" height="547">
</p>
<blockquote><p align="center"><em>Creating a New Form</em></p></blockquote>
<blockquote>
<p align="center"><b> Using the Property Editor</b></p>
<!-- index Using the Property Editor --><!-- index Properties --><p>The Property Editor has two columns, the Property column which lists property names and the Value column which lists the values. Some property names have a plus sign '+' in a square to their left; this signifies that the property name is the collective name for a set of related properties. Click the form to make the Property Editor show the form's properties. Click the <em>sizePolicy</em> property's plus sign; you will see four properties appear indented below sizePolicy, hSizeType, vSizeType, horizontalStretch and verticalStretch. These properties are edited in the same way as any other properties.</p>
<p align="center"><img align="middle" src="qd-chapdialogs-propertyeditor.png" width="370" height="732">
</p>
<blockquote><p align="center"><em>Property Editor</em></p></blockquote>
<p>Some properties have simple values, for example, the <em>name</em> property has a text value, the <em>width</em> property (within <em>minimumSize</em> for example) has a numeric value. To change a text value click the existing text and type in your new text. To change a numeric value click the value and either type in a new number, or use the spin buttons to increase or decrease the existing number until it reaches the value you want. Some properties have a fixed list of values, for example the <em>mouseTracking</em> property is boolean and can take the values True or False. The <em>cursor</em> property also has a fixed list of values. If you click the cursor property or the <em>mouseTracking</em> property the value will be shown in a drop down combobox; click the down arrow to see what values are available. Some properties have complex sets of values; for example the <em>font</em> property. If you click the font property an ellipsis button (<b>...</b>) will appear; click this button and a <em>Select Font</em> dialog will pop up which you can use to change any of the font settings. Other properties have ellipsis buttons which lead to different dialogs depending on what settings the property can have. For example, if you have a lot of text to enter for a <em>text</em> property you could click the ellipsis button to invoke the multi-line text editor dialog.</p>
<!-- index Properties!Reverting changes --><!-- index Properties!Initial values --><p>The names of properties which have changed are shown in bold. If you've changed a property but want to revert it to its default value click the property's value and then click the red 'X' button to the right of the value. Some properties have an <em>initial</em> value, e.g. 'TextEdit1', but no default value; if you revert a property that has an initial value but no default value (by clicking the red 'X') the value will become empty unless the property, e.g. name, is not allowed to be empty.</p>
<!-- index Undo and Redo!Properties --><!-- index Properties!Undo and Redo!Undo and Redo --><!-- index Redo!Undo and Redo --><p>The property editor fully supports Undo and Redo (<b>Ctrl+Z</b> and <b>Ctrl+Y</b>, also available from the <b>Edit</b> menu).</p>
</blockquote>
<h3><a name="4"></a>Adding Widgets</h3>
<!-- index Forms!Adding Widgets --><!-- index Adding!Widgets --><!-- index Cut and Paste (in Applications) --><p>The multiclip application consists of a text box to display the current clipboard text (if any), a list box showing the previous clippings, a length indicator, a checkbox and buttons. If you run the application and resize it all the widgets will scale properly.</p>
<p>The <em>Qt Designer</em> approach to laying out a form is to place the required widgets on the form in the approximate positions that they should occupy and then use the layout tools to size and position them correctly. We'll now add the multiclip form's widgets.</p>
<ol type=1><li><!-- index Tooltips --><p>We'll start with the current clipping text box. Click the <b>Text Label</b> toolbar button and click towards the top left of the form. (If you hover the mouse over a toolbar button its name will appear in a tooltip.) We won't bother renaming the label since we'll never refer to it in code; but we need to change its text, so change its <em>text</em> property to 'Current Clipping'. (See the Using the Property Editor sidebar for an explanation of the property editor.)</p>
<p>Click the <b>Line Edit</b> toolbar button and click towards the top right of the form. Use the Property Editor to change the widget's name to 'currentLineEdit'.</p>
<li><p>Now we'll add another label and the list box. Click the <b>Text Label</b> toolbar button and click below the Current Clipping label. Change the <em>text</em> property to 'Previous Clippings'. Don't worry about positioning the widgets precisely, nor about the fact that they are the wrong size; the layout tools (covered in the next section) will take care of this.</p>
<!-- index Properties!Property Editors --><!-- index Deleting!ListBox Items --><!-- index Value Editors!List Box --><p>Click the <b>List Box</b> toolbar button and click the form below the 'Previous Clippings' label. Change the list box's name to 'clippingsListBox'. By default <em>Qt Designer</em> creates list boxes with a single initial value of 'New Item'. We don't want this value (we'll be populating our list box in code later), so we need to remove the value. Right click the list box then click the <b>Edit</b> menu item on the popup menu to invoke the listbox's value editor dialog. Click <b>Delete Item</b> to delete the default item, then click <b>OK</b>. (See the Value Editors sidebar.)</p>
<li><p>We want to know the length of the current clipping so we'll add a label and an <em>LCD Number</em> widget.</p>
<!-- index Adding!Text Labels --><!-- index Adding!Labels --><p>Click the <b>Text Label</b> toolbar button and click below the <em>Line Edit</em>. Change its <em>text</em> property's value to 'Length'. Click the <b>LCD Number</b> toolbar button and click below the length label. Change the LCD Number's name to 'lengthLCDNumber'.</p>
<li><p>Multiclip can be made to detect clipboard changes and automatically add new clippings. We want the user to have control over whether this should happen or not so we will provide a check box which they can use to indicate their preference.</p>
<p>Click the <b>Check Box</b> toolbar button and click below the <em>LCD Number</em>. Change the checkbox's name to 'autoCheckBox' and its text to 'A&uto Add Clippings'. Note that the <em>accel</em> property automatically changes to <b>Alt+U</b> because the ampersand in the text signifies a keyboard shortcut.</p>
<li><p>The last widgets we require are the buttons. One way to add the same kind of widget multiple times is to add one, copy it, then paste repeatedly. We will use another approach.</p>
<!-- index Adding!Duplicate Widgets --><!-- index Widgets!Repeatedly Adding --><!-- index Adding!Push Buttons --><p><em>Double</em> click the <b>Push Button</b> toolbar button; now click below the checkbox to place a button. Click below the button we've just added to add a second button. Add a third and fourth button. Now click the <b>Pointer</b> toolbar button to switch off automatically adding the same widget. Change the first button's name to 'addPushButton' and its text to '&Add Clipping'. Change the second button's name to 'copyPushButton' and its text to '&Copy Previous'. Change the third button's name and text properties to 'deletePushButton' and '&Delete Clipping' respectively. Similarly change the fourth button's name and text to 'quitPushButton' and '&Quit'.</p>
</ol><p>All our widgets have been placed on the form with their properties changed to suit our application's needs. In the next section we will use <em>Qt Designer</em>'s layout tools to size and position the widgets correctly and in such a way that when the user resizes the form the widgets will scale properly.</p>
<p align="center"><img align="middle" src="qd-chapdialogs-addingwidgets.png" width="600" height="504">
</p>
<blockquote><p align="center"><em>Adding Widgets to the Form</em></p></blockquote>
<blockquote>
<p align="center"><b> Value Editors</b></p>
<!-- index Value Editors --><!-- index Value Editors!Dialogs --><!-- index Dialogs!Value Editors --><p>Whilst the Property Editor is used to customize the generic properties of widgets, value editors are used to edit values held within instances of particular widgets. For example a <b>QLineEdit</b> can only contain a single line of text, but a <b>QListBox</b> can contain any number of items each of which may be a line of text, a pixmap, or both. To invoke a widget's value editor double click the widget. (Alternatively right click the widget and a popup menu will appear; if the first menu item is 'Edit', you can click this to access the widget's value editor dialog.) Different widgets have different value editors. See the Value Editors chapter for more details.</p>
</blockquote>
<h3><a name="5"></a>Laying Out Widgets and Previewing</h3>
<h4><a name="5-1"></a>Introduction to Layouts</h4>
<!-- index Layouts --><!-- index Layouts!Vertical --><!-- index Layouts!Horizontal --><!-- index Layouts!Grid --><p>Layouts work by grouping together widgets and groups of widgets, horizontally, vertically or in a grid. Widgets that are laid out together horizontally or vertically can be grouped either with a Layout or with a Splitter; the only difference is that a user can manipulate a Splitter themselves.</p>
<p>If we want to lay out some widgets side by side we would select them and then click the <b>Lay Out Horizontally</b> toolbar button. If we want our widgets to be lined up one above the other we would use the <b>Lay Out Vertically</b> toolbar button. Once we've grouped some widgets together we can then lay out the groups in relation to each other, again using vertical, horizontal or grid layouts. Once we have a collection of laid out groups we then click on the form itself and lay out the groups within the form using one of the layout buttons.</p>
<!-- index Layouts!Space filling --><!-- index Widgets!Push Button --><!-- index Widgets!Line Edit --><p>Some widgets will grow to fill the available space, vertically or horizontally or both ways. Buttons and line edits will fill horizontal space for example, whereas a <em>ListView</em> will fill space in both directions. The easiest way to achieve the layout you want is to use <em>Qt Designer</em>'s layout tools. When you apply a layout to some widgets in some situations the widgets may not lay out the way you want. If a widget does not fill up enough space try changing its <em>sizePolicy</em> to Expanding. If a widget takes up too much space one approach is to change its <em>sizePolicy</em>, and another approach is to use a <em>Spacer</em> to consume excess space.</p>
<p>Spacers have no visual appearance on the running form and are used purely to insert space between widgets or groups of widgets. Suppose you have a widget that takes up too much space. You could break the layout and resize the widget to make room for a spacer. Then you would insert the spacer and layout the spacer with the widgets and the spacer will consume the excess space. If the spacer doesn't take up the right amount of space you can change its sizePolicy for finer control.</p>
<!-- index Undo and Redo!Layouts --><!-- index Layouts!Undo and Redo!Undo and Redo --><!-- index Layouts!Spacers --><p>The best way to learn about layouts and spacers is to try them out. Experimenting with layouts is easy. If you make any changes that you aren't happy with you can easily undo them by clicking <b>Edit|Undo</b> or by pressing <b>Ctrl+Z</b>. In the next section we'll lay out our multiclip example step-by-step.</p>
<h4><a name="5-2"></a>Laying Out Widgets</h4>
<!-- index Layouts --><!-- index Scaling widgets and application windows --><!-- index Automatically scaling widgets and application windows --><!-- index Absolute positioning --><p>Layouts provide a means of grouping widgets and groups of widgets together in horizontal and vertical pairs and in grids. If you use layouts your forms and the widgets they contain will scale automatically when the user resizes the window. This is better than using absolute sizes and positions since you don't have to write any code to achieve the scaling and your users can make the most of their screen size whether they have a laptop or a very large screen desktop machine. Layouts use standard sizes for margins and widget spacing which helps give your applications a consistent and proportional look without requiring any effort on your part. Layouts are also easier and faster to use than absolute positioning; you can just place your widgets on the form in approximate positions and leave the layout tools to size and scale the widgets correctly.</p>
<blockquote>
<p align="center"><b> Selecting Widgets and Inserting Widgets</b></p>
<!-- index Object Explorer --><!-- index Selecting Widgets --><!-- index Rubber band, Selecting --><!-- index Selecting!Rubber band --><!-- index Grouping Widgets --><!-- index Widgets!Grouping --><p>To select an individual widget, either click the widget itself or click its Name in the Object Explorer window. To select a group either click a fraction outside its red outline or click its Name in the Object Explorer window. To select multiple widgets or groups, click the form to deselect any selected widgets, then <b>Ctrl+Click</b> one widget or group then drag the rubber band so that it touches the other widgets or groups that you want to select. This technique is particularly useful for selecting widgets that are <em>inside</em> another widget. For example to select the radio buttons in a button group but not the button group itself you would click the form then <b>Ctrl+Click</b> one of the radio buttons and drag the rubber band to touch the other radio buttons.</p>
<!-- index Layouts!Break layout --><!-- index Break layout --><p>If we want to insert a widget into a gap between widgets which are in a layout we can click the toolbar button for the new widget and then click in the gap. <em>Qt Designer</em> will ask us if we want to break the layout and if we click <b>Break Layout</b> the layout will be broken and our widget inserted. We can then select the widgets and groups we want to lay out and lay them out again. The same effect can be achieved by clicking the group and either clicking the <b>Break Layout</b> toolbar button or pressing <b>Ctrl+B</b>.</p>
</blockquote>
<p>The layout we want to achieve is to have the current clipping label and currentLineEdit side by side at the top of the form. We want the previous clippings label and the clippingsListBox to occupy the left hand side of the form with the remaining widgets in a column on the right. We want to divide left and right with a splitter and make the left hand side larger by default. We'll leave the sizing of the widgets to <em>Qt Designer</em>. The layout controls are in the <b>Layout</b> toolbar. (By default this is the fourth toolbar counting left to right.) We'll now lay out the widgets we've placed on the form.</p>
<ol type=1><li><p>Click the current clipping label and <b>Shift+Click</b> the currentLineEdit <em>Line Edit</em>. (<b>Shift+Click</b> means hold down the shift key whilst clicking; this will ensure that <em>Qt Designer</em> performs multiple selections.) Most of the layout toolbar buttons will now be available. Click the <b>Lay Out Horizontally</b> toolbar button. (If you hover the mouse over a toolbar button a tooltip giving the button's name will appear.) The two widgets will be moved together with a thin red line surrounding them. It doesn't matter that the widgets aren't the right size or in exactly the right place; as we progress with the layout <em>Qt Designer</em> will size and place them correctly.</p>
<p align="center"><img align="middle" src="qd-chapdialogs-layoutwidgets-stepone-after.png" width="598" height="504">
</p>
<blockquote><p align="center"><em>Layout Current Clipping Label and currentLineEdit</em></p></blockquote>
<li><p>Click the Previous Clippings label and <b>Shift+Click</b> the clippingsListBox. Click the <b>Lay Out Vertically</b> toolbar button.</p>
<li><!-- index Selecting Widgets --><!-- index Rubber band, Selecting --><!-- index Selecting!Rubber band --><!-- index Grouping Widgets --><!-- index Widgets!Grouping --><p>We want the remaining widgets to be grouped together vertically. We could <b>Shift+Click</b> each one but instead click the form above the Length label, then drag until the Length label, the LCD Number, the check box and all the buttons are all touching the rubber band (a black outline rectangle) that appears when you drag. Release the mouse, and all the remaining widgets should be selected. If you missed any <b>Shift+Click</b> them. Now click the <b>Lay Out Vertically</b> toolbar button.</p>
<p align="center"><img align="middle" src="qd-chapdialogs-layoutwidgets-stepthree-rubberband.png" width="598" height="504">
</p>
<blockquote><p align="center"><em>Selecting a Group of Widgets</em></p></blockquote>
</ol><p>We now have three groups of widgets which must be laid out in relation to each other and then laid out in relation to the form itself.</p>
<p align="center"><img align="middle" src="qd-chapdialogs-layoutwidgets-stepthree-groupedwidgets.png" width="598" height="505">
</p>
<blockquote><p align="center"><em>Groups of Layed Out Widgets</em></p></blockquote>
<ol type=1><li><!-- index Layouts!Rubber band --><!-- index Grouping Widgets --><!-- index Widgets!Grouping --><p><b>Shift+Click</b>ing is used to select individual widgets. To select a group we must click the form to deselect any selected widgets, then <b>Ctrl+Click</b> the group and drag so that the rubber band touches the groups we want to lay out and then release. With the buttons and other widgets already laid out and selected, <b>Ctrl+Click</b> the list box and drag the rubber band over the one of the buttons, then release. Both groups should now be selected. Click the <b>Lay Out Horizontally (in Splitter)</b> toolbar button.</p>
<p align="center"><img align="middle" src="qd-chapdialogs-layoutwidgets-part2-stepone-twogroups.png" width="597" height="503">
</p>
<blockquote><p align="center"><em>Layout Groups of Widgets</em></p></blockquote>
<li><p>We now have two groups, the top one with the Current Clipping label and the line edit and the group we've just created with the list box, buttons and other widgets. We now want to lay these out in relation to the form. Click the form and click the <b>Lay Out Vertically</b> toolbar button. The widgets will be resized to fill the entire form.</p>
<p align="center"><img align="middle" src="qd-chapdialogs-layoutwidgets-part2-steptwo-layoutform.png" width="597" height="503">
</p>
<blockquote><p align="center"><em>Lay out Widgets in Relation to the Form</em></p></blockquote>
</ol><!-- index Layouts!Spacers --><p>Unfortunately the Length label and the LCD Number take up far too much space, so we will have to revise the layout. With experience you will find that you do not need to rework layouts very often. We will insert a spacer which will use the extra space.</p>
<ol type=1><li><p>First we must make some room for the spacer. Click the LCD Number to select it. Now click the <b>Break Layout</b> toolbar button. Move the LCD Number up a little bit, there's no need to be exact we just want to create some space below it.</p>
<li><!-- index Layouts!Spacers --><p>Now we'll add the spacer. Click the <b>Spacer</b> toolbar button, then click the form in the space you've created between the LCD Number and the check box. A popup menu with two options, Horizontal and Vertical, will appear; click Vertical. We choose vertical because we want the spacer to consume excess vertical space.</p>
<p align="center"><img align="middle" src="qd-chapdialogs-layoutwidgets-part3-steptwo-addspacer.png" width="597" height="503">
</p>
<blockquote><p align="center"><em>Adding a Vertical Spacer</em></p></blockquote>
<li><!-- index Layouts!Spacers --><p>We need to regroup the buttons and other widgets in a vertical group. Drag the mouse from near the bottom right of the form so that the rubber band includes or touches the buttons, the check box, the spacer, the LCD Number and the Length label; then release. If you selected any other widgets by mistake, click the form and try the drag again. Click the <b>Lay Out Vertically</b> toolbar button.</p>
<li><!-- index Layouts!Splitters --><!-- index Layouts!Horizontal --><!-- index Layouts!Spacers --><p>We now have three groups as we had before, only this time with the small addition of the spacer. Select the list box and the buttons by clicking the form, dragging and releasing once the rubber band covers or touches both groups. Click <b>Lay Out Horizontally (in Splitter)</b> to regroup them with the splitter.</p>
<li><p>The last step is to lay out the form itself. Click the form and click <b>Lay Out Vertically</b>. The form should now be laid out correctly.</p>
<p align="center"><img align="middle" src="qd-chapdialogs-layoutwidgets-part3-stepfive-layoutform.png" width="597" height="503">
</p>
<blockquote><p align="center"><em>Lay Out the Form</em></p></blockquote>
</ol><p>There are two small deficiencies in the layout that we have achieved. Firstly the list box and buttons take up an equal width whereas we'd rather have the list box take up about three quarters of the width. Secondly the Length label, the check box and the buttons extend right up to the splitter. They would look more attractive if there was a little bit of space separating them from the splitter.</p>
<p>Expanding the list box half of the splitter would require us to add an <tt>init()</tt> function with the following code:<!-- index init() --></p>
<pre>
void MulticlipForm::init()
{
QValueList< int > sizes;
sizes << 250 << 40;
Splitter->setSizes( sizes );
}
</pre>
<p>We won't add this code now since we'll deal with the code when we come to implement the application's functionality later in the chapter.</p>
<!-- index Layouts!Spacing --><!-- index Object Explorer --><!-- index Selecting Widgets --><p>We will create some space around the splitter by changing the margins of the layout groups that it joins together. To click a layout either click a fraction above the layout's top red line or click the layout's name in the Object Explorer (the Widgets and Source window). (See <a href="designer-manual-14.html#3">Object Explorer Window</a> sidebar for an explanation of the Object Explorer window.) Click the layout that contains the list box, and change the <em>layoutMargin</em> property to 6, then press <b>Enter</b>. Click the layout that contains the buttons and other widgets, and change its <em>layoutMargin</em> to the same value in the same way.</p>
<blockquote>
<p align="center"><b> The Object Explorer</b></p>
<!-- index Object Explorer --><p>View the Object Explorer (Widgets and Source) window by clicking <b>Window|Views|Object Explorer</b>. The Object Explorer has two tabs, the Widgets tab which shows the object hierarchy, and the Source tab which shows the source code you have added to the form. Clicking the name of a widget in the Widget tab will select the widget and show its properties in the Property Editor. It is easy to see and select widgets in the Object Explorer which is especially useful for forms that have many widgets or which use layouts.</p>
<p align="center"><img align="middle" src="qd-chapdialogs-objectexplorer.png" width="314" height="519">
</p>
<blockquote><p align="center"><em>Object Explorer</em></p></blockquote>
<!-- index Code Editing --><!-- index Subclassing --><!-- index Forward declarations --><!-- index Includes --><!-- index Adding!Code --><!-- index Adding!Forward declarations --><!-- index Adding!Includes --><!-- index Adding!Class variables --><!-- index Class variables --><!-- index Deleting!Forward declarations --><!-- index Deleting!Includes --><!-- index Deleting!Class variables --><!-- index Forms!Forward declarations --><!-- index Forms!Class variables --><!-- index Forms!Code editing --><!-- index Forms!destructor --><!-- index Forms!constructor --><p>In the original version of <em>Qt Designer</em> if you wanted to provide code for a form you had to subclass the form and put your code in the subclass. This version fully supports the subclassing approach, but now provides an alternative: placing your code directly into forms. Writing code in <em>Qt Designer</em> is not quite the same as subclassing, for example you cannot get direct access to the form's constructor or destructor. If you need code to be executed by the constructor create a slot called<!-- index init() --> <tt>void init()</tt>; if it exists it will be called from the constructor. Similarly, if you need to be executed before destruction create a slot called<!-- index destroy() --> <tt>void destroy()</tt>. You can also add your own class variables which will be put in the generated constructor's code, and you can add forward declarations and any includes you require. To add a variable or declaration right click the appropriate item, e.g. Class Variables, then click New then enter your text, e.g. <tt>QString fileName</tt>. If one or more items exist right clicking will popup a two item menu with New and Delete as options. To edit code just click the name of a function to invoke the code editor. Code editing and creating slots are covered later.</p>
<!-- index Subclassing --><p>If you subclass the form you create your own<!-- index .cpp --> <tt>.cpp</tt> files which can contain your own constructor, destructor, functions, slots, declarations and variables as your requirements dictate. (See <a href="designer-manual-5.html#1">Subclassing</a> for more information.)</p>
</blockquote>
<!-- index Absolute positioning --><p>In the example we used <em>Qt Designer</em>'s layout tools to lay out our widgets. We will use the layout tools again in the examples presented in later chapters. If you want to use absolute positioning, i.e. to place and size your widgets with exact pixel sizes you can easily do so. To place a widget click it and drag it to the desired position. To resize it, click it, and drag one of the sizing handles (these are small blue squares) until the size is right. To stop the widget from resizing when the window is resized change the <em>hSizeType</em> and <em>vSizeType</em> (these are properties within the <em>sizePolicy</em> property), to Fixed.</p>
<h4><a name="5-3"></a>Previewing</h4>
<!-- index Previewing --><!-- index Preview Mode!Previewing --><!-- index Cross-platform previewing --><p>Although <em>Qt Designer</em> presents an accurate view of our forms we often want to see what a form looks like when it is run. It is also useful to be able to test out some aspects of the form, for example how the form scales when resized or how the splitters work in practice. If we're building cross-platform applications it is also useful to see how the form will look in different environments.</p>
<p>To see a preview either click <b>Preview|Preview Form</b> or press <b>Ctrl+T</b>. To leave preview mode close the window in the standard way for your environment. To view previews which show how the application will look on other platforms click the <b>Preview</b> menu and click one of the menu items that drop down.</p>
<p>Preview the multiclip form and try out the splitter and try resizing the form. In all probability you moved the splitter to the right to reduce the size of the buttons to make the form more attractive. The splitter seemed like a good idea but in practice we want the buttons and the other widgets on the right hand side to take up a fixed amount of space. <em>Qt Designer</em> makes changing layouts very easy, so we'll fix this straight away.</p>
<p align="center"><img align="middle" src="qd-chapdialog-previewing2.png" width="216" height="202">
</p>
<blockquote><p align="center"><em>Previewing Multiclip</em></p></blockquote>
<!-- index Layouts!Splitters --><!-- index Layouts!Rubber band --><p>Click the splitter then click the <b>Break Layout</b> toolbar button; the splitter will be removed. Now click the form itself, near the bottom, and drag the rubber band so that it touches both the list box and some of the buttons, then release. The list box group and the buttons group are selected; click the <b>Lay Out Horizontally</b> toolbar button. Click the form then click the <b>Lay Out Vertically</b> toolbar button. The form is now laid out as we require. Preview the form (press <b>Ctrl+T</b>) and try resizing it.</p>
<!-- index Undo and Redo!Layouts --><p>It would be useful if you experimented further with layouts since they work visually and are best learnt through practice. To remove a layout click the <b>Break Layout</b> toolbar button; to apply a layout select the relevant widgets or groups and click a layout button. You can preview as often as you like and you can always undo any changes that you make.</p>
<!-- index Layouts!Grid --><!-- index Layouts!Break layout --><p>Let's try an experiment, to see how the grid layout works. Click the list box, then press <b>Ctrl+B</b> (break layout). Click one of the buttons and press <b>Ctrl+B</b>. Click the form at the bottom and drag until all the widgets are touching or within the rubber band, (but excluding the Current Clipping label and the currentLineEdit line edit); then release. Press <b>Ctrl+G</b> (lay out in a grid). Click the form, then click <b>Ctrl+L</b> (lay out vertically). Our original design is back -- but this time using a grid layout.</p>
<h4><a name="5-4"></a>Changing the Tab Order</h4>
<!-- index Tab Order --><!-- index Tab Order Mode!Tab Order --><p>Keyboard users press the <b>Tab</b> key to move the focus from widget to widget as they use a form. The order in which the focus moves is called the tab order. Preview multiclip (press <b>Ctrl+T</b>) and try tabbing through the widgets. The tab order may not be what we want so we'll go into tab order mode and change it to the order we want.</p>
<!-- index Tab Order --><p>When you click the <b>Tab Order</b> toolbar button a number in a blue circle will appear next to every widget that can accept keyboard focus. The numbers represent each widget's tab order, starting from 1. You change the tab order by clicking the widgets in the order you want to be the new tab order. If you make a mistake and need to start again, double click the widget you want to be first, then click the other widgets in the required order as before. When you've finished press <b>Esc</b> to leave tab order mode. If you made a mistake or preferred the previous tab order you can undo your changes by leaving tab order and undoing (press <b>Esc</b> then <b>Ctrl+Z</b>).</p>
<!-- index Tab Order --><p>Click the <b>Tab Order</b> toolbar button, then click the current clipping <em>Line Edit</em> -- even if it is already number one in the tab order. Next click the previous clipping <em>ListBox</em>, then the auto add clippings <em>CheckBox</em>. Click each button in turn from top (add clipping) to bottom (quit). Press <b>Esc</b> to finish tab order mode, then preview the form and try tabbing through the widgets.</p>
<p>Note that you can stop clicking if the tab order numbers for all the widgets is correct; just press <b>Esc</b> to leave tab order mode.</p>
<p align="center"><img align="middle" src="qd-chapdialog-taborder.png" width="557" height="338">
</p>
<blockquote><p align="center"><em>Setting the Tab Order</em></p></blockquote>
<h3><a name="6"></a>Connecting Signals and Slots</h3>
<!-- index Signals and Slots --><!-- index Connecting!Signals and Slots --><p>Qt provides the signals and slots mechanism for communicating between widgets. Signals are emitted by widgets when particular events occur. We can connect signals to slots, either pre-defined slots or those we create ourselves. In older toolkits this communication would be achieved using callbacks. (For a full explanation of Qt's signals and slots mechanism see the on-line <a href="http://doc.trolltech.com/signalsandslots.html">Signals and Slots</a> documentation.)</p>
<h4><a name="6-1"></a>Connecting Predefined Signals and Slots</h4>
<!-- index Signals and Slots --><p>Some of an application's functionality can be obtained simply by connecting pre-defined signals and slots. In multiclip there is only one pre-defined connection that we can use, but in the richedit application that we'll build in <a href="designer-manual-3.html">Creating Main Windows with Actions, Toolbars and Menus</a> we will use many pre-defined signals and slots to get a lot of the functionality we need without having to write any code.</p>
<p>We will connect the Quit button's<!-- index clicked() --> <tt>clicked()</tt> signal to the form's<!-- index accept() --> <tt>accept()</tt> slot. The<!-- index accept() --> <tt>accept()</tt> slot notifies the dialog's caller that the dialog is no longer required; since our dialog is our main window this will close the application. Preview the form (press <b>Ctrl+T</b>); click the <b>Quit</b> button. The button works visually but does nothing. Press <b>Esc</b> or close the preview window to leave the preview.</p>
<!-- index Signals and Slots --><!-- index Slots!Signals and Slots --><p>Click the <b>Connect Signals/Slots</b> toolbar button. Click the Quit button, drag to the form and release. The <em>Edit Connections</em> dialog will pop up. The top left hand list box lists the Signals that the widget we've clicked can emit. At the top right is a combobox which lists the form and its widgets; any of these are candidates for receiving signals. Since we released on the form rather than a widget the slots combobox shows the form's name, 'MulticlipForm'. Beneath the combobox is a list box which shows the slots available in the form or widget shown in the combobox. Note that only those slots that can be connected to the highlighted signal are shown. If you clicked a different signal, for example the<!-- index --> toggled() <tt>toggled()</tt> signal, the list of available slots would change. Click the<!-- index clicked() \SignalOrSlot clicked() --> signal, then click the<!-- index accept() \SignalOrSlot accept() slot. --> The connection will be shown in the Connections list box. Click <b>OK</b>.</p>
<p align="center"><img align="middle" src="qd-chapdialog-signalsandslots.png" width="663" height="465">
</p>
<blockquote><p align="center"><em>Connecting the clicked() Signal to the accept() Slot</em></p></blockquote>
<p>We will make lots of signal/slot connections as we work through the examples, including connections to our own custom slots. Signal/slot connections (using pre-defined signals and slots) work in preview mode. Press <b>Ctrl+T</b> to preview the form; click the form's <b>Quit</b> button. The button now works correctly.</p>
<h4><a name="6-2"></a>Creating and Connecting Custom Slots</h4>
<!-- index Signals and Slots --><!-- index Subclassing --><p>In the first version of <em>Qt Designer</em> you could create the signatures of your custom slots and make the connections, but you could not implement your slots directly. Instead you had to subclass the form and code your slots in the subclass. The subclassing approach is still available, and makes sense in some situations. But now you can implement your slots directly in <em>Qt Designer</em>, so for many dialogs and windows subclassing is no longer necessary. (<em>Qt Designer</em> stores the slot implementations in a <tt>.ui.h</tt> file; see <a href="designer-manual-4.html#3-2">The ui.h extension approach</a> in <a href="designer-manual-4.html">The Designer Approach</a> chapter for more about these files.)</p>
<p>The multiclip application requires four slots, one for each button, but only three need to be custom slots since we connected a signal to a pre-defined slot to make the Quit button functional. We need a slot for the Add Clipping button; this will add the current clipping to the list box. The Copy Previous button requires a slot which will copy the selected list box item to the current clipping line edit (and to the clipboard). The Delete Clipping button needs a slot to delete the current clipping and the current list box item. We will also need to write some initialization code so that when the application starts it will put the current clipboard text (if any) into the line edit. The code is written directly in <em>Qt Designer</em>; the snippets are taken from the generated <tt>qt/tools/designer/examples/multiclip/multiclip.ui.h</tt> file.</p>
<!-- index Clipboard --><p>We'll need Qt's global clipboard object throughout the code which would mean calling<!-- index QApplication::clipboard() \Func --> QApplication::clipboard() or<!-- index qApp->clipboard() --> <tt>qApp->clipboard()</tt> in several places. Rather than perform all these function calls we'll keep a pointer to the clipboard in the form itself. Click the Source tab of the Object Explorer. (If the Object Explorer isn't visible click <b>Window|Views|Object Explorer</b>.) The Source tab shows us the functions in our form, the class variables, the forward declarations and the names of the include files we've asked for.</p>
<!-- index Forward declarations --><!-- index Includes --><!-- index Adding!Code --><!-- index Adding!Forward declarations --><!-- index Adding!Includes --><!-- index Adding!Class variables --><!-- index Deleting!Forward declarations --><!-- index Deleting!Includes --><!-- index Deleting!Class variables --><!-- index Class variables --><!-- index Forms!Forward declarations --><!-- index Forms!Class variables --><!-- index Forms!Code editing --><p>Right click the Class Variables item, then click <b>New</b> on the popup menu. (If there had been any existing variables the popup menu would also have a Delete option.) Type in 'QClipboard *cb;' and press <b>Enter</b>. We will create an<!-- index init() --> <tt>init()</tt> function in which we will assign this pointer to Qt's global clipboard object. We also need to declare the clipboard header file. Right click Includes (in Declaration), then click <b>New</b>. Type in '<qclipboard.h>' and press <b>Enter</b>. Since we need to refer to the global application object, <tt>qApp</tt>, we need to add another include declaration. Right click Includes (in Implementation), then click <b>New</b>. Type in '<qapplication.h>' and press <b>Enter</b>. The variable and declarations will be included in the code generated from <em>Qt Designer</em>'s<!-- index .ui --> <tt>.ui</tt> file.</p>
<p>We will invoke <em>Qt Designer</em>'s code editor and write the code.</p>
<!-- index Code Editing --><!-- index init() --><p>We'll create the <tt>init()</tt> function first. One way of invoking the code editor is to click the Source tab, then click the name of the function you want to work on. If you have no functions or wish to create a new function you need to use the Source tab. Right click the 'protected' item in the Source tab's Slots list, then left click <b>New</b> to launch the <em>Edit Slots</em> dialog. Change the slot's name from 'newSlot' to 'init()' then click <b>OK</b>. You can then click inside the editor window that appears to enter your code.</p>
<p>Note that you are not forced to use <em>Qt Designer</em>'s code editor; so long as you add, delete and rename your slots all within <em>Qt Designer</em>, you can edit the implementation code for your slots using a separate external editor and <em>Qt Designer</em> will preserve the code you write.</p>
<pre> void MulticlipForm::init()
{
lengthLCDNumber->setBackgroundColor( darkBlue );
currentLineEdit->setFocus();
cb = qApp-><a href="qapplication.html#clipboard">clipboard</a>();
<a href="qobject.html#connect">connect</a>( cb, SIGNAL( dataChanged() ), SLOT( dataChanged() ) );
if ( cb->supportsSelection() )
<a href="qobject.html#connect">connect</a>( cb, SIGNAL( selectionChanged() ), SLOT( selectionChanged() ) );
dataChanged();
}
</pre>
<p>The first couple of lines change the LCD number's background color and make the form start with the focus in the line edit. We take a pointer to Qt's global clipboard and keep it in our class variable, cb. We connect the clipboard's<!-- index dataChanged() \SignalOrSlot --> dataChanged() signal to a slot called<!-- index dataChanged() --> <tt>dataChanged()</tt>; we will create this slot ourselves shortly. If the clipboard supports selection (under the X Window system for example), we also connect the clipboard's<!-- index --> selectionChanged() <tt>selectionChanged()</tt> signal to a slot of the same name that we will create. Finally we call our<!-- index --> dataChanged() <tt>dataChanged()</tt> slot to populate the line edit with the clipboard's text (if any) when the application begins.</p>
<p>Since we've referred to the<!-- index dataChanged() --> <tt>dataChanged()</tt> and<!-- index selectionChanged() --> <tt>selectionChanged()</tt> slots we'll code them next, starting with<!-- index dataChanged() --> <tt>dataChanged()</tt>.</p>
<pre> void MulticlipForm::dataChanged()
{
<a href="qstring.html">QString</a> text;
<a href="#text-prop">text</a> = cb->text();
clippingChanged( <a href="#text-prop">text</a> );
if ( autoCheckBox->isChecked() )
addClipping();
}
</pre>
<p>We take a copy of the clipboard's text and call our own <tt>clippingChanged()</tt> slot with the text we've retrieved. If the user has checked the Auto Add Clippings checkbox we call our <tt>addClipping()</tt> slot to add the clipping to the list box.</p>
<!-- index Clipboard!Cross-platform --><!-- index Cross-platform!Clipboard --><!-- index Windows, Microsoft --><p>The<!-- index selectionChanged() \SignalOrSlot selectionChanged() slot is --> only applicable under the X Window System. Users of MS Windows can still include the code to ensure that the application works cross-platform.</p>
<pre> void MulticlipForm::selectionChanged()
{
cb->setSelectionMode( TRUE );
dataChanged();
cb->setSelectionMode( FALSE );
}
</pre>
<p>We tell the clipboard to use selection mode, we call our<!-- index --> dataChanged() <tt>dataChanged()</tt> slot to retrieve any selected text, then set the clipboard back to its default mode.</p>
<p>In the<!-- index dataChanged() \SignalOrSlot dataChanged() slot we called --> another custom slot, <tt>clippingChanged()</tt>.</p>
<pre> void MulticlipForm::clippingChanged( const <a href="qstring.html">QString</a> & clipping )
{
currentLineEdit->setText( clipping );
lengthLCDNumber->display( (int)clipping.<a href="qstring.html#length">length</a>() );
}
</pre>
<p>We set the line edit to whatever text is passed to the <tt>clippingChanged()</tt> slot and update the LCD number with the length of the new text.</p>
<!-- index Signals and Slots --><p>The next slot we'll code will perform the Add Clipping function. This slot is called by our code internally (see the<!-- index dataChanged() --> <tt>dataChanged()</tt> slot above), and when the user clicks the Add Clipping button. Since we want <em>Qt Designer</em> to be able to set up a connection to this slot instead of just typing it in the editor window we'll let <em>Qt Designer</em> create its skeleton for us. Click <b>Edit|Slots</b> to invoke the <em>Edit Slots</em> dialog. Click <b>New Slot</b> and replace the default name of 'new_slot()' with 'addClipping()'. There is no need to change the access specifier or return type. Now that we've created our slot we can implement it in the code editor where it has now appeared.</p>
<p>The Add Clipping button is used to copy the clipping from the Current Clipping line edit into the list box. We also update the length number.</p>
<pre> void MulticlipForm::addClipping()
{
<a href="qstring.html">QString</a> text = currentLineEdit->text();
if ( ! text.<a href="qstring.html#isEmpty">isEmpty</a>() ) {
lengthLCDNumber->display( (int)text.<a href="qstring.html#length">length</a>() );
int i = 0;
for ( ; i < (int)clippingsListBox->count(); i++ ) {
if ( clippingsListBox->text( i ) == text ) {
i = -1; // Do not add duplicates
break;
}
}
if ( i != -1 )
clippingsListBox->insertItem( text, 0 );
}
}
</pre>
<p>If there is some text we change the LCD's value to the length of the text. We then iterate over all the items in the list box to see if we have the same text already. If the text is not already in the list box we insert it.</p>
<!-- index Signals and Slots --><p>To make the Add Clipping button functional we need to connect the button's<!-- index clicked() \SignalOrSlot clicked() signal to our --> <tt>addClipping()</tt> slot. Click the <b>Connect Signals/Slots</b> toolbar button. Click the Add Clipping button, drag to the form and release. (Make sure you drag to the form rather than another widget -- the form will have a thin pink border during the drag. If you make a mistake simply change the name in the Slots combobox.) The <em>Edit Connections</em> dialog will appear. Click the<!-- index clicked() \SignalOrSlot clicked() signal and our --> <tt>addClipping()</tt> slot. Click <b>OK</b> to confirm the connection.</p>
<p>The Copy Previous button is used to copy the selected clipping from the list box into the line edit. The clipping is also placed on the clipboard. The procedure is the same as for the Add Clipping button: first we create the slot, then we implement it and finally we connect to it:</p>
<ol type=1><li><p>Create the slot.</p>
<!-- index Signals and Slots --><p>Click the <b>Edit|Slots</b> menu item to invoke the <em>Edit Slots</em> dialog. Click <b>New Slot</b> and replace the default 'new_slot()' name with 'copyPrevious()'. Click <b>OK</b>.</p>
<li><p>Implement the slot.</p>
<pre> void MulticlipForm::copyPrevious()
{
if ( clippingsListBox->currentItem() != -1 ) {
cb->setText( clippingsListBox->currentText() );
if ( cb->supportsSelection() ) {
cb->setSelectionMode( TRUE );
cb->setText( clippingsListBox->currentText() );
cb->setSelectionMode( FALSE );
}
}
}
</pre>
<p>The code for Copy Previous checks to see if there is a selected item in the list box. If there is the item is copied to the line edit. If we are using a system that supports selection we have to repeat the copy, this time with selection mode set. We don't explicitly update the clipboard. When the line edit's text is changed it emits a<!-- index dataChanged() --> <tt>dataChanged()</tt> signal which our<!-- index dataChanged() --> <tt>dataChanged()</tt> slot receives. Our<!-- index dataChanged() --> <tt>dataChanged()</tt> slot updates the clipboard.</p>
<li><!-- index Signals and Slots --><p>Connect to the slot.</p>
<p>Click the <b>Connect Signals/Slots</b> toolbar button. Click the Copy Previous button, drag to the form and release. The <em>Edit Connections</em> dialog will pop up. Click the<!-- index clicked() --> <tt>clicked()</tt> signal and the <tt>copyPrevious()</tt> slot. Click <b>OK</b>.</p>
</ol><p>We take the same approach to the Delete Clipping button.</p>
<ol type=1><li><!-- index Signals and Slots --><p>Click <b>Edit|Slots</b> to invoke the <em>Edit Slots</em> dialog. Click <b>New Slot</b> and replace the default name with 'deleteClipping()'. Click <b>OK</b>.</p>
<li><p>The Delete button must delete the current item in the list box and clear the line edit.</p>
<pre> void MulticlipForm::deleteClipping()
{
clippingChanged( "" );
clippingsListBox->removeItem( clippingsListBox->currentItem() );
}
</pre>
<p>We call our own <tt>clippingChanged()</tt> slot with an empty string and use the list box's <tt>removeItem()</tt> function to remove the current item.</p>
<li><!-- index Signals and Slots --><p>Connect the Delete Clipping button's<!-- index clicked() --> <tt>clicked()</tt> signal to our <tt>deleteClipping()</tt> slot. (Press <b>F3</b> -- which is the same as clicking the <b>Connect Signals/Slots</b> toolbar button. Click the Delete Clipping button and drag to the form; release. The <em>Edit Connections</em> dialog will appear. Click the<!-- index clicked() --> <tt>clicked()</tt> signal and the <tt>deleteClipping()</tt> slot. Click <b>OK</b>.)</p>
</ol><h3><a name="7"></a>Compiling and Building an Application</h3>
<!-- index Compiling and Building Applications --><!-- index Makefiles --><!-- index Adding!Files to Projects --><!-- index Projects!Adding Files --><p>So far we have written about 99% of a Qt application entirely in <em>Qt Designer</em>. To make the application compile and run we must create a<!-- index main.cpp --> <tt>main.cpp</tt> file from which we can call our form.</p>
<!-- index Adding!Source Files to Project Files --><p>The simplest way to create a new source file is by clicking <b>File|New</b> to invoke the 'New File' dialog, then click 'C++ Source' or 'C++ Header' as appropriate, then click <b>OK</b>. A new empty source window will appear. Click <b>File|Save</b> to invoke the <em>Save As</em> dialog, enter 'main.cpp', then click <b>Save</b>.</p>
<p>Enter the following code in the <tt>main.cpp</tt> C++ editor window:</p>
<pre> #include <<a href="qapplication-h.html">qapplication.h</a>>
#include "multiclip.h"
int main( int argc, char *argv[] )
{
<a href="qapplication.html">QApplication</a> app( argc, argv );
MulticlipForm clippingForm;
app.<a href="qapplication.html#setMainWidget">setMainWidget</a>( &clippingForm );
clippingForm.show();
return app.<a href="qapplication.html#exec">exec</a>();
}
</pre>
<p>The program creates a <b>QApplication</b> object and an instance of our MulticlipForm, sets the form to be the main widget and shows the form. The <tt>app.exec()</tt> call starts off the event loop.</p>
<p>Now start up a console (or xterm), change directory to the multiclip application and run <tt>qmake</tt>. A Makefile compatible with your system will be generated:</p>
<pre>
qmake -o Makefile multiclip.pro
</pre>
<p>You can now make the application, e.g. by running <tt>make</tt> or <tt>nmake</tt>. Try compililng and running multiclip. There are many improvement you could make and experimenting with both the layout and the code will help you learn more about Qt and <em>Qt Designer</em>.</p>
<p>This chapter has introduced you to creating cross-platform applications with <em>Qt Designer</em>. We've created a form, populated it with widgets and laid the widgets out neatly and scalably. We've used Qt's signals and slots mechanism to make the application functional and generated the Makefile. These techniques for adding widgets to a form and laying them out with the layout tools; and for creating, coding and connecting slots will be used time and again as you create applications with <em>Qt Designer</em>. The following chapters will present further examples and explore more techniques for using <em>Qt Designer</em>.</p>
<!-- eof -->
<p align="right">[<a href="designer-manual-1.html">Prev: Preface</a>] [<a href="designer-manual.html">Home</a>] [<a href="designer-manual-3.html">Next: Creating Main Windows with Actions, Toolbars and Menus</a>]</p>
<p><address><hr><div align=center>
<table width=100% cellspacing=0 border=0><tr>
<td>Copyright © 2001
<a href="http://www.trolltech.com">Trolltech</a><td><a href="http://www.trolltech.com/trademarks.html">Trademarks</a>
<td align=right><div align=right>Qt version 3.0.2</div>
</table></div></address></body>
</html>
distrib
>
Mandriva
>
8.2
>
i586
>
media
>
contrib
>
by-pkgid
>
112b0974ad288f6cd55bf971ee6026a9
>
files
>
661
