diff options
| author | Michael Brasser <michael.brasser@nokia.com> | 2009-04-22 04:47:24 (GMT) |
|---|---|---|
| committer | Michael Brasser <michael.brasser@nokia.com> | 2009-04-22 04:47:24 (GMT) |
| commit | 2366667fc97eb6a56203b2dd7dac776ff4164abd (patch) | |
| tree | b2acb6cc6bfe475d7e619e4788973b61fff775e0 /examples/declarative/tutorials | |
| parent | 2c762f3b8b284a7c6dc0c499b7052013bad5b707 (diff) | |
| download | Qt-2366667fc97eb6a56203b2dd7dac776ff4164abd.zip Qt-2366667fc97eb6a56203b2dd7dac776ff4164abd.tar.gz Qt-2366667fc97eb6a56203b2dd7dac776ff4164abd.tar.bz2 | |
Initial import of kinetic-dui branch from the old kinetic
Diffstat (limited to 'examples/declarative/tutorials')
48 files changed, 1836 insertions, 0 deletions
diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_an_animation.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_an_animation.qml new file mode 100644 index 0000000..06c9f5a --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/1_Drawing_an_animation.qml @@ -0,0 +1,22 @@ +<Rect id="page" width="240" height="180" color='black'> + <RemoveButton1 + y="5" + anchors.right="{page.right}" + anchors.rightMargin="5"/> + <RemoveButton2 + y="40" + anchors.right="{page.right}" + anchors.rightMargin="5"/> + <RemoveButton3 + y="75" + anchors.right="{page.right}" + anchors.rightMargin="5"/> + <RemoveButton4 + y="110" + anchors.right="{page.right}" + anchors.rightMargin="5"/> + <RemoveButton5 + y="145" + anchors.right="{page.right}" + anchors.rightMargin="5"/> +</Rect> diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml new file mode 100644 index 0000000..dc3f505 --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton1.qml @@ -0,0 +1,4 @@ +<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 new file mode 100644 index 0000000..2ba488d --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton2.qml @@ -0,0 +1,10 @@ +<Rect id="removeButton" + width="30" height="30" + color="red" + radius="5"> + <Image id="trashIcon" + width="22" height="22" + anchors.right="{parent.right}" anchors.rightMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../shared/pics/trash.png"/> +</Rect> diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml new file mode 100644 index 0000000..9a364c5 --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton3.qml @@ -0,0 +1,23 @@ +<Rect id="removeButton" + width="230" height="30" + color="red" + radius="5"> + <Image id="cancelIcon" + width="22" height="22" + anchors.right="{parent.right}" anchors.rightMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../shared/pics/cancel.png"/> + <Image id="confirmIcon" + width="22" height="22" + anchors.left="{parent.left}" anchors.leftMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../shared/pics/ok.png"/> + <Text id="text" + anchors.verticalCenter="{parent.verticalCenter}" + anchors.left="{confirmIcon.right}" anchors.leftMargin="4" + anchors.right="{cancelIcon.left}" anchors.rightMargin="4" + font.bold="true" + color="white" + hAlign="AlignHCenter" + text="Remove"/> +</Rect> diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml new file mode 100644 index 0000000..45ca19d --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton4.qml @@ -0,0 +1,65 @@ +<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}" + src="../shared/pics/trash.png" + opacity="1"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Image id="cancelIcon" + width="22" height="22" + anchors.right="{parent.right}" anchors.rightMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../shared/pics/cancel.png" + opacity="0"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Image id="confirmIcon" + width="22" height="22" + anchors.left="{parent.left}" anchors.leftMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../shared/pics/ok.png" + opacity="0"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Text id="text" + anchors.verticalCenter="{parent.verticalCenter}" + anchors.left="{confirmIcon.right}" anchors.leftMargin="4" + anchors.right="{cancelIcon.left}" anchors.rightMargin="4" + font.bold="true" + color="white" + hAlign="AlignHCenter" + text="Remove" + opacity="0"/> + <states> + <State name="opened"> + <SetProperty target="{removeButton}" property="width" value="230"/> + <SetProperty target="{text}" property="opacity" value="1"/> + <SetProperty target="{confirmIcon}" property="opacity" value="1"/> + <SetProperty target="{cancelIcon}" property="opacity" value="1"/> + <SetProperty target="{trashIcon}" property="opacity" value="0"/> + </State> + </states> +</Rect> diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml new file mode 100644 index 0000000..68c1838 --- /dev/null +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/RemoveButton5.qml @@ -0,0 +1,70 @@ +<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}" + src="../shared/pics/trash.png" + opacity="1"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Image id="cancelIcon" + width="22" height="22" + anchors.right="{parent.right}" anchors.rightMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../shared/pics/cancel.png" + opacity="0"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Image id="confirmIcon" + width="22" height="22" + anchors.left="{parent.left}" anchors.leftMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../shared/pics/ok.png" + opacity="0"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Text id="text" + anchors.verticalCenter="{parent.verticalCenter}" + anchors.left="{confirmIcon.right}" anchors.leftMargin="4" + anchors.right="{cancelIcon.left}" anchors.rightMargin="4" + font.bold="true" + color="white" + hAlign="AlignHCenter" + text="Remove" + opacity="0"/> + <states> + <State name="opened"> + <SetProperty target="{removeButton}" property="width" value="230"/> + <SetProperty target="{text}" property="opacity" value="1"/> + <SetProperty target="{confirmIcon}" property="opacity" value="1"/> + <SetProperty target="{cancelIcon}" property="opacity" value="1"/> + <SetProperty target="{trashIcon}" property="opacity" value="0"/> + </State> + </states> + <transitions> + <Transition fromState="*" toState="opened" reversible="true"> + <NumericAnimation properties="opacity,x,width" duration="200"/> + </Transition> + </transitions> +</Rect> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml new file mode 100644 index 0000000..29fdf51 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml @@ -0,0 +1,34 @@ +<Rect id="page" width="480" height="360" color='black'> + <properties> + <Property name="mouseGrabbed" value="false"/> + </properties> + <Item x="0" y="0" width="240" height="180"> + <ContactField1 + y="5" + anchors.left="{parent.left}" anchors.leftMargin="5" + anchors.right="{parent.right}" anchors.rightMargin="5"/> + <ContactField2 + y="40" + anchors.left="{parent.left}" anchors.leftMargin="5" + anchors.right="{parent.right}" anchors.rightMargin="5"/> + <ContactField3 + y="75" + anchors.left="{parent.left}" anchors.leftMargin="5" + anchors.right="{parent.right}" anchors.rightMargin="5" + label="Phone Number" + icon="../shared/pics/phone.png" + value="123123"/> + </Item> + <Rect pen.color="gray" x="5" y="115" width="230" height="180" radius="5"> + <Contact3 anchors.fill="{parent}" + label="Brian" + phone="123123" + email="brian@bigisp.com" /> + </Rect> + <Rect pen.color="gray" x="245" y="115" width="230" height="180" radius="5"> + <Contact4 anchors.fill="{parent}" + label="Brian" + phone="123123" + email="brian@bigisp.com" /> + </Rect> +</Rect> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml b/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml new file mode 100644 index 0000000..fdd0c6d --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/Contact3.qml @@ -0,0 +1,27 @@ +<Item id="contactDetails"> + <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 new file mode 100644 index 0000000..b1882da --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/Contact4.qml @@ -0,0 +1,27 @@ +<Item id="contactDetails"> + <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 new file mode 100644 index 0000000..5547a3b --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField1.qml @@ -0,0 +1,17 @@ +<Item id="contactField" + clip="true" + height="30"> + <RemoveButton1 id="removeButton" + anchors.right="{parent.right}" + anchors.top="{parent.top}" anchors.bottom="{parent.bottom}"/> + <Text id="fieldText" + width="{contactField.width-70}" + anchors.right="{removeButton.left}" anchors.rightMargin="5" + anchors.verticalCenter="{parent.verticalCenter}" + font.bold="true" + color="white" + text="Phone Number"/> + <Image src="../shared/pics/phone.png" + anchors.right="{fieldText.left}" anchors.rightMargin="5" + 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 new file mode 100644 index 0000000..b69e03c --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField2.qml @@ -0,0 +1,19 @@ +<Item id="contactField" + clip="true" + 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-70}" + anchors.right="{removeButton.left}" anchors.rightMargin="5" + anchors.verticalCenter="{parent.verticalCenter}" + font.bold="true" + color="white" + text="Phone Number"/> + <Image src="../shared/pics/phone.png" + anchors.right="{fieldText.left}" anchors.rightMargin="5" + 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 new file mode 100644 index 0000000..f3a11f9 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField3.qml @@ -0,0 +1,35 @@ +<Item id="contactField" + clip="true" + height="30"> + <properties> + <Property name="label"/> + <Property name="icon"/> + <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}" + 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/2_Reuse/ContactField4.qml b/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml new file mode 100644 index 0000000..13ccbc0 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/ContactField4.qml @@ -0,0 +1,35 @@ +<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}" + 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/2_Reuse/FieldText3.qml b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml new file mode 100644 index 0000000..c807aed --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/FieldText3.qml @@ -0,0 +1,93 @@ +<Rect id="fieldText" + height="30" + radius="5" + color="black"> + <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}" + 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="0" + anchors.right="{parent.right}" anchors.rightMargin="0" + anchors.verticalCenter="{parent.verticalCenter}" + color="white" + 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="{fieldText}" property="color" value="white"/> + <SetProperty target="{textEdit}" property="color" value="black"/> + <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="34"/> + <SetProperty target="{textEdit.anchors}" property="rightMargin" value="34"/> + </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 new file mode 100644 index 0000000..a4df42b --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/FieldText4.qml @@ -0,0 +1,98 @@ +<Rect id="fieldText" + height="30" + radius="5" + color="black"> + <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}" + 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="0" + anchors.right="{parent.right}" anchors.rightMargin="0" + anchors.verticalCenter="{parent.verticalCenter}" + color="white" + 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="{fieldText}" property="color" value="white"/> + <SetProperty target="{textEdit}" property="color" value="black"/> + <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="34"/> + <SetProperty target="{textEdit.anchors}" property="rightMargin" value="34"/> + </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/RemoveButton1.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml new file mode 100644 index 0000000..68c1838 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton1.qml @@ -0,0 +1,70 @@ +<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}" + src="../shared/pics/trash.png" + opacity="1"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Image id="cancelIcon" + width="22" height="22" + anchors.right="{parent.right}" anchors.rightMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../shared/pics/cancel.png" + opacity="0"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Image id="confirmIcon" + width="22" height="22" + anchors.left="{parent.left}" anchors.leftMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + src="../shared/pics/ok.png" + opacity="0"> + <MouseRegion + anchors.fill="{parent}" + onClicked="toggle()"/> + </Image> + <Text id="text" + anchors.verticalCenter="{parent.verticalCenter}" + anchors.left="{confirmIcon.right}" anchors.leftMargin="4" + anchors.right="{cancelIcon.left}" anchors.rightMargin="4" + font.bold="true" + color="white" + hAlign="AlignHCenter" + text="Remove" + opacity="0"/> + <states> + <State name="opened"> + <SetProperty target="{removeButton}" property="width" value="230"/> + <SetProperty target="{text}" property="opacity" value="1"/> + <SetProperty target="{confirmIcon}" property="opacity" value="1"/> + <SetProperty target="{cancelIcon}" property="opacity" value="1"/> + <SetProperty target="{trashIcon}" property="opacity" value="0"/> + </State> + </states> + <transitions> + <Transition fromState="*" toState="opened" reversible="true"> + <NumericAnimation properties="opacity,x,width" duration="200"/> + </Transition> + </transitions> +</Rect> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml new file mode 100644 index 0000000..d9ff4c5 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton2.qml @@ -0,0 +1,76 @@ +<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}" + 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/2_Reuse/RemoveButton3.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml new file mode 100644 index 0000000..d9ff4c5 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton3.qml @@ -0,0 +1,76 @@ +<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}" + 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/2_Reuse/RemoveButton4.qml b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.qml new file mode 100644 index 0000000..a489e95 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/RemoveButton4.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 = ''; + 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}" + 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 new file mode 100644 index 0000000..ed2a3dc --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/3_Collections.qml @@ -0,0 +1,8 @@ +<Rect id="page" width="480" height="640" color='black'> + <properties> + <Property name="mouseGrabbed" value="false"/> + </properties> + <ContactView1 x="0" y="0" width="240" height="320"/> + <ContactView2 x="240" y="0" width="240" height="320"/> + <ContactView3 x="0" y="320" width="240" height="320"/> +</Rect> diff --git a/examples/declarative/tutorials/contacts/3_Collections/Button.qml b/examples/declarative/tutorials/contacts/3_Collections/Button.qml new file mode 100644 index 0000000..8290d35 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/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/Contact.qml b/examples/declarative/tutorials/contacts/3_Collections/Contact.qml new file mode 100644 index 0000000..f620c25 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/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/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactField.qml new file mode 100644 index 0000000..819914c --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/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/ContactView1.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml new file mode 100644 index 0000000..d6f7bad --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/ContactView1.qml @@ -0,0 +1,22 @@ +<Item id="contacts"> + <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="40" y="12" + width="{contactListView.width-30}" + height="30" + color="white" + font.bold="true" + text="{model.label}"/> + </Component> + </resources> + <ListView id="contactListView" + anchors.fill="{parent}" + clip="true" + model="{contactList}" + delegate="{contactDelegate}"/> +</Item> diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml new file mode 100644 index 0000000..da1e5db --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/ContactView2.qml @@ -0,0 +1,62 @@ +<Item id="contacts"> + <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="40" y="12" + width="{parent.width-30}" + text="{model.label}" + color="white" + 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}"/> +</Item> diff --git a/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml b/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml new file mode 100644 index 0000000..a5d88a1 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/ContactView3.qml @@ -0,0 +1,67 @@ +<Item id="contacts"> + <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="40" y="12" + width="{parent.width-30}" + text="{model.label}" + color="white" + 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}"/> +</Item> diff --git a/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml new file mode 100644 index 0000000..a4df42b --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/FieldText.qml @@ -0,0 +1,98 @@ +<Rect id="fieldText" + height="30" + radius="5" + color="black"> + <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}" + 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="0" + anchors.right="{parent.right}" anchors.rightMargin="0" + anchors.verticalCenter="{parent.verticalCenter}" + color="white" + 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="{fieldText}" property="color" value="white"/> + <SetProperty target="{textEdit}" property="color" value="black"/> + <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="34"/> + <SetProperty target="{textEdit.anchors}" property="rightMargin" value="34"/> + </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/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/RemoveButton.qml new file mode 100644 index 0000000..a489e95 --- /dev/null +++ b/examples/declarative/tutorials/contacts/3_Collections/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 = ''; + 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}" + 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/shared/contacts.sqlite b/examples/declarative/tutorials/contacts/shared/contacts.sqlite Binary files differnew file mode 100644 index 0000000..7347adc --- /dev/null +++ b/examples/declarative/tutorials/contacts/shared/contacts.sqlite diff --git a/examples/declarative/tutorials/contacts/shared/pics/cancel.png b/examples/declarative/tutorials/contacts/shared/pics/cancel.png Binary files differnew file mode 100644 index 0000000..ecc9533 --- /dev/null +++ b/examples/declarative/tutorials/contacts/shared/pics/cancel.png diff --git a/examples/declarative/tutorials/contacts/shared/pics/email.png b/examples/declarative/tutorials/contacts/shared/pics/email.png Binary files differnew file mode 100644 index 0000000..04b3865 --- /dev/null +++ b/examples/declarative/tutorials/contacts/shared/pics/email.png diff --git a/examples/declarative/tutorials/contacts/shared/pics/new.png b/examples/declarative/tutorials/contacts/shared/pics/new.png Binary files differnew file mode 100644 index 0000000..c7ebac3 --- /dev/null +++ b/examples/declarative/tutorials/contacts/shared/pics/new.png diff --git a/examples/declarative/tutorials/contacts/shared/pics/ok.png b/examples/declarative/tutorials/contacts/shared/pics/ok.png Binary files differnew file mode 100644 index 0000000..5795f04 --- /dev/null +++ b/examples/declarative/tutorials/contacts/shared/pics/ok.png diff --git a/examples/declarative/tutorials/contacts/shared/pics/phone.png b/examples/declarative/tutorials/contacts/shared/pics/phone.png Binary files differnew file mode 100644 index 0000000..fc9c222 --- /dev/null +++ b/examples/declarative/tutorials/contacts/shared/pics/phone.png diff --git a/examples/declarative/tutorials/contacts/shared/pics/search.png b/examples/declarative/tutorials/contacts/shared/pics/search.png Binary files differnew file mode 100644 index 0000000..cc74e69 --- /dev/null +++ b/examples/declarative/tutorials/contacts/shared/pics/search.png diff --git a/examples/declarative/tutorials/contacts/shared/pics/trash.png b/examples/declarative/tutorials/contacts/shared/pics/trash.png Binary files differnew file mode 100644 index 0000000..2042595 --- /dev/null +++ b/examples/declarative/tutorials/contacts/shared/pics/trash.png diff --git a/examples/declarative/tutorials/contacts/t8/Button.qml b/examples/declarative/tutorials/contacts/t8/Button.qml new file mode 100644 index 0000000..63c4636 --- /dev/null +++ b/examples/declarative/tutorials/contacts/t8/Button.qml @@ -0,0 +1,33 @@ +<Item width="30" height="30" id="button"> + <properties> + <Property name="icon"/> + </properties> + <signals> + <Signal name="clicked"/> + </signals> + <Rect id="buttonRect" color="lightgreen" anchors.fill="{parent}" 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/t8/Contact.qml b/examples/declarative/tutorials/contacts/t8/Contact.qml new file mode 100644 index 0000000..5852b43 --- /dev/null +++ b/examples/declarative/tutorials/contacts/t8/Contact.qml @@ -0,0 +1,80 @@ +<Item id="contactDetails" anchors.fill="{parent}"> + <properties> + <Property name="label" onValueChanged="c_label.value = label"/> + <Property name="contactid" value=""/> + <Property name="phone" onValueChanged="c_phone.value = phone"/> + <Property name="email" onValueChanged="c_email.value = email"/> + <Property name="mode" value="closed"/> + </properties> + <signals> + <Signal name="open"/> + <Signal name="close"/> + <Signal name="confirm"/> + <Signal name="cancel"/> + </signals> + <resources> + <SqlQuery id="updateContactQuery" connection="{contactDatabase}"> + <query>UPDATE contacts SET label = :l, email = :e, phone = :p WHERE recid = :r</query> + <bindings> + <SqlBind name=":r" value="{contactid}"/> + <SqlBind name=":l" value="{c_label.value}"/> + <SqlBind name=":e" value="{c_email.value}"/> + <SqlBind name=":p" value="{c_phone.value}"/> + </bindings> + </SqlQuery> + <SqlQuery id="insertContactQuery" connection="{contactDatabase}"> + <query>INSERT INTO contacts (label, email, phone) VALUES(:l, :e, :p)</query> + <bindings> + <SqlBind name=":l" value="{c_label.value}"/> + <SqlBind name=":e" value="{c_email.value}"/> + <SqlBind name=":p" value="{c_phone.value}"/> + </bindings> + </SqlQuery> + </resources> + <Connection sender="{contactDetails}" signal="cancel()"> + c_label.value = label; + c_phone.value = phone; + c_email.value = email; + contactDetails.close.emit(); + </Connection> + <Connection sender="{contactDetails}" signal="confirm()"> + if (c_label.value != '') { + if (contactid == '') { + insertContactQuery.exec(); + c_label.value = label; + c_phone.value = phone; + c_email.value = email; + } else { + updateContactQuery.exec(); + } + contactList.exec(); + } + contactDetails.close.emit(); + </Connection> + <VerticalLayout id="layout" anchors.fill="{parent}" spacing="5" margin="5"> + <Field id="c_label" label="Name" + editable="{mode == 'opened' ? 1 : 0}" + anchors.left="{layout.left}" anchors.leftMargin="5" + anchors.right="{layout.right}" anchors.rightMargin="5"/> + <Field id="c_phone" icon="../shared/pics/phone.png" label="Phone" + opacity="0" editable="{mode == 'opened' ? 1 : 0}" + anchors.left="{layout.left}" anchors.leftMargin="5" + anchors.right="{layout.right}" anchors.rightMargin="5"/> + <Field id="c_email" icon="../shared/pics/email.png" label="Email" + opacity="0" editable="{mode == 'opened' ? 1 : 0}" + anchors.left="{layout.left}" anchors.leftMargin="5" + anchors.right="{layout.right}" anchors.rightMargin="5"/> + </VerticalLayout> + <MouseRegion anchors.fill="{contactDetails}" onClicked="contactDetails.open.emit()" z="{mode=='opened' ? -1 : 1}"/> + <states> + <State name="opened" when="{mode == 'opened'}"> + <SetProperty target="{c_phone}" property="opacity" value="1"/> + <SetProperty target="{c_email}" property="opacity" value="1"/> + </State> + </states> + <transitions> + <Transition fromState="*" toState="opened" reversible="true"> + <NumericAnimation target="{contactFields}" properties="opacity" duration="200"/> + </Transition> + </transitions> +</Item> diff --git a/examples/declarative/tutorials/contacts/t8/Field.qml b/examples/declarative/tutorials/contacts/t8/Field.qml new file mode 100644 index 0000000..0191ef8 --- /dev/null +++ b/examples/declarative/tutorials/contacts/t8/Field.qml @@ -0,0 +1,54 @@ +<Item height="30" width="200" id="field"> + <properties> + <Property name="value" onValueChanged="fieldText.text=field.value"/> + <Property name="icon"/> + <Property name="editable" value="0"/> + <Property name="label"/> + </properties> + <Item id="fieldSelector" width="30" height="30" + x="0" + anchors.top="{parent.top}" + anchors.bottom="{parent.bottom}"> + <Image src="{field.icon}" + anchors.verticalCenter="{parent.verticalCenter}" + anchors.horizontalCenter="{parent.horizontalCenter}"/> + </Item> + <FieldText id="fieldText" + label="{field.label}" + width="{field.width-70}" + anchors.left="{fieldSelector.right}" + anchors.leftMargin="5" + anchors.top="{parent.top}" + anchors.bottom="{parent.bottom}" + onTextEdited="field.value = fieldText.text"/> + <FieldRemover id="fieldRemover" + anchors.left="{fieldText.right}" + anchors.leftMargin="5" + anchors.top="{parent.top}" + anchors.bottom="{parent.bottom}" + onConfirm="fieldText.text = ''" + opacity="{field.editable}"/> + <states> + <State name="textFill" when="{fieldText.open == 'true'}"> + <SetProperty target="{fieldText}" property="width" value="{field.width}"/> + <SetProperty target="{fieldText}" property="x" value="0"/> + <SetProperty target="{fieldRemover}" property="opacity" value="0"/> + <SetProperty target="{fieldSelector}" property="opacity" value="0"/> + <SetProperty target="{fieldSelector}" property="x" value="{-5-fieldSelector.width}"/> + </State> + <State name="removerFill" when="{fieldRemover.open == 'true'}"> + <SetProperty target="{fieldRemover}" property="width" value="{field.width}"/> + <SetProperty target="{fieldRemover}" property="x" value="0"/> + <SetProperty target="{fieldText}" property="opacity" value="0"/> + <SetProperty target="{fieldSelector}" property="opacity" value="0"/> + <SetProperty target="{fieldSelector}" property="x" value="{-10-fieldText.width-fieldSelector.width}"/> + </State> + </states> + <transitions> + <Transition fromState="*" toState="*"> + <NumericAnimation target="{fieldSelector}" properties="width,x,opacity" duration="200"/> + <NumericAnimation target="{fieldText}" properties="width,x,opacity" duration="200"/> + <NumericAnimation target="{fieldRemover}" properties="width,x,opacity" duration="200"/> + </Transition> + </transitions> +</Item> diff --git a/examples/declarative/tutorials/contacts/t8/FieldRemover.qml b/examples/declarative/tutorials/contacts/t8/FieldRemover.qml new file mode 100644 index 0000000..a7dad64 --- /dev/null +++ b/examples/declarative/tutorials/contacts/t8/FieldRemover.qml @@ -0,0 +1,57 @@ +<Item height="30" width="30" id="fieldRemover" clip="true"> + <properties> + <Property name="open" value="false"/> + </properties> + <signals> + <Signal name="confirm"/> + </signals> + <resources> + <Script> + function toggle() { + if (fieldRemover.state=='opened') { + fieldRemover.state=''; + open='false'; + Page.mouseGrabbed='false'; + } else { + if (Page.mouseGrabbed != 'true') { + fieldRemover.state='opened'; + open='true'; + Page.mouseGrabbed='true'; + } + } + } + </Script> + </resources> + <Rect id="border" anchors.fill="{parent}" color="red" radius="5"/> + <Image id="trashIcon" src="../shared/pics/trash.png" + width="22" height="22" + anchors.right="{parent.right}" anchors.rightMargin="4" + anchors.verticalCenter="{parent.verticalCenter}"/> + <Image id="cancelIcon" src="../shared/pics/cancel.png" + width="22" height="22" opacity="0" + anchors.right="{parent.right}" anchors.rightMargin="4" + anchors.verticalCenter="{parent.verticalCenter}"/> + <Image id="confirmIcon" src="../shared/pics/ok.png" + width="22" height="22" opacity="0" + anchors.left="{parent.left}" anchors.leftMargin="4" + anchors.verticalCenter="{parent.verticalCenter}"/> + <Text id="text" opacity="0" text="Remove" font.bold="true" color="white" hAlign="AlignHCenter" + anchors.verticalCenter="{parent.verticalCenter}" + anchors.left="{confirmIcon.right}" anchors.leftMargin="4" + anchors.right="{cancelIcon.left}" anchors.rightMargin="4"/> + <MouseRegion anchors.fill="{confirmIcon}" onClicked="toggle(); fieldRemover.confirm.emit()"/> + <MouseRegion anchors.fill="{trashIcon}" onClicked="toggle()"/> + <states> + <State name="opened"> + <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> +</Item> diff --git a/examples/declarative/tutorials/contacts/t8/FieldText.qml b/examples/declarative/tutorials/contacts/t8/FieldText.qml new file mode 100644 index 0000000..d3a158a --- /dev/null +++ b/examples/declarative/tutorials/contacts/t8/FieldText.qml @@ -0,0 +1,89 @@ +<Item height="30" id="fieldText"> + <properties> + <Property name="open" value="false"/> + <Property name="text" value="" onValueChanged="setText(fieldText.text)"/> + <Property name="label" value=""/> + </properties> + <signals> + <Signal name="textEdited"/> + </signals> + <resources> + <Script> + function start() { + if (Page.mouseGrabbed != 'true') { + fieldText.state='editing'; + open='true'; + Page.mouseGrabbed='true'; + } + } + function confirm() { + fieldText.text = textEdit.text; + fieldText.state=''; + open='false'; + Page.mouseGrabbed='false'; + fieldText.textEdited.emit(); + } + function cancel() { + textEdit.text = fieldText.text; + fieldText.state=''; + open='false'; + Page.mouseGrabbed='false'; + } + function setText(value) { + if (textEdit.text != value) { + fieldText.state=''; + open='false'; + textEdit.text = value; + } + } + </Script> + </resources> + <Rect id="border" radius="5" anchors.fill="{parent}" color="{field.editable == 1 ? '#202020' : '#000000'}"> + <TextEdit id="textEdit" vAlign="AlignVCenter" text="" + readOnly="true" font.bold="true" wrap="false" color="white" + x="5" width="{parent.width-10}" + anchors.verticalCenter="{parent.verticalCenter}" + /> + <Text id="textLabel" vAlign="AlignVCenter" hAlign="AlignHCenter" + color="#505050" font.italic="true" + anchors.fill="{border}" text="{fieldText.label}" + opacity="{textEdit.text == '' ? 1 : 0}"> + <opacity> + <Behaviour> + <NumericAnimation target="{textLabel}" property="opacity" duration="250"/> + </Behaviour> + </opacity> + </Text> + <Image id="cancelIcon" src="../shared/pics/cancel.png" + width="22" height="22" opacity="0" + anchors.right="{parent.right}" anchors.rightMargin="4" + anchors.verticalCenter="{parent.verticalCenter}"/> + <Image id="confirmIcon" src="../shared/pics/ok.png" + width="22" height="22" opacity="0" + anchors.left="{parent.left}" anchors.leftMargin="4" + anchors.verticalCenter="{parent.verticalCenter}"/> + <MouseRegion anchors.fill="{cancelIcon}" onClicked="cancel()"/> + <MouseRegion anchors.fill="{confirmIcon}" onClicked="confirm()"/> + <MouseRegion id="editRegion" anchors.fill="{textEdit}" onClicked="start()"/> + </Rect> + <states> + <State name="editing"> + <SetProperty target="{confirmIcon}" property="opacity" value="1"/> + <SetProperty target="{cancelIcon}" property="opacity" value="1"/> + <SetProperty target="{border}" property="color" value="white"/> + <SetProperty target="{textEdit}" property="color" value="black"/> + <SetProperty target="{textEdit}" property="readOnly" value="false"/> + <SetProperty target="{textEdit}" property="focus" value="true"/> + <SetProperty target="{textEdit}" property="x" value="35"/> + <SetProperty target="{editRegion}" property="opacity" value="0"/> + </State> + </states> + <transitions> + <Transition fromState='' toState="*" reversible="true"> + <NumericAnimation target="{textEdit}" properties="x" duration="200"/> + <NumericAnimation target="{confirmIcon}" properties="opacity" duration="200"/> + <NumericAnimation target="{cancelIcon}" properties="opacity" duration="200"/> + <ColorAnimation duration="150"/> + </Transition> + </transitions> +</Item> diff --git a/examples/declarative/tutorials/contacts/t8/SearchBar.qml b/examples/declarative/tutorials/contacts/t8/SearchBar.qml new file mode 100644 index 0000000..f8e1a6a --- /dev/null +++ b/examples/declarative/tutorials/contacts/t8/SearchBar.qml @@ -0,0 +1,16 @@ +<Item height="30" width="{parent.width}"> + <properties> + <Property name="text" value="{searchEdit.text}"/> + </properties> + <Rect color="white" anchors.fill="{parent}"> + <Image id="searchIcon" src="../shared/pics/search.png" + anchors.left="{parent.left}" anchors.leftMargin="5" + anchors.verticalCenter="{parent.verticalCenter}"/> + <TextEdit id="searchEdit" focus="{Page.listShown == 1}" + anchors.left="{searchIcon.right}" anchors.right="{parent.right}" + anchors.leftMargin="5" anchors.rightMargin="5" + anchors.verticalCenter="{parent.verticalCenter}" + readOnly="false" wrap="false"/> + </Rect> +</Item> + diff --git a/examples/declarative/tutorials/contacts/t8/contacts.qml b/examples/declarative/tutorials/contacts/t8/contacts.qml new file mode 100644 index 0000000..f76ccfd --- /dev/null +++ b/examples/declarative/tutorials/contacts/t8/contacts.qml @@ -0,0 +1,133 @@ +<Rect id="Page" color="black" width="240" height="320"> + <properties> + <Property name="listShown" value="1"/> + <Property name="mode" value="list"/> + <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 WHERE lower(label) LIKE lower(:searchTerm) ORDER BY label, recid</query> + <bindings> + <SqlBind name=":searchTerm" value="{searchBar.text + '%' }"/> + </bindings> + </SqlQuery> + <Component id="contactDelegate"> + <Item id="wrapper" x="0" width="{ListView.view.width}" height="34"> + <Text id="label" x="45" y="12" text="{model.label}" color="white" font.bold="true" width="{parent.width-30}" opacity="{listShown}"/> + <Item id="Details" anchors.fill="{wrapper}"> + <Bind target="{Details.qmlItem}" property="contactid" value="{model.recid}"/> + <Bind target="{Details.qmlItem}" property="mode" value="{wrapper.state}"/> + <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> + <MouseRegion anchors.fill="{label}" opacity="{listShown}"> + <onClicked> + Details.qml = 'Contact.qml'; + wrapper.state='opened'; + </onClicked> + </MouseRegion> + <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="{Details.qmlItem}" property="mode" value="opened"/> + <SetProperty target="{Page}" property="mode" value="editExisting"/> + </State> + </states> + <transitions> + <Transition> + <NumericAnimation duration="500" properties="yPosition,height,opacity"/> + </Transition> + </transitions> + <Connection sender="{confirmEditButton}" signal="clicked()"> + if (Details.qmlItem.mode == 'opened' && Page.mouseGrabbed != 'true') { + Details.qmlItem.mode = 'closed'; + wrapper.state = ""; + Details.qmlItem.confirm.emit(); + } + </Connection> + <Connection sender="{cancelEditButton}" signal="clicked()"> + if (Details.qmlItem.mode == 'opened' && Page.mouseGrabbed != 'true') { + Details.qmlItem.mode = 'closed'; + wrapper.state = ""; + Details.qmlItem.cancel.emit(); + } + </Connection> + </Item> + </Component> + </resources> + <Button id="newContactButton" icon="../shared/pics/new.png" + anchors.top="{parent.top}" anchors.topMargin="5" + anchors.right="{parent.right}" anchors.rightMargin="5" + onClicked="newContactItem.label = ''; newContactItem.phone = ''; newContactItem.email = ''; Page.mode = 'editNew'" + opacity="{Page.mode == 'list' ? 1 : 0}"/> + <Button id="cancelEditButton" icon="../shared/pics/cancel.png" + anchors.top="{parent.top}" anchors.topMargin="5" + anchors.right="{parent.right}" anchors.rightMargin="5" + opacity="{Page.mode == 'list' || Page.mouseGrabbed == 'true' ? 0 : 1}"/> + <Button id="confirmEditButton" icon="../shared/pics/ok.png" + anchors.top="{parent.top}" anchors.topMargin="5" + anchors.left="{parent.left}" anchors.leftMargin="5" + opacity="{Page.mode == 'list' || Page.mouseGrabbed == 'true' ? 0 : 1}"/> + <FocusRealm id="searchBarRealm" + height="30" + anchors.bottom="{parent.bottom}" + anchors.left="{parent.left}" anchors.right="{parent.right}" + focus="{Page.mode == 'list' ? 'true' : 'false'}"> + <SearchBar id="searchBar" anchors.fill="{parent}"> + <states> + <State name="searchHidden" when="{searchBar.text == '' || Page.listShown == 0}"> + <SetProperty target="{searchBarRealm}" property="anchors.bottomMargin" value="-30"/> + </State> + </states> + <transitions> + <Transition fromState="*" toState="*"> + <NumericAnimation property="bottomMargin" duration="250"/> + </Transition> + </transitions> + </SearchBar> + </FocusRealm> + <ListView id="contactListView" model="{contactList}" delegate="{contactDelegate}" + anchors.top="{newContactButton.bottom}" anchors.topMargin="10" + anchors.left="{parent.left}" anchors.right="{parent.right}" + anchors.bottom="{searchBarRealm.top}" + clip="true" + focus="{Page.mode == 'list' ? 'false' : 'true'}" + /> + <Contact id="newContactItem" + mode="opened" + anchors.top="{newContactButton.bottom}" anchors.topMargin="10" + anchors.left="{parent.left}" anchors.right="{parent.right}" + anchors.bottom="{searchBarRealm.top}" + onClose="Page.mode='list'" + opacity="0" + /> + <Connection sender="{confirmEditButton}" signal="clicked()"> + if (Page.mode == 'editNew' && Page.mouseGrabbed != 'true') { + newContactItem.confirm.emit() + } + </Connection> + <Connection sender="{cancelEditButton}" signal="clicked()"> + if (Page.mode == 'editNew' && Page.mouseGrabbed != 'true') { + newContactItem.cancel.emit() + } + </Connection> + <states> + <State name="editExistingState" when="{Page.mode == 'editExisting'}"> + <SetProperty target="{Page}" property="listShown" value="0"/> + </State> + <State name="editNewState" when="{Page.mode == 'editNew'}"> + <SetProperty target="{Page}" property="listShown" value="0"/> + <SetProperty target="{contactListView}" property="opacity" value="0"/> + <SetProperty target="{newContactItem}" property="opacity" value="1"/> + </State> + </states> + <transitions> + <Transition fromState="*" toState="*"> + <NumericAnimation property="opacity" duration="500"/> + </Transition> + </transitions> +</Rect> diff --git a/examples/declarative/tutorials/t1/tutorial1.qml b/examples/declarative/tutorials/t1/tutorial1.qml new file mode 100644 index 0000000..e4de571 --- /dev/null +++ b/examples/declarative/tutorials/t1/tutorial1.qml @@ -0,0 +1,3 @@ +<Rect id="Page" width="480" height="200" color="white"> + <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}"/> +</Rect> diff --git a/examples/declarative/tutorials/t2/Cell.qml b/examples/declarative/tutorials/t2/Cell.qml new file mode 100644 index 0000000..5d6ff52 --- /dev/null +++ b/examples/declarative/tutorials/t2/Cell.qml @@ -0,0 +1,7 @@ +<Item id="CellContainer" width="40" height="25"> + <properties> + <Property name="color"/> + </properties> + <Rect anchors.fill="{parent}" color="{CellContainer.color}"/> + <MouseRegion anchors.fill="{parent}" onClicked="HelloText.color = CellContainer.color" /> +</Item> diff --git a/examples/declarative/tutorials/t2/tutorial2.qml b/examples/declarative/tutorials/t2/tutorial2.qml new file mode 100644 index 0000000..1e3af16 --- /dev/null +++ b/examples/declarative/tutorials/t2/tutorial2.qml @@ -0,0 +1,11 @@ +<Rect id="Page" width="480" height="200" color="white"> + <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}"/> + <GridLayout id="ColorPicker" x="0" anchors.bottom="{Page.bottom}" width="120" height="50" columns="3" rows="2"> + <Cell color="#ff0000"/> + <Cell color="#00ff00"/> + <Cell color="#0000ff"/> + <Cell color="#ffff00"/> + <Cell color="#00ffff"/> + <Cell color="#ff00ff"/> + </GridLayout> +</Rect> diff --git a/examples/declarative/tutorials/t3/Cell.qml b/examples/declarative/tutorials/t3/Cell.qml new file mode 100644 index 0000000..5d6ff52 --- /dev/null +++ b/examples/declarative/tutorials/t3/Cell.qml @@ -0,0 +1,7 @@ +<Item id="CellContainer" width="40" height="25"> + <properties> + <Property name="color"/> + </properties> + <Rect anchors.fill="{parent}" color="{CellContainer.color}"/> + <MouseRegion anchors.fill="{parent}" onClicked="HelloText.color = CellContainer.color" /> +</Item> diff --git a/examples/declarative/tutorials/t3/tutorial3.qml b/examples/declarative/tutorials/t3/tutorial3.qml new file mode 100644 index 0000000..f9f1415 --- /dev/null +++ b/examples/declarative/tutorials/t3/tutorial3.qml @@ -0,0 +1,27 @@ +<Rect id="Page" width="480" height="200" color="white"> + <Text id="HelloText" text="Hello world!" font.size="24" font.bold="true" y="30" anchors.horizontalCenter="{Page.horizontalCenter}"> + <states> + <State name="down" when="{MouseRegion.pressed == true}"> + <SetProperty target="{HelloText}" property="y" value="160"/> + <SetProperty target="{HelloText}" property="color" value="red"/> + </State> + </states> + <transitions> + <Transition fromState="*" toState="down" reversible="true"> + <ParallelAnimation> + <NumericAnimation properties="y" duration="500" easing="easeOutBounce"/> + <ColorAnimation duration="500"/> + </ParallelAnimation> + </Transition> + </transitions> + </Text> + <MouseRegion id="MouseRegion" anchors.fill="{HelloText}"/> + <GridLayout id="ColorPicker" x="0" anchors.bottom="{Page.bottom}" width="120" height="50" columns="3" rows="2"> + <Cell color="#ff0000"/> + <Cell color="#00ff00"/> + <Cell color="#0000ff"/> + <Cell color="#ffff00"/> + <Cell color="#00ffff"/> + <Cell color="#ff00ff"/> + </GridLayout> +</Rect> |
