old-www/LDP/LG/issue78/taneja.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>&nbsp;
</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 &lt;qapplication.h&gt; <BR>#include &lt;qpushbutton.h&gt;</P>
<P>int main( int argc, char **argv )<BR>{<BR><BR>QApplication a(
argc, argv );<BR>QPushButton hello( &quot;Hello world!&quot;, 0
);<BR>hello.resize( 100, 30 );<BR>a.setMainWidget( &amp;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( &amp;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 &copy; 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 ============================================================-->