Hawaii System Preferences, Part 2: How preflets are loaded

System Preferences can be extended with plugins.

Plugins inherit PreferencesModulePlugin and return a new PreferencesModule instance that has preflet information such as name, description, icon name, category, whether it requires administrative privileges (helpful for preflets that deal with system settings).

System Settings has a simple model that iterates over the plugins directory, load plugins with QPluginLoader and create module instances.

In the QtWidgets-based version, PreferencesModule inherited from QWidget, the preflet was then a widget that System Preferences added to a stacked widget. When the corresponding icon was clicked, the current index was changed showing the preflet's widget.

Since I'm rewriting everything in QML, PreferencesModule now inherits from QObject and has a new item() method that preflets implement returning a QQuickItem object created by loading the QML code embedded into the resources with QQmlComponent.

The loading mechanism is pretty much the same, the model exposes the QQuickItem with the item role, when the preflet icon is clicked the item is pushed to a StackView.

Hawaii System Preferences

With the imminent release of Qt 5.1, QML is going to be a serious tool for desktop applications development.

With QtQuick Layouts and QtQuick Controls we can finally create complex user interfaces and drop QtWidgets and that's exactly my goal for the Hawaii System Preferences applications.

This is how it looks like today:

System Preferences uses KDE's categorized view imported into Vibe, which is a nice view that allows you to categorize a list view and filter the results; in this case I filter the results by keyword to gray out and disable icons that don't meet the search criteria:

However, as you can see from the screenshots, there's an annoying bug that cuts the labels out.

Rewriting it with QML is easy, here's the code for the main window:

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
import Hawaii.SystemPreferences 0.1

ApplicationWindow {
    id: root
    title: qsTr("System Preferences")
    width: 640
    height: 640
    minimumWidth: 640
    minimumHeight: 640

    toolBar: ToolBar {
        id: mainToolBar
        width: parent.width

        RowLayout {
            anchors.fill: parent
            spacing: 10

            ToolButton {
                action: actionBack
            }

            Item {
                Layout.fillWidth: true
            }

            TextField {
                id: searchEntry
                placeholderText: qsTr("Keywords")

                Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
            }
        }
    }

    Action {
        id: actionBack
        iconName: "view-grid-symbolic"
    }

    StackView {
        id: pageStack
        anchors.fill: parent

        initialItem: Item {
            width: parent.width
            height: parent.height

            ColumnLayout {
                anchors.fill: parent

                Repeater {
                    model: CategoriesModel {}

                    GroupBox {
                        title: label

                        Layout.fillWidth: true
                        Layout.fillHeight: true

                        ScrollView {
                            anchors.fill: parent

                            GridView {
                                id: gridView
                                model: PrefletsProxyModel {}
                                delegate: GridDelegate {
                                    width: gridView.cellWidth
                                }
                                clip: true
                                cellWidth: 100

                                Component.onCompleted: gridView.model.setFilterFixedString(name)
                            }
                        }
                    }
                }
            }
        }
    }
}

Unfortunately I couldn't find a replacement for the categorized view so I decided to repeat a scrollable grid view inside a group box for each category. Far from what I want but it seems the grid view doesn't have something like this, but there's time to improve System Preferences.

The grid delegate was easy to do:

import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

ColumnLayout {
    Image {
        source: "image://desktoptheme/" + iconName
        sourceSize: Qt.size(48, 48)
        width: 48
        height: 48

        Layout.alignment: Qt.AlignCenter
    }

    Label {
        text: title
        horizontalAlignment: Qt.AlignHCenter
        wrapMode: Text.Wrap

        Layout.fillWidth: true
    }
}

And here's how it looks like:

Colors are from the standard Qt palette which will be replaced with some grayish palette for Hawaii soon.