Tab Dialog Example

The Tab Dialog example shows how to construct a tab dialog using the QTabWidget class.

Dialogs provide an efficient way for the application to communicate with the user, but complex dialogs suffer from the problem that they often take up too much screen area. By using a number of tabs in a dialog, information can be split into different categories, while remaining accessible.

The Tab Dialog example consists of a single TabDialog class that provides three tabs, each containing information about a particular file, and two standard push buttons that are used to accept or reject the contents of the dialog.

TabDialog Class Definition

The TabDialog class is a subclass of QDialog that displays a QTabWidget and two standard dialog buttons. The class definition only contain the class constructor and a private data member for the QTabWidget :

class TabDialog : public QDialog
{
    Q_OBJECT

public:
    explicit TabDialog(const QString &fileName, QWidget *parent = nullptr);

private:
    QTabWidget *tabWidget;
    QDialogButtonBox *buttonBox;
};

In the example, the widget will be used as a top-level window, but we define the constructor so that it can take a parent widget. This allows the dialog to be centered on top of an application’s main window.

TabDialog Class Implementation

The constructor calls the QDialog constructor and creates a QFileInfo object for the specified filename.

class TabDialog (QDialog):
    def __init__(self, fileName, parent = None):
        QDialog.__init__(self, parent)
        fileInfo = QFileInfo(fileName)

        self.tabWidget = QTabWidget()
        self.tabWidget.addTab(GeneralTab(fileInfo), "General")
        self.tabWidget.addTab(PermissionsTab(fileInfo), "Permissions")
        self.tabWidget.addTab(ApplicationsTab(fileInfo), "Applications")

The tab widget is populated with three custom widgets that each contain information about the file. We construct each of these without a parent widget because the tab widget will reparent them as they are added to it.

We create two standard push buttons, and connect each of them to the appropriate slots in the dialog:

self.buttonBox = QDialogButtonBox(QDialogButtonBox.Ok
                             | QDialogButtonBox.Cancel)

self.buttonBox.accepted.connect(self.accept)
self.buttonBox.rejected.connect(self.reject)

We arrange the tab widget above the buttons in the dialog:

mainLayout = QVBoxLayout()
mainLayout.addWidget(tabWidget)
mainLayout.addWidget(buttonBox)
self.setLayout(mainLayout)

Finally, we set the dialog’s title:

self.setWindowTitle("Tab Dialog")

Each of the tabs are subclassed from QWidget , and only provide constructors.

GeneralTab Class Definition

The GeneralTab widget definition is simple because we are only interested in displaying the contents of a widget within a tab:

class GeneralTab : public QWidget
{
    Q_OBJECT

public:
    explicit GeneralTab(const QFileInfo &fileInfo, QWidget *parent = nullptr);
};

GeneralTab Class Implementation

The GeneralTab widget simply displays some information about the file passed by the TabDialog. Various widgets for this purpose, and these are arranged within a vertical layout:

class GeneralTab (QWidget):
    def __init__(self, fileInfo, parent = None):
        QWidget.__init__(self, parent)
        fileNameLabel = QLabel("File Name:")
        fileNameEdit = QLineEdit(fileInfo.fileName())

        pathLabel = QLabel("Path:")
        pathValueLabel = QLabel(fileInfo.absoluteFilePath())
        pathValueLabel.setFrameStyle(QFrame.Panel | QFrame.Sunken)

        sizeLabel = QLabel("Size:")
        size = fileInfo.size()/1024
        sizeValueLabel = QLabel("%d K" % size)
        sizeValueLabel.setFrameStyle(QFrame.Panel | QFrame.Sunken)

        lastReadLabel = QLabel("Last Read:")
        lastReadValueLabel = QLabel(fileInfo.lastRead().toString())
        lastReadValueLabel.setFrameStyle(QFrame.Panel | QFrame.Sunken)

        lastModLabel = QLabel("Last Modified:")
        lastModValueLabel = QLabel(fileInfo.lastModified().toString())
        lastModValueLabel.setFrameStyle(QFrame.Panel | QFrame.Sunken)

        mainLayout = QVBoxLayout()
        mainLayout.addWidget(fileNameLabel)
        mainLayout.addWidget(fileNameEdit)
        mainLayout.addWidget(pathLabel)
        mainLayout.addWidget(pathValueLabel)
        mainLayout.addWidget(sizeLabel)
        mainLayout.addWidget(sizeValueLabel)
        mainLayout.addWidget(lastReadLabel)
        mainLayout.addWidget(lastReadValueLabel)
        mainLayout.addWidget(lastModLabel)
        mainLayout.addWidget(lastModValueLabel)
        mainLayout.addStretch(1)
        self.setLayout(mainLayout)

PermissionsTab Class Definition

Like the GeneralTab, the PermissionsTab is just used as a placeholder widget for its children:

class PermissionsTab : public QWidget
{
    Q_OBJECT

public:
    explicit PermissionsTab(const QFileInfo &fileInfo, QWidget *parent = nullptr);
};

PermissionsTab Class Implementation

The PermissionsTab shows information about the file’s access information, displaying details of the file permissions and owner in widgets that are arranged in nested layouts:

class PermissionsTab (QWidget):
    def __init__(self, fileInfo, parent = None):
        QWidget.__init__(self, parent)
        permissionsGroup = QGroupBox("Permissions")

        readable = QCheckBox("Readable")
        if fileInfo.isReadable():
            readable.setChecked(True)

        writable = QCheckBox("Writable")
        if fileInfo.isWritable():
            writable.setChecked(True)

        executable = QCheckBox("Executable")
        if fileInfo.isExecutable():
            executable.setChecked(True)

        ownerGroup = QGroupBox("Ownership")

        ownerLabel = QLabel("Owner")
        ownerValueLabel = QLabel(fileInfo.owner())
        ownerValueLabel.setFrameStyle(QFrame.Panel | QFrame.Sunken)

        groupLabel = QLabel("Group")
        groupValueLabel = QLabel(fileInfo.group())
        groupValueLabel.setFrameStyle(QFrame.Panel | QFrame.Sunken)

        permissionsLayout = QVBoxLayout()
        permissionsLayout.addWidget(readable)
        permissionsLayout.addWidget(writable)
        permissionsLayout.addWidget(executable)
        permissionsGroup.setLayout(permissionsLayout)

        ownerLayout = QVBoxLayout()
        ownerLayout.addWidget(ownerLabel)
        ownerLayout.addWidget(ownerValueLabel)
        ownerLayout.addWidget(groupLabel)
        ownerLayout.addWidget(groupValueLabel)
        ownerGroup.setLayout(ownerLayout)

        mainLayout = QVBoxLayout()
        mainLayout.addWidget(permissionsGroup)
        mainLayout.addWidget(ownerGroup)
        mainLayout.addStretch(1)
        self.setLayout(mainLayout)

ApplicationsTab Class Definition

The ApplicationsTab is another placeholder widget that is mostly cosmetic:

class ApplicationsTab : public QWidget
{
    Q_OBJECT

public:
    explicit ApplicationsTab(const QFileInfo &fileInfo, QWidget *parent = nullptr);
};

ApplicationsTab Class Implementation

The ApplicationsTab does not show any useful information, but could be used as a template for a more complicated example:

class ApplicationsTab (QWidget):
    def __init__(self, fileInfo, parent = None):
        QWidget.__init__(self, parent)
        topLabel = QLabel("Open with:")

        applicationsListBox = QListWidget()
        applications = []

        for i in range(30):
            applications.append("Application %d" %s i)
        applicationsListBox.insertItems(0, applications)

        if fileInfo.suffix().isEmpty():
            alwaysCheckBox = QCheckBox("Always use this application to open this type of file")
        else:
            alwaysCheckBox = QCheckBox("Always use this application to open files with the extension '%s'" % fileInfo.suffix())

        layout = QVBoxLayout()
        layout.addWidget(topLabel)
        layout.addWidget(applicationsListBox)
        layout.addWidget(alwaysCheckBox)
        self.setLayout(layout)

Example project @ code.qt.io