Difference between revisions of "QML1-vs-QML2"

From Qt Wiki
Jump to: navigation, search
 
Line 1: Line 1:
=QtQuick 1 vs QtQuick=
+
[[Category:QtEcosystemTeamTasklist]]
  
==work in progress==
+
= QtQuick 1 vs QtQuick =
  
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.
+
== work in progress ==
  
ideas from Girish:
+
The idea of this wiki page is to have a &quot;some how&amp;quot; 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 change in javascript engines.
+
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
# 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 <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"
+
|''. '''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 |
! '''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 [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 &quot;What's New in Qt Quick 2&amp;quot;:http://doc.qt.io/qt-5.0/qtquick2-whatsnew.html
  
See also the Qt documentation’s [http://doc.qt.io/qt-5.0/qtquick-porting-qt5.html porting guide] ''[qt.io]''
+
See also the Qt documentation's &quot;porting guide&amp;quot;:http://doc.qt.io/qt-5.0/qtquick-porting-qt5.html
  
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]''
+
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
  
New <span class="caps">QML</span> elements in QtQuick2:
+
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.
  
* a new particle system: http://doc.qt.io/qt-5.0/qmlmodule-qtquick-particles2-qtquick-particles-2.html
+
QML element not available in QtQuick 2 anymore:
* 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:
 
 
 
* [http://doc.qt.io/qt-4.8/qml-layoutitem.html LayoutItem] ''[qt.io]'' – Allows declarative UI elements inside Qt’s Graphics View layouts
 
 
 
===Categories:===
 
 
 
* [[:Category:QtEcosystemTeamTasklist|QtEcosystemTeamTasklist]]
 

Revision as of 14:37, 23 February 2015


QtQuick 1 vs QtQuick

work in progress

The idea of this wiki page is to have a "some how&quot; 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:
# 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.

|. 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&quot;:http://doc.qt.io/qt-5.0/qtquick2-whatsnew.html

See also the Qt documentation's "porting guide&quot;:http://doc.qt.io/qt-5.0/qtquick-porting-qt5.html

A description, how to port your Qt 4.x application to Qt 5 is "here&quot;:http://wiki.qt.io/Transition_from_Qt_4.x_to_Qt5

New QML 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
* "Canvas&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-canvas.html - Provides a 2D canvas element
* "CanvasGradient&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-qtquick2-canvasgradient.html - Context2D opaque CanvasGradient interface
* "Context2D&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.
* "TextMetrics&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-qtquick2-textmetrics.html - Context2D TextMetrics interface
* "MultiPointTouchArea&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-multipointtoucharea.html - Enables handling of multiple touch points
* "TouchPoint&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-touchpoint.html - The TouchPoint element describes a touch point in a MultiPointTouchArea
* "PathAnimation&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-pathanimation.html - Animates position along a path
* "PathInterpolator&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-pathinterpolator.html - Allows manual animation along a path
* "AnimationController&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-animationcontroller.html - Allows manual control of animation progress
* "PathArc&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-patharc.html - Defines an arc in a Path
* "PathCurve&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-pathcurve.html - Defines a point on a Catmull-Rom curve in a Path
* "PathSvg&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
* "Accessible&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-accessible.html - Attached property to make components accessible
* "AnimatedSprite&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-animatedsprite.html - The AnimatedSprite element draws a sprite animation
* "Sprite&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-sprite.html - The Sprite element represents a sprite animation
* "SpriteSequence&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-spritesequence.html - The SpriteSequence element draws a sprite animation
* "DragEvent&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-dragevent.html - The DragEvent object provides information about a drag event.
* "DropArea&quot;:http://doc.qt.io/qt-5.0/qml-qtquick2-droparea.html - The DropArea item provides drag and drop handling.

QML element not available in QtQuick 2 anymore: