From 73d30f514e1411102fb6f8f21258276e72c836ec Mon Sep 17 00:00:00 2001 From: Bea Lam Date: Fri, 18 Mar 2011 16:16:56 +1000 Subject: Doc fix - QtQuick 1.1 scheduling Change-Id: If19934bf378e5fbc6cb1dce1df2164905e97f0ed --- doc/src/declarative/whatsnew.qdoc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/src/declarative/whatsnew.qdoc b/doc/src/declarative/whatsnew.qdoc index 1a8ebd7..8d975c7 100644 --- a/doc/src/declarative/whatsnew.qdoc +++ b/doc/src/declarative/whatsnew.qdoc @@ -29,7 +29,7 @@ \title What's new in Qt Quick \page qtquick-whatsnew.html -\section1 Qt 4.7.3 includes QtQuick 1.1 +\section1 Qt 4.7.4 includes QtQuick 1.1 QtQuick 1.1 is a minor feature update. \e {import QtQuick 1.1} to use the new features. -- cgit v0.12 From 0d481aa65254d76b7d22dc1e073dcd18e2c65f9b Mon Sep 17 00:00:00 2001 From: Joona Petrell Date: Mon, 14 Mar 2011 16:45:15 +1000 Subject: Write Qt Quick 1.1 right-to-left documentation and examples Task-number: QTBUG-11042 Reviewed-by: Martin Jones Change-Id: I6319992dec52a4d9252c2df39801ebe6a7dee75d --- doc/src/declarative/declarativeui.qdoc | 1 + doc/src/declarative/examples.qdoc | 12 +- doc/src/declarative/righttoleft.qdoc | 186 +++++++++ doc/src/examples/qml-examples.qdoc | 48 ++- .../qml-righttoleft-layoutdirection-example.png | Bin 0 -> 20945 bytes .../qml-righttoleft-layoutmirroring-example.png | Bin 0 -> 31901 bytes doc/src/snippets/declarative/arrow.png | Bin 0 -> 454 bytes doc/src/snippets/declarative/righttoleft.qml | 146 +++++++ doc/src/snippets/declarative/righttoleft/Child.qml | 11 + examples/declarative/positioners/Button.qml | 78 ++++ examples/declarative/positioners/add.png | Bin 0 -> 810 bytes .../positioners/addandremove/Button.qml | 78 ---- .../declarative/positioners/addandremove/add.png | Bin 810 -> 0 bytes .../positioners/addandremove/addandremove.qml | 253 ------------ .../addandremove/addandremove.qmlproject | 18 - .../declarative/positioners/addandremove/del.png | Bin 488 -> 0 bytes examples/declarative/positioners/del.png | Bin 0 -> 488 bytes .../layoutdirection/layoutdirection.qml | 171 --------- .../layoutdirection/layoutdirection.qmlproject | 18 - examples/declarative/positioners/positioners.qml | 253 ++++++++++++ .../declarative/positioners/positioners.qmlproject | 18 + .../layoutdirection/layoutdirection.qml | 246 ++++++++++++ .../layoutdirection/layoutdirection.qmlproject | 18 + .../layoutmirroring/layoutmirroring.qml | 313 +++++++++++++++ .../layoutmirroring/layoutmirroring.qmlproject | 18 + .../righttoleft/textalignment/textalignment.qml | 426 +++++++++++++++++++++ .../textalignment/textalignment.qmlproject | 18 + .../graphicsitems/qdeclarativetextinput.cpp | 2 +- 28 files changed, 1779 insertions(+), 553 deletions(-) create mode 100644 doc/src/declarative/righttoleft.qdoc create mode 100644 doc/src/images/qml-righttoleft-layoutdirection-example.png create mode 100644 doc/src/images/qml-righttoleft-layoutmirroring-example.png create mode 100644 doc/src/snippets/declarative/arrow.png create mode 100644 doc/src/snippets/declarative/righttoleft.qml create mode 100644 doc/src/snippets/declarative/righttoleft/Child.qml create mode 100644 examples/declarative/positioners/Button.qml create mode 100644 examples/declarative/positioners/add.png delete mode 100644 examples/declarative/positioners/addandremove/Button.qml delete mode 100644 examples/declarative/positioners/addandremove/add.png delete mode 100644 examples/declarative/positioners/addandremove/addandremove.qml delete mode 100644 examples/declarative/positioners/addandremove/addandremove.qmlproject delete mode 100644 examples/declarative/positioners/addandremove/del.png create mode 100644 examples/declarative/positioners/del.png delete mode 100644 examples/declarative/positioners/layoutdirection/layoutdirection.qml delete mode 100644 examples/declarative/positioners/layoutdirection/layoutdirection.qmlproject create mode 100644 examples/declarative/positioners/positioners.qml create mode 100644 examples/declarative/positioners/positioners.qmlproject create mode 100644 examples/declarative/righttoleft/layoutdirection/layoutdirection.qml create mode 100644 examples/declarative/righttoleft/layoutdirection/layoutdirection.qmlproject create mode 100644 examples/declarative/righttoleft/layoutmirroring/layoutmirroring.qml create mode 100644 examples/declarative/righttoleft/layoutmirroring/layoutmirroring.qmlproject create mode 100644 examples/declarative/righttoleft/textalignment/textalignment.qml create mode 100644 examples/declarative/righttoleft/textalignment/textalignment.qmlproject diff --git a/doc/src/declarative/declarativeui.qdoc b/doc/src/declarative/declarativeui.qdoc index aa9ed18..3962514 100644 --- a/doc/src/declarative/declarativeui.qdoc +++ b/doc/src/declarative/declarativeui.qdoc @@ -140,6 +140,7 @@ Module. \o \l{QML Basic Types} \o \l{QML Global Object} \o \l{QML Internationalization} +\o \l{QML Right-to-left User Interfaces} \o \l{QML Security} \o \l{Qt Declarative Module} \o \l{Debugging QML} diff --git a/doc/src/declarative/examples.qdoc b/doc/src/declarative/examples.qdoc index be2d0c7..b359877 100644 --- a/doc/src/declarative/examples.qdoc +++ b/doc/src/declarative/examples.qdoc @@ -136,8 +136,7 @@ The examples can be found in Qt's \c examples/declarative directory. \section2 Positioners \list -\o \l{declarative/positioners/addandremove}{Adding and Removing Items} -\o \l{declarative/positioners/layoutdirection}{Layout Direction} +\o \l{declarative/positioners}{Example} \endlist \section2 Key Interaction @@ -198,13 +197,20 @@ The examples can be found in Qt's \c examples/declarative directory. \o \l{declarative/i18n}{Example} \endlist +\section2 Right-to-left User Interfaces +\list +\o \l{declarative/righttoleft/layoutmirroring}{Layout mirroring} +\o \l{declarative/righttoleft/layoutdirection}{Layout direction} +\o \l{declarative/righttoleft/textalignment}{Text alignment} +\endlist + \section2 Threading \list \o \l{declarative/threading/threadedlistmodel}{Threaded ListModel} \o \l{declarative/threading/workerscript}{WorkerScript} \endlist -\section2 Screen orientation +\section2 Screen Orientation \list \o \l{declarative/screenorientation}{Example} \endlist diff --git a/doc/src/declarative/righttoleft.qdoc b/doc/src/declarative/righttoleft.qdoc new file mode 100644 index 0000000..710855d --- /dev/null +++ b/doc/src/declarative/righttoleft.qdoc @@ -0,0 +1,186 @@ +/**************************************************************************** +** +** 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:FDL$ +** 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 Free Documentation License +** 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. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** $QT_END_LICENSE$ +** +****************************************************************************/ + +/*! +\page qml-righttoleft.html +\target righttoleft +\title QML Right-to-left User Interfaces + +\section1 Overview + +This chapter discusses different approaches and options available for implementing right-to-left +language support for Qt Quick applications. Some common right-to-left languages include Arabic, Hebrew, +Persian and Urdu. Most changes include making sure that text translated to right-to-left languages +is properly aligned to the right, and horizontally ordered content in views, lists and grids flows +correctly from the right to left. + +In right-to-left language speaking cultures, people naturally scan and read graphic elements and text +from the right to left. General rule of thumb is that the content like photos, videos, maps is not +mirrored, but positioning of the content is, like application layouts and the flow of visual elements. +Common use cases include photos shown in chronological order should flow right-to-left, the +low end range of the horizontal sliders should be located at the right side of the slider, and the +text lines should should be aligned to the right side of the available area. The location of visual +elements should not be mirrored when the position is related to a content, for example when a +position marker is shown to indicate a location on a map. Also, there are some special cases you may +need to take into account where the right-to-left language speakers are used to the left-to-right +positioning, for example when using number dialers in phones and media play, pause, rewind and +forward buttons in music players. + +\section1 Text Alignment + +Applies to \l Text, \l TextInput and \l TextEdit. + +When the horizontal alignment of the text item is not explicitly set, the text element will be +automatically aligned to the natural reading direction of the text. By default left-to-right text +like English is aligned to the left side of the text area, and right-to-left text like Arabic is +aligned to the right side of the text area. The alignment of a text element with empty text takes +it's alignment cue from \l QApplication::keyboardInputDirection(), which is based on the active +system locale. Explicitly setting property \c horizontalAlignment for the text will override any +implicit locale-based alignment. Enabling layout mirroring using attached property +\l LayoutMirroring causes any explicit left and right horizontal alignments to be mirrored. +Note that \c horizontalAlignment property itself will remain unchanged. The effective alignment of +the text element that takes the mirroring into account can be read from the +\c effectiveHorizontalAlignment property. + +\snippet doc/src/snippets/declarative/righttoleft.qml 0 + +\section1 Layout direction of positioners and views + +Applies to \l Row, \l Grid, \l Flow, \l ListView and \l GridView + +From Qt Quick 1.1 onwards horizontal positioners and model views have gained a \c layoutDirection +property for controlling the horizontal direction of the layouts. Setting \c layoutDirection to +\c Qt.RightToLeft causes items to be laid out from the right to left. By default Qt Quick follows +the left-to-right layout direction. + +Enabling application layout mirroring using attached property \c LayoutMirroring causes the effective +\c layoutDirection of positioners and views to be mirrored. Note that actual value of \c layoutDirection +property will remain unchanged. The effective layout direction of positioners and views that takes the mirroring into account can be read from the \c effectiveLayoutDirection property. + +\snippet doc/src/snippets/declarative/righttoleft.qml 1 + +\section1 Layout mirroring + +Attached property \l LayoutMirroring is provided as a convenience for easily implementing right-to-left +support for existing left-to-right Qt Quick applications. It mirrors the behavior of \l {anchor-layout} +{Item anchors}, the layout direction of \l{Using QML Positioner and Repeater Items}{positioners} and +model views and the explicit text alignment of QML text elements. + +You can enable layout mirroring for a particular Item + +\snippet doc/src/snippets/declarative/righttoleft.qml 2 + +or make all children elements also inherit the layout direction + +\snippet doc/src/snippets/declarative/righttoleft.qml 3 + +Mirroring does not change the return value of the layout direction and horizontal alignment properties. +Separate read-only property \c effectiveLayoutDirection can be used to query the effective layout +direction of positioners and model views that takes the mirroring into account. Similarly \c Text, +\c TextInput and \c TextEdit elements have gained read-only property \c effectiveHorizontalAlignment +for querying what is the effective visual alignment of text. + +\c LayoutMirroring doesn't alter application layouts and animations done by using the \l x coordinate +directly. Adding right-to-left support to those layouts requires some code changes to your application, +especially in views that rely on both the anchors and x coordinate-based positioning. + +\snippet doc/src/snippets/declarative/righttoleft.qml 4 + +Not all the layouts should be mirrored. There are cases where the visual element is positioned to +the right side of the screen for better one-handed use, because most people are right-handed, and not +because of the reading direction. In the case that a child element needs to be unaffected by the mirroring, set the \c LayoutMirroring.enabled property for that element to false. Qt Quick is designed +for developing animated, fluid user interfaces. When mirroring your application, remember to test that +the animations and transitions continue to work as expected. If you don't have resources to add +right-to-left support for your application, it may be better to just keep the application layouts left +aligned and just make sure that text is translated and aligned properly. + +\section1 Mirroring icons + +Applies to \l Image, \l BorderImage, \l AnimatedImage + +Most images don't need mirroring, but some directional icons should be mirrored. You can mirror the +painting of these icons with a dedicated \l mirror property introduced in Qt Quick 1.1. + +\snippet doc/src/snippets/declarative/righttoleft.qml 5 + +\section1 Default layout direction + +Property \l Qt.application.layoutDirection can be used to query the active layout direction of the +application. It is based on QApplication::layoutDirection(), which most commonly determines the layout +direction from the active language translation file. + +To define the layout direction for a particular locale, declare the dedicated string literal +\c QT_LAYOUT_DIRECTION in context \c QApplication as either "LTR" or "RTL". + +You can do this by first introducing line + +\code +QT_TRANSLATE_NOOP("QApplication", "QT_LAYOUT_DIRECTION"); +\endcode + +somewhere in your QML source code and calling \c lupdate to generate the translation source file. + +\code +lupdate myapp.qml -ts myapp.ts +\endcode + +This will append following declaration to the translation file, where you can fill either "LTR" or +"RTL" as the translation for the locale. + +\code + + QApplication + + + QT_LAYOUT_DIRECTION + RTL + + +\endcode + +You can test that the layout direction works as expected by running your Qt Quick application with +the compiled translation file. + +\code +qmlviewer myapp.qml -translation myapp.qm +\endcode + +You can test your application in right-to-left layout direction simply by executing qmlviewer with a +command-line parameter "-reverse". + +\code +qmlviewer myapp.qml -reverse +\endcode + +Layout direction can also be set from C++ by calling static function \l QApplication::setLayoutDirection(). + +\code +QApplication app(argc, argv); +app.setLayoutDirection(Qt::RightToLeft); +\endcode + +*/ diff --git a/doc/src/examples/qml-examples.qdoc b/doc/src/examples/qml-examples.qdoc index bbea19b..8f34a9f 100644 --- a/doc/src/examples/qml-examples.qdoc +++ b/doc/src/examples/qml-examples.qdoc @@ -270,23 +270,49 @@ */ /*! - \title Positioners: Adding and Removing Items Example - \example declarative/positioners/addandremove + \title Right-to-left User Interfaces: Text Alignment Example + \example declarative/righttoleft/textalignment - This example shows how to use the positioner elements such as \l Row, \l Column, - \l Grid and \l Flow, in particular how to add and remove items with appropriate transitions. - - \image qml-positioners-example.png + This example shows how the horizontal alignment of \l Text, + \l TextInput and \l TextEdit is affected by the reading direction + of the text and by the layout mirrroring. Click on the gray buttons + shown at the bottom of the example to toggle between different + horizontal alignment options. */ /*! - \title Positioners: Layout Direction Example - \example declarative/positioners/layoutdirection + \title Right-to-left User Interfaces: Layout Direction Example + \example declarative/righttoleft/layoutdirection This example shows how to control the horizontal layout direction of - \l Row, \l Grid and \l Flow positioners. + \l Row, \l Grid and \l Flow positioners, and \l ListView and \l GridView + model views. Click on the gray buttons shown at the bottom of the example + to toggle the layout direction of the shown elements. + + \image qml-righttoleft-layoutdirection-example.png +*/ + + +/*! + \title Right-to-left User Interfaces: Layout Mirroring Example + \example declarative/righttoleft/layoutmirroring - \image qml-positioners-layoutdirection-example.png + This example shows how to mirror the application layouts + using \l LayoutMirroring attached property. Click on the grey button + shown at the bottom of the example to enable or disable the + layout mirroring. + + \image qml-righttoleft-layoutmirroring-example.png +*/ + +/*! + \title Positioners Example + \example declarative/positioners + + This example shows how to use the positioner elements such as \l Row, \l Column, + \l Grid and \l Flow. + + \image qml-positioners-example.png */ /*! @@ -456,7 +482,7 @@ /*! - \title Screen orientation + \title Screen Orientation \example declarative/screenorientation This example shows how to implement screen orientation support for your application. diff --git a/doc/src/images/qml-righttoleft-layoutdirection-example.png b/doc/src/images/qml-righttoleft-layoutdirection-example.png new file mode 100644 index 0000000..e8dd85c Binary files /dev/null and b/doc/src/images/qml-righttoleft-layoutdirection-example.png differ diff --git a/doc/src/images/qml-righttoleft-layoutmirroring-example.png b/doc/src/images/qml-righttoleft-layoutmirroring-example.png new file mode 100644 index 0000000..2fa82ac Binary files /dev/null and b/doc/src/images/qml-righttoleft-layoutmirroring-example.png differ diff --git a/doc/src/snippets/declarative/arrow.png b/doc/src/snippets/declarative/arrow.png new file mode 100644 index 0000000..f0cae21 Binary files /dev/null and b/doc/src/snippets/declarative/arrow.png differ diff --git a/doc/src/snippets/declarative/righttoleft.qml b/doc/src/snippets/declarative/righttoleft.qml new file mode 100644 index 0000000..5d34f50 --- /dev/null +++ b/doc/src/snippets/declarative/righttoleft.qml @@ -0,0 +1,146 @@ +/**************************************************************************** +** +** 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.1 +import "righttoleft" + +Column { + width: 200 +//![0] +// aligned to the left +Text { + text: "Phone" + width: 200 +} + +// aligned to the right +Text { + text: "خامل" + width: 200 +} + +// aligned to the left +Text { + text: "خامل" + horizontalAlignment: Text.AlignLeft + width: 200 +} + +// aligned to the right +Text { + text: "خامل" + horizontalAlignment: Text.AlignLeft + LayoutMirroring.enabled: true + width: 200 +} +//![0] + +//![1] +// by default positions child items from the left to right +Row { + Child {} + Child {} +} + +// positions child items from the right to left +Row { + layoutDirection: Qt.RightToLeft + Child {} + Child {} +} + +// positions child items from the left to right +Row { + LayoutMirroring.enabled: true + layoutDirection: Qt.RightToLeft + Child {} + Child {} +} +//![1] + +//![2] +Item { + // anchor left becomes right + height: 50; width: 150 + LayoutMirroring.enabled: true + anchors.left: parent.left + Row { + // flows from the left to right + Child {} + Child {} + Child {} + } +} +//![2] + +//![3] +Item { + // anchor left becomes right + height: 50; width: 150 + LayoutMirroring.enabled: true + LayoutMirroring.childrenInherit: true + anchors.left: parent.left + Row { + // flows from the right to left + Child {} + Child {} + Child {} + } +} +//![3] + +//![4] +Rectangle { + color: "black" + height: 50; width: 50 + x: mirror(10) + function mirror(value) { + return LayoutMirroring.enabled ? (parent.width - width - value) : value; + } +} +//![4] + +//![5] +Image { + source: "arrow.png" + mirror: true +} +//![5] +} \ No newline at end of file diff --git a/doc/src/snippets/declarative/righttoleft/Child.qml b/doc/src/snippets/declarative/righttoleft/Child.qml new file mode 100644 index 0000000..2b3564e --- /dev/null +++ b/doc/src/snippets/declarative/righttoleft/Child.qml @@ -0,0 +1,11 @@ +import QtQuick 1.0 + +Rectangle { + width: 50; height: 50 + color: "black" + Text { + color: "white" + text: String.fromCharCode(65 + Math.floor(26*Math.random())) + anchors.centerIn: parent + } +} \ No newline at end of file diff --git a/examples/declarative/positioners/Button.qml b/examples/declarative/positioners/Button.qml new file mode 100644 index 0000000..25907c0 --- /dev/null +++ b/examples/declarative/positioners/Button.qml @@ -0,0 +1,78 @@ +/**************************************************************************** +** +** 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 examples 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 { + id: page + + property string text + property string icon + signal clicked + + border.color: "black"; color: "steelblue"; radius: 5 + width: pix.width + textelement.width + 13 + height: pix.height + 10 + + Image { id: pix; x: 5; y:5; source: parent.icon } + + Text { + id: textelement + text: page.text; color: "white" + x: pix.width + pix.x + 3 + anchors.verticalCenter: pix.verticalCenter + } + + MouseArea { + id: mr + anchors.fill: parent + onClicked: { parent.focus = true; page.clicked() } + } + + states: State { + name: "pressed"; when: mr.pressed + PropertyChanges { target: textelement; x: 5 } + PropertyChanges { target: pix; x: textelement.x + textelement.width + 3 } + } + + transitions: Transition { + NumberAnimation { properties: "x,left"; easing.type: Easing.InOutQuad; duration: 200 } + } +} diff --git a/examples/declarative/positioners/add.png b/examples/declarative/positioners/add.png new file mode 100644 index 0000000..1ee4542 Binary files /dev/null and b/examples/declarative/positioners/add.png differ diff --git a/examples/declarative/positioners/addandremove/Button.qml b/examples/declarative/positioners/addandremove/Button.qml deleted file mode 100644 index 25907c0..0000000 --- a/examples/declarative/positioners/addandremove/Button.qml +++ /dev/null @@ -1,78 +0,0 @@ -/**************************************************************************** -** -** 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 examples 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 { - id: page - - property string text - property string icon - signal clicked - - border.color: "black"; color: "steelblue"; radius: 5 - width: pix.width + textelement.width + 13 - height: pix.height + 10 - - Image { id: pix; x: 5; y:5; source: parent.icon } - - Text { - id: textelement - text: page.text; color: "white" - x: pix.width + pix.x + 3 - anchors.verticalCenter: pix.verticalCenter - } - - MouseArea { - id: mr - anchors.fill: parent - onClicked: { parent.focus = true; page.clicked() } - } - - states: State { - name: "pressed"; when: mr.pressed - PropertyChanges { target: textelement; x: 5 } - PropertyChanges { target: pix; x: textelement.x + textelement.width + 3 } - } - - transitions: Transition { - NumberAnimation { properties: "x,left"; easing.type: Easing.InOutQuad; duration: 200 } - } -} diff --git a/examples/declarative/positioners/addandremove/add.png b/examples/declarative/positioners/addandremove/add.png deleted file mode 100644 index 1ee4542..0000000 Binary files a/examples/declarative/positioners/addandremove/add.png and /dev/null differ diff --git a/examples/declarative/positioners/addandremove/addandremove.qml b/examples/declarative/positioners/addandremove/addandremove.qml deleted file mode 100644 index 7d6d8fe..0000000 --- a/examples/declarative/positioners/addandremove/addandremove.qml +++ /dev/null @@ -1,253 +0,0 @@ -/**************************************************************************** -** -** 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 examples 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 { - id: page - width: 420; height: 420 - - Column { - id: layout1 - y: 0 - move: Transition { - NumberAnimation { properties: "y"; easing.type: Easing.OutBounce } - } - add: Transition { - NumberAnimation { properties: "y"; easing.type: Easing.OutQuad } - } - - Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 } - - Rectangle { - id: blueV1 - width: 100; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 - Behavior on opacity { NumberAnimation {} } - } - - Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 } - - Rectangle { - id: blueV2 - width: 100; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 - Behavior on opacity { NumberAnimation {} } - } - - Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 } - } - - Row { - id: layout2 - y: 300 - move: Transition { - NumberAnimation { properties: "x"; easing.type: Easing.OutBounce } - } - add: Transition { - NumberAnimation { properties: "x"; easing.type: Easing.OutQuad } - } - - Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 } - - Rectangle { - id: blueH1 - width: 50; height: 100 - color: "lightsteelblue" - border.color: "black" - radius: 15 - Behavior on opacity { NumberAnimation {} } - } - - Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 } - - Rectangle { - id: blueH2 - width: 50; height: 100 - color: "lightsteelblue" - border.color: "black" - radius: 15 - Behavior on opacity { NumberAnimation {} } - } - - Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 } - } - - Button { - x: 135; y: 90 - text: "Remove" - icon: "del.png" - - onClicked: { - blueH2.opacity = 0 - blueH1.opacity = 0 - blueV1.opacity = 0 - blueV2.opacity = 0 - blueG1.opacity = 0 - blueG2.opacity = 0 - blueG3.opacity = 0 - blueF1.opacity = 0 - blueF2.opacity = 0 - blueF3.opacity = 0 - } - } - - Button { - x: 145; y: 140 - text: "Add" - icon: "add.png" - - onClicked: { - blueH2.opacity = 1 - blueH1.opacity = 1 - blueV1.opacity = 1 - blueV2.opacity = 1 - blueG1.opacity = 1 - blueG2.opacity = 1 - blueG3.opacity = 1 - blueF1.opacity = 1 - blueF2.opacity = 1 - blueF3.opacity = 1 - } - } - - Grid { - x: 260; y: 0 - columns: 3 - - move: Transition { - NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } - } - - add: Transition { - NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } - } - - Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } - - Rectangle { - id: blueG1 - width: 50; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 - Behavior on opacity { NumberAnimation {} } - } - - Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 } - - Rectangle { - id: blueG2 - width: 50; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 - Behavior on opacity { NumberAnimation {} } - } - - Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } - - Rectangle { - id: blueG3 - width: 50; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 - Behavior on opacity { NumberAnimation {} } - } - - Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } - Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 } - Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } - } - - Flow { - id: layout4 - x: 260; y: 250; width: 150 - - move: Transition { - NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } - } - - add: Transition { - NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } - } - - Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } - - Rectangle { - id: blueF1 - width: 60; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 - Behavior on opacity { NumberAnimation {} } - } - - Rectangle { color: "green"; width: 30; height: 50; border.color: "black"; radius: 15 } - - Rectangle { - id: blueF2 - width: 60; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 - Behavior on opacity { NumberAnimation {} } - } - - Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } - - Rectangle { - id: blueF3 - width: 40; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 - Behavior on opacity { NumberAnimation {} } - } - - Rectangle { color: "red"; width: 80; height: 50; border.color: "black"; radius: 15 } - } - -} diff --git a/examples/declarative/positioners/addandremove/addandremove.qmlproject b/examples/declarative/positioners/addandremove/addandremove.qmlproject deleted file mode 100644 index e526217..0000000 --- a/examples/declarative/positioners/addandremove/addandremove.qmlproject +++ /dev/null @@ -1,18 +0,0 @@ -/* File generated by QtCreator */ - -import QmlProject 1.0 - -Project { - /* Include .qml, .js, and image files from current directory and subdirectories */ - QmlFiles { - directory: "." - } - JavaScriptFiles { - directory: "." - } - ImageFiles { - directory: "." - } - /* List of plugin directories passed to QML runtime */ - // importPaths: [ " ../exampleplugin " ] -} diff --git a/examples/declarative/positioners/addandremove/del.png b/examples/declarative/positioners/addandremove/del.png deleted file mode 100644 index 8d2eaed..0000000 Binary files a/examples/declarative/positioners/addandremove/del.png and /dev/null differ diff --git a/examples/declarative/positioners/del.png b/examples/declarative/positioners/del.png new file mode 100644 index 0000000..8d2eaed Binary files /dev/null and b/examples/declarative/positioners/del.png differ diff --git a/examples/declarative/positioners/layoutdirection/layoutdirection.qml b/examples/declarative/positioners/layoutdirection/layoutdirection.qml deleted file mode 100644 index 080010e..0000000 --- a/examples/declarative/positioners/layoutdirection/layoutdirection.qml +++ /dev/null @@ -1,171 +0,0 @@ -/**************************************************************************** -** -** 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 examples 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.1 - -Rectangle { - property bool mirror - property int direction: Qt.application.layoutDirection - LayoutMirroring.enabled: mirror - LayoutMirroring.childrenInherit: true - - width: column.width + 100 - height: column.height + 100 - - Column { - id: column - spacing: 10 - anchors.centerIn: parent - width: 230 - - Text { - text: "Row" - anchors.horizontalCenter: parent.horizontalCenter - } - Row { - layoutDirection: direction - spacing: 10 - move: Transition { - NumberAnimation { - properties: "x" - } - } - Repeater { - model: 4 - Loader { - property int value: index - sourceComponent: delegate - } - } - } - Text { - text: "Grid" - anchors.horizontalCenter: parent.horizontalCenter - } - Grid { - layoutDirection: direction - spacing: 10; columns: 4 - move: Transition { - NumberAnimation { - properties: "x" - } - } - Repeater { - model: 11 - Loader { - property int value: index - sourceComponent: delegate - } - } - } - Text { - text: "Flow" - anchors.horizontalCenter: parent.horizontalCenter - } - Flow { - layoutDirection: direction - spacing: 10; width: parent.width - move: Transition { - NumberAnimation { - properties: "x" - } - } - Repeater { - model: 10 - Loader { - property int value: index - sourceComponent: delegate - } - } - } - Rectangle { - height: 50; width: parent.width - color: mouseArea.pressed ? "black" : "gray" - Text { - text: direction ? "Right to left" : "Left to right" - color: "white" - font.pixelSize: 16 - anchors.centerIn: parent - } - MouseArea { - id: mouseArea - onClicked: { - if (direction == Qt.LeftToRight) { - direction = Qt.RightToLeft; - } else { - direction = Qt.LeftToRight; - } - } - anchors.fill: parent - } - } - Rectangle { - height: 50; width: parent.width - color: mouseArea2.pressed ? "black" : "gray" - Text { - text: mirror ? "Mirrored" : "Normal" - color: "white" - font.pixelSize: 16 - anchors.centerIn: parent - } - MouseArea { - id: mouseArea2 - onClicked: { - mirror = !mirror; - } - anchors.fill: parent - } - } - } - - Component { - id: delegate - Rectangle { - width: 50; height: 50 - color: Qt.rgba(0.8/(parent.value+1),0.8/(parent.value+1),0.8/(parent.value+1),1.0) - Text { - text: parent.parent.value+1 - color: "white" - font.pixelSize: 20 - anchors.centerIn: parent - } - } - } -} diff --git a/examples/declarative/positioners/layoutdirection/layoutdirection.qmlproject b/examples/declarative/positioners/layoutdirection/layoutdirection.qmlproject deleted file mode 100644 index e526217..0000000 --- a/examples/declarative/positioners/layoutdirection/layoutdirection.qmlproject +++ /dev/null @@ -1,18 +0,0 @@ -/* File generated by QtCreator */ - -import QmlProject 1.0 - -Project { - /* Include .qml, .js, and image files from current directory and subdirectories */ - QmlFiles { - directory: "." - } - JavaScriptFiles { - directory: "." - } - ImageFiles { - directory: "." - } - /* List of plugin directories passed to QML runtime */ - // importPaths: [ " ../exampleplugin " ] -} diff --git a/examples/declarative/positioners/positioners.qml b/examples/declarative/positioners/positioners.qml new file mode 100644 index 0000000..7d6d8fe --- /dev/null +++ b/examples/declarative/positioners/positioners.qml @@ -0,0 +1,253 @@ +/**************************************************************************** +** +** 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 examples 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 { + id: page + width: 420; height: 420 + + Column { + id: layout1 + y: 0 + move: Transition { + NumberAnimation { properties: "y"; easing.type: Easing.OutBounce } + } + add: Transition { + NumberAnimation { properties: "y"; easing.type: Easing.OutQuad } + } + + Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueV1 + width: 100; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueV2 + width: 100; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 } + } + + Row { + id: layout2 + y: 300 + move: Transition { + NumberAnimation { properties: "x"; easing.type: Easing.OutBounce } + } + add: Transition { + NumberAnimation { properties: "x"; easing.type: Easing.OutQuad } + } + + Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 } + + Rectangle { + id: blueH1 + width: 50; height: 100 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 } + + Rectangle { + id: blueH2 + width: 50; height: 100 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 } + } + + Button { + x: 135; y: 90 + text: "Remove" + icon: "del.png" + + onClicked: { + blueH2.opacity = 0 + blueH1.opacity = 0 + blueV1.opacity = 0 + blueV2.opacity = 0 + blueG1.opacity = 0 + blueG2.opacity = 0 + blueG3.opacity = 0 + blueF1.opacity = 0 + blueF2.opacity = 0 + blueF3.opacity = 0 + } + } + + Button { + x: 145; y: 140 + text: "Add" + icon: "add.png" + + onClicked: { + blueH2.opacity = 1 + blueH1.opacity = 1 + blueV1.opacity = 1 + blueV2.opacity = 1 + blueG1.opacity = 1 + blueG2.opacity = 1 + blueG3.opacity = 1 + blueF1.opacity = 1 + blueF2.opacity = 1 + blueF3.opacity = 1 + } + } + + Grid { + x: 260; y: 0 + columns: 3 + + move: Transition { + NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } + } + + add: Transition { + NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } + } + + Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueG1 + width: 50; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueG2 + width: 50; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueG3 + width: 50; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } + } + + Flow { + id: layout4 + x: 260; y: 250; width: 150 + + move: Transition { + NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } + } + + add: Transition { + NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } + } + + Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueF1 + width: 60; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "green"; width: 30; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueF2 + width: 60; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } + + Rectangle { + id: blueF3 + width: 40; height: 50 + color: "lightsteelblue" + border.color: "black" + radius: 15 + Behavior on opacity { NumberAnimation {} } + } + + Rectangle { color: "red"; width: 80; height: 50; border.color: "black"; radius: 15 } + } + +} diff --git a/examples/declarative/positioners/positioners.qmlproject b/examples/declarative/positioners/positioners.qmlproject new file mode 100644 index 0000000..e526217 --- /dev/null +++ b/examples/declarative/positioners/positioners.qmlproject @@ -0,0 +1,18 @@ +/* File generated by QtCreator */ + +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/righttoleft/layoutdirection/layoutdirection.qml b/examples/declarative/righttoleft/layoutdirection/layoutdirection.qml new file mode 100644 index 0000000..ff641d7 --- /dev/null +++ b/examples/declarative/righttoleft/layoutdirection/layoutdirection.qml @@ -0,0 +1,246 @@ +/**************************************************************************** +** +** 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 examples 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.1 + +Rectangle { + id: root + property bool mirror + property int direction: Qt.application.layoutDirection + LayoutMirroring.enabled: mirror + LayoutMirroring.childrenInherit: true + width: column.width + 80 + height: column.height + 40 + Column { + id: column + width: 190 + spacing: 10 + anchors.centerIn: parent + + Text { + text: "Row" + anchors.horizontalCenter: parent.horizontalCenter + } + + Row { + layoutDirection: root.direction + spacing: 10 + move: Transition { + NumberAnimation { + properties: "x" + } + } + Repeater { + model: 4 + Loader { + property int value: index + sourceComponent: positionerDelegate + } + } + } + + Text { + text: "Grid" + anchors.horizontalCenter: parent.horizontalCenter + } + + Grid { + layoutDirection: root.direction + spacing: 10; columns: 4 + move: Transition { + NumberAnimation { + properties: "x" + } + } + Repeater { + model: 11 + Loader { + property int value: index + sourceComponent: positionerDelegate + } + } + } + + Text { + text: "Flow" + anchors.horizontalCenter: parent.horizontalCenter + } + + Flow { + layoutDirection: root.direction + spacing: 10; width: parent.width + move: Transition { + NumberAnimation { + properties: "x" + } + } + Repeater { + model: 10 + Loader { + property int value: index + sourceComponent: positionerDelegate + } + } + } + + Text { + text: "ListView" + anchors.horizontalCenter: parent.horizontalCenter + } + + ListView { + id: listView + clip: true + width: parent.width; height: 40 + layoutDirection: root.direction + orientation: Qt.Horizontal + model: 48 + delegate: viewDelegate + } + + Text { + text: "GridView" + anchors.horizontalCenter: parent.horizontalCenter + } + + GridView { + clip: true + width: 200; height: 160 + cellWidth: 50; cellHeight: 50 + layoutDirection: root.direction + model: 48 + delegate: viewDelegate + } + + Rectangle { + height: 50; width: parent.width + color: mouseArea.pressed ? "black" : "gray" + Column { + anchors.centerIn: parent + Text { + text: root.direction ? "Right to left" : "Left to right" + color: "white" + font.pixelSize: 16 + anchors.horizontalCenter: parent.horizontalCenter + } + Text { + text: "(click here)" + color: "white" + font.pixelSize: 10 + font.italic: true + anchors.horizontalCenter: parent.horizontalCenter + } + } + MouseArea { + id: mouseArea + anchors.fill: parent + onClicked: { + if (root.direction == Qt.LeftToRight) { + root.direction = Qt.RightToLeft; + } else { + root.direction = Qt.LeftToRight; + } + } + } + } + + Rectangle { + height: 50; width: parent.width + color: mouseArea2.pressed ? "black" : "gray" + Column { + anchors.centerIn: parent + Text { + text: root.mirror ? "Mirrored" : "Normal" + color: "white" + font.pixelSize: 16 + anchors.horizontalCenter: parent.horizontalCenter + } + Text { + text: "(click here)" + color: "white" + font.pixelSize: 10 + font.italic: true + anchors.horizontalCenter: parent.horizontalCenter + } + } + MouseArea { + id: mouseArea2 + anchors.fill: parent + onClicked: { + root.mirror = !root.mirror; + } + } + } + } + + Component { + id: positionerDelegate + Rectangle { + width: 40; height: 40 + color: Qt.rgba(0.8/(parent.value+1),0.8/(parent.value+1),0.8/(parent.value+1),1.0) + Text { + text: parent.parent.value+1 + color: "white" + font.pixelSize: 18 + anchors.centerIn: parent + } + } + } + Component { + id: viewDelegate + Item { + width: (listView.effectiveLayoutDirection == Qt.LeftToRight ? (index == 48 - 1) : (index == 0)) ? 40 : 50 + Rectangle { + width: 40; height: 40 + color: Qt.rgba(0.5+(48 - index)*Math.random()/48, + 0.3+index*Math.random()/48, + 0.3*Math.random(), + 1.0) + Text { + text: index+1 + color: "white" + font.pixelSize: 18 + anchors.centerIn: parent + } + } + } + } +} + diff --git a/examples/declarative/righttoleft/layoutdirection/layoutdirection.qmlproject b/examples/declarative/righttoleft/layoutdirection/layoutdirection.qmlproject new file mode 100644 index 0000000..e526217 --- /dev/null +++ b/examples/declarative/righttoleft/layoutdirection/layoutdirection.qmlproject @@ -0,0 +1,18 @@ +/* File generated by QtCreator */ + +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/righttoleft/layoutmirroring/layoutmirroring.qml b/examples/declarative/righttoleft/layoutmirroring/layoutmirroring.qml new file mode 100644 index 0000000..25fa52b --- /dev/null +++ b/examples/declarative/righttoleft/layoutmirroring/layoutmirroring.qml @@ -0,0 +1,313 @@ +/**************************************************************************** +** +** 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 examples 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.1 + +Rectangle { + id: root + property bool mirror: Qt.application.layoutDirection == Qt.RightToLeft + LayoutMirroring.enabled: mirror + LayoutMirroring.childrenInherit: true + width: 400 + height: 875 + color: "lightblue" + + Column { + spacing: 10 + anchors { left: parent.left; right: parent.right; top: parent.top; margins: 10 } + + Text { + text: "Positioners" + anchors.left: parent.left + } + + Column { + id: positioners + spacing: 5 + anchors.left: parent.left + Row { + id: row + spacing: 4 + property string text: "THISISROW" + anchors.left: parent.left + Repeater { + model: parent.text.length + delegate: positionerDelegate + } + } + Flow { + id: flow + spacing: 4 + width: 90 + property string text: "THISISFLOW" + anchors.left: parent.left + Repeater { + model: parent.text.length + delegate: positionerDelegate + } + } + Grid { + id: grid + spacing: 4 + columns: 6 + property string text: "THISISGRID" + anchors.left: parent.left + Repeater { + model: parent.text.length + delegate: positionerDelegate + } + } + Component { + id: positionerDelegate + Text { + color: "white" + font.pixelSize: 20 + text: parent.text[index] + Rectangle { + z: -1 + opacity: 0.7 + color: "black" + anchors.fill: parent + } + } + } + } + + Text { + text: "Text alignment" + anchors.left: parent.left + } + + Rectangle { + id: textStrings + width: 148 + height: 85 + color: "white" + anchors.left: parent.left + Column { + spacing: 5 + width: parent.width + anchors { fill: parent; margins: 5 } + Text { + id: englishText + width: parent.width + text: "English text" + } + Text { + id: arabicText + width: parent.width + text: "النص العربي" + } + Text { + id: leftAlignedText + width: parent.width + text: "Text aligned to left" + horizontalAlignment: Text.AlignLeft + } + Text { + id: rightAlignedText + width: parent.width + text: "Text aligned to right" + horizontalAlignment: Text.AlignRight + } + } + } + + Text { + text: "Model views" + anchors.left: parent.left + } + + Column { + id: views + spacing: 10 + anchors.left: parent.left + ListView { + id: listView + z: -1 + clip: true + model: text.length + width: 360; height: 45 + orientation: Qt.Horizontal + property string text: "LISTVIEWLISTVIEWLISTVIEWLISTVIEWLISTVIEWLISTVIEW" + delegate: Rectangle { + color: "black" + width: 45; height: 45 + Rectangle { + anchors { fill: parent; margins: 1 } + color: "red" + } + Text { + text: listView.text[index] + font.pixelSize: 30 + anchors.centerIn: parent + } + } + } + GridView { + id: gridView + z: -1 + clip: true + model: text.length + width: 180; height: 90 + cellWidth: 45; cellHeight: 45 + property string text: "GRIDVIEWGRIDVIEWGRIDVIEWGRIDVIEWGRIDVIEWGRIDVIEW" + anchors.left: parent.left + delegate: Rectangle { + color: "black" + width: 45; height: 45 + Rectangle { + anchors { fill: parent; margins: 1 } + color: "red" + } + Text { + anchors.centerIn: parent + font.pixelSize: 30 + text: gridView.text[index] + } + } + } + } + + Text { + text: "Item x" + anchors.left: parent.left + } + Rectangle { + id: items + color: Qt.rgba(0.2, 0.2, 0.2, 0.6) + width: 275; height: 95 + anchors.left: parent.left + Rectangle { + y: 5; x: 5 + width: 130; height: 40 + Text { + text: "Item with x: 5\n(not mirrored)" + anchors.centerIn: parent + } + } + Rectangle { + color: Qt.rgba(0.7, 0.7, 0.7) + y: 50; x: mirror(5) + width: 130; height: 40 + function mirror(value) { + return LayoutMirroring.enabled ? (parent.width - width - value) : value; + } + Text { + text: "Item with x: " + parent.x + "\n(manually mirrored)" + anchors.centerIn: parent + } + } + } + Text { + text: "Item anchors" + anchors.left: parent.left + } + + Rectangle { + id: anchoredItems + color: Qt.rgba(0.2, 0.2, 0.2, 0.6) + width: 270; height: 170 + anchors.left: parent.left + Rectangle { + id: blackRectangle + color: "black" + width: 180; height: 90 + anchors { horizontalCenter: parent.horizontalCenter; horizontalCenterOffset: 30 } + Text { + text: "Horizontal center anchored\nwith offset 30\nto the horizontal center\nof the parent." + color: "white" + anchors.centerIn: parent + } + } + Rectangle { + id: whiteRectangle + color: "white" + width: 120; height: 70 + anchors { left: parent.left; bottom: parent.bottom } + Text { + text: "Left side anchored\nto the left side\nof the parent." + color: "black" + anchors.centerIn: parent + } + } + Rectangle { + id: grayRectangle + color: Qt.rgba(0.7, 0.7, 0.7) + width: 140; height: 90 + anchors { right: parent.right; bottom: parent.bottom } + Text { + text: "Right side anchored\nto the right side\nof the parent." + anchors.centerIn: parent + } + } + } + Rectangle { + id: mirrorButton + color: mouseArea2.pressed ? "black" : "gray" + height: 50; width: parent.width + anchors.left: parent.left + Column { + anchors.centerIn: parent + Text { + text: root.mirror ? "Mirrored" : "Normal" + color: "white" + font.pixelSize: 16 + anchors.horizontalCenter: parent.horizontalCenter + } + Text { + text: "(click here)" + color: "white" + font.pixelSize: 10 + font.italic: true + anchors.horizontalCenter: parent.horizontalCenter + } + } + MouseArea { + id: mouseArea2 + anchors.fill: parent + onClicked: { + root.mirror = !root.mirror; + } + } + } + } +} + diff --git a/examples/declarative/righttoleft/layoutmirroring/layoutmirroring.qmlproject b/examples/declarative/righttoleft/layoutmirroring/layoutmirroring.qmlproject new file mode 100644 index 0000000..e526217 --- /dev/null +++ b/examples/declarative/righttoleft/layoutmirroring/layoutmirroring.qmlproject @@ -0,0 +1,18 @@ +/* File generated by QtCreator */ + +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/examples/declarative/righttoleft/textalignment/textalignment.qml b/examples/declarative/righttoleft/textalignment/textalignment.qml new file mode 100644 index 0000000..90168de --- /dev/null +++ b/examples/declarative/righttoleft/textalignment/textalignment.qml @@ -0,0 +1,426 @@ +/**************************************************************************** +** +** 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 examples 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.1 + +Rectangle { + id: root + color: "white" + width: containerColumn.width + height: containerColumn.height + containerColumn.anchors.topMargin + + property bool mirror: false + property variant horizontalAlignment: undefined + + property variant editorType: ["Plain Text", "Styled Text", "Plain Rich Text", "Italic Rich Text", "Plain TextEdit", "Italic TextEdit", "TextInput"] + property variant text: ["", " ", "Hello world!", "مرحبا العالم!", "Hello world! Hello!\nHello world! Hello!", "مرحبا العالم! مرحبا! مرحبا العالم! مرحبا!" ,"مرحبا العالم! مرحبا! مرحبا Hello world!\nالعالم! مرحبا!"] + property variant description: ["empty text", "white-space-only text", "left-to-right text", "right-to-left text", "multi-line left-to-right text", "multi-line right-to-left text", "multi-line bidi text"] + property variant textComponents: [plainTextComponent, styledTextComponent, richTextComponent, italicRichTextComponent, plainTextEdit, italicTextEdit, textInput] + + function shortText(horizontalAlignment) { + + // all the different QML editors have + // the same alignment values + switch (horizontalAlignment) { + case Text.AlignLeft: + return "L"; + case Text.AlignRight: + return "R"; + case Text.AlignHCenter: + return "C"; + case Text.AlignJustify: + return "J"; + default: + return "Error"; + } + } + Column { + id: containerColumn + spacing: 10 + width: editorTypeRow.width + anchors { top: parent.top; topMargin: 5 } + Row { + id: editorTypeRow + Repeater { + model: editorType.length + Item { + width: editorColumn.width + height: editorColumn.height + Column { + id: editorColumn + spacing: 5 + width: textColumn.width+10 + Text { + text: root.editorType[index] + font.pixelSize: 16 + anchors.horizontalCenter: parent.horizontalCenter + } + Column { + id: textColumn + spacing: 5 + anchors.horizontalCenter: parent.horizontalCenter + Repeater { + model: textComponents.length + delegate: textComponents[index] + } + } + } + } + } + } + Column { + spacing: 2 + width: parent.width + Rectangle { + // button + height: 50; width: parent.width + color: mouseArea.pressed ? "black" : "lightgray" + Column { + anchors.centerIn: parent + Text { + text: root.mirror ? "Mirrored" : "Normal" + color: "white" + font.pixelSize: 16 + anchors.horizontalCenter: parent.horizontalCenter + } + Text { + text: "(click here)" + color: "white" + font.pixelSize: 10 + font.italic: true + anchors.horizontalCenter: parent.horizontalCenter + } + } + MouseArea { + id: mouseArea + property int index: 0 + anchors.fill: parent + onClicked: root.mirror = !root.mirror + } + } + Rectangle { + // button + height: 50; width: parent.width + color: mouseArea2.pressed ? "black" : "gray" + Column { + anchors.centerIn: parent + Text { + text: { + if (root.horizontalAlignment == undefined) + return "Implict alignment"; + switch (root.horizontalAlignment) { + case Text.AlignLeft: + return "Left alignment"; + case Text.AlignRight: + return "Right alignment"; + case Text.AlignHCenter: + return "Center alignment"; + case Text.AlignJustify: + return "Justify alignment"; + } + } + color: "white" + font.pixelSize: 16 + anchors.horizontalCenter: parent.horizontalCenter + } + Text { + text: "(click here)" + color: "white" + font.pixelSize: 10 + font.italic: true + anchors.horizontalCenter: parent.horizontalCenter + } + } + MouseArea { + id: mouseArea2 + property int index: 0 + anchors.fill: parent + onClicked: { + if (index < 0) { + root.horizontalAlignment = undefined; + } else { + root.horizontalAlignment = Math.pow(2, index); + } + index = (index + 2) % 5 - 1; + } + } + } + } + } + + Component { + id: plainTextComponent + Text { + width: 180 + text: root.text[index] + font.pixelSize: 24 + wrapMode: Text.WordWrap + horizontalAlignment: root.horizontalAlignment + LayoutMirroring.enabled: root.mirror + textFormat: Text.RichText + Rectangle { + z: -1 + color: Qt.rgba(0.8, 0.2, 0.2, 0.3) + anchors.fill: parent + } + Text { + text: root.description[index] + color: Qt.rgba(1,1,1,1.0) + anchors.centerIn: parent + Rectangle { + z: -1 + color: Qt.rgba(0.3, 0, 0, 0.3) + anchors { fill: parent; margins: -3 } + } + } + Text { + color: "white" + text: shortText(parent.horizontalAlignment) + anchors { top: parent.top; right: parent.right; margins: 2 } + } + } + } + + Component { + id: styledTextComponent + Text { + width: 180 + text: root.text[index] + font.pixelSize: 24 + wrapMode: Text.WordWrap + horizontalAlignment: root.horizontalAlignment + LayoutMirroring.enabled: root.mirror + textFormat: Text.RichText + style: Text.Sunken + styleColor: "white" + Rectangle { + z: -1 + color: Qt.rgba(0.8, 0.2, 0.2, 0.3) + anchors.fill: parent + } + Text { + text: root.description[index] + color: Qt.rgba(1,1,1,1.0) + anchors.centerIn: parent + Rectangle { + z: -1 + color: Qt.rgba(0.3, 0, 0, 0.3) + anchors { fill: parent; margins: -3 } + } + } + Text { + color: "white" + text: shortText(parent.horizontalAlignment) + anchors { top: parent.top; right: parent.right; margins: 2 } + } + } + } + + Component { + id: richTextComponent + Text { + width: 180 + text: root.text[index] + font.pixelSize: 24 + wrapMode: Text.WordWrap + horizontalAlignment: root.horizontalAlignment + LayoutMirroring.enabled: root.mirror + textFormat: Text.RichText + Rectangle { + z: -1 + color: Qt.rgba(0.8, 0.2, 0.2, 0.3) + anchors.fill: parent + } + Text { + text: root.description[index] + color: Qt.rgba(1,1,1,1.0) + anchors.centerIn: parent + Rectangle { + z: -1 + color: Qt.rgba(0.3, 0, 0, 0.3) + anchors { fill: parent; margins: -3 } + } + } + Text { + color: "white" + text: shortText(parent.horizontalAlignment) + anchors { top: parent.top; right: parent.right; margins: 2 } + } + } + } + + Component { + id: italicRichTextComponent + Text { + width: 180 + text: "" + root.text[index] + "" + font.pixelSize: 24 + wrapMode: Text.WordWrap + horizontalAlignment: root.horizontalAlignment + LayoutMirroring.enabled: root.mirror + textFormat: Text.RichText + property variant backgroundColor: Qt.rgba(0.8, 0.2, 0.2, 0.3) + Rectangle { + z: -1 + color: parent.backgroundColor + anchors.fill: parent + } + Text { + text: root.description[index] + color: Qt.rgba(1,1,1,1.0) + anchors.centerIn: parent + Rectangle { + z: -1 + color: Qt.rgba(0.3, 0, 0, 0.3) + anchors { fill: parent; margins: -3 } + } + } + Text { + color: "white" + text: shortText(parent.horizontalAlignment) + anchors { top: parent.top; right: parent.right; margins: 2 } + } + } + } + + Component { + id: plainTextEdit + TextEdit { + width: 180 + text: root.text[index] + font.pixelSize: 24 + cursorVisible: true + wrapMode: TextEdit.WordWrap + horizontalAlignment: root.horizontalAlignment + LayoutMirroring.enabled: root.mirror + Rectangle { + z: -1 + color: Qt.rgba(0.5, 0.5, 0.2, 0.3) + anchors.fill: parent + } + Text { + text: root.description[index] + color: Qt.rgba(1,1,1,1.0) + anchors.centerIn: parent + Rectangle { + z: -1 + color: Qt.rgba(0.3, 0, 0, 0.3) + anchors { fill: parent; margins: -3 } + } + } + Text { + color: "white" + text: shortText(parent.horizontalAlignment) + anchors { top: parent.top; right: parent.right; margins: 2 } + } + } + } + + Component { + id: italicTextEdit + TextEdit { + width: 180 + text: "" + root.text[index] + "" + font.pixelSize: 24 + cursorVisible: true + wrapMode: TextEdit.WordWrap + horizontalAlignment: root.horizontalAlignment + LayoutMirroring.enabled: root.mirror + Rectangle { + z: -1 + color: Qt.rgba(0.5, 0.5, 0.2, 0.3) + anchors.fill: parent + } + Text { + text: root.description[index] + color: Qt.rgba(1,1,1,1.0) + anchors.centerIn: parent + Rectangle { + z: -1 + color: Qt.rgba(0.3, 0, 0, 0.3) + anchors { fill: parent; margins: -3 } + } + } + Text { + color: "white" + text: shortText(parent.horizontalAlignment) + anchors { top: parent.top; right: parent.right; margins: 2 } + } + } + } + + Component { + id: textInput + Item { + width: 180 + height: textInput.text.length > 20 ? 3*textInput.height : textInput.height + TextInput { + id: textInput + width: 180 + text: root.text[index] + font.pixelSize: 24 + cursorVisible: true + horizontalAlignment: root.horizontalAlignment + LayoutMirroring.enabled: root.mirror + Rectangle { + z: -1 + color: Qt.rgba(0.6, 0.4, 0.2, 0.3) + anchors.fill: parent + } + Text { + text: root.description[index] + color: Qt.rgba(1,1,1,1.0) + anchors.centerIn: parent + Rectangle { + z: -1 + color: Qt.rgba(0.3, 0, 0, 0.3) + anchors { fill: parent; margins: -3 } + } + } + Text { + color: "white" + text: shortText(parent.horizontalAlignment) + anchors { top: parent.top; right: parent.right; margins: 2 } + } + } + } + } +} + diff --git a/examples/declarative/righttoleft/textalignment/textalignment.qmlproject b/examples/declarative/righttoleft/textalignment/textalignment.qmlproject new file mode 100644 index 0000000..e526217 --- /dev/null +++ b/examples/declarative/righttoleft/textalignment/textalignment.qmlproject @@ -0,0 +1,18 @@ +/* File generated by QtCreator */ + +import QmlProject 1.0 + +Project { + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } + /* List of plugin directories passed to QML runtime */ + // importPaths: [ " ../exampleplugin " ] +} diff --git a/src/declarative/graphicsitems/qdeclarativetextinput.cpp b/src/declarative/graphicsitems/qdeclarativetextinput.cpp index c6de7a0..af18c90 100644 --- a/src/declarative/graphicsitems/qdeclarativetextinput.cpp +++ b/src/declarative/graphicsitems/qdeclarativetextinput.cpp @@ -399,10 +399,10 @@ bool QDeclarativeTextInputPrivate::setHAlign(QDeclarativeTextInput::HAlignment a if ((hAlign != alignment || forceAlign) && alignment <= QDeclarativeTextInput::AlignHCenter) { // justify not supported QDeclarativeTextInput::HAlignment oldEffectiveHAlign = q->effectiveHAlign(); hAlign = alignment; - return true; emit q->horizontalAlignmentChanged(alignment); if (oldEffectiveHAlign != q->effectiveHAlign()) emit q->effectiveHorizontalAlignmentChanged(); + return true; } return false; } -- cgit v0.12 From 9f99d85769b3c1c68dd8c9fd9afa1f09c9eeb2e9 Mon Sep 17 00:00:00 2001 From: Bea Lam Date: Mon, 21 Mar 2011 10:28:29 +1000 Subject: Fix license headers in example code Change-Id: I510caf92c2e33df2bb44d87cc07fe78a0823ab5f --- doc/src/snippets/declarative/righttoleft/Child.qml | 42 +++++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/doc/src/snippets/declarative/righttoleft/Child.qml b/doc/src/snippets/declarative/righttoleft/Child.qml index 2b3564e..48cb295 100644 --- a/doc/src/snippets/declarative/righttoleft/Child.qml +++ b/doc/src/snippets/declarative/righttoleft/Child.qml @@ -1,3 +1,43 @@ +/**************************************************************************** +** +** 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 { @@ -8,4 +48,4 @@ Rectangle { text: String.fromCharCode(65 + Math.floor(26*Math.random())) anchors.centerIn: parent } -} \ No newline at end of file +} -- cgit v0.12 From 40db21b1d8a020291f0a0660d30491b49f49885b Mon Sep 17 00:00:00 2001 From: Bea Lam Date: Mon, 21 Mar 2011 13:20:36 +1000 Subject: fixes/improvements for new QML right-to-left docs Clarify some of the docs and fix some broken doc links. --- doc/src/declarative/pics/layoutmirroring.png | Bin 0 -> 2542 bytes doc/src/declarative/righttoleft.qdoc | 105 +++++++++++---------- doc/src/declarative/whatsnew.qdoc | 2 +- doc/src/examples/qml-examples.qdoc | 6 ++ .../qml-righttoleft-layoutdirection-example.png | Bin 20945 -> 23327 bytes .../qml-righttoleft-layoutmirroring-example.png | Bin 31901 -> 38982 bytes doc/src/snippets/declarative/layoutmirroring.qml | 13 ++- doc/src/snippets/declarative/righttoleft.qml | 27 +++--- .../layoutdirection/layoutdirection.qml | 6 +- .../layoutmirroring/layoutmirroring.qml | 6 +- .../righttoleft/textalignment/textalignment.qml | 6 +- src/declarative/graphicsitems/qdeclarativeitem.cpp | 67 ++++++++----- .../graphicsitems/qdeclarativepositioners.cpp | 22 ++--- 13 files changed, 152 insertions(+), 108 deletions(-) create mode 100644 doc/src/declarative/pics/layoutmirroring.png diff --git a/doc/src/declarative/pics/layoutmirroring.png b/doc/src/declarative/pics/layoutmirroring.png new file mode 100644 index 0000000..df90ac4 Binary files /dev/null and b/doc/src/declarative/pics/layoutmirroring.png differ diff --git a/doc/src/declarative/righttoleft.qdoc b/doc/src/declarative/righttoleft.qdoc index 710855d..7db6136 100644 --- a/doc/src/declarative/righttoleft.qdoc +++ b/doc/src/declarative/righttoleft.qdoc @@ -27,7 +27,6 @@ /*! \page qml-righttoleft.html -\target righttoleft \title QML Right-to-left User Interfaces \section1 Overview @@ -39,104 +38,114 @@ is properly aligned to the right, and horizontally ordered content in views, lis correctly from the right to left. In right-to-left language speaking cultures, people naturally scan and read graphic elements and text -from the right to left. General rule of thumb is that the content like photos, videos, maps is not -mirrored, but positioning of the content is, like application layouts and the flow of visual elements. -Common use cases include photos shown in chronological order should flow right-to-left, the -low end range of the horizontal sliders should be located at the right side of the slider, and the -text lines should should be aligned to the right side of the available area. The location of visual -elements should not be mirrored when the position is related to a content, for example when a +from the right to left. The general rule of thumb is that content (like photos, videos and maps) is not +mirrored, but positioning of the content (like application layouts and the flow of visual elements) is +mirrored. For example, photos shown in chronological order should flow from right to left, the +low end range of the horizontal sliders should be located at the right side of the slider, and +text lines should should be aligned to the right side of the available text area. The location of visual +elements should not be mirrored when the position is related to a content; for example, when a position marker is shown to indicate a location on a map. Also, there are some special cases you may -need to take into account where the right-to-left language speakers are used to the left-to-right +need to take into account where right-to-left language speakers are used to left-to-right positioning, for example when using number dialers in phones and media play, pause, rewind and forward buttons in music players. \section1 Text Alignment -Applies to \l Text, \l TextInput and \l TextEdit. +(This applies to the \l Text, \l TextInput and \l TextEdit elements.) -When the horizontal alignment of the text item is not explicitly set, the text element will be +When the horizontal alignment of a text item is not explicitly set, the text element is automatically aligned to the natural reading direction of the text. By default left-to-right text like English is aligned to the left side of the text area, and right-to-left text like Arabic is aligned to the right side of the text area. The alignment of a text element with empty text takes -it's alignment cue from \l QApplication::keyboardInputDirection(), which is based on the active -system locale. Explicitly setting property \c horizontalAlignment for the text will override any -implicit locale-based alignment. Enabling layout mirroring using attached property -\l LayoutMirroring causes any explicit left and right horizontal alignments to be mirrored. -Note that \c horizontalAlignment property itself will remain unchanged. The effective alignment of -the text element that takes the mirroring into account can be read from the +its alignment cue from \l QApplication::keyboardInputDirection(), which is based on the active +system locale. + +This default locale-based alignment can be overriden by setting the \c horizontalAlignment +property for the text element, or by enabling layout mirroring using the \l LayoutMirroring attached +property, which causes any explicit left and right horizontal alignments to be mirrored. +Note that when \l LayoutMirroring is set, the \c horizontalAlignment property value remains unchanged; +the effective alignment of the text element that takes the mirroring into account can be read from the \c effectiveHorizontalAlignment property. \snippet doc/src/snippets/declarative/righttoleft.qml 0 \section1 Layout direction of positioners and views -Applies to \l Row, \l Grid, \l Flow, \l ListView and \l GridView +(This applies to the \l Row, \l Grid, \l Flow, \l ListView and \l GridView elements.) -From Qt Quick 1.1 onwards horizontal positioners and model views have gained a \c layoutDirection +From Qt Quick 1.1 onwards, elements used for horizontal positioning and model views have gained a \c layoutDirection property for controlling the horizontal direction of the layouts. Setting \c layoutDirection to \c Qt.RightToLeft causes items to be laid out from the right to left. By default Qt Quick follows the left-to-right layout direction. -Enabling application layout mirroring using attached property \c LayoutMirroring causes the effective -\c layoutDirection of positioners and views to be mirrored. Note that actual value of \c layoutDirection -property will remain unchanged. The effective layout direction of positioners and views that takes the mirroring into account can be read from the \c effectiveLayoutDirection property. +The horizontal layout direction can also be reversed through the \l LayoutMirroring attached property. +This causes the effective \c layoutDirection of positioners and views to be mirrored. Note the actual value +of the \c layoutDirection property will remain unchanged; the effective layout direction of positioners and +views that takes the mirroring into account can be read from the \c effectiveLayoutDirection property. \snippet doc/src/snippets/declarative/righttoleft.qml 1 \section1 Layout mirroring -Attached property \l LayoutMirroring is provided as a convenience for easily implementing right-to-left +The attached property \l LayoutMirroring is provided as a convenience for easily implementing right-to-left support for existing left-to-right Qt Quick applications. It mirrors the behavior of \l {anchor-layout} {Item anchors}, the layout direction of \l{Using QML Positioner and Repeater Items}{positioners} and -model views and the explicit text alignment of QML text elements. +model views, and the explicit text alignment of QML text elements. -You can enable layout mirroring for a particular Item +You can enable layout mirroring for a particular \l Item: \snippet doc/src/snippets/declarative/righttoleft.qml 2 -or make all children elements also inherit the layout direction +Or set all child elements to also inherit the layout direction: \snippet doc/src/snippets/declarative/righttoleft.qml 3 -Mirroring does not change the return value of the layout direction and horizontal alignment properties. -Separate read-only property \c effectiveLayoutDirection can be used to query the effective layout -direction of positioners and model views that takes the mirroring into account. Similarly \c Text, -\c TextInput and \c TextEdit elements have gained read-only property \c effectiveHorizontalAlignment -for querying what is the effective visual alignment of text. - -\c LayoutMirroring doesn't alter application layouts and animations done by using the \l x coordinate -directly. Adding right-to-left support to those layouts requires some code changes to your application, -especially in views that rely on both the anchors and x coordinate-based positioning. +Applying mirroring in this manner does not change the actual value of the relevant anchor, +\c layoutDirection or \c horizontalAlignment properties. The separate read-only property +\c effectiveLayoutDirection can be used to query the effective layout +direction of positioners and model views that takes the mirroring into account. Similarly the \l Text, +\l TextInput and \l TextEdit elements have gained the read-only property \c effectiveHorizontalAlignment +for querying the effective visual alignment of text. For anchors, the read only +\l {Item::anchors}{anchors.mirrored} property reflects whether anchors have been mirrored. + +Note that application layouts and animations that are defined using \l {Item::}{x} property values (as +opposed to anchors or positioner elements) are not affected by the \l LayoutMirroring attached property. +Therefore, adding right-to-left support to these types of layouts may require some code changes to your application, +especially in views that rely on both the anchors and x coordinate-based positioning. Here is one way to use +the \l LayoutMirroring attached property to apply mirroring to an item that is positioned using \l {Item::}{x} +coordinates: \snippet doc/src/snippets/declarative/righttoleft.qml 4 -Not all the layouts should be mirrored. There are cases where the visual element is positioned to -the right side of the screen for better one-handed use, because most people are right-handed, and not -because of the reading direction. In the case that a child element needs to be unaffected by the mirroring, set the \c LayoutMirroring.enabled property for that element to false. Qt Quick is designed -for developing animated, fluid user interfaces. When mirroring your application, remember to test that -the animations and transitions continue to work as expected. If you don't have resources to add +Not all layouts should necessarily be mirrored. There are cases where a visual element is positioned to +the right side of the screen for improved one-handed use, because most people are right-handed, and not +because of the reading direction. In the case that a child element should not be affected by mirroring, +set the \l {LayoutMirroring::enabled}{LayoutMirroring.enabled} property for that element to false. + +Qt Quick is designed for developing animated, fluid user interfaces. When mirroring your application, remember to test that +the animations and transitions continue to work as expected. If you do not have the resources to add right-to-left support for your application, it may be better to just keep the application layouts left aligned and just make sure that text is translated and aligned properly. \section1 Mirroring icons -Applies to \l Image, \l BorderImage, \l AnimatedImage +(This applies to \l Image, \l BorderImage and \l AnimatedImage elements.) -Most images don't need mirroring, but some directional icons should be mirrored. You can mirror the -painting of these icons with a dedicated \l mirror property introduced in Qt Quick 1.1. +Most images do not need to be mirrored, but some directional icons, such as arrows, may need to be mirrored. +The painting of these icons can be mirrored with a dedicated \c mirror property introduced in Qt Quick 1.1: \snippet doc/src/snippets/declarative/righttoleft.qml 5 \section1 Default layout direction -Property \l Qt.application.layoutDirection can be used to query the active layout direction of the +The \l {QML:Qt::application}{Qt.application.layoutDirection} property can be used to query the active layout direction of the application. It is based on QApplication::layoutDirection(), which most commonly determines the layout direction from the active language translation file. To define the layout direction for a particular locale, declare the dedicated string literal \c QT_LAYOUT_DIRECTION in context \c QApplication as either "LTR" or "RTL". -You can do this by first introducing line +You can do this by first introducing this line \code QT_TRANSLATE_NOOP("QApplication", "QT_LAYOUT_DIRECTION"); @@ -148,7 +157,7 @@ somewhere in your QML source code and calling \c lupdate to generate the transla lupdate myapp.qml -ts myapp.ts \endcode -This will append following declaration to the translation file, where you can fill either "LTR" or +This will append the following declaration to the translation file, where you can fill in either "LTR" or "RTL" as the translation for the locale. \code @@ -163,20 +172,20 @@ This will append following declaration to the translation file, where you can fi \endcode You can test that the layout direction works as expected by running your Qt Quick application with -the compiled translation file. +the compiled translation file: \code qmlviewer myapp.qml -translation myapp.qm \endcode You can test your application in right-to-left layout direction simply by executing qmlviewer with a -command-line parameter "-reverse". +command-line parameter "-reverse": \code qmlviewer myapp.qml -reverse \endcode -Layout direction can also be set from C++ by calling static function \l QApplication::setLayoutDirection(). +The layout direction can also be set from C++ by calling the static function \l QApplication::setLayoutDirection(): \code QApplication app(argc, argv); diff --git a/doc/src/declarative/whatsnew.qdoc b/doc/src/declarative/whatsnew.qdoc index 8d975c7..6eb1548 100644 --- a/doc/src/declarative/whatsnew.qdoc +++ b/doc/src/declarative/whatsnew.qdoc @@ -37,7 +37,7 @@ QtQuick 1.1 is a minor feature update. \e {import QtQuick 1.1} to use the new f PinchArea provides support for the common two finger pinch gesture. -\section2 LayoutMirroring +\section2 LayoutMirroring attached property \l {LayoutMirroring}{Layout mirroring} is useful when you need to support both left-to-right and right-to-left layout versions of your application that target different language areas. diff --git a/doc/src/examples/qml-examples.qdoc b/doc/src/examples/qml-examples.qdoc index 8f34a9f..3439b09 100644 --- a/doc/src/examples/qml-examples.qdoc +++ b/doc/src/examples/qml-examples.qdoc @@ -278,6 +278,8 @@ of the text and by the layout mirrroring. Click on the gray buttons shown at the bottom of the example to toggle between different horizontal alignment options. + + \sa {QML Right-to-left User Interfaces} */ /*! @@ -290,6 +292,8 @@ to toggle the layout direction of the shown elements. \image qml-righttoleft-layoutdirection-example.png + + \sa {QML Right-to-left User Interfaces} */ @@ -303,6 +307,8 @@ layout mirroring. \image qml-righttoleft-layoutmirroring-example.png + + \sa {QML Right-to-left User Interfaces} */ /*! diff --git a/doc/src/images/qml-righttoleft-layoutdirection-example.png b/doc/src/images/qml-righttoleft-layoutdirection-example.png index e8dd85c..381ecd7 100644 Binary files a/doc/src/images/qml-righttoleft-layoutdirection-example.png and b/doc/src/images/qml-righttoleft-layoutdirection-example.png differ diff --git a/doc/src/images/qml-righttoleft-layoutmirroring-example.png b/doc/src/images/qml-righttoleft-layoutmirroring-example.png index 2fa82ac..992c876 100644 Binary files a/doc/src/images/qml-righttoleft-layoutmirroring-example.png and b/doc/src/images/qml-righttoleft-layoutmirroring-example.png differ diff --git a/doc/src/snippets/declarative/layoutmirroring.qml b/doc/src/snippets/declarative/layoutmirroring.qml index 23eecd6..617f39d 100644 --- a/doc/src/snippets/declarative/layoutmirroring.qml +++ b/doc/src/snippets/declarative/layoutmirroring.qml @@ -43,18 +43,25 @@ import QtQuick 1.1 Rectangle { LayoutMirroring.enabled: true LayoutMirroring.childrenInherit: true - width: 240; height: 50 + + width: 300; height: 50 + color: "yellow" + border.width: 1 + Row { anchors { left: parent.left; margins: 5 } y: 5; spacing: 5 + Repeater { model: 5 + Rectangle { color: "red" - opacity: (5-index) / 5 + opacity: (5 - index) / 5 width: 40; height: 40 + Text { - text: index+1 + text: index + 1 anchors.centerIn: parent } } diff --git a/doc/src/snippets/declarative/righttoleft.qml b/doc/src/snippets/declarative/righttoleft.qml index 5d34f50..c2e504a 100644 --- a/doc/src/snippets/declarative/righttoleft.qml +++ b/doc/src/snippets/declarative/righttoleft.qml @@ -44,13 +44,13 @@ import "righttoleft" Column { width: 200 //![0] -// aligned to the left +// automatically aligned to the left Text { text: "Phone" width: 200 } -// aligned to the right +// automatically aligned to the right Text { text: "خامل" width: 200 @@ -73,20 +73,20 @@ Text { //![0] //![1] -// by default positions child items from the left to right +// by default child items are positioned from left to right Row { Child {} Child {} } -// positions child items from the right to left +// position child items from right to left Row { layoutDirection: Qt.RightToLeft Child {} Child {} } -// positions child items from the left to right +// position child items from left to right Row { LayoutMirroring.enabled: true layoutDirection: Qt.RightToLeft @@ -97,12 +97,13 @@ Row { //![2] Item { - // anchor left becomes right height: 50; width: 150 + LayoutMirroring.enabled: true - anchors.left: parent.left + anchors.left: parent.left // anchor left becomes right + Row { - // flows from the left to right + // items flow from left to right (as per default) Child {} Child {} Child {} @@ -112,13 +113,15 @@ Item { //![3] Item { - // anchor left becomes right height: 50; width: 150 + LayoutMirroring.enabled: true LayoutMirroring.childrenInherit: true - anchors.left: parent.left + anchors.left: parent.left // anchor left becomes right + Row { - // flows from the right to left + // setting childrenInherit in the parent causes these + // items to flow from right to left instead Child {} Child {} Child {} @@ -143,4 +146,4 @@ Image { mirror: true } //![5] -} \ No newline at end of file +} diff --git a/examples/declarative/righttoleft/layoutdirection/layoutdirection.qml b/examples/declarative/righttoleft/layoutdirection/layoutdirection.qml index ff641d7..b4efebe 100644 --- a/examples/declarative/righttoleft/layoutdirection/layoutdirection.qml +++ b/examples/declarative/righttoleft/layoutdirection/layoutdirection.qml @@ -161,7 +161,7 @@ Rectangle { anchors.horizontalCenter: parent.horizontalCenter } Text { - text: "(click here)" + text: "(click here to toggle)" color: "white" font.pixelSize: 10 font.italic: true @@ -187,13 +187,13 @@ Rectangle { Column { anchors.centerIn: parent Text { - text: root.mirror ? "Mirrored" : "Normal" + text: root.mirror ? "Mirrored" : "Not mirrored" color: "white" font.pixelSize: 16 anchors.horizontalCenter: parent.horizontalCenter } Text { - text: "(click here)" + text: "(click here to toggle)" color: "white" font.pixelSize: 10 font.italic: true diff --git a/examples/declarative/righttoleft/layoutmirroring/layoutmirroring.qml b/examples/declarative/righttoleft/layoutmirroring/layoutmirroring.qml index 25fa52b..0d1b871 100644 --- a/examples/declarative/righttoleft/layoutmirroring/layoutmirroring.qml +++ b/examples/declarative/righttoleft/layoutmirroring/layoutmirroring.qml @@ -47,7 +47,7 @@ Rectangle { LayoutMirroring.childrenInherit: true width: 400 height: 875 - color: "lightblue" + color: "lightsteelblue" Column { spacing: 10 @@ -287,13 +287,13 @@ Rectangle { Column { anchors.centerIn: parent Text { - text: root.mirror ? "Mirrored" : "Normal" + text: root.mirror ? "Mirrored" : "Not mirrored" color: "white" font.pixelSize: 16 anchors.horizontalCenter: parent.horizontalCenter } Text { - text: "(click here)" + text: "(click here to toggle)" color: "white" font.pixelSize: 10 font.italic: true diff --git a/examples/declarative/righttoleft/textalignment/textalignment.qml b/examples/declarative/righttoleft/textalignment/textalignment.qml index 90168de..4c40c3c 100644 --- a/examples/declarative/righttoleft/textalignment/textalignment.qml +++ b/examples/declarative/righttoleft/textalignment/textalignment.qml @@ -115,13 +115,13 @@ Rectangle { Column { anchors.centerIn: parent Text { - text: root.mirror ? "Mirrored" : "Normal" + text: root.mirror ? "Mirrored" : "Not mirrored" color: "white" font.pixelSize: 16 anchors.horizontalCenter: parent.horizontalCenter } Text { - text: "(click here)" + text: "(click here to toggle)" color: "white" font.pixelSize: 10 font.italic: true @@ -161,7 +161,7 @@ Rectangle { anchors.horizontalCenter: parent.horizontalCenter } Text { - text: "(click here)" + text: "(click here to toggle)" color: "white" font.pixelSize: 10 font.italic: true diff --git a/src/declarative/graphicsitems/qdeclarativeitem.cpp b/src/declarative/graphicsitems/qdeclarativeitem.cpp index 9cf1e78..4af91ce 100644 --- a/src/declarative/graphicsitems/qdeclarativeitem.cpp +++ b/src/declarative/graphicsitems/qdeclarativeitem.cpp @@ -746,44 +746,63 @@ void QDeclarativeKeyNavigationAttached::setFocusNavigation(QDeclarativeItem *cur \qmlclass LayoutMirroring QDeclarativeLayoutMirroringAttached \since QtQuick 1.1 \ingroup qml-utility-elements - \brief The LayoutMirroring is used for mirroring the Qt Quick application layouts. + \brief The LayoutMirroring attached property is used to mirror layout behavior. - LayoutMirroring \l enabled property can be used to horizontally mirror \l {anchor-layout}{Item anchors}, - \l{Using QML Positioner and Repeater Items}{Positioner} elements and QML views like \l {GridView}{GridView} - and horizontal \l {ListView}{ListView}. Mirroring is a visual change, left anchors will become - right anchors and left-to-right positioner will instead position child items from right to left. - By default setting the \l enabled property to true only affects the item in question. You can set property - LayoutDirection \l childrenInherit to true if you want the item children also inherit the mirror setting. - If no attached property has been defined, mirroring is disabled. + The LayoutMirroring attached property is used to horizontally mirror \l {anchor-layout}{Item anchors}, + \l{Using QML Positioner and Repeater Items}{positioner} elements (such as \l Row and \l Grid) + and views (such as \l GridView and horizontal \l ListView). Mirroring is a visual change: left + anchors become right anchors, and positioner elements like \l Grid and \l Row reverse the + horizontal layout of child items. - The following example shows mirroring in action. When \l enabled is set to true, left anchor - becomes right, and \l {Row}{Row} starts positioning items in a reverse order: + Mirroring is enabled for an item by setting the \l enabled property to true. By default, this + only affects the item itself; setting the \l childrenInherit property to true propagates the mirroring + behavior to all child elements as well. If the \c LayoutMirroring attached property has not been defined + for an item, mirroring is not enabled. + + The following example shows mirroring in action. The \l Row below is specified as being anchored + to the left of its parent. However, since mirroring has been enabled, the anchor is horizontally + reversed and it is now anchored to the right. Also, since items in a \l Row are positioned + from left to right by default, they are now positioned from right to left instead, as demonstrated + by the numbering and opacity of the items: \snippet doc/src/snippets/declarative/layoutmirroring.qml 0 - Layout mirroring is useful when you need to support both left-to-right and right-to-left - layout versions of your application that target different language areas. Inheritance saves - you from having to mirror the layouts manually for each layout item in your application. Keep - in mind however that the mirroring does not affect the positioning done by modifying Item's x - co-ordinate directly, so even with the mirroring enabled you will often need to do some layout - fixes to support the other reading direction. Also, there are cases where you need to disable - mirroring of individual child items, either because mirroring is not the wanted behavior or - because the item already implements mirroring in some custom way. + \image layoutmirroring.png + + Layout mirroring is useful when it is necessary to support both left-to-right and right-to-left + layout versions of an application to target different language areas. The \l childrenInherit + property allows layout mirroring to be applied without manually setting layout configurations + for every item in an application. Keep in mind, however, that mirroring does not affect any + positioning that is defined by the \l Item \l {Item::}{x} coordinate value, so even with + mirroring enabled, it will often be necessary to apply some layout fixes to support the + desired layout direction. Also, it may be necessary to disable the mirroring of individual + child items (by setting \l {enabled}{LayoutMirroring.enabled} to false for such items) if + mirroring is not the desired behavior, or if the child item already implements mirroring in + some custom way. + + See \l {QML Right-to-left User Interfaces} for further details on using \c LayoutMirroring and + other related features to implement right-to-left support for an application. */ /*! \qmlproperty bool LayoutMirroring::enabled - Setting this property to true mirrors item's layout horizontally, whether the layout is done - using \l {anchor-layout}{anchors}, \l{Using QML Positioner and Repeater Items}{Positioners} - or as a QML view \l {GridView}{GridView} or \l {ListView}{ListView}. + This property holds whether the item's layout is mirrored horizontally. Setting this to true + horizontally reverses \l {anchor-layout}{anchor} settings such that left anchors become right, + and right anchors become left. For \l{Using QML Positioner and Repeater Items}{positioner} elements + (such as \l Row and \l Grid) and view elements (such as \l {GridView}{GridView} and \l {ListView}{ListView}) + this also mirrors the horizontal layout direction of the item. + + The default value is false. */ /*! \qmlproperty bool LayoutMirroring::childrenInherit - This property can be set to true if you want the item children - to inherit the item's mirror setting. + This property holds whether the \l {enabled}{LayoutMirroring.enabled} value for this item + is inherited by its children. + + The default value is false. */ QDeclarativeLayoutMirroringAttached::QDeclarativeLayoutMirroringAttached(QObject *parent) : QObject(parent), itemPrivate(0) @@ -1558,7 +1577,7 @@ QDeclarativeKeysAttached *QDeclarativeKeysAttached::qmlAttachedProperties(QObjec \section1 Layout Mirroring - Item layouts can be mirrored using \l {LayoutMirroring}{LayoutMirroring} attached property. + Item layouts can be mirrored using the \l {LayoutMirroring}{LayoutMirroring} attached property. */ diff --git a/src/declarative/graphicsitems/qdeclarativepositioners.cpp b/src/declarative/graphicsitems/qdeclarativepositioners.cpp index 84dcec6..8a9bdb3 100644 --- a/src/declarative/graphicsitems/qdeclarativepositioners.cpp +++ b/src/declarative/graphicsitems/qdeclarativepositioners.cpp @@ -385,7 +385,7 @@ void QDeclarativeBasePositioner::finishApplyTransitions() Items with a width or height of 0 will not be positioned. - \sa Row, Grid, Flow, {declarative/positioners/addandremove}{Positioners example} + \sa Row, Grid, Flow, {declarative/positioners}{Positioners example} */ /*! \qmlproperty Transition Column::add @@ -425,7 +425,7 @@ void QDeclarativeBasePositioner::finishApplyTransitions() } \endqml - \sa add, {declarative/positioners/addandremove}{Positioners example} + \sa add, {declarative/positioners}{Positioners example} */ /*! \qmlproperty int Column::spacing @@ -528,7 +528,7 @@ void QDeclarativeColumn::reportConflictingAnchors() Items with a width or height of 0 will not be positioned. - \sa Column, Grid, Flow, {declarative/positioners/addandremove}{Positioners example} + \sa Column, Grid, Flow, {declarative/positioners}{Positioners example} */ /*! \qmlproperty Transition Row::add @@ -567,7 +567,7 @@ void QDeclarativeColumn::reportConflictingAnchors() } \endqml - \sa add, {declarative/positioners/addandremove}{Positioners example} + \sa add, {declarative/positioners}{Positioners example} */ /*! \qmlproperty int Row::spacing @@ -597,7 +597,7 @@ QDeclarativeRow::QDeclarativeRow(QDeclarativeItem *parent) the right anchor remains to the right of the row. \endlist - \sa Grid::layoutDirection, Flow::layoutDirection, {declarative/positioners/layoutdirection}{Layout directions example} + \sa Grid::layoutDirection, Flow::layoutDirection, {declarative/righttoleft/layoutdirection}{Layout directions example} */ Qt::LayoutDirection QDeclarativeRow::layoutDirection() const { @@ -753,7 +753,7 @@ void QDeclarativeRow::reportConflictingAnchors() Items with a width or height of 0 will not be positioned. - \sa Flow, Row, Column, {declarative/positioners/addandremove}{Positioners example} + \sa Flow, Row, Column, {declarative/positioners}{Positioners example} */ /*! \qmlproperty Transition Grid::add @@ -791,7 +791,7 @@ void QDeclarativeRow::reportConflictingAnchors() } \endqml - \sa add, {declarative/positioners/addandremove}{Positioners example} + \sa add, {declarative/positioners}{Positioners example} */ /*! \qmlproperty int Grid::spacing @@ -895,7 +895,7 @@ void QDeclarativeGrid::setFlow(Flow flow) \l Grid::flow property. \endlist - \sa Flow::layoutDirection, Row::layoutDirection, {declarative/positioners/layoutdirection}{Layout directions example} + \sa Flow::layoutDirection, Row::layoutDirection, {declarative/righttoleft/layoutdirection}{Layout directions example} */ Qt::LayoutDirection QDeclarativeGrid::layoutDirection() const { @@ -1137,7 +1137,7 @@ void QDeclarativeGrid::reportConflictingAnchors() Items with a width or height of 0 will not be positioned. - \sa Column, Row, Grid, {declarative/positioners/addandremove}{Positioners example} + \sa Column, Row, Grid, {declarative/positioners}{Positioners example} */ /*! \qmlproperty Transition Flow::add @@ -1176,7 +1176,7 @@ void QDeclarativeGrid::reportConflictingAnchors() } \endqml - \sa add, {declarative/positioners/addandremove}{Positioners example} + \sa add, {declarative/positioners}{Positioners example} */ /*! \qmlproperty int Flow::spacing @@ -1255,7 +1255,7 @@ void QDeclarativeFlow::setFlow(Flow flow) \l Flow::flow property. \endlist - \sa Grid::layoutDirection, Row::layoutDirection, {declarative/positioners/layoutdirection}{Layout directions example} + \sa Grid::layoutDirection, Row::layoutDirection, {declarative/righttoleft/layoutdirection}{Layout directions example} */ Qt::LayoutDirection QDeclarativeFlow::layoutDirection() const -- cgit v0.12