diff options
Diffstat (limited to 'doc')
27 files changed, 138 insertions, 138 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..6168462 100644 --- a/doc/src/declarative/binding.qdoc +++ b/doc/src/declarative/binding.qdoc @@ -1,17 +1,17 @@ -/*! +/*! \page binding.html \title Data Binding \target binding Data binding provides a declarative way of specifying the data associated with objects, as well as the relationship between data of different objects. For example, you could bind the text of a label to the value of a slider: as the value of the slider changed, the label would be automatically updated with the new value. -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): +Bindings are created in QML when an expression is assigned to a property. For example, the following produces two rectangles 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: +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: \code Bind { target: rect2; property: "width"; value: rect1.width } @@ -29,8 +29,8 @@ Relevant items can also be bound to the contents of a model - see \l ListView fo Data can be bound to C++ objects - see \l {C++ Data Binding}. */ -/*! -\page qtbinding.html +/*! +\page qtbinding.html \target qtbinding \title C++ Data Binding @@ -41,11 +41,11 @@ The data binding framework is based on Qt's property system (see the Qt document Relevant items can also be bound to the contents of a Qt model. For example, ListView can make use of data from a QListModelInterface-derived model. (QListModelInterface is part of the next generation Model/View architecture being developed for Qt.) -\section1 Passing Data Between C++ and Qml +\section1 Passing Data Between C++ and QML -Data binding provides one method of data transfer between C++ and Qml. +Data binding provides one method of data transfer between C++ and QML. -For example, lets say you want to implement a slider in Qml that changes the screen brightness of the device it is running on. You would start by declaring a brightness property on your QObject-derived class: +For example, lets say you want to implement a slider in QML that changes the screen brightness of the device it is running on. You would start by declaring a brightness property on your QObject-derived class: \code class MyScreen : public QObject { @@ -84,7 +84,7 @@ void setBrightness(int b) \note One important thing to keep in mind is that the changed signal should only be emitted when there is a real change ( \c b \c != \c m_brightness ), or you may get an infinite loop. -Next, make an instance of this class visible to the Qml bind engine: +Next, make an instance of this class visible to the QML bind engine: \code QFxView *view = new QFxView; view->setUrl("MyUI.qml"); @@ -98,7 +98,7 @@ view->execute(); \note Bindings must be made after setUrl() but before execute(). -Finally, in Qml you can make the appropriate bindings, so in \c "MyUI.qml": +Finally, in QML you can make the appropriate bindings, so in \c "MyUI.qml": \code Slider { value: screen.brightness } diff --git a/doc/src/declarative/elements.qdoc b/doc/src/declarative/elements.qdoc index c71ac1b..fff1352 100644 --- a/doc/src/declarative/elements.qdoc +++ b/doc/src/declarative/elements.qdoc @@ -1,9 +1,9 @@ /*! \page elements.html \target elements -\title Qml Elements +\title QML Elements -The following table lists the Qml elements provided by the Qt Declarative module. +The following table lists the QML elements provided by the Qt Declarative module. \bold {Standard Qt Declarative Elements} @@ -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..ced2d68 100644 --- a/doc/src/declarative/qmlintro.qdoc +++ b/doc/src/declarative/qmlintro.qdoc @@ -1,29 +1,29 @@ /*! \page qmlintroduction.html -\title Introduction to the Qml language +\title Introduction to the QML language \tableofcontents -\section1 What is Qml? +\section1 What is QML? -Qml is a declarative language designed to describe the user interface of a -program: both what it looks like and how it behaves. In Qml, a user +QML is a declarative language designed to describe the user interface of a +program: both what it looks like and how it behaves. In QML, a user interface is specified as a tree of objects with properties. \section1 What should I know before starting? This introduction is meant for those with little or no programming -experience. JavaScript is used as a scripting language in Qml, so you may want +experience. JavaScript is used as a scripting language in QML, so you may want to learn a bit more about it (\l{JavaScript: The Definitive Guide}) before diving -too deep into Qml. It's also helpful to have a basic understanding of other web +too deep into QML. It's also helpful to have a basic understanding of other web technologies like HTML and CSS, but not required. -\section1 Basic Qml Syntax +\section1 Basic QML Syntax -Qml looks like this: +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 @@ -94,9 +94,9 @@ Text2 will be updated as well. Note that to refer to other objects, we use their \e id (more information on the id property can be found in a following section). -\section1 Qml Comments +\section1 QML Comments -Commenting in Qml is similar to JavaScript. +Commenting in QML is similar to JavaScript. \list \o Single line comments begin with // and end at the end of the line. \o Multiline comments begin with /* and end with *\/ @@ -106,7 +106,7 @@ Commenting in Qml is similar to JavaScript. Comments are ignored by the engine. The are useful for explaining what you are doing: for referring back to at a later date, or for others reading -your Qml files. +your QML files. Comments can also be used to prevent the execution of code, which is sometimes useful for tracking down problems. @@ -129,7 +129,7 @@ Properties begin with a lowercase letter (with the exception of \l{Attached Prop \section2 Property types -Qml supports properties of many types (\l{Common QML Types}). The basic types include int, +QML supports properties of many types (\l{Common QML Types}). The basic types include int, real, bool, string, color, and lists. \code @@ -141,7 +141,7 @@ Item { } \endcode -Qml properties are what is known as \e typesafe. That is, they only allow you to assign a value that +QML properties are what is known as \e typesafe. That is, they only allow you to assign a value that matches the property type. For example, the scale property of item is a real, and if you try to assign a string to it you will get an error. @@ -189,7 +189,7 @@ list, you can omit the square brackets: \code Image { - children: Rect {} + children: Rectangle {} } \endcode diff --git a/doc/src/declarative/qmlreference.qdoc b/doc/src/declarative/qmlreference.qdoc index da955dc..8a50547 100644 --- a/doc/src/declarative/qmlreference.qdoc +++ b/doc/src/declarative/qmlreference.qdoc @@ -1,6 +1,6 @@ /*! \page qmlreference.html - \title Qml Reference + \title QML Reference \target qtdeclarativemainpage @@ -12,7 +12,7 @@ Building fluid applications is done declaratively, rather than procedurally. That is, you specify \e what the UI should look like and how it should behave - rather than specifying step-by-step \e how to build it. Specifying a UI declaratively + rather than specifying step-by-step \e how to build it. Specifying a UI declaratively does not just include the layout of the interface items, but also the way each individual item looks and behaves and the overall flow of the application. @@ -21,7 +21,7 @@ \o \l {qmlexamples}{Examples} \o \l {tutorial}{Tutorial: 'Hello World'} \o \l {tutorials-declarative-contacts.html}{Tutorial: 'Introduction to QML'} - \o \l {Introduction to the Qml language} (in progress) + \o \l {Introduction to the QML language} (in progress) \endlist Core Features: @@ -36,6 +36,6 @@ QML Reference: \list - \o \l {elements}{Qml Elements} + \o \l {elements}{QML Elements} \endlist */ diff --git a/doc/src/declarative/qtdeclarative.qdoc b/doc/src/declarative/qtdeclarative.qdoc index ccfe4a6..6abcd92 100644 --- a/doc/src/declarative/qtdeclarative.qdoc +++ b/doc/src/declarative/qtdeclarative.qdoc @@ -81,7 +81,7 @@ QML Reference: \list \o \l {QML Format} - \o \l {elements}{Qml Elements} + \o \l {elements}{QML Elements} \endlist C++ Reference: 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..9c1e98b 100644 --- a/doc/src/declarative/tutorial2.qdoc +++ b/doc/src/declarative/tutorial2.qdoc @@ -1,4 +1,4 @@ -/*! +/*! \page tutorial2.html \title Tutorial 2 - Some colors \target tutorial2 @@ -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 @@ -74,7 +74,7 @@ Item { } \endcode -The root element of our component is an \c Item. It is the most basic 'Fx' element in Qml and is often used as a container for other elements. +The root element of our component is an \c Item. It is the most basic element in QML and is often used as a container for other elements. \code property var color @@ -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 } @@ -93,7 +93,7 @@ Our cell component is basically a colored rectangle. The \c anchors.fill property is a convenient way to set the size of an element. In this case the \c Rect will have the same size as its parent. -We bind the \c color property of this \c Rect to the color property of our component. +We bind the \c color property of this \c Rectangle to the color property of our component. \code MouseRegion { 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, |