diff options
Diffstat (limited to 'examples/declarative')
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(); } } } |