diff options
Diffstat (limited to 'src/quick/doc/src/appdevguide/quickstart')
| -rw-r--r-- | src/quick/doc/src/appdevguide/quickstart/basics.qdoc | 118 | ||||
| -rw-r--r-- | src/quick/doc/src/appdevguide/quickstart/essentials.qdoc | 184 |
2 files changed, 0 insertions, 302 deletions
diff --git a/src/quick/doc/src/appdevguide/quickstart/basics.qdoc b/src/quick/doc/src/appdevguide/quickstart/basics.qdoc deleted file mode 100644 index 15f3c2f5ff..0000000000 --- a/src/quick/doc/src/appdevguide/quickstart/basics.qdoc +++ /dev/null @@ -1,118 +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-basics.html -\title Quick Start Guide - QML Basics -\brief Basic QML application development examples - -\section1 Creating a QML Document - -A QML document defines a hierarchy of objects with a highly-readable, -structured layout. Every QML document consists of two parts: an imports -section and an object declaration section. The types and functionality most -common to user interfaces are provided in the \c{QtQuick} -import. - -\section2 Importing and Using the QtQuick Module - -To use the \l{Qt Quick} module, a QML document needs to -import it. The import syntax looks like this: - -\qml -import QtQuick 2.0 -\endqml - -The types and functionality that \l{Qt Quick} provides can now -be used in the QML document! - -\section2 Defining an Object Hierarchy - -The object declaration in a QML document defines what will be displayed in the -visual scene. \l{Qt Quick} provides the basic building blocks -for all user interfaces, including objects to display images and text, and to -handle user input. - -A simple object declaration might be a colored rectangle with some text centered -in it: - -\qml -Rectangle { - width: 200 - height: 100 - color: "red" - - Text { - anchors.centerIn: parent - text: "Hello, World!" - } -} -\endqml - -This defines an object hierarchy with a root \l Rectangle object -which has a child \l Text object. The \c parent of the \l Text object is -automatically set to the \l Rectangle, and similarly, the \l Text object is -added to the \c children property of the \l Rectangle object, by QML. - -\section2 Putting it Together - -The \l Rectangle and \l Text types used in the above example are both provided -by the \c{QtQuick} import. Putting the import and object declaration -together, we get a complete QML document: - -\qml -import QtQuick 2.0 - -Rectangle { - width: 200 - height: 100 - color: "red" - - Text { - anchors.centerIn: parent - text: "Hello, World!" - } -} -\endqml - -If we save that document as "HelloWorld.qml" we can load and display it. - -\section1 Loading and Displaying the QML Document - -To display the graphical scene defined by the QML document, it may be loaded -with the \l{Prototyping with qmlscene}{qmlscene} tool. The -\l{Prototyping with qmlscene}{qmlscene} tool should be installed into the -Qt installation directory. Assuming that the Qt binaries are installed into -or are available in the system executable path, you can display the QML -document with the following command: - -\code -qmlscene HelloWorld.qml -\endcode - -You should see the text "Hello, World!" in the center of a red rectangle. - -*/ 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. - -*/ |