diff options
Diffstat (limited to 'src/quick/doc/src/appdevguide/quickstart/essentials.qdoc')
-rw-r--r-- | src/quick/doc/src/appdevguide/quickstart/essentials.qdoc | 184 |
1 files changed, 0 insertions, 184 deletions
diff --git a/src/quick/doc/src/appdevguide/quickstart/essentials.qdoc b/src/quick/doc/src/appdevguide/quickstart/essentials.qdoc deleted file mode 100644 index d7a9ec3cdb..0000000000 --- a/src/quick/doc/src/appdevguide/quickstart/essentials.qdoc +++ /dev/null @@ -1,184 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies). -** Contact: http://www.qt-project.org/legal -** -** This file is part of the documentation of the Qt Toolkit. -** -** $QT_BEGIN_LICENSE:FDL$ -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and Digia. For licensing terms and -** conditions see http://qt.digia.com/licensing. For further information -** use the contact form at http://qt.digia.com/contact-us. -** -** GNU Free Documentation License Usage -** Alternatively, this file may be used under the terms of the GNU Free -** Documentation License version 1.3 as published by the Free Software -** Foundation and appearing in the file included in the packaging of -** this file. Please review the following information to ensure -** the GNU Free Documentation License version 1.3 requirements -** will be met: http://www.gnu.org/copyleft/fdl.html. -** $QT_END_LICENSE$ -** -****************************************************************************/ -/*! -\page qtquick-quickstart-essentials.html -\title Quick Start Guide - QML Essentials -\brief Essential QML application development examples - -\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 such signals can be handled -with \l{qml-signals-and-handlers}{signal handlers}. - -For example, consider the following example: -\qml -import QtQuick 2.0 - -Rectangle { - width: 200 - height: 100 - color: "red" - - Text { - anchors.centerIn: parent - text: "Hello, World!" - } - - MouseArea { - anchors.fill: parent - onClicked: parent.color = "blue" - } -} -\endqml - -This example can be saved as "ClickableHelloWorld.qml" and run with qmlscene. -Whenever the user clicks anywhere in the window, the rectangle will change -from red to blue. Note that the \l MouseArea type also emits the clicked -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 2.0 - -Rectangle { - width: 200 - height: 100 - color: "red" - - Text { - anchors.centerIn: parent - text: "Hello, World!" - } - - focus: true - Keys.onPressed: { - if (event.key == Qt.Key_Return) { - color = "blue"; - event.accepted = true; - } - } -} -\endqml - -By accepting focus, the color can be changed to blue whenever the return key -is pressed. - -\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 Rectangle. If the geometry of the parent \l Rectangle -were to change, the geometry of each child \l Rectangle would automatically -update due to the property bindings. - -\qml -import QtQuick 2.0 - -Rectangle { - width: 400 - height: 200 - - Rectangle { - width: parent.width / 2 - height: parent.height - } - - Rectangle { - width: parent.width / 2 - height: parent.height - x: parent.width / 2 - } -} -\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 2.0 - -Rectangle { - color: "lightgray" - width: 200 - height: 200 - - property int animatedValue: 0 - SequentialAnimation on animatedValue { - loops: Animation.Infinite - PropertyAnimation { to: 150; duration: 1000 } - PropertyAnimation { to: 0; duration: 1000 } - } - - Text { - anchors.centerIn: parent - text: 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 Button type in the -\c Button.qml file: - -\snippet qml/qml-extending-types/components/Button.qml 0 - -That type may now be re-used multiple times in the application, as follows: - -\table -\row -\li \snippet qml/qml-extending-types/components/application.qml 0 -\li \image qml-extending-types.png -\endtable - - -In this way, modular user interface types can be built up and re-used within -an application. - -See \l {QML Object Attributes} -for more details on how to develop your own reusable components. - -*/ |