summaryrefslogtreecommitdiffstats
path: root/examples/declarative/ui-components/scrollbar
diff options
context:
space:
mode:
authorBea Lam <bea.lam@nokia.com>2010-05-14 01:32:57 (GMT)
committerBea Lam <bea.lam@nokia.com>2010-05-16 23:42:12 (GMT)
commit82d0b03c4f81c2832975d548917c03dbaddeee72 (patch)
treecb2d7ae0c7c8c5870f4c9439453c938a9423afad /examples/declarative/ui-components/scrollbar
parent0aca20bf669ef7e7702ee96d0d0676392cfd1b72 (diff)
downloadQt-82d0b03c4f81c2832975d548917c03dbaddeee72.zip
Qt-82d0b03c4f81c2832975d548917c03dbaddeee72.tar.gz
Qt-82d0b03c4f81c2832975d548917c03dbaddeee72.tar.bz2
Restructure the examples. They are now organized into various
subdirectories to make it easier to locate examples for certain features (e.g. animation) and to distinguish between different types of examples (e.g. very basic examples vs complex demo-like examples).
Diffstat (limited to 'examples/declarative/ui-components/scrollbar')
-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
4 files changed, 103 insertions, 0 deletions
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 " ]
+}