diff options
Diffstat (limited to 'doc/src')
25 files changed, 105 insertions, 105 deletions
diff --git a/doc/src/declarative/anchor-layout.qdoc b/doc/src/declarative/anchor-layout.qdoc index 9ff902ee..69e2eda 100644 --- a/doc/src/declarative/anchor-layout.qdoc +++ b/doc/src/declarative/anchor-layout.qdoc @@ -10,8 +10,8 @@ In additional to the more traditional Fx layouts GridLayout, HorizontalLayout, a The Fx anchoring system allows you to define relationships between the anchor lines of different items. For example, you can write: \code -Rect { id: rect1; ... } -Rect { id: rect2; anchors.left: rect1.right; ... } +Rectangle { id: rect1; ... } +Rectangle { id: rect2; anchors.left: rect1.right; ... } \endcode In this case, the left edge of \e rect2 is bound to the right edge of rect1, producing the following: @@ -25,8 +25,8 @@ The anchoring system also allows you to specify margins and offsets. Margins spe The following example specifies a left margin: \code -Rect { id: rect1; ... } -Rect { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... } +Rectangle { id: rect1; ... } +Rectangle { id: rect2; anchors.left: rect1.right; anchors.leftMargin: 5; ... } \endcode In this case, a margin of 5 pixels is reserved to the left of \e rect2, producing the following: @@ -36,8 +36,8 @@ In this case, a margin of 5 pixels is reserved to the left of \e rect2, producin You can specify multiple anchors. For example: \code -Rect { id: rect1; ... } -Rect { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... } +Rectangle { id: rect1; ... } +Rectangle { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... } \endcode \image edge3.png @@ -45,9 +45,9 @@ Rect { id: rect2; anchors.left: rect1.right; anchors.top: rect1.bottom; ... } By specifying multiple horizontal or vertical anchors you can control the size of an item. For example: \code -Rect { id: rect1; x: 0; ... } -Rect { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... } -Rect { id: rect3; x: 150; ... } +Rectangle { id: rect1; x: 0; ... } +Rectangle { id: rect2; anchors.left: rect1.right; anchors.right: rect3.left; ... } +Rectangle { id: rect3; x: 150; ... } \endcode \image edge4.png @@ -58,10 +58,10 @@ For performance reasons, you can only anchor an item to its siblings and direct \code Item { id: group1 } - Rect { id: rect1; ... } + Rectangle { id: rect1; ... } } Item id: group2"> - Rect { id: rect2; anchors.left: rect1.right; ... } // invalid anchor! + Rectangle { id: rect2; anchors.left: rect1.right; ... } // invalid anchor! } \endcode diff --git a/doc/src/declarative/animation.qdoc b/doc/src/declarative/animation.qdoc index 57881a8..eea0fc3 100644 --- a/doc/src/declarative/animation.qdoc +++ b/doc/src/declarative/animation.qdoc @@ -29,7 +29,7 @@ The simplest form of animation is using \l NumberAnimation The following example creates a bouncing effect: \code -Rect { +Rectangle { id: rect width: 120; height: 200; color: "white" Image { @@ -81,7 +81,7 @@ The following example shows a simple use of states. In the default state \c myre \code Item { - Rect { + Rectangle { id: myrect width: 100 height: 100 diff --git a/doc/src/declarative/basictypes.qdoc b/doc/src/declarative/basictypes.qdoc index 684fd0d..092501f 100644 --- a/doc/src/declarative/basictypes.qdoc +++ b/doc/src/declarative/basictypes.qdoc @@ -121,9 +121,9 @@ Setting a color looks like this: \code - Rect { color: "steelblue" } - Rect { color: "#FF0000" } - Rect { color: "#800000FF" } + Rectangle { color: "steelblue" } + Rectangle { color: "#FF0000" } + Rectangle { color: "#800000FF" } \endcode \target basicqmlpoint @@ -275,7 +275,7 @@ Item { children [ Item { id: child1 }, - Rect { id: child2 }, + Rectangle { id: child2 }, Text { id: child3 } ] } diff --git a/doc/src/declarative/binding.qdoc b/doc/src/declarative/binding.qdoc index e74e4b1..36a7e77 100644 --- a/doc/src/declarative/binding.qdoc +++ b/doc/src/declarative/binding.qdoc @@ -7,8 +7,8 @@ Data binding provides a declarative way of specifying the data associated with o Bindings are created in Qml when an expression is assigned to a property. For example, the following produces two Rects of equal size (\c rect2 is bound to the size of \c rect1): \code -Rect { id: rect1; width: 100; height: 100 } -Rect { id: rect2; width: rect1.width; height: rect1.height } +Rectangle { id: rect1; width: 100; height: 100 } +Rectangle { id: rect2; width: rect1.width; height: rect1.height } \endcode There is also a special \l Bind element, which is typically used to bind from the UI to the underlying UI model (see \l {Passing Data Between C++ and Qml} for an example of this). The bindings above could be expressed using the \l Bind element as: diff --git a/doc/src/declarative/elements.qdoc b/doc/src/declarative/elements.qdoc index c71ac1b..8eeacdf 100644 --- a/doc/src/declarative/elements.qdoc +++ b/doc/src/declarative/elements.qdoc @@ -71,7 +71,7 @@ The following table lists the Qml elements provided by the Qt Declarative module \o \list \o \l Item -\o \l Rect +\o \l Rectangle \o \l Image \o \l BorderImage \o \l Text diff --git a/doc/src/declarative/extending.qdoc b/doc/src/declarative/extending.qdoc index 27c473e..833a5db 100644 --- a/doc/src/declarative/extending.qdoc +++ b/doc/src/declarative/extending.qdoc @@ -611,11 +611,11 @@ The following example shows how to declare a new "innerColor" property that controls the color of the inner rectangle. \code - Rect { + Rectangle { property color innerColor: "black" color: "red"; width: 100; height: 100 - Rect { + Rectangle { anchors.centerIn: parent width: parent.width - 10 height: parent.height - 10 @@ -655,11 +655,11 @@ alias reference syntax may become more flexibly in future releases. Here is the property definition example rewritten to use property aliases. \code -Rect { +Rectangle { property alias innerColor: InnerRect.color color: "red"; width: 100; height: 100 - Rect { + Rectangle { id: InnerRect anchors.centerIn: parent width: parent.width - 10 @@ -690,11 +690,11 @@ the external rectangle's color as "red" and redefine the "color" property to refer to the inner rectangle, like this: \code -Rect { +Rectangle { property alias color: InnerRect.color color: "red"; width: 100; height: 100 - Rect { + Rectangle { id: InnerRect anchors.centerIn: parent width: parent.width - 10 @@ -802,7 +802,7 @@ multiple times by an application. \row \o application.qml \code -Rect { +Rectangle { width: 100; height: 400; Box { x: 0; y: 0 } Box { x: 0; y: 150 } @@ -811,7 +811,7 @@ Rect { \endcode \o Box.qml \code -Rect { +Rectangle { width: 100; height: 100; color: "blue" } @@ -833,7 +833,7 @@ Rect. As the Rect type has a "color" property, this property is accessible to users of the Box component. For example, the application.qml can be modified to show three different colored boxes like this: \code -Rect { +Rectangle { width: 100; height: 400; Box { x: 0; y: 0; color: "red"; } Box { x: 0; y: 150; color: "yellow"; } @@ -848,7 +848,7 @@ available externally. Here we add a "text" property: \row \o application.qml \code -Rect { +Rectangle { width: 100; height: 400; Box { x: 0; y: 0; color: "red"; text: "stop" } Box { x: 0; y: 150; color: "yellow"; text: "slow" } @@ -857,7 +857,7 @@ Rect { \endcode \o Box.qml \code -Rect { +Rectangle { property alias text: MyText.text width: 100; height: 100; color: "blue" diff --git a/doc/src/declarative/focus.qdoc b/doc/src/declarative/focus.qdoc index 60311da..5c53483 100644 --- a/doc/src/declarative/focus.qdoc +++ b/doc/src/declarative/focus.qdoc @@ -23,7 +23,7 @@ If the \c {Rect} element in the following example has active focus and the \e A Item { KeyActions { keyA: "print('Key A was pressed')" - Rect {} + Rectangle {} } } \endcode @@ -56,7 +56,7 @@ the \c {KeyActions} element has \e {active focus} and pressing the \table \row \o \code - Rect { + Rectangle { color: "lightsteelblue"; width: 240; height: 25 Text { id: MyText } KeyActions { @@ -81,16 +81,16 @@ reponds accordingly. \table \row \o \code -Rect { +Rectangle { color: "red"; width: 240; height: 55 MyWidget {} MyWidget { y: 30; focus: true } } \endcode \o \code -Rect { +Rectangle { color: "red"; width: 240; height: 55 - Rect { + Rectangle { color: "lightsteelblue"; width: 240; height: 25 Text { id: MyText } KeyActions { @@ -100,7 +100,7 @@ Rect { keyC: "MyText.text = 'Key C was pressed'" } } - Rect { + Rectangle { y: 30; focus: true color: "lightsteelblue"; width: 240; height: 25 Text { id: MyText } @@ -147,7 +147,7 @@ result shown. \o \code FocusScope { width: 240; height: 25 - Rect { + Rectangle { color: "lightsteelblue"; width: 240; height: 25 Text { id: MyText } KeyActions { @@ -178,7 +178,7 @@ then on clicking the either one gives it focus. \table \row \o \code -Rect { +Rectangle { color: "red"; width: 240; height: 55 MyClickableWidget {} MyClickableWidget { y: 30; focus: true } @@ -217,7 +217,7 @@ print the name of the current list item. \table \row \o \code -Rect { +Rectangle { color: "lightsteelblue"; width: 240; height: 320 ListView { diff --git a/doc/src/declarative/qmlforcpp.qdoc b/doc/src/declarative/qmlforcpp.qdoc index 53af252..5838df7 100644 --- a/doc/src/declarative/qmlforcpp.qdoc +++ b/doc/src/declarative/qmlforcpp.qdoc @@ -29,7 +29,7 @@ \code QmlEngine engine; - QmlComponent redRectangle(&engine, "Rect { color: \"red\"; width: 100; height: 100 }"); + QmlComponent redRectangle(&engine, "Rectangle { color: \"red\"; width: 100; height: 100 }"); for (int ii = 0; ii < 100; ++ii) { QObject *rectangle = redRectangle.create(); // ... do something with the rectangle ... @@ -127,7 +127,7 @@ added to the parent's \c children property. \code - Rect { + Rectangle { Image {} Text {} } @@ -208,14 +208,14 @@ rectangles height would be updated automatically. \code - Rect { + Rectangle { color: "red" width: 100 - Rect { + Rectangle { color: "blue" width: 50 height: parent.height - Rect { + Rectangle { color: "green" width: 25 height: parent.height @@ -283,14 +283,14 @@ example rewritten to do just that. \code - Rect { + Rectangle { color: "red" width: 100 - Rect { + Rectangle { color: "blue" width: 50 height: parent.height - Rect { + Rectangle { color: "green" width: 25 height: parent.parent.height @@ -313,15 +313,15 @@ a component. By convention, id's should start with an uppercase letter. \code - Rect { + Rectangle { id: Root color: "red" width: GreenRect.width + 75 height: Root.height - Rect { + Rectangle { color: "blue" width: GreenRect.width + 25 - Rect { + Rectangle { id: GreenRect color: "green" width: 25 @@ -554,7 +554,7 @@ Consider the following example. \code - Rect { + Rectangle { x: NumberAnimation { running: true; repeat; true; from: 0; to: 100; } } \endcode diff --git a/doc/src/declarative/qmlintro.qdoc b/doc/src/declarative/qmlintro.qdoc index 783d077..77aa3e2 100644 --- a/doc/src/declarative/qmlintro.qdoc +++ b/doc/src/declarative/qmlintro.qdoc @@ -23,7 +23,7 @@ technologies like HTML and CSS, but not required. Qml looks like this: \code -Rect { +Rectangle { width: 200 height: 200 color: "white" @@ -36,7 +36,7 @@ Rect { Objects are specified by their type, followed by a pair of braces. Object types always begin with a capital letter. In the above example, there are -two objects, a \l Rect, and an \l Image. Between the braces, we can specify +two objects, a \l Rectangle, and an \l Image. Between the braces, we can specify information about the object, such as its properties. Properties are specified as \c {property: value} (much like CSS). In the above @@ -47,7 +47,7 @@ separated by a colon. Properties can be specified one-per-line: \code -Rect { +Rectangle { width: 100 height: 100 } @@ -56,7 +56,7 @@ Rect { or you can put multiple properties on a single line: \code -Rect { width: 100; height: 100 } +Rectangle { width: 100; height: 100 } \endcode When multiple property/value pairs are specified on a single line, they @@ -189,7 +189,7 @@ list, you can omit the square brackets: \code Image { - children: Rect {} + children: Rectangle {} } \endcode diff --git a/doc/src/declarative/tutorial1.qdoc b/doc/src/declarative/tutorial1.qdoc index d38dc54..d4f1095 100644 --- a/doc/src/declarative/tutorial1.qdoc +++ b/doc/src/declarative/tutorial1.qdoc @@ -1,4 +1,4 @@ -/*! +/*! \page tutorial1.html \title Tutorial 1 - Hello World! \target tutorial1 @@ -10,7 +10,7 @@ This first program is a simple "Hello world" example. The picture below is a scr Here is the QML code for the application: \code -Rect { +Rectangle { id: Page width: 480 height: 200 @@ -28,10 +28,10 @@ Rect { \section1 Walkthrough -\section2 Rect element +\section2 Rectangle element \code -Rect { +Rectangle { id: Page width: 480 height: 200 @@ -39,9 +39,9 @@ Rect { } \endcode -First, we declare a root element of type \l Rect. It is one of the basic building blocks you can use to create an application in QML. -We give it an id to be able to refer to it later. In this case, we call it \e Page. We also set the \c width, \c height and \c color properties. -The \l Rect element contains many other properties (such as \c x and \c y), but these are left at their default values. +First, we declare a root element of type \l Rectangle. It is one of the basic building blocks you can use to create an application in QML. +We give it an id to be able to refer to it later. In this case, we call it \e Page. We also set the \c width, \c height and \c color properties. +The \l Rectangle element contains many other properties (such as \c x and \c y), but these are left at their default values. \section2 Text element diff --git a/doc/src/declarative/tutorial2.qdoc b/doc/src/declarative/tutorial2.qdoc index 4be0702..410d119 100644 --- a/doc/src/declarative/tutorial2.qdoc +++ b/doc/src/declarative/tutorial2.qdoc @@ -19,7 +19,7 @@ Item { width: 40 height: 25 - Rect { + Rectangle { anchors.fill: parent color: CellContainer.color } @@ -33,7 +33,7 @@ Item { Then, we use our \c Cell component to create the color picker in the QML code for the application: \code -Rect { +Rectangle { id: Page width: 480 height: 200 @@ -83,7 +83,7 @@ property var color We declare a \c color property. This property is accessible from \e outside our component, this allows us to instantiate the cells with different colors. \code -Rect { +Rectangle { anchors.fill: parent color: CellContainer.color } diff --git a/doc/src/declarative/tutorial3.qdoc b/doc/src/declarative/tutorial3.qdoc index 0f9dac2..3517f97 100644 --- a/doc/src/declarative/tutorial3.qdoc +++ b/doc/src/declarative/tutorial3.qdoc @@ -12,7 +12,7 @@ We want our text to jump at the bottom of the screen and become red when clicked Here is the QML code: \code -Rect { +Rectangle { id: Page width: 480 height: 200 diff --git a/doc/src/snippets/declarative/GroupBox.qml b/doc/src/snippets/declarative/GroupBox.qml index efbe4e5..13e7eb6 100644 --- a/doc/src/snippets/declarative/GroupBox.qml +++ b/doc/src/snippets/declarative/GroupBox.qml @@ -3,7 +3,7 @@ import Qt 4.6 ContentWrapper { id: Container; width: parent.width; height: contents.height children: [ - Rect { + Rectangle { width: parent.width; height: contents.height color: "white"; pen.width: 2; pen.color: "#adaeb0"; radius: 10 VerticalLayout { diff --git a/doc/src/snippets/declarative/content.qml b/doc/src/snippets/declarative/content.qml index 1e01b29..fb03ced 100644 --- a/doc/src/snippets/declarative/content.qml +++ b/doc/src/snippets/declarative/content.qml @@ -1,6 +1,6 @@ import Qt 4.6 -Rect { +Rectangle { width: 200; height: 100; color: "lightgray" GroupBox { Text { text: "First Item" } diff --git a/doc/src/snippets/declarative/drag.qml b/doc/src/snippets/declarative/drag.qml index 8b1765b..8735d0c 100644 --- a/doc/src/snippets/declarative/drag.qml +++ b/doc/src/snippets/declarative/drag.qml @@ -1,7 +1,7 @@ import Qt 4.6 //! [0] -Rect { +Rectangle { id: blurtest; width: 600; height: 200; color: "white" Image { id: pic; source: "qtlogo-64.png"; anchors.verticalCenter: parent.verticalCenter diff --git a/doc/src/snippets/declarative/gradient.qml b/doc/src/snippets/declarative/gradient.qml index 19923ac..281360e 100644 --- a/doc/src/snippets/declarative/gradient.qml +++ b/doc/src/snippets/declarative/gradient.qml @@ -1,6 +1,6 @@ import Qt 4.6 -Rect { +Rectangle { width: 100; height: 100 gradient: Gradient { GradientStop { position: 0.0; color: "red" } diff --git a/doc/src/snippets/declarative/gridview/gridview.qml b/doc/src/snippets/declarative/gridview/gridview.qml index 208118d..d0f0623 100644 --- a/doc/src/snippets/declarative/gridview/gridview.qml +++ b/doc/src/snippets/declarative/gridview/gridview.qml @@ -1,7 +1,7 @@ import Qt 4.6 //! [3] -Rect { +Rectangle { width: 240; height: 180; color: "white" // ContactModel model is defined in dummydata/ContactModel.qml // The viewer automatically loads files in dummydata/* to assist @@ -27,7 +27,7 @@ Rect { //! [1] Component { id: Highlight - Rect { + Rectangle { color: "lightsteelblue" radius: 5 } diff --git a/doc/src/snippets/declarative/listview/highlight.qml b/doc/src/snippets/declarative/listview/highlight.qml index 3d13170..29f41bf 100644 --- a/doc/src/snippets/declarative/listview/highlight.qml +++ b/doc/src/snippets/declarative/listview/highlight.qml @@ -1,6 +1,6 @@ import Qt 4.6 -Rect { +Rectangle { width: 180; height: 200; color: "white" // ContactModel model is defined in dummydata/ContactModel.qml @@ -29,7 +29,7 @@ Rect { //! [1] Component { id: Highlight - Rect { + Rectangle { width: 180; height: 40 color: "lightsteelblue"; radius: 5 y: Follow { diff --git a/doc/src/snippets/declarative/listview/listview.qml b/doc/src/snippets/declarative/listview/listview.qml index 50677ba..c907077 100644 --- a/doc/src/snippets/declarative/listview/listview.qml +++ b/doc/src/snippets/declarative/listview/listview.qml @@ -1,7 +1,7 @@ import Qt 4.6 //! [3] -Rect { +Rectangle { width: 180; height: 200; color: "white" // ContactModel model is defined in dummydata/ContactModel.qml @@ -29,7 +29,7 @@ Rect { //! [1] Component { id: Highlight - Rect { + Rectangle { color: "lightsteelblue" radius: 5 } diff --git a/doc/src/snippets/declarative/mouseregion.qml b/doc/src/snippets/declarative/mouseregion.qml index d3e22cd..6d8f179 100644 --- a/doc/src/snippets/declarative/mouseregion.qml +++ b/doc/src/snippets/declarative/mouseregion.qml @@ -1,14 +1,14 @@ import Qt 4.6 -Rect { width: 200; height: 100 +Rectangle { width: 200; height: 100 HorizontalLayout { //! [0] -Rect { width: 100; height: 100; color: "green" +Rectangle { width: 100; height: 100; color: "green" MouseRegion { anchors.fill: parent; onClicked: { parent.color = 'red' } } } //! [0] //! [1] -Rect { +Rectangle { width: 100; height: 100; color: "green" MouseRegion { anchors.fill: parent diff --git a/doc/src/snippets/declarative/pathview/pathattributes.qml b/doc/src/snippets/declarative/pathview/pathattributes.qml index 39c7122..3c2b204 100644 --- a/doc/src/snippets/declarative/pathview/pathattributes.qml +++ b/doc/src/snippets/declarative/pathview/pathattributes.qml @@ -1,6 +1,6 @@ import Qt 4.6 -Rect { +Rectangle { width: 240; height: 200; color: 'white' //! [0] //! [1] diff --git a/doc/src/snippets/declarative/pathview/pathview.qml b/doc/src/snippets/declarative/pathview/pathview.qml index 70f498c..f5db242 100644 --- a/doc/src/snippets/declarative/pathview/pathview.qml +++ b/doc/src/snippets/declarative/pathview/pathview.qml @@ -1,6 +1,6 @@ import Qt 4.6 -Rect { +Rectangle { width: 240; height: 200; color: 'white' //! [0] //! [1] diff --git a/doc/src/snippets/declarative/repeater.qml b/doc/src/snippets/declarative/repeater.qml index a58972f..309fead 100644 --- a/doc/src/snippets/declarative/repeater.qml +++ b/doc/src/snippets/declarative/repeater.qml @@ -1,14 +1,14 @@ import Qt 4.6 //! [0] -Rect { width: 220; height: 20; color: "white" +Rectangle { width: 220; height: 20; color: "white" Component { id: Dot - Rect { width: 20; height: 20; radius: 10; color: "green" } + Rectangle { width: 20; height: 20; radius: 10; color: "green" } } HorizontalLayout { - Rect { width: 10; height: 20; color: "red" } + Rectangle { width: 10; height: 20; color: "red" } Repeater { component: Dot; dataSource: 10 } - Rect { width: 10; height: 20; color: "blue" } + Rectangle { width: 10; height: 20; color: "blue" } } } //! [0] diff --git a/doc/src/snippets/declarative/rotation.qml b/doc/src/snippets/declarative/rotation.qml index ab7d4ca..aaaebee 100644 --- a/doc/src/snippets/declarative/rotation.qml +++ b/doc/src/snippets/declarative/rotation.qml @@ -1,6 +1,6 @@ import Qt 4.6 -Rect { +Rectangle { width: 360; height: 80 color: "white" //! [0] diff --git a/doc/src/tutorials/declarative.qdoc b/doc/src/tutorials/declarative.qdoc index e848dfa..dde0615 100644 --- a/doc/src/tutorials/declarative.qdoc +++ b/doc/src/tutorials/declarative.qdoc @@ -50,7 +50,7 @@ \brief An introduction to using Qt Declarative UI to put together a simple animated application. - \omit + \omit At the time of writing the tutorial Declarative UI was still under development. It is extremely likely that an update will be required prior to 4.6 release. @@ -124,8 +124,8 @@ This is one of the simplest of QML components. It describes a rectangle with some simple properties. In QML all components start with a capital letter, and their properties with lower case letters. - - Apart from the properties all QML components share, the \l{Rect}{Rect} component has the properties + + Apart from the properties all QML components share, the \l{Rectangle}{Rectangle} component has the properties \list \o color - The background color of the rectangle @@ -152,11 +152,11 @@ The next step of the tutorial adds an image over the rectangle. We will do this by adding an \l{Image}{Image} component as a child of the - \l{Rect}{Rect} component. All QML components have a list of children which + \l{Rectangle}{Rectangle} component. All QML components have a list of children which are drawn in order after the parent component has been drawn. By having the \l{Image}{Image} - component as a child of the \l{Rect}{Rect} component we ensure it is drawn - over the \l{Rect}{Rect} component. Children also are affected by the opacity + component as a child of the \l{Rectangle}{Rectangle} component we ensure it is drawn + over the \l{Rectangle}{Rectangle} component. Children also are affected by the opacity of the parent component and calculate their position in within the bounds of the parent component. @@ -166,7 +166,7 @@ The trashIcon image is added as a child of the Rectangle. In this case the children property isn't explicitly used because the default property - of the \l{Rect}{Rect} component is its children. Some elements often don't have children + of the \l{Rectangle}{Rectangle} component is its children. Some elements often don't have children and use some other default component. When this is the case its possible to explicitly list the sub component as a child as follows: @@ -184,7 +184,7 @@ position to align to the right of its parent and for its vertical center to align with the vertical center of its parent. Setting a property by the identifier of a separate property binds them. This means - that if while running the example the position of the \l{Rect}{Rect} component's + that if while running the example the position of the \l{Rectangle}{Rectangle} component's vertical center changed, so to would the vertical center of the \l{Image}{Image} component. @@ -239,12 +239,12 @@ might look like. \code - Rect { + Rectangle { id: removeButton width: 30 height: 30 - color: "red" - radius: 5 + color: "red" + radius: 5 Image { id: trashIcon width: 22 @@ -360,7 +360,7 @@ \tableofcontents The second part of this tutorial covers how to reuse QML components and - have them interact with each other. The RemoveButton developed in the + have them interact with each other. The RemoveButton developed in the previous chapter is intended to be part of a more complex control for editing a field of our contact. This ContactField in turn is intended to be used in a contact editing control. @@ -395,7 +395,7 @@ can be reused from within the same QML file using Component and ComponentInstance elements. The next code snippet produces three red rounded rectangles within a large blue rectangle. - + \image declarative-reuse-bluerect.png \snippet declarative/tutorials/contacts/2_Reuse/1b/BlueRect.qml all @@ -467,7 +467,7 @@ 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 - a signal to change state. When the value of the expression for the + a signal to change state. When the value of the expression for the when attribute changes, Qt will detect if the contactField needs to enter 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. @@ -500,7 +500,7 @@ to receive focus \endlist - The read-only property activeFocus can be used to determine whether a + The read-only property activeFocus can be used to determine whether a component will receive key input. Any un-handled keys will be passed to the components parent, which in turn will pass keys it doesn't handle up to its own ancestors. @@ -573,7 +573,7 @@ When the query is a select statement, the component also acts as a model allowing it to provide data to a ListView component. The query above retrieves the fields recid, label, email and phone from a contacts table, - and orders the results by the label of the contact first, and then by + and orders the results by the label of the contact first, and then by the recid for any contacts with equivalent labels. The ListView component is suitable for displaying models and is declared @@ -638,7 +638,7 @@ 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, |