Development/Tutorials/Using Qt Creator: Difference between revisions

    From KDE TechBase
    m (Fix syntax highlighting.)
    (12 intermediate revisions by 4 users not shown)
    Line 1: Line 1:
    {{Template:I18n/Language Navigation Bar|Development/Tutorials/Using Qt Creator}}
    <languages />
    <translate>
    <!--T:1-->
    __TOC__


    <!--T:2-->
    QtCreator is an IDE from Nokia for Qt. It contains QtDesigner for UI design. This article describes:
    QtCreator is an IDE from Nokia for Qt. It contains QtDesigner for UI design. This article describes:
    * how to create a new program
    * why to use Qt Creator
    * how to load an existing program
    * how to create a new application
    * how to load an existing application


    = Creating a new program =
    == Why use Qt Creator == <!--T:3-->


    Qt Designer is a graphical program which allows you to easily build user interfaces, using a ''drag n drop'' interface. Here is a short example how it can go, for more information read the [http://qt.nokia.com/doc/designer-manual.html user documentation].
    <!--T:4-->
    {|align="right"
    |[[image:Snapshot-qtcreator.png|right|thumb|200px|KDE4's ktimetracker loaded as QtCreator project]]
    |}
    To create your C++ applications you can use any text editor. But life will be much easier if you gain QtCreator's features. That means
    * you can get your source code saved, built and run with one click
    * you get code-completion
    * you can find all places in your source code where you call a function (e.g. "where do I call refresh()")
    * you can go back to a more recent cursor position with your editor, even if this is in another file
    * you can checkout and commit to Subversion or Git repositories without leaving your workflow


    == Creating a new program == <!--T:5-->
    <!--T:6-->
    Here is a short example of how you can create a "hello world" application. For more information read the [http://qt.nokia.com/doc/designer-manual.html user documentation].
    <!--T:7-->
    ;Step 0:
    ;Step 0:
    Call Qt Designer from within the [http://labs.trolltech.com/page/Projects/Tools/QtCreator QtCreator] [http://en.wikipedia.org/wiki/Integrated_development_environment IDE]:
    Call QtCreator
    <pre>
    <syntaxhighlight lang="bash">
    qtcreator
    qtcreator
    </pre>
    </syntaxhighlight>
    Then select New File or Project -> Qt C++ Project -> Qt Gui Application -> name = helloworld -> Next -> Next -> Finish


    <!--T:8-->
    ;Step 1:
    ;Step 1:
    Add the widgets you want by drag-and-drop
    Select Edit -> Forms -> mainwindow.ui. Add the widgets you want by drag-and-drop:


    <!--T:9-->
    [[File:Designer-step1.png|200px]]
    [[File:Designer-step1.png|200px]]


    <!--T:10-->
    ;Step 2:  
    ;Step 2:  
    Select the mainwindow. This is the one un-intuitive step. To lay out the objects in the mainwindow, you do not select the objects in the mainwindow, but the mainwindow itself.
    Select the mainwindow. This is the one un-intuitive step. To lay out the objects in the mainwindow, you do not select the objects in the mainwindow, but the mainwindow itself.


    <!--T:11-->
    [[File:Designer-step2.png|200px]]
    [[File:Designer-step2.png|200px]]


    <!--T:12-->
    ;Step 3:
    ;Step 3:
    Select Form -> Lay Out in a <u>G</u>rid
    Select Form -> Lay Out in a <u>G</u>rid


    <!--T:13-->
    [[File:Designer-step3.png|200px]]
    [[File:Designer-step3.png|200px]]


    <!--T:14-->
    ;Result:
    ;Result:
    You get a decent look, and if you resize the window, the widgets resize as well.
    You get a decent look, and if you resize the window, the widgets resize as well.


    <!--T:15-->
    [[File:Designer-result.png|200px]]
    [[File:Designer-result.png|200px]]


    == Using KDE libraries ==  
    === Using KDE libraries === <!--T:16-->
    To use KDE classes like KMessageBox, you need to tell qtcreator to use the KDE libraries when building. Go to your home directory, cd into ''yourproject'' and modify ''yourproject.pro''. Add a line
     
    <pre>
    <!--T:17-->
    To use KDE classes like KMessageBox, you need to tell QtCreator to use the KDE libraries when building. Go to your home directory, change into ''yourproject'' and modify ''yourproject.pro''. Add the line
    <syntaxhighlight lang="make">
    LIBS += -lkdeui
    LIBS += -lkdeui
    </pre>
    </syntaxhighlight>
    Then you can start using KDE classes in your code.
    Then you can start using KDE classes in your code.


    == Adding a toolbar ==
    === Adding a toolbar === <!--T:18-->
     
    <!--T:19-->
    To add a toolbar, right-click on the UI and choose "Add Toolbar". Then you can set icons and text in your mainwindow's constructor with code like this:
    To add a toolbar, right-click on the UI and choose "Add Toolbar". Then you can set icons and text in your mainwindow's constructor with code like this:
    <syntaxhighlight lang="cpp-qt">
    <syntaxhighlight lang="cpp-qt">
    Line 49: Line 82:
    [[Development/Tutorials/Using_Qt_Designer|More Info...]]
    [[Development/Tutorials/Using_Qt_Designer|More Info...]]


    = Load an existing project =
    == Load an existing project == <!--T:20-->
    This describes how to use QtCreator to integrate existing KDE 4 applications. It has been tested with QtCreator 1.2.80 and SUSE Linux 11.1 but should work same or similar with every combination. As an example KDE application we use [http://userbase.kde.org/ktimetracker ktimetracker] from the kdepim module, other applications should work analog.
     
    <!--T:21-->
    This describes how to use QtCreator to integrate existing KDE 4 applications. It has been tested with QtCreator 1.2.80 and SUSE Linux 11.1 but should work same or similar with every combination. As an example KDE application we use [http://userbase.kde.org/ktimetracker ktimetracker] from the kdepim module, other applications should work likewise.


    You can either work with code on your disk or have QtCreator do the subversion checkout.
    <!--T:22-->
    You can either work with code on your disk or have QtCreator do the Subversion checkout.


    == use code from your disk ==
    === use code from your disk === <!--T:23-->
    * Import the CMakeLists.txt file (File -> Open -> kdepim/CMakeLists.txt)
    * As build directory choose kdepim.
    * You will automatically come to a screen where you can run cmake
    * Continue with the step "Run cmake"


    == have QtCreator do the subversion checkout ==
    <!--T:24-->
    * Choose File -> New File or Project -> Version Control -> Subversion Checkout.
    * import the CMakeLists.txt file (File -> Open -> kdepim/CMakeLists.txt)
    * Enter a subversion URL like svn://anonsvn.kde.org/home/kde/trunk/KDE/kdepim
    * as build directory choose kdepim
    * Enter a checkout directory, so the local directory where the checkout will be loaded in
    * you will automatically come to a screen where you can run CMake
    * Type finish, see how the checkout starts
    * continue with the step "Run cmake"
    * You will automatically come to a screen where you can run cmake
    * Continue with the step "Run cmake"


    == have QtCreator do the git checkout ==
    === have QtCreator do the subversion checkout === <!--T:25-->
    * Choose File -> New File or Project -> Version Control -> Git Checkout.
     
    * Enter a git URL like [email protected]:/kdepim
    <!--T:26-->
    * choose File -> New File or Project -> Version Control -> Subversion Checkout.
    * enter a Subversion URL like svn://anonsvn.kde.org/home/kde/trunk/KDE/kdepim
    * enter a checkout directory, i.e. the local directory where the code will be checked-out to
    * type finish, see how the checkout starts
    * you will automatically come to a screen where you can run CMake
    * continue with the step "Run cmake"
     
    === have QtCreator do the git checkout === <!--T:27-->
     
    <!--T:28-->
    * choose File -> New File or Project -> Project from Version Control -> Git Repository Clone.
    * enter a Git URL like [email protected]:/kdepim
    * accept kdepim as checkout directory
    * accept kdepim as checkout directory
    * Type finish, see how the checkout starts
    * type finish, see how the checkout starts
    * You will automatically come to a screen where you can run cmake
    * you will automatically come to a screen where you can run CMake
    * Continue with the step "Run cmake"
    * continue with the step "Run cmake"
     
    === Run cmake === <!--T:29-->


    == Run cmake ==
    <!--T:30-->
    * Enter arguments for cmake like  
    * enter arguments for CMake like  
    <pre>
    <syntaxhighlight lang="bash">
    /root/kdepim -DCMAKE_INSTALL_PREFIX=/usr/local -DLIB_SUFFIX=64 -DCMAKE_BUILD_TYPE=debugfull
    /root/kdepim -DCMAKE_INSTALL_PREFIX=/usr/local -DLIB_SUFFIX=64 -DCMAKE_BUILD_TYPE=debugfull
    </pre>
    </syntaxhighlight>
    <tt>DLIB_SUFFIX=64</tt> means that you want to install your libraries into directories named <tt>lib64</tt>, not <tt>lib</tt>. ''/root/kdepim'' is where your source code is.
    <tt>DLIB_SUFFIX=64</tt> means that you want to install your libraries into directories named <tt>lib64</tt>, not <tt>lib</tt>. ''/root/kdepim'' is where your source code is.
    * click "Run cmake"
    * click "Run cmake"
    * Note a .cbp file gets created containing many information about the build.
    * note: a .cbp file is created containing many information about the build
    * click "Finish"
    * click "Finish"


    == Build it ==
    === Build it === <!--T:31-->
    * Configure qtcreator to build only ktimetracker:
     
    <!--T:32-->
    * configure QtCreator to build only ktimetracker:
    Projects -> Active run configuration=ktimetracker -> build settings -> build steps -> make -> show details -> activate ktimetracker.
    Projects -> Active run configuration=ktimetracker -> build settings -> build steps -> make -> show details -> activate ktimetracker.
    * Configure qtcreator to use 8 logical processors:
    * configure QtCreator to use 8 logical processors:
    Projects -> Active run configuration=ktimetracker -> build settings -> build steps -> make -> show details -> addtional Arguments = -j8
    Projects -> Active run configuration=ktimetracker -> build settings -> build steps -> make -> show details -> addtional Arguments = -j8
    * Choose Build -> Build All
    * choose Build -> Build All


    = See also =
    == See also == <!--T:33-->
     
    <!--T:34-->
    * [[Development/Tutorials/Using Qt Designer]]
    * [[Development/Tutorials/Using Qt Designer]]
    * [[Getting_Started/Set_up_KDE_4_for_development#QtCreator]]
    * [[Getting_Started/Using_an_IDE_with_KDE4#QtCreator]]
     
    </translate>
    [[Category:KDE4]]
    [[Category:KDE4]]

    Revision as of 15:14, 10 June 2012

    QtCreator is an IDE from Nokia for Qt. It contains QtDesigner for UI design. This article describes:

    • why to use Qt Creator
    • how to create a new application
    • how to load an existing application

    Why use Qt Creator

    KDE4's ktimetracker loaded as QtCreator project

    To create your C++ applications you can use any text editor. But life will be much easier if you gain QtCreator's features. That means

    • you can get your source code saved, built and run with one click
    • you get code-completion
    • you can find all places in your source code where you call a function (e.g. "where do I call refresh()")
    • you can go back to a more recent cursor position with your editor, even if this is in another file
    • you can checkout and commit to Subversion or Git repositories without leaving your workflow

    Creating a new program

    Here is a short example of how you can create a "hello world" application. For more information read the user documentation.

    Step 0

    Call QtCreator

    qtcreator
    

    Then select New File or Project -> Qt C++ Project -> Qt Gui Application -> name = helloworld -> Next -> Next -> Finish

    Step 1

    Select Edit -> Forms -> mainwindow.ui. Add the widgets you want by drag-and-drop:

    Step 2

    Select the mainwindow. This is the one un-intuitive step. To lay out the objects in the mainwindow, you do not select the objects in the mainwindow, but the mainwindow itself.

    Step 3

    Select Form -> Lay Out in a Grid

    Result

    You get a decent look, and if you resize the window, the widgets resize as well.

    Using KDE libraries

    To use KDE classes like KMessageBox, you need to tell QtCreator to use the KDE libraries when building. Go to your home directory, change into yourproject and modify yourproject.pro. Add the line

    LIBS += -lkdeui
    

    Then you can start using KDE classes in your code.

    Adding a toolbar

    To add a toolbar, right-click on the UI and choose "Add Toolbar". Then you can set icons and text in your mainwindow's constructor with code like this:

    ui->toolBar->addAction(QIcon("/usr/share/icons/oxygen/22x22/apps/ktip.png"),"hello world");
    

    More Info...

    Load an existing project

    This describes how to use QtCreator to integrate existing KDE 4 applications. It has been tested with QtCreator 1.2.80 and SUSE Linux 11.1 but should work same or similar with every combination. As an example KDE application we use ktimetracker from the kdepim module, other applications should work likewise.

    You can either work with code on your disk or have QtCreator do the Subversion checkout.

    use code from your disk

    • import the CMakeLists.txt file (File -> Open -> kdepim/CMakeLists.txt)
    • as build directory choose kdepim
    • you will automatically come to a screen where you can run CMake
    • continue with the step "Run cmake"

    have QtCreator do the subversion checkout

    • choose File -> New File or Project -> Version Control -> Subversion Checkout.
    • enter a Subversion URL like svn://anonsvn.kde.org/home/kde/trunk/KDE/kdepim
    • enter a checkout directory, i.e. the local directory where the code will be checked-out to
    • type finish, see how the checkout starts
    • you will automatically come to a screen where you can run CMake
    • continue with the step "Run cmake"

    have QtCreator do the git checkout

    • choose File -> New File or Project -> Project from Version Control -> Git Repository Clone.
    • enter a Git URL like [email protected]:/kdepim
    • accept kdepim as checkout directory
    • type finish, see how the checkout starts
    • you will automatically come to a screen where you can run CMake
    • continue with the step "Run cmake"

    Run cmake

    • enter arguments for CMake like
    /root/kdepim -DCMAKE_INSTALL_PREFIX=/usr/local -DLIB_SUFFIX=64 -DCMAKE_BUILD_TYPE=debugfull
    

    DLIB_SUFFIX=64 means that you want to install your libraries into directories named lib64, not lib. /root/kdepim is where your source code is.

    • click "Run cmake"
    • note: a .cbp file is created containing many information about the build
    • click "Finish"

    Build it

    • configure QtCreator to build only ktimetracker:

    Projects -> Active run configuration=ktimetracker -> build settings -> build steps -> make -> show details -> activate ktimetracker.

    • configure QtCreator to use 8 logical processors:

    Projects -> Active run configuration=ktimetracker -> build settings -> build steps -> make -> show details -> addtional Arguments = -j8

    • choose Build -> Build All

    See also