From e69b60890feca37db16df2ec7616d9f58c78fa81 Mon Sep 17 00:00:00 2001 From: Ian Walters Date: Wed, 29 Apr 2009 11:13:21 +1000 Subject: Changing over to new qml format, add snippets Structure hasn't changed, just used qmlconv and started adding snippet tags --- doc/src/tutorials/declarative.qdoc | 192 ++++-------------- .../1_Drawing_and_Animation/1/Removebutton.qml | 13 +- .../1_Drawing_and_animation.qml | 43 +++- .../1_Drawing_and_Animation/2/RemoveButton.qml | 28 ++- .../1_Drawing_and_Animation/2a/RemoveButton.qml | 20 ++ .../1_Drawing_and_Animation/3/RemoveButton.qml | 62 +++--- .../1_Drawing_and_Animation/4/RemoveButton.qml | 161 +++++++++------ .../1_Drawing_and_Animation/5/RemoveButton.qml | 173 ++++++++++------ .../contacts/1_Drawing_and_Animation/GroupBox.qml | 84 +++++--- .../tutorials/contacts/2_Reuse/1/ContactField.qml | 46 +++-- .../tutorials/contacts/2_Reuse/1/RemoveButton.qml | 171 ++++++++++------ .../tutorials/contacts/2_Reuse/1a/ContactField.qml | 51 +++-- .../tutorials/contacts/2_Reuse/1a/RemoveButton.qml | 171 ++++++++++------ .../tutorials/contacts/2_Reuse/1b/ContactField.qml | 48 +++-- .../contacts/2_Reuse/1b/lib/RemoveButton.qml | 171 ++++++++++------ .../tutorials/contacts/2_Reuse/2/ContactField.qml | 50 +++-- .../tutorials/contacts/2_Reuse/2/RemoveButton.qml | 184 ++++++++++------- .../tutorials/contacts/2_Reuse/2_Reuse.qml | 57 ++++-- .../tutorials/contacts/2_Reuse/3/Contact.qml | 82 +++++--- .../tutorials/contacts/2_Reuse/3/ContactField.qml | 103 ++++++---- .../tutorials/contacts/2_Reuse/3/FieldText.qml | 219 +++++++++++++-------- .../tutorials/contacts/2_Reuse/3/RemoveButton.qml | 184 ++++++++++------- .../tutorials/contacts/2_Reuse/4/Contact.qml | 89 ++++++--- .../tutorials/contacts/2_Reuse/4/ContactField.qml | 99 ++++++---- .../tutorials/contacts/2_Reuse/4/FieldText.qml | 219 +++++++++++++-------- .../tutorials/contacts/2_Reuse/4/RemoveButton.qml | 184 ++++++++++------- .../tutorials/contacts/2_Reuse/GroupBox.qml | 84 +++++--- .../contacts/3_Collections/1/ContactView.qml | 75 ++++--- .../contacts/3_Collections/2/ContactView.qml | 191 +++++++++++------- .../contacts/3_Collections/3/ContactView.qml | 213 +++++++++++++------- .../contacts/3_Collections/3_Collections.qml | 41 ++-- .../tutorials/contacts/3_Collections/GroupBox.qml | 84 +++++--- .../contacts/3_Collections/lib/Button.qml | 99 ++++++---- .../contacts/3_Collections/lib/Contact.qml | 80 +++++--- .../contacts/3_Collections/lib/ContactField.qml | 99 ++++++---- .../contacts/3_Collections/lib/FieldText.qml | 219 +++++++++++++-------- .../contacts/3_Collections/lib/RemoveButton.qml | 184 ++++++++++------- 37 files changed, 2674 insertions(+), 1599 deletions(-) create mode 100644 examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2a/RemoveButton.qml diff --git a/doc/src/tutorials/declarative.qdoc b/doc/src/tutorials/declarative.qdoc index e763a56..bbe2ebd 100644 --- a/doc/src/tutorials/declarative.qdoc +++ b/doc/src/tutorials/declarative.qdoc @@ -121,27 +121,14 @@ \image declarative-roundrect.png - \code - - \endcode + \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/1/RemoveButton.qml 0 This is the simplest of QML components. It describes a rectangle with some simple properties. In QML all components start with a capital letter, and their properties with lower case letters. Properties can either be declared as XML attributes or as children of the - component element. The above rectangle could equally be written + component element. - \code - - 30 - 30 - 5 - - \endcode - The rectangle component is one of the more simple QML components. Apart from the properties all QML components share, it has the properties @@ -183,18 +170,7 @@ \image declarative-removebutton-close.png - \code - - - - \endcode + \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml 0 The trashIcon image is added as a child of the Rectangle. In this case the tag isn't used because the default property of the @@ -202,20 +178,7 @@ and use some other default component, when this is the case its possible to explicitly list the sub component as a child as follows: - \code - - - - - - \endcode + \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/2a/RemoveButton.qml 0 The Image element allows loading an image file for display. The source specified is a URL, and in this case refers to a portable network graphics @@ -252,31 +215,7 @@ This is a wider rectangle with two images and some text. The code to draw this state of the button could be written as follows: - \code - - - - - - \endcode + \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml 0 The rectangle with is now wider by 200 pixels. Also the trashIcon has been replaced with the confirm state children. Normally we wouldn't @@ -310,21 +249,32 @@ might look like. \code - - - + Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/trash.png" + opacity: 1 + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/cancel.png" + opacity: 0 + } \endcode The code above includes components from both states of the RemoveButton, @@ -335,17 +285,7 @@ should be changed. For the RemoveButton there is only one non-base state required. In this tutorial we will name it the 'opened' state. - \code - - - - - - - - - - \endcode + \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml states In the opened state the width of the button itself changes from the base width of 30 to the new width of 230. Also the opacity of the children @@ -357,18 +297,7 @@ To trigger the change we will react to the 'clicked' signal of a MouseRegion component. - \code - - - - \endcode + \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml mouse region MouseRegion components handle mouse actions within their geometry. This geometry behaves the same way as painted components, such that children @@ -381,7 +310,7 @@ a function called toggle() is called. It might also have been written \code - onClicked="removeButton.state='opened'" + onClicked: { removeButton.state='opened' } \endcode However in this case we are using a function because it allows multiple @@ -391,69 +320,24 @@ The toggle() function is a new function specified as part of the remove button element. - \code - - - - \endcode + \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml script Any QML component can have a set of resources specified. One of those resources is any Script that might be needed. See the {QtScript Module}{QtScript Module} for more information on how to write - script code in Qt. There are only a couple of additional items to - note when using Script with QML components. The first is that it - is an xml file, that means either CDATA or other forms of escaping - should be used if special characters are needed. For example, - the expression; + script code in Qt. - \code - if (a && b) {} - \endcode - - Should either be escaped as: - - \code - if (a && b) {} - \endcode - - or enclosed in a CDATA section as - - \code - - \endcode - - The other item to note is that you can refer to identified QML components + It is possible to refer to identified QML components within the script. Hence the function for our RemoveButton will check if the state is already open to determine what the new state should be. - We also have added a print function. This isn't required for the button - to function, but is useful for tracking down possible bugs when - working with QML. - - See the file RemoveButton4.qml for the full multi-state specification. - \section1 Animation Currently the RemoveButton is function, but snaps between our two states. Fortunately making the transition between states smooth is very simple. We only need one more bit of code at the end of our removeButton component. - \code - - - - - - \endcode + \snippet declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml transition All QML components have a transitions property. This describes how properties of items within the component should change. In this case diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml index dc3f505..bbe9f55 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml @@ -1,4 +1,9 @@ - +//! [0] +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 +} +//! [0] diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml index 31a95c6..cc5ebae 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml @@ -1,9 +1,34 @@ - - - - - - - - - +Rect { + id: page + width: layout.width + height: layout.height + color: "white" + VerticalLayout { + id: layout + width: contents.width + GroupBox { + contents: "1/RemoveButton.qml" + label: "Rectangle Component" + } + GroupBox { + contents: "2/RemoveButton.qml" + label: "Closed Remove Item Button" + } + GroupBox { + contents: "2a/RemoveButton.qml" + label: "Alternative Closed Button" + } + GroupBox { + contents: "3/RemoveButton.qml" + label: "Open Remove Item Button" + } + GroupBox { + contents: "4/RemoveButton.qml" + label: "State Based Button" + } + GroupBox { + contents: "5/RemoveButton.qml" + label: "Animated Button" + } + } +} diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml index d3cb045..cf7d2bc 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml @@ -1,10 +1,18 @@ - - - +//! [0] +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/trash.png" + } +} +//! [0] diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2a/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2a/RemoveButton.qml new file mode 100644 index 0000000..9df2864 --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2a/RemoveButton.qml @@ -0,0 +1,20 @@ +//! [0] +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + children: [ + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/trash.png" + } + ] +} +//! [0] diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml index 257686f..02b8145 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml @@ -1,23 +1,39 @@ - - - - - +//! [0] +Rect { + id: removeButton + width: 230 + height: 30 + color: "red" + radius: 5 + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/cancel.png" + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/ok.png" + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: AlignHCenter + text: "Remove" + } +} +//! [0] diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml index 6d97db1..632ade9 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml @@ -1,9 +1,13 @@ - - - - - - - - - - - - - - - - - - - - - - - - + + } + ] +//! [script] +//! [mouse region] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } +//! [mouse region] + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: AlignHCenter + text: "Remove" + opacity: 0 + } +//! [states] + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: 230 + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] +//! [states] +} diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml index ddb3507..a56193d 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml @@ -1,9 +1,12 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: AlignHCenter + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: 230 + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] +//! [transition] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +//! [transition] +} diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml index 77f7093..665c072 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml @@ -1,25 +1,59 @@ - - - - - - - - - - - - - - - - - - - - +FocusRealm { + id: groupBox + width: Math.max(270, subItem.width+40) + height: Math.max(70, subItem.height+40) + properties: Property { + name: "contents" + } + properties: Property { + name: "label" + } + Rect { + id: wrapper + x: 5 + y: 10 + radius: 10 + width: groupBox.width-20 + height: groupBox.height-20 + color: "white" + pen.color: "black" + Item { + id: subItem + qml: groupBox.contents + anchors.top: parent.top + anchors.topMargin: 10 + anchors.right: parent.right + anchors.rightMargin: 10 + width: qmlItem.width + height: qmlItem.height + } + } + Rect { + x: 20 + y: 0 + height: text.height + width: text.width+10 + color: "white" + Text { + x: 5 + id: text + text: label + font.bold: true + } + } + Rect { + color: "black" + anchors.fill: parent + opacity: parent.focus ? 0 : 0.3 + MouseRegion { + anchors.fill: parent + onClicked: { parent.parent.focus=true } + } + opacity: Behaviour { + NumericAnimation { + property: "opacity" + duration: 250 + } + } + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml index 6d8bb9f..1c50110 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml @@ -1,18 +1,28 @@ - - - - - +Item { + id: contactField + clip: true + width: 230 + height: 30 + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + } + Text { + id: fieldText + width: contactField.width-80 + anchors.right: removeButton.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + font.bold: true + color: "black" + text: 123123 + } + Image { + src: "../../shared/pics/phone.png" + anchors.right: fieldText.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml index ddb3507..b3ac12d 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml @@ -1,9 +1,12 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: AlignHCenter + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: 230 + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml index ee860b0..07ab55c 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml @@ -1,20 +1,31 @@ - - - - - +Item { + id: contactField + clip: true + width: 230 + height: 30 + Item { + id: removeButton + qml: "RemoveButton.qml" + width: qmlItem.width + height: qmlItem.height + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + } + Text { + id: fieldText + width: contactField.width-80 + anchors.right: removeButton.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + font.bold: true + color: "black" + text: 123123 + } + Image { + src: "../../shared/pics/phone.png" + anchors.right: fieldText.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml index ddb3507..b3ac12d 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml @@ -1,9 +1,12 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: AlignHCenter + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: 230 + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml index bff68b9..a31a5e0 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml @@ -1,19 +1,29 @@ - - - - - - +import "lib" +Item { + id: contactField + clip: true + width: 230 + height: 30 + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + } + Text { + id: fieldText + width: contactField.width-80 + anchors.right: removeButton.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + font.bold: true + color: "black" + text: 123123 + } + Image { + src: "../../shared/pics/phone.png" + anchors.right: fieldText.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml index 524bde2..30985fb 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml @@ -1,9 +1,12 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: AlignHCenter + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: 230 + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml index 5f8ff51..badf7a4 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml @@ -1,20 +1,30 @@ - - - - - +Item { + id: contactField + clip: true + width: 230 + height: 30 + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + expandedWidth: contactField.width + onConfirmed: { print('Clear field text'); fieldText.text='' } + } + Text { + id: fieldText + width: contactField.width-80 + anchors.right: removeButton.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + font.bold: true + color: "black" + text: 123123 + } + Image { + src: "../../shared/pics/phone.png" + anchors.right: fieldText.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml index e52bcbf..e6c7c82 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml @@ -1,15 +1,19 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle(); removeButton.confirmed.emit() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: AlignHCenter + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: removeButton.expandedWidth + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml index 6210308..540e900 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml @@ -1,13 +1,44 @@ - - - - - - - - - - - - - +Rect { + id: page + width: layout.width + height: layout.height + color: "white" + GridLayout { + id: layout + columns: 2 + rows: 4 + width: contents.width + GroupBox { + contents: "1/ContactField.qml" + label: "Loading: simple" + } + GroupBox { + contents: "1a/ContactField.qml" + label: "Loading: qml property" + } + GroupBox { + contents: "1b/ContactField.qml" + label: "Loading: added path" + } + GroupBox { + contents: "1c/ContactField.qml" + label: "Loading: added namespace" + } + GroupBox { + contents: "2/ContactField.qml" + label: "Using properties" + } + GroupBox { + contents: "3/ContactField.qml" + label: "Defining signals" + } + GroupBox { + contents: "3/Contact.qml" + label: "Multiple Items" + } + GroupBox { + contents: "4/Contact.qml" + label: "Mouse Grabbing" + } + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml index cf6c657..33ac627 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml @@ -1,29 +1,53 @@ - - - - - - - - - - - - - +Item { + id: contactDetails + width: 230 + height: layout.height + properties: Property { + name: "contactid" + value: "" + } + properties: Property { + name: "label" + onValueChanged: { labelField.value = label } + } + properties: Property { + name: "phone" + onValueChanged: { phoneField.value = phone } + } + properties: Property { + name: "email" + onValueChanged: { emailField.value = email } + } + VerticalLayout { + id: layout + anchors.fill: parent + spacing: 5 + margin: 5 + ContactField { + id: labelField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + label: "Name" + } + ContactField { + id: phoneField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + icon: "../../shared/pics/phone.png" + label: "Phone" + } + ContactField { + id: emailField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + icon: "../../shared/pics/email.png" + label: "Email" + } + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml index 5748a81..26bfca5 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml @@ -1,36 +1,67 @@ - - - - - - - - - - - - - - - - - - - - - +Item { + id: contactField + clip: true + width: 230 + height: 30 + properties: Property { + name: "label" + value: "Name" + } + properties: Property { + name: "icon" + value: "../../shared/pics/phone.png" + } + properties: Property { + name: "value" + } + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + expandedWidth: contactField.width + onConfirmed: { print('Clear field text'); fieldText.text='' } + } + FieldText { + id: fieldText + width: contactField.width-70 + anchors.right: removeButton.left + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + label: contactField.label + text: contactField.value + } + Image { + anchors.right: fieldText.left + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + src: contactField.icon + } + states: [ + State { + name: "editingText" + when: fieldText.state == 'editing' + SetProperty { + target: removeButton.anchors + property: "rightMargin" + value: -35 + } + SetProperty { + target: fieldText + property: "width" + value: contactField.width + } + } + ] + transitions: [ + Transition { + fromState: "" + toState: "*" + reversible: true + NumericAnimation { + properties: "width,rightMargin" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml index 8010ac0..7da13e7 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml @@ -1,21 +1,23 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + } + ] + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/cancel.png" + opacity: 0 + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/ok.png" + opacity: 0 + } + TextEdit { + id: textEdit + anchors.left: parent.left + anchors.leftMargin: 5 + anchors.right: parent.right + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + color: "black" + font.bold: true + readOnly: true + wrap: false + } + Text { + id: textLabel + x: 5 + width: parent.width-10 + anchors.verticalCenter: parent.verticalCenter + hAlign: AlignHCenter + color: "#505050" + font.italic: true + text: fieldText.label + opacity: textEdit.text == '' ? 1 : 0 + opacity: Behaviour { + NumericAnimation { + property: "opacity" + duration: 250 + } + } + } + MouseRegion { + anchors.fill: cancelIcon + onClicked: { reset() } + } + MouseRegion { + anchors.fill: confirmIcon + onClicked: { confirm() } + } + MouseRegion { + id: editRegion + anchors.fill: textEdit + onClicked: { edit() } + } + states: [ + State { + name: "editing" + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: textEdit + property: "readOnly" + value: false + } + SetProperty { + target: textEdit + property: "focus" + value: true + } + SetProperty { + target: editRegion + property: "opacity" + value: 0 + } + SetProperty { + target: textEdit.anchors + property: "leftMargin" + value: 39 + } + SetProperty { + target: textEdit.anchors + property: "rightMargin" + value: 39 + } + } + ] + transitions: [ + Transition { + fromState: "" + toState: "*" + reversible: true + NumericAnimation { + properties: "opacity,leftMargin,rightMargin" + duration: 200 + } + ColorAnimation { + duration: 150 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml index e52bcbf..e6c7c82 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml @@ -1,15 +1,19 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle(); removeButton.confirmed.emit() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: AlignHCenter + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: removeButton.expandedWidth + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml index 2f4d540..626f99d 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml @@ -1,32 +1,57 @@ - - - - - - - - - - - - - - - - +Item { + id: contactDetails + width: 230 + height: layout.height + properties: Property { + name: "mouseGrabbed" + value: false + } + properties: Property { + name: "contactid" + value: "" + } + properties: Property { + name: "label" + onValueChanged: { labelField.value = label } + } + properties: Property { + name: "phone" + onValueChanged: { phoneField.value = phone } + } + properties: Property { + name: "email" + onValueChanged: { emailField.value = email } + } + VerticalLayout { + id: layout + anchors.fill: parent + spacing: 5 + margin: 5 + ContactField { + id: labelField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + label: "Name" + } + ContactField { + id: phoneField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + icon: "../../shared/pics/phone.png" + label: "Phone" + } + ContactField { + id: emailField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + icon: "../../shared/pics/email.png" + label: "Email" + } + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml index 819914c..acc40e2 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml @@ -1,35 +1,64 @@ - - - - - - - - - - - - - - - - - - - - - +Item { + id: contactField + clip: true + height: 30 + properties: Property { + name: "label" + } + properties: Property { + name: "icon" + } + properties: Property { + name: "value" + } + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + expandedWidth: contactField.width + onConfirmed: { print('Clear field text'); fieldText.text='' } + } + FieldText { + id: fieldText + width: contactField.width-70 + anchors.right: removeButton.left + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + label: contactField.label + text: contactField.value + } + Image { + anchors.right: fieldText.left + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + src: contactField.icon + } + states: [ + State { + name: "editingText" + when: fieldText.state == 'editing' + SetProperty { + target: removeButton.anchors + property: "rightMargin" + value: -35 + } + SetProperty { + target: fieldText + property: "width" + value: contactField.width + } + } + ] + transitions: [ + Transition { + fromState: "" + toState: "*" + reversible: true + NumericAnimation { + properties: "width,rightMargin" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml index 0f2ef4e..3d92827 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml @@ -1,21 +1,23 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + } + ] + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/cancel.png" + opacity: 0 + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/ok.png" + opacity: 0 + } + TextEdit { + id: textEdit + anchors.left: parent.left + anchors.leftMargin: 5 + anchors.right: parent.right + anchors.rightMargin: 5 + anchors.verticalCenter: parent.verticalCenter + color: "black" + font.bold: true + readOnly: true + wrap: false + } + Text { + id: textLabel + x: 5 + width: parent.width-10 + anchors.verticalCenter: parent.verticalCenter + hAlign: AlignHCenter + color: "#505050" + font.italic: true + text: fieldText.label + opacity: textEdit.text == '' ? 1 : 0 + opacity: Behaviour { + NumericAnimation { + property: "opacity" + duration: 250 + } + } + } + MouseRegion { + anchors.fill: cancelIcon + onClicked: { reset() } + } + MouseRegion { + anchors.fill: confirmIcon + onClicked: { confirm() } + } + MouseRegion { + id: editRegion + anchors.fill: textEdit + onClicked: { edit() } + } + states: [ + State { + name: "editing" + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: textEdit + property: "readOnly" + value: false + } + SetProperty { + target: textEdit + property: "focus" + value: true + } + SetProperty { + target: editRegion + property: "opacity" + value: 0 + } + SetProperty { + target: textEdit.anchors + property: "leftMargin" + value: 39 + } + SetProperty { + target: textEdit.anchors + property: "rightMargin" + value: 39 + } + } + ] + transitions: [ + Transition { + fromState: "" + toState: "*" + reversible: true + NumericAnimation { + properties: "opacity,leftMargin,rightMargin" + duration: 200 + } + ColorAnimation { + duration: 150 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml index 14e5043..1e3b5ad 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml @@ -1,15 +1,19 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/trash.png" + opacity: 1 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/cancel.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle() } + } + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + src: "../../shared/pics/ok.png" + opacity: 0 + MouseRegion { + anchors.fill: parent + onClicked: { toggle(); removeButton.confirmed.emit() } + } + } + Text { + id: text + anchors.verticalCenter: parent.verticalCenter + anchors.left: confirmIcon.right + anchors.leftMargin: 4 + anchors.right: cancelIcon.left + anchors.rightMargin: 4 + font.bold: true + color: "white" + hAlign: AlignHCenter + text: "Remove" + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: removeButton + property: "width" + value: removeButton.expandedWidth + } + SetProperty { + target: text + property: "opacity" + value: 1 + } + SetProperty { + target: confirmIcon + property: "opacity" + value: 1 + } + SetProperty { + target: cancelIcon + property: "opacity" + value: 1 + } + SetProperty { + target: trashIcon + property: "opacity" + value: 0 + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "opened" + reversible: true + NumericAnimation { + properties: "opacity,x,width" + duration: 200 + } + } + ] +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml index 77f7093..665c072 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml @@ -1,25 +1,59 @@ - - - - - - - - - - - - - - - - - - - - +FocusRealm { + id: groupBox + width: Math.max(270, subItem.width+40) + height: Math.max(70, subItem.height+40) + properties: Property { + name: "contents" + } + properties: Property { + name: "label" + } + Rect { + id: wrapper + x: 5 + y: 10 + radius: 10 + width: groupBox.width-20 + height: groupBox.height-20 + color: "white" + pen.color: "black" + Item { + id: subItem + qml: groupBox.contents + anchors.top: parent.top + anchors.topMargin: 10 + anchors.right: parent.right + anchors.rightMargin: 10 + width: qmlItem.width + height: qmlItem.height + } + } + Rect { + x: 20 + y: 0 + height: text.height + width: text.width+10 + color: "white" + Text { + x: 5 + id: text + text: label + font.bold: true + } + } + Rect { + color: "black" + anchors.fill: parent + opacity: parent.focus ? 0 : 0.3 + MouseRegion { + anchors.fill: parent + onClicked: { parent.parent.focus=true } + } + opacity: Behaviour { + NumericAnimation { + property: "opacity" + duration: 250 + } + } + } +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml index e4cc1ce..8c02b48 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml @@ -1,32 +1,43 @@ - - - - - - - - - SELECT recid, label, email, phone FROM contacts ORDER BY label, recid - - - - - - - +import "../lib" +Item { + id: contacts + width: 240 + height: 230 + properties: Property { + name: "mouseGrabbed" + value: false + } + resources: [ + SqlConnection { + id: contactDatabase + name: "qmlConnection" + driver: "QSQLITE" + databaseName: "../../shared/contacts.sqlite" + }, + SqlQuery { + id: contactList + connection: contactDatabase + query: "SELECT recid, label, email, phone FROM contacts ORDER BY label, recid" + }, + Component { + id: contactDelegate + Text { + x: 45 + y: 12 + width: contactListView.width-45 + height: 30 + color: "black" + font.bold: true + text: model.label + } + } + ] + ListView { + id: contactListView + anchors.fill: parent + clip: true + model: contactList + delegate: contactDelegate + focus: true + } +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml index 99d0bbb..88fc121 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml @@ -1,70 +1,123 @@ - - - - - - - - - SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid - - - - - - - - - - - - - - - - - - - - - - - if (wrapper.state == 'opened') { - wrapper.state = ''; +import "../lib" +Item { + id: contacts + width: 240 + height: 230 + properties: Property { + name: "mouseGrabbed" + value: false + } + resources: [ + SqlConnection { + id: contactDatabase + name: "qmlConnection" + driver: "QSQLITE" + databaseName: "../../shared/contacts.sqlite" + }, + SqlQuery { + id: contactList + connection: contactDatabase + query: "SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid" + }, + Component { + id: contactDelegate + Item { + id: wrapper + x: 0 + width: ListView.view.width + height: 34 + Text { + id: label + x: 45 + y: 12 + width: parent.width-45 + text: model.label + color: "black" + font.bold: true + } + MouseRegion { + anchors.fill: label + onClicked: { wrapper.state='opened' } + } + Contact { + id: details + anchors.fill: parent + contactid: model.contactid + label: model.label + email: model.email + phone: model.phone + opacity: 0 + } + states: [ + State { + name: "opened" + SetProperty { + target: wrapper + property: "height" + value: contactListView.height + } + SetProperty { + target: contactListView + property: "yPosition" + value: wrapper.y + } + SetProperty { + target: contactListView + property: "locked" + value: 1 + } + SetProperty { + target: label + property: "opacity" + value: 0 + } + SetProperty { + target: details + property: "opacity" + value: 1 + } } - - - - -