Custom Widgets

In this example the widget we want to make usable for the designer is called RListView, which is derived from QListView. The plugin class we create will be named RListViewPlugin.

Creating the Plugin Class

Create the new header file as shown below:

#ifndef RLISTVIEWPLUGIN_H_
#define RLISTVIEWPLUGIN_H_

#include <qglobal.h>
#if QT_VERSION >= 0x050400
#include <QtUiPlugin/QDesignerCustomWidgetInterface>
#else
#include <QDesignerCustomWidgetInterface>
#endif

class RListViewPlugin: public QObject, public QDesignerCustomWidgetInterface {

    Q_OBJECT
    Q_INTERFACES(QDesignerCustomWidgetInterface)

public:
    RListViewPlugin(QObject *parent = 0);

    bool isContainer() const;
    bool isInitialized() const;
    QIcon icon() const;
    QString domXml() const;
    QString group() const;
    QString includeFile() const;
    QString name() const;
    QString toolTip() const;
    QString whatsThis() const;
    QWidget *createWidget(QWidget *parent);
    void initialize(QDesignerFormEditorInterface *core);

private:
    bool initialized;
};

#endif

Create the new class. Be sure to include both, the Plugin header file just created, and the header file of the widget you want to map. It might be necessary to include the base class of your class as well, in this example QListView (RListView derives for QListView).

#include "RListViewPlugin.h"
#include "RListView.h"

RListViewPlugin::RListViewPlugin(QObject *parent) :
    QObject(parent) {
    initialized = false;
}

void RListViewPlugin::initialize(QDesignerFormEditorInterface * /* core */) {
    if (initialized) {
        return;
    }
    initialized = true;
}

bool RListViewPlugin::isInitialized() const {
    return initialized;
}

QWidget *RListViewPlugin::createWidget(QWidget *parent) {
    // Return a new instance of your widget here.
    return new RListView(parent);
}

QString RListViewPlugin::name() const {
    // Change the value to return a suitable name.
    return "RListView";
}

QString RListViewPlugin::group() const {
    // The group where the plugins is shown in Designer.
    return "RCustomWidgets";
}

QIcon RListViewPlugin::icon() const {
    // If you want to have a own icon shown in Designer,
    // provide it here.
    return QIcon();
}

QString RListViewPlugin::toolTip() const {
    return "";
}

QString RListViewPlugin::whatsThis() const {
    return "";
}

bool RListViewPlugin::isContainer() const {
    return false;
}

QString RListViewPlugin::domXml() const {
    // Change the class and the default object name here.
    // Note: If your plugin has properties, they must be defined here.
    // See RColorComboPlugin.cpp and RColorCombo.h for an example.
    return "\
<ui language=\"c++\"> \
    <widget class=\"RListView\" name=\"listView\"> \
    </widget> \
</ui>\n";
}

QString RListViewPlugin::includeFile() const {
    // Return the header file of your class here.
    return "RListView.h";
}

Adding the new Plugin Class to the custom Widgets

Every plugin must be initialized in RCustomWidgets:

// existing includes
...
// include the created header file
#include "RListViewPlugin.h"

RCustomWidgets::RCustomWidgets(QObject *parent) :
    QObject(parent) {
    // existing plugins
    ...
    // append the new plugin to the widgets
    widgets.append(new RListViewPlugin(this));
}

That’s it. Re-start the Designer and check if the plugin library is loaded correctly (Menu “About: Plugins”). The newly create custom widgets is now shown under the group “RCustomWidgets”.