| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| <html> |
| <head> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| <meta name="author" content="alexey.vladykin@sun.com"> |
| <meta name="description" content="A short guide to working with Qt applications in NetBeans IDE."> |
| <meta name="keywords" content="NetBeans, IDE, Qt application, |
| tutorial, guide, user, documentation, open source, C, C++, make, dbx, gdb"> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| <title>Working with Qt Applications - NetBeans IDE Tutorial</title> |
| </head> |
| |
| <body style="padding: 2px;"> |
| <h1>Working with Qt Applications - NetBeans IDE Tutorial</h1> |
| <div class="articledate" style="margin-left: 0px;font-style:italic;"> |
| <p><em>Contributed by <a |
| href="mailto:Alexey.Vladykin@oracle.com"><i>Alexey Vladykin</i></a> and maintained by |
| <a href="mailto:susan.morgan@oracle.com"><i>Susan Morgan</i></a><br> |
| June 2010</em> [Revision number: V6.9-2]</div> |
| <p>This tutorial guides you through creating a Qt application project in NetBeans IDE. The Qt toolkit |
| is an open source cross-platform application development framework.</p> |
| |
| <p><b>Contents</b></p> |
| <img src="../../../images_www/articles/70/netbeans-stamp-70-71-72.gif" class="stamp" |
| alt="Content on this page applies to NetBeans IDE 6.9, 7.0, 7.1 and 7.2" title="Content on this page applies to the NetBeans IDE 6.9, 7.0, 7.1 and 7.2"> |
| |
| <ul class="toc"> |
| <li><a href="#requirements">Requirements</a></li> |
| <li><a href="#intro">Introduction</a></li> |
| <li><a href="#qtinstall">Installing the Qt Software</a></li> |
| <li><a href="#creating">Creating a Simple Qt Application </a></li> |
| <li><a href="#conclusion">Conclusion</a></li> |
| |
| </ul> |
| |
| <h2><A NAME="requirements"></a>Requirements</h2> |
| |
| <p><b>To follow this tutorial, you need the following software.</b></p> |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Software</th> |
| <th class="tblheader" scope="col">Version Required</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE</a> (including C/C++ support)</td> |
| <td class="tbltd1">6.9, 7.0, 7.1 or 7.2 with NetBeans C/C++ plugin</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit</a> (JDK)</td> |
| <td class="tbltd1">Version 6 or 7</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/community/releases/69/cpp-setup-instructions.html">GNU C/C++ compilers (GCC)</a></td> |
| <td class="tbltd1">Versions supported by NetBeans IDE. |
| <br>On Windows, MinGW is required |
| and is bundled with the Qt SDK. </td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="#qtinstall">Qt Libraries</a></td> |
| <td class="tbltd1">Version 4.6.2</td> |
| </tr><tr><td> |
| </tr> |
| </tbody> |
| </table> |
| <br> |
| <p>See the <a href="../../../community/releases/72/install.html">NetBeans IDE |
| 7.2 Installation |
| Instructions</a> for information on downloading and installing the required NetBeans software. |
| </p> |
| |
| |
| <h2><a name="intro"></a>Introduction</h2> |
| |
| <P>The NetBeans IDE supports creating, building, running, and debugging of Qt projects |
| without leaving the IDE. Qt tools such as qmake, moc, and uic are launched automatically as needed. |
| You don't need to think (and probably even know) about them.</P> |
| |
| <h2><a name="qtinstall"></a>Installing the Qt Software</h2> |
| |
| <p>When using the NetBeans IDE with Qt, you do not need the full Qt SDK on non-Windows |
| platforms. You can install your compilers as described in <a href="../../../community/releases/69/cpp-setup-instructions.html"> |
| Configuring the NetBeans IDE for C/C++/Fortran</a>, and then you can download the Qt libraries and tools, also known as the Qt framework.</p> |
| <p>On Windows, however, you should install the Qt SDK to avoid potential problems.</p> |
| |
| <h3>Setting Up Qt for NetBeans IDE on Windows</h3> |
| |
| <p>The Qt 4.6.2 SDK includes the MinGW environment and gcc 4.4 compiler. |
| This bundled MinGW works best with Qt, so you should use it |
| instead of another MinGW version or Cygwin.</p> |
| |
| <ol> |
| <li>Install NetBeans IDE and the C/C++ plugin module, as explained |
| in <a href="../../../community/releases/69/cpp-setup-instructions.html"> |
| Configuring the NetBeans IDE for C/C++/Fortran</a>, but <i>do not install</i> Cygwin or MinGW as described |
| in that document.</li> |
| <li>Download and install |
| <a href="http://downloads.sourceforge.net/mingw/MSYS-1.0.10.exe">MSYS-1.0.10.exe</a> in |
| the default location.</li> |
| <li>Download and install the <a href="http://get.qt.nokia.com/qtsdk/qt-sdk-win-opensource-2010.02.1.exe">Qt 4.6.2 SDK</a> |
| which includes MinGW and gcc. If Qt Creator starts automatically, you can close it.</li> |
| <li>In the NetBeans IDE, select Tools > Options > C/C++ to open the C/C++ properties.</li> |
| <li>Click Add in the Tool Collections area.</li> |
| <li>Specify the Qt MinGW installation's bin directory as the tool collection's Base Directory (for example, <tt>c:\Qt\2010.02.1\mingw\bin</tt>) |
| </li> |
| <li>Set the Tool Collection Name to MinGW_Qt and click OK, then click OK in the Options dialog box.</li> |
| <li>Proceed to <a href=#creating>Creating a Simple Qt Application</a> in this article.</li> |
| </ol> |
| |
| <h3>Setting Up Qt for NetBeans IDE on Linux or Mac OS X Platforms</h3> |
| |
| <p>You can download the full Qt SDK, or just the Qt framework for your Linux or Mac OS X platform from |
| <a href="http://qt.nokia.com/downloads" target="_blank">http://qt.nokia.com/downloads</a>. |
| </p> |
| <p>You should install your compilers separately. Compilers are not included in the Qt SDK as they are |
| on Windows.</p> |
| |
| <P>After you install the Qt packages, make sure that Qt tools are |
| available from the command line. Typing <tt>qmake -v</tt> in a terminal |
| should print Qt version information rather than an error message. If qmake |
| is not found, add <tt><i>your-Qt-installation-dir</i>/bin</tt> to your PATH environment variable. |
| The path to qmake should be something similar to <tt>/home/user/qtsdk-2010.02/qt/bin</tt> if you download |
| the SDK.</P> |
| <p>When the Qt tools are available from the command line, |
| proceed to <a href=#creating>Creating a Simple Qt Application</a> in this article.</p> |
| |
| |
| <h3>Setting Up Qt for NetBeans IDE on Solaris Platforms</h3> |
| <p>Binaries for Qt are not available for Solaris platforms. However, |
| it is possible to build the Qt libraries from sources that you can get from |
| <a href="http://qt.gitorious.org/qt/qt" target="_blank"> |
| the official Qt source code repository.</a></p> |
| <p> |
| Other helpful links for building Qt from source are<br> |
| <a href="http://qt.gitorious.org/qt/pages/GitInstallation" target="_blank">Git Installation</a> and |
| <a href="http://qt.gitorious.org/qt/pages/GetTheSource" target="_blank">Get The Source</a>. |
| </p> |
| |
| <br> |
| <br> |
| |
| <H2><a name="creating"></a>Creating a Simple Qt Application</H2> |
| |
| <P>In this tutorial we'll create a simple "Hello World" Qt application, similar to |
| the Hello Qt World sample, which you can find in |
| Samples->C/C++->Hello Qt World.</P> |
| |
| |
| <ol> |
| <li>First, create a new project. Choose C/C++ Qt Application in |
| the New Project dialog and click Next >.<br> |
| <img src="../../../images_www/articles/72/cnd/qt/qt-new-project.png" alt="New Qt project dialog" ALIGN=BOTTOM WIDTH=725 HEIGHT=416 class="margin-around"> |
| </li> |
| |
| <li>In the next dialog change project name and location if needed. |
| <p>Check Create Main File and click Finish.</p> |
| <img src="../../../images_www/articles/72/cnd/qt/qt-create-main-file.png" alt="New Qt project dialog" ALIGN=BOTTOM WIDTH=737 HEIGHT=377 class="margin-around"> |
| <p>Our newly created project looks like this:</p> |
| <img src="../../../images_www/articles/72/cnd/qt/qt-app-maincpp.png" alt="Qt project and main.cpp file" ALIGN=BOTTOM WIDTH=932 HEIGHT=669 class="margin-around"> |
| </li> |
| <li>Right-click the project node and select Properties to open the Project Properties dialog. Click the Qt category. |
| Advanced users can tweak many things in the Qt project properties, but we will leave everything as is.<br> |
| <IMG SRC="../../../images_www/articles/72/cnd/qt/qt-project-properties.png" alt="Qt project properties dialog" ALIGN=BOTTOM WIDTH=754 HEIGHT=646 class="margin-around"> |
| </li> |
| <li>Next we'll create a dialog. Right-click on Resource Files and |
| select New->Qt Form...<br> |
| <IMG SRC="../../../images_www/articles/72/cnd/qt/qt-app-resource-files.png" alt="Adding resource files to the Qt project" ALIGN=BOTTOM WIDTH=932 HEIGHT=669 class="margin-around"> |
| </li> |
| <li>In the New Qt Form dialog, type <b>HelloForm</b> as the Form Name, and select Dialog without Buttons as the |
| Form Type. Check Create C++ wrapper class, and click Finish.<br> |
| <IMG SRC="../../../images_www/articles/72/cnd/qt/qt-new-form.png" alt="Qt new form" ALIGN=BOTTOM WIDTH=656 HEIGHT=447 class="margin-around"> |
| <p>Three files are created (<tt>HelloForm.ui</tt>, <tt>HelloForm.cpp</tt>, |
| <tt>HelloForm.h</tt>), and NetBeans automatically opens Qt Designer for you to |
| edit the new form (<tt>HelloForm.ui</tt>).</p> |
| <IMG SRC="../../../images_www/articles/72/cnd/qt/qt-designer.png" alt="Qt Designer automatically opens" ALIGN=BOTTOM WIDTH=919 HEIGHT=566 class="margin-around"> |
| </li> |
| <li>Use your GUI skills to create a form similar to that shown below. The form should |
| contain two QLineEdit widgets. The first widget should be named |
| <tt>nameEdit</tt>, and the second widget should be named <tt>helloEdit</tt>.<br> |
| <IMG SRC="../../../images_www/articles/72/cnd/qt/qt-designer-form.png" alt="Qt Designer with form your created" ALIGN=BOTTOM WIDTH=914 HEIGHT=504 class="margin-around"> |
| </li> |
| <li>When you are finished creating the form, close Qt Designer. The project looks as follows:<br> |
| |
| <IMG SRC="../../../images_www/articles/72/cnd/qt/qt-hello-form.png" alt="Hello form source files" ALIGN=BOTTOM WIDTH=932 HEIGHT=669 class="margin-around"> |
| <P>All the newly created HelloForm files are placed in the same Resource Files |
| logical folder. If you prefer to have CPP files in Source Files and H |
| files in Header Files — just drag and drop them to the desired logical |
| folder.</P> |
| <P>There is a small question mark in the Projects tab indicating |
| broken <tt>#include</tt> directives. The <tt>setupUi</tt> underlined with red is a |
| consequence of this fact.</P> |
| <P>The broken <tt>#include</tt> directive is in <tt>HelloForm.h</tt>: <tt>#include ui_HelloForm.h</tt>. |
| Indeed, there is no <tt>ui_HelloForm.h</tt> yet. The include file will be |
| generated with the first build of the project. This is how the Qt build |
| system works. Just click on the Build Main Project button on the |
| toolbar, and the error should disappear.</P> |
| </li> |
| <li>Now open <tt>main.cpp</tt> and insert two lines of code responsible for |
| creation and displaying of HelloForm. Don't forget to include |
| <tt>HelloForm.h</tt>.<br> |
| <IMG SRC="../../../images_www/articles/72/cnd/qt/qt-hello-form-edit.png" alt="Editing the Hello form source files" ALIGN=BOTTOM WIDTH=882 HEIGHT=661 class="margin-around"> |
| </li> |
| <li>Run the application and see how it displays the window that you |
| created in Qt Designer. |
| <p>Anything can be typed in the text field, but |
| nothing happens. Let's make our application show a greeting message that |
| includes the name entered in the text field.</p> |
| |
| <P>We need to define a slot and connect it to <tt>textChanged</tt> signal |
| fired by the text field. To learn more about Qt signals and slots |
| read <A HREF="http://doc.qt.nokia.com/4.6/signalsandslots.html" TARGET="_blank">http://doc.qt.nokia.com/4.6/signalsandslots.html</A></P> |
| </li> |
| <li>Go to <tt>HelloForm.h</tt> and declare this slot:<br> |
| <IMG SRC="../../../images_www/articles/72/cnd/qt/qt-hello-form-h.png" alt="Editing the Hello form include file" ALIGN=BOTTOM WIDTH=882 HEIGHT=661 class="margin-around"> |
| </li> |
| <li>Then go to <tt>HelloForm.cpp</tt> and insert the slot definition:<br> |
| <IMG SRC="../../../images_www/articles/72/cnd/qt/qt-hello-form-slot.png" alt="Adding slot to form source files" ALIGN=BOTTOM WIDTH=894 HEIGHT=661 class="margin-around"> |
| </li> |
| <li>And finally connect the signal with the slot by inserting some |
| code into HelloForm constructor:<br> |
| <IMG SRC="../../../images_www/articles/72/cnd/qt/qt-hello-form-cpp.png" alt="Adding slot to Hello form constructor" ALIGN=BOTTOM WIDTH=894 HEIGHT=661 class="margin-around"> |
| </li> |
| <li>Now run the application and have some fun!<br> |
| <IMG SRC="../../../images_www/articles/72/cnd/qt/qt-app-running.png" alt="Qt Hello World app running" ALIGN=BOTTOM WIDTH=418 HEIGHT=173 class="margin-around"> |
| </li> |
| |
| </ol> |
| |
| <H2><a name="conclusion"></a>Conclusion</H2> |
| <P>Please create and develop Qt applications with NetBeans and send your |
| feedback to the CND mailing list <A HREF="mailto:users@cnd.netbeans.org">users@cnd.netbeans.org</A>.</P> |
| <P>Found a bug or want to suggest an enhancement? Please file them at |
| <A HREF="https://netbeans.org/bugzilla/enter_bug.cgi?component=cnd">https://netbeans.org/bugzilla/enter_bug.cgi?component=cnd</A> |
| (netbeans.org registration is required)</P> |
| |
| <div class="feedback-box"><a href="mailto:users@cnd.netbeans.org?subject=Feedback:%20Working%20with%20Qt%20Applications%20-%20NetBeans%20IDE%206.8%20Tutorial">Send Feedback on This Tutorial</a></div> |
| <br style="clear: both;"> |
| </BODY> |
| </HTML> |
