summaryrefslogtreecommitdiffstats
path: root/examples
diff options
context:
space:
mode:
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.qml3
-rw-r--r--examples/declarative/layouts/positioners.qml162
-rw-r--r--examples/declarative/listmodel-threaded/timedisplay.qml4
-rw-r--r--examples/declarative/listview/dynamic.qml124
-rw-r--r--examples/declarative/listview/highlight.qml31
-rw-r--r--examples/declarative/listview/itemlist.qml27
-rw-r--r--examples/declarative/listview/listview-example.qml26
-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.qml22
-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.qml17
-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.qml15
-rw-r--r--examples/declarative/states/transitions.qml15
-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.qml21
-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
58 files changed, 881 insertions, 487 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..81f9aed 100644
--- a/examples/declarative/layouts/layouts.qml
+++ b/examples/declarative/layouts/layouts.qml
@@ -1,9 +1,12 @@
import Qt 4.7
import Qt.widgets 4.6
+
Item {
id: resizable
+
width:400
height:400
+
QGraphicsWidget {
size.width:parent.width
size.height:parent.height
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..efd0e10 100644
--- a/examples/declarative/listview/dynamic.qml
+++ b/examples/declarative/listview/dynamic.qml
@@ -8,6 +8,7 @@ Rectangle {
ListModel {
id: fruitModel
+
ListElement {
name: "Apple"; cost: 2.45
attributes: [
@@ -51,12 +52,16 @@ Rectangle {
Component {
id: fruitDelegate
+
Item {
width: parent.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 +71,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 +135,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"}]
- })
+ })
}
}
}
- 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,{
+ 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..2f7f2ca 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,16 @@ 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..9409356 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,53 @@ 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
+ 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: petHighlight
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..6f13335 100644
--- a/examples/declarative/progressbar/content/ProgressBar.qml
+++ b/examples/declarative/progressbar/content/ProgressBar.qml
@@ -2,7 +2,6 @@ import Qt 4.7
Item {
id: progressbar
- width: 250; height: 23; clip: true
property int minimum: 0
property int maximum: 100
@@ -10,28 +9,35 @@ Item {
property alias color: g1.color
property alias secondColor: g2.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 }
}
+
}
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..adeddd1 100644
--- a/examples/declarative/searchbox/SearchBox.qml
+++ b/examples/declarative/searchbox/SearchBox.qml
@@ -18,7 +18,8 @@ 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
}
@@ -27,18 +28,20 @@ FocusScope {
TextInput {
id: textInput
- anchors.left: parent.left; anchors.leftMargin: 8
- anchors.verticalCenter: parent.verticalCenter
+ anchors { left: parent.left; leftMargin: 8; verticalCenter: parent.verticalCenter }
focus: if (1) 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..f8c1dd5 100644
--- a/examples/declarative/states/states.qml
+++ b/examples/declarative/states/states.qml
@@ -2,14 +2,17 @@ import Qt 4.7
Rectangle {
id: page
- width: 640; height: 480; color: "#343434"
+ width: 640; height: 480
+ color: "#343434"
// A target region. Clicking in here sets the state to the default state
Rectangle {
id: initialPosition
anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
- width: 64; height: 64; radius: 6
+ width: 64; height: 64
+ radius: 6
color: "Transparent"; border.color: "Gray"
+
MouseArea { anchors.fill: parent; onClicked: page.state = '' }
}
@@ -17,8 +20,10 @@ Rectangle {
Rectangle {
id: position1
anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
- width: 64; height: 64; radius: 6
+ width: 64; height: 64
+ radius: 6
color: "Transparent"; border.color: "Gray"
+
MouseArea { anchors.fill: parent; onClicked: page.state = 'Position1' }
}
@@ -26,8 +31,10 @@ Rectangle {
Rectangle {
id: position2
anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
- width: 64; height: 64; radius: 6
+ width: 64; height: 64
+ radius: 6
color: "Transparent"; border.color: "Gray"
+
MouseArea { anchors.fill: parent; onClicked: page.state = 'Position2' }
}
diff --git a/examples/declarative/states/transitions.qml b/examples/declarative/states/transitions.qml
index 3cb5543..b475333 100644
--- a/examples/declarative/states/transitions.qml
+++ b/examples/declarative/states/transitions.qml
@@ -2,14 +2,17 @@ import Qt 4.7
Rectangle {
id: page
- width: 640; height: 480; color: "#343434"
+ width: 640; height: 480
+ color: "#343434"
// A target region. Clicking in here sets the state to the default state
Rectangle {
id: initialPosition
anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 20 }
- width: 64; height: 64; radius: 6
+ width: 64; height: 64
+ radius: 6
color: "Transparent"; border.color: "Gray"
+
MouseArea { anchors.fill: parent; onClicked: page.state = '' }
}
@@ -17,8 +20,10 @@ Rectangle {
Rectangle {
id: position1
anchors { right: parent.right; verticalCenter: parent.verticalCenter; rightMargin: 20 }
- width: 64; height: 64; radius: 6
+ width: 64; height: 64
+ radius: 6
color: "Transparent"; border.color: "Gray"
+
MouseArea { anchors.fill: parent; onClicked: page.state = 'Position1' }
}
@@ -26,8 +31,10 @@ Rectangle {
Rectangle {
id: position2
anchors { left: parent.left; bottom: parent.bottom; leftMargin: 10; bottomMargin: 20 }
- width: 64; height: 64; radius: 6
+ width: 64; height: 64
+ radius: 6
color: "Transparent"; border.color: "Gray"
+
MouseArea { anchors.fill: parent; onClicked: page.state = 'Position2' }
}
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..56e5ecd 100644
--- a/examples/declarative/tic-tac-toe/content/Button.qml
+++ b/examples/declarative/tic-tac-toe/content/Button.qml
@@ -3,33 +3,37 @@ 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;
+ 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: txtItem
+
anchors.centerIn: container
+ text: container.text;
color: "blue"
- styleColor: "white"
- style: Text.Outline
- font.pixelSize: 14
- font.bold: true
+ style: Text.Outline; styleColor: "white"
+ 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..62bb56f 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 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,8 +46,8 @@ 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;
@@ -67,12 +67,11 @@ Item {
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/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();
}
}
}