diff options
author | Qt Continuous Integration System <qt-info@nokia.com> | 2011-03-21 04:55:49 (GMT) |
---|---|---|
committer | Qt Continuous Integration System <qt-info@nokia.com> | 2011-03-21 04:55:49 (GMT) |
commit | fd110f31ce6b50b5258e6066073276a858fb88cd (patch) | |
tree | 00f85d50005277351d5a60730c8d62ba94109c50 | |
parent | c08eed6bec191364a31aecbf5cf33277c637bd7e (diff) | |
parent | 40db21b1d8a020291f0a0660d30491b49f49885b (diff) | |
download | Qt-fd110f31ce6b50b5258e6066073276a858fb88cd.zip Qt-fd110f31ce6b50b5258e6066073276a858fb88cd.tar.gz Qt-fd110f31ce6b50b5258e6066073276a858fb88cd.tar.bz2 |
Merge branch '4.7' of scm.dev.nokia.troll.no:qt/qt-qml into 4.7-integration
* '4.7' of scm.dev.nokia.troll.no:qt/qt-qml:
fixes/improvements for new QML right-to-left docs
Fix license headers in example code
Write Qt Quick 1.1 right-to-left documentation and examples
Doc fix - QtQuick 1.1 scheduling
27 files changed, 1535 insertions, 225 deletions
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/pics/layoutmirroring.png b/doc/src/declarative/pics/layoutmirroring.png Binary files differnew file mode 100644 index 0000000..df90ac4 --- /dev/null +++ b/doc/src/declarative/pics/layoutmirroring.png diff --git a/doc/src/declarative/righttoleft.qdoc b/doc/src/declarative/righttoleft.qdoc new file mode 100644 index 0000000..7db6136 --- /dev/null +++ b/doc/src/declarative/righttoleft.qdoc @@ -0,0 +1,195 @@ +/**************************************************************************** +** +** 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 +\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. 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 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 + +(This applies to the \l Text, \l TextInput and \l TextEdit elements.) + +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 +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 + +(This applies to the \l Row, \l Grid, \l Flow, \l ListView and \l GridView elements.) + +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. + +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 + +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. + +You can enable layout mirroring for a particular \l Item: + +\snippet doc/src/snippets/declarative/righttoleft.qml 2 + +Or set all child elements to also inherit the layout direction: + +\snippet doc/src/snippets/declarative/righttoleft.qml 3 + +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 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 + +(This applies to \l Image, \l BorderImage and \l AnimatedImage elements.) + +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 + +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 this 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 the following declaration to the translation file, where you can fill in either "LTR" or +"RTL" as the translation for the locale. + +\code +<context> + <name>QApplication</name> + <message> + <location filename="myapp.qml" line="33"/> + <source>QT_LAYOUT_DIRECTION</source> + <translation type="unfinished">RTL</translation> + </message> +</context> +\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 + +The layout direction can also be set from C++ by calling the static function \l QApplication::setLayoutDirection(): + +\code +QApplication app(argc, argv); +app.setLayoutDirection(Qt::RightToLeft); +\endcode + +*/ diff --git a/doc/src/declarative/whatsnew.qdoc b/doc/src/declarative/whatsnew.qdoc index 1a8ebd7..6eb1548 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. @@ -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 bbea19b..3439b09 100644 --- a/doc/src/examples/qml-examples.qdoc +++ b/doc/src/examples/qml-examples.qdoc @@ -270,23 +270,55 @@ */ /*! - \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. + 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. - \image qml-positioners-example.png + \sa {QML Right-to-left User Interfaces} */ /*! - \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 + + \sa {QML Right-to-left User Interfaces} +*/ + + +/*! + \title Right-to-left User Interfaces: Layout Mirroring Example + \example declarative/righttoleft/layoutmirroring + + 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-positioners-layoutdirection-example.png + \image qml-righttoleft-layoutmirroring-example.png + + \sa {QML Right-to-left User Interfaces} +*/ + +/*! + \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 +488,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 Binary files differnew file mode 100644 index 0000000..381ecd7 --- /dev/null +++ b/doc/src/images/qml-righttoleft-layoutdirection-example.png diff --git a/doc/src/images/qml-righttoleft-layoutmirroring-example.png b/doc/src/images/qml-righttoleft-layoutmirroring-example.png Binary files differnew file mode 100644 index 0000000..992c876 --- /dev/null +++ b/doc/src/images/qml-righttoleft-layoutmirroring-example.png diff --git a/doc/src/snippets/declarative/arrow.png b/doc/src/snippets/declarative/arrow.png Binary files differnew file mode 100644 index 0000000..f0cae21 --- /dev/null +++ b/doc/src/snippets/declarative/arrow.png 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 new file mode 100644 index 0000000..c2e504a --- /dev/null +++ b/doc/src/snippets/declarative/righttoleft.qml @@ -0,0 +1,149 @@ +/**************************************************************************** +** +** 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] +// automatically aligned to the left +Text { + text: "Phone" + width: 200 +} + +// automatically 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 child items are positioned from left to right +Row { + Child {} + Child {} +} + +// position child items from right to left +Row { + layoutDirection: Qt.RightToLeft + Child {} + Child {} +} + +// position child items from left to right +Row { + LayoutMirroring.enabled: true + layoutDirection: Qt.RightToLeft + Child {} + Child {} +} +//![1] + +//![2] +Item { + height: 50; width: 150 + + LayoutMirroring.enabled: true + anchors.left: parent.left // anchor left becomes right + + Row { + // items flow from left to right (as per default) + Child {} + Child {} + Child {} + } +} +//![2] + +//![3] +Item { + height: 50; width: 150 + + LayoutMirroring.enabled: true + LayoutMirroring.childrenInherit: true + anchors.left: parent.left // anchor left becomes right + + Row { + // setting childrenInherit in the parent causes these + // items to flow from right to left instead + 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] +} diff --git a/doc/src/snippets/declarative/righttoleft/Child.qml b/doc/src/snippets/declarative/righttoleft/Child.qml new file mode 100644 index 0000000..48cb295 --- /dev/null +++ b/doc/src/snippets/declarative/righttoleft/Child.qml @@ -0,0 +1,51 @@ +/**************************************************************************** +** +** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the documentation of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:BSD$ +** You may use this file under the terms of the BSD license as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor +** the names of its contributors may be used to endorse or promote +** products derived from this software without specific prior written +** permission. +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** $QT_END_LICENSE$ +** +****************************************************************************/ + +import QtQuick 1.0 + +Rectangle { + width: 50; height: 50 + color: "black" + Text { + color: "white" + text: String.fromCharCode(65 + Math.floor(26*Math.random())) + anchors.centerIn: parent + } +} diff --git a/examples/declarative/positioners/addandremove/Button.qml b/examples/declarative/positioners/Button.qml index 25907c0..25907c0 100644 --- a/examples/declarative/positioners/addandremove/Button.qml +++ b/examples/declarative/positioners/Button.qml diff --git a/examples/declarative/positioners/addandremove/add.png b/examples/declarative/positioners/add.png Binary files differindex 1ee4542..1ee4542 100644 --- a/examples/declarative/positioners/addandremove/add.png +++ b/examples/declarative/positioners/add.png diff --git a/examples/declarative/positioners/addandremove/del.png b/examples/declarative/positioners/del.png Binary files differindex 8d2eaed..8d2eaed 100644 --- a/examples/declarative/positioners/addandremove/del.png +++ b/examples/declarative/positioners/del.png 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/addandremove/addandremove.qml b/examples/declarative/positioners/positioners.qml index 7d6d8fe..7d6d8fe 100644 --- a/examples/declarative/positioners/addandremove/addandremove.qml +++ b/examples/declarative/positioners/positioners.qml diff --git a/examples/declarative/positioners/layoutdirection/layoutdirection.qmlproject b/examples/declarative/positioners/positioners.qmlproject index e526217..e526217 100644 --- a/examples/declarative/positioners/layoutdirection/layoutdirection.qmlproject +++ b/examples/declarative/positioners/positioners.qmlproject diff --git a/examples/declarative/righttoleft/layoutdirection/layoutdirection.qml b/examples/declarative/righttoleft/layoutdirection/layoutdirection.qml new file mode 100644 index 0000000..b4efebe --- /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 to toggle)" + 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" : "Not mirrored" + color: "white" + font.pixelSize: 16 + anchors.horizontalCenter: parent.horizontalCenter + } + Text { + text: "(click here to toggle)" + 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/positioners/addandremove/addandremove.qmlproject b/examples/declarative/righttoleft/layoutdirection/layoutdirection.qmlproject index e526217..e526217 100644 --- a/examples/declarative/positioners/addandremove/addandremove.qmlproject +++ b/examples/declarative/righttoleft/layoutdirection/layoutdirection.qmlproject diff --git a/examples/declarative/righttoleft/layoutmirroring/layoutmirroring.qml b/examples/declarative/righttoleft/layoutmirroring/layoutmirroring.qml new file mode 100644 index 0000000..0d1b871 --- /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: "lightsteelblue" + + 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" : "Not mirrored" + color: "white" + font.pixelSize: 16 + anchors.horizontalCenter: parent.horizontalCenter + } + Text { + text: "(click here to toggle)" + 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..4c40c3c --- /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" : "Not mirrored" + color: "white" + font.pixelSize: 16 + anchors.horizontalCenter: parent.horizontalCenter + } + Text { + text: "(click here to toggle)" + 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 to toggle)" + 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: "<i>" + root.text[index] + "</i>" + 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: "<i>" + root.text[index] + "<i>" + 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/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 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; } |