1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
/****************************************************************************
**
** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies).
** All rights reserved.
** Contact: Nokia Corporation (qt-info@nokia.com)
**
** This file is part of the test suite of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:LGPL$
** No Commercial Usage
** This file contains pre-release code and may not be distributed.
** You may use this file in accordance with the terms and conditions
** contained in the Technology Preview License Agreement accompanying
** this package.
**
** GNU Lesser General Public License Usage
** Alternatively, this file may be used under the terms of the GNU Lesser
** General Public License version 2.1 as published by the Free Software
** Foundation and appearing in the file LICENSE.LGPL included in the
** packaging of this file. Please review the following information to
** ensure the GNU Lesser General Public License version 2.1 requirements
** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
**
** In addition, as a special exception, Nokia gives you certain additional
** rights. These rights are described in the Nokia Qt LGPL Exception
** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
**
** If you have questions regarding the use of this file, please contact
** Nokia at qt-info@nokia.com.
**
**
**
**
**
**
**
**
** $QT_END_LICENSE$
**
****************************************************************************/
/*!
\page tutorial1.html
\title 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.
\image declarative-tutorial1.png
Here is the QML code for the application:
\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 0
\section1 Walkthrough
\section2 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 \l{Rectangle}, \l{Image}, ...) that come with Qt with:
\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 3
\section2 Rectangle element
\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 1
We declare a root element of type \l{Rectangle}. It is one of the basic building blocks you can use to create an application in QML.
We give it an \c{id} to be able to refer to it later. In this case, we call it \e page.
We also set the \c width, \c height and \c color properties.
The \l{Rectangle} element contains many other properties (such as \c x and \c y), but these are left at their default values.
\section2 Text element
\snippet examples/declarative/tutorials/helloworld/tutorial1.qml 2
We add a \l Text element as a child of our root element that will display the text 'Hello world!'.
The \c y property is used to position the text vertically at 30 pixels from the top of its parent.
The \c font.pointSize and \c font.bold properties are related to fonts and use the \l{Dot Properties}{dot notation}.
The \c 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 \e page element (see \l{anchor-layout}{Anchor-based Layout}).
\section2 Viewing the example
To view what you have created, run the qmlviewer (located in the \c 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:
\code
bin/qmlviewer $QTDIR/examples/declarative/tutorials/helloworld/tutorial1.qml
\endcode
[\l {Tutorial}] [Next: \l {Tutorial 2 - QML Component}]
*/
|
