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.

../_images/tabdialog-example.png

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(QDialog):

    Q_OBJECT
# public
    TabDialog = explicit(QString fileName, QWidget parent = None)
# private
    tabWidget = QTabWidget()
    buttonBox = QDialogButtonBox()

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.

def __init__(self, fileName, parent):
    QDialog.__init__(self, parent)

    fileInfo = QFileInfo(fileName)
    tabWidget = QTabWidget
    tabWidget.addTab(GeneralTab(fileInfo), tr("General"))
    tabWidget.addTab(PermissionsTab(fileInfo), tr("Permissions"))
    tabWidget.addTab(ApplicationsTab(fileInfo), tr("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:

buttonBox = QDialogButtonBox(QDialogButtonBox.Ok                                         | QDialogButtonBox.Cancel)
connect(buttonBox, QDialogButtonBox.accepted, self, QDialog.accept)
connect(buttonBox, QDialogButtonBox.rejected, self, QDialog.reject)

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

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

Finally, we set the dialog’s title:

setWindowTitle(tr("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(QWidget):

    Q_OBJECT
# public
    GeneralTab = explicit(QFileInfo fileInfo, QWidget parent = None)

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:

def __init__(self, fileInfo, parent):
    QWidget.__init__(self, parent)

    fileNameLabel = QLabel(tr("File Name:"))
    fileNameEdit = QLineEdit(fileInfo.fileName())
    pathLabel = QLabel(tr("Path:"))
    pathValueLabel = QLabel(fileInfo.absoluteFilePath())
    pathValueLabel.setFrameStyle(QFrame.Panel | QFrame.Sunken)
    sizeLabel = QLabel(tr("Size:"))
    size = fileInfo.size()/1024
    sizeValueLabel = QLabel(tr("%1 K").arg(size))
    sizeValueLabel.setFrameStyle(QFrame.Panel | QFrame.Sunken)
    lastReadLabel = QLabel(tr("Last Read:"))
    lastReadValueLabel = QLabel(fileInfo.lastRead().toString())
    lastReadValueLabel.setFrameStyle(QFrame.Panel | QFrame.Sunken)
    lastModLabel = QLabel(tr("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)
    setLayout(mainLayout)

PermissionsTab Class Definition

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

class PermissionsTab(QWidget):

    Q_OBJECT
# public
    PermissionsTab = explicit(QFileInfo fileInfo, QWidget parent = None)

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:

def __init__(self, fileInfo, parent):
    QWidget.__init__(self, parent)

    permissionsGroup = QGroupBox(tr("Permissions"))
    readable = QCheckBox(tr("Readable"))
    if (fileInfo.isReadable())
        readable.setChecked(True)
    writable = QCheckBox(tr("Writable"))
    if ( fileInfo.isWritable() )
        writable.setChecked(True)
    executable = QCheckBox(tr("Executable"))
    if ( fileInfo.isExecutable() )
        executable.setChecked(True)
    ownerGroup = QGroupBox(tr("Ownership"))
    ownerLabel = QLabel(tr("Owner"))
    ownerValueLabel = QLabel(fileInfo.owner())
    ownerValueLabel.setFrameStyle(QFrame.Panel | QFrame.Sunken)
    groupLabel = QLabel(tr("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)
    setLayout(mainLayout)

ApplicationsTab Class Definition

The ApplicationsTab is another placeholder widget that is mostly cosmetic:

class ApplicationsTab(QWidget):

    Q_OBJECT
# public
    ApplicationsTab = explicit(QFileInfo fileInfo, QWidget parent = None)

ApplicationsTab Class Implementation

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

def __init__(self, fileInfo, parent):
    QWidget.__init__(self, parent)

    topLabel = QLabel(tr("Open with:"))
    applicationsListBox = QListWidget()
    applications = QStringList()
    for i in range(1, 31):
        applications.append(tr("Application %1").arg(i))
    applicationsListBox.insertItems(0, applications)
    alwaysCheckBox = QCheckBox()
    if (fileInfo.suffix().isEmpty())
        alwaysCheckBox = QCheckBox(tr("Always use self application to "
            "open self type of file"))
else:
        alwaysCheckBox = QCheckBox(tr("Always use self application to "
            "open files with the extension '%1'").arg(fileInfo.suffix()))
    layout = QVBoxLayout()
    layout.addWidget(topLabel)
    layout.addWidget(applicationsListBox)
    layout.addWidget(alwaysCheckBox)
    setLayout(layout)

Example project @ code.qt.io