239 lines
11 KiB
HTML
239 lines
11 KiB
HTML
<!--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 ============================================================-->
|