Introduction to QML

As mentioned in the introduction, QML has a JSON-like structure that be used to describe the elements on a user interface. A QML code imports one or more libraries and has a root element that contains all of the other visual and non-visual elements. The following is an example of a QML code that results in the creation of an empty window (ApplicationWindow type) with a specified width, height, and title:

    import QtQuick 2.7 
    import QtQuick.Controls 2.2 
 
    ApplicationWindow 
    { 
      visible: true 
      width: 300 
      height: 500 
      title: "Hello QML" 
    } 

Each import statement must be followed with a QML library name and version. In the preceding code, two of the main QML libraries that include most of the default types are imported. For instance, ApplicationWindow is defined inside the QtQuick.Controls 2.2 library. The only source of truth for existing QML libraries and their correct versions is the Qt documentation, so make sure to always refer...