KDevelop TechNotes

Issue 2: RAD with KDevelop using C++/Qt/KDE

In this issue we will cover rapid development of applications with graphical user interfaces. Developing GUI in C++ language is usually considered as a hard task. Fortunately, Qt library greatly simplified it but till recent no tool was available to allow joint development of GUI and code. Pascal and Java developers has been enjoying such tools for several years (Delphi, Kylix, Forte come in mind). KDevelop 3.1 has now the same capabilities.

Creating a simple Qt application with a graphical interface

Open KDevelop, choose Project->New Project from the menu and create a C++ / QMake project / Hello world program.
Open QMake Manager tool window (at the right side of KDevelop window).
Select 'src' subproject.
Right click on a FORMS and select 'Create New File'.
Create 'mainbase.ui' file from Widget (.ui) template.
Double click on 'mainbase.ui' in QMake Manager to open integrated designer. You should now see integrated designer with an empty form.
Screenshot: cpprad1.png
Change the name of a form to 'MainBase'.
Put a PushButton onto a form and go to 'Signal Handlers' view.
Add a signal handler (by right click menu) to the 'clicked()' signal. After this 'Create or Select Implementation Class for: MainBase' dialog should appear asking you to enter subclass name. Enter, for example, MainImpl as a class name there and press OK.
Two files with a form subclass will be created and opened: mainimpl.h and mainimpl.cpp. Cursor will be positioned on the first line of MainImpl::pushButton1_clicked() method definition. You can put your code there (try something like qWarning("Hello"); for the beginning).
Screenshot: cpprad2.png

Open a file with main() function and change its contents to:

#include <qapplication.h>
#include "mainimpl.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    
    MainImpl widget;
    app.setMainWidget(&widget);
    widget.show();
    
    return app.exec();
}

Save all files (do not forget to explicitly save the mainbase.ui form too).
Build and run the project. You should get a window with one button.

Note: You can define as many slots as you want. Designer integration will add slot implementations to the subclass and will not overwrite your code.

Creating a simple KDE application with a graphical interface

Creation of KDE application is a similar process:

Create a C++ / KDE / Simple Designer based KDE Application.
Open Automake Manager and select 'src' subproject. In the details view you should see existing form (<appname>widgetbase.ui file) which was already created by the application wizard.
Open the form in integrated designer.
Select 'Click Me!' button, go to 'Signal Handlers' view and add another slot to a 'clicked()' signal.
In 'Create or Select Implementation' dialog do not create a new subclass, instead choose 'Use existing class' radiobutton and select <appname>Widget class. Choose OK and look at <appname>Widget.cpp (h) files - new slot is added there.
Add some code to a slot definition then build and run the application. You should get a KDE application with one window and one button inside that window.

Notes

Delphi and Kylix users will find this process similar to what they used to in their IDEs. KDevelop offers now the same for C++/Qt/KDE developers. As you might notice, KDevelop uses subclassing approach to create form implementations. This means that you will have to create a form and implement all slots in a subclass of that form. This is considered saner than having .ui.h files with slot implementations.

Technical background

KDevelop version >= 3.1 comes with a customized version (fork ;)) of Qt Designer. It is called KDevelop Designer (KDevDesigner, kdevdesigner from the command line). KDevDesigner has some important differences:

KDevDesigner provides a read/write KPart which can be embedded into any application which wants to edit .ui files. KDevelop IDE embeds KDevDesigner this way.
KDevDesigner uses KDE icons and dialogs and thus provides better integration with a system.
It is safe to preview forms with some KDE widgets from kdeui and kio libraries - KDevDesigner part is linked to those libraries so it will not crash under some circumstances.
KDevDesigner will not create .ui.h files - this feature is completely disabled. Integrated KDevDesigner will use subclassing approach, standalone does not allow to enter code.

When KDevDesigner is embedded into KDevelop shell, its signals (defined in KInterfaceDesigner interface, kinterfacedesigner/designer.h include file, kdevelop/lib/interfaces/external in sources):

    void addedFunction(DesignerType type, const QString &formName, Function function)
    void removedFunction(DesignerType type, const QString &formName, Function function)
    void editedFunction(DesignerType type, const QString &formName, Function oldFunction, Function function)
    void editFunction(DesignerType type, const QString &formName, const QString &functionName)

are connected to corresponding slots of KDevelop designer integration engine which can be implemented in KDevelop language support plugin. Each language support which wants to use integrated designer, must reimplement

virtual KDevDesignerIntegration *KDevLanguageSupport::designer(KInterfaceDesigner::DesignerType type)

method and return designer integration object. Convenience designer integration library is available for programming language support developers. It is located in kdevelop/languages/lib/designer_integration directory inside kdevelop source tree. With the convenience library writing Qt designer integration for the language is a trivial task.

It is worth mentioning that it is technically possible to integrate not only Qt Designer, but also, for example, Glade. Glade-3 can be compiled as a library and probably be embedded via XParts technology.

Interested parties should look at http://www.kdevelop.org/HEAD/doc/api/html/ for the detailed description of KDevelop API.

Currently Qt Designer integration is implemented in KDevelop version 3.1 for C++ and in recent development version (CVS HEAD, in the future - 3.2) also for Ruby language.

KDevelop team is looking for volunteers to implement Qt Designer integration for Python, Java and KJS.

Installation

KDevelop version >= 3.1 has all features discussed in this article. However you might want to check out recent development versions to have latest features and updates.

KDevelop downloads:
Recent version: http://www.kdevelop.org/index.html?filename=HEAD/download.html
Stable version: http://www.kdevelop.org/index.html?filename=download.html

Discuss this article: http://www.kdevelop.org/phorum5/read.php?2,26442

Permission to copy, publish and modify this document without restrictions is granted.

Everybody is welcome to share KDevelop knowledge and experience. We accept any materials for the future issues of KDevelop TechNotes.

Reviews:

30.11.2004 - first revision.

01.12.2004 - corrected links.