diff options
Diffstat (limited to 'examples')
62 files changed, 2782 insertions, 1384 deletions
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 new file mode 100644 index 0000000..bbe9f55 --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml @@ -0,0 +1,9 @@ +//! [0] +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 +} +//! [0] diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_and_animation.qml index 4ea77f3..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}" margin="5" spacing="5"> - <GroupBox contents="RemoveButton1.qml" label="Rectangle Component"/> - <GroupBox contents="RemoveButton2.qml" label="Closed Remove Item Button"/> - <GroupBox contents="RemoveButton3.qml" label="Open Remove Item Button"/> - <GroupBox contents="RemoveButton4.qml" label="State Based Button"/> - <GroupBox contents="RemoveButton5.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 new file mode 100644 index 0000000..247e38b --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml @@ -0,0 +1,18 @@ +//! [0] +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../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..6c6a949 --- /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 + source: "../../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 new file mode 100644 index 0000000..964975f --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml @@ -0,0 +1,39 @@ +//! [0] +Rect { + id: removeButton + width: 230 + height: 30 + color: "red" + radius: 5 + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../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 new file mode 100644 index 0000000..79aae7a --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml @@ -0,0 +1,110 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 +//! [script] + resources: [ + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] +//! [script] +//! [mouse region] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../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 + source: "../../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 + source: "../../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 new file mode 100644 index 0000000..6c9078a --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml @@ -0,0 +1,117 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + resources: [ + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../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 + source: "../../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 + source: "../../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 01f26ee..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,17 +1,59 @@ -<Item 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> -</Item> +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/1_Drawing_and_Animation/RemoveButton1.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml deleted file mode 100644 index dc3f505..0000000 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml +++ /dev/null @@ -1,4 +0,0 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"/> diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml deleted file mode 100644 index 77ff616..0000000 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml +++ /dev/null @@ -1,10 +0,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}" - source="../shared/pics/trash.png"/> -</Rect> diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml deleted file mode 100644 index 0431f59..0000000 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml +++ /dev/null @@ -1,23 +0,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}" - source="../shared/pics/cancel.png"/> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - source="../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> diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml deleted file mode 100644 index db894ae..0000000 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml +++ /dev/null @@ -1,65 +0,0 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <resources> - <Script> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - } else { - removeButton.state = 'opened'; - } - } - </Script> - </resources> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - source="../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}" - source="../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}" - source="../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> diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml deleted file mode 100644 index 26fe2c9..0000000 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml +++ /dev/null @@ -1,70 +0,0 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <resources> - <Script> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - } else { - removeButton.state = 'opened'; - } - } - </Script> - </resources> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - source="../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}" - source="../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}" - source="../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> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml new file mode 100644 index 0000000..0218c3d --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml @@ -0,0 +1,30 @@ +//! [load] +Item { + id: contactField + clip: true + width: 230 + height: 30 + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + } +//! [load] + 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 { + source: "../../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 new file mode 100644 index 0000000..3142c45 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml @@ -0,0 +1,115 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + resources: [ + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../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 + source: "../../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 + source: "../../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 new file mode 100644 index 0000000..62089b8 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml @@ -0,0 +1,33 @@ +//! [load] +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 + } +//! [load] + 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 { + source: "../../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 new file mode 100644 index 0000000..3142c45 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml @@ -0,0 +1,115 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + resources: [ + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../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 + source: "../../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 + source: "../../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 new file mode 100644 index 0000000..1366548 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/ContactField.qml @@ -0,0 +1,29 @@ +import "lib" +Item { + id: contactField + clip: true + width: 230 + height: 30 + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + } + Text { + id: fieldText + width: contactField.width-80 + anchors.right: removeButton.left + anchors.rightMargin: 10 + anchors.verticalCenter: parent.verticalCenter + font.bold: true + color: "black" + text: 123123 + } + Image { + source: "../../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 new file mode 100644 index 0000000..a358b21 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/1b/lib/RemoveButton.qml @@ -0,0 +1,117 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + resources: [ + Script { + + function toggle() { + print('removeButton.toggle()'); + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../../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 + source: "../../../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 + source: "../../../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 new file mode 100644 index 0000000..2542c1c --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml @@ -0,0 +1,32 @@ +Item { + id: contactField + clip: true + width: 230 + height: 30 +//! [use properties and signals] + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + expandedWidth: contactField.width + onConfirmed: { fieldText.text='' } + } +//! [use properties and signals] + 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 { + source: "../../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 new file mode 100644 index 0000000..45b1899 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml @@ -0,0 +1,124 @@ +//! [define properties and signals] +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + properties: Property { + name: "expandedWidth" + value: 230 + } + signals: Signal { + name: "confirmed" + } +//! [define properties and signals] + resources: [ + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../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 + source: "../../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 + source: "../../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 13bc209..4d95424 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml @@ -1,12 +1,47 @@ -<Rect id="page" width="{layout.width}" height="{layout.height}" color='white'> - <properties> - <Property name="mouseGrabbed" value="false"/> - </properties> - <VerticalLayout id="layout" width="{contents.width}" margin="5" spacing="5"> - <GroupBox contents="ContactField1.qml" label="Loading Component"/> - <GroupBox contents="ContactField2.qml" label="Using properties"/> - <GroupBox contents="ContactField3.qml" label="Defining signals"/> - <GroupBox contents="Contact3.qml" label="Multiple Items"/> - <GroupBox contents="Contact4.qml" label="Mouse Grabbing"/> - </VerticalLayout> -</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: "2/ContactField.qml" + label: "Using properties" + } + GroupBox { + id: prev + contents: "3/ContactField.qml" + label: "Defining signals" + } + Rect { + color: "black" + opacity: 0.3 + width: prev.width + height: prev.height + } + 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 new file mode 100644 index 0000000..33ac627 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml @@ -0,0 +1,53 @@ +Item { + id: contactDetails + width: 230 + height: layout.height + properties: Property { + name: "contactid" + value: "" + } + properties: Property { + name: "label" + onValueChanged: { labelField.value = label } + } + properties: Property { + name: "phone" + onValueChanged: { phoneField.value = phone } + } + properties: Property { + name: "email" + onValueChanged: { emailField.value = email } + } + VerticalLayout { + id: layout + anchors.fill: parent + spacing: 5 + margin: 5 + ContactField { + id: labelField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + label: "Name" + } + ContactField { + id: phoneField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + icon: "../../shared/pics/phone.png" + label: "Phone" + } + ContactField { + id: emailField + anchors.left: layout.left + anchors.leftMargin: 5 + anchors.right: layout.right + anchors.rightMargin: 5 + icon: "../../shared/pics/email.png" + label: "Email" + } + } +} diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml new file mode 100644 index 0000000..2d3d58a --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml @@ -0,0 +1,69 @@ +//! [all] +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: { 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 + source: 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 + } + } + ] +} +//! [all] diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml new file mode 100644 index 0000000..cf654cf --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml @@ -0,0 +1,156 @@ +//! [value change] +Rect { + id: fieldText + height: 30 + radius: 5 + color: "white" + properties: Property { + name: "text" + value: "" + onValueChanged: { reset() } + } +//! [value change] + properties: Property { + name: "label" + value: "" + } + signals: Signal { + name: "confirmed" + } + resources: [ + Script { + + function edit() { + fieldText.state='editing'; + } + function confirm() { + fieldText.text = textEdit.text; + fieldText.state=''; + fieldText.confirmed.emit(); + } + function reset() { + textEdit.text = fieldText.text; + fieldText.state=''; + } + + } + ] + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../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 + } +//! [behavior] + 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 + } + } + } +//! [behavior] + 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 new file mode 100644 index 0000000..309ee5a --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml @@ -0,0 +1,122 @@ +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() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + } else { + removeButton.state = 'opened'; + } + } + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../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 + source: "../../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 + source: "../../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 new file mode 100644 index 0000000..0587a51 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml @@ -0,0 +1,59 @@ +//! [grab property] +Item { + id: contactDetails + width: 230 + height: layout.height + properties: Property { + name: "mouseGrabbed" + value: false + } +//! [grab property] + 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 new file mode 100644 index 0000000..0c422b7 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml @@ -0,0 +1,64 @@ +Item { + id: contactField + clip: true + height: 30 + properties: Property { + name: "label" + } + properties: Property { + name: "icon" + } + properties: Property { + name: "value" + } + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + expandedWidth: contactField.width + onConfirmed: { 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 + source: 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 new file mode 100644 index 0000000..6bb4e0a --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml @@ -0,0 +1,157 @@ +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'; + contactDetails.mouseGrabbed=true; + } + } + function confirm() { + fieldText.text = textEdit.text; + fieldText.state=''; + contactDetails.mouseGrabbed=false; + fieldText.confirmed.emit(); + } + function reset() { + textEdit.text = fieldText.text; + fieldText.state=''; + contactDetails.mouseGrabbed=false; + } + + } + ] + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../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 new file mode 100644 index 0000000..b57a95b --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml @@ -0,0 +1,128 @@ +Rect { + id: removeButton + width: 30 + height: 30 + color: "red" + radius: 5 + properties: Property { + name: "expandedWidth" + value: 230 + } + signals: Signal { + name: "confirmed" + } + resources: [ +//! [grab] + Script { + function toggle() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + contactDetails.mouseGrabbed=false; + } else { + if (!contactDetails.mouseGrabbed) { + removeButton.state = 'opened'; + contactDetails.mouseGrabbed=true; + } + } + } + + } +//! [grab] + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../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 + source: "../../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 + source: "../../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/Contact3.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml deleted file mode 100644 index 2933437..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml +++ /dev/null @@ -1,29 +0,0 @@ -<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"> - <ContactField3 id="labelField" - anchors.left="{layout.left}" anchors.leftMargin="5" - anchors.right="{layout.right}" anchors.rightMargin="5" - label="Name"/> - <ContactField3 id="phoneField" - anchors.left="{layout.left}" anchors.leftMargin="5" - anchors.right="{layout.right}" anchors.rightMargin="5" - icon="../shared/pics/phone.png" - label="Phone"/> - <ContactField3 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> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml deleted file mode 100644 index 9e988c0..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml +++ /dev/null @@ -1,29 +0,0 @@ -<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"> - <ContactField4 id="labelField" - anchors.left="{layout.left}" anchors.leftMargin="5" - anchors.right="{layout.right}" anchors.rightMargin="5" - label="Name"/> - <ContactField4 id="phoneField" - anchors.left="{layout.left}" anchors.leftMargin="5" - anchors.right="{layout.right}" anchors.rightMargin="5" - icon="../shared/pics/phone.png" - label="Phone"/> - <ContactField4 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> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml deleted file mode 100644 index 55eb799..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml +++ /dev/null @@ -1,18 +0,0 @@ -<Item id="contactField" - clip="true" - width="230" - height="30"> - <RemoveButton1 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 source="../shared/pics/phone.png" - anchors.right="{fieldText.left}" anchors.rightMargin="10" - anchors.verticalCenter="{parent.verticalCenter}"/> -</Item> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml deleted file mode 100644 index dd3e85c..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml +++ /dev/null @@ -1,20 +0,0 @@ -<Item id="contactField" - clip="true" - width="230" - height="30"> - <RemoveButton2 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 source="../shared/pics/phone.png" - anchors.right="{fieldText.left}" anchors.rightMargin="10" - anchors.verticalCenter="{parent.verticalCenter}"/> -</Item> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml deleted file mode 100644 index c9be130..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml +++ /dev/null @@ -1,36 +0,0 @@ -<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> - <RemoveButton3 id="removeButton" - anchors.right="{parent.right}" - anchors.top="{parent.top}" anchors.bottom="{parent.bottom}" - expandedWidth="{contactField.width}" - onConfirmed="print('Clear field text'); fieldText.text=''"/> - <FieldText3 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}" - source="{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> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml deleted file mode 100644 index b1c22cd..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml +++ /dev/null @@ -1,35 +0,0 @@ -<Item id="contactField" - clip="true" - height="30"> - <properties> - <Property name="label"/> - <Property name="icon"/> - <Property name="value"/> - </properties> - <RemoveButton4 id="removeButton" - anchors.right="{parent.right}" - anchors.top="{parent.top}" anchors.bottom="{parent.bottom}" - expandedWidth="{contactField.width}" - onConfirmed="print('Clear field text'); fieldText.text=''"/> - <FieldText4 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}" - source="{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> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml deleted file mode 100644 index 1fa99b1..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml +++ /dev/null @@ -1,91 +0,0 @@ -<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> - function edit() { - fieldText.state='editing'; - } - function confirm() { - fieldText.text = textEdit.text; - fieldText.state=''; - fieldText.confirmed.emit(); - } - function reset() { - 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}" - source="../shared/pics/cancel.png" - opacity="0"/> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - source="../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 != '' ? 0 : 1}"> - <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> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml deleted file mode 100644 index 9fd4646..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml +++ /dev/null @@ -1,96 +0,0 @@ -<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> - function edit() { - if (!page.mouseGrabbed) { - fieldText.state='editing'; - page.mouseGrabbed=true; - } - } - function confirm() { - fieldText.text = textEdit.text; - fieldText.state=''; - page.mouseGrabbed=false; - fieldText.confirmed.emit(); - } - function reset() { - textEdit.text = fieldText.text; - fieldText.state=''; - page.mouseGrabbed=false; - } - </Script> - </resources> - <Image id="cancelIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - source="../shared/pics/cancel.png" - opacity="0"/> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - source="../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 != '' ? 0 : 1}"> - <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> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml index 01f26ee..665c072 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml @@ -1,17 +1,59 @@ -<Item 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> -</Item> +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/RemoveButton1.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml deleted file mode 100644 index 26fe2c9..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml +++ /dev/null @@ -1,70 +0,0 @@ -<Rect id="removeButton" - width="30" height="30" - color="red" - radius="5"> - <resources> - <Script> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - } else { - removeButton.state = 'opened'; - } - } - </Script> - </resources> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - source="../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}" - source="../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}" - source="../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> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml deleted file mode 100644 index 65dace7..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml +++ /dev/null @@ -1,76 +0,0 @@ -<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> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - } else { - removeButton.state = 'opened'; - } - } - </Script> - </resources> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - source="../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}" - source="../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}" - source="../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> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml deleted file mode 100644 index 65dace7..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml +++ /dev/null @@ -1,76 +0,0 @@ -<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> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - } else { - removeButton.state = 'opened'; - } - } - </Script> - </resources> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - source="../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}" - source="../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}" - source="../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> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml deleted file mode 100644 index 9759636..0000000 --- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml +++ /dev/null @@ -1,80 +0,0 @@ -<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> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - page.mouseGrabbed=false; - } else { - if (!page.mouseGrabbed) { - removeButton.state = 'opened'; - page.mouseGrabbed=true; - } - } - } - </Script> - </resources> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - source="../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}" - source="../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}" - source="../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> diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml new file mode 100644 index 0000000..ce338e2 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml @@ -0,0 +1,47 @@ +import "../lib" +Item { + id: contacts + width: 240 + height: 230 + properties: Property { + name: "mouseGrabbed" + value: false + } + resources: [ +//! [model] + 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" + } +//! [model] + ] +//! [view] + ListView { + id: contactListView + anchors.fill: parent + clip: true + model: contactList + focus: true +//! [delegate] + delegate: [ + Text { + x: 45 + y: 12 + width: contactListView.width-45 + height: 30 + color: "black" + font.bold: true + text: model.label + } + ] +//! [delegate] + } +//! [view] +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml new file mode 100644 index 0000000..b6b3c31 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml @@ -0,0 +1,129 @@ +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" + } + ] +//! [button] + 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 + } +//! [button] + ListView { + id: contactListView + anchors.left: parent.left + anchors.right: parent.right + anchors.top: cancelEditButton.bottom + anchors.bottom: parent.bottom + clip: true + model: contactList + focus: true + delegate: [ +//! [components] + Item { + id: wrapper + x: 0 + width: ListView.view.width + height: 34 + Text { + id: label + x: 45 + y: 12 + width: parent.width-45 + color: "black" + font.bold: true + text: model.label + } + MouseRegion { + anchors.fill: label + onClicked: { wrapper.state='opened' } + } + Contact { + id: details + anchors.fill: parent + contactid: model.recid + label: model.label + email: model.email + phone: model.phone + opacity: 0 + } +//! [components] +//! [states] + 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 + } + } + ] +//! [states] +//! [transitions] + transitions: [ + Transition { + NumericAnimation { + duration: 500 + properties: "yPosition,height,opacity" + } + } + ] +//! [transitions] +//! [connections] + Connection { + sender: cancelEditButton + signal: "clicked()" + script: { + if (wrapper.state == 'opened') { + wrapper.state = ''; + } + } + } +//! [connections] + } + ] + } +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml new file mode 100644 index 0000000..f0b55db --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml @@ -0,0 +1,142 @@ +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" + } + ] + 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 + focus: true + delegate: [ + 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 + } +//! [setting qml] + MouseRegion { + anchors.fill: label + onClicked: { + Details.qml = 'Contact.qml'; + wrapper.state='opened'; + } + } + Item { + id: Details + anchors.fill: wrapper + opacity: 0 +//! [setting qml] +//! [binding] + 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 + } +//! [binding] + } + 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 = ''; + } + } + } + } + ] + } +} diff --git a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml index 6907676..e8d9a19 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml @@ -1,37 +1,29 @@ -<Rect id="page" width="{layout.width}" height="{layout.height}" color='white'> - <GridLayout id="layout" width="{contents.width}" height="{contents.height}"> - <FocusRealm id="realm1" focus="false" width="280" height="320"> - <GroupBox contents="ContactView1.qml" label="something" anchors.fill="{parent}"/> - <Rect id="box1" color="black" anchors.fill="{parent}" opacity="0.3"> - <MouseRegion anchors.fill="{parent}" onClicked="print('1'); realm1.focus=true; realm2.focus=false; realm3.focus=false; box1.opacity='0'; box2.opacity='0.3'; box3.opacity='0.3'" onPressed="" onPositionChanged=""/> - <opacity> - <Behaviour> - <NumericAnimation property="opacity" duration="250"/> - </Behaviour> - </opacity> - </Rect> - </FocusRealm> - <FocusRealm id="realm2" focus="false" width="280" height="320"> - <GroupBox contents="ContactView2.qml" label="something" anchors.fill="{parent}"/> - <Rect id="box2" color="black" anchors.fill="{parent}" opacity="0.3"> - <MouseRegion anchors.fill="{parent}" onClicked="realm1.focus=false; realm2.focus=true; realm3.focus=false; box1.opacity='0.3'; box2.opacity='0'; box3.opacity='0.3'" onPressed="" onPositionChanged=""/> - <opacity> - <Behaviour> - <NumericAnimation property="opacity" duration="250"/> - </Behaviour> - </opacity> - </Rect> - </FocusRealm> - <FocusRealm id="realm3" focus="true" width="280" height="320"> - <GroupBox contents="ContactView3.qml" label="something" anchors.fill="{parent}"/> - <Rect id="box3" color="black" anchors.fill="{parent}" opacity="0.3"> - <MouseRegion anchors.fill="{parent}" onClicked="realm1.focus=false; realm2.focus=false; realm3.focus=true; box1.opacity='0.3'; box2.opacity='0.3'; box3.opacity='0'" onPressed="" onPositionChanged=""/> - <opacity> - <Behaviour> - <NumericAnimation property="opacity" duration="250"/> - </Behaviour> - </opacity> - </Rect> - </FocusRealm> - </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/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/Button.qml deleted file mode 100644 index 14965b5..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/Button.qml +++ /dev/null @@ -1,38 +0,0 @@ -<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" - source="{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> diff --git a/examples/declarative/tutorials/contacts/3_Collections/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/Contact.qml deleted file mode 100644 index f620c25..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/Contact.qml +++ /dev/null @@ -1,28 +0,0 @@ -<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> diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml deleted file mode 100644 index 616d328..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml +++ /dev/null @@ -1,35 +0,0 @@ -<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}" - source="{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> diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml deleted file mode 100644 index 6606094..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml +++ /dev/null @@ -1,28 +0,0 @@ -<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> diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml deleted file mode 100644 index 97868e3..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml +++ /dev/null @@ -1,68 +0,0 @@ -<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 = ''; - } - </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"/> - <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> diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml deleted file mode 100644 index c15ece2..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml +++ /dev/null @@ -1,73 +0,0 @@ -<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 = ''; - } - </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"/> - <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> diff --git a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml deleted file mode 100644 index 6573ce2..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml +++ /dev/null @@ -1,96 +0,0 @@ -<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> - function edit() { - if (!contacts.mouseGrabbed) { - fieldText.state='editing'; - contacts.mouseGrabbed=true; - } - } - function confirm() { - fieldText.text = textEdit.text; - fieldText.state=''; - contacts.mouseGrabbed=false; - fieldText.confirmed.emit(); - } - function reset() { - textEdit.text = fieldText.text; - 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}" - source="../shared/pics/cancel.png" - opacity="0"/> - <Image id="confirmIcon" - width="22" height="22" - anchors.left="{parent.left}" anchors.leftMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - source="../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 != '' ? 0 : 1}"> - <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> diff --git a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml index 01f26ee..665c072 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml @@ -1,17 +1,59 @@ -<Item 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> -</Item> +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/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml deleted file mode 100644 index b096bca..0000000 --- a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml +++ /dev/null @@ -1,80 +0,0 @@ -<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> - function toggle() { - print('removeButton.toggle()'); - if (removeButton.state == 'opened') { - removeButton.state = ''; - contacts.mouseGrabbed=false; - } else { - if (!contacts.mouseGrabbed) { - removeButton.state = 'opened'; - contacts.mouseGrabbed=true; - } - } - } - </Script> - </resources> - <Image id="trashIcon" - width="22" height="22" - anchors.right="{parent.right}" anchors.rightMargin="4" - anchors.verticalCenter="{parent.verticalCenter}" - source="../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}" - source="../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}" - source="../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> diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml new file mode 100644 index 0000000..57267f8 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Button.qml @@ -0,0 +1,61 @@ +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 + source: 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 new file mode 100644 index 0000000..a7e78dc --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/Contact.qml @@ -0,0 +1,52 @@ +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 new file mode 100644 index 0000000..0c422b7 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml @@ -0,0 +1,64 @@ +Item { + id: contactField + clip: true + height: 30 + properties: Property { + name: "label" + } + properties: Property { + name: "icon" + } + properties: Property { + name: "value" + } + RemoveButton { + id: removeButton + anchors.right: parent.right + anchors.top: parent.top + anchors.bottom: parent.bottom + expandedWidth: contactField.width + onConfirmed: { 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 + source: 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 new file mode 100644 index 0000000..8ba01da --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml @@ -0,0 +1,157 @@ +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'; + contacts.mouseGrabbed=true; + } + } + function confirm() { + fieldText.text = textEdit.text; + fieldText.state=''; + contacts.mouseGrabbed=false; + fieldText.confirmed.emit(); + } + function reset() { + textEdit.text = fieldText.text; + fieldText.state=''; + contacts.mouseGrabbed=false; + } + + } + ] + Image { + id: cancelIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../shared/pics/cancel.png" + opacity: 0 + } + Image { + id: confirmIcon + width: 22 + height: 22 + anchors.left: parent.left + anchors.leftMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../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 new file mode 100644 index 0000000..0b90e48 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml @@ -0,0 +1,126 @@ +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() { + if (removeButton.state == 'opened') { + removeButton.state = ''; + contacts.mouseGrabbed=false; + } else { + if (!contacts.mouseGrabbed) { + removeButton.state = 'opened'; + contacts.mouseGrabbed=true; + } + } + } + + } + ] + Image { + id: trashIcon + width: 22 + height: 22 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.verticalCenter: parent.verticalCenter + source: "../../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 + source: "../../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 + source: "../../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/Final/FieldText.qml b/examples/declarative/tutorials/contacts/Final/FieldText.qml index 38ad026..ad7669d 100644 --- a/examples/declarative/tutorials/contacts/Final/FieldText.qml +++ b/examples/declarative/tutorials/contacts/Final/FieldText.qml @@ -63,7 +63,7 @@ color="#505050" font.italic="true" text="{fieldText.label}" - opacity="{textEdit.text != '' ? 0 : 1}"> + opacity="{textEdit.text == '' ? 1 : 0}"> <opacity> <Behaviour> <NumericAnimation property="opacity" duration="250"/> |