Skip to content
Tino Pyssysalo edited this page May 15, 2018 · 7 revisions

Re-usable Components (P0 | 3h)

Explanation of the contents of a topic page @ Topic reference page

Back to Week 2

Objective: How to create good, re-usable components

Beginner

  • What is a component?

Intermediate

  • What is a content item?
  • What other properties should be made visible from the component?
  • How to define the header?
  • How to define the footer?

Expert

Omitted


Course material content

https://doc.qt.io/qt-5/qml-qtquick-controls2-applicationwindow.html

K: Don't know how to explain content item?

Tino: Take the button or something very similar. First, you may thing the button should have text or an icon or both. No, it could have a framed text. No, it could have padding in the frame. The developer may continue forever to specialise the properties and still it is not sufficient in some use cases. The content item maximises the re-usability of the component, as it's not specialised for any use case. Too specialised components is a very typical error. We also did it in Qt Quick Controls 1.

To this point, we have been making standalone components, but now we are going to see how to integrate them in to a user facing application with navigation, layout and styling.

Components are typically added to a root Window which acts as the top-level interface for user. There also exists an extended ApplicationWindow which contains convenient methods to add frequently used UI items to the window. It also provides an interface to control the the window's properties, appearance and layout from within QML.

ApplicationWindow contains item properties that can be populated with any Item or with ready-made containers such as ToolBar or TabBar. The header and footer items are positioned at the top and the bottom of the window, respectively.

import QtQuick.Controls 2.3

ApplicationWindow {
    visible: true

    header: ToolBar {
        // ...
    }

    footer: TabBar {
        // ...
    }

    StackView {
        anchors.fill: parent
    }
}

As previously discussed with making generic Components, it is not preferable to reference the id of the application root elements as this creates dependencies to other items. ApplicationWindow provides these generic properties create a interface to itself without creating a dependency to a certain window id.

TODO: explain content item

Instructions and description for the exercise of the topic


Exhaustive reference material mentioned in this topic

Further reading topics/links:

Clone this wiki locally