summaryrefslogtreecommitdiffstats
path: root/examples/declarative/tutorials/contacts
diff options
context:
space:
mode:
Diffstat (limited to 'examples/declarative/tutorials/contacts')
-rw-r--r--examples/declarative/tutorials/contacts/Final/Button.qml38
-rw-r--r--examples/declarative/tutorials/contacts/Final/Contact.qml57
-rw-r--r--examples/declarative/tutorials/contacts/Final/ContactField.qml36
-rw-r--r--examples/declarative/tutorials/contacts/Final/ContactView2.qml62
-rw-r--r--examples/declarative/tutorials/contacts/Final/FieldText.qml98
-rw-r--r--examples/declarative/tutorials/contacts/Final/RemoveButton.qml80
-rw-r--r--examples/declarative/tutorials/contacts/Final/SearchBar.qml18
-rw-r--r--examples/declarative/tutorials/contacts/Final/contacts.qml148
8 files changed, 0 insertions, 537 deletions
diff --git a/examples/declarative/tutorials/contacts/Final/Button.qml b/examples/declarative/tutorials/contacts/Final/Button.qml
deleted file mode 100644
index 14965b5..0000000
--- a/examples/declarative/tutorials/contacts/Final/Button.qml
+++ /dev/null
@@ -1,38 +0,0 @@
-<Item id="button" width="30" height="30">
- <properties>
- <Property name="icon"/>
- </properties>
- <signals>
- <Signal name="clicked"/>
- </signals>
- <Rect id="buttonRect"
- anchors.fill="{parent}"
- color="lightgreen"
- radius="5">
- <Image id="iconImage"
- source="{button.icon}"
- anchors.horizontalCenter="{buttonRect.horizontalCenter}"
- anchors.verticalCenter="{buttonRect.verticalCenter}"/>
- <MouseRegion id="buttonMouseRegion"
- anchors.fill="{buttonRect}"
- onClicked="button.clicked.emit()"/>
- <states>
- <State name="pressed" when="{buttonMouseRegion.pressed == true}">
- <SetProperty target="{buttonRect}" property="color" value="green"/>
- </State>
- </states>
- <transitions>
- <Transition fromState="*" toState="pressed">
- <ColorAnimation duration="200"/>
- </Transition>
- <Transition fromState="pressed" toState="*">
- <ColorAnimation duration="1000"/>
- </Transition>
- </transitions>
- </Rect>
- <opacity>
- <Behaviour>
- <NumericAnimation property="opacity" duration="250"/>
- </Behaviour>
- </opacity>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/Final/Contact.qml b/examples/declarative/tutorials/contacts/Final/Contact.qml
deleted file mode 100644
index 679f4a8..0000000
--- a/examples/declarative/tutorials/contacts/Final/Contact.qml
+++ /dev/null
@@ -1,57 +0,0 @@
-<Item id="contactDetails"
- anchors.fill="{parent}">
- <properties>
- <Property name="contactid" value=""/>
- <Property name="label" onValueChanged="labelField.value = label"/>
- <Property name="phone" onValueChanged="phoneField.value = phone"/>
- <Property name="email" onValueChanged="emailField.value = email"/>
- </properties>
- <signals>
- <Signal name="update"/>
- <Signal name="insert"/>
- </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="{labelField.value}"/>
- <SqlBind name=":e" value="{emailField.value}"/>
- <SqlBind name=":p" value="{phoneField.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="{labelField.value}"/>
- <SqlBind name=":e" value="{emailField.value}"/>
- <SqlBind name=":p" value="{phoneField.value}"/>
- </bindings>
- </SqlQuery>
- </resources>
- <Connection sender="{contactDetails}" signal="update()">
- updateContactQuery.exec();
- </Connection>
- <Connection sender="{contactDetails}" signal="insert()">
- insertContactQuery.exec();
- </Connection>
- <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/Final/ContactField.qml b/examples/declarative/tutorials/contacts/Final/ContactField.qml
deleted file mode 100644
index 80ffd30..0000000
--- a/examples/declarative/tutorials/contacts/Final/ContactField.qml
+++ /dev/null
@@ -1,36 +0,0 @@
-<Item id="contactField"
- clip="true"
- height="30">
- <properties>
- <Property name="label"/>
- <Property name="icon"/>
- <Property name="value" onValueChanged="fieldText.text=field.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}"
- onConfirmed="contactField.value=fieldText.text"/>
- <Image
- anchors.right="{fieldText.left}" anchors.rightMargin="5"
- anchors.verticalCenter="{parent.verticalCenter}"
- source="{contactField.icon}"/>
- <states>
- <State name="editingText" when="{fieldText.state == 'editing'}">
- <SetProperty target="{removeButton.anchors}" property="rightMargin" value="-35"/>
- <SetProperty target="{fieldText}" property="width" value="{contactField.width}"/>
- </State>
- </states>
- <transitions>
- <Transition fromState='' toState="*" reversible="true">
- <NumericAnimation properties="width,rightMargin" duration="200"/>
- </Transition>
- </transitions>
-</Item>
diff --git a/examples/declarative/tutorials/contacts/Final/ContactView2.qml b/examples/declarative/tutorials/contacts/Final/ContactView2.qml
deleted file mode 100644
index da1e5db..0000000
--- a/examples/declarative/tutorials/contacts/Final/ContactView2.qml
+++ /dev/null
@@ -1,62 +0,0 @@
-<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/Final/FieldText.qml b/examples/declarative/tutorials/contacts/Final/FieldText.qml
deleted file mode 100644
index ad7669d..0000000
--- a/examples/declarative/tutorials/contacts/Final/FieldText.qml
+++ /dev/null
@@ -1,98 +0,0 @@
-<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 (!contacts.mouseGrabbed) {
- fieldText.state='editing';
- contacts.mouseGrabbed=true;
- }
- }
- function confirm() {
- fieldText.text = textEdit.text;
- fieldText.state='';
- contacts.mouseGrabbed=false;
- fieldText.confirmed.emit();
- }
- function reset() {
- textEdit.text = fieldText.text;
- fieldText.state='';
- contacts.mouseGrabbed=false;
- }
- </Script>
- </resources>
- <Image id="cancelIcon"
- width="22" height="22"
- anchors.right="{parent.right}" anchors.rightMargin="4"
- anchors.verticalCenter="{parent.verticalCenter}"
- source="../shared/pics/cancel.png"
- opacity="0"/>
- <Image id="confirmIcon"
- width="22" height="22"
- anchors.left="{parent.left}" anchors.leftMargin="4"
- anchors.verticalCenter="{parent.verticalCenter}"
- source="../shared/pics/ok.png"
- opacity="0"/>
- <TextEdit id="textEdit"
- anchors.left="{parent.left}" anchors.leftMargin="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 == '' ? 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="{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/Final/RemoveButton.qml b/examples/declarative/tutorials/contacts/Final/RemoveButton.qml
deleted file mode 100644
index b096bca..0000000
--- a/examples/declarative/tutorials/contacts/Final/RemoveButton.qml
+++ /dev/null
@@ -1,80 +0,0 @@
-<Rect id="removeButton"
- width="30" height="30"
- color="red"
- radius="5">
- <properties>
- <Property name="expandedWidth" value="230"/>
- </properties>
- <signals>
- <Signal name="confirmed"/>
- </signals>
- <resources>
- <Script>
- function toggle() {
- print('removeButton.toggle()');
- if (removeButton.state == 'opened') {
- removeButton.state = '';
- contacts.mouseGrabbed=false;
- } else {
- if (!contacts.mouseGrabbed) {
- removeButton.state = 'opened';
- contacts.mouseGrabbed=true;
- }
- }
- }
- </Script>
- </resources>
- <Image id="trashIcon"
- width="22" height="22"
- anchors.right="{parent.right}" anchors.rightMargin="4"
- anchors.verticalCenter="{parent.verticalCenter}"
- source="../shared/pics/trash.png"
- opacity="1">
- <MouseRegion
- anchors.fill="{parent}"
- onClicked="toggle()"/>
- </Image>
- <Image id="cancelIcon"
- width="22" height="22"
- anchors.right="{parent.right}" anchors.rightMargin="4"
- anchors.verticalCenter="{parent.verticalCenter}"
- source="../shared/pics/cancel.png"
- opacity="0">
- <MouseRegion
- anchors.fill="{parent}"
- onClicked="toggle()"/>
- </Image>
- <Image id="confirmIcon"
- width="22" height="22"
- anchors.left="{parent.left}" anchors.leftMargin="4"
- anchors.verticalCenter="{parent.verticalCenter}"
- source="../shared/pics/ok.png"
- opacity="0">
- <MouseRegion
- anchors.fill="{parent}"
- onClicked="toggle(); removeButton.confirmed.emit()"/>
- </Image>
- <Text id="text"
- anchors.verticalCenter="{parent.verticalCenter}"
- anchors.left="{confirmIcon.right}" anchors.leftMargin="4"
- anchors.right="{cancelIcon.left}" anchors.rightMargin="4"
- font.bold="true"
- color="white"
- hAlign="AlignHCenter"
- text="Remove"
- opacity="0"/>
- <states>
- <State name="opened">
- <SetProperty target="{removeButton}" property="width" value="{removeButton.expandedWidth}"/>
- <SetProperty target="{text}" property="opacity" value="1"/>
- <SetProperty target="{confirmIcon}" property="opacity" value="1"/>
- <SetProperty target="{cancelIcon}" property="opacity" value="1"/>
- <SetProperty target="{trashIcon}" property="opacity" value="0"/>
- </State>
- </states>
- <transitions>
- <Transition fromState="*" toState="opened" reversible="true">
- <NumericAnimation properties="opacity,x,width" duration="200"/>
- </Transition>
- </transitions>
-</Rect>
diff --git a/examples/declarative/tutorials/contacts/Final/SearchBar.qml b/examples/declarative/tutorials/contacts/Final/SearchBar.qml
deleted file mode 100644
index 3965e39..0000000
--- a/examples/declarative/tutorials/contacts/Final/SearchBar.qml
+++ /dev/null
@@ -1,18 +0,0 @@
-<Rect id="searchBar"
- color="white">
- <properties>
- <Property name="text" value="{searchEdit.text}"/>
- </properties>
- <Image id="searchIcon"
- anchors.left="{parent.left}" anchors.leftMargin="5"
- anchors.verticalCenter="{parent.verticalCenter}"
- source="../shared/pics/search.png"/>
- <TextEdit id="searchEdit"
- anchors.left="{searchIcon.right}" anchors.right="{parent.right}"
- anchors.leftMargin="5" anchors.rightMargin="5"
- anchors.verticalCenter="{parent.verticalCenter}"
- readOnly="false"
- wrap="false"
- focus="true"/>
-</Rect>
-
diff --git a/examples/declarative/tutorials/contacts/Final/contacts.qml b/examples/declarative/tutorials/contacts/Final/contacts.qml
deleted file mode 100644
index 8b0d6d0..0000000
--- a/examples/declarative/tutorials/contacts/Final/contacts.qml
+++ /dev/null
@@ -1,148 +0,0 @@
-<Rect id="contacts"
- width="240"
- height="320"
- color="black">
- <properties>
- <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 AS contactid, 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="40" y="12"
- width="{parent.width-30}"
- text="{model.label}"
- color="white"
- font.bold="true">
- <children>
- <MouseRegion
- anchors.fill="{parent}">
- <onClicked>
- Details.qml = 'Contact.qml';
- wrapper.state='opened';
- contacts.mode = 'edit';
- </onClicked>
- </MouseRegion>
- </children>
- </Text>
- <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' &amp;&amp; !contacts.mouseGrabbed) {
- wrapper.state = '';
- contacts.mode = 'list';
- }
- </Connection>
- <Connection sender="{confirmEditButton}" signal="clicked()">
- if (wrapper.state == 'opened' &amp;&amp; !contacts.mouseGrabbed) {
- print('confirm and close edit');
- Details.qmlItem.update.emit();
- wrapper.state = '';
- contacts.mode = 'list';
- contactList.exec();
- }
- </Connection>
- </Item>
- </Component>
- </resources>
- <Button id="newContactButton"
- anchors.top="{parent.top}" anchors.topMargin="5"
- anchors.right="{parent.right}" anchors.rightMargin="5"
- icon="../shared/pics/new.png"
- onClicked="newContactItem.label = ''; newContactItem.phone = ''; newContactItem.email = ''; contacts.mode = 'new'"
- opacity="{contacts.mode == 'list' ? 1 : 0}"/>
- <Button id="confirmEditButton"
- anchors.top="{parent.top}" anchors.topMargin="5"
- anchors.left="{parent.left}" anchors.leftMargin="5"
- icon="../shared/pics/ok.png"
- opacity="{contacts.mode == 'list' || contacts.mouseGrabbed ? 0 : 1}"/>
- <Button id="cancelEditButton"
- anchors.top="{parent.top}" anchors.topMargin="5"
- anchors.right="{parent.right}" anchors.rightMargin="5"
- icon="../shared/pics/cancel.png"
- opacity="{contacts.mode == 'list' || contacts.mouseGrabbed ? 0 : 1}"/>
- <ListView id="contactListView"
- anchors.left="{parent.left}"
- anchors.right="{parent.right}"
- anchors.top="{cancelEditButton.bottom}"
- anchors.bottom="{searchBarWrapper.bottom}"
- clip="true"
- model="{contactList}"
- delegate="{contactDelegate}"
- focus="{contacts.mode != 'list'}"/>
- <Contact id="newContactItem"
- anchors.fill="{contactListView}"
- opacity="0"/>
- <Connection sender="{confirmEditButton}" signal="clicked()">
- if (contacts.mode == 'new' &amp;&amp; contacts.mouseGrabbed != 'true') {
- newContactItem.insert.emit();
- contacts.mode = 'list';
- contactList.exec();
- }
- </Connection>
- <Connection sender="{cancelEditButton}" signal="clicked()">
- if (contacts.mode == 'new' &amp;&amp; contacts.mouseGrabbed != 'true') {
- contacts.mode = 'list';
- }
- </Connection>
- <FocusRealm id="searchBarWrapper"
- height="30"
- anchors.bottom="{parent.bottom}"
- anchors.left="{parent.left}" anchors.right="{parent.right}"
- anchors.bottomMargin="0"
- focus="{contacts.mode == 'list'}">
- <SearchBar id="searchBar" anchors.fill="{parent}"/>
- <states>
- <State name="searchHidden" when="{searchBar.text == '' || contacts.mode != 'list'}">
- <SetProperty target="{searchBarWrapper.anchors}" property="bottomMargin" value="-30"/>
- </State>
- </states>
- <transitions>
- <Transition fromState="*" toState="*">
- <NumericAnimation property="bottomMargin" duration="250"/>
- </Transition>
- </transitions>
- </FocusRealm>
- <states>
- <State name="editNewState" when="{contacts.mode == 'new'}">
- <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>