Qt Reference Documentation

[Previous: QML Tutorial] [Next: QML Tutorial 2 - QML Components]

# QML Tutorial 1 - Basic Types

This first program is a very simple "Hello world" example that introduces some basic QML concepts. The picture below is a screenshot of this program.

Here is the QML code for the application:

     import QtQuick 1.0

     Rectangle {
         id: page
         width: 500; height: 200
         color: "lightgray"

         Text {
             id: helloText
             text: "Hello world!"
             y: 30
             anchors.horizontalCenter: page.horizontalCenter
             font.pointSize: 24; font.bold: true
         }
     }

## Walkthrough

### Import

First, we need to import the types that we need for this example. Most QML files will import the built-in QML types (like Rectangle, Image, ...) that come with Qt, using:

     import QtQuick 1.0

### Rectangle element

     Rectangle {
         id: page
         width: 500; height: 200
         color: "lightgray"

We declare a root element of type Rectangle. It is one of the basic building blocks you can use to create an application in QML. We give it an `id` to be able to refer to it later. In this case, we call it "page". We also set the `width`, `height` and `color` properties. The Rectangle element contains many other properties (such as `x` and `y`), but these are left at their default values.

### Text element

         Text {
             id: helloText
             text: "Hello world!"
             y: 30
             anchors.horizontalCenter: page.horizontalCenter
             font.pointSize: 24; font.bold: true
         }

We add a Text element as a child of the root Rectangle element that displays the text 'Hello world!'.

The `y` property is used to position the text vertically at 30 pixels from the top of its parent.

The `anchors.horizontalCenter` property refers to the horizontal center of an element. In this case, we specify that our text element should be horizontally centered in the page element (see Anchor-Based Layout).

The `font.pointSize` and `font.bold` properties are related to fonts and use the dot notation.

### Viewing the example

To view what you have created, run the QML Viewer tool (located in the `bin` directory) with your filename as the first argument. For example, to run the provided completed Tutorial 1 example from the install location, you would type:

     bin/qmlviewer $QTDIR/examples/declarative/tutorials/helloworld/tutorial1.qml