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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
|
<!--startcut ==============================================-->
<!-- *** BEGIN HTML header *** -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML><HEAD>
<title>GUI Programming in C++ using the Qt Library, part 1 LG #78</title>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#0000AF"
ALINK="#FF0000">
<!-- *** END HTML header *** -->
<CENTER>
<A HREF="http://www.linuxgazette.com/">
<IMG ALT="LINUX GAZETTE" SRC="../gx/lglogo.png"
WIDTH="600" HEIGHT="124" border="0"></A>
<BR>
<!-- *** BEGIN navbar *** -->
<IMG ALT="" SRC="../gx/navbar/left.jpg" WIDTH="14" HEIGHT="45" BORDER="0" ALIGN="bottom"><A HREF="qubism.html"><IMG ALT="[ Prev ]" SRC="../gx/navbar/prev.jpg" WIDTH="16" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="index.html"><IMG ALT="[ Table of Contents ]" SRC="../gx/navbar/toc.jpg" WIDTH="220" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../index.html"><IMG ALT="[ Front Page ]" SRC="../gx/navbar/frontpage.jpg" WIDTH="137" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="http://www.linuxgazette.com/cgi-bin/talkback/all.py?site=LG&article=http://www.linuxgazette.com/issue78/taneja.html"><IMG ALT="[ Talkback ]" SRC="../gx/navbar/talkback.jpg" WIDTH="121" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../lg_faq.html"><IMG ALT="[ FAQ ]" SRC="./../gx/navbar/faq.jpg"WIDTH="62" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="tougher.html"><IMG ALT="[ Next ]" SRC="../gx/navbar/next.jpg" WIDTH="15" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><IMG ALT="" SRC="../gx/navbar/right.jpg" WIDTH="15" HEIGHT="45" ALIGN="bottom">
<!-- *** END navbar *** -->
<P>
</CENTER>
<!--endcut ============================================================-->
<H4 ALIGN="center">
"Linux Gazette...<I>making Linux just a little more fun!</I>"
</H4>
<P> <HR> <P>
<!--===================================================================-->
<center>
<H1><font color="maroon">GUI Programming in C++ using the Qt Library, part 1</font></H1>
<H4>By <a href="mailto:tech@gauravtaneja.com">Gaurav Taneja</a></H4>
</center>
<P> <HR> <P>
<!-- END header -->
<P>In the vast world of GUI Development Libraries there stands apart
a Library, known as 'Qt' for C++ developed by Trolltech AS. 'Qt' was
commercially introduced in 1996 and since then many of the
sophisticated user interfaces have been developed using this Library
for varied applications.</P>
<P>Qt is cross-platform as it supports <B>MS/Windows,Unix/X11</B>
(Linux, Sun Solaris, HP-UX, Digital Unix, IBM AIX, SGI IRIX and many
other flavors),<B>Macintosh</B> ( Mac OS X ) and <B>Embedded</B>
platforms. Apart from this 'Qt' is object oriented, component based
and has a rich variety of widgets available at the disposal of a
programmer to choose from. 'Qt' is available in its commercial
versions as 'Qt Professional' and 'Qt Enterprise Editions'. The free
Edition is the non-commercial version of Qt and is freely available
for download <SPAN STYLE="text-decoration: none">(</SPAN><A HREF="http://www.trolltech.com/">www.trolltech.com</A><A HREF="http://www.trolltech.com).'Qt/"><SPAN STYLE="text-decoration: none">).</SPAN></A></P>
<H2>Getting Started</H2>
<P STYLE="margin-bottom: 0in">First of all you need to download the
library, i assume that you have downloaded the Qt/X11 version for
Linux as the examples will be taken for the same.</P>
<P STYLE="margin-bottom: 0in">You might require the superuser
privlileges to install, so make sure you are 'root'.</P>
<P STYLE="margin-bottom: 0in">Let's untar it into /usr/local
directory :</P>
<P STYLE="margin-bottom: 0in">[root@Linux local]# tar -zxvf
qt-x11-free-3.0.1</P>
<P STYLE="margin-bottom: 0in">[root@Linux local]# cd
qt-x11-free-3.0.1</P>
<P STYLE="margin-bottom: 0in">Next you will need to compile and
install the library with the options you require to use.'Qt' Library
can be compiled with custom options suiting your needs.We will
compile it so that we get gif reading, threading , STL, remote
control, Xinerama,XftFreeType (anti-aliased font) and X Session
Management support apart from the basic features.</P>
<P STYLE="margin-bottom: 0in">Before we proceed further, remember to
set some environment variables that point to the correct location as
follows:</P>
<P STYLE="margin-bottom: 0in">QTDIR=/usr/local/qt-x11-free-3.0.1<BR>PATH=$QTDIR/bin:$PATH
<BR>MANPATH=$QTDIR/man:$MANPATH
<BR>LD_LIBRARY_PATH=$QTDIR/lib:$LD_LIBRARY_PATH</P>
<P STYLE="margin-bottom: 0in">export QTDIR PATH MANPATH
LD_LIBRARY_PATH</P>
<P STYLE="margin-bottom: 0in">You can include this information in
your .profile in your home directory.</P>
<P STYLE="margin-bottom: 0in">[root@Linux qt-x11-free-3.0.1]#
./configure -qt-gif -thread -stl -remote -xinerama -xft -sm</P>
<P STYLE="margin-bottom: 0in">[root@Linux qt-x11-free-3.0.1]# make
install</P>
<P STYLE="margin-bottom: 0in">If all goes well, you will have the
'Qt' library installed on your system.</P>
<P STYLE="margin-bottom: 0in"><BR>
</P>
<P STYLE="margin-bottom: 0in"><BR>
</P>
<H2>Your First Steps With 'Qt'
</H2>
<P STYLE="margin-bottom: 0in">In order to start writing programs in
C++ using the 'Qt' library you will need to understand some important
tools and utilities available with 'Qt' Library to ease you job.</P>
<P STYLE="margin-bottom: 0in"><BR>
</P>
<H3>Qmake</H3>
<P>Qmake let's you generate makefiles with the information based on a
'.pro' file.</P>
<P>A simple project file looks something like this:</P>
<PRE> SOURCES = hello.cpp
HEADERS = hello.h
CONFIG += qt warn_on release
TARGET = hello</PRE><P>
Here, 'SOURCES' can be used to define all the implementation source
for the application, if you have more than one source file you can
define them like this:</P>
<P>SOURCES = hello.cpp newone.cpp</P>
<PRE>or alternatively by:
SOURCES += hello.cpp
SOURCES += newone.cpp</PRE><P>
Similarly 'HEADERS' let's you specify the header files belonging to
your source.The 'CONFIG' section facilitates to give qmake info about
the application configuration.This Project file's name should be the
same as the application's executable. Which in our case is
'hello.pro'.</P>
<P>The Makefile can be generated by issuing the command:</P>
<PRE STYLE="margin-bottom: 0.2in">[root@Linux mydirectory]# qmake -o Makefile hello.pro </PRE><H3>
Qt <EM><SPAN STYLE="font-style: normal">Designer</SPAN></EM><SPAN STYLE="font-style: normal">
</SPAN>
</H3>
<P>Qt Designer is a tool that let's you visually design and code user
interfaces using the 'Qt' Library. The WYSIWYG interface comes in
very handy for minutely tweaking the user interface and experimenting
with various widgets.The Designer is capable of generating the entire
source for the GUI at any time for you to enhance further. You will
be reading more about the 'Qt Designer' in the articles that will
follow.</P>
<P>
</P>
<H2>Hello World!</H2>
<P>Let's begin by understanding a basic 'Hello World' Program.Use any
source editor of your choice to write the following code:</P>
<P>#include <qapplication.h> <BR>#include <qpushbutton.h></P>
<P>int main( int argc, char **argv )<BR>{<BR><BR>QApplication a(
argc, argv );<BR>QPushButton hello( "Hello world!", 0
);<BR>hello.resize( 100, 30 );<BR>a.setMainWidget( &hello
);<BR>hello.show();<BR>return a.exec();<BR><BR>}</P>
<P>Save this code as a plain text file('hello.cpp'). Now let's
compile this code by making a project file (.pro) as follows:</P>
<P>TEMPLATE = app<BR>CONFIG += qt warn_on release<BR>HEADERS
=<BR>SOURCES = hello.cpp<BR>TARGET = hello</P>
<P>Let's save this file as 'hello.pro' in the same directory as that
of our source file and continue with the generation of the Makefile.</P>
<PRE STYLE="margin-bottom: 0.2in; font-weight: medium">[root@Linux mydirectory]# qmake -o Makefile hello.pro</PRE><P STYLE="font-weight: medium">
Compile it using 'make'</P>
<PRE STYLE="font-weight: medium">[root@Linux mydirectory]# make
You are now ready to test your first 'Qt' Wonder. Provided you are in 'X', you can launch the<br>program executable.
[root@Linux mydirectory]# ./hello
You should see something like this:
<IMG SRC="misc/taneja/snapshot.png" ALT="Snapshot" ALIGN=LEFT WIDTH=113 HEIGHT=64 BORDER=0>
Let's understand the individual chunks of the code we've written.
The First two lines in our code include the QApplication and QPushButton class definitions.
Always remember that there has to be just one QApplication object in your entire Application.
As with other c++ programs, the main() function is the entry point to your program and
<TT>argc</TT> is the number of command-line arguments while <TT>argv</TT> is the array of command-line arguments.
Next you pass these arguments received by Qt as under:
QApplication a(argc, argv)
Next we create a QPushButton object and initialize it's constructor with two arguments, the
label of the button and it's parent window (0 i.e., in it's own window in this case).
We resize our button with the following code:
hello.resize(100,30);
Qt Applications can optionally have a main widget associated with it.On closure of the main
widget the Application terminates.
We set our main widget as:
a.setMainWidget( &hello );
Next, we set our main widget to be visible. You have to always call show() in order to make
your widget visible.
<SPAN STYLE="font-weight: medium">hello.show();</SPAN>
Next we will finally pass the control to Qt. An important point to be noted here is that exec()
keeps running till the application is alive and returns when the application exits.
</PRE>
<!-- *** BEGIN bio *** -->
<SPACER TYPE="vertical" SIZE="30">
<P>
<H4><IMG ALIGN=BOTTOM ALT="" SRC="../gx/note.gif">Gaurav Taneja</H4>
<EM> I work as a Technical Consultant in New Delhi,India in Linux/Java/XML/C++.
I'm Actively involved in open-source projects, with some hosted on
SourceForge. My favorite leisure activities include long drives, tennis,
watching movies and partying. I also run my own software consulting company
named <A HREF="http://www.broadstrike.com">BroadStrike Technologies</A>.</EM>
<!-- *** END bio *** -->
<!-- *** BEGIN copyright *** -->
<P> <hr> <!-- P -->
<H5 ALIGN=center>
Copyright © 2002, Gaurav Taneja.<BR>
Copying license <A HREF="../copying.html">http://www.linuxgazette.com/copying.html</A><BR>
Published in Issue 78 of <i>Linux Gazette</i>, May 2002</H5>
<!-- *** END copyright *** -->
<!--startcut ==========================================================-->
<HR><P>
<CENTER>
<!-- *** BEGIN navbar *** -->
<IMG ALT="" SRC="../gx/navbar/left.jpg" WIDTH="14" HEIGHT="45" BORDER="0" ALIGN="bottom"><A HREF="qubism.html"><IMG ALT="[ Prev ]" SRC="../gx/navbar/prev.jpg" WIDTH="16" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="index.html"><IMG ALT="[ Table of Contents ]" SRC="../gx/navbar/toc.jpg" WIDTH="220" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../index.html"><IMG ALT="[ Front Page ]" SRC="../gx/navbar/frontpage.jpg" WIDTH="137" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="http://www.linuxgazette.com/cgi-bin/talkback/all.py?site=LG&article=http://www.linuxgazette.com/issue78/taneja.html"><IMG ALT="[ Talkback ]" SRC="../gx/navbar/talkback.jpg" WIDTH="121" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><A HREF="../lg_faq.html"><IMG ALT="[ FAQ ]" SRC="./../gx/navbar/faq.jpg"WIDTH="62" HEIGHT="45" BORDER="0" ALIGN="bottom"></A><A HREF="tougher.html"><IMG ALT="[ Next ]" SRC="../gx/navbar/next.jpg" WIDTH="15" HEIGHT="45" BORDER="0" ALIGN="bottom" ></A><IMG ALT="" SRC="../gx/navbar/right.jpg" WIDTH="15" HEIGHT="45" ALIGN="bottom">
<!-- *** END navbar *** -->
</CENTER>
</BODY></HTML>
<!--endcut ============================================================-->
|
