From da0613abb2ac4966c87a8d92f68488744fabe64b Mon Sep 17 00:00:00 2001 From: Frederik Gladhorn Date: Tue, 11 Dec 2012 20:05:04 +0100 Subject: [PATCH] Improve example with key navigation. MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Generally this is a redo of many of the details. Change-Id: I08c4f58966507232220bb10892041b9e39d54e37 Reviewed-by: Jan Arve Sæther --- examples/quick/accessibility/accessibility.qml | 55 ++++++++++++++++----- examples/quick/accessibility/content/Button.qml | 18 ++++--- examples/quick/accessibility/content/Checkbox.qml | 31 +++++++++--- examples/quick/accessibility/content/Slider.qml | 28 +++++++++- 4 files changed, 101 insertions(+), 31 deletions(-) diff --git a/examples/quick/accessibility/accessibility.qml b/examples/quick/accessibility/accessibility.qml index 248d17a..fe9e03d 100644 --- a/examples/quick/accessibility/accessibility.qml +++ b/examples/quick/accessibility/accessibility.qml @@ -55,17 +55,13 @@ Rectangle { anchors.fill: parent anchors.margins: 10 width: parent.width - Row { - spacing: 6 - width: column.width - Button { width: 100; height: column.h + 20; text: "Send"; onClicked : { status.text = "Send" } } - Button { width: 100; height: column.h + 20; text: "Discard"; onClicked : { status.text = "Discard" } } - } + Row { spacing: 6 width: column.width height: column.h + Text { id: subjectLabel //! [text] @@ -73,6 +69,7 @@ Rectangle { Accessible.name: text //! [text] text: "Subject:" + y: 3 } Rectangle { id: subjectBorder @@ -80,13 +77,20 @@ Rectangle { Accessible.name: subjectEdit.text border.width: 1 border.color: "black" - height: subjectEdit.height + height: subjectEdit.height + 6 width: 240 TextInput { + focus: true + y: 3 + x: 3 + width: parent.width - 6 id: subjectEdit text: "Vacation plans" + KeyNavigation.tab: textEdit } + } + } Rectangle { id: textBorder @@ -95,12 +99,18 @@ Rectangle { border.width: 1 border.color: "black" width: parent.width - 2 - height: parent.height - (textBorder.y + column.spacing) + + height: 200 TextEdit { id: textEdit - text: "Hi, we're going to the Dolomites this summer. Weren't you also going to northern Italy? \n\nbest wishes, your friend Luke" - width: parent.width + y: 3 + x: 3 + width: parent.width - 6 + height: parent.height - 6 + text: "Hi, we're going to the Dolomites this summer. Weren't you also going to northern Italy? \n\nBest wishes, your friend Luke" wrapMode: TextEdit.WordWrap + KeyNavigation.tab: sendButton + KeyNavigation.priority: KeyNavigation.BeforeItem } } Text { @@ -110,9 +120,28 @@ Rectangle { Row { spacing: 6 - width: column.width - Checkbox { checked: false } - Slider { value: 10 } + Button { id: sendButton; width: 100; height: column.h + 20; text: "Send"; + onClicked : { status.text = "Send" } + KeyNavigation.tab: discardButton + } + Button { id: discardButton; width: 100; height: column.h + 20; text: "Discard"; + onClicked : { status.text = "Discard" } + KeyNavigation.tab: checkBox + } + } + + Row { + spacing: 6 + Checkbox { + id: checkBox + checked: false + KeyNavigation.tab: slider + } + Slider { + id: slider + value: 10 + KeyNavigation.tab: subjectEdit + } } } } diff --git a/examples/quick/accessibility/content/Button.qml b/examples/quick/accessibility/content/Button.qml index 2d17e18..fa26177 100644 --- a/examples/quick/accessibility/content/Button.qml +++ b/examples/quick/accessibility/content/Button.qml @@ -61,11 +61,12 @@ Rectangle { height: 30 gradient: Gradient { GradientStop { position: 0.0; color: "lightsteelblue" } - GradientStop { position: 1.0; color: "blue" } + GradientStop { position: 1.0; + color: button.focus ? "red" : "blue" } } - border.width: 2 - border.color: "black"; - radius: 10 + // border.width: 1 + //border.color: "black"; + radius: 5 antialiasing: true Text { @@ -73,14 +74,15 @@ Rectangle { text: parent.description anchors.centerIn: parent font.pixelSize: parent.height * .5 - style: Text.Sunken; color: "white"; styleColor: "black" + style: Text.Sunken + color: "white" + styleColor: "black" } MouseArea { id: mouseArea anchors.fill: parent - onClicked: { - parent.clicked() - } + onClicked: parent.clicked() } + Keys.onSpacePressed: clicked() } diff --git a/examples/quick/accessibility/content/Checkbox.qml b/examples/quick/accessibility/content/Checkbox.qml index 273e38b..f16f66e 100644 --- a/examples/quick/accessibility/content/Checkbox.qml +++ b/examples/quick/accessibility/content/Checkbox.qml @@ -43,20 +43,37 @@ import QtQuick 2.0 -Rectangle { +FocusScope { id: checkbox Accessible.role: Accessible.CheckBox + property string text: "CheckBox" property bool checked // required variable - width: 30 + width: 100 height: 30 - - Text { - id: checkboxText - text: parent.checked ? "on" : "off" - anchors.centerIn: parent + Row { + spacing: 2 + Rectangle { + width: 12 + height: 12 + border.width: checkbox.focus ? 2 : 1 + border.color: "black" + Text { + id: checkboxText + text: checkbox.checked ? "x" : "" + anchors.centerIn: parent + } + } + Text { + text: checkbox.text + } + } + MouseArea { + anchors.fill: parent + onClicked: checkbox.checked = !checkbox.checked } + Keys.onSpacePressed: checkbox.checked = !checkbox.checked } diff --git a/examples/quick/accessibility/content/Slider.qml b/examples/quick/accessibility/content/Slider.qml index fdbfd39..a116308 100644 --- a/examples/quick/accessibility/content/Slider.qml +++ b/examples/quick/accessibility/content/Slider.qml @@ -46,17 +46,30 @@ import QtQuick 2.0 Rectangle { id: slider - property alias text : buttonText.text + property alias text: buttonText.text Accessible.role: Accessible.Slider - property int value // required + property int value : 5 // required property int minimumValue : 0 // optional (default INT_MIN) property int maximumValue : 20 // optional (default INT_MAX) property int stepSize : 1 // optional (default 1) - width: 30 + width: 100 height: 30 + border.color: "black" + border.width: 1 + Rectangle { + id: indicator + x: 1 + y: 1 + height: parent.height - 2 + width: ((parent.width - 2) / maximumValue) * value + color: "lightgrey" + Behavior on width { + NumberAnimation { duration: 50 } + } + } Text { id: buttonText @@ -64,4 +77,13 @@ Rectangle { anchors.centerIn: parent font.pixelSize: parent.height * .5 } + MouseArea { + anchors.fill: parent + onClicked: { + var pos = mouse.x / slider.width * (maximumValue - minimumValue) + minimumValue + slider.value = pos + } + } + Keys.onLeftPressed: value > minimumValue ? value = value - stepSize : minimumValue + Keys.onRightPressed: value < maximumValue ? value = value + stepSize : maximumValue } -- 1.7.2.5