diff options
author | Ian Walters <ian.walters@nokia.com> | 2009-04-28 00:12:47 (GMT) |
---|---|---|
committer | Ian Walters <ian.walters@nokia.com> | 2009-04-28 00:12:47 (GMT) |
commit | 75e867d56b12626d3db13d21b6d55c5cebaf9858 (patch) | |
tree | fe38d781a5a70c64cd89846c68020e7b5211384a /examples/declarative | |
parent | 4eee67a60a173ba16ee3154377da7f410cabe168 (diff) | |
download | Qt-75e867d56b12626d3db13d21b6d55c5cebaf9858.zip Qt-75e867d56b12626d3db13d21b6d55c5cebaf9858.tar.gz Qt-75e867d56b12626d3db13d21b6d55c5cebaf9858.tar.bz2 |
Reorg so that snippets are more readable.
Reorg not complete though. May implement use of
namespace features in chapter 2 so that can reduce
duplicated files in chapter 3.
Diffstat (limited to 'examples/declarative')
41 files changed, 662 insertions, 107 deletions
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml index dc3f505..dc3f505 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1/Removebutton.qml 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..31a95c6 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,9 @@ <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 id="layout" width="{contents.width}"> + <GroupBox contents="1/RemoveButton.qml" label="Rectangle Component"/> + <GroupBox contents="2/RemoveButton.qml" label="Closed Remove Item Button"/> + <GroupBox contents="3/RemoveButton.qml" label="Open Remove Item Button"/> + <GroupBox contents="4/RemoveButton.qml" label="State Based Button"/> + <GroupBox contents="5/RemoveButton.qml" label="Animated Button"/> </VerticalLayout> </Rect> diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml index 2ba488d..d3cb045 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/2/RemoveButton.qml @@ -6,5 +6,5 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png"/> + src="../../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/3/RemoveButton.qml index 9a364c5..257686f 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/3/RemoveButton.qml @@ -6,12 +6,12 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png"/> + src="../../shared/pics/cancel.png"/> <Image id="confirmIcon" width="22" height="22" anchors.left="{parent.left}" anchors.leftMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png"/> + src="../../shared/pics/ok.png"/> <Text id="text" anchors.verticalCenter="{parent.verticalCenter}" anchors.left="{confirmIcon.right}" anchors.leftMargin="4" diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml index 45ca19d..6d97db1 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml @@ -18,7 +18,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" + src="../../shared/pics/trash.png" opacity="1"> <MouseRegion anchors.fill="{parent}" @@ -28,7 +28,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" + src="../../shared/pics/cancel.png" opacity="0"> <MouseRegion anchors.fill="{parent}" @@ -38,7 +38,7 @@ width="22" height="22" anchors.left="{parent.left}" anchors.leftMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" + src="../../shared/pics/ok.png" opacity="0"> <MouseRegion anchors.fill="{parent}" diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml index 68c1838..ddb3507 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml @@ -18,7 +18,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" + src="../../shared/pics/trash.png" opacity="1"> <MouseRegion anchors.fill="{parent}" @@ -28,7 +28,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" + src="../../shared/pics/cancel.png" opacity="0"> <MouseRegion anchors.fill="{parent}" @@ -38,7 +38,7 @@ width="22" height="22" anchors.left="{parent.left}" anchors.leftMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" + src="../../shared/pics/ok.png" opacity="0"> <MouseRegion anchors.fill="{parent}" 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..77f7093 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/GroupBox.qml @@ -1,4 +1,4 @@ -<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}"> +<FocusRealm id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}"> <properties> <Property name="contents"/> <Property name="label"/> @@ -14,4 +14,12 @@ <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> + <Rect color="black" anchors.fill="{parent}" opacity="{parent.focus ? 0 : 0.3}"> + <MouseRegion anchors.fill="{parent}" onClicked="parent.parent.focus=true"/> + <opacity> + <Behaviour> + <NumericAnimation property="opacity" duration="250"/> + </Behaviour> + </opacity> + </Rect> +</FocusRealm> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml index 7bfdd28..6d8bb9f 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml @@ -2,7 +2,7 @@ clip="true" width="230" height="30"> - <RemoveButton1 id="removeButton" + <RemoveButton id="removeButton" anchors.right="{parent.right}" anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/> <Text id="fieldText" @@ -12,7 +12,7 @@ font.bold="true" color="black" text="123123"/> - <Image src="../shared/pics/phone.png" + <Image src="../../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/RemoveButton1.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml index 68c1838..ddb3507 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml @@ -18,7 +18,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" + src="../../shared/pics/trash.png" opacity="1"> <MouseRegion anchors.fill="{parent}" @@ -28,7 +28,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" + src="../../shared/pics/cancel.png" opacity="0"> <MouseRegion anchors.fill="{parent}" @@ -38,7 +38,7 @@ width="22" height="22" anchors.left="{parent.left}" anchors.leftMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" + src="../../shared/pics/ok.png" opacity="0"> <MouseRegion anchors.fill="{parent}" diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml index 7ec3e4d..5f8ff51 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml @@ -2,7 +2,7 @@ clip="true" width="230" height="30"> - <RemoveButton2 id="removeButton" + <RemoveButton id="removeButton" anchors.right="{parent.right}" anchors.top="{parent.top}" anchors.bottom="{parent.bottom}" expandedWidth="{contactField.width}" @@ -14,7 +14,7 @@ font.bold="true" color="black" text="123123"/> - <Image src="../shared/pics/phone.png" + <Image src="../../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/RemoveButton2.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml index d9ff4c5..e52bcbf 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml @@ -24,7 +24,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" + src="../../shared/pics/trash.png" opacity="1"> <MouseRegion anchors.fill="{parent}" @@ -34,7 +34,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" + src="../../shared/pics/cancel.png" opacity="0"> <MouseRegion anchors.fill="{parent}" @@ -44,7 +44,7 @@ width="22" height="22" anchors.left="{parent.left}" anchors.leftMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" + src="../../shared/pics/ok.png" opacity="0"> <MouseRegion anchors.fill="{parent}" diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml index 92afc0c..98fdb86 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml @@ -1,9 +1,9 @@ <Rect id="page" width="{layout.width}" height="{layout.height}" color='white'> - <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 id="layout" width="{contents.width}"> + <GroupBox contents="1/ContactField.qml" label="Loading Component"/> + <GroupBox contents="2/ContactField.qml" label="Using properties"/> + <GroupBox contents="3/ContactField.qml" label="Defining signals"/> + <GroupBox contents="3/Contact.qml" label="Multiple Items"/> + <GroupBox contents="4/Contact.qml" label="Mouse Grabbing"/> </VerticalLayout> </Rect> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml index 2933437..cf6c657 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml @@ -11,19 +11,19 @@ anchors.fill="{parent}" spacing="5" margin="5"> - <ContactField3 id="labelField" + <ContactField id="labelField" anchors.left="{layout.left}" anchors.leftMargin="5" anchors.right="{layout.right}" anchors.rightMargin="5" label="Name"/> - <ContactField3 id="phoneField" + <ContactField id="phoneField" anchors.left="{layout.left}" anchors.leftMargin="5" anchors.right="{layout.right}" anchors.rightMargin="5" - icon="../shared/pics/phone.png" + icon="../../shared/pics/phone.png" label="Phone"/> - <ContactField3 id="emailField" + <ContactField id="emailField" anchors.left="{layout.left}" anchors.leftMargin="5" anchors.right="{layout.right}" anchors.rightMargin="5" - icon="../shared/pics/email.png" + icon="../../shared/pics/email.png" label="Email"/> </VerticalLayout> </Item> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml index cef25ce..5748a81 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml @@ -4,15 +4,15 @@ height="30"> <properties> <Property name="label" value="Name"/> - <Property name="icon" value="../shared/pics/phone.png"/> + <Property name="icon" value="../../shared/pics/phone.png"/> <Property name="value"/> </properties> - <RemoveButton3 id="removeButton" + <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=''"/> - <FieldText3 id="fieldText" + <FieldText id="fieldText" width="{contactField.width-70}" anchors.right="{removeButton.left}" anchors.rightMargin="5" anchors.verticalCenter="{parent.verticalCenter}" diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml index d09ad0b..8010ac0 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml @@ -34,13 +34,13 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" + src="../../shared/pics/cancel.png" opacity="0"/> <Image id="confirmIcon" width="22" height="22" anchors.left="{parent.left}" anchors.leftMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" + src="../../shared/pics/ok.png" opacity="0"/> <TextEdit id="textEdit" anchors.left="{parent.left}" anchors.leftMargin="5" diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml index d9ff4c5..e52bcbf 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml @@ -24,7 +24,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" + src="../../shared/pics/trash.png" opacity="1"> <MouseRegion anchors.fill="{parent}" @@ -34,7 +34,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" + src="../../shared/pics/cancel.png" opacity="0"> <MouseRegion anchors.fill="{parent}" @@ -44,7 +44,7 @@ width="22" height="22" anchors.left="{parent.left}" anchors.leftMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" + src="../../shared/pics/ok.png" opacity="0"> <MouseRegion anchors.fill="{parent}" diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml index e87ed60..2f4d540 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml @@ -14,19 +14,19 @@ anchors.fill="{parent}" spacing="5" margin="5"> - <ContactField4 id="labelField" + <ContactField id="labelField" anchors.left="{layout.left}" anchors.leftMargin="5" anchors.right="{layout.right}" anchors.rightMargin="5" label="Name"/> - <ContactField4 id="phoneField" + <ContactField id="phoneField" anchors.left="{layout.left}" anchors.leftMargin="5" anchors.right="{layout.right}" anchors.rightMargin="5" - icon="../shared/pics/phone.png" + icon="../../shared/pics/phone.png" label="Phone"/> - <ContactField4 id="emailField" + <ContactField id="emailField" anchors.left="{layout.left}" anchors.leftMargin="5" anchors.right="{layout.right}" anchors.rightMargin="5" - icon="../shared/pics/email.png" + 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/2_Reuse/4/ContactField.qml index 819914c..819914c 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml diff --git a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml index 191da52..0f2ef4e 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml @@ -39,13 +39,13 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" + src="../../shared/pics/cancel.png" opacity="0"/> <Image id="confirmIcon" width="22" height="22" anchors.left="{parent.left}" anchors.leftMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" + src="../../shared/pics/ok.png" opacity="0"/> <TextEdit id="textEdit" anchors.left="{parent.left}" anchors.leftMargin="5" diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml index 991d6a0..14e5043 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml @@ -28,7 +28,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" + src="../../shared/pics/trash.png" opacity="1"> <MouseRegion anchors.fill="{parent}" @@ -38,7 +38,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" + src="../../shared/pics/cancel.png" opacity="0"> <MouseRegion anchors.fill="{parent}" @@ -48,7 +48,7 @@ width="22" height="22" anchors.left="{parent.left}" anchors.leftMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" + src="../../shared/pics/ok.png" opacity="0"> <MouseRegion anchors.fill="{parent}" diff --git a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml index 01f26ee..77f7093 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/GroupBox.qml @@ -1,4 +1,4 @@ -<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}"> +<FocusRealm id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}"> <properties> <Property name="contents"/> <Property name="label"/> @@ -14,4 +14,12 @@ <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> + <Rect color="black" anchors.fill="{parent}" opacity="{parent.focus ? 0 : 0.3}"> + <MouseRegion anchors.fill="{parent}" onClicked="parent.parent.focus=true"/> + <opacity> + <Behaviour> + <NumericAnimation property="opacity" duration="250"/> + </Behaviour> + </opacity> + </Rect> +</FocusRealm> diff --git a/examples/declarative/tutorials/contacts/3_Collections/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/1/Button.qml index 8290d35..8290d35 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/Button.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/1/Button.qml diff --git a/examples/declarative/tutorials/contacts/3_Collections/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml index f620c25..293b3a5 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/Contact.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/1/Contact.qml @@ -17,12 +17,12 @@ <ContactField id="phoneField" anchors.left="{layout.left}" anchors.leftMargin="5" anchors.right="{layout.right}" anchors.rightMargin="5" - icon="../shared/pics/phone.png" + 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" + icon="../../shared/pics/email.png" label="Email"/> </VerticalLayout> </Item> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml index 13ccbc0..819914c 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactField.qml @@ -6,12 +6,12 @@ <Property name="icon"/> <Property name="value"/> </properties> - <RemoveButton4 id="removeButton" + <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=''"/> - <FieldText4 id="fieldText" + <FieldText id="fieldText" width="{contactField.width-70}" anchors.right="{removeButton.left}" anchors.rightMargin="5" anchors.verticalCenter="{parent.verticalCenter}" diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml index 6606094..d48aa02 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml @@ -5,7 +5,7 @@ <Property name="mouseGrabbed" value="false"/> </properties> <resources> - <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/> + <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> diff --git a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml index 199270c..068590a 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/1/FieldText.qml @@ -39,13 +39,13 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" + src="../../shared/pics/cancel.png" opacity="0"/> <Image id="confirmIcon" width="22" height="22" anchors.left="{parent.left}" anchors.leftMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" + src="../../shared/pics/ok.png" opacity="0"/> <TextEdit id="textEdit" anchors.left="{parent.left}" anchors.leftMargin="5" diff --git a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml index 493ab7a..ad488c1 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/1/RemoveButton.qml @@ -28,7 +28,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/trash.png" + src="../../shared/pics/trash.png" opacity="1"> <MouseRegion anchors.fill="{parent}" @@ -38,7 +38,7 @@ width="22" height="22" anchors.right="{parent.right}" anchors.rightMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/cancel.png" + src="../../shared/pics/cancel.png" opacity="0"> <MouseRegion anchors.fill="{parent}" @@ -48,7 +48,7 @@ width="22" height="22" anchors.left="{parent.left}" anchors.leftMargin="4" anchors.verticalCenter="{parent.verticalCenter}" - src="../shared/pics/ok.png" + src="../../shared/pics/ok.png" opacity="0"> <MouseRegion anchors.fill="{parent}" diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/2/Button.qml new file mode 100644 index 0000000..8290d35 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/2/Button.qml @@ -0,0 +1,38 @@ +<Item id="button" width="30" height="30"> + <properties> + <Property name="icon"/> + </properties> + <signals> + <Signal name="clicked"/> + </signals> + <Rect id="buttonRect" + anchors.fill="{parent}" + color="lightgreen" + radius="5"> + <Image id="iconImage" + src="{button.icon}" + anchors.horizontalCenter="{buttonRect.horizontalCenter}" + anchors.verticalCenter="{buttonRect.verticalCenter}"/> + <MouseRegion id="buttonMouseRegion" + anchors.fill="{buttonRect}" + onClicked="button.clicked.emit()"/> + <states> + <State name="pressed" when="{buttonMouseRegion.pressed == true}"> + <SetProperty target="{buttonRect}" property="color" value="green"/> + </State> + </states> + <transitions> + <Transition fromState="*" toState="pressed"> + <ColorAnimation duration="200"/> + </Transition> + <Transition fromState="pressed" toState="*"> + <ColorAnimation duration="1000"/> + </Transition> + </transitions> + </Rect> + <opacity> + <Behaviour> + <NumericAnimation property="opacity" duration="250"/> + </Behaviour> + </opacity> +</Item> diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml new file mode 100644 index 0000000..293b3a5 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/2/Contact.qml @@ -0,0 +1,28 @@ +<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/2/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml new file mode 100644 index 0000000..819914c --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactField.qml @@ -0,0 +1,35 @@ +<Item id="contactField" + clip="true" + height="30"> + <properties> + <Property name="label"/> + <Property name="icon"/> + <Property name="value"/> + </properties> + <RemoveButton id="removeButton" + anchors.right="{parent.right}" + anchors.top="{parent.top}" anchors.bottom="{parent.bottom}" + expandedWidth="{contactField.width}" + onConfirmed="print('Clear field text'); fieldText.text=''"/> + <FieldText id="fieldText" + width="{contactField.width-70}" + anchors.right="{removeButton.left}" anchors.rightMargin="5" + anchors.verticalCenter="{parent.verticalCenter}" + label="{contactField.label}" + text="{contactField.value}"/> + <Image + anchors.right="{fieldText.left}" anchors.rightMargin="5" + anchors.verticalCenter="{parent.verticalCenter}" + src="{contactField.icon}"/> + <states> + <State name="editingText" when="{fieldText.state == 'editing'}"> + <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/> + <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/> + </State> + </states> + <transitions> + <Transition fromState='' toState="*" reversible="true"> + <NumericAnimation properties="width,rightMargin" duration="200"/> + </Transition> + </transitions> +</Item> diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml index 97868e3..c72d9ce 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml @@ -5,7 +5,7 @@ <Property name="mouseGrabbed" value="false"/> </properties> <resources> - <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/> + <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> @@ -55,7 +55,8 @@ <Button id="cancelEditButton" anchors.top="{parent.top}" anchors.topMargin="5" anchors.right="{parent.right}" anchors.rightMargin="5" - icon="../shared/pics/cancel.png"/> + icon="../../shared/pics/cancel.png" + opacity="{mouseGrabbed ? 0 : 1}"/> <ListView id="contactListView" anchors.left="{parent.left}" anchors.right="{parent.right}" diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml new file mode 100644 index 0000000..068590a --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/2/FieldText.qml @@ -0,0 +1,96 @@ +<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}" + src="../../shared/pics/cancel.png" + opacity="0"/> + <Image id="confirmIcon" + width="22" height="22" + anchors.left="{parent.left}" anchors.leftMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../../shared/pics/ok.png" + opacity="0"/> + <TextEdit id="textEdit" + anchors.left="{parent.left}" anchors.leftMargin="5" + anchors.right="{parent.right}" anchors.rightMargin="5" + anchors.verticalCenter="{parent.verticalCenter}" + color="black" + font.bold="true" + readOnly="true" + wrap="false" + /> + <Text id="textLabel" + x="5" width="{parent.width-10}" + anchors.verticalCenter="{parent.verticalCenter}" + hAlign="AlignHCenter" + color="#505050" + font.italic="true" + text="{fieldText.label}" + opacity="{textEdit.text == '' ? 1 : 0}"> + <opacity> + <Behaviour> + <NumericAnimation property="opacity" duration="250"/> + </Behaviour> + </opacity> + </Text> + <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/> + <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/> + <MouseRegion + id="editRegion" + anchors.fill="{textEdit}" + onClicked="edit()"/> + <states> + <State name="editing"> + <SetProperty target="{confirmIcon}" property="opacity" value="1"/> + <SetProperty target="{cancelIcon}" property="opacity" value="1"/> + <SetProperty target="{textEdit}" property="readOnly" value="false"/> + <SetProperty target="{textEdit}" property="focus" value="true"/> + <SetProperty target="{editRegion}" property="opacity" value="0"/> + <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/> + <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/> + </State> + </states> + <transitions> + <Transition fromState='' toState="*" reversible="true"> + <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/> + <ColorAnimation duration="150"/> + </Transition> + </transitions> +</Rect> diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml new file mode 100644 index 0000000..ad488c1 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/2/RemoveButton.qml @@ -0,0 +1,80 @@ +<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}" + src="../../shared/pics/trash.png" + opacity="1"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Image id="cancelIcon" + width="22" height="22" + anchors.right="{parent.right}" anchors.rightMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../../shared/pics/cancel.png" + opacity="0"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Image id="confirmIcon" + width="22" height="22" + anchors.left="{parent.left}" anchors.leftMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../../shared/pics/ok.png" + opacity="0"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle(); removeButton.confirmed.emit()"/> + </Image> + <Text id="text" + anchors.verticalCenter="{parent.verticalCenter}" + anchors.left="{confirmIcon.right}" anchors.leftMargin="4" + anchors.right="{cancelIcon.left}" anchors.rightMargin="4" + font.bold="true" + color="white" + hAlign="AlignHCenter" + text="Remove" + opacity="0"/> + <states> + <State name="opened"> + <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/> + <SetProperty target="{text}" property="opacity" value="1"/> + <SetProperty target="{confirmIcon}" property="opacity" value="1"/> + <SetProperty target="{cancelIcon}" property="opacity" value="1"/> + <SetProperty target="{trashIcon}" property="opacity" value="0"/> + </State> + </states> + <transitions> + <Transition fromState="*" toState="opened" reversible="true"> + <NumericAnimation properties="opacity,x,width" duration="200"/> + </Transition> + </transitions> +</Rect> diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/3/Button.qml new file mode 100644 index 0000000..8290d35 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/3/Button.qml @@ -0,0 +1,38 @@ +<Item id="button" width="30" height="30"> + <properties> + <Property name="icon"/> + </properties> + <signals> + <Signal name="clicked"/> + </signals> + <Rect id="buttonRect" + anchors.fill="{parent}" + color="lightgreen" + radius="5"> + <Image id="iconImage" + src="{button.icon}" + anchors.horizontalCenter="{buttonRect.horizontalCenter}" + anchors.verticalCenter="{buttonRect.verticalCenter}"/> + <MouseRegion id="buttonMouseRegion" + anchors.fill="{buttonRect}" + onClicked="button.clicked.emit()"/> + <states> + <State name="pressed" when="{buttonMouseRegion.pressed == true}"> + <SetProperty target="{buttonRect}" property="color" value="green"/> + </State> + </states> + <transitions> + <Transition fromState="*" toState="pressed"> + <ColorAnimation duration="200"/> + </Transition> + <Transition fromState="pressed" toState="*"> + <ColorAnimation duration="1000"/> + </Transition> + </transitions> + </Rect> + <opacity> + <Behaviour> + <NumericAnimation property="opacity" duration="250"/> + </Behaviour> + </opacity> +</Item> diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml new file mode 100644 index 0000000..293b3a5 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/3/Contact.qml @@ -0,0 +1,28 @@ +<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/3/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml new file mode 100644 index 0000000..819914c --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactField.qml @@ -0,0 +1,35 @@ +<Item id="contactField" + clip="true" + height="30"> + <properties> + <Property name="label"/> + <Property name="icon"/> + <Property name="value"/> + </properties> + <RemoveButton id="removeButton" + anchors.right="{parent.right}" + anchors.top="{parent.top}" anchors.bottom="{parent.bottom}" + expandedWidth="{contactField.width}" + onConfirmed="print('Clear field text'); fieldText.text=''"/> + <FieldText id="fieldText" + width="{contactField.width-70}" + anchors.right="{removeButton.left}" anchors.rightMargin="5" + anchors.verticalCenter="{parent.verticalCenter}" + label="{contactField.label}" + text="{contactField.value}"/> + <Image + anchors.right="{fieldText.left}" anchors.rightMargin="5" + anchors.verticalCenter="{parent.verticalCenter}" + src="{contactField.icon}"/> + <states> + <State name="editingText" when="{fieldText.state == 'editing'}"> + <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/> + <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/> + </State> + </states> + <transitions> + <Transition fromState='' toState="*" reversible="true"> + <NumericAnimation properties="width,rightMargin" duration="200"/> + </Transition> + </transitions> +</Item> diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml index c15ece2..ec9ff57 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml @@ -5,7 +5,7 @@ <Property name="mouseGrabbed" value="false"/> </properties> <resources> - <SqlConnection id="contactDatabase" name="qmlConnection" driver="QSQLITE" databaseName="../shared/contacts.sqlite"/> + <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> @@ -60,7 +60,8 @@ <Button id="cancelEditButton" anchors.top="{parent.top}" anchors.topMargin="5" anchors.right="{parent.right}" anchors.rightMargin="5" - icon="../shared/pics/cancel.png"/> + icon="../../shared/pics/cancel.png" + opacity="{mouseGrabbed ? 0 : 1}"/> <ListView id="contactListView" anchors.left="{parent.left}" anchors.right="{parent.right}" diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml new file mode 100644 index 0000000..068590a --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/3/FieldText.qml @@ -0,0 +1,96 @@ +<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}" + src="../../shared/pics/cancel.png" + opacity="0"/> + <Image id="confirmIcon" + width="22" height="22" + anchors.left="{parent.left}" anchors.leftMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../../shared/pics/ok.png" + opacity="0"/> + <TextEdit id="textEdit" + anchors.left="{parent.left}" anchors.leftMargin="5" + anchors.right="{parent.right}" anchors.rightMargin="5" + anchors.verticalCenter="{parent.verticalCenter}" + color="black" + font.bold="true" + readOnly="true" + wrap="false" + /> + <Text id="textLabel" + x="5" width="{parent.width-10}" + anchors.verticalCenter="{parent.verticalCenter}" + hAlign="AlignHCenter" + color="#505050" + font.italic="true" + text="{fieldText.label}" + opacity="{textEdit.text == '' ? 1 : 0}"> + <opacity> + <Behaviour> + <NumericAnimation property="opacity" duration="250"/> + </Behaviour> + </opacity> + </Text> + <MouseRegion anchors.fill="{cancelIcon}" onClicked="reset()"/> + <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/> + <MouseRegion + id="editRegion" + anchors.fill="{textEdit}" + onClicked="edit()"/> + <states> + <State name="editing"> + <SetProperty target="{confirmIcon}" property="opacity" value="1"/> + <SetProperty target="{cancelIcon}" property="opacity" value="1"/> + <SetProperty target="{textEdit}" property="readOnly" value="false"/> + <SetProperty target="{textEdit}" property="focus" value="true"/> + <SetProperty target="{editRegion}" property="opacity" value="0"/> + <SetProperty target="{textEdit.anchors}" property="leftMargin" value="39"/> + <SetProperty target="{textEdit.anchors}" property="rightMargin" value="39"/> + </State> + </states> + <transitions> + <Transition fromState='' toState="*" reversible="true"> + <NumericAnimation properties="opacity,leftMargin,rightMargin" duration="200"/> + <ColorAnimation duration="150"/> + </Transition> + </transitions> +</Rect> diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml new file mode 100644 index 0000000..ad488c1 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/3/RemoveButton.qml @@ -0,0 +1,80 @@ +<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}" + src="../../shared/pics/trash.png" + opacity="1"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Image id="cancelIcon" + width="22" height="22" + anchors.right="{parent.right}" anchors.rightMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../../shared/pics/cancel.png" + opacity="0"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Image id="confirmIcon" + width="22" height="22" + anchors.left="{parent.left}" anchors.leftMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../../shared/pics/ok.png" + opacity="0"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle(); removeButton.confirmed.emit()"/> + </Image> + <Text id="text" + anchors.verticalCenter="{parent.verticalCenter}" + anchors.left="{confirmIcon.right}" anchors.leftMargin="4" + anchors.right="{cancelIcon.left}" anchors.rightMargin="4" + font.bold="true" + color="white" + hAlign="AlignHCenter" + text="Remove" + opacity="0"/> + <states> + <State name="opened"> + <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/> + <SetProperty target="{text}" property="opacity" value="1"/> + <SetProperty target="{confirmIcon}" property="opacity" value="1"/> + <SetProperty target="{cancelIcon}" property="opacity" value="1"/> + <SetProperty target="{trashIcon}" property="opacity" value="0"/> + </State> + </states> + <transitions> + <Transition fromState="*" toState="opened" reversible="true"> + <NumericAnimation properties="opacity,x,width" duration="200"/> + </Transition> + </transitions> +</Rect> diff --git a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml index e1df10c..dcbbe57 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml @@ -1,37 +1,12 @@ <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}"> - <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'"/> - <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'"/> - <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'"/> - <opacity> - <Behaviour> - <NumericAnimation property="opacity" duration="250"/> - </Behaviour> - </opacity> - </Rect> - </FocusRealm> + <GroupBox contents="1/ContactView.qml" label="something"/> + <GroupBox contents="2/ContactView.qml" label="something"/> + <GroupBox contents="3/ContactView.qml" label="something"/> </GridLayout> </Rect> diff --git a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml index 01f26ee..77f7093 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/GroupBox.qml @@ -1,4 +1,4 @@ -<Item id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}"> +<FocusRealm id="groupBox" width="{Math.max(270, subItem.width+40)}" height="{Math.max(70, subItem.height+40)}"> <properties> <Property name="contents"/> <Property name="label"/> @@ -14,4 +14,12 @@ <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> + <Rect color="black" anchors.fill="{parent}" opacity="{parent.focus ? 0 : 0.3}"> + <MouseRegion anchors.fill="{parent}" onClicked="parent.parent.focus=true"/> + <opacity> + <Behaviour> + <NumericAnimation property="opacity" duration="250"/> + </Behaviour> + </opacity> + </Rect> +</FocusRealm> |