QML1-vs-QML2: Difference between revisions

From Qt Wiki
Jump to navigation Jump to search
No edit summary
(Updated links to latest documentation)
 
(4 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
[[Category:QtEcosystemTeamTasklist]]
[[Category:QtEcosystemTeamTasklist]]


Line 5: Line 7:
== work in progress ==
== 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.
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:<br /># The change in javascript engines.<br /># What's changed in the js syntax in QML2 (if any)<br /># C++ api changes - like how does we create items these days? How is it different from QML1<br /># Dependency on GLES2 unlike QML1
ideas from Girish:
# The change in javascript engines.
# What's changed in the js syntax in QML2 (if any)
# C++ api changes - like how does we create items these days? How is it different from QML1
# 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.
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''' |<br /> | import QtQuick 1.0 | import QtQuick 2.0|<br /> | import Qt.labs.particles 1.0 | import QtQuick.Particles 2.0|<br /> | import Qt.labs.shaders 1.0 | import QtQuick 2.0|<br /> | import QtQuick 1.0 | import QtQuick.XmlListModel 2.0|<br /> | import QtMobility.location 1.2 | import QtLocation 5.0|<br /> | import QtMobility.sensors 1.3 | import QtSensors 5.0|<br /> | import QtMobility.systeminfo 1.1 | import QtSystemInfo 5.0 |<br /> | import QtMultimediaKit 1.1 | import QtMultimedia 5.0 |<br /> | ./qmlviewer | ./qmlscene |
{| class="wikitable"
! 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 &quot;What's New in Qt Quick 2&amp;quot;: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 &quot;porting guide&amp;quot;: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 &quot;here&amp;quot;: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:<br />* a new particle system: http://doc.qt.io/qt-5.0/qmlmodule-qtquick-particles2-qtquick-particles-2.html<br />* new Shader effects system: http://doc.qt.io/qt-5.0/qtquick-effects-shaders.html<br />* &quot;Canvas&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-canvas.html - Provides a 2D canvas element<br />* &quot;CanvasGradient&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-qtquick2-canvasgradient.html - Context2D opaque CanvasGradient interface<br />* &quot;Context2D&amp;quot;: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.<br />* &quot;TextMetrics&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-qtquick2-textmetrics.html - Context2D TextMetrics interface<br />* &quot;MultiPointTouchArea&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-multipointtoucharea.html - Enables handling of multiple touch points<br />* &quot;TouchPoint&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-touchpoint.html - The TouchPoint element describes a touch point in a MultiPointTouchArea<br />* &quot;PathAnimation&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-pathanimation.html - Animates position along a path<br />* &quot;PathInterpolator&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-pathinterpolator.html - Allows manual animation along a path<br />* &quot;AnimationController&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-animationcontroller.html - Allows manual control of animation progress<br />* &quot;PathArc&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-patharc.html - Defines an arc in a Path<br />* &quot;PathCurve&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-pathcurve.html - Defines a point on a Catmull-Rom curve in a Path<br />* &quot;PathSvg&amp;quot;: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<br />* &quot;Accessible&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-accessible.html - Attached property to make components accessible<br />* &quot;AnimatedSprite&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-animatedsprite.html - The AnimatedSprite element draws a sprite animation<br />* &quot;Sprite&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-sprite.html - The Sprite element represents a sprite animation<br />* &quot;SpriteSequence&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-spritesequence.html - The SpriteSequence element draws a sprite animation<br />* &quot;DragEvent&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-dragevent.html - The DragEvent object provides information about a drag event.<br />* &quot;DropArea&amp;quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-droparea.html - The DropArea item provides drag and drop handling.
New QML elements in QtQuick2:
* [http://doc.qt.io/qt-5/qtquick-effects-particles.html Particles] A new Particle system
* [http://doc.qt.io/qt-5/qml-qtquick-shadereffect.html ShaderEffect] - A new Shader effects system
* [http://doc.qt.io/qt-5/qml-qtquick-canvas.html Canvas] - Provides a 2D canvas element
* [http://doc.qt.io/qt-5/qml-qtquick-canvasgradient.html CanvasGradient] - Context2D opaque CanvasGradient interface
* [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.
* [http://doc.qt.io/qt-5/qml-qtquick-textmetrics.html TextMetrics] - Context2D TextMetrics interface
* [http://doc.qt.io/qt-5/qml-qtquick-multipointtoucharea.html MultiPointTouchArea] - Enables handling of multiple touch points
* [http://doc.qt.io/qt-5/qml-qtquick-touchpoint.html TouchPoint] - The TouchPoint element describes a touch point in a MultiPointTouchArea
* [http://doc.qt.io/qt-5/qml-qtquick-pathanimation.html PathAnimation] - Animates position along a path
* [http://doc.qt.io/qt-5/qml-qtquick-pathinterpolator.html PathInterpolator] - Allows manual animation along a path
* [http://doc.qt.io/qt-5/qml-qtquick-animationcontroller.html AnimationController] - Allows manual control of animation progress
* [http://doc.qt.io/qt-5/qml-qtquick-patharc.html PathArc] - Defines an arc 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
* [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
* [http://doc.qt.io/qt-5/qml-qtquick-accessible.html Accessible] - Attached property to make components accessible
* [http://doc.qt.io/qt-5/qml-qtquick-animatedsprite.html AnimatedSprite] - The AnimatedSprite element draws a sprite animation
* [http://doc.qt.io/qt-5/qml-qtquick-sprite.html Sprite] - The Sprite element represents a sprite animation
* [http://doc.qt.io/qt-5/qml-qtquick-spritesequence.html SpriteSequence] - The SpriteSequence element draws a sprite animation
* [http://doc.qt.io/qt-5/qml-qtquick-dragevent.html DragEvent] - The DragEvent object provides information about a drag event.
* [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

This article may require cleanup to meet the Qt Wiki's quality standards. Reason: Auto-imported from ExpressionEngine.
Please improve this article if you can. Remove the {{cleanup}} tag and add this page to Updated pages list after it's clean.

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: