1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- /home/espenr/tmp/qt-3.3.8-espenr-2499/qt-x11-free-3.3.8/tools/designer/book/chap-philosophy.leaf:3 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title> The Designer Approach</title>
<style type="text/css"><!--
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-4.html">Prev: Creating Dialogs</a>] [<a href="designer-manual.html">Home</a>] [<a href="designer-manual-6.html">Next: Subclassing and Dynamic Dialogs</a>]</p>
<h2 align="center"> The Designer Approach</h2>
<a name="the-designer-approach"></a><h3><a name="1"></a>Introduction</h3>
<p>In Qt 2.x, <em>Qt Designer</em> was a visual form designer for editing files in the <tt>.ui</tt> file format. <em>Qt Designer</em>'s primary goal was to turn the most tedious part of GUI programming -- dialog design -- into a pleasant experience. From an architectural point of view, <em>Qt Designer</em> in 2.x is a fairly simple program. It reads and writes <tt>.ui</tt> files. Each <tt>.ui</tt> file contains an XML description of a single dialog form. A second utility -- the user interface compiler <tt>uic</tt> -- is used during the build process of an application to generate C++ code from those XML descriptions.</p>
<p>For Qt 3.0 our ambitions for <em>Qt Designer</em> have grown beyond single dialog editing. In addition to many new design features like the ability to creating main windows and actions, the new version introduces:</p>
<ul><li><p><em>project management</em> for the user interface part of your application;</p>
<li><p><em>code in forms</em> <em>Qt Designer</em> provides a code editor so that you can code your slots directly; the code is stored in <tt>.ui.h</tt> files and eliminates the need for sub-classing (although you can still subclass if you prefer);</p>
<li><p><em>dynamic form loading</em> allows you to load <tt>.ui</tt> files at runtime which provides great scope for design customization separate from the underlying code.</p>
</ul><p>The purpose of this chapter is to explain the motivation for making these changes, describe the new concepts involved and show how these features work internally.</p>
<p><em>Qt Designer</em> is and remains a visual design tool: it is not a complete integrated development environment. Our policy is to make GUI development as easy and powerful as possible without locking our users into any particular tool: <em>Qt Designer</em> makes it easy to create and modify GUI designs, but you can still achieve the same results directly in code using a plain text editor if you prefer.</p>
<p>To make working more convenient, <em>Qt Designer</em> now includes a C++ editor (as a plugin). If you want to create or edit a form, use <em>Qt Designer</em>. If you want edit code for that form, you can use the C++ editor in <em>Qt Designer</em> as well. This built-in editor has certain benefits stemming from its tight integration with the visual form design process that we will explain later. However, if you prefer using the editor you're used to, <tt>vim</tt>, <tt>emacs</tt>, <tt>notepad</tt>, Microsoft Visual Studio, etc. you can still do so.</p>
<h3><a name="2"></a>Project management</h3>
<p>Reading and writing single, non-connected <tt>.ui</tt> files is conceptually simple and worked fairly well in Qt 2.x. However, it lacked certain features that made us introduce project management for the GUI part of an application in <em>Qt Designer</em>. The main benefits of project management are:</p>
<ul><li><p>Grouping forms that belong together.</p>
<li><p>Sharing images between different forms.</p>
<li><p>Sharing database information between different forms.</p>
</ul><p>The following sections explain these benefits in more detail, and why project management is required to achieve them.</p>
<h4><a name="2-1"></a>Grouping forms</h4>
<p>Grouping forms means that <em>Qt Designer</em> maintains a list of the <tt>.ui</tt> files that belong to the same project. This makes it easy to switch between forms with a single mouse click.</p>
<h4><a name="2-2"></a>Sharing images in a image collection</h4>
<p>In Qt 2.x's <em>Qt Designer</em> each form included the images it required and no images were shared. This led to duplication when several forms needed to use the same images. Furthermore the images were stored in the XML <tt>.ui</tt> files which made them large.</p>
<p>As a workaround, we introduced a pixmap-loading function that you could define in <em>Qt Designer</em>. It then was your responsibility to provide the implementation of this function in your application code. The big disadvantage of this approach was that you couldn't see the images during the design process in <em>Qt Designer</em>. This not only makes designing a form less visually interesting, but also has a noticeable impact on geometry management.</p>
<p>In the Qt 3.0 version of <em>Qt Designer</em> we've introduced the concept of a project image collection. If you use a project you can add images to the project's image collection, and these images can be shared and used by any of the forms you include in the project. The images are stored as PNGs (portable network graphics) in a subdirectory, <tt>images/</tt>, inside the project's directory. Whenever you modify the image collection, <em>Qt Designer</em> creates a source file which contains both the image data in binary format and a function to instantiate the images. The images are accessible by all forms in the project and the data is shared.</p>
<p>A further benefit of using an image collection is that the images are added to the default QMimeSourceFactory. This way they are accessible from rich-text labels, What's This? context help and even tooltips through standard HTML image tags. The <em>source</em> argument of the image tag is simply the image's name in the image collection. This also works during the design process in <em>Qt Designer</em>.</p>
<h4><a name="2-3"></a>Sharing database settings</h4>
<p>Qt 3.0 introduces a brand new database module, the Qt SQL module. <em>Qt Designer</em> is fully integrated with the SQL module and can show live data from the databases that you connect to.</p>
<p>When you've opened or created a project you can set up its database connections using the <em>Edit Database Connections</em> dialog (invoked by the <b>Project|Database Connections</b> menu option). The connections you make are stored in a <tt>.db</tt> file. When you reload a project you can reconnect by going to the <em>Edit Database Connections</em> dialog, clicking a connection in the list and clicking the <b>Connect</b> button.</p>
<p>In most non-trivial database applications you will want to access the database from more than one form. This is why the <tt>.db</tt> file is part of a project, not just part of a single form.</p>
<h4><a name="2-4"></a>.pro files</h4>
<p><em>Qt Designer</em> needs to store information on projects, for example, the list of forms, the image collection and information about available databases and how to access them. The majority of Qt users already use a project file format to create multiplatform makefiles: <tt>tmake</tt> (and with Qt 3.0 <tt>qmake</tt>) project <tt>.pro</tt> files. These files already contain the list of forms, <tt>.ui</tt> files, used in the project for <tt>uic</tt>.</p>
<p>We've extended the sections in the <tt>.pro</tt> file to include the extra information that <em>Qt Designer</em> needs to manage projects. For example, when you add a form to your project in <em>Qt Designer</em>, it is automatically added to the FORMS section of the project file, and thus <tt>qmake</tt> will generate the required build rules without any further work. Similarly, the images are added to the IMAGES section and thus gets automatically compiled into your executable.</p>
<p>We don't force you to use <tt>qmake</tt>; if you prefer another build system, for example automake/autoconf or jam, you can still continue to use it. Look upon the <tt>.pro</tt> file as a file that describes the GUI part of your application. All you need to do -- as previously -- is add the <tt>.ui</tt> files and the images collection to your own Makefiles.</p>
<h3><a name="3"></a>Extending the functionality of a form</h3>
<p>First let us look at a small figure that shows the relationship between <tt>.ui</tt> files, generated code and application code:</p>
<p align="center"><img align="middle" src="designer1.jpg">
</p>
<p><em>Qt Designer</em> reads and writes <tt>.ui</tt> files, e.g. <tt>form.ui</tt>. The user interface compiler, <tt>uic</tt>, creates both a header file, e.g. <tt>form.h</tt>, and an implementation file, e.g. <tt>form.cpp</tt>, from the <tt>.ui</tt> file. The application code in <tt>main.cpp</tt> <tt>#include</tt>s <tt>form.h</tt>. Typically <tt>main.cpp</tt> is used to instantiate the QApplication object and start off the event loop.</p>
<p>While this approach is simple, it isn't sufficient for more complex dialogs. Complex dialogs tend to have quite a lot of logic attached to the form's widgets, more logic than can usually be expressed with predefined signals and slots. One way of handling this extra logic is to write a controller class in the application code that adds functionality to the form. This is possible because <tt>uic</tt> generated classes expose a form's controls and their signals to the public space. The big disadvantage of this method is that it's not exactly Qt-style. If you were not using <em>Qt Designer</em>, you would almost always add the logic to the form itself, where it belongs.</p>
<p>This is why the capability of adding custom slots and member variables to a form was added to <em>Qt Designer</em> early on. The big additional benefit with this approach is that you can use <em>Qt Designer</em> to connect signals to those custom slots, in the same elegant graphical way that is used to connect signals to predefined slots. The <tt>uic</tt> then adds an empty stub for each custom slot to the generated <tt>form.cpp</tt> implementation file.</p>
<p>The big question now is how to add custom implementation code to those custom slots. Adding code to the generated <tt>form.cpp</tt> is not an option, as this file gets recreated by the <tt>uic</tt> whenever the form changes -- and we don't want a combination of generated and handwritten code. There are two possible solutions, which we'll cover next.</p>
<h4><a name="3-1"></a>The subclassing approach</h4>
<p>A very clean way to implement custom slots for generated forms is via C++ inheritance as shown in the next figure:</p>
<p align="center"><img align="middle" src="designer2.jpg">
</p>
<p>Here the user wrote an additional class <b>FormImpl</b>, which is split into the header file <tt>formimpl.h</tt> and the implementation file <tt>formimpl.cpp</tt>. The header file includes the <tt>uic</tt> generated <tt>form.h</tt> and reimplements all the custom slots. This is possible because <tt>uic</tt> generated custom slots are virtual. In addition to implementing custom slots, this approach gives the user a way to do extra initialization work in the constructor of the subclass, and extra cleanups in the destructor.</p>
<p>Because of these benefits and its flexibility, this approach became the primary way of using <em>Qt Designer</em> in Qt 2.x.</p>
<p><b>Note:</b> To keep the namespace clean, most users did not follow the Form and FormImpl naming scheme shown in the figure, but instead named their <em>Qt Designer</em> forms FormBase and their subclasses Form. This made a lot of sense, because they always subclassed and were using those subclasses in application code.</p>
<h4><a name="3-2"></a>The ui.h extension approach</h4>
<p>Despite its flexibility and cleanness, the subclassing approach has some disadvantages:</p>
<ul><li><p>Subclassing is not natural and easy for everybody. Newcomers to object-oriented techniques may feel uneasy about being <em>forced</em> to subclass for such a simple and natural thing like the implementation of a custom slot.</p>
<li><p>Inheriting generated classes is an additional possible source of programming mistakes, especially if the number of reimplemented functions is high and the signatures change often during the design process. To make the development process smoother, <tt>uic</tt> generates empty stubs for custom slots rather than pure virtual functions. While this approach keeps the code compiling and running, programmers can find themselves in a situation where they miss a runtime warning message and lose time before they find a small spelling error in their subclass.</p>
<li><p>In larger projects with hundreds of forms, the additional subclasses can make a noticeable difference in terms of compilation speed and code size.</p>
</ul><p>There may be more disadvantages, but these were reason enough for us to investigate alternative solutions. For Qt 3.0, we came up with a new concept, the <em>ui.h extension</em>.</p>
<p>This is how it works:</p>
<p align="center"><img align="middle" src="designer3.jpg">
</p>
<p>In addition to the <tt>.ui</tt> file, <tt>form.ui</tt>, <em>Qt Designer</em> reads and writes another associated file <tt>form.ui.h</tt>. This <tt>.ui.h</tt> file is an <em>ordinary C++ source file</em> that contains <em>implementations</em> of custom slots. The file gets included from the generated form implementation file <tt>form.cpp</tt> and thus can be totally ignored by other user code. The reason we use a <tt>.h</tt> extension for the <tt>.ui.h</tt> file even though it contains C++ code is because it is always <em>included</em>, and because it is easier to integrate into the build process with a <tt>.h</tt> extension.</p>
<p>The <tt>form.ui.h</tt> file has a special position among all other files. It is a <em>shared</em> source file that gets written and read by both the user and <em>Qt Designer</em>. As such it is an ordinary revision controlled source file and not generated by <tt>uic</tt>. <em>Qt Designer</em>'s responsibility is to keep the file in sync with the custom slot definitions of the associated form:</p>
<ol type=1><li><p>Whenever the users adds a new slots to the form, <em>Qt Designer</em> adds a stub to the <tt>.ui.h</tt> file.</p>
<li><p>Whenever the user changes a custom slot's signature, <em>Qt Designer</em> updates the corresponding implementation.</p>
<li><p>Whenever the user removes a custom slot, <em>Qt Designer</em> removes it from the <tt>.ui.h</tt> file.</p>
</ol><p>This way integrity is guaranteed, there is no more need for subclassing and no more danger of forgotten or misspelled slots in subclasses.</p>
<p>You can edit <tt>.ui.h</tt> files either directly in <em>Qt Designer</em> with the built-in C++ editor plugin, or with whatever editor you prefer. You should only put slot implementations in the <tt>.ui.h</tt> file and you should <em>always</em> add, delete or rename slots <em>within</em> <em>Qt Designer</em>. You can edit the implementations of the slots either within <em>Qt Designer</em> or using your own editor; if you use your own editor <em>Qt Designer</em> will keep your changes.</p>
<h5><a name="3-2-1"></a>Construction and destruction</h5>
<p>The <tt>ui.h</tt> extension approach has one disadvantage compared to subclassing. The <tt>ui.h</tt> file only contains custom slot implementations, but the objects are still entirely constructed and destructed inside the generated <tt>form.cpp</tt> code. This leaves the user without the possibility of doing further form initializations or cleanups that you normally would do within the constructor and destructor functions of a C++ class.</p>
<p>To work around this limitation, we created the init/destroy convention. If you add a slot <tt>Form::init()</tt> to your form, this slot will be called automatically at the end of the generated form constructor. Similarly, if you add a slot <tt>Form::destroy()</tt> to your form, the slot will automatically be invoked by the destructor before any form controls get deleted. (These slots should return void.) If you prefer to use your own editor you must still create these functions in <em>Qt Designer</em>; once created you can then write your implementation code either using <em>Qt Designer</em>'s C++ editor plugin or using your own editor.</p>
<h3><a name="4"></a>Loading forms dynamically</h3>
<p>We extracted the part of <em>Qt Designer</em> that is responsible for loading and previewing a form into a library of its own, <tt>libqui</tt>. A new class <a href="qwidgetfactory.html">QWidgetFactory</a> makes it possible to load <tt>.ui</tt> files at runtime and instantiate forms from them.</p>
<p>This dynamic approach keeps the GUI design and the code separate and is useful in environments where the GUI may have to change more often than the underlying application logic. Ultimately, you can provide users of your application the ability to modify the graphical user interface without the need for a complete C++ development environment.</p>
<p>Since the .ui file is not compiled it cannot include any C++ code, (e.g. custom slot implementations). We provide a way of adding those implementations via a controlling QObject subclass that you pass as receiver to the widget factory.</p>
<p>This concept and its usage is explained in detail in the <a href="designer-manual-6.html">Subclassing and Dynamic Dialogs</a> chapter.</p>
<!-- eof -->
<p align="right">[<a href="designer-manual-4.html">Prev: Creating Dialogs</a>] [<a href="designer-manual.html">Home</a>] [<a href="designer-manual-6.html">Next: Subclassing and Dynamic Dialogs</a>]</p>
<p><address><hr><div align=center>
<table width=100% cellspacing=0 border=0><tr>
<td>Copyright © 2007
<a href="troll.html">Trolltech</a><td align=center><a href="trademarks.html">Trademarks</a>
<td align=right><div align=right>Qt 3.3.8</div>
</table></div></address></body>
</html>
|
