summaryrefslogtreecommitdiffstats
path: root/examples/declarative/ui-components
diff options
context:
space:
mode:
Diffstat (limited to 'examples/declarative/ui-components')
-rw-r--r--examples/declarative/ui-components/flipable/content/5_heart.pngbin0 -> 3872 bytes
-rw-r--r--examples/declarative/ui-components/flipable/content/9_club.pngbin0 -> 6135 bytes
-rw-r--r--examples/declarative/ui-components/flipable/content/Card.qml38
-rw-r--r--examples/declarative/ui-components/flipable/content/back.pngbin0 -> 1418 bytes
-rw-r--r--examples/declarative/ui-components/flipable/flipable-example.qml15
-rw-r--r--examples/declarative/ui-components/flipable/flipable.qmlproject16
-rw-r--r--examples/declarative/ui-components/progressbar/content/ProgressBar.qml43
-rw-r--r--examples/declarative/ui-components/progressbar/content/background.pngbin0 -> 426 bytes
-rw-r--r--examples/declarative/ui-components/progressbar/progressbar.qmlproject16
-rw-r--r--examples/declarative/ui-components/progressbar/progressbars.qml33
-rw-r--r--examples/declarative/ui-components/scrollbar/ScrollBar.qml33
-rw-r--r--examples/declarative/ui-components/scrollbar/display.qml54
-rw-r--r--examples/declarative/ui-components/scrollbar/pics/niagara_falls.jpgbin0 -> 604121 bytes
-rw-r--r--examples/declarative/ui-components/scrollbar/scrollbar.qmlproject16
-rw-r--r--examples/declarative/ui-components/searchbox/SearchBox.qml65
-rw-r--r--examples/declarative/ui-components/searchbox/images/edit-clear-locationbar-rtl.pngbin0 -> 429 bytes
-rw-r--r--examples/declarative/ui-components/searchbox/images/lineedit-bg-focus.pngbin0 -> 526 bytes
-rw-r--r--examples/declarative/ui-components/searchbox/images/lineedit-bg.pngbin0 -> 426 bytes
-rw-r--r--examples/declarative/ui-components/searchbox/main.qml15
-rw-r--r--examples/declarative/ui-components/searchbox/searchbox.qmlproject16
-rw-r--r--examples/declarative/ui-components/slideswitch/content/Switch.qml76
-rw-r--r--examples/declarative/ui-components/slideswitch/content/background.svg23
-rw-r--r--examples/declarative/ui-components/slideswitch/content/knob.svg867
-rw-r--r--examples/declarative/ui-components/slideswitch/slideswitch.qml11
-rw-r--r--examples/declarative/ui-components/slideswitch/slideswitch.qmlproject16
-rw-r--r--examples/declarative/ui-components/spinner/content/Spinner.qml25
-rw-r--r--examples/declarative/ui-components/spinner/content/spinner-bg.pngbin0 -> 345 bytes
-rw-r--r--examples/declarative/ui-components/spinner/content/spinner-select.pngbin0 -> 320 bytes
-rw-r--r--examples/declarative/ui-components/spinner/main.qml18
-rw-r--r--examples/declarative/ui-components/spinner/spinner.qmlproject16
-rw-r--r--examples/declarative/ui-components/tabwidget/TabWidget.qml57
-rw-r--r--examples/declarative/ui-components/tabwidget/tab.pngbin0 -> 507 bytes
-rw-r--r--examples/declarative/ui-components/tabwidget/tabs.qml59
-rw-r--r--examples/declarative/ui-components/tabwidget/tabwidget.qmlproject16
-rw-r--r--examples/declarative/ui-components/ui-components.qmlproject16
35 files changed, 1560 insertions, 0 deletions
diff --git a/examples/declarative/ui-components/flipable/content/5_heart.png b/examples/declarative/ui-components/flipable/content/5_heart.png
new file mode 100644
index 0000000..fb59d81
--- /dev/null
+++ b/examples/declarative/ui-components/flipable/content/5_heart.png
Binary files differ
diff --git a/examples/declarative/ui-components/flipable/content/9_club.png b/examples/declarative/ui-components/flipable/content/9_club.png
new file mode 100644
index 0000000..2545001
--- /dev/null
+++ b/examples/declarative/ui-components/flipable/content/9_club.png
Binary files differ
diff --git a/examples/declarative/ui-components/flipable/content/Card.qml b/examples/declarative/ui-components/flipable/content/Card.qml
new file mode 100644
index 0000000..2577d89
--- /dev/null
+++ b/examples/declarative/ui-components/flipable/content/Card.qml
@@ -0,0 +1,38 @@
+import Qt 4.7
+
+Flipable {
+ id: container
+
+ property alias image: frontImage.source
+ property bool flipped: true
+ property int xAxis: 0
+ property int yAxis: 0
+ property int angle: 0
+
+ width: front.width; height: front.height; state: "back"
+
+ front: Image { id: frontImage; smooth: true }
+ back: Image { source: "back.png"; smooth: true }
+
+ MouseArea { anchors.fill: parent; onClicked: container.flipped = !container.flipped }
+
+ transform: Rotation {
+ id: rotation; origin.x: container.width / 2; origin.y: container.height / 2
+ axis.x: container.xAxis; axis.y: container.yAxis; axis.z: 0
+ }
+
+ states: State {
+ name: "back"; when: container.flipped
+ PropertyChanges { target: rotation; angle: container.angle }
+ }
+
+ transitions: Transition {
+ ParallelAnimation {
+ NumberAnimation { target: rotation; properties: "angle"; duration: 600 }
+ SequentialAnimation {
+ NumberAnimation { target: container; property: "scale"; to: 0.75; duration: 300 }
+ NumberAnimation { target: container; property: "scale"; to: 1.0; duration: 300 }
+ }
+ }
+ }
+}
diff --git a/examples/declarative/ui-components/flipable/content/back.png b/examples/declarative/ui-components/flipable/content/back.png
new file mode 100644
index 0000000..f715d74
--- /dev/null
+++ b/examples/declarative/ui-components/flipable/content/back.png
Binary files differ
diff --git a/examples/declarative/ui-components/flipable/flipable-example.qml b/examples/declarative/ui-components/flipable/flipable-example.qml
new file mode 100644
index 0000000..4e09569
--- /dev/null
+++ b/examples/declarative/ui-components/flipable/flipable-example.qml
@@ -0,0 +1,15 @@
+import Qt 4.7
+import "content"
+
+Rectangle {
+ id: window
+
+ width: 480; height: 320
+ color: "darkgreen"
+
+ Row {
+ anchors.centerIn: parent; spacing: 30
+ Card { image: "content/9_club.png"; angle: 180; yAxis: 1 }
+ Card { image: "content/5_heart.png"; angle: 540; xAxis: 1 }
+ }
+}
diff --git a/examples/declarative/ui-components/flipable/flipable.qmlproject b/examples/declarative/ui-components/flipable/flipable.qmlproject
new file mode 100644
index 0000000..d4909f8
--- /dev/null
+++ b/examples/declarative/ui-components/flipable/flipable.qmlproject
@@ -0,0 +1,16 @@
+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/ui-components/progressbar/content/ProgressBar.qml b/examples/declarative/ui-components/progressbar/content/ProgressBar.qml
new file mode 100644
index 0000000..bc36df5
--- /dev/null
+++ b/examples/declarative/ui-components/progressbar/content/ProgressBar.qml
@@ -0,0 +1,43 @@
+import Qt 4.7
+
+Item {
+ id: progressbar
+
+ property int minimum: 0
+ property int maximum: 100
+ property int value: 0
+ property alias color: gradient1.color
+ property alias secondColor: gradient2.color
+
+ width: 250; height: 23
+ clip: true
+
+ BorderImage {
+ source: "background.png"
+ width: parent.width; height: parent.height
+ border { left: 4; top: 4; right: 4; bottom: 4 }
+ }
+
+ Rectangle {
+ id: highlight
+
+ property int widthDest: ((progressbar.width * (value - minimum)) / (maximum - minimum) - 6)
+
+ width: highlight.widthDest
+ Behavior on width { SmoothedAnimation { velocity: 1200 } }
+
+ anchors { left: parent.left; top: parent.top; bottom: parent.bottom; leftMargin: 3; topMargin: 3; bottomMargin: 3 }
+ radius: 1
+ gradient: Gradient {
+ GradientStop { id: gradient1; position: 0.0 }
+ GradientStop { id: gradient2; position: 1.0 }
+ }
+
+ }
+ Text {
+ anchors { right: highlight.right; rightMargin: 6; verticalCenter: parent.verticalCenter }
+ color: "white"
+ font.bold: true
+ text: Math.floor((value - minimum) / (maximum - minimum) * 100) + '%'
+ }
+}
diff --git a/examples/declarative/ui-components/progressbar/content/background.png b/examples/declarative/ui-components/progressbar/content/background.png
new file mode 100644
index 0000000..9044226
--- /dev/null
+++ b/examples/declarative/ui-components/progressbar/content/background.png
Binary files differ
diff --git a/examples/declarative/ui-components/progressbar/progressbar.qmlproject b/examples/declarative/ui-components/progressbar/progressbar.qmlproject
new file mode 100644
index 0000000..d4909f8
--- /dev/null
+++ b/examples/declarative/ui-components/progressbar/progressbar.qmlproject
@@ -0,0 +1,16 @@
+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/ui-components/progressbar/progressbars.qml b/examples/declarative/ui-components/progressbar/progressbars.qml
new file mode 100644
index 0000000..55fd682
--- /dev/null
+++ b/examples/declarative/ui-components/progressbar/progressbars.qml
@@ -0,0 +1,33 @@
+import Qt 4.7
+import "content"
+
+Rectangle {
+ id: main
+
+ width: 600; height: 405
+ color: "#edecec"
+
+ Flickable {
+ anchors.fill: parent
+ contentHeight: column.height + 20
+
+ Column {
+ id: column
+ x: 10; y: 10
+ spacing: 10
+
+ Repeater {
+ model: 25
+
+ ProgressBar {
+ property int r: Math.floor(Math.random() * 5000 + 1000)
+ width: main.width - 20
+
+ NumberAnimation on value { duration: r; from: 0; to: 100; loops: Animation.Infinite }
+ ColorAnimation on color { duration: r; from: "lightsteelblue"; to: "thistle"; loops: Animation.Infinite }
+ ColorAnimation on secondColor { duration: r; from: "steelblue"; to: "#CD96CD"; loops: Animation.Infinite }
+ }
+ }
+ }
+ }
+}
diff --git a/examples/declarative/ui-components/scrollbar/ScrollBar.qml b/examples/declarative/ui-components/scrollbar/ScrollBar.qml
new file mode 100644
index 0000000..c628a20
--- /dev/null
+++ b/examples/declarative/ui-components/scrollbar/ScrollBar.qml
@@ -0,0 +1,33 @@
+import Qt 4.7
+
+Item {
+ id: scrollBar
+
+ // The properties that define the scrollbar's state.
+ // position and pageSize are in the range 0.0 - 1.0. They are relative to the
+ // height of the page, i.e. a pageSize of 0.5 means that you can see 50%
+ // of the height of the view.
+ // orientation can be either Qt.Vertical or Qt.Horizontal
+ property real position
+ property real pageSize
+ property variant orientation : Qt.Vertical
+
+ // A light, semi-transparent background
+ Rectangle {
+ id: background
+ anchors.fill: parent
+ radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
+ color: "white"
+ opacity: 0.3
+ }
+ // Size the bar to the required size, depending upon the orientation.
+ Rectangle {
+ x: orientation == Qt.Vertical ? 1 : (scrollBar.position * (scrollBar.width-2) + 1)
+ y: orientation == Qt.Vertical ? (scrollBar.position * (scrollBar.height-2) + 1) : 1
+ width: orientation == Qt.Vertical ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2))
+ height: orientation == Qt.Vertical ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2)
+ radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
+ color: "black"
+ opacity: 0.7
+ }
+}
diff --git a/examples/declarative/ui-components/scrollbar/display.qml b/examples/declarative/ui-components/scrollbar/display.qml
new file mode 100644
index 0000000..6b12d85
--- /dev/null
+++ b/examples/declarative/ui-components/scrollbar/display.qml
@@ -0,0 +1,54 @@
+import Qt 4.7
+
+Rectangle {
+ width: 640
+ height: 480
+
+ // Create a flickable to view a large image.
+ Flickable {
+ id: view
+ anchors.fill: parent
+ contentWidth: picture.width
+ contentHeight: picture.height
+
+ Image {
+ id: picture
+ source: "pics/niagara_falls.jpg"
+ asynchronous: true
+ }
+
+ // Only show the scrollbars when the view is moving.
+ states: State {
+ name: "ShowBars"
+ when: view.movingVertically || view.movingHorizontally
+ PropertyChanges { target: verticalScrollBar; opacity: 1 }
+ PropertyChanges { target: horizontalScrollBar; opacity: 1 }
+ }
+
+ transitions: Transition {
+ from: "*"; to: "*"
+ NumberAnimation { properties: "opacity"; duration: 400 }
+ }
+ }
+
+ // Attach scrollbars to the right and bottom edges of the view.
+ ScrollBar {
+ id: verticalScrollBar
+ width: 12; height: view.height-12
+ anchors.right: view.right
+ opacity: 0
+ orientation: Qt.Vertical
+ position: view.visibleArea.yPosition
+ pageSize: view.visibleArea.heightRatio
+ }
+
+ ScrollBar {
+ id: horizontalScrollBar
+ width: view.width-12; height: 12
+ anchors.bottom: view.bottom
+ opacity: 0
+ orientation: Qt.Horizontal
+ position: view.visibleArea.xPosition
+ pageSize: view.visibleArea.widthRatio
+ }
+}
diff --git a/examples/declarative/ui-components/scrollbar/pics/niagara_falls.jpg b/examples/declarative/ui-components/scrollbar/pics/niagara_falls.jpg
new file mode 100644
index 0000000..618d808
--- /dev/null
+++ b/examples/declarative/ui-components/scrollbar/pics/niagara_falls.jpg
Binary files differ
diff --git a/examples/declarative/ui-components/scrollbar/scrollbar.qmlproject b/examples/declarative/ui-components/scrollbar/scrollbar.qmlproject
new file mode 100644
index 0000000..d4909f8
--- /dev/null
+++ b/examples/declarative/ui-components/scrollbar/scrollbar.qmlproject
@@ -0,0 +1,16 @@
+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/ui-components/searchbox/SearchBox.qml b/examples/declarative/ui-components/searchbox/SearchBox.qml
new file mode 100644
index 0000000..aae7ee9
--- /dev/null
+++ b/examples/declarative/ui-components/searchbox/SearchBox.qml
@@ -0,0 +1,65 @@
+import Qt 4.7
+
+FocusScope {
+ id: focusScope
+ width: 250; height: 28
+
+ BorderImage {
+ source: "images/lineedit-bg.png"
+ width: parent.width; height: parent.height
+ border { left: 4; top: 4; right: 4; bottom: 4 }
+ }
+
+ BorderImage {
+ source: "images/lineedit-bg-focus.png"
+ width: parent.width; height: parent.height
+ border { left: 4; top: 4; right: 4; bottom: 4 }
+ visible: parent.wantsFocus ? true : false
+ }
+
+ Text {
+ id: typeSomething
+ anchors.fill: parent; anchors.leftMargin: 8
+ verticalAlignment: Text.AlignVCenter
+ text: "Type something..."
+ color: "gray"
+ font.italic: true
+ }
+
+ MouseArea { anchors.fill: parent; onClicked: focusScope.focus = true }
+
+ TextInput {
+ id: textInput
+ anchors { left: parent.left; leftMargin: 8; verticalCenter: parent.verticalCenter }
+ focus: true
+ }
+
+ Image {
+ id: clear
+ anchors { right: parent.right; rightMargin: 8; verticalCenter: parent.verticalCenter }
+ source: "images/edit-clear-locationbar-rtl.png"
+ opacity: 0
+
+ MouseArea {
+ anchors.fill: parent
+ onClicked: { textInput.text = ''; focusScope.focus = true }
+ }
+ }
+
+ states: State {
+ name: "hasText"; when: textInput.text != ''
+ PropertyChanges { target: typeSomething; opacity: 0 }
+ PropertyChanges { target: clear; opacity: 1 }
+ }
+
+ transitions: [
+ Transition {
+ from: ""; to: "hasText"
+ NumberAnimation { exclude: typeSomething; properties: "opacity" }
+ },
+ Transition {
+ from: "hasText"; to: ""
+ NumberAnimation { properties: "opacity" }
+ }
+ ]
+}
diff --git a/examples/declarative/ui-components/searchbox/images/edit-clear-locationbar-rtl.png b/examples/declarative/ui-components/searchbox/images/edit-clear-locationbar-rtl.png
new file mode 100644
index 0000000..91eb270
--- /dev/null
+++ b/examples/declarative/ui-components/searchbox/images/edit-clear-locationbar-rtl.png
Binary files differ
diff --git a/examples/declarative/ui-components/searchbox/images/lineedit-bg-focus.png b/examples/declarative/ui-components/searchbox/images/lineedit-bg-focus.png
new file mode 100644
index 0000000..bbfac38
--- /dev/null
+++ b/examples/declarative/ui-components/searchbox/images/lineedit-bg-focus.png
Binary files differ
diff --git a/examples/declarative/ui-components/searchbox/images/lineedit-bg.png b/examples/declarative/ui-components/searchbox/images/lineedit-bg.png
new file mode 100644
index 0000000..9044226
--- /dev/null
+++ b/examples/declarative/ui-components/searchbox/images/lineedit-bg.png
Binary files differ
diff --git a/examples/declarative/ui-components/searchbox/main.qml b/examples/declarative/ui-components/searchbox/main.qml
new file mode 100644
index 0000000..9f73473
--- /dev/null
+++ b/examples/declarative/ui-components/searchbox/main.qml
@@ -0,0 +1,15 @@
+import Qt 4.7
+
+Rectangle {
+ width: 500; height: 250
+ color: "#edecec"
+
+ Column {
+ anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter }
+ spacing: 10
+
+ SearchBox { id: search1; KeyNavigation.tab: search2; KeyNavigation.backtab: search3; focus: true }
+ SearchBox { id: search2; KeyNavigation.tab: search3; KeyNavigation.backtab: search1 }
+ SearchBox { id: search3; KeyNavigation.tab: search1; KeyNavigation.backtab: search2 }
+ }
+}
diff --git a/examples/declarative/ui-components/searchbox/searchbox.qmlproject b/examples/declarative/ui-components/searchbox/searchbox.qmlproject
new file mode 100644
index 0000000..d4909f8
--- /dev/null
+++ b/examples/declarative/ui-components/searchbox/searchbox.qmlproject
@@ -0,0 +1,16 @@
+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/ui-components/slideswitch/content/Switch.qml b/examples/declarative/ui-components/slideswitch/content/Switch.qml
new file mode 100644
index 0000000..526a171
--- /dev/null
+++ b/examples/declarative/ui-components/slideswitch/content/Switch.qml
@@ -0,0 +1,76 @@
+//![0]
+import Qt 4.7
+
+Item {
+ id: toggleswitch
+ width: background.width; height: background.height
+
+//![1]
+ property bool on: false
+//![1]
+
+//![2]
+ function toggle() {
+ if (toggleswitch.state == "on")
+ toggleswitch.state = "off";
+ else toggleswitch.state = "on";
+ }
+//![2]
+
+//![3]
+ function dorelease() {
+ if (knob.x == 1) {
+ if (toggleswitch.state == "off") return;
+ }
+ if (knob.x == 78) {
+ if (toggleswitch.state == "on") return;
+ }
+ toggle();
+ }
+//![3]
+
+//![4]
+ Image {
+ id: background
+ source: "background.svg"
+ MouseArea { anchors.fill: parent; onClicked: toggle() }
+ }
+//![4]
+
+//![5]
+ Image {
+ id: knob
+ x: 1; y: 2
+ source: "knob.svg"
+
+ MouseArea {
+ anchors.fill: parent
+ drag.target: knob; drag.axis: Drag.XAxis; drag.minimumX: 1; drag.maximumX: 78
+ onClicked: toggle()
+ onReleased: dorelease()
+ }
+ }
+//![5]
+
+//![6]
+ states: [
+ State {
+ name: "on"
+ PropertyChanges { target: knob; x: 78 }
+ PropertyChanges { target: toggleswitch; on: true }
+ },
+ State {
+ name: "off"
+ PropertyChanges { target: knob; x: 1 }
+ PropertyChanges { target: toggleswitch; on: false }
+ }
+ ]
+//![6]
+
+//![7]
+ transitions: Transition {
+ NumberAnimation { properties: "x"; easing.type: Easing.InOutQuad; duration: 200 }
+ }
+//![7]
+}
+//![0]
diff --git a/examples/declarative/ui-components/slideswitch/content/background.svg b/examples/declarative/ui-components/slideswitch/content/background.svg
new file mode 100644
index 0000000..f920d3e
--- /dev/null
+++ b/examples/declarative/ui-components/slideswitch/content/background.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+ <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+ x="0px" y="0px" width="130px" height="56px" viewBox="0 0 130 56" enable-background="new 0 0 130 56" xml:space="preserve">
+<defs>
+</defs>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-37.5005" y1="-66" x2="-37.5005" y2="-121.9985" gradientTransform="matrix(1 0 0 -1 102.5 -66)">
+ <stop offset="0.0056" style="stop-color:#000000"/>
+ <stop offset="1" style="stop-color:#EAECEF"/>
+</linearGradient>
+<path fill="url(#SVGID_1_)" d="M101.998,55.998H28c-15.439,0-28-12.562-28-28C0,12.56,12.561,0,28,0h73.998
+ c15.439,0,28,12.559,28,27.998C129.998,43.438,117.438,55.998,101.998,55.998L101.998,55.998z"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-5.5" y1="-132.1338" x2="-69.5002" y2="-55.8613" gradientTransform="matrix(1 0 0 -1 102.5 -66)">
+ <stop offset="0.0056" style="stop-color:#000000"/>
+ <stop offset="1" style="stop-color:#828385"/>
+</linearGradient>
+<path fill="url(#SVGID_2_)" d="M127.999,27.998c0,14.359-11.642,26-26,26h-74c-14.359,0-26-11.641-26-26l0,0
+ c0-14.359,11.641-26,26-26h74C116.357,1.998,127.999,13.639,127.999,27.998L127.999,27.998z"/>
+</svg>
diff --git a/examples/declarative/ui-components/slideswitch/content/knob.svg b/examples/declarative/ui-components/slideswitch/content/knob.svg
new file mode 100644
index 0000000..fb69337
--- /dev/null
+++ b/examples/declarative/ui-components/slideswitch/content/knob.svg
@@ -0,0 +1,867 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In -->
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://web.resource.org/cc/"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ width="52px"
+ height="52px"
+ viewBox="0 0 52 52"
+ enable-background="new 0 0 52 52"
+ xml:space="preserve"
+ id="svg3883"
+ sodipodi:version="0.32"
+ inkscape:version="0.44.1"
+ sodipodi:docname="knob_on.svg"
+ sodipodi:docbase="/local/axel/embeddedwidgets/embeddedstories/skins/svgslideswitch/MetallicBrush"><metadata
+ id="metadata4200"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
+ inkscape:window-height="640"
+ inkscape:window-width="937"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ guidetolerance="10.0"
+ gridtolerance="10.0"
+ objecttolerance="10.0"
+ borderopacity="1.0"
+ bordercolor="#666666"
+ pagecolor="#ffffff"
+ id="base"
+ inkscape:zoom="8.3653846"
+ inkscape:cx="26.000002"
+ inkscape:cy="26"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:current-layer="svg3883" />
+<defs
+ id="defs3885">
+</defs>
+<linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="-59.7866"
+ y1="-115.917"
+ x2="-93.2123"
+ y2="-76.0818"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#000000"
+ id="stop3888" />
+ <stop
+ offset="1"
+ style="stop-color:#EAECEF"
+ id="stop3890" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="26"
+ id="circle3892"
+ style="fill:url(#SVGID_1_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="26"
+ sodipodi:ry="26"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="-100.5"
+ y1="-96"
+ x2="-52.5"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop3895" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop3897" />
+ <stop
+ offset="0.6043"
+ style="stop-color:#E7EAED"
+ id="stop3899" />
+ <stop
+ offset="0.6751"
+ style="stop-color:#DEE4E7"
+ id="stop3901" />
+ <stop
+ offset="0.7358"
+ style="stop-color:#CFD9DD"
+ id="stop3903" />
+ <stop
+ offset="0.791"
+ style="stop-color:#B9CACF"
+ id="stop3905" />
+ <stop
+ offset="0.8425"
+ style="stop-color:#9EB6BD"
+ id="stop3907" />
+ <stop
+ offset="0.891"
+ style="stop-color:#7B9EA7"
+ id="stop3909" />
+ <stop
+ offset="0.9374"
+ style="stop-color:#53828C"
+ id="stop3911" />
+ <stop
+ offset="0.9809"
+ style="stop-color:#25626E"
+ id="stop3913" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop3915" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="24"
+ id="circle3917"
+ style="fill:url(#SVGID_2_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="24"
+ sodipodi:ry="24"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_3_"
+ gradientUnits="userSpaceOnUse"
+ x1="-98.6328"
+ y1="-96"
+ x2="-54.3672"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop3920" />
+ <stop
+ offset="0.073"
+ style="stop-color:#8FAECB"
+ id="stop3922" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop3924" />
+ <stop
+ offset="0.5902"
+ style="stop-color:#E7E9ED"
+ id="stop3926" />
+ <stop
+ offset="0.618"
+ style="stop-color:#E4E7EB"
+ id="stop3928" />
+ <stop
+ offset="0.6697"
+ style="stop-color:#E0E4E9"
+ id="stop3930" />
+ <stop
+ offset="0.7211"
+ style="stop-color:#D4DCE1"
+ id="stop3932" />
+ <stop
+ offset="0.7722"
+ style="stop-color:#C0CFD5"
+ id="stop3934" />
+ <stop
+ offset="0.809"
+ style="stop-color:#ADC2C9"
+ id="stop3936" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop3938" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="22.132999"
+ id="circle3940"
+ style="fill:url(#SVGID_3_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="22.132999"
+ sodipodi:ry="22.132999"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_4_"
+ gradientUnits="userSpaceOnUse"
+ x1="-96.7671"
+ y1="-96"
+ x2="-56.2324"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop3943" />
+ <stop
+ offset="0.073"
+ style="stop-color:#86A7C4"
+ id="stop3945" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop3947" />
+ <stop
+ offset="0.577"
+ style="stop-color:#E7EAED"
+ id="stop3949" />
+ <stop
+ offset="0.618"
+ style="stop-color:#E1E6EA"
+ id="stop3951" />
+ <stop
+ offset="0.6697"
+ style="stop-color:#DDE3E8"
+ id="stop3953" />
+ <stop
+ offset="0.7211"
+ style="stop-color:#D1DBE1"
+ id="stop3955" />
+ <stop
+ offset="0.7722"
+ style="stop-color:#BDCDD5"
+ id="stop3957" />
+ <stop
+ offset="0.809"
+ style="stop-color:#AAC0CA"
+ id="stop3959" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop3961" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="20.267"
+ id="circle3963"
+ style="fill:url(#SVGID_4_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="20.267"
+ sodipodi:ry="20.267"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="-94.8999"
+ y1="-96"
+ x2="-58.0996"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop3966" />
+ <stop
+ offset="0.073"
+ style="stop-color:#7E9FBC"
+ id="stop3968" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop3970" />
+ <stop
+ offset="0.5709"
+ style="stop-color:#E6E9ED"
+ id="stop3972" />
+ <stop
+ offset="0.618"
+ style="stop-color:#DFE4E9"
+ id="stop3974" />
+ <stop
+ offset="0.6687"
+ style="stop-color:#DBE1E7"
+ id="stop3976" />
+ <stop
+ offset="0.7193"
+ style="stop-color:#CFD9E0"
+ id="stop3978" />
+ <stop
+ offset="0.7695"
+ style="stop-color:#BBCCD6"
+ id="stop3980" />
+ <stop
+ offset="0.809"
+ style="stop-color:#A6BECA"
+ id="stop3982" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop3984" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="18.4"
+ id="circle3986"
+ style="fill:url(#SVGID_5_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="18.4"
+ sodipodi:ry="18.4"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="-93.0332"
+ y1="-96"
+ x2="-59.9668"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop3989" />
+ <stop
+ offset="0.073"
+ style="stop-color:#7697B4"
+ id="stop3991" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop3993" />
+ <stop
+ offset="0.5636"
+ style="stop-color:#E6E9ED"
+ id="stop3995" />
+ <stop
+ offset="0.618"
+ style="stop-color:#DCE2E8"
+ id="stop3997" />
+ <stop
+ offset="0.6687"
+ style="stop-color:#D8DFE6"
+ id="stop3999" />
+ <stop
+ offset="0.7193"
+ style="stop-color:#CCD7E0"
+ id="stop4001" />
+ <stop
+ offset="0.7695"
+ style="stop-color:#B8CAD5"
+ id="stop4003" />
+ <stop
+ offset="0.809"
+ style="stop-color:#A3BCCA"
+ id="stop4005" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4007" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="16.533001"
+ id="circle4009"
+ style="fill:url(#SVGID_6_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="16.533001"
+ sodipodi:ry="16.533001"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="-91.167"
+ y1="-96"
+ x2="-61.833"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4012" />
+ <stop
+ offset="0.073"
+ style="stop-color:#6D8FAD"
+ id="stop4014" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4016" />
+ <stop
+ offset="0.5605"
+ style="stop-color:#E5E8EC"
+ id="stop4018" />
+ <stop
+ offset="0.618"
+ style="stop-color:#DAE1E7"
+ id="stop4020" />
+ <stop
+ offset="0.6679"
+ style="stop-color:#D6DEE5"
+ id="stop4022" />
+ <stop
+ offset="0.7175"
+ style="stop-color:#CAD6DF"
+ id="stop4024" />
+ <stop
+ offset="0.7669"
+ style="stop-color:#B6C9D6"
+ id="stop4026" />
+ <stop
+ offset="0.809"
+ style="stop-color:#9FBACB"
+ id="stop4028" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4030" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="14.667"
+ id="circle4032"
+ style="fill:url(#SVGID_7_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="14.667"
+ sodipodi:ry="14.667"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="-89.2998"
+ y1="-96"
+ x2="-63.7002"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4035" />
+ <stop
+ offset="0.073"
+ style="stop-color:#6587A5"
+ id="stop4037" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4039" />
+ <stop
+ offset="0.5588"
+ style="stop-color:#E4E8EC"
+ id="stop4041" />
+ <stop
+ offset="0.618"
+ style="stop-color:#D8DFE7"
+ id="stop4043" />
+ <stop
+ offset="0.6675"
+ style="stop-color:#D4DCE5"
+ id="stop4045" />
+ <stop
+ offset="0.7167"
+ style="stop-color:#C8D5E0"
+ id="stop4047" />
+ <stop
+ offset="0.7657"
+ style="stop-color:#B4C8D6"
+ id="stop4049" />
+ <stop
+ offset="0.809"
+ style="stop-color:#9CB8CB"
+ id="stop4051" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4053" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="12.8"
+ id="circle4055"
+ style="fill:url(#SVGID_8_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="12.8"
+ sodipodi:ry="12.8"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-87.4331"
+ y1="-96"
+ x2="-65.5664"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4058" />
+ <stop
+ offset="0.073"
+ style="stop-color:#5D809D"
+ id="stop4060" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4062" />
+ <stop
+ offset="0.5567"
+ style="stop-color:#E3E7EC"
+ id="stop4064" />
+ <stop
+ offset="0.618"
+ style="stop-color:#D5DDE6"
+ id="stop4066" />
+ <stop
+ offset="0.6671"
+ style="stop-color:#D1DAE4"
+ id="stop4068" />
+ <stop
+ offset="0.7159"
+ style="stop-color:#C5D3DF"
+ id="stop4070" />
+ <stop
+ offset="0.7645"
+ style="stop-color:#B1C6D6"
+ id="stop4072" />
+ <stop
+ offset="0.809"
+ style="stop-color:#98B5CB"
+ id="stop4074" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4076" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="10.933"
+ id="circle4078"
+ style="fill:url(#SVGID_9_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="10.933"
+ sodipodi:ry="10.933"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-85.5659"
+ y1="-96"
+ x2="-67.4336"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4081" />
+ <stop
+ offset="0.073"
+ style="stop-color:#547896"
+ id="stop4083" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4085" />
+ <stop
+ offset="0.5588"
+ style="stop-color:#E1E6EB"
+ id="stop4087" />
+ <stop
+ offset="0.618"
+ style="stop-color:#D3DCE5"
+ id="stop4089" />
+ <stop
+ offset="0.6663"
+ style="stop-color:#CFD9E3"
+ id="stop4091" />
+ <stop
+ offset="0.7143"
+ style="stop-color:#C3D2DF"
+ id="stop4093" />
+ <stop
+ offset="0.7621"
+ style="stop-color:#AFC5D7"
+ id="stop4095" />
+ <stop
+ offset="0.809"
+ style="stop-color:#94B3CC"
+ id="stop4097" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4099" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="9.066"
+ id="circle4101"
+ style="fill:url(#SVGID_10_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="9.066"
+ sodipodi:ry="9.066"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_11_"
+ gradientUnits="userSpaceOnUse"
+ x1="-83.7002"
+ y1="-96"
+ x2="-69.2998"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4104" />
+ <stop
+ offset="0.073"
+ style="stop-color:#4C708E"
+ id="stop4106" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4108" />
+ <stop
+ offset="0.5625"
+ style="stop-color:#DEE4EA"
+ id="stop4110" />
+ <stop
+ offset="0.618"
+ style="stop-color:#D0DAE4"
+ id="stop4112" />
+ <stop
+ offset="0.6663"
+ style="stop-color:#CCD7E2"
+ id="stop4114" />
+ <stop
+ offset="0.7143"
+ style="stop-color:#C0D0DE"
+ id="stop4116" />
+ <stop
+ offset="0.7621"
+ style="stop-color:#ACC3D6"
+ id="stop4118" />
+ <stop
+ offset="0.809"
+ style="stop-color:#91B1CC"
+ id="stop4120" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4122" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="7.1999998"
+ id="circle4124"
+ style="fill:url(#SVGID_11_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="7.1999998"
+ sodipodi:ry="7.1999998"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_12_"
+ gradientUnits="userSpaceOnUse"
+ x1="-81.833"
+ y1="-96"
+ x2="-71.167"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4127" />
+ <stop
+ offset="0.073"
+ style="stop-color:#446986"
+ id="stop4129" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4131" />
+ <stop
+ offset="0.5757"
+ style="stop-color:#D9E0E8"
+ id="stop4133" />
+ <stop
+ offset="0.618"
+ style="stop-color:#CED8E3"
+ id="stop4135" />
+ <stop
+ offset="0.6655"
+ style="stop-color:#CAD5E2"
+ id="stop4137" />
+ <stop
+ offset="0.7129"
+ style="stop-color:#BECEDD"
+ id="stop4139" />
+ <stop
+ offset="0.7601"
+ style="stop-color:#AAC1D6"
+ id="stop4141" />
+ <stop
+ offset="0.807"
+ style="stop-color:#8EB0CC"
+ id="stop4143" />
+ <stop
+ offset="0.809"
+ style="stop-color:#8DAFCC"
+ id="stop4145" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4147" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="5.3330002"
+ id="circle4149"
+ style="fill:url(#SVGID_12_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="5.3330002"
+ sodipodi:ry="5.3330002"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_13_"
+ gradientUnits="userSpaceOnUse"
+ x1="-79.9658"
+ y1="-96"
+ x2="-73.0342"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4152" />
+ <stop
+ offset="0.073"
+ style="stop-color:#3B617F"
+ id="stop4154" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4156" />
+ <stop
+ offset="0.6087"
+ style="stop-color:#CED9E3"
+ id="stop4158" />
+ <stop
+ offset="0.618"
+ style="stop-color:#CBD7E2"
+ id="stop4160" />
+ <stop
+ offset="0.6655"
+ style="stop-color:#C7D4E1"
+ id="stop4162" />
+ <stop
+ offset="0.7129"
+ style="stop-color:#BBCDDD"
+ id="stop4164" />
+ <stop
+ offset="0.7601"
+ style="stop-color:#A7C0D6"
+ id="stop4166" />
+ <stop
+ offset="0.807"
+ style="stop-color:#8BAECD"
+ id="stop4168" />
+ <stop
+ offset="0.809"
+ style="stop-color:#8AADCD"
+ id="stop4170" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4172" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="3.4660001"
+ id="circle4174"
+ style="fill:url(#SVGID_13_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="3.4660001"
+ sodipodi:ry="3.4660001"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_14_"
+ gradientUnits="userSpaceOnUse"
+ x1="-78.1001"
+ y1="-96"
+ x2="-74.9004"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4177" />
+ <stop
+ offset="0.073"
+ style="stop-color:#335977"
+ id="stop4179" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4181" />
+ <stop
+ offset="0.618"
+ style="stop-color:#C9D5E1"
+ id="stop4183" />
+ <stop
+ offset="0.6648"
+ style="stop-color:#C5D3E0"
+ id="stop4185" />
+ <stop
+ offset="0.7114"
+ style="stop-color:#B9CBDC"
+ id="stop4187" />
+ <stop
+ offset="0.758"
+ style="stop-color:#A5BFD6"
+ id="stop4189" />
+ <stop
+ offset="0.8042"
+ style="stop-color:#89ADCE"
+ id="stop4191" />
+ <stop
+ offset="0.809"
+ style="stop-color:#86ABCD"
+ id="stop4193" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4195" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="1.6"
+ id="circle4197"
+ style="fill:url(#SVGID_14_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="1.6"
+ sodipodi:ry="1.6"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+</svg> \ No newline at end of file
diff --git a/examples/declarative/ui-components/slideswitch/slideswitch.qml b/examples/declarative/ui-components/slideswitch/slideswitch.qml
new file mode 100644
index 0000000..51c3c77
--- /dev/null
+++ b/examples/declarative/ui-components/slideswitch/slideswitch.qml
@@ -0,0 +1,11 @@
+import Qt 4.7
+import "content"
+
+Rectangle {
+ color: "white"
+ width: 400; height: 250
+
+//![0]
+ Switch { anchors.centerIn: parent; on: false }
+//![0]
+}
diff --git a/examples/declarative/ui-components/slideswitch/slideswitch.qmlproject b/examples/declarative/ui-components/slideswitch/slideswitch.qmlproject
new file mode 100644
index 0000000..d4909f8
--- /dev/null
+++ b/examples/declarative/ui-components/slideswitch/slideswitch.qmlproject
@@ -0,0 +1,16 @@
+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/ui-components/spinner/content/Spinner.qml b/examples/declarative/ui-components/spinner/content/Spinner.qml
new file mode 100644
index 0000000..8145a28
--- /dev/null
+++ b/examples/declarative/ui-components/spinner/content/Spinner.qml
@@ -0,0 +1,25 @@
+import Qt 4.7
+
+Image {
+ property alias model: view.model
+ property alias delegate: view.delegate
+ property alias currentIndex: view.currentIndex
+ property real itemHeight: 30
+ source: "spinner-bg.png"
+ clip: true
+ PathView {
+ id: view
+ anchors.fill: parent
+ pathItemCount: height/itemHeight
+ preferredHighlightBegin: 0.5
+ preferredHighlightEnd: 0.5
+ highlight: Image { source: "spinner-select.png"; width: view.width; height: itemHeight+4 }
+ dragMargin: view.width/2
+ path: Path {
+ startX: view.width/2; startY: -itemHeight/2
+ PathLine { x: view.width/2; y: view.pathItemCount*itemHeight + itemHeight }
+ }
+ }
+ Keys.onDownPressed: view.incrementCurrentIndex()
+ Keys.onUpPressed: view.decrementCurrentIndex()
+}
diff --git a/examples/declarative/ui-components/spinner/content/spinner-bg.png b/examples/declarative/ui-components/spinner/content/spinner-bg.png
new file mode 100644
index 0000000..b3556f1
--- /dev/null
+++ b/examples/declarative/ui-components/spinner/content/spinner-bg.png
Binary files differ
diff --git a/examples/declarative/ui-components/spinner/content/spinner-select.png b/examples/declarative/ui-components/spinner/content/spinner-select.png
new file mode 100644
index 0000000..95a17a1
--- /dev/null
+++ b/examples/declarative/ui-components/spinner/content/spinner-select.png
Binary files differ
diff --git a/examples/declarative/ui-components/spinner/main.qml b/examples/declarative/ui-components/spinner/main.qml
new file mode 100644
index 0000000..6be567a
--- /dev/null
+++ b/examples/declarative/ui-components/spinner/main.qml
@@ -0,0 +1,18 @@
+import Qt 4.7
+import "content"
+
+Rectangle {
+ width: 240; height: 320
+ Column {
+ y: 20; x: 20; spacing: 20
+ Spinner {
+ id: spinner
+ width: 200; height: 240
+ focus: true
+ model: 20
+ itemHeight: 30
+ delegate: Text { font.pixelSize: 25; text: index; height: 30 }
+ }
+ Text { text: "Current item index: " + spinner.currentIndex }
+ }
+}
diff --git a/examples/declarative/ui-components/spinner/spinner.qmlproject b/examples/declarative/ui-components/spinner/spinner.qmlproject
new file mode 100644
index 0000000..d4909f8
--- /dev/null
+++ b/examples/declarative/ui-components/spinner/spinner.qmlproject
@@ -0,0 +1,16 @@
+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/ui-components/tabwidget/TabWidget.qml b/examples/declarative/ui-components/tabwidget/TabWidget.qml
new file mode 100644
index 0000000..26d25b4
--- /dev/null
+++ b/examples/declarative/ui-components/tabwidget/TabWidget.qml
@@ -0,0 +1,57 @@
+import Qt 4.7
+
+Item {
+ id: tabWidget
+
+ property int current: 0
+ default property alias content: stack.children
+
+ onCurrentChanged: setOpacities()
+ Component.onCompleted: setOpacities()
+
+ function setOpacities()
+ {
+ for (var i = 0; i < stack.children.length; ++i) {
+ stack.children[i].opacity = i == current ? 1 : 0
+ }
+ }
+
+ Row {
+ id: header
+ Repeater {
+ delegate: Rectangle {
+ width: tabWidget.width / stack.children.length; height: 36
+
+ Rectangle {
+ width: parent.width; height: 1
+ anchors { bottom: parent.bottom; bottomMargin: 1 }
+ color: "#acb2c2"
+ }
+ BorderImage {
+ anchors { fill: parent; leftMargin: 2; topMargin: 5; rightMargin: 1 }
+ border { left: 7; right: 7 }
+ source: "tab.png"
+ visible: tabWidget.current == index
+ }
+ Text {
+ horizontalAlignment: Qt.AlignHCenter; verticalAlignment: Qt.AlignVCenter
+ anchors.fill: parent
+ text: stack.children[index].title
+ elide: Text.ElideRight
+ font.bold: tabWidget.current == index
+ }
+ MouseArea {
+ anchors.fill: parent
+ onClicked: tabWidget.current = index
+ }
+ }
+ model: stack.children.length
+ }
+ }
+
+ Item {
+ id: stack
+ width: tabWidget.width
+ anchors.top: header.bottom; anchors.bottom: tabWidget.bottom
+ }
+}
diff --git a/examples/declarative/ui-components/tabwidget/tab.png b/examples/declarative/ui-components/tabwidget/tab.png
new file mode 100644
index 0000000..ad80216
--- /dev/null
+++ b/examples/declarative/ui-components/tabwidget/tab.png
Binary files differ
diff --git a/examples/declarative/ui-components/tabwidget/tabs.qml b/examples/declarative/ui-components/tabwidget/tabs.qml
new file mode 100644
index 0000000..fba203c
--- /dev/null
+++ b/examples/declarative/ui-components/tabwidget/tabs.qml
@@ -0,0 +1,59 @@
+import Qt 4.7
+
+TabWidget {
+ id: tabs
+ width: 640; height: 480
+
+ Rectangle {
+ property string title: "Red"
+ anchors.fill: parent
+ color: "#e3e3e3"
+
+ Rectangle {
+ anchors { fill: parent; topMargin: 20; leftMargin: 20; rightMargin: 20; bottomMargin: 20 }
+ color: "#ff7f7f"
+ Text {
+ width: parent.width - 20
+ anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
+ text: "Roses are red"
+ font.pixelSize: 20
+ wrapMode: Text.WordWrap
+ }
+ }
+ }
+
+ Rectangle {
+ property string title: "Green"
+ anchors.fill: parent
+ color: "#e3e3e3"
+
+ Rectangle {
+ anchors { fill: parent; topMargin: 20; leftMargin: 20; rightMargin: 20; bottomMargin: 20 }
+ color: "#7fff7f"
+ Text {
+ width: parent.width - 20
+ anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
+ text: "Flower stems are green"
+ font.pixelSize: 20
+ wrapMode: Text.WordWrap
+ }
+ }
+ }
+
+ Rectangle {
+ property string title: "Blue"
+ anchors.fill: parent; color: "#e3e3e3"
+
+ Rectangle {
+ anchors { fill: parent; topMargin: 20; leftMargin: 20; rightMargin: 20; bottomMargin: 20 }
+ color: "#7f7fff"
+ Text {
+ width: parent.width - 20
+ anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
+ text: "Violets are blue"
+ font.pixelSize: 20
+ wrapMode: Text.WordWrap
+ }
+ }
+ }
+}
diff --git a/examples/declarative/ui-components/tabwidget/tabwidget.qmlproject b/examples/declarative/ui-components/tabwidget/tabwidget.qmlproject
new file mode 100644
index 0000000..d4909f8
--- /dev/null
+++ b/examples/declarative/ui-components/tabwidget/tabwidget.qmlproject
@@ -0,0 +1,16 @@
+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/ui-components/ui-components.qmlproject b/examples/declarative/ui-components/ui-components.qmlproject
new file mode 100644
index 0000000..d4909f8
--- /dev/null
+++ b/examples/declarative/ui-components/ui-components.qmlproject
@@ -0,0 +1,16 @@
+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 " ]
+}