Qt Creator 4.0 is now released and since so many of you asked for it, we now publish the full uncut video that shows how to create the UI of a simple home automation application using the new Qt Quick 2 Controls.
https://youtu.be/hJKVb7WpQ_c
The resulting demo application is available here: Smart Home Demo Application
To use the material style, you have to set this environment variable: QT_LABS_CONTROLS_STYLE=material.
To customize the Material style, we manually import Qt.labs.controls.material 1.0 and set some of the attached properties:
Material.accent: Material.Orange
Material.theme: Material.Dark
One reason why we create PageBackground.qml in this demo is to define those properties once in PageBackground and then to use PageBackground as the root element for each form. The values of those properties are propagated to children in a way similar to using style sheets.
For each part of the UI, such as the side bar or the single tabs, we create a form as a .ui.qml file and a .qml file. While the .ui.qml file contains the layout, the .qml file contains the signal handlers and data models. This way the imperative parts of the implementation are separated from the pure declarative parts that are used for the UI.
Qt Creator supports this workflow by providing the "Goto Implementation" context menu. This makes it easy to implement new signal handlers and to navigate between the different files.
In the navigator, items in the .ui.qml file can be exported as alias properties. This is necessary to access them in the .qml file. This is done automatically when a signal handler is implemented, but for example the combo box is exported manually to define the model in the .qml file.
This approach allows any kind of complex logic in the .qml file while .ui.qml stays simple and declarative and can be opened in the Design mode even in later stages of the development.
