Viadeo Twitter Google Bookmarks ! Facebook Digg del.icio.us MySpace Yahoo MyWeb Blinklist Netvouz Reddit Simpy StumbleUpon Bookmarks Windows Live Favorites 
Logo Documentation Qt ·  Page d'accueil  ·  Toutes les classes  ·  Toutes les fonctions  ·  Vues d'ensemble  · 

Getting Started

In this tutorial, we will create an address book application step-by-step using the Qt Visual Studio .NET Integration. We will also outline how to make a basic project using one of the project wizards and creat a form with the integrated Qt Designer. In addition, we will also show you how to convert a Visual Studio project file into a qmake compatible .pro file.

Creating a Skeleton Qt Application

The first step is to create a trivial project. To do so, select the New Project dialog in Visual Studio and click the Qt Projects folder. Then select the Qt Application item and type "AddressBook" in the Name field.

When you click OK, a project wizard will appear. This wizard has a page listing Qt modules you can link your project against, followed by a page that enables you to specify then name of a skeleton class that will be generate by the wizard as a starting point. For this Address Book example, we will use the default values.

Now, we have a small working Qt application. Press F5 to try it out. The result is an empty window. You can close it by clicking the X button on the title bar.

Designing the Main Dialog

Next, we will design the application's main dialog using the integrated Qt Designer visual form editor. See the Qt Designer Manual for more information.

We begin by adding the widgets and setting their properties. These widgets are then put into layouts. The result is shown below.

Screenshot of the AddressBook's main dialog

Adding the Widgets

We launch Qt Designer by double-clicking on the Form Files\addressbook.ui file in Visual Studio's Solution Explorer.

To add widgets to the form, we need to make the Qt Toolbox visible by selecting Qt|Qt Toolbox.

First, we add the QListWidget. Expand the Item-Based Widgets group in the Qt Toolbox, then click on the List Widget subitem and drag it onto the top-left corner of the form. The Visual Studio property editor will now display the propertis for the QListWidget object. Using this property editor, set the ObjectName property to "addressList".

Next, we insert the Add and Delete buttons. Expand the Buttons group in the Qt Toolbox and drag two Push Buttons to the top-right corner of the form. Rename the buttons to "addButton" and "deleteButton", and their Text property to "Add" and "Delete".

Finally, we add two QLabel objects to display the selected item in the list by dragging the Label item from the Display Widgets group onto the form, once for each label.

Rename the first label to "nameLabel" and change its Text property to "<No item selected>"; rename the second label to "emailLabel" and leave its Text property empty.

Try to position the widgets as they appear in the screenshot above.

Adding the Layouts

In order to properly position the widgets and ensure that they resize accordingly when the form is resized, we need to add layouts to the form.

We require a vertical layout for the buttons as well as a spacer to push the buttons to the top of the layout. To add a spacer, drag the Vertical Spacer item from the Spacers group onto the form, located below the push buttons. Then, select the buttons and the spacer (click on each widget while holding Shift) and click menu{Qt|Form Editor|Layout Vertically}.

The window also needs a layout to manage the positioning of other widgets as well as the button layout. So, we add another layout by selecting the list wiget, the two labels and the button layout, and then clicking Qt|Form Editor|Layout in a Grid.

Hint: Make sure that the labels are almost as wide as the form; otherwise the grid layout will make them only as wide as the address list.

To preview your form without compiling it, click Qt|Form Editor|Preview Form. To build and run the application, press F5.

Adding an "Add Address" Dialog

Now that the main dialog is done, we move on to add functionality to our address book application. We would like to have an application that pops up a dialog when the user clicks the Add button. Hence, we require an "Add Address" dialog.

Designing the Dialog

We start by designing the dialog. This time, there is no ready-made .ui file available in the project. So, we select Project|Ad Qt GUI Class. This will invoke a wizard requesting for a class name. Enter "AddDialog" as the name and "QDialog" as the base class. Then, check the "Multiple Inheritance" checkbox and click on the Finish button.

You will now have an adddialog.ui file in the project's Form Files folder.

Screenshot of the Add Address Dialog

To set the properties of the dialog, double-click on adddialog.ui to open the form in Qt Designer. Then, click on the form and set its WindowTitle property to "Add Address". Next, create the following widgets and set their ObjectName and Text properties according to values listed in the table below.

WidgetObjectNameText
QLabel"nameText""Name:"
QLabel"emailText""Email:"
QLineEdit"nameEdit"""
QLineEdit"emailEdit"""
QPushButton"okButton""OK"

Now you can layout your widgets. Hint: Use a grid layout for the labels and line edits.

Connecting to the Dialog's OK Button

We want the OK button to invoke the QDialog::accept() slot. and we do this by clicking on the Edit Connections toolbar button. You will then enter Qt Designer's connection mode.

Click on the OK button and drag the mouse cursor to an empty area of the form and release the mouse button. The Configure Connection dialog will pop up, allowing you to establish a signal-slot connection between the OK button and the form. Use it to connect the button's clicked() signal to the form's accept() slot.

Displaying the "Add Address" Dialog from the Application

Once we have completed designing the dialog, we have to invoke it when the user clicks the main dialog's Add button. To achieve this behavior, we add a slot to the AddressBook class and invoke the AddDialog from this slot.

The Qt Visual Studio Integration makes this very easy. Simply double-click on the Add button; this will open the .cpp file associated with the dialog and generate a skeleton slot called on_addButton_clicked(). Type in the following lines of code in the slot's body:

 AddDialog dialog(this);
 dialog.exec();

Forms created using Qt Designer call QMetaObject::connectSlotsByName() to establish connections between signals emitted by the form's child widgets and slots that follow the naming convention on_<sender>_<signal>().

If we want to connect to another signal than clicked(), we have to manually add the slot to the AddressBook class. This requires editing both the header file (addressbook.h) and the implementation file (addressbook.cpp).

Next, we include adddialog.h to addressbook.cpp:

 #include "adddialog.h"

Build and run the program now. If you click on the Add button, the Add Address dialog will pop up. If you click on OK, the dialog will disappear.

Adding Items to the List Widget

When the user clicks OK, we would like to add an item to the QListWidget. To do so, modify the code in the on_addButton_clicked() slot to the following:

 AddDialog dialog(this);

 if (dialog.exec()) {
             QString name = dialog.nameEdit->text();
             QString email = dialog.emailEdit->text();

             if (!name.isEmpty() && !email.isEmpty()) {
                     QListWidgetItem *item = new QListWidgetItem(name, ui.addressList);
                     item->setData(Qt::UserRole, email);
                     ui.addressList->setCurrentItem(item);
             }
     }

We execute the dialog. If the dialog is accepted, e.g., OK is clicked, we extract the Name an Email fields and create a QListWidgetItem with the given information.

Try out the application. Click Add, enter "John Doe" for the name and "john@johndoe.de" for the email. Click OK. The list widget should now contain the new item.

Displaying the Selected Item

When the user selects an item in the list widget, we would like to update the nameLabel and emailLabel at the bottom of the form. This requires another slot to be added to the AddressBook class.

In the addressbook.h file, add the following code in the private slots section of the class:

 void on_addressList_currentItemChanged();

Then add the block of code below to addressbook.cpp:

 void AddressBook::on_addressList_currentItemChanged()
 {
     QListWidgetItem *curItem = ui.addressList->currentItem();

         if (curItem) {
                 ui.nameLabel->setText("Name: " + curItem->text());
                 ui.emailLabel->setText("Email: " + curItem->data(Qt::UserRole).toString());
         } else {
                 ui.nameLabel->setText("<No item selected>");
                 ui.emailLabel->clear();
         }
 }

Thanks to the naming convention, this slot will automatically be connected to addressList's currentItemChanged() signal, and will be invoked whenever the selected item in the list changes.

Earlier, we added some code by double-clicking the Add button. This automatically creates a slot corresponding to the widget's default signal - the signal that you are most likely to be interested in - for example, clicked() for QPushButton. If you want to connect to another signal, you must write the code manually as we have done for the addressList's currentItemChanged() signal.

Adding Functionality for the Delete Button

Similar to the Add button, we implement a slot for the Delete button. Open the addressbook.ui file and double-click on Delete. This will pop a code editor up with an empty slot called on_deleteButton_clicked(). Type the following code in the slot's boy:

 QListWidgetItem *curItem = ui.addressList->currentItem();

     if (curItem) {
             int row = ui.addressList->row(curItem);
             ui.addressList->takeItem(row);
             delete curItem;

             if (ui.addressList->count() > 0)
                     ui.addressList->setCurrentRow(0);
             else
                     on_addressList_currentItemChanged();
     }

Your application is now complete!

Creating Qt Project File

If you want to build this application on other platforms, you need to create a .pro file for the project. A simple way to do this is to let the Visual Studio integration create a basic .pro file for you by clicking Qt|Create Basic .pro File. When the Export Project dialog shows up, ensure that the Create .pri File option is checked, then click OK. Visual Studio will then ask you where to save the .pri file. The default location and name is usually sufficient, so just click Save. For more information about .pro files and their associated .pri files, see Managing Projects.

That's it! You should now have a working .pro file and .pri file for your project. For more complex projects, manually editing the .pro file is required to make it work on all plaforms; however, for our simple project the generated .pro file is sufficient.

[Previous: Qt Visual Studio .NET Integration] [Contents] [Next: Managing Projects]

Publicité

Best Of

Actualités les plus lues

Semaine
Mois
Année
  1. « Quelque chose ne va vraiment pas avec les développeurs "modernes" », un développeur à "l'ancienne" critique la multiplication des bibliothèques 102
  2. Pourquoi les programmeurs sont-ils moins payés que les gestionnaires de programmes ? Manquent-ils de pouvoir de négociation ? 53
  3. «Le projet de loi des droits du développeur» : quelles conditions doivent remplir les entreprises pour que le développeur puisse réussir ? 73
  4. Les développeurs détestent-ils les antivirus ? Un programmeur manifeste sa haine envers ces solutions de sécurité 28
  5. Qt Commercial : Digia organise un webinar gratuit le 27 mars sur la conception d'interfaces utilisateur et d'applications avec le framework 0
  6. Quelles nouveautés de C++11 Visual C++ doit-il rapidement intégrer ? Donnez-nous votre avis 10
  7. 2017 : un quinquennat pour une nouvelle version du C++ ? Possible, selon Herb Sutter 11
Page suivante
  1. Linus Torvalds : le "C++ est un langage horrible", en justifiant le choix du C pour le système de gestion de version Git 100
  2. Comment prendre en compte l'utilisateur dans vos applications ? Pour un développeur, « 90 % des utilisateurs sont des idiots » 229
  3. Quel est LE livre que tout développeur doit lire absolument ? Celui qui vous a le plus marqué et inspiré 96
  4. Apple cède et s'engage à payer des droits à Nokia, le conflit des brevets entre les deux firmes s'achève 158
  5. Nokia porte à nouveau plainte contre Apple pour violation de sept nouveaux brevets 158
  6. Quel est le code dont vous êtes le plus fier ? Pourquoi l'avez-vous écrit ? Et pourquoi vous a-t-il donné autant de satisfaction ? 83
  7. « Quelque chose ne va vraiment pas avec les développeurs "modernes" », un développeur à "l'ancienne" critique la multiplication des bibliothèques 101
Page suivante

Le blog Digia au hasard

Logo

Déploiement d'applications Qt Commercial sur les tablettes Windows 8

Le blog Digia est l'endroit privilégié pour la communication sur l'édition commerciale de Qt, où des réponses publiques sont apportées aux questions les plus posées au support. Lire l'article.

Communauté

Ressources

Liens utiles

Contact

  • Vous souhaitez rejoindre la rédaction ou proposer un tutoriel, une traduction, une question... ? Postez dans le forum Contribuez ou contactez-nous par MP ou par email (voir en bas de page).

Qt dans le magazine

Cette page est une traduction d'une page de la documentation de Qt, écrite par Nokia Corporation and/or its subsidiary(-ies). Les éventuels problèmes résultant d'une mauvaise traduction ne sont pas imputables à Nokia. Qt vs-integration-1.4
Copyright © 2012 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon, vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.
Vous avez déniché une erreur ? Un bug ? Une redirection cassée ? Ou tout autre problème, quel qu'il soit ? Ou bien vous désirez participer à ce projet de traduction ? N'hésitez pas à nous contacter ou par MP !
 
 
 
 
Partenaires

Hébergement Web