summaryrefslogtreecommitdiffstats
path: root/examples/declarative/tutorials
diff options
context:
space:
mode:
authorIan Walters <ian.walters@nokia.com>2009-05-07 01:32:36 (GMT)
committerIan Walters <ian.walters@nokia.com>2009-05-07 01:32:36 (GMT)
commita6f5af838e58a9845a023493343a0b9761eb2566 (patch)
tree41c6ea0c1ee27fb20d377287dc6c24f8ea808d55 /examples/declarative/tutorials
parentcef84f75ec56c7ebced81faaf12d5f9bc809f4ca (diff)
downloadQt-a6f5af838e58a9845a023493343a0b9761eb2566.zip
Qt-a6f5af838e58a9845a023493343a0b9761eb2566.tar.gz
Qt-a6f5af838e58a9845a023493343a0b9761eb2566.tar.bz2
Move 'final' contacts application to demos.
Will finish the applicaiton in this directory to fully functional. Missing features - removing contacts, clearing search, key only access Known bugs - Scroll crashes if data changes while scrolling, VerticalLayout doesn't align horizontally correctly when in ListView delegate. ListView only shows one element on startup, even though query consistently indicates 1000 items as count.
Diffstat (limited to 'examples/declarative/tutorials')
-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>