| <!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 or |
| Oracle Solaris Studio IDE."> |
| <meta name="keywords" content="NetBeans, Oracle Solaris Studio, 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 <i>Alexey Vladykin</i> and maintained by |
| <a href="mailto:susan.morgan@oracle.com"><i>Susan Morgan</i></a><br> |
| October 2013</em> [Revision number: V7.4-1]</div> |
| <p>This tutorial guides you through creating a simple 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/73/netbeans-stamp-74-73.png" class="stamp" |
| alt="Content on this page applies to NetBeans IDE 7.3 and 7.4" title="Content on this page applies to the NetBeans IDE 7.3 and 7.4"> |
| |
| <ul class="toc"> |
| <li><a href="#requirements">Requirements</a></li> |
| <li><a href="#intro">Introduction</a></li> |
| <li><a href="#qtinstall">Installing the Qt 4 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">7.3 or 7.4 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 7</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="../../../community/releases/74/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. </td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="#qtinstall">Qt Libraries</a></td> |
| <td class="tbltd1">Version 4.8 <br>Note that Qt 5 does not work with this tutorial</td> |
| </tr><tr><td> |
| </tr> |
| </tbody> |
| </table> |
| <br> |
| <p>See the <a href="../../../community/releases/74/install.html">NetBeans IDE |
| 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. This article shows how to configure |
| NetBeans IDE to use Qt 4.8 and create a simple Qt application. </P> |
| |
| <h2><a name="qtinstall"></a>Installing the Qt Software for Use in NetBeans IDE</h2> |
| <p>You must install the Qt software and configure NetBeans to use it before creating Qt applications in the IDE. </p> |
| <p class="notes"><strong>Important: You must use Qt 4.8 to follow this tutorial.<br><br> |
| If you want to use Qt 5 see this contributed article: <br> |
| <a href="http://wiki.netbeans.org/Talk:HowToSetup64-BitQt5WithNetBeans7.4OnWindows"> |
| How To Setup 64-Bit Qt 5 With NetBeans 7.4 On Windows</a></strong><br> </p> |
| <p>See the instructions for setting up Qt for your platform:</p> |
| <ul type="disc"> |
| <li><a href="#setupwin">Setting Up Qt for NetBeans IDE on Windows</a></li> |
| <li><a href="#setuplinmac">Setting Up Qt for NetBeans IDE on Linux or Mac OS X Platforms</a></li> |
| <li><a href="#setupsolaris">Setting Up Qt for NetBeans IDE on Oracle Solaris Platforms</a></li> |
| </ul> |
| |
| <h3><a name="setupwin"></a>Setting Up Qt 4.8 for NetBeans IDE on Windows</h3> |
| <p>These instructions describe the software that was installed on Windows to create this tutorial. </p> |
| <h4>Download Required Software for Windows</h4> |
| <ol> |
| <li>Install NetBeans IDE and the C/C++ plugin module, as explained |
| in <a href="../../../community/releases/74/cpp-setup-instructions.html"> |
| Configuring the NetBeans IDE for C/C++/Fortran</a>. Do not install compilers yet.</li> |
| <li>Exit NetBeans IDE.</li> |
| <li>Download the MinGW installer from |
| <a href="http://sourceforge.net/projects/mingw">http://sourceforge.net/projects/mingw</a>.</li> |
| <li>Run the MinGW installer, which should have a file name similar to <tt>mingw-get-inst-20120426.exe</tt>.</li> |
| <li>In the MinGW installer, select the following components to install: |
| <ul><li>C</li> |
| <li>C++</li> |
| <li>MSYS Basic System</li> |
| <li>MinGW Developer Toolkit</li> |
| </ul> |
| The installer takes a few moments to download and extract the software packages. By default, MinGW is installed |
| in <tt>C:\MinGW</tt>.</li> |
| <li>Download and install the following Qt software from |
| <a href="http://qt-project.org/downloads">http://qt-project.org/downloads</a>. <br> |
| <ul><li>Qt libraries 4.8.5 for Windows (minGW 4.4 317 MB) </li> |
| <li>Qt Creator 2.8.1 for Windows (51 MB) </li></ul> |
| </ol> |
| <h4>Edit Your Windows Path</h4> |
| <p>You must edit your PATH environment variable in Windows to add the paths to the binaries for Qt, MinGW, and MSYS. |
| If you installed to the default locations, the paths are:</p> |
| <ul> |
| <li><tt>C:\Qt\4.8.5\bin</tt></li> |
| <li><tt>C:\MinGW\bin</tt></li> |
| <li><tt>C:\MinGW\MSYS\1.0\bin</tt></li> |
| </ul> |
| <p><b>To add the paths to your Path environment variable:</b></p> |
| <ol> |
| <li>Open the Environment Variables window: |
| <ul> |
| <li>On Windows XP and Windows 2000: Right-click My Computer > Properties > Advanced tab > |
| Environment Variables button.</li> |
| <li>On Windows Vista and Windows 7: Right-click My Computer > Properties > |
| Advanced System Settings link > Environment Variables button.</li></ul> |
| <li>In the Environment Variables window, select the Path variable in the Systems Variable |
| section and click Edit.</li> |
| <li>At the end of the path, insert a semi-colon and add the paths to the executables for |
| Qt, MinGW, and MSYS. Use semi-colons between the paths and do not use any spaces. |
| Be careful not to remove anything already on your PATH or your computer might not work correctly. <br> |
| <p>When you are finished, your path should look similar to the following:</p> |
| <pre>%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem; |
| %SYSTEMROOT%\System32\WindowsPowerShell\v1.0;C:\MinGW\bin;C:\MinGW\MSYS\1.0\bin;C:\Qt\4.8.5\bin</pre> |
| </li> |
| <li>Click OK in the Environment Variables window.</li> |
| </ol> |
| |
| <h4>Create a Tool Collection for MinGW and Qt</h4> |
| <p>You need to create a new tool collection that uses MinGW compilers, the MSYS commands, and Qt commands.</p> |
| <p><b>To create a new tool collection:</b></p><ol> |
| <li>Start NetBeans IDE and open the Services window by choosing Window > Services. |
| <li>Expand the C/C++ Build Hosts node and the localhost node, and right click the Tool Collections node and select |
| Add New Tool Collection.<br><br> |
| <img src="../../../images_www/articles/73/cnd/qt/qt-addtool.png" alt="Screenshot of Add New Tool Collection option" class="b-all margin-around"></li> |
| <li>Specify the MinGW installation's bin directory as the tool collection's Base Directory |
| (for example, <tt>C:\mingw\bin</tt>). <br> |
| The Tool Collection Family and Tool Collection Name should be automatically filled in as MinGW. |
| </li> |
| <li>Change the Tool Collection Name to MinGW_Qt and click OK.<br> |
| </li> |
| <li>Right-click the new MinGW_Qt tool collection under the Tool Collection node in the Services window and choose Properties. |
| <br>The paths to the tools should look similar to the following figure. <br> |
| <IMG SRC="../../../images_www/articles/73/cnd/qt/qt-toolpaths.png" alt="Screenshot showing MinGW tool paths" class="margin-around"> |
| </li> |
| <li>Check the paths for the Make Command and QMake Command and correct them if needed.<br> |
| The Make Command should be <tt>C:\MinGW\MSYS\1.0\bin\make.exe</tt> command, and the |
| QMake Command command should be <tt>C:\Qt\4.8.5\bin\qmake.exe</tt>.</li> |
| <li>Click the Default button while MinGW_Qt is selected to make it the default tool collection.</li> |
| <li>Proceed to <a href=#creating>Creating a Simple Qt Application</a> in this article.</li> |
| </ol> |
| |
| <h3><a name="setuplinmac"></a>Setting Up Qt for NetBeans IDE on Linux or Mac OS X Platforms</h3> |
| <ol><li>Download the Qt libraries for your Linux or Mac OS X platform from |
| <a href="http://qt-project.org/downloads" target="_blank">http://qt-project.org/downloads</a> or get them from |
| your Linux package repository.</li> |
| <li>If compilers are not already present on your system, install them as explained in <a href="../../../community/releases/74/cpp-setup-instructions.html"> |
| Configuring the NetBeans IDE for C/C++/Fortran</a>. </li> |
| <li>Add the paths to the compilers and Qt tools to your PATH environment variable</li> |
| <li>In a terminal window, type <tt>qmake -v</tt> and <tt>gcc --version</tt> to make sure the commands are |
| in your path.</li> |
| <li>When the tools are available from the command line, start NetBeans IDE, and check the Tool Collections |
| properties to make sure the paths to the compilers, make command, and qmake command are correct.</li> |
| <li>Proceed to <a href=#creating>Creating a Simple Qt Application</a> in this article.</li> |
| </ol> |
| |
| |
| <h3><a name="setupsolaris"></a>Setting Up Qt for NetBeans IDE on Oracle Solaris Platforms</h3> |
| <p>Binaries for Qt are not available for Oracle Solaris platforms. However, |
| it is possible to build Qt from source and then use it with NetBeans IDE. |
| </p> |
| <ol> |
| <li>Install your compilers as explained in <a href="../../../community/releases/74/cpp-setup-instructions.html"> |
| Configuring the NetBeans IDE for C/C++/Fortran</a>. </li> |
| <li>Download the Qt source from <a href="ftp://ftp.qt-project.org/qt/source/">ftp://ftp.qt-project.org/qt/source/</a></li> |
| <li>Refer to the Qt documentation <a href="http://qt-project.org/doc/qt-4.8/install-X11.html">Installing Qt for X11 Platforms</a> for |
| instructions for building.</li> |
| <li>After you successfully build Qt binaries, edit your PATH environment variable to add the path to the Qt binaries.</li> |
| <li>In a terminal window, type <tt>qmake -v</tt> |
| and <tt>gcc --version</tt> to make sure the commands are on your path.</li> |
| <li>When the GNU compilers and Qt tools are available from your command line, start NetBeans IDE. </li> |
| <li>Check the Tool Collections properties to make sure the paths to the compilers and qmake command are correct.</li> |
| <li>Proceed to <a href=#creating>Creating a Simple Qt Application</a> in this article.</li> |
| </ol> |
| |
| <H2><a name="creating"></a>Creating a Simple Qt Application</H2> |
| |
| <P>In this tutorial you 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> |
| <p>These instructions are written for Windows platforms. Users on Linux, Mac, and Solaris platforms can perform the |
| same steps using a GNU tool collection where the path to <tt>qmake</tt> is correctly specified. |
| <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/73/cnd/qt/qt-create-new-project.png" alt="New project dialog" class="b-all margin-around"> |
| |
| </li> |
| |
| <li>In the next dialog change project name and location if needed. |
| <p>Check Create Main File and select the MinGW_qt tool collection, then click Finish.</p> |
| <img src="../../../images_www/articles/73/cnd/qt/qt-create-main-file.png" alt="New Qt project dialog" class="b-all margin-around"> |
| <p>Your newly created project should look similar to the following figure:</p> |
| <img src="../../../images_www/articles/73/cnd/qt/qt-app-maincpp.png" alt="Qt project and main.cpp file" class="b-all 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 for this tutorial you should leave everything as it is.<br> |
| <IMG SRC="../../../images_www/articles/73/cnd/qt/qt-project-properties.png" alt="Qt project properties dialog" class="b-all margin-around"> |
| </li> |
| <li>Click the Run category and set the Console Type property to External Terminal, then click OK.</li> |
| <li>Next you can create a form. Right-click on Resource Files and |
| select New->Qt Form<br> |
| <IMG SRC="../../../images_www/articles/73/cnd/qt/qt-app-resource-files.png" alt="Adding resource files to the Qt project" class="b-all 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/73/cnd/qt/qt-new-form.png" alt="Qt new form" class="b-all margin-around"> |
| <p>Three files are created (<tt>HelloForm.ui</tt>, <tt>HelloForm.cpp</tt>, |
| <tt>HelloForm.h</tt>), and the IDE automatically opens Qt Designer for you to |
| edit the new form, <tt>HelloForm.ui</tt>.</p> |
| <IMG SRC="../../../images_www/articles/73/cnd/qt/qt-designer.png" alt="Qt Designer automatically opens" class="b-all margin-around"> |
| </li> |
| <li>Use your GUI skills to create a form similar to that shown below. Add to the form two QLineEdit widgets |
| and change the name of the first widget to <tt>nameEdit</tt>, and change the name of the second widget to <tt>helloEdit</tt>.<br> |
| <IMG SRC="../../../images_www/articles/73/cnd/qt/qt-designer-form.png" alt="Qt Designer with form your created" class="b-all margin-around"> |
| </li> |
| <li>When you are finished creating the form, save it and close Qt Designer. The project looks as shown in the following figure. |
| <br> |
| <IMG SRC="../../../images_www/articles/73/cnd/qt/qt-hello-form.png" alt="Hello form source files" class="b-all margin-around"> |
| <br> |
| <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>You should see a small question mark in the Projects tab to indicate the presence of |
| broken <tt>#include</tt> directives. The <tt>setupUi</tt> underlined with red is a |
| consequence of the broken <tt>#include ui_HelloForm.h</tt> directive, which occurs in the <tt>HelloForm.h</tt> file. |
| The <tt>ui_HelloForm.h</tt> include file does not actually exist yet and it will be generated with the first build of the project. This is how the Qt build |
| system works. </P> |
| |
| |
| </li> |
| <li>Click the Build Project button on the toolbar and the error should disappear when the <tt>ui_HelloForm.h</tt> file is generated.</li> |
| <li>Open <tt>main.cpp</tt> and insert two lines of code that are responsible for |
| creation and displaying of HelloForm as shown in lines 17 and 18 in the figure below. |
| Don't forget to include <tt>HelloForm.h</tt> as shown in line 9.<br> |
| <IMG SRC="../../../images_www/articles/73/cnd/qt/qt-hello-form-edit.png" alt="Editing the Hello form source files" class="b-all margin-around"> |
| </li> |
| <li>Click the Run button in the tool bar to run the application.<br> |
| First you see a terminal window and then the dialog box that you |
| created in Qt Designer.</li> |
| <li>Type something in the text field and press Enter, and you should see that nothing happens. |
| <P>To enable the application to respond, you must define a slot and connect it to a <tt>textChanged</tt> signal |
| fired by the text field. To learn more about Qt signals and slots |
| read <A HREF="http://doc.qt.digia.com/4.6/signalsandslots.html" TARGET="_blank">http://doc.qt.digia.com/4.6/signalsandslots.html</A></P> |
| </li> |
| <li>Go to <tt>HelloForm.h</tt> and declare this slot as shown in lines 18 and 19 in the following figure:<br> |
| <IMG SRC="../../../images_www/articles/73/cnd/qt/qt-hello-form-h.png" alt="Editing the Hello form include file" class="b-all margin-around"> |
| </li> |
| <li>Then go to <tt>HelloForm.cpp</tt> and insert the slot definition as shown in lines 17 through 23 in the following figure:<br> |
| <IMG SRC="../../../images_www/articles/73/cnd/qt/qt-hello-form-slot.png" alt="Adding slot to form source files" class="b-all margin-around"> |
| </li> |
| <li>Finally connect the signal with the slot by inserting some |
| code into HelloForm constructor as shown in lines 12 and 13 in the following figure:<br> |
| <IMG SRC="../../../images_www/articles/73/cnd/qt/qt-hello-form-cpp.png" alt="Adding slot to Hello form constructor" class="b-all margin-around"> |
| </li> |
| <li>Now run the application and when the dialog is displayed, click the top input field, type your name, |
| and the bottom field will echo Hello to you as shown below.<br> |
| |
| <IMG SRC="../../../images_www/articles/73/cnd/qt/qt-app-running.png" alt="Qt Hello World app running" class="b-all margin-around"> |
| </li> |
| </ol> |
| |
| <H2><a name="conclusion"></a>Conclusion</H2> |
| <p>This article showed how to set up your environment so you can use NetBeans IDE with Qt libraries and tools.</p> |
| <P>Please create and develop Qt applications with NetBeans and send your |
| feedback to the <A HREF="mailto:users@cnd.netbeans.org">CND mailing list</A> and |
| <a href="https://forums.netbeans.org/cnd-users.html">NetBeans C/C++ User's forum</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> |
| |
| <h2>See Also</h2> |
| <p>Please see the |
| <a href="https://netbeans.org/kb/trails/cnd.html">C/C++ Learning Trail</a> for |
| more articles about developing with C/C++/Fortran in NetBeans IDE.</p> |
| |
| <div class="feedback-box"><a href="mailto:users@cnd.netbeans.org?subject=Feedback:%20Working%20with%20Qt%20Applications%20-%20NetBeans%20IDE%207.4%20Tutorial">Send Feedback on This Tutorial</a></div> |
| <br style="clear: both;"> |
| </BODY> |
| </HTML> |
