Adding widgets to Qt Designer

Question

I have recently discovered that Qt supports custom widgets, and that there are sites that provide this kind of widgets ( like Qt-Apps ). If it is relevant, I am interested in getting this widget.

I have downloaded the source code for it, I have extracted it etc. I haven't tried to build it yet, but what I am interested in is having that widget in the widget list in the left side of the Qt Designer so that I can use it my applications.

I either don't know how to search what I am looking for, or it doesn't exist at all. Please help me with this problem.

Answer 1

There are two ways:

A. Use promotion

The simplest way. This method direct take the source without building it.

B. Build a plugin lib for Designer

It's a little bit tedious...

---

To make it short, supposed you have a desired class(widget): CustomWidget with customwidget.cpp and customwidget.h.

1. Create a new factory class, maybe call it CustomWidgetPlugin and public inherit QObject and QDesignerCustomWidgetInterface and reimplement some virtual functions.

example:

customwidget.h :

    #include <QDesignerCustomWidgetInterface>
    #include "customwidget.h"

    class CustomWidgetPlugin : public QObject, public QDesignerCustomWidgetInterface
    {
        Q_OBJECT
        Q_INTERFACES(QDesignerCustomWidgetInterface) // note this line, it tell moc that the second base class is a plugin interface.

    public:
        CustomWidget(QObject *parent = 0);
        QString name() const;
        QString includeFile() const;
        QString group() const;
        QIcon icon() const;
        QString toolTip() const;
        QString whatsThis() const;
        bool isContainer() const;
        QWidget *createWidget(QWidget *parent);
    };

customwidget.cpp :

constructor:

CustomWidget::CustomWidgetPlugin(QObject *parent)
: QObject(parent)
{
}

name getter:

QString CustomWidgetPlugin::name() const
{
    return "CustomWidget";
}

headerfile getter:

QString CustomWidgetPlugin::includeFile() const
{
    return "customwidget.h";
}

group name getter:

QString CustomWidgetPlugin::group() const
{
    return tr("New Group");
}

(the group name define where the widget belongs, and it creates a new group if the name doesn't fit any default group)

icon (for the displayed icon in designer):

QIcon CustomWidgetPlugin::icon() const
{
    return QIcon(":/images/icon.png");
}

tool tip for the widget:

QString  CustomWidgetPlugin::toolTip() const
{
    return tr("This is a widget, got it?");
}

information of what is this:

QString CustomWidgetPlugin::whatsThis() const
{
    return tr("A widget, already said.");
}

define if it is a "container" (can hold another widget or not):

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

The factory memeber function:

QWidget *CustomWidgetPlugin::createWidget(QWidget *parent)
{
    return new CustomWidget(parent);
}

IMPORTANT!!

At the end of customwidget.cpp file, add this macro:

Q_EXPORT_PLUGIN2(customwidgetplugin , CustomWidgetPlugin) // (the widget name, the class name)

It makes the plugin available the Qt deisgner.

Finally, in your .pro file:

TEMPLATE = lib
CONFIG += designer plugin release
HEADERS = ../customwidget.h \
customwidgetplugin.h
SOURCES = ../customwidget.cpp \
customwidgetplugin.cpp
RESOURCES = customwidget.qrc
DESTDIR = $(QTDIR)/plugins/designer #assume QTDIR environment variable is set to the directory where Qt is installed.

After building this project, next time as you open Qt designer, you will see the widget.

Ref: C++ GUI Programming with Qt 4