diff options
37 files changed, 2674 insertions, 1599 deletions
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 - <Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"/> - \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 - <Rect id="removeButton" color="red"> - <width>30</width> - <height>30</height> - <radius>5</radius> - </Rect> - \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 - <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"/> - </Rect> - \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 <children> 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 - <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"/> - </children> - </Rect> - \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 - <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"/> - </Rect> - \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"/> - <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"/> + 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 - <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"/> - </State> - </states> - \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 - <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> - \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 - <resources> - <Script> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - } else { - removeButton.state = 'opened'; - } - } - </Script> - </resources> - \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 - <![CDATA[if (a && b) {}]]> - \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 - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> - \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 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"/> +//! [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="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"/> - </VerticalLayout> -</Rect> +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 @@ -<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"/> -</Rect> +//! [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 @@ -<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"/> -</Rect> +//! [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 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <resources> - <Script> +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 +//! [script] + resources: [ + Script { + function toggle() { print('removeButton.toggle()'); if (removeButton.state == 'opened') { @@ -12,54 +16,97 @@ removeButton.state = 'opened'; } } - </Script> - </resources> - <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> - <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> - <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()"/> - </Image> - <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"/> - </State> - </states> -</Rect> + + } + ] +//! [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 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <resources> - <Script> +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + resources: [ + Script { + function toggle() { print('removeButton.toggle()'); if (removeButton.state == 'opened') { @@ -12,59 +15,105 @@ removeButton.state = 'opened'; } } - </Script> - </resources> - <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> - <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> - <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()"/> - </Image> - <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"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> -</Rect> + + } + ] + 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"/> - <Property name="label"/> - </properties> - <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> - <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> - <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"/> - </Behaviour> - </opacity> - </Rect> -</FocusRealm> +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}"/> -</Item> +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 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <resources> - <Script> +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + resources: [ + Script { + function toggle() { print('removeButton.toggle()'); if (removeButton.state == 'opened') { @@ -12,59 +15,103 @@ removeButton.state = 'opened'; } } - </Script> - </resources> - <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> - <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> - <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()"/> - </Image> - <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"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> -</Rect> + + } + ] + 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}"/> -</Item> +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 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <resources> - <Script> +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + resources: [ + Script { + function toggle() { print('removeButton.toggle()'); if (removeButton.state == 'opened') { @@ -12,59 +15,103 @@ removeButton.state = 'opened'; } } - </Script> - </resources> - <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> - <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> - <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()"/> - </Image> - <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"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> -</Rect> + + } + ] + 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 @@ -<?qtfx namespacepath:=lib ?> <!-- RemoveButton location --> -<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}"/> -</Item> +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 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <resources> - <Script> +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + resources: [ + Script { + function toggle() { print('removeButton.toggle()'); if (removeButton.state == 'opened') { @@ -12,59 +15,103 @@ removeButton.state = 'opened'; } } - </Script> - </resources> - <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> - <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> - <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()"/> - </Image> - <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"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> -</Rect> + + } + ] + 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}"/> -</Item> +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 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <properties> - <Property name="expandedWidth" value="230"/> - </properties> - <signals> - <Signal name="confirmed"/> - </signals> - <resources> - <Script> +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + properties: Property { + name: "expandedWidth" + value: 230 + } + signals: Signal { + name: "confirmed" + } + resources: [ + Script { + function toggle() { print('removeButton.toggle()'); if (removeButton.state == 'opened') { @@ -18,59 +22,103 @@ removeButton.state = 'opened'; } } - </Script> - </resources> - <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> - <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> - <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()"/> - </Image> - <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"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> -</Rect> + + } + ] + 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"/> - </GridLayout> -</Rect> +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=""/> - <Property name="label" onValueChanged="labelField.value = label"/> - <Property name="phone" onValueChanged="phoneField.value = phone"/> - <Property name="email" onValueChanged="emailField.value = email"/> - </properties> - <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"/> - </VerticalLayout> -</Item> +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"/> - <Property name="icon" value="../../shared/pics/phone.png"/> - <Property name="value"/> - </properties> - <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}"/> - </State> - </states> - <transitions> - <Transition fromState='' toState="*" reversible="true"> - <NumericAnimation properties="width,rightMargin" duration="200"/> - </Transition> - </transitions> -</Item> +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 @@ -<Rect id="fieldText" - height="30" - radius="5" - color="white"> - <properties> - <Property - name="text" - value="" - onValueChanged="reset()"/> - <Property - name="label" - value=""/> - </properties> - <signals> - <Signal name="confirmed"/> - </signals> - <resources> - <Script> +Rect { + id: fieldText + height: 30 + radius: 5 + color: "white" + properties: Property { + name: "text" + value: "" + onValueChanged: { reset() } + } + properties: Property { + name: "label" + value: "" + } + signals: Signal { + name: "confirmed" + } + resources: [ + Script { + function edit() { fieldText.state='editing'; } @@ -28,64 +30,123 @@ textEdit.text = fieldText.text; fieldText.state=''; } - </Script> - </resources> - <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"/> - </Behaviour> - </opacity> - </Text> - <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"/> - </State> - </states> - <transitions> - <Transition fromState='' toState="*" reversible="true"> - <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/> - <ColorAnimation duration="150"/> - </Transition> - </transitions> -</Rect> + + } + ] + 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 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <properties> - <Property name="expandedWidth" value="230"/> - </properties> - <signals> - <Signal name="confirmed"/> - </signals> - <resources> - <Script> +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + properties: Property { + name: "expandedWidth" + value: 230 + } + signals: Signal { + name: "confirmed" + } + resources: [ + Script { + function toggle() { print('removeButton.toggle()'); if (removeButton.state == 'opened') { @@ -18,59 +22,103 @@ removeButton.state = 'opened'; } } - </Script> - </resources> - <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> - <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> - <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()"/> - </Image> - <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"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> -</Rect> + + } + ] + 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> - <properties> - <Property name="contactid" value=""/> - <Property name="label" onValueChanged="labelField.value = label"/> - <Property name="phone" onValueChanged="phoneField.value = phone"/> - <Property name="email" onValueChanged="emailField.value = email"/> - </properties> - <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"/> - </VerticalLayout> -</Item> +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"/> - <Property name="icon"/> - <Property name="value"/> - </properties> - <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}"/> - </State> - </states> - <transitions> - <Transition fromState='' toState="*" reversible="true"> - <NumericAnimation properties="width,rightMargin" duration="200"/> - </Transition> - </transitions> -</Item> +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 @@ -<Rect id="fieldText" - height="30" - radius="5" - color="white"> - <properties> - <Property - name="text" - value="" - onValueChanged="reset()"/> - <Property - name="label" - value=""/> - </properties> - <signals> - <Signal name="confirmed"/> - </signals> - <resources> - <Script> +Rect { + id: fieldText + height: 30 + radius: 5 + color: "white" + properties: Property { + name: "text" + value: "" + onValueChanged: { reset() } + } + properties: Property { + name: "label" + value: "" + } + signals: Signal { + name: "confirmed" + } + resources: [ + Script { + function edit() { if (!contactDetails.mouseGrabbed) { fieldText.state='editing'; @@ -33,64 +35,123 @@ fieldText.state=''; contactDetails.mouseGrabbed=false; } - </Script> - </resources> - <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"/> - </Behaviour> - </opacity> - </Text> - <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"/> - </State> - </states> - <transitions> - <Transition fromState='' toState="*" reversible="true"> - <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/> - <ColorAnimation duration="150"/> - </Transition> - </transitions> -</Rect> + + } + ] + 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 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <properties> - <Property name="expandedWidth" value="230"/> - </properties> - <signals> - <Signal name="confirmed"/> - </signals> - <resources> - <Script> +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + properties: Property { + name: "expandedWidth" + value: 230 + } + signals: Signal { + name: "confirmed" + } + resources: [ + Script { + function toggle() { print('removeButton.toggle()'); if (removeButton.state == 'opened') { @@ -22,59 +26,103 @@ } } } - </Script> - </resources> - <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> - <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> - <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()"/> - </Image> - <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"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> -</Rect> + + } + ] + 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"/> - <Property name="label"/> - </properties> - <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> - <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> - <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"/> - </Behaviour> - </opacity> - </Rect> -</FocusRealm> +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 @@ -<?qtfx namespacepath:=../lib ?> -<Item id="contacts" - width="240" - height="230"> - <properties> - <Property name="mouseGrabbed" value="false"/> - </properties> - <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</query> - </SqlQuery> - <Component id="contactDelegate"> - <Text - x="45" y="12" - width="{contactListView.width-45}" - height="30" - color="black" - font.bold="true" - text="{model.label}"/> - </Component> - </resources> - <ListView id="contactListView" - anchors.fill="{parent}" - clip="true" - model="{contactList}" - delegate="{contactDelegate}" - focus="true"/> -</Item> +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 @@ -<?qtfx namespacepath:=../lib ?> -<Item id="contacts" - width="240" - height="230"> - <properties> - <Property name="mouseGrabbed" value="false"/> - </properties> - <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</query> - </SqlQuery> - <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"> - </Text> - <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"/> - </State> - </states> - <transitions> - <Transition> - <NumericAnimation duration="500" properties="yPosition,height,opacity"/> - </Transition> - </transitions> - <Connection sender="{cancelEditButton}" signal="clicked()"> - 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 + } } - </Connection> - </Item> - </Component> - </resources> - <Button id="cancelEditButton" - anchors.top="{parent.top}" anchors.topMargin="5" - anchors.right="{parent.right}" anchors.rightMargin="5" - icon="../../shared/pics/cancel.png" - opacity="{mouseGrabbed ? 0 : 1}"/> - <ListView id="contactListView" - anchors.left="{parent.left}" - anchors.right="{parent.right}" - anchors.top="{cancelEditButton.bottom}" - anchors.bottom="{parent.bottom}" - clip="true" - model="{contactList}" - delegate="{contactDelegate}" - focus="true"/> -</Item> + ] + transitions: [ + Transition { + NumericAnimation { + duration: 500 + properties: "yPosition,height,opacity" + } + } + ] + Connection { + sender: cancelEditButton + signal: "clicked()" + script: { + + if (wrapper.state == 'opened') { + wrapper.state = ''; + } + + } + } + } + }, + Button { + id: cancelEditButton + anchors.top: parent.top + anchors.topMargin: 5 + anchors.right: parent.right + anchors.rightMargin: 5 + icon: "../../shared/pics/cancel.png" + opacity: mouseGrabbed ? 0 : 1 + }, + ListView { + id: contactListView + anchors.left: parent.left + anchors.right: parent.right + anchors.top: cancelEditButton.bottom + anchors.bottom: parent.bottom + clip: true + model: contactList + delegate: contactDelegate + focus: true + } + ] +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml index a8c5cd0..09aab71 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml @@ -1,75 +1,140 @@ -<?qtfx namespacepath:=../lib ?> -<Item id="contacts" - width="240" - height="230"> - <properties> - <Property name="mouseGrabbed" value="false"/> - </properties> - <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</query> - </SqlQuery> - <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"> - </Text> - <MouseRegion - anchors.fill="{label}"> - <onClicked> - Details.qml = 'Contact.qml'; - wrapper.state='opened'; - </onClicked> - </MouseRegion> - <Item id="Details" - anchors.fill="{wrapper}" - opacity="0"> - <Bind target="{Details.qmlItem}" property="contactid" value="{model.contactid}"/> - <Bind target="{Details.qmlItem}" property="label" value="{model.label}"/> - <Bind target="{Details.qmlItem}" property="phone" value="{model.phone}"/> - <Bind target="{Details.qmlItem}" property="email" value="{model.email}"/> - </Item> - <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"/> - </State> - </states> - <transitions> - <Transition> - <NumericAnimation duration="500" properties="yPosition,height,opacity"/> - </Transition> - </transitions> - <Connection sender="{cancelEditButton}" signal="clicked()"> - 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: { Details.qml = 'Contact.qml'; + wrapper.state='opened'; } + } + Item { + id: Details + anchors.fill: wrapper + opacity: 0 + Bind { + target: Details.qmlItem + property: "contactid" + value: model.contactid } - </Connection> - </Item> - </Component> - </resources> - <Button id="cancelEditButton" - anchors.top="{parent.top}" anchors.topMargin="5" - anchors.right="{parent.right}" anchors.rightMargin="5" - icon="../../shared/pics/cancel.png" - opacity="{mouseGrabbed ? 0 : 1}"/> - <ListView id="contactListView" - anchors.left="{parent.left}" - anchors.right="{parent.right}" - anchors.top="{cancelEditButton.bottom}" - anchors.bottom="{parent.bottom}" - clip="true" - model="{contactList}" - delegate="{contactDelegate}" - focus="true"/> -</Item> + Bind { + target: Details.qmlItem + property: "label" + value: model.label + } + Bind { + target: Details.qmlItem + property: "phone" + value: model.phone + } + Bind { + target: Details.qmlItem + property: "email" + value: model.email + } + } + 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 + } + } + ] + transitions: [ + Transition { + NumericAnimation { + duration: 500 + properties: "yPosition,height,opacity" + } + } + ] + Connection { + sender: cancelEditButton + signal: "clicked()" + script: { + + if (wrapper.state == 'opened') { + wrapper.state = ''; + } + + } + } + } + }, + Button { + id: cancelEditButton + anchors.top: parent.top + anchors.topMargin: 5 + anchors.right: parent.right + anchors.rightMargin: 5 + icon: "../../shared/pics/cancel.png" + opacity: mouseGrabbed ? 0 : 1 + }, + ListView { + id: contactListView + anchors.left: parent.left + anchors.right: parent.right + anchors.top: cancelEditButton.bottom + anchors.bottom: parent.bottom + clip: true + model: contactList + delegate: contactDelegate + focus: true + } + ] +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml index dcbbe57..e8d9a19 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml @@ -1,12 +1,29 @@ -<Rect id="page" width="{layout.width}" height="{layout.height}" color='white'> - <Bind id="currentItem" value="true"/> -<!-- - relies on the current focus behavior whereby setting focus=true on a - component removes focus from any previous element ---> - <GridLayout id="layout" width="{contents.width}" height="{contents.height}"> - <GroupBox contents="1/ContactView.qml" label="something"/> - <GroupBox contents="2/ContactView.qml" label="something"/> - <GroupBox contents="3/ContactView.qml" label="something"/> - </GridLayout> -</Rect> +Rect { + id: page + width: layout.width + height: layout.height + color: "white" + Bind { + id: currentItem + value: true + } + // relies on the current focus behavior whereby setting focus=true on a + // component removes focus from any previous element + GridLayout { + id: layout + width: contents.width + height: contents.height + GroupBox { + contents: "1/ContactView.qml" + label: "something" + } + GroupBox { + contents: "2/ContactView.qml" + label: "something" + } + GroupBox { + contents: "3/ContactView.qml" + label: "something" + } + } +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml index 77f7093..665c072 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/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"/> - <Property name="label"/> - </properties> - <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> - <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> - <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"/> - </Behaviour> - </opacity> - </Rect> -</FocusRealm> +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/lib/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml index 8290d35..80588cf 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml @@ -1,38 +1,61 @@ -<Item id="button" width="30" height="30"> - <properties> - <Property name="icon"/> - </properties> - <signals> - <Signal name="clicked"/> - </signals> - <Rect id="buttonRect" - anchors.fill="{parent}" - color="lightgreen" - radius="5"> - <Image id="iconImage" - src="{button.icon}" - anchors.horizontalCenter="{buttonRect.horizontalCenter}" - anchors.verticalCenter="{buttonRect.verticalCenter}"/> - <MouseRegion id="buttonMouseRegion" - anchors.fill="{buttonRect}" - onClicked="button.clicked.emit()"/> - <states> - <State name="pressed" when="{buttonMouseRegion.pressed == true}"> - <SetProperty target="{buttonRect}" property="color" value="green"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="pressed"> - <ColorAnimation duration="200"/> - </Transition> - <Transition fromState="pressed" toState="*"> - <ColorAnimation duration="1000"/> - </Transition> - </transitions> - </Rect> - <opacity> - <Behaviour> - <NumericAnimation property="opacity" duration="250"/> - </Behaviour> - </opacity> -</Item> +Item { + id: button + width: 30 + height: 30 + properties: Property { + name: "icon" + } + signals: Signal { + name: "clicked" + } + Rect { + id: buttonRect + anchors.fill: parent + color: "lightgreen" + radius: 5 + Image { + id: iconImage + src: button.icon + anchors.horizontalCenter: buttonRect.horizontalCenter + anchors.verticalCenter: buttonRect.verticalCenter + } + MouseRegion { + id: buttonMouseRegion + anchors.fill: buttonRect + onClicked: { button.clicked.emit() } + } + states: [ + State { + name: "pressed" + when: buttonMouseRegion.pressed == true + SetProperty { + target: buttonRect + property: "color" + value: "green" + } + } + ] + transitions: [ + Transition { + fromState: "*" + toState: "pressed" + ColorAnimation { + duration: 200 + } + }, + Transition { + fromState: "pressed" + toState: "*" + ColorAnimation { + duration: 1000 + } + } + ] + } + opacity: Behaviour { + NumericAnimation { + property: "opacity" + duration: 250 + } + } +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml index 293b3a5..a7e78dc 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml @@ -1,28 +1,52 @@ -<Item id="contactDetails" - anchors.fill="{parent}"> - <properties> - <Property name="contactid" value=""/> - <Property name="label" onValueChanged="labelField.value = label"/> - <Property name="phone" onValueChanged="phoneField.value = phone"/> - <Property name="email" onValueChanged="emailField.value = email"/> - </properties> - <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"/> - </VerticalLayout> -</Item> +Item { + id: contactDetails + anchors.fill: parent + 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/3_Collections/lib/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml index 819914c..acc40e2 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml @@ -1,35 +1,64 @@ -<Item id="contactField" - clip="true" - height="30"> - <properties> - <Property name="label"/> - <Property name="icon"/> - <Property name="value"/> - </properties> - <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}"/> - </State> - </states> - <transitions> - <Transition fromState='' toState="*" reversible="true"> - <NumericAnimation properties="width,rightMargin" duration="200"/> - </Transition> - </transitions> -</Item> +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/3_Collections/lib/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml index 068590a..1329db6 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml @@ -1,21 +1,23 @@ -<Rect id="fieldText" - height="30" - radius="5" - color="white"> - <properties> - <Property - name="text" - value="" - onValueChanged="reset()"/> - <Property - name="label" - value=""/> - </properties> - <signals> - <Signal name="confirmed"/> - </signals> - <resources> - <Script> +Rect { + id: fieldText + height: 30 + radius: 5 + color: "white" + properties: Property { + name: "text" + value: "" + onValueChanged: { reset() } + } + properties: Property { + name: "label" + value: "" + } + signals: Signal { + name: "confirmed" + } + resources: [ + Script { + function edit() { if (!contacts.mouseGrabbed) { fieldText.state='editing'; @@ -33,64 +35,123 @@ fieldText.state=''; contacts.mouseGrabbed=false; } - </Script> - </resources> - <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"/> - </Behaviour> - </opacity> - </Text> - <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"/> - </State> - </states> - <transitions> - <Transition fromState='' toState="*" reversible="true"> - <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/> - <ColorAnimation duration="150"/> - </Transition> - </transitions> -</Rect> + + } + ] + 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/3_Collections/lib/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml index ad488c1..d99b550 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml @@ -1,15 +1,19 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <properties> - <Property name="expandedWidth" value="230"/> - </properties> - <signals> - <Signal name="confirmed"/> - </signals> - <resources> - <Script> +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + properties: Property { + name: "expandedWidth" + value: 230 + } + signals: Signal { + name: "confirmed" + } + resources: [ + Script { + function toggle() { print('removeButton.toggle()'); if (removeButton.state == 'opened') { @@ -22,59 +26,103 @@ } } } - </Script> - </resources> - <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> - <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> - <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()"/> - </Image> - <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"/> - </State> - </states> - <transitions> - <Transition fromState="*" toState="opened" reversible="true"> - <NumericAnimation properties="opacity,x,width" duration="200"/> - </Transition> - </transitions> -</Rect> + + } + ] + 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 + } + } + ] +} |