Difference between revisions of "QML1-vs-QML2"

From Qt Wiki
Jump to: navigation, search
 
(Updated links to latest documentation)
 
(5 intermediate revisions by 3 users not shown)
Line 1: Line 1:
=QtQuick 1 vs QtQuick=
+
{{Cleanup | reason=Auto-imported from ExpressionEngine.}}
  
==work in progress==
+
[[Category:QtEcosystemTeamTasklist]]
  
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 <span class="caps">QML</span> part, not the c++ part. What are new elements, which elements are deprecated, what needs to be changed.
+
= 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:
 
ideas from Girish:
 
 
# The change in javascript engines.
 
# The change in javascript engines.
# What’s changed in the js syntax in QML2 (if any)
+
# 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
+
# C++ api changes - like how does we create items these days? How is it different from QML1
 
# Dependency on GLES2 unlike 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 <span class="caps">QML</span> 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.
  
{| class="infotable line"
+
{| class="wikitable"
! '''QtQuick 1'''
+
! QtQuick 1  
! '''QtQuick 2'''
+
! QtQuick 2  
 
|-
 
|-
| import QtQuick 1.0
+
| import QtQuick 1.0  
 
| import QtQuick 2.0
 
| import QtQuick 2.0
 
|-
 
|-
| import Qt.labs.particles 1.0
+
| import Qt.labs.particles 1.0  
 
| import QtQuick.Particles 2.0
 
| import QtQuick.Particles 2.0
 
|-
 
|-
| import Qt.labs.shaders 1.0
+
| import Qt.labs.shaders 1.0  
 
| import QtQuick 2.0
 
| import QtQuick 2.0
 
|-
 
|-
| import QtQuick 1.0
+
| import QtQuick 1.0  
 
| import QtQuick.XmlListModel 2.0
 
| import QtQuick.XmlListModel 2.0
 
|-
 
|-
| import QtMobility.location 1.2
+
| import QtMobility.location 1.2  
 
| import QtLocation 5.0
 
| import QtLocation 5.0
 
|-
 
|-
| import QtMobility.sensors 1.3
+
| import QtMobility.sensors 1.3  
 
| import QtSensors 5.0
 
| import QtSensors 5.0
 
|-
 
|-
 
| import QtMobility.systeminfo 1.1
 
| import QtMobility.systeminfo 1.1
| import QtSystemInfo 5.0
+
| import QtSystemInfo 5.0  
 
|-
 
|-
| import QtMultimediaKit 1.1
+
| import QtMultimediaKit 1.1  
| import QtMultimedia 5.0
+
| import QtMultimedia 5.0  
 
|-
 
|-
| ./qmlviewer
+
| ./qmlviewer  
| ./qmlscene
+
| ./qmlscene  
 
|}
 
|}
  
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] ''[qt.io]''
+
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 [http://doc.qt.io/qt-5.0/qtquick-porting-qt5.html porting guide] ''[qt.io]''
 
 
 
A description, how to port your Qt 4.x application to Qt 5 is [[Transition from Qt 4.x to Qt5|here]] ''[wiki.qt.io]''
 
 
 
New <span class="caps">QML</span> elements in QtQuick2:
 
 
 
* a new particle system: http://doc.qt.io/qt-5.0/qmlmodule-qtquick-particles2-qtquick-particles-2.html
 
* new Shader effects system: http://doc.qt.io/qt-5.0/qtquick-effects-shaders.html
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-canvas.html Canvas] ''[qt.io]'' – Provides a 2D canvas element
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-qtquick2-canvasgradient.html CanvasGradient] ''[qt.io]'' – Context2D opaque CanvasGradient interface
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-context2d.html Context2D] ''[qt.io]'' – The Context2D <span class="caps">API</span> allows you to draw 2d graphic shapes on the Canvas item.
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-qtquick2-textmetrics.html TextMetrics] ''[qt.io]'' – Context2D TextMetrics interface
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-multipointtoucharea.html MultiPointTouchArea] ''[qt.io]'' – Enables handling of multiple touch points
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-touchpoint.html TouchPoint] ''[qt.io]'' – The TouchPoint element describes a touch point in a MultiPointTouchArea
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-pathanimation.html PathAnimation] ''[qt.io]'' – Animates position along a path
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-pathinterpolator.html PathInterpolator] ''[qt.io]'' – Allows manual animation along a path
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-animationcontroller.html AnimationController] ''[qt.io]'' – Allows manual control of animation progress
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-patharc.html PathArc] ''[qt.io]'' – Defines an arc in a Path
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-pathcurve.html PathCurve] ''[qt.io]'' – Defines a point on a Catmull-Rom curve in a Path
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-pathsvg.html PathSvg] ''[qt.io]'' – Defines a sub-path specified as a <span class="caps">SVG</span> path data string in a Path
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-accessible.html Accessible] ''[qt.io]'' – Attached property to make components accessible
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-animatedsprite.html AnimatedSprite] ''[qt.io]'' – The AnimatedSprite element draws a sprite animation
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-sprite.html Sprite] ''[qt.io]'' – The Sprite element represents a sprite animation
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-spritesequence.html SpriteSequence] ''[qt.io]'' – The SpriteSequence element draws a sprite animation
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-dragevent.html DragEvent] ''[qt.io]'' – The DragEvent object provides information about a drag event.
 
* [http://doc.qt.io/qt-5.0/qml-qtquick2-droparea.html DropArea] ''[qt.io]'' – The DropArea item provides drag and drop handling.
 
  
<span class="caps">QML</span> element not available in QtQuick 2 anymore:
+
See also the Qt documentation's [http://doc.qt.io/qt-5.0/qtquick-porting-qt5.html porting guide]
  
* [http://doc.qt.io/qt-4.8/qml-layoutitem.html LayoutItem] ''[qt.io]'' – Allows declarative UI elements inside Qt’s Graphics View layouts
+
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]
  
===Categories:===
+
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.
  
* [[:Category:QtEcosystemTeamTasklist|QtEcosystemTeamTasklist]]
+
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: