diff options
Diffstat (limited to 'doc/src')
34 files changed, 357 insertions, 102 deletions
diff --git a/doc/src/declarative/examples.qdoc b/doc/src/declarative/examples.qdoc index 39da323..9929cfe 100644 --- a/doc/src/declarative/examples.qdoc +++ b/doc/src/declarative/examples.qdoc @@ -203,6 +203,11 @@ The examples can be found in Qt's \c examples/declarative directory. \o \l{declarative/threading/workerscript}{WorkerScript} \endlist +\section2 Screen orientation +\list +\o \l{declarative/screenorientation}{Example} +\endlist + \section2 SQL Local Storage \list \o \l{declarative/sqllocalstorage}{Example} diff --git a/doc/src/declarative/focus.qdoc b/doc/src/declarative/focus.qdoc index e3ca963..56ea165 100644 --- a/doc/src/declarative/focus.qdoc +++ b/doc/src/declarative/focus.qdoc @@ -266,7 +266,7 @@ When a QML item explicitly relinquishes focus (by setting its does not automatically select another element to receive focus. That is, it is possible for there to be no currently \e {active focus}. -See the {declarative/keyinteraction/focus}{Keyboard Focus example} for a +See the \l{declarative/keyinteraction/focus}{Keyboard Focus example} for a demonstration of moving keyboard focus between multiple areas using FocusScope elements. diff --git a/doc/src/declarative/pics/anatomy-component.png b/doc/src/declarative/pics/anatomy-component.png Binary files differindex 70ed983..6125b00 100644 --- a/doc/src/declarative/pics/anatomy-component.png +++ b/doc/src/declarative/pics/anatomy-component.png diff --git a/doc/src/declarative/qdeclarativedocument.qdoc b/doc/src/declarative/qdeclarativedocument.qdoc index a2ed205..068297a 100644 --- a/doc/src/declarative/qdeclarativedocument.qdoc +++ b/doc/src/declarative/qdeclarativedocument.qdoc @@ -73,51 +73,61 @@ document - such as \c Rectangle and \c ListView - including those made within an import statements. QML does not import any modules by default, so at least one \c import statement must be present or no elements will be available! +Each \c id value in a QML document must be unique within that document. They +do not need to be unique across different documents as id values are +resolved according to the document scope. + + +\section1 Documents as Component Definitions + A QML document defines a single, top-level \l {QDeclarativeComponent}{QML component}. A QML component is a template that is interpreted by the QML runtime to create an object with some predefined behaviour. As it is a template, a single QML component can be "run" multiple times to produce several objects, each of which are said to be \e instances of the component. Once created, instances are not dependent on the component that created them, so they can -operate on independent data. Here is an example of a simple "Button" component that is -instantiated four times, each with a different value for its \c text property. +operate on independent data. Here is an example of a simple "Button" component (defined +in a \c Button.qml file) that is instantiated four times by \c application.qml. +Each instance is created with a different value for its \c text property: -\raw HTML -<table><tr><td> -\endraw -\code +\table +\row +\o Button.qml +\o application.qml + +\row +\o \snippet doc/src/snippets/declarative/qmldocuments.qml 0 +\o +\qml import Qt 4.7 -BorderImage { - property alias text: textElement.text - width: 100; height: 30; source: "images/toolbutton.sci" - - Text { - id: textElement - anchors.centerIn: parent - font.pointSize: 20 - style: Text.Raised - color: "white" - } +Column { + spacing: 10 + + Button { text: "Apple" } + Button { text: "Orange" } + Button { text: "Pear" } + Button { text: "Grape" } } -\endcode -\raw HTML -</td> <td> -\endraw +\endqml + \image anatomy-component.png -\raw HTML -</td> </tr> </table> -\endraw + +\endtable Any snippet of QML code can become a component, just by placing it in the file "<Name>.qml" -where <Name> is the new element name, and begins with an uppercase letter. Note that +where <Name> is the new element name, and begins with an \bold uppercase letter. Note that the case of all characters in the <Name> are significant on some filesystems, notably UNIX filesystems. It is recommended that the case of the filename matches the case of the component name in QML exactly, regardless of the platform the QML will be deployed to. -These QML files automatically become available as new QML element types +These QML component files automatically become available as new QML element types to other QML components and applications in the same directory. + + +\section1 Inline Components + In addition to the top-level component that all QML documents define, and any reusable components placed in separate files, documents may also include \e inline components. Inline components are declared using the diff --git a/doc/src/declarative/qdeclarativei18n.qdoc b/doc/src/declarative/qdeclarativei18n.qdoc index b6e6c6e..70a3587 100644 --- a/doc/src/declarative/qdeclarativei18n.qdoc +++ b/doc/src/declarative/qdeclarativei18n.qdoc @@ -80,5 +80,5 @@ qmlviewer -translation hello.qm hello.qml \endcode -You can see a complete example and source code in the {declarative/i18n}{QML Internationalization example}. +You can see a complete example and source code in the \l{declarative/i18n}{QML Internationalization example}. */ diff --git a/doc/src/declarative/qdeclarativeintro.qdoc b/doc/src/declarative/qdeclarativeintro.qdoc index 75055d8..fa42f59 100644 --- a/doc/src/declarative/qdeclarativeintro.qdoc +++ b/doc/src/declarative/qdeclarativeintro.qdoc @@ -87,6 +87,10 @@ Rectangle { width: 100; height: 100 } When multiple property/value pairs are specified on a single line, they must be separated by a semicolon. +The \c import statement imports the \c Qt \l{QML Modules}{module}, which contains all of the +standard \l {QML Elements}. Without this import statement, the \l Rectangle +and \l Image elements would not be available. + \section1 Expressions In addition to assigning values to properties, you can also assign @@ -181,7 +185,8 @@ Item { \section3 The \c id property -Each object can be given a special unique property called an \e id. Assigning an id enables the object +Each object can be given a special unique property called an \e id. No other object within the +same \l{QML Documents}{QML document} can have the same \c id value. Assigning an id enables the object to be referred to by other objects and scripts. The first Rectangle element below has an \e id, "myRect". The second Rectange element defines its diff --git a/doc/src/declarative/qdeclarativestates.qdoc b/doc/src/declarative/qdeclarativestates.qdoc index 6461925..0b91756 100644 --- a/doc/src/declarative/qdeclarativestates.qdoc +++ b/doc/src/declarative/qdeclarativestates.qdoc @@ -32,57 +32,174 @@ \section1 Overview -QML states typically describe user interface configurations, including: +User interfaces are designed to present different interface configurations in +different scenarios, or to modify their appearances in response to user +interaction. Often, there are a set of changes that are made concurrently, such +that the interface could be seen to be internally changing from one \e state to +another. + +This applies generally to interface elements regardless of their complexity. +A photo viewer may initially present images in a grid, and when an image is +clicked, change to a "detailed" state where the individual image is expanded +and the interface is changed to present new options for image editing. On the +other end of the scale, when a simple button is pressed, it may change to a +"pressed" state in which its color and position is modified to give a pressed +appearance. + +In QML, any object can change between different \e states to apply sets of +changes that modify the properties of relevant items. Each \e state could +present a different configuration that could, for example: + \list -\o What UI elements are present -\o The properties of those elements (including how they behave) -\o What actions are available +\o Show some UI elements and hide others +\o Present different available actions to the user +\o Start, stop or pause animations +\o Execute some script required in the new state +\o Change a property value for a particular item +\o Show a different view or "screen" \endlist -A state can also be thought of as a set of batched changes from a default configuration. +Changes between states can be animated using \l {Transitions}{transitions}, as +discussed further below. -Examples of states in modern UI: -\list -\o An Address Book application with a 'View Contact' state and an 'Edit Contact' State. In the first state the contact information presented is read-only (using labels), and in the second it is editable (using editors). -\o A button with a pressed and unpressed state. When pressed the text moves slightly down and to the right, and the button has a slightly darker appearance. -\endlist +All \l {Item}-based objects have a \e {default state}, and can specify additional +states by adding new \l State objects to the item's \l {Item::}{states} +property. Each state has a \e name that is unique for all states within that +item; the default state's name is an empty string. To change the current state +of an item, set the \l {Item::}{state} property to the name of the state. + +Non-Item objects can use states through the StateGroup element. -\section1 States in QML -In QML: +\section1 Creating states + +To create a state, add a \l State object to the item's \l {Item::}{states} property, +which holds a list of states for that item. + +Following is an example. Here, the \l Rectangle is initially placed in the +default (0, 0) position. It has defined an additional state named "moved", in +which a PropertyChanges object repositions the rectangle to (50, 50). Clicking +within the MouseArea changes the state to the "moved" state, thus moving the \l +Rectangle. + +\snippet doc/src/snippets/declarative/states.qml 0 + +A \l State item defines all the changes to be made in the new state. You +could specify additional properties to be changed, or create additional +PropertyChanges for other objects. (Note that a \l State can modify the +properties of other objects, not just the object that owns the state.) + +For example: + +\qml +State { + name: "moved" + PropertyChanges { target: myRect; x: 50; y: 50; color: "blue" } + PropertyChanges { target: someOtherItem; width: 1000 } +} +\endqml + +A \l State is not limited to performing modifications on property values. It +can also: + \list -\o Any object can use states. -\o There is a default state. The default state can be explicitly set. -\o A state can affect the properties of other objects, not just the object owning the state (and not just that object's children). +\o Run some script using StateChangeScript +\o Override an existing signal handler for an object using PropertyChanges +\o Re-parent an \l Item using ParentChanges +\o Modify anchor values using AnchorChanges \endlist -To define a state for an item, add a \l State element to the \l{Item::states}{states} property. To -change the current state of an \l Item, set the \l{Item::state}{state} property to the name -of the required state. +The \l {declarative/animation/states}{States and Transitions example} +demonstrates how to declare a basic set of states and apply animated +transitions between them. -Here is an example of using states. In the default state \c myRect is positioned at 0,0. In the 'moved' state it is positioned at 50,50. Clicking within the mouse area changes the state from the default state to the 'moved' state, thus moving the rectangle. -\snippet doc/src/snippets/declarative/states.qml 0 -\snippet doc/src/snippets/declarative/states.qml 1 +\section1 The default state -State changes can be animated using \l{state-transitions}{Transitions}. +Of course, the \l Rectangle in the example above could have simply been moved +by setting its position to (50, 50) in the mouse area's \c onClicked handler. +However, aside from enabling batched property changes, the use of states allows +an item to revert to its \e {default state}, which contains all of the items' +initial property values before they were modified in a state change. -For example, adding this code to the above \c Item element animates the transition to the "moved" state: +The default state is specified by an empty string. If the MouseArea in the +above example was changed to this: -\snippet doc/src/snippets/declarative/states.qml transitions +\qml +MouseArea { + anchors.fill: parent + onClicked: myRect.state == 'moved' ? myRect.state = "" : myRect.state = 'moved'; +} +\endqml -See \l{state-transitions}{Transitions} for more information. +This would toggle the \l Rectangle's state between the \e moved and \e default +states when clicked. The properties can be reverted to their initial +values without requiring the definition of another \l State that defines these +value changes. -Other things you can do in a state change: -\list -\o Override signal handlers with PropertyChanges -\o Change an item's visual parent with ParentChange -\o Change an item's anchors with AnchorChanges -\o Run some script with StateChangeScript -\endlist +\section1 The "when" property + +The \l {State::}{when} property is useful for specifying when a state should be +applied. This can be set to an expression that evaluates to \c true when an +item should change to a particular state. + +If the above example was changed to this: + +\qml +Rectangle { + ... + + MouseArea { + id: mouseArea + anchors.fill: parent + } + + states: State { + name: "moved"; when: mouseArea.pressed + ... + } +\endqml + +The \l Rectangle would automatically change to the \e moved state when the +mouse is pressed, and revert to the default state when it is released. This is +simpler (and a better, more declarative method) than creating \c onPressed +and \c onReleased handlers in the MouseArea to set the current state. + + +\section1 Animating state changes + + +State changes can be easily animated through \l {Transitions}{transitions}. A +\l Transition defines the animations that should be applied when an item +changes from one state to another. + +If the above example was modified to include the following \l Transition, the +movement of the \l Rectangle would be animated: + +\qml +Rectangle { + ... + + MouseArea { ... } + + states: [ + ... + ] + + transitions: [ + Transition { + NumberAnimation { properties: "x,y"; duration: 500 } + } + ] + } +\endqml + +This \l Transition defines that if any \c x or \c y properties have changed +during a state change within this item, their values should be animated over 500 +millliseconds. -The {declarative/animation/states}{States and Transitions example} demonstrates how to declare a basic set of states and then apply animated transitions between them. +See the \l Transitions documentation for more information. */ diff --git a/doc/src/declarative/qmlviewer.qdoc b/doc/src/declarative/qmlviewer.qdoc index 5efc0ce..41c4c80 100644 --- a/doc/src/declarative/qmlviewer.qdoc +++ b/doc/src/declarative/qmlviewer.qdoc @@ -197,10 +197,10 @@ Rectangle { \o \c runtime.orientation \o This property indicates the current orientation of the QML Viewer. On the -N900 platform, this property automatically updates to reflect the device's -actual orientation; on other platforms, this indicates the orientation currently -selected in the QML Viewer's \e {Settings -> Properties} menu. The -\c orientation value can be one of the following: +N900 platform and most S60 5.0-based or newer Symbian devices, this property +automatically updates to reflect the device's actual orientation; on other platforms, +this indicates the orientation currently selected in the QML Viewer's +\e {Settings -> Properties} menu. The \c orientation value can be one of the following: \list \o \c Orientation.Portrait diff --git a/doc/src/declarative/tutorial.qdoc b/doc/src/declarative/tutorial.qdoc index 7a97eb1..f913d44 100644 --- a/doc/src/declarative/tutorial.qdoc +++ b/doc/src/declarative/tutorial.qdoc @@ -222,5 +222,5 @@ This is equivalent to writing the two transitions separately. The \l ParallelAnimation element makes sure that the two types of animations (number and color) start at the same time. We could also run them one after the other by using \l SequentialAnimation instead. -For more details on states and transitions, see \l {QML States} and the {declarative/animation/states}{states and transitions example}. +For more details on states and transitions, see \l {QML States} and the \l{declarative/animation/states}{states and transitions example}. */ diff --git a/doc/src/examples/qml-examples.qdoc b/doc/src/examples/qml-examples.qdoc index a8be401..8d3aa25 100644 --- a/doc/src/examples/qml-examples.qdoc +++ b/doc/src/examples/qml-examples.qdoc @@ -412,6 +412,14 @@ \endtable */ + +/*! + \title Screen orientation + \example declarative/screenorientation + + This example shows how to implement screen orientation support for your application. +*/ + /*! \title SQL Local Storage Example \example declarative/sqllocalstorage diff --git a/doc/src/images/addressbook-tutorial-part1-labeled-layout.png b/doc/src/images/addressbook-tutorial-part1-labeled-layout.png Binary files differindex ef514c8..b19cb36 100644 --- a/doc/src/images/addressbook-tutorial-part1-labeled-layout.png +++ b/doc/src/images/addressbook-tutorial-part1-labeled-layout.png diff --git a/doc/src/images/addressbook-tutorial-part1-labeled-screenshot.png b/doc/src/images/addressbook-tutorial-part1-labeled-screenshot.png Binary files differindex 4381079..f9b91ee 100644 --- a/doc/src/images/addressbook-tutorial-part1-labeled-screenshot.png +++ b/doc/src/images/addressbook-tutorial-part1-labeled-screenshot.png diff --git a/doc/src/images/addressbook-tutorial-part1-screenshot.png b/doc/src/images/addressbook-tutorial-part1-screenshot.png Binary files differindex cf15627..454b095 100644 --- a/doc/src/images/addressbook-tutorial-part1-screenshot.png +++ b/doc/src/images/addressbook-tutorial-part1-screenshot.png diff --git a/doc/src/images/addressbook-tutorial-part2-add-contact.png b/doc/src/images/addressbook-tutorial-part2-add-contact.png Binary files differindex 330858d..6f2b947 100644 --- a/doc/src/images/addressbook-tutorial-part2-add-contact.png +++ b/doc/src/images/addressbook-tutorial-part2-add-contact.png diff --git a/doc/src/images/addressbook-tutorial-part2-add-successful.png b/doc/src/images/addressbook-tutorial-part2-add-successful.png Binary files differindex 3b108fb..99a2154 100644 --- a/doc/src/images/addressbook-tutorial-part2-add-successful.png +++ b/doc/src/images/addressbook-tutorial-part2-add-successful.png diff --git a/doc/src/images/addressbook-tutorial-part2-labeled-layout.png b/doc/src/images/addressbook-tutorial-part2-labeled-layout.png Binary files differindex 73f6dfb..1e000c8 100644 --- a/doc/src/images/addressbook-tutorial-part2-labeled-layout.png +++ b/doc/src/images/addressbook-tutorial-part2-labeled-layout.png diff --git a/doc/src/images/addressbook-tutorial-part3-labeled-layout.png b/doc/src/images/addressbook-tutorial-part3-labeled-layout.png Binary files differindex 662fa7f..1981ba8 100644 --- a/doc/src/images/addressbook-tutorial-part3-labeled-layout.png +++ b/doc/src/images/addressbook-tutorial-part3-labeled-layout.png diff --git a/doc/src/images/addressbook-tutorial-part3-screenshot.png b/doc/src/images/addressbook-tutorial-part3-screenshot.png Binary files differindex 97d1357..75159b4 100644 --- a/doc/src/images/addressbook-tutorial-part3-screenshot.png +++ b/doc/src/images/addressbook-tutorial-part3-screenshot.png diff --git a/doc/src/images/addressbook-tutorial-part4-remove.png b/doc/src/images/addressbook-tutorial-part4-remove.png Binary files differindex 42b0f92..8eb259e 100644 --- a/doc/src/images/addressbook-tutorial-part4-remove.png +++ b/doc/src/images/addressbook-tutorial-part4-remove.png diff --git a/doc/src/images/addressbook-tutorial-part5-finddialog.png b/doc/src/images/addressbook-tutorial-part5-finddialog.png Binary files differindex 18e5451..743d92e 100644 --- a/doc/src/images/addressbook-tutorial-part5-finddialog.png +++ b/doc/src/images/addressbook-tutorial-part5-finddialog.png diff --git a/doc/src/images/addressbook-tutorial-part5-notfound.png b/doc/src/images/addressbook-tutorial-part5-notfound.png Binary files differindex be7172e..2d35766 100644 --- a/doc/src/images/addressbook-tutorial-part5-notfound.png +++ b/doc/src/images/addressbook-tutorial-part5-notfound.png diff --git a/doc/src/images/addressbook-tutorial-part5-screenshot.png b/doc/src/images/addressbook-tutorial-part5-screenshot.png Binary files differindex ea4a66c..3abe277 100644 --- a/doc/src/images/addressbook-tutorial-part5-screenshot.png +++ b/doc/src/images/addressbook-tutorial-part5-screenshot.png diff --git a/doc/src/images/addressbook-tutorial-part6-load.png b/doc/src/images/addressbook-tutorial-part6-load.png Binary files differindex 95fdcaf..a027a1d 100644 --- a/doc/src/images/addressbook-tutorial-part6-load.png +++ b/doc/src/images/addressbook-tutorial-part6-load.png diff --git a/doc/src/images/addressbook-tutorial-part6-save.png b/doc/src/images/addressbook-tutorial-part6-save.png Binary files differindex c0deb70..757feeb 100644 --- a/doc/src/images/addressbook-tutorial-part6-save.png +++ b/doc/src/images/addressbook-tutorial-part6-save.png diff --git a/doc/src/images/addressbook-tutorial-part6-screenshot.png b/doc/src/images/addressbook-tutorial-part6-screenshot.png Binary files differindex f77bf03..7bb2f74 100644 --- a/doc/src/images/addressbook-tutorial-part6-screenshot.png +++ b/doc/src/images/addressbook-tutorial-part6-screenshot.png diff --git a/doc/src/images/addressbook-tutorial-part7-screenshot.png b/doc/src/images/addressbook-tutorial-part7-screenshot.png Binary files differindex d6b0a50..3e7b3ca 100644 --- a/doc/src/images/addressbook-tutorial-part7-screenshot.png +++ b/doc/src/images/addressbook-tutorial-part7-screenshot.png diff --git a/doc/src/images/addressbook-tutorial-screenshot.png b/doc/src/images/addressbook-tutorial-screenshot.png Binary files differindex d6727dc..3fba6e8 100644 --- a/doc/src/images/addressbook-tutorial-screenshot.png +++ b/doc/src/images/addressbook-tutorial-screenshot.png diff --git a/doc/src/images/addressbook-tutorial.png b/doc/src/images/addressbook-tutorial.png Binary files differindex 495edda..f80b42d 100644 --- a/doc/src/images/addressbook-tutorial.png +++ b/doc/src/images/addressbook-tutorial.png diff --git a/doc/src/images/qml-pathview-example.png b/doc/src/images/qml-pathview-example.png Binary files differnew file mode 100644 index 0000000..c874c5c --- /dev/null +++ b/doc/src/images/qml-pathview-example.png diff --git a/doc/src/platforms/mac-differences.qdoc b/doc/src/platforms/mac-differences.qdoc index 766c619..2501656 100644 --- a/doc/src/platforms/mac-differences.qdoc +++ b/doc/src/platforms/mac-differences.qdoc @@ -175,6 +175,9 @@ \l{http://developer.apple.com/documentation/CoreFoundation/Reference/CFBundleRef/index.html} {Apple's Developer Website}. + Note: QCoreApplication::applicationDirPath() can be used to determine + the path of the binary within the bundle. + \section2 Translating the Application Menu and Native Dialogs The items in the Application Menu will be merged correctly for diff --git a/doc/src/snippets/declarative/qmldocuments.qml b/doc/src/snippets/declarative/qmldocuments.qml new file mode 100644 index 0000000..c19a658 --- /dev/null +++ b/doc/src/snippets/declarative/qmldocuments.qml @@ -0,0 +1,66 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +//![0] +import Qt 4.7 + +Rectangle { + property alias text: textItem.text + + width: 100; height: 30 + border.width: 1 + radius: 5 + smooth: true + + gradient: Gradient { + GradientStop { position: 0.0; color: "darkGray" } + GradientStop { position: 0.5; color: "black" } + GradientStop { position: 1.0; color: "darkGray" } + } + + Text { + id: textItem + anchors.centerIn: parent + font.pointSize: 20 + color: "white" + } + +} +//![0] diff --git a/doc/src/snippets/declarative/state-when.qml b/doc/src/snippets/declarative/state-when.qml new file mode 100644 index 0000000..6d3bb75 --- /dev/null +++ b/doc/src/snippets/declarative/state-when.qml @@ -0,0 +1,55 @@ +/**************************************************************************** +** +** Copyright (C) 2010 Nokia Corporation and/or its subsidiary(-ies). +** All rights reserved. +** Contact: Nokia Corporation (qt-info@nokia.com) +** +** This file is part of the QtDeclarative module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL$ +** No Commercial Usage +** This file contains pre-release code and may not be distributed. +** You may use this file in accordance with the terms and conditions +** contained in the Technology Preview License Agreement accompanying +** this package. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 2.1 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPL included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 2.1 requirements +** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html. +** +** In addition, as a special exception, Nokia gives you certain additional +** rights. These rights are described in the Nokia Qt LGPL Exception +** version 1.1, included in the file LGPL_EXCEPTION.txt in this package. +** +** If you have questions regarding the use of this file, please contact +** Nokia at qt-info@nokia.com. +** +** +** +** +** +** +** +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import Qt 4.7 +//![0] +Rectangle { + id: myRect + width: 100; height: 100 + color: "red" + + MouseArea { id: mouseArea; anchors.fill: parent } + + states: State { + name: "hidden"; when: mouseArea.pressed + PropertyChanges { target: myRect; opacity: 0 } + } +} +//![0] diff --git a/doc/src/snippets/declarative/state.qml b/doc/src/snippets/declarative/state.qml index af6b103..ce2653b 100644 --- a/doc/src/snippets/declarative/state.qml +++ b/doc/src/snippets/declarative/state.qml @@ -44,13 +44,19 @@ import Qt 4.7 Rectangle { id: myRect width: 100; height: 100 - color: "red" + color: "black" - MouseArea { id: mouseArea; anchors.fill: parent } - - states: State { - name: "hidden"; when: mouseArea.pressed - PropertyChanges { target: myRect; opacity: 0 } + MouseArea { + id: mouseArea + anchors.fill: parent + onClicked: myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked'; } + + states: [ + State { + name: "clicked" + PropertyChanges { target: myRect; color: "red" } + } + ] } //![0] diff --git a/doc/src/snippets/declarative/states.qml b/doc/src/snippets/declarative/states.qml index c3b1796..127e3a7 100644 --- a/doc/src/snippets/declarative/states.qml +++ b/doc/src/snippets/declarative/states.qml @@ -40,42 +40,22 @@ ****************************************************************************/ //![0] import Qt 4.7 - -Item { - id: myItem + +Rectangle { + id: myRect width: 200; height: 200 + color: "red" - Rectangle { - id: myRect - width: 100; height: 100 - color: "red" + MouseArea { + anchors.fill: parent + onClicked: myRect.state = 'moved' } states: [ State { name: "moved" - PropertyChanges { - target: myRect - x: 50 - y: 50 - } + PropertyChanges { target: myRect; x: 50; y: 50 } } ] - - MouseArea { - anchors.fill: parent - onClicked: myItem.state = 'moved' - } -//![0] - -//![transitions] -transitions: [ - Transition { - NumberAnimation { properties: "x,y"; duration: 500 } - } -] -//![transitions] - -//![1] } -//![1] +//![0] |
