diff options
author | Venugopal Shivashankar <Venugopal.Shivashankar@qt.io> | 2018-12-07 09:19:31 +0100 |
---|---|---|
committer | Venugopal Shivashankar <Venugopal.Shivashankar@qt.io> | 2018-12-07 12:55:55 +0000 |
commit | 9d88932795ff77af70b1732a5df1013860ebb17f (patch) | |
tree | d0fa388c43b68a0be11ad6009eae30cd960de480 /doc | |
parent | c162c4b5a56604da898078635466e2b1e44b965d (diff) |
Doc: Replace Controls 1 and MouseArea references
Also, updated the snippet that demonstrates creating
custom QML types.
Change-Id: I5a385b4d2eb7d96a50f314e5c6d1304665600bb8
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>
Diffstat (limited to 'doc')
-rw-r--r-- | doc/images/qmlapp/qml-extending-types.png | bin | 738 -> 0 bytes | |||
-rw-r--r-- | doc/snippets/qmlapp/qml-extending-types/components/MessageLabel.qml (renamed from doc/snippets/qmlapp/qml-extending-types/components/Button.qml) | 34 | ||||
-rw-r--r-- | doc/snippets/qmlapp/qml-extending-types/components/application.qml | 26 | ||||
-rw-r--r-- | doc/src/qmlapp/firststepsqml.qdoc | 37 |
4 files changed, 70 insertions, 27 deletions
diff --git a/doc/images/qmlapp/qml-extending-types.png b/doc/images/qmlapp/qml-extending-types.png Binary files differdeleted file mode 100644 index 6990d7c19..000000000 --- a/doc/images/qmlapp/qml-extending-types.png +++ /dev/null diff --git a/doc/snippets/qmlapp/qml-extending-types/components/Button.qml b/doc/snippets/qmlapp/qml-extending-types/components/MessageLabel.qml index a0ec94015..799a7bb80 100644 --- a/doc/snippets/qmlapp/qml-extending-types/components/Button.qml +++ b/doc/snippets/qmlapp/qml-extending-types/components/MessageLabel.qml @@ -48,16 +48,38 @@ ** ****************************************************************************/ //![0] -// Button.qml -import QtQuick 2.3 +// MessageLabel.qml +import QtQuick 2.12 Rectangle { - width: 100; height: 100 - color: "red" + height: 50 + property string message: "debug message" + property var msgType: ["debug", "warning" , "critical"] + color: "black" - MouseArea { + Column { anchors.fill: parent - onClicked: console.log("Button clicked!") + padding: 5.0 + spacing: 2 + Text { + text: msgType.toString().toUpperCase() + ":" + font.bold: msgType == "critical" + font.family: "Terminal Regular" + color: msgType === "warning" || msgType === "critical" ? "red" : "yellow" + ColorAnimation on color { + running: msgType == "critical" + from: "red" + to: "black" + duration: 1000 + loops: msgType == "critical" ? Animation.Infinite : 1 + } + } + Text { + text: message + color: msgType === "warning" || msgType === "critical" ? "red" : "yellow" + font.family: "Terminal Regular" + } } + } //![0] diff --git a/doc/snippets/qmlapp/qml-extending-types/components/application.qml b/doc/snippets/qmlapp/qml-extending-types/components/application.qml index b4c191f06..33072b9fa 100644 --- a/doc/snippets/qmlapp/qml-extending-types/components/application.qml +++ b/doc/snippets/qmlapp/qml-extending-types/components/application.qml @@ -49,11 +49,29 @@ ****************************************************************************/ //![0] // application.qml -import QtQuick 2.3 +import QtQuick 2.12 Column { - Button { width: 50; height: 50 } - Button { x: 50; width: 100; height: 50; color: "blue" } - Button { width: 50; height: 50; radius: 8 } + width: 180 + height: 180 + padding: 1.5 + topPadding: 10.0 + bottomPadding: 10.0 + spacing: 5 + + MessageLabel{ + width: parent.width - 2 + msgType: "debug" + } + MessageLabel { + width: parent.width - 2 + message: "This is a warning!" + msgType: "warning" + } + MessageLabel { + width: parent.width - 2 + message: "A critical warning!" + msgType: "critical" + } } //![0] diff --git a/doc/src/qmlapp/firststepsqml.qdoc b/doc/src/qmlapp/firststepsqml.qdoc index a563beade..12fedb19d 100644 --- a/doc/src/qmlapp/firststepsqml.qdoc +++ b/doc/src/qmlapp/firststepsqml.qdoc @@ -122,20 +122,19 @@ the following pages: While Qt Quick provides basic graphical elements, \l{Qt Quick Controls} provides ready-made QML types for use within an application. -Inserting the \l ApplicationWindow type is a good starting point for creating -applications. An application UI has this basic layout: +Inserting the \l[QtQuickControls2]{ApplicationWindow} type is a good starting +point for creating applications. An application UI has this basic layout: \image applicationwindow.png Within each area, different \e controls may be added and connected to form an application. For example, the following snippet is a basic application that -uses the previous layout: +demonstrates the use of available space: \qml //import related modules -import QtQuick 2.3 -import QtQuick.Controls 1.2 -import QtQuick.Window 2.2 +import QtQuick 2.12 +import QtQuick.Controls 2.12 //window containing the application ApplicationWindow { @@ -170,16 +169,17 @@ ApplicationWindow { } } \endqml + The application has two menu items and a button in the middle. Clicking on the \uicontrol Exit menu item closes the application. There are also different navigation methods and different controls such as -buttons and sliders available. The following examples are available from +buttons and sliders. The following examples are available from Qt Creator and demonstrate different controls and layouts. \list \li \l{Qt Quick Layouts - Basic Example}{Basic Layouts} -\li \l{Qt Quick Controls 1 - Touch Gallery}{Touch Gallery} +\li \l{Qt Quick Controls - Gallery} \endlist Feel free to copy and paste the snippets onto this simple Hellow World @@ -195,6 +195,8 @@ as \l{Signal and Handler Event System}{signals} and these signals are handled by For example, consider the following example: \qml +import QtQuick 2.12 + Rectangle { width: 200 height: 100 @@ -205,17 +207,18 @@ Rectangle { text: "Hello, World!" } - MouseArea { - anchors.fill: parent - onClicked: parent.color = "blue" + TapHandler { + onTapped: 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. +from red to blue. + +\note \l TapHandler also emits the tapped 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: @@ -310,17 +313,17 @@ application will probably have multiple visual types which are all similar 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: +For example, imagine that the developer defines a new \c MessageLabel type in the +\c MessageLabel.qml file: -\snippet qmlapp/qml-extending-types/components/Button.qml 0 +\snippet qmlapp/qml-extending-types/components/MessageLabel.qml 0 That type may now be re-used multiple times in the application, as follows: \table \row \li \snippet qmlapp/qml-extending-types/components/application.qml 0 -\li \image qmlapp/qml-extending-types.png +\li \borderedimage qmlapp/qml-extending-types.gif \endtable |