summaryrefslogtreecommitdiffstats
path: root/examples
diff options
context:
space:
mode:
authorQt Continuous Integration System <qt-info@nokia.com>2010-04-13 23:05:26 (GMT)
committerQt Continuous Integration System <qt-info@nokia.com>2010-04-13 23:05:26 (GMT)
commita5e9e86a6daddde6fb906cbf09bf562e50b17698 (patch)
tree18e1fbc22574ae2168500349a04f758d91a37c8e /examples
parentc46c06d363b7c90fecd84e7ef333ffa449f1d71c (diff)
parenta15c2d6ba9c2da1c709fbb23d0c07ad51450d93e (diff)
downloadQt-a5e9e86a6daddde6fb906cbf09bf562e50b17698.zip
Qt-a5e9e86a6daddde6fb906cbf09bf562e50b17698.tar.gz
Qt-a5e9e86a6daddde6fb906cbf09bf562e50b17698.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: (26 commits) Remove warning on ASCII cast Fix compilation on Solaris, AIX and HP-UX. Speed up borderimage test. Exclude webview examples when compiled without webview Fix test Use SRCDIR to make examples test work with shadow builds. Example fixes Improve efficiency of model dataChanged. Optimize some autotests Fix test (run with -qws on QWS). Stabilize behaviors test. Struct -> class because class is better. Move effect property where it should be. Tweak tests to run in parallel Network-related test fails on the rare occasion Fix code style in examples Make demo code more consistent with example code in terms of variable Fix score from previous change Doc improvements Fix example code style ...
Diffstat (limited to 'examples')
-rw-r--r--examples/declarative/behaviors/SideRect.qml12
-rw-r--r--examples/declarative/behaviors/behavior-example.qml28
-rw-r--r--examples/declarative/border-image/animated.qml1
-rw-r--r--examples/declarative/border-image/borders.qml1
-rw-r--r--examples/declarative/clocks/content/Clock.qml9
-rw-r--r--examples/declarative/connections/connections-example.qml25
-rw-r--r--examples/declarative/dial/dial-example.qml21
-rw-r--r--examples/declarative/dynamic/dynamic.qml2
-rw-r--r--examples/declarative/effects/effects.qml13
-rw-r--r--examples/declarative/fillmode/fillmode.qml7
-rw-r--r--examples/declarative/flipable/flipable-example.qml4
-rw-r--r--examples/declarative/focus/Core/ContextMenu.qml5
-rw-r--r--examples/declarative/focus/Core/GridMenu.qml19
-rw-r--r--examples/declarative/focus/Core/ListViewDelegate.qml12
-rw-r--r--examples/declarative/focus/Core/ListViews.qml33
-rw-r--r--examples/declarative/focus/focus.qml35
-rw-r--r--examples/declarative/fonts/banner.qml5
-rw-r--r--examples/declarative/fonts/fonts.qml52
-rw-r--r--examples/declarative/fonts/hello.qml27
-rw-r--r--examples/declarative/gridview/gridview-example.qml19
-rw-r--r--examples/declarative/imageprovider/imageprovider-example.qml5
-rw-r--r--examples/declarative/images/images.qml11
-rw-r--r--examples/declarative/layouts/layouts.qml13
-rw-r--r--examples/declarative/layouts/positioners.qml162
-rw-r--r--examples/declarative/listmodel-threaded/timedisplay.qml4
-rw-r--r--examples/declarative/listview/dynamic.qml139
-rw-r--r--examples/declarative/listview/highlight.qml32
-rw-r--r--examples/declarative/listview/itemlist.qml27
-rw-r--r--examples/declarative/listview/listview-example.qml36
-rw-r--r--examples/declarative/listview/recipes.qml76
-rw-r--r--examples/declarative/listview/sections.qml30
-rw-r--r--examples/declarative/mousearea/mouse.qml37
-rw-r--r--examples/declarative/progressbar/content/ProgressBar.qml30
-rw-r--r--examples/declarative/progressbar/progressbars.qml15
-rw-r--r--examples/declarative/proxywidgets/proxywidgets.qml57
-rw-r--r--examples/declarative/scrollbar/ScrollBar.qml12
-rw-r--r--examples/declarative/scrollbar/display.qml48
-rw-r--r--examples/declarative/searchbox/SearchBox.qml23
-rw-r--r--examples/declarative/searchbox/main.qml6
-rw-r--r--examples/declarative/slideswitch/content/Switch.qml7
-rw-r--r--examples/declarative/sql/hello.qml3
-rw-r--r--examples/declarative/states/states.qml59
-rw-r--r--examples/declarative/states/transitions.qml78
-rw-r--r--examples/declarative/tabwidget/TabWidget.qml21
-rw-r--r--examples/declarative/tabwidget/tabs.qml27
-rw-r--r--examples/declarative/tic-tac-toe/content/Button.qml22
-rw-r--r--examples/declarative/tic-tac-toe/tic-tac-toe.qml29
-rw-r--r--examples/declarative/tutorials/samegame/samegame1/Block.qml7
-rw-r--r--examples/declarative/tutorials/samegame/samegame1/Button.qml20
-rw-r--r--examples/declarative/tutorials/samegame/samegame1/samegame.qml23
-rw-r--r--examples/declarative/tutorials/samegame/samegame2/Block.qml7
-rw-r--r--examples/declarative/tutorials/samegame/samegame2/Button.qml20
-rw-r--r--examples/declarative/tutorials/samegame/samegame2/samegame.qml23
-rw-r--r--examples/declarative/tutorials/samegame/samegame3/Block.qml22
-rw-r--r--examples/declarative/tutorials/samegame/samegame3/Button.qml20
-rw-r--r--examples/declarative/tutorials/samegame/samegame3/Dialog.qml13
-rw-r--r--examples/declarative/tutorials/samegame/samegame3/samegame.qml34
-rw-r--r--examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml65
-rw-r--r--examples/declarative/tutorials/samegame/samegame4/content/Button.qml20
-rw-r--r--examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml13
-rwxr-xr-xexamples/declarative/tutorials/samegame/samegame4/content/samegame.js2
-rw-r--r--examples/declarative/tutorials/samegame/samegame4/samegame.qml43
-rw-r--r--examples/declarative/tvtennis/tvtennis.qml5
-rw-r--r--examples/declarative/velocity/Day.qml31
-rw-r--r--examples/declarative/velocity/velocity.qml51
-rw-r--r--examples/declarative/webview/alerts.qml6
-rw-r--r--examples/declarative/webview/autosize.qml5
-rw-r--r--examples/declarative/webview/googleMaps.qml12
-rw-r--r--examples/declarative/webview/transparent.qml1
-rw-r--r--examples/declarative/workerscript/workerscript.qml12
-rw-r--r--examples/declarative/xmldata/daringfireball.qml11
-rw-r--r--examples/declarative/xmldata/yahoonews.qml20
-rw-r--r--examples/declarative/xmlhttprequest/test.qml40
73 files changed, 1184 insertions, 681 deletions
diff --git a/examples/declarative/behaviors/SideRect.qml b/examples/declarative/behaviors/SideRect.qml
index d06f73c..d32bd7b 100644
--- a/examples/declarative/behaviors/SideRect.qml
+++ b/examples/declarative/behaviors/SideRect.qml
@@ -5,12 +5,18 @@ Rectangle {
property string text
- width: 75; height: 50; radius: 6
- color: "#646464"; border.width: 4; border.color: "white"
+ width: 75; height: 50
+ radius: 6
+ color: "#646464"
+ border.width: 4; border.color: "white"
MouseArea {
anchors.fill: parent
hoverEnabled: true
- onEntered: { focusRect.x = myRect.x; focusRect.y = myRect.y; focusRect.text = myRect.text }
+ onEntered: {
+ focusRect.x = myRect.x;
+ focusRect.y = myRect.y;
+ focusRect.text = myRect.text;
+ }
}
}
diff --git a/examples/declarative/behaviors/behavior-example.qml b/examples/declarative/behaviors/behavior-example.qml
index b21f4f0..b7bae6c 100644
--- a/examples/declarative/behaviors/behavior-example.qml
+++ b/examples/declarative/behaviors/behavior-example.qml
@@ -1,40 +1,38 @@
import Qt 4.7
Rectangle {
- color: "#343434"
width: 600; height: 400
+ color: "#343434"
Rectangle {
anchors.centerIn: parent
- width: 200; height: 200; radius: 30
- color: "transparent"; border.width: 4; border.color: "white"
+ width: 200; height: 200
+ radius: 30
+ color: "transparent"
+ border.width: 4; border.color: "white"
SideRect {
id: leftRect
- anchors.verticalCenter: parent.verticalCenter
- anchors.horizontalCenter: parent.left
+ anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.left }
text: "Left"
}
SideRect {
id: rightRect
- anchors.verticalCenter: parent.verticalCenter
- anchors.horizontalCenter: parent.right
+ anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.right }
text: "Right"
}
SideRect {
id: topRect
- anchors.verticalCenter: parent.top
- anchors.horizontalCenter: parent.horizontalCenter
+ anchors { verticalCenter: parent.top; horizontalCenter: parent.horizontalCenter }
text: "Top"
}
SideRect {
id: bottomRect
- anchors.verticalCenter: parent.bottom
- anchors.horizontalCenter: parent.horizontalCenter
+ anchors { verticalCenter: parent.bottom; horizontalCenter: parent.horizontalCenter }
text: "Bottom"
}
@@ -44,9 +42,10 @@ Rectangle {
property string text
- color: "firebrick"
x: 62.5; y: 75; width: 75; height: 50
- radius: 6; border.width: 4; border.color: "white"
+ radius: 6
+ border.width: 4; border.color: "white"
+ color: "firebrick"
// Setting an 'elastic' behavior on the focusRect's x property.
Behavior on x {
@@ -62,7 +61,8 @@ Rectangle {
id: focusText
text: focusRect.text
anchors.centerIn: parent
- color: "white"; font.pixelSize: 16; font.bold: true
+ color: "white"
+ font.pixelSize: 16; font.bold: true
// Setting a behavior on the focusText's x property:
// Set the opacity to 0, set the new text value, then set the opacity back to 1.
diff --git a/examples/declarative/border-image/animated.qml b/examples/declarative/border-image/animated.qml
index 730aeca..c3ff9ef 100644
--- a/examples/declarative/border-image/animated.qml
+++ b/examples/declarative/border-image/animated.qml
@@ -3,7 +3,6 @@ import "content"
Rectangle {
id: page
- color: "white"
width: 1030; height: 540
MyBorderImage {
diff --git a/examples/declarative/border-image/borders.qml b/examples/declarative/border-image/borders.qml
index 8956128..3743f7e 100644
--- a/examples/declarative/border-image/borders.qml
+++ b/examples/declarative/border-image/borders.qml
@@ -2,7 +2,6 @@ import Qt 4.7
Rectangle {
id: page
- color: "white"
width: 520; height: 280
BorderImage {
diff --git a/examples/declarative/clocks/content/Clock.qml b/examples/declarative/clocks/content/Clock.qml
index 036df46..3426e6a 100644
--- a/examples/declarative/clocks/content/Clock.qml
+++ b/examples/declarative/clocks/content/Clock.qml
@@ -14,7 +14,7 @@ Item {
function timeChanged() {
var date = new Date;
hours = shift ? date.getUTCHours() + Math.floor(clock.shift) : date.getHours()
- if ( hours < 7 || hours > 19 ) night = true; else night = false
+ night = ( hours < 7 || hours > 19 )
minutes = shift ? date.getUTCMinutes() + ((clock.shift % 1) * 60) : date.getMinutes()
seconds = date.getUTCSeconds();
}
@@ -74,7 +74,10 @@ Item {
}
Text {
- id: cityLabel; font.bold: true; font.pixelSize: 14; y: 200; color: "white"
- anchors.horizontalCenter: parent.horizontalCenter; style: Text.Raised; styleColor: "black"
+ id: cityLabel
+ y: 200; anchors.horizontalCenter: parent.horizontalCenter
+ color: "white"
+ font.bold: true; font.pixelSize: 14
+ style: Text.Raised; styleColor: "black"
}
}
diff --git a/examples/declarative/connections/connections-example.qml b/examples/declarative/connections/connections-example.qml
index 0b4ca45..fbef968 100644
--- a/examples/declarative/connections/connections-example.qml
+++ b/examples/declarative/connections/connections-example.qml
@@ -2,23 +2,34 @@ import Qt 4.7
import "content"
Rectangle {
- id: window; color: "#646464"
- width: 640; height: 480
+ id: window
property int angle: 0
+ width: 640; height: 480
+ color: "#646464"
+
Image {
- id: image; source: "content/bg1.jpg"; anchors.centerIn: parent; transformOrigin: Item.Center
- rotation: window.angle
- Behavior on rotation { NumberAnimation { easing.type: "OutCubic"; duration: 300 } }
+ id: image
+ source: "content/bg1.jpg"
+ anchors.centerIn: parent
+ transformOrigin: Item.Center
+ rotation: window.angle
+
+ Behavior on rotation {
+ NumberAnimation { easing.type: "OutCubic"; duration: 300 }
+ }
}
Button {
- id: leftButton; image: "content/rotate-left.png"
+ id: leftButton
+ image: "content/rotate-left.png"
anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 10 }
}
+
Button {
- id: rightButton; image: "content/rotate-right.png"
+ id: rightButton
+ image: "content/rotate-right.png"
anchors { right: parent.right; bottom: parent.bottom; rightMargin: 10; bottomMargin: 10 }
}
diff --git a/examples/declarative/dial/dial-example.qml b/examples/declarative/dial/dial-example.qml
index 1ca958a..fd899a5 100644
--- a/examples/declarative/dial/dial-example.qml
+++ b/examples/declarative/dial/dial-example.qml
@@ -6,26 +6,35 @@ Rectangle {
width: 300; height: 300
// Dial with a slider to adjust it
- Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) }
+ Dial {
+ id: dial
+ anchors.centerIn: parent
+ value: slider.x * 100 / (container.width - 34)
+ }
Rectangle {
id: container
- anchors.bottom: parent.bottom; anchors.bottomMargin: 10
- anchors.left: parent.left; anchors.leftMargin: 20
- anchors.right: parent.right; anchors.rightMargin: 20; height: 16
+ anchors { bottom: parent.bottom; left: parent.left; right: parent.right; leftMargin: 20; rightMargin: 20; bottomMargin: 10 }
+ height: 16
+
+ radius: 8
+ opacity: 0.7
+ smooth: true
gradient: Gradient {
GradientStop { position: 0.0; color: "gray" }
GradientStop { position: 1.0; color: "white" }
}
- radius: 8; opacity: 0.7; smooth: true
+
Rectangle {
id: slider
x: 1; y: 1; width: 30; height: 14
- radius: 6; smooth: true
+ radius: 6
+ smooth: true
gradient: Gradient {
GradientStop { position: 0.0; color: "#424242" }
GradientStop { position: 1.0; color: "black" }
}
+
MouseArea {
anchors.fill: parent
drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32
diff --git a/examples/declarative/dynamic/dynamic.qml b/examples/declarative/dynamic/dynamic.qml
index 7331b3f..eea528f 100644
--- a/examples/declarative/dynamic/dynamic.qml
+++ b/examples/declarative/dynamic/dynamic.qml
@@ -60,7 +60,7 @@ Item {
width: 480
anchors { right: parent.right; top:parent.top; bottom: parent.bottom }
Rectangle { //Not a child of any positioner
- color: "white"; border.color: "black";
+ border.color: "black";
width: toolRow.width + 4
height: toolRow.height + 4
x: toolboxPositioner.x + toolRow.x - 2
diff --git a/examples/declarative/effects/effects.qml b/examples/declarative/effects/effects.qml
index d325e11..feb7c69 100644
--- a/examples/declarative/effects/effects.qml
+++ b/examples/declarative/effects/effects.qml
@@ -1,9 +1,7 @@
import Qt 4.7
Rectangle {
- color: "white"
- width: 400
- height: 200
+ width: 400; height: 200
Image {
id: blur
@@ -33,7 +31,14 @@ Rectangle {
effect: DropShadow {
blurRadius: 3
offset.x: 3
- NumberAnimation on offset.y { id: dropShadowEffect; from: 0; to: 10; duration: 1000; running: false; loops: Animation.Infinite; }
+
+ NumberAnimation on offset.y {
+ id: dropShadowEffect
+ from: 0; to: 10
+ duration: 1000
+ running: false
+ loops: Animation.Infinite
+ }
}
MouseArea { anchors.fill: parent; onClicked: dropShadowEffect.running = !dropShadowEffect.running }
diff --git a/examples/declarative/fillmode/fillmode.qml b/examples/declarative/fillmode/fillmode.qml
index 249674b..e47fc9b 100644
--- a/examples/declarative/fillmode/fillmode.qml
+++ b/examples/declarative/fillmode/fillmode.qml
@@ -4,6 +4,7 @@ Image {
width: 400
height: 250
source: "face.png"
+
SequentialAnimation on fillMode {
loops: Animation.Infinite
PropertyAction { value: Image.Stretch }
@@ -25,17 +26,19 @@ Image {
PropertyAction { target: label; property: "text"; value: "TileVertically" }
PauseAnimation { duration: 1000 }
}
+
Text {
id: label
font.pointSize: 24
color: "blue"
style: Text.Outline
styleColor: "white"
- anchors { centerIn: parent }
+ anchors.centerIn: parent
}
+
Rectangle {
border.color: "black"
color: "transparent"
- anchors { fill: parent; rightMargin: 1; bottomMargin: 1}
+ anchors { fill: parent; rightMargin: 1; bottomMargin: 1 }
}
}
diff --git a/examples/declarative/flipable/flipable-example.qml b/examples/declarative/flipable/flipable-example.qml
index 171353f..4e09569 100644
--- a/examples/declarative/flipable/flipable-example.qml
+++ b/examples/declarative/flipable/flipable-example.qml
@@ -2,7 +2,9 @@ import Qt 4.7
import "content"
Rectangle {
- id: window; width: 480; height: 320
+ id: window
+
+ width: 480; height: 320
color: "darkgreen"
Row {
diff --git a/examples/declarative/focus/Core/ContextMenu.qml b/examples/declarative/focus/Core/ContextMenu.qml
index 56a1b3e..49a54bc 100644
--- a/examples/declarative/focus/Core/ContextMenu.qml
+++ b/examples/declarative/focus/Core/ContextMenu.qml
@@ -2,13 +2,16 @@ import Qt 4.7
FocusScope {
id: container
+
property bool open: false
Item {
anchors.fill: parent
Rectangle {
- anchors.fill: parent; color: "#D1DBBD"; focus: true
+ anchors.fill: parent
+ color: "#D1DBBD"
+ focus: true
Keys.onRightPressed: mainView.focus = true
}
}
diff --git a/examples/declarative/focus/Core/GridMenu.qml b/examples/declarative/focus/Core/GridMenu.qml
index 75f6be0..c37b17a 100644
--- a/examples/declarative/focus/Core/GridMenu.qml
+++ b/examples/declarative/focus/Core/GridMenu.qml
@@ -6,32 +6,41 @@ FocusScope {
onWantsFocusChanged: if (wantsFocus) mainView.state = ""
Rectangle {
- clip: true; anchors.fill: parent
+ anchors.fill: parent
+ clip: true
gradient: Gradient {
GradientStop { position: 0.0; color: "#193441" }
GradientStop { position: 1.0; color: Qt.darker("#193441") }
}
GridView {
- id: gridView; cellWidth: 152; cellHeight: 152; focus: true
+ id: gridView
x: 20; width: parent.width - 40; height: parent.height
+ cellWidth: 152; cellHeight: 152
+ focus: true
model: 12
KeyNavigation.down: listViews
KeyNavigation.left: contextMenu
delegate: Item {
- id: container; width: GridView.view.cellWidth; height: GridView.view.cellHeight
+ id: container
+ width: GridView.view.cellWidth; height: GridView.view.cellHeight
Rectangle {
id: content
- color: "transparent"; smooth: true
+ color: "transparent"
+ smooth: true
anchors.centerIn: parent; width: container.width - 40; height: container.height - 40; radius: 10
+
Rectangle { color: "#91AA9D"; x: 3; y: 3; width: parent.width - 6; height: parent.height - 6; radius: 8 }
Image { source: "images/qt-logo.png"; anchors.centerIn: parent; smooth: true }
}
MouseArea {
- id: mouseArea; anchors.fill: parent; hoverEnabled: true
+ id: mouseArea
+ anchors.fill: parent
+ hoverEnabled: true
+
onClicked: {
GridView.view.currentIndex = index
container.focus = true
diff --git a/examples/declarative/focus/Core/ListViewDelegate.qml b/examples/declarative/focus/Core/ListViewDelegate.qml
index 35c04cf..96324d7 100644
--- a/examples/declarative/focus/Core/ListViewDelegate.qml
+++ b/examples/declarative/focus/Core/ListViewDelegate.qml
@@ -7,8 +7,11 @@ Component {
Rectangle {
id: content
- color: "transparent"; smooth: true
- anchors.centerIn: parent; width: container.width - 40; height: container.height - 10; radius: 10
+ anchors.centerIn: parent; width: container.width - 40; height: container.height - 10
+ color: "transparent"
+ smooth: true
+ radius: 10
+
Rectangle { color: "#91AA9D"; x: 3; y: 3; width: parent.width - 6; height: parent.height - 6; radius: 8 }
Text {
text: "List element " + (index + 1); color: "#193441"; font.bold: false; anchors.centerIn: parent
@@ -17,7 +20,10 @@ Component {
}
MouseArea {
- id: mouseArea; anchors.fill: parent; hoverEnabled: true
+ id: mouseArea
+ anchors.fill: parent
+ hoverEnabled: true
+
onClicked: {
ListView.view.currentIndex = index
container.focus = true
diff --git a/examples/declarative/focus/Core/ListViews.qml b/examples/declarative/focus/Core/ListViews.qml
index b28cc1c..f4384c8 100644
--- a/examples/declarative/focus/Core/ListViews.qml
+++ b/examples/declarative/focus/Core/ListViews.qml
@@ -7,29 +7,43 @@ FocusScope {
ListView {
id: list1
+ y: wantsFocus ? 10 : 40; width: parent.width / 3; height: parent.height - 20
+ focus: true
+ KeyNavigation.up: gridMenu; KeyNavigation.left: contextMenu; KeyNavigation.right: list2
+ model: 10
delegate: ListViewDelegate {}
- y: wantsFocus ? 10 : 40; focus: true; width: parent.width / 3; height: parent.height - 20
- model: 10; KeyNavigation.up: gridMenu; KeyNavigation.left: contextMenu; KeyNavigation.right: list2
- Behavior on y { NumberAnimation { duration: 600; easing.type: "OutQuint" } }
+
+ Behavior on y {
+ NumberAnimation { duration: 600; easing.type: "OutQuint" }
+ }
}
ListView {
id: list2
- delegate: ListViewDelegate {}
y: wantsFocus ? 10 : 40; x: parent.width / 3; width: parent.width / 3; height: parent.height - 20
- model: 10; KeyNavigation.up: gridMenu; KeyNavigation.left: list1; KeyNavigation.right: list3
- Behavior on y { NumberAnimation { duration: 600; easing.type: "OutQuint" } }
+ KeyNavigation.up: gridMenu; KeyNavigation.left: list1; KeyNavigation.right: list3
+ model: 10
+ delegate: ListViewDelegate {}
+
+ Behavior on y {
+ NumberAnimation { duration: 600; easing.type: "OutQuint" }
+ }
}
ListView {
id: list3
- delegate: ListViewDelegate {}
y: wantsFocus ? 10 : 40; x: 2 * parent.width / 3; width: parent.width / 3; height: parent.height - 20
- model: 10; KeyNavigation.up: gridMenu; KeyNavigation.left: list2
- Behavior on y { NumberAnimation { duration: 600; easing.type: "OutQuint" } }
+ KeyNavigation.up: gridMenu; KeyNavigation.left: list2
+ model: 10
+ delegate: ListViewDelegate {}
+
+ Behavior on y {
+ NumberAnimation { duration: 600; easing.type: "OutQuint" }
+ }
}
Rectangle { width: parent.width; height: 1; color: "#D1DBBD" }
+
Rectangle {
y: 1; width: parent.width; height: 10
gradient: Gradient {
@@ -37,6 +51,7 @@ FocusScope {
GradientStop { position: 1.0; color: "transparent" }
}
}
+
Rectangle {
y: parent.height - 10; width: parent.width; height: 10
gradient: Gradient {
diff --git a/examples/declarative/focus/focus.qml b/examples/declarative/focus/focus.qml
index d9b6549..22b0e50 100644
--- a/examples/declarative/focus/focus.qml
+++ b/examples/declarative/focus/focus.qml
@@ -2,19 +2,34 @@ import Qt 4.7
import "Core"
Rectangle {
- id: window; width: 800; height: 480; color: "#3E606F"
+ id: window
+
+ width: 800; height: 480
+ color: "#3E606F"
FocusScope {
- id: mainView; focus: true; width: parent.width; height: parent.height
+ id: mainView
+
+ width: parent.width; height: parent.height
+ focus: true
GridMenu {
- id: gridMenu; focus: true
- width: parent.width; height: 320; interactive: parent.wantsFocus
+ id: gridMenu
+
+ width: parent.width; height: 320
+ focus: true
+ interactive: parent.wantsFocus
}
- ListViews { id: listViews; y: 320; width: parent.width; height: 320 }
+ ListViews {
+ id: listViews
+ y: 320; width: parent.width; height: 320
+ }
- Rectangle { id: shade; color: "black"; opacity: 0; anchors.fill: parent }
+ Rectangle {
+ id: shade
+ color: "black"; opacity: 0; anchors.fill: parent
+ }
states: State {
name: "showListViews"
@@ -28,7 +43,10 @@ Rectangle {
}
Image {
- source: "Core/images/arrow.png"; rotation: 90; anchors.verticalCenter: parent.verticalCenter
+ source: "Core/images/arrow.png"
+ rotation: 90
+ anchors.verticalCenter: parent.verticalCenter
+
MouseArea {
anchors { fill: parent; leftMargin: -10; topMargin: -10; rightMargin: -10; bottomMargin: -10 }
onClicked: window.state = "contextMenuOpen"
@@ -38,7 +56,8 @@ Rectangle {
ContextMenu { id: contextMenu; x: -265; width: 260; height: parent.height }
states: State {
- name: "contextMenuOpen"; when: !mainView.wantsFocus
+ name: "contextMenuOpen"
+ when: !mainView.wantsFocus
PropertyChanges { target: contextMenu; x: 0; open: true }
PropertyChanges { target: mainView; x: 130 }
PropertyChanges { target: shade; opacity: 0.25 }
diff --git a/examples/declarative/fonts/banner.qml b/examples/declarative/fonts/banner.qml
index b7f5344..353354a 100644
--- a/examples/declarative/fonts/banner.qml
+++ b/examples/declarative/fonts/banner.qml
@@ -2,14 +2,17 @@ import Qt 4.7
Rectangle {
id: screen
- width: 640; height: 320; color: "steelblue"
property int pixelSize: screen.height * 1.25
property color textColor: "lightsteelblue"
property string text: "Hello world! "
+ width: 640; height: 320
+ color: "steelblue"
+
Row {
y: -screen.height / 4.5
+
NumberAnimation on x { from: 0; to: -text.width; duration: 6000; loops: Animation.Infinite }
Text { id: text; font.pixelSize: screen.pixelSize; color: screen.textColor; text: screen.text }
Text { font.pixelSize: screen.pixelSize; color: screen.textColor; text: screen.text }
diff --git a/examples/declarative/fonts/fonts.qml b/examples/declarative/fonts/fonts.qml
index 49c3d0a..97dd645 100644
--- a/examples/declarative/fonts/fonts.qml
+++ b/examples/declarative/fonts/fonts.qml
@@ -11,36 +11,43 @@ Rectangle {
FontLoader { id: webFont; source: "http://www.princexml.com/fonts/steffmann/Starburst.ttf" }
Column {
- anchors.fill: parent; spacing: 15
- anchors.leftMargin: 10; anchors.rightMargin: 10
+ anchors { fill: parent; leftMargin: 10; rightMargin: 10 }
+ spacing: 15
+
Text {
- text: myText; color: "lightsteelblue"
- width: parent.width; elide: Text.ElideRight
- font.family: "Times"; font.pointSize: 42
+ text: myText
+ color: "lightsteelblue"
+ width: parent.width
+ elide: Text.ElideRight
+ font.family: "Times"; font.pointSize: 42
}
Text {
- text: myText; color: "lightsteelblue"
- width: parent.width; elide: Text.ElideLeft
- font.family: "Times"; font.pointSize: 42
- font.capitalization: Font.AllUppercase
+ text: myText
+ color: "lightsteelblue"
+ width: parent.width
+ elide: Text.ElideLeft
+ font { family: "Times"; pointSize: 42; capitalization: Font.AllUppercase }
}
Text {
- text: myText; color: "lightsteelblue"
- width: parent.width; elide: Text.ElideMiddle
- font.family: fixedFont.name; font.pointSize: 42; font.weight: Font.Bold
- font.capitalization: Font.AllLowercase
+ text: myText
+ color: "lightsteelblue"
+ width: parent.width
+ elide: Text.ElideMiddle
+ font { family: fixedFont.name; pointSize: 42; weight: Font.Bold; capitalization: Font.AllLowercase }
}
Text {
- text: myText; color: "lightsteelblue"
- width: parent.width; elide: Text.ElideRight
- font.family: fixedFont.name; font.pointSize: 42; font.italic: true
- font.capitalization: Font.SmallCaps
+ text: myText
+ color: "lightsteelblue"
+ width: parent.width
+ elide: Text.ElideRight
+ font { family: fixedFont.name; pointSize: 42; italic: true; capitalization: Font.SmallCaps }
}
Text {
- text: myText; color: "lightsteelblue"
- width: parent.width; elide: Text.ElideLeft
- font.family: localFont.name; font.pointSize: 42
- font.capitalization: Font.Capitalize
+ text: myText
+ color: "lightsteelblue"
+ width: parent.width
+ elide: Text.ElideLeft
+ font { family: localFont.name; pointSize: 42; capitalization: Font.Capitalize }
}
Text {
text: {
@@ -49,7 +56,8 @@ Rectangle {
else if (webFont.status == 3) "Error loading font"
}
color: "lightsteelblue"
- width: parent.width; elide: Text.ElideMiddle
+ width: parent.width
+ elide: Text.ElideMiddle
font.family: webFont.name; font.pointSize: 42
}
}
diff --git a/examples/declarative/fonts/hello.qml b/examples/declarative/fonts/hello.qml
index 9d926fb..d4d0e4c 100644
--- a/examples/declarative/fonts/hello.qml
+++ b/examples/declarative/fonts/hello.qml
@@ -1,22 +1,33 @@
import Qt 4.7
Rectangle {
- id: screen; width: 800; height: 480; color: "black"
+ id: screen
+
+ width: 800; height: 480
+ color: "black"
Item {
- id: container; x: screen.width / 2; y: screen.height / 2
+ id: container
+ x: screen.width / 2; y: screen.height / 2
+
Text {
- id: text; color: "white"; anchors.centerIn: parent
- text: "Hello world!"; font.pixelSize: 60
+ id: text
+ anchors.centerIn: parent
+ color: "white"
+ text: "Hello world!"
+ font.pixelSize: 60
SequentialAnimation on font.letterSpacing {
loops: Animation.Infinite;
NumberAnimation { from: 100; to: 300; easing.type: "InQuad"; duration: 3000 }
- ScriptAction { script: {
- container.y = (screen.height / 4) + (Math.random() * screen.height / 2)
- container.x = (screen.width / 4) + (Math.random() * screen.width / 2)
- } }
+ ScriptAction {
+ script: {
+ container.y = (screen.height / 4) + (Math.random() * screen.height / 2)
+ container.x = (screen.width / 4) + (Math.random() * screen.width / 2)
+ }
+ }
}
+
SequentialAnimation on opacity {
loops: Animation.Infinite;
NumberAnimation { from: 1; to: 0; duration: 2600 }
diff --git a/examples/declarative/gridview/gridview-example.qml b/examples/declarative/gridview/gridview-example.qml
index fd5f430..a5f41fb 100644
--- a/examples/declarative/gridview/gridview-example.qml
+++ b/examples/declarative/gridview/gridview-example.qml
@@ -1,7 +1,8 @@
import Qt 4.7
Rectangle {
- width: 300; height: 400; color: "white"
+ width: 300; height: 400
+ color: "white"
ListModel {
id: appModel
@@ -16,10 +17,19 @@ Rectangle {
Component {
id: appDelegate
+
Item {
width: 100; height: 100
- Image { id: myIcon; y: 20; anchors.horizontalCenter: parent.horizontalCenter; source: icon }
- Text { anchors.top: myIcon.bottom; anchors.horizontalCenter: parent.horizontalCenter; text: name }
+
+ Image {
+ id: myIcon
+ y: 20; anchors.horizontalCenter: parent.horizontalCenter
+ source: icon
+ }
+ Text {
+ anchors { top: myIcon.bottom; horizontalCenter: parent.horizontalCenter }
+ text: name
+ }
}
}
@@ -31,8 +41,9 @@ Rectangle {
GridView {
anchors.fill: parent
cellWidth: 100; cellHeight: 100
- model: appModel; delegate: appDelegate
highlight: appHighlight
focus: true
+ model: appModel
+ delegate: appDelegate
}
}
diff --git a/examples/declarative/imageprovider/imageprovider-example.qml b/examples/declarative/imageprovider/imageprovider-example.qml
index 9d22576..d774112 100644
--- a/examples/declarative/imageprovider/imageprovider-example.qml
+++ b/examples/declarative/imageprovider/imageprovider-example.qml
@@ -2,10 +2,11 @@ import Qt 4.7
import "ImageProviderCore"
//![0]
ListView {
- width: 100
- height: 100
+ width: 100; height: 100
anchors.fill: parent
+
model: myModel
+
delegate: Component {
Item {
width: 100
diff --git a/examples/declarative/images/images.qml b/examples/declarative/images/images.qml
index 7980088..e48ad50 100644
--- a/examples/declarative/images/images.qml
+++ b/examples/declarative/images/images.qml
@@ -6,8 +6,8 @@ Rectangle {
height: grid.height + 50
Grid {
- x: 25; y: 25
id: grid
+ x: 25; y: 25
columns: 3
Image {
@@ -48,19 +48,22 @@ Rectangle {
}
Image {
- width: 50; height: 50; transform: Translate { x: 50 }
+ width: 50; height: 50
+ transform: Translate { x: 50 }
source: "content/lemonade.jpg"
}
Image {
- width: 50; height: 50; transform: Translate { x: 50 }
+ width: 50; height: 50
+ transform: Translate { x: 50 }
sourceSize.width: 50
sourceSize.height: 50
source: "content/lemonade.jpg"
}
Image {
- width: 50; height: 50; transform: Translate { x: 50 }
+ width: 50; height: 50
+ transform: Translate { x: 50 }
sourceSize: "50x50" // syntactic sugar
smooth: true
source: "content/lemonade.jpg"
diff --git a/examples/declarative/layouts/layouts.qml b/examples/declarative/layouts/layouts.qml
index 1d34afd..391eab7 100644
--- a/examples/declarative/layouts/layouts.qml
+++ b/examples/declarative/layouts/layouts.qml
@@ -1,12 +1,15 @@
import Qt 4.7
-import Qt.widgets 4.6
+import Qt.widgets 4.7
+
Item {
id: resizable
- width:400
- height:400
+
+ width: 400
+ height: 400
+
QGraphicsWidget {
- size.width:parent.width
- size.height:parent.height
+ size.width: parent.width
+ size.height: parent.height
layout: QGraphicsLinearLayout {
LayoutItem {
diff --git a/examples/declarative/layouts/positioners.qml b/examples/declarative/layouts/positioners.qml
index ef225d0..3703b59 100644
--- a/examples/declarative/layouts/positioners.qml
+++ b/examples/declarative/layouts/positioners.qml
@@ -2,31 +2,40 @@ import Qt 4.7
Rectangle {
id: page
- width: 420
- height: 420
- color: "white"
+ width: 420; height: 420
Column {
id: layout1
y: 0
move: Transition {
- NumberAnimation {
- properties: "y"; easing.type: "OutBounce"
- }
+ NumberAnimation { properties: "y"; easing.type: "OutBounce" }
}
add: Transition {
- NumberAnimation {
- properties: "y"; easing.type: "OutQuad"
- }
+ NumberAnimation { properties: "y"; easing.type: "OutQuad" }
}
+
Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 }
- Rectangle { id: blueV1; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15
- Behavior on opacity {NumberAnimation{}}
+
+ Rectangle {
+ id: blueV1
+ width: 100; height: 50
+ color: "lightsteelblue"
+ border.color: "black"
+ radius: 15
+ Behavior on opacity { NumberAnimation {} }
}
+
Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 }
- Rectangle { id: blueV2; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15
- Behavior on opacity {NumberAnimation{}}
+
+ Rectangle {
+ id: blueV2
+ width: 100; height: 50
+ color: "lightsteelblue"
+ border.color: "black"
+ radius: 15
+ Behavior on opacity { NumberAnimation {} }
}
+
Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 }
}
@@ -34,31 +43,41 @@ Rectangle {
id: layout2
y: 300
move: Transition {
- NumberAnimation {
- properties: "x"; easing.type: "OutBounce"
- }
+ NumberAnimation { properties: "x"; easing.type: "OutBounce" }
}
add: Transition {
- NumberAnimation {
- properties: "x"; easing.type: "OutQuad"
- }
+ NumberAnimation { properties: "x"; easing.type: "OutQuad" }
}
+
Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 }
- Rectangle { id: blueH1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15
- Behavior on opacity {NumberAnimation{}}
+
+ Rectangle {
+ id: blueH1
+ width: 50; height: 100
+ color: "lightsteelblue"
+ border.color: "black"
+ radius: 15
+ Behavior on opacity { NumberAnimation {} }
}
+
Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 }
- Rectangle { id: blueH2; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15
- Behavior on opacity {NumberAnimation{}}
+
+ Rectangle {
+ id: blueH2
+ width: 50; height: 100
+ color: "lightsteelblue"
+ border.color: "black"
+ radius: 15
+ Behavior on opacity { NumberAnimation {} }
}
+
Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 }
}
Button {
+ x: 135; y: 90
text: "Remove"
icon: "del.png"
- x: 135
- y: 90
onClicked: {
blueH2.opacity = 0
@@ -75,10 +94,9 @@ Rectangle {
}
Button {
+ x: 145; y: 140
text: "Add"
icon: "add.png"
- x: 145
- y: 140
onClicked: {
blueH2.opacity = 1
@@ -95,34 +113,50 @@ Rectangle {
}
Grid {
- x: 260
- y: 0
+ x: 260; y: 0
columns: 3
move: Transition {
- NumberAnimation {
- properties: "x,y"; easing.type: "OutBounce"
- }
+ NumberAnimation { properties: "x,y"; easing.type: "OutBounce" }
}
add: Transition {
- NumberAnimation {
- properties: "x,y"; easing.type: "OutBounce"
- }
+ NumberAnimation { properties: "x,y"; easing.type: "OutBounce" }
}
Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
- Rectangle { id: blueG1; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15
- Behavior on opacity {NumberAnimation{}}
+
+ Rectangle {
+ id: blueG1
+ width: 50; height: 50
+ color: "lightsteelblue"
+ border.color: "black"
+ radius: 15
+ Behavior on opacity { NumberAnimation {} }
}
+
Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 }
- Rectangle { id: blueG2; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15
- Behavior on opacity {NumberAnimation{}}
+
+ Rectangle {
+ id: blueG2
+ width: 50; height: 50
+ color: "lightsteelblue"
+ border.color: "black"
+ radius: 15
+ Behavior on opacity { NumberAnimation {} }
}
+
Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
- Rectangle { id: blueG3; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15
- Behavior on opacity {NumberAnimation{}}
+
+ Rectangle {
+ id: blueG3
+ width: 50; height: 50
+ color: "lightsteelblue"
+ border.color: "black"
+ radius: 15
+ Behavior on opacity { NumberAnimation {} }
}
+
Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 }
Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
@@ -130,33 +164,49 @@ Rectangle {
Flow {
id: layout4
- x: 260
- y: 250
- width: 150
+ x: 260; y: 250; width: 150
move: Transition {
- NumberAnimation {
- properties: "x,y"; easing.type: "OutBounce"
- }
+ NumberAnimation { properties: "x,y"; easing.type: "OutBounce" }
}
add: Transition {
- NumberAnimation {
- properties: "x,y"; easing.type: "OutBounce"
- }
+ NumberAnimation { properties: "x,y"; easing.type: "OutBounce" }
}
+
Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 }
- Rectangle { id: blueF1; color: "lightsteelblue"; width: 60; height: 50; border.color: "black"; radius: 15
- Behavior on opacity {NumberAnimation{}}
+
+ Rectangle {
+ id: blueF1
+ width: 60; height: 50
+ color: "lightsteelblue"
+ border.color: "black"
+ radius: 15
+ Behavior on opacity { NumberAnimation {} }
}
+
Rectangle { color: "green"; width: 30; height: 50; border.color: "black"; radius: 15 }
- Rectangle { id: blueF2; color: "lightsteelblue"; width: 60; height: 50; border.color: "black"; radius: 15
- Behavior on opacity {NumberAnimation{}}
+
+ Rectangle {
+ id: blueF2
+ width: 60; height: 50
+ color: "lightsteelblue"
+ border.color: "black"
+ radius: 15
+ Behavior on opacity { NumberAnimation {} }
}
+
Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 }
- Rectangle { id: blueF3; color: "lightsteelblue"; width: 40; height: 50; border.color: "black"; radius: 15
- Behavior on opacity {NumberAnimation{}}
+
+ Rectangle {
+ id: blueF3
+ width: 40; height: 50
+ color: "lightsteelblue"
+ border.color: "black"
+ radius: 15
+ Behavior on opacity { NumberAnimation {} }
}
+
Rectangle { color: "red"; width: 80; height: 50; border.color: "black"; radius: 15 }
}
diff --git a/examples/declarative/listmodel-threaded/timedisplay.qml b/examples/declarative/listmodel-threaded/timedisplay.qml
index 848192e..80ac9fa 100644
--- a/examples/declarative/listmodel-threaded/timedisplay.qml
+++ b/examples/declarative/listmodel-threaded/timedisplay.qml
@@ -22,7 +22,9 @@ ListView {
Timer {
id: timer
- interval: 2000; repeat: true; running: true; triggeredOnStart: true
+ interval: 2000; repeat: true
+ running: true
+ triggeredOnStart: true
onTriggered: {
var msg = {'action': 'appendCurrentTime', 'model': listModel};
diff --git a/examples/declarative/listview/dynamic.qml b/examples/declarative/listview/dynamic.qml
index 32483fa..236a9c5 100644
--- a/examples/declarative/listview/dynamic.qml
+++ b/examples/declarative/listview/dynamic.qml
@@ -3,11 +3,13 @@ import "content"
import "../scrollbar"
Rectangle {
+ id: container
width: 640; height: 480
color: "#343434"
ListModel {
id: fruitModel
+
ListElement {
name: "Apple"; cost: 2.45
attributes: [
@@ -51,12 +53,16 @@ Rectangle {
Component {
id: fruitDelegate
+
Item {
- width: parent.width; height: 55
+ width: container.width; height: 55
Column {
- id: moveButtons; x: 5; width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
- Image { source: "content/pics/go-up.png"
+ id: moveButtons
+ x: 5; width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
+
+ Image {
+ source: "content/pics/go-up.png"
MouseArea { anchors.fill: parent; onClicked: fruitModel.move(index,index-1,1) }
}
Image { source: "content/pics/go-down.png"
@@ -66,33 +72,63 @@ Rectangle {
Column {
anchors { right: itemButtons.left; verticalCenter: parent.verticalCenter; left: moveButtons.right; leftMargin: 10 }
+
Text {
- id: label; font.bold: true; text: name; elide: Text.ElideRight; font.pixelSize: 15
- width: parent.width; color: "White"
+ id: label
+ width: parent.width
+ color: "White"
+ font.bold: true; font.pixelSize: 15
+ text: name; elide: Text.ElideRight
}
Row {
spacing: 5
- Repeater { model: attributes; Component { Text { text: description; color: "White" } } }
+ Repeater {
+ model: attributes
+ Component {
+ Text { text: description; color: "White" }
+ }
+ }
}
}
Row {
id: itemButtons
- anchors.right: removeButton.left; anchors.rightMargin: 35; spacing: 10
- width: childrenRect.width; anchors.verticalCenter: parent.verticalCenter
- Image { source: "content/pics/list-add.png"
- ClickAutoRepeating { id: clickUp; anchors.fill: parent; onClicked: fruitModel.setProperty(index,"cost",cost+0.25) }
- scale: clickUp.isPressed ? 0.9 : 1; transformOrigin: Item.Center
+
+ anchors { right: removeButton.left; rightMargin: 35; verticalCenter: parent.verticalCenter }
+ width: childrenRect.width
+ spacing: 10
+
+ Image {
+ source: "content/pics/list-add.png"
+ scale: clickUp.isPressed ? 0.9 : 1
+ transformOrigin: Item.Center
+
+ ClickAutoRepeating {
+ id: clickUp
+ anchors.fill: parent
+ onClicked: fruitModel.setProperty(index, "cost", cost+0.25)
+ }
}
+
Text { id: costText; text: '$'+Number(cost).toFixed(2); font.pixelSize: 15; color: "White"; font.bold: true; }
- Image { source: "content/pics/list-remove.png"
- ClickAutoRepeating { id: clickDown; anchors.fill: parent; onClicked: fruitModel.setProperty(index,"cost",Math.max(0,cost-0.25)) }
- scale: clickDown.isPressed ? 0.9 : 1; transformOrigin: Item.Center
+
+ Image {
+ source: "content/pics/list-remove.png"
+ scale: clickDown.isPressed ? 0.9 : 1
+ transformOrigin: Item.Center
+
+ ClickAutoRepeating {
+ id: clickDown
+ anchors.fill: parent
+ onClicked: fruitModel.setProperty(index, "cost", Math.max(0,cost-0.25))
+ }
}
}
Image {
- id: removeButton; source: "content/pics/archive-remove.png"
+ id: removeButton
anchors { verticalCenter: parent.verticalCenter; right: parent.right; rightMargin: 10 }
+ source: "content/pics/archive-remove.png"
+
MouseArea { anchors.fill:parent; onClicked: fruitModel.remove(index) }
}
}
@@ -100,60 +136,75 @@ Rectangle {
ListView {
id: view
- model: fruitModel; delegate: fruitDelegate
anchors { top: parent.top; left: parent.left; right: parent.right; bottom: buttons.top }
+ model: fruitModel
+ delegate: fruitDelegate
}
// Attach scrollbar to the right edge of the view.
ScrollBar {
id: verticalScrollBar
+
+ width: 8; height: view.height; anchors.right: view.right
opacity: 0
orientation: "Vertical"
position: view.visibleArea.yPosition
pageSize: view.visibleArea.heightRatio
- width: 8
- height: view.height
- anchors.right: view.right
+
// Only show the scrollbar when the view is moving.
- states: [
- State {
- name: "ShowBars"; when: view.moving
- PropertyChanges { target: verticalScrollBar; opacity: 1 }
- }
- ]
- transitions: [ Transition { NumberAnimation { properties: "opacity"; duration: 400 } } ]
+ states: State {
+ name: "ShowBars"; when: view.moving
+ PropertyChanges { target: verticalScrollBar; opacity: 1 }
+ }
+ transitions: Transition {
+ NumberAnimation { properties: "opacity"; duration: 400 }
+ }
}
Row {
- x: 8; width: childrenRect.width
- height: childrenRect.height
+ id: buttons
+
+ x: 8; width: childrenRect.width; height: childrenRect.height
anchors { bottom: parent.bottom; bottomMargin: 8 }
spacing: 8
- id: buttons
- Image { source: "content/pics/archive-insert.png"
- MouseArea { anchors.fill: parent;
+
+ Image {
+ source: "content/pics/archive-insert.png"
+
+ MouseArea {
+ anchors.fill: parent
onClicked: {
fruitModel.append({
- "name":"Pizza Margarita",
- "cost":5.95,
- "attributes":[{"description": "Cheese"},{"description": "Tomato"}]
- })
+ "name": "Pizza Margarita",
+ "cost": 5.95,
+ "attributes": [{"description": "Cheese"},{"description": "Tomato"}]
+ })
}
}
}
- Image { source: "content/pics/archive-insert.png"
- MouseArea { anchors.fill: parent;
+
+ Image {
+ source: "content/pics/archive-insert.png"
+
+ MouseArea {
+ anchors.fill: parent;
onClicked: {
- fruitModel.insert(0,{
- "name":"Pizza Supreme",
- "cost":9.95,
- "attributes":[{"description": "Cheese"},{"description": "Tomato"},{"description": "The Works"}]
- })
+ fruitModel.insert(0, {
+ "name": "Pizza Supreme",
+ "cost": 9.95,
+ "attributes": [{"description": "Cheese"},{"description": "Tomato"},{"description": "The Works"}]
+ })
}
}
}
- Image { source: "content/pics/archive-remove.png"
- MouseArea { anchors.fill: parent; onClicked: fruitModel.clear() }
+
+ Image {
+ source: "content/pics/archive-remove.png"
+
+ MouseArea {
+ anchors.fill: parent
+ onClicked: fruitModel.clear()
+ }
}
}
}
diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml
index 2b54dd8..50ba2f7 100644
--- a/examples/declarative/listview/highlight.qml
+++ b/examples/declarative/listview/highlight.qml
@@ -1,12 +1,13 @@
import Qt 4.7
Rectangle {
- width: 400; height: 300; color: "white"
+ width: 400; height: 300
// MyPets model is defined in dummydata/MyPetsModel.qml
// The viewer automatically loads files in dummydata/* to assist
// development without a real data source.
// This one contains my pets.
+
// Define a delegate component. A component will be
// instantiated for each visible item in the list.
Component {
@@ -21,20 +22,14 @@ Rectangle {
}
// Use the ListView.isCurrentItem attached property to
// indent the item if it is the current item.
- states: [
- State {
- name: "Current"
- when: wrapper.ListView.isCurrentItem
- PropertyChanges { target: wrapper; x: 10 }
- }
- ]
- transitions: [
- Transition {
- NumberAnimation {
- properties: "x"; duration: 200
- }
- }
- ]
+ states: State {
+ name: "Current"
+ when: wrapper.ListView.isCurrentItem
+ PropertyChanges { target: wrapper; x: 10 }
+ }
+ transitions: Transition {
+ NumberAnimation { properties: "x"; duration: 200 }
+ }
}
}
// Specify a highlight with custom movement. Note that highlightFollowsCurrentItem
@@ -43,14 +38,17 @@ Rectangle {
Component {
id: petHighlight
Rectangle {
- width: 200; height: 50; color: "#FFFF88"
+ width: 200; height: 50
+ color: "#FFFF88"
SpringFollow on y { to: list1.currentItem.y; spring: 3; damping: 0.1 }
}
}
+
ListView {
id: list1
width: 200; height: parent.height
- model: MyPetsModel; delegate: petDelegate
+ model: MyPetsModel
+ delegate: petDelegate
highlight: petHighlight; highlightFollowsCurrentItem: false
focus: true
}
diff --git a/examples/declarative/listview/itemlist.qml b/examples/declarative/listview/itemlist.qml
index 2f4aa31..e387f28 100644
--- a/examples/declarative/listview/itemlist.qml
+++ b/examples/declarative/listview/itemlist.qml
@@ -10,23 +10,27 @@ Rectangle {
VisualItemModel {
id: itemModel
+
Rectangle {
- height: view.height; width: view.width; color: "#FFFEF0"
+ width: view.width; height: view.height
+ color: "#FFFEF0"
Text { text: "Page 1"; font.bold: true; anchors.centerIn: parent }
}
Rectangle {
- height: view.height; width: view.width; color: "#F0FFF7"
+ width: view.width; height: view.height
+ color: "#F0FFF7"
Text { text: "Page 2"; font.bold: true; anchors.centerIn: parent }
}
Rectangle {
- height: view.height; width: view.width; color: "#F4F0FF"
+ width: view.width; height: view.height
+ color: "#F4F0FF"
Text { text: "Page 3"; font.bold: true; anchors.centerIn: parent }
}
}
ListView {
id: view
- anchors.fill: parent; anchors.bottomMargin: 30
+ anchors { fill: parent; bottomMargin: 30 }
model: itemModel
preferredHighlightBegin: 0; preferredHighlightEnd: 0
highlightRangeMode: "StrictlyEnforceRange"
@@ -35,22 +39,27 @@ Rectangle {
}
Rectangle {
+ width: 240; height: 30
+ anchors { top: view.bottom; bottom: parent.bottom }
color: "gray"
- anchors.top: view.bottom
- anchors.bottom: parent.bottom
- height: 30
- width: 240
Row {
anchors.centerIn: parent
spacing: 20
+
Repeater {
model: itemModel.count
+
Rectangle {
width: 5; height: 5
radius: 3
- MouseArea { width: 20; height: 20; anchors.centerIn: parent; onClicked: view.currentIndex = index }
color: view.currentIndex == index ? "blue" : "white"
+
+ MouseArea {
+ width: 20; height: 20
+ anchors.centerIn: parent
+ onClicked: view.currentIndex = index
+ }
}
}
}
diff --git a/examples/declarative/listview/listview-example.qml b/examples/declarative/listview/listview-example.qml
index d648b60..6feedf6 100644
--- a/examples/declarative/listview/listview-example.qml
+++ b/examples/declarative/listview/listview-example.qml
@@ -1,12 +1,13 @@
import Qt 4.7
Rectangle {
- width: 600; height: 300; color: "white"
+ width: 600; height: 300
// MyPets model is defined in dummydata/MyPetsModel.qml
// The viewer automatically loads files in dummydata/* to assist
// development without a real data source.
// This one contains my pets.
+
// Define a delegate component. A component will be
// instantiated for each visible item in the list.
Component {
@@ -31,46 +32,61 @@ Rectangle {
// Show the model in three lists, with different highlight ranges.
// preferredHighlightBegin and preferredHighlightEnd set the
// range in which to attempt to maintain the highlight.
+ //
// Note that the second and third ListView
// set their currentIndex to be the same as the first, and that
// the first ListView is given keyboard focus.
+ //
// The default mode allows the currentItem to move freely
// within the visible area. If it would move outside the visible
// area, the view is scrolled to keep it visible.
+ //
// The second list sets a highlight range which attempts to keep the
// current item within the the bounds of the range, however
// items will not scroll beyond the beginning or end of the view,
// forcing the highlight to move outside the range at the ends.
+ //
// The third list sets the highlightRangeMode to StrictlyEnforceRange
// and sets a range smaller than the height of an item. This
// forces the current item to change when the view is flicked,
// since the highlight is unable to move.
+ //
// Note that the first ListView sets its currentIndex to be equal to
// the third ListView's currentIndex. By flicking List3 with
// the mouse, the current index of List1 will be changed.
+
ListView {
id: list1
width: 200; height: parent.height
- model: MyPetsModel; delegate: petDelegate
- highlight: petHighlight; currentIndex: list3.currentIndex
+ model: MyPetsModel
+ delegate: petDelegate
+
+ highlight: petHighlight
+ currentIndex: list3.currentIndex
focus: true
}
+
ListView {
id: list2
x: 200; width: 200; height: parent.height
- model: MyPetsModel; delegate: petDelegate; highlight: petHighlight
- preferredHighlightBegin: 80
- preferredHighlightEnd: 220
- highlightRangeMode: "ApplyRange"
+ model: MyPetsModel
+ delegate: petDelegate
+
+ highlight: petHighlight
currentIndex: list1.currentIndex
+ preferredHighlightBegin: 80; preferredHighlightEnd: 220
+ highlightRangeMode: "ApplyRange"
}
+
ListView {
id: list3
x: 400; width: 200; height: parent.height
- model: MyPetsModel; delegate: petDelegate; highlight: petHighlight
+ model: MyPetsModel
+ delegate: petDelegate
+
+ highlight: Rectangle { color: "lightsteelblue" }
currentIndex: list1.currentIndex
- preferredHighlightBegin: 125
- preferredHighlightEnd: 125
+ preferredHighlightBegin: 125; preferredHighlightEnd: 125
highlightRangeMode: "StrictlyEnforceRange"
flickDeceleration: 1000
}
diff --git a/examples/declarative/listview/recipes.qml b/examples/declarative/listview/recipes.qml
index 66c4109..990e272 100644
--- a/examples/declarative/listview/recipes.qml
+++ b/examples/declarative/listview/recipes.qml
@@ -5,16 +5,17 @@ import "content"
Rectangle {
id: page
- width: 400; height: 240; color: "black"
+ width: 400; height: 240
+ color: "black"
// Delegate for the recipes. This delegate has two modes:
// 1. the list mode (default), which just shows the picture and title of the recipe.
// 2. the details mode, which also shows the ingredients and method.
Component {
id: recipeDelegate
+
Item {
id: wrapper
- width: list.width
// Create a property to contain the visibility of the details.
// We can bind multiple element's opacity to this one property,
@@ -22,11 +23,15 @@ Rectangle {
// want to fade.
property real detailsOpacity : 0
+ width: list.width
+
// A simple rounded rectangle for the background
Rectangle {
id: background
x: 1; y: 2; width: parent.width - 2; height: parent.height - 4
- color: "#FEFFEE"; border.color: "#FFBE4F"; radius: 5
+ color: "#FEFFEE"
+ border.color: "#FFBE4F"
+ radius: 5
}
// This mouse region covers the entire delegate.
@@ -52,13 +57,17 @@ Rectangle {
}
Column {
- height: recipePic.height; width: background.width-recipePic.width-20
+ width: background.width-recipePic.width-20; height: recipePic.height;
spacing: 5
+
Text { id: name; text: title; font.bold: true; font.pointSize: 16 }
+
Text {
- text: "Ingredients"; font.pointSize: 12; font.bold: true
+ text: "Ingredients"
+ font.pointSize: 12; font.bold: true
opacity: wrapper.detailsOpacity
}
+
Text {
text: ingredients
wrapMode: Text.WordWrap
@@ -71,52 +80,61 @@ Rectangle {
Item {
id: details
x: 10; width: parent.width-20
- anchors.top: topLayout.bottom; anchors.topMargin: 10
- anchors.bottom: parent.bottom; anchors.bottomMargin: 10
+ anchors { top: topLayout.bottom; topMargin: 10; bottom: parent.bottom; bottomMargin: 10 }
opacity: wrapper.detailsOpacity
Text {
id: methodTitle
- text: "Method"; font.pointSize: 12; font.bold: true
anchors.top: parent.top
+ text: "Method"
+ font.pointSize: 12; font.bold: true
}
+
Flickable {
id: flick
- anchors.top: methodTitle.bottom; anchors.bottom: parent.bottom
- width: parent.width; contentHeight: methodText.height; clip: true
+ width: parent.width
+ anchors { top: methodTitle.bottom; bottom: parent.bottom }
+ contentHeight: methodText.height; clip: true
+
Text { id: methodText; text: method; wrapMode: Text.WordWrap; width: details.width }
}
+
Image {
- anchors.right: flick.right; anchors.top: flick.top
- source: "content/pics/moreUp.png"; opacity: flick.atYBeginning ? 0 : 1
+ anchors { right: flick.right; top: flick.top }
+ source: "content/pics/moreUp.png"
+ opacity: flick.atYBeginning ? 0 : 1
}
+
Image {
- anchors.right: flick.right; anchors.bottom: flick.bottom
- source: "content/pics/moreDown.png"; opacity: flick.atYEnd ? 0 : 1
+ anchors { right: flick.right; bottom: flick.bottom }
+ source: "content/pics/moreDown.png"
+ opacity: flick.atYEnd ? 0 : 1
}
}
// A button to close the detailed view, i.e. set the state back to default ('').
MediaButton {
- anchors.right: background.right; anchors.rightMargin: 5
- y: 10; opacity: wrapper.detailsOpacity
- text: "Close"; onClicked: wrapper.state = '';
+ y: 10; anchors { right: background.right; rightMargin: 5 }
+ opacity: wrapper.detailsOpacity
+ text: "Close"
+
+ onClicked: wrapper.state = '';
}
- // Make the default height equal the hight of the picture, plus margin.
+ // Set the default height to the height of the picture, plus margin.
height: 68
states: State {
name: "Details"
+
PropertyChanges { target: background; color: "white" }
- // Make the picture bigger
- PropertyChanges { target: recipePic; width: 128; height: 128 }
- // Make details visible
- PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 }
- // Make the detailed view fill the entire list area
- PropertyChanges { target: wrapper; height: list.height }
+ PropertyChanges { target: recipePic; width: 128; height: 128 } // Make picture bigger
+ PropertyChanges { target: wrapper; detailsOpacity: 1; x: 0 } // Make details visible
+ PropertyChanges { target: wrapper; height: list.height } // Fill the entire list area with the detailed view
+
// Move the list so that this item is at the top.
PropertyChanges { target: wrapper.ListView.view; explicit: true; contentY: wrapper.y }
+
// Disallow flicking while we're in detailed view
PropertyChanges { target: wrapper.ListView.view; interactive: false }
}
@@ -125,9 +143,7 @@ Rectangle {
// Make the state changes smooth
ParallelAnimation {
ColorAnimation { property: "color"; duration: 500 }
- NumberAnimation {
- duration: 300; properties: "detailsOpacity,x,contentY,height,width"
- }
+ NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
}
}
}
@@ -136,7 +152,9 @@ Rectangle {
// The actual list
ListView {
id: list
- model: Recipes; delegate: recipeDelegate
- anchors.fill: parent; clip: true
+ anchors.fill: parent
+ clip: true
+ model: Recipes
+ delegate: recipeDelegate
}
}
diff --git a/examples/declarative/listview/sections.qml b/examples/declarative/listview/sections.qml
index 7c132a4..0a81f63 100644
--- a/examples/declarative/listview/sections.qml
+++ b/examples/declarative/listview/sections.qml
@@ -4,7 +4,7 @@ import Qt 4.7
Rectangle {
width: 200
height: 240
- color: "white"
+
// MyPets model is defined in dummydata/MyPetsModel.qml
// The viewer automatically loads files in dummydata/* to assist
// development without a real data source.
@@ -13,15 +13,16 @@ Rectangle {
// Define a delegate component that includes a separator for sections.
Component {
id: petDelegate
+
Item {
id: wrapper
width: 200
- // My height is the combined height of the description and the section separator
- height: desc.height
+ height: desc.height // height is the combined height of the description and the section separator
+
Item {
id: desc
- x: 5
- height: layout.height + 4
+ x: 5; height: layout.height + 4
+
Column {
id: layout
y: 2
@@ -32,22 +33,24 @@ Rectangle {
}
}
}
+
// Define a highlight component. Just one of these will be instantiated
// by each ListView and placed behind the current item.
Component {
id: petHighlight
- Rectangle {
- color: "#FFFF88"
- }
+ Rectangle { color: "#FFFF88" }
}
+
// The list
ListView {
id: myList
- width: 200
- height: parent.height
+
+ width: 200; height: parent.height
model: MyPetsModel
delegate: petDelegate
highlight: petHighlight
+ focus: true
+
// The sectionExpression is simply the size of the pet.
// We use this to determine which section we are in above.
section.property: "size"
@@ -57,11 +60,12 @@ Rectangle {
width: 200
height: 20
Text {
- text: section; font.bold: true
- x: 2; height: parent.height; verticalAlignment: 'AlignVCenter'
+ x: 2; height: parent.height
+ verticalAlignment: 'AlignVCenter'
+ text: section
+ font.bold: true
}
}
- focus: true
}
}
//! [0]
diff --git a/examples/declarative/mousearea/mouse.qml b/examples/declarative/mousearea/mouse.qml
index efbfb53..67302a8 100644
--- a/examples/declarative/mousearea/mouse.qml
+++ b/examples/declarative/mousearea/mouse.qml
@@ -1,40 +1,47 @@
import Qt 4.7
Rectangle {
- color: "white"
width: 200; height: 200
+
Rectangle {
width: 50; height: 50
color: "red"
+
Text { text: "Click"; anchors.centerIn: parent }
+
MouseArea {
+ anchors.fill: parent
hoverEnabled: true
acceptedButtons: Qt.LeftButton | Qt.RightButton
- onPressed: { console.log('press (x: ' + mouse.x + ' y: ' + mouse.y + ' button: ' + (mouse.button == Qt.RightButton ? 'right' : 'left') + ' Shift: ' + (mouse.modifiers & Qt.ShiftModifier ? 'true' : 'false') + ')') }
- onReleased: { console.log('release (x: ' + mouse.x + ' y: ' + mouse.y + ' isClick: ' + mouse.isClick + ' wasHeld: ' + mouse.wasHeld + ')') }
- onClicked: { console.log('click (x: ' + mouse.x + ' y: ' + mouse.y + ' wasHeld: ' + mouse.wasHeld + ')') }
- onDoubleClicked: { console.log('double click (x: ' + mouse.x + ' y: ' + mouse.y + ')') }
- onPressAndHold: { console.log('press and hold') }
- onEntered: { console.log('entered ' + pressed) }
- onExited: { console.log('exited ' + pressed) }
- anchors.fill: parent
+
+ onPressed: console.log('press (x: ' + mouse.x + ' y: ' + mouse.y + ' button: ' + (mouse.button == Qt.RightButton ? 'right' : 'left') + ' Shift: ' + (mouse.modifiers & Qt.ShiftModifier ? 'true' : 'false') + ')')
+ onReleased: console.log('release (x: ' + mouse.x + ' y: ' + mouse.y + ' isClick: ' + mouse.isClick + ' wasHeld: ' + mouse.wasHeld + ')')
+ onClicked: console.log('click (x: ' + mouse.x + ' y: ' + mouse.y + ' wasHeld: ' + mouse.wasHeld + ')')
+ onDoubleClicked: console.log('double click (x: ' + mouse.x + ' y: ' + mouse.y + ')')
+ onPressAndHold: console.log('press and hold')
+ onEntered: console.log('entered ' + pressed)
+ onExited: console.log('exited ' + pressed)
}
}
+
Rectangle {
y: 100; width: 50; height: 50
color: "blue"
+
Text { text: "Drag"; anchors.centerIn: parent }
+
MouseArea {
+ anchors.fill: parent
drag.target: parent
drag.axis: "XAxis"
drag.minimumX: 0
drag.maximumX: 150
- onPressed: { console.log('press') }
- onReleased: { console.log('release (isClick: ' + mouse.isClick + ') (wasHeld: ' + mouse.wasHeld + ')') }
- onClicked: { console.log('click' + '(wasHeld: ' + mouse.wasHeld + ')') }
- onDoubleClicked: { console.log('double click') }
- onPressAndHold: { console.log('press and hold') }
- anchors.fill: parent
+
+ onPressed: console.log('press')
+ onReleased: console.log('release (isClick: ' + mouse.isClick + ') (wasHeld: ' + mouse.wasHeld + ')')
+ onClicked: console.log('click' + '(wasHeld: ' + mouse.wasHeld + ')')
+ onDoubleClicked: console.log('double click')
+ onPressAndHold: console.log('press and hold')
}
}
}
diff --git a/examples/declarative/progressbar/content/ProgressBar.qml b/examples/declarative/progressbar/content/ProgressBar.qml
index d82d89d..bc36df5 100644
--- a/examples/declarative/progressbar/content/ProgressBar.qml
+++ b/examples/declarative/progressbar/content/ProgressBar.qml
@@ -2,36 +2,42 @@ import Qt 4.7
Item {
id: progressbar
- width: 250; height: 23; clip: true
property int minimum: 0
property int maximum: 100
property int value: 0
- property alias color: g1.color
- property alias secondColor: g2.color
+ 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; border.top: 4; border.right: 4; border.bottom: 4
+ border { left: 4; top: 4; right: 4; bottom: 4 }
}
Rectangle {
+ id: highlight
+
property int widthDest: ((progressbar.width * (value - minimum)) / (maximum - minimum) - 6)
- id: highlight; radius: 1
- anchors.left: parent.left; anchors.top: parent.top; anchors.bottom: parent.bottom
- anchors.leftMargin: 3; anchors.topMargin: 3; anchors.bottomMargin: 3
+
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: g1; position: 0.0 }
- GradientStop { id: g2; position: 1.0 }
+ GradientStop { id: gradient1; position: 0.0 }
+ GradientStop { id: gradient2; position: 1.0 }
}
+
}
Text {
- anchors.right: highlight.right; anchors.rightMargin: 6
- color: "white"; font.bold: true
- anchors.verticalCenter: parent.verticalCenter
+ 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/progressbar/progressbars.qml b/examples/declarative/progressbar/progressbars.qml
index e10c9f0..55fd682 100644
--- a/examples/declarative/progressbar/progressbars.qml
+++ b/examples/declarative/progressbar/progressbars.qml
@@ -3,17 +3,26 @@ import "content"
Rectangle {
id: main
- width: 600; height: 405; color: "#edecec"
+
+ width: 600; height: 405
+ color: "#edecec"
Flickable {
- anchors.fill: parent; contentHeight: column.height + 20
+ anchors.fill: parent
+ contentHeight: column.height + 20
+
Column {
- id: column; x: 10; y: 10; spacing: 10
+ 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/proxywidgets/proxywidgets.qml b/examples/declarative/proxywidgets/proxywidgets.qml
index 6fa0c40..46dcf99 100644
--- a/examples/declarative/proxywidgets/proxywidgets.qml
+++ b/examples/declarative/proxywidgets/proxywidgets.qml
@@ -3,45 +3,62 @@ import "ProxyWidgets" 1.0
Rectangle {
id: window
- width: 640; height: 480; color: palette.window
property int margin: 30
+ width: 640; height: 480
+ color: palette.window
+
SystemPalette { id: palette }
MyPushButton {
- id: button1; x: margin; y: margin; text: "Right"; onClicked: window.state = "right"
+ id: button1
+ x: margin; y: margin
+ text: "Right"
transformOriginPoint: Qt.point(width / 2, height / 2)
+
+ onClicked: window.state = "right"
}
MyPushButton {
- id: button2; x: margin; y: margin + 30; text: "Bottom"; onClicked: window.state = "bottom"
+ id: button2
+ x: margin; y: margin + 30
+ text: "Bottom"
transformOriginPoint: Qt.point(width / 2, height / 2)
+
+ onClicked: window.state = "bottom"
}
MyPushButton {
- id: button3; x: margin; y: margin + 60; text: "Quit"; onClicked: Qt.quit()
+ id: button3
+ x: margin; y: margin + 60
+ text: "Quit"
transformOriginPoint: Qt.point(width / 2, height / 2)
+
+ onClicked: Qt.quit()
}
states: [
- State {
- name: "right"
- PropertyChanges { target: button1; x: window.width - width - margin; text: "Left"; onClicked: window.state = "" }
- PropertyChanges { target: button2; x: window.width - width - margin }
- PropertyChanges { target: button3; x: window.width - width - margin }
- PropertyChanges { target: window; color: Qt.darker(palette.window) }
- },
- State {
- name: "bottom"
- PropertyChanges { target: button1; y: window.height - height - margin; rotation: 180 }
- PropertyChanges {
- target: button2; x: button1.x + button1.width + 10; y: window.height - height - margin; rotation: 180
- text: "Top"; onClicked: window.state = ""
+ State {
+ name: "right"
+ PropertyChanges { target: button1; x: window.width - width - margin; text: "Left"; onClicked: window.state = "" }
+ PropertyChanges { target: button2; x: window.width - width - margin }
+ PropertyChanges { target: button3; x: window.width - width - margin }
+ PropertyChanges { target: window; color: Qt.darker(palette.window) }
+ },
+ State {
+ name: "bottom"
+ PropertyChanges { target: button1; y: window.height - height - margin; rotation: 180 }
+ PropertyChanges {
+ target: button2
+ x: button1.x + button1.width + 10; y: window.height - height - margin
+ rotation: 180
+ text: "Top"
+ onClicked: window.state = ""
+ }
+ PropertyChanges { target: button3; x: button2.x + button2.width + 10; y: window.height - height - margin; rotation: 180 }
+ PropertyChanges { target: window; color: Qt.lighter(palette.window) }
}
- PropertyChanges { target: button3; x: button2.x + button2.width + 10; y: window.height - height - margin; rotation: 180 }
- PropertyChanges { target: window; color: Qt.lighter(palette.window) }
- }
]
transitions: Transition {
diff --git a/examples/declarative/scrollbar/ScrollBar.qml b/examples/declarative/scrollbar/ScrollBar.qml
index 2186b35..5433156 100644
--- a/examples/declarative/scrollbar/ScrollBar.qml
+++ b/examples/declarative/scrollbar/ScrollBar.qml
@@ -2,6 +2,7 @@ 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%
@@ -14,18 +15,19 @@ Item {
// A light, semi-transparent background
Rectangle {
id: background
- radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
- color: "white"; opacity: 0.3
anchors.fill: parent
+ radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
+ color: "white"
+ opacity: 0.3
}
// Size the bar to the required size, depending upon the orientation.
Rectangle {
- opacity: 0.7
- color: "black"
- radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
x: orientation == 'Vertical' ? 1 : (scrollBar.position * (scrollBar.width-2) + 1)
y: orientation == 'Vertical' ? (scrollBar.position * (scrollBar.height-2) + 1) : 1
width: orientation == 'Vertical' ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2))
height: orientation == 'Vertical' ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2)
+ radius: orientation == 'Vertical' ? (width/2 - 1) : (height/2 - 1)
+ color: "black"
+ opacity: 0.7
}
}
diff --git a/examples/declarative/scrollbar/display.qml b/examples/declarative/scrollbar/display.qml
index 421cb7f..cb1da16 100644
--- a/examples/declarative/scrollbar/display.qml
+++ b/examples/declarative/scrollbar/display.qml
@@ -3,56 +3,52 @@ 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
}
- contentWidth: picture.width
- contentHeight: picture.height
+
// Only show the scrollbars when the view is moving.
- states: [
- State {
- name: "ShowBars"
- when: view.moving
- PropertyChanges { target: verticalScrollBar; opacity: 1 }
- PropertyChanges { target: horizontalScrollBar; opacity: 1 }
- }
- ]
- transitions: [
- Transition {
- from: "*"
- to: "*"
- NumberAnimation {
- properties: "opacity"
- duration: 400
- }
- }
- ]
+ states: State {
+ name: "ShowBars"
+ when: view.moving
+ 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: "Vertical"
position: view.visibleArea.yPosition
pageSize: view.visibleArea.heightRatio
- width: 12
- height: view.height-12
- anchors.right: view.right
}
+
ScrollBar {
id: horizontalScrollBar
+ width: view.width-12; height: 12
+ anchors.bottom: view.bottom
opacity: 0
orientation: "Horizontal"
position: view.visibleArea.xPosition
pageSize: view.visibleArea.widthRatio
- height: 12
- width: view.width-12
- anchors.bottom: view.bottom
}
}
diff --git a/examples/declarative/searchbox/SearchBox.qml b/examples/declarative/searchbox/SearchBox.qml
index be85023..aae7ee9 100644
--- a/examples/declarative/searchbox/SearchBox.qml
+++ b/examples/declarative/searchbox/SearchBox.qml
@@ -18,27 +18,32 @@ FocusScope {
}
Text {
- id: typeSomething; anchors.fill: parent; anchors.leftMargin: 8
+ id: typeSomething
+ anchors.fill: parent; anchors.leftMargin: 8
verticalAlignment: Text.AlignVCenter
- text: "Type something..."; color: "gray"; font.italic: true
+ text: "Type something..."
+ color: "gray"
+ font.italic: true
}
MouseArea { anchors.fill: parent; onClicked: focusScope.focus = true }
TextInput {
id: textInput
- anchors.left: parent.left; anchors.leftMargin: 8
- anchors.verticalCenter: parent.verticalCenter
- focus: if (1) true
+ anchors { left: parent.left; leftMargin: 8; verticalCenter: parent.verticalCenter }
+ focus: true
}
Image {
id: clear
- anchors.right: parent.right; anchors.rightMargin: 8
- anchors.verticalCenter: parent.verticalCenter
- source: "images/edit-clear-locationbar-rtl.png"; opacity: 0
+ 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 } }
+ MouseArea {
+ anchors.fill: parent
+ onClicked: { textInput.text = ''; focusScope.focus = true }
+ }
}
states: State {
diff --git a/examples/declarative/searchbox/main.qml b/examples/declarative/searchbox/main.qml
index eb95a23..9f73473 100644
--- a/examples/declarative/searchbox/main.qml
+++ b/examples/declarative/searchbox/main.qml
@@ -1,10 +1,12 @@
import Qt 4.7
Rectangle {
- width: 500; height: 250; color: "#edecec"
+ width: 500; height: 250
+ color: "#edecec"
Column {
- anchors.horizontalCenter: parent.horizontalCenter; anchors.verticalCenter: parent.verticalCenter; spacing: 10
+ 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 }
diff --git a/examples/declarative/slideswitch/content/Switch.qml b/examples/declarative/slideswitch/content/Switch.qml
index e16198d..a8fa6ef 100644
--- a/examples/declarative/slideswitch/content/Switch.qml
+++ b/examples/declarative/slideswitch/content/Switch.qml
@@ -31,14 +31,17 @@ Item {
//![4]
Image {
- id: background; source: "background.svg"
+ id: background
+ source: "background.svg"
MouseArea { anchors.fill: parent; onClicked: toggle() }
}
//![4]
//![5]
Image {
- id: knob; source: "knob.svg"; x: 1; y: 2
+ id: knob
+ x: 1; y: 2
+ source: "knob.svg"
MouseArea {
anchors.fill: parent
diff --git a/examples/declarative/sql/hello.qml b/examples/declarative/sql/hello.qml
index a9f77ca..8b021b7 100644
--- a/examples/declarative/sql/hello.qml
+++ b/examples/declarative/sql/hello.qml
@@ -1,6 +1,8 @@
import Qt 4.7
Text {
+ text: "?"
+
function findGreetings() {
var db = openDatabaseSync("QDeclarativeExampleDB", "1.0", "The Example QML SQL!", 1000000);
@@ -24,7 +26,6 @@ Text {
)
}
- text: "?"
Component.onCompleted: findGreetings()
}
diff --git a/examples/declarative/states/states.qml b/examples/declarative/states/states.qml
index c35cd63..4429e78 100644
--- a/examples/declarative/states/states.qml
+++ b/examples/declarative/states/states.qml
@@ -2,49 +2,60 @@ import Qt 4.7
Rectangle {
id: page
- width: 640; height: 480; color: "#343434"
+ width: 640; height: 480
+ color: "#343434"
+
+ Image {
+ id: userIcon
+ x: topLeftRect.x; y: topLeftRect.y
+ source: "user.png"
+ }
- // A target region. Clicking in here sets the state to the default state
Rectangle {
- id: initialPosition
+ id: topLeftRect
+
anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
- width: 64; height: 64; radius: 6
- color: "Transparent"; border.color: "Gray"
+ width: 64; height: 64
+ color: "Transparent"; border.color: "Gray"; radius: 6
+
+ // Clicking in here sets the state to the default state, returning the image to
+ // its initial position
MouseArea { anchors.fill: parent; onClicked: page.state = '' }
}
- // Another target region. Clicking in here sets the state to 'Position1'
Rectangle {
- id: position1
+ id: middleRightRect
+
anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
- width: 64; height: 64; radius: 6
- color: "Transparent"; border.color: "Gray"
- MouseArea { anchors.fill: parent; onClicked: page.state = 'Position1' }
+ width: 64; height: 64
+ color: "Transparent"; border.color: "Gray"; radius: 6
+
+ // Clicking in here sets the state to 'middleRight'
+ MouseArea { anchors.fill: parent; onClicked: page.state = 'middleRight' }
}
- // Another target region. Clicking in here sets the state to 'Position2'
Rectangle {
- id: position2
+ id: bottomLeftRect
+
anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
- width: 64; height: 64; radius: 6
- color: "Transparent"; border.color: "Gray"
- MouseArea { anchors.fill: parent; onClicked: page.state = 'Position2' }
- }
+ width: 64; height: 64
+ color: "Transparent"; border.color: "Gray"; radius: 6
- // The image which will be moved when my state changes
- Image { id: user; source: "user.png"; x: initialPosition.x; y: initialPosition.y }
+ // Clicking in here sets the state to 'bottomLeft'
+ MouseArea { anchors.fill: parent; onClicked: page.state = 'bottomLeft' }
+ }
states: [
- // In state 'Position1', change the 'user' item position to rect2's position.
+ // In state 'middleRight', move the image to middleRightRect
State {
- name: "Position1"
- PropertyChanges { target: user; x: position1.x; y: position1.y }
+ name: "middleRight"
+ PropertyChanges { target: userIcon; x: middleRightRect.x; y: middleRightRect.y }
},
- // In state 'Position2', change the 'user' item position to rect3's position.
+ // In state 'bottomLeft', move the image to bottomLeftRect
State {
- name: "Position2"
- PropertyChanges { target: user; x: position2.x; y: position2.y }
+ name: "bottomLeft"
+ PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y }
}
]
}
diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml
index 3cb5543..d1b1dd6 100644
--- a/examples/declarative/states/transitions.qml
+++ b/examples/declarative/states/transitions.qml
@@ -1,67 +1,87 @@
import Qt 4.7
+/*
+ This is exactly the same as states.qml, except that we have appended
+ a set of transitions to apply animations when the item changes
+ between each state.
+*/
+
Rectangle {
id: page
- width: 640; height: 480; color: "#343434"
+ width: 640; height: 480
+ color: "#343434"
+
+ Image {
+ id: userIcon
+ x: topLeftRect.x; y: topLeftRect.y
+ source: "user.png"
+ }
- // A target region. Clicking in here sets the state to the default state
Rectangle {
- id: initialPosition
+ id: topLeftRect
+
anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
- width: 64; height: 64; radius: 6
- color: "Transparent"; border.color: "Gray"
+ width: 64; height: 64
+ color: "Transparent"; border.color: "Gray"; radius: 6
+
+ // Clicking in here sets the state to the default state, returning the image to
+ // its initial position
MouseArea { anchors.fill: parent; onClicked: page.state = '' }
}
- // Another target region. Clicking in here sets the state to 'Position1'
Rectangle {
- id: position1
+ id: middleRightRect
+
anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
- width: 64; height: 64; radius: 6
- color: "Transparent"; border.color: "Gray"
- MouseArea { anchors.fill: parent; onClicked: page.state = 'Position1' }
+ width: 64; height: 64
+ color: "Transparent"; border.color: "Gray"; radius: 6
+
+ // Clicking in here sets the state to 'middleRight'
+ MouseArea { anchors.fill: parent; onClicked: page.state = 'middleRight' }
}
- // Another target region. Clicking in here sets the state to 'Position2'
Rectangle {
- id: position2
+ id: bottomLeftRect
+
anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
- width: 64; height: 64; radius: 6
- color: "Transparent"; border.color: "Gray"
- MouseArea { anchors.fill: parent; onClicked: page.state = 'Position2' }
- }
+ width: 64; height: 64
+ color: "Transparent"; border.color: "Gray"; radius: 6
- // The image which will be moved when my state changes
- Image { id: user; source: "user.png"; x: initialPosition.x; y: initialPosition.y }
+ // Clicking in here sets the state to 'bottomLeft'
+ MouseArea { anchors.fill: parent; onClicked: page.state = 'bottomLeft' }
+ }
states: [
- // In state 'Position1', change the 'user' item position to rect2's position.
+ // In state 'middleRight', move the image to middleRightRect
State {
- name: "Position1"
- PropertyChanges { target: user; x: position1.x; y: position1.y }
+ name: "middleRight"
+ PropertyChanges { target: userIcon; x: middleRightRect.x; y: middleRightRect.y }
},
- // In state 'Position2', change the 'user' item position to rect3's position.
+ // In state 'bottomLeft', move the image to bottomLeftRect
State {
- name: "Position2"
- PropertyChanges { target: user; x: position2.x; y: position2.y }
+ name: "bottomLeft"
+ PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y }
}
]
- // transitions define how the properties change.
+ // Transitions define how the properties change when the item moves between each state
transitions: [
- // When transitioning to 'Position1' move x,y over a duration of 1 second,
+
+ // When transitioning to 'middleRight' move x,y over a duration of 1 second,
// with OutBounce easing function.
Transition {
- from: "*"; to: "Position1"
+ from: "*"; to: "middleRight"
NumberAnimation { properties: "x,y"; easing.type: "OutBounce"; duration: 1000 }
},
- // When transitioning to 'Position2' move x,y over a duration of 2 seconds,
+
+ // When transitioning to 'bottomLeft' move x,y over a duration of 2 seconds,
// with InOutQuad easing function.
Transition {
- from: "*"; to: "Position2"
+ from: "*"; to: "bottomLeft"
NumberAnimation { properties: "x,y"; easing.type: "InOutQuad"; duration: 2000 }
},
+
// For any other state changes move x,y linearly over duration of 200ms.
Transition {
NumberAnimation { properties: "x,y"; duration: 200 }
diff --git a/examples/declarative/tabwidget/TabWidget.qml b/examples/declarative/tabwidget/TabWidget.qml
index e6b40fd..26d25b4 100644
--- a/examples/declarative/tabwidget/TabWidget.qml
+++ b/examples/declarative/tabwidget/TabWidget.qml
@@ -2,6 +2,7 @@ import Qt 4.7
Item {
id: tabWidget
+
property int current: 0
default property alias content: stack.children
@@ -18,21 +19,26 @@ Item {
Row {
id: header
Repeater {
- delegate:
- Rectangle {
+ delegate: Rectangle {
width: tabWidget.width / stack.children.length; height: 36
+
Rectangle {
- color: "#acb2c2"; width: parent.width; height: 1
+ width: parent.width; height: 1
anchors { bottom: parent.bottom; bottomMargin: 1 }
+ color: "#acb2c2"
}
BorderImage {
- source: "tab.png"; visible: tabWidget.current == index; border.left: 7; border.right: 7
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
+ anchors.fill: parent
+ text: stack.children[index].title
+ elide: Text.ElideRight
+ font.bold: tabWidget.current == index
}
MouseArea {
anchors.fill: parent
@@ -45,6 +51,7 @@ Item {
Item {
id: stack
- anchors.top: header.bottom; anchors.bottom: tabWidget.bottom; width: tabWidget.width
+ width: tabWidget.width
+ anchors.top: header.bottom; anchors.bottom: tabWidget.bottom
}
}
diff --git a/examples/declarative/tabwidget/tabs.qml b/examples/declarative/tabwidget/tabs.qml
index e1bbdef..fba203c 100644
--- a/examples/declarative/tabwidget/tabs.qml
+++ b/examples/declarative/tabwidget/tabs.qml
@@ -6,28 +6,36 @@ TabWidget {
Rectangle {
property string title: "Red"
- anchors.fill: parent; color: "#e3e3e3"
+ 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; width: parent.width - 20
+ text: "Roses are red"
+ font.pixelSize: 20
+ wrapMode: Text.WordWrap
}
}
}
Rectangle {
property string title: "Green"
- anchors.fill: parent; color: "#e3e3e3"
+ 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; width: parent.width - 20
+ text: "Flower stems are green"
+ font.pixelSize: 20
+ wrapMode: Text.WordWrap
}
}
}
@@ -35,13 +43,16 @@ TabWidget {
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; width: parent.width - 20
+ text: "Violets are blue"
+ font.pixelSize: 20
+ wrapMode: Text.WordWrap
}
}
}
diff --git a/examples/declarative/tic-tac-toe/content/Button.qml b/examples/declarative/tic-tac-toe/content/Button.qml
index 05d3f8d..ecf18cd 100644
--- a/examples/declarative/tic-tac-toe/content/Button.qml
+++ b/examples/declarative/tic-tac-toe/content/Button.qml
@@ -3,33 +3,35 @@ import Qt 4.7
Rectangle {
id: container
- signal clicked
property string text: "Button"
property bool down: false
property string mainCol: "lightgray"
property string darkCol: "darkgray"
property string lightCol: "white"
- color: mainCol; smooth: true
- width: txtItem.width + 20; height: txtItem.height + 6
- border.width: 1; border.color: Qt.darker(mainCol); radius: 8;
+ width: buttonLabel.width + 20; height: buttonLabel.height + 6
+ border { width: 1; color: Qt.darker(mainCol) }
+ radius: 8;
+ color: mainCol
+ smooth: true
gradient: Gradient {
GradientStop {
id: topGrad; position: 0.0
- color: if (container.down) { darkCol } else { lightCol } }
+ color: if (container.down) { darkCol } else { lightCol }
+ }
GradientStop { position: 1.0; color: mainCol }
}
+ signal clicked
+
MouseArea { id: mr; anchors.fill: parent; onClicked: container.clicked() }
Text {
- id: txtItem; text: container.text;
+ id: buttonLabel
+
anchors.centerIn: container
- color: "blue"
- styleColor: "white"
- style: Text.Outline
+ text: container.text;
font.pixelSize: 14
- font.bold: true
}
}
diff --git a/examples/declarative/tic-tac-toe/tic-tac-toe.qml b/examples/declarative/tic-tac-toe/tic-tac-toe.qml
index ca66a46..dd13052 100644
--- a/examples/declarative/tic-tac-toe/tic-tac-toe.qml
+++ b/examples/declarative/tic-tac-toe/tic-tac-toe.qml
@@ -4,23 +4,23 @@ import "content/tic-tac-toe.js" as Logic
Item {
id: game
- property bool show: false;
+
+ property bool show: false
+ property real difficulty: 1.0 //chance it will actually think
+
width: 440
height: 480
anchors.fill: parent
- property real difficulty: 1.0; //chance it will actually think
Image {
id: boardimage
- anchors.verticalCenter: parent.verticalCenter
- anchors.horizontalCenter: parent.horizontalCenter
+ anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.horizontalCenter }
source: "content/pics/board.png"
}
Grid {
id: board
anchors.fill: boardimage
-
columns: 3
Repeater {
@@ -46,33 +46,32 @@ Item {
Row {
spacing: 4
- anchors.top: board.bottom
- anchors.horizontalCenter: board.horizontalCenter
+ anchors { top: board.bottom; horizontalCenter: board.horizontalCenter }
+
Button {
text: "Hard"
- onClicked: game.difficulty=1.0;
+ onClicked: game.difficulty = 1.0;
down: game.difficulty == 1.0
}
Button {
text: "Moderate"
- onClicked: game.difficulty=0.8;
+ onClicked: game.difficulty = 0.8;
down: game.difficulty == 0.8
}
Button {
text: "Easy"
- onClicked: game.difficulty=0.2;
+ onClicked: game.difficulty = 0.2;
down: game.difficulty == 0.2
}
}
Text {
id: msg
- opacity: 0
+
anchors.centerIn: parent
+ opacity: 0
color: "blue"
- styleColor: "white"
- style: Text.Outline
- font.pixelSize: 50
- font.bold: true
+ style: Text.Outline; styleColor: "white"
+ font.pixelSize: 50; font.bold: true
}
}
diff --git a/examples/declarative/tutorials/samegame/samegame1/Block.qml b/examples/declarative/tutorials/samegame/samegame1/Block.qml
index 7cf819b..a535235 100644
--- a/examples/declarative/tutorials/samegame/samegame1/Block.qml
+++ b/examples/declarative/tutorials/samegame/samegame1/Block.qml
@@ -2,11 +2,12 @@
import Qt 4.7
Item {
- id:block
+ id: block
- Image { id: img
- source: "../shared/pics/redStone.png";
+ Image {
+ id: img
anchors.fill: parent
+ source: "../shared/pics/redStone.png";
}
}
//![0]
diff --git a/examples/declarative/tutorials/samegame/samegame1/Button.qml b/examples/declarative/tutorials/samegame/samegame1/Button.qml
index 8ad7c0f..e8034ac 100644
--- a/examples/declarative/tutorials/samegame/samegame1/Button.qml
+++ b/examples/declarative/tutorials/samegame/samegame1/Button.qml
@@ -4,25 +4,31 @@ import Qt 4.7
Rectangle {
id: container
- signal clicked
property string text: "Button"
- color: activePalette.button; smooth: true
+ signal clicked
+
width: buttonLabel.width + 20; height: buttonLabel.height + 6
- border.width: 1; border.color: Qt.darker(activePalette.button); radius: 8;
+ smooth: true
+ border { width: 1; color: Qt.darker(activePalette.button) }
+ radius: 8
+ // color the button with a gradient
gradient: Gradient {
GradientStop {
position: 0.0
- color: if (mouseArea.pressed) { activePalette.dark } else { activePalette.light }
+ color: {
+ if (mouseArea.pressed)
+ return activePalette.dark
+ else
+ return activePalette.light
+ }
}
GradientStop { position: 1.0; color: activePalette.button }
}
MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() }
- Text {
- id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText
- }
+ Text { id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText }
}
//![0]
diff --git a/examples/declarative/tutorials/samegame/samegame1/samegame.qml b/examples/declarative/tutorials/samegame/samegame1/samegame.qml
index ae881ba..b6e01fd 100644
--- a/examples/declarative/tutorials/samegame/samegame1/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame1/samegame.qml
@@ -3,37 +3,40 @@ import Qt 4.7
Rectangle {
id: screen
+
width: 490; height: 720
SystemPalette { id: activePalette }
Item {
- width: parent.width; anchors.top: parent.top; anchors.bottom: toolbar.top
+ width: parent.width
+ anchors { top: parent.top; bottom: toolBar.top }
Image {
id: background
- anchors.fill: parent; source: "../shared/pics/background.jpg"
+ anchors.fill: parent
+ source: "../shared/pics/background.jpg"
fillMode: Image.PreserveAspectCrop
}
}
Rectangle {
- id: toolbar
+ id: toolBar
+ width: parent.width; height: 32
color: activePalette.window
- height: 32; width: parent.width
anchors.bottom: screen.bottom
Button {
- text: "New Game"; onClicked: console.log("Starting a new game...");
- anchors.left: parent.left; anchors.leftMargin: 3
- anchors.verticalCenter: parent.verticalCenter
+ anchors { left: parent.left; leftMargin: 3; verticalCenter: parent.verticalCenter }
+ text: "New Game"
+ onClicked: console.log("This doesn't do anything yet...")
}
Text {
id: score
- text: "Score: Who knows?"; font.bold: true
- anchors.right: parent.right; anchors.rightMargin: 3
- anchors.verticalCenter: parent.verticalCenter
+ anchors { right: parent.right; rightMargin: 3; verticalCenter: parent.verticalCenter }
+ text: "Score: Who knows?"
+ font.bold: true
}
}
}
diff --git a/examples/declarative/tutorials/samegame/samegame2/Block.qml b/examples/declarative/tutorials/samegame/samegame2/Block.qml
index 44ff5d7..88b3d79 100644
--- a/examples/declarative/tutorials/samegame/samegame2/Block.qml
+++ b/examples/declarative/tutorials/samegame/samegame2/Block.qml
@@ -1,10 +1,11 @@
import Qt 4.7
Item {
- id:block
+ id: block
- Image { id: img
- source: "../shared/pics/redStone.png";
+ Image {
+ id: img
anchors.fill: parent
+ source: "../shared/pics/redStone.png";
}
}
diff --git a/examples/declarative/tutorials/samegame/samegame2/Button.qml b/examples/declarative/tutorials/samegame/samegame2/Button.qml
index cf4c61b..8d322de5 100644
--- a/examples/declarative/tutorials/samegame/samegame2/Button.qml
+++ b/examples/declarative/tutorials/samegame/samegame2/Button.qml
@@ -3,24 +3,30 @@ import Qt 4.7
Rectangle {
id: container
- signal clicked
property string text: "Button"
- color: activePalette.button; smooth: true
+ signal clicked
+
width: buttonLabel.width + 20; height: buttonLabel.height + 6
- border.width: 1; border.color: Qt.darker(activePalette.button); radius: 8;
+ smooth: true
+ border { width: 1; color: Qt.darker(activePalette.button) }
+ radius: 8
+ // color the button with a gradient
gradient: Gradient {
GradientStop {
position: 0.0
- color: if (mouseArea.pressed) { activePalette.dark } else { activePalette.light }
+ color: {
+ if (mouseArea.pressed)
+ return activePalette.dark
+ else
+ return activePalette.light
+ }
}
GradientStop { position: 1.0; color: activePalette.button }
}
MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() }
- Text {
- id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText
- }
+ Text { id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText }
}
diff --git a/examples/declarative/tutorials/samegame/samegame2/samegame.qml b/examples/declarative/tutorials/samegame/samegame2/samegame.qml
index e0706c2..7a17d16 100644
--- a/examples/declarative/tutorials/samegame/samegame2/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame2/samegame.qml
@@ -5,39 +5,42 @@ import "samegame.js" as SameGame
Rectangle {
id: screen
+
width: 490; height: 720
SystemPalette { id: activePalette }
Item {
- width: parent.width; anchors.top: parent.top; anchors.bottom: toolbar.top
+ width: parent.width
+ anchors { top: parent.top; bottom: toolBar.top }
Image {
id: background
- anchors.fill: parent; source: "../shared/pics/background.jpg"
+ anchors.fill: parent
+ source: "../shared/pics/background.jpg"
fillMode: Image.PreserveAspectCrop
}
}
Rectangle {
- id: toolbar
+ id: toolBar
+ width: parent.width; height: 32
color: activePalette.window
- height: 32; width: parent.width
anchors.bottom: screen.bottom
//![1]
Button {
- text: "New Game"; onClicked: SameGame.startNewGame();
- anchors.left: parent.left; anchors.leftMargin: 3
- anchors.verticalCenter: parent.verticalCenter
+ anchors { left: parent.left; leftMargin: 3; verticalCenter: parent.verticalCenter }
+ text: "New Game"
+ onClicked: SameGame.startNewGame()
}
//![1]
Text {
id: score
- text: "Score: Who knows?"; font.bold: true
- anchors.right: parent.right; anchors.rightMargin: 3
- anchors.verticalCenter: parent.verticalCenter
+ anchors { right: parent.right; rightMargin: 3; verticalCenter: parent.verticalCenter }
+ text: "Score: Who knows?"
+ font.bold: true
}
}
}
diff --git a/examples/declarative/tutorials/samegame/samegame3/Block.qml b/examples/declarative/tutorials/samegame/samegame3/Block.qml
index bb48ac8..dd0fb48 100644
--- a/examples/declarative/tutorials/samegame/samegame3/Block.qml
+++ b/examples/declarative/tutorials/samegame/samegame3/Block.qml
@@ -2,20 +2,22 @@
import Qt 4.7
Item {
- id:block
+ id: block
+
property int type: 0
- Image { id: img
+ Image {
+ id: img
+
+ anchors.fill: parent
source: {
- if(type == 0){
- "../shared/pics/redStone.png";
- } else if(type == 1) {
- "../shared/pics/blueStone.png";
- } else {
- "../shared/pics/greenStone.png";
- }
+ if (type == 0)
+ return "../shared/pics/redStone.png";
+ else if (type == 1)
+ return "../shared/pics/blueStone.png";
+ else
+ return "../shared/pics/greenStone.png";
}
- anchors.fill: parent
}
}
//![0]
diff --git a/examples/declarative/tutorials/samegame/samegame3/Button.qml b/examples/declarative/tutorials/samegame/samegame3/Button.qml
index cf4c61b..8d322de5 100644
--- a/examples/declarative/tutorials/samegame/samegame3/Button.qml
+++ b/examples/declarative/tutorials/samegame/samegame3/Button.qml
@@ -3,24 +3,30 @@ import Qt 4.7
Rectangle {
id: container
- signal clicked
property string text: "Button"
- color: activePalette.button; smooth: true
+ signal clicked
+
width: buttonLabel.width + 20; height: buttonLabel.height + 6
- border.width: 1; border.color: Qt.darker(activePalette.button); radius: 8;
+ smooth: true
+ border { width: 1; color: Qt.darker(activePalette.button) }
+ radius: 8
+ // color the button with a gradient
gradient: Gradient {
GradientStop {
position: 0.0
- color: if (mouseArea.pressed) { activePalette.dark } else { activePalette.light }
+ color: {
+ if (mouseArea.pressed)
+ return activePalette.dark
+ else
+ return activePalette.light
+ }
}
GradientStop { position: 1.0; color: activePalette.button }
}
MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() }
- Text {
- id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText
- }
+ Text { id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText }
}
diff --git a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
index a76b517..be3a7b7 100644
--- a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
+++ b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml
@@ -3,21 +3,30 @@ import Qt 4.7
Rectangle {
id: page
+
+ signal closed
+
function forceClose() {
page.closed();
page.opacity = 0;
}
+
function show(txt) {
dialogText.text = txt;
page.opacity = 1;
}
- signal closed();
- color: "white"; border.width: 1; width: dialogText.width + 20; height: dialogText.height + 20;
+
+ width: dialogText.width + 20; height: dialogText.height + 20
+ color: "white"
+ border.width: 1
opacity: 0
+
Behavior on opacity {
NumberAnimation { duration: 1000 }
}
+
Text { id: dialogText; anchors.centerIn: parent; text: "Hello World!" }
+
MouseArea { anchors.fill: parent; onClicked: forceClose(); }
}
//![0]
diff --git a/examples/declarative/tutorials/samegame/samegame3/samegame.qml b/examples/declarative/tutorials/samegame/samegame3/samegame.qml
index cdf99d7..bc5f2f8 100644
--- a/examples/declarative/tutorials/samegame/samegame3/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame3/samegame.qml
@@ -4,31 +4,37 @@ import "samegame.js" as SameGame
Rectangle {
id: screen
+
width: 490; height: 720
SystemPalette { id: activePalette }
Item {
- width: parent.width; anchors.top: parent.top; anchors.bottom: toolbar.top
+ width: parent.width
+ anchors { top: parent.top; bottom: toolBar.top }
Image {
id: background
- anchors.fill: parent; source: "../shared/pics/background.jpg"
+ anchors.fill: parent
+ source: "../shared/pics/background.jpg"
fillMode: Image.PreserveAspectCrop
}
//![1]
Item {
id: gameCanvas
+
property int score: 0
property int blockSize: 40
- z: 20; anchors.centerIn: parent
- width: parent.width - (parent.width % blockSize);
- height: parent.height - (parent.height % blockSize);
+ width: parent.width - (parent.width % blockSize)
+ height: parent.height - (parent.height % blockSize)
+ anchors.centerIn: parent
+ z: 20
MouseArea {
- anchors.fill: parent; onClicked: SameGame.handleClick(mouse.x,mouse.y);
+ anchors.fill: parent
+ onClicked: SameGame.handleClick(mouse.x, mouse.y)
}
}
//![1]
@@ -39,22 +45,22 @@ Rectangle {
//![2]
Rectangle {
- id: toolbar
+ id: toolBar
+ width: parent.width; height: 32
color: activePalette.window
- height: 32; width: parent.width
anchors.bottom: screen.bottom
Button {
- text: "New Game"; onClicked: SameGame.startNewGame();
- anchors.left: parent.left; anchors.leftMargin: 3
- anchors.verticalCenter: parent.verticalCenter
+ anchors { left: parent.left; leftMargin: 3; verticalCenter: parent.verticalCenter }
+ text: "New Game"
+ onClicked: SameGame.startNewGame()
}
Text {
id: score
- text: "Score: " + gameCanvas.score; font.bold: true
- anchors.right: parent.right; anchors.rightMargin: 3
- anchors.verticalCenter: parent.verticalCenter
+ anchors { right: parent.right; rightMargin: 3; verticalCenter: parent.verticalCenter }
+ text: "Score: Who knows?"
+ font.bold: true
}
}
}
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml b/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml
index 243df75..d3a9df7 100644
--- a/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml
@@ -1,9 +1,12 @@
import Qt 4.7
import Qt.labs.particles 1.0
-Item { id:block
+Item {
+ id: block
+
property int type: 0
property bool dying: false
+
//![1]
property bool spawned: false
property int targetX: 0
@@ -14,47 +17,59 @@ Item { id:block
//![1]
//![2]
- Image { id: img
+ Image {
+ id: img
+
+ anchors.fill: parent
source: {
- if(type == 0){
- "../../shared/pics/redStone.png";
- } else if(type == 1) {
- "../../shared/pics/blueStone.png";
- } else {
- "../../shared/pics/greenStone.png";
- }
+ if (type == 0)
+ return "../../shared/pics/redStone.png";
+ else if (type == 1)
+ return "../../shared/pics/blueStone.png";
+ else
+ return "../../shared/pics/greenStone.png";
}
opacity: 0
- Behavior on opacity { NumberAnimation { properties:"opacity"; duration: 200 } }
- anchors.fill: parent
+
+ Behavior on opacity {
+ NumberAnimation { properties:"opacity"; duration: 200 }
+ }
}
//![2]
//![3]
- Particles { id: particles
- width:1; height:1; anchors.centerIn: parent;
- emissionRate: 0;
- lifeSpan: 700; lifeSpanDeviation: 600;
+ Particles {
+ id: particles
+
+ width: 1; height: 1
+ anchors.centerIn: parent
+
+ emissionRate: 0
+ lifeSpan: 700; lifeSpanDeviation: 600
angle: 0; angleDeviation: 360;
- velocity: 100; velocityDeviation:30;
+ velocity: 100; velocityDeviation: 30
source: {
- if(type == 0){
- "../../shared/pics/redStar.png";
- } else if (type == 1) {
- "../../shared/pics/blueStar.png";
- } else {
- "../../shared/pics/greenStar.png";
- }
+ if (type == 0)
+ return "../../shared/pics/redStar.png";
+ else if (type == 1)
+ return "../../shared/pics/blueStar.png";
+ else
+ return "../../shared/pics/greenStar.png";
}
}
//![3]
//![4]
states: [
- State{ name: "AliveState"; when: spawned == true && dying == false
+ State {
+ name: "AliveState"
+ when: spawned == true && dying == false
PropertyChanges { target: img; opacity: 1 }
},
- State{ name: "DeathState"; when: dying == true
+
+ State {
+ name: "DeathState"
+ when: dying == true
StateChangeScript { script: particles.burst(50); }
PropertyChanges { target: img; opacity: 0 }
StateChangeScript { script: block.destroy(1000); }
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/Button.qml b/examples/declarative/tutorials/samegame/samegame4/content/Button.qml
index cf4c61b..8d322de5 100644
--- a/examples/declarative/tutorials/samegame/samegame4/content/Button.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/content/Button.qml
@@ -3,24 +3,30 @@ import Qt 4.7
Rectangle {
id: container
- signal clicked
property string text: "Button"
- color: activePalette.button; smooth: true
+ signal clicked
+
width: buttonLabel.width + 20; height: buttonLabel.height + 6
- border.width: 1; border.color: Qt.darker(activePalette.button); radius: 8;
+ smooth: true
+ border { width: 1; color: Qt.darker(activePalette.button) }
+ radius: 8
+ // color the button with a gradient
gradient: Gradient {
GradientStop {
position: 0.0
- color: if (mouseArea.pressed) { activePalette.dark } else { activePalette.light }
+ color: {
+ if (mouseArea.pressed)
+ return activePalette.dark
+ else
+ return activePalette.light
+ }
}
GradientStop { position: 1.0; color: activePalette.button }
}
MouseArea { id: mouseArea; anchors.fill: parent; onClicked: container.clicked() }
- Text {
- id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText
- }
+ Text { id: buttonLabel; text: container.text; anchors.centerIn: container; color: activePalette.buttonText }
}
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
index 15f5b19..adb3f9e 100644
--- a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml
@@ -2,20 +2,29 @@ import Qt 4.7
Rectangle {
id: page
+
+ signal closed
+
function forceClose() {
page.closed();
page.opacity = 0;
}
+
function show(txt) {
dialogText.text = txt;
page.opacity = 1;
}
- signal closed();
- color: "white"; border.width: 1; width: dialogText.width + 20; height: dialogText.height + 20;
+
+ width: dialogText.width + 20; height: dialogText.height + 20
+ color: "white"
+ border.width: 1
opacity: 0
+
Behavior on opacity {
NumberAnimation { duration: 1000 }
}
+
Text { id: dialogText; anchors.centerIn: parent; text: "Hello World!" }
+
MouseArea { anchors.fill: parent; onClicked: forceClose(); }
}
diff --git a/examples/declarative/tutorials/samegame/samegame4/content/samegame.js b/examples/declarative/tutorials/samegame/samegame4/content/samegame.js
index 47985de..7800b6e 100755
--- a/examples/declarative/tutorials/samegame/samegame4/content/samegame.js
+++ b/examples/declarative/tutorials/samegame/samegame4/content/samegame.js
@@ -13,8 +13,8 @@ function index(column, row) {
}
function startNewGame() {
+ //Delete blocks from previous game
for (var i = 0; i < maxIndex; i++) {
- //Delete blocks from previous game
if (board[i] != null)
board[i].destroy();
}
diff --git a/examples/declarative/tutorials/samegame/samegame4/samegame.qml b/examples/declarative/tutorials/samegame/samegame4/samegame.qml
index 5d5c81f..b2a490d 100644
--- a/examples/declarative/tutorials/samegame/samegame4/samegame.qml
+++ b/examples/declarative/tutorials/samegame/samegame4/samegame.qml
@@ -4,16 +4,19 @@ import "content/samegame.js" as SameGame
Rectangle {
id: screen
+
width: 490; height: 720
SystemPalette { id: activePalette }
Item {
- width: parent.width; anchors.top: parent.top; anchors.bottom: toolBar.top
+ width: parent.width
+ anchors { top: parent.top; bottom: toolBar.top }
Image {
id: background
- anchors.fill: parent; source: "../shared/pics/background.jpg"
+ anchors.fill: parent
+ source: "../shared/pics/background.jpg"
fillMode: Image.PreserveAspectCrop
}
@@ -36,43 +39,49 @@ Rectangle {
//![0]
Dialog {
- id: nameInputDialog; anchors.centerIn: parent; z: 22;
+ id: nameInputDialog
+
+ anchors.centerIn: parent
+ z: 22
+
Text {
- id: spacer
+ id: dialogText
opacity: 0
text: " You won! Please enter your name:"
}
+
TextInput {
- id: editor
+ id: nameInput
+ width: 72
+ anchors { verticalCenter: parent.verticalCenter; left: dialogText.right }
+ focus: true
+
onAccepted: {
- if(nameInputDialog.opacity==1&&editor.text!="")
- SameGame.saveHighScore(editor.text);
+ if (nameInputDialog.opacity == 1 && nameInput.text != "")
+ SameGame.saveHighScore(nameInput.text);
nameInputDialog.forceClose();
}
- anchors.verticalCenter: parent.verticalCenter
- width: 72; focus: true
- anchors.left: spacer.right
}
}
//![0]
Rectangle {
id: toolBar
+ width: parent.width; height: 32
color: activePalette.window
- height: 32; width: parent.width
anchors.bottom: screen.bottom
Button {
- text: "New Game"; onClicked: SameGame.startNewGame();
- anchors.left: parent.left; anchors.leftMargin: 3
- anchors.verticalCenter: parent.verticalCenter
+ anchors { left: parent.left; leftMargin: 3; verticalCenter: parent.verticalCenter }
+ text: "New Game"
+ onClicked: SameGame.startNewGame()
}
Text {
id: score
- text: "Score: " + gameCanvas.score; font.bold: true
- anchors.right: parent.right; anchors.rightMargin: 3
- anchors.verticalCenter: parent.verticalCenter
+ anchors { right: parent.right; rightMargin: 3; verticalCenter: parent.verticalCenter }
+ text: "Score: " + gameCanvas.score
+ font.bold: true
}
}
}
diff --git a/examples/declarative/tvtennis/tvtennis.qml b/examples/declarative/tvtennis/tvtennis.qml
index 9d107ad..354a16f 100644
--- a/examples/declarative/tvtennis/tvtennis.qml
+++ b/examples/declarative/tvtennis/tvtennis.qml
@@ -8,13 +8,14 @@ Rectangle {
// Make a ball to bounce
Rectangle {
+ id: ball
+
// Add a property for the target y coordinate
property int targetY : page.height - 10
property variant direction : "right"
- id: ball
- color: "Lime"
x: 20; width: 20; height: 20; z: 1
+ color: "Lime"
SoundEffect { id: paddle; source: "paddle.wav" }
SoundEffect { id: wall; source: "click.wav" }
diff --git a/examples/declarative/velocity/Day.qml b/examples/declarative/velocity/Day.qml
index a39ec94..433295b 100644
--- a/examples/declarative/velocity/Day.qml
+++ b/examples/declarative/velocity/Day.qml
@@ -18,10 +18,11 @@ Component {
Repeater {
model: notes
Item {
+ id: stickyPage
+
property int randomX: Math.random() * 500 + 100
property int randomY: Math.random() * 200 + 50
- id: stickyPage
x: randomX; y: randomY
SpringFollow on rotation {
@@ -32,26 +33,32 @@ Component {
Item {
id: sticky
scale: 0.7
+
Image {
id: stickyImage
- source: "note-yellow.png"; transformOrigin: Item.TopLeft
- smooth: true; y: -20; x: 8 + -width * 0.6 / 2; scale: 0.6
+ x: 8 + -width * 0.6 / 2; y: -20
+ source: "note-yellow.png"
+ scale: 0.6; transformOrigin: Item.TopLeft
+ smooth: true
}
TextEdit {
- id: myText; smooth: true; font.pixelSize: 24
- readOnly: false; x: -104; y: 36
- rotation: -8; text: noteText; width: 215; height: 200
+ id: myText
+ x: -104; y: 36; width: 215; height: 200
+ smooth: true
+ font.pixelSize: 24
+ readOnly: false
+ rotation: -8
+ text: noteText
}
Item {
- y: -20
- x: stickyImage.x
+ x: stickyImage.x; y: -20
width: stickyImage.width * stickyImage.scale
height: stickyImage.height * stickyImage.scale
+
MouseArea {
id: mouse
- onClicked: { myText.focus = true }
anchors.fill: parent
drag.target: stickyPage
drag.axis: "XandYAxis"
@@ -59,13 +66,15 @@ Component {
drag.maximumY: page.height - 80
drag.minimumX: 100
drag.maximumX: page.width - 140
+ onClicked: { myText.focus = true }
}
}
}
Image {
- source: "tack.png"; transformOrigin: Item.TopLeft
- x: -width / 2; y: -height * 0.5 / 2; scale: 0.7
+ x: -width / 2; y: -height * 0.5 / 2
+ source: "tack.png"
+ scale: 0.7; transformOrigin: Item.TopLeft
}
states: State {
diff --git a/examples/declarative/velocity/velocity.qml b/examples/declarative/velocity/velocity.qml
index 20821d6..871bafc 100644
--- a/examples/declarative/velocity/velocity.qml
+++ b/examples/declarative/velocity/velocity.qml
@@ -1,46 +1,75 @@
import Qt 4.7
Rectangle {
- width: 800; height: 480; color: "#464646"
+ width: 800; height: 480
+ color: "#464646"
ListModel {
id: list
+
ListElement {
name: "Sunday"
- notes: [ ListElement { noteText: "Lunch" }, ListElement { noteText: "Birthday Party" } ]
+ notes: [
+ ListElement { noteText: "Lunch" },
+ ListElement { noteText: "Birthday Party" }
+ ]
}
+
ListElement {
name: "Monday"
- notes: [ ListElement { noteText: "Pickup kids from\nschool\n4.30pm" },
- ListElement { noteText: "Checkout Qt" }, ListElement { noteText: "Read email" } ]
+ notes: [
+ ListElement { noteText: "Pickup kids from\nschool\n4.30pm" },
+ ListElement { noteText: "Checkout Qt" }, ListElement { noteText: "Read email" }
+ ]
}
+
ListElement {
name: "Tuesday"
- notes: [ ListElement { noteText: "Walk dog" }, ListElement { noteText: "Buy newspaper" } ]
+ notes: [
+ ListElement { noteText: "Walk dog" },
+ ListElement { noteText: "Buy newspaper" }
+ ]
}
+
ListElement {
- name: "Wednesday"; notes: [ ListElement { noteText: "Cook dinner" } ]
+ name: "Wednesday"
+ notes: [ ListElement { noteText: "Cook dinner" } ]
}
+
ListElement {
name: "Thursday"
- notes: [ ListElement { noteText: "Meeting\n5.30pm" }, ListElement { noteText: "Weed garden" } ]
+ notes: [
+ ListElement { noteText: "Meeting\n5.30pm" },
+ ListElement { noteText: "Weed garden" }
+ ]
}
+
ListElement {
name: "Friday"
- notes: [ ListElement { noteText: "More work" }, ListElement { noteText: "Grocery shopping" } ]
+ notes: [
+ ListElement { noteText: "More work" },
+ ListElement { noteText: "Grocery shopping" }
+ ]
}
+
ListElement {
name: "Saturday"
- notes: [ ListElement { noteText: "Drink" }, ListElement { noteText: "Download Qt\nPlay with QML" } ]
+ notes: [
+ ListElement { noteText: "Drink" },
+ ListElement { noteText: "Download Qt\nPlay with QML" }
+ ]
}
}
ListView {
id: flickable
- anchors.fill: parent; focus: true
- model: list; delegate: Day { }
+
+ anchors.fill: parent
+ focus: true
highlightRangeMode: ListView.StrictlyEnforceRange
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem
+ model: list
+ delegate: Day { }
}
}
diff --git a/examples/declarative/webview/alerts.qml b/examples/declarative/webview/alerts.qml
index 2ba4300..6a5a0d2 100644
--- a/examples/declarative/webview/alerts.qml
+++ b/examples/declarative/webview/alerts.qml
@@ -3,17 +3,17 @@ import org.webkit 1.0
WebView {
id: webView
- onAlert: popup.show(message)
width: 120
height: 150
url: "alerts.html"
+ onAlert: popup.show(message)
+
Rectangle {
id: popup
color: "red"
- border.color: "black"
- border.width: 2
+ border.color: "black"; border.width: 2
radius: 4
y: parent.height // off "screen"
diff --git a/examples/declarative/webview/autosize.qml b/examples/declarative/webview/autosize.qml
index c4a502e..9632883 100644
--- a/examples/declarative/webview/autosize.qml
+++ b/examples/declarative/webview/autosize.qml
@@ -5,15 +5,16 @@ import org.webkit 1.0
// preferredWidth, and preferredHeight properties.
Rectangle {
id: rect
- color: "white"
width: 200
height: layout.height
+
Column {
id: layout
spacing: 2
WebView {
html: "No width defined."
- Rectangle { color: "#10000000"
+ Rectangle {
+ color: "#10000000"
anchors.fill: parent
}
}
diff --git a/examples/declarative/webview/googleMaps.qml b/examples/declarative/webview/googleMaps.qml
index 4702dea..5506012 100644
--- a/examples/declarative/webview/googleMaps.qml
+++ b/examples/declarative/webview/googleMaps.qml
@@ -14,15 +14,15 @@ Map {
width: 300
height: 300
address: "Paris"
+
Rectangle {
- color: "white"
+ x: 70
width: input.width + 20
height: input.height + 4
+ anchors.bottom: parent.bottom; anchors.bottomMargin: 5
radius: 5
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 5
opacity: map.status == "Ready" ? 1 : 0
- x: 70
+
TextInput {
id: input
text: map.address
@@ -30,12 +30,14 @@ Map {
Keys.onReturnPressed: map.address = input.text
}
}
+
Text {
id: loading
anchors.centerIn: parent
text: map.status == "Error" ? "Error" : "Loading"
opacity: map.status == "Ready" ? 0 : 1
font.pixelSize: 30
- Behavior on opacity {NumberAnimation{}}
+
+ Behavior on opacity { NumberAnimation{} }
}
}
diff --git a/examples/declarative/webview/transparent.qml b/examples/declarative/webview/transparent.qml
index a0676f4..e4efc31 100644
--- a/examples/declarative/webview/transparent.qml
+++ b/examples/declarative/webview/transparent.qml
@@ -7,6 +7,7 @@ Rectangle {
color: "green"
width: web.width
height: web.height
+
WebView {
id: web
html: "Hello <b>World!</b>"
diff --git a/examples/declarative/workerscript/workerscript.qml b/examples/declarative/workerscript/workerscript.qml
index 1c7a920..6c6253b 100644
--- a/examples/declarative/workerscript/workerscript.qml
+++ b/examples/declarative/workerscript/workerscript.qml
@@ -1,7 +1,7 @@
import Qt 4.7
Rectangle {
- width: 480; height: 320;
+ width: 480; height: 320
WorkerScript {
id: myWorker
@@ -16,8 +16,7 @@ Rectangle {
Rectangle {
width: 200; height: 200
- anchors.left: parent.left
- anchors.leftMargin: 20
+ anchors.left: parent.left; anchors.leftMargin: 20
color: "red"
MouseArea {
@@ -28,8 +27,7 @@ Rectangle {
Rectangle {
width: 200; height: 200
- anchors.right: parent.right
- anchors.rightMargin: 20
+ anchors.right: parent.right; anchors.rightMargin: 20
color: "blue"
MouseArea {
@@ -40,8 +38,6 @@ Rectangle {
Text {
text: "Click a Rectangle!"
- anchors.horizontalCenter: parent.horizontalCenter
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 50
+ anchors { horizontalCenter: parent.horizontalCenter; bottom: parent.bottom; bottomMargin: 50 }
}
}
diff --git a/examples/declarative/xmldata/daringfireball.qml b/examples/declarative/xmldata/daringfireball.qml
index c5732c0..a1df809 100644
--- a/examples/declarative/xmldata/daringfireball.qml
+++ b/examples/declarative/xmldata/daringfireball.qml
@@ -24,15 +24,17 @@ Rectangle {
text: title; font.bold: true
}
Text {
+ anchors { left: titleText.right; leftMargin: 10 }
text: 'by ' + tagline
- anchors.left: titleText.right; anchors.leftMargin: 10
font.italic: true
}
Text {
x: 10
- text: content
+ width: 580
anchors.top: titleText.bottom
- width: 580; wrapMode: Text.WordWrap
+ text: content
+ wrapMode: Text.WordWrap
+
onLinkActivated: { console.log('link clicked: ' + link) }
}
}
@@ -40,6 +42,7 @@ Rectangle {
ListView {
anchors.fill: parent
- model: feedModel; delegate: feedDelegate
+ model: feedModel
+ delegate: feedDelegate
}
}
diff --git a/examples/declarative/xmldata/yahoonews.qml b/examples/declarative/xmldata/yahoonews.qml
index e6cb373..668778e 100644
--- a/examples/declarative/xmldata/yahoonews.qml
+++ b/examples/declarative/xmldata/yahoonews.qml
@@ -1,11 +1,12 @@
import Qt 4.7
Rectangle {
+ width: 600; height: 600
+
gradient: Gradient {
GradientStop { position: 0; color: "black" }
GradientStop { position: 1.0; color: "#AAAAAA" }
}
- width: 600; height: 600
XmlListModel {
id: feedModel
@@ -18,6 +19,7 @@ Rectangle {
Component {
id: feedDelegate
+
Item {
id: delegate
height: wrapper.height + 10
@@ -30,25 +32,27 @@ Rectangle {
Rectangle {
id: wrapper
- y: 5; height: titleText.height + 10; width: 580
- color: "#F0F0F0"; radius: 5
+
+ width: 580; y: 5; height: titleText.height + 10
+ color: "#F0F0F0"
+ radius: 5
+
Text {
id: titleText
x: 10; y: 5
text: '<a href=\'' + link + '\'>' + title + '</a>'
- font.bold: true; font.family: "Helvetica"; font.pointSize: 14
+ font { bold: true; family: "Helvetica"; pointSize: 14 }
+
onLinkActivated: { console.log('link clicked: ' + link) }
}
Text {
- x: 10
id: descriptionText
+ x: 10; width: 560
+ anchors.top: titleText.bottom; anchors.topMargin: 5
text: description
- width: 560
wrapMode: Text.WordWrap
font.family: "Helvetica"
- anchors.top: titleText.bottom
- anchors.topMargin: 5
opacity: 0
}
diff --git a/examples/declarative/xmlhttprequest/test.qml b/examples/declarative/xmlhttprequest/test.qml
index ef9d5f3..c7e7e6d 100644
--- a/examples/declarative/xmlhttprequest/test.qml
+++ b/examples/declarative/xmlhttprequest/test.qml
@@ -5,32 +5,32 @@ Rectangle {
MouseArea {
anchors.fill: parent
+
onClicked: {
+ var doc = new XMLHttpRequest();
+ doc.onreadystatechange = function() {
+ if (doc.readyState == XMLHttpRequest.HEADERS_RECEIVED) {
+ console.log("Headers -->");
+ console.log(doc.getAllResponseHeaders ());
+ console.log("Last modified -->");
+ console.log(doc.getResponseHeader ("Last-Modified"));
+ }
+ else if (doc.readyState == XMLHttpRequest.DONE) {
- var doc = new XMLHttpRequest();
- doc.onreadystatechange = function() {
- if (doc.readyState == XMLHttpRequest.HEADERS_RECEIVED) {
- console.log("Headers -->");
- console.log(doc.getAllResponseHeaders ());
- console.log("Last modified -->");
- console.log(doc.getResponseHeader ("Last-Modified"));
+ var a = doc.responseXML.documentElement;
+ for (var ii = 0; ii < a.childNodes.length; ++ii) {
+ console.log(a.childNodes[ii].nodeName);
}
- else if (doc.readyState == XMLHttpRequest.DONE) {
-
- var a = doc.responseXML.documentElement;
- for (var ii = 0; ii < a.childNodes.length; ++ii) {
- console.log(a.childNodes[ii].nodeName);
- }
- console.log("Headers -->");
- console.log(doc.getAllResponseHeaders ());
- console.log("Last modified -->");
- console.log(doc.getResponseHeader ("Last-Modified"));
+ console.log("Headers -->");
+ console.log(doc.getAllResponseHeaders ());
+ console.log("Last modified -->");
+ console.log(doc.getResponseHeader ("Last-Modified"));
- }
}
+ }
- doc.open("GET", "test.xml");
- doc.send();
+ doc.open("GET", "test.xml");
+ doc.send();
}
}
}