diff options
| author | Xingtao Zhang <zhxt@ovi.com> | 2013-01-08 23:34:22 +0000 |
|---|---|---|
| committer | The Qt Project <gerrit-noreply@qt-project.org> | 2013-01-09 18:42:42 +0100 |
| commit | 888a02ec4a338f3edefe6e4287173a600cd2dd37 (patch) | |
| tree | b9c73f18316337622dc871f91dde3e17ea2c01c4 | |
| parent | 1c522ec7c7f5e9755075f62866098b9a54b35739 (diff) | |
Doc: Updated docs for examples and etc
- Corrected several \snippet paths and \example paths.
- Added missing example images.
- Marked several commands as code.
- Updated the exampledirs variable for qtqml.
Done-with: Venugopal Shivashankar <venugopal.shivashankar@digia.com>
Task-number: QTBUG-28898
Change-Id: I24aac17821f54de4bd5129c45b5bf96dc0f114b2
Reviewed-by: Liang Qi <liang.qi@digia.com>
30 files changed, 246 insertions, 239 deletions
diff --git a/examples/qml/i18n/doc/src/i18n.qdoc b/examples/qml/i18n/doc/src/i18n.qdoc index 888a98105b..b04c38e645 100644 --- a/examples/qml/i18n/doc/src/i18n.qdoc +++ b/examples/qml/i18n/doc/src/i18n.qdoc @@ -35,14 +35,21 @@ The files are created/updated by running: +\code lupdate i18n.qml -ts i18n/base.ts +\endcode 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: +\code linguist i18n/qml_fr.ts +\endcode The run-time translation files are then generated by running: +\code lrelease i18n/*.ts +\endcode + */ diff --git a/examples/qml/plugins/doc/src/qmlpluginex.qdoc b/examples/qml/plugins/doc/src/qmlpluginex.qdoc index 464f42a34c..320bc1d823 100644 --- a/examples/qml/plugins/doc/src/qmlpluginex.qdoc +++ b/examples/qml/plugins/doc/src/qmlpluginex.qdoc @@ -27,7 +27,7 @@ /*! \title QML Plugin Example - \example plugins + \example qml/plugins \brief This example creates a C++ plugin extension by subclassing QQmlExtensionPlugin. diff --git a/examples/qml/xmlhttprequest/doc/images/qml-xmlhttprequest-example.png b/examples/qml/xmlhttprequest/doc/images/qml-xmlhttprequest-example.png Binary files differnew file mode 100644 index 0000000000..f585613427 --- /dev/null +++ b/examples/qml/xmlhttprequest/doc/images/qml-xmlhttprequest-example.png diff --git a/examples/quick/imageelements/doc/src/imageelements.qdoc b/examples/quick/imageelements/doc/src/imageelements.qdoc index da02a23fbc..48476af4e2 100644 --- a/examples/quick/imageelements/doc/src/imageelements.qdoc +++ b/examples/quick/imageelements/doc/src/imageelements.qdoc @@ -40,7 +40,7 @@ 'Shadows' shows how to create a drop shadow effect for a rectangular item using a BorderImage: - \snippet quick/imageelements/content/ShadowRectangle.qml delegate + \snippet quick/imageelements/content/ShadowRectangle.qml shadow 'AnimatedSprite' shows how to display a simple animation using an AnimatedSprite element: diff --git a/examples/quick/particles/affectors/doc/src/affectors.qdoc b/examples/quick/particles/affectors/doc/src/affectors.qdoc index c0759f5fe3..6b57746709 100644 --- a/examples/quick/particles/affectors/doc/src/affectors.qdoc +++ b/examples/quick/particles/affectors/doc/src/affectors.qdoc @@ -27,7 +27,7 @@ /*! \title QtQuick.Particles Examples - Affectors - \example particles/affectors + \example quick/particles/affectors \brief This is a collection of examples using Affectors in the QML particle system. \image qml-affectors-example.png @@ -35,7 +35,7 @@ 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 particles/affectors/content/age.qml 0 + \snippet quick/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 @@ -44,7 +44,7 @@ the end of their life instantly. Attractor demonstrates using an Attractor affector to simulate a black hole - \snippet particles/affectors/content/attractor.qml 0 + \snippet quick/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 @@ -55,59 +55,59 @@ 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 particles/affectors/content/customaffector.qml 0 + \snippet quick/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 particles/affectors/content/customaffector.qml 1 + \snippet quick/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 particles/affectors/content/friction.qml 0 + \snippet quick/particles/affectors/content/friction.qml 0 Gravity is a convenience affector for applying a constant acceleration to particles inside it - \snippet particles/affectors/content/gravity.qml 0 + \snippet quick/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 particles/affectors/content/groupgoal.qml unlit + \snippet quick/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 particles/affectors/content/groupgoal.qml lighting + \snippet quick/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 particles/affectors/content/groupgoal.qml lit + \snippet quick/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 particles/affectors/content/groupgoal.qml groupgoal-pilot + \snippet quick/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 particles/affectors/content/groupgoal.qml groupgoal-ma + \snippet quick/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 particles/affectors/content/move.qml A + \snippet quick/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 particles/affectors/content/move.qml B + \snippet quick/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 particles/affectors/content/move.qml C + \snippet quick/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 particles/affectors/content/spritegoal.qml 0 + \snippet quick/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 particles/affectors/content/turbulence.qml 0 + \snippet quick/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 particles/affectors/content/wander.qml 0 + \snippet quick/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. */ diff --git a/examples/quick/particles/customparticle/doc/src/customparticle.qdoc b/examples/quick/particles/customparticle/doc/src/customparticle.qdoc index 39c3d7c101..c682b304cb 100644 --- a/examples/quick/particles/customparticle/doc/src/customparticle.qdoc +++ b/examples/quick/particles/customparticle/doc/src/customparticle.qdoc @@ -27,7 +27,7 @@ /*! \title QtQuick.Particles Examples - CustomParticle - \example particles/customparticle + \example quick/particles/customparticle \brief This is a collection of examples using CustomParticle in the QML particle system. \image qml-customparticle-example.png @@ -36,19 +36,19 @@ Blur Particles adds a blur effect to the particles, which increases over the particle's life time. It uses a custom vertex shader: - \snippet particles/customparticle/content/blurparticles.qml vertex + \snippet quick/particles/customparticle/content/blurparticles.qml vertex to propagate life time simulation to a custom fragement shader: - \snippet particles/customparticle/content/blurparticles.qml fragment + \snippet quick/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 particles/customparticle/content/fragmentshader.qml 0 + \snippet quick/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 particles/customparticle/content/imagecolors.qml vertex + \snippet quick/particles/customparticle/content/imagecolors.qml vertex passes along the starting position for each vertex to the fragment shader, - \snippet particles/customparticle/content/imagecolors.qml fragment + \snippet quick/particles/customparticle/content/imagecolors.qml fragment which uses it to determine the color for that particle. */ diff --git a/examples/quick/particles/emitters/doc/src/emitters.qdoc b/examples/quick/particles/emitters/doc/src/emitters.qdoc index 37da46f2df..e1be1a4655 100644 --- a/examples/quick/particles/emitters/doc/src/emitters.qdoc +++ b/examples/quick/particles/emitters/doc/src/emitters.qdoc @@ -26,7 +26,7 @@ ****************************************************************************/ /*! \title QtQuick.Particles Examples - Emitters - \example particles/emitters + \example quick/particles/emitters \brief This is a collection of examples using Emitters in the QML particle system. \image qml-emitters-example.png @@ -34,27 +34,27 @@ 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 particles/emitters/content/velocityfrommotion.qml 0 + \snippet quick/particles/emitters/content/velocityfrommotion.qml 0 Burst and pulse calls the burst and pulse methods on two idential emitters. - \snippet particles/emitters/content/burstandpulse.qml 0 + \snippet quick/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 particles/emitters/content/customemitter.qml 0 + \snippet quick/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 particles/emitters/content/emitmask.qml 0 + \snippet quick/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 particles/emitters/content/shapeanddirection.qml 0 + \snippet quick/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 particles/emitters/content/customemitter.qml 0 + \snippet quick/particles/emitters/content/customemitter.qml 0 */ diff --git a/examples/quick/particles/imageparticle/doc/src/imageparticle.qdoc b/examples/quick/particles/imageparticle/doc/src/imageparticle.qdoc index 62c1a06839..430954c5ee 100644 --- a/examples/quick/particles/imageparticle/doc/src/imageparticle.qdoc +++ b/examples/quick/particles/imageparticle/doc/src/imageparticle.qdoc @@ -27,7 +27,7 @@ /*! \title QtQuick.Particles Examples - Affectors - \example particles/imageparticle + \example quick/particles/imageparticle \brief This is a collection of examples using Affectors in the QML particle system. \image qml-imageparticle-example.png @@ -35,25 +35,25 @@ 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 particles/imageparticle/content/allatonce.qml 0 + \snippet quick/particles/imageparticle/content/allatonce.qml 0 Colored shows a simple ImageParticle with some color variation. \snippet particles/imageparticle/content/colored.qml 0 Color Table sets the color over life on the particles to provide a fixed rainbow effect. - \snippet particles/imageparticle/content/colortable.qml 0 + \snippet quick/particles/imageparticle/content/colortable.qml 0 Deformation spins and squishes a starfish particle. - \snippet particles/imageparticle/content/deformation.qml spin - \snippet particles/imageparticle/content/deformation.qml deform + \snippet quick/particles/imageparticle/content/deformation.qml spin + \snippet quick/particles/imageparticle/content/deformation.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 particles/imageparticle/content/sharing.qml 0 + \snippet quick/particles/imageparticle/content/sharing.qml 0 The following ImageParticle is placed inside the list highlight, and renders the particles above the other ImageParticle. - \snippet particles/imageparticle/content/sharing.qml 1 + \snippet quick/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. diff --git a/examples/quick/particles/system/doc/src/system.qdoc b/examples/quick/particles/system/doc/src/system.qdoc index 8c381a57ec..f5ee3b8ec1 100644 --- a/examples/quick/particles/system/doc/src/system.qdoc +++ b/examples/quick/particles/system/doc/src/system.qdoc @@ -27,7 +27,7 @@ /*! \title QtQuick.Particles Examples - Affectors - \example particles/system + \example quick/particles/system \brief This is a collection of examples using Affectors in the QML particle system. \image qml-system-example.png @@ -35,7 +35,7 @@ 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 particles/system/content/dynamiccomparison.qml fake + \snippet quick/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. @@ -43,14 +43,14 @@ 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 particles/system/content/timedgroupchanges.qml 0 + \snippet quick/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 particles/system/content/timedgroupchanges.qml 1 + \snippet quick/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 particles/system/content/timedgroupchanges.qml 2 + \snippet quick/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 particles/system/content/dynamicemitters.qml 0 + \snippet quick/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. diff --git a/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc b/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc index c7193b4b34..fef4ef2e7e 100644 --- a/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc +++ b/examples/quick/touchinteraction/doc/src/touchinteraction.qdoc @@ -41,7 +41,7 @@ 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 quick/touchinteraction/multipointtouch/bearwhack/content/AugmentedTouchPoint.qml 0 + \snippet quick/touchinteraction/multipointtouch/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. diff --git a/examples/quick/ui-components/slideswitch/doc/src/example-slideswitch.qdoc b/examples/quick/ui-components/slideswitch/doc/src/example-slideswitch.qdoc index 4e302e7256..d05175e482 100644 --- a/examples/quick/ui-components/slideswitch/doc/src/example-slideswitch.qdoc +++ b/examples/quick/ui-components/slideswitch/doc/src/example-slideswitch.qdoc @@ -34,7 +34,7 @@ This example shows how to create a reusable switch component in QML. -The code for this example can be found in the \c examples/quick/tutorials/ui-components/slideswitch directory. +The code for this example can be found in the \c examples/quick/ui-components/slideswitch directory. The elements that compose the switch are: @@ -105,7 +105,7 @@ For more information on states see \l{Qt Quick States}. We add two JavaScript functions to our switch: -\snippet quick/tutorials/ui-components/slideswitch/content/Switch.qml 2 +\snippet quick/ui-components/slideswitch/content/Switch.qml 2 This first function is called when the background image or the knob are clicked. We simply want the switch to toggle between the two states (\e on and \e off). diff --git a/examples/quick/views/doc/src/views.qdoc b/examples/quick/views/doc/src/views.qdoc index fe135db0d7..13d054cfc9 100644 --- a/examples/quick/views/doc/src/views.qdoc +++ b/examples/quick/views/doc/src/views.qdoc @@ -35,49 +35,49 @@ This is a collection of small QML examples relating to model and view functionality. They demonstrate how to show data from a model using the QtQuick view types. \section2 GridView and PathView demonstrate usage of these elements to display views. - \snippet quick/modelviews/gridview/gridview-example.qml 0 + \snippet quick/views/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 quick/modelviews/listview/dynamiclist.qml 0 - \snippet quick/modelviews/listview/dynamiclist.qml 1 + \snippet quick/views/listview/dynamiclist.qml 0 + \snippet quick/views/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 quick/modelviews/listview/expandingdelegates.qml 0 - \snippet quick/modelviews/listview/expandingdelegates.qml 1 - \snippet quick/modelviews/listview/expandingdelegates.qml 2 - \snippet quick/modelviews/listview/expandingdelegates.qml 3 + \snippet quick/views/listview/expandingdelegates.qml 0 + \snippet quick/views/listview/expandingdelegates.qml 1 + \snippet quick/views/listview/expandingdelegates.qml 2 + \snippet quick/views/listview/expandingdelegates.qml 3 \section2 Highlight demonstrates adding a custom highlight to a ListView. - \snippet quick/modelviews/listview/highlight.qml 0 + \snippet quick/views/listview/highlight.qml 0 \section2 Highlight Ranges shows the three different highlight range modes of ListView. - \snippet quick/modelviews/listview/highlightranges.qml 0 - \snippet quick/modelviews/listview/highlightranges.qml 1 - \snippet quick/modelviews/listview/highlightranges.qml 2 + \snippet quick/views/listview/highlightranges.qml 0 + \snippet quick/views/listview/highlightranges.qml 1 + \snippet quick/views/listview/highlightranges.qml 2 \section2 Sections demonstrates the various section headers and footers available to ListView. - \snippet quick/modelviews/listview/sections.qml 0 + \snippet quick/views/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 quick/modelviews/package/Delegate.qml 0 + \snippet quick/views/package/Delegate.qml 0 A VisualDataModel allows the individual views to access their specific items from the shared package delegate. - \snippet quick/modelviews/package/view.qml 0 + \snippet quick/views/package/view.qml 0 \section2 VisualItemModel uses a VisualItemModel for the model instead of a ListModel. - \snippet quick/modelviews/visualitemmodel/visualitemmodel.qml 0 + \snippet quick/views/visualitemmodel/visualitemmodel.qml 0 */ diff --git a/src/imports/localstorage/plugin.cpp b/src/imports/localstorage/plugin.cpp index dbb026efc6..5045b1579b 100644 --- a/src/imports/localstorage/plugin.cpp +++ b/src/imports/localstorage/plugin.cpp @@ -493,7 +493,7 @@ Database connections are automatically closed during Javascript garbage collecti The API can be used from JavaScript functions in your QML: -\snippet localstorage/localstorage/hello.qml 0 +\snippet quick/localstorage/localstorage/hello.qml 0 The API conforms to the Synchronous API of the HTML5 Web Database API, \link http://www.w3.org/TR/2009/WD-webdatabase-20091029/ W3C Working Draft 29 October 2009\endlink. diff --git a/src/imports/xmllistmodel/qqmlxmllistmodel.cpp b/src/imports/xmllistmodel/qqmlxmllistmodel.cpp index 8b30dc7373..9cc471b1de 100644 --- a/src/imports/xmllistmodel/qqmlxmllistmodel.cpp +++ b/src/imports/xmllistmodel/qqmlxmllistmodel.cpp @@ -127,7 +127,7 @@ typedef QPair<int, int> QQuickXmlListRange; For example, if there is an XML document like this: - \quotefile qml/xmlrole.xml + \quotefile qml/xmlrole.qml Here are some valid XPath expressions for XmlRole queries on this document: \snippet qml/xmlrole.qml 0 diff --git a/src/qml/doc/images/button-types.png b/src/qml/doc/images/button-types.png Binary files differnew file mode 100644 index 0000000000..6990d7c190 --- /dev/null +++ b/src/qml/doc/images/button-types.png diff --git a/src/qml/doc/qtqml.qdocconf b/src/qml/doc/qtqml.qdocconf index 06c1c42a92..6cf34ce4e1 100644 --- a/src/qml/doc/qtqml.qdocconf +++ b/src/qml/doc/qtqml.qdocconf @@ -34,7 +34,7 @@ headerdirs += .. sourcedirs += .. -exampledirs += ../../../examples/qml \ +exampledirs += ../../../examples/ \ ../ \ snippets diff --git a/src/qml/doc/src/cppintegration/extending-tutorial.qdoc b/src/qml/doc/src/cppintegration/extending-tutorial.qdoc index 8ed3aa8279..c60c155fc0 100644 --- a/src/qml/doc/src/cppintegration/extending-tutorial.qdoc +++ b/src/qml/doc/src/cppintegration/extending-tutorial.qdoc @@ -44,12 +44,12 @@ examples/quick/tutorials/extending directory. Tutorial chapters: \list 1 -\li \l{examples/quick/tutorials/extending/chapter1-basics}{Creating a New Type} -\li \l{examples/quick/tutorials/extending/chapter2-methods}{Connecting to C++ Methods and Signals} -\li \l{examples/quick/tutorials/extending/chapter3-bindings}{Property Binding} -\li \l{examples/quick/tutorials/extending/chapter4-customPropertyTypes}{Using Custom Property Types} -\li \l{examples/quick/tutorials/extending/chapter5-listproperties}{Using List Property Types} -\li \l{examples/quick/tutorials/extending/chapter6-plugins}{Writing an Extension Plugin} +\li \l{quick/tutorials/extending/chapter1-basics}{Creating a New Type} +\li \l{quick/tutorials/extending/chapter2-methods}{Connecting to C++ Methods and Signals} +\li \l{quick/tutorials/extending/chapter3-bindings}{Property Binding} +\li \l{quick/tutorials/extending/chapter4-customPropertyTypes}{Using Custom Property Types} +\li \l{quick/tutorials/extending/chapter5-listproperties}{Using List Property Types} +\li \l{quick/tutorials/extending/chapter6-plugins}{Writing an Extension Plugin} \li \l{qml-extending-tutorial7.html}{In Summary} \endlist @@ -64,7 +64,7 @@ and \l {qtqml-cppintegration-definetypes.html}{Defining QML Types from C++}. /*! \title Chapter 1: Creating a New Type -\example examples/quick/tutorials/extending/chapter1-basics +\example quick/tutorials/extending/chapter1-basics A common task when extending QML is to provide a new QML type that supports some custom functionality beyond what is provided by the built-in \l {Qt Quick QML Types}{QtQuick types}. @@ -104,7 +104,7 @@ this new class must: Here is our \c PieChart class, defined in \c piechart.h: -\snippet examples/quick/tutorials/extending/chapter1-basics/piechart.h 0 +\snippet quick/tutorials/extending/chapter1-basics/piechart.h 0 The class inherits from QQuickPaintedItem because we want to override QQuickPaintedItem::paint() in perform drawing operations with the QPainter API. @@ -120,15 +120,15 @@ simply sets and returns the \c m_name and \c m_color values as appropriate, and implements \c paint() to draw a simple pie chart. It also turns off the QGraphicsItem::ItemHasNoContents flag to enable painting: -\snippet examples/quick/tutorials/extending/chapter1-basics/piechart.cpp 0 +\snippet quick/tutorials/extending/chapter1-basics/piechart.cpp 0 \dots 0 -\snippet examples/quick/tutorials/extending/chapter1-basics/piechart.cpp 1 +\snippet quick/tutorials/extending/chapter1-basics/piechart.cpp 1 Now that we have defined the \c PieChart type, we will use it from QML. The \c app.qml file creates a \c PieChart item and display the pie chart's details using a standard QML \l Text item: -\snippet examples/quick/tutorials/extending/chapter1-basics/app.qml 0 +\snippet quick/tutorials/extending/chapter1-basics/app.qml 0 Notice that although the color is specified as a string in QML, it is automatically converted to a QColor object for the PieChart \c color property. Automatic conversions are @@ -142,14 +142,14 @@ you don't register the type, \c app.qml won't be able to create a \c PieChart. Here is the application \c main.cpp: -\snippet examples/quick/tutorials/extending/chapter1-basics/main.cpp 0 +\snippet quick/tutorials/extending/chapter1-basics/main.cpp 0 This call to qmlRegisterType() registers the \c PieChart type as a type called "PieChart", in a type namespace called "Charts", with a version of 1.0. Lastly, we write a \c .pro project file that includes the files and the \c declarative library: -\quotefile examples/quick/tutorials/extending/chapter1-basics/chapter1-basics.pro +\quotefile quick/tutorials/extending/chapter1-basics/chapter1-basics.pro Now we can build and run the application: @@ -162,26 +162,26 @@ Try it yourself with the code in Qt's \c examples/quick/tutorials/extending/chap /*! \title Chapter 2: Connecting to C++ Methods and Signals -\example examples/quick/tutorials/extending/chapter2-methods +\example quick/tutorials/extending/chapter2-methods Suppose we want \c PieChart to have a "clearChart()" method that erases the chart and then emits a "chartCleared" signal. Our \c app.qml would be able to call \c clearChart() and receive \c chartCleared() signals like this: -\snippet examples/quick/tutorials/extending/chapter2-methods/app.qml 0 +\snippet quick/tutorials/extending/chapter2-methods/app.qml 0 \image extending-tutorial-chapter2.png To do this, we add a \c clearChart() method and a \c chartCleared() signal to our C++ class: -\snippet examples/quick/tutorials/extending/chapter2-methods/piechart.h 0 +\snippet quick/tutorials/extending/chapter2-methods/piechart.h 0 \dots -\snippet examples/quick/tutorials/extending/chapter2-methods/piechart.h 1 +\snippet quick/tutorials/extending/chapter2-methods/piechart.h 1 \dots -\snippet examples/quick/tutorials/extending/chapter2-methods/piechart.h 2 +\snippet quick/tutorials/extending/chapter2-methods/piechart.h 2 \dots -\snippet examples/quick/tutorials/extending/chapter2-methods/piechart.h 3 +\snippet quick/tutorials/extending/chapter2-methods/piechart.h 3 The use of Q_INVOKABLE makes the \c clearChart() method available to the Qt Meta-Object system, and in turn, to QML. Note that it could have @@ -191,7 +191,7 @@ slots are also callable from QML. Both of these approaches are valid. The \c clearChart() method simply changes the color to Qt::transparent, repaints the chart, then emits the \c chartCleared() signal: -\snippet examples/quick/tutorials/extending/chapter2-methods/piechart.cpp 0 +\snippet quick/tutorials/extending/chapter2-methods/piechart.cpp 0 Now when we run the application and click the window, the pie chart disappears, and the application outputs: @@ -207,7 +207,7 @@ Try out the example yourself with the updated code in Qt's \c examples/quick/tut /*! \title Chapter 3: Adding Property Bindings -\example examples/quick/tutorials/extending/chapter3-bindings +\example quick/tutorials/extending/chapter3-bindings Property binding is a powerful feature of QML that allows values of different elements to be synchronized automatically. It uses signals to notify and update @@ -216,7 +216,7 @@ other elements' values when property values are changed. Let's enable property bindings for the \c color property. That means if we have code like this: -\snippet examples/quick/tutorials/extending/chapter3-bindings/app.qml 0 +\snippet quick/tutorials/extending/chapter3-bindings/app.qml 0 \image extending-tutorial-chapter3.png @@ -231,17 +231,17 @@ It's easy to enable property binding for the \c color property. We add a \l{Qt's Property System}{NOTIFY} feature to its Q_PROPERTY() declaration to indicate that a "colorChanged" signal is emitted whenever the value changes. -\snippet examples/quick/tutorials/extending/chapter3-bindings/piechart.h 0 +\snippet quick/tutorials/extending/chapter3-bindings/piechart.h 0 \dots -\snippet examples/quick/tutorials/extending/chapter3-bindings/piechart.h 1 +\snippet quick/tutorials/extending/chapter3-bindings/piechart.h 1 \dots -\snippet examples/quick/tutorials/extending/chapter3-bindings/piechart.h 2 +\snippet quick/tutorials/extending/chapter3-bindings/piechart.h 2 \dots -\snippet examples/quick/tutorials/extending/chapter3-bindings/piechart.h 3 +\snippet quick/tutorials/extending/chapter3-bindings/piechart.h 3 Then, we emit this signal in \c setPieSlice(): -\snippet examples/quick/tutorials/extending/chapter3-bindings/piechart.cpp 0 +\snippet quick/tutorials/extending/chapter3-bindings/piechart.cpp 0 It's important for \c setColor() to check that the color value has actually changed before emitting \c colorChanged(). This ensures the signal is not emitted unnecessarily and @@ -259,7 +259,7 @@ custom QML types may see unexpected behavior if bindings are not implemented. /*! \title Chapter 4: Using Custom Property Types -\example examples/quick/tutorials/extending/chapter4-customPropertyTypes +\example quick/tutorials/extending/chapter4-customPropertyTypes The \c PieChart type currently has a string-type property and a color-type property. It could have many other types of properties. For example, it could have an @@ -299,41 +299,41 @@ For example, let's replace the use of the \c property with a type called "PieSlice" that has a \c color property. Instead of assigning a color, we assign an \c PieSlice value which itself contains a \c color: -\snippet examples/quick/tutorials/extending/chapter4-customPropertyTypes/app.qml 0 +\snippet quick/tutorials/extending/chapter4-customPropertyTypes/app.qml 0 Like \c PieChart, this new \c PieSlice type inherits from QQuickPaintedItem and declares its properties with Q_PROPERTY(): -\snippet examples/quick/tutorials/extending/chapter4-customPropertyTypes/pieslice.h 0 +\snippet quick/tutorials/extending/chapter4-customPropertyTypes/pieslice.h 0 To use it in \c PieChart, we modify the \c color property declaration and associated method signatures: -\snippet examples/quick/tutorials/extending/chapter4-customPropertyTypes/piechart.h 0 +\snippet quick/tutorials/extending/chapter4-customPropertyTypes/piechart.h 0 \dots -\snippet examples/quick/tutorials/extending/chapter4-customPropertyTypes/piechart.h 1 +\snippet quick/tutorials/extending/chapter4-customPropertyTypes/piechart.h 1 \dots -\snippet examples/quick/tutorials/extending/chapter4-customPropertyTypes/piechart.h 2 +\snippet quick/tutorials/extending/chapter4-customPropertyTypes/piechart.h 2 \dots -\snippet examples/quick/tutorials/extending/chapter4-customPropertyTypes/piechart.h 3 +\snippet quick/tutorials/extending/chapter4-customPropertyTypes/piechart.h 3 There is one thing to be aware of when implementing \c setPieSlice(). The \c PieSlice is a visual item, so it must be set as a child of the \c PieChart using QQuickItem::setParentItem() so that the \c PieChart knows to paint this child item when its contents are drawn: -\snippet examples/quick/tutorials/extending/chapter4-customPropertyTypes/piechart.cpp 0 +\snippet quick/tutorials/extending/chapter4-customPropertyTypes/piechart.cpp 0 Like the \c PieChart type, the \c PieSlice type has to be registered using qmlRegisterType() to be used from QML. As with \c PieChart, we'll add the type to the "Charts" type namespace, version 1.0: -\snippet examples/quick/tutorials/extending/chapter4-customPropertyTypes/main.cpp 0 +\snippet quick/tutorials/extending/chapter4-customPropertyTypes/main.cpp 0 \dots -\snippet examples/quick/tutorials/extending/chapter4-customPropertyTypes/main.cpp 1 +\snippet quick/tutorials/extending/chapter4-customPropertyTypes/main.cpp 1 \dots -\snippet examples/quick/tutorials/extending/chapter4-customPropertyTypes/main.cpp 2 +\snippet quick/tutorials/extending/chapter4-customPropertyTypes/main.cpp 2 Try it out with the code in Qt's \c examples/quick/tutorials/extending/chapter4-customPropertyTypes directory. @@ -343,13 +343,13 @@ Try it out with the code in Qt's \c examples/quick/tutorials/extending/chapter4- /*! \title Chapter 5: Using List Property Types -\example examples/quick/tutorials/extending/chapter5-listproperties +\example quick/tutorials/extending/chapter5-listproperties Right now, a \c PieChart can only have one \c PieSlice. Ideally a chart would have multiple slices, with different colors and sizes. To do this, we could have a \c slices property that accepts a list of \c PieSlice items: -\snippet examples/quick/tutorials/extending/chapter5-listproperties/app.qml 0 +\snippet quick/tutorials/extending/chapter5-listproperties/app.qml 0 \image extending-tutorial-chapter5.png @@ -360,11 +360,11 @@ function with a \c slices() function that returns a list of slices, and add an internal \c append_slice() function (discussed below). We also use a QList to store the internal list of slices as \c m_slices: -\snippet examples/quick/tutorials/extending/chapter5-listproperties/piechart.h 0 +\snippet quick/tutorials/extending/chapter5-listproperties/piechart.h 0 \dots -\snippet examples/quick/tutorials/extending/chapter5-listproperties/piechart.h 1 +\snippet quick/tutorials/extending/chapter5-listproperties/piechart.h 1 \dots -\snippet examples/quick/tutorials/extending/chapter5-listproperties/piechart.h 2 +\snippet quick/tutorials/extending/chapter5-listproperties/piechart.h 2 Although the \c slices property does not have an associated \c WRITE function, it is still modifiable because of the way QQmlListProperty works. @@ -373,7 +373,7 @@ return a QQmlListProperty value and indicate that the internal \c PieChart::append_slice() function is to be called whenever a request is made from QML to add items to the list: -\snippet examples/quick/tutorials/extending/chapter5-listproperties/piechart.cpp 0 +\snippet quick/tutorials/extending/chapter5-listproperties/piechart.cpp 0 The \c append_slice() function simply sets the parent item as before, and adds the new item to the \c m_slices list. As you can see, the append function for a @@ -392,7 +392,7 @@ The complete code can be seen in the updated \c examples/quick/tutorials/extendi /*! \title Chapter 6: Writing an Extension Plugin -\example examples/quick/tutorials/extending/chapter6-plugins +\example quick/tutorials/extending/chapter6-plugins Currently the \c PieChart and \c PieSlice types are used by \c app.qml, which is displayed using a QQuickView in a C++ application. An alternative @@ -407,22 +407,22 @@ and registers our QML types in the inherited \l{QQmlExtensionPlugin::}{registerT Here is the \c ChartsPlugin definition in \c chartsplugin.h: -\snippet examples/quick/tutorials/extending/chapter6-plugins/chartsplugin.h 0 +\snippet quick/tutorials/extending/chapter6-plugins/chartsplugin.h 0 And its implementation in \c chartsplugin.cpp: -\snippet examples/quick/tutorials/extending/chapter6-plugins/chartsplugin.cpp 0 +\snippet quick/tutorials/extending/chapter6-plugins/chartsplugin.cpp 0 Then, we write a \c .pro project file that defines the project as a plugin library and specifies with DESTDIR that library files should be built into a "lib" subdirectory: -\quotefile examples/quick/tutorials/extending/chapter6-plugins/chapter6-plugins.pro +\quotefile quick/tutorials/extending/chapter6-plugins/chapter6-plugins.pro Finally, we add a \l{qtqml-modules-qmldir.html}{qmldir} file that is parsed by the QML engine. In this file, we specify that a plugin named "chapter6-plugin" (the name of the example project) can be found in the "lib" subdirectory: -\quotefile examples/quick/tutorials/extending/chapter6-plugins/Charts/qmldir +\quotefile quick/tutorials/extending/chapter6-plugins/Charts/qmldir Now we have a plugin, and instead of having a main.cpp and an executable, we can build the project and then load the QML file using the \l{Prototyping with qmlscene}{qmlscene tool}, diff --git a/src/qml/doc/src/documents/topic.qdoc b/src/qml/doc/src/documents/topic.qdoc index 1013aef9c6..50c2813df2 100644 --- a/src/qml/doc/src/documents/topic.qdoc +++ b/src/qml/doc/src/documents/topic.qdoc @@ -91,14 +91,14 @@ separation between UI definition and logic implementation. In the following example, the client developer defines a \c Button type with a document in a file: -\snippet qml/qml-extending-types/components/Button.qml 0 +\snippet ../src/quick/doc/snippets/qml/qml-extending-types/components/Button.qml 0 The \c Button type can then be used in an application: \table \row -\li \snippet qml/qml-extending-types/components/application.qml 0 -\li \image qml-extending-types.png +\li \snippet ../src/quick/doc/snippets/qml/qml-extending-types/components/application.qml 0 +\li \image button-types.png \endtable Please see the documentation about \l{qtqml-documents-definetypes.html} diff --git a/src/qml/doc/src/modules/cppplugins.qdoc b/src/qml/doc/src/modules/cppplugins.qdoc index 2a08d732c0..6f479a84d7 100644 --- a/src/qml/doc/src/modules/cppplugins.qdoc +++ b/src/qml/doc/src/modules/cppplugins.qdoc @@ -68,7 +68,7 @@ as a new QML element. It provides the current time through \c hour and \c minute properties. - \snippet examples/qml/plugins/plugin.cpp 0 + \snippet qml/plugins/plugin.cpp 0 \dots To make this type available, we create a plugin class named \c QExampleQmlPlugin @@ -78,7 +78,7 @@ definition to register the plugin with the Qt meta object system using a unique identifier for the plugin. - \snippet examples/qml/plugins/plugin.cpp plugin + \snippet qml/plugins/plugin.cpp plugin The \c TimeModel class receives a \c{1.0} version of this plugin library, as a QML type called \c Time. The Q_ASSERT() macro can ensure the type namespace is @@ -111,13 +111,13 @@ that is built by the project (as shown above in the \c .pro file) so both of these need to be specified in the \c qmldir file: - \quotefile examples/qml/plugins/imports/TimeExample/qmldir + \quotefile qml/plugins/imports/TimeExample/qmldir Once the project is built and installed, the new \c Time component is accessible by any QML component that imports the \c TimeExample module - \snippet examples/qml/plugins/plugins.qml 0 + \snippet qml/plugins/plugins.qml 0 The full source code is available in the \l {qml/plugins}{plugins example}. diff --git a/src/qml/qml/qqmlextensionplugin.cpp b/src/qml/qml/qqmlextensionplugin.cpp index 9f2272a04e..5dfb84b5d8 100644 --- a/src/qml/qml/qqmlextensionplugin.cpp +++ b/src/qml/qml/qqmlextensionplugin.cpp @@ -76,7 +76,7 @@ QT_BEGIN_NAMESPACE as a new QML element. It provides the current time through \c hour and \c minute properties, like this: - \snippet plugins/plugin.cpp 0 + \snippet qml/plugins/plugin.cpp 0 \dots To make this class available as a QML type, create a plugin that registers @@ -84,7 +84,7 @@ QT_BEGIN_NAMESPACE module will be named \c TimeExample (as defined in the project file further below). - \snippet plugins/plugin.cpp plugin + \snippet qml/plugins/plugin.cpp plugin This registers the \c TimeModel class with the 1.0 version of this plugin library, as a QML type called \c Time. The Q_ASSERT statement @@ -108,12 +108,12 @@ QT_BEGIN_NAMESPACE should be bundled with the plugin, so it needs to be specified in the \c qmldir file: - \quotefile plugins/imports/TimeExample/qmldir + \quotefile qml/plugins/imports/TimeExample/qmldir Once the project is built and installed, the new \c Time element can be used by any QML component that imports the \c TimeExample module: - \snippet plugins/plugins.qml 0 + \snippet qml/plugins/plugins.qml 0 The full source code is available in the \l {qml/plugins}{plugins example}. diff --git a/src/quick/doc/src/advtutorial.qdoc b/src/quick/doc/src/advtutorial.qdoc index dbd13fff07..ff997e1ecf 100644 --- a/src/quick/doc/src/advtutorial.qdoc +++ b/src/quick/doc/src/advtutorial.qdoc @@ -53,10 +53,10 @@ control QML elements. Tutorial chapters: \list 1 -\li \l {tutorials/samegame/samegame1}{Creating the Game Canvas and Blocks} -\li \l {tutorials/samegame/samegame2}{Populating the Game Canvas} -\li \l {tutorials/samegame/samegame3}{Implementing the Game Logic} -\li \l {tutorials/samegame/samegame4}{Finishing Touches} +\li \l {quick/tutorials/samegame/samegame1}{Creating the Game Canvas and Blocks} +\li \l {quick/tutorials/samegame/samegame2}{Populating the Game Canvas} +\li \l {quick/tutorials/samegame/samegame3}{Implementing the Game Logic} +\li \l {quick/tutorials/samegame/samegame4}{Finishing Touches} \endlist All the code in this tutorial can be found in Qt's \c examples/quick/tutorials/samegame @@ -71,7 +71,7 @@ directory. \previouspage QML Advanced Tutorial \nextpage QML Advanced Tutorial 2 - Populating the Game Canvas -\example tutorials/samegame/samegame1 +\example quick/tutorials/samegame/samegame1 \section2 Creating the application screen @@ -83,7 +83,7 @@ To begin with, we create our Same Game application with a main screen like this: This is defined by the main application file, \c samegame.qml, which looks like this: -\snippet tutorials/samegame/samegame1/samegame.qml 0 +\snippet quick/tutorials/samegame/samegame1/samegame.qml 0 This gives you a basic game window that includes the main canvas for the blocks, a "New Game" button and a score display. @@ -101,7 +101,7 @@ The \c Button item in the code above is defined in a separate component file nam To create a functional button, we use the QML elements \l Text and \l MouseArea inside a \l Rectangle. Here is the \c Button.qml code: -\snippet tutorials/samegame/samegame1/Button.qml 0 +\snippet quick/tutorials/samegame/samegame1/Button.qml 0 This essentially defines a rectangle that contains text and can be clicked. The \l MouseArea has an \c onClicked() handler that is implemented to emit the \c clicked() signal of the @@ -111,7 +111,7 @@ In Same Game, the screen is filled with small blocks when the game begins. Each block is just an item that contains an image. The block code is defined in a separate \c Block.qml file: -\snippet tutorials/samegame/samegame1/Block.qml 0 +\snippet quick/tutorials/samegame/samegame1/Block.qml 0 At the moment, the block doesn't do anything; it is just an image. As the tutorial progresses we will animate and give behaviors to the blocks. @@ -141,7 +141,7 @@ elements to get started. Next, we will populate the game canvas with some blocks \previouspage QML Advanced Tutorial 1 - Creating the Game Canvas and Blocks \nextpage QML Advanced Tutorial 3 - Implementing the Game Logic -\example tutorials/samegame/samegame2 +\example quick/tutorials/samegame/samegame2 \section2 Generating the blocks in JavaScript @@ -156,7 +156,7 @@ create the blocks in JavaScript. Here is the JavaScript code for generating the blocks, contained in a new file, \c samegame.js. The code is explained below. -\snippet tutorials/samegame/samegame2/samegame.js 0 +\snippet quick/tutorials/samegame/samegame2/samegame.js 0 The \c startNewGame() function deletes the blocks created in the previous game and calculates the number of rows and columns of blocks required to fill the game window for the new game. @@ -192,14 +192,14 @@ Now we need to call the JavaScript code in \c samegame.js from our QML files. To do this, we add this line to \c samegame.qml which imports the JavaScript file as a \l{QML Modules}{module}: -\snippet tutorials/samegame/samegame2/samegame.qml 2 +\snippet quick/tutorials/samegame/samegame2/samegame.qml 2 This allows us to refer to any functions within \c samegame.js using "SameGame" as a prefix: for example, \c SameGame.startNewGame() or \c SameGame.createBlock(). This means we can now connect the New Game button's \c onClicked handler to the \c startNewGame() function, like this: -\snippet tutorials/samegame/samegame2/samegame.qml 1 +\snippet quick/tutorials/samegame/samegame2/samegame.qml 1 So, when you click the New Game button, \c startNewGame() is called and generates a field of blocks, like this: @@ -217,7 +217,7 @@ Now, we have a screen of blocks, and we can begin to add the game mechanics. \previouspage QML Advanced Tutorial 2 - Populating the Game Canvas \nextpage QML Advanced Tutorial 4 - Finishing Touches -\example tutorials/samegame/samegame3 +\example quick/tutorials/samegame/samegame3 \section2 Making a playable game @@ -241,7 +241,7 @@ As this is a tutorial about QML, not game design, we will only discuss \c handle To make it easier for the JavaScript code to interface with the QML elements, we have added an Item called \c gameCanvas to \c samegame.qml. It replaces the background as the item which contains the blocks. It also accepts mouse input from the user. Here is the item code: -\snippet tutorials/samegame/samegame3/samegame.qml 1 +\snippet quick/tutorials/samegame/samegame3/samegame.qml 1 The \c gameCanvas item is the exact size of the board, and has a \c score property and a \l MouseArea to handle mouse clicks. The blocks are now created as its children, and its dimensions are used to determine the board size so that @@ -251,7 +251,7 @@ Note that it can still be accessed from the script. When clicked, the \l MouseArea calls \c{handleClick()} in \c samegame.js, which determines whether the player's click should cause any blocks to be removed, and updates \c gameCanvas.score with the current score if necessary. Here is the \c handleClick() function: -\snippet tutorials/samegame/samegame3/samegame.js 1 +\snippet quick/tutorials/samegame/samegame3/samegame.js 1 Note that if \c score was a global variable in the \c{samegame.js} file you would not be able to bind to it. You can only bind to QML properties. @@ -259,17 +259,17 @@ Note that if \c score was a global variable in the \c{samegame.js} file you woul When the player clicks a block and triggers \c handleClick(), \c handleClick() also calls \c victoryCheck() to update the score and to check whether the player has completed the game. Here is the \c victoryCheck() code: -\snippet tutorials/samegame/samegame3/samegame.js 2 +\snippet quick/tutorials/samegame/samegame3/samegame.js 2 This updates the \c gameCanvas.score value and displays a "Game Over" dialog if the game is finished. The Game Over dialog is created using a \c Dialog element that is defined in \c Dialog.qml. Here is the \c Dialog.qml code. Notice how it is designed to be usable imperatively from the script file, via the functions and signals: -\snippet tutorials/samegame/samegame3/Dialog.qml 0 +\snippet quick/tutorials/samegame/samegame3/Dialog.qml 0 And this is how it is used in the main \c samegame.qml file: -\snippet tutorials/samegame/samegame3/samegame.qml 2 +\snippet quick/tutorials/samegame/samegame3/samegame.qml 2 We give the dialog a \l {Item::z}{z} value of 100 to ensure it is displayed on top of our other components. The default \c z value for an item is 0. @@ -278,7 +278,7 @@ We give the dialog a \l {Item::z}{z} value of 100 to ensure it is displayed on t It's not much fun to play Same Game if all the blocks are the same color, so we've modified the \c createBlock() function in \c samegame.js to randomly create a different type of block (for either red, green or blue) each time it is called. \c Block.qml has also changed so that each block contains a different image depending on its type: -\snippet tutorials/samegame/samegame3/Block.qml 0 +\snippet quick/tutorials/samegame/samegame3/Block.qml 0 \section2 A working game @@ -290,7 +290,7 @@ Here is a screenshot of what has been accomplished so far: This is what \c samegame.qml looks like now: -\snippet tutorials/samegame/samegame3/samegame.qml 0 +\snippet quick/tutorials/samegame/samegame3/samegame.qml 0 The game works, but it's a little boring right now. Where are the smooth animated transitions? Where are the high scores? If you were a QML expert you could have written these in the first iteration, but in this tutorial they've been saved @@ -305,7 +305,7 @@ until the next chapter - where your application becomes alive! \contentspage QML Advanced Tutorial \previouspage QML Advanced Tutorial 3 - Implementing the Game Logic -\example tutorials/samegame/samegame4 +\example quick/tutorials/samegame/samegame4 \section2 Adding some flair @@ -324,7 +324,7 @@ In \c BoomBlock.qml, we apply a \l SpringAnimation behavior to the \c x and \c y block will follow and animate its movement in a spring-like fashion towards the specified position (whose values will be set by \c samegame.js).Here is the code added to \c BoomBlock.qml: -\snippet tutorials/samegame/samegame4/content/BoomBlock.qml 1 +\snippet quick/tutorials/samegame/samegame4/content/BoomBlock.qml 1 The \c spring and \c damping values can be changed to modify the spring-like effect of the animation. @@ -341,7 +341,7 @@ animate the opacity value so that it gradually fades in and out, instead of abru visible and invisible. To do this, we'll apply a \l Behavior on the \c opacity property of the \c Image element in \c BoomBlock.qml: -\snippet tutorials/samegame/samegame4/content/BoomBlock.qml 2 +\snippet quick/tutorials/samegame/samegame4/content/BoomBlock.qml 2 Note the \c{opacity: 0} which means the block is transparent when it is first created. We could set the opacity in \c samegame.js when we create and destroy the blocks, @@ -367,14 +367,14 @@ To fade out, we set \c dying to true instead of setting opacity to 0 when a bloc Finally, we'll add a cool-looking particle effect to the blocks when they are destroyed. To do this, we first add a \l ParticleSystem in \c BoomBlock.qml, like so: -\snippet tutorials/samegame/samegame4/content/BoomBlock.qml 3 +\snippet quick/tutorials/samegame/samegame4/content/BoomBlock.qml 3 To fully understand this you should read the \l Particles documentation, but it's important to note that \c emitRate is set to zero so that particles are not emitted normally. Also, we extend the \c dying State, which creates a burst of particles by calling the \c burst() method on the particles element. The code for the states now look like this: -\snippet tutorials/samegame/samegame4/content/BoomBlock.qml 4 +\snippet quick/tutorials/samegame/samegame4/content/BoomBlock.qml 4 Now the game is beautifully animated, with subtle (or not-so-subtle) animations added for all of the player's actions. The end result is shown below, with a different set of images to demonstrate basic theming: @@ -391,32 +391,32 @@ To do this, we will show a dialog when the game is over to request the player's This requires a few changes to \c Dialog.qml. In addition to a \c Text element, it now has a \c TextInput child item for receiving keyboard text input: -\snippet tutorials/samegame/samegame4/content/Dialog.qml 0 +\snippet quick/tutorials/samegame/samegame4/content/Dialog.qml 0 \dots 4 -\snippet tutorials/samegame/samegame4/content/Dialog.qml 2 +\snippet quick/tutorials/samegame/samegame4/content/Dialog.qml 2 \dots 4 -\snippet tutorials/samegame/samegame4/content/Dialog.qml 3 +\snippet quick/tutorials/samegame/samegame4/content/Dialog.qml 3 We'll also add a \c showWithInput() function. The text input will only be visible if this function is called instead of \c show(). When the dialog is closed, it emits a \c closed() signal, and other elements can retrieve the text entered by the user through an \c inputText property: -\snippet tutorials/samegame/samegame4/content/Dialog.qml 0 -\snippet tutorials/samegame/samegame4/content/Dialog.qml 1 +\snippet quick/tutorials/samegame/samegame4/content/Dialog.qml 0 +\snippet quick/tutorials/samegame/samegame4/content/Dialog.qml 1 \dots 4 -\snippet tutorials/samegame/samegame4/content/Dialog.qml 3 +\snippet quick/tutorials/samegame/samegame4/content/Dialog.qml 3 Now the dialog can be used in \c samegame.qml: -\snippet tutorials/samegame/samegame4/samegame.qml 0 +\snippet quick/tutorials/samegame/samegame4/samegame.qml 0 When the dialog emits the \c closed signal, we call the new \c saveHighScore() function in \c samegame.js, which stores the high score locally in an SQL database and also send the score to an online database if possible. The \c nameInputDialog is activated in the \c victoryCheck() function in \c samegame.js: -\snippet tutorials/samegame/samegame4/content/samegame.js 3 +\snippet quick/tutorials/samegame/samegame4/content/samegame.js 3 \dots 4 -\snippet tutorials/samegame/samegame4/content/samegame.js 4 +\snippet quick/tutorials/samegame/samegame4/content/samegame.js 4 \section3 Storing high scores offline @@ -424,7 +424,7 @@ Now we need to implement the functionality to actually save the High Scores tabl Here is the \c saveHighScore() function in \c samegame.js: -\snippet tutorials/samegame/samegame4/content/samegame.js 2 +\snippet quick/tutorials/samegame/samegame4/content/samegame.js 2 First we call \c sendHighScore() (explained in the section below) if it is possible to send the high scores to an online database. @@ -443,7 +443,7 @@ If the player entered their name we can send the data to the web service us If the player enters a name, we send the data to the service using this code in \c samegame.js: -\snippet tutorials/samegame/samegame4/content/samegame.js 1 +\snippet quick/tutorials/samegame/samegame4/content/samegame.js 1 The \l XMLHttpRequest in this code is the same as the \c XMLHttpRequest() as you'll find in standard browser JavaScript, and can be used in the same way to dynamically get XML or QML from the web service to display the high scores. We don't worry about the response in this case - we just post the high diff --git a/src/quick/doc/src/appdevguide/deployment.qdoc b/src/quick/doc/src/appdevguide/deployment.qdoc index 12296ecb53..5a7af40ff6 100644 --- a/src/quick/doc/src/appdevguide/deployment.qdoc +++ b/src/quick/doc/src/appdevguide/deployment.qdoc @@ -189,22 +189,22 @@ project The \c main.qml and \c background.png files will be packaged as resource files. This is done in the \c example.qrc resource collection file: -\quotefile qml/qtbinding/resources/example.qrc +\quotefile ../src/qml/doc/snippets/qml/qtbinding/resources/example.qrc Since \c background.png is a resource file, \c main.qml can refer to it using the relative path specified in \c example.qrc: -\snippet qml/qtbinding/resources/main.qml 0 +\snippet ../src/qml/doc/snippets/qml/qtbinding/resources/main.qml 0 To allow QML to locate resource files correctly, the \c main.cpp loads the main QML file, \c main.qml, as a resource file using the \c qrc scheme: -\snippet qml/qtbinding/resources/main.cpp 0 +\snippet ../src/qml/doc/snippets/qml/qtbinding/resources/main.cpp 0 Finally \c project.pro uses the RESOURCES variable to indicate that \c example.qrc should be used to build the application resources: -\quotefile qml/qtbinding/resources/resources.pro +\quotefile ../src/qml/doc/snippets/qml/qtbinding/resources/resources.pro See \l {The Qt Resource System} for more information. diff --git a/src/quick/doc/src/concepts/input/textinput.qdoc b/src/quick/doc/src/concepts/input/textinput.qdoc index 1809d5050b..8803b9d3b3 100644 --- a/src/quick/doc/src/concepts/input/textinput.qdoc +++ b/src/quick/doc/src/concepts/input/textinput.qdoc @@ -50,10 +50,10 @@ The \e validator types enforce the type and format of \annotatedlist qtquick-text-validator -\snippet doc/snippets/qml/texthandling.qml int validator +\snippet qml/texthandling.qml int validator The validator types bind to \c {TextInput}'s \c validator property. -\snippet doc/snippets/qml/texthandling.qml regexp validator +\snippet qml/texthandling.qml regexp validator The regular expression in the snippet will only allow the inputted text to be \c {fruit basket}. diff --git a/src/quick/doc/src/concepts/modelviewsdata/cppmodels.qdoc b/src/quick/doc/src/concepts/modelviewsdata/cppmodels.qdoc index d9bfee2638..3114bead71 100644 --- a/src/quick/doc/src/concepts/modelviewsdata/cppmodels.qdoc +++ b/src/quick/doc/src/concepts/modelviewsdata/cppmodels.qdoc @@ -49,12 +49,12 @@ via the \e modelData role. Here is a ListView with a delegate that references its model item's value using the \c modelData role: -\snippet examples/quick/modelviews/stringlistmodel/view.qml 0 +\snippet quick/models/stringlistmodel/view.qml 0 A Qt application can load this QML document and set the value of \c myModel to a QStringList: -\snippet examples/quick/modelviews/stringlistmodel/main.cpp 0 +\snippet quick/models/stringlistmodel/main.cpp 0 The complete example is available in Qt's \l {quick/modelviews/stringlistmodel}{examples/quick/modelviews/stringlistmodel} directory. @@ -72,11 +72,11 @@ The following application creates a \c DataObject class that with Q_PROPERTY values that will be accessible as named roles when a QList<DataObject*> is exposed to QML: -\snippet examples/quick/modelviews/objectlistmodel/dataobject.h 0 +\snippet quick/models/objectlistmodel/dataobject.h 0 \dots 4 -\snippet examples/quick/modelviews/objectlistmodel/dataobject.h 1 +\snippet quick/models/objectlistmodel/dataobject.h 1 \codeline -\snippet examples/quick/modelviews/objectlistmodel/main.cpp 0 +\snippet quick/models/objectlistmodel/main.cpp 0 \dots The QObject* is available as the \c modelData property. As a convenience, @@ -84,7 +84,7 @@ the properties of the object are also made available directly in the delegate's context. Here, \c view.qml references the \c DataModel properties in the ListView delegate: -\snippet examples/quick/modelviews/objectlistmodel/view.qml 0 +\snippet quick/models/objectlistmodel/view.qml 0 Note the use of the fully qualified access to the \c color property. The properties of the object are not replicated in the \c model @@ -124,21 +124,21 @@ Here is an application with a QAbstractListModel subclass named \c AnimalModel that has \e type and \e size roles. It reimplements QAbstractItemModel::roleNames() to set the role names for accessing the properties via QML: -\snippet examples/quick/modelviews/abstractitemmodel/model.h 0 +\snippet quick/models/abstractitemmodel/model.h 0 \dots -\snippet examples/quick/modelviews/abstractitemmodel/model.h 1 +\snippet quick/models/abstractitemmodel/model.h 1 \dots -\snippet examples/quick/modelviews/abstractitemmodel/model.h 2 +\snippet quick/models/abstractitemmodel/model.h 2 \codeline -\snippet examples/quick/modelviews/abstractitemmodel/model.cpp 0 +\snippet quick/models/abstractitemmodel/model.cpp 0 \codeline -\snippet examples/quick/modelviews/abstractitemmodel/main.cpp 0 +\snippet quick/models/abstractitemmodel/main.cpp 0 \dots This model is displayed by a ListView delegate that accesses the \e type and \e size roles: -\snippet examples/quick/modelviews/abstractitemmodel/view.qml 0 +\snippet quick/models/abstractitemmodel/view.qml 0 QML views are automatically updated when the model changes. Remember the model must follow the standard rules for model changes and notify the view when diff --git a/src/quick/doc/src/dynamicview-tutorial.qdoc b/src/quick/doc/src/dynamicview-tutorial.qdoc index 3edfdc65c0..12497ef8bb 100644 --- a/src/quick/doc/src/dynamicview-tutorial.qdoc +++ b/src/quick/doc/src/dynamicview-tutorial.qdoc @@ -39,10 +39,10 @@ data to dynamically sort all items in a view. Tutorial chapters: \list 1 -\li \l {tutorials/dynamicview/dynamicview1}{A Simple ListView and Delegate} -\li \l {tutorials/dynamicview/dynamicview2}{Dragging View Items} -\li \l {tutorials/dynamicview/dynamicview3}{Moving Dragged Items} -\li \l {tutorials/dynamicview/dynamicview4}{Sorting Items} +\li \l {quick/tutorials/dynamicview/dynamicview1}{A Simple ListView and Delegate} +\li \l {quick/tutorials/dynamicview/dynamicview2}{Dragging View Items} +\li \l {quick/tutorials/dynamicview/dynamicview3}{Moving Dragged Items} +\li \l {quick/tutorials/dynamicview/dynamicview4}{Sorting Items} \endlist All the code in this tutorial can be found in Qt's \c examples/quick/tutorials/dynamicview @@ -57,19 +57,19 @@ directory. \previouspage QML Dynamic View Ordering Tutorial \nextpage QML Dynamic View Ordering Tutorial 2 - Dragging View Items -\example tutorials/dynamicview/dynamicview1 +\example quick/tutorials/dynamicview/dynamicview1 We begin our application by defining a ListView, a model which will provide data to the view, and a delegate which provides a template for constructing items in the view. The code for the ListView and delegate looks like this: -\snippet tutorials/dynamicview/dynamicview1/dynamicview.qml 0 +\snippet quick/tutorials/dynamicview/dynamicview1/dynamicview.qml 0 The model is defined in a separate QML file which looks like this: -\snippet tutorials/dynamicview/dynamicview1/PetsModel.qml 0 -\snippet tutorials/dynamicview/dynamicview1/PetsModel.qml 1 +\snippet quick/tutorials/dynamicview/dynamicview1/PetsModel.qml 0 +\snippet quick/tutorials/dynamicview/dynamicview1/PetsModel.qml 1 \section2 Walkthrough @@ -79,11 +79,11 @@ is the template from which each item in the ListView is constructed. The \c name, \c age, \c type, and \c size variables referenced in the delegate are sourced from the model data. The names correspond to roles defined in the model. -\snippet tutorials/dynamicview/dynamicview1/dynamicview.qml 1 +\snippet quick/tutorials/dynamicview/dynamicview1/dynamicview.qml 1 The second part of the application is the ListView itself to which we bind the model and delegate. -\snippet tutorials/dynamicview/dynamicview1/dynamicview.qml 2 +\snippet quick/tutorials/dynamicview/dynamicview1/dynamicview.qml 2 */ /*! @@ -94,13 +94,13 @@ The second part of the application is the ListView itself to which we bind the m \previouspage QML Dynamic View Ordering Tutorial 1 - A Simple ListView and Delegate \nextpage QML Dynamic View Ordering Tutorial 3 - Moving Dragged Items -\example tutorials/dynamicview/dynamicview2 +\example quick/tutorials/dynamicview/dynamicview2 Now that we have a visible list of items we want to be able to interact with them. We'll start by extending the delegate so the visible content can be dragged up and down the screen. The updated delegate looks like this: -\snippet tutorials/dynamicview/dynamicview2/dynamicview.qml 0 +\snippet quick/tutorials/dynamicview/dynamicview2/dynamicview.qml 0 \section2 Walkthrough @@ -109,8 +109,8 @@ for mouse events and will allow us to drag the delegate's content item. It also a container for the content item which is important as a delegate's root item is positioned by the view and cannot be moved by other means. -\snippet tutorials/dynamicview/dynamicview2/dynamicview.qml 1 -\snippet tutorials/dynamicview/dynamicview2/dynamicview.qml 2 +\snippet quick/tutorials/dynamicview/dynamicview2/dynamicview.qml 1 +\snippet quick/tutorials/dynamicview/dynamicview2/dynamicview.qml 2 Dragging the content item is enabled by binding it to the MouseArea's \l {QtQuick2::MouseArea::drag.target}{drag.target} property. Because we still want the view to be @@ -120,14 +120,14 @@ timeout has expired it is interpreted as moving the list and if it moves after i dragging an item. To make it more obvious to the user when an item can be dragged we'll change the background color of the content item when the timeout has expired. -\snippet tutorials/dynamicview/dynamicview2/dynamicview.qml 3 +\snippet quick/tutorials/dynamicview/dynamicview2/dynamicview.qml 3 The other thing we'll need to do before an item can be dragged is to unset any anchors on the content item so it can be freely moved around. We do this in a state change that is triggered when the delegate item is held, at the same time we can reparent the content item to the root item so that is above other items in the stacking order and isn't obscured as it is dragged around. -\snippet tutorials/dynamicview/dynamicview2/dynamicview.qml 4 +\snippet quick/tutorials/dynamicview/dynamicview2/dynamicview.qml 4 */ @@ -139,16 +139,16 @@ so that is above other items in the stacking order and isn't obscured as it is d \previouspage QML Dynamic View Ordering Tutorial 2 - Dragging View Items \nextpage QML Dynamic View Ordering Tutorial 4 - Sorting Items -\example examples/quick/tutorials/dynamicview/dynamicview3 +\example quick/tutorials/dynamicview/dynamicview3 The next step in our application to move items within the list as they're dragged so that we can re-order the list. To achieve this we introduce three new elements to our application; VisualDataModel, \l Drag and DropArea. -\snippet tutorials/dynamicview/dynamicview3/dynamicview.qml 0 -\snippet tutorials/dynamicview/dynamicview3/dynamicview.qml 1 -\snippet tutorials/dynamicview/dynamicview3/dynamicview.qml 2 -\snippet tutorials/dynamicview/dynamicview3/dynamicview.qml 5 +\snippet quick/tutorials/dynamicview/dynamicview3/dynamicview.qml 0 +\snippet quick/tutorials/dynamicview/dynamicview3/dynamicview.qml 1 +\snippet quick/tutorials/dynamicview/dynamicview3/dynamicview.qml 2 +\snippet quick/tutorials/dynamicview/dynamicview3/dynamicview.qml 5 \section2 Walkthrough @@ -156,7 +156,7 @@ In order to re-order the view we need to determine when one item has been dragge the Drag attached property we can generate events that are sent to the scene graph whenever the item it is attached to moves. -\snippet tutorials/dynamicview/dynamicview3/dynamicview.qml 1 +\snippet quick/tutorials/dynamicview/dynamicview3/dynamicview.qml 1 Drag events are only sent while the active property is true, so in this example the first event would be sent when the delegate was held with additional event sents when dragging. The @@ -167,7 +167,7 @@ Then we use a DropArea in each view item to determine when the hot spot of the d intersects another item, when a drag enters one of these DropAreas we can move the dragged item to the index of the item it was dragged over. -\snippet tutorials/dynamicview/dynamicview3/dynamicview.qml 3 +\snippet quick/tutorials/dynamicview/dynamicview3/dynamicview.qml 3 To move the items within the view we use a VisualDataModel. The VisualDataModel element is used by the view elements to instantiate delegate items from model data and when constructed explicitly can @@ -181,7 +181,7 @@ To utilize a VisualDataModel with a ListView we bind it to the \l {QtQuick2::Lis property of the view and bind the \l {QtQuick2::VisualDataModel::model}{model} and \l {QtQuick2::VisualDataModel::delegate}{delegate} to the VisualDataModel. -\snippet tutorials/dynamicview/dynamicview3/dynamicview.qml 4 +\snippet quick/tutorials/dynamicview/dynamicview3/dynamicview.qml 4 */ @@ -192,13 +192,13 @@ property of the view and bind the \l {QtQuick2::VisualDataModel::model}{model} a \contentspage QML Dynamic View Ordering Tutorial \previouspage QML Dynamic View Ordering Tutorial 3 - Moving Dragged Items -\example tutorials/dynamicview/dynamicview4 +\example quick/tutorials/dynamicview/dynamicview4 Drag and drop isn't the only way items in a view can be re-ordered, using a VisualDataModel it is also possible to sort items based on model data. To do that we extend our VisualDataModel instance like this: -\snippet tutorials/dynamicview/dynamicview4/dynamicview.qml 0 +\snippet quick/tutorials/dynamicview/dynamicview4/dynamicview.qml 0 \section2 Walkthrough @@ -209,8 +209,8 @@ we want items to first be added to an unsorted group from where we can transfer position in the items group. To do that we clear includeByDefault on the items group and set it on a new group name 'unsorted'. -\snippet tutorials/dynamicview/dynamicview4/dynamicview.qml 1 -\snippet tutorials/dynamicview/dynamicview4/dynamicview.qml 2 +\snippet quick/tutorials/dynamicview/dynamicview4/dynamicview.qml 1 +\snippet quick/tutorials/dynamicview/dynamicview4/dynamicview.qml 2 We sort the items by first finding the position in the items group to insert the first unsorted item and then transfer the item to the items group before moving it to the pre-determined index and @@ -221,19 +221,19 @@ with the \l {QtQuick2::VisualDataModel::get} {get} function. Through the model handle we can access the same model data that is available in a delegate instance of that item and compare against other items to determine relative position. -\snippet tutorials/dynamicview/dynamicview4/dynamicview.qml 3 +\snippet quick/tutorials/dynamicview/dynamicview4/dynamicview.qml 3 The lessThan argument to the sort function is a comparsion function which will determine the order of the list. In this example it can be one of the following: -\snippet tutorials/dynamicview/dynamicview4/dynamicview.qml 4 +\snippet quick/tutorials/dynamicview/dynamicview4/dynamicview.qml 4 A sort is triggered whenever new items are added to the unsorted VisualDataGroup which we are notified of by the \l {QtQuick2::VisualDataGroup::onChanged}{onChanged} handler. If no sort function is currently selected we simply transfer all items from the unsorted group to the items group, otherwise we call sort with the selected sort function. -\snippet tutorials/dynamicview/dynamicview4/dynamicview.qml 5 +\snippet quick/tutorials/dynamicview/dynamicview4/dynamicview.qml 5 Finally when the selected sort order changes we can trigger a full re-sort of the list by moving all items from the items group to the unsorted group, which will trigger the @@ -241,6 +241,6 @@ all items from the items group to the unsorted group, which will trigger the items group in correct order. Note that the \l {QtQuick2::VisualDataGroup::onChanged}{onChanged} handler will not be invoked recursively so there's no issue with it being invoked during a sort. -\snippet tutorials/dynamicview/dynamicview4/dynamicview.qml 6 +\snippet quick/tutorials/dynamicview/dynamicview4/dynamicview.qml 6 */ diff --git a/src/quick/doc/src/tutorial.qdoc b/src/quick/doc/src/tutorial.qdoc index 619f754696..22b2cdbe3e 100644 --- a/src/quick/doc/src/tutorial.qdoc +++ b/src/quick/doc/src/tutorial.qdoc @@ -59,7 +59,7 @@ Tutorial chapters: \title QML Tutorial 1 - Basic Types \contentspage QML Tutorial \previouspage QML Tutorial -\nextpage QML Tutorial 2 - QML Component +\nextpage QML Tutorial 2 - QML Components This first program is a very simple "Hello world" example that introduces some basic QML concepts. The picture below is a screenshot of this program. @@ -68,7 +68,7 @@ The picture below is a screenshot of this program. Here is the QML code for the application: -\snippet tutorials/helloworld/tutorial1.qml 0 +\snippet quick/tutorials/helloworld/tutorial1.qml 0 \section1 Walkthrough @@ -77,11 +77,11 @@ Here is the QML code for the application: First, we need to import the types that we need for this example. Most QML files will import the built-in QML types (like \l{Rectangle}, \l{Image}, ...) that come with Qt, using: -\snippet tutorials/helloworld/tutorial1.qml 3 +\snippet quick/tutorials/helloworld/tutorial1.qml 3 \section2 Rectangle element -\snippet tutorials/helloworld/tutorial1.qml 1 +\snippet quick/tutorials/helloworld/tutorial1.qml 1 We declare a root element of type \l{Rectangle}. It is one of the basic building blocks you can use to create an application in QML. We give it an \c{id} to be able to refer to it later. In this case, we call it "page". @@ -90,7 +90,7 @@ The \l{Rectangle} element contains many other properties (such as \c x and \c y) \section2 Text element -\snippet tutorials/helloworld/tutorial1.qml 2 +\snippet quick/tutorials/helloworld/tutorial1.qml 2 We add a \l Text element as a child of the root Rectangle element that displays the text 'Hello world!'. @@ -133,37 +133,37 @@ The component's filename must always start with a capital letter. Here is the QML code for \c Cell.qml: -\snippet tutorials/helloworld/Cell.qml 0 +\snippet quick/tutorials/helloworld/Cell.qml 0 \section1 Walkthrough \section2 The Cell Component -\snippet tutorials/helloworld/Cell.qml 1 +\snippet quick/tutorials/helloworld/Cell.qml 1 The root element of our component is an \l Item with the \c id \e container. An \l Item is the most basic visual element in QML and is often used as a container for other elements. -\snippet tutorials/helloworld/Cell.qml 4 +\snippet quick/tutorials/helloworld/Cell.qml 4 We declare a \c cellColor property. This property is accessible from \e outside our component, this allows us to instantiate the cells with different colors. This property is just an alias to an existing property - the color of the rectangle that compose the cell (see \l{Property Binding in QML}). -\snippet tutorials/helloworld/Cell.qml 5 +\snippet quick/tutorials/helloworld/Cell.qml 5 We want our component to also have a signal that we call \e clicked with a \e cellColor parameter of type \e color. We will use this signal to change the color of the text in the main QML file later. -\snippet tutorials/helloworld/Cell.qml 2 +\snippet quick/tutorials/helloworld/Cell.qml 2 Our cell component is basically a colored rectangle with the \c id \e rectangle. The \c anchors.fill property is a convenient way to set the size of an element. In this case the rectangle will have the same size as its parent (see \l{anchor-layout}{Anchor-Based Layout}). -\snippet tutorials/helloworld/Cell.qml 3 +\snippet quick/tutorials/helloworld/Cell.qml 3 In order to change the color of the text when clicking on a cell, we create a \l MouseArea element with the same size as its parent. @@ -175,11 +175,11 @@ When this signal is triggered we want to emit our own \e clicked signal with the In our main QML file, we use our \c Cell component to create the color picker: -\snippet tutorials/helloworld/tutorial2.qml 0 +\snippet quick/tutorials/helloworld/tutorial2.qml 0 We create the color picker by putting 6 cells with different colors in a grid. -\snippet tutorials/helloworld/tutorial2.qml 1 +\snippet quick/tutorials/helloworld/tutorial2.qml 1 When the \e clicked signal of our cell is triggered, we want to set the color of the text to the \e cellColor passed as a parameter. We can react to any signal of our component through a property of the name \e 'onSignalName' (see \l{Signal Attributes}). @@ -190,7 +190,7 @@ We can react to any signal of our component through a property of the name \e 'o \inqmlmodule QtQuick 2 \title QML Tutorial 3 - States and Transitions \contentspage QML Tutorial -\previouspage QML Tutorial 2 - QML Component +\previouspage QML Tutorial 2 - QML Components In this chapter, we make this example a little bit more dynamic by introducing states and transitions. @@ -200,11 +200,11 @@ We want our text to move to the bottom of the screen, rotate and become red when Here is the QML code: -\snippet tutorials/helloworld/tutorial3.qml 0 +\snippet quick/tutorials/helloworld/tutorial3.qml 0 \section1 Walkthrough -\snippet tutorials/helloworld/tutorial3.qml 2 +\snippet quick/tutorials/helloworld/tutorial3.qml 2 First, we create a new \e down state for our text element. This state will be activated when the \l MouseArea is pressed, and deactivated when it is released. @@ -213,7 +213,7 @@ The \e down state includes a set of property changes from our implicit \e {defau (the items as they were initially defined in the QML). Specifically, we set the \c y property of the text to \c 160, the rotation to \c 180 and the \c color to red. -\snippet tutorials/helloworld/tutorial3.qml 3 +\snippet quick/tutorials/helloworld/tutorial3.qml 3 Because we don't want the text to appear at the bottom instantly but rather move smoothly, we add a transition between our two states. diff --git a/src/quick/items/qquicklistview.cpp b/src/quick/items/qquicklistview.cpp index 4d081c9437..c475469297 100644 --- a/src/quick/items/qquicklistview.cpp +++ b/src/quick/items/qquicklistview.cpp @@ -2183,7 +2183,7 @@ void QQuickListView::setOrientation(QQuickListView::Orientation orientation) each section. - \snippet examples/quick/modelviews/listview/sections.qml 0 + \snippet quick/views/listview/sections.qml 0 \image qml-listview-sections-example.png @@ -2194,7 +2194,7 @@ void QQuickListView::setOrientation(QQuickListView::Orientation orientation) differing sections will result in a section header being created even if that section exists elsewhere. - \sa {quick/modelviews/listview}{ListView examples} + \sa {quick/views/listview}{ListView examples} */ QQuickViewSection *QQuickListView::sectionCriteria() { diff --git a/src/quick/util/qquickimageprovider.cpp b/src/quick/util/qquickimageprovider.cpp index 3c5610f995..55625a9105 100644 --- a/src/quick/util/qquickimageprovider.cpp +++ b/src/quick/util/qquickimageprovider.cpp @@ -169,7 +169,7 @@ QImage QQuickTextureFactory::image() const an image provider named "colors", and the images to be loaded are "yellow" and "red", respectively: - \snippet examples/qml/imageprovider/imageprovider-example.qml 0 + \snippet qml/imageprovider/imageprovider-example.qml 0 When these images are loaded by QML, it looks for a matching image provider and calls its requestImage() or requestPixmap() method (depending on its @@ -180,9 +180,9 @@ QImage QQuickTextureFactory::image() const requested by the above QML. This implementation dynamically generates QPixmap images that are filled with the requested color: - \snippet examples/qml/imageprovider/imageprovider.cpp 0 + \snippet qml/imageprovider/imageprovider.cpp 0 \codeline - \snippet examples/qml/imageprovider/imageprovider.cpp 1 + \snippet qml/imageprovider/imageprovider.cpp 1 To make this provider accessible to QML, it is registered with the QML engine with a "colors" identifier: diff --git a/src/quick/util/qquickpackage.cpp b/src/quick/util/qquickpackage.cpp index a54d3b07cc..f41bca5153 100644 --- a/src/quick/util/qquickpackage.cpp +++ b/src/quick/util/qquickpackage.cpp @@ -65,15 +65,15 @@ QT_BEGIN_NAMESPACE delegate it should appear in. This allows an item to move between views. - \snippet examples/quick/modelviews/package/Delegate.qml 0 + \snippet quick/views/package/Delegate.qml 0 These named items are used as the delegates by the two views who reference the special \l{VisualDataModel::parts} property to select a model which provides the chosen delegate. - \snippet examples/quick/modelviews/package/view.qml 0 + \snippet quick/views/package/view.qml 0 - \sa {quick/modelviews/package}{Package example}, {declarative/photoviewer}{Photo Viewer example}, QtQml + \sa {quick/views/package}{Package example}, {quick/demos/photoviewer}{Photo Viewer example}, QtQml */ /*! diff --git a/src/quick/util/qquicktransition.cpp b/src/quick/util/qquicktransition.cpp index 4aeb15b613..166ba177bb 100644 --- a/src/quick/util/qquicktransition.cpp +++ b/src/quick/util/qquicktransition.cpp @@ -435,7 +435,7 @@ bool QQuickTransition::running() const This property holds a list of the animations to be run for this transition. - \snippet examples/qml/dynamicscene/dynamicscene.qml top-level transitions + \snippet qml/dynamicscene/dynamicscene.qml top-level transitions The top-level animations are run in parallel. To run them sequentially, define them within a SequentialAnimation: |
