diff options
Diffstat (limited to 'doc/src/declarative')
44 files changed, 546 insertions, 1531 deletions
diff --git a/doc/src/declarative/advtutorial.qdoc b/doc/src/declarative/advtutorial.qdoc index 2d05850..47504ae 100644 --- a/doc/src/declarative/advtutorial.qdoc +++ b/doc/src/declarative/advtutorial.qdoc @@ -105,16 +105,20 @@ is the \l SystemPalette item. This provides access to the Qt system palette and is used to give the button a more native look-and-feel. Notice the anchors for the \c Item, \c Button and \c Text elements are set using -\l {codingconventions.html#Grouped-properties}{group notation} for readability. +\l {qdeclarativeintroduction.html#dot-properties}{group notation} for readability. \section2 Adding \c Button and \c Block components -The \c Button item in the code above is defined in a separate file named \c Button.qml. +The \c Button item in the code above is defined in a separate component file named \c Button.qml. To create a functional button, we use the QML elements \l Text and \l MouseArea inside a \l Rectangle. Here is the \c Button.qml code: \snippet declarative/tutorials/samegame/samegame1/Button.qml 0 +This essentially defines a rectangle that contains text and can be clicked. The \l MouseArea +has an \c onClicked() handler that is implemented to emit the \c clicked() signal of the +\c container when the area is clicked. + In Same Game, the screen is filled with small blocks when the game begins. Each block is just an item that contains an image. The block code is defined in a separate \c Block.qml file: @@ -174,7 +178,7 @@ The \c createBlock() function creates a block from the \c Block.qml file and moves the new block to its position on the game canvas. This involves several steps: \list -\o \l {createComponent(url file)}{createComponent()} is called to generate an element from \c Block.qml. +\o \l {Qt.createComponent(url file)}{Qt.createComponent()} is called to generate an element from \c Block.qml. If the component is ready, we can call \c createObject() to create an instance of the \c Block item. \o If \c createObject() returned null (i.e. if there was an error while loading the object), print the error information. @@ -226,14 +230,14 @@ until it is won or lost. To do this, we have added the following functions to \c samegame.js: \list -\o function \c{handleClick(x,y)} -\o function \c{floodFill(xIdx,yIdx,type)} -\o function \c{shuffleDown()} -\o function \c{victoryCheck()} -\o function \c{floodMoveCheck(xIdx, yIdx, type)} +\o \c{handleClick(x,y)} +\o \c{floodFill(xIdx,yIdx,type)} +\o \c{shuffleDown()} +\o \c{victoryCheck()} +\o \c{floodMoveCheck(xIdx, yIdx, type)} \endlist -As this is a tutorial about QML, not game design, we will only discuss \c handleClick() and \c victoryCheck() below since they interface directly with the QML elements. Note that although the game logic here is written in JavaScript, it could have been written in C++ and then exposed to JavaScript. +As this is a tutorial about QML, not game design, we will only discuss \c handleClick() and \c victoryCheck() below since they interface directly with the QML elements. Note that although the game logic here is written in JavaScript, it could have been written in C++ and then exposed to QML. \section3 Enabling mouse click interaction @@ -269,6 +273,8 @@ And this is how it is used in the main \c samegame.qml file: \snippet declarative/tutorials/samegame/samegame3/samegame.qml 2 +We give the dialog a \l {Item::z}{z} value of 100 to ensure it is displayed on top of our other components. The default \c z value for an item is 0. + \section3 A dash of color @@ -383,15 +389,41 @@ The theme change here is produced simply by replacing the block images. This can Another feature we might want to add to the game is a method of storing and retrieving high scores. -In \c samegame.qml we now pop up a dialog when the game is over and requests the player's name so it can be added to a High Scores table. The dialog is created using \c Dialog.qml: +To do this, we will show a dialog when the game is over to request the player's name and add it to a High Scores table. +This requires a few changes to \c Dialog.qml. In addition to a \c Text element, it now has a +\c TextInput child item for receiving keyboard text input: + +\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 0 +\dots 4 +\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 2 +\dots 4 +\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 3 + +We'll also add a \c showWithInput() function. The text input will only be visible if this function +is called instead of \c show(). When the dialog is closed, it emits a \c closed() signal, and +other elements can retrieve the text entered by the user through an \c inputText property: + +\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 0 +\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 1 +\dots 4 +\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 3 + +Now the dialog can be used in \c samegame.qml: \snippet declarative/tutorials/samegame/samegame4/samegame.qml 0 -When the dialog is closed, we call the new \c saveHighScore() function in \c samegame.js, which stores the high score locally in an SQL database and also send the score to an online database if possible. +When the dialog emits the \c closed signal, we call the new \c saveHighScore() function in \c samegame.js, which stores the high score locally in an SQL database and also send the score to an online database if possible. +The \c nameInputDialog is activated in the \c victoryCheck() function in \c samegame.js: + +\snippet declarative/tutorials/samegame/samegame4/content/samegame.js 3 +\dots 4 +\snippet declarative/tutorials/samegame/samegame4/content/samegame.js 4 \section3 Storing high scores offline +Now we need to implement the functionality to actually save the High Scores table. + Here is the \c saveHighScore() function in \c samegame.js: \snippet declarative/tutorials/samegame/samegame4/content/samegame.js 2 @@ -436,6 +468,6 @@ By following this tutorial you've seen how you can write a fully functional appl \endlist There is so much more to learn about QML that we haven't been able to cover in this tutorial. Check out all the -demos and examples and the \l {Declarative UI (QML)}{documentation} to find out all the things you can do with QML! +demos and examples and the \l {Declarative UI Using QML}{documentation} to find out all the things you can do with QML! */ diff --git a/doc/src/declarative/animation.qdoc b/doc/src/declarative/animation.qdoc index 88aca1b..6e98949 100644 --- a/doc/src/declarative/animation.qdoc +++ b/doc/src/declarative/animation.qdoc @@ -73,9 +73,9 @@ Rectangle { y: 0 SequentialAnimation on y { loops: Animation.Infinite - NumberAnimation { to: 200-img.height; easing.type: "OutBounce"; duration: 2000 } + NumberAnimation { to: 200-img.height; easing.type: Easing.OutBounce; duration: 2000 } PauseAnimation { duration: 1000 } - NumberAnimation { to: 0; easing.type: "OutQuad"; duration: 1000 } + NumberAnimation { to: 0; easing.type: Easing.OutQuad; duration: 1000 } } } } @@ -136,7 +136,7 @@ transitions: [ Transition { NumberAnimation { properties: "x,y" - easing.type: "OutBounce" + easing.type: Easing.OutBounce duration: 200 } } @@ -157,7 +157,7 @@ Transition { SequentialAnimation { NumberAnimation { duration: 1000 - easing.type: "OutBounce" + easing.type: Easing.OutBounce // animate myItem's x and y if they have changed in the state target: myItem properties: "x,y" @@ -199,7 +199,7 @@ Transition { ParallelAnimation { NumberAnimation { duration: 1000 - easing.type: "OutBounce" + easing.type: Easing.OutBounce targets: box1 properties: "x,y" } @@ -227,7 +227,7 @@ Rectangle { id: redRect color: "red" width: 100; height: 100 - Behavior on x { NumberAnimation { duration: 300; easing.type: "InOutQuad" } } + Behavior on x { NumberAnimation { duration: 300; easing.type: Easing.InOutQuad } } } \endqml diff --git a/doc/src/declarative/basictypes.qdoc b/doc/src/declarative/basictypes.qdoc index 6901947..8db1c35 100644 --- a/doc/src/declarative/basictypes.qdoc +++ b/doc/src/declarative/basictypes.qdoc @@ -43,9 +43,12 @@ \page qdeclarativebasictypes.html \title QML Basic Types - QML uses a set of property types, which are primitive within QML. - These basic types are referenced throughout the documentation of the - QML elements. Almost all of them are exactly what you would expect. + QML has a set of primitive types, as listed below, that are used throughout + the \l {QML Elements}. + + The simpler types in this list can also be used for defining a new + \c property in a component. See \l{Extending types from QML} for the + list of types that can be used for custom properties. \annotatedlist qmlbasictypes */ diff --git a/doc/src/declarative/codingconventions.qdoc b/doc/src/declarative/codingconventions.qdoc index 7ca206b..4fa7d0c 100644 --- a/doc/src/declarative/codingconventions.qdoc +++ b/doc/src/declarative/codingconventions.qdoc @@ -57,7 +57,7 @@ Through our documentation and examples, QML objects are always structured in the \o id \o property declarations \o signal declarations -\o javascript functions +\o JavaScript functions \o object properties \o child objects \o states @@ -72,7 +72,6 @@ For example, a hypothetical \e photo QML object would look like this: \snippet doc/src/snippets/declarative/codingconventions/photo.qml 0 -\target Grouped properties \section1 Grouped properties If using multiple properties from a group of properties, @@ -102,7 +101,7 @@ we will write this: \snippet doc/src/snippets/declarative/codingconventions/lists.qml 1 -\section1 Javascript code +\section1 JavaScript code If the script is a single expression, we recommend writing it inline: @@ -116,7 +115,7 @@ If the script is more than a couple of lines long or can be used by different ob \snippet doc/src/snippets/declarative/codingconventions/javascript.qml 2 -For long scripts, we will put the functions in their own javascript file and import it like this: +For long scripts, we will put the functions in their own JavaScript file and import it like this: \snippet doc/src/snippets/declarative/codingconventions/javascript-imports.qml 0 diff --git a/doc/src/declarative/declarativeui.qdoc b/doc/src/declarative/declarativeui.qdoc index d79c4d2..5283ba8 100644 --- a/doc/src/declarative/declarativeui.qdoc +++ b/doc/src/declarative/declarativeui.qdoc @@ -40,46 +40,42 @@ ****************************************************************************/ /*! -\title Declarative UI Using QML +\title Qt Quick \page declarativeui.html -\brief The Qt Declarative module provides a declarative framework for building -highly dynamic, custom user interfaces. +\brief Qt Quick provides a declarative framework for building highly +dynamic, custom user interfaces. -\section1 \l{QML Elements}{Fast QML Elements Reference Page} +Qt Quick provides a declarative framework for building highly dynamic, +custom user interfaces from a rich set of \l {QML Elements}{QML elements}. +Qt Quick helps programmers and designers collaborate to +build the fluid user interfaces that are becoming common in portable +consumer devices, such as mobile phones, media players, set-top boxes +and netbooks. -\raw HTML -<br> -\endraw +QML is an extension to \l +{http://www.ecma-international.org/publications/standards/Ecma-262.htm} +{JavaScript}, that provides a mechanism to declaratively build an +object tree of \l {QML Elements}{QML elements}. QML improves the +integration between JavaScript and Qt's existing QObject based type +system, adds support for automatic \l {Property Binding}{property +bindings} and provides \l {Network Transparency}{network transparency} +at the language level. -\section1 Preamble +The \l {QML Elements}{QML elements} are a sophisticated set of +graphical and behavioral building blocks. These different elements +are combined together in \l {QML Documents}{QML documents} to build +components ranging in complexity from simple buttons and sliders, to +complete internet-enabled applications like a \l +{http://www.flickr.com}{Flickr} photo browser. -Qt Declarative UI provides a declarative framework for building highly dynamic, custom -user interfaces. Declarative UI helps programmers and designers collaborate to build -the animation rich, fluid user interfaces that are becoming common in portable -consumer devices, such as mobile phones, media players, set-top boxes and netbooks. +Qt Quick builds on \l {QML for Qt programmers}{Qt's existing +strengths}. QML can be be used to incrementally extend an existing +application or to build completely new applications. QML is fully \l +{Extending QML in C++}{extensible from C++}. -The Qt Declarative module provides an engine for interpreting the declarative -QML language, and a rich set of \bold { \l {QML Elements}{QML elements} } -that can be used from QML. +\section1 Getting Started -QML is an extension to \l {http://www.ecma-international.org/publications/standards/Ecma-262.htm} -{JavaScript}, that provides a mechanism to declaratively build an object tree -of QML elements. QML improves the integration between JavaScript and Qt's -existing QObject based type system, adds support for automatic -\l {Property Binding}{property bindings} and provides \l {Network Transparency}{network transparency} at the language -level. - -The QML elements are a sophisticated set of graphical and behavioral building -blocks. These different elements are combined together in \l {QML Documents}{QML documents} to build components -ranging in complexity from simple buttons and sliders, to complete -internet-enabled applications like a \l {http://www.flickr.com}{Flickr} photo browser. - -Qt Declarative builds on \l {QML for Qt programmers}{Qt's existing strengths}. -QML can be be used to incrementally extend an existing application or to build -completely new applications. QML is fully \l {Extending QML in C++}{extensible from C++}. - -\section1 Getting Started: \list \o \l {Introduction to the QML language} \o \l {QML Tutorial}{Tutorial: 'Hello World'} @@ -88,7 +84,7 @@ completely new applications. QML is fully \l {Extending QML in C++}{extensible \o \l {QML for Qt programmers} \endlist -\section1 Core QML Features: +\section1 Core QML Features \list \o \l {QML Documents} \o \l {Property Binding} @@ -106,7 +102,7 @@ completely new applications. QML is fully \l {Extending QML in C++}{extensible \o \l {qmlruntime.html}{The Qt Declarative Runtime} \endlist -\section1 Using QML with C++: +\section1 Using QML with C++ \list \o \l {Tutorial: Writing QML extensions with C++} \o \l {Extending QML in C++} @@ -114,7 +110,7 @@ completely new applications. QML is fully \l {Extending QML in C++}{extensible \o \l {Integrating QML with existing Qt UI code} \endlist -\section1 Reference: +\section1 Reference \list \o \l {QML Elements} \o \l {QML Global Object} diff --git a/doc/src/declarative/dynamicobjects.qdoc b/doc/src/declarative/dynamicobjects.qdoc index 4cb5198..2688ee5 100644 --- a/doc/src/declarative/dynamicobjects.qdoc +++ b/doc/src/declarative/dynamicobjects.qdoc @@ -43,84 +43,68 @@ \page qdeclarativedynamicobjects.html \title Dynamic Object Management -QML has some support for dynamically loading and managing QML objects from -within Javascript blocks. It is preferable to use the existing QML elements for -dynamic object management wherever possible; these are \l{Loader}, -\l{Repeater}, \l{ListView}, \l{GridView} and \l{PathView}. It is also possible -to dynamically create and manage objects from C++, and this is preferable for -hybrid QML/C++ applications - see \l{Using QML in C++ Applications}. -Dynamically creating and managing objects from -within Javascript blocks is intended for when none of the existing QML elements -fit the needs of your application, and you do not desire for your application -to involve C++ code. +QML provides a number of ways to dynamically create and manage QML objects. +The \l{Loader}, \l{Repeater}, \l{ListView}, \l{GridView} and \l{PathView} elements +all support dynamic object management. Objects can also be created and managed +from C++, and this is the preferred method for hybrid QML/C++ applications +(see \l{Using QML in C++ Applications}). + +QML also supports the dynamic creation of objects from within JavaScript +code. This is useful if the existing QML elements do not fit the needs of your +application, and there are no C++ components involved. + \section1 Creating Objects Dynamically -There are two ways of creating objects dynamically. You can either create -a component which instantiates items, or create an item from a string of QML. -Creating a component is better for the situation where you have a predefined -item which you want to manage dynamic instances of, and creating an item from -a string of QML is intended for when the QML itself is generated at runtime. +There are two ways to create objects dynamically from JavaScript. You can either call +\l {Qt.createComponent(url file)}{Qt.createComponent()} to create +a component which instantiates items, or use \l{Qt.createQmlObject(string qml, object parent, string filepath)}{Qt.createQmlObject()} +to create an item from a string of QML. +Creating a component is better if you have a predefined +item, and you want to create dynamic instances of that item; creating an item from +a string of QML is useful when the item QML itself is generated at runtime. If you have a component specified in a QML file, you can dynamically load it with -the \l {createComponent(url file)}{createComponent()} function on the \l{QML Global Object}. +the \l {Qt.createComponent(url file)}{Qt.createComponent()} function on the \l{QML Global Object}. This function takes the URL of the QML file as its only argument and returns a component object which can be used to create and load that QML file. -Once you have a component you can use its \c createObject() method to create an instance of -the component. Example QML script is below. Remember that QML files that might be loaded - over the network cannot be expected to be ready immediately. - \code - var component; - var sprite; - function finishCreation() { - if(component.isReady()) { - sprite = component.createObject(); - if(sprite == 0) { - // Error Handling - } else { - sprite.parent = page; - sprite.x = 200; - //... - } - } else if(component.isError()) { - // Error Handling - } - } - - component = createComponent("Sprite.qml"); - if(component.isReady()) { - finishCreation(); - } else { - component.statusChanged.connect(finishCreation); - } - \endcode - - If you are certain the files will be local, you could simplify to - - \code - component = createComponent("Sprite.qml"); - sprite = component.createObject(); - if(sprite == 0) { - // Error Handling - console.log(component.errorsString()); - } else { - sprite.parent = page; - sprite.x = 200; - //... - } - \endcode - -After creating the item, remember to set its parent to an item within the scene. -Otherwise your dynamically created item will not appear in the scene. When using files with relative paths, the path should -be relative to the file where \c createComponent() is executed. - -If the QML does not exist until runtime, you can create a QML item from -a string of QML using the \l{createQmlObject(string qml, object parent, string filepath)}{createQmlObject()} function, as in the following example: - - \code - newObject = createQmlObject('import Qt 4.7; Rectangle { color: "red"; width: 20; height: 20 }', - targetItem, "dynamicSnippet1"); - \endcode +Once you have a component you can use its \l {Component::createObject()}{createObject()} method to create an instance of +the component. This function takes exactly one argument, which is the parent for the new item. Since graphical items will +not appear on the scene without a parent, it is recommended that you set the parent this way. However, if you wish to set +the parent later you can safely pass null to this function. + +Here is an example. Here is a \c Sprite.qml, which defines a simple QML component: + +\quotefile doc/src/snippets/declarative/Sprite.qml + +Our main application file, \c main.qml, imports a \c componentCreation.js JavaScript file +that will create \c Sprite objects: + +\quotefile doc/src/snippets/declarative/createComponent.qml + +Here is \c componentCreation.js. Remember that QML files that might be loaded +over the network cannot be expected to be ready immediately: + +\snippet doc/src/snippets/declarative/componentCreation.js 0 +\codeline +\snippet doc/src/snippets/declarative/componentCreation.js 1 + +If you are certain the files will be local, you could simplify to: + +\snippet doc/src/snippets/declarative/componentCreation.js 2 + +Notice that once a \c Sprite object is created, its parent is set to \c appWindow (defined +in \c main.qml). After creating an item, you must set its parent to an item within the scene. +Otherwise your dynamically created item will not appear in the scene. + +When using files with relative paths, the path should +be relative to the file where \l {Qt.createComponent(url file)}{Qt.createComponent()} is executed. + +If the QML component does not exist until runtime, you can create a QML item from +a string of QML using the \l{Qt.createQmlObject(string qml, object parent, string filepath)}{Qt.createQmlObject()} function, as in the following example: + +\snippet doc/src/snippets/declarative/createQmlObject.qml 0 + The first argument is the string of QML to create. Just like in a new file, you will need to import any types you wish to use. For importing files with relative paths, the path should be relative to the file where the item in the second argument is defined. Remember to set the parent after @@ -130,47 +114,44 @@ item, which is used for error reporting. \section1 Maintaining Dynamically Created Objects -Dynamically created objects may be used the same as other objects, however they -will not have an id in QML. +When managing dynamically created items, you must ensure the creation context +outlives the created item. Otherwise, if the creation context is destroyed first, +the bindings in the dynamic item will no longer work. + +The actual creation context depends on how an item is created: + +\list +\o If \l {Qt.createComponent(url file)}{Qt.createComponent()} is used, the creation context + is the QDeclarativeContext in which this method is called +\o If \l{Qt.createQmlObject(string qml, object parent, string filepath)}{Qt.createQmlObject()} + if called, it is the context of the item used as the second argument to this method +\o If a \c {Component{}} item is defined and \l {Component::createObject()}{createObject()} + is called on that item, it is the context in which the \c Component is defined +\endlist + +Also, note that while dynamically created objects may be used the same as other objects, they +do not have an id in QML. -A restriction which you need to manage with dynamically created items, -is that the creation context must outlive the -created item. The creation context is the QDeclarativeContext in which \c createComponent() -was called, or the context in which the Component element, or the item used as the -second argument to \c createQmlObject(), was specified. If the creation -context is destroyed before the dynamic item is, then bindings in the dynamic item will -fail to work. \section1 Deleting Objects Dynamically -You should generally avoid dynamically deleting objects that you did not -dynamically create. In many UIs, it is sufficient to set the opacity to 0 or -to move the item off of the edge of the screen. If you have lots of dynamically -created items however, deleting them when they are no longer used will provide -a worthwhile performance benefit. Note that you should never manually delete -items which were dynamically created by QML Elements such as \l{Loader}. - -To manually delete a QML item, call its destroy method. This method has one -argument, which is an approximate delay in ms and which defaults to zero. This -allows you to wait until the completion of an animation or transition. An example: - -\code - Component { - id: fadesOut - Rectangle{ - id: rect - width: 40; height: 40; - NumberAnimation on opacity { from:1; to:0; duration: 1000 } - Component.onCompleted: rect.destroy(1000); - } - } - function createFadesOut(parentItem) - { - var object = fadesOut.createObject(); - object.parent = parentItem; - } -\endcode -In the above example, the dynamically created rectangle calls destroy as soon as it's created, - but delays long enough for its fade out animation to play. +In many user interfaces, it is sufficient to set an item's opacity to 0 or +to move the item off the screen instead of deleting the item. If you have +lots of dynamically created items, however, you may receive a worthwhile +performance benefit if unused items are deleted. + +Note that you should never manually delete items that were dynamically created +by QML elements (such as \l Loader). Also, you should generally avoid deleting +items that you did not dynamically create yourself. + +Items can be deleted using the \c destroy() method. This method has an optional +argument (which defaults to 0) that specifies the approximate delay in milliseconds +before the object is to be destroyed. This allows you to wait until the completion of +an animation or transition. An example: + +\snippet doc/src/snippets/declarative/dynamicObjects.qml 0 + +Here, \c Rectangle objects are destroyed one second after they are created, which is long +enough for the \c NumberAnimation to be played before the object is destroyed. */ diff --git a/doc/src/declarative/elements.qdoc b/doc/src/declarative/elements.qdoc index 79fe909..574a187 100644 --- a/doc/src/declarative/elements.qdoc +++ b/doc/src/declarative/elements.qdoc @@ -120,11 +120,22 @@ The following table lists the QML elements provided by the \l {QtDeclarative}{Qt \list \o \l Item \o \l Rectangle + \list + \o \l Gradient + \list + \o \l GradientStop + \endlist + \endlist \o \l Image \o \l BorderImage \o \l AnimatedImage \o \l Text \o \l TextInput + \list + \o \l IntValidator + \o \l DoubleValidator + \o \l RegExpValidator + \endlist \o \l TextEdit \endlist @@ -142,6 +153,7 @@ The following table lists the QML elements provided by the \l {QtDeclarative}{Qt \o \l Loader \o \l Repeater \o \l SystemPalette +\o \l FontLoader \o \l LayoutItem \endlist diff --git a/doc/src/declarative/example-slideswitch.qdoc b/doc/src/declarative/example-slideswitch.qdoc index c14208e..27b7f38 100644 --- a/doc/src/declarative/example-slideswitch.qdoc +++ b/doc/src/declarative/example-slideswitch.qdoc @@ -45,7 +45,7 @@ This example shows how to create a reusable switch component in QML. -The code for this example can be found in the \c $QTDIR/examples/declarative/slideswitch directory. +The code for this example can be found in the \c $QTDIR/examples/declarative/ui-components/slideswitch directory. \section1 Overview @@ -61,12 +61,12 @@ The elements that composed the switch are: \endlist \section1 Switch.qml -\snippet examples/declarative/slideswitch/content/Switch.qml 0 +\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 0 \section1 Walkthrough \section2 Interface -\snippet examples/declarative/slideswitch/content/Switch.qml 1 +\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 1 This property is the interface of the switch. By default, the switch is off and this property is \c false. It can be used to activate/disactivate the switch or to query its current state. @@ -81,14 +81,14 @@ Text { text: "The switch is on"; visible: mySwitch.on == true } the text will only be visible when the switch is on. \section2 Images and user interaction -\snippet examples/declarative/slideswitch/content/Switch.qml 4 +\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 4 First, we create the background image of the switch. In order for the switch to toggle when the user clicks on the background, we add a \l{MouseArea} as a child item of the image. A \c MouseArea has a \c onClicked property that is triggered when the item is clicked. For the moment we will just call a \c toggle() function. We will see what this function does in a moment. -\snippet examples/declarative/slideswitch/content/Switch.qml 5 +\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 5 Then, we place the image of the knob on top of the background. The interaction here is a little more complex. We want the knob to move with the finger when it is clicked. That is what the \c drag @@ -96,7 +96,7 @@ property of the \c MouseArea is for. We also want to toggle the switch if the kn in the \c dorelease() function that is called in the \c onReleased property. \section2 States -\snippet examples/declarative/slideswitch/content/Switch.qml 6 +\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 6 We define the two states of the switch: \list @@ -110,13 +110,13 @@ For more information on states see \l{qmlstates}{QML States}. We add two JavaScript functions to our switch: -\snippet examples/declarative/slideswitch/content/Switch.qml 2 +\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 2 This first function is called when the background image or the knob are clicked. We simply want the switch to toggle between the two states (\e on and \e off). -\snippet examples/declarative/slideswitch/content/Switch.qml 3 +\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 3 This second function is called when the knob is released and we want to make sure that the knob does not end up between states (neither \e on nor \e off). If it is the case call the \c toggle() function otherwise we do nothing. @@ -124,7 +124,7 @@ This second function is called when the knob is released and we want to make sur For more information on scripts see \l{Integrating JavaScript}. \section2 Transition -\snippet examples/declarative/slideswitch/content/Switch.qml 7 +\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 7 At this point, when the switch toggles between the two states the knob will instantly change its \c x position between 1 and 78. In order for the the knob to move smoothly we add a transition that will animate the \c x property with an easing curve for a duration of 200ms. @@ -133,5 +133,5 @@ For more information on transitions see \l{state-transitions}{QML Transitions}. \section1 Usage The switch can be used in a QML file, like this: -\snippet examples/declarative/slideswitch/slideswitch.qml 0 +\snippet examples/declarative/ui-components/slideswitch/slideswitch.qml 0 */ diff --git a/doc/src/declarative/examples.qdoc b/doc/src/declarative/examples.qdoc index e01459f..a355f9f 100644 --- a/doc/src/declarative/examples.qdoc +++ b/doc/src/declarative/examples.qdoc @@ -40,8 +40,9 @@ ****************************************************************************/ /*! -\page qdeclarativeexamples.html -\title QML Examples and Demos + \page qdeclarativeexamples.html + \title QML Examples and Demos + \ingroup all-examples \previouspage Graphics View Examples \contentspage Qt Examples @@ -70,59 +71,107 @@ For example, from your build directory, run: \section1 Examples +\section2 Animation \list -\o \l{declarative/animations}{Animations} -\o \l{declarative/aspectratio}{Aspect Ratio} -\o \l{declarative/behaviors}{Behaviors} -\o \l{declarative/border-image}{Border Image} -\o \l{declarative/clocks}{Clocks} -\o \l{declarative/connections}{Connections} -\o \l{declarative/dial}{Dial} -\o \l{declarative/dynamic}{Dynamic} -\o \l{declarative/extending}{Extending} -\o \l{declarative/fillmode}{Fillmode} -\o \l{declarative/flipable}{Flipable} -\o \l{declarative/focus}{Focus} -\o \l{declarative/fonts}{Fonts} -\o \l{declarative/gridview}{GridView} -\o \l{declarative/imageprovider}{Image Provider} -\o \l{declarative/images}{Images} -\o \l{declarative/layouts}{Layouts} -\o \l{declarative/listmodel-threaded}{ListModel Threaded} -\o \l{declarative/listview}{ListView} -\o \l{declarative/mousearea}{Mouse Area} -\o \l{declarative/objectlistmodel}{Object ListModel} -\o \l{declarative/package}{Package} -\o \l{declarative/parallax}{Parallax} -\o \l{declarative/plugins}{Plugins} -\o \l{declarative/progressbar}{Progress Bars} -\o \l{declarative/proxywidgets}{Proxy Widgets} -\o \l{declarative/scrollbar}{Scrollbar} -\o \l{declarative/searchbox}{Search Box} -\o \l{declarative/slideswitch}{Slide Switch} -\o \l{declarative/sql}{SQL} -\o \l{declarative/states}{States} -\o \l{declarative/stringlistmodel}{String ListModel} -\o \l{declarative/tabwidget}{Tab Widget} -\o \l{declarative/tic-tac-toe}{Tic-Tac-Toe} -\o \l{declarative/tvtennis}{TV Tennis} -\o \l{declarative/velocity}{Velocity} -\o \l{declarative/webview}{WebView} -\o \l{declarative/workerscript}{WorkerScript} -\o \l{declarative/xmldata}{XML Data} -\o \l{declarative/xmlhttprequest}{XMLHttpRequest} +\o \l{declarative/animation/basics}{Basics} +\o \l{declarative/animation/behaviors}{Behaviors} +\o \l{declarative/animation/easing}{Easing types} +\o \l{declarative/animation/states}{States} +\endlist + +\section2 Image Elements +\list +\o \l{declarative/imageelements/borderimage}{BorderImage} +\endlist + +\section2 \l{declarative/positioners}{Positioners} +\section2 Key Interaction +\list +\o \l{declarative/keyinteraction/focus}{Focus} \endlist +\section2 Touch Interaction +\list +\o \l{declarative/touchinteraction/gestures}{Gestures} +\o \l{declarative/touchinteraction/mousearea}{MouseArea} +\endlist + +\section2 UI Components +\list +\o \l{declarative/ui-components/flipable}{Flipable} +\o \l{declarative/ui-components/progressbar}{Progress bar} +\o \l{declarative/ui-components/scrollbar}{Scroll bar} +\o \l{declarative/ui-components/searchbox}{Search box} +\o \l{declarative/ui-components/slideswitch}{Slide switch} +\o \l{declarative/ui-components/spinner}{Spinner} +\o \l{declarative/ui-components/tabwidget}{Tab widget} +\endlist + +\section2 Models and Views +\list +\o \l{declarative/modelviews/gridview}{GridView} +\o \l{declarative/modelviews/listview}{ListView} +\o \l{declarative/modelviews/objectlistmodel}{Object list model} +\o \l{declarative/modelviews/package}{Package} +\o \l{declarative/modelviews/parallax}{Parallax} +\o \l{declarative/modelviews/stringlistmodel}{String list model} +\o \l{declarative/modelviews/webview}{WebView} +\endlist + +\section2 XML +\list +\o \l{declarative/xml/xmlhttprequest}{XmlHttpRequest} +\endlist + +\section2 \l{declarative/i18n}{Internationalization (i18n)} + +\section2 Threading +\list +\o \l{declarative/threading/threadedlistmodel}{Threaded ListModel} +\o \l{declarative/threading/workerscript}{WorkerScript} +\endlist + +\section2 \l{declarative/sqllocalstorage}{SQL Local Storage} + +\section2 C++ Extensions +\list +\o \l{declarative-cppextensions-reference.html}{Reference examples} (discussed in \l {Extending QML in C++}) +\o \l{declarative/cppextensions/plugins}{Plugins} +\o \l{declarative-cppextensions-qgraphicslayouts.html}{QGraphicsLayouts} +\o \l{declarative/cppextensions/qwidgets}{QWidgets} +\o \l{declarative/cppextensions/imageprovider}{Image provider} +\o \l{declarative/cppextensions/networkaccessmanagerfactory}{Network access manager factory} +\endlist + +\section2 Toys +\list +\o \l{declarative/toys/clocks}{Clocks} +\o \l{declarative/toys/corkboards}{Corkboards} +\o \l{declarative/toys/dial}{Dial} +\o \l{declarative/toys/dynamicscene}{Dynamic Scene} +\o \l{declarative/toys/tic-tac-toe}{Tic Tac Toe} +\o \l{declarative/toys/tvtennis}{TV Tennis} +\endlist + + \section1 Demos \list \o \l{demos/declarative/calculator}{Calculator} +\o \l{demos/declarative/flickr}{Flickr Mobile} \o \l{demos/declarative/minehunt}{Minehunt} \o \l{demos/declarative/photoviewer}{Photo Viewer} -\o \l{demos/declarative/flickr}{Flickr Mobile} +\o \l{demos/declarative/rssnews}{RSS News Reader} \o \l{demos/declarative/samegame}{Same Game} \o \l{demos/declarative/snake}{Snake} \endlist +\section1 Labs + +\list +\o \l{src/imports/folderlistmodel}{Folder List Model} - a C++ model plugin +\endlist + */ + diff --git a/doc/src/declarative/extending-examples.qdoc b/doc/src/declarative/extending-examples.qdoc deleted file mode 100644 index 307162e..0000000 --- a/doc/src/declarative/extending-examples.qdoc +++ /dev/null @@ -1,304 +0,0 @@ -/**************************************************************************** -** -** 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 documentation 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$ -** -****************************************************************************/ - -/*! -\example declarative/extending/adding -\title Extending QML - Adding Types Example - -The Adding Types Example shows how to add a new element type, \c Person, to QML. -The \c Person type can be used from QML like this: - -\snippet examples/declarative/extending/adding/example.qml 0 - -\section1 Declare the Person class - -All QML elements map to C++ types. Here we declare a basic C++ Person class -with the two properties we want accessible on the QML type - name and shoeSize. -Although in this example we use the same name for the C++ class as the QML -element, the C++ class can be named differently, or appear in a namespace. - -\snippet examples/declarative/extending/adding/person.h 0 - -\section1 Define the Person class - -\snippet examples/declarative/extending/adding/person.cpp 0 - -The Person class implementation is quite basic. The property accessors simply -return members of the object instance. - -The implementation must also be registered using the QML_REGISTER_TYPE() macro. This macro -registers the Person class with QML as a type in the People library version 1.0, -and defines the mapping between the C++ and QML class names. - -\section1 Running the example - -The main.cpp file in the example includes a simple shell application that -loads and runs the QML snippet shown at the beginning of this page. -*/ - -/*! -\example declarative/extending/properties -\title Extending QML - Object and List Property Types Example - -This example builds on: -\list -\o \l {Extending QML - Adding Types Example} -\endlist - -The Object and List Property Types example shows how to add object and list -properties in QML. This example adds a BirthdayParty element that specifies -a birthday party, consisting of a celebrant and a list of guests. People are -specified using the People QML type built in the previous example. - -\snippet examples/declarative/extending/properties/example.qml 0 - -\section1 Declare the BirthdayParty - -The BirthdayParty class is declared like this: - -\snippet examples/declarative/extending/properties/birthdayparty.h 0 -\snippet examples/declarative/extending/properties/birthdayparty.h 1 -\snippet examples/declarative/extending/properties/birthdayparty.h 2 -\snippet examples/declarative/extending/properties/birthdayparty.h 3 - -The class contains a member to store the celebrant object, and also a -QList<Person *> member. - -In QML, the type of a list properties - and the guests property is a list of -people - are all of type QDeclarativeListProperty<T>. QDeclarativeListProperty is simple value -type that contains a set of function pointers. QML calls these function -pointers whenever it needs to read from, write to or otherwise interact with -the list. In addition to concrete lists like the people list used in this -example, the use of QDeclarativeListProperty allows for "virtual lists" and other advanced -scenarios. - -\section2 Define the BirthdayParty - -The implementation of BirthdayParty property accessors is straight forward. - -\snippet examples/declarative/extending/properties/birthdayparty.cpp 0 - -\section1 Running the example - -The main.cpp file in the example includes a simple shell application that -loads and runs the QML snippet shown at the beginning of this page. -*/ - -/*! -\example declarative/extending/coercion -\title Extending QML - Inheritance and Coercion Example - -This example builds on: -\list -\o \l {Extending QML - Object and List Property Types Example} -\o \l {Extending QML - Adding Types Example} -\endlist - -The Inheritance and Coercion Example shows how to use base classes to assign -elements of more than one type to a property. It specializes the Person element -developed in the previous examples into two elements - a \c Boy and a \c Girl. - -\snippet examples/declarative/extending/coercion/example.qml 0 - -\section1 Declare Boy and Girl - -\snippet examples/declarative/extending/coercion/person.h 0 - -The Person class remains unaltered in this example and the Boy and Girl C++ -classes are trivial extensions of it. As an example, the inheritance used here -is a little contrived, but in real applications it is likely that the two -extensions would add additional properties or modify the Person classes -behavior. - -\section2 Define People as a base class - -The implementation of the People class itself has not changed since the the -previous example. However, as we have repurposed the People class as a common -base for Boy and Girl, we want to prevent it from being instantiated from QML -directly - an explicit Boy or Girl should be instantiated instead. - -\snippet examples/declarative/extending/coercion/main.cpp 0 - -While we want to disallow instantiating Person from within QML, it still needs -to be registered with the QML engine, so that it can be used as a property type -and other types can be coerced to it. To register a type, without defining a -named mapping into QML, we call the QML_REGISTER_NOCREATE_TYPE() macro instead of -the QML_REGISTER_TYPE() macro used previously. - -\section2 Define Boy and Girl - -The implementation of Boy and Girl are trivial. - -\snippet examples/declarative/extending/coercion/person.cpp 1 - -All that is necessary is to implement the constructor, and to register the types -and their QML name with the QML engine. - -\section1 Running the example - -The BirthdayParty element has not changed since the previous example. The -celebrant and guests property still use the People type. - -\snippet examples/declarative/extending/coercion/birthdayparty.h 0 - -However, as all three types, Person, Boy and Girl, have been registered with the -QML system, on assignment QML automatically (and type-safely) converts the Boy -and Girl objects into a Person. - -The main.cpp file in the example includes a simple shell application that -loads and runs the QML snippet shown at the beginning of this page. -*/ - -/*! -\example declarative/extending/default -\title Extending QML - Default Property Example - -This example builds on: -\list -\o \l {Extending QML - Inheritance and Coercion Example} -\o \l {Extending QML - Object and List Property Types Example} -\o \l {Extending QML - Adding Types Example} -\endlist - -The Default Property Example is a minor modification of the -\l {Extending QML - Inheritance and Coercion Example} that simplifies the -specification of a BirthdayParty through the use of a default property. - -\snippet examples/declarative/extending/default/example.qml 0 - -\section1 Declaring the BirthdayParty class - -The only difference between this example and the last, is the addition of the -\c DefaultProperty class info annotation. - -\snippet examples/declarative/extending/default/birthdayparty.h 0 - -The default property specifies the property to assign to whenever an explicit -property is not specified, in the case of the BirthdayParty element the guest -property. It is purely a syntactic simplification, the behavior is identical -to specifying the property by name, but it can add a more natural feel in many -situations. The default property must be either an object or list property. - -\section1 Running the example - -The main.cpp file in the example includes a simple shell application that -loads and runs the QML snippet shown at the beginning of this page. -*/ - -/*! -\example declarative/extending/grouped -\title Extending QML - Grouped Properties Example - -This example builds on: -\list -\o \l {Extending QML - Default Property Example} -\o \l {Extending QML - Inheritance and Coercion Example} -\o \l {Extending QML - Object and List Property Types Example} -\o \l {Extending QML - Adding Types Example} -\endlist - -*/ - -/*! -\example declarative/extending/grouped -\title Extending QML - Attached Properties Example - -This example builds on: -\list -\o \l {Extending QML - Grouped Properties Example} -\o \l {Extending QML - Default Property Example} -\o \l {Extending QML - Inheritance and Coercion Example} -\o \l {Extending QML - Object and List Property Types Example} -\o \l {Extending QML - Adding Types Example} -\endlist - -*/ - -/*! -\example declarative/extending/signal -\title Extending QML - Signal Support Example - -This example builds on: -\list -\o \l {Extending QML - Attached Properties Example} -\o \l {Extending QML - Grouped Properties Example} -\o \l {Extending QML - Default Property Example} -\o \l {Extending QML - Inheritance and Coercion Example} -\o \l {Extending QML - Object and List Property Types Example} -\o \l {Extending QML - Adding Types Example} -\endlist - -*/ - -/*! -\example declarative/extending/valuesource -\title Extending QML - Property Value Source Example - -This example builds on: -\list -\o \l {Extending QML - Signal Support Example} -\o \l {Extending QML - Attached Properties Example} -\o \l {Extending QML - Grouped Properties Example} -\o \l {Extending QML - Default Property Example} -\o \l {Extending QML - Inheritance and Coercion Example} -\o \l {Extending QML - Object and List Property Types Example} -\o \l {Extending QML - Adding Types Example} -\endlist - -*/ - -/*! -\example declarative/extending/binding -\title Extending QML - Binding Example - -This example builds on: -\list -\o \l {Extending QML - Property Value Source Example} -\o \l {Extending QML - Signal Support Example} -\o \l {Extending QML - Attached Properties Example} -\o \l {Extending QML - Grouped Properties Example} -\o \l {Extending QML - Default Property Example} -\o \l {Extending QML - Inheritance and Coercion Example} -\o \l {Extending QML - Object and List Property Types Example} -\o \l {Extending QML - Adding Types Example} -\endlist - -*/ diff --git a/doc/src/declarative/extending.qdoc b/doc/src/declarative/extending.qdoc index 1c159e4..574b0b2 100644 --- a/doc/src/declarative/extending.qdoc +++ b/doc/src/declarative/extending.qdoc @@ -56,13 +56,16 @@ QML for their own independent use. \section1 Adding Types \target adding-types -\snippet examples/declarative/extending/adding/example.qml 0 +\snippet examples/declarative/cppextensions/referenceexamples/adding/example.qml 0 The QML snippet shown above instantiates one \c Person instance and sets the \c name and \c shoeSize properties on it. Everything in QML ultimately comes down to either instantiating an object instance, or assigning a property a value. + QML relies heavily on Qt's meta object system and can only instantiate classes -that derive from QObject. +that derive from QObject. For visual element types, this will usually mean a subclass +of QDeclarativeItem; for models used with the view elements, a subclass of QAbstractItemModel; +and for abitrary objects with properties, a direct subclass of QObject. The QML engine has no intrinsic knowledge of any class types. Instead the programmer must register the C++ types with their corresponding QML names. @@ -121,7 +124,7 @@ the \c Person type. \section1 Object and List Property Types -\snippet examples/declarative/extending/properties/example.qml 0 +\snippet examples/declarative/cppextensions/referenceexamples/properties/example.qml 0 The QML snippet shown above assigns a \c Person object to the \c BirthdayParty's \c host property, and assigns three \c Person objects to the guests property. @@ -136,7 +139,7 @@ Properties that are pointers to objects or Qt interfaces are declared with the Q_PROPERTY() macro, just like other properties. The \c host property declaration looks like this: -\snippet examples/declarative/extending/properties/birthdayparty.h 1 +\snippet examples/declarative/cppextensions/referenceexamples/properties/birthdayparty.h 1 As long as the property type, in this case \c Person, is registered with QML the property can be assigned. @@ -165,14 +168,14 @@ As with object properties, the type \a T must be registered with QML. The \c guest property declaration looks like this: -\snippet examples/declarative/extending/properties/birthdayparty.h 2 +\snippet examples/declarative/cppextensions/referenceexamples/properties/birthdayparty.h 2 \l {Extending QML - Object and List Property Types Example} shows the complete code used to create the \c BirthdayParty type. \section1 Inheritance and Coercion -\snippet examples/declarative/extending/coercion/example.qml 0 +\snippet examples/declarative/cppextensions/referenceexamples/coercion/example.qml 0 The QML snippet shown above assigns a \c Boy object to the \c BirthdayParty's \c host property, and assigns three other objects to the \c guests property. @@ -214,7 +217,7 @@ code used to create the \c Boy and \c Girl types. \section1 Default Property -\snippet examples/declarative/extending/default/example.qml 0 +\snippet examples/declarative/cppextensions/referenceexamples/default/example.qml 0 The QML snippet shown above assigns a collection of objects to the \c BirthdayParty's default property. @@ -246,7 +249,7 @@ specify a default property. \section1 Grouped Properties -\snippet examples/declarative/extending/grouped/example.qml 1 +\snippet examples/declarative/cppextensions/referenceexamples/grouped/example.qml 1 The QML snippet shown above assigns a number of properties to the \c Boy object, including four properties using the grouped property syntax. @@ -259,7 +262,7 @@ different types through implementation reuse. A grouped property block is implemented as a read-only object property. The \c shoe property shown is declared like this: -\snippet examples/declarative/extending/grouped/person.h 1 +\snippet examples/declarative/cppextensions/referenceexamples/grouped/person.h 1 The \c ShoeDescription type declares the properties available to the grouped property block - in this case the \c size, \c color, \c brand and \c price properties. @@ -271,7 +274,7 @@ implement the \c shoe property grouping. \section1 Attached Properties -\snippet examples/declarative/extending/attached/example.qml 1 +\snippet examples/declarative/cppextensions/referenceexamples/attached/example.qml 1 The QML snippet shown above assigns a date to the \c rsvp property using the attached property syntax. @@ -393,8 +396,8 @@ this situation, but it must not crash. \section1 Signal Support -\snippet examples/declarative/extending/signal/example.qml 0 -\snippet examples/declarative/extending/signal/example.qml 1 +\snippet examples/declarative/cppextensions/referenceexamples/signal/example.qml 0 +\snippet examples/declarative/cppextensions/referenceexamples/signal/example.qml 1 The QML snippet shown above associates the evaluation of a JavaScript expression with the emission of a Qt signal. @@ -406,7 +409,7 @@ signal name: "on" is prepended, and the first letter of the signal name upper cased. For example, the signal used in the example above has the following C++ signature: -\snippet examples/declarative/extending/signal/birthdayparty.h 0 +\snippet examples/declarative/cppextensions/referenceexamples/signal/birthdayparty.h 0 In classes with multiple signals with the same name, only the final signal is accessible as a signal property. Note that signals with the same name @@ -424,8 +427,8 @@ implement the onPartyStarted signal property. \section1 Property Value Sources -\snippet examples/declarative/extending/valuesource/example.qml 0 -\snippet examples/declarative/extending/valuesource/example.qml 1 +\snippet examples/declarative/cppextensions/referenceexamples/valuesource/example.qml 0 +\snippet examples/declarative/cppextensions/referenceexamples/valuesource/example.qml 1 The QML snippet shown above applies a property value source to the \c announcment property. A property value source generates a value for a property that changes over time. @@ -440,7 +443,7 @@ The example shown here is rather contrived: the \c announcment property of the the \c HappyBirthdaySong value source generates the lyrics of the song "Happy Birthday". -\snippet examples/declarative/extending/valuesource/birthdayparty.h 0 +\snippet examples/declarative/cppextensions/referenceexamples/valuesource/birthdayparty.h 0 Normally, assigning an object to a string property would not be allowed. In the case of a property value source, rather than assigning the object instance @@ -453,9 +456,9 @@ QDeclarativePropertyValueSource::setTarget(), that the QML engine invokes when associating the property value source with a property. The relevant part of the \c HappyBirthdaySong type declaration looks like this: -\snippet examples/declarative/extending/valuesource/happybirthdaysong.h 0 -\snippet examples/declarative/extending/valuesource/happybirthdaysong.h 1 -\snippet examples/declarative/extending/valuesource/happybirthdaysong.h 2 +\snippet examples/declarative/cppextensions/referenceexamples/valuesource/happybirthdaysong.h 0 +\snippet examples/declarative/cppextensions/referenceexamples/valuesource/happybirthdaysong.h 1 +\snippet examples/declarative/cppextensions/referenceexamples/valuesource/happybirthdaysong.h 2 In all other respects, property value sources are regular QML types. They must be registered with the QML engine using the same macros as other types, and can @@ -471,8 +474,8 @@ implement the \c HappyBirthdaySong property value source. \section1 Property Binding -\snippet examples/declarative/extending/binding/example.qml 0 -\snippet examples/declarative/extending/binding/example.qml 1 +\snippet examples/declarative/cppextensions/referenceexamples/binding/example.qml 0 +\snippet examples/declarative/cppextensions/referenceexamples/binding/example.qml 1 The QML snippet shown above uses a property binding to ensure the \c HappyBirthdaySong's \c name property remains up to date with the \c host. @@ -492,7 +495,7 @@ the property's value. QML relies on the presence of a Here is the \c host property declaration: -\snippet examples/declarative/extending/binding/birthdayparty.h 0 +\snippet examples/declarative/cppextensions/referenceexamples/binding/birthdayparty.h 0 The NOTIFY attribute is followed by a signal name. It is the responsibility of the class implementer to ensure that whenever the property's value changes, the @@ -531,7 +534,7 @@ subsequently change. The most common case of this is when a type uses only freed when the object is deleted. In these cases, the CONSTANT attribute may be added to the property declaration instead of a NOTIFY signal. -\snippet examples/declarative/extending/binding/person.h 0 +\snippet examples/declarative/cppextensions/referenceexamples/binding/person.h 0 Extreme care must be taken here or applications using your type may misbehave. The CONSTANT attribute should only be used for properties whose value is set, @@ -543,7 +546,7 @@ include NOTIFY signals for use in binding. \section1 Extension Objects -\snippet examples/declarative/extending/extended/example.qml 0 +\snippet examples/declarative/cppextensions/referenceexamples/extended/example.qml 0 The QML snippet shown above adds a new property to an existing C++ type without modifying its source code. diff --git a/doc/src/declarative/focus.qdoc b/doc/src/declarative/focus.qdoc index e5c1d32..4c4a317 100644 --- a/doc/src/declarative/focus.qdoc +++ b/doc/src/declarative/focus.qdoc @@ -67,7 +67,12 @@ item and thus subsequently be \l {QEvent::ignore()}{ignored}. \code Item { Item { - Keys.onPressed: if (event.key == Qt.Key_A) { console.log('Key A was pressed'); event.accepted = true } + Keys.onPressed: { + if (event.key == Qt.Key_A) { + console.log('Key A was pressed'); + event.accepted = true; + } + } Rectangle {} } } @@ -291,28 +296,7 @@ print the name of the current list item. \table \row -\o \code -Rectangle { - color: "lightsteelblue"; width: 240; height: 320 - - ListView { - id: myView; anchors.fill: parent; focus: true - model: ListModel { - ListElement { name: "Bob" } - ListElement { name: "John" } - ListElement { name: "Michael" } - } - delegate: FocusScope { - width: contents.width; height: contents.height - Text { - focus: true - text: name - Keys.onReturnPressed: console.log(name) - } - } - } -} -\endcode +\o \snippet doc/src/snippets/declarative/focusscopes.qml 0 \o \image declarative-qmlfocus4.png \endtable diff --git a/doc/src/declarative/globalobject.qdoc b/doc/src/declarative/globalobject.qdoc index 57eaae7..bd0a9f5 100644 --- a/doc/src/declarative/globalobject.qdoc +++ b/doc/src/declarative/globalobject.qdoc @@ -166,10 +166,33 @@ If no format is specified the locale's short format is used. Alternatively, you \section2 Functions The Qt object also contains the following miscellaneous functions which expose Qt functionality for use in QML. -\section3 Qt.lighter(color baseColor) -This function returns a color 50% lighter than \c baseColor. See QColor::lighter() for further details. -\section3 Qt.darker(color baseColor) -This function returns a color 50% darker than \c baseColor. See QColor::darker() for further details. +\section3 Qt.lighter(color baseColor, real factor) +This function returns a color lighter than \c baseColor by the \c factor provided. + +If the factor is greater than 1.0, this functions returns a lighter color. +Setting factor to 1.5 returns a color that is 50% brighter. If the factor is less than 1.0, +the return color is darker, but we recommend using the Qt.darker() function for this purpose. +If the factor is 0 or negative, the return value is unspecified. + +The function converts the current RGB color to HSV, multiplies the value (V) component +by factor and converts the color back to RGB. + +If \c factor is not supplied, returns a color 50% lighter than \c baseColor (factor 1.5). + +\section3 Qt.darker(color baseColor, real factor) +This function returns a color darker than \c baseColor by the \c factor provided. + +If the factor is greater than 1.0, this function returns a darker color. +Setting factor to 3.0 returns a color that has one-third the brightness. +If the factor is less than 1.0, the return color is lighter, but we recommend using +the Qt.lighter() function for this purpose. If the factor is 0 or negative, the return +value is unspecified. + +The function converts the current RGB color to HSV, divides the value (V) component +by factor and converts the color back to RGB. + +If \c factor is not supplied, returns a color 50% darker than \c baseColor (factor 2.0). + \section3 Qt.tint(color baseColor, color tintColor) This function allows tinting one color with another. @@ -196,13 +219,17 @@ Binary to ASCII - this function returns a base64 encoding of \c data. ASCII to binary - this function returns a base64 decoding of \c data. \section3 Qt.quit() -This function causes the QML engine to emit the quit signal, which in -\l {Qt Declarative UI Runtime}{qml} causes the runtime to quit. +This function causes the QDeclarativeEngine::quit() signal to be emitted. +Within the \l {Qt Declarative UI Runtime}{qml} application this causes the +launcher application to exit. \section3 Qt.resolvedUrl(url) This function returns \c url resolved relative to the URL of the caller. +\section3 Qt.fontFamilies() +This function returns a list of the font families available to the application. + \section3 Qt.isQtObject(object) Returns true if \c object is a valid reference to a Qt or QML object, otherwise false. @@ -211,87 +238,61 @@ The following functions on the global object allow you to dynamically create QML items from files or strings. See \l{Dynamic Object Management} for an overview of their use. -\section2 createComponent(url file) - This function takes the URL of a QML file as its only argument. It returns - a component object which can be used to create and load that QML file. - - Example QML script is below. Remember that QML files that might be loaded - over the network cannot be expected to be ready immediately. - \code - var component; - var sprite; - function finishCreation(){ - if(component.isReady()){ - sprite = component.createObject(); - if(sprite == null){ - // Error Handling - }else{ - sprite.parent = page; - sprite.x = 200; - //... - } - }else if(component.isError()){ - // Error Handling - } - } - - component = createComponent("Sprite.qml"); - if(component.isReady()){ - finishCreation(); - }else{ - component.statusChanged.connect(finishCreation); - } - \endcode - - If you are certain the files will be local, you could simplify to - - \code - component = createComponent("Sprite.qml"); - sprite = component.createObject(); - if(sprite == null){ - // Error Handling - console.log(component.errorsString()); - }else{ - sprite.parent = page; - sprite.x = 200; - //... - } - \endcode - - The methods and properties of the Component element are defined in its own - page, but when using it dynamically only two methods are usually used. - Component.createObject() returns the created object or null if there is an error. - If there is an error, Component.errorsString() describes what the error was. - - If you want to just create an arbitrary string of QML, instead of - loading a QML file, consider the createQmlObject() function. - -\section2 createQmlObject(string qml, object parent, string filepath) - Creates a new object from the specified string of QML. It requires a - second argument, which is the id of an existing QML object to use as - the new object's parent. If a third argument is provided, this is used - for error reporting as the filepath that the QML came from. - - Example (where targetItem is the id of an existing QML item): - \code - newObject = createQmlObject('import Qt 4.7; Rectangle {color: "red"; width: 20; height: 20}', - targetItem, "dynamicSnippet1"); - \endcode - - This function is intended for use inside QML only. It is intended to behave - similarly to eval, but for creating QML elements. - - Returns the created object, or null if there is an error. In the case of an - error, a QtScript Error object is thrown. This object has the additional property, - qmlErrors, which is an array of all the errors encountered when trying to execute the - QML. Each object in the array has the members: lineNumber, columnNumber, fileName and message. - - Note that this function returns immediately, and therefore may not work if - the QML loads new components. If you are trying to load a new component, - for example from a QML file, consider the createComponent() function - instead. 'New components' refers to external QML files that have not yet - been loaded, and so it is safe to use createQmlObject to load built-in - components. + +\section2 Qt.createComponent(url file) + +This function takes the URL of a QML file as its only argument. It returns +a component object which can be used to create and load that QML file. + +Here is an example. Remember that QML files that might be loaded +over the network cannot be expected to be ready immediately. + +\snippet doc/src/snippets/declarative/componentCreation.js 0 +\codeline +\snippet doc/src/snippets/declarative/componentCreation.js 1 + +If you are certain the files will be local, you could simplify to: + +\snippet doc/src/snippets/declarative/componentCreation.js 2 + +The methods and properties of the Component element are defined in its own +page, but when using it dynamically only two methods are usually used. +\c Component.createObject() returns the created object or \c null if there is an error. +If there is an error, \l {Component::errorString()}{Component.errorString()} describes +the error that occurred. Note that createObject() takes exactly one argument, which is set +to the parent of the created object. Graphical objects without a parent will not appear +on the scene, but if you do not wish to parent the item at this point you can safely pass +in null. + +If you want to just create an arbitrary string of QML, instead of +loading a QML file, consider the \l{Qt.createQmlObject(string qml, object parent, string filepath)}{Qt.createQmlObject()} function. + + +\section2 Qt.createQmlObject(string qml, object parent, string filepath) + +Creates a new object from the specified string of QML. It requires a +second argument, which is the id of an existing QML object to use as +the new object's parent. If a third argument is provided, this is used +for error reporting as the filepath that the QML came from. + +Example (where \c targetItem is the id of an existing QML item): + +\snippet doc/src/snippets/declarative/createQmlObject.qml 0 + +This function is intended for use inside QML only. It is intended to behave +similarly to eval, but for creating QML elements. + +Returns the created object, \c or null if there is an error. In the case of an +error, a QtScript Error object is thrown. This object has the additional property, +qmlErrors, which is an array of all the errors encountered when trying to execute the +QML. Each object in the array has the members \c lineNumber, \c columnNumber, \c fileName and \c message. + +Note that this function returns immediately, and therefore may not work if +the QML loads new components. If you are trying to load a new component, +for example from a QML file, consider the \l{Qt.createComponent(url file)}{Qt.createComponent()} function +instead. 'New components' refers to external QML files that have not yet +been loaded, and so it is safe to use \c Qt.createQmlObject() to load built-in +components. \section1 XMLHttpRequest @@ -382,7 +383,7 @@ of QDeclarativeEngine::offlineStoragePath(), currently as SQLite databases. The API can be used from JavaScript functions in your QML: -\quotefile declarative/sql/hello.qml +\quotefile declarative/sqllocalstorage/hello.qml The API conforms to the Synchronous API of the HTML5 Web Database API, \link http://www.w3.org/TR/2009/WD-webdatabase-20091029/ W3C Working Draft 29 October 2009\endlink. diff --git a/doc/src/declarative/integrating.qdoc b/doc/src/declarative/integrating.qdoc index 0051f09..c6f754b 100644 --- a/doc/src/declarative/integrating.qdoc +++ b/doc/src/declarative/integrating.qdoc @@ -110,51 +110,11 @@ of QML UIs: \section2 Loading QGraphicsWidget objects in QML An alternative approach is to expose your existing QGraphicsWidget objects to -QML and construct your scene in QML instead. To do this, you need to register -any custom C++ types and create a plugin that registers the custom types -so that they can be used from your QML file. +QML and construct your scene in QML instead. See the \l {declarative-cppextensions-qgraphicslayouts.html}{graphics layouts example} +which shows how to expose Qt's graphics layout classes to QML in order +to use QGraphicsWidget with classes like QGraphicsLinearLayout and QGraphicsGridLayout. -Here is an example. Suppose you have two classes, \c RedSquare and \c BlueCircle, -that both inherit from QGraphicsWidget: - -\c [graphicswidgets/redsquare.h] -\snippet doc/src/declarative/snippets/integrating/graphicswidgets/redsquare.h 0 - -\c [graphicswidgets/bluecircle.h] -\snippet doc/src/declarative/snippets/integrating/graphicswidgets/bluecircle.h 0 - -Then, create a plugin by subclassing QDeclarativeExtensionPlugin, and register the -types by calling qmlRegisterType(). Also export the plugin with Q_EXPORT_PLUGIN2. - -\c [graphicswidgets/shapesplugin.cpp] -\snippet doc/src/declarative/snippets/integrating/graphicswidgets/shapesplugin.cpp 0 - -Now write a project file that creates the plugin: - -\c [graphicswidgets/graphicswidgets.pro] -\quotefile doc/src/declarative/snippets/integrating/graphicswidgets/graphicswidgets.pro - -And add a \c qmldir file that includes the \c graphicswidgets plugin from the \c lib -subdirectory (as defined in the project file): - -\c [graphicswidgets/qmldir] -\quotefile doc/src/declarative/snippets/integrating/graphicswidgets/qmldir - -Now, we can write a QML file that uses the \c RedSquare and \c BlueCircle widgets. -(As an example, we can also create \c QGraphicsWidget items if we import the \c Qt.widgets -module.) - -\c [main.qml] -\quotefile doc/src/declarative/snippets/integrating/graphicswidgets/main.qml - -Here is a screenshot of the result: - -\image declarative-integrating-graphicswidgets.png - - -Note this approach of creating your graphics objects from QML does not work -with QGraphicsItems that are not QGraphicsObject-based, since they are not QObjects. - -See \l{Extending QML in C++} for further information on using C++ types. +To expose your existing QGraphicsWidget classes to QML, use \l {qmlRegisterType()}. +See \l{Extending QML in C++} for further information on using C++ types in QML. */ diff --git a/doc/src/declarative/pics/trivialListView.png b/doc/src/declarative/pics/listview-highlight.png Binary files differindex dc5c6b3..dc5c6b3 100644 --- a/doc/src/declarative/pics/trivialListView.png +++ b/doc/src/declarative/pics/listview-highlight.png diff --git a/doc/src/declarative/pics/listview-simple.png b/doc/src/declarative/pics/listview-simple.png Binary files differnew file mode 100644 index 0000000..71a1c51 --- /dev/null +++ b/doc/src/declarative/pics/listview-simple.png diff --git a/doc/src/declarative/qdeclarativeintro.qdoc b/doc/src/declarative/qdeclarativeintro.qdoc index a98c9e1..acf4ec9 100644 --- a/doc/src/declarative/qdeclarativeintro.qdoc +++ b/doc/src/declarative/qdeclarativeintro.qdoc @@ -60,10 +60,13 @@ technologies like HTML and CSS, but it's not required. QML looks like this: \code +import Qt 4.7 + Rectangle { width: 200 height: 200 - color: "white" + color: "blue" + Image { source: "pics/logo.png" anchors.centerIn: parent diff --git a/doc/src/declarative/qdeclarativemodels.qdoc b/doc/src/declarative/qdeclarativemodels.qdoc index 91acb3c..109d390 100644 --- a/doc/src/declarative/qdeclarativemodels.qdoc +++ b/doc/src/declarative/qdeclarativemodels.qdoc @@ -99,7 +99,8 @@ There are a number of QML elements that operate using data models: \endlist QML supports several types of data model, which may be provided by QML -or C++ (via QDeclarativeContext::setContextProperty(), for example). +or C++ (via QDeclarativeContext::setContextProperty() or as plugin types, +for example). \section1 QML Data Models @@ -143,6 +144,28 @@ ListView { } \endcode +It is also possible to manipulate the ListModel directly via JavaScript. +In this case, the first item inserted will determine the roles available +to any views using the model. For example, if an empty ListModel is +created and populated via JavaScript the roles provided by the first +insertion are the only roles that will be shown in the view: + +\code +Item { + ListModel { + id: fruitModel + } + MouseArea { + anchors.fill: parent + onClicked: fruitModel.append({"cost": 5.95, "name":"Pizza"}) + } +} +\endcode + +When the MouseArea is clicked fruitModel will have two roles, "cost" and "name". +Even if subsequent roles are added, only the first two will be handled by views +using the model. + \section2 XmlListModel @@ -188,8 +211,13 @@ will be positioned by the view. \section1 C++ Data Models +Models defined in C++ can be made available to QML either from a C++ application or from a +\l{QDeclarativeExtensionPlugin}{QML C++ plugin}. + \section2 QAbstractItemModel +A model can be defined by subclassing QAbstractItemModel. + QAbstractItemModel provides the roles set via the QAbstractItemModel::setRoleNames() method. The default role names set by Qt are: @@ -205,7 +233,18 @@ The default role names set by Qt are: \o decoration \endtable -QAbstractItemModel presents a heirachy of tables. Views currently provided by QML +The model could be made available to QML either directly: + +\code +QDeclarativeContext *ctxt = view.rootContext(); +MyModel *model = new MyModel; // subclass of QAbstractItemModel +ctxt->setContextProperty("myModel", model); +\endcode + +or by registering the subclass as a new QML type in +a \l{QDeclarativeExtensionPlugin}{QML C++ plugin}. + +QAbstractItemModel presents a heirachy of tables, but views currently provided by QML can only display list data. In order to display child lists of a heirachical model the VisualDataModel element provides several properties and functions for use @@ -220,7 +259,7 @@ with models of type QAbstractItemModel: \section2 QStringList -QStringList provides the contents of the list via the \e modelData role: +A model may be a simple QStringList, which provides the contents of the list via the \e modelData role: \table \row @@ -283,7 +322,9 @@ QDeclarativeContext *ctxt = view.rootContext(); ctxt->setContextProperty("myModel", QVariant::fromValue(dataList)); \endcode -The properties of the object may then be accessed in the delegate: +The QObject* is available as the \c modelData property. As a convenience, +the properties of the object are also made available directly in the +delegate's context: \code ListView { @@ -295,13 +336,18 @@ ListView { Rectangle { height: 25 width: 100 - color: model.color + color: model.modelData.color Text { text: name } } } } \endcode +Note the use of the fully qualified access to the \c color property. +The properties of the object are not replicated in the \c model +object, since they are easily available via the modelData +object. + Note: There is no way for the view to know that the contents of a QList have changed. If the QList is changed, it will be necessary to reset the model by calling QDeclarativeContext::setContextProperty() again. diff --git a/doc/src/declarative/qmlruntime.qdoc b/doc/src/declarative/qmlruntime.qdoc index a724c7d..cef5e63 100644 --- a/doc/src/declarative/qmlruntime.qdoc +++ b/doc/src/declarative/qmlruntime.qdoc @@ -42,19 +42,18 @@ /*! \page qmlruntime.html \title Qt Declarative UI Runtime - \keyword qml runtime + \keyword QML Viewer \ingroup qttools This page documents the \e{Declarative UI Runtime} for the Qt GUI - toolkit, and the \c qml executable which can be used to run apps - written for the runtime. The \c qml executable reads a declarative user interface definition - (\c .qml) file and displays the user interface it describes. + toolkit, and the \QQV which can be used to run apps + written for the runtime. The \QQV reads a declarative + user interface definition (\c .qml) file and displays the user interface it describes. - QML is a runtime, as you can run plain qml files which pull in their required modules. + QML is a runtime, as you can run plain QML files which pull in their required modules. To run apps with the QML runtime, you can either start the runtime - from your own application (using a QDeclarativeView) or with the simple \c qml application. - The \c qml application can be - installed in a production environment, assuming that it is not already + from your own application (using a QDeclarativeView) or with the simple \QQV. + The launcher can be installed in a production environment, assuming that it is not already present in the system. It is generally packaged alongside Qt. To deploy an application using the QML runtime, you have two options: @@ -62,18 +61,18 @@ \list \o Write your own Qt application including a QDeclarative view and deploy it the same as any other Qt application (not discussed further on this page), or - \o Write a main QML file for your application, and run your application using the included \c qml tool. + \o Write a main QML file for your application, and run your application using the included \QQV. \endlist - To run an application with the \c qml tool, pass the filename as an argument: + To run an application with the \QQV, pass the filename as an argument: \code - qml myQmlFile.qml + qmlviewer myQmlFile.qml \endcode - Deploying a QML application via the \c qml executable allows for QML only deployments, but can also + Deploying a QML application via the \QQV allows for QML only deployments, but can also include custom C++ modules just as easily. Below is an example of how you might structure - a complex application deployed via the qml runtime, it is a listing of the files that would + a complex application deployed via the QML runtime, it is a listing of the files that would be included in the deployment package. \code @@ -93,8 +92,8 @@ as the appropriate module file is chosen based on platform naming conventions. The C++ modules must contain a QDeclarativeExtentionPlugin subclass. - The application would be executed either with your own application, the command 'qml MyApp.qml' or by - opening the qml file if your system has the \c qml executable registered as the handler for qml files. The MyApp.qml file would have access + The application would be executed either with your own application, the command 'qmlviewer MyApp.qml' or by + opening the file if your system has the \QQV registered as the handler for QML files. The MyApp.qml file would have access to all of the deployed types using the import statements such as the following: \code @@ -102,19 +101,36 @@ import "OtherModule" 1.0 as Other \endcode - \section1 \c qml application functionality - The \c qml application implements some additional functionality to help it serve the role of a launcher - for myriad applications. If you implement your own launcher application, you may also wish to reimplement + \section1 Qt QML Viewer functionality + The \QQV implements some additional functionality to help it supporting + myriad applications. If you implement your own application, you may also wish to reimplement some or all of this functionality. However, much of this functionality is intended to aid the prototyping of - qml applications and may not be necessary for a deployed application. + QML applications and may not be necessary for a deployed application. \section2 Options - When run with the \c -help option, qml shows available options. + When run with the \c -help option, \c qmlviewer shows available options. + + \section2 Translations + + When the launcher loads an initial QML file, it will install a translation file from + a "i18n" subdirectory relative to that initial QML file. The actual translation file + loaded will be according to the system locale and have the form + "qml_<language>.qm", where <language> is a two-letter ISO 639 language, + such as "qml_fr.qm", optionally followed by an underscore and an uppercase two-letter ISO 3166 country + code, such as "qml_fr_FR.qm" or "qml_fr_CA.qm". + + Such files can be created using \l{Qt Linguist}. + + See the \l{scripting.html#internationalization}{Qt Internationalization} documentation for information about how to make + the JavaScript in QML files use translatable strings. + + Additionally, the launcher will load translation files specified on the + command line via the \c -translation option. \section2 Dummy Data - The secondary use of the qml runtime is to allow QML files to be viewed with + The secondary use of the launcher is to allow QML files to be viewed with dummy data. This is useful when prototyping the UI, as the dummy data can be later replaced with actual data and bindings from a C++ plugin. To provide dummy data: create a directory called "dummydata" in the same directory as @@ -136,13 +152,13 @@ \section2 Runtime Object - All applications using the qmlruntime will have access to the 'runtime' + All applications using the launcher will have access to the 'runtime' property on the root context. This property contains several pieces of information about the runtime environment of the application. \section3 Screen Orientation - A special piece of dummy data which is integrated into the runtime is + A special piece of dummy data which is integrated into the launcher is a simple orientation property. The orientation can be set via the settings menu in the application, or by pressing Ctrl+T to toggle it. @@ -156,13 +172,13 @@ } \endcode - This allows your application to respond to the orientation of the screen changing. The runtime + This allows your application to respond to the orientation of the screen changing. The launcher will automatically update this on some platforms (currently the N900 only) to match the physical screen's orientation. On other plaforms orientation changes will only happen when explictly asked for. \section3 Window Active - The runtime.isActiveWindow property tells whether the main window of the qml runtime is currently active + The runtime.isActiveWindow property tells whether the main window of the launcher is currently active or not. This is especially useful for embedded devices when you want to pause parts of your application, including animations, when your application loses focus or goes to the background. diff --git a/doc/src/declarative/qtbinding.qdoc b/doc/src/declarative/qtbinding.qdoc index d024ff2..7d696d7 100644 --- a/doc/src/declarative/qtbinding.qdoc +++ b/doc/src/declarative/qtbinding.qdoc @@ -97,17 +97,17 @@ The following example shows how to expose a background color to a QML file throu \row \o \c {// main.cpp} -\snippet doc/src/declarative/snippets/qtbinding/contextproperties/main.cpp 0 +\snippet doc/src/snippets/declarative/qtbinding/contextproperties/main.cpp 0 \o \c {// main.qml} -\snippet doc/src/declarative/snippets/qtbinding/contextproperties/main.qml 0 +\snippet doc/src/snippets/declarative/qtbinding/contextproperties/main.qml 0 \endtable Or, if you want \c main.cpp to create the component without showing it in a QDeclarativeView, you could create an instance of QDeclarativeContext using QDeclarativeEngine::rootContext() instead: -\snippet doc/src/declarative/snippets/qtbinding/contextproperties/main.cpp 1 +\snippet doc/src/snippets/declarative/qtbinding/contextproperties/main.cpp 1 Context properties work just like normal properties in QML bindings - if the \c backgroundColor context property in this example was changed to red, the component object instances would @@ -135,15 +135,15 @@ allow QML to set values. The following example creates a \c CustomPalette object, and sets it as the \c palette context property. -\snippet doc/src/declarative/snippets/qtbinding/custompalette/custompalette.h 0 +\snippet doc/src/snippets/declarative/qtbinding/custompalette/custompalette.h 0 -\snippet doc/src/declarative/snippets/qtbinding/custompalette/main.cpp 0 +\snippet doc/src/snippets/declarative/qtbinding/custompalette/main.cpp 0 The QML that follows references the palette object, and its properties, to set the appropriate background and text colors. When the window is clicked, the palette's text color is changed, and the window text will update accordingly. -\snippet doc/src/declarative/snippets/qtbinding/custompalette/main.qml 0 +\snippet doc/src/snippets/declarative/qtbinding/custompalette/main.qml 0 To detect when a C++ property value - in this case the \c CustomPalette's \c text property - changes, the property must have a corresponding NOTIFY signal. The NOTIFY signal specifies a signal @@ -185,12 +185,12 @@ This example toggles the "Stopwatch" object on/off when the MouseArea is clicked \row \o \c {// main.cpp} -\snippet doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.h 0 -\snippet doc/src/declarative/snippets/qtbinding/stopwatch/main.cpp 0 +\snippet doc/src/snippets/declarative/qtbinding/stopwatch/stopwatch.h 0 +\snippet doc/src/snippets/declarative/qtbinding/stopwatch/main.cpp 0 \o \c {// main.qml} -\snippet doc/src/declarative/snippets/qtbinding/stopwatch/main.qml 0 +\snippet doc/src/snippets/declarative/qtbinding/stopwatch/main.qml 0 \endtable @@ -258,16 +258,16 @@ QML content can be loaded from \l {The Qt Resource System} using the \e qrc: URL For example: \c [project/example.qrc] -\quotefile doc/src/declarative/snippets/qtbinding/resources/example.qrc +\quotefile doc/src/snippets/declarative/qtbinding/resources/example.qrc \c [project/project.pro] -\quotefile doc/src/declarative/snippets/qtbinding/resources/resources.pro +\quotefile doc/src/snippets/declarative/qtbinding/resources/resources.pro \c [project/main.cpp] -\snippet doc/src/declarative/snippets/qtbinding/resources/main.cpp 0 +\snippet doc/src/snippets/declarative/qtbinding/resources/main.cpp 0 \c [project/main.qml] -\snippet doc/src/declarative/snippets/qtbinding/resources/main.qml 0 +\snippet doc/src/snippets/declarative/qtbinding/resources/main.qml 0 */ diff --git a/doc/src/declarative/snippets/integrating/graphicswidgets/bluecircle.h b/doc/src/declarative/snippets/integrating/graphicswidgets/bluecircle.h deleted file mode 100644 index 73d66b7..0000000 --- a/doc/src/declarative/snippets/integrating/graphicswidgets/bluecircle.h +++ /dev/null @@ -1,55 +0,0 @@ -/**************************************************************************** -** -** 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 documentation 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] -#include <QGraphicsWidget> -#include <QPainter> - -class BlueCircle : public QGraphicsWidget -{ - Q_OBJECT -public: - void paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *) - { - painter->setPen(QColor(Qt::blue)); - painter->drawEllipse(0, 0, size().width(), size().height()); - } -}; -//![0] diff --git a/doc/src/declarative/snippets/integrating/graphicswidgets/graphicswidgets.pro b/doc/src/declarative/snippets/integrating/graphicswidgets/graphicswidgets.pro deleted file mode 100644 index 21c8a37..0000000 --- a/doc/src/declarative/snippets/integrating/graphicswidgets/graphicswidgets.pro +++ /dev/null @@ -1,13 +0,0 @@ -TEMPLATE = lib -CONFIG += qt plugin -QT += declarative - -HEADERS += redsquare.h \ - bluecircle.h - -SOURCES += shapesplugin.cpp - -DESTDIR = lib -OBJECTS_DIR = tmp -MOC_DIR = tmp - diff --git a/doc/src/declarative/snippets/integrating/graphicswidgets/main.qml b/doc/src/declarative/snippets/integrating/graphicswidgets/main.qml deleted file mode 100644 index ffcf79d..0000000 --- a/doc/src/declarative/snippets/integrating/graphicswidgets/main.qml +++ /dev/null @@ -1,32 +0,0 @@ -import Qt 4.7 -import Qt.widgets 4.7 - -Rectangle { - width: 200 - height: 200 - - RedSquare { - id: square - width: 80 - height: 80 - } - - BlueCircle { - anchors.left: square.right - width: 80 - height: 80 - } - - QGraphicsWidget { - anchors.top: square.bottom - size.width: 80 - size.height: 80 - layout: QGraphicsLinearLayout { - LayoutItem { - preferredSize: "100x100" - Rectangle { color: "yellow"; anchors.fill: parent } - } - } - } -} - diff --git a/doc/src/declarative/snippets/integrating/graphicswidgets/qmldir b/doc/src/declarative/snippets/integrating/graphicswidgets/qmldir deleted file mode 100644 index f94dad2..0000000 --- a/doc/src/declarative/snippets/integrating/graphicswidgets/qmldir +++ /dev/null @@ -1 +0,0 @@ -plugin graphicswidgets lib diff --git a/doc/src/declarative/snippets/integrating/graphicswidgets/redsquare.h b/doc/src/declarative/snippets/integrating/graphicswidgets/redsquare.h deleted file mode 100644 index 3050662..0000000 --- a/doc/src/declarative/snippets/integrating/graphicswidgets/redsquare.h +++ /dev/null @@ -1,54 +0,0 @@ -/**************************************************************************** -** -** 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 documentation 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] -#include <QGraphicsWidget> -#include <QPainter> - -class RedSquare : public QGraphicsWidget -{ - Q_OBJECT -public: - void paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *) - { - painter->fillRect(0, 0, size().width(), size().height(), QColor(Qt::red)); - } -}; -//![0] diff --git a/doc/src/declarative/snippets/integrating/graphicswidgets/shapesplugin.cpp b/doc/src/declarative/snippets/integrating/graphicswidgets/shapesplugin.cpp deleted file mode 100644 index 4c18ef3..0000000 --- a/doc/src/declarative/snippets/integrating/graphicswidgets/shapesplugin.cpp +++ /dev/null @@ -1,61 +0,0 @@ -/**************************************************************************** -** -** 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 documentation 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] -#include "redsquare.h" -#include "bluecircle.h" - -#include <QtDeclarative/QDeclarativeExtensionPlugin> -#include <QtDeclarative/qdeclarative.h> - -class ShapesPlugin : public QDeclarativeExtensionPlugin -{ - Q_OBJECT -public: - void registerTypes(const char *uri) { - qmlRegisterType<RedSquare>(uri, 1, 0, "RedSquare"); - qmlRegisterType<BlueCircle>(uri, 1, 0, "BlueCircle"); - } -}; - -#include "shapesplugin.moc" - -Q_EXPORT_PLUGIN2(shapesplugin, ShapesPlugin); -//![0] diff --git a/doc/src/declarative/snippets/qtbinding/contextproperties/contextproperties.pro b/doc/src/declarative/snippets/qtbinding/contextproperties/contextproperties.pro deleted file mode 100644 index 68eeaf2..0000000 --- a/doc/src/declarative/snippets/qtbinding/contextproperties/contextproperties.pro +++ /dev/null @@ -1,2 +0,0 @@ -QT += declarative -SOURCES += main.cpp diff --git a/doc/src/declarative/snippets/qtbinding/contextproperties/main.cpp b/doc/src/declarative/snippets/qtbinding/contextproperties/main.cpp deleted file mode 100644 index 4073a6c..0000000 --- a/doc/src/declarative/snippets/qtbinding/contextproperties/main.cpp +++ /dev/null @@ -1,79 +0,0 @@ -/**************************************************************************** -** -** 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 documentation 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$ -** -****************************************************************************/ - -#include <QDeclarativeComponent> -#include <QDeclarativeEngine> - -//![0] -#include <QApplication> -#include <QDeclarativeView> -#include <QDeclarativeContext> - -int main(int argc, char *argv[]) -{ - QApplication app(argc, argv); - - QDeclarativeView view; - QDeclarativeContext *context = view.rootContext(); - context->setContextProperty("backgroundColor", - QColor(Qt::yellow)); - - view.setSource(QUrl::fromLocalFile("main.qml")); - view.show(); - - return app.exec(); -} -//![0] - -static void alternative() -{ - // Alternatively, if we don't actually want to display main.qml: -//![1] - QDeclarativeEngine engine; - QDeclarativeContext *windowContext = new QDeclarativeContext(engine.rootContext()); - windowContext->setContextProperty("backgroundColor", QColor(Qt::yellow)); - - QDeclarativeComponent component(&engine, "main.qml"); - QObject *window = component.create(windowContext); -//![1] -} - - diff --git a/doc/src/declarative/snippets/qtbinding/contextproperties/main.qml b/doc/src/declarative/snippets/qtbinding/contextproperties/main.qml deleted file mode 100644 index 1053f73..0000000 --- a/doc/src/declarative/snippets/qtbinding/contextproperties/main.qml +++ /dev/null @@ -1,15 +0,0 @@ -//![0] -import Qt 4.7 - -Rectangle { - width: 300 - height: 300 - - color: backgroundColor - - Text { - anchors.centerIn: parent - text: "Hello Yellow World!" - } -} -//![0] diff --git a/doc/src/declarative/snippets/qtbinding/custompalette/custompalette.h b/doc/src/declarative/snippets/qtbinding/custompalette/custompalette.h deleted file mode 100644 index d0d253a..0000000 --- a/doc/src/declarative/snippets/qtbinding/custompalette/custompalette.h +++ /dev/null @@ -1,80 +0,0 @@ -/**************************************************************************** -** -** 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 documentation 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$ -** -****************************************************************************/ - -#include <QObject> -#include <QColor> - -//![0] -class CustomPalette : public QObject -{ - Q_OBJECT - Q_PROPERTY(QColor background READ background WRITE setBackground NOTIFY backgroundChanged) - Q_PROPERTY(QColor text READ text WRITE setText NOTIFY textChanged) - -public: - CustomPalette() : m_background(Qt::white), m_text(Qt::black) {} - - QColor background() const { return m_background; } - void setBackground(const QColor &c) { - if (c != m_background) { - m_background = c; - emit backgroundChanged(); - } - } - - QColor text() const { return m_text; } - void setText(const QColor &c) { - if (c != m_text) { - m_text = c; - emit textChanged(); - } - } - -signals: - void textChanged(); - void backgroundChanged(); - -private: - QColor m_background; - QColor m_text; -}; - -//![0] diff --git a/doc/src/declarative/snippets/qtbinding/custompalette/custompalette.pro b/doc/src/declarative/snippets/qtbinding/custompalette/custompalette.pro deleted file mode 100644 index e6af0d0..0000000 --- a/doc/src/declarative/snippets/qtbinding/custompalette/custompalette.pro +++ /dev/null @@ -1,3 +0,0 @@ -QT += declarative -HEADERS += custompalette.h -SOURCES += main.cpp diff --git a/doc/src/declarative/snippets/qtbinding/custompalette/main.cpp b/doc/src/declarative/snippets/qtbinding/custompalette/main.cpp deleted file mode 100644 index dc651f6..0000000 --- a/doc/src/declarative/snippets/qtbinding/custompalette/main.cpp +++ /dev/null @@ -1,62 +0,0 @@ -/**************************************************************************** -** -** 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 documentation 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$ -** -****************************************************************************/ - -#include <QApplication> -#include <QDeclarativeView> -#include <QDeclarativeContext> - -#include "custompalette.h" - -//![0] -int main(int argc, char *argv[]) -{ - QApplication app(argc, argv); - - QDeclarativeView view; - view.rootContext()->setContextProperty("palette", new CustomPalette); - - view.setSource(QUrl::fromLocalFile("main.qml")); - view.show(); - - return app.exec(); -} -//![0] - diff --git a/doc/src/declarative/snippets/qtbinding/custompalette/main.qml b/doc/src/declarative/snippets/qtbinding/custompalette/main.qml deleted file mode 100644 index f1a3b4f..0000000 --- a/doc/src/declarative/snippets/qtbinding/custompalette/main.qml +++ /dev/null @@ -1,22 +0,0 @@ -//![0] -import Qt 4.7 - -Rectangle { - width: 240 - height: 320 - color: palette.background - - Text { - anchors.centerIn: parent - color: palette.text - text: "Click me to change color!" - } - - MouseArea { - anchors.fill: parent - onClicked: { - palette.text = "blue"; - } - } -} -//![0] diff --git a/doc/src/declarative/snippets/qtbinding/resources/example.qrc b/doc/src/declarative/snippets/qtbinding/resources/example.qrc deleted file mode 100644 index 5e49415..0000000 --- a/doc/src/declarative/snippets/qtbinding/resources/example.qrc +++ /dev/null @@ -1,10 +0,0 @@ -<!DOCTYPE RCC> -<RCC version="1.0"> - -<qresource prefix="/"> - <file>main.qml</file> - <file>images/background.png</file> -</qresource> - -</RCC> - diff --git a/doc/src/declarative/snippets/qtbinding/resources/images/background.png b/doc/src/declarative/snippets/qtbinding/resources/images/background.png deleted file mode 100644 index e69de29..0000000 --- a/doc/src/declarative/snippets/qtbinding/resources/images/background.png +++ /dev/null diff --git a/doc/src/declarative/snippets/qtbinding/resources/main.cpp b/doc/src/declarative/snippets/qtbinding/resources/main.cpp deleted file mode 100644 index 5459b9e..0000000 --- a/doc/src/declarative/snippets/qtbinding/resources/main.cpp +++ /dev/null @@ -1,58 +0,0 @@ -/**************************************************************************** -** -** 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 documentation 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$ -** -****************************************************************************/ - -#include <QApplication> -#include <QDeclarativeView> -#include <QDeclarativeContext> - -//![0] -int main(int argc, char *argv[]) -{ - QApplication app(argc, argv); - - QDeclarativeView view; - view.setSource(QUrl("qrc:/main.qml")); - view.show(); - - return app.exec(); -} -//![0] - diff --git a/doc/src/declarative/snippets/qtbinding/resources/main.qml b/doc/src/declarative/snippets/qtbinding/resources/main.qml deleted file mode 100644 index dfe923f..0000000 --- a/doc/src/declarative/snippets/qtbinding/resources/main.qml +++ /dev/null @@ -1,7 +0,0 @@ -//![0] -import Qt 4.7 - -Image { - source: "images/background.png" -} -//![0] diff --git a/doc/src/declarative/snippets/qtbinding/resources/resources.pro b/doc/src/declarative/snippets/qtbinding/resources/resources.pro deleted file mode 100644 index cc01ee1..0000000 --- a/doc/src/declarative/snippets/qtbinding/resources/resources.pro +++ /dev/null @@ -1,4 +0,0 @@ -QT += declarative - -SOURCES += main.cpp -RESOURCES += example.qrc diff --git a/doc/src/declarative/snippets/qtbinding/stopwatch/main.cpp b/doc/src/declarative/snippets/qtbinding/stopwatch/main.cpp deleted file mode 100644 index 537a288..0000000 --- a/doc/src/declarative/snippets/qtbinding/stopwatch/main.cpp +++ /dev/null @@ -1,63 +0,0 @@ -/**************************************************************************** -** -** 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 documentation 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$ -** -****************************************************************************/ - -#include "stopwatch.h" - -#include <QDeclarativeView> -#include <QDeclarativeContext> -#include <QApplication> - -//![0] -int main(int argc, char *argv[]) -{ - QApplication app(argc, argv); - - QDeclarativeView view; - view.rootContext()->setContextProperty("stopwatch", - new Stopwatch); - - view.setSource(QUrl::fromLocalFile("main.qml")); - view.show(); - - return app.exec(); -} -//![0] - diff --git a/doc/src/declarative/snippets/qtbinding/stopwatch/main.qml b/doc/src/declarative/snippets/qtbinding/stopwatch/main.qml deleted file mode 100644 index 2efa542..0000000 --- a/doc/src/declarative/snippets/qtbinding/stopwatch/main.qml +++ /dev/null @@ -1,18 +0,0 @@ -//![0] -import Qt 4.7 - -Rectangle { - width: 300 - height: 300 - - MouseArea { - anchors.fill: parent - onClicked: { - if (stopwatch.isRunning()) - stopwatch.stop() - else - stopwatch.start(); - } - } -} -//![0] diff --git a/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.cpp b/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.cpp deleted file mode 100644 index 4954a5f..0000000 --- a/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.cpp +++ /dev/null @@ -1,63 +0,0 @@ -/**************************************************************************** -** -** 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 documentation 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$ -** -****************************************************************************/ - -#include "stopwatch.h" - -Stopwatch::Stopwatch() - : m_running(false) -{ -} - -bool Stopwatch::isRunning() const -{ - return m_running; -} - -void Stopwatch::start() -{ - m_running = true; -} - -void Stopwatch::stop() -{ - m_running = false; -} - diff --git a/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.h b/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.h deleted file mode 100644 index 8d17121..0000000 --- a/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.h +++ /dev/null @@ -1,62 +0,0 @@ -/**************************************************************************** -** -** 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 documentation 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$ -** -****************************************************************************/ - -#include <QObject> - -//![0] -class Stopwatch : public QObject -{ - Q_OBJECT -public: - Stopwatch(); - - Q_INVOKABLE bool isRunning() const; - -public slots: - void start(); - void stop(); - -private: - bool m_running; -}; - -//![0] - diff --git a/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.pro b/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.pro deleted file mode 100644 index d803e6a..0000000 --- a/doc/src/declarative/snippets/qtbinding/stopwatch/stopwatch.pro +++ /dev/null @@ -1,3 +0,0 @@ -QT += declarative -HEADERS += stopwatch.h -SOURCES += main.cpp stopwatch.cpp diff --git a/doc/src/declarative/tutorial.qdoc b/doc/src/declarative/tutorial.qdoc index 1a93d05..75c0f851 100644 --- a/doc/src/declarative/tutorial.qdoc +++ b/doc/src/declarative/tutorial.qdoc @@ -57,10 +57,10 @@ The tutorial's source code is located in the $QTDIR/examples/declarative/tutoria Tutorial chapters: -\list -\o \l {QML Tutorial 1 - Basic Types} -\o \l {QML Tutorial 2 - QML Component} -\o \l {QML Tutorial 3 - States and Transitions} +\list 1 +\o \l {QML Tutorial 1 - Basic Types}{Basic Types} +\o \l {QML Tutorial 2 - QML Components}{QML Components} +\o \l {QML Tutorial 3 - States and Transitions}{States and Transitions} \endlist */ @@ -86,7 +86,7 @@ Here is the QML code for the application: \section2 Import First, we need to import the types that we need for this example. Most QML files will import the built-in QML -types (like \l{Rectangle}, \l{Image}, ...) that come with Qt with: +types (like \l{Rectangle}, \l{Image}, ...) that come with Qt, using: \snippet examples/declarative/tutorials/helloworld/tutorial1.qml 3 @@ -95,7 +95,7 @@ types (like \l{Rectangle}, \l{Image}, ...) that come with Qt with: \snippet examples/declarative/tutorials/helloworld/tutorial1.qml 1 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 \c{id} to be able to refer to it later. In this case, we call it \e page. +We give it an \c{id} to be able to refer to it later. In this case, we call it "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. @@ -103,15 +103,16 @@ The \l{Rectangle} element contains many other properties (such as \c x and \c y) \snippet examples/declarative/tutorials/helloworld/tutorial1.qml 2 -We add a \l Text element as a child of our root element that will display the text 'Hello world!'. +We add a \l Text element as a child of the root Rectangle element that displays the text 'Hello world!'. The \c y property is used to position the text vertically at 30 pixels from the top of its parent. -The \c font.pointSize and \c font.bold properties are related to fonts and use the \l{dot properties}{dot notation}. - The \c anchors.horizontalCenter property refers to the horizontal center of an element. In this case, we specify that our text element should be horizontally centered in the \e page element (see \l{anchor-layout}{Anchor-based Layout}). +The \c font.pointSize and \c font.bold properties are related to fonts and use the \l{dot properties}{dot notation}. + + \section2 Viewing the example To view what you have created, run the \l{Qt Declarative UI Runtime}{qml} tool (located in the \c bin directory) with your filename as the first argument. @@ -124,7 +125,7 @@ bin/qml $QTDIR/examples/declarative/tutorials/helloworld/tutorial1.qml /*! \page qml-tutorial2.html -\title QML Tutorial 2 - QML Component +\title QML Tutorial 2 - QML Components \contentspage QML Tutorial \previouspage QML Tutorial 1 - Basic Types \nextpage QML Tutorial 3 - States and Transitions @@ -134,10 +135,10 @@ This chapter adds a color picker to change the color of the text. \image declarative-tutorial2.png Our color picker is made of six cells with different colors. -To avoid writing the same code multiple times, we first create a new \c Cell component. +To avoid writing the same code multiple times for each cell, we create a new \c Cell component. A component provides a way of defining a new type that we can re-use in other QML files. -A QML component is like a black-box and interacts with the outside world through properties, signals and slots and is generally -defined in its own QML file (for more details, see \l {Defining new Components}). +A QML component is like a black-box and interacts with the outside world through properties, signals and functions and is generally +defined in its own QML file. (For more details, see \l {Defining new Components}). The component's filename must always start with a capital letter. Here is the QML code for \c Cell.qml: @@ -157,7 +158,7 @@ An \l Item is the most basic visual element in QML and is often used as a contai We declare a \c cellColor property. This property is accessible from \e outside our component, this allows us to instantiate the cells with different colors. -This property is just an alias to an existing property - the color of the rectangle that compose the cell (see \l{intro-properties}{Properties}). +This property is just an alias to an existing property - the color of the rectangle that compose the cell (see \l{Adding new properties}). \snippet examples/declarative/tutorials/helloworld/Cell.qml 5 |
