diff options
| author | Alan Alpert <alan.alpert@nokia.com> | 2009-10-06 03:49:48 (GMT) |
|---|---|---|
| committer | Alan Alpert <alan.alpert@nokia.com> | 2009-10-06 03:49:48 (GMT) |
| commit | 6ddff0d80fb360a7b3296e039150c97729fb8d10 (patch) | |
| tree | ca6fe14e74f3b51652f5a339a4c188dbff86da51 /demos/declarative | |
| parent | bb0465258d20badae7f9aa62849c02a94244570c (diff) | |
| parent | 2ec7f08421f484339818c731594f12ddb22d38c0 (diff) | |
| download | Qt-6ddff0d80fb360a7b3296e039150c97729fb8d10.zip Qt-6ddff0d80fb360a7b3296e039150c97729fb8d10.tar.gz Qt-6ddff0d80fb360a7b3296e039150c97729fb8d10.tar.bz2 | |
Merge branch 'kinetic-declarativeui' of git@scm.dev.nokia.troll.no:qt/kinetic into kinetic-declarativeui
Diffstat (limited to 'demos/declarative')
32 files changed, 613 insertions, 623 deletions
diff --git a/demos/declarative/calculator/CalcButton.qml b/demos/declarative/calculator/CalcButton.qml index 55b5f0c..c2e3a81 100644 --- a/demos/declarative/calculator/CalcButton.qml +++ b/demos/declarative/calculator/CalcButton.qml @@ -1,41 +1,41 @@ import Qt 4.6 Rectangle { - property alias operation: Label.text + property alias operation: label.text property bool toggable: false property bool toggled: false signal clicked - id: Button; width: 50; height: 30 - border.color: Palette.mid; radius: 6 + id: button; width: 50; height: 30 + border.color: palette.mid; radius: 6 gradient: Gradient { - GradientStop { id: G1; position: 0.0; color: Palette.lighter(Palette.button) } - GradientStop { id: G2; position: 1.0; color: Palette.button } + GradientStop { id: G1; position: 0.0; color: palette.lighter(palette.button) } + GradientStop { id: G2; position: 1.0; color: palette.button } } - Text { id: Label; anchors.centerIn: parent; color: Palette.buttonText } + Text { id: label; anchors.centerIn: parent; color: palette.buttonText } MouseRegion { - id: ClickRegion + id: clickRegion anchors.fill: parent onClicked: { doOp(operation); - Button.clicked(); - if (!Button.toggable) return; - Button.toggled ? Button.toggled = false : Button.toggled = true + button.clicked(); + if (!button.toggable) return; + button.toggled ? button.toggled = false : button.toggled = true } } states: [ State { - name: "Pressed"; when: ClickRegion.pressed == true - PropertyChanges { target: G1; color: Palette.dark } - PropertyChanges { target: G2; color: Palette.button } + name: "Pressed"; when: clickRegion.pressed == true + PropertyChanges { target: G1; color: palette.dark } + PropertyChanges { target: G2; color: palette.button } }, State { - name: "Toggled"; when: Button.toggled == true - PropertyChanges { target: G1; color: Palette.dark } - PropertyChanges { target: G2; color: Palette.button } + name: "Toggled"; when: button.toggled == true + PropertyChanges { target: G1; color: palette.dark } + PropertyChanges { target: G2; color: palette.button } } ] } diff --git a/demos/declarative/calculator/calculator.js b/demos/declarative/calculator/calculator.js index 774b232..cd6490a 100644 --- a/demos/declarative/calculator/calculator.js +++ b/demos/declarative/calculator/calculator.js @@ -5,9 +5,9 @@ var lastOp = ""; var timer = 0; function disabled(op) { - if (op == "." && CurNum.text.toString().search(/\./) != -1) { + if (op == "." && curNum.text.toString().search(/\./) != -1) { return true; - } else if (op == "Sqrt" && CurNum.text.toString().search(/-/) != -1) { + } else if (op == "Sqrt" && curNum.text.toString().search(/-/) != -1) { return true; } else { return false; @@ -20,12 +20,12 @@ function doOp(op) { } if (op.toString().length==1 && ((op >= "0" && op <= "9") || op==".") ) { - if (CurNum.text.toString().length >= 14) + if (curNum.text.toString().length >= 14) return; // No arbitrary length numbers if (lastOp.toString().length == 1 && ((lastOp >= "0" && lastOp <= "9") || lastOp==".") ) { - CurNum.text = CurNum.text + op.toString(); + curNum.text = curNum.text + op.toString(); } else { - CurNum.text = op; + curNum.text = op; } lastOp = op; return; @@ -33,55 +33,55 @@ function doOp(op) { lastOp = op; // Pending operations - if (CurrentOperation.text == "+") { - CurNum.text = Number(CurNum.text.valueOf()) + Number(curVal.valueOf()); - } else if (CurrentOperation.text == "-") { - CurNum.text = Number(curVal) - Number(CurNum.text.valueOf()); - } else if (CurrentOperation.text == "x") { - CurNum.text = Number(curVal) * Number(CurNum.text.valueOf()); - } else if (CurrentOperation.text == "/") { - CurNum.text = Number(Number(curVal) / Number(CurNum.text.valueOf())).toString(); - } else if (CurrentOperation.text == "=") { + if (currentOperation.text == "+") { + curNum.text = Number(curNum.text.valueOf()) + Number(curVal.valueOf()); + } else if (currentOperation.text == "-") { + curNum.text = Number(curVal) - Number(curNum.text.valueOf()); + } else if (currentOperation.text == "x") { + curNum.text = Number(curVal) * Number(curNum.text.valueOf()); + } else if (currentOperation.text == "/") { + curNum.text = Number(Number(curVal) / Number(curNum.text.valueOf())).toString(); + } else if (currentOperation.text == "=") { } if (op == "+" || op == "-" || op == "x" || op == "/") { - CurrentOperation.text = op; - curVal = CurNum.text.valueOf(); + currentOperation.text = op; + curVal = curNum.text.valueOf(); return; } curVal = 0; - CurrentOperation.text = ""; + currentOperation.text = ""; // Immediate operations if (op == "1/x") { // reciprocal - CurNum.text = (1 / CurNum.text.valueOf()).toString(); + curNum.text = (1 / curNum.text.valueOf()).toString(); } else if (op == "^2") { // squared - CurNum.text = (CurNum.text.valueOf() * CurNum.text.valueOf()).toString(); + curNum.text = (curNum.text.valueOf() * curNum.text.valueOf()).toString(); } else if (op == "Abs") { - CurNum.text = (Math.abs(CurNum.text.valueOf())).toString(); + curNum.text = (Math.abs(curNum.text.valueOf())).toString(); } else if (op == "Int") { - CurNum.text = (Math.floor(CurNum.text.valueOf())).toString(); + curNum.text = (Math.floor(curNum.text.valueOf())).toString(); } else if (op == "+/-") { // plus/minus - CurNum.text = (CurNum.text.valueOf() * -1).toString(); + curNum.text = (curNum.text.valueOf() * -1).toString(); } else if (op == "Sqrt") { // square root - CurNum.text = (Math.sqrt(CurNum.text.valueOf())).toString(); + curNum.text = (Math.sqrt(curNum.text.valueOf())).toString(); } else if (op == "MC") { // memory clear memory = 0; } else if (op == "M+") { // memory increment - memory += CurNum.text.valueOf(); + memory += curNum.text.valueOf(); } else if (op == "MR") { // memory recall - CurNum.text = memory.toString(); + curNum.text = memory.toString(); } else if (op == "MS") { // memory set - memory = CurNum.text.valueOf(); + memory = curNum.text.valueOf(); } else if (op == "Bksp") { - CurNum.text = CurNum.text.toString().slice(0, -1); + curNum.text = curNum.text.toString().slice(0, -1); } else if (op == "C") { - CurNum.text = "0"; + curNum.text = "0"; } else if (op == "AC") { curVal = 0; memory = 0; lastOp = ""; - CurNum.text ="0"; + curNum.text ="0"; } } diff --git a/demos/declarative/calculator/calculator.qml b/demos/declarative/calculator/calculator.qml index d93f04a..8041025 100644 --- a/demos/declarative/calculator/calculator.qml +++ b/demos/declarative/calculator/calculator.qml @@ -1,36 +1,35 @@ import Qt 4.6 Rectangle { - id: MainWindow; - width: 320; height: 270; color: Palette.window + width: 320; height: 270; color: palette.window - SystemPalette { id: Palette; colorGroup: Qt.Active } + SystemPalette { id: palette; colorGroup: Qt.Active } Script { source: "calculator.js" } Column { x: 2; spacing: 10; Rectangle { - id: Container + id: container width: 316; height: 50 - border.color: Palette.dark; color: Palette.base + border.color: palette.dark; color: palette.base Text { - id: CurNum + id: curNum font.bold: true; font.pointSize: 16 - color: Palette.text - anchors.right: Container.right + color: palette.text + anchors.right: container.right anchors.rightMargin: 5 - anchors.verticalCenter: Container.verticalCenter + anchors.verticalCenter: container.verticalCenter } Text { - id: CurrentOperation - color: Palette.text + id: currentOperation + color: palette.text font.bold: true; font.pointSize: 16 - anchors.left: Container.left + anchors.left: container.left anchors.leftMargin: 5 - anchors.verticalCenter: Container.verticalCenter + anchors.verticalCenter: container.verticalCenter } } @@ -38,7 +37,7 @@ Rectangle { width: 320; height: 30 CalcButton { - id: AdvancedCheckBox + id: advancedCheckBox x: 55; width: 206 operation: "Advanced Mode" toggable: true @@ -49,15 +48,15 @@ Rectangle { width: 320 Item { - id: BasicButtons + id: basicButtons x: 55; width: 160; height: 160 - CalcButton { operation: "Bksp"; id: Bksp; width: 67; opacity: 0 } - CalcButton { operation: "C"; id: C; width: 76 } - CalcButton { operation: "AC"; id: AC; x: 78; width: 76 } + CalcButton { operation: "Bksp"; id: bksp; width: 67; opacity: 0 } + CalcButton { operation: "C"; id: c; width: 76 } + CalcButton { operation: "AC"; id: ac; x: 78; width: 76 } Grid { - id: NumKeypad; y: 32; spacing: 2; columns: 3 + id: numKeypad; y: 32; spacing: 2; columns: 3 CalcButton { operation: "7" } CalcButton { operation: "8" } @@ -75,11 +74,11 @@ Rectangle { CalcButton { operation: "0"; width: 50 } CalcButton { operation: "."; x: 77; width: 50 } - CalcButton { operation: "="; id: Equals; x: 77; width: 102 } + CalcButton { operation: "="; id: equals; x: 77; width: 102 } } Column { - id: SimpleOperations + id: simpleOperations x: 156; y: 0; spacing: 2 CalcButton { operation: "x" } @@ -90,7 +89,7 @@ Rectangle { } Grid { - id: AdvancedButtons + id: advancedButtons x: 350; spacing: 2; columns: 2; opacity: 0 CalcButton { operation: "Abs" } @@ -109,14 +108,14 @@ Rectangle { states: [ State { - name: "Advanced"; when: AdvancedCheckBox.toggled == true - PropertyChanges { target: BasicButtons; x: 0 } - PropertyChanges { target: SimpleOperations; y: 32 } - PropertyChanges { target: Bksp; opacity: 1 } - PropertyChanges { target: C; x: 69; width: 67 } - PropertyChanges { target: AC; x: 138; width: 67 } - PropertyChanges { target: Equals; width: 50 } - PropertyChanges { target: AdvancedButtons; x: 210; opacity: 1 } + name: "Advanced"; when: advancedCheckBox.toggled == true + PropertyChanges { target: basicButtons; x: 0 } + PropertyChanges { target: simpleOperations; y: 32 } + PropertyChanges { target: bksp; opacity: 1 } + PropertyChanges { target: c; x: 69; width: 67 } + PropertyChanges { target: ac; x: 138; width: 67 } + PropertyChanges { target: equals; width: 50 } + PropertyChanges { target: advancedButtons; x: 210; opacity: 1 } } ] diff --git a/demos/declarative/contacts/Contact.qml b/demos/declarative/contacts/Contact.qml index 91510c7..e12cd3b 100644 --- a/demos/declarative/contacts/Contact.qml +++ b/demos/declarative/contacts/Contact.qml @@ -82,8 +82,8 @@ Item { } Column { id: layout - width: contents.width - height:contents.height + width: childrenRect.width + height: childrenRect.height anchors.centerIn: parent spacing: 5 ContactField { diff --git a/demos/declarative/flickr/common/ImageDetails.qml b/demos/declarative/flickr/common/ImageDetails.qml index 6b42910..b8b7d29 100644 --- a/demos/declarative/flickr/common/ImageDetails.qml +++ b/demos/declarative/flickr/common/ImageDetails.qml @@ -1,9 +1,9 @@ import Qt 4.6 Flipable { - id: Container + id: container - property var frontContainer: ContainerFront + property var frontContainer: containerFront property string photoTitle: "" property string photoDescription: "" property string photoTags: "" @@ -19,13 +19,13 @@ Flipable { signal closed transform: Rotation { - id: DetailsRotation - origin.x: Container.width / 2; + id: detailsRotation + origin.x: container.width / 2; axis.y: 1; axis.z: 0 } front: Item { - id: ContainerFront; anchors.fill: Container + id: containerFront; anchors.fill: container Rectangle { anchors.fill: parent @@ -34,74 +34,74 @@ Flipable { } MediaButton { - id: BackButton; x: 630; y: 370; text: "Back" - onClicked: { Container.closed() } + id: backButton; x: 630; y: 370; text: "Back" + onClicked: { container.closed() } } MediaButton { - id: MoreButton; x: 530; y: 370; text: "View..." - onClicked: { Container.state='Back' } + id: moreButton; x: 530; y: 370; text: "View..." + onClicked: { container.state='Back' } } - Text { id: TitleText; style: "Raised"; styleColor: "black"; color: "white"; elide: "ElideRight" - x: 220; y: 30; width: parent.width - 240; text: Container.photoTitle; font.pointSize: 22 } + Text { id: titleText; style: "Raised"; styleColor: "black"; color: "white"; elide: "ElideRight" + x: 220; y: 30; width: parent.width - 240; text: container.photoTitle; font.pointSize: 22 } - LikeOMeter { x: 40; y: 250; rating: Container.rating } + LikeOMeter { x: 40; y: 250; rating: container.rating } - Flickable { id: FlickSurface; x: 220; width: 480; height: 210; y: 130; clip: true - viewportWidth: 480; viewportHeight: DescriptionText.height + Flickable { id: flickable; x: 220; width: 480; height: 210; y: 130; clip: true + viewportWidth: 480; viewportHeight: descriptionText.height - WebView { id: DescriptionText; width: parent.width - html: "<style TYPE=\"text/css\">body {color: white;} a:link {color: cyan; text-decoration: underline; }</style>" + Container.photoDescription } + WebView { id: descriptionText; width: parent.width + html: "<style TYPE=\"text/css\">body {color: white;} a:link {color: cyan; text-decoration: underline; }</style>" + container.photoDescription } } - Text { id: Size; color: "white"; width: 300; x: 40; y: 300 - text: "<b>Size:</b> " + Container.photoWidth + 'x' + Container.photoHeight } - Text { id: Type; color: "white"; width: 300; x: 40; anchors.top: Size.bottom - text: "<b>Type:</b> " + Container.photoType } - - Text { id: Author; color: "white"; width: 300; x: 220; y: 80 - text: "<b>Author:</b> " + Container.photoAuthor } - Text { id: Date; color: "white"; width: 300; x: 220; anchors.top: Author.bottom - text: "<b>Published:</b> " + Container.photoDate } - Text { id: TagsLabel; color: "white"; x: 220; anchors.top: Date.bottom; - text: Container.photoTags == "" ? "" : "<b>Tags:</b> " } - Text { id: Tags; color: "white"; width: parent.width-x-20; - anchors.left: TagsLabel.right; anchors.top: Date.bottom; - elide: "ElideRight"; text: Container.photoTags } - - ScrollBar { id: ScrollBar; x: 720; y: FlickSurface.y; width: 7; height: FlickSurface.height; opacity: 0; - flickableArea: FlickSurface; clip: true } + Text { id: size; color: "white"; width: 300; x: 40; y: 300 + text: "<b>Size:</b> " + container.photoWidth + 'x' + container.photoHeight } + Text { id: type; color: "white"; width: 300; x: 40; anchors.top: size.bottom + text: "<b>Type:</b> " + container.photoType } + + Text { id: author; color: "white"; width: 300; x: 220; y: 80 + text: "<b>Author:</b> " + container.photoAuthor } + Text { id: date; color: "white"; width: 300; x: 220; anchors.top: author.bottom + text: "<b>Published:</b> " + container.photoDate } + Text { id: tagsLabel; color: "white"; x: 220; anchors.top: date.bottom; + text: container.photoTags == "" ? "" : "<b>Tags:</b> " } + Text { id: tags; color: "white"; width: parent.width-x-20; + anchors.left: tagsLabel.right; anchors.top: date.bottom; + elide: "ElideRight"; text: container.photoTags } + + ScrollBar { id: scrollBar; x: 720; y: flickable.y; width: 7; height: flickable.height; opacity: 0; + flickableArea: flickable; clip: true } } back: Item { - anchors.fill: Container + anchors.fill: container Rectangle { anchors.fill: parent; color: "black"; opacity: 0.4; border.color: "white"; border.width: 2 } - Progress { anchors.centerIn: parent; width: 200; height: 18; progress: BigImage.progress; visible: BigImage.status!=1 } + Progress { anchors.centerIn: parent; width: 200; height: 18; progress: bigImage.progress; visible: bigImage.status!=1 } Flickable { - id: Flick; width: Container.width - 10; height: Container.height - 10 + id: flick; width: container.width - 10; height: container.height - 10 x: 5; y: 5; clip: true; - viewportWidth: ImageContainer.width; viewportHeight: ImageContainer.height + viewportWidth: imageContainer.width; viewportHeight: imageContainer.height Item { - id: ImageContainer - width: Math.max(BigImage.width * BigImage.scale, Flick.width); - height: Math.max(BigImage.height * BigImage.scale, Flick.height); + id: imageContainer + width: Math.max(bigImage.width * bigImage.scale, flick.width); + height: Math.max(bigImage.height * bigImage.scale, flick.height); Image { - id: BigImage; source: Container.photoUrl; scale: Slider.value + id: bigImage; source: container.photoUrl; scale: slider.value // Center image if it is smaller than the flickable area. - x: ImageContainer.width > width*scale ? (ImageContainer.width - width*scale) / 2 : 0 - y: ImageContainer.height > height*scale ? (ImageContainer.height - height*scale) / 2 : 0 - smooth: !Flick.moving + x: imageContainer.width > width*scale ? (imageContainer.width - width*scale) / 2 : 0 + y: imageContainer.height > height*scale ? (imageContainer.height - height*scale) / 2 : 0 + smooth: !flick.moving onStatusChanged : { // Default scale shows the entire image. if (status == 1 && width != 0) { - Slider.minimum = Math.min(Flick.width / width, Flick.height / height); - prevScale = Math.min(Slider.minimum, 1); - Slider.value = prevScale; + slider.minimum = Math.min(flick.width / width, flick.height / height); + prevScale = Math.min(slider.minimum, 1); + slider.value = prevScale; } } } @@ -109,24 +109,24 @@ Flipable { } MediaButton { - id: BackButton2; x: 630; y: 370; text: "Back"; onClicked: { Container.state = '' } + id: backButton2; x: 630; y: 370; text: "Back"; onClicked: { container.state = '' } } Text { text: "Image Unavailable" - visible: BigImage.status == 'Error' + visible: bigImage.status == 'Error' anchors.centerIn: parent; color: "white"; font.bold: true } Slider { - id: Slider; x: 25; y: 374; visible: { BigImage.status == 1 && maximum > minimum } + id: slider; x: 25; y: 374; visible: { bigImage.status == 1 && maximum > minimum } onValueChanged: { - if (BigImage.width * value > Flick.width) { - var xoff = (Flick.width/2 + Flick.viewportX) * value / prevScale; - Flick.viewportX = xoff - Flick.width/2; + if (bigImage.width * value > flick.width) { + var xoff = (flick.width/2 + flick.viewportX) * value / prevScale; + flick.viewportX = xoff - flick.width/2; } - if (BigImage.height * value > Flick.height) { - var yoff = (Flick.height/2 + Flick.viewportY) * value / prevScale; - Flick.viewportY = yoff - Flick.height/2; + if (bigImage.height * value > flick.height) { + var yoff = (flick.height/2 + flick.viewportY) * value / prevScale; + flick.viewportY = yoff - flick.height/2; } prevScale = value; } @@ -136,7 +136,7 @@ Flipable { states: [ State { name: "Back" - PropertyChanges { target: DetailsRotation; angle: 180 } + PropertyChanges { target: detailsRotation; angle: 180 } } ] @@ -144,15 +144,15 @@ Flipable { Transition { SequentialAnimation { PropertyAction { - target: BigImage + target: bigImage property: "smooth" value: false } NumberAnimation { easing: "easeInOutQuad"; properties: "angle"; duration: 500 } PropertyAction { - target: BigImage + target: bigImage property: "smooth" - value: !Flick.moving + value: !flick.moving } } } diff --git a/demos/declarative/flickr/common/LikeOMeter.qml b/demos/declarative/flickr/common/LikeOMeter.qml index 754dbb1..5ee048b 100644 --- a/demos/declarative/flickr/common/LikeOMeter.qml +++ b/demos/declarative/flickr/common/LikeOMeter.qml @@ -1,35 +1,35 @@ import Qt 4.6 Item { - id: Container + id: container property int rating: 2 Row { Star { rating: 0 - onClicked: { Container.rating = rating } - on: Container.rating >= 0 + onClicked: { container.rating = rating } + on: container.rating >= 0 } Star { rating: 1 - onClicked: { Container.rating = rating } - on: Container.rating >= 1 + onClicked: { container.rating = rating } + on: container.rating >= 1 } Star { rating: 2 - onClicked: { Container.rating = rating } - on: Container.rating >= 2 + onClicked: { container.rating = rating } + on: container.rating >= 2 } Star { rating: 3 - onClicked: { Container.rating = rating } - on: Container.rating >= 3 + onClicked: { container.rating = rating } + on: container.rating >= 3 } Star { rating: 4 - onClicked: { Container.rating = rating } - on: Container.rating >= 4 + onClicked: { container.rating = rating } + on: container.rating >= 4 } } } diff --git a/demos/declarative/flickr/common/Loading.qml b/demos/declarative/flickr/common/Loading.qml index ff2c829..64a04c4 100644 --- a/demos/declarative/flickr/common/Loading.qml +++ b/demos/declarative/flickr/common/Loading.qml @@ -1,8 +1,8 @@ import Qt 4.6 Image { - id: Loading; source: "pics/loading.png"; transformOrigin: "Center" + id: loading; source: "pics/loading.png"; transformOrigin: "Center" rotation: NumberAnimation { - id: "RotationAnimation"; from: 0; to: 360; running: Loading.visible == true; repeat: true; duration: 900 + id: "RotationAnimation"; from: 0; to: 360; running: loading.visible == true; repeat: true; duration: 900 } } diff --git a/demos/declarative/flickr/common/MediaButton.qml b/demos/declarative/flickr/common/MediaButton.qml index e1e09e8..c12b642 100644 --- a/demos/declarative/flickr/common/MediaButton.qml +++ b/demos/declarative/flickr/common/MediaButton.qml @@ -1,39 +1,39 @@ import Qt 4.6 Item { - id: Container + id: container signal clicked property string text Image { - id: ButtonImage + id: buttonImage source: "pics/button.png" } Image { - id: Pressed + id: pressed source: "pics/button-pressed.png" opacity: 0 } MouseRegion { - id: MyMouseRegion - anchors.fill: ButtonImage - onClicked: { Container.clicked(); } + id: mouseRegion + anchors.fill: buttonImage + onClicked: { container.clicked(); } } Text { font.bold: true color: "white" - anchors.centerIn: ButtonImage - text: Container.text + anchors.centerIn: buttonImage + text: container.text } - width: ButtonImage.width + width: buttonImage.width states: [ State { name: "Pressed" - when: MyMouseRegion.pressed == true + when: mouseRegion.pressed == true PropertyChanges { - target: Pressed + target: pressed opacity: 1 } } diff --git a/demos/declarative/flickr/common/MediaLineEdit.qml b/demos/declarative/flickr/common/MediaLineEdit.qml index 7599ce6a05..4b21f66 100644 --- a/demos/declarative/flickr/common/MediaLineEdit.qml +++ b/demos/declarative/flickr/common/MediaLineEdit.qml @@ -1,42 +1,42 @@ import Qt 4.6 Item { - id: Container + id: container property string label property string text - width: Math.max(94,Label.width + Editor.width + 20) - height: ButtonImage.height + width: Math.max(94,label.width + editor.width + 20) + height: buttonImage.height states: [ State { name: "Edit" PropertyChanges { - target: Label - text: Container.label + ": " + target: label + text: container.label + ": " } PropertyChanges { - target: Label + target: label x: 10 } PropertyChanges { - target: Editor + target: editor cursorVisible: true width: 100 } PropertyChanges { - target: Container + target: container focus: true } StateChangeScript { - script:"Editor.selectAll()" + script:"editor.selectAll()" } }, State { // When returning to default state, typed text is propagated StateChangeScript { - script: "Container.text = Editor.text" + script: "container.text = editor.text" } } ] @@ -48,29 +48,29 @@ Item { BorderImage { - id: ButtonImage + id: buttonImage source: "pics/button.sci" - anchors.left: Container.left - anchors.right: Container.right + anchors.left: container.left + anchors.right: container.right } BorderImage { - id: Pressed + id: pressed source: "pics/button-pressed.sci" opacity: 0 - anchors.left: Container.left - anchors.right: Container.right + anchors.left: container.left + anchors.right: container.right } MouseRegion { - id: MyMouseRegion - anchors.fill: ButtonImage - onClicked: { Container.state = Container.state=="Edit" ? "" : "Edit" } + id: mouseRegion + anchors.fill: buttonImage + onClicked: { container.state = container.state=="Edit" ? "" : "Edit" } states: [ State { - when: MyMouseRegion.pressed == true + when: mouseRegion.pressed == true PropertyChanges { - target: Pressed + target: pressed opacity: 1 } } @@ -78,27 +78,27 @@ Item { } Text { - id: Label + id: label font.bold: true color: "white" - anchors.verticalCenter: Container.verticalCenter - x: (Container.width - width)/2 - text: Container.label + "..." + anchors.verticalCenter: container.verticalCenter + x: (container.width - width)/2 + text: container.label + "..." } TextInput { - id: Editor + id: editor font.bold: true color: "white" selectionColor: "green" width: 0 clip: true - anchors.left: Label.right - anchors.verticalCenter: Container.verticalCenter + anchors.left: label.right + anchors.verticalCenter: container.verticalCenter } - Keys.forwardTo: [(ReturnKey), (Editor)] + Keys.forwardTo: [(returnKey), (editor)] Item { - id: ReturnKey - Keys.onReturnPressed: "Container.state = ''" + id: returnKey + Keys.onReturnPressed: "container.state = ''" } } diff --git a/demos/declarative/flickr/common/Progress.qml b/demos/declarative/flickr/common/Progress.qml index 00ef901..fd9be10 100644 --- a/demos/declarative/flickr/common/Progress.qml +++ b/demos/declarative/flickr/common/Progress.qml @@ -1,12 +1,10 @@ import Qt 4.6 Item { - id: Progress; - property var progress: 0 Rectangle { - id: Container; anchors.fill: parent; smooth: true + anchors.fill: parent; smooth: true border.color: "white"; border.width: 0; radius: height/2 - 2 gradient: Gradient { GradientStop { position: 0; color: "#66343434" } @@ -15,7 +13,6 @@ Item { } Rectangle { - id: Fill y: 2; height: parent.height-4; x: 2; width: Math.max(parent.width * progress - 4, 0); opacity: width < 1 ? 0 : 1; smooth: true diff --git a/demos/declarative/flickr/common/ScrollBar.qml b/demos/declarative/flickr/common/ScrollBar.qml index d31c57c..feebcb0 100644 --- a/demos/declarative/flickr/common/ScrollBar.qml +++ b/demos/declarative/flickr/common/ScrollBar.qml @@ -1,7 +1,7 @@ import Qt 4.6 Item { - id: Container + id: container property var flickableArea @@ -12,16 +12,16 @@ Item { border.color: "white" border.width: 2 x: 0 - y: flickableArea.visibleArea.yPosition * Container.height + y: flickableArea.visibleArea.yPosition * container.height width: parent.width - height: flickableArea.visibleArea.heightRatio * Container.height + height: flickableArea.visibleArea.heightRatio * container.height } states: [ State { name: "show" when: flickableArea.moving PropertyChanges { - target: Container + target: container opacity: 1 } } @@ -31,7 +31,7 @@ Item { from: "*" to: "*" NumberAnimation { - target: Container + target: container properties: "opacity" duration: 400 } diff --git a/demos/declarative/flickr/common/Slider.qml b/demos/declarative/flickr/common/Slider.qml index b88636d..fa1645c 100644 --- a/demos/declarative/flickr/common/Slider.qml +++ b/demos/declarative/flickr/common/Slider.qml @@ -1,17 +1,17 @@ import Qt 4.6 Item { - id: Slider; width: 400; height: 16 + id: slider; width: 400; height: 16 // value is read/write. property real value - onValueChanged: { Handle.x = 2 + (value - minimum) * Slider.xMax / (maximum - minimum); } + onValueChanged: { handle.x = 2 + (value - minimum) * slider.xMax / (maximum - minimum); } property real maximum: 1 property real minimum: 1 - property int xMax: Slider.width - Handle.width - 4 + property int xMax: slider.width - handle.width - 4 Rectangle { - id: Container; anchors.fill: parent + anchors.fill: parent border.color: "white"; border.width: 0; radius: 8 gradient: Gradient { GradientStop { position: 0.0; color: "#66343434" } @@ -20,8 +20,8 @@ Item { } Rectangle { - id: Handle; smooth: true - x: Slider.width / 2 - Handle.width / 2; y: 2; width: 30; height: Slider.height-4; radius: 6 + id: handle; smooth: true + x: slider.width / 2 - handle.width / 2; y: 2; width: 30; height: slider.height-4; radius: 6 gradient: Gradient { GradientStop { position: 0.0; color: "lightgray" } GradientStop { position: 1.0; color: "gray" } @@ -29,8 +29,8 @@ Item { MouseRegion { anchors.fill: parent; drag.target: parent - drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: Slider.xMax+2 - onPositionChanged: { value = (maximum - minimum) * (Handle.x-2) / Slider.xMax + minimum; } + drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: slider.xMax+2 + onPositionChanged: { value = (maximum - minimum) * (handle.x-2) / slider.xMax + minimum; } } } } diff --git a/demos/declarative/flickr/common/Star.qml b/demos/declarative/flickr/common/Star.qml index c4d1bec..173021b 100644 --- a/demos/declarative/flickr/common/Star.qml +++ b/demos/declarative/flickr/common/Star.qml @@ -1,17 +1,16 @@ import Qt 4.6 Item { - id: Container + id: container width: 24 height: 24 property int rating property bool on - signal clicked Image { - id: StarImage + id: starImage source: "pics/ghns_star.png" x: 6 y: 7 @@ -19,15 +18,15 @@ Item { scale: 0.5 } MouseRegion { - anchors.fill: Container - onClicked: { Container.clicked() } + anchors.fill: container + onClicked: { container.clicked() } } states: [ State { name: "on" - when: Container.on == true + when: container.on == true PropertyChanges { - target: StarImage + target: starImage opacity: 1 scale: 1 x: 1 diff --git a/demos/declarative/flickr/flickr-desktop.qml b/demos/declarative/flickr/flickr-desktop.qml index f8cf048..d1ad6e1 100644 --- a/demos/declarative/flickr/flickr-desktop.qml +++ b/demos/declarative/flickr/flickr-desktop.qml @@ -3,79 +3,79 @@ import Qt 4.6 import "common" Item { - id: MainWindow; width: 800; height: 450 + id: mainWindow; width: 800; height: 450 property bool showPathView : false resources: [ Component { - id: PhotoDelegate + id: photoDelegate Item { - id: Wrapper; width: 85; height: 85 - scale: Wrapper.PathView.scale; z: Wrapper.PathView.z + id: wrapper; width: 85; height: 85 + scale: wrapper.PathView.scale; z: wrapper.PathView.z transform: Rotation { - id: ItemRotation; origin.x: Wrapper.width/2; origin.y: Wrapper.height/2 - axis.y: 1; axis.z: 0; angle: Wrapper.PathView.angle + id: itemRotation; origin.x: wrapper.width/2; origin.y: wrapper.height/2 + axis.y: 1; axis.z: 0; angle: wrapper.PathView.angle } Connection { - sender: ImageDetails; signal: "closed()" + sender: imageDetails; signal: "closed()" script: { - if (Wrapper.state == 'Details') { - Wrapper.state = ''; - ImageDetails.photoUrl = ""; + if (wrapper.state == 'Details') { + wrapper.state = ''; + imageDetails.photoUrl = ""; } } } Script { function photoClicked() { - ImageDetails.photoTitle = title; - ImageDetails.photoDescription = description; - ImageDetails.photoTags = tags; - ImageDetails.photoWidth = photoWidth; - ImageDetails.photoHeight = photoHeight; - ImageDetails.photoType = photoType; - ImageDetails.photoAuthor = photoAuthor; - ImageDetails.photoDate = photoDate; - ImageDetails.photoUrl = url; - ImageDetails.rating = 0; - Wrapper.state = "Details"; + imageDetails.photoTitle = title; + imageDetails.photoDescription = description; + imageDetails.photoTags = tags; + imageDetails.photoWidth = photoWidth; + imageDetails.photoHeight = photoHeight; + imageDetails.photoType = photoType; + imageDetails.photoAuthor = photoAuthor; + imageDetails.photoDate = photoDate; + imageDetails.photoUrl = url; + imageDetails.rating = 0; + wrapper.state = "Details"; } } Rectangle { - id: WhiteRect; anchors.fill: parent; color: "white"; radius: 5 + id: whiteRect; anchors.fill: parent; color: "white"; radius: 5 - Loading { x: 26; y: 26; visible: Thumb.status!=1 } - Image { id: Thumb; source: imagePath; x: 5; y: 5 } + Loading { x: 26; y: 26; visible: thumb.status!=1 } + Image { id: thumb; source: imagePath; x: 5; y: 5 } Item { - id: Shadows - Image { source: "common/pics/shadow-right.png"; x: WhiteRect.width; height: WhiteRect.height } - Image { source: "common/pics/shadow-bottom.png"; y: WhiteRect.height; width: WhiteRect.width } - Image { id: Corner; source: "common/pics/shadow-corner.png"; x: WhiteRect.width; y: WhiteRect.height } + id: shadows + Image { source: "common/pics/shadow-right.png"; x: whiteRect.width; height: whiteRect.height } + Image { source: "common/pics/shadow-bottom.png"; y: whiteRect.height; width: whiteRect.width } + Image { id: Corner; source: "common/pics/shadow-corner.png"; x: whiteRect.width; y: whiteRect.height } } } - MouseRegion { anchors.fill: Wrapper; onClicked: { photoClicked() } } + MouseRegion { anchors.fill: wrapper; onClicked: { photoClicked() } } states: [ State { name: "Details" - PropertyChanges { target: ImageDetails; z: 2 } - ParentChange { target: Wrapper; parent: ImageDetails.frontContainer } - PropertyChanges { target: Wrapper; x: 45; y: 35; scale: 1; z: 1000 } - PropertyChanges { target: ItemRotation; angle: 0 } - PropertyChanges { target: Shadows; opacity: 0 } - PropertyChanges { target: ImageDetails; y: 20 } - PropertyChanges { target: PhotoGridView; y: -480 } - PropertyChanges { target: PhotoPathView; y: -480 } - PropertyChanges { target: ViewModeButton; opacity: 0 } - PropertyChanges { target: TagsEdit; opacity: 0 } - PropertyChanges { target: FetchButton; opacity: 0 } - PropertyChanges { target: CategoryText; y: "-50" } + PropertyChanges { target: imageDetails; z: 2 } + ParentChange { target: wrapper; parent: imageDetails.frontContainer } + PropertyChanges { target: wrapper; x: 45; y: 35; scale: 1; z: 1000 } + PropertyChanges { target: itemRotation; angle: 0 } + PropertyChanges { target: shadows; opacity: 0 } + PropertyChanges { target: imageDetails; y: 20 } + PropertyChanges { target: photoGridView; y: -480 } + PropertyChanges { target: photoPathView; y: -480 } + PropertyChanges { target: viewModeButton; opacity: 0 } + PropertyChanges { target: tagsEdit; opacity: 0 } + PropertyChanges { target: fetchButton; opacity: 0 } + PropertyChanges { target: categoryText; y: "-50" } } ] @@ -92,7 +92,7 @@ Item { SequentialAnimation { ParentAction { } NumberAnimation { properties: "x,y,scale,opacity,angle"; duration: 500; easing: "easeInOutQuad" } - PropertyAction { target: Wrapper; properties: "z" } + PropertyAction { target: wrapper; properties: "z" } } } ] @@ -102,21 +102,21 @@ Item { ] Item { - id: Background + id: background anchors.fill: parent Image { source: "common/pics/background.png"; anchors.fill: parent } - RssModel { id: RssModel; tags : TagsEdit.text } - Loading { anchors.centerIn: parent; visible: RssModel.status == 2 } + RssModel { id: rssModel; tags : tagsEdit.text } + Loading { anchors.centerIn: parent; visible: rssModel.status == 2 } GridView { - id: PhotoGridView; model: RssModel; delegate: PhotoDelegate; cacheBuffer: 100 + id: photoGridView; model: rssModel; delegate: photoDelegate; cacheBuffer: 100 cellWidth: 105; cellHeight: 105; x:32; y: 80; width: 800; height: 330; z: 1 } PathView { - id: PhotoPathView; model: RssModel; delegate: PhotoDelegate + id: photoPathView; model: rssModel; delegate: photoDelegate y: -380; width: 800; height: 330; pathItemCount: 10; z: 1 path: Path { startX: -50; startY: 40; @@ -146,36 +146,34 @@ Item { } - ImageDetails { id: ImageDetails; width: 750; x: 25; y: 500; height: 410 } + ImageDetails { id: imageDetails; width: 750; x: 25; y: 500; height: 410 } MediaButton { - id: ViewModeButton; x: 680; y: 410; text: "View Mode" - onClicked: { if (MainWindow.showPathView == true) MainWindow.showPathView = false; else MainWindow.showPathView = true } + id: viewModeButton; x: 680; y: 410; text: "View Mode" + onClicked: { if (mainWindow.showPathView == true) mainWindow.showPathView = false; else mainWindow.showPathView = true } } MediaButton { - id: FetchButton + id: fetchButton text: "Update" - anchors.right: ViewModeButton.left; anchors.rightMargin: 5 - anchors.top: ViewModeButton.top - onClicked: { RssModel.reload(); } + anchors.right: viewModeButton.left; anchors.rightMargin: 5 + anchors.top: viewModeButton.top + onClicked: { rssModel.reload(); } } MediaLineEdit { - id: TagsEdit; + id: tagsEdit; label: "Tags" - anchors.right: FetchButton.left; anchors.rightMargin: 5 - anchors.top: ViewModeButton.top + anchors.right: fetchButton.left; anchors.rightMargin: 5 + anchors.top: viewModeButton.top } - states: [ - State { - name: "PathView" - when: MainWindow.showPathView == true - PropertyChanges { target: PhotoPathView; y: 80 } - PropertyChanges { target: PhotoGridView; y: -380 } - } - ] + states: State { + name: "PathView" + when: mainWindow.showPathView == true + PropertyChanges { target: photoPathView; y: 80 } + PropertyChanges { target: photoGridView; y: -380 } + } transitions: [ Transition { @@ -186,9 +184,9 @@ Item { } Text { - id: CategoryText; anchors.horizontalCenter: parent.horizontalCenter; y: 15; + id: categoryText; anchors.horizontalCenter: parent.horizontalCenter; y: 15; text: "Flickr - " + - (RssModel.tags=="" ? "Uploads from everyone" : "Recent Uploads tagged " + RssModel.tags) + (rssModel.tags=="" ? "Uploads from everyone" : "Recent Uploads tagged " + rssModel.tags) font.pointSize: 20; font.bold: true; color: "white"; style: "Raised"; styleColor: "black" } } diff --git a/demos/declarative/flickr/flickr-mobile.qml b/demos/declarative/flickr/flickr-mobile.qml index 32f3e37..48fe7df 100644 --- a/demos/declarative/flickr/flickr-mobile.qml +++ b/demos/declarative/flickr/flickr-mobile.qml @@ -3,38 +3,38 @@ import "common" as Common import "mobile" as Mobile Item { - id: Screen; width: 320; height: 480 + id: screen; width: 320; height: 480 property bool inListView : false Rectangle { - id: Background + id: background anchors.fill: parent; color: "#343434"; Image { source: "mobile/images/stripes.png"; fillMode: "Tile"; anchors.fill: parent; opacity: 0.3 } - Common.RssModel { id: RssModel } - Common.Loading { anchors.centerIn: parent; visible: RssModel.status == 2 } + Common.RssModel { id: rssModel } + Common.Loading { anchors.centerIn: parent; visible: rssModel.status == 2 } Item { - id: Views + id: views x: 2; width: parent.width - 4 - anchors.top: TitleBar.bottom; anchors.bottom: ToolBar.top + anchors.top: titleBar.bottom; anchors.bottom: toolBar.top - Mobile.GridDelegate { id: GridDelegate } + Mobile.GridDelegate { id: gridDelegate } GridView { - id: PhotoGridView; model: RssModel; delegate: GridDelegate; cacheBuffer: 100 + id: photoGridView; model: rssModel; delegate: gridDelegate; cacheBuffer: 100 cellWidth: 79; cellHeight: 79; width: parent.width; height: parent.height - 1; z: 6 } - Mobile.ListDelegate { id: ListDelegate } + Mobile.ListDelegate { id: listDelegate } ListView { - id: PhotoListView; model: RssModel; delegate: ListDelegate; z: 6 + id: photoListView; model: rssModel; delegate: listDelegate; z: 6 width: parent.width; height: parent.height; x: -(parent.width * 1.5); cacheBuffer: 100; } states: State { - name: "ListView"; when: Screen.inListView == true - PropertyChanges { target: PhotoListView; x: 0 } - PropertyChanges { target: PhotoGridView; x: -(parent.width * 1.5) } + name: "ListView"; when: screen.inListView == true + PropertyChanges { target: photoListView; x: 0 } + PropertyChanges { target: photoGridView; x: -(parent.width * 1.5) } } transitions: Transition { @@ -42,37 +42,37 @@ Item { } } - Mobile.ImageDetails { id: ImageDetails; width: parent.width; anchors.left: Views.right; height: parent.height; z:1 } - Mobile.TitleBar { id: TitleBar; z: 5; width: parent.width; height: 40; opacity: 0.9 } + Mobile.ImageDetails { id: imageDetails; width: parent.width; anchors.left: views.right; height: parent.height; z:1 } + Mobile.TitleBar { id: titleBar; z: 5; width: parent.width; height: 40; opacity: 0.9 } Mobile.ToolBar { - id: ToolBar; z: 5 + id: toolBar; z: 5 height: 40; anchors.bottom: parent.bottom; width: parent.width; opacity: 0.9 button1Label: "Update"; button2Label: "View mode" - onButton1Clicked: RssModel.reload() - onButton2Clicked: if (Screen.inListView == true) Screen.inListView = false; else Screen.inListView = true + onButton1Clicked: rssModel.reload() + onButton2Clicked: if (screen.inListView == true) screen.inListView = false; else screen.inListView = true } Connection { - sender: ImageDetails; signal: "closed()" + sender: imageDetails; signal: "closed()" script: { - if (Background.state == "DetailedView") { - Background.state = ''; - ImageDetails.photoUrl = ""; + if (background.state == "DetailedView") { + background.state = ''; + imageDetails.photoUrl = ""; } } } states: State { name: "DetailedView" - PropertyChanges { target: Views; x: -parent.width } - PropertyChanges { target: ToolBar; button1Label: "More..." } + PropertyChanges { target: views; x: -parent.width } + PropertyChanges { target: toolBar; button1Label: "More..." } PropertyChanges { - target: ToolBar - onButton1Clicked: if (ImageDetails.state=='') ImageDetails.state='Back'; else ImageDetails.state='' + target: toolBar + onButton1Clicked: if (imageDetails.state=='') imageDetails.state='Back'; else imageDetails.state='' } - PropertyChanges { target: ToolBar; button2Label: "Back" } - PropertyChanges { target: ToolBar; onButton2Clicked: ImageDetails.closed() } + PropertyChanges { target: toolBar; button2Label: "Back" } + PropertyChanges { target: toolBar; onButton2Clicked: imageDetails.closed() } } transitions: Transition { diff --git a/demos/declarative/flickr/mobile/Button.qml b/demos/declarative/flickr/mobile/Button.qml index 6887240..a4a96d4 100644 --- a/demos/declarative/flickr/mobile/Button.qml +++ b/demos/declarative/flickr/mobile/Button.qml @@ -1,41 +1,38 @@ import Qt 4.6 Item { - id: Container + id: container signal clicked property string text BorderImage { - id: ButtonImage + id: buttonImage source: "images/toolbutton.sci" - width: Container.width; height: Container.height + width: container.width; height: container.height } BorderImage { - id: Pressed + id: pressed opacity: 0 source: "images/toolbutton.sci" - width: Container.width; height: Container.height + width: container.width; height: container.height } MouseRegion { - id: MyMouseRegion - anchors.fill: ButtonImage - onClicked: { Container.clicked(); } + id: mouseRegion + anchors.fill: buttonImage + onClicked: { container.clicked(); } } Text { color: "white" - anchors.centerIn: ButtonImage; font.bold: true - text: Container.text; style: "Raised"; styleColor: "black" + anchors.centerIn: buttonImage; font.bold: true + text: container.text; style: "Raised"; styleColor: "black" } states: [ State { name: "Pressed" - when: MyMouseRegion.pressed == true - PropertyChanges { - target: Pressed - opacity: 1 - } + when: mouseRegion.pressed == true + PropertyChanges { target: pressed; opacity: 1 } } ] } diff --git a/demos/declarative/flickr/mobile/GridDelegate.qml b/demos/declarative/flickr/mobile/GridDelegate.qml index 19369b2..9b9fb24 100644 --- a/demos/declarative/flickr/mobile/GridDelegate.qml +++ b/demos/declarative/flickr/mobile/GridDelegate.qml @@ -1,22 +1,22 @@ import Qt 4.6 Component { - id: PhotoDelegate + id: photoDelegate Item { - id: Wrapper; width: 79; height: 79 + id: wrapper; width: 79; height: 79 Script { function photoClicked() { - ImageDetails.photoTitle = title; - ImageDetails.photoTags = tags; - ImageDetails.photoWidth = photoWidth; - ImageDetails.photoHeight = photoHeight; - ImageDetails.photoType = photoType; - ImageDetails.photoAuthor = photoAuthor; - ImageDetails.photoDate = photoDate; - ImageDetails.photoUrl = url; - ImageDetails.rating = 0; - ScaleMe.state = "Details"; + imageDetails.photoTitle = title; + imageDetails.photoTags = tags; + imageDetails.photoWidth = photoWidth; + imageDetails.photoHeight = photoHeight; + imageDetails.photoType = photoType; + imageDetails.photoAuthor = photoAuthor; + imageDetails.photoDate = photoDate; + imageDetails.photoUrl = url; + imageDetails.rating = 0; + scaleMe.state = "Details"; } } @@ -24,31 +24,31 @@ anchors.centerIn: parent scale: 0.0 scale: Behavior { NumberAnimation { easing: "easeInOutQuad"} } - id: ScaleMe + id: scaleMe - Rectangle { height: 79; width: 79; id: BlackRect; anchors.centerIn: parent; color: "black"; smooth: true } + Rectangle { height: 79; width: 79; id: blackRect; anchors.centerIn: parent; color: "black"; smooth: true } Rectangle { - id: WhiteRect; width: 77; height: 77; anchors.centerIn: parent; color: "#dddddd"; smooth: true - Image { id: Thumb; source: imagePath; x: 1; y: 1; smooth: true} + id: whiteRect; width: 77; height: 77; anchors.centerIn: parent; color: "#dddddd"; smooth: true + Image { id: thumb; source: imagePath; x: 1; y: 1; smooth: true} Image { source: "images/gloss.png" } } Connection { - sender: ToolBar; signal: "button2Clicked()" - script: if (ScaleMe.state == 'Details' ) ScaleMe.state = 'Show'; + sender: toolBar; signal: "button2Clicked()" + script: if (scaleMe.state == 'Details' ) scaleMe.state = 'Show'; } states: [ State { - name: "Show"; when: Thumb.status == 1 - PropertyChanges { target: ScaleMe; scale: 1 } + name: "Show"; when: thumb.status == 1 + PropertyChanges { target: scaleMe; scale: 1 } }, State { name: "Details" - PropertyChanges { target: ScaleMe; scale: 1 } - ParentChange { target: Wrapper; parent: ImageDetails.frontContainer } - PropertyChanges { target: Wrapper; x: 20; y: 60; z: 1000 } - PropertyChanges { target: Background; state: "DetailedView" } + PropertyChanges { target: scaleMe; scale: 1 } + ParentChange { target: wrapper; parent: imageDetails.frontContainer } + PropertyChanges { target: wrapper; x: 20; y: 60; z: 1000 } + PropertyChanges { target: background; state: "DetailedView" } } ] transitions: [ @@ -62,11 +62,11 @@ SequentialAnimation { ParentAction { } NumberAnimation { properties: "x,y"; duration: 500; easing: "easeInOutQuad" } - PropertyAction { target: Wrapper; properties: "z" } + PropertyAction { target: wrapper; properties: "z" } } } ] } - MouseRegion { anchors.fill: Wrapper; onClicked: { photoClicked() } } + MouseRegion { anchors.fill: wrapper; onClicked: { photoClicked() } } } } diff --git a/demos/declarative/flickr/mobile/ImageDetails.qml b/demos/declarative/flickr/mobile/ImageDetails.qml index c55ab50..26052b9 100644 --- a/demos/declarative/flickr/mobile/ImageDetails.qml +++ b/demos/declarative/flickr/mobile/ImageDetails.qml @@ -2,9 +2,9 @@ import Qt 4.6 import "../common" as Common Flipable { - id: Container + id: container - property var frontContainer: ContainerFront + property var frontContainer: containerFront property string photoTitle: "" property string photoTags: "" property int photoWidth @@ -19,13 +19,13 @@ Flipable { signal closed transform: Rotation { - id: ItemRotation - origin.x: Container.width / 2; + id: itemRotation + origin.x: container.width / 2; axis.y: 1; axis.z: 0 } front: Item { - id: ContainerFront; anchors.fill: Container + id: containerFront; anchors.fill: container Rectangle { anchors.fill: parent @@ -39,43 +39,43 @@ Flipable { right: parent.right; rightMargin: 20 top: parent.top; topMargin: 180 } - Text { id: TitleText; font.bold: true; color: "white"; elide: "ElideRight"; text: Container.photoTitle } - Text { id: Size; color: "white"; elide: "ElideRight"; text: "<b>Size:</b> " + Container.photoWidth + 'x' + Container.photoHeight } - Text { id: Type; color: "white"; elide: "ElideRight"; text: "<b>Type:</b> " + Container.photoType } - Text { id: Author; color: "white"; elide: "ElideRight"; text: "<b>Author:</b> " + Container.photoAuthor } - Text { id: Date; color: "white"; elide: "ElideRight"; text: "<b>Published:</b> " + Container.photoDate } - Text { id: TagsLabel; color: "white"; elide: "ElideRight"; text: Container.photoTags == "" ? "" : "<b>Tags:</b> " } - Text { id: Tags; color: "white"; elide: "ElideRight"; elide: "ElideRight"; text: Container.photoTags } + Text { font.bold: true; color: "white"; elide: "ElideRight"; text: container.photoTitle } + Text { color: "white"; elide: "ElideRight"; text: "<b>Size:</b> " + container.photoWidth + 'x' + container.photoHeight } + Text { color: "white"; elide: "ElideRight"; text: "<b>Type:</b> " + container.photoType } + Text { color: "white"; elide: "ElideRight"; text: "<b>Author:</b> " + container.photoAuthor } + Text { color: "white"; elide: "ElideRight"; text: "<b>Published:</b> " + container.photoDate } + Text { color: "white"; elide: "ElideRight"; text: container.photoTags == "" ? "" : "<b>Tags:</b> " } + Text { color: "white"; elide: "ElideRight"; elide: "ElideRight"; text: container.photoTags } } } back: Item { - anchors.fill: Container + anchors.fill: container Rectangle { anchors.fill: parent; color: "black"; opacity: 0.4 } - Common.Progress { anchors.centerIn: parent; width: 200; height: 18; progress: BigImage.progress; visible: BigImage.status!=1 } + Common.Progress { anchors.centerIn: parent; width: 200; height: 18; progress: bigImage.progress; visible: bigImage.status!=1 } Flickable { - id: Flick; anchors.fill: parent; clip: true - viewportWidth: ImageContainer.width; viewportHeight: ImageContainer.height + id: flickable; anchors.fill: parent; clip: true + viewportWidth: imageContainer.width; viewportHeight: imageContainer.height Item { - id: ImageContainer - width: Math.max(BigImage.width * BigImage.scale, Flick.width); - height: Math.max(BigImage.height * BigImage.scale, Flick.height); + id: imageContainer + width: Math.max(bigImage.width * bigImage.scale, flickable.width); + height: Math.max(bigImage.height * bigImage.scale, flickable.height); Image { - id: BigImage; source: Container.photoUrl; scale: Slider.value + id: bigImage; source: container.photoUrl; scale: slider.value // Center image if it is smaller than the flickable area. - x: ImageContainer.width > width*scale ? (ImageContainer.width - width*scale) / 2 : 0 - y: ImageContainer.height > height*scale ? (ImageContainer.height - height*scale) / 2 : 0 - smooth: !Flick.moving + x: imageContainer.width > width*scale ? (imageContainer.width - width*scale) / 2 : 0 + y: imageContainer.height > height*scale ? (imageContainer.height - height*scale) / 2 : 0 + smooth: !flickable.moving onStatusChanged : { // Default scale shows the entire image. if (status == 1 && width != 0) { - Slider.minimum = Math.min(Flick.width / width, Flick.height / height); - prevScale = Math.min(Slider.minimum, 1); - Slider.value = prevScale; + slider.minimum = Math.min(flickable.width / width, flickable.height / height); + prevScale = Math.min(slider.minimum, 1); + slider.value = prevScale; } } } @@ -84,25 +84,25 @@ Flipable { Text { text: "Image Unavailable" - visible: BigImage.status == 'Error' + visible: bigImage.status == 'Error' anchors.centerIn: parent; color: "white"; font.bold: true } Common.Slider { - id: Slider; visible: { BigImage.status == 1 && maximum > minimum } + id: slider; visible: { bigImage.status == 1 && maximum > minimum } anchors { bottom: parent.bottom; bottomMargin: 65 left: parent.left; leftMargin: 25 right: parent.right; rightMargin: 25 } onValueChanged: { - if (BigImage.width * value > Flick.width) { - var xoff = (Flick.width/2 + Flick.viewportX) * value / prevScale; - Flick.viewportX = xoff - Flick.width/2; + if (bigImage.width * value > flickable.width) { + var xoff = (flickable.width/2 + flickable.viewportX) * value / prevScale; + flickable.viewportX = xoff - flickable.width/2; } - if (BigImage.height * value > Flick.height) { - var yoff = (Flick.height/2 + Flick.viewportY) * value / prevScale; - Flick.viewportY = yoff - Flick.height/2; + if (bigImage.height * value > flickable.height) { + var yoff = (flickable.height/2 + flickable.viewportY) * value / prevScale; + flickable.viewportY = yoff - flickable.height/2; } prevScale = value; } @@ -111,14 +111,14 @@ Flipable { states: State { name: "Back" - PropertyChanges { target: ItemRotation; angle: 180 } + PropertyChanges { target: itemRotation; angle: 180 } } transitions: Transition { SequentialAnimation { - PropertyAction { target: BigImage; property: "smooth"; value: false } + PropertyAction { target: bigImage; property: "smooth"; value: false } NumberAnimation { easing: "easeInOutQuad"; properties: "angle"; duration: 500 } - PropertyAction { target: BigImage; property: "smooth"; value: !Flick.moving } + PropertyAction { target: bigImage; property: "smooth"; value: !flickable.moving } } } } diff --git a/demos/declarative/flickr/mobile/ListDelegate.qml b/demos/declarative/flickr/mobile/ListDelegate.qml index fa6f8ea..090e91a 100644 --- a/demos/declarative/flickr/mobile/ListDelegate.qml +++ b/demos/declarative/flickr/mobile/ListDelegate.qml @@ -1,20 +1,19 @@ import Qt 4.6 Component { - id: ListDelegate Item { - id: Wrapper; width: Wrapper.ListView.view.width; height: 86 + id: wrapper; width: wrapper.ListView.view.width; height: 86 Item { - id: MoveMe - Rectangle { color: "black"; opacity: index % 2 ? 0.2 : 0.4; height: 84; width: Wrapper.width; y: 1 } + id: moveMe + Rectangle { color: "black"; opacity: index % 2 ? 0.2 : 0.4; height: 84; width: wrapper.width; y: 1 } Rectangle { - id: WhiteRect; x: 6; y: 4; width: 77; height: 77; color: "white"; smooth: true + x: 6; y: 4; width: 77; height: 77; color: "white"; smooth: true - Image { id: Thumb; source: imagePath; x: 1; y: 1 } + Image { source: imagePath; x: 1; y: 1 } Image { source: "images/gloss.png" } } Column { - x: 92; width: Wrapper.ListView.view.width - 95; y: 15; spacing: 2 + x: 92; width: wrapper.ListView.view.width - 95; y: 15; spacing: 2 Text { text: title; color: "white"; width: parent.width; font.bold: true; elide: "ElideRight"; style: "Raised"; styleColor: "black" } Text { text: photoAuthor; color: "white"; width: parent.width; elide: "ElideLeft"; color: "#cccccc"; style: "Raised"; styleColor: "black" } Text { text: photoDate; color: "white"; width: parent.width; elide: "ElideRight"; color: "#cccccc"; style: "Raised"; styleColor: "black" } diff --git a/demos/declarative/flickr/mobile/TitleBar.qml b/demos/declarative/flickr/mobile/TitleBar.qml index 13484a2..108faf7 100644 --- a/demos/declarative/flickr/mobile/TitleBar.qml +++ b/demos/declarative/flickr/mobile/TitleBar.qml @@ -1,50 +1,50 @@ import Qt 4.6 Item { - id: TitleBar + id: titleBar property string untaggedString: "Uploads from everyone" property string taggedString: "Recent uploads tagged " BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 } Item { - id: Container + id: container width: (parent.width * 2) - 55 ; height: parent.height Script { function accept() { - TitleBar.state = "" - Background.state = "" - RssModel.tags = Editor.text + titleBar.state = "" + background.state = "" + rssModel.tags = editor.text } } Text { - id: CategoryText + id: categoryText anchors { - left: parent.left; right: TagButton.left; leftMargin: 10; rightMargin: 10 + left: parent.left; right: tagButton.left; leftMargin: 10; rightMargin: 10 verticalCenter: parent.verticalCenter } elide: "ElideLeft" - text: (RssModel.tags=="" ? untaggedString : taggedString + RssModel.tags) + text: (rssModel.tags=="" ? untaggedString : taggedString + rssModel.tags) font.bold: true; color: "White"; style: "Raised"; styleColor: "Black" } Button { - id: TagButton; x: TitleBar.width - 50; width: 45; height: 32; text: "..." - onClicked: if (TitleBar.state == "Tags") accept(); else TitleBar.state = "Tags" + id: tagButton; x: titleBar.width - 50; width: 45; height: 32; text: "..." + onClicked: if (titleBar.state == "Tags") accept(); else titleBar.state = "Tags" anchors.verticalCenter: parent.verticalCenter } Item { - id: LineEdit + id: lineEdit y: 4; height: parent.height - 9 - anchors { left: TagButton.right; leftMargin: 5; right: parent.right; rightMargin: 5 } + anchors { left: tagButton.right; leftMargin: 5; right: parent.right; rightMargin: 5 } BorderImage { source: "images/lineedit.sci"; anchors.fill: parent } TextInput { - id: Editor + id: editor anchors { left: parent.left; right: parent.right; leftMargin: 10; rightMargin: 10 verticalCenter: parent.verticalCenter @@ -53,21 +53,21 @@ Item { color: "#151515"; selectionColor: "Green" } - Keys.forwardTo: [ (ReturnKey), (Editor)] + Keys.forwardTo: [ (returnKey), (editor)] Item { - id: ReturnKey + id: returnKey Keys.onReturnPressed: accept() - Keys.onEscapePressed: TitleBar.state = "" + Keys.onEscapePressed: titleBar.state = "" } } } states: State { name: "Tags" - PropertyChanges { target: Container; x: -TagButton.x + 5 } - PropertyChanges { target: TagButton; text: "OK" } - PropertyChanges { target: LineEdit; focus: true } + PropertyChanges { target: container; x: -tagButton.x + 5 } + PropertyChanges { target: tagButton; text: "OK" } + PropertyChanges { target: lineEdit; focus: true } } transitions: Transition { diff --git a/demos/declarative/flickr/mobile/ToolBar.qml b/demos/declarative/flickr/mobile/ToolBar.qml index cfdc8fe..f96c767 100644 --- a/demos/declarative/flickr/mobile/ToolBar.qml +++ b/demos/declarative/flickr/mobile/ToolBar.qml @@ -1,24 +1,24 @@ import Qt 4.6 Item { - id: Toolbar + id: toolbar - property alias button1Label: Button1.text - property alias button2Label: Button2.text + property alias button1Label: button1.text + property alias button2Label: button2.text signal button1Clicked signal button2Clicked BorderImage { source: "images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 } Button { - id: Button1 + id: button1 anchors.left: parent.left; anchors.leftMargin: 5; y: 3; width: 140; height: 32 - onClicked: Toolbar.button1Clicked() + onClicked: toolbar.button1Clicked() } Button { - id: Button2 + id: button2 anchors.right: parent.right; anchors.rightMargin: 5; y: 3; width: 140; height: 32 - onClicked: Toolbar.button2Clicked() + onClicked: toolbar.button2Clicked() } } diff --git a/demos/declarative/minehunt/Description.qml b/demos/declarative/minehunt/Description.qml index df4881c..440dd2e 100644 --- a/demos/declarative/minehunt/Description.qml +++ b/demos/declarative/minehunt/Description.qml @@ -1,12 +1,12 @@ import Qt 4.6 Item { - id: Page - height: MyText.height + 20 + id: page + height: myText.height + 20 property var text MouseRegion { anchors.fill: parent - drag.target: Page + drag.target: page drag.axis: "XandYAxis" drag.minimumX: 0 drag.maximumX: 1000 @@ -24,8 +24,8 @@ Item { width: parent.width - 20 height: parent.height - 20 Text { - id: MyText - text: Page.text + id: myText + text: page.text width: parent.width clip: true wrap: true diff --git a/demos/declarative/samegame/content/Button.qml b/demos/declarative/samegame/content/Button.qml index 2354218..301124e 100644 --- a/demos/declarative/samegame/content/Button.qml +++ b/demos/declarative/samegame/content/Button.qml @@ -1,7 +1,7 @@ import Qt 4.6 Rectangle { - id: Container + id: container signal clicked property string text: "Button" @@ -17,9 +17,9 @@ Rectangle { GradientStop { position: 1.0; color: activePalette.button } } - MouseRegion { id: mr; anchors.fill: parent; onClicked: Container.clicked() } + MouseRegion { id: mr; anchors.fill: parent; onClicked: container.clicked() } Text { - id: txtItem; text: Container.text; anchors.centerIn: Container; color: activePalette.buttonText + id: txtItem; text: container.text; anchors.centerIn: container; color: activePalette.buttonText } } diff --git a/demos/declarative/samegame/content/Dialog.qml b/demos/declarative/samegame/content/Dialog.qml index 401d211..661257b 100644 --- a/demos/declarative/samegame/content/Dialog.qml +++ b/demos/declarative/samegame/content/Dialog.qml @@ -7,15 +7,15 @@ Rectangle { page.opacity = 0; } function show(txt) { - MyText.text = txt; + myText.text = txt; page.opacity = 1; } signal closed(); - color: "white"; border.width: 1; width: MyText.width + 20; height: 60; + color: "white"; border.width: 1; width: myText.width + 20; height: 60; opacity: 0 - opacity: Behavior { + opacity: Behavior { NumberAnimation { duration: 1000 } } - Text { id: MyText; anchors.centerIn: parent; text: "Hello World!" } + Text { id: myText; anchors.centerIn: parent; text: "Hello World!" } MouseRegion { id: mr; anchors.fill: parent; onClicked: forceClose(); } } diff --git a/demos/declarative/samegame/samegame.qml b/demos/declarative/samegame/samegame.qml index ede4362..92d85f3 100644 --- a/demos/declarative/samegame/samegame.qml +++ b/demos/declarative/samegame/samegame.qml @@ -2,7 +2,7 @@ import Qt 4.6 import "content" Rectangle { - id: Screen + id: screen width: 490; height: 720 Script { source: "content/samegame.js" } @@ -10,7 +10,7 @@ Rectangle { SystemPalette { id: activePalette; colorGroup: Qt.Active } Item { - width: parent.width; anchors.top: parent.top; anchors.bottom: ToolBar.top + width: parent.width; anchors.top: parent.top; anchors.bottom: toolBar.top Image { id: background @@ -34,14 +34,14 @@ Rectangle { } Dialog { id: dialog; anchors.centerIn: parent; z: 21 } - Dialog { - id: scoreName; anchors.centerIn: parent; z: 22; + Dialog { + id: scoreName; anchors.centerIn: parent; z: 22; TextInput { - id: Editor - onAccepted: { - if(scoreName.opacity==1&&Editor.text!="") - sendHighScore(Editor.text); - scoreName.forceClose(); + id: editor + onAccepted: { + if(scoreName.opacity==1&&editor.text!="") + sendHighScore(editor.text); + scoreName.forceClose(); } anchors.verticalCenter: parent.verticalCenter width: 72; focus: true @@ -50,10 +50,10 @@ Rectangle { } Rectangle { - id: ToolBar + id: toolBar color: activePalette.window height: 32; width: parent.width - anchors.bottom: Screen.bottom + anchors.bottom: screen.bottom Button { id: btnA; text: "New Game"; onClicked: {initBoard();} @@ -62,7 +62,7 @@ Rectangle { } Text { - id: Score + id: score text: "Score: " + gameCanvas.score; font.bold: true anchors.right: parent.right; anchors.rightMargin: 3 anchors.verticalCenter: parent.verticalCenter diff --git a/demos/declarative/twitter/content/AuthView.qml b/demos/declarative/twitter/content/AuthView.qml index 3fe7e7e..73ce308 100644 --- a/demos/declarative/twitter/content/AuthView.qml +++ b/demos/declarative/twitter/content/AuthView.qml @@ -1,6 +1,6 @@ import Qt 4.6 import "../../flickr/common" -import "../../flickr/mobile" +import "../../flickr/mobile" Item { id: wrapper @@ -9,7 +9,7 @@ Item { spacing: 20 Row{ spacing: 4 - Text { + Text { width: 100 text: "Screen name:" font.pointSize: 10; font.bold: true; color: "white"; style: "Raised"; styleColor: "black" @@ -29,7 +29,7 @@ Item { font.bold: true color: "#151515"; selectionColor: "green" Keys.forwardTo: [(tabber), (nameIn)] - Item { + Item { id: tabber //Note: it's not working yet Keys.onPressed: {if(event.key == Qt.Key_Tab){print('Tab works!'); passIn.focus = true; accept(); }} @@ -39,7 +39,7 @@ Item { } Row{ spacing: 4 - Text { + Text { width: 100 text: "Password:" font.pointSize: 10; font.bold: true; color: "white"; style: "Raised"; styleColor: "black" @@ -71,7 +71,7 @@ Item { height: 32 id: login text: "Log in" - onClicked: {RssModel.authName=nameIn.text; RssModel.authPass=passIn.text; RssModel.tags='my timeline';} + onClicked: {rssModel.authName=nameIn.text; rssModel.authPass=passIn.text; rssModel.tags='my timeline';} } Button { x: 120 @@ -79,7 +79,7 @@ Item { height: 32 id: guest text: "Guest" - onClicked: {RssModel.authName='-'; Screen.setMode(true);} + onClicked: {rssModel.authName='-'; screen.setMode(true);} } } } diff --git a/demos/declarative/twitter/content/FatDelegate.qml b/demos/declarative/twitter/content/FatDelegate.qml index a2e9c39..32a921e 100644 --- a/demos/declarative/twitter/content/FatDelegate.qml +++ b/demos/declarative/twitter/content/FatDelegate.qml @@ -4,12 +4,12 @@ import "../../flickr/common" Component { id: ListDelegate Item { - id: Wrapper; width: Wrapper.ListView.view.width; height: if(txt.height > 58){txt.height+8}else{58}//50+4+4 + id: wrapper; width: wrapper.ListView.view.width; height: if(txt.height > 58){txt.height+8}else{58}//50+4+4 Script { function handleLink(link){ if(link.slice(0,3) == 'app'){ setUser(link.slice(7)); - Screen.setMode(true); + screen.setMode(true); }else if(link.slice(0,4) == 'http'){ Qt.DesktopServices.openUrl(link); } @@ -21,17 +21,17 @@ Component { } } Item { - id: MoveMe; height: parent.height - Rectangle { - id: BlackRect - color: "black"; opacity: Wrapper.ListView.index % 2 ? 0.2 : 0.3; height: Wrapper.height-2; width: Wrapper.width; y: 1 + id: moveMe; height: parent.height + Rectangle { + id: blackRect + color: "black"; opacity: wrapper.ListView.index % 2 ? 0.2 : 0.3; height: wrapper.height-2; width: wrapper.width; y: 1 } Rectangle { - id: WhiteRect; x: 6; width: 50; height: 50; color: "white"; smooth: true + id: whiteRect; x: 6; width: 50; height: 50; color: "white"; smooth: true anchors.verticalCenter: parent.verticalCenter - Loading { x: 1; y: 1; width: 48; height: 48; visible: RealImage.status != 1 } - Image { id: RealImage; source: userImage; x: 1; y: 1; width:48; height:48 } + Loading { x: 1; y: 1; width: 48; height: 48; visible: realImage.status != 1 } + Image { id: realImage; source: userImage; x: 1; y: 1; width:48; height:48 } } Text { id:txt; y:4; x: 56 text: '<html><style type="text/css">a:link {color:"#aaccaa"}; a:visited {color:"#336633"}</style>' @@ -39,7 +39,7 @@ Component { + "<br /><b>" + addTags(statusText) + "</b></html>"; textFormat: Qt.RichText color: "white"; color: "#cccccc"; style: "Raised"; styleColor: "black"; wrap: true - anchors.left: WhiteRect.right; anchors.right: BlackRect.right; anchors.leftMargin: 6; anchors.rightMargin: 6 + anchors.left: whiteRect.right; anchors.right: blackRect.right; anchors.leftMargin: 6; anchors.rightMargin: 6 onLinkActivated: handleLink(link) } } diff --git a/demos/declarative/twitter/content/HomeTitleBar.qml b/demos/declarative/twitter/content/HomeTitleBar.qml index bd3bc2c..3108a9b 100644 --- a/demos/declarative/twitter/content/HomeTitleBar.qml +++ b/demos/declarative/twitter/content/HomeTitleBar.qml @@ -10,80 +10,80 @@ Item { BorderImage { source: "../../flickr/mobile/images/titlebar.sci"; width: parent.width; height: parent.height + 14; y: -7 } Item { - id: Container + id: container width: (parent.width * 2) - 55 ; height: parent.height Script { function accept() { - if(RssModel.authName == '' || RssModel.authPass == '') + if(rssModel.authName == '' || rssModel.authPass == '') return false;//Can't login like that - var postData = "status=" + Editor.text; + var postData = "status=" + editor.text; var postman = new XMLHttpRequest(); - postman.open("POST", "http://twitter.com/statuses/update.xml", true, RssModel.authName, RssModel.authPass); - postman.onreadystatechange = function() { + postman.open("POST", "http://twitter.com/statuses/update.xml", true, rssModel.authName, rssModel.authPass); + postman.onreadystatechange = function() { if (postman.readyState == postman.DONE) { titleBar.update(); } } postman.send(postData); - Editor.text = "" + editor.text = "" titleBar.state = "" } } Rectangle { - id: WhiteRect; x: 6; width: 50; height: 50; color: "white"; smooth: true + x: 6; width: 50; height: 50; color: "white"; smooth: true anchors.verticalCenter: parent.verticalCenter - UserModel { user: RssModel.authName; id: userModel } - Component { id: imgDelegate; - Item { id: Wrapper - Loading { width:48; height:48; visible: realImage.status != 1 } - Image { source: image; width:48; height:48; id: realImage } + UserModel { user: rssModel.authName; id: userModel } + Component { id: imgDelegate; + Item { + Loading { width:48; height:48; visible: realImage.status != 1 } + Image { source: image; width:48; height:48; id: realImage } } - } + } ListView { model: userModel.model; x:1; y:1; delegate: imgDelegate } } Text { - id: CategoryText - anchors.left: parent.left; anchors.right: TagButton.left + id: categoryText + anchors.left: parent.left; anchors.right: tagButton.left anchors.leftMargin: 58; anchors.rightMargin: 10 anchors.verticalCenter: parent.verticalCenter elide: "ElideLeft" - text: "Timeline for " + RssModel.authName + text: "Timeline for " + rssModel.authName font.pointSize: 10; font.bold: true; color: "white"; style: "Raised"; styleColor: "black" } Button { - id: TagButton; x: titleBar.width - 90; width: 85; height: 32; text: "New Post..." + id: tagButton; x: titleBar.width - 90; width: 85; height: 32; text: "New Post..." anchors.verticalCenter: parent.verticalCenter; onClicked: if (titleBar.state == "Posting") accept(); else titleBar.state = "Posting" } Text { - id: charsLeftText; anchors.horizontalCenter: TagButton.horizontalCenter; - anchors.top: TagButton.bottom; anchors.topMargin: 2 - text: {140 - Editor.text.length;} visible: titleBar.state == "Posting" + id: charsLeftText; anchors.horizontalCenter: tagButton.horizontalCenter; + anchors.top: tagButton.bottom; anchors.topMargin: 2 + text: {140 - editor.text.length;} visible: titleBar.state == "Posting" font.pointSize: 10; font.bold: true; color: "white"; style: "Raised"; styleColor: "black" } Item { id: txtEdit; - anchors.left: TagButton.right; anchors.leftMargin: 5; y: 4 + anchors.left: tagButton.right; anchors.leftMargin: 5; y: 4 anchors.right: parent.right; anchors.rightMargin: 40; height: parent.height - 9 BorderImage { source: "../../flickr/mobile/images/lineedit.sci"; anchors.fill: parent } Binding {//TODO: Can this be a function, which also resets the cursor? And flashes? - when: Editor.text.length > 140 - target: Editor + when: editor.text.length > 140 + target: editor property: "text" - value: Editor.text.slice(0,140) + value: editor.text.slice(0,140) } TextEdit { - id: Editor - anchors.left: parent.left; + id: editor + anchors.left: parent.left; anchors.leftMargin: 8; anchors.bottom: parent.bottom anchors.bottomMargin: 4; @@ -94,9 +94,9 @@ Item { wrap:true color: "#151515"; selectionColor: "green" } - Keys.forwardTo: [(ReturnKey), (Editor)] + Keys.forwardTo: [(returnKey), (editor)] Item { - id: ReturnKey + id: returnKey Keys.onReturnPressed: accept() Keys.onEscapePressed: titleBar.state = "" } @@ -105,11 +105,11 @@ Item { states: [ State { name: "Posting" - PropertyChanges { target: Container; x: -TagButton.x + 5 } + PropertyChanges { target: container; x: -tagButton.x + 5 } PropertyChanges { target: titleBar; height: 80 } - PropertyChanges { target: TagButton; text: "OK" } - PropertyChanges { target: TagButton; width: 28 } - PropertyChanges { target: TagButton; height: 24 } + PropertyChanges { target: tagButton; text: "OK" } + PropertyChanges { target: tagButton; width: 28 } + PropertyChanges { target: tagButton; height: 24 } PropertyChanges { target: txtEdit; focus: true } } ] diff --git a/demos/declarative/twitter/content/MultiTitleBar.qml b/demos/declarative/twitter/content/MultiTitleBar.qml index 6a6a28f..da0794d 100644 --- a/demos/declarative/twitter/content/MultiTitleBar.qml +++ b/demos/declarative/twitter/content/MultiTitleBar.qml @@ -2,20 +2,20 @@ import Qt 4.6 import "../../flickr/mobile" Item { - height: HomeBar.height - HomeTitleBar { id: HomeBar; width: parent.width; height: 60; - onUpdate: RssModel.reload() + height: homeBar.height + HomeTitleBar { id: homeBar; width: parent.width; height: 60; + onUpdate: rssModel.reload() } - TitleBar { id: TitleBar; width: parent.width; height: 60; + TitleBar { id: titleBar; width: parent.width; height: 60; y: -80 untaggedString: "Latest tweets from everyone" taggedString: "Latest tweets from " } states: [ State { - name: "search"; when: Screen.userView - PropertyChanges { target: TitleBar; y: 0 } - PropertyChanges { target: HomeBar; y: -80 } + name: "search"; when: screen.userView + PropertyChanges { target: titleBar; y: 0 } + PropertyChanges { target: homeBar; y: -80 } } ] transitions: [ diff --git a/demos/declarative/twitter/twitter.qml b/demos/declarative/twitter/twitter.qml index eb9f5d6..e9752ff 100644 --- a/demos/declarative/twitter/twitter.qml +++ b/demos/declarative/twitter/twitter.qml @@ -4,43 +4,44 @@ import "../flickr/common" as Common import "../flickr/mobile" as Mobile Item { - id: Screen; width: 320; height: 480 - property bool userView : false + id: screen; width: 320; height: 480 + property bool userView : false + property var tmpStr function setMode(m){ - Screen.userView = m; - if(m == false){ - RssModel.tags='my timeline'; - RssModel.reload(); - ToolBar.button2Label = "View others"; + screen.userView = m; + if(m == false){ + rssModel.tags='my timeline'; + rssModel.reload(); + toolBar.button2Label = "View others"; } else { - ToolBar.button2Label = "Return home"; + toolBar.button2Label = "Return home"; } } //Workaround for bug 260266 Timer{ interval: 1; running: false; repeat: false; onTriggered: reallySetUser(); id:hack } - Script{ - var tmpStr; + Script { +// var tmpStr; function setUser(str){hack.running = true; tmpStr = str} - function reallySetUser(){RssModel.tags = tmpStr;} + function reallySetUser(){rssModel.tags = tmpStr;} } Rectangle { - id: Background + id: background anchors.fill: parent; color: "#343434"; Image { source: "mobile/images/stripes.png"; fillMode: "Tile"; anchors.fill: parent; opacity: 0.3 } - Twitter.RssModel { id: RssModel } - Common.Loading { anchors.centerIn: parent; visible: RssModel.status==XmlListModel.Loading && state!='unauthed'} - Text { + Twitter.RssModel { id: rssModel } + Common.Loading { anchors.centerIn: parent; visible: rssModel.status==XmlListModel.Loading && state!='unauthed'} + Text { width: 180 - text: "Could not access twitter using this screen name and password pair."; + text: "Could not access twitter using this screen name and password pair."; color: "white"; color: "#cccccc"; style: "Raised"; styleColor: "black"; wrap: true - visible: RssModel.status==XmlListModel.Error; anchors.centerIn: parent + visible: rssModel.status==XmlListModel.Error; anchors.centerIn: parent } Item { - id: Views + id: views x: 2; width: parent.width - 4 y:60 //Below the title bars height: 380 @@ -48,44 +49,44 @@ Item { Twitter.AuthView{ id: authView anchors.verticalCenter: parent.verticalCenter - width: parent.width; height: parent.height-60; - x: -(Screen.width * 1.5) + width: parent.width; height: parent.height-60; + x: -(screen.width * 1.5) } - Twitter.FatDelegate { id: FatDelegate } + Twitter.FatDelegate { id: fatDelegate } ListView { - id: MainView; model: RssModel.model; delegate: FatDelegate; + id: mainView; model: rssModel.model; delegate: fatDelegate; width: parent.width; height: parent.height; x: 0; cacheBuffer: 100; } } - Twitter.MultiTitleBar { id: TitleBar; width: parent.width } - Mobile.ToolBar { id: ToolBar; height: 40; - //anchors.bottom: parent.bottom; + Twitter.MultiTitleBar { id: titleBar; width: parent.width } + Mobile.ToolBar { id: toolBar; height: 40; + //anchors.bottom: parent.bottom; //TODO: Use anchor changes instead of hard coding y: 440 - width: parent.width; opacity: 0.9 + width: parent.width; opacity: 0.9 button1Label: "Update" button2Label: "View others" - onButton1Clicked: RssModel.reload(); - onButton2Clicked: + onButton1Clicked: rssModel.reload(); + onButton2Clicked: { - if(Screen.userView == true){ - Screen.setMode(false); + if(screen.userView == true){ + screen.setMode(false); }else{ - RssModel.tags=''; - Screen.setMode(true); + rssModel.tags=''; + screen.setMode(true); } } } states: [ State { - name: "unauthed"; when: RssModel.authName=="" + name: "unauthed"; when: rssModel.authName=="" PropertyChanges { target: authView; x: 0 } - PropertyChanges { target: MainView; x: -(parent.width * 1.5) } - PropertyChanges { target: TitleBar; y: -80 } - PropertyChanges { target: ToolBar; y: Screen.height + 80 } + PropertyChanges { target: mainView; x: -(parent.width * 1.5) } + PropertyChanges { target: titleBar; y: -80 } + PropertyChanges { target: toolBar; y: screen.height + 80 } } ] transitions: [ diff --git a/demos/declarative/webbrowser/content/RectSoftShadow.qml b/demos/declarative/webbrowser/content/RectSoftShadow.qml index 5b278ac..6bba98e 100644 --- a/demos/declarative/webbrowser/content/RectSoftShadow.qml +++ b/demos/declarative/webbrowser/content/RectSoftShadow.qml @@ -26,7 +26,7 @@ Item { source: "pics/softshadow-bottom.png" x: 0 y: parent.height - width: WebView.width*WebView.scale + width: webView.width*webView.scale height: 16 } } diff --git a/demos/declarative/webbrowser/webbrowser.qml b/demos/declarative/webbrowser/webbrowser.qml index 3f23d83..53ac214 100644 --- a/demos/declarative/webbrowser/webbrowser.qml +++ b/demos/declarative/webbrowser/webbrowser.qml @@ -4,7 +4,7 @@ import "content" import "fieldtext" Item { - id: WebBrowser + id: webBrowser property string urlString : "http://qt.nokia.com/" @@ -14,7 +14,7 @@ Item { height: 480 Item { - id: WebPanel + id: webPanel anchors.fill: parent clip: true Rectangle { @@ -23,48 +23,48 @@ Item { } Image { source: "content/pics/softshadow-bottom.png" - width: WebPanel.width + width: webPanel.width height: 16 } Image { source: "content/pics/softshadow-top.png" - width: WebPanel.width + width: webPanel.width height: 16 - anchors.bottom: Footer.top + anchors.bottom: footer.top } RectSoftShadow { - x: -Flick.viewportX - y: -Flick.viewportY - width: MyWebView.width*MyWebView.scale - height: Flick.y+MyWebView.height*MyWebView.scale + x: -flickable.viewportX + y: -flickable.viewportY + width: webView.width*webView.scale + height: flickable.y+webView.height*webView.scale } Item { - id: HeaderSpace + id: headerSpace width: parent.width height: 60 z: 1 Rectangle { - id: HeaderSpaceTint + id: headerSpaceTint color: "black" opacity: 0 anchors.fill: parent } Image { - id: Header + id: header source: "content/pics/header.png" width: parent.width height: 60 state: "Normal" - x: Flick.viewportX < 0 ? -Flick.viewportX : Flick.viewportX > Flick.viewportWidth-Flick.width - ? -Flick.viewportX+Flick.viewportWidth-Flick.width : 0 - y: Flick.viewportY < 0 ? -Flick.viewportY : progressOff* - (Flick.viewportY>height?-height:-Flick.viewportY) + x: flickable.viewportX < 0 ? -flickable.viewportX : flickable.viewportX > flickable.viewportWidth-flickable.width + ? -flickable.viewportX+flickable.viewportWidth-flickable.width : 0 + y: flickable.viewportY < 0 ? -flickable.viewportY : progressOff* + (flickable.viewportY>height?-height:-flickable.viewportY) Text { - id: HeaderText + id: headerText - text: MyWebView.title!='' || MyWebView.progress == 1.0 ? MyWebView.title : 'Loading...' + text: webView.title!='' || webView.progress == 1.0 ? webView.title : 'Loading...' elide: "ElideRight" color: "white" @@ -75,22 +75,22 @@ Item { font.pointSize: 10 font.bold: true - anchors.left: Header.left - anchors.right: Header.right + anchors.left: header.left + anchors.right: header.right anchors.leftMargin: 4 anchors.rightMargin: 4 - anchors.top: Header.top + anchors.top: header.top anchors.topMargin: 4 horizontalAlignment: "AlignHCenter" } Item { width: parent.width - anchors.top: HeaderText.bottom + anchors.top: headerText.bottom anchors.topMargin: 2 anchors.bottom: parent.bottom Item { - id: UrlBox + id: urlBox height: 31 anchors.left: parent.left anchors.leftMargin: 12 @@ -102,32 +102,32 @@ Item { BorderImage { source: "content/pics/addressbar.sci" - anchors.fill: UrlBox + anchors.fill: urlBox } - + BorderImage { - id: UrlBoxhl + id: urlBoxhl source: "content/pics/addressbar-filled.sci" - width: parent.width*MyWebView.progress + width: parent.width*webView.progress height: parent.height - opacity: 1-Header.progressOff + opacity: 1-header.progressOff clip: true } FieldText { - id: EditUrl + id: editUrl mouseGrabbed: parent.mouseGrabbed - text: WebBrowser.urlString + text: webBrowser.urlString label: "url:" - onConfirmed: { WebBrowser.urlString = EditUrl.text; MyWebView.focus=true } - onCancelled: { MyWebView.focus=true } - onStartEdit: { MyWebView.focus=false } + onConfirmed: { webBrowser.urlString = editUrl.text; webView.focus=true } + onCancelled: { webView.focus=true } + onStartEdit: { webView.focus=false } - anchors.left: UrlBox.left - anchors.right: UrlBox.right + anchors.left: urlBox.left + anchors.right: urlBox.right anchors.leftMargin: 6 - anchors.verticalCenter: UrlBox.verticalCenter + anchors.verticalCenter: urlBox.verticalCenter anchors.verticalCenterOffset: 1 } } @@ -137,19 +137,19 @@ Item { states: [ State { name: "Normal" - when: MyWebView.progress == 1.0 - PropertyChanges { target: Header; progressOff: 1 } + when: webView.progress == 1.0 + PropertyChanges { target: header; progressOff: 1 } }, State { name: "ProgressShown" - when: MyWebView.progress < 1.0 - PropertyChanges { target: Header; progressOff: 0; } + when: webView.progress < 1.0 + PropertyChanges { target: header; progressOff: 0; } } ] transitions: [ Transition { NumberAnimation { - target: Header + target: header properties: "progressOff" easing: "easeInOutQuad" duration: 300 @@ -159,18 +159,18 @@ Item { } } Flickable { - id: Flick + id: flickable width: parent.width - viewportWidth: Math.max(parent.width,MyWebView.width*MyWebView.scale) - viewportHeight: Math.max(parent.height,MyWebView.height*MyWebView.scale) - anchors.top: HeaderSpace.bottom - anchors.bottom: Footer.top + viewportWidth: Math.max(parent.width,webView.width*webView.scale) + viewportHeight: Math.max(parent.height,webView.height*webView.scale) + anchors.top: headerSpace.bottom + anchors.bottom: footer.top anchors.left: parent.left anchors.right: parent.right pressDelay: 200 WebView { - id: MyWebView + id: webView pixelCacheSize: 4000000 Script { @@ -190,29 +190,29 @@ Item { } } - url: fixUrl(WebBrowser.urlString) + url: fixUrl(webBrowser.urlString) smooth: true fillColor: "white" focus: true - preferredWidth: Flick.width + preferredWidth: flickable.width webPageWidth: 980 - onUrlChanged: { if (url != null) { WebBrowser.urlString = url.toString(); } } + onUrlChanged: { if (url != null) { webBrowser.urlString = url.toString(); } } onDoubleClick: { heuristicZoom(clickX,clickY) } SequentialAnimation { - id: QuickZoom + id: quickZoom PropertyAction { - target: MyWebView + target: webView property: "renderingEnabled" value: false } ParallelAnimation { NumberAnimation { - id: ScaleAnim - target: MyWebView + id: scaleAnim + target: webView property: "scale" from: 1 to: 0 // set before calling @@ -220,8 +220,8 @@ Item { duration: 200 } NumberAnimation { - id: FlickVX - target: Flick + id: flickVX + target: flickable property: "viewportX" easing: "easeLinear" duration: 200 @@ -229,8 +229,8 @@ Item { to: 0 // set before calling } NumberAnimation { - id: FlickVY - target: Flick + id: flickVY + target: flickable property: "viewportY" easing: "easeLinear" duration: 200 @@ -239,12 +239,12 @@ Item { } } PropertyAction { - id: FinalZoom - target: MyWebView + id: finalZoom + target: webView property: "zoomFactor" } PropertyAction { - target: MyWebView + target: webView property: "scale" value: 1.0 } @@ -252,19 +252,19 @@ Item { // size changes may have started a correction if // zoomFactor < 1.0. PropertyAction { - id: FinalX - target: Flick + id: finalX + target: flickable property: "viewportX" value: 0 // set before calling } PropertyAction { - id: FinalY - target: Flick + id: finalY + target: flickable property: "viewportY" value: 0 // set before calling } PropertyAction { - target: MyWebView + target: webView property: "renderingEnabled" value: true } @@ -272,23 +272,23 @@ Item { onZooming: { if (centerX) { sc = zoom/zoomFactor; - ScaleAnim.to = sc; - FlickVX.from = Flick.viewportX - FlickVX.to = Math.min(Math.max(0,centerX-Flick.width/2),MyWebView.width*sc-Flick.width) - FinalX.value = Math.min(Math.max(0,centerX-Flick.width/2),MyWebView.width*sc-Flick.width) - FlickVY.from = Flick.viewportY - FlickVY.to = Math.min(Math.max(0,centerY-Flick.height/2),MyWebView.height*sc-Flick.height) - FinalY.value = Math.min(Math.max(0,centerY-Flick.height/2),MyWebView.height*sc-Flick.height) - FinalZoom.value = zoom - QuickZoom.start() + scaleAnim.to = sc; + flickVX.from = flickable.viewportX + flickVX.to = Math.min(Math.max(0,centerX-flickable.width/2),webView.width*sc-flickable.width) + finalX.value = Math.min(Math.max(0,centerX-flickable.width/2),webView.width*sc-flickable.width) + flickVY.from = flickable.viewportY + flickVY.to = Math.min(Math.max(0,centerY-flickable.height/2),webView.height*sc-flickable.height) + finalY.value = Math.min(Math.max(0,centerY-flickable.height/2),webView.height*sc-flickable.height) + finalZoom.value = zoom + quickZoom.start() } } } Rectangle { - id: WebViewTint + id: webViewTint color: "black" opacity: 0 - anchors.fill: MyWebView + anchors.fill: webView /*MouseRegion { anchors.fill: WebViewTint onClicked: { proxy.focus=false } @@ -296,7 +296,7 @@ Item { } } BorderImage { - id: Footer + id: footer source: "content/pics/footer.sci" width: parent.width height: 43 @@ -327,13 +327,13 @@ Item { states: [ State { name: "Enabled" - when: MyWebView.back.enabled==true + when: webView.back.enabled==true PropertyChanges { target: back_e; opacity: 1 } PropertyChanges { target: back_d; opacity: 0 } }, State { name: "Disabled" - when: MyWebView.back.enabled==false + when: webView.back.enabled==false PropertyChanges { target: back_e; opacity: 0 } PropertyChanges { target: back_d; opacity: 1 } } @@ -349,7 +349,7 @@ Item { ] MouseRegion { anchors.fill: back_e - onClicked: { if (MyWebView.back.enabled) MyWebView.back.trigger() } + onClicked: { if (webView.back.enabled) webView.back.trigger() } } } Image { @@ -360,7 +360,7 @@ Item { } MouseRegion { anchors.fill: reload - onClicked: { MyWebView.reload.trigger() } + onClicked: { webView.reload.trigger() } } Item { id: forwardbutton @@ -383,13 +383,13 @@ Item { states: [ State { name: "Enabled" - when: MyWebView.forward.enabled==true + when: webView.forward.enabled==true PropertyChanges { target: forward_e; opacity: 1 } PropertyChanges { target: forward_d; opacity: 0 } }, State { name: "Disabled" - when: MyWebView.forward.enabled==false + when: webView.forward.enabled==false PropertyChanges { target: forward_e; opacity: 0 } PropertyChanges { target: forward_d; opacity: 1 } } @@ -405,7 +405,7 @@ Item { ] MouseRegion { anchors.fill: parent - onClicked: { if (MyWebView.forward.enabled) MyWebView.forward.trigger() } + onClicked: { if (webView.forward.enabled) webView.forward.trigger() } } } } |