From 7a60538c0c12245e8b542a477bcaabac0b9de345 Mon Sep 17 00:00:00 2001 From: Ian Walters Date: Thu, 30 Apr 2009 09:18:09 +1000 Subject: documentation snippets, some qmlconv cleanup Added snippet comments for qdoc, also qmlconv leaves some errors. ',' where they are not supposed to be, ] and indenting in the wrong places, lack of " around enum values. --- doc/src/tutorials/declarative.qdoc | 271 +++++++++------------ .../1_Drawing_and_Animation/4/RemoveButton.qml | 2 - .../1_Drawing_and_Animation/5/RemoveButton.qml | 2 - .../tutorials/contacts/2_Reuse/1/ContactField.qml | 2 + .../tutorials/contacts/2_Reuse/1/RemoveButton.qml | 4 +- .../tutorials/contacts/2_Reuse/1a/ContactField.qml | 2 + .../tutorials/contacts/2_Reuse/1a/RemoveButton.qml | 4 +- .../tutorials/contacts/2_Reuse/2/ContactField.qml | 4 +- .../tutorials/contacts/2_Reuse/2/RemoveButton.qml | 6 +- .../tutorials/contacts/2_Reuse/2_Reuse.qml | 11 +- .../tutorials/contacts/2_Reuse/3/ContactField.qml | 4 +- .../tutorials/contacts/2_Reuse/3/FieldText.qml | 6 +- .../tutorials/contacts/2_Reuse/3/RemoveButton.qml | 4 +- .../tutorials/contacts/2_Reuse/4/Contact.qml | 2 + .../tutorials/contacts/2_Reuse/4/ContactField.qml | 2 +- .../tutorials/contacts/2_Reuse/4/FieldText.qml | 2 +- .../tutorials/contacts/2_Reuse/4/RemoveButton.qml | 6 +- .../contacts/3_Collections/1/ContactView.qml | 28 ++- .../contacts/3_Collections/2/ContactView.qml | 72 +++--- .../contacts/3_Collections/3/ContactView.qml | 66 ++--- .../contacts/3_Collections/lib/ContactField.qml | 2 +- .../contacts/3_Collections/lib/FieldText.qml | 2 +- .../contacts/3_Collections/lib/RemoveButton.qml | 4 +- 23 files changed, 248 insertions(+), 260 deletions(-) diff --git a/doc/src/tutorials/declarative.qdoc b/doc/src/tutorials/declarative.qdoc index bbe2ebd..3724b10 100644 --- a/doc/src/tutorials/declarative.qdoc +++ b/doc/src/tutorials/declarative.qdoc @@ -371,21 +371,24 @@ \section1 Loading QML Components Reusing the RemoveButton itself is very simple. When parsing a QML file - if a Component is refered to that isn't already in the system, Qt + if a Component is referred to that isn't already in the system, Qt will try to load it from a file of the same name with the ".qml" extension. - \code - - - \endcode + \snippet declarative/tutorials/contacts/2_Reuse/1/ContactField.qml load The above QML code will attempt to load the RemoveButton component from - a file called "RemoveButton.qml". All the properties of the button are + a file with the name "RemoveButton.qml" from the following search paths. + + \list + \o Any imported directories. These are listed at the start of the file using + \c { import "path" }. + \o The run directory + \o The run directory + "/qml" + \o the directory of the QML code file + \o the directory of the QML code file + "/qml" + \endlist. + + All the properties of the button are accessible and can be overridden from defaults. The loaded component can also refer to elements further up in the tree, so that code within RemoveButton.qml could refer to the contactField component. However only @@ -396,44 +399,19 @@ \section1 Properties and Signals - \code - - - - - - - - \endcode - - \omit - Need reference for more information on declaring properties and signals. - \endomit + \snippet declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml define properties and signals These properties and signals are accessed from the contact field the same way standard system components are accessed. - \code - - - \endcode + \snippet declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml use properties and signals Now when the remove button is expanded, it will expand to the width of the contact field. Also when the user confirms the remove action, the text section of the contact field will be cleared. When creating a component that does have children out of its own bounds its important to consider whether the item should be clipped, - which is done above with \c{clip="true"}. + which is done above with \c{clip: true}. \section1 States @@ -451,44 +429,7 @@ contact field itself to move the remove button and the field icon out of view. - \code - - - - - - - - - - - - - - - - - - - - - - \endcode + \snippet declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml all Apart from accessing the fieldText.state, the above code also uses the when attribute of its own editingText state. This is an alternative to using @@ -497,22 +438,7 @@ that state. In the FieldText element a similar approach is used to fade out the label of the FieldText when the user enters some text of their own. - \code - - - - - - - - \endcode + \snippet declarative/tutorials/contacts/3_Reuse/2/FieldText.qml behavior fieldText is the enclosing component and textEdit is a TextEdit element provided by Qt. In the QML code above, the opacity of the textLabel is @@ -526,17 +452,7 @@ The fieldText element also handles changes to the text using the onValueChanged attribute when specifying properties. - \code - - - - \endcode + \snippet declarative/tutorials/contacts/2_Reuse/3/FieldText.qml value change Because the user needs to be able to edit text in the text edit, it shouldn't be simply bound to the text property of the FieldText component. @@ -572,33 +488,11 @@ In the tutorial we do this with a property of our top level component to handle whether we are in this state or not. - \code - - - - - \endcode + \snippet declarative/tutorials/contacts/2_Reuse/4/Contact.qml grab property And in the code where we want to check or avoid allowing mouse interaction. - \code - - \endcode + \snippet declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml grab Handling Key and Mouse focus in QML is quite likely to change before the Qt 4.6 release. @@ -631,15 +525,7 @@ data model. This can be declared in the resources section of the parent item. - \code - - - SELECT recid, label, email, phone FROM contacts ORDER BY label, recid - - \endcode + \snippet declarative/tutorials/contacts/3_Collections/1/ContactView.qml model The SqlConnection component describes how to connect to the database in much the same ways as the QSqlDatabase::addDatabase() function is used. @@ -653,18 +539,103 @@ and orders the results by the label of the contact first, and then by the recid for any contacts with equivalent labels. - To display the data retrieved from the table, a delegate is needed. This - is also declared in the resources section of the parent item. + The ListView component is suitable for displaying models, and is declared + much like any other QML component. However since it might have any number + of child items in the list, it has a property that defines how to construct + components for items when displayed. - \code - - - - \endcode + \snippet declarative/tutorials/contacts/3_Collections/1/ContactView.qml delegate + + Unlike a child element, this describes a template on how to build the component + for each element, much in the same way that components are loaded from + files such as RemoveButton.qml. + + The entire view component will look like: + + \snippet declarative/tutorials/contacts/3_Collections/1/ContactView.qml view + + This gives us a list of contacts that the user can flick through. + + .image. + + \section1 Animating Delegates + + The next step is to allow the user to click on a contact to edit the + contact. We will take advantage of QML to open a Contact component + in the list rather than as a new dialog or view. This is very + similar to how the contents of the FieldText and RemoveButton components + are swapped in and out. + + \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml components + + The first step is to have two children of our delegate component that can + be swapped between. The plain Text component and the Contact component built + in the previous chapters. We also add a MouseRegion that can be clicked upon + to change the state of the delegate component. + + \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml states + + This defines the open state of the delegate. It changes the height of the delegate + component to that of the whole list view, pushing the other items off each end of + the list. It sets the lists views scroll yPosition of the ListView to the + y value of the delegate so that the top of the delegate matches the top of the list view. + The next step is to lock the list view. This prevents the user being able to flick + the list view, meaning while in this state the delegate will continue to + fill the ListView's visible area. The final to properties that are set should + be familiar from previous chapters, setting the opacity of the items such + that the new item is visible and the old item hidden. + + We then add a transition so that this becomes animated: + + \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml transition + + This allows the user to click on an item to enter the open state. + + .image. + + Elsewhere on our contact view we add a button so that the user can leave the + detailed view of the contact. + \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml button + + And connect it's clicked value to some script to set the state of the delegate + back to its default state. + + \snippet declarative/tutorials/contacts/3_Collections/2/ContactView.qml connection + + Something worth noting at this point is that every delegate created has this connection. + It is important to check whether the delegate is the one in the open state, and + taking some effort to ensure only one is, before acting on the signal from the button. + + \section1 Performance Considerations + + We have now made a contact application that can view a list of contacts, open one, + and close it again. Its now time to take a moment and consider the implications + of a list view delegate. It is created for each and every item in the list, + and while the list cleans up after itself and only has delegate components constructed + for visible items and any single point of animation, the list can scroll very quickly. + This means potentially thousands of delegate components will be constructed and + destroyed when the user is flipping through the list. + + Its important then to try and minimize the complexity of the delegate. This + can be done by delaying the loading of the component. By using the qml property + of the Item component, we can delay building the Contact.qml item until the user + attempts to open the list. + + \snippet declarative/tutorials/contacts/3_Collections/3/ContactView.qml setting qml + + Each item has a qml property that represents the filename for the contents of + a special qmlItem child of the Item. By setting the qml property of the Details + component on clicking the mouse region, the more complex component isn't loaded + until needed. The down side about this though is the properties of Contact + cannot be set until the item is loaded. This requires using the Bind + properties of an item. + + \snippet declarative/tutorials/contacts/3_Collections/3/ContactView.qml binding + + The Bind properties bind a value to another component, however the target of + this binding can be changed, unlike when setting the properties of a component + directly. This means that when the qml property is set, it will change the + qmlItem property of the Details component. This in turn triggers the Bind + elements to set the required properties of the qmlItem, which is now + an instance of the Contact component. */ diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml index 632ade9..ec768da 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/4/RemoveButton.qml @@ -7,9 +7,7 @@ Rect { //! [script] resources: [ Script { - function toggle() { - print('removeButton.toggle()'); if (removeButton.state == 'opened') { removeButton.state = ''; } else { diff --git a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml index a56193d..b2fa0ca 100644 --- a/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/1_Drawing_and_Animation/5/RemoveButton.qml @@ -6,9 +6,7 @@ Rect { radius: 5 resources: [ Script { - function toggle() { - print('removeButton.toggle()'); if (removeButton.state == 'opened') { removeButton.state = ''; } else { diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml index 1c50110..078f62e 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/1/ContactField.qml @@ -1,3 +1,4 @@ +//! [load] Item { id: contactField clip: true @@ -9,6 +10,7 @@ Item { anchors.top: parent.top anchors.bottom: parent.bottom } +//! [load] Text { id: fieldText width: contactField.width-80 diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml index b3ac12d..12329ed 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/1/RemoveButton.qml @@ -6,9 +6,7 @@ Rect { radius: 5 resources: [ Script { - function toggle() { - print('removeButton.toggle()'); if (removeButton.state == 'opened') { removeButton.state = ''; } else { @@ -69,7 +67,7 @@ Rect { anchors.rightMargin: 4 font.bold: true color: "white" - hAlign: AlignHCenter + hAlign: "AlignHCenter" text: "Remove" opacity: 0 } diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml index 07ab55c..55229de 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/ContactField.qml @@ -1,3 +1,4 @@ +//! [load] Item { id: contactField clip: true @@ -12,6 +13,7 @@ Item { anchors.top: parent.top anchors.bottom: parent.bottom } +//! [load] Text { id: fieldText width: contactField.width-80 diff --git a/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml index b3ac12d..12329ed 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/1a/RemoveButton.qml @@ -6,9 +6,7 @@ Rect { radius: 5 resources: [ Script { - function toggle() { - print('removeButton.toggle()'); if (removeButton.state == 'opened') { removeButton.state = ''; } else { @@ -69,7 +67,7 @@ Rect { anchors.rightMargin: 4 font.bold: true color: "white" - hAlign: AlignHCenter + hAlign: "AlignHCenter" text: "Remove" opacity: 0 } diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml index badf7a4..df4b46f 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/2/ContactField.qml @@ -3,14 +3,16 @@ Item { clip: true width: 230 height: 30 +//! [use properties and signals] 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='' } + onConfirmed: { fieldText.text='' } } +//! [use properties and signals] Text { id: fieldText width: contactField.width-80 diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml index e6c7c82..642a33b 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/2/RemoveButton.qml @@ -1,3 +1,4 @@ +//! [define properties and signals] Rect { id: removeButton width: 30 @@ -11,11 +12,10 @@ Rect { signals: Signal { name: "confirmed" } +//! [define properties and signals] resources: [ Script { - function toggle() { - print('removeButton.toggle()'); if (removeButton.state == 'opened') { removeButton.state = ''; } else { @@ -76,7 +76,7 @@ Rect { anchors.rightMargin: 4 font.bold: true color: "white" - hAlign: AlignHCenter + hAlign: "AlignHCenter" text: "Remove" opacity: 0 } diff --git a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml index 540e900..4d95424 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/2_Reuse.qml @@ -21,17 +21,20 @@ Rect { label: "Loading: added path" } GroupBox { - contents: "1c/ContactField.qml" - label: "Loading: added namespace" - } - GroupBox { contents: "2/ContactField.qml" label: "Using properties" } GroupBox { + id: prev contents: "3/ContactField.qml" label: "Defining signals" } + Rect { + color: "black" + opacity: 0.3 + width: prev.width + height: prev.height + } GroupBox { contents: "3/Contact.qml" label: "Multiple Items" diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml index 26bfca5..fa4f997 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/ContactField.qml @@ -1,3 +1,4 @@ +//! [all] Item { id: contactField clip: true @@ -20,7 +21,7 @@ Item { anchors.top: parent.top anchors.bottom: parent.bottom expandedWidth: contactField.width - onConfirmed: { print('Clear field text'); fieldText.text='' } + onConfirmed: { fieldText.text='' } } FieldText { id: fieldText @@ -65,3 +66,4 @@ Item { } ] } +//! [all] diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml index 7da13e7..7e4a1ce 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/FieldText.qml @@ -1,3 +1,4 @@ +//! [value change] Rect { id: fieldText height: 30 @@ -8,6 +9,7 @@ Rect { value: "" onValueChanged: { reset() } } +//! [value change] properties: Property { name: "label" value: "" @@ -65,12 +67,13 @@ Rect { readOnly: true wrap: false } +//! [behavior] Text { id: textLabel x: 5 width: parent.width-10 anchors.verticalCenter: parent.verticalCenter - hAlign: AlignHCenter + hAlign: "AlignHCenter" color: "#505050" font.italic: true text: fieldText.label @@ -82,6 +85,7 @@ Rect { } } } +//! [behavior] MouseRegion { anchors.fill: cancelIcon onClicked: { reset() } diff --git a/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml index e6c7c82..a222734 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/3/RemoveButton.qml @@ -13,9 +13,7 @@ Rect { } resources: [ Script { - function toggle() { - print('removeButton.toggle()'); if (removeButton.state == 'opened') { removeButton.state = ''; } else { @@ -76,7 +74,7 @@ Rect { anchors.rightMargin: 4 font.bold: true color: "white" - hAlign: AlignHCenter + hAlign: "AlignHCenter" text: "Remove" opacity: 0 } diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml index 626f99d..0587a51 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/Contact.qml @@ -1,3 +1,4 @@ +//! [grab property] Item { id: contactDetails width: 230 @@ -6,6 +7,7 @@ Item { name: "mouseGrabbed" value: false } +//! [grab property] properties: Property { name: "contactid" value: "" diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml index acc40e2..61de59d 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/ContactField.qml @@ -17,7 +17,7 @@ Item { anchors.top: parent.top anchors.bottom: parent.bottom expandedWidth: contactField.width - onConfirmed: { print('Clear field text'); fieldText.text='' } + onConfirmed: { fieldText.text='' } } FieldText { id: fieldText diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml index 3d92827..da5e6b9 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/FieldText.qml @@ -75,7 +75,7 @@ Rect { x: 5 width: parent.width-10 anchors.verticalCenter: parent.verticalCenter - hAlign: AlignHCenter + hAlign: "AlignHCenter" color: "#505050" font.italic: true text: fieldText.label diff --git a/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml index 1e3b5ad..bc30ee6 100644 --- a/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/2_Reuse/4/RemoveButton.qml @@ -12,10 +12,9 @@ Rect { name: "confirmed" } resources: [ +//! [grab] Script { - function toggle() { - print('removeButton.toggle()'); if (removeButton.state == 'opened') { removeButton.state = ''; contactDetails.mouseGrabbed=false; @@ -28,6 +27,7 @@ Rect { } } +//! [grab] ] Image { id: trashIcon @@ -80,7 +80,7 @@ Rect { anchors.rightMargin: 4 font.bold: true color: "white" - hAlign: AlignHCenter + hAlign: "AlignHCenter" text: "Remove" opacity: 0 } diff --git a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml index 8c02b48..ce338e2 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/1/ContactView.qml @@ -8,6 +8,7 @@ Item { value: false } resources: [ +//! [model] SqlConnection { id: contactDatabase name: "qmlConnection" @@ -18,9 +19,18 @@ Item { id: contactList connection: contactDatabase query: "SELECT recid, label, email, phone FROM contacts ORDER BY label, recid" - }, - Component { - id: contactDelegate + } +//! [model] + ] +//! [view] + ListView { + id: contactListView + anchors.fill: parent + clip: true + model: contactList + focus: true +//! [delegate] + delegate: [ Text { x: 45 y: 12 @@ -30,14 +40,8 @@ Item { font.bold: true text: model.label } - } - ] - ListView { - id: contactListView - anchors.fill: parent - clip: true - model: contactList - delegate: contactDelegate - focus: true + ] +//! [delegate] } +//! [view] } diff --git a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml index 88fc121..b6b3c31 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/2/ContactView.qml @@ -17,10 +17,31 @@ Item { SqlQuery { id: contactList connection: contactDatabase - query: "SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid" - }, - Component { - id: contactDelegate + query: "SELECT recid, label, email, phone FROM contacts ORDER BY label, recid" + } + ] +//! [button] + Button { + id: cancelEditButton + anchors.top: parent.top + anchors.topMargin: 5 + anchors.right: parent.right + anchors.rightMargin: 5 + icon: "../../shared/pics/cancel.png" + opacity: mouseGrabbed ? 0 : 1 + } +//! [button] + ListView { + id: contactListView + anchors.left: parent.left + anchors.right: parent.right + anchors.top: cancelEditButton.bottom + anchors.bottom: parent.bottom + clip: true + model: contactList + focus: true + delegate: [ +//! [components] Item { id: wrapper x: 0 @@ -31,9 +52,9 @@ Item { x: 45 y: 12 width: parent.width-45 - text: model.label color: "black" font.bold: true + text: model.label } MouseRegion { anchors.fill: label @@ -42,12 +63,14 @@ Item { Contact { id: details anchors.fill: parent - contactid: model.contactid + contactid: model.recid label: model.label email: model.email phone: model.phone opacity: 0 } +//! [components] +//! [states] states: [ State { name: "opened" @@ -78,6 +101,8 @@ Item { } } ] +//! [states] +//! [transitions] transitions: [ Transition { NumericAnimation { @@ -86,38 +111,19 @@ Item { } } ] +//! [transitions] +//! [connections] Connection { sender: cancelEditButton signal: "clicked()" script: { - - if (wrapper.state == 'opened') { - wrapper.state = ''; - } - + if (wrapper.state == 'opened') { + wrapper.state = ''; + } } } +//! [connections] } - }, - Button { - id: cancelEditButton - anchors.top: parent.top - anchors.topMargin: 5 - anchors.right: parent.right - anchors.rightMargin: 5 - icon: "../../shared/pics/cancel.png" - opacity: mouseGrabbed ? 0 : 1 - }, - 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 - focus: true - } - ] + ] + } } diff --git a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml index 09aab71..f0b55db 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/3/ContactView.qml @@ -18,9 +18,27 @@ Item { id: contactList connection: contactDatabase query: "SELECT recid AS contactid, label, email, phone FROM contacts ORDER BY label, recid" - }, - Component { - id: contactDelegate + } + ] + Button { + id: cancelEditButton + anchors.top: parent.top + anchors.topMargin: 5 + anchors.right: parent.right + anchors.rightMargin: 5 + icon: "../../shared/pics/cancel.png" + opacity: mouseGrabbed ? 0 : 1 + } + ListView { + id: contactListView + anchors.left: parent.left + anchors.right: parent.right + anchors.top: cancelEditButton.bottom + anchors.bottom: parent.bottom + clip: true + model: contactList + focus: true + delegate: [ Item { id: wrapper x: 0 @@ -35,15 +53,20 @@ Item { color: "black" font.bold: true } +//! [setting qml] MouseRegion { anchors.fill: label - onClicked: { Details.qml = 'Contact.qml'; - wrapper.state='opened'; } + onClicked: { + Details.qml = 'Contact.qml'; + wrapper.state='opened'; + } } Item { id: Details anchors.fill: wrapper opacity: 0 +//! [setting qml] +//! [binding] Bind { target: Details.qmlItem property: "contactid" @@ -64,6 +87,7 @@ Item { property: "email" value: model.email } +//! [binding] } states: [ State { @@ -107,34 +131,12 @@ Item { sender: cancelEditButton signal: "clicked()" script: { - - if (wrapper.state == 'opened') { - wrapper.state = ''; - } - + if (wrapper.state == 'opened') { + wrapper.state = ''; + } } } } - }, - Button { - id: cancelEditButton - anchors.top: parent.top - anchors.topMargin: 5 - anchors.right: parent.right - anchors.rightMargin: 5 - icon: "../../shared/pics/cancel.png" - opacity: mouseGrabbed ? 0 : 1 - }, - 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 - focus: true - } - ] + ] + } } diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml index acc40e2..61de59d 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/ContactField.qml @@ -17,7 +17,7 @@ Item { anchors.top: parent.top anchors.bottom: parent.bottom expandedWidth: contactField.width - onConfirmed: { print('Clear field text'); fieldText.text='' } + onConfirmed: { fieldText.text='' } } FieldText { id: fieldText diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml index 1329db6..370ca00 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/FieldText.qml @@ -75,7 +75,7 @@ Rect { x: 5 width: parent.width-10 anchors.verticalCenter: parent.verticalCenter - hAlign: AlignHCenter + hAlign: "AlignHCenter" color: "#505050" font.italic: true text: fieldText.label diff --git a/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml index d99b550..7e0a2f9 100644 --- a/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml +++ b/examples/declarative/tutorials/contacts/3_Collections/lib/RemoveButton.qml @@ -13,9 +13,7 @@ Rect { } resources: [ Script { - function toggle() { - print('removeButton.toggle()'); if (removeButton.state == 'opened') { removeButton.state = ''; contacts.mouseGrabbed=false; @@ -80,7 +78,7 @@ Rect { anchors.rightMargin: 4 font.bold: true color: "white" - hAlign: AlignHCenter + hAlign: "AlignHCenter" text: "Remove" opacity: 0 } -- cgit v0.12