Difference between revisions of "QML1-vs-QML2"

From Qt Wiki
Jump to: navigation, search
(Add "cleanup" tag)
(Updated links to latest documentation)
 
(2 intermediate revisions by 2 users not shown)
Line 17: Line 17:
 
For porting an existing QtQuick 1 application to QtQuick 2 and make use of new features of QtQuick 2, there are some changes in the QML files necessary, which are listed below.
 
For porting an existing QtQuick 1 application to QtQuick 2 and make use of new features of QtQuick 2, there are some changes in the QML files necessary, which are listed below.
  
|''. '''QtQuick 1''' |''. '''QtQuick 2''' |
+
{| class="wikitable"
| import QtQuick 1.0 | import QtQuick 2.0|
+
! QtQuick 1  
| import Qt.labs.particles 1.0 | import QtQuick.Particles 2.0|
+
! QtQuick 2  
| import Qt.labs.shaders 1.0 | import QtQuick 2.0|
+
|-
| import QtQuick 1.0 | import QtQuick.XmlListModel 2.0|
+
| import QtQuick 1.0  
| import QtMobility.location 1.2 | import QtLocation 5.0|
+
| import QtQuick 2.0
| import QtMobility.sensors 1.3 | import QtSensors 5.0|
+
|-
| import QtMobility.systeminfo 1.1 | import QtSystemInfo 5.0 |
+
| import Qt.labs.particles 1.0  
| import QtMultimediaKit 1.1 | import QtMultimedia 5.0 |
+
| import QtQuick.Particles 2.0
| ./qmlviewer | ./qmlscene |
+
|-
 +
| import Qt.labs.shaders 1.0  
 +
| import QtQuick 2.0
 +
|-
 +
| import QtQuick 1.0  
 +
| import QtQuick.XmlListModel 2.0
 +
|-
 +
| import QtMobility.location 1.2  
 +
| import QtLocation 5.0
 +
|-
 +
| import QtMobility.sensors 1.3  
 +
| import QtSensors 5.0
 +
|-
 +
| import QtMobility.systeminfo 1.1
 +
| import QtSystemInfo 5.0  
 +
|-
 +
| import QtMultimediaKit 1.1  
 +
| import QtMultimedia 5.0  
 +
|-
 +
| ./qmlviewer  
 +
| ./qmlscene  
 +
|}
  
For a more detailed list of changes in QtQuick 2, see "What's New in Qt Quick 2":http://doc.qt.io/qt-5.0/qtquick2-whatsnew.html
+
For a more detailed list of changes in QtQuick 2, see [http://doc.qt.io/qt-5.0/qtquick2-whatsnew.html What's New in Qt Quick 2]
  
See also the Qt documentation's "porting guide":http://doc.qt.io/qt-5.0/qtquick-porting-qt5.html
+
See also the Qt documentation's [http://doc.qt.io/qt-5.0/qtquick-porting-qt5.html porting guide]
  
A description, how to port your Qt 4.x application to Qt 5 is "here":http://wiki.qt.io/Transition_from_Qt_4.x_to_Qt5
+
A description, how to port your Qt 4.x application to Qt 5 is [http://wiki.qt.io/Transition_from_Qt_4.x_to_Qt5 here]
  
 
New QML elements in QtQuick2:
 
New QML elements in QtQuick2:
* a new particle system: http://doc.qt.io/qt-5.0/qmlmodule-qtquick-particles2-qtquick-particles-2.html
+
* [http://doc.qt.io/qt-5/qtquick-effects-particles.html Particles] A new Particle system
* new Shader effects system: http://doc.qt.io/qt-5.0/qtquick-effects-shaders.html
+
* [http://doc.qt.io/qt-5/qml-qtquick-shadereffect.html ShaderEffect] - A new Shader effects system
* "Canvas":http://doc.qt.io/qt-5.0/qml-qtquick2-canvas.html - Provides a 2D canvas element
+
* [http://doc.qt.io/qt-5/qml-qtquick-canvas.html Canvas] - Provides a 2D canvas element
* "CanvasGradient":http://doc.qt.io/qt-5.0/qml-qtquick2-qtquick2-canvasgradient.html - Context2D opaque CanvasGradient interface
+
* [http://doc.qt.io/qt-5/qml-qtquick-canvasgradient.html CanvasGradient] - Context2D opaque CanvasGradient interface
* "Context2D":http://doc.qt.io/qt-5.0/qml-qtquick2-context2d.html - The Context2D API allows you to draw 2d graphic shapes on the Canvas item.
+
* [http://doc.qt.io/qt-5/qml-qtquick-context2d.html Context2D] - The Context2D API allows you to draw 2d graphic shapes on the Canvas item.
* "TextMetrics":http://doc.qt.io/qt-5.0/qml-qtquick2-qtquick2-textmetrics.html - Context2D TextMetrics interface
+
* [http://doc.qt.io/qt-5/qml-qtquick-textmetrics.html TextMetrics] - Context2D TextMetrics interface
* "MultiPointTouchArea":http://doc.qt.io/qt-5.0/qml-qtquick2-multipointtoucharea.html - Enables handling of multiple touch points
+
* [http://doc.qt.io/qt-5/qml-qtquick-multipointtoucharea.html MultiPointTouchArea] - Enables handling of multiple touch points
* "TouchPoint":http://doc.qt.io/qt-5.0/qml-qtquick2-touchpoint.html - The TouchPoint element describes a touch point in a MultiPointTouchArea
+
* [http://doc.qt.io/qt-5/qml-qtquick-touchpoint.html TouchPoint] - The TouchPoint element describes a touch point in a MultiPointTouchArea
* "PathAnimation":http://doc.qt.io/qt-5.0/qml-qtquick2-pathanimation.html - Animates position along a path
+
* [http://doc.qt.io/qt-5/qml-qtquick-pathanimation.html PathAnimation] - Animates position along a path
* "PathInterpolator":http://doc.qt.io/qt-5.0/qml-qtquick2-pathinterpolator.html - Allows manual animation along a path
+
* [http://doc.qt.io/qt-5/qml-qtquick-pathinterpolator.html PathInterpolator] - Allows manual animation along a path
* "AnimationController":http://doc.qt.io/qt-5.0/qml-qtquick2-animationcontroller.html - Allows manual control of animation progress
+
* [http://doc.qt.io/qt-5/qml-qtquick-animationcontroller.html AnimationController] - Allows manual control of animation progress
* "PathArc":http://doc.qt.io/qt-5.0/qml-qtquick2-patharc.html - Defines an arc in a Path
+
* [http://doc.qt.io/qt-5/qml-qtquick-patharc.html PathArc] - Defines an arc in a Path
* "PathCurve":http://doc.qt.io/qt-5.0/qml-qtquick2-pathcurve.html - Defines a point on a Catmull-Rom curve in a Path
+
* [http://doc.qt.io/qt-5/qml-qtquick-pathcurve.html PathCurve] - Defines a point on a Catmull-Rom curve in a Path
* "PathSvg":http://doc.qt.io/qt-5.0/qml-qtquick2-pathsvg.html - Defines a sub-path specified as a SVG path data string in a Path
+
* [http://doc.qt.io/qt-5/qml-qtquick-pathsvg.html PathSvg] - Defines a sub-path specified as a SVG path data string in a Path
* "Accessible":http://doc.qt.io/qt-5.0/qml-qtquick2-accessible.html - Attached property to make components accessible
+
* [http://doc.qt.io/qt-5/qml-qtquick-accessible.html Accessible] - Attached property to make components accessible
* "AnimatedSprite":http://doc.qt.io/qt-5.0/qml-qtquick2-animatedsprite.html - The AnimatedSprite element draws a sprite animation
+
* [http://doc.qt.io/qt-5/qml-qtquick-animatedsprite.html AnimatedSprite] - The AnimatedSprite element draws a sprite animation
* "Sprite":http://doc.qt.io/qt-5.0/qml-qtquick2-sprite.html - The Sprite element represents a sprite animation
+
* [http://doc.qt.io/qt-5/qml-qtquick-sprite.html Sprite] - The Sprite element represents a sprite animation
* "SpriteSequence":http://doc.qt.io/qt-5.0/qml-qtquick2-spritesequence.html - The SpriteSequence element draws a sprite animation
+
* [http://doc.qt.io/qt-5/qml-qtquick-spritesequence.html SpriteSequence] - The SpriteSequence element draws a sprite animation
* "DragEvent":http://doc.qt.io/qt-5.0/qml-qtquick2-dragevent.html - The DragEvent object provides information about a drag event.
+
* [http://doc.qt.io/qt-5/qml-qtquick-dragevent.html DragEvent] - The DragEvent object provides information about a drag event.
* "DropArea":http://doc.qt.io/qt-5.0/qml-qtquick2-droparea.html - The DropArea item provides drag and drop handling.
+
* [http://doc.qt.io/qt-5/qml-qtquick-droparea.html DropArea] - The DropArea item provides drag and drop handling.
  
 
QML element not available in QtQuick 2 anymore:
 
QML element not available in QtQuick 2 anymore:

Latest revision as of 22:13, 18 March 2018

QtQuick 1 vs QtQuick

work in progress

The idea of this wiki page is to have a "some how" porting guide for customers, having a Qt 4.8/QtQuick 1 application, to get a Qt5/QtQuick 2 application. The focus is on the QML part, not the c++ part. What are new elements, which elements are deprecated, what needs to be changed.

ideas from Girish:

  1. The change in javascript engines.
  2. What's changed in the js syntax in QML2 (if any)
  3. C++ api changes - like how does we create items these days? How is it different from QML1
  4. Dependency on GLES2 unlike QML1

For porting an existing QtQuick 1 application to QtQuick 2 and make use of new features of QtQuick 2, there are some changes in the QML files necessary, which are listed below.

QtQuick 1 QtQuick 2
import QtQuick 1.0 import QtQuick 2.0
import Qt.labs.particles 1.0 import QtQuick.Particles 2.0
import Qt.labs.shaders 1.0 import QtQuick 2.0
import QtQuick 1.0 import QtQuick.XmlListModel 2.0
import QtMobility.location 1.2 import QtLocation 5.0
import QtMobility.sensors 1.3 import QtSensors 5.0
import QtMobility.systeminfo 1.1 import QtSystemInfo 5.0
import QtMultimediaKit 1.1 import QtMultimedia 5.0
./qmlviewer ./qmlscene

For a more detailed list of changes in QtQuick 2, see What's New in Qt Quick 2

See also the Qt documentation's porting guide

A description, how to port your Qt 4.x application to Qt 5 is here

New QML elements in QtQuick2:

  • Particles A new Particle system
  • ShaderEffect - A new Shader effects system
  • Canvas - Provides a 2D canvas element
  • CanvasGradient - Context2D opaque CanvasGradient interface
  • Context2D - The Context2D API allows you to draw 2d graphic shapes on the Canvas item.
  • TextMetrics - Context2D TextMetrics interface
  • MultiPointTouchArea - Enables handling of multiple touch points
  • TouchPoint - The TouchPoint element describes a touch point in a MultiPointTouchArea
  • PathAnimation - Animates position along a path
  • PathInterpolator - Allows manual animation along a path
  • AnimationController - Allows manual control of animation progress
  • PathArc - Defines an arc in a Path
  • PathCurve - Defines a point on a Catmull-Rom curve in a Path
  • PathSvg - Defines a sub-path specified as a SVG path data string in a Path
  • Accessible - Attached property to make components accessible
  • AnimatedSprite - The AnimatedSprite element draws a sprite animation
  • Sprite - The Sprite element represents a sprite animation
  • SpriteSequence - The SpriteSequence element draws a sprite animation
  • DragEvent - The DragEvent object provides information about a drag event.
  • DropArea - The DropArea item provides drag and drop handling.

QML element not available in QtQuick 2 anymore: