Tutorial chapters:
\list 1
-\li \l {declarative/tutorials/samegame/samegame1}{Creating the Game Canvas and Blocks}
-\li \l {declarative/tutorials/samegame/samegame2}{Populating the Game Canvas}
-\li \l {declarative/tutorials/samegame/samegame3}{Implementing the Game Logic}
-\li \l {declarative/tutorials/samegame/samegame4}{Finishing Touches}
+\li \l {examples/tutorials/samegame/samegame1}{Creating the Game Canvas and Blocks}
+\li \l {examples/tutorials/samegame/samegame2}{Populating the Game Canvas}
+\li \l {examples/tutorials/samegame/samegame3}{Implementing the Game Logic}
+\li \l {examples/tutorials/samegame/samegame4}{Finishing Touches}
\endlist
-All the code in this tutorial can be found in Qt's \c examples/declarative/tutorials/samegame
+All the code in this tutorial can be found in Qt's \c examples/examples/tutorials/samegame
directory.
*/
\previouspage QML Advanced Tutorial
\nextpage QML Advanced Tutorial 2 - Populating the Game Canvas
-\example declarative/tutorials/samegame/samegame1
+\example examples/tutorials/samegame/samegame1
\section2 Creating the application screen
This is defined by the main application file, \c samegame.qml, which looks like this:
-\snippet declarative/tutorials/samegame/samegame1/samegame.qml 0
+\snippet examples/tutorials/samegame/samegame1/samegame.qml 0
This gives you a basic game window that includes the main canvas for the
blocks, a "New Game" button and a score display.
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
+\snippet examples/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
Each block is just an item that contains an image. The block
code is defined in a separate \c Block.qml file:
-\snippet declarative/tutorials/samegame/samegame1/Block.qml 0
+\snippet examples/tutorials/samegame/samegame1/Block.qml 0
At the moment, the block doesn't do anything; it is just an image. As the
tutorial progresses we will animate and give behaviors to the blocks.
\previouspage QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks
\nextpage QML Advanced Tutorial 3 - Implementing the Game Logic
-\example declarative/tutorials/samegame/samegame2
+\example examples/tutorials/samegame/samegame2
\section2 Generating the blocks in JavaScript
Here is the JavaScript code for generating the blocks, contained in a new
file, \c samegame.js. The code is explained below.
-\snippet declarative/tutorials/samegame/samegame2/samegame.js 0
+\snippet examples/tutorials/samegame/samegame2/samegame.js 0
The \c startNewGame() function deletes the blocks created in the previous game and
calculates the number of rows and columns of blocks required to fill the game window for the new game.
To do this, we add this line to \c samegame.qml which imports
the JavaScript file as a \l{Modules#QML Modules}{module}:
-\snippet declarative/tutorials/samegame/samegame2/samegame.qml 2
+\snippet examples/tutorials/samegame/samegame2/samegame.qml 2
This allows us to refer to any functions within \c samegame.js using "SameGame"
as a prefix: for example, \c SameGame.startNewGame() or \c SameGame.createBlock().
This means we can now connect the New Game button's \c onClicked handler to the \c startNewGame()
function, like this:
-\snippet declarative/tutorials/samegame/samegame2/samegame.qml 1
+\snippet examples/tutorials/samegame/samegame2/samegame.qml 1
So, when you click the New Game button, \c startNewGame() is called and generates a field of blocks, like this:
\previouspage QML Advanced Tutorial 2 - Populating the Game Canvas
\nextpage QML Advanced Tutorial 4 - Finishing Touches
-\example declarative/tutorials/samegame/samegame3
+\example examples/tutorials/samegame/samegame3
\section2 Making a playable game
To make it easier for the JavaScript code to interface with the QML elements, we have added an Item called \c gameCanvas to \c samegame.qml. It replaces the background as the item which contains the blocks. It also accepts mouse input from the user. Here is the item code:
-\snippet declarative/tutorials/samegame/samegame3/samegame.qml 1
+\snippet examples/tutorials/samegame/samegame3/samegame.qml 1
The \c gameCanvas item is the exact size of the board, and has a \c score property and a \l MouseArea to handle mouse clicks.
The blocks are now created as its children, and its dimensions are used to determine the board size so that
When clicked, the \l MouseArea calls \c{handleClick()} in \c samegame.js, which determines whether the player's click should cause any blocks to be removed, and updates \c gameCanvas.score with the current score if necessary. Here is the \c handleClick() function:
-\snippet declarative/tutorials/samegame/samegame3/samegame.js 1
+\snippet examples/tutorials/samegame/samegame3/samegame.js 1
Note that if \c score was a global variable in the \c{samegame.js} file you would not be able to bind to it. You can only bind to QML properties.
When the player clicks a block and triggers \c handleClick(), \c handleClick() also calls \c victoryCheck() to update the score and to check whether the player has completed the game. Here is the \c victoryCheck() code:
-\snippet declarative/tutorials/samegame/samegame3/samegame.js 2
+\snippet examples/tutorials/samegame/samegame3/samegame.js 2
This updates the \c gameCanvas.score value and displays a "Game Over" dialog if the game is finished.
The Game Over dialog is created using a \c Dialog element that is defined in \c Dialog.qml. Here is the \c Dialog.qml code. Notice how it is designed to be usable imperatively from the script file, via the functions and signals:
-\snippet declarative/tutorials/samegame/samegame3/Dialog.qml 0
+\snippet examples/tutorials/samegame/samegame3/Dialog.qml 0
And this is how it is used in the main \c samegame.qml file:
-\snippet declarative/tutorials/samegame/samegame3/samegame.qml 2
+\snippet examples/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.
It's not much fun to play Same Game if all the blocks are the same color, so we've modified the \c createBlock() function in \c samegame.js to randomly create a different type of block (for either red, green or blue) each time it is called. \c Block.qml has also changed so that each block contains a different image depending on its type:
-\snippet declarative/tutorials/samegame/samegame3/Block.qml 0
+\snippet examples/tutorials/samegame/samegame3/Block.qml 0
\section2 A working game
This is what \c samegame.qml looks like now:
-\snippet declarative/tutorials/samegame/samegame3/samegame.qml 0
+\snippet examples/tutorials/samegame/samegame3/samegame.qml 0
The game works, but it's a little boring right now. Where are the smooth animated transitions? Where are the high scores?
If you were a QML expert you could have written these in the first iteration, but in this tutorial they've been saved
\contentspage QML Advanced Tutorial
\previouspage QML Advanced Tutorial 3 - Implementing the Game Logic
-\example declarative/tutorials/samegame/samegame4
+\example examples/tutorials/samegame/samegame4
\section2 Adding some flair
block will follow and animate its movement in a spring-like fashion towards the specified position (whose
values will be set by \c samegame.js).Here is the code added to \c BoomBlock.qml:
-\snippet declarative/tutorials/samegame/samegame4/content/BoomBlock.qml 1
+\snippet examples/tutorials/samegame/samegame4/content/BoomBlock.qml 1
The \c spring and \c damping values can be changed to modify the spring-like effect of the animation.
visible and invisible. To do this, we'll apply a \l Behavior on the \c opacity property of the \c Image
element in \c BoomBlock.qml:
-\snippet declarative/tutorials/samegame/samegame4/content/BoomBlock.qml 2
+\snippet examples/tutorials/samegame/samegame4/content/BoomBlock.qml 2
Note the \c{opacity: 0} which means the block is transparent when it is first created. We could set the opacity
in \c samegame.js when we create and destroy the blocks,
Finally, we'll add a cool-looking particle effect to the blocks when they are destroyed. To do this, we first add a \l Particles element in
\c BoomBlock.qml, like so:
-\snippet declarative/tutorials/samegame/samegame4/content/BoomBlock.qml 3
+\snippet examples/tutorials/samegame/samegame4/content/BoomBlock.qml 3
To fully understand this you should read the \l Particles documentation, but it's important to note that \c emissionRate is set
to zero so that particles are not emitted normally.
Also, we extend the \c dying State, which creates a burst of particles by calling the \c burst() method on the particles element. The code for the states now look
like this:
-\snippet declarative/tutorials/samegame/samegame4/content/BoomBlock.qml 4
+\snippet examples/tutorials/samegame/samegame4/content/BoomBlock.qml 4
Now the game is beautifully animated, with subtle (or not-so-subtle) animations added for all of the
player's actions. The end result is shown below, with a different set of images to demonstrate basic theming:
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
+\snippet examples/tutorials/samegame/samegame4/content/Dialog.qml 0
\dots 4
-\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 2
+\snippet examples/tutorials/samegame/samegame4/content/Dialog.qml 2
\dots 4
-\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 3
+\snippet examples/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
+\snippet examples/tutorials/samegame/samegame4/content/Dialog.qml 0
+\snippet examples/tutorials/samegame/samegame4/content/Dialog.qml 1
\dots 4
-\snippet declarative/tutorials/samegame/samegame4/content/Dialog.qml 3
+\snippet examples/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
+\snippet examples/tutorials/samegame/samegame4/samegame.qml 0
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
+\snippet examples/tutorials/samegame/samegame4/content/samegame.js 3
\dots 4
-\snippet declarative/tutorials/samegame/samegame4/content/samegame.js 4
+\snippet examples/tutorials/samegame/samegame4/content/samegame.js 4
\section3 Storing high scores offline
Here is the \c saveHighScore() function in \c samegame.js:
-\snippet declarative/tutorials/samegame/samegame4/content/samegame.js 2
+\snippet examples/tutorials/samegame/samegame4/content/samegame.js 2
First we call \c sendHighScore() (explained in the section below) if it is possible to send the high scores to an online database.
If the player enters a name, we send the data to the service using this code in \c samegame.js:
-\snippet declarative/tutorials/samegame/samegame4/content/samegame.js 1
+\snippet examples/tutorials/samegame/samegame4/content/samegame.js 1
The \l XMLHttpRequest in this code is the same as the \c XMLHttpRequest() as you'll find in standard browser JavaScript, and can be used in the same way to dynamically get XML
or QML from the web service to display the high scores. We don't worry about the response in this case - we just post the high
Tutorial chapters:
\list 1
-\li \l {declarative/tutorials/dynamicview/dynamicview1}{A Simple ListView and Delegate}
-\li \l {declarative/tutorials/dynamicview/dynamicview2}{Dragging View Items}
-\li \l {declarative/tutorials/dynamicview/dynamicview3}{Moving Dragged Items}
-\li \l {declarative/tutorials/dynamicview/dynamicview4}{Sorting Items}
+\li \l {examples/tutorials/dynamicview/dynamicview1}{A Simple ListView and Delegate}
+\li \l {examples/tutorials/dynamicview/dynamicview2}{Dragging View Items}
+\li \l {examples/tutorials/dynamicview/dynamicview3}{Moving Dragged Items}
+\li \l {examples/tutorials/dynamicview/dynamicview4}{Sorting Items}
\endlist
-All the code in this tutorial can be found in Qt's \c examples/declarative/tutorials/dynamicview
+All the code in this tutorial can be found in Qt's \c examples/examples/tutorials/dynamicview
directory.
*/
\previouspage QML Dynamic View Ordering Tutorial
\nextpage QML Dynamic View Ordering Tutorial 2 - Dragging View Items
-\example declarative/tutorials/dynamicview/dynamicview1
+\example examples/tutorials/dynamicview/dynamicview1
We begin our application by defining a ListView, a model which will provide data to the view, and a
delegate which provides a template for constructing items in the view.
The code for the ListView and delegate looks like this:
-\snippet declarative/tutorials/dynamicview/dynamicview1/dynamicview.qml 0
+\snippet examples/tutorials/dynamicview/dynamicview1/dynamicview.qml 0
The model is defined in a separate QML file which looks like this:
-\snippet declarative/tutorials/dynamicview/dynamicview1/PetsModel.qml 0
-\snippet declarative/tutorials/dynamicview/dynamicview1/PetsModel.qml 1
+\snippet examples/tutorials/dynamicview/dynamicview1/PetsModel.qml 0
+\snippet examples/tutorials/dynamicview/dynamicview1/PetsModel.qml 1
\section2 Walkthrough
The \c name, \c age, \c type, and \c size variables referenced in the delegate are sourced from
the model data. The names correspond to roles defined in the model.
-\snippet declarative/tutorials/dynamicview/dynamicview1/dynamicview.qml 1
+\snippet examples/tutorials/dynamicview/dynamicview1/dynamicview.qml 1
The second part of the application is the ListView itself to which we bind the model and delegate.
-\snippet declarative/tutorials/dynamicview/dynamicview1/dynamicview.qml 2
+\snippet examples/tutorials/dynamicview/dynamicview1/dynamicview.qml 2
*/
/*!
\previouspage QML Dynamic View Ordering Tutorial 1 - A Simple ListView and Delegate
\nextpage QML Dynamic View Ordering Tutorial 3 - Moving Dragged Items
-\example declarative/tutorials/dynamicview/dynamicview2
+\example examples/tutorials/dynamicview/dynamicview2
Now that we have a visible list of items we want to be able to interact with them. We'll start
by extending the delegate so the visible content can be dragged up and down the screen. The
updated delegate looks like this:
-\snippet declarative/tutorials/dynamicview/dynamicview2/dynamicview.qml 0
+\snippet examples/tutorials/dynamicview/dynamicview2/dynamicview.qml 0
\section2 Walkthrough
a container for the content item which is important as a delegate's root item is positioned by
the view and cannot be moved by other means.
-\snippet declarative/tutorials/dynamicview/dynamicview2/dynamicview.qml 1
-\snippet declarative/tutorials/dynamicview/dynamicview2/dynamicview.qml 2
+\snippet examples/tutorials/dynamicview/dynamicview2/dynamicview.qml 1
+\snippet examples/tutorials/dynamicview/dynamicview2/dynamicview.qml 2
Dragging the content item is enabled by binding it to the MouseArea's
\l {QtQuick2::MouseArea::drag.target}{drag.target} property. Because we still want the view to be
dragging an item. To make it more obvious to the user when an item can be dragged we'll change the
background color of the content item when the timeout has expired.
-\snippet declarative/tutorials/dynamicview/dynamicview2/dynamicview.qml 3
+\snippet examples/tutorials/dynamicview/dynamicview2/dynamicview.qml 3
The other thing we'll need to do before an item can be dragged is to unset any anchors on the
content item so it can be freely moved around. We do this in a state change that is triggered
when the delegate item is held, at the same time we can reparent the content item to the root item
so that is above other items in the stacking order and isn't obscured as it is dragged around.
-\snippet declarative/tutorials/dynamicview/dynamicview2/dynamicview.qml 4
+\snippet examples/tutorials/dynamicview/dynamicview2/dynamicview.qml 4
*/
\previouspage QML Dynamic View Ordering Tutorial 2 - Dragging View Items
\nextpage QML Dynamic View Ordering Tutorial 4 - Sorting Items
-\example declarative/tutorials/dynamicview/dynamicview3
+\example examples/tutorials/dynamicview/dynamicview3
The next step in our application to move items within the list as they're dragged so that we
can re-order the list. To achieve this we introduce three new elements to our application;
VisualDataModel, \l Drag and DropArea.
-\snippet declarative/tutorials/dynamicview/dynamicview3/dynamicview.qml 0
-\snippet declarative/tutorials/dynamicview/dynamicview3/dynamicview.qml 1
-\snippet declarative/tutorials/dynamicview/dynamicview3/dynamicview.qml 2
-\snippet declarative/tutorials/dynamicview/dynamicview3/dynamicview.qml 5
+\snippet examples/tutorials/dynamicview/dynamicview3/dynamicview.qml 0
+\snippet examples/tutorials/dynamicview/dynamicview3/dynamicview.qml 1
+\snippet examples/tutorials/dynamicview/dynamicview3/dynamicview.qml 2
+\snippet examples/tutorials/dynamicview/dynamicview3/dynamicview.qml 5
\section2 Walkthrough
the Drag attached property we can generate events that are sent to the scene graph whenever the item
it is attached to moves.
-\snippet declarative/tutorials/dynamicview/dynamicview3/dynamicview.qml 1
+\snippet examples/tutorials/dynamicview/dynamicview3/dynamicview.qml 1
Drag events are only sent while the active property is true, so in this example the first event
would be sent when the delegate was held with additional event sents when dragging. The
intersects another item, when a drag enters one of these DropAreas we can move the dragged item
to the index of the item it was dragged over.
-\snippet declarative/tutorials/dynamicview/dynamicview3/dynamicview.qml 3
+\snippet examples/tutorials/dynamicview/dynamicview3/dynamicview.qml 3
To move the items within the view we use a VisualDataModel. The VisualDataModel element is used by
the view elements to instantiate delegate items from model data and when constructed explicitly can
property of the view and bind the \l {QtQuick2::VisualDataModel::model}{model} and
\l {QtQuick2::VisualDataModel::delegate}{delegate} to the VisualDataModel.
-\snippet declarative/tutorials/dynamicview/dynamicview3/dynamicview.qml 4
+\snippet examples/tutorials/dynamicview/dynamicview3/dynamicview.qml 4
*/
\contentspage QML Dynamic View Ordering Tutorial
\previouspage QML Dynamic View Ordering Tutorial 3 - Moving Dragged Items
-\example declarative/tutorials/dynamicview/dynamicview4
+\example examples/tutorials/dynamicview/dynamicview4
Drag and drop isn't the only way items in a view can be re-ordered, using a VisualDataModel it is
also possible to sort items based on model data. To do that we extend our VisualDataModel instance
like this:
-\snippet declarative/tutorials/dynamicview/dynamicview4/dynamicview.qml 0
+\snippet examples/tutorials/dynamicview/dynamicview4/dynamicview.qml 0
\section2 Walkthrough
position in the items group. To do that we clear includeByDefault on the items group and set it on
a new group name 'unsorted'.
-\snippet declarative/tutorials/dynamicview/dynamicview4/dynamicview.qml 1
-\snippet declarative/tutorials/dynamicview/dynamicview4/dynamicview.qml 2
+\snippet examples/tutorials/dynamicview/dynamicview4/dynamicview.qml 1
+\snippet examples/tutorials/dynamicview/dynamicview4/dynamicview.qml 2
We sort the items by first finding the position in the items group to insert the first unsorted
item and then transfer the item to the items group before moving it to the pre-determined index and
handle we can access the same model data that is available in a delegate instance of that item and
compare against other items to determine relative position.
-\snippet declarative/tutorials/dynamicview/dynamicview4/dynamicview.qml 3
+\snippet examples/tutorials/dynamicview/dynamicview4/dynamicview.qml 3
The lessThan argument to the sort function is a comparsion function which will determine the order
of the list. In this example it can be one of the following:
-\snippet declarative/tutorials/dynamicview/dynamicview4/dynamicview.qml 4
+\snippet examples/tutorials/dynamicview/dynamicview4/dynamicview.qml 4
A sort is triggered whenever new items are added to the unsorted VisualDataGroup which we are
notified of by the \l {QtQuick2::VisualDataGroup::onChanged}{onChanged} handler. If no sort
function is currently selected we simply transfer all items from the unsorted group to the items
group, otherwise we call sort with the selected sort function.
-\snippet declarative/tutorials/dynamicview/dynamicview4/dynamicview.qml 5
+\snippet examples/tutorials/dynamicview/dynamicview4/dynamicview.qml 5
Finally when the selected sort order changes we can trigger a full re-sort of the list by moving
all items from the items group to the unsorted group, which will trigger the
items group in correct order. Note that the \l {QtQuick2::VisualDataGroup::onChanged}{onChanged}
handler will not be invoked recursively so there's no issue with it being invoked during a sort.
-\snippet declarative/tutorials/dynamicview/dynamicview4/dynamicview.qml 6
+\snippet examples/tutorials/dynamicview/dynamicview4/dynamicview.qml 6
*/
\brief A reusable switch component made in QML
This example shows how to create a reusable switch component in QML.
-The code for this example can be found in the \c examples/declarative/ui-components/slideswitch directory.
+The code for this example can be found in the \c examples/tutorials/ui-components/slideswitch directory.
The elements that compose the switch are:
\endlist
\section1 Switch.qml
-\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 0
+\snippet examples/tutorials/ui-components/slideswitch/content/Switch.qml 0
\section1 Walkthrough
\section2 Interface
-\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 1
+\snippet examples/tutorials/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.
the text will only be visible when the switch is on.
\section2 Images and user interaction
-\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 4
+\snippet examples/tutorials/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/ui-components/slideswitch/content/Switch.qml 5
+\snippet examples/tutorials/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
in the \c dorelease() function that is called in the \c onReleased property.
\section2 States
-\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 6
+\snippet examples/tutorials/ui-components/slideswitch/content/Switch.qml 6
We define the two states of the switch:
\list
We add two JavaScript functions to our switch:
-\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 2
+\snippet examples/tutorials/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/ui-components/slideswitch/content/Switch.qml 3
+\snippet examples/tutorials/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.
For more information on scripts see \l{JavaScript Expressions in QML}.
\section2 Transition
-\snippet examples/declarative/ui-components/slideswitch/content/Switch.qml 7
+\snippet examples/tutorials/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.
\section1 Usage
The switch can be used in a QML file, like this:
-\snippet examples/declarative/ui-components/slideswitch/slideswitch.qml 0
+\snippet examples/tutorials/ui-components/slideswitch/slideswitch.qml 0
*/
is the base class for all QPainter based items in the QML Scene Graph
framework.
- \snippet examples/declarative/painteditem/textballoons/textballoon.h 0
+ \snippet examples/quick/painteditem/textballoons/textballoon.h 0
To implement a QQuickPaintedItem you must implement QQuickPaintedIem's pure
virtual function \l {QQuickPaintedItem::}{paint()} which implements the
We have to be sure to initialize the rightAligned property for a
TextBalloon item.
- \snippet examples/declarative/painteditem/textballoons/textballoon.cpp 0
+ \snippet examples/quick/painteditem/textballoons/textballoon.cpp 0
Then we implement the \c paint() function which is automatically called by
the Scenegraph framework to paint the contents of the item. The function
paints the item in local coordinates.
- \snippet examples/declarative/painteditem/textballoons/textballoon.cpp 1
+ \snippet examples/quick/painteditem/textballoons/textballoon.cpp 1
We start with setting the pen and brush on the item to define the look of
the item. After that we start drawing. Note that the \l {QQuickPaintedItem::}{boundingRect()}
\section2 BalloonView
- \snippet examples/declarative/painteditem/textballoons/textballoons.qml 0
+ \snippet examples/quick/painteditem/textballoons/textballoons.qml 0
The balloonModel contains two elements at application start which will be
displayed by the balloonView. The balloonView alernates the TextBalloon
\section2 Controls
- \snippet examples/declarative/painteditem/textballoons/textballoons.qml 1
+ \snippet examples/quick/painteditem/textballoons/textballoons.qml 1
The controls part of the UI contains a rectangle with a MouseArea which
changes color when the mouse hovers over it. This control 'button' adds
color: "#545454"
width: 300; height: 300
+ //! [the dial in use]
// Dial with a slider to adjust it
Dial {
id: dial
anchors.centerIn: parent
value: slider.x * 100 / (container.width - 34)
}
+ //! [the dial in use]
Rectangle {
id: container
The following example shows a FolderListModel being used to provide a list
of QML files in a \l ListView:
- \snippet doc/src/snippets/qml/folderlistmodel.qml 0
+ \snippet qml/folderlistmodel.qml 0
\section1 Path Separators
The API can be used from JavaScript functions in your QML:
-\snippet declarative/sqllocalstorage/hello.qml 0
+\snippet qml/sqllocalstorage/hello.qml 0
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.
For example, if there is an XML document like this:
- \quotefile doc/src/snippets/qml/xmlrole.xml
+ \quotefile qml/xmlrole.xml
Here are some valid XPath expressions for XmlRole queries on this document:
- \snippet doc/src/snippets/qml/xmlrole.qml 0
+ \snippet qml/xmlrole.qml 0
\dots 4
- \snippet doc/src/snippets/qml/xmlrole.qml 1
+ \snippet qml/xmlrole.qml 1
See the \l{http://www.w3.org/TR/xpath20/}{W3C XPath 2.0 specification} for more information.
*/
sourcedirs += ..
-exampledirs += ../../../examples \
+exampledirs += ../../../ \
+ ../../../examples \
../ \
snippets
//![0]
import QtQuick 2.0
-Rectangle {
- width: 100; height: 100
- color: "red"
-
- NumberAnimation on x { to: 50; duration: 1000 }
+Text {
+ id: textElement
+ width: 200
+ height: 200
+ text: "Default text"
+ property string dynamicText: "Dynamic text"
+ onTextChanged: console.log(text)
}
//![0]
-
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Rectangle {
- id: window
- width: 120; height: 120
- color: "black"
-
- Rectangle { id: myRect; width: 50; height: 50; color: "red" }
-
- states: State {
- name: "reanchored"
-
- AnchorChanges {
- target: myRect
- anchors.top: window.top
- anchors.bottom: window.bottom
- }
- PropertyChanges {
- target: myRect
- anchors.topMargin: 10
- anchors.bottomMargin: 10
- }
- }
-
- MouseArea { anchors.fill: parent; onClicked: window.state = "reanchored" }
-}
-//![0]
-
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-// This snippet should be turned into an example and put in
-// examples/declarative/imageelements/animatedimage
-
-//! [document]
-import QtQuick 2.0
-
-Rectangle {
- width: animation.width; height: animation.height + 8
-
- AnimatedImage { id: animation; source: "animation.gif" }
-
- Rectangle {
- property int frames: animation.frameCount
-
- width: 4; height: 8
- x: (animation.width - width) * animation.currentFrame / frames
- y: animation.height
- color: "red"
- }
-}
-//! [document]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Rectangle {
- id: page
- color: "white"
- width: 180; height: 180
-
-//! [scaled border image]
-BorderImage {
- width: 180; height: 180
- border { left: 30; top: 30; right: 30; bottom: 30 }
- horizontalTileMode: BorderImage.Stretch
- verticalTileMode: BorderImage.Stretch
- source: "pics/borderframe.png"
-}
-//! [scaled border image]
-
- Rectangle {
- x: 30; y: 0
- width: 1; height: 180
- color: "gray"
- }
-
- Rectangle {
- x: 150; y: 0
- width: 1; height: 180
- color: "gray"
- }
-
- Rectangle {
- x: 0; y: 30
- width: 180; height: 1
- color: "gray"
- }
-
- Rectangle {
- x: 0; y: 150
- width: 180; height: 1
- color: "gray"
- }
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Rectangle {
- id: page
- color: "white"
- width: 180; height: 180
-
-//! [tiled border image]
-BorderImage {
- width: 180; height: 180
- border { left: 30; top: 30; right: 30; bottom: 30 }
- horizontalTileMode: BorderImage.Repeat
- verticalTileMode: BorderImage.Repeat
- source: "pics/borderframe.png"
-}
-//! [tiled border image]
-
- Rectangle {
- x: 30; y: 0
- width: 1; height: 180
- color: "gray"
- }
-
- Rectangle {
- x: 150; y: 0
- width: 1; height: 180
- color: "gray"
- }
-
- Rectangle {
- x: 0; y: 30
- width: 180; height: 1
- color: "gray"
- }
-
- Rectangle {
- x: 0; y: 150
- width: 180; height: 1
- color: "gray"
- }
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Rectangle {
- id: page
- color: "white"
- width: 120; height: 120
-
-//! [normal image]
-Image {
- source: "pics/borderframe.png"
-}
-//! [normal image]
-
- Rectangle {
- x: 30; y: 0
- width: 1; height: 120
- color: "gray"
- }
-
- Rectangle {
- x: 90; y: 0
- width: 1; height: 120
- color: "gray"
- }
-
- Rectangle {
- x: 0; y: 30
- width: 200; height: 1
- color: "gray"
- }
-
- Rectangle {
- x: 0; y: 90
- width: 200; height: 1
- color: "gray"
- }
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-//! [document]
-Column {
- spacing: 2
-
- Rectangle { color: "red"; width: 50; height: 50 }
- Rectangle { id: greenRect; color: "green"; width: 20; height: 50 }
- Rectangle { color: "blue"; width: 50; height: 20 }
-
- move: Transition {
- NumberAnimation { properties: "x,y"; duration: 1000 }
- }
-
- focus: true
- Keys.onSpacePressed: greenRect.visible = !greenRect.visible
-}
-//! [document]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-//! [document]
-Column {
- spacing: 2
-
- Rectangle { color: "red"; width: 50; height: 50 }
- Rectangle { color: "green"; width: 20; height: 50 }
- Rectangle { color: "blue"; width: 50; height: 20 }
-}
-//! [document]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Item {
- width: 200; height: 200
-
- DropArea {
- x: 75; y: 75
- width: 50; height: 50
-
- Rectangle {
- anchors.fill: parent
- color: "green"
-
- visible: parent.containsDrag
- }
- }
-
- Rectangle {
- x: 10; y: 10
- width: 20; height: 20
- color: "red"
-
- Drag.active: dragArea.drag.active
- Drag.hotSpot.x: 10
- Drag.hotSpot.y: 10
-
- MouseArea {
- id: dragArea
- anchors.fill: parent
-
- drag.target: parent
- }
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-//![0]
-Rectangle {
- width: 200; height: 200
-
- Flickable {
- id: flickable
-//![0]
- anchors.fill: parent
- contentWidth: image.width; contentHeight: image.height
-
- Image { id: image; source: "pics/qt.png" }
-//![1]
- }
-
- Rectangle {
- id: scrollbar
- anchors.right: flickable.right
- y: flickable.visibleArea.yPosition * flickable.height
- width: 10
- height: flickable.visibleArea.heightRatio * flickable.height
- color: "black"
- }
-}
-//![1]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [0]
-import QtQuick 2.0
-
-Flipable {
- id: flipable
- width: 240
- height: 240
-
- property bool flipped: false
-
- front: Image { source: "front.png"; anchors.centerIn: parent }
- back: Image { source: "back.png"; anchors.centerIn: parent }
-
- transform: Rotation {
- id: rotation
- origin.x: flipable.width/2
- origin.y: flipable.height/2
- axis.x: 0; axis.y: 1; axis.z: 0 // set axis.y to 1 to rotate around y-axis
- angle: 0 // the default angle
- }
-
- states: State {
- name: "back"
- PropertyChanges { target: rotation; angle: 180 }
- when: flipable.flipped
- }
-
- transitions: Transition {
- NumberAnimation { target: rotation; property: "angle"; duration: 4000 }
- }
-
- MouseArea {
- anchors.fill: parent
- onClicked: flipable.flipped = !flipable.flipped
- }
-}
-//! [0]
-
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [document]
-import QtQuick 2.0
-
-Rectangle {
- color: "lightblue"
- width: 300; height: 200
-
-//! [flow item]
- Flow {
- anchors.fill: parent
- anchors.margins: 4
- spacing: 10
-
- Text { text: "Text"; font.pixelSize: 40 }
- Text { text: "items"; font.pixelSize: 40 }
- Text { text: "flowing"; font.pixelSize: 40 }
- Text { text: "inside"; font.pixelSize: 40 }
- Text { text: "a"; font.pixelSize: 40 }
- Text { text: "Flow"; font.pixelSize: 40 }
- Text { text: "item"; font.pixelSize: 40 }
- }
-//! [flow item]
-}
-//! [document]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-//![code]
-Rectangle {
- width: 100; height: 100
- gradient: Gradient {
- GradientStop { position: 0.0; color: "red" }
- GradientStop { position: 0.33; color: "yellow" }
- GradientStop { position: 1.0; color: "green" }
- }
-}
-//![code]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [document]
-import QtQuick 2.0
-
-Grid {
- columns: 3
- spacing: 2
- Rectangle { color: "red"; width: 50; height: 50 }
- Rectangle { color: "green"; width: 20; height: 50 }
- Rectangle { color: "blue"; width: 50; height: 20 }
- Rectangle { color: "cyan"; width: 50; height: 50 }
- Rectangle { color: "magenta"; width: 10; height: 10 }
-}
-//! [document]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//![0]
-import QtQuick 2.0
-
-ListModel {
-
- ListElement {
- name: "Jim Williams"
- portrait: "pics/portrait.png"
- }
- ListElement {
- name: "John Brown"
- portrait: "pics/portrait.png"
- }
- ListElement {
- name: "Bill Smyth"
- portrait: "pics/portrait.png"
- }
- ListElement {
- name: "Sam Wise"
- portrait: "pics/portrait.png"
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//![import]
-import QtQuick 2.0
-//![import]
-
-Rectangle {
- width: childrenRect.width; height: childrenRect.height
-
-Row {
-
-//![classdocs simple]
-GridView {
- width: 300; height: 200
-
- model: ContactModel {}
- delegate: Column {
- Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
- Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
- }
-}
-//![classdocs simple]
-
-
-//![classdocs advanced]
-Rectangle {
- width: 300; height: 200
-
- Component {
- id: contactDelegate
- Item {
- width: grid.cellWidth; height: grid.cellHeight
- Column {
- anchors.fill: parent
- Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
- Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
- }
- }
- }
-
- GridView {
- id: grid
- anchors.fill: parent
- cellWidth: 80; cellHeight: 80
-
- model: ContactModel {}
- delegate: contactDelegate
- highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
- focus: true
- }
-}
-//![classdocs advanced]
-
-//![delayRemove]
-Component {
- id: delegate
- Item {
- GridView.onRemove: SequentialAnimation {
- PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: true }
- NumberAnimation { target: wrapper; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
- PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: false }
- }
- }
-}
-//![delayRemove]
-
-//![highlightFollowsCurrentItem]
-Component {
- id: highlight
- Rectangle {
- width: view.cellWidth; height: view.cellHeight
- color: "lightsteelblue"; radius: 5
- x: view.currentItem.x
- y: view.currentItem.y
- Behavior on x { SpringAnimation { spring: 3; damping: 0.2 } }
- Behavior on y { SpringAnimation { spring: 3; damping: 0.2 } }
- }
-}
-
-GridView {
- id: view
- width: 300; height: 200
- cellWidth: 80; cellHeight: 80
-
- model: ContactModel {}
- delegate: Column {
- Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
- Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
- }
-
- highlight: highlight
- highlightFollowsCurrentItem: false
- focus: true
-}
-//![highlightFollowsCurrentItem]
-
-//![isCurrentItem]
-GridView {
- width: 300; height: 200
- cellWidth: 80; cellHeight: 80
-
- Component {
- id: contactsDelegate
- Rectangle {
- id: wrapper
- width: 80
- height: 80
- color: GridView.isCurrentItem ? "black" : "red"
- Text {
- id: contactInfo
- text: name + ": " + number
- color: wrapper.GridView.isCurrentItem ? "red" : "black"
- }
- }
- }
-
- model: ContactModel {}
- delegate: contactsDelegate
- focus: true
-}
-//![isCurrentItem]
-
-}
-
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Grid {
- width: 100; height: 100
- columns: 2
-
- Rectangle {
- id: topLeft
- width: 50; height: 50
- color: focus ? "red" : "lightgray"
- focus: true
-
- KeyNavigation.right: topRight
- KeyNavigation.down: bottomLeft
- }
-
- Rectangle {
- id: topRight
- width: 50; height: 50
- color: focus ? "red" : "lightgray"
-
- KeyNavigation.left: topLeft
- KeyNavigation.down: bottomRight
- }
-
- Rectangle {
- id: bottomLeft
- width: 50; height: 50
- color: focus ? "red" : "lightgray"
-
- KeyNavigation.right: bottomRight
- KeyNavigation.up: topLeft
- }
-
- Rectangle {
- id: bottomRight
- width: 50; height: 50
- color: focus ? "red" : "lightgray"
-
- KeyNavigation.left: bottomLeft
- KeyNavigation.up: topRight
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Item {
- width: 400; height: 400
-
-//! [key item]
-Item {
- anchors.fill: parent
- focus: true
- Keys.onLeftPressed: console.log("move left")
-}
-//! [key item]
-
-Text {
- anchors.fill: parent
- text: "Press a cursor key"
- horizontalAlignment: Text.AlignHCenter
- verticalAlignment: Text.AlignVCenter
-}
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Item {
- width: 400; height: 400
-
-//! [key item]
-Item {
- anchors.fill: parent
- focus: true
- Keys.onPressed: {
- if (event.key == Qt.Key_Left) {
- console.log("move left");
- event.accepted = true;
- }
- }
-}
-//! [key item]
-
-Text {
- anchors.fill: parent
- text: "Press a cursor key"
- horizontalAlignment: Text.AlignHCenter
- verticalAlignment: Text.AlignVCenter
-}
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Rectangle {
- LayoutMirroring.enabled: true
- LayoutMirroring.childrenInherit: true
-
- width: 300; height: 50
- color: "yellow"
- border.width: 1
-
- Row {
- anchors { left: parent.left; margins: 5 }
- y: 5; spacing: 5
-
- Repeater {
- model: 5
-
- Rectangle {
- color: "red"
- opacity: (5 - index) / 5
- width: 40; height: 40
-
- Text {
- text: index + 1
- anchors.centerIn: parent
- }
- }
- }
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//![0]
-import QtQuick 2.0
-
-ListModel {
- ListElement {
- name: "Bill Smith"
- number: "555 3264"
- }
- ListElement {
- name: "John Brown"
- number: "555 8426"
- }
- ListElement {
- name: "Sam Wise"
- number: "555 0473"
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//![import]
-import QtQuick 2.0
-//![import]
-
-Item {
-
-//![classdocs simple]
-ListView {
- width: 180; height: 200
-
- model: ContactModel {}
- delegate: Text {
- text: name + ": " + number
- }
-}
-//![classdocs simple]
-
-//![classdocs advanced]
-Rectangle {
- width: 180; height: 200
-
- Component {
- id: contactDelegate
- Item {
- width: 180; height: 40
- Column {
- Text { text: '<b>Name:</b> ' + name }
- Text { text: '<b>Number:</b> ' + number }
- }
- }
- }
-
- ListView {
- anchors.fill: parent
- model: ContactModel {}
- delegate: contactDelegate
- highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
- focus: true
- }
-}
-//![classdocs advanced]
-
-//![delayRemove]
-Component {
- id: delegate
- Item {
- ListView.onRemove: SequentialAnimation {
- PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: true }
- NumberAnimation { target: wrapper; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
- PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: false }
- }
- }
-}
-//![delayRemove]
-
-//![highlightFollowsCurrentItem]
-Component {
- id: highlight
- Rectangle {
- width: 180; height: 40
- color: "lightsteelblue"; radius: 5
- y: list.currentItem.y
- Behavior on y {
- SpringAnimation {
- spring: 3
- damping: 0.2
- }
- }
- }
-}
-
-ListView {
- id: list
- width: 180; height: 200
- model: ContactModel {}
- delegate: Text { text: name }
-
- highlight: highlight
- highlightFollowsCurrentItem: false
- focus: true
-}
-//![highlightFollowsCurrentItem]
-
-//![isCurrentItem]
-ListView {
- width: 180; height: 200
-
- Component {
- id: contactsDelegate
- Rectangle {
- id: wrapper
- width: 180
- height: contactInfo.height
- color: ListView.isCurrentItem ? "black" : "red"
- Text {
- id: contactInfo
- text: name + ": " + number
- color: wrapper.ListView.isCurrentItem ? "red" : "black"
- }
- }
- }
-
- model: ContactModel {}
- delegate: contactsDelegate
- focus: true
-}
-//![isCurrentItem]
-
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:LGPL$
-** GNU Lesser General Public License Usage
-** 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.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU General
-** Public License version 3.0 as published by the Free Software Foundation
-** and appearing in the file LICENSE.GPL included in the packaging of this
-** file. Please review the following information to ensure the GNU General
-** Public License version 3.0 requirements will be met:
-** http://www.gnu.org/copyleft/gpl.html.
-**
-** Other Usage
-** Alternatively, this file may be used in accordance with the terms and
-** conditions contained in a signed written agreement between you and Nokia.
-**
-**
-**
-**
-**
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Item {
- Item {
- focus: true
- Keys.onPressed: {
- console.log("Loaded item captured:", event.text);
- event.accepted = true;
- }
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:LGPL$
-** GNU Lesser General Public License Usage
-** 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.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU General
-** Public License version 3.0 as published by the Free Software Foundation
-** and appearing in the file LICENSE.GPL included in the packaging of this
-** file. Please review the following information to ensure the GNU General
-** Public License version 3.0 requirements will be met:
-** http://www.gnu.org/copyleft/gpl.html.
-**
-** Other Usage
-** Alternatively, this file may be used in accordance with the terms and
-** conditions contained in a signed written agreement between you and Nokia.
-**
-**
-**
-**
-**
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Rectangle {
- id: myItem
- signal message(string msg)
-
- width: 100; height: 100
-
- MouseArea {
- anchors.fill: parent
- onClicked: myItem.message("clicked!")
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:LGPL$
-** GNU Lesser General Public License Usage
-** 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.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU General
-** Public License version 3.0 as published by the Free Software Foundation
-** and appearing in the file LICENSE.GPL included in the packaging of this
-** file. Please review the following information to ensure the GNU General
-** Public License version 3.0 requirements will be met:
-** http://www.gnu.org/copyleft/gpl.html.
-**
-** Other Usage
-** Alternatively, this file may be used in accordance with the terms and
-** conditions contained in a signed written agreement between you and Nokia.
-**
-**
-**
-**
-**
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Item {
- width: 100; height: 100
-
- Loader {
- id: myLoader
- source: "MyItem.qml"
- }
-
- Connections {
- target: myLoader.item
- onMessage: console.log(msg)
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:LGPL$
-** GNU Lesser General Public License Usage
-** 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.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU General
-** Public License version 3.0 as published by the Free Software Foundation
-** and appearing in the file LICENSE.GPL included in the packaging of this
-** file. Please review the following information to ensure the GNU General
-** Public License version 3.0 requirements will be met:
-** http://www.gnu.org/copyleft/gpl.html.
-**
-** Other Usage
-** Alternatively, this file may be used in accordance with the terms and
-** conditions contained in a signed written agreement between you and Nokia.
-**
-**
-**
-**
-**
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Rectangle {
- width: 200; height: 200
-
- Loader {
- id: loader
- focus: true
- }
-
- MouseArea {
- anchors.fill: parent
- onClicked: loader.source = "KeyReader.qml"
- }
-
- Keys.onPressed: {
- console.log("Captured:", event.text);
- }
-}
-//![0]
-
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:LGPL$
-** GNU Lesser General Public License Usage
-** 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.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU General
-** Public License version 3.0 as published by the Free Software Foundation
-** and appearing in the file LICENSE.GPL included in the packaging of this
-** file. Please review the following information to ensure the GNU General
-** Public License version 3.0 requirements will be met:
-** http://www.gnu.org/copyleft/gpl.html.
-**
-** Other Usage
-** Alternatively, this file may be used in accordance with the terms and
-** conditions contained in a signed written agreement between you and Nokia.
-**
-**
-**
-**
-**
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Item {
- width: 200; height: 200
-
- Loader { id: pageLoader }
-
- MouseArea {
- anchors.fill: parent
- onClicked: pageLoader.source = "Page1.qml"
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:LGPL$
-** GNU Lesser General Public License Usage
-** 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.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU General
-** Public License version 3.0 as published by the Free Software Foundation
-** and appearing in the file LICENSE.GPL included in the packaging of this
-** file. Please review the following information to ensure the GNU General
-** Public License version 3.0 requirements will be met:
-** http://www.gnu.org/copyleft/gpl.html.
-**
-** Other Usage
-** Alternatively, this file may be used in accordance with the terms and
-** conditions contained in a signed written agreement between you and Nokia.
-**
-**
-**
-**
-**
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Item {
- width: 200; height: 200
-
- Loader {
- // position the Loader in the center of the parent
- anchors.centerIn: parent
- sourceComponent: rect
- }
-
- Component {
- id: rect
- Rectangle {
- width: 50
- height: 50
- color: "red"
- }
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:LGPL$
-** GNU Lesser General Public License Usage
-** 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.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU General
-** Public License version 3.0 as published by the Free Software Foundation
-** and appearing in the file LICENSE.GPL included in the packaging of this
-** file. Please review the following information to ensure the GNU General
-** Public License version 3.0 requirements will be met:
-** http://www.gnu.org/copyleft/gpl.html.
-**
-** Other Usage
-** Alternatively, this file may be used in accordance with the terms and
-** conditions contained in a signed written agreement between you and Nokia.
-**
-**
-**
-**
-**
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Item {
- width: 200; height: 200
-
- Loader {
- // Explicitly set the size of the Loader to the parent item's size
- anchors.fill: parent
- sourceComponent: rect
- }
-
- Component {
- id: rect
- Rectangle {
- width: 50
- height: 50
- color: "red"
- }
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [import]
-import QtQuick 2.0
-//! [import]
-
-Rectangle {
- width: childrenRect.width
- height: childrenRect.height
-
- Row {
- //! [intro]
- Rectangle {
- width: 100; height: 100
- color: "green"
-
- MouseArea {
- anchors.fill: parent
- onClicked: { parent.color = 'red' }
- }
- }
- //! [intro]
-
- //! [intro-extended]
- Rectangle {
- width: 100; height: 100
- color: "green"
-
- MouseArea {
- anchors.fill: parent
- acceptedButtons: Qt.LeftButton | Qt.RightButton
- onClicked: {
- if (mouse.button == Qt.RightButton)
- parent.color = 'blue';
- else
- parent.color = 'red';
- }
- }
- }
- //! [intro-extended]
-
- //! [drag]
- Rectangle {
- id: container
- width: 600; height: 200
-
- Rectangle {
- id: rect
- width: 50; height: 50
- color: "red"
- opacity: (600.0 - rect.x) / 600
-
- MouseArea {
- anchors.fill: parent
- drag.target: rect
- drag.axis: Drag.XAxis
- drag.minimumX: 0
- drag.maximumX: container.width - rect.width
- }
- }
- }
- //! [drag]
-
- //! [mousebuttons]
- Text {
- text: mouseArea.pressedButtons & Qt.RightButton ? "right" : ""
- horizontalAlignment: Text.AlignHCenter
- verticalAlignment: Text.AlignVCenter
-
- MouseArea {
- id: mouseArea
- anchors.fill: parent
- acceptedButtons: Qt.LeftButton | Qt.RightButton
- }
- }
- //! [mousebuttons]
-
- }
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [dragfilter]
-import QtQuick 2.0
-
-Rectangle {
- width: 480
- height: 320
- Rectangle {
- x: 30; y: 30
- width: 300; height: 240
- color: "lightsteelblue"
-
- MouseArea {
- anchors.fill: parent
- drag.target: parent;
- drag.axis: "XAxis"
- drag.minimumX: 30
- drag.maximumX: 150
- drag.filterChildren: true
-
- Rectangle {
- color: "yellow"
- x: 50; y : 50
- width: 100; height: 100
- MouseArea {
- anchors.fill: parent
- onClicked: console.log("Clicked")
- }
- }
- }
- }
-}
-//! [dragfilter]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Rectangle {
- width: 400; height: 400
- MultiPointTouchArea {
- anchors.fill: parent
- touchPoints: [
- TouchPoint { id: point1 },
- TouchPoint { id: point2 }
- ]
- }
-
- Rectangle {
- width: 30; height: 30
- color: "green"
- x: point1.x
- y: point1.y
- }
-
- Rectangle {
- width: 30; height: 30
- color: "yellow"
- x: point2.x
- y: point2.y
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Item {
- width: 200; height: 100
-
- Rectangle {
- id: redRect
- width: 100; height: 100
- color: "red"
- }
-
- Rectangle {
- id: blueRect
- x: redRect.width
- width: 50; height: 50
- color: "blue"
-
- states: State {
- name: "reparented"
- ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }
- }
-
- transitions: Transition {
- ParentAnimation {
- NumberAnimation { properties: "x,y"; duration: 1000 }
- }
- }
-
- MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" }
- }
-}
-//![0]
-
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-//![0]
-Path {
- startX: 0; startY: 100
-
- PathArc {
- relativeX: 50; y: 100
- radiusX: 25; radiusY: 15
- }
- PathArc {
- relativeX: 50; y: 100
- radiusX: 25; radiusY: 25
- }
- PathArc {
- relativeX: 50; y: 100
- radiusX: 25; radiusY: 50
- }
- PathArc {
- relativeX: 50; y: 100
- radiusX: 50; radiusY: 100
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//![0]
-import QtQuick 2.0
-
-Canvas {
- width: 400; height: 200
-
- Path {
- id: myPath
- startX: 0; startY: 100
-
- PathCurve { x: 75; y: 75 }
- PathCurve { x: 200; y: 150 }
- PathCurve { x: 325; y: 25 }
- PathCurve { x: 400; y: 100 }
- }
-
- onPaint: {
- context.strokeStyle = Qt.rgba(.4,.6,.8);
- context.path = myPath;
- context.stroke();
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-//![0]
-Path {
- startX: 0; startY: 100
- PathArc {
- x: 100; y: 200
- radiusX: 100; radiusY: 100
- direction: PathArc.Clockwise
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Rectangle {
- width: 400
- height: 400
-
- PathInterpolator {
- id: motionPath
-
- path: Path {
- startX: 0; startY: 0
-
- PathCubic {
- x: 350; y: 350
-
- control1X: 350; control1Y: 0
- control2X: 0; control2Y: 350
- }
- }
-
- NumberAnimation on progress { from: 0; to: 1; duration: 2000 }
- }
-
- Rectangle {
- width: 50; height: 50
- color: "green"
-
- //bind our attributes to follow the path as progress changes
- x: motionPath.x
- y: motionPath.y
- rotation: motionPath.angle
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//![0]
-import QtQuick 2.0
-
-ListModel {
- ListElement {
- name: "Bill Jones"
- icon: "pics/qtlogo.png"
- }
- ListElement {
- name: "Jane Doe"
- icon: "pics/qtlogo.png"
- }
- ListElement {
- name: "John Smith"
- icon: "pics/qtlogo.png"
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [0]
-import QtQuick 2.0
-
-Rectangle {
- width: 240; height: 200
-
-//! [1]
- Component {
- id: delegate
- Item {
- width: 80; height: 80
- scale: PathView.iconScale
- opacity: PathView.iconOpacity
- Column {
- Image { anchors.horizontalCenter: nameText.horizontalCenter; width: 64; height: 64; source: icon }
- Text { id: nameText; text: name; font.pointSize: 16 }
- }
- }
- }
-//! [1]
-
-//! [2]
- PathView {
- anchors.fill: parent
- model: ContactModel {}
- delegate: delegate
- path: Path {
- startX: 120; startY: 100
- PathAttribute { name: "iconScale"; value: 1.0 }
- PathAttribute { name: "iconOpacity"; value: 1.0 }
- PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
- PathAttribute { name: "iconScale"; value: 0.3 }
- PathAttribute { name: "iconOpacity"; value: 0.5 }
- PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
- }
- }
-//! [2]
-}
-//! [0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [0]
-import QtQuick 2.0
-
-Rectangle {
- width: 240; height: 200
-
-//! [1]
- Component {
- id: delegate
- Column {
- id: wrapper
- Image {
- anchors.horizontalCenter: nameText.horizontalCenter
- width: 64; height: 64
- source: icon
- }
- Text {
- id: nameText
- text: name
- font.pointSize: 16
- color: wrapper.PathView.isCurrentItem ? "red" : "black"
- }
- }
- }
-//! [1]
-
-//! [2]
- PathView {
- anchors.fill: parent
- model: ContactModel {}
- delegate: delegate
- path: Path {
- startX: 120; startY: 100
- PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
- PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
- }
- }
-//! [2]
-}
-//! [0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.0
-
-Row {
-
- Item {
- width: 400; height: 400
-
- Rectangle {
- id: rect
- width: 200; height: 100
- color: "red"
-
- states: State {
- name: "rotated"
- PropertyChanges { target: rect; rotation: 180; transformOrigin: Item.BottomRight }
- }
-
- //! [sequential]
- transitions: Transition {
- SequentialAnimation {
- PropertyAction { target: rect; property: "transformOrigin" }
- RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
- }
- }
- //! [sequential]
-
- MouseArea {
- anchors.fill: parent
- onClicked: rect.state = "rotated"
- }
- }
- }
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.0
-
-Row {
-
- //![transition]
- Item {
- width: 400; height: 400
-
- Rectangle {
- id: rect
- width: 200; height: 100
- color: "red"
-
- states: State {
- name: "rotated"
- PropertyChanges { target: rect; rotation: 180; transformOrigin: Item.BottomRight }
- }
-
- transitions: Transition {
- RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
- }
-
- MouseArea {
- anchors.fill: parent
- onClicked: rect.state = "rotated"
- }
- }
- }
- //![transition]
-
- Item {
- width: 300; height: 300
-
- Image { id: img; source: "pics/qt.png" }
-
- //![standalone]
- SequentialAnimation {
- PropertyAction { target: img; property: "smooth"; value: "true" }
- NumberAnimation { target: img; property: "width"; to: 300; duration: 1000 }
- PropertyAction { target: img; property: "smooth"; value: "false" }
- }
- //![standalone]
- }
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Row {
-
-//![transition]
-Rectangle {
- id: rect
- width: 100; height: 100
- color: "red"
-
- //! [single state]
- states: State {
- name: "moved"
- PropertyChanges { target: rect; x: 50 }
- }
- //! [single state]
-
- transitions: Transition {
- PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
- }
-}
-//![transition]
-
-//![behavior]
-Rectangle {
- width: 100; height: 100
- color: "red"
-
- Behavior on x { PropertyAnimation {} }
-
- MouseArea { anchors.fill: parent; onClicked: parent.x = 50 }
-}
-//![behavior]
-
-//![propertyvaluesource]
-Rectangle {
- width: 100; height: 100
- color: "red"
-
- SequentialAnimation on x {
- loops: Animation.Infinite
- PropertyAnimation { to: 50 }
- PropertyAnimation { to: 0 }
- }
-}
-//![propertyvaluesource]
-
- //![standalone]
- Rectangle {
- id: theRect
- width: 100; height: 100
- color: "red"
-
- // this is a standalone animation, it's not running by default
- PropertyAnimation { id: animation; target: theRect; property: "width"; to: 30; duration: 500 }
-
- MouseArea { anchors.fill: parent; onClicked: animation.running = true }
- }
- //![standalone]
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![import]
-import QtQuick 2.0
-//![import]
-
-Column {
-
-//![0]
-Item {
- id: container
- width: 300; height: 300
-
- Rectangle {
- id: rect
- width: 100; height: 100
- color: "red"
-
- MouseArea {
- id: mouseArea
- anchors.fill: parent
- }
-
- states: State {
- name: "resized"; when: mouseArea.pressed
- PropertyChanges { target: rect; color: "blue"; height: container.height }
- }
- }
-}
-//![0]
-
-//![reset]
-Rectangle {
- width: 300; height: 200
-
- Text {
- id: myText
- width: 50
- wrapMode: Text.WordWrap
- text: "a text string that is longer than 50 pixels"
-
- states: State {
- name: "widerText"
- PropertyChanges { target: myText; width: undefined }
- }
- }
-
- MouseArea {
- anchors.fill: parent
- onClicked: myText.state = "widerText"
- }
-}
-//![reset]
-}
**
****************************************************************************/
-//![0]
import QtQuick 2.0
-Rectangle {
- id: rect
- width: 100; height: 100
- color: "red"
+//![0]
+Item {
+ property bool someCondition: true
+ property int edgePosition
- SequentialAnimation {
- running: true
- NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 }
- NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 }
+ Component.onCompleted: {
+ if (someCondition == true) {
+ // bind to the result of the binding expression passed to Qt.binding()
+ edgePosition = Qt.binding(function() { return x + width })
+ }
}
}
//![0]
-
**
****************************************************************************/
-//![0]
import QtQuick 2.0
+//![0]
Item {
- id: container
- width: 200; height: 200
+ id: root
+ property string dynamicText: "Root text"
- Rectangle {
- id: myRect
- width: 100; height: 100
- color: "red"
- }
+ Component.onCompleted: {
+ var c = Qt.createComponent("DynamicText.qml")
- states: State {
- name: "reanchored"
- AnchorChanges { target: myRect; anchors.right: container.right }
- }
+ var obj1 = c.createObject(root, { 'text': Qt.binding(function() { return dynamicText + ' extra text' }) })
+ root.dynamicText = "Modified root text"
- transitions: Transition {
- // smoothly reanchor myRect and move into new position
- AnchorAnimation { duration: 1000 }
+ var obj2 = c.createObject(root, { 'text': Qt.binding(function() { return this.dynamicText + ' extra text' }) })
+ obj2.dynamicText = "Modified text element text"
}
-
- Component.onCompleted: container.state = "reanchored"
}
//![0]
** $QT_END_LICENSE$
**
****************************************************************************/
-//![0]
+
import QtQuick 2.0
+//![0]
Item {
- width: 200; height: 100
+ id: root
+ property string dynamicText: "Root text"
- Rectangle {
- id: redRect
- width: 100; height: 100
- color: "red"
+ Loader {
+ id: loaderOne
+ onLoaded: root.dynamicText = "Modified root text"
}
- Rectangle {
- id: blueRect
- x: redRect.width
- width: 50; height: 50
- color: "blue"
-
- states: State {
- name: "reparented"
- ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }
- }
+ Loader {
+ id: loaderTwo
+ onLoaded: item.dynamicText = "Modified dynamic text"
+ }
- MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" }
+ Component.onCompleted: {
+ loaderOne.setSource("DynamicText.qml", { 'text': Qt.binding(function() { return dynamicText + ' extra text' }) })
+ loaderTwo.setSource("DynamicText.qml", { 'text': Qt.binding(function() { return this.dynamicText + ' extra text' }) })
}
}
//![0]
-
**
****************************************************************************/
-//![0]
import QtQuick 2.0
-Rectangle {
- id: rect
- width: 100; height: 100
- color: "red"
+//![0]
+Item {
+ width: 50
+ property var storedBindings: [ Qt.binding(function() { return x + width }) ] // stored
+ property int a: Qt.binding(function() { return x + width }) // error!
+ property int b
- ParallelAnimation {
- running: true
- NumberAnimation { target: rect; property: "x"; to: 50; duration: 1000 }
- NumberAnimation { target: rect; property: "y"; to: 50; duration: 1000 }
+ Component.onCompleted: {
+ b = storedBindings[0] // causes binding assignment
}
}
//![0]
-
--- /dev/null
+<!DOCTYPE RCC>
+<RCC version="1.0">
+
+<qresource prefix="/">
+ <file>main.qml</file>
+ <file>images/background.png</file>
+</qresource>
+
+</RCC>
+
--- /dev/null
+QT += qml
+
+SOURCES += main.cpp
+RESOURCES += example.qrc
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Item {
- width: 100; height: 200
-
-Item {
- x: 10; y: 10
- width: 80; height: 180
-
-//! [rectangles]
-Rectangle {
- color: "#00B000"
- width: 80; height: 80
-}
-
-Rectangle {
- color: "steelblue"
- y: 100; width: 80; height: 80
-}
-//! [rectangles]
-}
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Item {
- width: 100; height: 300
-
-Item {
- x: 10; y: 10
- width: 80; height: 280
-
-//! [rectangles]
-Rectangle {
- y: 0; width: 80; height: 80
- color: "lightsteelblue"
-}
-
-Rectangle {
- y: 100; width: 80; height: 80
- gradient: Gradient {
- GradientStop { position: 0.0; color: "lightsteelblue" }
- GradientStop { position: 1.0; color: "blue" }
- }
-}
-
-Rectangle {
- y: 200; width: 80; height: 80
- rotation: 90
- gradient: Gradient {
- GradientStop { position: 0.0; color: "lightsteelblue" }
- GradientStop { position: 1.0; color: "blue" }
- }
-}
-//! [rectangles]
-}
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [import]
-import QtQuick 2.0
-//! [import]
-
-Row {
-
-//! [simple]
-Row {
- Repeater {
- model: 3
- Rectangle {
- width: 100; height: 40
- border.width: 1
- color: "yellow"
- }
- }
-}
-//! [simple]
-
-//! [index]
-Column {
- Repeater {
- model: 10
- Text { text: "I'm item " + index }
- }
-}
-//! [index]
-
-//! [modeldata]
-Column {
- Repeater {
- model: ["apples", "oranges", "pears"]
- Text { text: "Data: " + modelData }
- }
-}
-//! [modeldata]
-
-//! [layout]
-Row {
- Rectangle { width: 10; height: 20; color: "red" }
- Repeater {
- model: 10
- Rectangle { width: 20; height: 20; radius: 10; color: "green" }
- }
- Rectangle { width: 10; height: 20; color: "blue" }
-}
-//! [layout]
-
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-import "righttoleft"
-
-Column {
- width: 200
-//![0]
-// automatically aligned to the left
-Text {
- text: "Phone"
- width: 200
-}
-
-// automatically aligned to the right
-Text {
- text: "خامل"
- width: 200
-}
-
-// aligned to the left
-Text {
- text: "خامل"
- horizontalAlignment: Text.AlignLeft
- width: 200
-}
-
-// aligned to the right
-Text {
- text: "خامل"
- horizontalAlignment: Text.AlignLeft
- LayoutMirroring.enabled: true
- width: 200
-}
-//![0]
-
-//![1]
-// by default child items are positioned from left to right
-Row {
- Child {}
- Child {}
-}
-
-// position child items from right to left
-Row {
- layoutDirection: Qt.RightToLeft
- Child {}
- Child {}
-}
-
-// position child items from left to right
-Row {
- LayoutMirroring.enabled: true
- layoutDirection: Qt.RightToLeft
- Child {}
- Child {}
-}
-//![1]
-
-//![2]
-Item {
- height: 50; width: 150
-
- LayoutMirroring.enabled: true
- anchors.left: parent.left // anchor left becomes right
-
- Row {
- // items flow from left to right (as per default)
- Child {}
- Child {}
- Child {}
- }
-}
-//![2]
-
-//![3]
-Item {
- height: 50; width: 150
-
- LayoutMirroring.enabled: true
- LayoutMirroring.childrenInherit: true
- anchors.left: parent.left // anchor left becomes right
-
- Row {
- // setting childrenInherit in the parent causes these
- // items to flow from right to left instead
- Child {}
- Child {}
- Child {}
- }
-}
-//![3]
-
-//![4]
-Rectangle {
- color: "black"
- height: 50; width: 50
- x: mirror(10)
- function mirror(value) {
- return LayoutMirroring.enabled ? (parent.width - width - value) : value;
- }
-}
-//![4]
-
-//![5]
-Image {
- source: "arrow.png"
- mirror: true
-}
-//![5]
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Rectangle {
- width: 50; height: 50
- color: "black"
- Text {
- color: "white"
- text: String.fromCharCode(65 + Math.floor(26*Math.random()))
- anchors.centerIn: parent
- }
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//![0]
-import QtQuick 2.0
-
-Item {
- width: 300; height: 300
-
- Rectangle {
- id: rect
- width: 150; height: 100; anchors.centerIn: parent
- color: "red"
- smooth: true
-
- states: State {
- name: "rotated"
- PropertyChanges { target: rect; rotation: 180 }
- }
-
- transitions: Transition {
- RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }
- }
- }
-
- MouseArea { anchors.fill: parent; onClicked: rect.state = "rotated" }
-}
-//![0]
-
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//! [document]
-import QtQuick 2.0
-
-Row {
- spacing: 2
- Rectangle { color: "red"; width: 50; height: 50 }
- Rectangle { color: "green"; width: 20; height: 50 }
- Rectangle { color: "blue"; width: 50; height: 20 }
-}
-//! [document]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//![0]
-import QtQuick 2.0
-
-Rectangle {
- width: 800; height: 600
- color: "blue"
-
- Rectangle {
- width: 60; height: 60
- x: rect1.x - 5; y: rect1.y - 5
- color: "green"
-
- Behavior on x { SmoothedAnimation { velocity: 200 } }
- Behavior on y { SmoothedAnimation { velocity: 200 } }
- }
-
- Rectangle {
- id: rect1
- width: 50; height: 50
- color: "red"
- }
-
- focus: true
- Keys.onRightPressed: rect1.x = rect1.x + 100
- Keys.onLeftPressed: rect1.x = rect1.x - 100
- Keys.onUpPressed: rect1.y = rect1.y - 100
- Keys.onDownPressed: rect1.y = rect1.y + 100
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-//![0]
-import QtQuick 2.0
-
-Item {
- width: 300; height: 300
-
- Rectangle {
- id: rect
- width: 50; height: 50
- color: "red"
-
- Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } }
- Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }
- }
-
- MouseArea {
- anchors.fill: parent
- onClicked: {
- rect.x = mouse.x - rect.width/2
- rect.y = mouse.y - rect.height/2
- }
- }
-}
-//![0]
-
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.0
-//![0]
-Rectangle {
- id: myRect
- width: 100; height: 100
- color: "red"
-
- MouseArea { id: mouseArea; anchors.fill: parent }
-
- states: State {
- name: "hidden"; when: mouseArea.pressed
- PropertyChanges { target: myRect; opacity: 0 }
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Rectangle {
- id: myRect
- width: 100; height: 100
- color: "black"
-
- MouseArea {
- id: mouseArea
- anchors.fill: parent
- onClicked: myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked';
- }
-
- states: [
- State {
- name: "clicked"
- PropertyChanges { target: myRect; color: "red" }
- }
- ]
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Item {
-//! [state and transition]
-State {
- name: "state1"
- StateChangeScript {
- name: "myScript"
- script: doStateStuff();
- }
- // ...
-}
-// ...
-Transition {
- to: "state1"
- SequentialAnimation {
- NumberAnimation { /* ... */ }
- ScriptAction { scriptName: "myScript" }
- NumberAnimation { /* ... */ }
- }
-}
-//! [state and transition]
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the QtQml module of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.0
-
-Rectangle {
- width: 700; height: 400
-
-//![0]
- Text {
- textFormat: Text.RichText
- text: "The main website is at <a href=\"http://qt.nokia.com\">Nokia Qt DF</a>."
- onLinkActivated: console.log(link + " link activated")
- }
-//![0]
-
-}
-
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.0
-
-Rectangle {
- id: rect
- width: 100; height: 100
- color: "red"
-
- MouseArea { id: mouseArea; anchors.fill: parent }
-
- states: State {
- name: "brighter"; when: mouseArea.pressed
- PropertyChanges { target: rect; color: "yellow" }
- }
-
- //! [modified transition]
- transitions: Transition {
- to: "brighter"
- ColorAnimation { duration: 1000 }
- }
- //! [modified transition]
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.0
-
-//![0]
-Rectangle {
- id: rect
- width: 100; height: 100
- color: "red"
-
- MouseArea { id: mouseArea; anchors.fill: parent }
-
- states: State {
- name: "brighter"; when: mouseArea.pressed
- PropertyChanges { target: rect; color: "yellow" }
- }
-
- transitions: Transition {
- ColorAnimation { duration: 1000 }
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.0
-
-//![0]
-Rectangle {
- id: rect
- width: 100; height: 100
- color: "red"
-
- MouseArea { id: mouseArea; anchors.fill: parent }
-
- states: State {
- name: "brighter"
- when: mouseArea.pressed
- PropertyChanges { target: rect; color: "yellow"; x: 50 }
- }
-
- //! [sequential animations]
- transitions: Transition {
- SequentialAnimation {
- PropertyAnimation { property: "x"; duration: 1000 }
- ColorAnimation { duration: 1000 }
- }
- }
- //! [sequential animations]
-}
-//![0]
-
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Rectangle {
- id: rect
- width: 100; height: 100
- color: "red"
-
- MouseArea {
- id: mouseArea
- anchors.fill: parent
- }
-
- states: State {
- name: "moved"; when: mouseArea.pressed
- PropertyChanges { target: rect; x: 50; y: 50 }
- }
-
- transitions: Transition {
- NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
- }
-}
-//![0]
-
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.0
-
-Rectangle {
- width: 150; height: 250
-
- Rectangle {
- id: stopLight
- x: 25; y: 15; width: 100; height: 100
- }
- Rectangle {
- id: goLight
- x: 25; y: 135; width: 100; height: 100
- }
-
- states: [
- State {
- name: "stop"
- PropertyChanges { target: stopLight; color: "red" }
- PropertyChanges { target: goLight; color: "black" }
- },
- State {
- name: "go"
- PropertyChanges { target: stopLight; color: "black" }
- PropertyChanges { target: goLight; color: "green" }
- }
- ]
-
- state: "stop"
-
- MouseArea {
- anchors.fill: parent
- onClicked: parent.state == "stop" ?
- parent.state = "go" : parent.state = "stop"
- }
-
- //! [list of transitions]
- transitions: [
- Transition {
- from: "stop"; to: "go"
- PropertyAnimation { target: stopLight
- properties: "color"; duration: 1000 }
- },
- Transition {
- from: "go"; to: "stop"
- PropertyAnimation { target: goLight
- properties: "color"; duration: 1000 }
- } ]
- //! [list of transitions]
-}
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-Rectangle {
- width: 200; height: 100
-
- VisualDataModel {
- id: visualModel
- model: ListModel {
- ListElement { name: "Apple" }
- ListElement { name: "Orange" }
- }
-
- groups: [
- VisualDataGroup { name: "selected" }
- ]
-
- delegate: Rectangle {
- id: item
- height: 25
- width: 200
- Text {
- text: {
- var text = "Name: " + name
- if (item.VisualDataModel.inSelected)
- text += " (" + item.VisualDataModel.selectedIndex + ")"
- return text;
- }
- }
- MouseArea {
- anchors.fill: parent
- onClicked: item.VisualDataModel.inSelected = !item.VisualDataModel.inSelected
- }
- }
- }
-
- ListView {
- anchors.fill: parent
- model: visualModel
- }
-}
-//![0]
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the QtQml module of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-#include <QQuickView>
-#include <QQmlContext>
-
-#include <QApplication>
-#include <QDirModel>
-
-//![0]
-int main(int argc, char ** argv)
-{
- QApplication app(argc, argv);
-
- QQuickView view;
-
- QDirModel model;
- view.rootContext()->setContextProperty("dirModel", &model);
-
- view.setSource(QUrl::fromLocalFile("view.qml"));
- view.show();
-
- return app.exec();
-}
-//![0]
-
+++ /dev/null
-/****************************************************************************
-**
-** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
-** Contact: http://www.qt-project.org/
-**
-** This file is part of the documentation of the Qt Toolkit.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-** * Redistributions of source code must retain the above copyright
-** notice, this list of conditions and the following disclaimer.
-** * Redistributions in binary form must reproduce the above copyright
-** notice, this list of conditions and the following disclaimer in
-** the documentation and/or other materials provided with the
-** distribution.
-** * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
-** the names of its contributors may be used to endorse or promote
-** products derived from this software without specific prior written
-** permission.
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-//![0]
-import QtQuick 2.0
-
-ListView {
- id: view
- width: 300
- height: 400
-
- model: VisualDataModel {
- model: dirModel
-
- delegate: Rectangle {
- width: 200; height: 25
- Text { text: filePath }
-
- MouseArea {
- anchors.fill: parent
- onClicked: {
- if (model.hasModelChildren)
- view.model.rootIndex = view.model.modelIndex(index)
- }
- }
- }
- }
-}
-//![0]
--- /dev/null
+WorkerScript.onMessage = function(message) {
+ // ... long-running operations and calculations are done here
+ WorkerScript.sendMessage({ 'reply': 'Mouse is at ' + message.x + ',' + message.y })
+}
Here is a ListView with a delegate that references its model item's
value using the \c modelData role:
- \snippet examples/declarative/modelviews/stringlistmodel/view.qml 0
+ \snippet examples/quick/modelviews/stringlistmodel/view.qml 0
A Qt application can load this QML document and set the value of \c myModel
to a QStringList:
- \snippet examples/declarative/modelviews/stringlistmodel/main.cpp 0
+ \snippet examples/quick/modelviews/stringlistmodel/main.cpp 0
- The complete example is available in Qt's \l {declarative/modelviews/stringlistmodel}{examples/declarative/modelviews/stringlistmodel} directory.
+ The complete example is available in Qt's \l {declarative/modelviews/stringlistmodel}{examples/quick/modelviews/stringlistmodel} directory.
\b{Note:} There is no way for the view to know that the contents of a QStringList
have changed. If the QStringList changes, it will be necessary to reset
Q_PROPERTY values that will be accessible as named roles when a
QList<DataObject*> is exposed to QML:
- \snippet examples/declarative/modelviews/objectlistmodel/dataobject.h 0
+ \snippet examples/quick/modelviews/objectlistmodel/dataobject.h 0
\dots 4
- \snippet examples/declarative/modelviews/objectlistmodel/dataobject.h 1
+ \snippet examples/quick/modelviews/objectlistmodel/dataobject.h 1
\codeline
- \snippet examples/declarative/modelviews/objectlistmodel/main.cpp 0
+ \snippet examples/quick/modelviews/objectlistmodel/main.cpp 0
\dots
The QObject* is available as the \c modelData property. As a convenience,
delegate's context. Here, \c view.qml references the \c DataModel properties in
the ListView delegate:
- \snippet examples/declarative/modelviews/objectlistmodel/view.qml 0
+ \snippet examples/quick/modelviews/objectlistmodel/view.qml 0
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 \c modelData
object.
- The complete example is available in Qt's \l {declarative/modelviews/objectlistmodel}{examples/declarative/modelviews/objectlistmodel} directory.
+ The complete example is available in Qt's \l {declarative/modelviews/objectlistmodel}{examples/quick/modelviews/objectlistmodel} directory.
Note: There is no way for the view to know that the contents of a QList
have changed. If the QList changes, it will be necessary to reset
that has \e type and \e size roles. It calls QAbstractItemModel::setRoleNames() to set the
role names for accessing the properties via QML:
- \snippet examples/declarative/modelviews/abstractitemmodel/model.h 0
+ \snippet examples/quick/modelviews/abstractitemmodel/model.h 0
\dots
- \snippet examples/declarative/modelviews/abstractitemmodel/model.h 1
+ \snippet examples/quick/modelviews/abstractitemmodel/model.h 1
\dots
- \snippet examples/declarative/modelviews/abstractitemmodel/model.h 2
+ \snippet examples/quick/modelviews/abstractitemmodel/model.h 2
\codeline
- \snippet examples/declarative/modelviews/abstractitemmodel/model.cpp 0
+ \snippet examples/quick/modelviews/abstractitemmodel/model.cpp 0
\codeline
- \snippet examples/declarative/modelviews/abstractitemmodel/main.cpp 0
+ \snippet examples/quick/modelviews/abstractitemmodel/main.cpp 0
\dots
This model is displayed by a ListView delegate that accesses the \e type and \e size
roles:
- \snippet examples/declarative/modelviews/abstractitemmodel/view.qml 0
+ \snippet examples/quick/modelviews/abstractitemmodel/view.qml 0
QML views are automatically updated when the model changes. Remember the model
must follow the standard rules for model changes and notify the view when
QAbstractItemModel::beginInsertRows(), etc. See the \l {Model subclassing reference} for
more information.
- The complete example is available in Qt's \l {declarative/modelviews/abstractitemmodel}{examples/declarative/modelviews/abstractitemmodel} directory.
+ The complete example is available in Qt's \l {declarative/modelviews/abstractitemmodel}{examples/quick/modelviews/abstractitemmodel} directory.
QAbstractItemModel presents a hierarchy of tables, but the views currently provided by QML
can only display list data.
<group>.<property> notation. For example, shoe.color is the way to access
the \c color property in the \c shoe property group .
- \snippet examples/declarative/cppextensions/referenceexamples/grouped/example.qml ungrouped
+ \snippet examples/qml/cppextensions/referenceexamples/grouped/example.qml ungrouped
Alternatively, the group can be accessed as a set.
- \snippet examples/declarative/cppextensions/referenceexamples/grouped/example.qml grouped
+ \snippet examples/qml/cppextensions/referenceexamples/grouped/example.qml grouped
A grouped property block is implemented as a read-only object property. The
\c shoe property shown is declared like this:
- \snippet examples/declarative/cppextensions/referenceexamples/grouped/person.h 1
+ \snippet examples/qml/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.
attaching type are those that become available for use as attached
properties.
- \snippet examples/declarative/cppextensions/referenceexamples/attached/example.qml 1
+ \snippet examples/qml/cppextensions/referenceexamples/attached/example.qml 1
The \c BirthdayParty is called the attaching type and the
\c Boy instance the attachee object instance. The property \c rsvp is the
The \l {Extending QML - Attached Properties Example}{Birthday}
class has \c BirthdayPartyAttached attached properties.
- \snippet examples/declarative/cppextensions/referenceexamples/attached/birthdayparty.h static attached
+ \snippet examples/qml/cppextensions/referenceexamples/attached/birthdayparty.h static attached
The QML_DECLARE_TYPEINFO() macro can notify the runtime that the type has
attached properties with the QML_HAS_ATTACHED_PROPERTIES argument.
- \snippet examples/declarative/cppextensions/referenceexamples/attached/birthdayparty.h declare attached
+ \snippet examples/qml/cppextensions/referenceexamples/attached/birthdayparty.h declare attached
The qmlAttachedProperties method will be called at most once for each
attachee object instance. The QML engine will cache the returned instance
A common usage scenario is for a type to enhance the properties
available to its children in order to gather instance specific data.
- \snippet examples/declarative/cppextensions/referenceexamples/attached/example.qml begin
- \snippet examples/declarative/cppextensions/referenceexamples/attached/example.qml rsvp
- \snippet examples/declarative/cppextensions/referenceexamples/attached/example.qml end
+ \snippet examples/qml/cppextensions/referenceexamples/attached/example.qml begin
+ \snippet examples/qml/cppextensions/referenceexamples/attached/example.qml rsvp
+ \snippet examples/qml/cppextensions/referenceexamples/attached/example.qml end
However, as a QML type cannot limit the instances to which the attachment
object must attach, the following is also allowed, even though adding a
The \c rsvp properties of each guest in the \c Birthday party is accessible
through the \c qmlAttachedPropertiesObject function.
- \snippet examples/declarative/cppextensions/referenceexamples/attached/main.cpp query rsvp
+ \snippet examples/qml/cppextensions/referenceexamples/attached/main.cpp query rsvp
The
\l {Extending QML - Attached Properties Example}{Attached Properties Example}
Q_PROPERTY() macro, just like other properties. The \c host property
declaration looks like this:
- \snippet examples/declarative/cppextensions/referenceexamples/properties/birthdayparty.h 1
+ \snippet examples/qml/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.
for assignment to appropriately typed properties.
- \snippet examples/declarative/cppextensions/referenceexamples/properties/example.qml 0
+ \snippet examples/qml/cppextensions/referenceexamples/properties/example.qml 0
The \c guests property is a \e{list property} of \c Person objects. A list
of \c Person objects are bound to the \c BirthdayParty's \c host property,
the Q_PROPERTY() macro. However, list properties must have the type
\l{QQmlListProperty}{QQmlListProperty<T>}.
- \snippet examples/declarative/cppextensions/referenceexamples/properties/birthdayparty.h 2
+ \snippet examples/qml/cppextensions/referenceexamples/properties/birthdayparty.h 2
As with the other property types, the type of list content, \a T, must be
\l{register-c++-type}{registered} into the runtime.
- \snippet examples/declarative/cppextensions/referenceexamples/properties/main.cpp register list
+ \snippet examples/qml/cppextensions/referenceexamples/properties/main.cpp register list
\l {Extending QML - Object and List Property Types Example} shows the
complete code used to create the \c BirthdayParty type. For more
Here is the \c host property declaration:
- \snippet examples/declarative/cppextensions/referenceexamples/binding/birthdayparty.h 0
+ \snippet examples/qml/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
attribute may be added to the property declaration instead of a NOTIFY
signal.
- \snippet examples/declarative/cppextensions/referenceexamples/binding/person.h 0
+ \snippet examples/qml/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,
character of the signal is uppercased for the signal handler. The
signal parameter is also availabe to the QML signal.
- \snippet examples/declarative/cppextensions/referenceexamples/signal/birthdayparty.h 0
+ \snippet examples/qml/cppextensions/referenceexamples/signal/birthdayparty.h 0
The QML engine will create a handler for the \c partyStarted signal
called \c onPartyStarted.
- \snippet examples/declarative/cppextensions/referenceexamples/signal/example.qml 0
+ \snippet examples/qml/cppextensions/referenceexamples/signal/example.qml 0
Classes may have multiple signals with the same name, but only the final
signal is accessible as a QML signal. Note that signals with the same name
The Q_INVOKABLE macro exposes any Qt C++ method as a QML method.
- \snippet examples/declarative/cppextensions/referenceexamples/methods/birthdayparty.h 0
+ \snippet examples/qml/cppextensions/referenceexamples/methods/birthdayparty.h 0
In a QML file, we can invoke the method as we would a
\l{JavaScript Expressions in QML}{JavaScript expression}.
- \snippet examples/declarative/cppextensions/referenceexamples/methods/example.qml 0
+ \snippet examples/qml/cppextensions/referenceexamples/methods/example.qml 0
\l {Extending QML - Methods Example}{Methods example} uses the Q_INVOKABLE
method to expose methods and demonstrates some usages of the method in
as a new QML element. It provides the current time through \c hour and \c minute
properties.
- \snippet examples/declarative/cppextensions/plugins/plugin.cpp 0
+ \snippet examples/qml/cppextensions/plugins/plugin.cpp 0
\dots
A plugin class, \c QExampleQMLPlugin, is a subclass of
runtime with the qmlRegisterType() function. The Q_EXPORT_PLUGIN2() macro has
two parameters, the generated plugin name and the class name.
- \snippet examples/declarative/cppextensions/plugins/plugin.cpp plugin
+ \snippet examples/qml/cppextensions/plugins/plugin.cpp plugin
\codeline
- \snippet examples/declarative/cppextensions/plugins/plugin.cpp export
+ \snippet examples/qml/cppextensions/plugins/plugin.cpp export
The \c TimeModel class receives a \c{1.0} version of this plugin library, as
a QML type called \c Time. The Q_ASSERT() macro can ensure the module is
includes a \c Clock.qml file that should be bundled with the plugin, so it
needs to be specified in the \c qmldir file:
- \quotefile examples/declarative/cppextensions/plugins/com/nokia/TimeExample/qmldir
+ \quotefile examples/qml/cppextensions/plugins/com/nokia/TimeExample/qmldir
Once the project is built and installed, the new \c Time component is
accessible by any QML component that imports the \c com.nokia.TimeExample
module
- \snippet examples/declarative/cppextensions/plugins/plugins.qml 0
+ \snippet examples/qml/cppextensions/plugins/plugins.qml 0
The full source code is available in the \l {declarative/cppextensions/plugins}{plugins example}.
QML context. The class must be a subclass of \l{QObject} and have a default
constructor. The \l{The Property System}{properties} created with the
Q_PROPERTY macro are visible in the QML context as well.
- \snippet declarative/cppextensions/referenceexamples/adding/person.h 0
+ \snippet examples/qml/cppextensions/referenceexamples/adding/person.h 0
The application registers the class to the runtime with the
\l{qmlRegisterType()}.
- \snippet declarative/cppextensions/referenceexamples/adding/main.cpp 0
+ \snippet examples/qml/cppextensions/referenceexamples/adding/main.cpp 0
The Person type is then imported with the \c "People 1.0" module and its
properties are accessible in a QML file.
-\snippet declarative/cppextensions/referenceexamples/adding/example.qml 0
+ \snippet examples/qml/cppextensions/referenceexamples/adding/example.qml 0
The \l {Extending QML - Adding Types Example}{Adding Types} example
demonstrates as usage of the \l qmlRegisterType().
way as regular properties. Thus, the lists or pointers are created as
properties using the Q_PROPERTY() macro.
- \snippet examples/declarative/cppextensions/referenceexamples/properties/birthdayparty.h 1
+ \snippet examples/qml/cppextensions/referenceexamples/properties/birthdayparty.h 1
The \c host is an \l{qml-expose-properties}{exposed property} that can bind
to objects or lists of objects. The property type, in this case \c Person,
that allow the assignment of specialized classes to object or list
properties.
- \snippet examples/declarative/cppextensions/referenceexamples/coercion/example.qml 0
+ \snippet examples/qml/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
define a mapping between the C++ class and a QML element name, so the type
is not instantiable from QML, but it is available for type coercion.
- \snippet examples/declarative/cppextensions/referenceexamples/coercion/main.cpp 0
- \snippet examples/declarative/cppextensions/referenceexamples/coercion/main.cpp register boy girl
+ \snippet examples/qml/cppextensions/referenceexamples/coercion/main.cpp 0
+ \snippet examples/qml/cppextensions/referenceexamples/coercion/main.cpp register boy girl
The \c Person class is registered withouth the parameters. Both the
\c Boy and \c Girl class derive from the \c Person class.
\target qml-c++-extension
\section1 Extension Objects
- \snippet examples/declarative/cppextensions/referenceexamples/extended/example.qml 0
+ \snippet examples/qml/cppextensions/referenceexamples/extended/example.qml 0
The \c leftMargin property is a new property to an existing C++ type,
\l QLineEdit, without modifying its source code.
\section1 Property Value Sources
-\snippet examples/declarative/cppextensions/referenceexamples/valuesource/example.qml 0
-\snippet examples/declarative/cppextensions/referenceexamples/valuesource/example.qml 1
+\snippet examples/qml/cppextensions/referenceexamples/valuesource/example.qml 0
+\snippet examples/qml/cppextensions/referenceexamples/valuesource/example.qml 1
The QML snippet shown above applies a property value source to the \c announcement property.
A property value source generates a value for a property that changes over time.
the \c HappyBirthdaySong value source generates the lyrics of the song
"Happy Birthday".
-\snippet examples/declarative/cppextensions/referenceexamples/valuesource/birthdayparty.h 0
+\snippet examples/qml/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
associating the property value source with a property. The relevant part of
the \c HappyBirthdaySong type declaration looks like this:
-\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
+\snippet examples/qml/cppextensions/referenceexamples/valuesource/happybirthdaysong.h 0
+\snippet examples/qml/cppextensions/referenceexamples/valuesource/happybirthdaysong.h 1
+\snippet examples/qml/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
For example, suppose there is a \c MyItem.qml file that looks like this:
-\snippet doc/snippets/qml/qtbinding/loading/MyItem.qml start
-\snippet doc/snippets/qml/qtbinding/loading/MyItem.qml end
+\snippet qml/qtbinding/loading/MyItem.qml start
+\snippet qml/qtbinding/loading/MyItem.qml end
This QML document can be loaded with QQmlComponent or QQuickView with the following
C++ code. Using a QQmlComponent requires calling QQmlComponent::create() to create
\table
\row
\li
-\snippet doc/snippets/qml/qtbinding/loading/main.cpp QQmlComponent-a
+\snippet qml/qtbinding/loading/main.cpp QQmlComponent-a
\dots 0
-\snippet doc/snippets/qml/qtbinding/loading/main.cpp QQmlComponent-b
+\snippet qml/qtbinding/loading/main.cpp QQmlComponent-b
\li
-\snippet doc/snippets/qml/qtbinding/loading/main.cpp QQuickView
+\snippet qml/qtbinding/loading/main.cpp QQuickView
\endtable
This \c object is the instance of the \c MyItem.qml component that has been created. You can now
modify the item's properties using QObject::setProperty() or QQmlProperty:
-\snippet doc/snippets/qml/qtbinding/loading/main.cpp properties
+\snippet qml/qtbinding/loading/main.cpp properties
Alternatively, you can cast the object to its actual type and call functions with compile-time
safety. In this case the base object of \c MyItem.qml is an \l Item, which is defined by the
QQuickItem class:
-\snippet doc/snippets/qml/qtbinding/loading/main.cpp cast
+\snippet qml/qtbinding/loading/main.cpp cast
You can also connect to any signals or call functions defined in the component using
QMetaObject::invokeMethod() and QObject::connect(). See \l {Exchanging data between QML and C++}
Child objects of QML components can be located using the QObject::objectName property with
QObject::findChild(). For example, if the root item in \c MyItem.qml had a child \l Rectangle item:
-\snippet doc/snippets/qml/qtbinding/loading/MyItem.qml start
+\snippet qml/qtbinding/loading/MyItem.qml start
\codeline
-\snippet doc/snippets/qml/qtbinding/loading/MyItem.qml child
-\snippet doc/snippets/qml/qtbinding/loading/MyItem.qml end
+\snippet qml/qtbinding/loading/MyItem.qml child
+\snippet qml/qtbinding/loading/MyItem.qml end
The child could be located like this:
-\snippet doc/snippets/qml/qtbinding/loading/main.cpp findChild
+\snippet qml/qtbinding/loading/main.cpp findChild
If \c objectName is used inside a delegate of a ListView, \l Repeater or some other
element that creates multiple instances of its delegates, there will be multiple children with
For example, here is a QML item that refers to a \c currentDateTime value that does not exist in
the current scope:
-\snippet doc/snippets/qml/qtbinding/context/MyItem.qml 0
+\snippet qml/qtbinding/context/MyItem.qml 0
This \c currentDateTime value can be set directly by the C++ application that loads the QML
component, using QQmlContext::setContextProperty():
-\snippet doc/snippets/qml/qtbinding/context/main.cpp 0
+\snippet qml/qtbinding/context/main.cpp 0
Context properties can hold either QVariant or QObject* values. This means custom C++ objects can
also be injected using this approach, and these objects can be modified and read directly in QML.
\table
\row
\li
-\snippet doc/snippets/qml/qtbinding/context-advanced/applicationdata.h 0
+\snippet qml/qtbinding/context-advanced/applicationdata.h 0
\codeline
-\snippet doc/snippets/qml/qtbinding/context-advanced/main.cpp 0
+\snippet qml/qtbinding/context-advanced/main.cpp 0
\li
-\snippet doc/snippets/qml/qtbinding/context-advanced/MyItem.qml 0
+\snippet qml/qtbinding/context-advanced/MyItem.qml 0
\endtable
(Note that date/time values returned from C++ to QML can be formatted through
dataChanged(), this signal can be connected to using an \c onDataChanged handler within
a \l Connections object:
-\snippet doc/snippets/qml/qtbinding/context-advanced/connections.qml 0
+\snippet qml/qtbinding/context-advanced/connections.qml 0
Context properties can be useful for using C++ based data models in a QML view. See the
\l {declarative/modelviews/stringlistmodel}{String ListModel},
For example, here is an \c ImageViewer class with an \c image URL property:
-\snippet doc/snippets/qml/qtbinding/newelements/imageviewer.h 0
+\snippet qml/qtbinding/newelements/imageviewer.h 0
Aside from the fact that it inherits QQuickItem, this is an ordinary class that could
exist outside of QML. However, once it is registered with the QML engine using qmlRegisterType():
-\snippet doc/snippets/qml/qtbinding/newelements/main.cpp register
+\snippet qml/qtbinding/newelements/main.cpp register
Then, any QML code loaded by your C++ application or \l{QQmlExtensionPlugin}{plugin} can create and manipulate
\c ImageViewer objects:
-\snippet doc/snippets/qml/qtbinding/newelements/standalone.qml 0
+\snippet qml/qtbinding/newelements/standalone.qml 0
It is advised that you avoid using QGraphicsItem functionality beyond the properties documented in QQuickItem.
\table
\row
-\li \snippet doc/snippets/qml/qtbinding/functions-qml/MyItem.qml 0
-\li \snippet doc/snippets/qml/qtbinding/functions-qml/main.cpp 0
+\li \snippet qml/qtbinding/functions-qml/MyItem.qml 0
+\li \snippet qml/qtbinding/functions-qml/main.cpp 0
\endtable
Notice the Q_RETURN_ARG() and Q_ARG() arguments for QMetaObject::invokeMethod() must be specified as
\table
\row
\li
-\snippet doc/snippets/qml/qtbinding/functions-cpp/MyItem.qml 0
+\snippet qml/qtbinding/functions-cpp/MyItem.qml 0
\li
-\snippet doc/snippets/qml/qtbinding/functions-cpp/myclass.h 0
+\snippet qml/qtbinding/functions-cpp/myclass.h 0
\codeline
-\snippet doc/snippets/qml/qtbinding/functions-cpp/main.cpp 0
+\snippet qml/qtbinding/functions-cpp/main.cpp 0
\endtable
QML supports the calling of overloaded C++ functions. If there are multiple C++ functions with the
\table
\row
\li
-\snippet doc/snippets/qml/qtbinding/signals-qml/MyItem.qml 0
+\snippet qml/qtbinding/signals-qml/MyItem.qml 0
\li
-\snippet doc/snippets/qml/qtbinding/signals-qml/myclass.h 0
+\snippet qml/qtbinding/signals-qml/myclass.h 0
\codeline
-\snippet doc/snippets/qml/qtbinding/signals-qml/main.cpp 0
+\snippet qml/qtbinding/signals-qml/main.cpp 0
\endtable
To connect to Qt C++ signals from within QML, use a signal handler with the \c on<SignalName> syntax.
\row
\li
-\snippet doc/snippets/qml/qtbinding/signals-cpp/imageviewer.h start
+\snippet qml/qtbinding/signals-cpp/imageviewer.h start
\dots 4
-\snippet doc/snippets/qml/qtbinding/signals-cpp/imageviewer.h end
+\snippet qml/qtbinding/signals-cpp/imageviewer.h end
\li
-\snippet doc/snippets/qml/qtbinding/signals-cpp/standalone.qml 0
+\snippet qml/qtbinding/signals-cpp/standalone.qml 0
\endtable
(Note that if a signal has been declared as the NOTIFY signal for a property, QML allows it to be
\table
\row
-\li \snippet doc/snippets/qml/qtbinding/signals-cpp/main.cpp connections
-\li \snippet doc/snippets/qml/qtbinding/signals-cpp/MyItem.qml 0
+\li \snippet qml/qtbinding/signals-cpp/main.cpp connections
+\li \snippet qml/qtbinding/signals-cpp/MyItem.qml 0
\endtable
C++ signals can use enum values as parameters provided that the enum is declared in the
Any properties declared in a QML object are automatically accessible from C++. Given a QML item
like this:
-\snippet doc/snippets/qml/qtbinding/properties-qml/MyItem.qml 0
+\snippet qml/qtbinding/properties-qml/MyItem.qml 0
The value of the \c someNumber property can be set and read using QQmlProperty, or
QObject::setProperty() and QObject::property():
-\snippet doc/snippets/qml/qtbinding/properties-qml/main.cpp 0
+\snippet qml/qtbinding/properties-qml/main.cpp 0
You should always use QObject::setProperty(), QQmlProperty or QMetaProperty::write() to
change a QML property value, to ensure the QML engine is made aware of the property change. For example,
\table
\row
-\li \snippet doc/snippets/qml/qtbinding/properties-cpp/applicationdata.h 0
-\li \snippet doc/snippets/qml/qtbinding/properties-cpp/MyItem.qml 0
+\li \snippet qml/qtbinding/properties-cpp/applicationdata.h 0
+\li \snippet qml/qtbinding/properties-cpp/MyItem.qml 0
\endtable
Notice the \c backgroundColorChanged signal is declared as the NOTIFY signal for the
\li String format
\li Example
\row
-\li \snippet doc/snippets/qml/qtbinding/variantlistmap/MyItem.qml 0
-\li \snippet doc/snippets/qml/qtbinding/variantlistmap/main.cpp 0
+\li \snippet qml/qtbinding/variantlistmap/MyItem.qml 0
+\li \snippet qml/qtbinding/variantlistmap/main.cpp 0
\endtable
This produces output like:
To use an enumeration from a custom C++ component, the enumeration must be declared with Q_ENUMS() to
register it with Qt's meta object system. For example, the following C++ type has a \c Status enum:
-\snippet doc/snippets/qml/qtbinding/enums/imageviewer.h start
-\snippet doc/snippets/qml/qtbinding/enums/imageviewer.h end
+\snippet qml/qtbinding/enums/imageviewer.h start
+\snippet qml/qtbinding/enums/imageviewer.h end
Providing the \c ImageViewer class has been registered using qmlRegisterType(), its \c Status enum can
now be used from QML:
-\snippet doc/snippets/qml/qtbinding/enums/standalone.qml 0
+\snippet qml/qtbinding/enums/standalone.qml 0
The C++ type must be registered with QML to use its enums. If your C++ type is not instantiable, it
can be registered using qmlRegisterUncreatableType(). To be accessible from QML, the names of enum values
For QML signals, enum values may be used as signal parameters using the \c int type:
-\snippet doc/snippets/qml/qtbinding/enums/standalone.qml 1
+\snippet qml/qtbinding/enums/standalone.qml 1
\section2 Automatic Type Conversion from Strings
The \c main.qml and \c background.png files will be packaged as resource files. This is
done in the \c example.qrc resource collection file:
-\quotefile doc/src/snippets/qml/qtbinding/resources/example.qrc
+\quotefile qml/qtbinding/resources/example.qrc
Since \c background.png is a resource file, \c main.qml can refer to it using the relative
path specified in \c example.qrc:
-\snippet doc/snippets/qml/qtbinding/resources/main.qml 0
+\snippet qml/qtbinding/resources/main.qml 0
To allow QML to locate resource files correctly, the \c main.cpp loads the main QML
file, \c main.qml, as a resource file using the \c qrc scheme:
-\snippet doc/snippets/qml/qtbinding/resources/main.cpp 0
+\snippet qml/qtbinding/resources/main.cpp 0
Finally \c project.pro uses the RESOURCES variable to indicate that \c example.qrc should
be used to build the application resources:
-\quotefile doc/src/snippets/qml/qtbinding/resources/resources.pro
+\quotefile qml/qtbinding/resources/resources.pro
See \l {The Qt Resource System} for more information.
\c console.assert tests that an expression is true. If not, it will write an optional message
to the console and print the stack trace.
-\qml
+\code
function f() {
var x = 12
console.assert(x == 12, "This will pass");
console.assert(x > 12, "This will fail");
}
-\endqml
+\endcode
\section2 Timer
\c console.count prints the current number of times a particular piece of code has been executed,
along with a message. That is,
-\qml
+\code
function f() {
console.count("f called");
}
-\endqml
+\endcode
will print \c{f called: 1}, \c{f called: 2} ... whenever \c{f()} is executed.
For example, suppose there is a \c MyItem.qml file that looks like this:
- \snippet doc/snippets/qml/qtbinding/loading/MyItem.qml start
- \snippet doc/snippets/qml/qtbinding/loading/MyItem.qml end
+ \snippet qml/qtbinding/loading/MyItem.qml start
+ \snippet qml/qtbinding/loading/MyItem.qml end
This QML document can be loaded with QQmlComponent or
QQuickView with the following C++ code. Using a QQmlComponent
\table
\row
\li
- \snippet doc/snippets/qml/qtbinding/loading/main.cpp QQmlComponent-a
+ \snippet qml/qtbinding/loading/main.cpp QQmlComponent-a
\dots 0
- \snippet doc/snippets/qml/qtbinding/loading/main.cpp QQmlComponent-b
+ \snippet qml/qtbinding/loading/main.cpp QQmlComponent-b
\li
- \snippet doc/snippets/qml/qtbinding/loading/main.cpp QQuickView
+ \snippet qml/qtbinding/loading/main.cpp QQuickView
\endtable
This \c object is the instance of the \c MyItem.qml component that has been
created. You can now modify the item's properties using
QObject::setProperty() or QQmlProperty:
- \snippet doc/snippets/qml/qtbinding/loading/main.cpp properties
+ \snippet qml/qtbinding/loading/main.cpp properties
Alternatively, you can cast the object to its actual type and call functions
with compile-time safety. In this case the base object of \c MyItem.qml is
an \l Item, which is defined by the QQuickItem class:
- \snippet doc/snippets/qml/qtbinding/loading/main.cpp cast
+ \snippet qml/qtbinding/loading/main.cpp cast
You can also connect to any signals or call functions defined in the
component using QMetaObject::invokeMethod() and QObject::connect(). See \l
the QObject::objectName property with QObject::findChild(). For example, if
the root item in \c MyItem.qml had a child \l Rectangle item:
- \snippet doc/snippets/qml/qtbinding/loading/MyItem.qml start
+ \snippet qml/qtbinding/loading/MyItem.qml start
\codeline
- \snippet doc/snippets/qml/qtbinding/loading/MyItem.qml child
- \snippet doc/snippets/qml/qtbinding/loading/MyItem.qml end
+ \snippet qml/qtbinding/loading/MyItem.qml child
+ \snippet qml/qtbinding/loading/MyItem.qml end
The child could be located like this:
- \snippet doc/snippets/qml/qtbinding/loading/main.cpp findChild
+ \snippet qml/qtbinding/loading/main.cpp findChild
If \c objectName is used inside a delegate of a ListView, \l Repeater or
some other element that creates multiple instances of its delegates, there
For example, here is a QML item that refers to a \c currentDateTime value
that does not exist in the current scope:
- \snippet doc/snippets/qml/qtbinding/context/MyItem.qml 0
+ \snippet qml/qtbinding/context/MyItem.qml 0
This \c currentDateTime value can be set directly by the C++ application
that loads the QML component, using
QQmlContext::setContextProperty():
- \snippet doc/snippets/qml/qtbinding/context/main.cpp 0
+ \snippet qml/qtbinding/context/main.cpp 0
Context properties can hold either QVariant or QObject* values. This means
custom C++ objects can also be injected using this approach, and these
\table
\row
\li
- \snippet doc/snippets/qml/qtbinding/context-advanced/applicationdata.h 0
+ \snippet qml/qtbinding/context-advanced/applicationdata.h 0
\codeline
- \snippet doc/snippets/qml/qtbinding/context-advanced/main.cpp 0
+ \snippet qml/qtbinding/context-advanced/main.cpp 0
\li
- \snippet doc/snippets/qml/qtbinding/context-advanced/MyItem.qml 0
+ \snippet qml/qtbinding/context-advanced/MyItem.qml 0
\endtable
(Note that date/time values returned from C++ to QML can be formatted through
connected to using an \c onDataChanged handler within a \l Connections
object:
- \snippet doc/snippets/qml/qtbinding/context-advanced/connections.qml 0
+ \snippet qml/qtbinding/context-advanced/connections.qml 0
Context properties can be useful for using C++ based data models in a QML view. See the
\l {declarative/modelviews/stringlistmodel}{String ListModel},
\table
\row
- \li \snippet doc/snippets/qml/qtbinding/functions-qml/MyItem.qml 0
- \li \snippet doc/snippets/qml/qtbinding/functions-qml/main.cpp 0
+ \li \snippet qml/qtbinding/functions-qml/MyItem.qml 0
+ \li \snippet qml/qtbinding/functions-qml/main.cpp 0
\endtable
Notice the Q_RETURN_ARG() and Q_ARG() arguments for
\table
\row
\li
- \snippet doc/snippets/qml/qtbinding/functions-cpp/MyItem.qml 0
+ \snippet qml/qtbinding/functions-cpp/MyItem.qml 0
\li
- \snippet doc/snippets/qml/qtbinding/functions-cpp/myclass.h 0
+ \snippet qml/qtbinding/functions-cpp/myclass.h 0
\codeline
- \snippet doc/snippets/qml/qtbinding/functions-cpp/main.cpp 0
+ \snippet qml/qtbinding/functions-cpp/main.cpp 0
\endtable
QML supports the calling of overloaded C++ functions. If there are multiple
\table
\row
\li
- \snippet doc/snippets/qml/qtbinding/signals-qml/MyItem.qml 0
+ \snippet qml/qtbinding/signals-qml/MyItem.qml 0
\li
- \snippet doc/snippets/qml/qtbinding/signals-qml/myclass.h 0
+ \snippet qml/qtbinding/signals-qml/myclass.h 0
\codeline
- \snippet doc/snippets/qml/qtbinding/signals-qml/main.cpp 0
+ \snippet qml/qtbinding/signals-qml/main.cpp 0
\endtable
To connect to Qt C++ signals from within QML, use a signal handler with the
\row
\li
- \snippet doc/snippets/qml/qtbinding/signals-cpp/imageviewer.h start
+ \snippet qml/qtbinding/signals-cpp/imageviewer.h start
\dots 4
- \snippet doc/snippets/qml/qtbinding/signals-cpp/imageviewer.h end
+ \snippet qml/qtbinding/signals-cpp/imageviewer.h end
\li
- \snippet doc/snippets/qml/qtbinding/signals-cpp/standalone.qml 0
+ \snippet qml/qtbinding/signals-cpp/standalone.qml 0
\endtable
(Note that if a signal has been declared as the NOTIFY signal for a
\table
\row
- \li \snippet doc/snippets/qml/qtbinding/signals-cpp/main.cpp connections
- \li \snippet doc/snippets/qml/qtbinding/signals-cpp/MyItem.qml 0
+ \li \snippet qml/qtbinding/signals-cpp/main.cpp connections
+ \li \snippet qml/qtbinding/signals-cpp/MyItem.qml 0
\endtable
C++ signals can use enum values as parameters provided that the enum is
Any properties declared in a QML object are automatically accessible from
C++. Given a QML item like this:
- \snippet doc/snippets/qml/qtbinding/properties-qml/MyItem.qml 0
+ \snippet qml/qtbinding/properties-qml/MyItem.qml 0
The value of the \c someNumber property can be set and read using
QQmlProperty, or QObject::setProperty() and QObject::property():
- \snippet doc/snippets/qml/qtbinding/properties-qml/main.cpp 0
+ \snippet qml/qtbinding/properties-qml/main.cpp 0
You should always use QObject::setProperty(), QQmlProperty or
QMetaProperty::write() to change a QML property value, to ensure the QML
\table
\row
- \li \snippet doc/snippets/qml/qtbinding/properties-cpp/applicationdata.h 0
- \li \snippet doc/snippets/qml/qtbinding/properties-cpp/MyItem.qml 0
+ \li \snippet qml/qtbinding/properties-cpp/applicationdata.h 0
+ \li \snippet qml/qtbinding/properties-cpp/MyItem.qml 0
\endtable
Notice the \c backgroundColorChanged signal is declared as the NOTIFY signal
evaluate() function, passing the script code (text) to evaluate
as argument.
- \snippet doc/snippets/qtjavascript/evaluation/main.cpp 0
+ \snippet qtjavascript/evaluation/main.cpp 0
The return value will be the result of the evaluation (represented
as a QJSValue object); this can be converted to standard C++
them with the script engine. This is most easily done by setting
properties of the script engine's \e{Global Object}:
- \snippet doc/snippets/qtjavascript/registeringvalues/main.cpp 0
+ \snippet qtjavascript/registeringvalues/main.cpp 0
This places the properties in the script environment, thus making them
available to script code.
Here's an example of making an instance of a QObject subclass
available to script code under the name \c{"myObject"}:
- \snippet doc/snippets/qtjavascript/registeringobjects/main.cpp 0
+ \snippet qtjavascript/registeringobjects/main.cpp 0
This will create a global variable called \c{myObject} in the
script environment. The variable serves as a proxy to the
\div{float-right}
\inlineimage declarative-colors.png
\enddiv
- \snippet doc/snippets/qml/colors.qml colors
+
+ \snippet qml/colors.qml colors
Or with the \l{QML:Qt::rgba()}{Qt.rgba()}, \l{QML:Qt::hsla()}{Qt.hsla()}, \l{QML:Qt::darker()}{Qt.darker()},
\l{QML:Qt::lighter()}{Qt.lighter()} or \l{QML:Qt::tint()}{Qt.tint()} functions:
For example, a hypothetical \e photo QML object would look like this:
-\snippet doc/snippets/qml/codingconventions/photo.qml 0
+\snippet qml/codingconventions/photo.qml 0
\section1 Grouped Properties
For example, this:
-\snippet doc/snippets/qml/codingconventions/dotproperties.qml 0
+\snippet qml/codingconventions/dotproperties.qml 0
can be written like this:
-\snippet doc/snippets/qml/codingconventions/dotproperties.qml 1
+\snippet qml/codingconventions/dotproperties.qml 1
\section1 Private Properties
accessible but is not meant for public use. Note that QML and JavaScript will
grant the user access to these properties.
-\snippet doc/snippets/qml/codingconventions/private.qml 0
+\snippet qml/codingconventions/private.qml 0
\section1 Lists
In this case, instead of:
-\snippet doc/snippets/qml/codingconventions/lists.qml 0
+\snippet qml/codingconventions/lists.qml 0
we will write this:
-\snippet doc/snippets/qml/codingconventions/lists.qml 1
+\snippet qml/codingconventions/lists.qml 1
\section1 JavaScript Code
If the script is a single expression, we recommend writing it inline:
-\snippet doc/snippets/qml/codingconventions/javascript.qml 0
+\snippet qml/codingconventions/javascript.qml 0
If the script is only a couple of lines long, we generally use a block:
-\snippet doc/snippets/qml/codingconventions/javascript.qml 1
+\snippet qml/codingconventions/javascript.qml 1
If the script is more than a couple of lines long or can be used by different objects, we recommend creating a function and calling it like this:
-\snippet doc/snippets/qml/codingconventions/javascript.qml 2
+\snippet qml/codingconventions/javascript.qml 2
For long scripts, we will put the functions in their own JavaScript file and import it like this:
-\snippet doc/snippets/qml/codingconventions/javascript-imports.qml 0
+\snippet qml/codingconventions/javascript-imports.qml 0
*/
Here is an example. First there is \c Sprite.qml, which defines a simple QML component:
-\snippet doc/snippets/qml/Sprite.qml 0
+\snippet qml/Sprite.qml 0
Our main application file, \c main.qml, imports a \c componentCreation.js JavaScript file
that will create \c Sprite objects:
-\snippet doc/snippets/qml/createComponent.qml 0
+\snippet qml/createComponent.qml 0
Here is \c componentCreation.js. Notice it checks whether the component \l{Component::status}{status} is
\c Component.Ready before calling \l {Component::createObject()}{createObject()}
in case the QML file is loaded over a network and thus is not ready immediately.
-\snippet doc/snippets/qml/componentCreation.js vars
+\snippet qml/componentCreation.js vars
\codeline
-\snippet doc/snippets/qml/componentCreation.js func
-\snippet doc/snippets/qml/componentCreation.js remote
-\snippet doc/snippets/qml/componentCreation.js func-end
+\snippet qml/componentCreation.js func
+\snippet qml/componentCreation.js remote
+\snippet qml/componentCreation.js func-end
\codeline
-\snippet doc/snippets/qml/componentCreation.js finishCreation
+\snippet qml/componentCreation.js finishCreation
If you are certain the QML file to be loaded is a local file, you could omit the \c finishCreation()
function and call \l {Component::createObject()}{createObject()} immediately:
-\snippet doc/snippets/qml/componentCreation.js func
-\snippet doc/snippets/qml/componentCreation.js local
-\snippet doc/snippets/qml/componentCreation.js func-end
+\snippet qml/componentCreation.js func
+\snippet qml/componentCreation.js local
+\snippet qml/componentCreation.js func-end
Notice in both instances, \l {Component::createObject()}{createObject()} is called with
\c appWindow passed as an argument so that the created object will become a child of the
If the QML is not defined until runtime, you can create a QML item from
a string of QML using the \l{QML:Qt::createQmlObject()}{Qt.createQmlObject()} function, as in the following example:
-\snippet doc/snippets/qml/createQmlObject.qml 0
+\snippet qml/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. The second argument is the parent item for the new item;
\li \c SelfDestroyingRect.qml
\row
-\li \snippet doc/snippets/qml/dynamicObjects-destroy.qml 0
-\li \snippet doc/snippets/qml/SelfDestroyingRect.qml 0
+\li \snippet qml/dynamicObjects-destroy.qml 0
+\li \snippet qml/SelfDestroyingRect.qml 0
\endtable
Objects created with \l{QML:Qt::createQmlObject()}{Qt.createQmlObject()}
can similarly be destroyed using \c destroy():
-\snippet doc/snippets/qml/createQmlObject.qml 0
-\snippet doc/snippets/qml/createQmlObject.qml destroy
+\snippet qml/createQmlObject.qml 0
+\snippet qml/createQmlObject.qml destroy
*/
\table
\row
-\li \snippet doc/snippets/qml/integrating-javascript/connectjs.qml 0
-\li \snippet doc/snippets/qml/integrating-javascript/script.js 0
+\li \snippet qml/integrating-javascript/connectjs.qml 0
+\li \snippet qml/integrating-javascript/script.js 0
\endtable
The \c jsFunction() will now be called whenever MouseArea's \c clicked signal is emitted.
\table
\row
-\li {1,2} \snippet doc/snippets/qml/integrating-javascript/includejs/app.qml 0
-\li \snippet doc/snippets/qml/integrating-javascript/includejs/script.js 0
+\li {1,2} \snippet qml/integrating-javascript/includejs/app.qml 0
+\li \snippet qml/integrating-javascript/includejs/script.js 0
\row
-\li \snippet doc/snippets/qml/integrating-javascript/includejs/factorial.js 0
+\li \snippet qml/integrating-javascript/includejs/factorial.js 0
\endtable
Notice that calling \l {QML:Qt::include()}{Qt.include()} imports all functions from
For the following examples, imagine that we have defined the following class:
-\snippet doc/snippets/qml/integrating-javascript/scarceresources/avatarExample.h 0
+\snippet qml/integrating-javascript/scarceresources/avatarExample.h 0
and that we have registered it with the QML type-system as follows:
-\snippet doc/snippets/qml/integrating-javascript/scarceresources/avatarExample.cpp 0
+\snippet qml/integrating-javascript/scarceresources/avatarExample.cpp 0
The AvatarExample class has a property which is a pixmap. When the property
is accessed in JavaScript scope, a copy of the resource will be created and
In the following example, the scarce resource will be automatically released
after the binding evaluation is complete.
-\snippet doc/snippets/qml/integrating-javascript/scarceresources/exampleOne.qml 0
+\snippet qml/integrating-javascript/scarceresources/exampleOne.qml 0
-\snippet doc/snippets/qml/integrating-javascript/scarceresources/avatarExample.cpp 1
+\snippet qml/integrating-javascript/scarceresources/avatarExample.cpp 1
\section2 Example Two: Automatic Release Prevented By Reference
complete, because there is a property var referencing the
scarce resource.
-\snippet doc/snippets/qml/integrating-javascript/scarceresources/exampleTwo.qml 0
+\snippet qml/integrating-javascript/scarceresources/exampleTwo.qml 0
-\snippet doc/snippets/qml/integrating-javascript/scarceresources/avatarExample.cpp 2
+\snippet qml/integrating-javascript/scarceresources/avatarExample.cpp 2
\section2 Example Three: Explicit Preservation
to prevent the declarative engine from automatically releasing the
resource after evaluation of the imported script.
-\snippet doc/snippets/qml/integrating-javascript/scarceresources/exampleThree.js 0
+\snippet qml/integrating-javascript/scarceresources/exampleThree.js 0
-\snippet doc/snippets/qml/integrating-javascript/scarceresources/exampleThree.qml 0
+\snippet qml/integrating-javascript/scarceresources/exampleThree.qml 0
-\snippet doc/snippets/qml/integrating-javascript/scarceresources/avatarExample.cpp 3
+\snippet qml/integrating-javascript/scarceresources/avatarExample.cpp 3
\section2 Example Four: Explicit Destruction
resources by releasing the scarce resource held in a JavaScript object, if
required, during evaluation of a JavaScript expression.
-\snippet doc/snippets/qml/integrating-javascript/scarceresources/exampleFour.js 0
+\snippet qml/integrating-javascript/scarceresources/exampleFour.js 0
-\snippet doc/snippets/qml/integrating-javascript/scarceresources/exampleFour.qml 0
+\snippet qml/integrating-javascript/scarceresources/exampleFour.qml 0
-\snippet doc/snippets/qml/integrating-javascript/scarceresources/avatarExample.cpp 4
+\snippet qml/integrating-javascript/scarceresources/avatarExample.cpp 4
\section2 Example Five: Explicit Destruction And JavaScript References
of those references (to explicitly release the scarce resource), all of
the references will be affected.
-\snippet doc/snippets/qml/integrating-javascript/scarceresources/exampleFive.qml 0
+\snippet qml/integrating-javascript/scarceresources/exampleFive.qml 0
-\snippet doc/snippets/qml/integrating-javascript/scarceresources/avatarExample.cpp 5
+\snippet qml/integrating-javascript/scarceresources/avatarExample.cpp 5
*/
to access an on-line photography service would provide the QML application with URLs to
photographs, which can be directly set on an \l Image \c source property.
-See the \tt examples/declarative/flickr for a real demonstration of this.
+See the \tt examples/quick/flickr for a real demonstration of this.
\section1 Configuring the Network Access Manager
Elements already possess useful properties but, to create custom properties,
precede the property name with the keyword \c property.
-\snippet doc/snippets/qml/properties.qml parent begin
-\snippet doc/snippets/qml/properties.qml inherited properties
-\snippet doc/snippets/qml/properties.qml custom properties
-\snippet doc/snippets/qml/properties.qml parent end
+\snippet qml/properties.qml parent begin
+\snippet qml/properties.qml inherited properties
+\snippet qml/properties.qml custom properties
+\snippet qml/properties.qml parent end
QML property rules coincide with many of JavaScript's property rules, for example,
property names must begin with a lowercase letter.
automatically kept up to date if the other properties or data values change.
Property bindings are created in QML using the colon "\c {:}" before the value:
-\snippet doc/snippets/qml/properties.qml property binding
+\snippet qml/properties.qml property binding
The property binding causes the width of the \c Rectangle to update whenever the
\c {parent}'s width changes.
QML extends a standards compliant JavaScript engine, so any valid JavaScript expression can be
used as a property binding. Bindings can access object properties, make function calls and even
use built-in JavaScript objects such as \c {Date} and \c {Math}.
-\snippet doc/snippets/qml/properties.qml JavaScript sample
+\snippet qml/properties.qml JavaScript sample
While syntactically bindings can be of arbitrary complexity, if a binding starts to become
overly complex - such as involving multiple lines, or imperative loops - it may be better
When working with both QML and JavaScript, it is important to differentiate between
QML property binding and JavaScript value assignment. In QML, a property
binding is created using the colon "\c {:}".
-\snippet doc/snippets/qml/properties.qml property binding
+\snippet qml/properties.qml property binding
The property binding causes the width of the \c Rectangle to update whenever the
\c {parent}'s width changes.
Assigning a property value (using the equals sign "\c {=}") does not create a
property binding (unless explicitly assigned, see below).
-\snippet doc/snippets/qml/properties.qml property assignment
+\snippet qml/properties.qml property assignment
Instead of creating a property binding, the assignment simply sets the \c Rectangle
\c width value to a number when the \c Component.onCompleted code is invoked.
Elements and components that are bound to properties are not necessarily set
as children of the properties' component.
-\snippet doc/snippets/qml/properties.qml object binding
+\snippet qml/properties.qml object binding
The code snippet has a \l Gradient element that attempts to print its parent's
\c width value. However, the \c Gradient element is bound to the \c gradient
property, not the \c children property of the \c Rectangle. As a result, the
objects. For example, the \l Keys element have properties that can \e attach to other QML
objects to provide keyboard handling.
-\snippet doc/snippets/qml/properties.qml list attached property
+\snippet qml/properties.qml list attached property
The element \l ListView provides the delegate, \c listdelegate, the property
\c isCurrentItem as an attached property. The \c ListView.isCurrentItem
\e{attached property} provides highlight information to the delegate.
\l Component and \l Keys element provide
\l{QML Signal and Handler Event System}{signal handlers} as attached signal
handlers.
-\snippet doc/snippets/qml/properties.qml attached signal handler
+\snippet qml/properties.qml attached signal handler
Read the \l{QML Signal and Handler Event System} and the \l{Keyboard Focus in QML}
articles for more information.
component can bind to the property. List properties allow multiple
\l {State}{States}, \l {Gradient}{Gradients}, and other components to bind to a
single property.
-\snippet doc/snippets/qml/properties.qml list property
+\snippet qml/properties.qml list property
The list is enclosed in square brackets, with a comma separating the
list elements. In cases where you are only assigning a single item to a
list, you may omit the square brackets.
-\snippet doc/snippets/qml/properties.qml single property
+\snippet qml/properties.qml single property
To access the list, use the \c index property.
-\snippet doc/snippets/qml/properties.qml print list property
+\snippet qml/properties.qml print list property
The snippet code simply prints the name of the first state, \c FETCH.
See the \l{list}{list type} documentation
or \e group notation.
Grouped properties may be written both ways:
-\snippet doc/snippets/qml/properties.qml grouped properties
+\snippet qml/properties.qml grouped properties
In the element documentation grouped properties are shown using the dot notation.
addition, the optional \c default keyword indicates that the aliasing property
is a \l{Default Properties}{default property}.
-\snippet doc/snippets/qml/Button.qml property alias
+\snippet qml/Button.qml property alias
When importing the component as a \c Button, the \c buttonlabel is directly
accessible through the \c label property.
-\snippet doc/snippets/qml/properties.qml alias usage
+\snippet qml/properties.qml alias usage
In addition, the \c id property may also be aliased and referred outside the
component.
-\snippet doc/snippets/qml/Button.qml parent begin
-\snippet doc/snippets/qml/Button.qml id alias
-\snippet doc/snippets/qml/Button.qml parent end
+\snippet qml/Button.qml parent begin
+\snippet qml/Button.qml id alias
+\snippet qml/Button.qml parent end
The \c imagebutton component has the ability to modify the child \l Image object
and its properties.
-\snippet doc/snippets/qml/properties.qml image alias
+\snippet qml/properties.qml image alias
Using aliases, properties may be exposed to the
\l{qml-top-level-component}{top level component}. Exposing properties to the
when an uninitialized alias is referenced. Likewise, aliasing an aliasing
property will also result in an error.
-\snippet doc/snippets/qml/properties.qml alias complete
+\snippet qml/properties.qml alias complete
When importing the component, however, aliasing properties appear as regular Qt
properties and consequently can be used in alias references.
the following component has a \c color alias property, named the same as the built-in
\l {Rectangle::color} property:
-\snippet doc/snippets/qml/properties.qml alias overwrite
+\snippet qml/properties.qml alias overwrite
Any object that use this component and refer to its \c color property will be
referring to the alias rather than the ordinary \l {Rectangle::color} property.
is its \l{State::changes}{changes} property. \l PropertyChanges elements
may simply be placed as the \c{State}'s children and they will be bound to the
\c changes property.
-\snippet doc/snippets/qml/properties.qml state default
+\snippet qml/properties.qml state default
Similarly, the \l Item element's default property is its
\l{Item::data}{data} property. The \c data property manages Item's
\c children and \c resources properties. This way, different data types may be
placed as direct children of the \c Item.
-\snippet doc/snippets/qml/properties.qml default property
+\snippet qml/properties.qml default property
Reassigning a default property is useful when a component is reused. For
example, the \l{declarative/ui-components/tabwidget}{TabWidget} example uses
runtime} or \l{QmlGlobalQtObject}{Qt object}, such as the \c system.brightness
property, to a value written in QML, you could use the \l Binding element as
follows:
-\snippet doc/snippets/qml/properties.qml binding element
+\snippet qml/properties.qml binding element
\section1 Changing Property Values in States
The \l PropertyChanges element is for setting property bindings within a
\l State element to set a property binding.
-\snippet doc/snippets/qml/properties.qml PropertyChanges element
+\snippet qml/properties.qml PropertyChanges element
The rectangle's \c color property will bind to the \c warning component's
\c color property when its \c state is set to the \c WARNING state.
*/
Any snippet of QML code may become a component, by placing the code in a QML
file, whose file extension is \c .qml). A complete Button component that
responds to user input may be in a Button.qml file.
-\snippet doc/snippets/qml/reusablecomponents/Button.qml document
+\snippet qml/reusablecomponents/Button.qml document
The component name, \c Button, matches the QML filename, \c Button.qml.
Also, the first character is in upper case. Matching the names allow
Alternatively, a \l Component element may encapsulate a QML object to form a
component.
-\snippet doc/snippets/qml/reusablecomponents/component.qml parent begin
-\snippet doc/snippets/qml/reusablecomponents/component.qml define inline component
-\snippet doc/snippets/qml/reusablecomponents/component.qml parent end
+\snippet qml/reusablecomponents/component.qml parent begin
+\snippet qml/reusablecomponents/component.qml define inline component
+\snippet qml/reusablecomponents/component.qml parent end
Components may incorporate any \l{Qt Quick}{QML feature} such as:
of the component. For example, a button defined in \c Button.qml is created by
declaring a \c Button. The button is defined in the
\l {qml-define-components}{Defining New Components} section.
-\snippet doc/snippets/qml/reusablecomponents/application.qml document
+\snippet qml/reusablecomponents/application.qml document
Note that the component name, \c Button, matches the QML filename, \c Button.qml.
Also, the first character is in upper case. Matching the names allow
plugins, or directories should be imported. By using a \c qmldir file, component
names do not need to match the filenames. The \c qmldir file should, however, be
in an imported path.
-\snippet doc/snippets/qml/reusablecomponents/qmldir document
+\snippet qml/reusablecomponents/qmldir document
\section2 Loading an Inline Component
\l Loader element. The component can create an object, which is addressable in a
similar way as an \l {qml-id}{identifier}. Thus, the created object may
have its bindings set and read like a normal QML object.
-\snippet doc/snippets/qml/reusablecomponents/component.qml define inline component
-\snippet doc/snippets/qml/reusablecomponents/component.qml create inline component
+\snippet qml/reusablecomponents/component.qml define inline component
+\snippet qml/reusablecomponents/component.qml create inline component
\keyword qml-component-properties
\section1 Component Properties
object is a \l Rectangle. When imported, the Button component will possess the
Rectangle's properties, methods, signals, and any custom properties.
-\snippet doc/snippets/qml/reusablecomponents/Button.qml parent begin
-\snippet doc/snippets/qml/reusablecomponents/Button.qml ellipses
-\snippet doc/snippets/qml/reusablecomponents/Button.qml properties
-\snippet doc/snippets/qml/reusablecomponents/Button.qml ellipses
-\snippet doc/snippets/qml/reusablecomponents/Button.qml parent end
+\snippet qml/reusablecomponents/Button.qml parent begin
+\snippet qml/reusablecomponents/Button.qml ellipses
+\snippet qml/reusablecomponents/Button.qml properties
+\snippet qml/reusablecomponents/Button.qml ellipses
+\snippet qml/reusablecomponents/Button.qml parent end
The Button's \c text alias is accessible from outside the component as well as
the Rectangle's visual properties and signals such as \c x, \c y, \c anchors,
\c FocusScopes are not visual elements, the visual properties of its child need
to be exposed.
-\snippet doc/snippets/qml/reusablecomponents/focusbutton.qml document
+\snippet qml/reusablecomponents/focusbutton.qml document
\keyword qml-id
\section2 The Object Identifier
No other object within the same QML component (see \l{QML Documents}) can have
the same \c id value. QML objects may then access an object using the \c id
property.
-\snippet doc/snippets/qml/properties.qml id property
+\snippet qml/properties.qml id property
A component may readily access its parent's properties by using the \c parent
property.
Objects or Items declared within a component can be made accessible by binding their id to a
property alias.
-\snippet doc/snippets/qml/reusablecomponents/Button.qml parent begin
-\snippet doc/snippets/qml/reusablecomponents/Button.qml object alias
-\snippet doc/snippets/qml/reusablecomponents/Button.qml text
-\snippet doc/snippets/qml/reusablecomponents/Button.qml parent end
+\snippet qml/reusablecomponents/Button.qml parent begin
+\snippet qml/reusablecomponents/Button.qml object alias
+\snippet qml/reusablecomponents/Button.qml text
+\snippet qml/reusablecomponents/Button.qml parent end
The advantage of using an alias instead a property of type of the object is that the value of
the alias cannot be overridden, and members of the object can be used in property bindings when
declaring an instance of the component.
-\snippet doc/snippets/qml/reusablecomponents/application.qml grouped property
+\snippet qml/reusablecomponents/application.qml grouped property
If a property of type \c Text was used instead of an alias in this instance there would be no
guarantee that \c label would be initialized before the binding was attempted which would cause
the binding to fail.
Here is a simple QML document:
-\snippet doc/snippets/qml/qml-documents/non-trivial.qml document
+\snippet qml/qml-documents/non-trivial.qml document
QML documents are always encoded in UTF-8 format.
\li application.qml
\row
-\li \snippet doc/snippets/qml/qml-documents/qmldocuments.qml document
+\li \snippet qml/qml-documents/qmldocuments.qml document
\li
\qml
import QtQuick 2.0
\table
\row
\li
-\snippet doc/snippets/qml/qml-documents/inline-component.qml document
+\snippet qml/qml-documents/inline-component.qml document
\li
-\snippet doc/snippets/qml/qml-documents/inline-text-component.qml document
+\snippet qml/qml-documents/inline-text-component.qml document
\endtable
An \c import statement includes the module name, and possibly a version number.
This can be seen in the snippet commonly found at the top of QML files:
-\snippet doc/snippets/qml/imports/qtquick-1.0.qml import
+\snippet qml/imports/qtquick-1.0.qml import
This imports version 1.0 of the "QtQuick" module into the global namespace. (The QML
library itself must be imported to use any of the \l {QML Elements}, as they
Similarly, if the directory resided on a network source, it could
be imported like this:
-\snippet doc/snippets/qml/imports/network-imports.qml imports
+\snippet qml/imports/network-imports.qml imports
A located module can also be imported as a network resource if it has a
\l{Writing a qmldir file}{qmldir file} in the directory that specifies the QML files
When importing an installed module, an un-quoted URI is
used, with a mandatory version number:
-\snippet doc/snippets/qml/imports/installed-module.qml imports
+\snippet qml/imports/installed-module.qml imports
When a module is imported, the QML engine searches the QML import path for a matching
module. The root directory of the module must contain a
This allows the application's QML files to use the \c PieChart type by importing the declared
\c Charts module:
-\snippet doc/snippets/qml/imports/chart.qml import
+\snippet qml/imports/chart.qml import
For \l{QQmlExtensionPlugin}{QML plugins}, the
module URI is automatically passed to QQmlExtensionPlugin::registerTypes(). This method
\c registerTypes() implementation from the \l{declarative/cppextensions/plugins}{QML plugins}
example:
-\snippet examples/declarative/cppextensions/plugins/plugin.cpp plugin
+\snippet examples/qml/cppextensions/plugins/plugin.cpp plugin
Once the plugin is built and installed, and includes a \l{Writing a qmldir file}{qmldir file},
the module can be imported from QML, like this:
-\snippet doc/snippets/qml/imports/timeexample.qml import
+\snippet qml/imports/timeexample.qml import
Unlike QML types defined by QML files, a QML type defined in a C++ extension plugin cannot be loaded by
a module that is imported as a network resource.
To import a module into a specific namespace, use the \e as keyword:
-\snippet doc/snippets/qml/imports/named-imports.qml imports
+\snippet qml/imports/named-imports.qml imports
Types from these modules can then only be used when qualified by the namespace:
-\snippet doc/snippets/qml/imports/named-imports.qml imported items
+\snippet qml/imports/named-imports.qml imported items
Multiple modules can be imported into the same namespace in the same way that multiple modules can be imported into the global namespace:
-\snippet doc/snippets/qml/imports/merged-named-imports.qml imports
+\snippet qml/imports/merged-named-imports.qml imports
\section2 JavaScript Files
block generates an error. However, a new signal may reuse the name of an existing signal on the type. (This should be done with caution, as the existing signal may be hidden and become inaccessible.)
Here are various examples of signal declarations:
-\snippet doc/snippets/qml/events.qml parent begin
-\snippet doc/snippets/qml/events.qml signal declaration
-\snippet doc/snippets/qml/events.qml parent end
+\snippet qml/events.qml parent begin
+\snippet qml/events.qml signal declaration
+\snippet qml/events.qml parent end
If the signal has no parameters, the "\c{()}" brackets are optional. If
parameters are used, the parameter types must be declared, as for the \c string
Adding a signal to an item automatically adds a \e{signal handler} as well. The
signal hander is named \c on<SignalName>, with the first letter of the signal in
uppercase. The previous signals have the following signal handlers:
-\snippet doc/snippets/qml/events.qml signal handler declaration
+\snippet qml/events.qml signal handler declaration
Further, each QML properties have a \c{<property_name>Changed} signal and its
corresponding \c{on<property_name>Changed} signal handler. As a result, property
changes may notify other components for any changes.
-\snippet doc/snippets/qml/events.qml automatic signals
+\snippet qml/events.qml automatic signals
To emit a signal, invoke it as a method. The signal handler binding is similar
to a property binding and it is invoked when the signal is emitted. Use the
defined argument names to access the respective arguments.
-\snippet doc/snippets/qml/events.qml signal emit
+\snippet qml/events.qml signal emit
Note that the \c Component.onCompleted is an
\l{attached-signalhandlers}{attached signal handler}; it is invoked when the
\l Component initialization is complete.
signal to be received by a method instead of a
\l {Signal Handlers}{signal handler}.
-\snippet doc/snippets/qml/events.qml connect method
+\snippet qml/events.qml connect method
The \c {connect()} method is appropriate when connecting a JavaScript method to
a signal.
By connecting signals to other signals, the \c connect() method can form different
signal chains.
-\snippet doc/snippets/qml/events.qml forward signal
+\snippet qml/events.qml forward signal
Whenever the \l MouseArea \c clicked signal is emitted, the \c send
\li Multiline comments start with /* and finish with *\/
\endlist
-\snippet doc/snippets/qml/comments.qml 0
+\snippet qml/comments.qml 0
Comments are ignored by the engine. They are useful for explaining what you
are doing; for referring back to at a later date, or for others reading
extensions can be deployed through plugins.
You can find the source code for this tutorial in \c Qt's
-examples/declarative/tutorials/extending directory.
+examples/quick/tutorials/extending directory.
Tutorial chapters:
\list 1
-\li \l{declarative/tutorials/extending/chapter1-basics}{Creating a New Type}
-\li \l{declarative/tutorials/extending/chapter2-methods}{Connecting to C++ Methods and Signals}
-\li \l{declarative/tutorials/extending/chapter3-bindings}{Property Binding}
-\li \l{declarative/tutorials/extending/chapter4-customPropertyTypes}{Using Custom Property Types}
-\li \l{declarative/tutorials/extending/chapter5-listproperties}{Using List Property Types}
-\li \l{declarative/tutorials/extending/chapter6-plugins}{Writing an Extension Plugin}
+\li \l{examples/tutorials/extending/chapter1-basics}{Creating a New Type}
+\li \l{examples/tutorials/extending/chapter2-methods}{Connecting to C++ Methods and Signals}
+\li \l{examples/tutorials/extending/chapter3-bindings}{Property Binding}
+\li \l{examples/tutorials/extending/chapter4-customPropertyTypes}{Using Custom Property Types}
+\li \l{examples/tutorials/extending/chapter5-listproperties}{Using List Property Types}
+\li \l{examples/tutorials/extending/chapter6-plugins}{Writing an Extension Plugin}
\li \l{qml-extending-tutorial7.html}{In Summary}
\endlist
/*!
\title Chapter 1: Creating a New Type
-\example declarative/tutorials/extending/chapter1-basics
+\example examples/tutorials/extending/chapter1-basics
A common task when extending QML is to provide a new QML type that supports some
custom functionality beyond what is provided by the built-in \l {QML Elements}.
Here is our \c PieChart class, defined in \c piechart.h:
-\snippet declarative/tutorials/extending/chapter1-basics/piechart.h 0
+\snippet examples/tutorials/extending/chapter1-basics/piechart.h 0
The class inherits from QQuickItem because we want to override
QQuickItem::paint() in order to draw. If the class just represented some
implements \c paint() to draw a simple pie chart. It also turns off the
QGraphicsItem::ItemHasNoContents flag to enable painting:
-\snippet declarative/tutorials/extending/chapter1-basics/piechart.cpp 0
+\snippet examples/tutorials/extending/chapter1-basics/piechart.cpp 0
\dots 0
-\snippet declarative/tutorials/extending/chapter1-basics/piechart.cpp 1
+\snippet examples/tutorials/extending/chapter1-basics/piechart.cpp 1
Now that we have defined the \c PieChart type, we will use it from QML. The \c app.qml
file creates a \c PieChart item and display the pie chart's details
using a standard QML \l Text item:
-\snippet declarative/tutorials/extending/chapter1-basics/app.qml 0
+\snippet examples/tutorials/extending/chapter1-basics/app.qml 0
Notice that although the color is specified as a string in QML, it is automatically
converted to a QColor object for the PieChart \c color property. Automatic conversions are
Here is the application \c main.cpp:
-\snippet declarative/tutorials/extending/chapter1-basics/main.cpp 0
+\snippet examples/tutorials/extending/chapter1-basics/main.cpp 0
This call to qmlRegisterType() registers the \c PieChart type as a type called "PieChart", in a module named "Charts",
with a module version of 1.0.
Lastly, we write a \c .pro project file that includes the files and the \c declarative library:
-\quotefile declarative/tutorials/extending/chapter1-basics/chapter1-basics.pro
+\quotefile examples/tutorials/extending/chapter1-basics/chapter1-basics.pro
Now we can build and run the application:
/*!
\title Chapter 2: Connecting to C++ Methods and Signals
-\example declarative/tutorials/extending/chapter2-methods
+\example examples/tutorials/extending/chapter2-methods
Suppose we want \c PieChart to have a "clearChart()" method that erases the
chart and then emits a "chartCleared" signal. Our \c app.qml would be able
to call \c clearChart() and receive \c chartCleared() signals like this:
-\snippet declarative/tutorials/extending/chapter2-methods/app.qml 0
+\snippet examples/tutorials/extending/chapter2-methods/app.qml 0
\image extending-tutorial-chapter2.png
To do this, we add a \c clearChart() method and a \c chartCleared() signal
to our C++ class:
-\snippet declarative/tutorials/extending/chapter2-methods/piechart.h 0
+\snippet examples/tutorials/extending/chapter2-methods/piechart.h 0
\dots
-\snippet declarative/tutorials/extending/chapter2-methods/piechart.h 1
+\snippet examples/tutorials/extending/chapter2-methods/piechart.h 1
\dots
-\snippet declarative/tutorials/extending/chapter2-methods/piechart.h 2
+\snippet examples/tutorials/extending/chapter2-methods/piechart.h 2
\dots
-\snippet declarative/tutorials/extending/chapter2-methods/piechart.h 3
+\snippet examples/tutorials/extending/chapter2-methods/piechart.h 3
The use of Q_INVOKABLE makes the \c clearChart() method available to the
Qt Meta-Object system, and in turn, to QML. Note that it could have
The \c clearChart() method simply changes the color to Qt::transparent,
repaints the chart, then emits the \c chartCleared() signal:
-\snippet declarative/tutorials/extending/chapter2-methods/piechart.cpp 0
+\snippet examples/tutorials/extending/chapter2-methods/piechart.cpp 0
Now when we run the application and click the window, the pie chart
disappears, and the application outputs:
/*!
\title Chapter 3: Adding Property Bindings
-\example declarative/tutorials/extending/chapter3-bindings
+\example examples/tutorials/extending/chapter3-bindings
Property binding is a powerful feature of QML that allows values of different
elements to be synchronized automatically. It uses signals to notify and update
Let's enable property bindings for the \c color property. That means
if we have code like this:
-\snippet declarative/tutorials/extending/chapter3-bindings/app.qml 0
+\snippet examples/tutorials/extending/chapter3-bindings/app.qml 0
\image extending-tutorial-chapter3.png
We add a \l{Qt's Property System}{NOTIFY} feature to its Q_PROPERTY() declaration to indicate that a "colorChanged" signal
is emitted whenever the value changes.
-\snippet declarative/tutorials/extending/chapter3-bindings/piechart.h 0
+\snippet examples/tutorials/extending/chapter3-bindings/piechart.h 0
\dots
-\snippet declarative/tutorials/extending/chapter3-bindings/piechart.h 1
+\snippet examples/tutorials/extending/chapter3-bindings/piechart.h 1
\dots
-\snippet declarative/tutorials/extending/chapter3-bindings/piechart.h 2
+\snippet examples/tutorials/extending/chapter3-bindings/piechart.h 2
\dots
-\snippet declarative/tutorials/extending/chapter3-bindings/piechart.h 3
+\snippet examples/tutorials/extending/chapter3-bindings/piechart.h 3
Then, we emit this signal in \c setPieSlice():
-\snippet declarative/tutorials/extending/chapter3-bindings/piechart.cpp 0
+\snippet examples/tutorials/extending/chapter3-bindings/piechart.cpp 0
It's important for \c setColor() to check that the color value has actually changed
before emitting \c colorChanged(). This ensures the signal is not emitted unnecessarily and
/*!
\title Chapter 4: Using Custom Property Types
-\example declarative/tutorials/extending/chapter4-customPropertyTypes
+\example examples/tutorials/extending/chapter4-customPropertyTypes
The \c PieChart type currently has a string-type property and a color-type property.
It could have many other types of properties. For example, it could have an
"PieSlice" that has a \c color property. Instead of assigning a color,
we assign an \c PieSlice value which itself contains a \c color:
-\snippet declarative/tutorials/extending/chapter4-customPropertyTypes/app.qml 0
+\snippet examples/tutorials/extending/chapter4-customPropertyTypes/app.qml 0
Like \c PieChart, this new \c PieSlice type inherits from QQuickItem and declares
its properties with Q_PROPERTY():
-\snippet declarative/tutorials/extending/chapter4-customPropertyTypes/pieslice.h 0
+\snippet examples/tutorials/extending/chapter4-customPropertyTypes/pieslice.h 0
To use it in \c PieChart, we modify the \c color property declaration
and associated method signatures:
-\snippet declarative/tutorials/extending/chapter4-customPropertyTypes/piechart.h 0
+\snippet examples/tutorials/extending/chapter4-customPropertyTypes/piechart.h 0
\dots
-\snippet declarative/tutorials/extending/chapter4-customPropertyTypes/piechart.h 1
+\snippet examples/tutorials/extending/chapter4-customPropertyTypes/piechart.h 1
\dots
-\snippet declarative/tutorials/extending/chapter4-customPropertyTypes/piechart.h 2
+\snippet examples/tutorials/extending/chapter4-customPropertyTypes/piechart.h 2
\dots
-\snippet declarative/tutorials/extending/chapter4-customPropertyTypes/piechart.h 3
+\snippet examples/tutorials/extending/chapter4-customPropertyTypes/piechart.h 3
There is one thing to be aware of when implementing \c setPieSlice(). The \c PieSlice
is a visual item, so it must be set as a child of the \c PieChart using
QQuickItem::setParentItem() so that the \c PieChart knows to paint this child
item when its contents are drawn:
-\snippet declarative/tutorials/extending/chapter4-customPropertyTypes/piechart.cpp 0
+\snippet examples/tutorials/extending/chapter4-customPropertyTypes/piechart.cpp 0
Like the \c PieChart type, the \c PieSlice type has to be registered
using qmlRegisterType() to be used from QML. As with \c PieChart, we'll add the
type to the "Charts" module, version 1.0:
-\snippet declarative/tutorials/extending/chapter4-customPropertyTypes/main.cpp 0
+\snippet examples/tutorials/extending/chapter4-customPropertyTypes/main.cpp 0
\dots
-\snippet declarative/tutorials/extending/chapter4-customPropertyTypes/main.cpp 1
+\snippet examples/tutorials/extending/chapter4-customPropertyTypes/main.cpp 1
\dots
-\snippet declarative/tutorials/extending/chapter4-customPropertyTypes/main.cpp 2
+\snippet examples/tutorials/extending/chapter4-customPropertyTypes/main.cpp 2
Try it out with the code in Qt's \c examples/tutorials/extending/chapter4-customPropertyTypes directory.
/*!
\title Chapter 5: Using List Property Types
-\example declarative/tutorials/extending/chapter5-listproperties
+\example examples/tutorials/extending/chapter5-listproperties
Right now, a \c PieChart can only have one \c PieSlice. Ideally a chart would
have multiple slices, with different colors and sizes. To do this, we could
have a \c slices property that accepts a list of \c PieSlice items:
-\snippet declarative/tutorials/extending/chapter5-listproperties/app.qml 0
+\snippet examples/tutorials/extending/chapter5-listproperties/app.qml 0
\image extending-tutorial-chapter5.png
an internal \c append_slice() function (discussed below). We also use a QList to
store the internal list of slices as \c m_slices:
-\snippet declarative/tutorials/extending/chapter5-listproperties/piechart.h 0
+\snippet examples/tutorials/extending/chapter5-listproperties/piechart.h 0
\dots
-\snippet declarative/tutorials/extending/chapter5-listproperties/piechart.h 1
+\snippet examples/tutorials/extending/chapter5-listproperties/piechart.h 1
\dots
-\snippet declarative/tutorials/extending/chapter5-listproperties/piechart.h 2
+\snippet examples/tutorials/extending/chapter5-listproperties/piechart.h 2
Although the \c slices property does not have an associated \c WRITE function,
it is still modifiable because of the way QQmlListProperty works.
\c PieChart::append_slice() function is to be called whenever a request is made from QML
to add items to the list:
-\snippet declarative/tutorials/extending/chapter5-listproperties/piechart.cpp 0
+\snippet examples/tutorials/extending/chapter5-listproperties/piechart.cpp 0
The \c append_slice() function simply sets the parent item as before,
and adds the new item to the \c m_slices list. As you can see, the append function for a
/*!
\title Chapter 6: Writing an Extension Plugin
-\example declarative/tutorials/extending/chapter6-plugins
+\example examples/tutorials/extending/chapter6-plugins
Currently the \c PieChart and \c PieSlice types are used by \c app.qml,
which is displayed using a QQuickView in a C++ application. An alternative
Here is the \c ChartsPlugin definition in \c chartsplugin.h:
-\snippet declarative/tutorials/extending/chapter6-plugins/chartsplugin.h 0
+\snippet examples/tutorials/extending/chapter6-plugins/chartsplugin.h 0
And its implementation in \c chartsplugin.cpp:
-\snippet declarative/tutorials/extending/chapter6-plugins/chartsplugin.cpp 0
+\snippet examples/tutorials/extending/chapter6-plugins/chartsplugin.cpp 0
Then, we write a \c .pro project file that defines the project as a plugin library
and specifies with DESTDIR that library files should be built into a "lib" subdirectory:
-\quotefile declarative/tutorials/extending/chapter6-plugins/chapter6-plugins.pro
+\quotefile examples/tutorials/extending/chapter6-plugins/chapter6-plugins.pro
Finally, we add a \l{Writing a qmldir file}{qmldir} file that is automatically parsed by the QML engine.
In this file, we specify that a plugin named "chapter6-plugin" (the name
of the example project) can be found in the "lib" subdirectory:
-\quotefile declarative/tutorials/extending/chapter6-plugins/qmldir
+\quotefile examples/tutorials/extending/chapter6-plugins/ChartsPlugin/qmldir
Now we have a plugin, and instead of having a main.cpp and an executable, we can build
the project and then load the QML file in the \l {QML Viewer}:
*/
/*!
-iterator &QInplacelist::iterator::erase()
+\fn iterator &QInplacelist::iterator::erase()
Remove the current object from the list, and return an iterator to the next element.
*/
For example, here is a component that is used by multiple \l Loader objects.
It contains a single item, a \l Rectangle:
- \snippet doc/snippets/qml/component.qml 0
+ \snippet qml/component.qml 0
Notice that while a \l Rectangle by itself would be automatically
rendered and displayed, this is not the case for the above rectangle
It can be useful to create a QtObject if you need an extremely
lightweight element to enclose a set of custom properties:
- \snippet doc/snippets/qml/qtobject.qml 0
+ \snippet qml/qtobject.qml 0
It can also be useful for C++ integration, as it is just a plain
QObject. See the QObject documentation for further details.
The following example uses the \c application object to indicate
whether the application is currently active:
- \snippet doc/snippets/qml/application.qml document
+ \snippet qml/application.qml document
*/
/*!
should be bundled with the plugin, so it needs to be specified in the \c qmldir
file:
- \quotefile examples/declarative/cppextensions/plugins/com/nokia/TimeExample/qmldir
+ \quotefile examples/qml/cppextensions/plugins/com/nokia/TimeExample/qmldir
Once the project is built and installed, the new \c Time element can be
used by any QML component that imports the \c com.nokia.TimeExample module:
- \snippet examples/declarative/cppextensions/plugins/plugins.qml 0
+ \snippet examples/qml/cppextensions/plugins/plugins.qml 0
The full source code is available in the \l {declarative/cppextensions/plugins}{plugins example}.
\inlineimage listmodel.png
\enddiv
- \snippet doc/snippets/qml/listmodel.qml 0
+ \snippet qml/listmodel/listmodel.qml 0
Roles (properties) in each element must begin with a lower-case letter and
should be common to all elements in a model. The ListElement documentation
Since the example model contains an \c id property, it can be referenced
by views, such as the ListView in this example:
- \snippet doc/snippets/qml/listmodel-simple.qml 0
+ \snippet qml/listmodel/listmodel-simple.qml 0
\dots 8
- \snippet doc/snippets/qml/listmodel-simple.qml 1
+ \snippet qml/listmodel/listmodel-simple.qml 1
It is possible for roles to contain list data. In the following example we
create a list of fruit attributes:
- \snippet doc/snippets/qml/listmodel-nested.qml model
+ \snippet qml/listmodel/listmodel-nested.qml model
The delegate displays all the fruit attributes:
\inlineimage listmodel-nested.png
\enddiv
- \snippet doc/snippets/qml/listmodel-nested.qml delegate
+ \snippet qml/listmodel/listmodel-nested.qml delegate
\section1 Modifying List Models
The content of a ListModel may be created and modified using the clear(),
append(), set(), insert() and setProperty() methods. For example:
- \snippet doc/snippets/qml/listmodel-modify.qml delegate
+ \snippet qml/listmodel/listmodel-modify.qml delegate
Note that when creating content dynamically the set of available properties
cannot be changed once set. Whatever properties are first added to the model
Here is an example that uses WorkerScript to periodically append the
current time to a list model:
- \snippet examples/declarative/threading/threadedlistmodel/timedisplay.qml 0
+ \snippet examples/quick/threading/threadedlistmodel/timedisplay.qml 0
The included file, \tt dataloader.js, looks like this:
- \snippet examples/declarative/threading/threadedlistmodel/dataloader.js 0
+ \snippet examples/quick/threading/threadedlistmodel/dataloader.js 0
The timer in the main example sends messages to the worker script by calling
\l WorkerScript::sendMessage(). When this message is received,
The following model defines a series of list elements, each of which
contain "name" and "cost" roles and their associated values.
- \snippet doc/snippets/qml/qml-data-models/listelements.qml model
+ \snippet qml/listmodel/listelements.qml model
The delegate obtains the name and cost for each element by simply referring
to \c name and \c cost:
- \snippet doc/snippets/qml/qml-data-models/listelements.qml view
+ \snippet qml/listmodel/listelements.qml view
\sa ListModel
*/
An example:
- \snippet doc/snippets/qml/workerscript.qml 0
+ \snippet qml/workerscript/workerscript.qml 0
The above worker script specifies a JavaScript file, "script.js", that handles
the operations to be performed in the new thread. Here is \c script.js:
- \quotefile doc/src/snippets/qml/script.js
+ \quotefile qml/workerscript/script.js
When the user clicks anywhere within the rectangle, \c sendMessage() is
called, triggering the \tt WorkerScript.onMessage() handler in
Use evaluate() to evaluate script code.
- \snippet doc/snippets/code/src_script_qjsengine.cpp 0
+ \snippet code/src_script_qjsengine.cpp 0
evaluate() returns a QJSValue that holds the result of the
evaluation. The QJSValue class provides functions for converting
The following code snippet shows how a script function can be
defined and then invoked from C++ using QJSValue::call():
- \snippet doc/snippets/code/src_script_qjsengine.cpp 1
+ \snippet code/src_script_qjsengine.cpp 1
As can be seen from the above snippets, a script is provided to the
engine in the form of a string. One common way of loading scripts is
by reading the contents of a file and passing it to evaluate():
- \snippet doc/snippets/code/src_script_qjsengine.cpp 2
+ \snippet code/src_script_qjsengine.cpp 2
Here we pass the name of the file as the second argument to
evaluate(). This does not affect evaluation in any way; the second
want to configure a script engine by adding one or more properties
to the Global Object:
- \snippet doc/snippets/code/src_script_qjsengine.cpp 3
+ \snippet code/src_script_qjsengine.cpp 3
Adding custom properties to the scripting environment is one of the
standard means of providing a scripting API that is specific to your
value. If isError() returns true, you can call toString() on the
error object to obtain an error message.
- \snippet doc/snippets/code/src_script_qjsengine.cpp 4
+ \snippet code/src_script_qjsengine.cpp 4
\section1 Script Object Creation
properties of the proxy object. No binding code is needed because it
is done dynamically using the Qt meta object system.
- \snippet doc/snippets/code/src_script_qjsengine.cpp 5
+ \snippet code/src_script_qjsengine.cpp 5
\sa QJSValue, {Making Applications Scriptable}
QJSValues. Use setProperty() to set a property of an object, and
call property() to retrieve the value of a property.
- \snippet doc/snippets/code/src_script_qjsvalue.cpp 0
+ \snippet code/src_script_qjsvalue.cpp 0
If you want to iterate over the properties of a script object, use
the QJSValueIterator class.
beginning of the sequence of properties. Here's how to iterate over
all the properties of a QJSValue:
- \snippet doc/snippets/code/src_script_qjsvalueiterator.cpp 0
+ \snippet code/src_script_qjsvalueiterator.cpp 0
The next() advances the iterator. The name() and value()
functions return the name and value of the last item that was
own properties; i.e. it does not follow the prototype chain. You can
use a loop like this to follow the prototype chain:
- \snippet doc/snippets/code/src_script_qjsvalueiterator.cpp 1
+ \snippet code/src_script_qjsvalueiterator.cpp 1
\sa QJSValue::property()
*/
Example (where \c parentItem is the id of an existing QML item):
-\snippet doc/snippets/qml/createQmlObject.qml 0
+\snippet qml/createQmlObject.qml 0
In the case of an error, a QtScript Error object is thrown. This object has an additional property,
\c qmlErrors, which is an array of the errors encountered.
For example:
-\snippet doc/snippets/qml/createComponent-simple.qml 0
+\snippet qml/createComponent-simple.qml 0
See \l {Dynamic Object Management in QML} for more information on using this function.
There are two main use-cases for the function: firstly, in imperative
JavaScript code to cause a binding assignment:
- \snippet doc/snippets/declarative/qtBinding.1.qml 0
+ \snippet qml/qtBinding.1.qml 0
and secondly, when defining initial property values of dynamically
constructed objects (via Component.createObject() or
Loader.setSource()) as being bound to the result of an expression.
For example, assuming the existence of a DynamicText component:
- \snippet doc/snippets/declarative/DynamicText.qml 0
+ \snippet qml/DynamicText.qml 0
the output from:
- \snippet doc/snippets/declarative/qtBinding.2.qml 0
+ \snippet qml/qtBinding.2.qml 0
and from:
- \snippet doc/snippets/declarative/qtBinding.3.qml 0
+ \snippet qml/qtBinding.3.qml 0
should both be:
\code
declarations and binding assignments}) except when the result is
stored in an array bound to a var property.
- \snippet doc/snippets/declarative/qtBinding.4.qml 0
+ \snippet qml/qtBinding.4.qml 0
Note: in QtQuick 1.x, all function assignment was treated as
binding assignment, so the Qt.binding() function is new in
sourcedirs += ..
-exampledirs += ../../../examples \
+exampledirs += ../../../ \
+ ../../../examples \
../ \
snippets
#add qml sources because of dependencies
headerdirs += ../../qml
-sourcedirs += ../../qml
-exampledirs += ../../qml/snippets \
- ../../qml
-
+exampledirs += ../../qml
imagedirs += ../../qml
#add particles sources
****************************************************************************/
// This snippet should be turned into an example and put in
-// examples/declarative/imageelements/animatedimage
+// examples/quick/imageelements/animatedimage
//! [document]
import QtQuick 2.0
** $QT_END_LICENSE$
**
****************************************************************************/
-
-//! [document]
+//![0]
+// Button.qml
import QtQuick 2.0
Rectangle {
- width: 100
- height: 100
+ width: 100; height: 100
color: "red"
- border.color: "black"
- border.width: 5
- radius: 10
+
+ MouseArea {
+ anchors.fill: parent
+ onClicked: console.log("Button clicked!")
+ }
}
-//! [document]
+//![0]
** $QT_END_LICENSE$
**
****************************************************************************/
-
//![0]
+// application.qml
import QtQuick 2.0
-Rectangle {
- width: 100; height: 100
- color: "red"
-
- NumberAnimation on x { to: 50; duration: 1000 }
+Column {
+ Button { width: 50; height: 50 }
+ Button { x: 50; width: 100; height: 50; color: "blue" }
+ Button { width: 50; height: 50; radius: 8 }
}
//![0]
-
** $QT_END_LICENSE$
**
****************************************************************************/
-
-//![0]
import QtQuick 2.0
-
+//![0]
Rectangle {
id: rect
width: 100; height: 100
- color: "red"
- Behavior on width {
- NumberAnimation { duration: 1000 }
+ function say(text) {
+ console.log("You said: " + text);
}
MouseArea {
anchors.fill: parent
- onClicked: rect.width = 50
+ onClicked: rect.say("Mouse clicked")
}
}
//![0]
** $QT_END_LICENSE$
**
****************************************************************************/
-
-//! [document]
+//![0]
+// ImageViewer.qml
import QtQuick 2.0
-Flickable {
+Item {
+ id: item
width: 200; height: 200
- contentWidth: image.width; contentHeight: image.height
- Image { id: image; source: "bigImage.png" }
+ property string currentImage: "default-image.png"
+
+ Image { source: item.currentImage }
}
-//! [document]
+//![0]
** $QT_END_LICENSE$
**
****************************************************************************/
-
-//![0]
import QtQuick 2.0
-
+//![0]
Rectangle {
- width: 100; height: 100
+ property alias color: childRect.color
color: "red"
- NumberAnimation on x { to: 50; duration: 1000 }
+ Rectangle { id: childRect }
}
//![0]
-
** $QT_END_LICENSE$
**
****************************************************************************/
-
-//! [document]
+//![0]
+// Button.qml
import QtQuick 2.0
-Image {
- source: "pics/qtlogo.png"
+Item {
+ property alias buttonText: textItem.text
+
+ width: 200; height: 50
+
+ Text { id: textItem }
}
-//! [document]
+//![0]
** $QT_END_LICENSE$
**
****************************************************************************/
-
-import QtQuick 2.0
//![0]
-Path {
- startX: 100; startY: 0
+// ImageViewer.qml
+import QtQuick 2.0
+
+Item {
+ id: item
+ width: 200; height: 200
+
+ property alias currentImage: image
- PathArc {
- x: 0; y: 100
- radiusX: 100; radiusY: 100
- useLargeArc: true
- }
+ Image { id: image }
}
//![0]
** $QT_END_LICENSE$
**
****************************************************************************/
-
//![0]
+// application.qml
import QtQuick 2.0
-Rectangle {
- width: 100; height: 100
- color: "red"
+ImageViewer {
+ id: viewer
+
+ currentImage.source: "http://qt.nokia.com/logo.png"
+ currentImage.width: width
+ currentImage.height: height
+ currentImage.fillMode: Image.Tile
- NumberAnimation on x { to: 50; duration: 1000 }
+ Text { text: currentImage.source }
}
//![0]
-
** $QT_END_LICENSE$
**
****************************************************************************/
-
-import QtQuick 2.0
//![0]
-Path {
- startX: 50; startY: 50
+import QtQuick 2.0
+
+ImageViewer {
+ id: viewer
+
+ currentImage: "http://qt.nokia.com/logo.png"
- PathArc {
- x: 150; y: 50
- radiusX: 75; radiusY: 50
- }
+ Text { text: viewer.currentImage }
}
//![0]
** $QT_END_LICENSE$
**
****************************************************************************/
-
-//![0]
import QtQuick 2.0
+//![0]
+Item {
+ property int myNumber
-Rectangle {
- width: 100; height: 100
- color: "red"
+ onMyNumberChanged: { console.log("myNumber has changed:", myNumber); }
- NumberAnimation on x { to: 50; duration: 1000 }
+ Component.onCompleted: myNumber = 100
}
//![0]
-
** $QT_END_LICENSE$
**
****************************************************************************/
-
import QtQuick 2.0
//![0]
+// Button.qml
Rectangle {
+ id: rect
width: 100; height: 100
- color: "lightblue"
- Rectangle {
- anchors.fill: parent
- anchors.margins: 10
- clip: true
+ signal buttonClicked(int xPos, int yPos)
- Rectangle {
- anchors.fill: parent
- border.width: 1
- }
+ MouseArea {
+ anchors.fill: parent
+ onClicked: rect.buttonClicked(mouse.x, mouse.y)
}
}
//![0]
** $QT_END_LICENSE$
**
****************************************************************************/
-
//![0]
+// Button.qml
import QtQuick 2.0
Rectangle {
id: rect
width: 100; height: 100
- color: "red"
- Behavior on width {
- NumberAnimation { duration: 1000 }
- }
+ signal buttonClicked
MouseArea {
anchors.fill: parent
- onClicked: rect.width = 50
+ onClicked: rect.buttonClicked()
}
}
//![0]
** $QT_END_LICENSE$
**
****************************************************************************/
-//![0]
import QtQuick 2.0
+//![0]
+Item {
+ id: item
+ width: 300; height: 100
-Rectangle {
- width: 200; height: 100
-
- VisualDataModel {
- id: visualModel
- model: ListModel {
- ListElement { name: "Apple" }
- ListElement { name: "Orange" }
- }
- delegate: Rectangle {
- height: 25
- width: 100
- Text { text: "Name: " + name}
- }
+ function myMethod() {
+ console.log("Button was clicked!")
}
- ListView {
- anchors.fill: parent
- model: visualModel
+ Row { id: row }
+
+ Component.onCompleted: {
+ var component = Qt.createComponent("Button.qml")
+ for (var i=0; i<3; i++) {
+ var button = component.createObject(row)
+ button.border.width = 1
+ button.buttonClicked.connect(myMethod)
+ }
}
}
//![0]
** $QT_END_LICENSE$
**
****************************************************************************/
-//![0]
import QtQuick 2.0
+//![0]
+Item {
+ id: item
+ width: 200; height: 200
-Rectangle {
- SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
-
- width: 640; height: 480
- color: myPalette.window
+ function myMethod() {
+ console.log("Button was clicked!")
+ }
- Text {
+ Button {
+ id: button
anchors.fill: parent
- text: "Hello!"; color: myPalette.windowText
+ Component.onCompleted: buttonClicked.connect(item.myMethod)
}
}
//![0]
** $QT_END_LICENSE$
**
****************************************************************************/
-
//![0]
+// application.qml
import QtQuick 2.0
-Rectangle {
+Button {
width: 100; height: 100
- color: "red"
-
- ColorAnimation on color { to: "yellow"; duration: 1000 }
+ onButtonClicked: console.log("Mouse was clicked")
}
//![0]
** $QT_END_LICENSE$
**
****************************************************************************/
-
-//![0]
import QtQuick 2.0
-
-Rectangle {
+//![0]
+// application.qml
+Button {
width: 100; height: 100
- color: "red"
-
- ColorAnimation on color { to: "yellow"; duration: 1000 }
+ onButtonClicked: {
+ console.log("Mouse clicked at " + xPos + "," + yPos)
+ }
}
//![0]
** $QT_END_LICENSE$
**
****************************************************************************/
-//! [0]
import QtQuick 2.0
-Row {
- x: 10; y: 10
- spacing: 10
+//! [0]
+Flickable {
+ id: flick
+
+ width: 300; height: 200;
+ contentWidth: edit.paintedWidth
+ contentHeight: edit.paintedHeight
+ clip: true
+
+ function ensureVisible(r)
+ {
+ if (contentX >= r.x)
+ contentX = r.x;
+ else if (contentX+width <= r.x+r.width)
+ contentX = r.x+r.width-width;
+ if (contentY >= r.y)
+ contentY = r.y;
+ else if (contentY+height <= r.y+r.height)
+ contentY = r.y+r.height-height;
+ }
- Image { source: "pics/qt.png" }
- Image {
- source: "pics/qt.png"
- transform: Rotation { origin.x: 30; origin.y: 30; axis { x: 0; y: 1; z: 0 } angle: 18 }
- smooth: true
- }
- Image {
- source: "pics/qt.png"
- transform: Rotation { origin.x: 30; origin.y: 30; axis { x: 0; y: 1; z: 0 } angle: 36 }
- smooth: true
- }
- Image {
- source: "pics/qt.png"
- transform: Rotation { origin.x: 30; origin.y: 30; axis { x: 0; y: 1; z: 0 } angle: 54 }
- smooth: true
- }
- Image {
- source: "pics/qt.png"
- transform: Rotation { origin.x: 30; origin.y: 30; axis { x: 0; y: 1; z: 0 } angle: 72 }
- smooth: true
- }
-}
+ TextEdit {
+ id: edit
+ width: flick.width
+ height: flick.height
+ focus: true
+ wrapMode: TextEdit.Wrap
+ onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
+ }
+ }
//! [0]
To create an immediate movement or animated movement, set the property value
directly. This may be done in signal handlers or attached properties.
-\snippet doc/snippets/qml/animation.qml direct property change
+\snippet qml/animation.qml direct property change
However, to create more control, \e {property animations} apply smooth movements
by interpolating values between property value changes. Property animations
provide timing controls and allows different interpolations through
\l{qml-easing-animation}{easing curves}.
-\snippet doc/snippets/qml/animation.qml property animation
+\snippet qml/animation.qml property animation
Specialized \l{qml-property-animation-elements}{property animation elements}
have more efficient implementations than the \l{PropertyAnimation} element. They
be an animation during the change from the \c released state to the \c pressed
state.
-\snippet doc/snippets/qml/animation.qml transition animation
+\snippet qml/animation.qml transition animation
Binding the \c to and \c from properties to the state's name will assign that
particular transition to the state change. For simple or symmetric transitions,
setting the to \c to property to the wild card symbol, "\c{*}", denotes
that the transition applies to any state change.
-\snippet doc/snippets/qml/animation.qml wildcard animation
+\snippet qml/animation.qml wildcard animation
\section2 Default Animation as Behaviors
elastic effect. In effect, this behavior animation would apply the elastic
effect to the properties whenever the ball moves.
-\snippet doc/snippets/qml/animation.qml behavior animation
+\snippet qml/animation.qml behavior animation
There are several methods of assigning behavior animations to properties. The
\c{Behavior on <property>} declaration is a convenient way of assigning a
play after the preceding animation finishes. The \l{ParallelAnimation} element
will play the animations at the same time.
-\snippet doc/snippets/qml/animation.qml sequential animation
+\snippet qml/animation.qml sequential animation
Once individual animations are placed into a SequentialAnimation or
ParallelAnimation, they can no longer be started and stopped independently. The
\endqml
*/
-
-
-
-\snippet doc/snippets/qml/animation-elements.qml color
-\snippet doc/snippets/qml/animation-propertyvaluesource.qml 0
-\snippet doc/snippets/qml/animation-signalhandler.qml 0
-\snippet doc/snippets/qml/animation-standalone.qml 0
-
-\snippet doc/snippets/qml/animation-transitions.qml 0
-\snippet doc/snippets/qml/animation-groups.qml 0
-
-\snippet doc/snippets/qml/animation-groups.qml 1
-\snippet doc/snippets/qml/animation-groups.qml 0
-\image propanim.gif
-
it will bubble up to its parent. However, pressing the \c B key will bubble up to the root
item and thus subsequently be ignored.
-\snippet doc/snippets/qml/focus/rectangle.qml simple key event
-\snippet doc/snippets/qml/focus/rectangle.qml simple key event end
+\snippet qml/focus/rectangle.qml simple key event
+\snippet qml/focus/rectangle.qml simple key event end
\li If the root \l Item is reached, the key event is \l {QEvent::ignore()}{ignored} and regular Qt key handling continues.
property \c {Item::activeFocus} property. For example, here we have a \l Text
element whose text is determined by whether or not it has active focus.
-\snippet doc/snippets/qml/focus/rectangle.qml active focus
+\snippet qml/focus/rectangle.qml active focus
\section1 Acquiring Focus and Focus Scopes
the \c {keyHandler} element has active focus and pressing the \c A, \c B,
or \c C keys modifies the text appropriately.
-\snippet doc/snippets/qml/focus/basicwidget.qml focus true
+\snippet qml/focus/basicwidget.qml focus true
\image declarative-qmlfocus1.png
responds accordingly.
The code that imports and creates two MyWidget instances:
-\snippet doc/snippets/qml/focus/widget.qml window
+\snippet qml/focus/widget.qml window
The MyWidget code:
-\snippet doc/snippets/qml/focus/MyWidget.qml mywidget
+\snippet qml/focus/MyWidget.qml mywidget
We would like to have the first MyWidget object to have the focus by setting its
\c focus property to \c true. However, by running the code, we can confirm that
In the next example, a \l FocusScope element is added to the component, and the
visual result shown.
-\snippet doc/snippets/qml/focus/myfocusscopewidget.qml widget in focusscope
+\snippet qml/focus/myfocusscopewidget.qml widget in focusscope
\image declarative-qmlfocus3.png
loses the focus.
The code that imports and creates two MyClickableWidget instances:
-\snippet doc/snippets/qml/focus/clickablewidget.qml clickable window
+\snippet qml/focus/clickablewidget.qml clickable window
The MyClickableWidget code:
-\snippet doc/snippets/qml/focus/MyClickableWidget.qml clickable in focusscope
+\snippet qml/focus/MyClickableWidget.qml clickable in focusscope
\image declarative-qmlfocus4.png
This contrived example shows how this works. Pressing the \c Return key will
print the name of the current list item.
-\snippet doc/snippets/qml/focus/advancedFocus.qml FocusScope delegate
+\snippet qml/focus/advancedFocus.qml FocusScope delegate
\image declarative-qmlfocus5.png
The API can be used from JavaScript functions in your QML:
-\snippet declarative/sqllocalstorage/hello.qml 0
+\snippet examples/localstorage/hello.qml 0
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.
-The \l{declarative/sqllocalstorage}{SQL Local Storage example} demonstrates the basics of
+The \l{examples/localstorage}{SQL Local Storage example} demonstrates the basics of
using the Local Storage API.
\section3 db = openDatabaseSync(identifier, version, description, estimated_size, callback(db))
Suppose that a specific club wants to decorate its members list with its brand
colors. A member list is in a \c model and the \c delegate will display the
model's content.
- \snippet doc/snippets/qml/listview-decorations.qml model
- \snippet doc/snippets/qml/listview-decorations.qml delegate
+ \snippet qml/listview-decorations.qml model
+ \snippet qml/listview-decorations.qml delegate
The club may decorate the members list by binding visual objects to the \c
header and \c footer properties. The visual object may be defined inline, in
another file, or in a \l {Component} element.
- \snippet doc/snippets/qml/listview-decorations.qml decorations
+ \snippet qml/listview-decorations.qml decorations
\image listview-decorations.png
\section2 Mouse and Touch Handling
A list may contain a list indicating people's names and the team on which
team the person belongs.
- \snippet doc/snippets/qml/listview-sections.qml model
- \snippet doc/snippets/qml/listview-sections.qml delegate
+ \snippet qml/listview-sections.qml model
+ \snippet qml/listview-sections.qml delegate
The ListView element has the \c section \l{Property Binding in QML#Attached
Properties}{attached property} that can combine adjacent and related
which list element property to use as sections. The \c criteria can dictate
how the section names are displayed and the \c delegate is similar to the
views' \l {qml-view-delegate}{delegate} property.
- \snippet doc/snippets/qml/listview-sections.qml section
+ \snippet qml/listview-sections.qml section
\image listview-section.png
\keyword qml-view-delegate
visualize each item list according to the template defined by the delegate.
Items in a model are accessible through the \c index property as well as the
item's properties.
- \snippet doc/snippets/qml/listview.qml delegate
+ \snippet qml/listview.qml delegate
\image listview-setup.png
\section2 Accessing Views and Models from Delegates
the model, and the color of one of the fields depends on the property
\e{fruit_color} of the view.
- \snippet doc/snippets/qml/models/views-models-delegates.qml rectangle
+ \snippet qml/models/views-models-delegates.qml rectangle
\keyword qml-data-models
\section1 Models
bind to. Here is a ListModel with two roles, \e type and \e age, and a
ListView with a delegate that binds to these roles to display their values:
- \snippet doc/snippets/qml/qml-data-models/listmodel-listview.qml document
+ \snippet qml/qml-data-models/listmodel-listview.qml document
If there is a naming clash between the model's properties and the delegate's
properties, the roles can be accessed with the qualified \e model name
ListModel is a simple hierarchy of elements specified in QML. The
available roles are specified by the \l ListElement properties.
- \snippet doc/snippets/qml/qml-data-models/listelements.qml model
+ \snippet qml/qml-data-models/listelements.qml model
The above model has two roles, \e name and \e cost. These can be bound
to by a ListView delegate, for example:
- \snippet doc/snippets/qml/qml-data-models/listelements.qml view
+ \snippet qml/qml-data-models/listelements.qml view
ListModel provides methods to manipulate the ListModel directly via JavaScript.
In this case, the first item inserted determines the roles available
created and populated via JavaScript, the roles provided by the first
insertion are the only roles that will be shown in the view:
- \snippet doc/snippets/qml/qml-data-models/dynamic-listmodel.qml model
+ \snippet qml/qml-data-models/dynamic-listmodel.qml model
\dots
- \snippet doc/snippets/qml/qml-data-models/dynamic-listmodel.qml mouse area
+ \snippet qml/qml-data-models/dynamic-listmodel.qml mouse area
When the MouseArea is clicked, \c fruitModel will have two roles, \e cost and \e name.
Even if subsequent roles are added, only the first two will be handled by views
VisualItemModel provide the contents of the delegate. The model
does not provide any roles.
- \snippet doc/snippets/qml/models/visual-model-and-view.qml visual model and view
+ \snippet qml/models/visual-model-and-view.qml visual model and view
Note that in the above example there is no delegate required.
The items of the model itself provide the visual elements that
arrange a set of Rectangle items. The Repeater item creates a series of 24
rectangles for the Grid item to position in a 5 by 5 arrangement.
-\snippet doc/snippets/qml/repeaters/repeater-grid-index.qml document
+\snippet qml/repeaters/repeater-grid-index.qml document
The number of items created by a Repeater is held by its \l{Repeater::}{count}
property. It is not possible to set this property to determine the number of
component), then the MouseArea will fill the area defined by the parent's
dimensions. Alternatively, an area smaller or larger than the parent is
definable.
-\snippet doc/snippets/qml/mousearea/mousearea-snippet.qml anchor fill
+\snippet qml/mousearea/mousearea-snippet.qml anchor fill
\section1 Receiving Events
\endlist
These signals have signal handlers that are invoked when the signals are emitted.
-\snippet doc/snippets/qml/mousearea/mousearea-snippet.qml mouse handlers
+\snippet qml/mousearea/mousearea-snippet.qml mouse handlers
\section1 Enabling Gestures
Some mouse gestures and button clicks need to be enabled before they send or
\c hoverEnabled property to \c true, in turn will enable the \c entered,
\c exited, and \c positionChanged signal and their respective signal handlers.
-\snippet doc/snippets/qml/mousearea/mousearea-snippet.qml enable handlers
+\snippet qml/mousearea/mousearea-snippet.qml enable handlers
Additionally, to disable the whole mouse area, set the \c MouseArea
element's \c enabled property to \c false.
by an outer \l Item. The \l{Column::spacing}{spacing} property is set to
include a small amount of space between the rectangles.
-\snippet doc/snippets/qml/column/column.qml document
+\snippet qml/column/column.qml document
Note that, since Column inherits directly from Item, any background color
must be added to a parent Rectangle, if desired.
We ensure that the parent Rectangle is large enough so that there is some space
left around the edges of the horizontally centered Row item.
-\snippet doc/snippets/qml/row.qml document
+\snippet qml/row.qml document
\section2 Grid
in a 2-by-2 grid. As with the other positioners, the spacing between items
can be specified using the \l{Grid::spacing}{spacing} property.
-\snippet doc/snippets/qml/grid-spacing.qml document
+\snippet qml/grid-spacing.qml document
There is no difference between horizontal and vertical spacing inserted
between items, so any additional space must be added within the items
child items. These are arranged in a similar way to those shown in the
screenshots.
-\snippet doc/snippets/qml/flow.qml document
+\snippet qml/flow.qml document
The main differences between the Grid and Flow positioners are that items
inside a Flow will wrap when they run out of space on the minor axis, and
other Web technologies like HTML and JSON, but it is not required.
The examples shown in this guide are located in the
-\c{examples/declarative/tutorials/qmlintro} directory within the Qt source
+\c{examples/quick/tutorials/qmlintro} directory within the Qt source
package. You can run then with the \l{QML Viewer} tool.
\section1 \l{QML Concepts and Syntax}
the \l{QML Viewer}{\QQV tool}, the output displayed should match the
image shown on the right: a light blue rectangle.
-\snippet examples/declarative/tutorials/qmlintro/basic-syntax.qml document
+\snippet examples/quick/tutorials/qmlintro/basic-syntax.qml document
In this example, we import the features defined by Qt Quick 1.0, and
we declare and create a single rectangle with width, height and color.
\div {class="float-right"}
\inlineimage declarative-qmlintro-elements1.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/elements1.qml document
+\snippet examples/quick/tutorials/qmlintro/elements1.qml document
Here, we create two elements: a rectangle with an image inside it. We say that
the rectangle is the parent element and the image is its child. Since the
\div {class="float-right"}
\inlineimage declarative-qmlintro-elements2.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/elements2.qml document
+\snippet examples/quick/tutorials/qmlintro/elements2.qml document
In this example, we can define as many elements inside the rectangle
as we like, but we cannot define other top level elements. All the
Grouped properties can be written like this:
-\snippet examples/declarative/tutorials/qmlintro/grouped-properties1.qml text with grouped properties
+\snippet examples/quick/tutorials/qmlintro/grouped-properties1.qml text with grouped properties
or like this:
-\snippet examples/declarative/tutorials/qmlintro/grouped-properties2.qml text with grouped properties
+\snippet examples/quick/tutorials/qmlintro/grouped-properties2.qml text with grouped properties
In the element documentation, grouped properties are shown using the "dot" notation.
\br
\inlineimage declarative-qmlintro-property-binding2.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/property-binding.qml elements
+\snippet examples/quick/tutorials/qmlintro/property-binding.qml elements
Here, the child \l Rectangle item's \c width property is set relative to
the width of its parent. Whenever the parent's width changes, the width of
\inlineimage declarative-qmlintro-object-identifiers.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/object-identifiers.qml document
+\snippet examples/quick/tutorials/qmlintro/object-identifiers.qml document
An object can be referred to by its \c id from anywhere within the
\l{QML Documents}{component} in which it is declared. Therefore, an
you are doing; for referring back to at a later date, or for others reading
your QML files.
-\snippet examples/declarative/tutorials/qmlintro/comments.qml commenting
+\snippet examples/quick/tutorials/qmlintro/comments.qml commenting
Comments can also be used to prevent the execution of code, which is
sometimes useful for tracking down problems. In the above example, the
that can be used to respond to a mouse click. Below, we use this handler to
print a message whenever the mouse is clicked:
-\snippet examples/declarative/tutorials/qmlintro/signal-handlers.qml document
+\snippet examples/quick/tutorials/qmlintro/signal-handlers.qml document
All signal handlers begin with \e "on".
that contains information about the mouse press. This parameter can be
referred to in the JavaScript code, as below:
-\snippet examples/declarative/tutorials/qmlintro/signal-handlers-parameters.qml mouse area
+\snippet examples/quick/tutorials/qmlintro/signal-handlers-parameters.qml mouse area
\section2 Property Change Notifications
\br
\inlineimage declarative-qmlintro-property-change2.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/property-change.qml property change
+\snippet examples/quick/tutorials/qmlintro/property-change.qml property change
When the user modifies the text, the expression assigned to the \c textChanged
handler will be evaluated. In this example, the text changes color when this
\div {class="float-right"}
\inlineimage declarative-qmlintro-attached-properties.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/attached-properties.qml attached properties
+\snippet examples/quick/tutorials/qmlintro/attached-properties.qml attached properties
The \l Keys properties are not defined by the \l Item element. They are
defined separately and attached to the item.
\div {class="float-right"}
\inlineimage declarative-qmlintro-attached-properties-view.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/attached-properties-view.qml delegate with attached property
+\snippet examples/quick/tutorials/qmlintro/attached-properties-view.qml delegate with attached property
In effect, by attaching this property, \l ListView provides an interface
that lets the delegate access information about the current item in the
\div {class="float-right"}
\inlineimage declarative-qmlintro-anchors-centerin.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/anchors.qml centered text
+\snippet examples/quick/tutorials/qmlintro/anchors.qml centered text
In this case, the center of the text item is anchored to the center of
its parent item by using the \c{anchors.centerIn} grouped property.
\div {class="float-right"}
\inlineimage declarative-qmlintro-anchors-edges.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/anchors2.qml anchored items
+\snippet examples/quick/tutorials/qmlintro/anchors2.qml anchored items
By giving the text item the \c textItem identifier, we can refer to it when
defining the anchors for the rectangle. We line up the right edge of the
\br
\inlineimage declarative-qmlintro-anchors-expanding2.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/anchors-expanding.qml anchored items
+\snippet examples/quick/tutorials/qmlintro/anchors-expanding.qml anchored items
The anchor lines on the left and right edges of the rectangle are connected
to those of the text input item. Since the text can be modified by the user,
\br
\inlineimage declarative-qmlintro-anchors-baseline-margins.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/anchors-margins.qml anchored items
+\snippet examples/quick/tutorials/qmlintro/anchors-margins.qml anchored items
Note that the image also uses a margin to leave a gap between its left edge
and the left edge of the user interface.
are created between items. The following example shows this occurring with a
parent item and its child.
-\snippet examples/declarative/tutorials/qmlintro/circular.qml circular
+\snippet examples/quick/tutorials/qmlintro/circular.qml circular
\section3 Strategies for Use
\div {class="float-right"}
\inlineimage declarative-qmlintro-anchors-strategy-annotated.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/anchors-strategy.qml anchor strategy
+\snippet examples/quick/tutorials/qmlintro/anchors-strategy.qml anchor strategy
The above example shows how each item is anchored to its parent. This ensures
that the dependencies introduced by the anchors all consistently point to each
\div {class="float-right"}
\inlineimage declarative-qmlintro-anchors-stretch.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/anchors-stretch.qml items
+\snippet examples/quick/tutorials/qmlintro/anchors-stretch.qml items
The rectangle uses anchors to define its top, left and right edges in terms
of its parent item, and the bottom edge is aligned with the top of the text
\div {class="float-right"}
\inlineimage qml-row.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/row.qml document
+\snippet examples/quick/tutorials/qmlintro/row.qml document
We ensure that the parent \l Rectangle is large enough so that there is some space
left around the edges of the horizontally centered Row item. The equally-sized
\div {class="float-right"}
\inlineimage declarative-qmlintro-row-anchors.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/row-anchors.qml row
+\snippet examples/quick/tutorials/qmlintro/row-anchors.qml row
Note that the \l Row item itself uses \c horizontalCenter and \c verticalCenter
anchors to place itself in the center of its parent. It is free to do this
\div {class="float-right"}
\inlineimage qml-column.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/column.qml document
+\snippet examples/quick/tutorials/qmlintro/column.qml document
In the above example, each of the rounded rectangles are positioned by the
\l Column item. The column only changes the vertical positions of its
\div {class="float-right"}
\inlineimage declarative-qmlintro-column-anchors.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/column-anchors.qml document
+\snippet examples/quick/tutorials/qmlintro/column-anchors.qml document
The example above stretches the column horizontally to fill the entire
user interface, and stretches each rectangle inside to fill the column.
\div {class="float-right"}
\inlineimage qml-grid-spacing.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/grid-spacing.qml document
+\snippet examples/quick/tutorials/qmlintro/grid-spacing.qml document
There is no difference between horizontal and vertical spacing inserted
between items, so any additional space must be added within the items
\div {class="float-right"}
\inlineimage declarative-qmlintro-grid-positioning.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/grid-positioning.qml document start
-\snippet examples/declarative/tutorials/qmlintro/grid-positioning.qml document end
+\snippet examples/quick/tutorials/qmlintro/grid-positioning.qml document start
+\snippet examples/quick/tutorials/qmlintro/grid-positioning.qml document end
We only show the first item, but the principle is the same for the others.
\br
\inlineimage qml-flow-text2.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/flow.qml document
+\snippet examples/quick/tutorials/qmlintro/flow.qml document
The main differences between the \l Grid and \l Flow positioners are that
items inside a \l Flow will wrap when they run out of space on the minor
\div {class="float-right"}
\inlineimage declarative-qmlintro-nested-positioners.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/nested-positioners.qml column
+\snippet examples/quick/tutorials/qmlintro/nested-positioners.qml column
The example works around the restrictions on the use of anchors mentioned
earlier by using appropriate anchors for each item. The innermost items,
\div {class="float-right"}
\inlineimage declarative-qmlintro-mousearea-annotated.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/mousearea.qml mouse area
+\snippet examples/quick/tutorials/qmlintro/mousearea.qml mouse area
The \l{MouseArea::}{onPressed} and \l{MouseArea::}{onReleased} definitions
are \l{QML Concepts and Syntax#Signal Handlers}{signal handlers} that
\br
\inlineimage declarative-qmlintro-mouse-pressed2.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/mouse-pressed-signals.qml text item
+\snippet examples/quick/tutorials/qmlintro/mouse-pressed-signals.qml text item
The \l{MouseArea::}{onPressed} and \l{MouseArea::}{onReleased}
signal handlers are defined for the mouse area. As a result, when the user
\div {class="float-right"}
\inlineimage declarative-qmlintro-mouse-pressed-buttons.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/mouse-pressed-buttons.qml items
+\snippet examples/quick/tutorials/qmlintro/mouse-pressed-buttons.qml items
The mouse area covers the entire area of the user interface and accepts
input from both left and right buttons. Each of the rectangles defines its
\div {class="float-right"}
\inlineimage declarative-qmlintro-mouse-pressed-position.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/mouse-pressed-position.qml text item
+\snippet examples/quick/tutorials/qmlintro/mouse-pressed-position.qml text item
When the user presses the mouse button over the text item, the text changes
to show the coordinates within the mouse area where the press occurred. If
\div {class="float-right"}
\inlineimage declarative-qmlintro-mouse-pressed-position2.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/mouse-pressed-position2.qml text item
+\snippet examples/quick/tutorials/qmlintro/mouse-pressed-position2.qml text item
When we run this example, the text item shows the initial, default value of
the mouse area's \c mouseX and \c mouseY properties. Moving the cursor over
\div {class="float-right"}
\inlineimage declarative-qmlintro-mouse-hover-enabled.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/mouse-hover-enabled.qml text item
+\snippet examples/quick/tutorials/qmlintro/mouse-hover-enabled.qml text item
With mouse hover enabled, other properties of the \l MouseArea can be
monitored. For example, the \l{MouseArea::}{containsMouse} property can be
\br
\inlineimage declarative-qmlintro-mouse-hover-containsmouse2.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/mouse-hover-containsmouse.qml items
+\snippet examples/quick/tutorials/qmlintro/mouse-hover-containsmouse.qml items
The above example uses \l{QML Concepts and Syntax#Expressions}{an expression}
to show the coordinates of the mouse cursor when it is in the mouse area,
\div {class="float-right"}
\inlineimage declarative-qmlintro-mouse-drag.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/mouse-drag.qml draggable item
+\snippet examples/quick/tutorials/qmlintro/mouse-drag.qml draggable item
The item to be dragged is the \l Rectangle containing a \l MouseArea and
\l Text items. All that is required is to set the value of the
\br
\inlineimage declarative-qmlintro-key-navigation2.png
\enddiv
-\snippet examples/declarative/tutorials/qmlintro/key-navigation.qml items
+\snippet examples/quick/tutorials/qmlintro/key-navigation.qml items
The \c{leftRect} rectangle attaches the
\l{KeyNavigation::right}{KeyNavigation.right} property, setting it to refer
arrange a set of Rectangle items. The Repeater item creates a series of 24
rectangles for the Grid item to position in a 5 by 5 arrangement.
-\snippet doc/snippets/qml/repeaters/repeater-grid-index.qml document
+\snippet qml/repeaters/repeater-grid-index.qml document
The number of items created by a Repeater is held by its \l{Repeater::}{count}
property. It is not possible to set this property to determine the number of
The \l {Validators}{validator} elements enforce the type and format of
\l TextInput objects.
-\snippet doc/snippets/qml/texthandling.qml int validator
+\snippet qml/texthandling.qml int validator
The validator elements bind to \c {TextInput}'s \c validator property.
-\snippet doc/snippets/qml/texthandling.qml regexp validator
+\snippet qml/texthandling.qml regexp validator
The regular expression in the snippet will only allow the inputted text to be
\c {fruit basket}.
the position of the needle on the dial. The element could be declared to
use a slider that adjusts the value of this property.
-\snippet examples/declarative/ui-components/dialcontrol/qml/dialcontrol.qml the dial in use
+\snippet examples/tutorials/ui-components/dialcontrol/dialcontrol.qml the dial in use
Building user interfaces by importing these elements and linking their properties
together is one of the fundamental features of QML and Qt Quick.
the effective alignment of the text element that takes the mirroring into account can be read from the
\c effectiveHorizontalAlignment property.
-\snippet doc/snippets/qml/righttoleft.qml 0
+\snippet qml/righttoleft.qml 0
\section1 Layout direction of positioners and views
of the \c layoutDirection property will remain unchanged; the effective layout direction of positioners and
views that takes the mirroring into account can be read from the \c effectiveLayoutDirection property.
-\snippet doc/snippets/qml/righttoleft.qml 1
+\snippet qml/righttoleft.qml 1
\section1 Layout mirroring
You can enable layout mirroring for a particular \l Item:
-\snippet doc/snippets/qml/righttoleft.qml 2
+\snippet qml/righttoleft.qml 2
Or set all child elements to also inherit the layout direction:
-\snippet doc/snippets/qml/righttoleft.qml 3
+\snippet qml/righttoleft.qml 3
Applying mirroring in this manner does not change the actual value of the relevant anchor,
\c layoutDirection or \c horizontalAlignment properties. The separate read-only property
the \l LayoutMirroring attached property to apply mirroring to an item that is positioned using \l {Item::}{x}
coordinates:
-\snippet doc/snippets/qml/righttoleft.qml 4
+\snippet qml/righttoleft.qml 4
Not all layouts should necessarily be mirrored. There are cases where a visual element is positioned to
the right side of the screen for improved one-handed use, because most people are right-handed, and not
Most images do not need to be mirrored, but some directional icons, such as arrows, may need to be mirrored.
The painting of these icons can be mirrored with a dedicated \c mirror property introduced in Qt Quick 1.1:
-\snippet doc/snippets/qml/righttoleft.qml 5
+\snippet qml/righttoleft.qml 5
\section1 Default layout direction
\c CRITICAL state, the \c color should be \c red and the flag is \c up. We may
model the states using the \c State element and the color and flag
configurations with the \c PropertyChanges element.
-\snippet doc/snippets/qml/states.qml signal states
+\snippet qml/states.qml signal states
The \l PropertyChanges element will change the values of object properties.
Objects are referenced through their \l {qml-id}{id}. Objects outside
the component are also referenced using the \c id property, exemplified by the
Further, the state may change by assigning the \c state property with the
appropriate signal state. A state switch could be in a \l MouseArea element,
assigning a different state whenever the signal receives a mouse click.
-\snippet doc/snippets/qml/states.qml switch states
+\snippet qml/states.qml switch states
The State element is not limited to performing modifications on property values.
It can also:
\c true. The \c when property will revert the state back to the
\l {The Default State}{default state} when the expression evaluates to false.
-\snippet doc/snippets/qml/states.qml when property
+\snippet qml/states.qml when property
The \c bell component will change to the \c RINGING state whenever the
\c signal.state is \c CRITICAL.
button-type component. Below, we implement this component as a \l Rectangle with a clickable
\l MouseArea, in a file named \c Button.qml:
-\snippet doc/snippets/qml/qml-extending-types/components/Button.qml 0
+\snippet qml/qml-extending-types/components/Button.qml 0
Now this component can be reused by another file within the same directory. Since the file is
named \c Button.qml, the component is referred to as \c Button:
\table
\row
-\li \snippet doc/snippets/qml/qml-extending-types/components/application.qml 0
+\li \snippet qml/qml-extending-types/components/application.qml 0
\li \image qml-extending-types.png
\endtable
\table
\row
-\li \snippet doc/snippets/qml/qml-extending-types/properties/ImageViewer.qml 0
-\li \snippet doc/snippets/qml/qml-extending-types/properties/application.qml 0
+\li \snippet qml/qml-extending-types/properties/ImageViewer.qml 0
+\li \snippet qml/qml-extending-types/properties/application.qml 0
\endtable
It is optional for a property to have a default value. The default value is a convenient shortcut, and is
For example, the following \c onMyNumberChanged signal handler is automatically called whenever the
\c myNumber property changes:
-\snippet doc/snippets/qml/qml-extending-types/properties/property-signals.qml 0
+\snippet qml/qml-extending-types/properties/property-signals.qml 0
\section2 Default properties
For example, below is a \c Button.qml component with a \c buttonText aliased property which is
connected to the child Text object's \c text property:
-\snippet doc/snippets/qml/qml-extending-types/properties/alias.qml 0
+\snippet qml/qml-extending-types/properties/alias.qml 0
The following code would create a \c Button with a defined text string for the
child \l Text object:
\table
\row
-\li \snippet doc/snippets/qml/qml-extending-types/properties/alias/ImageViewer.qml 0
-\li \snippet doc/snippets/qml/qml-extending-types/properties/alias/application.qml 0
+\li \snippet qml/qml-extending-types/properties/alias/ImageViewer.qml 0
+\li \snippet qml/qml-extending-types/properties/alias/application.qml 0
\endtable
Instead of being limited to setting the \l Image source, \c application.qml can now directly
the following component has a \c color alias property, named the same as the built-in
\l {Rectangle::color} property:
-\snippet doc/snippets/qml/qml-extending-types/properties/alias-override.qml 0
+\snippet qml/qml-extending-types/properties/alias-override.qml 0
Any objects that use this component and refer to its \c color property will be
referring to the alias rather than the ordinary \l {Rectangle::color} property. Internally,
Here is an example of a component with a \c say() method that accepts a single \c text argument:
-\snippet doc/snippets/qml/qml-extending-types/methods/app.qml 0
+\snippet qml/qml-extending-types/methods/app.qml 0
A method can be connected to a signal so that it is automatically invoked whenever the signal
is emitted. See \l {Connecting signals to methods and other signals} below.
\table
\row
-\li \snippet doc/snippets/qml/qml-extending-types/signals/basic.qml 0
-\li \snippet doc/snippets/qml/qml-extending-types/signals/no-parameters.qml 0
+\li \snippet qml/qml-extending-types/signals/basic.qml 0
+\li \snippet qml/qml-extending-types/signals/no-parameters.qml 0
\endtable
If the signal has parameters, they are accessible by parameter name in the signal handler.
\table
\row
-\li \snippet doc/snippets/qml/qml-extending-types/signals/Button.qml 0
-\li \snippet doc/snippets/qml/qml-extending-types/signals/parameters.qml 0
+\li \snippet qml/qml-extending-types/signals/Button.qml 0
+\li \snippet qml/qml-extending-types/signals/parameters.qml 0
\endtable
For example, the \c application.qml above could be rewritten as:
-\snippet doc/snippets/qml/qml-extending-types/signals/connectslots.qml 0
+\snippet qml/qml-extending-types/signals/connectslots.qml 0
The \c myMethod() method will be called whenever the \c buttonClicked signal is received.
objects dynamically, and connects the \c buttonClicked signal of each object to the
\c myMethod() function:
-\snippet doc/snippets/qml/qml-extending-types/signals/connectdynamic.qml 0
+\snippet qml/qml-extending-types/signals/connectdynamic.qml 0
In the same way, you could connect a signal to methods defined in a dynamically
created object, or \l {Receiving QML Signals in JavaScript}{connect a signal to a JavaScript method}.
\qml
Item {
id: myButton
+
Text {
id: label
// ...
}
+
Accessible.name: label.text
Accessible.role: Accessible.Button
- funtion accessiblePressAction { ... }
+
+ function accessiblePressAction() {
+ //...
+ }
}
\endqml
\b Note: Unlike images, animated images are not cached or shared internally.
\clearfloat
- \snippet doc/snippets/qml/animatedimage.qml document
+ \snippet qml/animatedimage.qml document
\sa BorderImage, Image
*/
used to determine the parts of the image that will lie inside the unscaled corner
areas and the parts that will be stretched horizontally and vertically.
- \snippet doc/snippets/qml/borderimage/normal-image.qml normal image
+ \snippet qml/borderimage/normal-image.qml normal image
\clearfloat
\beginfloatleft
is set to \l{BorderImage::verticalTileMode}{BorderImage.Stretch}, the parts of image
in regions 4 and 6 are stretched vertically.
- \snippet doc/snippets/qml/borderimage/borderimage-scaled.qml scaled border image
+ \snippet qml/borderimage/borderimage-scaled.qml scaled border image
\clearfloat
\beginfloatleft
\l{BorderImage::verticalTileMode}{BorderImage.Repeat}, the parts of image in regions
4 and 6 are tiled so that they fill the space at the left and right of the element.
- \snippet doc/snippets/qml/borderimage/borderimage-tiled.qml tiled border image
+ \snippet qml/borderimage/borderimage-tiled.qml tiled border image
\clearfloat
In some situations, the width of regions 2 and 8 may not be an exact multiple of the width
However, dragging is not limited to mouse drags, anything that can move an item
can generate drag events, this can include touch events, animations and bindings.
- \snippet doc/snippets/qml/drag.qml 0
+ \snippet qml/drag.qml 0
A drag can be terminated either by canceling it with Drag.cancel() or setting
Drag.active to false, or it can be terminated with a drop event by calling
The following example shows a small view onto a large image in which the
user can drag or flick the image in order to view different parts of it.
- \snippet doc/snippets/qml/flickable.qml document
+ \snippet qml/flickable.qml document
\clearfloat
These properties are typically used to draw a scrollbar. For example:
- \snippet doc/snippets/qml/flickableScrollbar.qml 0
+ \snippet qml/flickableScrollbar.qml 0
\dots 8
- \snippet doc/snippets/qml/flickableScrollbar.qml 1
+ \snippet qml/flickableScrollbar.qml 1
\sa {declarative/ui-components/scrollbar}{scrollbar example}
*/
The following snippet shows how these properties are used to display
an image that is larger than the Flickable item itself:
- \snippet doc/snippets/qml/flickable.qml document
+ \snippet qml/flickable.qml document
In some cases, the the content dimensions can be automatically set
using the \l {Item::childrenRect.width}{childrenRect.width}
degrees to produce the flipping effect. When \c flipped is false, the
item reverts to the default state, in which the \c angle value is 0.
- \snippet doc/snippets/qml/flipable/flipable.qml 0
+ \snippet qml/flipable/flipable.qml 0
\image flipable.gif
The following example shows the definition of a simple list model defined
in a file called \c ContactModel.qml:
- \snippet doc/snippets/qml/gridview/ContactModel.qml 0
+ \snippet qml/gridview/ContactModel.qml 0
\div {class="float-right"}
\inlineimage gridview-simple.png
(containing \l Image and \l Text elements) for its delegate.
\clearfloat
- \snippet doc/snippets/qml/gridview/gridview.qml import
+ \snippet qml/gridview/gridview.qml import
\codeline
- \snippet doc/snippets/qml/gridview/gridview.qml classdocs simple
+ \snippet qml/gridview/gridview.qml classdocs simple
\div {class="float-right"}
\inlineimage gridview-highlight.png
into a separate \c contactDelegate component.
\clearfloat
- \snippet doc/snippets/qml/gridview/gridview.qml classdocs advanced
+ \snippet qml/gridview/gridview.qml classdocs advanced
The currently selected item is highlighted with a blue \l Rectangle using the \l highlight property,
and \c focus is set to \c true to enable keyboard navigation for the grid view.
this attached property directly as \c GridView.isCurrentItem, while the child
\c contactInfo object must refer to this property as \c wrapper.GridView.isCurrentItem.
- \snippet doc/snippets/qml/gridview/gridview.qml isCurrentItem
+ \snippet qml/gridview/gridview.qml isCurrentItem
\note Views do not set the \l{Item::}{clip} property automatically.
If the view is not clipped by another item or the screen, it will be necessary
It is attached to each instance of the delegate.
- \snippet doc/snippets/qml/gridview/gridview.qml isCurrentItem
+ \snippet qml/gridview/gridview.qml isCurrentItem
*/
/*!
until an animation completes. The example delegate below ensures that the
animation completes before the item is removed from the list.
- \snippet doc/snippets/qml/gridview/gridview.qml delayRemove
+ \snippet qml/gridview/gridview.qml delayRemove
If a \l remove transition has been specified, it will not be applied until
delayRemove is returned to \c false.
Here is a highlight with its motion defined by a \l {SpringAnimation} item:
- \snippet doc/snippets/qml/gridview/gridview.qml highlightFollowsCurrentItem
+ \snippet qml/gridview/gridview.qml highlightFollowsCurrentItem
*/
The following example shows the simplest usage of the Image element.
- \snippet doc/snippets/qml/image.qml document
+ \snippet qml/image.qml document
\beginfloatleft
\image declarative-qtlogo.png
rotations you must specify the axis to rotate around in addition to the origin point.
The following example shows various 3D-like rotations applied to an \l Image.
- \snippet doc/snippets/qml/rotation.qml 0
+ \snippet qml/rotation.qml 0
\image axisrotation.png
The following example provides key navigation for a 2x2 grid of items:
- \snippet doc/snippets/qml/keynavigation.qml 0
+ \snippet qml/keynavigation.qml 0
The top-left item initially receives focus by setting \l {Item::}{focus} to
\c true. When an arrow key is pressed, the focus will move to the
be used to test for a certain key; in this case, the left cursor
key:
- \snippet doc/snippets/qml/keys/keys-pressed.qml key item
+ \snippet qml/keys/keys-pressed.qml key item
Some keys may alternatively be handled via specific signal properties,
for example \e onSelectPressed. These handlers automatically set
\e event.accepted to true.
- \snippet doc/snippets/qml/keys/keys-handler.qml key item
+ \snippet qml/keys/keys-handler.qml key item
See \l{Qt::Key}{Qt.Key} for the list of keyboard codes.
from left to right by default, they are now positioned from right to left instead, as demonstrated
by the numbering and opacity of the items:
- \snippet doc/snippets/qml/layoutmirroring.qml 0
+ \snippet qml/layoutmirroring.qml 0
\image layoutmirroring.png
the transition, ensures the item animates smoothly as it moves to
its new parent:
- \snippet doc/snippets/qml/parentanimation.qml 0
+ \snippet qml/parentanimation.qml 0
A ParentAnimation can contain any number of animations. These animations will
be run in parallel; to run them sequentially, define them within a
In the following snippet we animate the addition of a right anchor to a \l Rectangle:
- \snippet doc/snippets/qml/anchoranimation.qml 0
+ \snippet qml/anchoranimation.qml 0
For convenience, when an AnchorAnimation is used in a \l Transition, it will
animate any AnchorChanges that have occurred during the state change.
Here is a basic example of the use of view transitions. The view below specifies transitions for
the \c add and \c displaced properties, which will be run when items are added to the view:
- \snippet doc/snippets/qml/viewtransitions/viewtransitions-basic.qml 0
+ \snippet qml/viewtransitions/viewtransitions-basic.qml 0
When the space key is pressed, adding an item to the model, the new item will fade in and
increase in scale over 400 milliseconds as it is added to the view. Also, any item that is
each displaced item based on the difference between its index (provided by ViewTransition.index)
and the first removed index (provided by ViewTransition.targetIndexes):
- \snippet doc/snippets/qml/viewtransitions/viewtransitions-delayedbyindex.qml 0
+ \snippet qml/viewtransitions/viewtransitions-delayedbyindex.qml 0
Each displaced item delays its animation by an additional 100 milliseconds, producing a subtle
ripple-type effect when items are displaced by the add, like this:
animate to an intermediate position relative to its starting point for the transition, before
animating to its final position in the view:
- \snippet doc/snippets/qml/viewtransitions/viewtransitions-intermediatemove.qml 0
+ \snippet qml/viewtransitions/viewtransitions-intermediatemove.qml 0
Now, a displaced item will first move to a position of (20, 50) relative to its starting
position, and then to its final, correct position in the view:
a curved path. For example, the \c add transition in the previous example could be augmented with
a PathAnimation as follows: to animate newly added items along a path:
- \snippet doc/snippets/qml/viewtransitions/viewtransitions-pathanim.qml 0
+ \snippet qml/viewtransitions/viewtransitions-pathanim.qml 0
This animates newly added items along a path. Notice that each path is specified relative to
each item's final destination point, so that items inserted at different indexes start their
properties, this interruption may cause unwanted side effects. Consider the first example on this
page, repeated below for convenience:
- \snippet doc/snippets/qml/viewtransitions/viewtransitions-basic.qml 0
+ \snippet qml/viewtransitions/viewtransitions-basic.qml 0
If multiple items are added in rapid succession, without waiting for a previous transition
to finish, this is the result:
set to the end values specified in the \c add transition, effectively resetting these values
whenever an item is displaced. In this case, it means setting the item opacity and scale to 1.0:
- \snippet doc/snippets/qml/viewtransitions/viewtransitions-interruptedgood.qml 0
+ \snippet qml/viewtransitions/viewtransitions-interruptedgood.qml 0
Now, when an item's \c add transition is interrupted, its opacity and scale are animated to 1.0
upon displacement, avoiding the erroneous visual effects from before:
attached property, as it may not refer to the expected values at the time that the ScriptAction
is actually invoked. Consider the following example:
- \snippet doc/snippets/qml/viewtransitions/viewtransitions-scriptactionbad.qml 0
+ \snippet qml/viewtransitions/viewtransitions-scriptactionbad.qml 0
When the space key is pressed, three items are moved from index 5 to index 1. For each moved
item, the \c moveTransition sequence presumably animates the item's color to "yellow", then
In this instance, to avoid this issue, the view could set the property using a PropertyAction
instead:
- \snippet doc/snippets/qml/viewtransitions/viewtransitions-scriptactiongood.qml 0
+ \snippet qml/viewtransitions/viewtransitions-scriptactiongood.qml 0
When the transition is initialized, the PropertyAction \c target will be set to the respective
ViewTransition.item for the transition and will later run with the correct item target as
The following example shows the definition of a simple list model defined
in a file called \c ContactModel.qml:
- \snippet doc/snippets/qml/listview/ContactModel.qml 0
+ \snippet qml/listview/ContactModel.qml 0
Another component can display this model data in a ListView, like this:
- \snippet doc/snippets/qml/listview/listview.qml import
+ \snippet qml/listview/listview.qml import
\codeline
- \snippet doc/snippets/qml/listview/listview.qml classdocs simple
+ \snippet qml/listview/listview.qml classdocs simple
\image listview-simple.png
An improved list view is shown below. The delegate is visually improved and is moved
into a separate \c contactDelegate component.
- \snippet doc/snippets/qml/listview/listview.qml classdocs advanced
+ \snippet qml/listview/listview.qml classdocs advanced
\image listview-highlight.png
The currently selected item is highlighted with a blue \l Rectangle using the \l highlight property,
this attached property directly as \c ListView.isCurrentItem, while the child
\c contactInfo object must refer to this property as \c wrapper.ListView.isCurrentItem.
- \snippet doc/snippets/qml/listview/listview.qml isCurrentItem
+ \snippet qml/listview/listview.qml isCurrentItem
\note Views do not enable \e clip automatically. If the view
is not clipped by another item or the screen, it will be necessary
This property may be used to adjust the appearance of the current item, for example:
- \snippet doc/snippets/qml/listview/listview.qml isCurrentItem
+ \snippet qml/listview/listview.qml isCurrentItem
*/
/*!
until an animation completes. The example delegate below ensures that the
animation completes before the item is removed from the list.
- \snippet doc/snippets/qml/listview/listview.qml delayRemove
+ \snippet qml/listview/listview.qml delayRemove
If a \l remove transition has been specified, it will not be applied until
delayRemove is returned to \c false.
Here is a highlight with its motion defined by a \l {SpringAnimation} item:
- \snippet doc/snippets/qml/listview/listview.qml highlightFollowsCurrentItem
+ \snippet qml/listview/listview.qml highlightFollowsCurrentItem
Note that the highlight animation also affects the way that the view
is scrolled. This is because the view moves to maintain the
each section.
- \snippet examples/declarative/modelviews/listview/sections.qml 0
+ \snippet examples/quick/modelviews/listview/sections.qml 0
\image qml-listview-sections-example.png
Here is a Loader that loads "Page1.qml" as a component when the
\l MouseArea is clicked:
- \snippet doc/snippets/qml/loader/simple.qml 0
+ \snippet qml/loader/simple.qml 0
The loaded item can be accessed using the \l item property.
\li sizeloader.qml
\li sizeitem.qml
\row
- \li \snippet doc/snippets/qml/loader/sizeloader.qml 0
- \li \snippet doc/snippets/qml/loader/sizeitem.qml 0
+ \li \snippet qml/loader/sizeloader.qml 0
+ \li \snippet qml/loader/sizeitem.qml 0
\row
\li The red rectangle will be sized to the size of the root item.
\li The red rectangle will be 50x50, centered in the root item.
\li application.qml
\li MyItem.qml
\row
- \li \snippet doc/snippets/qml/loader/connections.qml 0
- \li \snippet doc/snippets/qml/loader/MyItem.qml 0
+ \li \snippet qml/loader/connections.qml 0
+ \li \snippet qml/loader/MyItem.qml 0
\endtable
Alternatively, since \c MyItem.qml is loaded within the scope of the
\li application.qml
\li KeyReader.qml
\row
- \li \snippet doc/snippets/qml/loader/focus.qml 0
- \li \snippet doc/snippets/qml/loader/KeyReader.qml 0
+ \li \snippet qml/loader/focus.qml 0
+ \li \snippet qml/loader/KeyReader.qml 0
\endtable
Once \c KeyReader.qml is loaded, it accepts key events and sets
The following example uses a MouseArea in a \l Rectangle that changes
the \l Rectangle color to red when clicked:
- \snippet doc/snippets/qml/mousearea/mousearea.qml import
+ \snippet qml/mousearea/mousearea.qml import
\codeline
- \snippet doc/snippets/qml/mousearea/mousearea.qml intro
+ \snippet qml/mousearea/mousearea.qml intro
\clearfloat
Many MouseArea signals pass a \l{MouseEvent}{mouse} parameter that contains
Here is an extension of the previous example that produces a different
color when the area is right clicked:
- \snippet doc/snippets/qml/mousearea/mousearea.qml intro-extended
+ \snippet qml/mousearea/mousearea.qml intro-extended
Behavioral Change in QtQuick 2.0
The code below displays "right" when the right mouse buttons is pressed:
- \snippet doc/snippets/qml/mousearea/mousearea.qml mousebuttons
+ \snippet qml/mousearea/mousearea.qml mousebuttons
\sa acceptedButtons
*/
The following example displays a \l Rectangle that can be dragged along the X-axis. The opacity
of the rectangle is reduced when it is dragged to the right.
- \snippet doc/snippets/qml/mousearea/mousearea.qml drag
+ \snippet qml/mousearea/mousearea.qml drag
\note Items cannot be dragged if they are anchored for the requested
\c drag.axis. For example, if \c anchors.left or \c anchors.right was set
If \c drag.filterChildren is set to true, a drag can override descendant MouseAreas. This
enables a parent MouseArea to handle drags, for example, while descendants handle clicks:
- \snippet doc/snippets/qml/mousearea/mouseareadragfilter.qml dragfilter
+ \snippet qml/mousearea/mouseareadragfilter.qml dragfilter
*/
In the following example, we have two small rectangles that follow our touch points.
- \snippet doc/snippets/qml/multipointtoucharea/multipointtoucharea.qml 0
+ \snippet qml/multipointtoucharea/multipointtoucharea.qml 0
By default this property holds an empty list.
For example, if there is a simple list model defined in a file \c ContactModel.qml like this:
- \snippet doc/snippets/qml/pathview/ContactModel.qml 0
+ \snippet qml/pathview/ContactModel.qml 0
This data can be represented as a PathView, like this:
- \snippet doc/snippets/qml/pathview/pathview.qml 0
+ \snippet qml/pathview/pathview.qml 0
\image pathview.gif
this attached property directly as \c PathView.isCurrentItem, while the child
\c nameText object must refer to this property as \c wrapper.PathView.isCurrentItem.
- \snippet doc/snippets/qml/pathview/pathview.qml 1
+ \snippet qml/pathview/pathview.qml 1
\b Note that views do not enable \e clip automatically. If the view
is not clipped by another item or the screen, it will be necessary
This property may be used to adjust the appearance of the current item.
- \snippet doc/snippets/qml/pathview/pathview.qml 1
+ \snippet qml/pathview/pathview.qml 1
*/
/*!
item in the delegate.
Here is an example delegate:
- \snippet doc/snippets/qml/pathview/pathview.qml 1
+ \snippet qml/pathview/pathview.qml 1
*/
QQmlComponent *QQuickPathView::delegate() const
{
Below is a Column that contains three rectangles of various sizes:
- \snippet doc/snippets/qml/column/vertical-positioner.qml document
+ \snippet qml/column/vertical-positioner.qml document
The Column automatically positions these items in a vertical formation, like this:
For example, the Column below sets the \l move property to a specific \l Transition:
- \snippet doc/snippets/qml/column/column-transitions.qml document
+ \snippet qml/column/column-transitions.qml document
When the Space key is pressed, the \l {Item::visible}{visible} value of the green
\l Rectangle is toggled. As it appears and disappears, the blue \l Rectangle moves within
Below is a Row that contains three rectangles of various sizes:
- \snippet doc/snippets/qml/row/row.qml document
+ \snippet qml/row/row.qml document
The Row automatically positions these items in a horizontal formation, like this:
For example, below is a Grid that contains five rectangles of various sizes:
- \snippet doc/snippets/qml/grid/grid.qml document
+ \snippet qml/grid/grid.qml document
The Grid automatically positions the child items in a grid formation:
Below is a Flow that contains various \l Text items:
- \snippet doc/snippets/qml/flow.qml flow item
+ \snippet qml/flow.qml flow item
The Flow item automatically positions the child \l Text items side by
side, wrapping as necessary:
with red, blending to yellow at one third of the height of the rectangle,
and ending with green:
- \snippet doc/snippets/qml/gradient.qml code
+ \snippet qml/gradient.qml code
\clearfloat
\section1 Performance and Limitations
The following example shows the effects of some of the common properties on a
Rectangle item, which in this case is used to create a square:
- \snippet doc/snippets/qml/rectangle/rectangle.qml document
+ \snippet qml/rectangle/rectangle.qml document
\clearfloat
\section1 Performance
\inlineimage rect-border-width.png
\enddiv
- \snippet doc/snippets/qml/rectangle/rect-border-width.qml 0
+ \snippet qml/rectangle/rect-border-width.qml 0
\clearfloat
Here, the innermost rectangle's border is clipped on the bottom and right edges by its
\inlineimage declarative-rect_gradient.png
\enddiv
- \snippet doc/snippets/qml/rectangle/rectangle-gradient.qml rectangles
+ \snippet qml/rectangle/rectangle-gradient.qml rectangles
\clearfloat
If both a gradient and a color are specified, the gradient will be used.
The following example shows rectangles with colors specified
using hexadecimal and named color notation:
- \snippet doc/snippets/qml/rectangle/rectangle-colors.qml rectangles
+ \snippet qml/rectangle/rectangle-colors.qml rectangles
\clearfloat
If both a gradient and a color are specified, the gradient will be used.
The following Repeater creates three instances of a \l Rectangle item within
a \l Row:
- \snippet doc/snippets/qml/repeaters/repeater.qml import
+ \snippet qml/repeaters/repeater.qml import
\codeline
- \snippet doc/snippets/qml/repeaters/repeater.qml simple
+ \snippet qml/repeaters/repeater.qml simple
\image repeater-simple.png
a Repeater to be used inside a layout. For example, the following Repeater's
items are stacked between a red rectangle and a blue rectangle:
- \snippet doc/snippets/qml/repeaters/repeater.qml layout
+ \snippet qml/repeaters/repeater.qml layout
\image repeater.png
\table
\row
- \li \snippet doc/snippets/qml/repeaters/repeater.qml index
+ \li \snippet qml/repeaters/repeater.qml index
\li \image repeater-index.png
\endtable
\table
\row
- \li \snippet doc/snippets/qml/repeaters/repeater.qml modeldata
+ \li \snippet qml/repeaters/repeater.qml modeldata
\li \image repeater-modeldata.png
\endtable
When the \c blueRect is clicked, it changes to the "reparented" state: its parent is changed to \c redRect and it is
positioned at (10, 10) within the red rectangle, as specified in the ParentChange.
- \snippet doc/snippets/qml/parentchange.qml 0
+ \snippet qml/parentchange.qml 0
\image parentchange.png
using AnchorChanges, and the top and bottom anchor margins using
PropertyChanges:
- \snippet doc/snippets/qml/anchorchanges.qml 0
+ \snippet qml/anchorchanges.qml 0
\image anchorchanges.png
The link must be in rich text or HTML format and the
\a link string provides access to the particular link.
- \snippet doc/snippets/qml/text/onLinkActivated.qml 0
+ \snippet qml/text/onLinkActivated.qml 0
The example code will display the text
"The main website is at \l{http://qt.nokia.com}{Nokia Qt DF}."
Note that the TextEdit does not implement scrolling, following the cursor, or other behaviors specific
to a look-and-feel. For example, to add flickable scrolling that follows the cursor:
- \snippet snippets/declarative/texteditor.qml 0
+ \snippet qml/texteditor.qml 0
A particular look-and-feel might use smooth scrolling (eg. using SmoothedFollow), might have a visible
scrollbar, or a scrollbar that fades in to show location, etc.
You can translate between cursor positions (characters from the start of the document) and pixel
points using positionAt() and positionToRectangle().
- \sa Text, TextInput, {declarative/text/textselection}{Text Selection example}
+ \sa Text, TextInput, {examples/quick/text/textselection}{Text Selection example}
*/
/*!
The example below illustrates using a VisualDataModel with a ListView.
- \snippet doc/snippets/qml/visualdatamodel.qml 0
+ \snippet qml/visualdatamodel.qml 0
*/
QQuickVisualDataModelPrivate::QQuickVisualDataModelPrivate(QQmlContext *ctxt)
the new directory's contents.
\c main.cpp:
- \snippet doc/snippets/qml/visualdatamodel_rootindex/main.cpp 0
+ \snippet qml/visualdatamodel_rootindex/main.cpp 0
\c view.qml:
- \snippet doc/snippets/qml/visualdatamodel_rootindex/view.qml 0
+ \snippet qml/visualdatamodel_rootindex/view.qml 0
If the \l model is a QAbstractItemModel subclass, the delegate can also
reference a \c hasModelChildren property (optionally qualified by a
The following example illustrates using groups to select items in a model.
- \snippet doc/snippets/qml/visualdatagroup.qml 0
+ \snippet qml/visualdatagroup.qml 0
*/
QQmlListProperty<QQuickVisualDataGroup> QQuickVisualDataModel::groups()
as a property value source. It animates the \c color property's value from
its current value to a value of "red", over 1000 milliseconds:
- \snippet doc/snippets/qml/coloranimation.qml 0
+ \snippet qml/coloranimation.qml 0
Like any other animation element, a ColorAnimation can be applied in a
number of ways, including transitions, behaviors and property value
When used as part of a Transition, you can also target a specific
StateChangeScript to run using the \c scriptName property.
- \snippet doc/snippets/qml/states/statechangescript.qml state and transition
+ \snippet qml/states/statechangescript.qml state and transition
\sa StateChangeScript
*/
\l {Image::}{smooth} property to \c true, animates the width of the image,
then sets \l {Image::}{smooth} back to \c false:
- \snippet doc/snippets/qml/propertyaction.qml standalone
+ \snippet qml/propertyaction.qml standalone
PropertyAction is also useful for setting the exact point at which a property
change should occur during a \l Transition. For example, if PropertyChanges
was used in a \l State to rotate an item around a particular
\l {Item::}{transformOrigin}, it might be implemented like this:
- \snippet doc/snippets/qml/propertyaction.qml transition
+ \snippet qml/propertyaction.qml transition
However, with this code, the \c transformOrigin is not set until \e after
the animation, as a \l State is taken to define the values at the \e end of
then jump to \c Item.BottomRight. To fix this, insert a PropertyAction
before the RotationAnimation begins:
- \snippet doc/snippets/qml/propertyaction-sequential.qml sequential
+ \snippet qml/propertyaction-sequential.qml sequential
This immediately sets the \c transformOrigin property to the value defined
in the end state of the \l Transition (i.e. the value defined in the
as a property value source. It animates the \c x value from its current
value to a value of 50, over 1000 milliseconds:
- \snippet doc/snippets/qml/numberanimation.qml 0
+ \snippet qml/numberanimation.qml 0
Like any other animation element, a NumberAnimation can be applied in a
number of ways, including transitions, behaviors and property value
In the following example we use RotationAnimation to animate the rotation
between states via the shortest path:
- \snippet doc/snippets/qml/rotationanimation.qml 0
+ \snippet qml/rotationanimation.qml 0
Notice the RotationAnimation did not need to set a \l target
value. As a convenience, when used in a transition, RotationAnimation will rotate all
The following example runs two number animations in a sequence. The \l Rectangle
animates to a \c x position of 50, then to a \c y position of 50.
- \snippet doc/snippets/qml/sequentialanimation.qml 0
+ \snippet qml/sequentialanimation.qml 0
Animations defined within a \l Transition are automatically run in parallel,
so SequentialAnimation can be used to enclose the animations in a \l Transition
The following animation runs two number animations in parallel. The \l Rectangle
moves to (50,50) by animating its \c x and \c y properties at the same time.
- \snippet doc/snippets/qml/parallelanimation.qml 0
+ \snippet qml/parallelanimation.qml 0
Like any other animation element, a ParallelAnimation can be applied in a
number of ways, including transitions, behaviors and property value
For example, to animate any objects that have changed their \c x or \c y properties
as a result of a state change, using an \c InOutQuad easing curve:
- \snippet doc/snippets/qml/propertyanimation.qml transition
+ \snippet qml/propertyanimation.qml transition
\li In a \l Behavior
For example, to animate all changes to a rectangle's \c x property:
- \snippet doc/snippets/qml/propertyanimation.qml behavior
+ \snippet qml/propertyanimation.qml behavior
\li As a property value source
For example, to repeatedly animate the rectangle's \c x property:
- \snippet doc/snippets/qml/propertyanimation.qml propertyvaluesource
+ \snippet qml/propertyanimation.qml propertyvaluesource
\li In a signal handler
For example, to animate \c rect's \c width property over 500ms, from its current width to 30:
- \snippet doc/snippets/qml/propertyanimation.qml standalone
+ \snippet qml/propertyanimation.qml standalone
\endlist
whenever the \l Rectangle's \c width value changes. When the MouseArea
is clicked, the \c width is changed, triggering the behavior's animation:
- \snippet doc/snippets/qml/behavior.qml 0
+ \snippet qml/behavior.qml 0
Note that a property cannot have more than one assigned Behavior. To provide
multiple animations within a Behavior, use ParallelAnimation or
other cirumstances). This often isn't possible to accomplish with a direct
binding, as you need to supply values for all possible branches.
- \qml
- // warning: "Unable to assign [undefined] to double value"
+ \code
+ // produces warning: "Unable to assign [undefined] to double value"
value: if (mouse.pressed) mouse.mouseX
- \endqml
+ \endcode
The above example will produce a warning whenever we release the mouse, as the value
of the binding is undefined when the mouse isn't pressed. We can use the Binding
the property. In that sense, it functions much like a simplified State.
\qml
- // this is equivilant to the above Binding
+ // this is equivalent to the above Binding
State {
name: "pressed"
when: mouse.pressed
an image provider named "colors", and the images to be loaded are "yellow"
and "red", respectively:
- \snippet examples/declarative/cppextensions/imageprovider/imageprovider-example.qml 0
+ \snippet examples/qml/cppextensions/imageprovider/imageprovider-example.qml 0
When these images are loaded by QML, it looks for a matching image provider
and calls its requestImage() or requestPixmap() method (depending on its
requested by the above QML. This implementation dynamically
generates QPixmap images that are filled with the requested color:
- \snippet examples/declarative/cppextensions/imageprovider/imageprovider.cpp 0
+ \snippet examples/qml/cppextensions/imageprovider/imageprovider.cpp 0
\codeline
- \snippet examples/declarative/cppextensions/imageprovider/imageprovider.cpp 1
+ \snippet examples/qml/cppextensions/imageprovider/imageprovider.cpp 1
To make this provider accessible to QML, it is registered with the QML engine
with a "colors" identifier:
\image imageprovider.png
A complete example is available in Qt's
- \l {declarative/cppextensions/imageprovider}{examples/declarative/cppextensions/imageprovider}
+ \l {declarative/cppextensions/imageprovider}{examples/qml/cppextensions/imageprovider}
directory. Note the example registers the provider via a \l{QQmlExtensionPlugin}{plugin}
instead of registering it in the application \c main() function as shown above.
delegate it should appear in. This allows an item to move
between views.
- \snippet examples/declarative/modelviews/package/Delegate.qml 0
+ \snippet examples/quick/modelviews/package/Delegate.qml 0
These named items are used as the delegates by the two views who
reference the special \l{VisualDataModel::parts} property to select
a model which provides the chosen delegate.
- \snippet examples/declarative/modelviews/package/view.qml 0
+ \snippet examples/quick/modelviews/package/view.qml 0
\sa {declarative/modelviews/package}{Package example}, {declarative/photoviewer}{Photo Viewer example}, QtQml
*/
\li \l PathPercent - a way to spread out items along various segments of the path.
\endlist
- \snippet doc/snippets/qml/pathview/pathattributes.qml 2
+ \snippet qml/pathview/pathattributes.qml 2
*/
QQmlListProperty<QQuickPathElement> QQuickPath::pathElements()
\row
\li \image declarative-pathattribute.png
\li
- \snippet doc/snippets/qml/pathview/pathattributes.qml 0
+ \snippet qml/pathview/pathattributes.qml 0
(see the PathView documentation for the specification of ContactModel.qml
used for ContactModel above.)
\endtable
PathCurve provides an easy way to specify a curve passing directly through a set of points.
Typically multiple PathCurves are used in a series, as the following example demonstrates:
- \snippet doc/snippets/qml/path/basiccurve.qml 0
+ \snippet qml/path/basiccurve.qml 0
This example produces the following path (with the starting point and PathCurve points
highlighted in red):
\table
\row
\li \image declarative-patharc.png
- \li \snippet doc/snippets/qml/path/basicarc.qml 0
+ \li \snippet qml/path/basicarc.qml 0
\endtable
Note that a single PathArc cannot be used to specify a circle. Instead, you can
\table
\row
\li \image declarative-arcradius.png
- \li \snippet doc/snippets/qml/path/arcradius.qml 0
+ \li \snippet qml/path/arcradius.qml 0
\endtable
*/
\table
\row
\li \image declarative-largearc.png
- \li \snippet doc/snippets/qml/path/largearc.qml 0
+ \li \snippet qml/path/largearc.qml 0
\endtable
The default value is false.
\table
\row
\li \image declarative-arcdirection.png
- \li \snippet doc/snippets/qml/path/arcdirection.qml 0
+ \li \snippet qml/path/arcdirection.qml 0
\endtable
\sa useLargeArc
In the following example, we animate a green rectangle along a bezier path.
- \snippet doc/snippets/qml/pathinterpolator.qml 0
+ \snippet qml/pathinterpolator.qml 0
*/
QQuickPathInterpolator::QQuickPathInterpolator(QObject *parent) :
properties are to be modified, and define the new property values or
bindings. For example:
- \snippet doc/snippets/qml/propertychanges.qml import
+ \snippet qml/propertychanges.qml import
\codeline
- \snippet doc/snippets/qml/propertychanges.qml 0
+ \snippet qml/propertychanges.qml 0
When the mouse is pressed, the \l Rectangle changes to the \e resized
state. In this state, the PropertyChanges object sets the rectangle's
state, its \c width property is reset, giving the text its natural width
and displaying the whole string on a single line.
- \snippet doc/snippets/qml/propertychanges.qml reset
+ \snippet qml/propertychanges.qml reset
\section2 Immediate property changes in transitions
bound to those of the red rectangle. Whenever these values change, the
green rectangle smoothly animates to its new position:
- \snippet doc/snippets/qml/smoothedanimation.qml 0
+ \snippet qml/smoothedanimation.qml 0
A SmoothedAnimation can be configured by setting the \l velocity at which the
animation should occur, or the \l duration that the animation should take.
on the \c x and \c y values indicates that whenever these values are
changed, a SpringAnimation should be applied.
- \snippet doc/snippets/qml/springanimation.qml 0
+ \snippet qml/springanimation.qml 0
Like any other animation element, a SpringAnimation can be applied in a
number of ways, including transitions, behaviors and property value
between the default state and the "clicked" state, thus toggling the color of the
rectangle between black and red.
- \snippet doc/snippets/qml/state.qml 0
+ \snippet qml/state.qml 0
Notice the default state is referred to using an empty string ("").
be applied. For example, the following \l Rectangle changes in and out of the "hidden"
state when the \l MouseArea is pressed:
- \snippet doc/snippets/qml/state-when.qml 0
+ \snippet qml/state-when.qml 0
If multiple states in a group have \c when clauses that evaluate to \c true
at the same time, the first matching state will be applied. For example, in
ScriptAction to specify the point in the transition at which
the StateChangeScript should to be run.
- \snippet snippets/qml/states/statechangescript.qml state and transition
+ \snippet qml/states/statechangescript.qml state and transition
\sa ScriptAction
*/
group and uses this to color the window and text items
appropriately:
- \snippet doc/snippets/qml/systempalette.qml 0
+ \snippet qml/systempalette.qml 0
\sa QPalette
*/
changes between the default and the "moved" state, any changes
to the \c x and \c y properties should be animated, using an \c Easing.InOutQuad.
- \snippet doc/snippets/qml/transition.qml 0
+ \snippet qml/transition.qml 0
Notice the example does not require \l{PropertyAnimation::}{to} and
\l{PropertyAnimation::}{from} values for the NumberAnimation. As a convenience,
To define multiple transitions, specify \l Item::transitions as a list:
- \snippet doc/snippets/qml/transitions-list.qml list of transitions
+ \snippet qml/transitions-list.qml list of transitions
If multiple Transitions are specified, only a single (best-matching) Transition will be applied for any particular
state change. In the example above, when changing to \c state1, the first transition will be used, rather
properties, so the animation is always applied when changing between
the two states (i.e. when the mouse is pressed and released).
- \snippet doc/snippets/qml/transition-from-to.qml 0
+ \snippet qml/transition-from-to.qml 0
If the transition was changed to this:
- \snippet doc/snippets/qml/transition-from-to-modified.qml modified transition
+ \snippet qml/transition-from-to-modified.qml modified transition
The animation would only be applied when changing from the default state to
the "brighter" state (i.e. when the mouse is pressed, but not on release).
transition applies a sequential animation when the mouse is pressed,
and reverses the sequence of the animation when the mouse is released:
- \snippet doc/snippets/qml/transition-reversible.qml 0
+ \snippet qml/transition-reversible.qml 0
If the transition did not set the \c to and \c reversible values, then
on the mouse release, the transition would play the PropertyAnimation
Note that in some circumstances disabling a Transition may cause an
alternative Transition to be used in its place. In the following
- example, the generic Transition will be used to animate the change
- from \c state1 to \c state2, as the more specific Transition has
- been disabled.
+ example, although the first Transition has been set to animate changes
+ from "state1" to "state2", this transition has been disabled by setting
+ \c enabled to \c false, so any such state change will actually be animated
+ by the second Transition instead.
\qml
Item {
states: [
- State { name: "state1" ... }
- State { name: "state2" ... }
+ State { name: "state1" },
+ State { name: "state2" }
]
transitions: [
- Transition { from: "state1"; to: "state2"; enabled: false ... }
- Transition { ... }
+ Transition { from: "state1"; to: "state2"; enabled: false },
+ Transition {
+ // ...
+ }
]
}
\endqml
This property holds a list of the animations to be run for this transition.
- \snippet examples/declarative/toys/dynamicscene/dynamicscene.qml top-level transitions
+ \snippet examples/qml/dynamicscene/dynamicscene.qml top-level transitions
The top-level animations are run in parallel. To run them sequentially,
define them within a SequentialAnimation:
- \snippet doc/snippets/qml/transition-reversible.qml sequential animations
+ \snippet qml/transition-reversible.qml sequential animations
*/
QQmlListProperty<QQuickAbstractAnimation> QQuickTransition::animations()
{
tst_examples::tst_examples() : canvas(0)
{
// Add files to exclude here
- excludedFiles << "snippets/qml/listmodel.qml"; //Just a ListModel, no root QQuickItem
+ excludedFiles << "snippets/qml/listmodel/listmodel.qml"; //Just a ListModel, no root QQuickItem
// Add directories you want excluded here (don't add examples/, because they install to examples/qtdeclarative/)
excludedDirs << "shared"; //Not an example
projects / konrad/qtdeclarative.git / commitdiff