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/tutorials/contacts/2_Reuse/3 | |
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/tutorials/contacts/2_Reuse/3')
4 files changed, 232 insertions, 0 deletions
diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml new file mode 100644 index 0000000..cf6c657 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/Contact.qml @@ -0,0 +1,29 @@ +<Item id="contactDetails" + width="230" + height="{layout.height}"> + <properties> + <Property name="contactid" value=""/> + <Property name="label" onValueChanged="labelField.value = label"/> + <Property name="phone" onValueChanged="phoneField.value = phone"/> + <Property name="email" onValueChanged="emailField.value = email"/> + </properties> + <VerticalLayout id="layout" + anchors.fill="{parent}" + spacing="5" + margin="5"> + <ContactField id="labelField" + anchors.left="{layout.left}" anchors.leftMargin="5" + anchors.right="{layout.right}" anchors.rightMargin="5" + label="Name"/> + <ContactField id="phoneField" + anchors.left="{layout.left}" anchors.leftMargin="5" + anchors.right="{layout.right}" anchors.rightMargin="5" + icon="../../shared/pics/phone.png" + label="Phone"/> + <ContactField id="emailField" + anchors.left="{layout.left}" anchors.leftMargin="5" + anchors.right="{layout.right}" anchors.rightMargin="5" + icon="../../shared/pics/email.png" + label="Email"/> + </VerticalLayout> +</Item> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml new file mode 100644 index 0000000..5748a81 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml @@ -0,0 +1,36 @@ +<Item id="contactField" + clip="true" + width="230" + height="30"> + <properties> + <Property name="label" value="Name"/> + <Property name="icon" value="../../shared/pics/phone.png"/> + <Property name="value"/> + </properties> + <RemoveButton id="removeButton" + anchors.right="{parent.right}" + anchors.top="{parent.top}" anchors.bottom="{parent.bottom}" + expandedWidth="{contactField.width}" + onConfirmed="print('Clear field text'); fieldText.text=''"/> + <FieldText id="fieldText" + width="{contactField.width-70}" + anchors.right="{removeButton.left}" anchors.rightMargin="5" + anchors.verticalCenter="{parent.verticalCenter}" + label="{contactField.label}" + text="{contactField.value}"/> + <Image + anchors.right="{fieldText.left}" anchors.rightMargin="5" + anchors.verticalCenter="{parent.verticalCenter}" + src="{contactField.icon}"/> + <states> + <State name="editingText" when="{fieldText.state == 'editing'}"> + <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/> + <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/> + </State> + </states> + <transitions> + <Transition fromState='' toState="*" reversible="true"> + <NumericAnimation properties="width,rightMargin" duration="200"/> + </Transition> + </transitions> +</Item> diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml new file mode 100644 index 0000000..8010ac0 --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml @@ -0,0 +1,91 @@ +<Rect id="fieldText" + height="30" + radius="5" + color="white"> + <properties> + <Property + name="text" + value="" + onValueChanged="reset()"/> + <Property + name="label" + value=""/> + </properties> + <signals> + <Signal name="confirmed"/> + </signals> + <resources> + <Script> + function edit() { + fieldText.state='editing'; + } + function confirm() { + fieldText.text = textEdit.text; + fieldText.state=''; + fieldText.confirmed.emit(); + } + function reset() { + textEdit.text = fieldText.text; + fieldText.state=''; + } + </Script> + </resources> + <Image id="cancelIcon" + width="22" height="22" + anchors.right="{parent.right}" anchors.rightMargin="4" + anchors.verticalCenter="{parent.verticalCenter}" + 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/2_Reuse/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml new file mode 100644 index 0000000..e52bcbf --- /dev/null +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.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> |