** $QT_END_LICENSE$
**
****************************************************************************/
-
/*!
- \title QML Demo - Clocks
- \example demos/clocks
- \brief This example demonstrates creating components and using them multiple times.
- \image qml-clocks-example.png
+ \title QtQuick Examples - Local Storage
+ \example localstorage
+ \brief This is a collection of QML local storage examples
+ \image qml-localstorage-example.png
+
+ This is a collection of small QML examples relating to local storage functionality.
- This demo give a simple world clock application, containing multiple clocks from around the world.
+ Hello World demos creating a simple SQL table and how to do inserting/selecting operations.
- In doing this, it reuses a signle Clock component with some slight changes to the parameters.
*/
+
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
-
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+import QtQuick 2.0
+import "../shared" as Examples
+Item {
+ height: 480
+ width: 320
+ Examples.LauncherList {
+ id: ll
+ anchors.fill: parent
+ Component.onCompleted: {
+ addExample("Hello World", "Simple SQL operations with local storage API", Qt.resolvedUrl("hello.qml"));
+ }
+ }
+}
-/****************************************************************************
+ /****************************************************************************
**
** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick Examples - Local Storage
- \example localstorage
- \brief This is a collection of QML local storage examples
- \image qml-localstorage-example.png
-
- This is a collection of small QML examples relating to local storage functionality.
-
- Hello World demos creating a simple SQL table and how to do inserting/selecting operations.
-
-*/
-
Item {
height: 480
width: 320
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick.Particles Examples - Affectors
- \example particles/affectors
- \brief This is a collection of examples using Affectors in the QML particle system.
- \image qml-affectors-example.png
-
- This is a collection of small QML examples relating to using Affectors in the particle system.
- Each example is a small QML file emphasizing a particular element or feature.
-
- Age demonstrates using an Age affector to prematurely end the lives of particles.
- \snippet examples/particles/affectors/content/age.qml 0
-
- As you move the affector around the screen, the particles inside it
- (which haven't already been affected) jump to a period near the end
- of their life. This gives them a short period to finish fading out,
- but changing lifeLeft to 0 (the default), would cause them to reach
- the end of their life instantly.
-
- Attractor demonstrates using an Attractor affector to simulate a black hole
- \snippet examples/particles/affectors/content/attractor.qml 0
-
- All particles in the scene, including the rocket ship's exhaust and pellets, are pulled
- towards the black hole. This effect is stronger closer to the black hole, so the
- asteroids near the top of the screen are barely affected at all, while the ones
- towards the middle sometimes curve drastically. To complete the effect, an Age
- affector covers the black hole to destroy particles which come in contact with it.
-
- Custom Affector manipulates the properties of the particles directly in javascript.
- One Affector is used to make the leaves rock back and forth as they fall, looking more
- leaf-like than just spinning in circles:
- \snippet examples/particles/affectors/content/customaffector.qml 0
- Another is used to provide a slightly varying friction to the leaves as they 'land',
- to look more natural:
- \snippet examples/particles/affectors/content/customaffector.qml 1
-
- Friction is similar to the falling leaves in the custom affector, except that it uses a
- flat friction the whole way down instead of custom affectors.
- \snippet examples/particles/affectors/content/friction.qml 0
-
- Gravity is a convenience affector for applying a constant acceleration to particles inside it
- \snippet examples/particles/affectors/content/gravity.qml 0
-
- GroupGoal sets up two particle groups for flaming and non-flaming balls, and gives you various
- ways to transition between them.
- \snippet examples/particles/affectors/content/groupgoal.qml unlit
- The non-flaming balls have a one in a hundred chance of lighting on their own each second, but they also
- have a GroupGoal set on the whole group. This affector affects all particles of the unlit group, when colliding
- with particles in the lit group, and cause them to move to the lighting group.
- \snippet examples/particles/affectors/content/groupgoal.qml lighting
- lighting is an intermediate group so that the glow builds up and the transition is less jarring. So it automatically
- moves into the lit group after 100ms.
- \snippet examples/particles/affectors/content/groupgoal.qml lit
- The lit group also has TrailEmitters on it for additional fire and smoke, but does not transition anywhere.
- There are two more GroupGoal elements that allow particles in the unlit group to transition to the lighting group
- (and then to the lit group).
- \snippet examples/particles/affectors/content/groupgoal.qml groupgoal-pilot
- The first is just an area bound to the location of an image of a pilot flame. When unlit balls pass through the flame,
- they go straight to lit because the pilot flame is so hot.
- \snippet examples/particles/affectors/content/groupgoal.qml groupgoal-ma
- The second is bound to the location of the last pointer interaction, so that touching or clicking on unlit balls (which
- is hard due to their constant movement) causes them to move to the lighting group.
-
- Move shows some simple effects you can get by altering trajectory midway.
- The red particles have an affector that affects their position, jumping them forwards by 120px.
- \snippet examples/particles/affectors/content/move.qml A
- The green particles have an affector that affects their velocity, but with some angle variation. By adding some random direction
- velocity to their existing forwards velocity, they begin to spray off in a cone.
- \snippet examples/particles/affectors/content/move.qml B
- The blue particles have an affector that affects their acceleration, and because it sets relative to false this resets the acceleration instead of
- adding to it. Once the blue particles reach the affector, their horizontal velocity stops increasing as their vertical velocity decreases.
- \snippet examples/particles/affectors/content/move.qml C
-
- SpriteGoal has an affector which interacts with the sprite engine of particles, if they are being drawn as sprites by ImageParticle.
- \snippet examples/particles/affectors/content/spritegoal.qml 0
- The SpriteGoal follows the image of the rocket ship on screen, and when it interacts with particles drawn by ImageParticle as sprites,
- it instructs them to move immediately to the "explode" state, which in this case is the animation of the asteroid breaking into many pieces.
-
- Turbulence has a flame with smoke, and both sets of particles being affected by a Turbulence affector. This gives a faint wind effect.
- \snippet examples/particles/affectors/content/turbulence.qml 0
- To make the wind change direction, subsitute a black and white noise image in the noiseSource parameter (it currently uses a default noise source).
-
- Wander uses a Wander affector to add some horizontal drift to snowflakes as they fall down.
- \snippet examples/particles/affectors/content/wander.qml 0
- There are different movements given by applying the Wander to different attributes of the trajectory, so the example makes it easy to play around and see the difference.
-*/
-
Item {
height: 480
width: 320
--- /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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+
+/*!
+ \title QtQuick.Particles Examples - Affectors
+ \example particles/affectors
+ \brief This is a collection of examples using Affectors in the QML particle system.
+ \image qml-affectors-example.png
+
+ This is a collection of small QML examples relating to using Affectors in the particle system.
+ Each example is a small QML file emphasizing a particular element or feature.
+
+ Age demonstrates using an Age affector to prematurely end the lives of particles.
+ \snippet examples/particles/affectors/content/age.qml 0
+
+ As you move the affector around the screen, the particles inside it
+ (which haven't already been affected) jump to a period near the end
+ of their life. This gives them a short period to finish fading out,
+ but changing lifeLeft to 0 (the default), would cause them to reach
+ the end of their life instantly.
+
+ Attractor demonstrates using an Attractor affector to simulate a black hole
+ \snippet examples/particles/affectors/content/attractor.qml 0
+
+ All particles in the scene, including the rocket ship's exhaust and pellets, are pulled
+ towards the black hole. This effect is stronger closer to the black hole, so the
+ asteroids near the top of the screen are barely affected at all, while the ones
+ towards the middle sometimes curve drastically. To complete the effect, an Age
+ affector covers the black hole to destroy particles which come in contact with it.
+
+ Custom Affector manipulates the properties of the particles directly in javascript.
+ One Affector is used to make the leaves rock back and forth as they fall, looking more
+ leaf-like than just spinning in circles:
+ \snippet examples/particles/affectors/content/customaffector.qml 0
+ Another is used to provide a slightly varying friction to the leaves as they 'land',
+ to look more natural:
+ \snippet examples/particles/affectors/content/customaffector.qml 1
+
+ Friction is similar to the falling leaves in the custom affector, except that it uses a
+ flat friction the whole way down instead of custom affectors.
+ \snippet examples/particles/affectors/content/friction.qml 0
+
+ Gravity is a convenience affector for applying a constant acceleration to particles inside it
+ \snippet examples/particles/affectors/content/gravity.qml 0
+
+ GroupGoal sets up two particle groups for flaming and non-flaming balls, and gives you various
+ ways to transition between them.
+ \snippet examples/particles/affectors/content/groupgoal.qml unlit
+ The non-flaming balls have a one in a hundred chance of lighting on their own each second, but they also
+ have a GroupGoal set on the whole group. This affector affects all particles of the unlit group, when colliding
+ with particles in the lit group, and cause them to move to the lighting group.
+ \snippet examples/particles/affectors/content/groupgoal.qml lighting
+ lighting is an intermediate group so that the glow builds up and the transition is less jarring. So it automatically
+ moves into the lit group after 100ms.
+ \snippet examples/particles/affectors/content/groupgoal.qml lit
+ The lit group also has TrailEmitters on it for additional fire and smoke, but does not transition anywhere.
+ There are two more GroupGoal elements that allow particles in the unlit group to transition to the lighting group
+ (and then to the lit group).
+ \snippet examples/particles/affectors/content/groupgoal.qml groupgoal-pilot
+ The first is just an area bound to the location of an image of a pilot flame. When unlit balls pass through the flame,
+ they go straight to lit because the pilot flame is so hot.
+ \snippet examples/particles/affectors/content/groupgoal.qml groupgoal-ma
+ The second is bound to the location of the last pointer interaction, so that touching or clicking on unlit balls (which
+ is hard due to their constant movement) causes them to move to the lighting group.
+
+ Move shows some simple effects you can get by altering trajectory midway.
+ The red particles have an affector that affects their position, jumping them forwards by 120px.
+ \snippet examples/particles/affectors/content/move.qml A
+ The green particles have an affector that affects their velocity, but with some angle variation. By adding some random direction
+ velocity to their existing forwards velocity, they begin to spray off in a cone.
+ \snippet examples/particles/affectors/content/move.qml B
+ The blue particles have an affector that affects their acceleration, and because it sets relative to false this resets the acceleration instead of
+ adding to it. Once the blue particles reach the affector, their horizontal velocity stops increasing as their vertical velocity decreases.
+ \snippet examples/particles/affectors/content/move.qml C
+
+ SpriteGoal has an affector which interacts with the sprite engine of particles, if they are being drawn as sprites by ImageParticle.
+ \snippet examples/particles/affectors/content/spritegoal.qml 0
+ The SpriteGoal follows the image of the rocket ship on screen, and when it interacts with particles drawn by ImageParticle as sprites,
+ it instructs them to move immediately to the "explode" state, which in this case is the animation of the asteroid breaking into many pieces.
+
+ Turbulence has a flame with smoke, and both sets of particles being affected by a Turbulence affector. This gives a faint wind effect.
+ \snippet examples/particles/affectors/content/turbulence.qml 0
+ To make the wind change direction, subsitute a black and white noise image in the noiseSource parameter (it currently uses a default noise source).
+
+ Wander uses a Wander affector to add some horizontal drift to snowflakes as they fall down.
+ \snippet examples/particles/affectors/content/wander.qml 0
+ There are different movements given by applying the Wander to different attributes of the trajectory, so the example makes it easy to play around and see the difference.
+*/
+
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick.Particles Examples - CustomParticle
- \example particles/customparticle
- \brief This is a collection of examples using CustomParticle in the QML particle system.
- \image qml-customparticle-example.png
-
- This is a collection of small QML examples relating to using CustomParticle in the particle system.
- Each example is a small QML file emphasizing a different way to use CustomParticle.
-
- Blur Particles adds a blur effect to the particles, which increases over the particle's life time.
- It uses a custom vertex shader:
- \snippet examples/particles/customparticle/content/blurparticles.qml vertex
- to propagate life time simulation to a custom fragment shader:
- \snippet examples/particles/customparticle/content/blurparticles.qml fragment
- which has access to both the normal image sampler and a blurred sampler, the image plus a ShaderEffect.
-
- Fragment Shader just uses the particle system as a vertex delivery system.
- \snippet examples/particles/customparticle/content/fragmentshader.qml 0
-
- Image Colors uses CustomParticle to assign colors to particles based on their location in a picture.
- The vertex shader,
- \snippet examples/particles/customparticle/content/imagecolors.qml vertex
- passes along the starting position for each vertex to the fragment shader,
- \snippet examples/particles/customparticle/content/imagecolors.qml fragment
- which uses it to determine the color for that particle.
-
-*/
-
Item {
height: 480
width: 320
--- /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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+
+/*!
+ \title QtQuick.Particles Examples - CustomParticle
+ \example particles/customparticle
+ \brief This is a collection of examples using CustomParticle in the QML particle system.
+ \image qml-customparticle-example.png
+
+ This is a collection of small QML examples relating to using CustomParticle in the particle system.
+ Each example is a small QML file emphasizing a different way to use CustomParticle.
+
+ Blur Particles adds a blur effect to the particles, which increases over the particle's life time.
+ It uses a custom vertex shader:
+ \snippet examples/particles/customparticle/content/blurparticles.qml vertex
+ to propagate life time simulation to a custom fragement shader:
+ \snippet examples/particles/customparticle/content/blurparticles.qml fragment
+ which has access to both the normal image sampler and a blurred sampler, the image plus a ShaderEffect.
+
+ Fragment Shader just uses the particle system as a vertex delivery system.
+ \snippet examples/particles/customparticle/content/fragmentshader.qml 0
+
+ Image Colors uses CustomParticle to assign colors to particles based on their location in a picture.
+ The vertex shader,
+ \snippet examples/particles/customparticle/content/imagecolors.qml vertex
+ passes along the starting position for each vertex to the fragment shader,
+ \snippet examples/particles/customparticle/content/imagecolors.qml fragment
+ which uses it to determine the color for that particle.
+
+*/
--- /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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+/*!
+ \title QtQuick.Particles Examples - Emitters
+ \example particles/emitters
+ \brief This is a collection of examples using Emitters in the QML particle system.
+ \image qml-emitters-example.png
+
+ This is a collection of small QML examples relating to using Emitters in the particle system.
+ Each example is a small QML file emphasizing a particular element or feature.
+
+ Velocity from motion gives the effect of strong particle motion through primarily moving the emitters:
+ \snippet examples/particles/emitters/content/velocityfrommotion.qml 0
+
+ Burst and pulse calls the burst and pulse methods on two idential emitters.
+ \snippet examples/particles/emitters/content/burstandpulse.qml 0
+ Note how burst takes an argument of number of particles to emit, and pulse takes an argument of number of milliseconds to emit for.
+ This gives a slightly different behaviour, which is easy to see in this example.
+
+ Custom Emitter connects to the emitParticles signal to set arbitrary values on particle data as they're emitted;
+ \snippet examples/particles/emitters/content/customemitter.qml 0
+ This is used to emit curving particles in six rotating spokes.
+
+ Emit mask sets an image mask on the Emitter, to emit out of an arbitrary shape.
+ \snippet examples/particles/emitters/content/emitmask.qml 0
+
+ Maximum emitted emits no more than a certain number of particles at a time. This example makes it easy to see what happens when the limit is reached.
+
+ Shape and Direction emits particles out of an unfilled Ellipse shape, using a TargetDirection
+ \snippet examples/particles/emitters/content/shapeanddirection.qml 0
+ This sends the particles towards the center of the ellipse with proportional speed, keeping the ellipse outline as they move to the center.
+
+ TrailEmitter uses that element to add smoke particles to trail the fire particles in the scene.
+ \snippet examples/particles/emitters/content/trailemitter.qml 0
+
+*/
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick.Particles Examples - Emitters
- \example particles/emitters
- \brief This is a collection of examples using Emitters in the QML particle system.
- \image qml-emitters-example.png
-
- This is a collection of small QML examples relating to using Emitters in the particle system.
- Each example is a small QML file emphasizing a particular element or feature.
-
- Velocity from motion gives the effect of strong particle motion through primarily moving the emitters:
- \snippet examples/particles/emitters/content/velocityfrommotion.qml 0
-
- Burst and pulse calls the burst and pulse methods on two idential emitters.
- \snippet examples/particles/emitters/content/burstandpulse.qml 0
- Note how burst takes an argument of number of particles to emit, and pulse takes an argument of number of milliseconds to emit for.
- This gives a slightly different behaviour, which is easy to see in this example.
-
- Custom Emitter connects to the emitParticles signal to set arbitrary values on particle data as they're emitted;
- \snippet examples/particles/emitters/content/customemitter.qml 0
- This is used to emit curving particles in six rotating spokes.
-
- Emit mask sets an image mask on the Emitter, to emit out of an arbitrary shape.
- \snippet examples/particles/emitters/content/emitmask.qml 0
-
- Maximum emitted emits no more than a certain number of particles at a time. This example makes it easy to see what happens when the limit is reached.
-
- Shape and Direction emits particles out of an unfilled Ellipse shape, using a TargetDirection
- \snippet examples/particles/emitters/content/shapeanddirection.qml 0
- This sends the particles towards the center of the ellipse with proportional speed, keeping the ellipse outline as they move to the center.
-
- TrailEmitter uses that element to add smoke particles to trail the fire particles in the scene.
- \snippet examples/particles/emitters/content/trailemitter.qml 0
-
-*/
-
Item {
height: 480
width: 320
--- /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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+
+/*!
+ \title QtQuick.Particles Examples - Affectors
+ \example particles/imageparticle
+ \brief This is a collection of examples using Affectors in the QML particle system.
+ \image qml-imageparticle-example.png
+
+ This is a collection of small QML examples relating to using Affectors in the particle system.
+ Each example is a small QML file emphasizing a particular element or feature.
+
+ All at once shows off several of the features of ImageParticle at the same time.
+ \snippet examples/particles/imageparticle/content/allatonce.qml 0
+
+ Colored shows a simple ImageParticle with some color variation.
+ \snippet examples/particles/imageparticle/content/colored.qml 0
+
+ Color Table sets the color over life on the particles to provide a fixed rainbow effect.
+ \snippet examples/particles/imageparticle/content/colortable.qml 0
+
+ Deformation spins and squishes a starfish particle.
+ \snippet examples/particles/imageparticle/content/colortable.qml spin
+ \snippet examples/particles/imageparticle/content/colortable.qml deform
+
+ Rotation demonstrates the autoRotate property, so that particles rotate in the direction that they travel.
+
+ Sharing demonstrates what happens when multiple ImageParticles try to render the same particle.
+ The following ImageParticle renders the particles inside the ListView:
+ \snippet examples/particles/imageparticle/content/sharing.qml 0
+ The following ImageParticle is placed inside the list highlight, and renders the particles above the other ImageParticle.
+ \snippet examples/particles/imageparticle/content/sharing.qml 1
+ Note that because it sets the color and alpha in this ImageParticle, it renders the particles in a different color.
+ Since it doesn't specify anything about the rotation, it shares the rotation with the other ImageParticle so that the flowers are rotated the same way in both.
+ Note that you can undo rotation in another ImageParticle, you just need to explicity set rotationVariation to 0.
+
+ Sprites demonstrates using an image particle to render animated sprites instead of static images for each particle.
+*/
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick.Particles Examples - Affectors
- \example particles/imageparticle
- \brief This is a collection of examples using Affectors in the QML particle system.
- \image qml-imageparticle-example.png
-
- This is a collection of small QML examples relating to using Affectors in the particle system.
- Each example is a small QML file emphasizing a particular element or feature.
-
- All at once shows off several of the features of ImageParticle at the same time.
- \snippet examples/particles/imageparticle/content/allatonce.qml 0
-
- Colored shows a simple ImageParticle with some color variation.
- \snippet examples/particles/imageparticle/content/colored.qml 0
-
- Color Table sets the color over life on the particles to provide a fixed rainbow effect.
- \snippet examples/particles/imageparticle/content/colortable.qml 0
-
- Deformation spins and squishes a starfish particle.
- \snippet examples/particles/imageparticle/content/colortable.qml spin
- \snippet examples/particles/imageparticle/content/colortable.qml deform
-
- Rotation demonstrates the autoRotate property, so that particles rotate in the direction that they travel.
-
- Sharing demonstrates what happens when multiple ImageParticles try to render the same particle.
- The following ImageParticle renders the particles inside the ListView:
- \snippet examples/particles/imageparticle/content/sharing.qml 0
- The following ImageParticle is placed inside the list highlight, and renders the particles above the other ImageParticle.
- \snippet examples/particles/imageparticle/content/sharing.qml 1
- Note that because it sets the color and alpha in this ImageParticle, it renders the particles in a different color.
- Since it doesn't specify anything about the rotation, it shares the rotation with the other ImageParticle so that the flowers are rotated the same way in both.
- Note that you can undo rotation in another ImageParticle, you just need to explicitly set rotationVariation to 0.
-
- Sprites demonstrates using an image particle to render animated sprites instead of static images for each particle.
-*/
-
Item {
height: 480
width: 320
--- /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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+
+/*!
+ \title QtQuick.Particles Examples - Affectors
+ \example particles/system
+ \brief This is a collection of examples using Affectors in the QML particle system.
+ \image qml-system-example.png
+
+ This is a collection of small QML examples relating to using Affectors in the particle system.
+ Each example is a small QML file emphasizing a particular element or feature.
+
+ Dynamic comparison compares using the particle system to getting a similar effect with the following code that dynamically instantiates Image elements.
+ \snippet examples/particles/system/content/dynamiccomparison.qml fake
+ Note how the Image elements are not able to be randomly colorized.
+
+ Start and Stop simply sets the running and paused states of a ParticleSystem. While the system does not perform any simulation when stopped or paused, a restart restarts the simulation from the beginning, while unpausing resumes the simulation from where it was.
+
+ Timed group changes is an example that highlights the ParticleGroup element. While normally referring to groups with a string name is sufficent, additional effects can be
+ done by setting properties on groups.
+ The first group has a variable duration on it, but always transitions to the second group.
+ \snippet examples/particles/system/content/timedgroupchanges.qml 0
+ The second group has a TrailEmitter on it, and a fixed duration for emitting into the third group. By placing the TrailEmitter as a direct child of the ParticleGroup, it automatically selects that group to follow.
+ \snippet examples/particles/system/content/timedgroupchanges.qml 1
+ The third group has an Affector as a direct child, which makes the affector automatically target this group. The affector means that as soon as particles enter this group, a burst function can be called on another emitter, using the x,y positions of this particle.
+ \snippet examples/particles/system/content/timedgroupchanges.qml 2
+
+ If TrailEmitter does not suit your needs for multiple emitters, you can also dynamically create Emitters while still using the same ParticleSystem and image particle
+ \snippet examples/particles/system/content/dynamicemitters.qml 0
+ Note that this effect, a flurry of flying rainbow spears, would be better served with TrailEmitter. It is only done with dynamic emitters in this example to show the concept more simply.
+
+ Multiple Painters shows how to control paint ordering of individual particles. While the paint ordering of particles within one ImagePainter is not strictly defined, ImageParticle elements follow the normal Z-ordering rules for QtQuick items. This example allow you to paint the inside of the particles above the black borders using a pair of ImageParticles each painting different parts of the same logical particle.
+
+*/
+
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick.Particles Examples - Affectors
- \example particles/system
- \brief This is a collection of examples using Affectors in the QML particle system.
- \image qml-system-example.png
-
- This is a collection of small QML examples relating to using Affectors in the particle system.
- Each example is a small QML file emphasizing a particular element or feature.
-
- Dynamic comparison compares using the particle system to getting a similar effect with the following code that dynamically instantiates Image elements.
- \snippet examples/particles/system/content/dynamiccomparison.qml fake
- Note how the Image elements are not able to be randomly colorized.
-
- Start and Stop simply sets the running and paused states of a ParticleSystem. While the system does not perform any simulation when stopped or paused, a restart restarts the simulation from the beginning, while unpausing resumes the simulation from where it was.
-
- Timed group changes is an example that highlights the ParticleGroup element. While normally referring to groups with a string name is sufficient, additional effects can be
- done by setting properties on groups.
- The first group has a variable duration on it, but always transitions to the second group.
- \snippet examples/particles/system/content/timedgroupchanges.qml 0
- The second group has a TrailEmitter on it, and a fixed duration for emitting into the third group. By placing the TrailEmitter as a direct child of the ParticleGroup, it automatically selects that group to follow.
- \snippet examples/particles/system/content/timedgroupchanges.qml 1
- The third group has an Affector as a direct child, which makes the affector automatically target this group. The affector means that as soon as particles enter this group, a burst function can be called on another emitter, using the x,y positions of this particle.
- \snippet examples/particles/system/content/timedgroupchanges.qml 2
-
- If TrailEmitter does not suit your needs for multiple emitters, you can also dynamically create Emitters while still using the same ParticleSystem and image particle
- \snippet examples/particles/system/content/dynamicemitters.qml 0
- Note that this effect, a flurry of flying rainbow spears, would be better served with TrailEmitter. It is only done with dynamic emitters in this example to show the concept more simply.
-
- Multiple Painters shows how to control paint ordering of individual particles. While the paint ordering of particles within one ImagePainter is not strictly defined, ImageParticle elements follow the normal Z-ordering rules for QtQuick items. This example allow you to paint the inside of the particles above the black borders using a pair of ImageParticles each painting different parts of the same logical particle.
-
-*/
-
Item {
height: 480
width: 320
** $QT_END_LICENSE$
**
****************************************************************************/
-
/*!
- \title QML Demo - SameGame
- \example demos/samegame
- \brief This is an example game written in QML.
- \image qml-samegame-demo-small.png
-
- The SameGame demo implements a simple game in QML. It is written for desktop and portrait devices.
-
- This game has the logic implemented in Javascipt and the appearance implemented in QML.
+ \title QML Example - Dynamic Scene
+ \example qml/dynamicscene
+ \brief This example demonstrates creating components dynamically.
+ \image qml-dynamicscene-example.png
*/
+
**
****************************************************************************/
-/*!
- \title QML Example - Dynamic Scene
- \example qml/dynamicscene
- \brief This example demonstrates creating components dynamically.
- \image qml-dynamicscene-example.png
-*/
-
import QtQuick 2.0
import QtQuick.Particles 2.0
import "content"
** $QT_END_LICENSE$
**
****************************************************************************/
-
/*!
- \title QML Demo - StocQt
- \example demos/StocQt
- \brief This is an example stock chart viewer written in QML.
- \image qml-stocqt-demo-small.png
+ \title QML Examples - Internationalization
+ \example qml/i18n
+ \image qml-i18n-example.png
+ \brief This is an internationalization example
- This demo implements a simple stock chart viewer, designed for portrait devices.
+ The QML runtime automatically loads a translation from the i18n subdirectory of the root
+ QML file, based on the system language.
- This app requests online data, which it processes in javascript. It then paints a chart depiction of the data using
- the Canvas imperative drawing API.
-*/
+ The files are created/updated by running:
+
+ lupdate i18n.qml -ts i18n/base.ts
+
+ Translations for new languages are created by copying i18n/base.ts to i18n/qml_<lang>.ts
+ The .ts files can then be edited with Linguist:
+ linguist i18n/qml_fr.ts
+
+ The run-time translation files are then generated by running:
+
+ lrelease i18n/*.ts
+*/
import QtQuick 2.0
-/*!
- \title QML Examples - Internationalization
- \example qml/i18n
- \image qml-i18n-example.png
- \brief This is an internationalization example
-
- The QML runtime automatically loads a translation from the i18n subdirectory of the root
- QML file, based on the system language.
-
- The files are created/updated by running:
-
- lupdate i18n.qml -ts i18n/base.ts
-
- Translations for new languages are created by copying i18n/base.ts to i18n/qml_<lang>.ts
- The .ts files can then be edited with Linguist:
-
- linguist i18n/qml_fr.ts
-
- The run-time translation files are then generated by running:
-
- lrelease i18n/*.ts
-*/
-
-
Rectangle {
width: 640; height: 480
** $QT_END_LICENSE$
**
****************************************************************************/
-
/*!
- \title QML Demo - StocQt
- \example demos/StocQt
- \brief This is an example stock chart viewer written in QML.
- \image qml-stocqt-demo-small.png
+ \title QtQuick Examples - XMLHttpRequst
+ \example qml/xmlhttprequest
+ \brief This is a collection of XMLHttpRequest examples
+ \image qml-xmlhttprequest-example.png
+
+ This is a collection of small QML examples relating to XML HTTP request functionality.
- This demo implements a simple stock chart viewer, designed for portrait devices.
+ Get data demos sending get XML request and showing the received header and XML body.
- This app requests online data, which it processes in javascript. It then paints a chart depiction of the data using
- the Canvas imperative drawing API.
*/
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick Examples - XMLHttpRequst
- \example qtquick/xmlhttprequest
- \brief This is a collection of XMLHttpRequest examples
- \image qml-xmlhttprequest-example.png
-
- This is a collection of small QML examples relating to XML HTTP request functionality.
-
- Get data demos sending get XML request and showing the received header and XML body.
-
-*/
-
Item {
height: 480
width: 320
addExample("Get data", "Send get request and show received header and body", Qt.resolvedUrl("get.qml"));
}
}
-}
\ No newline at end of file
+}
import QtQuick 2.0
import "content"
-/*!
- \title QtQuick Examples - Accessibility
- \example quick/accessibility
- \brief This example has accessible buttons.
-
- Elements in this example are augmented with meta-data for accessiblity systems.
-
- For example, the button identifies itself and its functionality to the accessibility system:
- \snippet examples/quick/accessibility/content/Button.qml button
-
- As do Text elements inside the example:
- \snippet examples/quick/accessibility/accessibility.qml text
-*/
Rectangle {
id: window
** $QT_END_LICENSE$
**
****************************************************************************/
-
/*!
- \title QML Demo - StocQt
- \example demos/StocQt
- \brief This is an example stock chart viewer written in QML.
- \image qml-stocqt-demo-small.png
+ \title QtQuick Examples - Accessibility
+ \example quick/accessibility
+ \brief This example has accessible buttons.
+
+ Elements in this example are augmented with meta-data for accessiblity systems.
- This demo implements a simple stock chart viewer, designed for portrait devices.
+ For example, the button identifies itself and its functionality to the accessibility system:
+ \snippet examples/quick/accessibility/content/Button.qml button
- This app requests online data, which it processes in javascript. It then paints a chart depiction of the data using
- the Canvas imperative drawing API.
+ As do Text elements inside the example:
+ \snippet examples/quick/accessibility/accessibility.qml text
*/
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick Examples - Animation
- \example quick/animation
- \brief This is a collection of QML Animation examples.
- \image qml-animations-example.png
-
- This is a collection of small QML examples relating to animation. Each example is
- a small QML file emphasizing a particular element or feature.
-
- ColorAnimation demonstrates using a color animation to fade a sky from day to night.
- \snippet examples/quick/animation/basics/color-animation.qml 0
-
- PropertyAnimation demonstrates using a number animation to bounce a circle up and down.
- \snippet examples/quick/animation/basics/property-animation.qml 0
-
- Behaviors demonstrates using behaviors to animate moving a rectangle to whereever you click.
- \snippet examples/quick/animation/behaviors/behavior-example.qml 0
-
- Wiggly Text demonstrates using more complex behaviors to animate and wiggle some text around as you drag it.
- It does this by assigning a complex binding to each letter:
- \snippet examples/quick/animation/behaviors/wigglytext.qml 0
- Then, it uses behaviors to animate the movement on each letter:
- \snippet examples/quick/animation/behaviors/wigglytext.qml 1
-
- Tv Tennis demonstrates using more complex behaviors to get paddles following a ball for an infinite game.
- Again a binding which depends on other values is applied to the position and a behavior provided the animation.
- \snippet examples/quick/animation/behaviors/tvtennis.qml 0
-
- Easing Curves shows off all the easing curves available in Qt Quick animations.
-
- States demonstrates how the properties of an item can vary between states.
- It defines several states:
- \snippet examples/quick/animation/states/states.qml 0
- Note that there is also the implicit 'base state' from properties set directly on elements.
-
- Transitions takes the States example and animates the property changes by setting transitions:
- \snippet examples/quick/animation/states/transitions.qml 0
-
- PathAnimation animates an image along a beizer curve using a PathAnimation.
- \snippet examples/quick/animation/pathanimation/pathanimation.qml 0
-
- PathInterpolator animates an image along the same beizer curve, using a PathInterpolator instead.
- \snippet examples/quick/animation/pathinterpolator/pathinterpolator.qml 0
-*/
-
Item {
height: 480
width: 320
--- /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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+
+/*!
+ \title QtQuick Examples - Animation
+ \example quick/animation
+ \brief This is a collection of QML Animation examples.
+ \image qml-animations-example.png
+
+ This is a collection of small QML examples relating to animation. Each example is
+ a small QML file emphasizing a particular element or feature.
+
+ ColorAnimation demonstrates using a color animation to fade a sky from day to night.
+ \snippet examples/quick/animation/basics/color-animation.qml 0
+
+ PropertyAnimation demonstrates using a number animation to bounce a circle up and down.
+ \snippet examples/quick/animation/basics/property-animation.qml 0
+
+ Behaviors demonstrates using behaviors to animate moving a rectangle to whereever you click.
+ \snippet examples/quick/animation/behaviors/behavior-example.qml 0
+
+ Wiggly Text demonstrates using more complex behaviors to animate and wiggle some text around as you drag it.
+ It does this by assigning a complex binding to each letter:
+ \snippet examples/quick/animation/behaviors/wigglytext.qml 0
+ Then, it uses behaviors to animate the movement on each letter:
+ \snippet examples/quick/animation/behaviors/wigglytext.qml 1
+
+ Tv Tennis demonstrates using more complex behaviors to get paddles following a ball for an infinite game.
+ Again a binding which depends on other values is applied to the position and a behavior provided the animation.
+ \snippet examples/quick/animation/behaviors/tvtennis.qml 0
+
+ Easing Curves shows off all the easing curves available in Qt Quick animations.
+
+ States demonstrates how the properties of an item can vary between states.
+ It defines several states:
+ \snippet examples/quick/animation/states/states.qml 0
+ Note that there is also the implicit 'base state' from properties set directly on elements.
+
+ Transitions takes the States example and animates the property changes by setting transitions:
+ \snippet examples/quick/animation/states/transitions.qml 0
+
+ PathAnimation animates an image along a beizer curve using a PathAnimation.
+ \snippet examples/quick/animation/pathanimation/pathanimation.qml 0
+
+ PathInterpolator animates an image along the same beizer curve, using a PathInterpolator instead.
+ \snippet examples/quick/animation/pathinterpolator/pathinterpolator.qml 0
+*/
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick Examples - Canvas
- \example quick/canvas
- \brief This is a collection of QML Canvas examples.
- \image qml-canvas-example.png
-
- This is a collection of small QML examples relating to Canvas item. Each example is
- a small QML file emphasizing a particular element or feature.
-
- Red heart demonstrates using a bezierCurve API to stroke and fill a red heart.
- \snippet examples/quick/canvas/bezierCurve/bezierCurve.qml 0
-
- Talk bubble demonstrates using a quadraticCurveTo API to stroke and fill a customized talk bubble:
- \snippet examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml 0
- This example also demonstrates the fillText API:
- \snippet examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml 1
-
- Squircle demonstrates using a collection of simple moveTo/lineTo path APIs to draw a smooth squircle.
-
- Rounded rectangle demonstrates using a collection if lineTo/arcTo path APIs to draw a rounded rectangle.
-
- Smile face demonstrates using several complex path APIs to draw an fill a smile face.
-
- Clip demonstrates using clip API to clip a given image.
- \snippet examples/quick/canvas/clip/clip.qml 0
-
- Tiger demonstrates using SVG path API to draw a tiger with a collection of SVG path strings.
- \snippet examples/quick/canvas/tiger/tiger.qml 0
-
-*/
-
Item {
height: 480
width: 320
--- /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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+
+/*!
+ \title QtQuick Examples - Canvas
+ \example quick/canvas
+ \brief This is a collection of QML Canvas examples.
+ \image qml-canvas-example.png
+
+ This is a collection of small QML examples relating to Canvas item. Each example is
+ a small QML file emphasizing a particular element or feature.
+
+ Red heart demonstrates using a bezierCurve API to stroke and fill a red heart.
+ \snippet examples/quick/canvas/bezierCurve/bezierCurve.qml 0
+
+ Talk bubble demonstrates using a quadraticCurveTo API to stroke and fill a customized talk bubble:
+ \snippet examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml 0
+ This example also demonstrates the fillText API:
+ \snippet examples/quick/canvas/quadraticCurveTo/quadraticCurveTo.qml 1
+
+ Squircle demonstrates using a collection of simple moveTo/lineTo path APIs to draw a smooth squircle.
+
+ Rounded rectangle demonstrates using a collection if lineTo/arcTo path APIs to draw a rounded rectangle.
+
+ Smile face demonstrates using several complex path APIs to draw an fill a smile face.
+
+ Clip demonstrates using clip API to clip a given image.
+ \snippet examples/quick/canvas/clip/clip.qml 0
+
+ Tiger demonstrates using SVG path API to draw a tiger with a collection of SVG path strings.
+ \snippet examples/quick/canvas/tiger/tiger.qml 0
+
+*/
+
import QtQuick 2.0
import TextBalloonPlugin 1.0
-/*!
- \title QtQuick Examples - Painted Text Balloons
- \example quick/painteditem/textballoons
- \brief This is a simple example that draws text balloons using QPainter
-*/
Item {
height: 480
width: 320
//! [1]
Rectangle {
id: controls
-
+
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.margins: 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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+/*!
+ \title QtQuick Examples - Drag and Drop
+ \example quick/draganddrop
+ \brief This is a collection of QML drag and drop examples
+ \image qml-draganddrop-example.png
+
+ This is a collection of small QML examples relating to drag and drop functionality.
+
+ \section2 Tiles adds drag and drop to simple rectangles, which you can drag into a specific grid.
+
+ It has a DragTile component which uses a MouseArea to move an item when dragged:
+
+ \snippet examples/quick/draganddrop/tiles/DragTile.qml 0
+ \snippet examples/quick/draganddrop/tiles/DragTile.qml 1
+
+ And a DropTile component which the dragged tiles can be dropped onto:
+
+ \snippet examples/quick/draganddrop/tiles/DropTile.qml 0
+
+ The keys property of the DropArea will only allow an item with matching key in
+ it's Drag.keys property to be dropped on it.
+
+ \section2 GridView adds drag and drop to a GridView, allowing you to reorder the list.
+
+ It uses a VisualDataModel to move a delegate item to the position of another item
+ it is dragged over.
+
+ \snippet examples/quick/draganddrop/views/gridview.qml 0
+ \snippet examples/quick/draganddrop/views/gridview.qml 1
+*/
+
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick Examples - Drag and Drop
- \example quick/draganddrop
- \brief This is a collection of QML drag and drop examples
- \image qml-draganddrop-example.png
-
- This is a collection of small QML examples relating to drag and drop functionality.
-
- \section2 Tiles adds drag and drop to simple rectangles, which you can drag into a specific grid.
-
- It has a DragTile component which uses a MouseArea to move an item when dragged:
-
- \snippet examples/quick/draganddrop/tiles/DragTile.qml 0
- \snippet examples/quick/draganddrop/tiles/DragTile.qml 1
-
- And a DropTile component which the dragged tiles can be dropped onto:
-
- \snippet examples/quick/draganddrop/tiles/DropTile.qml 0
-
- The keys property of the DropArea will only allow an item with matching key in
- it's Drag.keys property to be dropped on it.
-
- \section2 GridView adds drag and drop to a GridView, allowing you to reorder the list.
-
- It uses a VisualDataModel to move a delegate item to the position of another item
- it is dragged over.
-
- \snippet examples/quick/draganddrop/views/gridview.qml 0
- \snippet examples/quick/draganddrop/views/gridview.qml 1
-*/
-
Item {
height: 480
width: 320
--- /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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+/*!
+ \title QML Examples - Image Elements
+ \example quick/imageelements
+ \brief This is a collection of QML examples
+ \image qml-imageelements-example.png
+
+ This is a collection of small QML examples relating to image elements.
+
+ 'BorderImage' shows off the various scaling modes of the BorderImage item
+ by setting its horizontalTileMode and verticalTileMode properties.
+
+ 'Image' shows off the various fill modes of the Image item.
+
+ 'Shadows' shows how to create a drop shadow effect for a rectangular item
+ using a BorderImage:
+ \snippet examples/quick/imageelements/content/ShadowRectangle.qml delegate
+
+ 'AnimatedSprite' shows how to display a simple animation using an
+ AnimatedSprite element:
+ \snippet examples/quick/imageelements/animatedsprite.qml sprite
+ The sprite animation will loop 3 times.
+
+ 'SpriteSequence' demonstrates using a sprite sequence to draw an animated
+ and interactive bear.
+ The SpriteSequence defines 5 different sprites. The bear is initially in
+ a 'still' state:
+ \snippet examples/quick/imageelements/spritesequence.qml still
+ When the scene is clicked, an animation sets the sprite sequence to the
+ 'falling' states and animates the bear's y property.
+ \snippet examples/quick/imageelements/spritesequence.qml animation
+ At the end of the animation the bear is set back to its initial state.
+*/
+
import QtQuick 2.0
import "../../shared"
-/*!
- \title QML Examples - Image Elements
- \example quick/imageelements
- \brief This is a collection of QML examples
- \image qml-imageelements-example.png
-
- This is a collection of small QML examples relating to image elements.
-
- 'BorderImage' shows off the various scaling modes of the BorderImage item
- by setting its horizontalTileMode and verticalTileMode properties.
-
- 'Image' shows off the various fill modes of the Image item.
-
- 'Shadows' shows how to create a drop shadow effect for a rectangular item
- using a BorderImage:
- \snippet examples/quick/imageelements/content/ShadowRectangle.qml delegate
-
- 'AnimatedSprite' shows how to display a simple animation using an
- AnimatedSprite element:
- \snippet examples/quick/imageelements/animatedsprite.qml sprite
- The sprite animation will loop 3 times.
-
- 'SpriteSequence' demonstrates using a sprite sequence to draw an animated
- and interactive bear.
- The SpriteSequence defines 5 different sprites. The bear is initially in
- a 'still' state:
- \snippet examples/quick/imageelements/spritesequence.qml still
- When the scene is clicked, an animation sets the sprite sequence to the
- 'falling' states and animates the bear's y property.
- \snippet examples/quick/imageelements/spritesequence.qml animation
- At the end of the animation the bear is set back to its initial state.
-*/
-
Item {
height: 480
width: 320
** $QT_END_LICENSE$
**
****************************************************************************/
-
/*!
- \title QML Demo - Calqlatr
- \example demos/calqlatr
- \brief This is an example calculator written in QML.
- \image qml-calqlatr-demo-small.png
-
- This demo implements a simple calculator app, designed for portrait devices.
+ \title QtQuick Examples - Key Interaction
+ \example quick/keyinteraction
+ \brief This is a collection of QML keyboard interaction examples.
+ \image qml-keyinteraction-example.png
- This app has the logic implemented in Javascipt and the appearance implemented in QML.
+ This example demonstrates combining various methods of interacting with keyboard focus.
*/
-
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick Examples - Key Interaction
- \example quick/keyinteraction
- \brief This is a collection of QML keyboard interaction examples.
- \image qml-keyinteraction-example.png
-
- This example demonstrates combining various methods of interacting with keyboard focus.
-*/
-
Loader {//Just loader, since there's only one.
source: "focus/focus.qml"
focus: true
--- /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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+
+/*!
+ \title QtQuick Examples - ModelViews
+ \example quick/modelviews
+ \brief This is a collection of QML drag and drop examples
+ \image qml-modelviews-example.png
+
+ This is a collection of small QML examples relating to model and view functionality.
+
+ \section2 GridView and PathView demonstrate usage of these elements to display views.
+ \snippet examples/quick/modelviews/gridview/gridview-example.qml 0
+
+ \section2 Dynamic List demonstrates animation of runtime additions and removals to a ListView.
+
+ The ListView.onAdd signal handler runs an animation when new items are added to the
+ view, and the ListView.onRemove another when they are removed.
+ \snippet examples/quick/modelviews/listview/dynamiclist.qml 0
+ \snippet examples/quick/modelviews/listview/dynamiclist.qml 1
+
+ \section2 Expanding Delegates demonstrates delegates that expand when activated.
+
+ It has a complex delegate the size and appearance of which can change, displacing
+ other items in the view.
+ \snippet examples/quick/modelviews/listview/expandingdelegates.qml 0
+ \snippet examples/quick/modelviews/listview/expandingdelegates.qml 1
+ \snippet examples/quick/modelviews/listview/expandingdelegates.qml 2
+ \snippet examples/quick/modelviews/listview/expandingdelegates.qml 3
+
+ \section2 Highlight demonstrates adding a custom highlight to a ListView.
+ \snippet examples/quick/modelviews/listview/highlight.qml 0
+
+ \section2 Highlight Ranges shows the three different highlight range modes of ListView.
+ \snippet examples/quick/modelviews/listview/highlightranges.qml 0
+ \snippet examples/quick/modelviews/listview/highlightranges.qml 1
+ \snippet examples/quick/modelviews/listview/highlightranges.qml 2
+
+ \section2 Sections demonstrates the various section headers and footers available to ListView.
+ \snippet examples/quick/modelviews/listview/sections.qml 0
+
+ \section2 Packages demonstrates using Packages to transition delegates between two views.
+
+ It has a Package which defines delegate items for each view and an item that can
+ be transferred between delegates.
+
+ \snippet examples/quick/modelviews/package/Delegate.qml 0
+
+ A VisualDataModel allows the individual views to access their specific items from
+ the shared package delegate.
+
+ \snippet examples/quick/modelviews/package/view.qml 0
+
+ \section2 VisualItemModel uses a VisualItemModel for the model instead of a ListModel.
+
+ \snippet examples/quick/modelviews/visualitemmodel/visualitemmodel.qml 0
+*/
+
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick Examples - ModelViews
- \example quick/modelviews
- \brief This is a collection of QML drag and drop examples
- \image qml-modelviews-example.png
-
- This is a collection of small QML examples relating to model and view functionality.
-
- \section2 GridView and PathView demonstrate usage of these elements to display views.
- \snippet examples/quick/modelviews/gridview/gridview-example.qml 0
-
- \section2 Dynamic List demonstrates animation of runtime additions and removals to a ListView.
-
- The ListView.onAdd signal handler runs an animation when new items are added to the
- view, and the ListView.onRemove another when they are removed.
- \snippet examples/quick/modelviews/listview/dynamiclist.qml 0
- \snippet examples/quick/modelviews/listview/dynamiclist.qml 1
-
- \section2 Expanding Delegates demonstrates delegates that expand when activated.
-
- It has a complex delegate the size and appearance of which can change, displacing
- other items in the view.
- \snippet examples/quick/modelviews/listview/expandingdelegates.qml 0
- \snippet examples/quick/modelviews/listview/expandingdelegates.qml 1
- \snippet examples/quick/modelviews/listview/expandingdelegates.qml 2
- \snippet examples/quick/modelviews/listview/expandingdelegates.qml 3
-
- \section2 Highlight demonstrates adding a custom highlight to a ListView.
- \snippet examples/quick/modelviews/listview/highlight.qml 0
-
- \section2 Highlight Ranges shows the three different highlight range modes of ListView.
- \snippet examples/quick/modelviews/listview/highlightranges.qml 0
- \snippet examples/quick/modelviews/listview/highlightranges.qml 1
- \snippet examples/quick/modelviews/listview/highlightranges.qml 2
-
- \section2 Sections demonstrates the various section headers and footers available to ListView.
- \snippet examples/quick/modelviews/listview/sections.qml 0
-
- \section2 Packages demonstrates using Packages to transition delegates between two views.
-
- It has a Package which defines delegate items for each view and an item that can
- be transferred between delegates.
-
- \snippet examples/quick/modelviews/package/Delegate.qml 0
-
- A VisualDataModel allows the individual views to access their specific items from
- the shared package delegate.
-
- \snippet examples/quick/modelviews/package/view.qml 0
-
- \section2 VisualItemModel uses a VisualItemModel for the model instead of a ListModel.
-
- \snippet examples/quick/modelviews/visualitemmodel/visualitemmodel.qml 0
-*/
-
Item {
height: 480
width: 320
** $QT_END_LICENSE$
**
****************************************************************************/
-
/*!
- \title QML Demos - Maroon in Trouble
- \example demos/maroon
- \brief This is an example game written in QML.
- \image qml-maroon-demo-icon.png
+ \title QtQuick Examples - MouseArea
+ \example quick/mousearea
+ \brief This is a collection of QML Animation examples.
+ \image qml-mousearea-example.png
+
+ This example shows you how to respond to clicks and drags with a MouseArea.
+
+ When you click inside the red square, the Text element will list several properties
+ of that click which are available to QML.
- The Maroon in Trouble game demonstrates some of the UI effects that QtQuick provides to
- make UIs more visually rich. It take a simple tower defense game and then jazzes it up with
- animated sprites, particle effects, and sound effects (if the QtMultimedia module is available).
+ Signals are emitted by the MouseArea when clicks or other discrete operations occur within it
+ \snippet examples/quick/mousearea/mousearea.qml clicks
- The game also demonstrates the extensibility of QML, by making it easy to add more types of tower
- for the player to build. Advanced QML users should be able to play around with adding additional
- types of towers or mobs.
+ The MouseArea can also be used to drag elements around. By setting the parameters of the drag property,
+ the target item will be dragged around if the user starts to drag within the MouseArea.
+ \snippet examples/quick/mousearea/mousearea.qml drag
*/
import QtQuick 2.0
-/*!
- \title QtQuick Examples - MouseArea
- \example quick/mousearea
- \brief This is a collection of QML Animation examples.
- \image qml-mousearea-example.png
-
- This example shows you how to respond to clicks and drags with a MouseArea.
-
- When you click inside the red square, the Text element will list several properties
- of that click which are available to QML.
-
- Signals are emitted by the MouseArea when clicks or other discrete operations occur within it
- \snippet examples/quick/mousearea/mousearea.qml clicks
-
- The MouseArea can also be used to drag elements around. By setting the parameters of the drag property,
- the target item will be dragged around if the user starts to drag within the MouseArea.
- \snippet examples/quick/mousearea/mousearea.qml drag
-
-*/
-
Rectangle {
id: box
width: 320; height: 480
****************************************************************************/
/*!
- \title QML Demo - Calqlatr
- \example demos/calqlatr
- \brief This is an example calculator written in QML.
- \image qml-calqlatr-demo-small.png
-
- This demo implements a simple calculator app, designed for portrait devices.
-
- This app has the logic implemented in Javascipt and the appearance implemented in QML.
+ \title QtQuick Examples - Painted Text Balloons
+ \example quick/painteditem/textballoons
+ \brief This is a simple example that draws text balloons using QPainter
*/
-
--- /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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+/*!
+ \title QtQuick Examples - Positioners
+ \example quick/positioners
+ \brief This is a collection of QML Positioner examples.
+ \image qml-positioners-example.png
+
+ This is a collection of small QML examples relating to positioners. Each example is
+ a small QML file emphasizing a particular element or feature.
+
+ Transitions shows animated transitions when showing or hiding items in a positioner.
+ It consists of a scene populated with items in a variety of positioners: Column, Row, Grid and Flow.
+ Each positioner has animations described as Transitions.
+
+ \snippet examples/quick/positioners/positioners-transitions.qml move
+ The move transition specifies how items inside a positioner will animate when they are displaced by the appearance or disappearance of other items.
+
+ \snippet examples/quick/positioners/positioners-transitions.qml add
+ The add transition specifies how items will appear when they are added to a positioner.
+
+ \snippet examples/quick/positioners/positioners-transitions.qml populate
+ The populate transition specifies how items will appear when their parent positioner is first created.
+
+ Attached Properties shows how the Positioner attached property can be used to determine where an item is within a positioner.
+ \snippet examples/quick/positioners/positioners-attachedproperties.qml 0
+*/
+
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick Examples - Positioners
- \example quick/positioners
- \brief This is a collection of QML Positioner examples.
- \image qml-positioners-example.png
-
- This is a collection of small QML examples relating to positioners. Each example is
- a small QML file emphasizing a particular element or feature.
-
- Transitions shows animated transitions when showing or hiding items in a positioner.
- It consists of a scene populated with items in a variety of positioners: Column, Row, Grid and Flow.
- Each positioner has animations described as Transitions.
-
- \snippet examples/quick/positioners/positioners-transitions.qml move
- The move transition specifies how items inside a positioner will animate when they are displaced by the appearance or disappearance of other items.
-
- \snippet examples/quick/positioners/positioners-transitions.qml add
- The add transition specifies how items will appear when they are added to a positioner.
-
- \snippet examples/quick/positioners/positioners-transitions.qml populate
- The populate transition specifies how items will appear when their parent positioner is first created.
-
- Attached Properties shows how the Positioner attached property can be used to determine where an item is within a positioner.
- \snippet examples/quick/positioners/positioners-attachedproperties.qml 0
-*/
-
Item {
height: 480
width: 320
** $QT_END_LICENSE$
**
****************************************************************************/
-
/*!
- \title QML Demo - Calqlatr
- \example demos/calqlatr
- \brief This is an example calculator written in QML.
- \image qml-calqlatr-demo-small.png
+ \title QtQuick Examples - Right to Left
+ \example quick/righttoleft
+ \brief This is a collection of QML Right to Left examples.
+ \image qml-righttoleft-example.png
- This demo implements a simple calculator app, designed for portrait devices.
+ This is a collection of small QML examples relating to right to left(RTL) localization support.
- This app has the logic implemented in Javascipt and the appearance implemented in QML.
+ Layout direction shows RTL layouting.
+ Layout mirroring shows automatic mirroring of horizontal layouts in RTL locales.
+ Text Alignment shows automatic mirroring of text alignment in RTL locales.
*/
-
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick Examples - Right to Left
- \example quick/righttoleft
- \brief This is a collection of QML Right to Left examples.
- \image qml-righttoleft-example.png
-
- This is a collection of small QML examples relating to right to left(RTL) localization support.
-
- Layout direction shows RTL layouting.
- Layout mirroring shows automatic mirroring of horizontal layouts in RTL locales.
- Text Alignment shows automatic mirroring of text alignment in RTL locales.
-*/
-
Item {
height: 480
width: 320
--- /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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+/*!
+ \title QML Examples - Shader Effects
+ \example quick/shadereffects
+ \image qml-shadereffects-example.png
+ \brief This is a shader effects example
+
+ This example demonstrates a couple of visual effects that you can perform
+ with shaders in QtQuick 2.0
+
+ ShaderEffects typically operate on other elements, using a ShaderEffectSource
+ \snippet examples/quick/shadereffects/shadereffects.qml source
+ In the above snippet, theItem is the id of a complex QML element in the file.
+
+ ShaderEffects can use this ShaderEffectSource as a texture in their fragment shader.
+ \snippet examples/quick/shadereffects/shadereffects.qml fragment
+
+ You can use any custom property on the ShaderEffect in your shader. This makes
+ animated shader code very easy.
+ \snippet examples/quick/shadereffects/shadereffects.qml properties
+
+ ShaderEffects can also have a custom vertext shader. Setting the mesh property on ShaderEffect
+ provides more vertices for you to manipulate, enabling many effects.
+ \snippet examples/quick/shadereffects/shadereffects.qml vertex
+*/
+
id: root
width: 320
height: 480
-/*!
- \title QML Examples - Shader Effects
- \example quick/shadereffects
- \image qml-shadereffects-example.png
- \brief This is a shader effects example
-
- This example demonstrates a couple of visual effects that you can perform
- with shaders in QtQuick 2.0
-
- ShaderEffects typically operate on other elements, using a ShaderEffectSource
- \snippet examples/quick/shadereffects/shadereffects.qml source
- In the above snippet, theItem is the id of a complex QML element in the file.
-
- ShaderEffects can use this ShaderEffectSource as a texture in their fragment shader.
- \snippet examples/quick/shadereffects/shadereffects.qml fragment
-
- You can use any custom property on the ShaderEffect in your shader. This makes
- animated shader code very easy.
- \snippet examples/quick/shadereffects/shadereffects.qml properties
-
- ShaderEffects can also have a custom vertext shader. Setting the mesh property on ShaderEffect
- provides more vertices for you to manipulate, enabling many effects.
- \snippet examples/quick/shadereffects/shadereffects.qml vertex
-*/
property color col: "lightsteelblue"
gradient: Gradient {
GradientStop { position: 0.0; color: Qt.tint(root.col, "#20FFFFFF") }
--- /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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+/*!
+ \title QML Examples - Text
+ \example quick/text
+ \brief This is a collection of QML examples
+ \image qml-text-example.png
+
+ This is a collection of small QML examples relating to text. Each example is
+ a small QML file, usually containing or emphasizing a particular element or
+ feature. You can run and observe the behavior of each example.
+
+ 'Hello' shows how to change and animate the letter spacing of a Text element.
+ It uses a sequential animation to first animate the font.letterSpacing property
+ from 0 to 50 over 3 seconds and then move the text to a random position on screen:
+ \snippet examples/quick/text/fonts/hello.qml letterspacing
+
+ 'Fonts' shows different ways of using fonts with the Text element.
+ Simply by name, using the font.family property directly:
+ \snippet examples/quick/text/fonts/fonts.qml name
+ or using a FontLoader element:
+ \snippet examples/quick/text/fonts/fonts.qml fontloader
+ or using a FontLoader and specifying a local font file:
+ \snippet examples/quick/text/fonts/fonts.qml fontloaderlocal
+ or finally using a FontLoader and specifying a remote font file:
+ \snippet examples/quick/text/fonts/fonts.qml fontloaderremote
+
+ 'Available Fonts' shows how to use the QML global Qt object and a list view
+ to display all the fonts available on the system.
+ The ListView element uses the list of fonts available as its model:
+ \snippet examples/quick/text/fonts/availableFonts.qml model
+ Inside the delegate, the font family is set with the modelData:
+ \snippet examples/quick/text/fonts/availableFonts.qml delegate
+
+ 'Banner' is a simple example showing how to create a banner using a row of text
+ elements and a NumberAnimation.
+
+ 'Img tag' shows different ways of displaying images in a text elements using
+ the <img> tag.
+
+ 'Text Layout' shows how to create a more complex layout for a text element.
+ This example lays out the text in two columns using the onLineLaidOut handler
+ that allows you to position and resize each line:
+ \snippet examples/quick/text/styledtext-layout.qml layout
+*/
import QtQuick 2.0
import "../../shared"
-/*!
- \title QML Examples - Text
- \example quick/text
- \brief This is a collection of QML examples
- \image qml-text-example.png
-
- This is a collection of small QML examples relating to text. Each example is
- a small QML file, usually containing or emphasizing a particular element or
- feature. You can run and observe the behavior of each example.
-
- 'Hello' shows how to change and animate the letter spacing of a Text element.
- It uses a sequential animation to first animate the font.letterSpacing property
- from 0 to 50 over 3 seconds and then move the text to a random position on screen:
- \snippet examples/quick/text/fonts/hello.qml letterspacing
-
- 'Fonts' shows different ways of using fonts with the Text element.
- Simply by name, using the font.family property directly:
- \snippet examples/quick/text/fonts/fonts.qml name
- or using a FontLoader element:
- \snippet examples/quick/text/fonts/fonts.qml fontloader
- or using a FontLoader and specifying a local font file:
- \snippet examples/quick/text/fonts/fonts.qml fontloaderlocal
- or finally using a FontLoader and specifying a remote font file:
- \snippet examples/quick/text/fonts/fonts.qml fontloaderremote
-
- 'Available Fonts' shows how to use the QML global Qt object and a list view
- to display all the fonts available on the system.
- The ListView element uses the list of fonts available as its model:
- \snippet examples/quick/text/fonts/availableFonts.qml model
- Inside the delegate, the font family is set with the modelData:
- \snippet examples/quick/text/fonts/availableFonts.qml delegate
-
- 'Banner' is a simple example showing how to create a banner using a row of text
- elements and a NumberAnimation.
-
- 'Img tag' shows different ways of displaying images in a text elements using
- the <img> tag.
-
- 'Text Layout' shows how to create a more complex layout for a text element.
- This example lays out the text in two columns using the onLineLaidOut handler
- that allows you to position and resize each line:
- \snippet examples/quick/text/styledtext-layout.qml layout
-*/
Item {
height: 480
--- /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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+/*!
+ \title QtQuick Examples - Threading
+ \example quick/threading
+ \brief This is a collection of QML Multithreading examples.
+ \image qml-threading-example.png
+
+ Threaded ListModel contains a ListView and a ListModel. The ListModel is updated asynchronusly in another thread, and the results propagate back to the main thread.
+ A timer requests updates from the worker thread periodically:
+ \snippet examples/threading/threadedlistmodel/timedisplay.qml 0
+
+ Inside the worker thread, the ListModel is synchronized once the data is finished loading:
+ \snippet examples/threading/threadedlistmodel/dataloader.js 0
+
+ WorkerScript contains an example of using a WorkerScript to offload expensive calculations into another thread. This keeps the UI from being blocked. This example calculates numbers in Pascal's Triangle, and not in a very optimal way, so it will often take several seconds to complete the calculation. By doing this in a WorkerScript in another thread, the UI is not blocked during this time.
+
+ When the UI needs another value, a request is sent to the WorkerScript:
+ \snippet examples/threading/workerscript/workerscript.qml 0
+ The workerscript then is free to take a really long time to calculate it:
+ \snippet examples/threading/workerscript/workerscript.js 0
+ When it's done, the result returns to the main scene via the WorkerScript element:
+ \snippet examples/threading/workerscript/workerscript.qml 1
+*/
import QtQuick 2.0
import "../../shared" as Examples
-/*!
- \title QtQuick Examples - Threading
- \example quick/threading
- \brief This is a collection of QML Multithreading examples.
- \image qml-threading-example.png
-
- Threaded ListModel contains a ListView and a ListModel. The ListModel is updated asynchronusly in another thread, and the results propagate back to the main thread.
- A timer requests updates from the worker thread periodically:
- \snippet examples/threading/threadedlistmodel/timedisplay.qml 0
-
- Inside the worker thread, the ListModel is synchronized once the data is finished loading:
- \snippet examples/threading/threadedlistmodel/dataloader.js 0
-
- WorkerScript contains an example of using a WorkerScript to offload expensive calculations into another thread. This keeps the UI from being blocked. This example calculates numbers in Pascal's Triangle, and not in a very optimal way, so it will often take several seconds to complete the calculation. By doing this in a WorkerScript in another thread, the UI is not blocked during this time.
-
- When the UI needs another value, a request is sent to the WorkerScript:
- \snippet examples/threading/workerscript/workerscript.qml 0
- The workerscript then is free to take a really long time to calculate it:
- \snippet examples/threading/workerscript/workerscript.js 0
- When it's done, the result returns to the main scene via the WorkerScript element:
- \snippet examples/threading/workerscript/workerscript.qml 1
-*/
-
Item {
height: 480
width: 320
--- /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:FDL$
+** GNU Free Documentation License
+** Alternatively, this file may be used under the terms of the GNU Free
+** Documentation License version 1.3 as published by the Free Software
+** Foundation and appearing in the file included in the packaging of
+** this file.
+**
+** 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$
+**
+****************************************************************************/
+/*!
+ \title QtQuick Examples - Touch Interaction
+ \example quick/touchinteraction
+ \brief This is a collection of QML Touch Interaction examples.
+ \image qml-touchinteraction-example.png
+
+ This is a collection of small QML examples relating to touch interaction methods.
+
+ Multipoint Flames demonstrates distinguishing different fingers in a MultiPointTouchArea, by assigning a different colored flame to each touch point.
+ The MultipointTouchArea sets up multiple touch points:
+ \snippet examples/quick/touchinteraction/multipointtouch/multiflame.qml 0
+ The flames are then simply bound to the coordiates of the touch point, and whether it is currently pressed, like so:
+ \snippet examples/quick/touchinteraction/multipointtouch/multiflame.qml 1
+
+ Bear-Whack demonstrates using a MultiPointTouchArea to add multiple finger support to a simple game. The interaction with the game
+ is done through a SpriteGoal that follows the TouchPoint. The TouchPoints added to the MultiPointTouchArea are a component with all
+ this logic embedded into it:
+ \snippet examples/quick/touchinteraction/multipointtouch/bearwhack/content/AugmentedTouchPoint.qml 0
+
+ Flick Resize uses a PinchArea to allow Pinch-to-Resize behavior. This is easily achieved just by listening to the PinchArea signals and responding
+ to user input.
+ \snippet examples/quick/touchinteraction/pincharea/flickresize.qml 0
+
+ Flickable is a simple example demonstrating the Flickable element. The element inside the flickable is very big, but the flickable itself is very small:
+ \snippet examples/quick/touchinteraction/flickable/basic-flickable.qml 0
+
+ Corkboards shows a more complex Flickable usecase, with elements on the flickable that respond to mouse and keyboard interaction.
+ This doesn't require special code, the QtQuick elements automatically cooperate with Flickable for accepting the touch events.
+*/
+
import QtQuick 2.0
import "../../shared"
-/*!
- \title QtQuick Examples - Touch Interaction
- \example quick/touchinteraction
- \brief This is a collection of QML Touch Interaction examples.
- \image qml-touchinteraction-example.png
-
- This is a collection of small QML examples relating to touch interaction methods.
-
- Multipoint Flames demonstrates distinguishing different fingers in a MultiPointTouchArea, by assigning a different colored flame to each touch point.
- The MultipointTouchArea sets up multiple touch points:
- \snippet examples/quick/touchinteraction/multipointtouch/multiflame.qml 0
- The flames are then simply bound to the coordiates of the touch point, and whether it is currently pressed, like so:
- \snippet examples/quick/touchinteraction/multipointtouch/multiflame.qml 1
-
- Bear-Whack demonstrates using a MultiPointTouchArea to add multiple finger support to a simple game. The interaction with the game
- is done through a SpriteGoal that follows the TouchPoint. The TouchPoints added to the MultiPointTouchArea are a component with all
- this logic embedded into it:
- \snippet examples/quick/touchinteraction/multipointtouch/bearwhack/content/AugmentedTouchPoint.qml 0
-
- Flick Resize uses a PinchArea to allow Pinch-to-Resize behavior. This is easily achieved just by listening to the PinchArea signals and responding
- to user input.
- \snippet examples/quick/touchinteraction/pincharea/flickresize.qml 0
-
- Flickable is a simple example demonstrating the Flickable element. The element inside the flickable is very big, but the flickable itself is very small:
- \snippet examples/quick/touchinteraction/flickable/basic-flickable.qml 0
-
- Corkboards shows a more complex Flickable usecase, with elements on the flickable that respond to mouse and keyboard interaction.
- This doesn't require special code, the QtQuick elements automatically cooperate with Flickable for accepting the touch events.
-*/
-
Item {
height: 480
width: 320
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
+import QtQuick 2.0
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+Item {
+ id: root
+ property real value : 0
+ width: 210; height: 210
+
+ Image { source: "background.png" }
+
+//! [needle_shadow]
+ Image {
+ x: 96
+ y: 35
+ source: "needle_shadow.png"
+ transform: Rotation {
+ origin.x: 9; origin.y: 67
+ angle: needleRotation.angle
+ }
+ }
+//! [needle_shadow]
+//! [needle]
+ Image {
+ id: needle
+ x: 98; y: 33
+ smooth: true
+ source: "needle.png"
+ transform: Rotation {
+ id: needleRotation
+ origin.x: 5; origin.y: 65
+ //! [needle angle]
+ angle: Math.min(Math.max(-130, root.value*2.6 - 130), 133)
+ Behavior on angle {
+ SpringAnimation {
+ spring: 1.4
+ damping: .15
+ }
+ }
+ //! [needle angle]
+ }
+ }
+//! [needle]
+//! [overlay]
+ Image { x: 21; y: 18; source: "overlay.png" }
+//! [overlay]
+}
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
-
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
-
+import QtQuick 2.0
+Image {
+ source: "quit.png"
+ scale: quitMouse.pressed ? 0.8 : 1.0
+ smooth: quitMouse.pressed
+ MouseArea {
+ id: quitMouse
+ anchors.fill: parent
+ anchors.margins: -10
+ onClicked: Qt.quit()
+ }
+}
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
+//! [imports]
+import QtQuick 2.0
+import "content"
+//! [imports]
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+//! [0]
+Rectangle {
+ 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
+ anchors { bottom: parent.bottom; left: parent.left
+ right: parent.right; leftMargin: 20; rightMargin: 20
+ bottomMargin: 10
+ }
+ height: 16
+
+ radius: 8
+ opacity: 0.7
+ smooth: true
+ gradient: Gradient {
+ GradientStop { position: 0.0; color: "gray" }
+ GradientStop { position: 1.0; color: "white" }
+ }
+
+ Rectangle {
+ id: slider
+ x: 1; y: 1; width: 30; height: 14
+ radius: 6
+ smooth: true
+ gradient: Gradient {
+ GradientStop { position: 0.0; color: "#424242" }
+ GradientStop { position: 1.0; color: "black" }
+ }
+
+ MouseArea {
+ anchors.fill: parent
+ anchors.margins: -16 // Increase mouse area a lot outside the slider
+ drag.target: parent; drag.axis: Drag.XAxis
+ drag.minimumX: 2; drag.maximumX: container.width - 32
+ }
+ }
+ }
+ QuitButton {
+ anchors.right: parent.right
+ anchors.top: parent.top
+ anchors.margins: 10
+ }
+}
+//! [0]
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
+import QtQuick 2.0
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+Flipable {
+ id: container
+ property alias source: frontImage.source
+ property bool flipped: true
+ property int xAxis: 0
+ property int yAxis: 0
+ property int angle: 0
+
+ width: front.width; height: front.height
+
+ front: Image { id: frontImage; smooth: true }
+ back: Image { source: "back.png"; smooth: true }
+
+ state: "back"
+
+ MouseArea { anchors.fill: parent; onClicked: container.flipped = !container.flipped }
+
+ transform: Rotation {
+ id: rotation; origin.x: container.width / 2; origin.y: container.height / 2
+ axis.x: container.xAxis; axis.y: container.yAxis; axis.z: 0
+ }
+
+ states: State {
+ name: "back"; when: container.flipped
+ PropertyChanges { target: rotation; angle: container.angle }
+ }
+
+ transitions: Transition {
+ ParallelAnimation {
+ NumberAnimation { target: rotation; properties: "angle"; duration: 600 }
+ SequentialAnimation {
+ NumberAnimation { target: container; property: "scale"; to: 0.75; duration: 300 }
+ NumberAnimation { target: container; property: "scale"; to: 1.0; duration: 300 }
+ }
+ }
+ }
+}
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
+import QtQuick 2.0
+import "content"
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+Rectangle {
+ id: window
+ width: 480; height: 320
+ color: "darkgreen"
+
+ Row {
+ anchors.centerIn: parent; spacing: 30
+ Card { source: "content/9_club.png"; angle: 180; yAxis: 1 }
+ Card { source: "content/5_heart.png"; angle: 540; xAxis: 1 }
+ }
+}
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
+import QtQuick 2.0
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+Item {
+ id: progressbar
+ property int minimum: 0
+ property int maximum: 100
+ property int value: 0
+ property alias color: gradient1.color
+ property alias secondColor: gradient2.color
+
+ width: 250; height: 23
+ clip: true
+
+ BorderImage {
+ source: "background.png"
+ width: parent.width; height: parent.height
+ border { left: 4; top: 4; right: 4; bottom: 4 }
+ }
+
+ Rectangle {
+ id: highlight
+
+ property int widthDest: ((progressbar.width * (value - minimum)) / (maximum - minimum) - 6)
+
+ width: highlight.widthDest
+ Behavior on width { SmoothedAnimation { velocity: 1200 } }
+
+ anchors { left: parent.left; top: parent.top; bottom: parent.bottom; margins: 3 }
+ radius: 1
+ gradient: Gradient {
+ GradientStop { id: gradient1; position: 0.0 }
+ GradientStop { id: gradient2; position: 1.0 }
+ }
+
+ }
+ Text {
+ anchors { right: highlight.right; rightMargin: 6; verticalCenter: parent.verticalCenter }
+ color: "white"
+ font.bold: true
+ text: Math.floor((value - minimum) / (maximum - minimum) * 100) + '%'
+ }
+}
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
+import QtQuick 2.0
+import "content"
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+Rectangle {
+ id: main
+ width: 600; height: 405
+ color: "#edecec"
+
+ Flickable {
+ anchors.fill: parent
+ contentHeight: column.height + 20
+
+ Column {
+ id: column
+ x: 10; y: 10
+ spacing: 10
+
+ Repeater {
+ model: 25
+
+ ProgressBar {
+ property int r: Math.floor(Math.random() * 5000 + 1000)
+ width: main.width - 20
+
+ NumberAnimation on value { duration: r; from: 0; to: 100; loops: Animation.Infinite }
+ ColorAnimation on color { duration: r; from: "lightsteelblue"; to: "thistle"; loops: Animation.Infinite }
+ ColorAnimation on secondColor { duration: r; from: "steelblue"; to: "#CD96CD"; loops: Animation.Infinite }
+ }
+ }
+ }
+ }
+}
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
+import QtQuick 2.0
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+Item {
+ id: scrollBar
+ // The properties that define the scrollbar's state.
+ // position and pageSize are in the range 0.0 - 1.0. They are relative to the
+ // height of the page, i.e. a pageSize of 0.5 means that you can see 50%
+ // of the height of the view.
+ // orientation can be either Qt.Vertical or Qt.Horizontal
+ property real position
+ property real pageSize
+ property variant orientation : Qt.Vertical
+
+ // A light, semi-transparent background
+ Rectangle {
+ id: background
+ anchors.fill: parent
+ radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
+ color: "white"
+ opacity: 0.3
+ }
+
+ // Size the bar to the required size, depending upon the orientation.
+ Rectangle {
+ x: orientation == Qt.Vertical ? 1 : (scrollBar.position * (scrollBar.width-2) + 1)
+ y: orientation == Qt.Vertical ? (scrollBar.position * (scrollBar.height-2) + 1) : 1
+ width: orientation == Qt.Vertical ? (parent.width-2) : (scrollBar.pageSize * (scrollBar.width-2))
+ height: orientation == Qt.Vertical ? (scrollBar.pageSize * (scrollBar.height-2)) : (parent.height-2)
+ radius: orientation == Qt.Vertical ? (width/2 - 1) : (height/2 - 1)
+ color: "black"
+ opacity: 0.7
+ }
+}
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
+import QtQuick 2.0
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+Rectangle {
+ width: 640
+ height: 480
+ // Create a flickable to view a large image.
+ Flickable {
+ id: view
+ anchors.fill: parent
+ contentWidth: picture.width
+ contentHeight: picture.height
+
+ Image {
+ id: picture
+ source: "pics/niagara_falls.jpg"
+ asynchronous: true
+ }
+
+ // Only show the scrollbars when the view is moving.
+ states: State {
+ name: "ShowBars"
+ when: view.movingVertically || view.movingHorizontally
+ PropertyChanges { target: verticalScrollBar; opacity: 1 }
+ PropertyChanges { target: horizontalScrollBar; opacity: 1 }
+ }
+
+ transitions: Transition {
+ NumberAnimation { properties: "opacity"; duration: 400 }
+ }
+ }
+
+ // Attach scrollbars to the right and bottom edges of the view.
+ ScrollBar {
+ id: verticalScrollBar
+ width: 12; height: view.height-12
+ anchors.right: view.right
+ opacity: 0
+ orientation: Qt.Vertical
+ position: view.visibleArea.yPosition
+ pageSize: view.visibleArea.heightRatio
+ }
+
+ ScrollBar {
+ id: horizontalScrollBar
+ width: view.width-12; height: 12
+ anchors.bottom: view.bottom
+ opacity: 0
+ orientation: Qt.Horizontal
+ position: view.visibleArea.xPosition
+ pageSize: view.visibleArea.widthRatio
+ }
+}
--- /dev/null
+import QmlProject 1.1
+
+Project {
+ mainFile: "main.qml"
+
+ /* Include .qml, .js, and image files from current directory and subdirectories */
+ QmlFiles {
+ directory: "."
+ }
+ JavaScriptFiles {
+ directory: "."
+ }
+ ImageFiles {
+ directory: "."
+ }
+}
--- /dev/null
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples 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
+
+FocusScope {
+ id: focusScope
+ width: 250; height: 28
+
+ BorderImage {
+ source: "images/lineedit-bg.png"
+ width: parent.width; height: parent.height
+ border { left: 4; top: 4; right: 4; bottom: 4 }
+ }
+
+ BorderImage {
+ source: "images/lineedit-bg-focus.png"
+ width: parent.width; height: parent.height
+ border { left: 4; top: 4; right: 4; bottom: 4 }
+ visible: parent.activeFocus ? true : false
+ }
+
+ Text {
+ id: typeSomething
+ anchors.fill: parent; anchors.leftMargin: 8
+ verticalAlignment: Text.AlignVCenter
+ text: "Type something..."
+ color: "gray"
+ font.italic: true
+ }
+
+ MouseArea {
+ anchors.fill: parent
+ onClicked: { focusScope.focus = true; textInput.openSoftwareInputPanel(); }
+ }
+
+ TextInput {
+ id: textInput
+ anchors { left: parent.left; leftMargin: 8; right: clear.left; rightMargin: 8; verticalCenter: parent.verticalCenter }
+ focus: true
+ selectByMouse: true
+ }
+
+ Image {
+ id: clear
+ anchors { right: parent.right; rightMargin: 8; verticalCenter: parent.verticalCenter }
+ source: "images/clear.png"
+ opacity: 0
+
+ MouseArea {
+ anchors.fill: parent
+ onClicked: { textInput.text = ''; focusScope.focus = true; textInput.openSoftwareInputPanel(); }
+ }
+ }
+
+ states: State {
+ name: "hasText"; when: textInput.text != ''
+ PropertyChanges { target: typeSomething; opacity: 0 }
+ PropertyChanges { target: clear; opacity: 1 }
+ }
+
+ transitions: [
+ Transition {
+ from: ""; to: "hasText"
+ NumberAnimation { exclude: typeSomething; properties: "opacity" }
+ },
+ Transition {
+ from: "hasText"; to: ""
+ NumberAnimation { properties: "opacity" }
+ }
+ ]
+}
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
+import QtQuick 2.0
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+Rectangle {
+ id: page
+ width: 500; height: 250
+ color: "#edecec"
+ MouseArea {
+ anchors.fill: parent
+ onClicked: page.focus = false;
+ }
+ Column {
+ anchors { horizontalCenter: parent.horizontalCenter; verticalCenter: parent.verticalCenter }
+ spacing: 10
+
+ SearchBox { id: search1; KeyNavigation.tab: search2; KeyNavigation.backtab: search3; focus: true }
+ SearchBox { id: search2; KeyNavigation.tab: search3; KeyNavigation.backtab: search1 }
+ SearchBox { id: search3; KeyNavigation.tab: search1; KeyNavigation.backtab: search2 }
+ }
+}
--- /dev/null
+import QmlProject 1.1
+
+Project {
+ mainFile: "main.qml"
+
+ /* Include .qml, .js, and image files from current directory and subdirectories */
+ QmlFiles {
+ directory: "."
+ }
+ JavaScriptFiles {
+ directory: "."
+ }
+ ImageFiles {
+ directory: "."
+ }
+}
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
+//![0]
+import QtQuick 2.0
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+Item {
+ id: toggleswitch
+ width: background.width; height: background.height
+//![1]
+ property bool on: false
+//![1]
+
+//![2]
+ function toggle() {
+ if (toggleswitch.state == "on")
+ toggleswitch.state = "off";
+ else
+ toggleswitch.state = "on";
+ }
+//![2]
+
+//![3]
+ function releaseSwitch() {
+ if (knob.x == 1) {
+ if (toggleswitch.state == "off") return;
+ }
+ if (knob.x == 78) {
+ if (toggleswitch.state == "on") return;
+ }
+ toggle();
+ }
+//![3]
+
+//![4]
+ Image {
+ id: background
+ source: "background.png"
+ MouseArea { anchors.fill: parent; onClicked: toggle() }
+ }
+//![4]
+
+//![5]
+ Image {
+ id: knob
+ x: 1; y: 2
+ source: "knob.png"
+
+ MouseArea {
+ anchors.fill: parent
+ drag.target: knob; drag.axis: Drag.XAxis; drag.minimumX: 1; drag.maximumX: 78
+ onClicked: toggle()
+ onReleased: releaseSwitch()
+ }
+ }
+//![5]
+
+//![6]
+ states: [
+ State {
+ name: "on"
+ PropertyChanges { target: knob; x: 78 }
+ PropertyChanges { target: toggleswitch; on: true }
+ },
+ State {
+ name: "off"
+ PropertyChanges { target: knob; x: 1 }
+ PropertyChanges { target: toggleswitch; on: false }
+ }
+ ]
+//![6]
+
+//![7]
+ transitions: Transition {
+ NumberAnimation { properties: "x"; easing.type: Easing.InOutQuad; duration: 200 }
+ }
+//![7]
+}
+//![0]
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
+ <!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
+]>
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
+ x="0px" y="0px" width="130px" height="56px" viewBox="0 0 130 56" enable-background="new 0 0 130 56" xml:space="preserve">
+<defs>
+</defs>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-37.5005" y1="-66" x2="-37.5005" y2="-121.9985" gradientTransform="matrix(1 0 0 -1 102.5 -66)">
+ <stop offset="0.0056" style="stop-color:#000000"/>
+ <stop offset="1" style="stop-color:#EAECEF"/>
+</linearGradient>
+<path fill="url(#SVGID_1_)" d="M101.998,55.998H28c-15.439,0-28-12.562-28-28C0,12.56,12.561,0,28,0h73.998
+ c15.439,0,28,12.559,28,27.998C129.998,43.438,117.438,55.998,101.998,55.998L101.998,55.998z"/>
+<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-5.5" y1="-132.1338" x2="-69.5002" y2="-55.8613" gradientTransform="matrix(1 0 0 -1 102.5 -66)">
+ <stop offset="0.0056" style="stop-color:#000000"/>
+ <stop offset="1" style="stop-color:#828385"/>
+</linearGradient>
+<path fill="url(#SVGID_2_)" d="M127.999,27.998c0,14.359-11.642,26-26,26h-74c-14.359,0-26-11.641-26-26l0,0
+ c0-14.359,11.641-26,26-26h74C116.357,1.998,127.999,13.639,127.999,27.998L127.999,27.998z"/>
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 13.0.2, SVG Export Plug-In -->
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://web.resource.org/cc/"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ version="1.1"
+ x="0px"
+ y="0px"
+ width="52px"
+ height="52px"
+ viewBox="0 0 52 52"
+ enable-background="new 0 0 52 52"
+ xml:space="preserve"
+ id="svg3883"
+ sodipodi:version="0.32"
+ inkscape:version="0.44.1"
+ sodipodi:docname="knob_on.svg"
+ sodipodi:docbase="/local/axel/embeddedwidgets/embeddedstories/skins/svgslideswitch/MetallicBrush"><metadata
+ id="metadata4200"><rdf:RDF><cc:Work
+ rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
+ inkscape:window-height="640"
+ inkscape:window-width="937"
+ inkscape:pageshadow="2"
+ inkscape:pageopacity="0.0"
+ guidetolerance="10.0"
+ gridtolerance="10.0"
+ objecttolerance="10.0"
+ borderopacity="1.0"
+ bordercolor="#666666"
+ pagecolor="#ffffff"
+ id="base"
+ inkscape:zoom="8.3653846"
+ inkscape:cx="26.000002"
+ inkscape:cy="26"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:current-layer="svg3883" />
+<defs
+ id="defs3885">
+</defs>
+<linearGradient
+ id="SVGID_1_"
+ gradientUnits="userSpaceOnUse"
+ x1="-59.7866"
+ y1="-115.917"
+ x2="-93.2123"
+ y2="-76.0818"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#000000"
+ id="stop3888" />
+ <stop
+ offset="1"
+ style="stop-color:#EAECEF"
+ id="stop3890" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="26"
+ id="circle3892"
+ style="fill:url(#SVGID_1_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="26"
+ sodipodi:ry="26"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_2_"
+ gradientUnits="userSpaceOnUse"
+ x1="-100.5"
+ y1="-96"
+ x2="-52.5"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop3895" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop3897" />
+ <stop
+ offset="0.6043"
+ style="stop-color:#E7EAED"
+ id="stop3899" />
+ <stop
+ offset="0.6751"
+ style="stop-color:#DEE4E7"
+ id="stop3901" />
+ <stop
+ offset="0.7358"
+ style="stop-color:#CFD9DD"
+ id="stop3903" />
+ <stop
+ offset="0.791"
+ style="stop-color:#B9CACF"
+ id="stop3905" />
+ <stop
+ offset="0.8425"
+ style="stop-color:#9EB6BD"
+ id="stop3907" />
+ <stop
+ offset="0.891"
+ style="stop-color:#7B9EA7"
+ id="stop3909" />
+ <stop
+ offset="0.9374"
+ style="stop-color:#53828C"
+ id="stop3911" />
+ <stop
+ offset="0.9809"
+ style="stop-color:#25626E"
+ id="stop3913" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop3915" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="24"
+ id="circle3917"
+ style="fill:url(#SVGID_2_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="24"
+ sodipodi:ry="24"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_3_"
+ gradientUnits="userSpaceOnUse"
+ x1="-98.6328"
+ y1="-96"
+ x2="-54.3672"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop3920" />
+ <stop
+ offset="0.073"
+ style="stop-color:#8FAECB"
+ id="stop3922" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop3924" />
+ <stop
+ offset="0.5902"
+ style="stop-color:#E7E9ED"
+ id="stop3926" />
+ <stop
+ offset="0.618"
+ style="stop-color:#E4E7EB"
+ id="stop3928" />
+ <stop
+ offset="0.6697"
+ style="stop-color:#E0E4E9"
+ id="stop3930" />
+ <stop
+ offset="0.7211"
+ style="stop-color:#D4DCE1"
+ id="stop3932" />
+ <stop
+ offset="0.7722"
+ style="stop-color:#C0CFD5"
+ id="stop3934" />
+ <stop
+ offset="0.809"
+ style="stop-color:#ADC2C9"
+ id="stop3936" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop3938" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="22.132999"
+ id="circle3940"
+ style="fill:url(#SVGID_3_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="22.132999"
+ sodipodi:ry="22.132999"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_4_"
+ gradientUnits="userSpaceOnUse"
+ x1="-96.7671"
+ y1="-96"
+ x2="-56.2324"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop3943" />
+ <stop
+ offset="0.073"
+ style="stop-color:#86A7C4"
+ id="stop3945" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop3947" />
+ <stop
+ offset="0.577"
+ style="stop-color:#E7EAED"
+ id="stop3949" />
+ <stop
+ offset="0.618"
+ style="stop-color:#E1E6EA"
+ id="stop3951" />
+ <stop
+ offset="0.6697"
+ style="stop-color:#DDE3E8"
+ id="stop3953" />
+ <stop
+ offset="0.7211"
+ style="stop-color:#D1DBE1"
+ id="stop3955" />
+ <stop
+ offset="0.7722"
+ style="stop-color:#BDCDD5"
+ id="stop3957" />
+ <stop
+ offset="0.809"
+ style="stop-color:#AAC0CA"
+ id="stop3959" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop3961" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="20.267"
+ id="circle3963"
+ style="fill:url(#SVGID_4_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="20.267"
+ sodipodi:ry="20.267"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_5_"
+ gradientUnits="userSpaceOnUse"
+ x1="-94.8999"
+ y1="-96"
+ x2="-58.0996"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop3966" />
+ <stop
+ offset="0.073"
+ style="stop-color:#7E9FBC"
+ id="stop3968" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop3970" />
+ <stop
+ offset="0.5709"
+ style="stop-color:#E6E9ED"
+ id="stop3972" />
+ <stop
+ offset="0.618"
+ style="stop-color:#DFE4E9"
+ id="stop3974" />
+ <stop
+ offset="0.6687"
+ style="stop-color:#DBE1E7"
+ id="stop3976" />
+ <stop
+ offset="0.7193"
+ style="stop-color:#CFD9E0"
+ id="stop3978" />
+ <stop
+ offset="0.7695"
+ style="stop-color:#BBCCD6"
+ id="stop3980" />
+ <stop
+ offset="0.809"
+ style="stop-color:#A6BECA"
+ id="stop3982" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop3984" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="18.4"
+ id="circle3986"
+ style="fill:url(#SVGID_5_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="18.4"
+ sodipodi:ry="18.4"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_6_"
+ gradientUnits="userSpaceOnUse"
+ x1="-93.0332"
+ y1="-96"
+ x2="-59.9668"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop3989" />
+ <stop
+ offset="0.073"
+ style="stop-color:#7697B4"
+ id="stop3991" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop3993" />
+ <stop
+ offset="0.5636"
+ style="stop-color:#E6E9ED"
+ id="stop3995" />
+ <stop
+ offset="0.618"
+ style="stop-color:#DCE2E8"
+ id="stop3997" />
+ <stop
+ offset="0.6687"
+ style="stop-color:#D8DFE6"
+ id="stop3999" />
+ <stop
+ offset="0.7193"
+ style="stop-color:#CCD7E0"
+ id="stop4001" />
+ <stop
+ offset="0.7695"
+ style="stop-color:#B8CAD5"
+ id="stop4003" />
+ <stop
+ offset="0.809"
+ style="stop-color:#A3BCCA"
+ id="stop4005" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4007" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="16.533001"
+ id="circle4009"
+ style="fill:url(#SVGID_6_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="16.533001"
+ sodipodi:ry="16.533001"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_7_"
+ gradientUnits="userSpaceOnUse"
+ x1="-91.167"
+ y1="-96"
+ x2="-61.833"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4012" />
+ <stop
+ offset="0.073"
+ style="stop-color:#6D8FAD"
+ id="stop4014" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4016" />
+ <stop
+ offset="0.5605"
+ style="stop-color:#E5E8EC"
+ id="stop4018" />
+ <stop
+ offset="0.618"
+ style="stop-color:#DAE1E7"
+ id="stop4020" />
+ <stop
+ offset="0.6679"
+ style="stop-color:#D6DEE5"
+ id="stop4022" />
+ <stop
+ offset="0.7175"
+ style="stop-color:#CAD6DF"
+ id="stop4024" />
+ <stop
+ offset="0.7669"
+ style="stop-color:#B6C9D6"
+ id="stop4026" />
+ <stop
+ offset="0.809"
+ style="stop-color:#9FBACB"
+ id="stop4028" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4030" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="14.667"
+ id="circle4032"
+ style="fill:url(#SVGID_7_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="14.667"
+ sodipodi:ry="14.667"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_8_"
+ gradientUnits="userSpaceOnUse"
+ x1="-89.2998"
+ y1="-96"
+ x2="-63.7002"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4035" />
+ <stop
+ offset="0.073"
+ style="stop-color:#6587A5"
+ id="stop4037" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4039" />
+ <stop
+ offset="0.5588"
+ style="stop-color:#E4E8EC"
+ id="stop4041" />
+ <stop
+ offset="0.618"
+ style="stop-color:#D8DFE7"
+ id="stop4043" />
+ <stop
+ offset="0.6675"
+ style="stop-color:#D4DCE5"
+ id="stop4045" />
+ <stop
+ offset="0.7167"
+ style="stop-color:#C8D5E0"
+ id="stop4047" />
+ <stop
+ offset="0.7657"
+ style="stop-color:#B4C8D6"
+ id="stop4049" />
+ <stop
+ offset="0.809"
+ style="stop-color:#9CB8CB"
+ id="stop4051" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4053" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="12.8"
+ id="circle4055"
+ style="fill:url(#SVGID_8_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="12.8"
+ sodipodi:ry="12.8"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_9_"
+ gradientUnits="userSpaceOnUse"
+ x1="-87.4331"
+ y1="-96"
+ x2="-65.5664"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4058" />
+ <stop
+ offset="0.073"
+ style="stop-color:#5D809D"
+ id="stop4060" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4062" />
+ <stop
+ offset="0.5567"
+ style="stop-color:#E3E7EC"
+ id="stop4064" />
+ <stop
+ offset="0.618"
+ style="stop-color:#D5DDE6"
+ id="stop4066" />
+ <stop
+ offset="0.6671"
+ style="stop-color:#D1DAE4"
+ id="stop4068" />
+ <stop
+ offset="0.7159"
+ style="stop-color:#C5D3DF"
+ id="stop4070" />
+ <stop
+ offset="0.7645"
+ style="stop-color:#B1C6D6"
+ id="stop4072" />
+ <stop
+ offset="0.809"
+ style="stop-color:#98B5CB"
+ id="stop4074" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4076" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="10.933"
+ id="circle4078"
+ style="fill:url(#SVGID_9_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="10.933"
+ sodipodi:ry="10.933"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_10_"
+ gradientUnits="userSpaceOnUse"
+ x1="-85.5659"
+ y1="-96"
+ x2="-67.4336"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4081" />
+ <stop
+ offset="0.073"
+ style="stop-color:#547896"
+ id="stop4083" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4085" />
+ <stop
+ offset="0.5588"
+ style="stop-color:#E1E6EB"
+ id="stop4087" />
+ <stop
+ offset="0.618"
+ style="stop-color:#D3DCE5"
+ id="stop4089" />
+ <stop
+ offset="0.6663"
+ style="stop-color:#CFD9E3"
+ id="stop4091" />
+ <stop
+ offset="0.7143"
+ style="stop-color:#C3D2DF"
+ id="stop4093" />
+ <stop
+ offset="0.7621"
+ style="stop-color:#AFC5D7"
+ id="stop4095" />
+ <stop
+ offset="0.809"
+ style="stop-color:#94B3CC"
+ id="stop4097" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4099" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="9.066"
+ id="circle4101"
+ style="fill:url(#SVGID_10_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="9.066"
+ sodipodi:ry="9.066"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_11_"
+ gradientUnits="userSpaceOnUse"
+ x1="-83.7002"
+ y1="-96"
+ x2="-69.2998"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4104" />
+ <stop
+ offset="0.073"
+ style="stop-color:#4C708E"
+ id="stop4106" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4108" />
+ <stop
+ offset="0.5625"
+ style="stop-color:#DEE4EA"
+ id="stop4110" />
+ <stop
+ offset="0.618"
+ style="stop-color:#D0DAE4"
+ id="stop4112" />
+ <stop
+ offset="0.6663"
+ style="stop-color:#CCD7E2"
+ id="stop4114" />
+ <stop
+ offset="0.7143"
+ style="stop-color:#C0D0DE"
+ id="stop4116" />
+ <stop
+ offset="0.7621"
+ style="stop-color:#ACC3D6"
+ id="stop4118" />
+ <stop
+ offset="0.809"
+ style="stop-color:#91B1CC"
+ id="stop4120" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4122" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="7.1999998"
+ id="circle4124"
+ style="fill:url(#SVGID_11_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="7.1999998"
+ sodipodi:ry="7.1999998"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_12_"
+ gradientUnits="userSpaceOnUse"
+ x1="-81.833"
+ y1="-96"
+ x2="-71.167"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4127" />
+ <stop
+ offset="0.073"
+ style="stop-color:#446986"
+ id="stop4129" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4131" />
+ <stop
+ offset="0.5757"
+ style="stop-color:#D9E0E8"
+ id="stop4133" />
+ <stop
+ offset="0.618"
+ style="stop-color:#CED8E3"
+ id="stop4135" />
+ <stop
+ offset="0.6655"
+ style="stop-color:#CAD5E2"
+ id="stop4137" />
+ <stop
+ offset="0.7129"
+ style="stop-color:#BECEDD"
+ id="stop4139" />
+ <stop
+ offset="0.7601"
+ style="stop-color:#AAC1D6"
+ id="stop4141" />
+ <stop
+ offset="0.807"
+ style="stop-color:#8EB0CC"
+ id="stop4143" />
+ <stop
+ offset="0.809"
+ style="stop-color:#8DAFCC"
+ id="stop4145" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4147" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="5.3330002"
+ id="circle4149"
+ style="fill:url(#SVGID_12_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="5.3330002"
+ sodipodi:ry="5.3330002"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_13_"
+ gradientUnits="userSpaceOnUse"
+ x1="-79.9658"
+ y1="-96"
+ x2="-73.0342"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4152" />
+ <stop
+ offset="0.073"
+ style="stop-color:#3B617F"
+ id="stop4154" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4156" />
+ <stop
+ offset="0.6087"
+ style="stop-color:#CED9E3"
+ id="stop4158" />
+ <stop
+ offset="0.618"
+ style="stop-color:#CBD7E2"
+ id="stop4160" />
+ <stop
+ offset="0.6655"
+ style="stop-color:#C7D4E1"
+ id="stop4162" />
+ <stop
+ offset="0.7129"
+ style="stop-color:#BBCDDD"
+ id="stop4164" />
+ <stop
+ offset="0.7601"
+ style="stop-color:#A7C0D6"
+ id="stop4166" />
+ <stop
+ offset="0.807"
+ style="stop-color:#8BAECD"
+ id="stop4168" />
+ <stop
+ offset="0.809"
+ style="stop-color:#8AADCD"
+ id="stop4170" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4172" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="3.4660001"
+ id="circle4174"
+ style="fill:url(#SVGID_13_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="3.4660001"
+ sodipodi:ry="3.4660001"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+<linearGradient
+ id="SVGID_14_"
+ gradientUnits="userSpaceOnUse"
+ x1="-78.1001"
+ y1="-96"
+ x2="-74.9004"
+ y2="-96"
+ gradientTransform="matrix(1,0,0,-1,102.5,-70)">
+ <stop
+ offset="0.0056"
+ style="stop-color:#8AADCE"
+ id="stop4177" />
+ <stop
+ offset="0.073"
+ style="stop-color:#335977"
+ id="stop4179" />
+ <stop
+ offset="0.5"
+ style="stop-color:#EAECEF"
+ id="stop4181" />
+ <stop
+ offset="0.618"
+ style="stop-color:#C9D5E1"
+ id="stop4183" />
+ <stop
+ offset="0.6648"
+ style="stop-color:#C5D3E0"
+ id="stop4185" />
+ <stop
+ offset="0.7114"
+ style="stop-color:#B9CBDC"
+ id="stop4187" />
+ <stop
+ offset="0.758"
+ style="stop-color:#A5BFD6"
+ id="stop4189" />
+ <stop
+ offset="0.8042"
+ style="stop-color:#89ADCE"
+ id="stop4191" />
+ <stop
+ offset="0.809"
+ style="stop-color:#86ABCD"
+ id="stop4193" />
+ <stop
+ offset="1"
+ style="stop-color:#0E525F"
+ id="stop4195" />
+</linearGradient>
+<circle
+ cx="26"
+ cy="26"
+ r="1.6"
+ id="circle4197"
+ style="fill:url(#SVGID_14_)"
+ sodipodi:cx="26"
+ sodipodi:cy="26"
+ sodipodi:rx="1.6"
+ sodipodi:ry="1.6"
+ transform="matrix(0.923077,0,0,0.923077,2,1.999996)" />
+</svg>
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
+import QtQuick 2.0
+import "content"
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+Rectangle {
+ color: "white"
+ width: 400; height: 250
+//![0]
+ Switch { anchors.centerIn: parent; on: false }
+//![0]
+}
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
+import QtQuick 2.0
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+Image {
+ property alias model: view.model
+ property alias delegate: view.delegate
+ property alias currentIndex: view.currentIndex
+ property real itemHeight: 30
+ source: "spinner-bg.png"
+ clip: true
+
+ PathView {
+ id: view
+ anchors.fill: parent
+
+ pathItemCount: height/itemHeight
+ preferredHighlightBegin: 0.5
+ preferredHighlightEnd: 0.5
+ highlight: Image { source: "spinner-select.png"; width: view.width; height: itemHeight+4 }
+ dragMargin: view.width/2
+
+ path: Path {
+ startX: view.width/2; startY: -itemHeight/2
+ PathLine { x: view.width/2; y: view.pathItemCount*itemHeight + itemHeight }
+ }
+ }
+
+ Keys.onDownPressed: view.incrementCurrentIndex()
+ Keys.onUpPressed: view.decrementCurrentIndex()
+}
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
+import QtQuick 2.0
+import "content"
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+Rectangle {
+ width: 240; height: 320
+ Column {
+ y: 20; x: 20; spacing: 20
+
+ Spinner {
+ id: spinner
+ width: 200; height: 240
+ focus: true
+ model: 20
+ itemHeight: 30
+ delegate: Text { font.pixelSize: 25; text: index; height: 30 }
+ }
+
+ Text { text: "Current item index: " + spinner.currentIndex }
+ }
+}
--- /dev/null
+import QmlProject 1.1
+
+Project {
+ mainFile: "main.qml"
+
+ /* Include .qml, .js, and image files from current directory and subdirectories */
+ QmlFiles {
+ directory: "."
+ }
+ JavaScriptFiles {
+ directory: "."
+ }
+ ImageFiles {
+ directory: "."
+ }
+}
--- /dev/null
+/****************************************************************************
+**
+** Copyright (C) 2012 Nokia Corporation and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/
+**
+** This file is part of the examples 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 {
+ id: tabWidget
+
+ // Setting the default property to stack.children means any child items
+ // of the TabWidget are actually added to the 'stack' item's children.
+ // See the "Property Binding"
+ // documentation for details on default properties.
+ default property alias content: stack.children
+
+ property int current: 0
+
+ onCurrentChanged: setOpacities()
+ Component.onCompleted: setOpacities()
+
+ function setOpacities() {
+ for (var i = 0; i < stack.children.length; ++i) {
+ stack.children[i].opacity = (i == current ? 1 : 0)
+ }
+ }
+
+ Row {
+ id: header
+
+ Repeater {
+ model: stack.children.length
+ delegate: Rectangle {
+ width: tabWidget.width / stack.children.length; height: 36
+
+ Rectangle {
+ width: parent.width; height: 1
+ anchors { bottom: parent.bottom; bottomMargin: 1 }
+ color: "#acb2c2"
+ }
+ BorderImage {
+ anchors { fill: parent; leftMargin: 2; topMargin: 5; rightMargin: 1 }
+ border { left: 7; right: 7 }
+ source: "tab.png"
+ visible: tabWidget.current == index
+ }
+ Text {
+ horizontalAlignment: Qt.AlignHCenter; verticalAlignment: Qt.AlignVCenter
+ anchors.fill: parent
+ text: stack.children[index].title
+ elide: Text.ElideRight
+ font.bold: tabWidget.current == index
+ }
+ MouseArea {
+ anchors.fill: parent
+ onClicked: tabWidget.current = index
+ }
+ }
+ }
+ }
+
+ Item {
+ id: stack
+ width: tabWidget.width
+ anchors.top: header.bottom; anchors.bottom: tabWidget.bottom
+ }
+}
**
****************************************************************************/
-/*!
- \title QML Demo - Tweet Search
- \example demos/tweetsearch
- \brief This is simple twitter application written in QML.
+import QtQuick 2.0
- The Tweet Search demo shows how to write a simple twitter application.
- It uses the twitter search API to search for tweets with specific words or hashtag
- or from a specific user. The tweets are presented in a list that can be pulled to
- be updated.
-*/
+TabWidget {
+ id: tabs
+ width: 640; height: 480
+ Rectangle {
+ property string title: "Red"
+ anchors.fill: parent
+ color: "#e3e3e3"
+
+ Rectangle {
+ anchors.fill: parent; anchors.margins: 20
+ color: "#ff7f7f"
+ Text {
+ width: parent.width - 20
+ anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
+ text: "Roses are red"
+ font.pixelSize: 20
+ wrapMode: Text.WordWrap
+ }
+ }
+ }
+
+ Rectangle {
+ property string title: "Green"
+ anchors.fill: parent
+ color: "#e3e3e3"
+
+ Rectangle {
+ anchors.fill: parent; anchors.margins: 20
+ color: "#7fff7f"
+ Text {
+ width: parent.width - 20
+ anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
+ text: "Flower stems are green"
+ font.pixelSize: 20
+ wrapMode: Text.WordWrap
+ }
+ }
+ }
+
+ Rectangle {
+ property string title: "Blue"
+ anchors.fill: parent; color: "#e3e3e3"
+
+ Rectangle {
+ anchors.fill: parent; anchors.margins: 20
+ color: "#7f7fff"
+ Text {
+ width: parent.width - 20
+ anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
+ text: "Violets are blue"
+ font.pixelSize: 20
+ wrapMode: Text.WordWrap
+ }
+ }
+ }
+}
--- /dev/null
+import QmlProject 1.1
+
+Project {
+ mainFile: "main.qml"
+
+ /* Include .qml, .js, and image files from current directory and subdirectories */
+ QmlFiles {
+ directory: "."
+ }
+ JavaScriptFiles {
+ directory: "."
+ }
+ ImageFiles {
+ directory: "."
+ }
+}
projects / konrad/qtdeclarative.git / commitdiff
