2.00
Explanation of the contents of a topic page @ Week 1 Topic 1
_Objective: To be able to develop, build and run a simple QML application
E: BTW, I've made the changes you asked for, there are still a few "blanks" (QML syntax was moved to .qml files), could you please let me know if it feels like something more should be added to the introduction that would be of value that hasn't been mentioned yet?
Comment: QML scene would be good to mention. Students will save time, as they do not have to re-compile the application every time they want to test the UI.
- What is a declarative scripting language?
- What is a multi-paradigm language?
- What is Qt Quick?
- What is QML? What does the M in QML stand for?
- Where does JavaScript fit into all of this?
- Do we want to use JavaScript or native code? When do we want to use which one?
- What do I need to do to make Qt Quick applications?
- What are the relevant modules?
- What kind of files do I need when working with QML?
- How does QML differ from C++?
- Why is QML more suitable in GUI development than C++?
Comment: How QML differs from C++? Why QML is more suitable in DUI development than C++? (This text in parenthesis is for your information: declarative vs. imperative language. Declarative language more suitable for UI declaration. Easy to learn).
E: Development Under the Influence (DUI) sounds like a fantastic new software development paradigm. We should pivot.
- Will this enable my Solaris OS toaster to shoot lasers and play disco music?
https://en.wikipedia.org/wiki/Qt_Quick
https://en.wikipedia.org/wiki/QML
http://doc.qt.io/qtcreator/quick-projects.html
http://doc.qt.io/qt-5/qtqml-index.html
https://wiki.qt.io/Qt_Quick
https://wiki.qt.io/Introduction_to_Qt_Quick
http://doc.qt.io/qt-5/qtquick-index.html
http://doc.qt.io/qt-5/qmlapplications.html
https://doc.qt.io/qt-5/qtqml-syntax-objectattributes.html
http://doc.qt.io/qt-5/qmlreference.html
Last week we mainly worked on introductory topics about Qt, discussing application logic, which drives the inner workings of your applications. In addition to logic, however, we usually want to create a user interface for the user to interact with as well. Preferably a flashy, cool looking graphical user interface that shoots lasers and plays disco music when the user interacts with the interface. Who doesn't love lasers and disco music?!
Comment: I'd emphasise that everything learnt in the first week is still relevant to implement the application logic. (Implementing the logic in JS results often to worse perf even when just in time compiler is used.)
E: Better?
Comment: This is good
This week we are going to be talking about creating user interfaces using Qt Quick. The tool we will be using is the declarative scripting language QML. When creating applications with Qt, you should use C++ for the application logic and QML only for the user interface. The numbers vary per application, but you could imagine roughly 80% of your code being written in C++ and the remaining 20% in QML.
Comment: Perhaps little bit softer phrasing: instead of saying, you should, we could say: When creating applications with Qt, typically the best result is achieved by implementing the UI with QML and application logic with C++.
JavaScript can be used to enrich user interface description, however we will mainly focus on QML during this course. Please note that as with QML, JavaScript should only be used for the user interface, as performance will almost always be worse with logic implemented using JavaScript in comparison to C++.
We will return to the topic of interconnecting application logic written in C++ with QML in Week 4.
In the Qt Creator there exists a graphical UI design tool, called Qt Quick Designer, which we will not be using during this course. QML is simple enough to be written and understood without the design mode.
http://doc.qt.io/qt-5/qmlapplications.html
http://doc.qt.io/qt-5/qtquick-index.html
https://wiki.qt.io/Qt_Quick
https://en.wikipedia.org/wiki/Qt_Quick
[Intuitive User Interfaces Design-Oriented Rapid Prototyping and Production Easy Deployment Enable designer and developers to work on the same sources ] [SLIDES, incorporate this into intro somehow?]
Qt Quick is a module, consisting of types and functionality for QML. It includes visual types, interactive types, animations, models and views, particle effects and shader effects. A QML application developer can get access to all of that functionality with a single import statement.
The Qt Quick QML library is provided by the Qt Quick module. For in-depth information about the various QML types and other functionality provided by Qt Quick, please see the Qt Quick module documentation.
Comment: The previous paragraph starts with QtQuick and the one earlier Qt Quick. Let's use Qt Module, i.e. Qt Quick, Qt Widgets everywhere, even when it refers to the library name and WE write it with white space.
When using the Qt Quick module, you will need to know how to write QML applications using the QML language.
Comment: Now the module name is QtQuick... and above it was Qt Quick.
E: Fixed. It might not prevent me from doing similar mistakes as I'm not even sure if those are neglected typos or contextual typos, good thing atleast someone notices them ;D
Using the Qt Quick module, designers and developers can efficiently work with the same product development project, without long cycles, waiting designers to change or developers implement certain UI features. This can significantly reduce the require product development time.
http://doc.qt.io/qt-5/qtqml-index.html
https://en.wikipedia.org/wiki/QML
http://doc.qt.io/qt-5/qmlapplications.html
http://doc.qt.io/qt-5/qmlreference.html
http://doc.qt.io/qt-5/qmltypes.html
QML stands for Qt Meta-Object Language, AKA Qt Modelling Language, and it's a user interface markup language.
The Qt QML module provides a framework for developing applications and libraries with the QML language. It defines and implements the language and engine infrastructure, and provides an API to enable application developers to extend the QML language with custom types and integrate QML code with JavaScript and C++. The Qt QML module provides both a QML API and a C++ API.
You'll want to work on your application logic using C++. It will in most cases result in better performance than implementing logic using JavaScript.
E: Am I going to get into copyright problems for using the dudes from the slides? I liked the visual distinction between the propeller hat developer guy and the designer nerd guy
Comment: This are well-known dudes in our materials. They can be used actually by anyone, not only by us.
QML is a declarative language that allows user interfaces to be described in terms of their visual components and how they interact and relate with one another. It is a highly readable language that was designed to enable components to be interconnected in a dynamic manner, and it allows components to be easily reused and customized within a user interface. Using the Qt Quick module, designers and developers can easily build fluid animated user interfaces in QML, and have the option of connecting these user interfaces to any back-end C++ libraries.
Comment: Some of the text above, I'd mention at the very beginning (look at my comment about QML vs. C++). For example: Using the Qt Quick module, designers and developers can efficiently work with the same product development project, without long cycles, waiting designers to change or developers implement a certain UI features. This can significantly reduce the require product development time.
E: I put this in the end of Qt Quick, let me know if you want it anywhere else.
Comment: good place. (I still need to read the whole stuff through.
With QML, UI components are declared with objects, object properties and property bindings, set to define the application behavior. Application behavior can be further scripted through JavaScript, which is a subset of the language. In addition, QML heavily uses Qt, which allows types and other Qt features to be accessible directly from QML applications.
Comment: The above text still confuses me: UI components are declared with objects, object properties, and property bindings.
E: These are just copy pastes from different parts of the wiki/docs
Comment: Yes, looks good to me at least. I'd mention already here that developers should prefer using C++ to JavaScript, as in many cases C++ performance is better. (perhaps not going into details of QML cache or JIT compilation yet.)
E: This has been emphasized now. Is it enough?
Comment: I would say it in a more straightforward way. ... subset of the language. In most cases however, the best performance is achieved by implementing the ... in C++. Under the hood QML itself is heavily using C++.
[Something all around useful to know about .qml files if there is something, such as that in general they are a thing that exists]
[Something all around useful to know about where the .qml files are located in projects and/or directory structure]
Comment: Perhaps reference to C++ object trees. Each QML file contains exactly one root object, with any number of children. The root is also the owner of children.
QML is a multi-paradigm language that enables objects to be defined in terms of their attributes and how they relate and respond to changes in other objects. In contrast to purely imperative code, where changes in attributes and behavior are expressed through a series of statements that are processed step by step, QML's declarative syntax integrates attribute and behavioral changes directly into the definitions of individual objects. These attribute definitions can then include imperative code, in the case where complex custom application behavior is needed.
Comment: bindings must be mentioned above. respond to changes in other objects. These relations are property bindings.
QML source code is generally loaded by the engine through QML (.qml) documents, which are standalone documents of QML code. These can be used to define QML object types that can then be reused throughout an application. Note that type names must begin with an uppercase letter in order to be declared as QML object types in a QML file.
A QML document may have one or more imports at the top of the file. An import can be any one of:
- a versioned namespace into which types have been registered (e.g., by a plugin)
- a relative directory which contains type-definitions as QML documents
- a JavaScript file
JavaScript file imports must be qualified when imported, so that the properties and methods they provide can be accessed.
The generic form of the various imports are as follows:
import Namespace VersionMajor.VersionMinor
import Namespace VersionMajor.VersionMinor as SingletonTypeIdentifier
import "directory"
import "file.js" as ScriptIdentifierExamples:
import QtQuick 2.0
import QtQuick.LocalStorage 2.0 as Database
import "../privateComponents"
import "somefile.js" as ScriptThe contents of a QML file is constructed as an object tree, much like C++ object trees.
Each QML file contains exactly one root object, with any number of children. The root is also the owner of the children.
The following example includes 4 objects; Item, Image, MouseArea and NumberAnimation.
Comment: I'd say number of children rather than amount of children. Well, English is not my best expertise.
E: This is why its better to have someone else proofreading your own text :D
The Item-object is the root object of this particular QML file. It has the children Image, MouseArea (which is of course also the child object of Image) and NumberAnimation. All of the objects naturally have properties, which describe the objects.
Comment: Yes, objects have attributes, but prefer using property, as it's a Qt-specific term.
TODO: Say something about Object id:s and how it's probably a good idea to id your root object as id. Also referring to parent items using parent.
Comment: In my opinion, this is not needed. The id's are explained well in the next section/module 2.01
To include QML in your projects, you need to complete these three steps:
- To include the definitions of the module's classes, use the following directive:
#include <QtQml>- The QML types in Qt QML are available through the QtQML import. To use the types, add the following import statement to your .qml file:
import QtQml 2.0- To link against the module, add this line to your qmake .pro file:
QT += qmlTo prototype user interfaces even more quickly, one can create a Qt Quick UI project. These projects do not contain any C++ code, resource .qrc or deployment code (qmake files). This way the potential designer can launch the application without compiling any code or developer can quickly share proof-of-concepts.
One can also enable a keyboard shortcut for the prototyping application qmlscene, which renders any arbitary .qml files. qmlscene can be enabled in Qt Creator by going to Options -> Environment -> Keyboard -> search for qmlscene -> assign shortcut. When a .qml file is open in the Edit or Design mode, hit the shortcut to render the file.
E: Is there anything of value to be said of this? I'll leave the subtopic to be worked on later, anyway, or delete it if it seems unnecessary
Comment: It is important as we want to emphasise that designer does not need to compile any project but easily just view the QML content. But it can be just a short note. It is possible to quickly prototype UIs without compiling the complete application project. qmlscene renders the UI, created as an QML UI project.
E: Mixing JS with C++, what are the rules? How does this all mesh together? What's the general ratio between C++ and JS when writing QML? Do you even need to know this stuff? Perhaps it will become clear throughout the course but I would maybe want to have some general guidance about the relations between the two when working with QML. Are we going to assume students are familiar with declarative languages in general and/or JS?
Comment: C++/QML is one of the key points in the training. In my plan, Week 4 is reserved for that. The idea is that using a declarative language we instantiate (QML engine does) C++ objects (QObject or QQuickItem typically). Then we bind properties and the main task of the engine is to bind and keep properties updated (using signals and slots of course). QML should be used only for UI. All logic should be done in C++. The ratio depends heavily on the application, but easily 80% in C++ and 20% in QMK. It is possible to write apps with QML, but perf sucks. Defining new UI types in QML is ok, but even UI controls benefit, if defined in C++. Using QML only results typically a huge number of C++ objects, which increases the startup time and object creation in general because of a large number of memory allocs. We implemented Qt Quick Controls purely in QML and the performance sucks especially in embedded partly because of memory allocations a and partly because of event handling. Rather than using a separate object, such as MouseArea, with all UI controls, the control should handle the GUI events in C++ and provide signals to QML. That makes MouseArea object creation and usage obsolete. And the last sentence. The good pattern is to use C++ and QML. The other direction is possible, but results typically very poor code, where the UI is not re-usable and hard to maintain.
E: This is good stuff (it's also really cool when it starts to open up)! I'll save this for my own references. I could use this as an introduction for week 4, I think I'm going to skip this subtopic and add the syntax into the .qml file chapter instead
http://doc.qt.io/qt-5/qmlreference.html
http://doc.qt.io/qt-5/qmltypes.html
https://doc.qt.io/qt-5/qtqml-syntax-objectattributes.html