firststepsqml.qdoc

Go to the documentation of this file.

// Copyright (C) 2016 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
/*!
\page qmlfirststeps.html
\meta {keywords} {qmltopic}
\title First Steps with QML
\brief Basic QML application development examples
 
\section1 Creating a QML Document
 
A QML document defines a hierarchy of objects with a highly-readable,
structured layout. Every QML document consists of two parts: an imports
section and an object declaration section. The types and functionality most
common to user interfaces are provided in the \c{QtQuick}
import.
 
\section2 Importing and Using the QtQuick Module
 
To use the \l{Qt Quick} module, a QML document needs to
import it. The import syntax looks like this:
 
\qml
import QtQuick
\endqml
 
The types and functionality that \l{Qt Quick} provides can now
be used in the QML document!
 
\section2 Defining an Object Hierarchy
 
The object declaration in a QML document defines what will be displayed in the
visual scene. \l{Qt Quick} provides the basic building blocks
for all user interfaces, such as the objects for displaying images and text and
for handling user input.
 
A simple object declaration might be a colored window with some text centered
in it:
 
\qml
Window {
    width: 640
    height: 480
    visible: true
    color: "red"
 
    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}
\endqml
 
This defines an object hierarchy with a root \l Window object
which has a child \l Text object. The \c parent of the \l Text object is
automatically set to the \l Window, and similarly, the \l Text object is
added to the \c children property of the \l Window object, by QML.
 
\section2 Putting it All Together
 
The \l Window and \l Text types used in the above example are both provided
by the \c{QtQuick} import. Putting the import and object declaration
together, we get a complete QML document:
 
\qml
import QtQuick
 
Window {
    width: 640
    height: 480
    visible: true
    color: "red"
 
    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}
\endqml
 
If we save that document as "HelloWorld.qml", we can load and display it.
 
\section1 Creating and Running QML Projects
 
To display the graphical scene defined by the QML document, it may be loaded
with \l{\QC Documentation}{\QC}. To create a new QML project in \QC:
\list 1
\li Select \uicontrol{File} > \uicontrol{New Project} > \uicontrol{Qt Quick Application}
from within \QC.
\li Enter a name for your project and select a location to save it.
\li Select the appropriate Qt version and optionally configure version
control settings for the project.
\li Review the summary of your project settings and continue to complete the project build.
\endlist
 
When finished, \QC will generate the necessary files and open the project for development.
Pressing the green \gui{Run} button runs the application. You should see the
text \gui{Hello, World!} in the center of a red rectangle.
 
For more information about creating and running projects in \QC, visit
the following pages:
\list
\li \l{\QC: Create Qt Quick Applications}
\li \l{\QC: Tutorial: Build and run}
\endlist
 
\section1 Creating QML Applications with Controls
 
While Qt Quick provides basic graphical elements, \l{Qt Quick Controls} provides
ready-made QML types for use within an application.
 
Inserting the \l[QtQuickControls2]{ApplicationWindow} type is a good starting
point for creating applications. An application UI has this basic layout:
 
\image applicationwindow.png
       {ApplicationWindow layout with menu bar, tool bar, content area,
       and status bar}
 
Within each area, different \e controls may be added and connected to form
an application. For example, the following snippet is a basic application that
demonstrates the use of available space:
 
\qml
//import related modules
import QtQuick
import QtQuick.Controls
 
//window containing the application
ApplicationWindow {
    width: 640
    height: 480
    visible: true
    //title of the application
    title: qsTr("Hello World")
 
    //menu containing two menu items
    header: MenuBar {
        Menu {
            title: qsTr("&File")
            Action {
                text: qsTr("&Open...")
                onTriggered: console.log("Open action triggered")
            }
            MenuSeparator { }
            Action {
                text: qsTr("&Exit")
                onTriggered: Qt.quit()
            }
        }
    }
 
    //Content Area
 
    //a button in the middle of the content area
    Button {
        text: qsTr("Hello World")
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
    }
}
\endqml
 
The application has two menu items and a button in the middle. Clicking on the
\uicontrol Exit menu item closes the application.
 
There are also different navigation methods and different controls such as
buttons and sliders. The following examples are available from
\QC and demonstrate different controls and layouts.
 
\list
\li \l{Qt Quick Layouts - Basic Example}{Basic Layouts}
\li \l{Qt Quick Controls - Gallery}
\endlist
 
Feel free to copy and paste the snippets onto this simple Hello World
application to see how QML works.
 
\section1 Handling User Input
 
One of the great advantages of using QML to define a user interface is that it
allows the user interface designer to define how the application should react
to events with simple JavaScript expressions. In QML, we refer to those events
as \l{Signal and Handler Event System}{signals} and these signals are handled by
\l{qml-signals-and-handlers}{signal handlers}.
 
For example, consider the following example:
\qml
import QtQuick
 
Window {
    id: root
    width: 200
    height: 100
    color: isRed ? "red" : "blue"
    visible: true
 
    property bool isRed: true  // Track the color state
 
    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
 
    TapHandler {
        onTapped: root.isRed = !root.isRed  // Toggle state
    }
}
\endqml
 
This example can be saved as "ClickableHelloWorld.qml" and run with \c qml, the
\l{qml_runtime_tool}{QML Runtime Tool}.
Whenever the user clicks anywhere in the window, the rectangle will change
from red to blue. Tapping again will change it back to red.
 
\note \l TapHandler also emits the tapped signal for touch events, so this
code will also work on a mobile device.
 
Keyboard user input can be similarly handled with a simple expression:
 
\qml
import QtQuick
 
Window {
    id: root
    width: 200
    height: 100
    color: "red"
    visible: true
 
    Text {
        id: myText
        anchors.centerIn: parent
        text: toggle ? "Hello, World!" : "Goodbye, World!"
        focus: true
        property bool toggle: true
        Keys.onReturnPressed: (event)=>{
            myText.toggle = !myText.toggle;
            event.accepted = true;
        }
    }
}
\endqml
 
Now, each time you press the Enter key, the text will alternate between
"Hello, World" and "Goodbye, World".
 
\section1 Property Bindings
 
Objects and their properties form the basis of a graphical interface defined
in a QML document. The QML language allows properties to be bound to each
other in various ways, enabling highly dynamic user interfaces.
 
In the following example, the geometry of each child \l Rectangle is bound to
that of the parent \l Window. If the geometry of the parent \l Window object
were to change, the geometry of each child \l Rectangle would automatically
update due to the property bindings.
 
\qml
import QtQuick
 
Window {
    id: root
    width: 200
    height: 100
    color: "red"
    visible: true
 
 
    Rectangle {
        width: root.width / 2
        height: root.height
        color: "blue"
    }
 
    Rectangle {
        width: root.width / 2
        height: root.height
        x: root.width / 2
        color: "green"
    }
}
\endqml
 
\section1 Animations
 
Properties can also be dynamically updated via animations. The \c QtQuick
import provides various animation types which can be used to animate changes
to a property's value. In the following example, a property is animated which
then gets displayed in a \l Text area:
 
\qml
import QtQuick
 
Window {
    id: root
    width: 200
    height: 100
    color: "red"
    visible: true
 
    property int animatedValue
 
    SequentialAnimation on animatedValue {
        loops: Animation.Infinite
        PropertyAnimation {
            to: 150
            duration: 1000
        }
        PropertyAnimation {
            to: 0
            duration: 1000
        }
    }
 
    Text {
        anchors.centerIn: parent
        text: root.animatedValue
    }
}
\endqml
 
The value being displayed will vary from 0 to 150 periodically.
 
 
\section1 Defining Custom QML Types for Re-use
 
One of the most important concepts in QML is that of type re-use. An
application will probably have multiple visual types which are all similar
(for example, multiple push buttons), and QML allows these sort of things to
be defined as re-usable, custom types, to minimize code duplication and
maximize readability.
 
For example, imagine that the developer defines a new \c MessageLabel type in the
\c MessageLabel.qml file:
 
\snippet qmlapp/qml-extending-types/components/MessageLabel.qml 0
 
That type may now be re-used multiple times in the application, as follows:
 
\table
\row
\li \snippet qmlapp/qml-extending-types/components/application.qml 0
\li \borderedimage qmlapp/qml-extending-types.gif
                   {MessageLabel components showing debug, warning, and critical messages}
\endtable
 
 
In this way, modular user interface types are assembled and reused within
an application.
 
See \l {QML Object Attributes}
for more details on how to develop your own reusable components.
 
\section1 Where to Go from Here
 
Now that you have seen QML in action, you are ready to take your next step.
The follow page will lead you in your journey with QML.
 
\list
\li \l{QML Applications}
\li \l{Qt Quick Examples and Tutorials}
\endlist
 
*/