Get started

Now we're ready to start. Follow this tutorial to discover each important steps of QML developement.

Erm, what is QML ?

QML (Qt Meta Language or Qt Modeling Language) is a user interface markup language. It is a JavaScript-based, declarative language for designing user interface–centric applications. It is part of Qt Quick, the UI creation kit developed by Nokia within the Qt framework. QML is mainly used for mobile applications where touch input, fluid animations (60 FPS) and user experience are crucial. QML documents describe an object tree of elements. QML elements shipped with Qt are a sophisticated set of building blocks, graphical (e.g., rectangle, image) and behavioral (e.g., state, transition, animation). These elements can be combined to build components ranging in complexity from simple buttons and sliders, to complete internet-enabled programs.

QML elements can be augmented by standard JavaScript both inline and via included .js files. Elements can also be seamlessly integrated and extended by C++ components using the Qt framework.

QML is the language; its runtime is the Javascript V4 engine and Qt Quick is the scenegraph-based UI framework. (Wikipedia)

"Hello World!" in QML : 

@import QtQuick 2.0
@import QtQuick.Controls 1.2

#ApplicationWindow {
    id: app
    width: 200
    height: 100
    title: "My Application"

    #Text {
        id: myHelloWorldText
        text: "Hello World"
        color: "gray"
    }
}

Install Qt

There are lots of different ways to install Qt, some of them depend of your plateform. So we will only present you the official way.

The first thing you need to do is to go to Qt's website and download the setup.

Once finished, launch the setup and follow the instructions. Note down the path where you install Qt.

Add Qt bins to your path (optional, but recommanded)

Now that you've succesfully installed Qt, we will make sure that Qt binaries are easily accessible from the command line.

Even if this step is optional, we will continue this tutorial thinking that you did it, because it makes things really simpler.

Windows

• Right-click on the Windows icon in your taskbar, and select System
• On the left panel, open the Advanced system settings link
• In the newly openend window, under the Avanced tab, click on the Environment Variables button at the bottom.
• Highlight the Path variable inside the System variables section, and click Edit
• Add your Qt installation path to the end at the line, seperating the previous one with a ;. The path has this form : [yourQtPath]/[qtVersion]/[arch]/bin, so just replace each element by its value (you can go check in your installation directory), for example with Qt5.5 installed on the C disk with MinGW : C:\Qt\5.5\mingw_32\bin
• Hit Ok, and you're done

Linux and OS X

Open the file ~/.profile : 

$ nano ~/.profile

Go to the end of the file and add the folowing text, replacing [yourQtPath] by your Qt installation path, [qtVersion] by your numeric Qt version, and [arch] by your compilater name and architecture (go check in your Qt installation directory).

if [ -d "[yourQtPath]/[qtVersion]/[arch]/bin" ] ; then
  PATH="[yourQtPath]/[qtVersion]/[arch]/bin:$PATH"
fi

For instance with a Qt 5.5 installation in the ~/Qt directory with gcc in 64 bits :

if [ -d "$HOME/Qt/5.5/gcc_64/bin" ] ; then
  PATH="$HOME/Qt/5.5/gcc_64/bin:$PATH"
fi

Finally, you need to source this file to use it in this current terminal session (it will be added automatically on the next session) :

$ source ~/.profile

---

You can now check if it worked by typing qmlscene in a terminal: if a file chooser appears in order to select a .qml file to launch, then you made it !