Home · All Classes · All Functions · Overviews

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

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 Qt 4.6

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

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

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 with:

 import Qt 4.6

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!"
         font.pointSize: 24; font.bold: true
         y: 30; anchors.horizontalCenter: page.horizontalCenter
     }

We add a Text element as a child of our root element that will display the text 'Hello world!'.

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

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

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).

Viewing the example

To view what you have created, run the qmlviewer (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

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


Copyright © 2010 Nokia Corporation and/or its subsidiary(-ies) Trademarks
Qt 4.7.0