From: Alan Alpert Date: Wed, 7 Mar 2012 07:10:14 +0000 (+1000) Subject: Update righttoleft examples to new form factor X-Git-Url: http://git.silmor.de/gitweb/?a=commitdiff_plain;h=576fb7a8c9e15052f8662e3fcbe03a87c8316939;p=konrad%2Fqtdeclarative.git Update righttoleft examples to new form factor Change-Id: I2591f45a91da8bad90c5f3b9c963199c57bcf74d Reviewed-by: Yann Bodson --- diff --git a/examples/quick/righttoleft/layoutdirection/layoutdirection.qml b/examples/quick/righttoleft/layoutdirection/layoutdirection.qml index 0c65647..ee8e528 100644 --- a/examples/quick/righttoleft/layoutdirection/layoutdirection.qml +++ b/examples/quick/righttoleft/layoutdirection/layoutdirection.qml @@ -46,14 +46,18 @@ Rectangle { property int direction: Qt.application.layoutDirection LayoutMirroring.enabled: mirror LayoutMirroring.childrenInherit: true - width: column.width + 80 - height: column.height + 40 + width: 320 + height: 480 Column { - id: column - width: 190 + id: columnA spacing: 10 - anchors.centerIn: parent + x: 10 + y: 10 + width: 140 + Item { + id: rowCell + } Text { text: "Row" anchors.horizontalCenter: parent.horizontalCenter @@ -68,7 +72,7 @@ Rectangle { } } Repeater { - model: 4 + model: 3 Loader { property int value: index sourceComponent: positionerDelegate @@ -83,14 +87,14 @@ Rectangle { Grid { layoutDirection: root.direction - spacing: 10; columns: 4 + spacing: 10; columns: 3 move: Transition { NumberAnimation { properties: "x" } } Repeater { - model: 11 + model: 8 Loader { property int value: index sourceComponent: positionerDelegate @@ -112,13 +116,19 @@ Rectangle { } } Repeater { - model: 10 + model: 8 Loader { property int value: index sourceComponent: positionerDelegate } } } + } + Column { + id: columnB + spacing: 10 + x: 160 + y: 10 Text { text: "ListView" @@ -142,7 +152,7 @@ Rectangle { GridView { clip: true - width: 200; height: 160 + width: 150; height: 160 cellWidth: 50; cellHeight: 50 layoutDirection: root.direction model: 48 diff --git a/examples/quick/righttoleft/layoutmirroring/layoutmirroring.qml b/examples/quick/righttoleft/layoutmirroring/layoutmirroring.qml index 5c4739b..38ac1d2 100644 --- a/examples/quick/righttoleft/layoutmirroring/layoutmirroring.qml +++ b/examples/quick/righttoleft/layoutmirroring/layoutmirroring.qml @@ -45,8 +45,8 @@ Rectangle { property bool mirror: Qt.application.layoutDirection == Qt.RightToLeft LayoutMirroring.enabled: mirror LayoutMirroring.childrenInherit: true - width: 400 - height: 875 + width: 320 + height: 480 color: "lightsteelblue" Column { @@ -54,63 +54,6 @@ Rectangle { 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 } @@ -151,62 +94,6 @@ Rectangle { } 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 } @@ -279,33 +166,36 @@ Rectangle { } } } - 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 - } + } + + Rectangle { + id: mirrorButton + color: mouseArea2.pressed ? "black" : "gray" + height: 50; width: 160 + anchors.right: parent.right + anchors.top: parent.top + anchors.margins: 10 + Column { + anchors.centerIn: parent + Text { + text: root.mirror ? "Mirrored" : "Not mirrored" + color: "white" + font.pixelSize: 16 + anchors.horizontalCenter: parent.horizontalCenter } - MouseArea { - id: mouseArea2 - anchors.fill: parent - onClicked: { - root.mirror = !root.mirror; - } + 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/quick/righttoleft/main.cpp b/examples/quick/righttoleft/main.cpp new file mode 100644 index 0000000..c92fc54 --- /dev/null +++ b/examples/quick/righttoleft/main.cpp @@ -0,0 +1,41 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** 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$ +** +****************************************************************************/ +#include "../../shared/shared.h" +DECLARATIVE_EXAMPLE_MAIN(righttoleft) diff --git a/examples/quick/righttoleft/righttoleft.pro b/examples/quick/righttoleft/righttoleft.pro new file mode 100644 index 0000000..eb1ecbb --- /dev/null +++ b/examples/quick/righttoleft/righttoleft.pro @@ -0,0 +1,10 @@ +TEMPLATE = app + +QT += quick declarative +SOURCES += main.cpp + +target.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/righttoleft +qml.files = righttoleft.qml layoutdirection layoutmirroring textalignment +qml.path = $$[QT_INSTALL_EXAMPLES]/qtdeclarative/qtquick/righttoleft +INSTALLS += target qml + diff --git a/examples/quick/righttoleft/righttoleft.qml b/examples/quick/righttoleft/righttoleft.qml new file mode 100644 index 0000000..6561595 --- /dev/null +++ b/examples/quick/righttoleft/righttoleft.qml @@ -0,0 +1,69 @@ +/**************************************************************************** +** +** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies). +** Contact: http://www.qt-project.org/ +** +** 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 2.0 +import "../../shared" as Examples + +/*! + \title QtQuick Examples - Right to Left + \example qtquick/Right to Left + \brief This is a collection of QML Right to Left examples. + \image qml-righttoleft-example.png + + This is a collection of small QML examples relating to right to left(RTL) localization support. + + Layout direction shows RTL layouting. + Layout mirroring shows automatic mirroring of horizontal layouts in RTL locales. + Text Alignment shows automatic mirroring of text alignment in RTL locales. +*/ + +Item { + height: 480 + width: 320 + Examples.LauncherList { + id: ll + anchors.fill: parent + Component.onCompleted: { + addExample("Layout Direction", "Shows RTL layouting in positioners and views", Qt.resolvedUrl("layoutdirection/layoutdirection.qml")); + addExample("Layout Mirroring", "Shows RTL layouting in basic text and anchors", Qt.resolvedUrl("layoutmirroring/layoutmirroring.qml")); + addExample("Text Alignment", "Shows RTL layouting in various text elements", Qt.resolvedUrl("textalignment/textalignment.qml")); + } + } +} diff --git a/examples/quick/righttoleft/righttoleft.qmlproject b/examples/quick/righttoleft/righttoleft.qmlproject new file mode 100644 index 0000000..f394d90 --- /dev/null +++ b/examples/quick/righttoleft/righttoleft.qmlproject @@ -0,0 +1,16 @@ +import QmlProject 1.1 + +Project { + mainFile: "righttoleft.qml" + + /* Include .qml, .js, and image files from current directory and subdirectories */ + QmlFiles { + directory: "." + } + JavaScriptFiles { + directory: "." + } + ImageFiles { + directory: "." + } +} diff --git a/examples/quick/righttoleft/textalignment/textalignment.qml b/examples/quick/righttoleft/textalignment/textalignment.qml index ef5b97b..3302ce5 100644 --- a/examples/quick/righttoleft/textalignment/textalignment.qml +++ b/examples/quick/righttoleft/textalignment/textalignment.qml @@ -43,10 +43,13 @@ import QtQuick 2.0 Rectangle { id: root color: "white" - width: containerColumn.width - height: containerColumn.height + containerColumn.anchors.topMargin + //width: containerColumn.width + //height: containerColumn.height + containerColumn.anchors.topMargin + width: 320 + height: 480 property bool mirror: false + property int pxSz: 18 property variant horizontalAlignment: undefined property variant editorType: ["Plain Text", "Styled Text", "Plain Rich Text", "Italic Rich Text", "Plain TextEdit", "Italic TextEdit", "TextInput"] @@ -76,30 +79,32 @@ Rectangle { spacing: 10 width: editorTypeRow.width anchors { top: parent.top; topMargin: 5 } - Row { + ListView { + width: 320 + height: 320 id: editorTypeRow - Repeater { - model: editorType.length - Item { - width: editorColumn.width - height: editorColumn.height + model: editorType.length + orientation: ListView.Horizontal + cacheBuffer: 1000//Load the really expensive ones async if possible + delegate: 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: editorColumn + id: textColumn 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] - } + anchors.horizontalCenter: parent.horizontalCenter + Repeater { + model: textComponents.length + delegate: textComponents[index] } } } @@ -190,7 +195,7 @@ Rectangle { Text { width: 180 text: root.text[index] - font.pixelSize: 24 + font.pixelSize: pxSz wrapMode: Text.WordWrap horizontalAlignment: root.horizontalAlignment LayoutMirroring.enabled: root.mirror @@ -204,6 +209,7 @@ Rectangle { text: root.description[index] color: Qt.rgba(1,1,1,1.0) anchors.centerIn: parent + font.pixelSize: pxSz - 2 Rectangle { z: -1 color: Qt.rgba(0.3, 0, 0, 0.3) @@ -223,7 +229,7 @@ Rectangle { Text { width: 180 text: root.text[index] - font.pixelSize: 24 + font.pixelSize: pxSz wrapMode: Text.WordWrap horizontalAlignment: root.horizontalAlignment LayoutMirroring.enabled: root.mirror @@ -239,6 +245,7 @@ Rectangle { text: root.description[index] color: Qt.rgba(1,1,1,1.0) anchors.centerIn: parent + font.pixelSize: pxSz - 2 Rectangle { z: -1 color: Qt.rgba(0.3, 0, 0, 0.3) @@ -258,7 +265,7 @@ Rectangle { Text { width: 180 text: root.text[index] - font.pixelSize: 24 + font.pixelSize: pxSz wrapMode: Text.WordWrap horizontalAlignment: root.horizontalAlignment LayoutMirroring.enabled: root.mirror @@ -272,6 +279,7 @@ Rectangle { text: root.description[index] color: Qt.rgba(1,1,1,1.0) anchors.centerIn: parent + font.pixelSize: pxSz - 2 Rectangle { z: -1 color: Qt.rgba(0.3, 0, 0, 0.3) @@ -291,7 +299,7 @@ Rectangle { Text { width: 180 text: "" + root.text[index] + "" - font.pixelSize: 24 + font.pixelSize: pxSz wrapMode: Text.WordWrap horizontalAlignment: root.horizontalAlignment LayoutMirroring.enabled: root.mirror @@ -306,6 +314,7 @@ Rectangle { text: root.description[index] color: Qt.rgba(1,1,1,1.0) anchors.centerIn: parent + font.pixelSize: pxSz - 2 Rectangle { z: -1 color: Qt.rgba(0.3, 0, 0, 0.3) @@ -325,7 +334,7 @@ Rectangle { TextEdit { width: 180 text: root.text[index] - font.pixelSize: 24 + font.pixelSize: pxSz cursorVisible: true wrapMode: TextEdit.WordWrap horizontalAlignment: root.horizontalAlignment @@ -339,6 +348,7 @@ Rectangle { text: root.description[index] color: Qt.rgba(1,1,1,1.0) anchors.centerIn: parent + font.pixelSize: pxSz - 2 Rectangle { z: -1 color: Qt.rgba(0.3, 0, 0, 0.3) @@ -358,7 +368,7 @@ Rectangle { TextEdit { width: 180 text: "" + root.text[index] + "" - font.pixelSize: 24 + font.pixelSize: pxSz cursorVisible: true wrapMode: TextEdit.WordWrap textFormat: TextEdit.RichText @@ -373,6 +383,7 @@ Rectangle { text: root.description[index] color: Qt.rgba(1,1,1,1.0) anchors.centerIn: parent + font.pixelSize: pxSz - 2 Rectangle { z: -1 color: Qt.rgba(0.3, 0, 0, 0.3) @@ -396,7 +407,7 @@ Rectangle { id: textInput width: 180 text: root.text[index] - font.pixelSize: 24 + font.pixelSize: pxSz cursorVisible: true horizontalAlignment: root.horizontalAlignment LayoutMirroring.enabled: root.mirror @@ -409,6 +420,7 @@ Rectangle { text: root.description[index] color: Qt.rgba(1,1,1,1.0) anchors.centerIn: parent + font.pixelSize: pxSz - 2 Rectangle { z: -1 color: Qt.rgba(0.3, 0, 0, 0.3)